add 3rd party license notice

astro.config.ts

@@ -1,3 +1,4 @@
+import remarkLinkCard from "./src/remark/plugin/link-card";
 import mdx from "@astrojs/mdx";
 import react from "@astrojs/react";
 import sitemap from "@astrojs/sitemap";
@@ -27,7 +28,13 @@ export default defineConfig({
     react(),
   ],
   markdown: {
-    remarkPlugins: [remarkSectionize, remarkGemoji, remarkGfm, remarkMath],
+    remarkPlugins: [
+      remarkSectionize,
+      remarkGemoji,
+      remarkGfm,
+      remarkMath,
+      remarkLinkCard,
+    ],
     rehypePlugins: [
       rehypeKatex,
       rehypeSlug,

package.json

@@ -25,13 +25,16 @@
     "@astrojs/sitemap": "^3.1.5",
     "@iconify-json/iconoir": "^1.1.44",
     "@types/bun": "^1.1.4",
+    "@types/license-checker": "^25.0.6",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
     "@types/remark-heading-id": "^1.0.0",
     "@vercel/og": "^0.6.2",
     "astro": "^4.10.2",
     "astro-icon": "^1.1.0",
     "astro-seo": "^0.8.4",
+    "license-checker": "^25.0.1",
+    "license-checker-rseidelsohn": "^4.3.0",
     "lightningcss": "^1.25.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",

src/pages/index.astro

@@ -86,6 +86,10 @@ let contact = [
       </Anchor>
     </span>
   </Section>
+  <Section>
+    <Heading2><Anchor href="/notice">Notice</Anchor></Heading2>
+    このサイトについての3rd party license
+  </Section>
 </Base>
 
 <style>

src/pages/notice.astro

@@ -0,0 +1,185 @@
+---
+import Anchor from "@components/mdx/anchor.astro";
+import Heading1 from "@components/mdx/heading1.astro";
+import Heading2 from "@components/mdx/heading2.astro";
+import Base from "@layouts/Base.astro";
+import licenseChecker, { type ModuleInfos } from "license-checker-rseidelsohn";
+
+async function checkLicense(): Promise<ModuleInfos> {
+  return new Promise((resolve, reject) => {
+    licenseChecker.init(
+      {
+        start: "./",
+      },
+      (err, packages) => {
+        if (err) {
+          reject(err);
+        } else {
+          resolve(packages);
+        }
+      },
+    );
+  });
+}
+
+const moduleInfos = await checkLicense();
+
+const sourceLicenses: Record<
+  string,
+  { from: { title: string; href: string; license: string }[] }
+> = {
+  "src/remark/plugin/link-card.ts": {
+    from: [
+      {
+        title: "haxibami.net",
+        href: "https://github.com/haxibami/haxibami.net/blob/main/src/lib/remark-link-card.ts",
+        license: "MIT",
+      },
+      {
+        title: "haxibami.net",
+        href: "https://github.com/haxibami/haxibami.net/blob/main/src/lib/mdast-util-node-is.ts",
+        license: "MIT",
+      },
+    ],
+  },
+  "src/layouts/global.css": {
+    from: [
+      {
+        title: "The new reset css",
+        href: "https://github.com/elad2412/the-new-css-reset",
+        license: "MIT",
+      },
+    ],
+  },
+  "src/layouts/katex.css": {
+    from: [
+      {
+        title: "KaTeX",
+        href: "https://github.com/KaTeX/KaTeX",
+        license: "MIT",
+      },
+    ],
+  },
+};
+---
+
+<Base
+  title="notice"
+  description="3rd party license"
+  imagePath="/notice.webp"
+  og={{ type: "website" }}
+  path={[
+    { absolute: "/", display: { icon: "iconoir:home", name: "Home" } },
+    {
+      absolute: "/notice",
+      display: { icon: "iconoir:info-circle", name: "Notice" },
+    },
+  ]}
+>
+  <Heading1>Notice</Heading1>
+  <section>
+    <Heading2>3rd party licenses</Heading2>
+    <table class="source-license-table">
+      <thead>
+        <tr>
+          <th>source</th>
+          <th>from</th>
+          <th>license</th>
+        </tr>
+      </thead>
+      <tbody
+        >{
+          Object.entries(sourceLicenses).map(([source, { from }]) => {
+            const sourceHref = `https://github.com/namachan10777/namachan10777.dev/blob/master/${source}`;
+            return from.map(({ title, href, license }, index) => (
+              <tr>
+                {index === 0 ? (
+                  <td rowspan={from.length}>
+                    <Anchor href={sourceHref}>
+                      <code class="source-file-name">{source}</code>
+                    </Anchor>
+                  </td>
+                ) : null}
+                <td>
+                  <Anchor href={href}>{title}</Anchor>
+                </td>
+                <td>{license}</td>
+              </tr>
+            ));
+          })
+        }</tbody
+      >
+    </table>
+  </section>
+  <section>
+    <Heading2>3rd party package licenses</Heading2>
+    <table class="package-license-table">
+      <thead>
+        <tr>
+          <th>package</th>
+          <th>license</th>
+        </tr>
+      </thead>
+      <tbody>
+        {
+          Object.entries(moduleInfos).map(([name, info]) => {
+            const href =
+              info.url ||
+              info.repository ||
+              `https://www.npmjs.com/package/${name}`;
+            return (
+              <tr>
+                <td>
+                  <Anchor href={href}>{name}</Anchor>
+                </td>
+                <td>{info.licenses}</td>
+              </tr>
+            );
+          })
+        }
+      </tbody>
+    </table>
+  </section>
+</Base>
+
+<style>
+  .source-file-name {
+    font-family: var(--font-mono);
+  }
+
+  .source-license-table {
+    width: 100%;
+    border-collapse: collapse;
+  }
+
+  .source-license-table th {
+    border-bottom: 1px solid var(--fg-hr);
+    padding-block: 0.5rem;
+    padding-inline: 1rem;
+    font-weight: bold;
+  }
+
+  .source-license-table td {
+    padding-block: 0.5rem;
+    padding-inline: 1rem;
+    border-bottom: 1px solid var(--fg-hr);
+  }
+
+  .package-license-table {
+    width: 100%;
+    border-collapse: collapse;
+  }
+
+  .package-license-table th {
+    border-bottom: 1px solid var(--fg-hr);
+    padding-block: 0.5rem;
+    padding-inline: 1rem;
+    font-weight: bold;
+  }
+
+  .package-license-table td {
+    padding-block: 0.5rem;
+    padding-inline: 1rem;
+    border-bottom: 1px solid var(--fg-hr);
+  }
+</style>

src/remark/plugin/link-card.ts

@@ -0,0 +1,60 @@
+// https://github.com/haxibami/haxibami.net/blob/main/src/lib/mdast-util-node-is.ts
+import type { Root } from "mdast";
+import type { Paragraph, Link, Text, Literal } from "mdast";
+import type { Plugin } from "unified";
+import type { Node } from "unist";
+import { visit } from "unist-util-visit";
+
+function isObject(node: unknown): node is Record<string, unknown> {
+  return typeof node === "object" && node !== null;
+}
+
+function isNode(node: unknown): node is Node {
+  return isObject(node) && "type" in node;
+}
+
+function isParagraph(node: unknown): node is Paragraph {
+  return isNode(node) && node.type === "paragraph";
+}
+
+function isLink(node: unknown): node is Link {
+  return isNode(node) && node.type === "link";
+}
+
+function isLiteral(node: unknown): node is Literal {
+  return isObject(node) && "value" in node && "type" in node;
+}
+
+function isText(node: unknown): node is Text {
+  return isLiteral(node) && node.type === "text";
+}
+
+function isIsolatedLink(node: unknown): node is Paragraph & {
+  children: [Link & { children: [Text] }];
+} {
+  return (
+    isParagraph(node) &&
+    node.children.length === 1 &&
+    isLink(node.children[0]) &&
+    node.children[0].children.every(isText)
+  );
+}
+
+function markIsolatedLink(tree: Root) {
+  visit(tree, isIsolatedLink, (node) => {
+    const link = node.children[0];
+    link.data = {
+      ...link.data,
+      hProperties: {
+        ...link.data?.hProperties,
+        dataLinkCard: "true",
+      },
+    };
+  });
+}
+
+const plugin: Plugin<[], Root> = () => {
+  return markIsolatedLink;
+};
+
+export default plugin;

tsconfig.json

@@ -9,8 +9,10 @@
       "@layouts/*": ["./src/layouts/*"],
       "@lib/*": ["./src/lib/*"],
       "@asset/*": ["./src/assets/*"],
-      "@fonts/*": ["./fonts/*"]
-    }
+      "@fonts/*": ["./fonts/*"],
+      "~/*": ["./src/*"]
+    },
+    "moduleResolution": "Node"
   },
   "include": ["**/*.ts", "**/*.tsx", "**/*.astro", "eslint.config.mjs"]
 }