split PluginContentReadme, show plugin introduction_urls

src/app/[locale]/plugin/[pluginId]/introduction/plugin-content-introduction.tsx

@@ -1,17 +1,43 @@
 import { AllOfAPlugin } from "@/catalogue/meta-types";
 import GfmMarkdown from "@/components/markdown/gfm-markdown";
 import { translateLangDict } from "@/utils/i18n-utils";
-import { getLocale } from "next-intl/server";
+import { getLocale, getTranslations } from "next-intl/server";
 import React from "react";
+import { NaLink } from "@/components/na-link";
+import { rawToRelative } from "@/utils/repos-utils";
 
 export async function PluginContentIntroduction({plugin}: { plugin: AllOfAPlugin }) {
-  const introduction = translateLangDict(await getLocale(), plugin.plugin.introduction, true) || ''
+  const t = await getTranslations('page.plugin.introduction')
+  const locale = await getLocale()
+
+  const introduction = translateLangDict(locale, plugin.plugin.introduction, true) || ''
+  let introductionSrc: React.ReactNode = <span>N/A</span>
+  const introductionUrl = translateLangDict(locale, plugin.plugin.introduction_urls, false)
+  if (introductionUrl) {
+    let ld = rawToRelative(introductionUrl, plugin.plugin.repository, plugin.plugin.branch)
+    if (ld) {
+      introductionSrc = <NaLink href={ld.href} hoverUnderline>{ld.display}</NaLink>
+    } else {
+      ld = rawToRelative(introductionUrl, 'https://github.com/MCDReforged/PluginCatalogue', 'master')
+      if (ld) {
+        introductionSrc = <NaLink href={ld.href} hoverUnderline>{t('plugin_catalogue')} {ld.display.split('/').pop()}</NaLink>
+      } else {
+        introductionSrc = <NaLink href={introductionUrl} hoverUnderline>{introductionUrl}</NaLink>
+      }
+    }
+  }
+
   return (
     <>
       {/* SSR, no need to use GfmMarkdownDynamic */}
       <GfmMarkdown allowEmbedHtml allowAnchor repository={plugin.plugin.repository}>
         {introduction}
       </GfmMarkdown>
+
+      <p className="mt-5 text-end text-sm text-mantine-dimmed">
+        {t('introduction_source')}
+        {introductionSrc}
+      </p>
     </>
   )
 }

src/app/[locale]/plugin/[pluginId]/readme/page.tsx

@@ -1,53 +1,7 @@
 import { getPluginOr404 } from "@/catalogue/data";
-import { AllOfAPlugin } from "@/catalogue/meta-types";
-import GfmMarkdown from "@/components/markdown/gfm-markdown";
-import { NaLink } from "@/components/na-link";
-import { NoneText } from "@/components/none-text";
-import { getTranslations, unstable_setRequestLocale } from "next-intl/server";
+import { unstable_setRequestLocale } from "next-intl/server";
 import React from "react";
-
-async function PluginContentReadme({plugin}: { plugin: AllOfAPlugin }) {
-  const t = await getTranslations('page.plugin.readme')
-
-  const readme = plugin.repository?.readme
-  const readmeUrl = plugin.repository?.readme_url
-  if (!readme || !readmeUrl) {
-    return <NoneText>{t('no_readme')}</NoneText>
-  }
-
-  let readmeSrc: React.ReactNode = <span>N/A</span>
-  if (readmeUrl) {
-    // TISUnion/QuickBackupM/master/README.md
-    const parts = readmeUrl?.replace(/https:\/\/raw.githubusercontent.com\//, '').split('/')
-    if (parts && parts.length >= 4) {
-      const reposPair = parts.slice(0, 2).join('/')
-      const reposUrl = `https://github.com/${reposPair}`
-      const branch = parts[2]
-      const path = parts.slice(3).join('/')
-      if (reposUrl === plugin.plugin.repository && branch === plugin.plugin.branch) {
-        // https://raw.githubusercontent.com/TISUnion/QuickBackupM/master/README.md
-        // https://github.com/TISUnion/QuickBackupM/blob/master/README.md
-        readmeSrc = <NaLink href={`${reposUrl}/blob/${branch}/${path}`} hoverUnderline>{path}</NaLink>
-      } else {
-        readmeSrc = <NaLink href={readmeUrl} hoverUnderline>{readmeUrl}</NaLink>
-      }
-    }
-  }
-
-  return (
-    <div>
-      {/* SSR, no need to use GfmMarkdownDynamic */}
-      <GfmMarkdown allowEmbedHtml allowAnchor repository={plugin.plugin.repository}>
-        {readme}
-      </GfmMarkdown>
-
-      <p className="mt-5 text-end text-sm text-mantine-dimmed">
-        {t('readme_source')}
-        {readmeSrc}
-      </p>
-    </div>
-  )
-}
+import { PluginContentReadme } from "./plugin-content-readme";
 
 export default async function Page({params: {pluginId, locale}}: { params: { pluginId: string, locale: string } }) {
   unstable_setRequestLocale(locale);

src/app/[locale]/plugin/[pluginId]/readme/plugin-content-readme.tsx

@@ -0,0 +1,41 @@
+import { AllOfAPlugin } from "@/catalogue/meta-types";
+import GfmMarkdown from "@/components/markdown/gfm-markdown";
+import { NaLink } from "@/components/na-link";
+import { NoneText } from "@/components/none-text";
+import { getTranslations } from "next-intl/server";
+import React from "react";
+import { rawToRelative } from "@/utils/repos-utils";
+
+export async function PluginContentReadme({plugin}: { plugin: AllOfAPlugin }) {
+  const t = await getTranslations('page.plugin.readme')
+
+  const readme = plugin.repository?.readme
+  const readmeUrl = plugin.repository?.readme_url
+  if (!readme || !readmeUrl) {
+    return <NoneText>{t('no_readme')}</NoneText>
+  }
+
+  let readmeSrc: React.ReactNode = <span>N/A</span>
+  if (readmeUrl) {
+    const ld = rawToRelative(readmeUrl, plugin.plugin.repository, plugin.plugin.branch)
+    if (ld) {
+      readmeSrc = <NaLink href={ld.href} hoverUnderline>{ld.display}</NaLink>
+    } else {
+      readmeSrc = <NaLink href={readmeUrl} hoverUnderline>{readmeUrl}</NaLink>
+    }
+  }
+
+  return (
+    <div>
+      {/* SSR, no need to use GfmMarkdownDynamic */}
+      <GfmMarkdown allowEmbedHtml allowAnchor repository={plugin.plugin.repository}>
+        {readme}
+      </GfmMarkdown>
+
+      <p className="mt-5 text-end text-sm text-mantine-dimmed">
+        {t('readme_source')}
+        {readmeSrc}
+      </p>
+    </div>
+  )
+}

src/catalogue/meta-types.ts

@@ -52,6 +52,7 @@ export interface PluginInfo {
   related_path: string
   labels: string[]
   introduction: LangDict
+  introduction_urls: LangDict
 }
 
 export interface ReleaseSummary {

src/messages/en.json

@@ -117,6 +117,10 @@
         "releases": "Releases",
         "dependencies": "Dependencies"
       },
+      "introduction": {
+        "plugin_catalogue": "Plugin Catalogue",
+        "introduction_source": "Introduction source: "
+      },
       "readme": {
         "no_readme": "No README",
         "readme_source": "README source: "

src/messages/zh-CN.json

@@ -117,6 +117,10 @@
         "releases": "发行版",
         "dependencies": "依赖"
       },
+      "introduction": {
+        "plugin_catalogue": "插件仓库",
+        "introduction_source": "介绍文本来源："
+      },
       "readme": {
         "no_readme": "无自述文件",
         "readme_source": "自述文件来源："

src/utils/repos-utils.ts

@@ -5,3 +5,34 @@ export function getGitHubReposPair(repos: string): string {
   }
   return repos.substring(githubPrefix.length).replace(/\/$/, '')
 }
+
+interface LinkData {
+  href: string
+  display: string
+}
+
+/**
+ * Input example: "https://raw.githubusercontent.com/TISUnion/QuickBackupM/master/README.md"
+ * Output example: {
+ *   href: "https://github.com/TISUnion/QuickBackupM/blob/master/README.md",
+ *   display: "README.md",
+ * }
+ */
+export function rawToRelative(url: string | undefined, plugin_repository_url: string, plugin_branch: string): LinkData | undefined {
+  // TISUnion/QuickBackupM/master/README.md
+  const parts = url?.replace(/https:\/\/raw.githubusercontent.com\//, '').split('/')
+  if (parts && parts.length >= 4) {
+    const reposPair = parts.slice(0, 2).join('/')
+    const reposUrl = `https://github.com/${reposPair}`
+    const branch = parts[2]
+    const path = parts.slice(3).join('/')
+    if (reposUrl === plugin_repository_url && branch === plugin_branch) {
+      // https://raw.githubusercontent.com/TISUnion/QuickBackupM/master/README.md
+      // https://github.com/TISUnion/QuickBackupM/blob/master/README.md
+      return {
+        href: `${reposUrl}/blob/${branch}/${path}`,
+        display: path,
+      }
+    }
+  }
+}