feat: add page layout

Author: snax4a

next-sitemap.js

@@ -1,9 +1,11 @@
+import { siteUrl } from '@/config/site';
+
 /**
  * @type {import('next-sitemap').IConfig}
  * @see https://github.com/iamvishnusankar/next-sitemap#readme
  */
 module.exports = {
-  siteUrl: 'https://offerexchange.net',
+  siteUrl,
   generateRobotsTxt: true,
   robotsTxtOptions: {
     policies: [{ userAgent: '*', allow: '/' }],

package.json

@@ -20,6 +20,7 @@
     "prepare": "husky install"
   },
   "dependencies": {
+    "body-scroll-lock": "4.0.0-beta.0",
     "clsx": "1.1.1",
     "next": "12.1.6",
     "react": "18.1.0",
@@ -35,9 +36,9 @@
     "@tailwindcss/forms": "0.5.2",
     "@testing-library/jest-dom": "5.16.4",
     "@testing-library/react": "13.3.0",
+    "@types/body-scroll-lock": "^3.1.0",
     "@types/jest": "28.1.1",
     "@types/react": "18.0.12",
-    "@types/tailwindcss": "3.0.10",
     "@typescript-eslint/eslint-plugin": "5.27.1",
     "@typescript-eslint/parser": "5.27.1",
     "autoprefixer": "10.4.7",
@@ -52,6 +53,8 @@
     "lint-staged": "13.0.1",
     "next-sitemap": "3.0.5",
     "postcss": "8.4.14",
+    "postcss-100vh-fix": "^1.0.2",
+    "postcss-flexbugs-fixes": "^5.0.2",
     "prettier": "2.6.2",
     "prettier-plugin-tailwindcss": "0.1.11",
     "standard-version": "9.5.0",

pnpm-lock.yaml

@@ -2,5 +2,7 @@ module.exports = {
   plugins: {
     tailwindcss: {},
     autoprefixer: {},
+    'postcss-flexbugs-fixes': {},
+    'postcss-100vh-fix': {},
   },
 };

postcss.config.js

@@ -0,0 +1,22 @@
+import * as React from 'react';
+
+interface PageProps {
+  children: React.ReactNode;
+}
+
+export default function Page({ children }: PageProps) {
+  return (
+    <>
+      <div className='h-auto lg:h-screen flex flex-row'>
+        {/* No fallback UI so need to be careful not to suspend directly inside. */}
+        <React.Suspense fallback={null}>
+          <div className='flex flex-1 w-full h-full self-stretch'>
+            <main className='flex grow self-stretch mt-16 sm:mt-10 flex-col justify-around'>
+              {children}
+            </main>
+          </div>
+        </React.Suspense>
+      </div>
+    </>
+  );
+}

public/images/new-tab.png

@@ -1,29 +1,33 @@
 import * as React from 'react';
 import { RiAlarmWarningFill } from 'react-icons/ri';
 
-import Layout from '@/components/layout/Layout';
+import Page from '@/components/layout/Page';
 import ArrowLink from '@/components/links/ArrowLink';
 import Seo from '@/components/Seo';
 
 export default function NotFoundPage() {
   return (
-    <Layout>
+    <Page>
       <Seo templateTitle='Not Found' />
 
       <main>
         <section className='bg-white'>
-          <div className='layout flex min-h-screen flex-col items-center justify-center text-center text-black'>
+          <div className='layout flex self-stretch flex-col items-center justify-center text-center text-black'>
             <RiAlarmWarningFill
               size={60}
               className='drop-shadow-glow animate-flicker text-red-500'
             />
-            <h1 className='mt-8 text-4xl md:text-6xl'>Page Not Found</h1>
-            <ArrowLink className='mt-4 md:text-lg' href='/'>
-              Back to Home
+            <h1 className='mt-8 text-4xl md:text-6xl md:leading-tight'>
+              Ups! Wygląda na to,
+              <br />
+              że ta strona nie istnieje
+            </h1>
+            <ArrowLink className='mt-6 md:text-lg' href='/'>
+              Wróć na stronę główną
             </ArrowLink>
           </div>
         </section>
       </main>
-    </Layout>
+    </Page>
   );
 }

public/svg/Vercel.svg

@@ -2,7 +2,7 @@ import clsx from 'clsx';
 import * as React from 'react';
 
 import Button from '@/components/buttons/Button';
-import Layout from '@/components/layout/Layout';
+import Page from '@/components/layout/Page';
 import ArrowLink from '@/components/links/ArrowLink';
 import ButtonLink from '@/components/links/ButtonLink';
 import PrimaryLink from '@/components/links/PrimaryLink';
@@ -24,7 +24,7 @@ export default function ComponentsPage() {
   const textColor = mode === 'dark' ? 'text-gray-300' : 'text-gray-600';
 
   return (
-    <Layout>
+    <Page>
       <Seo
         templateTitle='Components'
         description='Pre-built components with awesome default'
@@ -307,7 +307,7 @@ export default function ComponentsPage() {
           </div>
         </section>
       </main>
-    </Layout>
+    </Page>
   );
 }
 

public/svg/logo.svg

@@ -1,56 +1,16 @@
 import * as React from 'react';
 
-import Layout from '@/components/layout/Layout';
-import ArrowLink from '@/components/links/ArrowLink';
-import ButtonLink from '@/components/links/ButtonLink';
-import UnderlineLink from '@/components/links/UnderlineLink';
+import Page from '@/components/layout/Page';
 import Seo from '@/components/Seo';
 
-/**
- * SVGR Support
- * Caveat: No React Props Type.
- *
- * You can override the next-env if the type is important to you
- * @see https://stackoverflow.com/questions/68103844/how-to-override-next-js-svg-module-declaration
- */
-import Vercel from '~/svg/Vercel.svg';
-
 export default function HomePage() {
   return (
-    <Layout>
-      {/* <Seo templateTitle='Home' /> */}
+    <Page>
       <Seo />
 
-      <main>
-        <section className='bg-white'>
-          <div className='layout flex min-h-screen flex-col items-center justify-center text-center'>
-            <Vercel className='text-5xl' />
-            <h1 className='mt-4'>
-              Next.js + Tailwind CSS + TypeScript Starter
-            </h1>
-            <p className='mt-2 text-sm text-gray-800'>
-              A starter for Next.js, Tailwind CSS, and TypeScript with Absolute
-              Import, Seo, Link component, pre-configured with Husky{' '}
-            </p>
-            <p className='mt-2 text-sm text-gray-700'>
-              <ArrowLink href='https://github.com/theodorusclarence/ts-nextjs-tailwind-starter'>
-                See the repository
-              </ArrowLink>
-            </p>
-
-            <ButtonLink className='mt-6' href='/components' variant='light'>
-              See all components
-            </ButtonLink>
-
-            <footer className='absolute bottom-2 text-gray-700'>
-              © {new Date().getFullYear()} By{' '}
-              <UnderlineLink href='https://conetso.com'>
-                CONETSO Sp. z o. o.
-              </UnderlineLink>
-            </footer>
-          </div>
-        </section>
-      </main>
-    </Layout>
+      <section className='container self-center'>
+        <div className='flex grow'>Strona główna</div>
+      </section>
+    </Page>
   );
 }

src/components/layout/Layout.tsx

@@ -3,7 +3,9 @@
 @tailwind utilities;
 
 :root {
-  /* #region  /**=========== Primary Color =========== */
+  /* #region  /**=========== Colors =========== */
+  --color-primary: 17 20 45; /* #11142d */
+  --color-secondary: 108 93 211; /* #6C5DD3 */
   --tw-color-primary-50: 245 243 255;
   --tw-color-primary-100: 237 233 254;
   --tw-color-primary-200: 221 214 254;
@@ -24,7 +26,7 @@
   --color-primary-700: rgb(var(--tw-color-primary-700)); /* #6d28d9 */
   --color-primary-800: rgb(var(--tw-color-primary-800)); /* #5b21b6 */
   --color-primary-900: rgb(var(--tw-color-primary-900)); /* #4c1d95 */
-  /* #endregion  /**======== Primary Color =========== */
+  /* #endregion  /**======== Colors =========== */
 }
 
 @layer base {
@@ -40,10 +42,6 @@
       U+2215, U+FEFF, U+FFFD;
   }
 
-  .cursor-newtab {
-    cursor: url('/images/new-tab.png') 10 10, pointer;
-  }
-
   /* #region  /**=========== Typography =========== */
   .h0 {
     @apply font-primary text-3xl font-bold md:text-5xl;
@@ -75,7 +73,7 @@
   }
   /* #endregion  /**======== Typography =========== */
 
-  .layout {
+  .container {
     /* 1100px */
     max-width: 68.75rem;
     @apply mx-auto w-11/12;
@@ -96,8 +94,8 @@
     background-image: linear-gradient(#33333300, #33333300),
       linear-gradient(
         to right,
-        var(--color-primary-400),
-        var(--color-primary-500)
+        rgb(var(--color-secondary)),
+        rgb(var(--color-secondary))
       );
     background-size: 100% 2px, 0 2px;
     background-position: 100% 100%, 0 100%;