Fix plop templates (#206)

* Add new site templates * Fix opening curly bracket * Fix templates * Show docs * Add workaround for plop issue plopjs/plop#445
Amsterdam · Sep 5, 2024 · a6f148a · a6f148a
1 parent f9c2009
commit a6f148a
Show file tree

Hide file tree

Showing 13 changed files with 276 additions and 302 deletions.
diff --git a/.plop/templates/HomePage.tsx.hbs b/.plop/templates/HomePage.tsx.hbs
@@ -1,10 +1,14 @@
+'use client'
+
 import { Grid, Heading, Paragraph } from '@amsterdam/design-system-react'
 
-export const HomePage = () => (
-  <Grid paddingBottom="medium">
-    <Grid.Cell span="all">
-      <Heading>{{name}}</Heading>
-      <Paragraph>Hallo nieuw prototype</Paragraph>
-    </Grid.Cell>
-  </Grid>
-)
+export default function HomePage() {
+  return (
+    <Grid paddingBottom="medium">
+      <Grid.Cell span="all">
+        <Heading>{{name}}</Heading>
+        <Paragraph>Hallo nieuw prototype</Paragraph>
+      </Grid.Cell>
+    </Grid>
+  )
+}
diff --git a/.plop/templates/Page.tsx.hbs b/.plop/templates/Page.tsx.hbs
@@ -1,10 +1,14 @@
+'use client'
+
 import { Grid, Heading, Paragraph } from '@amsterdam/design-system-react'
 
-export const {{pascalCase name}}Page = () => (
-  <Grid paddingBottom="medium">
-    <Grid.Cell span={{curlyBefore}}{ narrow: 4, medium: 6, wide: 7 }} start={{curlyBefore}}{ narrow: 1, medium: 2, wide: 3 }}>
-      <Heading>{{name}}</Heading>
-      <Paragraph>Hallo nieuwe pagina</Paragraph>
-    </Grid.Cell>
-  </Grid>
-)
+export default function {{pascalCase name}}() {
+  return (
+    <Grid paddingBottom="medium">
+      <Grid.Cell span={{curlyBefore}}{ narrow: 4, medium: 6, wide: 7 }} start={{curlyBefore}}{ narrow: 1, medium: 2, wide: 3 }}>
+        <Heading>{{name}}</Heading>
+        <Paragraph>Hallo nieuwe pagina</Paragraph>
+      </Grid.Cell>
+    </Grid>
+  )
+}
diff --git a/.plop/templates/RootPage.tsx.hbs b/.plop/templates/RootPage.tsx.hbs
diff --git a/.plop/templates/SiteHeader.tsx.hbs b/.plop/templates/SiteHeader.tsx.hbs
diff --git a/.plop/templates/SiteLayout.tsx.hbs b/.plop/templates/SiteLayout.tsx.hbs
@@ -0,0 +1,80 @@
+'use client'
+
+import {
+  Column,
+  Footer,
+  Grid,
+  Header,
+  Heading,
+  Link,
+  PageMenu,
+  Paragraph,
+  Screen,
+  SkipLink,
+} from '@amsterdam/design-system-react'
+import NextLink from 'next/link'
+
+export default function {{pascalCase name}}({ children }) {
+  return (
+    <Screen className="ams-theme">
+      <Grid>
+        <Grid.Cell span="all">
+          <SkipLink href="#main">Direct naar inhoud</SkipLink>
+          <Header
+            logoLink={`${process.env.basePath}{{kebabCase name}}`}
+            logoLinkTitle="Naar de homepage van {{titleCase name}}"
+            links={
+              <PageMenu alignEnd>
+                <NextLink legacyBehavior href="/" passHref>
+                  <PageMenu.Link>Prototypes</PageMenu.Link>
+                </NextLink>
+              </PageMenu>
+            }
+          />
+        </Grid.Cell>
+      </Grid>
+      <main id="main">{children}</main>
+      <Footer>
+        <Footer.Top>
+          <Heading inverseColor className="ams-visually-hidden">
+            Colofon
+          </Heading>
+          <Grid gapVertical="large" paddingVertical="medium">
+            <Grid.Cell span={{curlyBefore}}{ narrow: 3, medium: 4, wide: 4 }}>
+              <Column as="section" gap="extra-small">
+                <Heading level={2} size="level-4" inverseColor>
+                  Contact
+                </Heading>
+                <Paragraph size="small" inverseColor>
+                  Heeft u een vraag en kunt u het antwoord niet vinden op deze site? Bel het telefoonnummer{' '}
+                  <Link href="tel:+3114020" onBackground="dark" variant="inline">
+                    14 020
+                  </Link>
+                  .
+                </Paragraph>
+                <Paragraph size="small" inverseColor>
+                  Wij zijn bereikbaar van maandag tot en met vrijdag van 08.00 tot 18.00 uur.
+                </Paragraph>
+              </Column>
+            </Grid.Cell>
+          </Grid>
+        </Footer.Top>
+        <Footer.Bottom>
+          <Heading level={2} className="ams-visually-hidden">
+            Over deze website
+          </Heading>
+          <Grid paddingVertical="small">
+            <Grid.Cell span="all">
+              <PageMenu>
+                <PageMenu.Link href="#">Over deze site</PageMenu.Link>
+                <PageMenu.Link href="#">Privacy</PageMenu.Link>
+                <PageMenu.Link href="#">Toegankelijkheid</PageMenu.Link>
+                {/* Append footer link here */}
+              </PageMenu>
+            </Grid.Cell>
+          </Grid>
+        </Footer.Bottom>
+      </Footer>
+    </Screen>
+  )
+}
diff --git a/.plop/templates/constants.ts.hbs b/.plop/templates/constants.ts.hbs
diff --git a/.plop/templates/routes.tsx.hbs b/.plop/templates/routes.tsx.hbs
diff --git a/README.md b/README.md
@@ -12,12 +12,12 @@ A prototyping environment for the React Library of the [Amsterdam Design System]
 
 All current prototypes are listed here: [amsterdam.github.io/design-system-prototypes](http://amsterdam.github.io/design-system-prototypes).
 
-<!-- ## How to use
+## How to use
 
 Feel welcome to create your own prototype.
 
 Scaffold the initial directories and files through `npm run add site 'Site name'`.
 
 Add a page with `npm run add page 'Site name or slug' 'Page name'`.
 
-Present a pull request to have it included on the public website. -->
+Present a pull request to have it included on the public website.