shiro Memo - 刘耀文

shiro Upgrade#

mkdir shiro
cd shiro
wget https://raw.githubusercontent.com/Innei/Shiro/main/docker-compose.yml
wget https://raw.githubusercontent.com/Innei/Shiro/main/.env.template .env

vim .env # Modify your ENV variables
docker compose up -d

docker compose pull # Update images in the future

LinkCard Component Usage#

Configuration (Refer to Extra Features | Mix Space (mx-space.js.org))#

GitHub: By default, it is accessed directly in the browser, but it may be subject to rate limits. You can fill in GH_TOKEN to ensure API accessibility.
TMDB: You must fill in TMDB_API_KEY to correctly parse tmdb links. Refer to https://post.smzdm.com/p/a5op4w33/ to obtain the TOKEN.

Usage#

Extended Syntax only has gh and gh-commit syntax, others are not found. By checking the source code LinkCard.tsx - Shiro [GitHub] - Visual Studio Code - GitHub, the following types are found:#

The source supports the following types:

<LinkCard source="gh-commit" id="mx-space/kami/commit/e1eee4136c21ab03ab5690e17025777984c362a0">

export enum LinkCardSource {
  GHRepo = 'gh-repo',
  Self = 'self',
  MixSpace = 'mx-space',
  GHCommit = 'gh-commit',
  GHPr = 'gh-pr',
  TMDB = 'tmdb',
}

Next, let's look at the way to request data and find out how to fill in the id.

github

<LinkCard source="gh-repo" id="owner/repo">
Actual request: https://api.github.com/repos/${owner}/${repo}

GitHubCommitsad

username/repo/commit/commitId
<LinkCard source="gh-commit" id="username/repo/commit/commitId">
Actual request: https://api.github.com/repos/${owner}/${repo}/commits/${commitId}

GitHubPR

${owner}/${repo}/${pr}
<LinkCard source="gh-pr" id="owner/repo/pr">
Actual request: https://api.github.com/repos/${owner}/${repo}/pulls/${prNumber}

MxSpace

posts/cate/slug or notes/nid
<LinkCard source="mx-space" id="posts/cate/slugr"> or <LinkCard source="mx-space" id="notes/nid">
Code logic:
if (type === 'posts') {
    const [cate, slug] = rest
    const response = await apiClient.post.getPost(cate, slug)
    data = response
    setFullUrl(`/posts/${cate}/${slug}`)
  } else if (type === 'notes') {
    const [nid] = rest
    const response = await apiClient.note.getNoteById(+nid)
    data = response.data
    setFullUrl(`/notes/${nid}`)
  }

TheMovieDB

tv/id or movie/id
<LinkCard source="tmdb" id="tv/id"> or <LinkCard source="tmdb" id="movie/id">

Issue with TMDB Requests#

Solution 1#

The simplest solution I think is to add a proxy to the server, but I didn't choose this because it's troublesome to maintain a set of proxy rules and subscriptions for the server.

Solution 2#

Use the worker in CloudFlare to proxy the TMDB requests. The principle is to send the requests to CloudFlare first, and let CloudFlare request the data for us, because CloudFlare is not blocked. However, the default domain workers.dev is blocked, so you need to bind your own domain.

Register a domain using namesilo, there are many tutorials online, and then transfer it to CloudFlare. I won't repeat the tutorial here.

Create a worker in CloudFlare

Here, I modified the code from Innei's repository and deployed it to the worker.

export default {
  async fetch(request) {
    // Parse the path and query parameters from the request
    const url = new URL(request.url);
    const pathname = url.pathname.split('/').slice(3);
    const query = url.searchParams;

    query.delete('all'); // Delete unnecessary query parameters

    // Set the allowed path types and length
    const allowedTypes = ['tv', 'movie'];
    const allowedPathLength = 2;
    if (
      pathname.length > allowedPathLength ||
      !allowedTypes.includes(pathname[0])
    ) {
      return new Response('This request is not allowed', { status: 400 });
    }

    const searchString = query.toString();

    // TMDB API Key
    const TMDB_API_KEY = "************************"; /

    // Check if the API key exists
    if (!TMDB_API_KEY) {
      return new Response('TMDB_API_KEY is not set', { status: 500 });
    }

    // Build the complete URL for the TMDB API
    const apiUrl = `https://api.themoviedb.org/3/${pathname.join('/')}${
      searchString ? `?${searchString}&api_key=${TMDB_API_KEY}` : `?api_key=${TMDB_API_KEY}`
    }`;

    try {
      // Set the request headers
      const headers = new Headers();
      headers.set(
        'User-Agent',
        'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko), Shiro',
      );

      // Send the request to the TMDB API
      const response = await fetch(apiUrl, { headers });
      const data = await response.json();

      // Return the response
      return new Response(JSON.stringify(data), {
        headers: { 'Content-Type': 'application/json' },
      });
    } catch (error) {
      return new Response('Error fetching data', { status: 500 });
    }
  }
}

After setting it up, it should look like this:

Bind the domain from step 1 to the current worker. After setting it up, it should look like this:

Now you can access the TMDB API through your custom domain:

https://xxxxxx.xxx/api/tmdb/movie/1299537?language=zh-CN

Reverse proxy the access address of shiro to the newly deployed worker
```
location /api/tmdb {
    proxy_pass http://liuyaowen.top;
    proxy_set_header Host liuyaowen.top;

}
```
Note that the line proxy_set_header Host liuyaowen.top; must be modified, otherwise you will see the Please enable cookies. Error 1001 page.
Finally, when you access your notes, you may encounter cross-origin issues because the domain in CloudFlare is different from your website's domain. Therefore, you need to configure cross-origin settings. In CloudFlare, configure your domain and add a transformation rule.
Now, you can use the LinkCard component of TMDB happily.

This article is synchronized and updated to xLog by Mix Space.
The original link is https://me.liuyaowen.club/notes/2