Back

posts /
总算是到这了

"这人用 Astro 重写了个人主页"
发布时间 2024/10/7
标签
#frontend , #astro

你现在看到的这玩意 连滚带爬 了 3个月 才来到了这里。

NOTE

为啥 究其原因吧，大概是因为这人 反反复复 地改了又改回去造成的 🤣👉。

但这个新的个人主页貌似使用了 Astro + Solid 构建，速度和页面都多了许多，并且部署在了 Netlify 上。

你或许也可以在 Github 看到这撮鸟是怎么胡搞这个主页的。

🤔一些问题

在搞这玩意时，遇到了许多问题😂。

代码块的复制

一开始这是用 expressive-code 实现的，后来才发现太突兀了，于是 💩拉了一坨大的，写了个 remark 插件。

但这直接把 Astro 自带的 shiki 代码高亮 给干爆了，只能再写一下。

这下面就是再用 shiki 写的插件的一部分：

import type {
  Blockquote,
  Code,
  FootnoteDefinition,
  Html,
  ListItem,
  Root,
} from "mdast";
import { visit } from "unist-util-visit";
import { createHighlighter, type BundledLanguage } from "shiki";

const remarkCodeblock = () => async (tree: Root) => {
  const tasks: Promise<void>[] = [];
  const loadedLanguages = new Set<string>();
  const highlighter = await createHighlighter({
    themes: ["github-dark", "github-light"],
    langs: Array.from(loadedLanguages),
  });
  const highlight = async (value: string, lang: string) => {
    try {
      if (!loadedLanguages.has(lang))
        await highlighter.loadLanguage(lang as BundledLanguage);
      return highlighter.codeToHtml(value, {
        lang,
        themes: {
          dark: "github-dark",
          light: "github-light",
        },
      });
    } catch {
      throw new Error("Failed to highlight codes");
    }
  };

  visit(tree, "code", (node, index, parent) =>
    tasks.push(buildCodeblock(node, highlight, index, parent)),
  );
  await Promise.all(tasks);

  return tree;
};
ts

策死的孤岛架构

这 Astro 用了个孤岛架构来隔离 UI 组件，但这就造成 astro-icon 没办法在 我的 Solid 组件 中使用。

为此我又用了 uniplugin-icon 和 lucide ，但感觉这会把项目撑爆了🥵。

bowl

离谱的 Netlify

一开始 Netlify 直接把我干报废了，一直出现这样的信息：

netlify 我让你飞起来

后来跟它 比划比划 才把我给解救出来（

和 netlify 比划比划

🔭致谢

这个玩意好像参考了好几个 Astro 主题🤓 ：

但最后如你所见，它还是在这了，所以就凑合着用吧。