feat(lab): Add more pages

sites/lab/pages/code/index.mjs

@@ -8,8 +8,10 @@ import { Popout } from 'shared/components/popout.mjs'
 import { WebLink } from 'shared/components/web-link.mjs'
 import { siteConfig } from 'site/site.config.mjs'
 import { freeSewingConfig } from 'shared/config/freesewing.config.mjs'
+import { ChoiceLink } from 'shared/components/choice-link.mjs'
+import { GitHubIcon, CodeIcon } from 'shared/components/icons.mjs'
 
-const ns = [...pageNs, 'labdocs']
+const ns = [...pageNs, 'labcode']
 
 const RepoLink = ({ href = false }) =>
   href ? (
@@ -32,13 +34,23 @@ const DocsPage = ({ page }) => {
   return (
     <PageWrapper {...page}>
       <div className="max-w-prose">
-        <p>All of the FreeSewing source code is available in our monorepo:</p>
+        <ChoiceLink
+          title={t('labcode:fscode')}
+          href={freeSewingConfig.monorepo}
+          icon={<GitHubIcon className="w-8 h-8" />}
+        >
+          <p>{t('labcode:monorepo')}:</p>
           <RepoLink href={freeSewingConfig.monorepo} />
-        {siteConfig.repo !== freeSewingConfig.monorepo ? (
+        </ChoiceLink>
-          <>
+        {true || siteConfig.repo !== freeSewingConfig.monorepo ? (
-            <p>In addition, this particular lab instance has additional source code hosted at:</p>
+          <ChoiceLink
+            title={t('labcode:lab')}
+            href={freeSewingConfig.monorepo}
+            icon={<CodeIcon className="w-8 h-8" />}
+          >
+            <p>{t('labcode:labrepo')}:</p>
             <RepoLink href={siteConfig.repo} />
-          </>
+          </ChoiceLink>
         ) : null}
       </div>
     </PageWrapper>

sites/lab/pages/code/labcode.en.yaml

@@ -1,5 +1,4 @@
-noDocs: The FreeSewing lab does not include documentation.
+monorepo: All of the FreeSewing source code is available in our monorepo on GitHub
-see: Instead, refer to
+labrepo: In addition, this particular lab instance has additional source code hosted at
-orgDocs: FreeSewing.org has documentation for makers, such as design options, sewing techniques, and instructions.
+lab: Source code specific to this lab
-devDocs: FreeSewing.dev has documentation for developers and contributors, such as API docs and guides on how to get involved with the project.
+fscode: "FreeSewing's source code"
-enOnly: FreeSewing.dev is only available in English

sites/org/pages/patterns/index.mjs

@@ -0,0 +1,51 @@
+// Dependencies
+import dynamic from 'next/dynamic'
+import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
+// Components
+import { PageWrapper, ns as pageNs } from 'shared/components/wrappers/page.mjs'
+import { Popout } from 'shared/components/popout.mjs'
+
+import { ns as authNs } from 'shared/components/wrappers/auth/index.mjs'
+import { ns as setsNs } from 'shared/components/account/sets.mjs'
+
+// Translation namespaces used on this page
+const namespaces = [...new Set([...setsNs, ...authNs, ...pageNs])]
+
+/*
+ * Some things should never generated as SSR
+ * So for these, we run a dynamic import and disable SSR rendering
+ */
+const DynamicAuthWrapper = dynamic(
+  () => import('shared/components/wrappers/auth/index.mjs').then((mod) => mod.AuthWrapper),
+  { ssr: false }
+)
+
+/*
+ * Each page MUST be wrapped in the PageWrapper component.
+ * You also MUST spread props.page into this wrapper component
+ * when path and locale come from static props (as here)
+ * or set them manually.
+ */
+const SetsIndexPage = ({ page }) => (
+  <PageWrapper {...page}>
+    <DynamicAuthWrapper>
+      <Popout fixme compact>
+        This page has not been created yet
+      </Popout>
+    </DynamicAuthWrapper>
+  </PageWrapper>
+)
+
+export default SetsIndexPage
+
+export async function getStaticProps({ locale }) {
+  return {
+    props: {
+      ...(await serverSideTranslations(locale, namespaces)),
+      page: {
+        locale,
+        path: ['patterns'],
+      },
+    },
+  }
+}

sites/shared/components/navigation/primary.mjs

@@ -17,6 +17,7 @@ import {
   FreeSewingIcon,
   HeartIcon,
   BulletIcon,
+  GitHubIcon,
 } from 'shared/components/icons.mjs'
 import { Breadcrumbs } from 'shared/components/breadcrumbs.mjs'
 
@@ -42,6 +43,9 @@ export const icons = {
   community: (className = '') => <CommunityIcon className={className} />,
   sets: (className = '') => <MeasureIcon className={className} />,
   patterns: (className = '') => <PageIcon className={className} />,
+
+  // Lab
+  code: (className = '') => <GitHubIcon className={className} />,
 }
 
 /* helper method to order nav entries */

sites/shared/prebuild/lab.mjs

@@ -2,7 +2,17 @@ import { prebuildOrg } from './org.mjs'
 import path from 'path'
 import fse from 'fs-extra'
 
-const copyFromOrg = ['account', 'confirm', 'designs', 'new', 'signin', 'signup', 'welcome']
+const copyFromOrg = [
+  'account',
+  'confirm',
+  'designs',
+  'new',
+  'patterns',
+  'sets',
+  'signin',
+  'signup',
+  'welcome',
+]
 
 const copyOrgFiles = () => {
   const to = path.resolve('..', 'lab', 'pages')