forumone · kmonahan · Mar 5, 2024 · Jan 23, 2024 · Jan 31, 2024 · Mar 1, 2024
diff --git a/.prettierignore b/.prettierignore
@@ -1,2 +1,3 @@
 source/01-global/icon/**/*.svg
 source/01-global/icon/**/*.tsx
+source/**/*.mdx
diff --git a/.prettierrc b/.prettierrc
@@ -3,6 +3,7 @@
   "bracketSpacing": true,
   "endOfLine": "lf",
   "bracketSameLine": false,
+  "plugins": ["prettier-plugin-organize-imports"],
   "printWidth": 80,
   "quoteProps": "as-needed",
   "semi": true,

diff --git a/.storybook/preview-head.html b/.storybook/preview-head.html
@@ -1,3 +0,0 @@
-<link rel="preconnect" href="https://fonts.googleapis.com" crossorigin>
-<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-<link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:ital,wght@0,300;0,400;0,600;0,700;1,300;1,400;1,600;1,700&display=swap" rel="stylesheet" crossorigin>

diff --git a/.storybook/preview.js b/.storybook/preview.js
@@ -1,6 +1,7 @@
 import '../source/00-config/index.css';
 import '../source/01-global/index.css';
 import '../source/06-utility/index.css';
+import SourceSansFontStyle from '../source/01-global/fonts/source-sans';
 
 const parameters = {
   actions: { argTypesRegex: '^on[A-Z].*' },
@@ -57,16 +58,23 @@ const withWritingDirection = (Story, context) => {
           direction === 'vrl'
             ? 'vertical-rl'
             : direction === 'vlr'
-            ? 'vertical-lr'
-            : 'horizontal-tb',
+              ? 'vertical-lr'
+              : 'horizontal-tb',
       }}
     >
       <Story />
     </div>
   );
 };
 
-const decorators = [withWritingDirection];
+const withFont = Story => (
+  <>
+    <SourceSansFontStyle />
+    <Story />
+  </>
+);
+
+const decorators = [withWritingDirection, withFont];
 
 const preview = {
   parameters,

diff --git a/pages/about.tsx → app/about/page.tsx b/pages/about.tsx → app/about/page.tsx
@@ -1,7 +1,6 @@
-import type { NextPage } from 'next';
-import Page from '../source/04-templates/Page/Page';
+import Page from '../../source/04-templates/Page/Page';
 
-const About: NextPage = () => {
+function About() {
   const title = 'About Forum One Next.js Starter App';
   return (
     <Page title={title} description="Next app using TypeScript and Emotion">
@@ -117,6 +116,6 @@ const About: NextPage = () => {
       </p>
     </Page>
   );
-};
+}
 
 export default About;
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -0,0 +1,63 @@
+import { JSX, PropsWithChildren } from 'react';
+import '../source/00-config/index.css';
+import SourceSansFontStyle from '../source/01-global/fonts/source-sans';
+import '../source/01-global/index.css';
+import Footer from '../source/02-layouts/Footer/Footer';
+import Header from '../source/02-layouts/Header/Header';
+import SiteContainer from '../source/02-layouts/SiteContainer/SiteContainer';
+import BackToTop from '../source/03-components/BackToTop/BackToTop';
+import Menu from '../source/03-components/Menu/Menu';
+import ResponsiveMenu from '../source/03-components/Menu/ResponsiveMenu/ResponsiveMenu';
+import footerStyles from '../source/03-components/Menu/menu-footer.module.css';
+import SiteName from '../source/03-components/SiteName/SiteName';
+import Skiplink from '../source/03-components/Skiplink/Skiplink';
+import '../source/06-utility/index.css';
+
+function RootLayout({ children }: PropsWithChildren): JSX.Element {
+  return (
+    <html lang="en">
+      <body id="top">
+        <SourceSansFontStyle />
+        <Skiplink />
+        <SiteContainer>
+          <Header>
+            <SiteName siteName="NextJS Starter" />
+            <ResponsiveMenu
+              items={[
+                {
+                  title: 'Home',
+                  url: '/',
+                },
+                {
+                  title: 'About',
+                  url: '/about',
+                },
+              ]}
+            />
+          </Header>
+          {/* Breadcrumb */}
+          {children}
+          <Footer>
+            <Menu
+              items={[
+                {
+                  title: 'Home',
+                  url: '/',
+                },
+                {
+                  title: 'About',
+                  url: '/about',
+                },
+              ]}
+              modifierClasses={footerStyles.menu}
+              itemClasses={footerStyles.item}
+            />
+          </Footer>
+        </SiteContainer>
+        <BackToTop text="Back to Top" topElement="top" />
+      </body>
+    </html>
+  );
+}
+
+export default RootLayout;
diff --git a/pages/index.tsx → app/page.tsx b/pages/index.tsx → app/page.tsx
@@ -1,12 +1,11 @@
-import type { NextPage } from 'next';
 import Image from 'next/image';
 import heroPlaceholder from '../public/images/hero-placeholder.jpg';
 import Section from '../source/02-layouts/Section/Section';
 import HeroBgImage from '../source/03-components/HeroBgImage/HeroBgImage';
 import Wysiwyg from '../source/03-components/Wysiwyg/Wysiwyg';
 import LandingPage from '../source/04-templates/LandingPage/LandingPage';
 
-const Home: NextPage = () => {
+function Home() {
   const title = 'Forum One Next.js Starter App';
   return (
     <LandingPage
@@ -64,6 +63,6 @@ const Home: NextPage = () => {
       </Section>
     </LandingPage>
   );
-};
+}
 
 export default Home;