From 8c61ddef7685df19f3ea7f4cf21bd37f65414a05 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Marcus=20Bl=C3=A4ttermann?= Date: Wed, 14 Dec 2022 22:08:39 +0100 Subject: [PATCH] Automatically generate "Read Next" link --- website/meta/languageSorted.tsx | 5 +++++ website/meta/sidebarFlat.tsx | 5 +++++ website/pages/[...listPathPage].tsx | 19 ++++++++++++++++++- website/pages/models/[slug].tsx | 13 ++++++++++--- website/src/templates/docs.js | 24 ++++++++++-------------- 5 files changed, 48 insertions(+), 18 deletions(-) create mode 100644 website/meta/languageSorted.tsx create mode 100644 website/meta/sidebarFlat.tsx diff --git a/website/meta/languageSorted.tsx b/website/meta/languageSorted.tsx new file mode 100644 index 000000000..fe93bae41 --- /dev/null +++ b/website/meta/languageSorted.tsx @@ -0,0 +1,5 @@ +import models from './languages.json' + +export const languagesSorted = models.languages + .filter(({ models }) => models && models.length) + .sort((a, b) => a.name.localeCompare(b.name)) diff --git a/website/meta/sidebarFlat.tsx b/website/meta/sidebarFlat.tsx new file mode 100644 index 000000000..b9f94de5d --- /dev/null +++ b/website/meta/sidebarFlat.tsx @@ -0,0 +1,5 @@ +import sidebars from './sidebars.json' + +export const sidebarUsageFlat = sidebars + .find((sidebar) => sidebar.section === 'usage') + .items.flatMap((item) => item.items) diff --git a/website/pages/[...listPathPage].tsx b/website/pages/[...listPathPage].tsx index 95f0f4ace..0290f575f 100644 --- a/website/pages/[...listPathPage].tsx +++ b/website/pages/[...listPathPage].tsx @@ -7,6 +7,7 @@ import Layout from '../src/templates' import remarkPlugins from '../plugins/index.mjs' import recordSection from '../meta/recordSections' +import { sidebarUsageFlat } from '../meta/sidebarFlat' type ApiDetails = { stringName: string | null @@ -117,16 +118,32 @@ export const getStaticProps: GetStaticProps = async ( trainable: mdx.frontmatter.api_trainable ?? null, } + const slug = `/${args.params.listPathPage.join('/')}` + + const next = + section === 'usage' + ? sidebarUsageFlat.find( + (item, index) => + index > 0 && sidebarUsageFlat[index - 1].url === slug && item[0] === '/' + ) + : undefined + return { props: { ...mdx.frontmatter, - slug: `/${args.params.listPathPage.join('/')}`, + slug, mdx, sectionTitle: sectionMeta?.title ?? null, theme: sectionMeta?.theme ?? null, section: section, apiDetails: apiDetails, isIndex, + next: next + ? { + slug: next.url, + title: next.text, + } + : null, }, } } diff --git a/website/pages/models/[slug].tsx b/website/pages/models/[slug].tsx index 0e54fc2b1..f4908bed2 100644 --- a/website/pages/models/[slug].tsx +++ b/website/pages/models/[slug].tsx @@ -4,6 +4,7 @@ import recordSection from '../../meta/recordSections' import recordLanguages from '../../meta/recordLanguages' import Layout from '../../src/templates' import { PropsPageBase } from '../[...listPathPage]' +import { languagesSorted } from '../../meta/languageSorted' type PropsPageModel = PropsPageBase & { next: { title: string; slug: string } | null @@ -31,23 +32,29 @@ export const getStaticProps: GetStaticProps< slug: string } > = async (args) => { + const getSlug = (languageCode: string) => `/${['models', languageCode].join('/')}` + if (args.params === undefined) { return { notFound: true } } const language = recordLanguages[args.params.slug] + const nextLanguage = languagesSorted.find( + (item, index) => index > 0 && languagesSorted[index - 1].code === language.code + ) + return { props: { id: language.code, - slug: `/${['models', language.code].join('/')}`, + slug: getSlug(language.code), isIndex: false, title: language.name, section: 'models', sectionTitle: recordSection.models.title, theme: recordSection.models.theme, - next: language.next - ? { title: language.next.name, slug: `/models/${language.next.code}` } + next: nextLanguage + ? { title: nextLanguage.name, slug: getSlug(nextLanguage.code) } : null, meta: { models: language.models || null, diff --git a/website/src/templates/docs.js b/website/src/templates/docs.js index 01e75950e..01ca76c4b 100644 --- a/website/src/templates/docs.js +++ b/website/src/templates/docs.js @@ -14,8 +14,8 @@ import { getCurrentSource, github } from '../components/util' import siteMetadata from '../../meta/site.json' import sidebars from '../../meta/sidebars.json' -import models from '../../meta/languages.json' import { nightly, legacy } from '../../meta/dynamicMeta.mjs' +import { languagesSorted } from '../../meta/languageSorted' const Docs = ({ pageContext, children }) => { const { @@ -34,7 +34,6 @@ const Docs = ({ pageContext, children }) => { apiDetails, } = pageContext const { modelsRepo } = siteMetadata - const { languages } = models const isModels = section === 'models' const sidebar = pageContext.sidebar ? { items: pageContext.sidebar } @@ -42,18 +41,15 @@ const Docs = ({ pageContext, children }) => { let pageMenu = menu ? menu.map(([text, id]) => ({ text, id })) : [] if (isModels) { - sidebar.items[1].items = languages - .filter(({ models }) => models && models.length) - .sort((a, b) => a.name.localeCompare(b.name)) - .map((lang) => ({ - text: lang.name, - url: `/models/${lang.code}`, - isActive: id === lang.code, - menu: lang.models.map((model) => ({ - text: model, - id: model, - })), - })) + sidebar.items[1].items = languagesSorted.map((lang) => ({ + text: lang.name, + url: `/models/${lang.code}`, + isActive: id === lang.code, + menu: lang.models.map((model) => ({ + text: model, + id: model, + })), + })) } const sourcePath = source ? github(source) : null const currentSource = getCurrentSource(slug, isIndex)