feat: 显示文章 metadata 中的 images。

2022-09-24 01:55:41 +00:00 · 2022-09-24 01:55:41 +00:00 · d7c65cf444
commit d7c65cf444
parent 45af8732c0
4 changed files with 81 additions and 18 deletions
--- a/.devcontainer/devcontainer.json
+++ b/.devcontainer/devcontainer.json
@ -17,12 +17,32 @@
    // Configure properties specific to VS Code.
    "vscode": {
      // Add the IDs of extensions you want installed when the container is created.
-      "extensions": ["dbaeumer.vscode-eslint"]
+      "extensions": [
+        "dbaeumer.vscode-eslint",
+        "formulahendry.auto-rename-tag",
+        "aaron-bond.better-comments",
+        "bierner.color-info",
+        "ldez.ignore-files",
+        "gooooloo.smartquote",
+        "wmaurer.change-case",
+        "streetsidesoftware.code-spell-checker",
+        "naumovs.color-highlight",
+        "EditorConfig.EditorConfig",
+        "mhutchie.git-graph",
+        "donjayamanne.githistory",
+        "ecmel.vscode-html-css",
+        "yzhang.markdown-all-in-one",
+        "christian-kohler.path-intellisense",
+        "esbenp.prettier-vscode",
+        "shardulm94.trailing-spaces",
+        "lihui.vs-color-picker",
+        "bradlc.vscode-tailwindcss"
+      ]
    }
  },

  // Use 'forwardPorts' to make a list of ports inside the container available locally.
-  // "forwardPorts": [],
+  "forwardPorts": [3000],

  // Use 'postCreateCommand' to run commands after the container is created.
  // "postCreateCommand": "yarn install",
@ -35,5 +55,6 @@
  },
  "mounts": [
    "source=${localEnv:HOME}${localEnv:USERPROFILE}/.ssh,target=/home/node/.ssh,type=bind,consistency=cached"
-  ]
+  ],
+  "postStartCommand": "npm ci && npm run dev"
 }
--- a/data/blog/hosting-verdaccio-with-docker-and-caddy.md
+++ b/data/blog/hosting-verdaccio-with-docker-and-caddy.md
@ -4,6 +4,10 @@ date: '2022-09-23'
 tags: ['Verdaccio', 'Self-Hosted', 'Docker', 'Caddy', 'registry', 'Node.js']
 draft: false
 summary: 作为靠着 JavaScript 生态吃饭的 Web 开发者，自建一个 Node regsitry 是很有必要的，我这次继续选择 Verdaccio 来搭建存储库。这次使用 Docker Compose 部署 Verdaccio，并将 Caddy 用于反向代理该服务。
+images:
+  [
+    'https://pan.ivanli.cc/api/v3/file/source/2233/verdaccio.png?sign=qpoeADXzbhHk2MY5CehgTftUJ67pnUj-Ylko9D5jscU%3D%3A0',
+  ]
 ---

 ## 为何自建存储库？
@ -19,12 +23,14 @@ summary: 作为靠着 JavaScript 生态吃饭的 Web 开发者，自建一个 No
 ## 如何自建存储库

 已有环境：
-  - Docker, Docker Compose
-  - Caddy (in Docker)
+
+- Docker, Docker Compose
+- Caddy (in Docker)
  - 网络：`caddy`

 新增：
-  - Verdaccio
+
+- Verdaccio

 接下来使用 Docker Compose 部署 Verdaccio，并将其加入到 `caddy` 网络中，之后配置 Caddy，使其反向代理 Verdaccio。

@ -33,7 +39,7 @@ summary: 作为靠着 JavaScript 生态吃饭的 Web 开发者，自建一个 No
 创建文件 `docker-compose.yml`：

 ```yml {9,16-17} showLineNumbers
-version: "3,16-17"
+version: '3'

 networks:
  caddy:
@ -48,8 +54,8 @@ services:
      - caddy
    expose:
      - 4873
-#   environment:
-#     VERDACCIO_PUBLIC_URL: "https://node-registry.ivanli.cc"
+    #   environment:
+    #     VERDACCIO_PUBLIC_URL: "https://node-registry.ivanli.cc"
    volumes:
      - ./verdaccio:/verdaccio/conf
      - verdaccio-storage-data:/verdaccio/storage
@ -60,7 +66,7 @@ volumes:
  verdaccio-plugins-data:
 ```

-上面第 9 行可以看到，我现在（2022年09月22日）是使用不是正式版本，因为当前的正式版有个缺陷，就是无法正确读取到反向代理提供的 `X-Forwarded-Proto`，这有可能导致访问问题。如果使用正式版本，需要加上第 17 行的环境变量。
+上面第 9 行可以看到，我现在（2022 年 09 月 22 日）是使用不是正式版本，因为当前的正式版有个缺陷，就是无法正确读取到反向代理提供的 `X-Forwarded-Proto`，这有可能导致访问问题。如果使用正式版本，需要加上第 17 行的环境变量。

 **不要启动 compose**，因为你还没有配置文件。当然启动了也没关系，无伤大雅。

@ -68,6 +74,7 @@ volumes:

 因为前面将配置文件目录 `verdaccio/conf` 设为了 `verdaccio`，所以：
 创建配置文件 `verdaccio/config.yaml`：
+
 ```zsh {1,2} showLineNumbers
 storage: /verdaccio/storage
 plugins: /verdaccio/plugins
@ -107,6 +114,7 @@ web:
 因为我们使用了 `bcrypt` 算法保存密码，所以可以借助 [Bcrypt-Generator.com](https://bcrypt-generator.com/) 生成保存的密码。

 创建文件：`verdaccio/htpasswd`:
+
 ```htpasswd
 admin:$2a$12$9xxxxxxxxxxxxxxlO.slh2k2
 ```
--- a/layouts/PostLayout.js
+++ b/layouts/PostLayout.js
@ -7,18 +7,44 @@ import Tag from '@/components/Tag'
 import siteMetadata from '@/data/siteMetadata'
 import Comments from '@/components/comments'
 import ScrollTopAndComment from '@/components/ScrollTopAndComment'
+import { useMemo } from 'react'

 const editUrl = (fileName) => `${siteMetadata.siteRepo}/raw/master/data/blog/${fileName}`
 const discussUrl = (slug) =>
  `https://mobile.twitter.com/search?q=${encodeURIComponent(
    `${siteMetadata.siteUrl}/blog/${slug}`
  )}`
+const Copyright = () => (
+  <a
+    rel="license"
+    href="http://creativecommons.org/licenses/by-sa/4.0/"
+    className="inline-flex self-center"
+  >
+    <Image
+      className="border-0"
+      alt="知识共享许可协议"
+      width="88"
+      height="15"
+      src="https://i.creativecommons.org/l/by-sa/4.0/80x15.png"
+    />
+  </a>
+)

 const postDateTemplate = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' }

 export default function PostLayout({ frontMatter, authorDetails, next, prev, children }) {
  const { slug, fileName, date, title, images, tags } = frontMatter

+  const headerStyles = useMemo(
+    () =>
+      images?.[0]
+        ? {
+            backgroundImage: `url(${images[0]})`,
+          }
+        : {},
+    [images]
+  )
+
  return (
    <SectionContainer>
      <BlogSEO
@ -29,8 +55,18 @@ export default function PostLayout({ frontMatter, authorDetails, next, prev, chi
      <ScrollTopAndComment />
      <article>
        <div className="xl:divide-y xl:divide-gray-200 xl:dark:divide-gray-700">
-          <header className="pt-6 xl:pb-6">
-            <div className="space-y-1 text-center">
+          <header className="relative h-48 pt-6 xl:pb-6">
+            {images?.[0] && (
+              <Image
+                alt="background"
+                layout="fill"
+                objectFit="cover"
+                src={images[0]}
+                style={headerStyles}
+                className="blur-xs -z-10 opacity-50 bg-blend-soft-light"
+              />
+            )}
+            <div className="space-y-5 text-center">
              <dl className="space-y-10">
                <div>
                  <dt className="sr-only">Published on</dt>
@ -87,10 +123,8 @@ export default function PostLayout({ frontMatter, authorDetails, next, prev, chi
            </dl>
            <div className="divide-y divide-gray-200 dark:divide-gray-700 xl:col-span-3 xl:row-span-2 xl:pb-0">
              <div className="prose max-w-none pt-10 pb-8 dark:prose-dark">{children}</div>
-              <div className="pt-6 pb-6 text-sm text-gray-700 dark:text-gray-300">
-                <Link href={discussUrl(slug)} rel="nofollow">
-                  {'Discuss on Twitter'}
-                </Link>
+              <div className="flex items-center pt-6 pb-6 text-sm text-gray-700 dark:text-gray-300">
+                <Copyright />
                {` • `}
                <Link href={editUrl(fileName)}>{'View source'}</Link>
              </div>
--- a/next.config.js
+++ b/next.config.js
@ -59,7 +59,7 @@ module.exports = withBundleAnalyzer({
    dirs: ['pages', 'components', 'lib', 'layouts', 'scripts'],
  },
  images: {
-    domains: ['pan.ivanli.cc'],
+    domains: ['pan.ivanli.cc', 'i.creativecommons.org'],
  },
  async headers() {
    return [