ライセンスページのui調整、url表示の修正

Author: na-trium-144

app/about/license/ThirdPartyLicenses.tsx

@@ -1,5 +1,7 @@
 "use client";
 
+import { StyledSyntaxHighlighter } from "@/markdown/styledSyntaxHighlighter";
+import { langConstants } from "@my-code/runtime/languages";
 import { useState } from "react";
 
 export interface LicenseEntry {
@@ -20,44 +22,71 @@ export function ThirdPartyLicenses({ licenses }: { licenses: LicenseEntry[] }) {
       {licenses.map((pkg) => {
         const key = `${pkg.name}@${pkg.version}`;
         const isOpen = expanded === key;
+        let repositoryURL: string;
+        if (pkg.repository?.startsWith("http")) {
+          repositoryURL = pkg.repository;
+        } else if (pkg.repository?.startsWith("git+http")) {
+          repositoryURL = pkg.repository?.slice(4);
+        } else if (pkg.repository?.startsWith("git@")) {
+          repositoryURL =
+            "https://" +
+            pkg.repository
+              .slice(4)
+              .replace(":", "/")
+              .replace(/\.git$/, "");
+        } else if (
+          pkg.repository &&
+          /github:[\w-]+\/[\w-]+/.test(pkg.repository)
+        ) {
+          repositoryURL = `https://github.com/${pkg.repository.slice(7)}`;
+        } else if (pkg.repository && /[\w-]+\/[\w-]+/.test(pkg.repository)) {
+          // assume github username/repository
+          repositoryURL = `https://github.com/${pkg.repository}`;
+        } else {
+          // fallback to source url
+          // repositoryURL = pkg.source ?? "";
+        }
         return (
           <div key={key} className="collapse collapse-arrow bg-base-200">
             <input
               type="checkbox"
               checked={isOpen}
               onChange={() => setExpanded(isOpen ? null : key)}
             />
-            <div className="collapse-title font-mono text-sm">
+            <div className="collapse-title font-mono">
               <span className="font-bold">{pkg.name}</span>
               <span className="opacity-60 ml-2">v{pkg.version}</span>
-              <span className="badge badge-outline badge-sm ml-3">
+              <span className="badge badge-primary badge-soft badge-sm ml-3">
                 {pkg.license}
               </span>
             </div>
-            <div className="collapse-content text-sm">
+            <div className="collapse-content">
               {pkg.author && (
                 <p className="mb-1">
                   <span className="opacity-60">Author: </span>
                   {pkg.author}
                 </p>
               )}
-              {pkg.repository && (
+              {repositoryURL && (
                 <p className="mb-1">
                   <span className="opacity-60">Repository: </span>
                   <a
-                    className="link link-primary break-all"
-                    href={pkg.repository}
+                    className="link link-info break-all"
+                    href={repositoryURL}
                     target="_blank"
                     rel="noopener noreferrer"
                   >
-                    {pkg.repository}
+                    {repositoryURL}
                   </a>
                 </p>
               )}
               {pkg.licenseText && (
-                <pre className="mt-2 whitespace-pre-wrap text-xs bg-base-300 p-3 rounded-box overflow-x-auto">
+                <StyledSyntaxHighlighter
+                  className="text-sm"
+                  language={langConstants(undefined)}
+                >
                   {pkg.licenseText}
-                </pre>
+                </StyledSyntaxHighlighter>
               )}
             </div>
           </div>

app/about/license/page.tsx

@@ -1,25 +1,40 @@
 import { Metadata } from "next";
-import { Heading } from "@/markdown/heading";
-import licenseText from "../../../LICENSE?raw";
+import licenseText from "@/../LICENSE?raw";
 import { LicenseEntry, ThirdPartyLicenses } from "./ThirdPartyLicenses";
 import { isCloudflare } from "@/lib/detectCloudflare";
 import { getCloudflareContext } from "@opennextjs/cloudflare";
 import { readFile } from "node:fs/promises";
 import { join } from "node:path";
+import { StyledMarkdown } from "@/markdown/markdown";
 
 export const metadata: Metadata = {
   title: "ライセンス",
   description:
     "my.code(); のライセンスおよび使用しているサードパーティライブラリのライセンス情報です。",
 };
 
+const content = `
+# ライセンス
+
+## my.code(); のライセンス
+
+my.code(); のソースコードは MIT ライセンスのもとで公開されています。
+
+\`\`\`
+${licenseText}
+\`\`\`
+
+## サードパーティライブラリのライセンス
+
+my.code(); は以下のオープンソースライブラリを使用しています。
+`;
+
 export default async function LicensePage() {
   let licenses: LicenseEntry[];
   if (isCloudflare()) {
     const cfAssets = getCloudflareContext().env.ASSETS;
     const res = await cfAssets!.fetch(
-      `https://assets.local/_next/static/oss-licenses.json`,
-      { cache: "no-cache" }
+      `https://assets.local/_next/static/oss-licenses.json`
     );
     licenses = await res.json();
   } else {
@@ -38,20 +53,7 @@ export default async function LicensePage() {
 
   return (
     <div className="p-4 pb-16 w-full max-w-docs mx-auto">
-      <Heading level={1}>ライセンス</Heading>
-
-      <Heading level={2}>my.code(); のライセンス</Heading>
-      <p className="my-4 opacity-80">
-        my.code(); のソースコードは MIT ライセンスのもとで公開されています。
-      </p>
-      <pre className="bg-base-200 rounded-box p-4 text-sm whitespace-pre-wrap overflow-x-auto my-4">
-        {licenseText}
-      </pre>
-
-      <Heading level={2}>サードパーティライブラリのライセンス</Heading>
-      <p className="my-4 opacity-80">
-        my.code(); は以下のオープンソースライブラリを使用しています。
-      </p>
+      <StyledMarkdown content={content} />
       <ThirdPartyLicenses licenses={licenses} />
     </div>
   );

app/markdown/styledSyntaxHighlighter.tsx

@@ -21,32 +21,47 @@ const SyntaxHighlighter = lazy(() => {
 
 export function StyledSyntaxHighlighter(props: {
   children: string;
+  className?: string;
   language: LangConstants;
 }) {
   const theme = useChangeTheme();
   const codetheme = theme === "tomorrow" ? tomorrow : tomorrowNight;
   const isClient = useIsClient();
   return isClient ? (
-    <Suspense fallback={<FallbackPre>{props.children}</FallbackPre>}>
+    <Suspense
+      fallback={
+        <FallbackPre className={props.className}>{props.children}</FallbackPre>
+      }
+    >
       <SyntaxHighlighter
-        language={props.language.rsh}
+        language={props.language.rsh ?? "text"}
         PreTag="div"
-        className="border-2 border-current/20 mx-2 my-2 rounded-box p-4! bg-base-300! text-base-content!"
+        className={clsx(
+          "border-2 border-current/20 mx-2 my-2 rounded-box p-4! bg-base-300! text-base-content!",
+          props.className
+        )}
         style={codetheme}
       >
         {props.children}
       </SyntaxHighlighter>
     </Suspense>
   ) : (
-    <FallbackPre>{props.children}</FallbackPre>
+    <FallbackPre className={props.className}>{props.children}</FallbackPre>
   );
 }
-function FallbackPre({ children }: { children: string }) {
+function FallbackPre({
+  children,
+  className,
+}: {
+  children: string;
+  className?: string;
+}) {
   return (
     <pre
       className={clsx(
         "border-2 border-current/20 mx-2 my-2 rounded-box p-4! bg-base-300! text-base-content!",
-        "w-full overflow-auto"
+        "w-full overflow-auto",
+        className
       )}
     >
       {children}

packages/runtime/src/languages.ts

@@ -1,5 +1,3 @@
-"use client";
-
 // Markdownで指定される可能性のある言語名を列挙
 export type MarkdownLang =
   | "python"