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, access directly through the browser, may be subject to rate limit, 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, check the source code [LinkCard.tsx - Shiro GitHub] - Visual Studio Code - GitHub to know the following types#

Among them, 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',
}

Then look at the way to request data and find out how to fill in 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 Request Access#

Solution 1#

I think the simplest solution is to add a proxy to the server, but I didn't choose this option 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 request. The principle is to send the request to CloudFlare first, and let CloudFlare request the data for us, because CloudFlare is not blocked, but 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 of innei's to deploy the code 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'); // Remove 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',
      );

      // Make 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 up, it looks like this

Bind the domain from step 1 to the current worker, after setting up, it looks 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 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 will find that there is a cross-origin issue. Because the domain in CloudFlare is different from the domain of your website, you need to configure cross-origin access. 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