move landing to nextjs (#11)

* move landing to nextjs

* rename fonts folder

* change font name in globalStyle

* add metadata type

* fix

* remove styled-components, create tailwind styles

* add semantic tags

* Create nextjs.yml

* configure github actions

* fix

* fix

* fix

* fix

* CI update bun i

* CI update bun i

* fix

* change background color

* add artifact to nextjs.yml

* change nextjs.yml

* specify directory in deploy job

* fix

* fix nextjs.yml

* fix nextjs.yml

* fix

* remove comments, rename const

* change deploy branch

---------

Co-authored-by: Anatolii Olshevskyi <[email protected]>

.github/workflows/nextjs.yml

@@ -0,0 +1,78 @@
+name: Deploy Next.js site to Pages
+
+on:
+  push:
+    branches: ["main"]
+
+  workflow_dispatch:
+
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+concurrency:
+  group: "pages"
+  cancel-in-progress: false
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    defaults:
+      run:
+        working-directory: ./landing
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+      - name: Detect package manager
+        id: detect-package-manager
+        run: |
+          if [ -f "${{ github.workspace }}/landing/bun.lockb" ]; then
+            echo "manager=bun" >> $GITHUB_OUTPUT
+            echo "command=install" >> $GITHUB_OUTPUT
+            echo "runner=bun" >> $GITHUB_OUTPUT
+            exit 0
+          else
+            echo "Unable to determine package manager"
+            exit 1
+          fi
+      - name: Set up Bun
+        uses: oven-sh/setup-bun@v1
+      - name: Setup Pages
+        uses: actions/configure-pages@v3
+        with:
+          static_site_generator: next
+      - name: Restore cache
+        uses: actions/cache@v3
+        with:
+          path: |
+            .next/cache
+          key: ${{ runner.os }}-nextjs-${{ hashFiles( '**/bun.lockb') }}-${{ hashFiles('**.[jt]s', '**.[jt]sx') }}
+          restore-keys: |
+            ${{ runner.os }}-nextjs-${{ hashFiles('**/bun.lockb') }}-
+      - name: Install dependencies
+        run: ${{ steps.detect-package-manager.outputs.manager }} ${{ steps.detect-package-manager.outputs.command }}
+      - name: Set BASE_PATH environment variable
+        run: echo "BASE_PATH=/${GITHUB_REPOSITORY##*/}" >> $GITHUB_ENV
+      - name: Build with Next.js
+        run: ${{ steps.detect-package-manager.outputs.runner }} next build
+      - name: Static HTML export with Next.js
+        run: ${{ steps.detect-package-manager.outputs.runner }} next export
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v2
+        with:
+          path: ./landing/out
+
+  deploy:
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    runs-on: ubuntu-latest
+    defaults:
+      run:
+        working-directory: ./landing
+    needs: build
+    steps:
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v2

landing/app/globals.css

@@ -18,10 +18,4 @@
 
 body {
   color: rgb(var(--foreground-rgb));
-  background: linear-gradient(
-      to bottom,
-      transparent,
-      rgb(var(--background-end-rgb))
-    )
-    rgb(var(--background-start-rgb));
 }

landing/app/layout.tsx

@@ -1,22 +1,62 @@
-import './globals.css'
+import localFont from 'next/font/local'
 import type { Metadata } from 'next'
-import { Inter } from 'next/font/google'
+import Providers from 'app/providers'
+import { ChildrenProp } from 'src/types'
+import './globals.css'
 
-const inter = Inter({ subsets: ['latin'] })
+const fonts = localFont({
+  src: [
+    {
+      path: '../public/static/fonts/GTWalsheimPro-Light.woff2',
+      weight: '300',
+      style: 'normal',
+    },
+    {
+      path: '../public/static/fonts/GTWalsheimPro-Regular.woff2',
+      weight: '400',
+      style: 'normal',
+    },
+    {
+      path: '../public/static/fonts/GTWalsheimPro-Thin.woff2',
+      weight: '100',
+      style: 'normal',
+    },
+    {
+      path: '../public/static/fonts/GTWalsheimPro-UltraBold.woff2',
+      weight: '800',
+      style: 'normal',
+    },
+    {
+      path: '../public/static/fonts/GTWalsheimPro-Bold.woff2',
+      weight: '600',
+      style: 'bold',
+    },
+    {
+      path: '../public/static/fonts/GTWalsheimPro-Medium.woff2',
+      weight: '500',
+      style: 'normal',
+    },
+    {
+      path: '../public/static/fonts/GTWalsheimPro-UltraLight.woff2',
+      weight: '200',
+      style: 'normal',
+    },
+  ],
+})
 
 export const metadata: Metadata = {
-  title: 'Create Next App',
-  description: 'Generated by create next app',
+  title: 'SpaceH',
+  description: `SpaceH - the tool to keep all information about your team, in one single place`,
 }
 
-export default function RootLayout({
-  children,
-}: {
-  children: React.ReactNode
-}): JSX.Element {
+const RootLayout = ({ children }: ChildrenProp): JSX.Element => {
   return (
     <html lang="en">
-      <body className={inter.className}>{children}</body>
+      <body className={`${fonts.className} bg-black`}>
+        <Providers>{children}</Providers>
+      </body>
     </html>
   )
 }
+
+export default RootLayout

landing/app/page.tsx

@@ -1,112 +1,34 @@
 import Image from 'next/image'
+import { PREFIX } from 'src/helpers/prefix'
 
-export default function Home(): JSX.Element {
-  return (
-    <main className="flex min-h-screen flex-col items-center justify-between p-24">
-      <div className="z-10 max-w-5xl w-full items-center justify-between font-mono text-sm lg:flex">
-        <p className="fixed left-0 top-0 flex w-full justify-center border-b border-gray-300 bg-gradient-to-b from-zinc-200 pb-6 pt-8 backdrop-blur-2xl dark:border-neutral-800 dark:bg-zinc-800/30 dark:from-inherit lg:static lg:w-auto  lg:rounded-xl lg:border lg:bg-gray-200 lg:p-4 lg:dark:bg-zinc-800/30">
-          Get started by editing&nbsp;
-          <code className="font-mono font-bold">app/page.tsx</code>
-        </p>
-        <div className="fixed bottom-0 left-0 flex h-48 w-full items-end justify-center bg-gradient-to-t from-white via-white dark:from-black dark:via-black lg:static lg:h-auto lg:w-auto lg:bg-none">
-          <a
-            className="pointer-events-none flex place-items-center gap-2 p-8 lg:pointer-events-auto lg:p-0"
-            href="https://vercel.com?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            By Midstem{' '}
-            <Image
-              src="/vercel.svg"
-              alt="Vercel Logo"
-              className="dark:invert"
-              width={100}
-              height={24}
-              priority
-            />
-          </a>
-        </div>
-      </div>
-
-      <div className="relative flex place-items-center before:absolute before:h-[300px] before:w-[480px] before:-translate-x-1/2 before:rounded-full before:bg-gradient-radial before:from-white before:to-transparent before:blur-2xl before:content-[''] after:absolute after:-z-20 after:h-[180px] after:w-[240px] after:translate-x-1/3 after:bg-gradient-conic after:from-sky-200 after:via-blue-200 after:blur-2xl after:content-[''] before:dark:bg-gradient-to-br before:dark:from-transparent before:dark:to-blue-700 before:dark:opacity-10 after:dark:from-sky-900 after:dark:via-[#0141ff] after:dark:opacity-40 before:lg:h-[360px] z-[-1]">
+const Home = (): JSX.Element => (
+  <main className="flex h-screen text-white flex-col gap-1.5 lg:flex-row lg:gap-0 ">
+    <section className="flex flex-1 flex-col items-center justify-center pt-10">
+      <h1 className="px-4 text-4xl font-medium text-center md:text-5xl">
+        Hi there, this is SpaceH!
+      </h1>
+      <p className="text-center pb-0 px-4 pt-3 max-w-lg text-lg md:text-2xl">
+        We are coming soon! The tool to keep all information about your team, in
+        one single place
+      </p>
+    </section>
+    <section
+      className="flex flex-1 flex-col justify-end min-h-400 bg-cover bg-no-repeat bg-center-35"
+      style={{
+        backgroundImage: `url('${PREFIX}/static/images/astronaut.png')`,
+      }}
+    >
+      <div className="flex flex-col max-w-xl mb-10 py-7 gap-4 text-4xl px-4">
         <Image
-          className="relative dark:drop-shadow-[0_0_0.3rem_#ffffff70] dark:invert"
-          src="/next.svg"
-          alt="Next.js Logo"
-          width={180}
-          height={37}
-          priority
+          src={`${PREFIX}/static/icons/quotes.svg`}
+          alt="quote"
+          width={40}
+          height={40}
         />
+        <p>Go anywhere you want in a Galaxy full of wonders</p>
       </div>
-      <div className="mb-32 grid text-center lg:max-w-5xl lg:w-full lg:mb-0 lg:grid-cols-4 lg:text-left">
-        <a
-          href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
-          className="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <h2 className="mb-3 text-2xl font-semibold">
-            Docs{' '}
-            <span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">
-              -&gt;
-            </span>
-          </h2>
-          <p className="m-0 max-w-[30ch] text-sm opacity-50">
-            Find in-depth information about Next.js features and API.
-          </p>
-        </a>
-
-        <a
-          href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-          className="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <h2 className="mb-3 text-2xl font-semibold">
-            Learn{' '}
-            <span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">
-              -&gt;
-            </span>
-          </h2>
-          <p className="m-0 max-w-[30ch] text-sm opacity-50">
-            Learn about Next.js in an interactive course with&nbsp;quizzes!
-          </p>
-        </a>
+    </section>
+  </main>
+)
 
-        <a
-          href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
-          className="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <h2 className="mb-3 text-2xl font-semibold">
-            Templates{' '}
-            <span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">
-              -&gt;
-            </span>
-          </h2>
-          <p className="m-0 max-w-[30ch] text-sm opacity-50">
-            Explore the Next.js 13 playground.
-          </p>
-        </a>
-
-        <a
-          href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
-          className="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <h2 className="mb-3 text-2xl font-semibold">
-            Deploy{' '}
-            <span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">
-              -&gt;
-            </span>
-          </h2>
-          <p className="m-0 max-w-[30ch] text-sm opacity-50">
-            Instantly deploy your Next.js site to a shareable URL with Vercel.
-          </p>
-        </a>
-      </div>
-    </main>
-  )
-}
+export default Home

landing/app/providers.tsx

@@ -0,0 +1,10 @@
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-nocheck
+
+import { ChildrenProp } from 'src/types'
+
+const Providers = ({ children }: ChildrenProp): JSX.Element => {
+  return children
+}
+
+export default Providers

landing/next.config.js

@@ -3,15 +3,7 @@
  */
 const nextConfig = {
   output: 'export',
-
-  // Optional: Change links `/me` -> `/me/` and emit `/me.html` -> `/me/index.html`
-  // trailingSlash: true,
-
-  // Optional: Prevent automatic `/me` -> `/me/`, instead preserve `href`
-  // skipTrailingSlashRedirect: true,
-
-  // Optional: Change the output directory `out` -> `dist`
-  // distDir: 'dist',
+  basePath: process.env.BASE_PATH || '',
 }
- 
-module.exports = nextConfig
+
+module.exports = nextConfig

landing/src/helpers/prefix.ts

@@ -0,0 +1,3 @@
+const PREFIX = process.env.BASE_PATH || ''
+
+export { PREFIX }

landing/src/modules/extension.d.ts

@@ -0,0 +1,14 @@
+declare module '*.png' {
+  const value: string
+
+  export default value
+}
+
+declare module '*.svg' {
+  import React = require('react')
+
+  export const ReactComponent: React.SFC<React.SVGProps<SVGSVGElement>>
+  const src: string
+
+  export default src
+}

landing/src/modules/styled.d.ts

@@ -0,0 +1,11 @@
+import 'styled-components'
+import { BreakPoints, Colors, FontSizes, Spaces } from 'src/theme'
+
+declare module 'styled-components' {
+  export interface DefaultTheme {
+    breakpoints: typeof BreakPoints
+    fontSizes: typeof FontSizes
+    colors: typeof Colors
+    spaces: typeof Spaces
+  }
+}

landing/src/types/index.ts

@@ -0,0 +1,5 @@
+import { ReactNode } from 'react'
+
+export type ChildrenProp = {
+  children: ReactNode
+}

landing/tailwind.config.ts

@@ -13,6 +13,16 @@ const config: Config = {
         'gradient-conic':
           'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))',
       },
+      backgroundPosition: {
+        'center-35': '50% 35%',
+      },
+      minHeight: {
+        100: '100px',
+        200: '200px',
+        300: '300px',
+        400: '400px',
+        500: '500px',
+      },
     },
   },
   plugins: [],