feat: fix missing url

astro.config.mjs

@@ -1,16 +1,21 @@
 import { defineConfig } from "astro/config";
 import mdx from "@astrojs/mdx";
-import remarkToc from "remark-toc";
-import rehypeKatex from "rehype-katex";
-import remarkMath from "remark-math";
 import sitemap from "@astrojs/sitemap";
 import tailwind from "@astrojs/tailwind";
+
+import remarkHint from "remark-hint";
+import remarkToc from "remark-toc";
+import remarkMath from "remark-math";
+import rehypeKatex from "rehype-katex";
+import { rehypeAccessibleEmojis } from "rehype-accessible-emojis";
 import {
   remarkReadingTime,
   remarkReadmore,
-  remarkMentions,
+  remarkContentProcesser,
   remarkRawString,
+  remarkTagFounder,
 } from "./remark.mjs";
+import slugify from "slugify";
 import cloudflare from "@astrojs/cloudflare";
 
 export default defineConfig({
@@ -25,12 +30,14 @@ export default defineConfig({
     remarkPlugins: [
       remarkMath,
       remarkToc,
+      remarkHint,
       remarkReadingTime,
+      [remarkTagFounder, { usernameLink: (username) => `/tags/${username}` }],
+      remarkContentProcesser,
       remarkReadmore,
-      remarkMentions,
       remarkRawString,
     ],
-    rehypePlugins: [rehypeKatex],
+    rehypePlugins: [rehypeKatex, rehypeAccessibleEmojis],
     gfm: true,
   },
   integrations: [
@@ -39,6 +46,7 @@ export default defineConfig({
     mdx(),
   ],
   strictNullChecks: true,
+  allowJS: true,
 
   output: "server",
   adapter: cloudflare({

package.json

@@ -28,11 +28,17 @@
 		"html-entities": "^2.3.3",
 		"lodash": "^4.17.21",
 		"markdown-it": "^13.0.2",
+		"mdast-util-find-and-replace": "^3.0.1",
 		"mdast-util-to-string": "^4.0.0",
 		"meilisearch": "^0.35.0",
 		"reading-time": "^1.5.0",
+		"rehype-accessible-emojis": "^0.3.2",
+		"rehype-stringify": "^10.0.0",
+		"rehype-truncate": "^1.2.2",
+		"remark-hint": "^1.0.10",
 		"sanitize-html": "^2.11.0",
 		"shiki": "^0.14.4",
+		"slugify": "^1.6.6",
 		"tailwindcss": "^3.3.3"
 	},
 	"devDependencies": {

remark.mjs

@@ -29,24 +29,70 @@ export function remarkReadmore() {
   };
 }
 
-export function remarkContentProcress() {
-  const links = []
-  const images = []
+import { findAndReplace } from "mdast-util-find-and-replace";
+import slugify from "slugify";
+const userGroup = "[\\da-z][-\\da-z_]{0,38}";
+const mentionRegex = new RegExp("(?:^|\\s)\\#(" + userGroup + ")", "gi");
+
+export const remarkTagFounder = (
+  opts = { usernameLink: (/** @type {string} */ username) => `/${username}` }
+) => {
+  let tags = [];
+  let lang = "";
+
+  const replaceMention = (value, username) => {
+    tags.push(slugify(username, { lower: true }));
+
+    let whitespace = [];
+
+    // Separate leading white space
+    if (value.indexOf("#") > 0) {
+      whitespace.push({
+        type: "text",
+        value: value.substring(0, value.indexOf("#")),
+      });
+    }
+
+    return [
+      ...whitespace,
+      {
+        type: "link",
+        url: `/${lang}/tags/${slugify(username, { lower: true })}`,
+        children: [
+          { type: "text", value: value.trim() }, // Trim the username here
+        ],
+      },
+    ];
+  };
+
+  return (tree, _file) => {
+    lang = _file.history[0].includes("/en/") ? "en" : "zh";
+    tags = [];
+
+    findAndReplace(tree, [[mentionRegex, replaceMention]]);
+
+    _file.data.astro.frontmatter.tags = tags;
+  };
+};
+
+export const remarkContentProcesser = () => {
+  const links = [];
+  const images = [];
   const looping = (node) => {
     // console.log(node)
-    if (node.type === "link" ) {
-      links.push({url: node.url, title: toString(node.children)})
+    if (node.type === "link") {
+      links.push({ url: node.url, title: toString(node.children) });
     }
     if (node.type === "image") {
-      images.push({alt: node.alt, url: node.url})
+      images.push({ alt: node.alt, url: node.url });
     }
     if (node.children) {
-      node.children.forEach(item => looping(item));
+      node.children.forEach((item) => looping(item));
     }
-  }
-  return function (tree, { data, value }) {
-    looping(tree)
-    data.astro.frontmatter.links = links
-    data.astro.frontmatter.images = links
   };
-}
+  return (tree, { data, value }) => {
+    looping(tree);
+    data.astro.frontmatter.links = links;
+    data.astro.frontmatter.images = links;
+  };
+};

src/components/Tags.astro

@@ -1,23 +1,41 @@
 ---
-import { tagSlug } from "@utils/slug";
 import { getLinkViaLocale } from "@utils/slug";
-import { getLangFromUrl, useTranslations } from "@i18n/utils";
+import { getLangFromUrl } from "@i18n/utils";
+import { getEntry } from "astro:content";
+import slugify from "slugify";
 
 const lang = getLangFromUrl(Astro.url);
-const t = useTranslations(lang);
 
 const { tags } = Astro.props;
+
+const actualTags = [];
+tags.map((tag) => tag.trim().replace(/^#/, ""));
+
+for (const tag of tags) {
+  const tagEntry = await getEntry("tags", tag);
+  if (tagEntry) {
+    actualTags.push(tagEntry);
+  } else {
+    actualTags.push({
+      slug: slugify(tag, { lower: true }),
+      data: {
+        en: tag,
+        zh: tag,
+      },
+    });
+  }
+}
 ---
 
 <div class="labels">
   {
-    (tags || []).map((tag) => {
+    (actualTags || []).map((tag) => {
       return (
         <a
           class="tag p-category"
-          href={getLinkViaLocale(lang, `/tags/${tagSlug(tag)}`)}
+          href={getLinkViaLocale(lang, `/tags/${tag.slug}`)}
         >
-          {tag}
+          {tag.data[lang]}
         </a>
       );
     })
@@ -29,7 +47,7 @@ const { tags } = Astro.props;
     @apply flex flex-row flex-wrap text-sm gap-2 justify-center;
 
     .tag {
-      @apply rounded-sm px-2 bg-gray-300 dark:bg-gray-700;
+      @apply rounded-sm px-2 bg-gray-300 dark:bg-gray-700 no-underline;
       background-color: var(--label-background-color);
     }
   }

src/content/config.ts

@@ -1,4 +1,4 @@
-import { z, defineCollection } from "astro:content";
+import { z, defineCollection, reference } from "astro:content";
 
 const basicSchema = {
   updated: z
@@ -19,7 +19,7 @@ const postSchema = z.object({
     .date()
     .or(z.string().transform((str) => (str ? new Date(str) : null))),
   tags: z.array(z.string()).nullable().optional().default([]),
-  series: z.string().nullable().optional(),
+  // series: reference("tags").nullable().optional(),
   katex: z.boolean().optional(),
   cover: z.string().nullable().optional(),
 });
@@ -63,6 +63,11 @@ const pageSchema = z.object({
   order: z.number().nullable().default(0),
 });
 
+const tagSchema = z.object({
+  zh: z.string().nullable().optional(),
+  en: z.string().nullable().optional(),
+});
+
 const posts = defineCollection({
   schema: postSchema,
 });
@@ -83,10 +88,15 @@ const projects = defineCollection({
   schema: projectSchema,
 });
 
+const tags = defineCollection({
+  schema: tagSchema,
+});
+
 export const collections = {
   posts,
   thoughts,
   pages,
   goals,
   projects,
+  tags,
 };

src/layouts/PageLayout.astro

@@ -29,7 +29,7 @@ const url = Astro.url;
 
 <style lang="scss">
   article {
-    @apply flex flex-col w-full gap-4 mt-16;
+    @apply flex flex-col w-full gap-8 mt-16;
 
     img {
       @apply rounded-lg sm:mt-0 mt-10 self-center;

src/pages/[lang]/[page].astro

@@ -7,6 +7,8 @@ import Projects from "@components/markdown/Projects.astro";
 import Feed from "@components/markdown/Feed.astro";
 import Gallery from "@components/markdown/Gallery.astro";
 
+export const prerender = true;
+
 export const getStaticPaths = async () => {
   const pages = await getCollection("pages");
   return pages

src/pages/[lang]/feed.astro

@@ -1,6 +1,4 @@
 ---
-import Layout from "@layouts/Layout.astro";
-import { useTranslations } from "@i18n/utils";
 import FeedList from "@components/feed/FeedList.astro";
 import { getPosts, getThoughts } from "@utils/posts";
 import PageLayout from "@layouts/PageLayout.astro";
@@ -13,11 +11,9 @@ export async function getStaticPaths() {
 }
 
 const { lang } = Astro.params;
-const t = useTranslations(lang);
 
 const thoughts = await getThoughts(lang);
 const posts = await getPosts(lang);
-// console.log(thoughts, posts)
 const contents = posts
   .concat(thoughts)
   .sort((a, b) => {

src/pages/[lang]/tags/[slug].astro

@@ -6,38 +6,43 @@ import _ from "lodash";
 import Breadcrumb from "@components/Breadcrumb.astro";
 import { useTranslations } from "@i18n/utils";
 import FeedList from "@components/feed/FeedList.astro";
+import { getEntry } from "astro:content";
 
 export const prerender = true;
 
 export async function getStaticPaths() {
-  const allTags = await getAllTags();
-  return allTags
+  const zhTags = await getAllTags("zh");
+  const enTags = await getAllTags("en");
+  return zhTags
     .map((tag) => {
       return {
         params: { slug: tagSlug(tag), lang: "zh" },
         props: { tag },
       };
     })
     .concat(
-      allTags.map((tag) => {
+      enTags.map((tag) => {
         return {
           params: { slug: tagSlug(tag), lang: "en" },
           props: { tag },
         };
       })
     );
 }
+
 const { lang, slug } = Astro.params;
-const t = useTranslations(lang);
 const { tag } = Astro.props;
-const { posts, thoughts } = await getAllByTag(lang, slug);
+const t = useTranslations(lang);
+
+const tagEntry = await getEntry("tags", slug);
+const actualTag = tagEntry
+  ? tagEntry
+  : { slug: slug, data: { zh: tag, en: tag } };
 
-const contents = posts.concat(thoughts).sort((a, b) => {
-  return a.date - b.date;
-});
+const contents = await getAllByTag(lang, actualTag.slug);
 ---
 
-<Layout title={tag}>
+<Layout title={actualTag.data[lang]}>
   <Breadcrumb
     breadcrumb={[
       {
@@ -47,7 +52,7 @@ const contents = posts.concat(thoughts).sort((a, b) => {
     ]}
   />
   <article>
-    <h1>{t("common.tag")}{tag}</h1>
+    <h1>{t("common.tag")}{actualTag.data[lang]}</h1>
     <FeedList contents={contents} />
   </article>
 </Layout>