Add router, first pages, components

Adam Plesnik · Adam Plesnik · commit b507f1a34e23 · 2024-04-10T11:42:49.000+02:00
diff --git a/docs/index.html b/docs/index.html
@@ -1,5 +1,5 @@
 <!doctype html>
-<html lang="en">
+<html lang="en" class="scroll-smooth bg-zinc-50 text-zinc-950 dark:bg-gray-900 dark:text-gray-300">
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
diff --git a/docs/package.json b/docs/package.json
@@ -10,8 +10,13 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "localforage": "^1.10.0",
+    "match-sorter": "^6.3.4",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "react-router-dom": "^6.22.3",
+    "sort-by": "^0.0.2",
+    "tailwindcss": "^3.4.3"
   },
   "devDependencies": {
     "@types/react": "^18.2.66",
@@ -24,7 +29,6 @@
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.6",
     "postcss": "^8.4.38",
-    "tailwindcss": "^3.4.3",
     "typescript": "^5.2.2",
     "vite": "^5.2.0"
   }
diff --git a/docs/src/App.tsx b/docs/src/App.tsx
diff --git a/docs/src/layouts/MainLayout.tsx b/docs/src/layouts/MainLayout.tsx
@@ -0,0 +1,23 @@
+import { PropsWithChildren } from 'react'
+import { ScrollRestoration } from 'react-router-dom'
+import Footer from '../partials/Footer'
+import PageBackground from '../partials/PageBackground'
+
+function MainLayout({ children }: PropsWithChildren<MainLayoutProps>) {
+  return (
+    <div className="flex flex-col items-center justify-center">
+      <PageBackground />
+      <div className="relative z-10 w-full max-w-screen-lg p-8 md:p-16 lg:p-20">
+        <div className="w-full">{children}</div>
+        <Footer />
+      </div>
+      <ScrollRestoration />
+    </div>
+  )
+}
+
+export interface MainLayoutProps {
+  children: PropsWithChildren
+}
+
+export default MainLayout
diff --git a/docs/src/main.tsx b/docs/src/main.tsx
@@ -1,10 +1,19 @@
 import React from 'react'
 import ReactDOM from 'react-dom/client'
-import App from './App.tsx'
+import { RouterProvider, createBrowserRouter } from 'react-router-dom'
+import Home from './pages/Home.tsx'
 import './index.css'
 
+const router = createBrowserRouter([
+  {
+    path: '/',
+    element: <Home />,
+    errorElement: <Home />,
+  },
+])
+
 ReactDOM.createRoot(document.getElementById('root')!).render(
   <React.StrictMode>
-    <App />
+    <RouterProvider router={router} />
   </React.StrictMode>
 )
diff --git a/docs/src/pages/Home.tsx b/docs/src/pages/Home.tsx
@@ -0,0 +1,11 @@
+import MainLayout from '../layouts/MainLayout.tsx'
+
+function Home() {
+  return (
+    <MainLayout>
+      <div>Silence.</div>
+    </MainLayout>
+  )
+}
+
+export default Home
diff --git a/docs/src/partials/Footer.tsx b/docs/src/partials/Footer.tsx
@@ -0,0 +1,21 @@
+const Footer = () => {
+  return (
+    <div className="mt-16 flex w-full flex-col gap-4 border-t border-t-zinc-700 pt-4 text-xs sm:flex-row sm:justify-between">
+      <span className="font-medium">Created by Adam Plesník, Bratislava, Slovakia</span>
+      <div className="flex flex-col gap-2 sm:items-end">
+        {/* <Link
+          target="_blank"
+          borderWidth="narrow"
+          href="https://github.com/adamplesnik/tailwindcss-scroll-driven-animations"
+        >
+          github.com/tailwindcss-scroll-driven-animations
+        </Link>
+        <Link target="_blank" borderWidth="narrow" href="https://adamplesnik.com">
+          adamplesnik.com
+        </Link> */}
+      </div>
+    </div>
+  )
+}
+
+export default Footer
diff --git a/docs/src/partials/PageBackground.tsx b/docs/src/partials/PageBackground.tsx
@@ -0,0 +1,14 @@
+const PageBackground = () => {
+  return (
+    <div
+      className={
+        'animate-translate-up timeline fixed left-0 top-0 h-[24rem] w-full ' +
+        'bg-gradient-to-tr from-yellow-200/0 from-55% via-yellow-400/30 via-75% to-purple-800/80 to-[130%] ' +
+        'lg:h-[42rem] ' +
+        'dark:from-slate-700/0 dark:via-slate-700/30 dark:to-violet-950'
+      }
+    ></div>
+  )
+}
+
+export default PageBackground
diff --git a/docs/tailwind.config.js b/docs/tailwind.config.js
@@ -1,6 +1,8 @@
 /** @type {import('tailwindcss').Config} */
 export default {
-  content: ['./src/**/*.{js,ts,jsx,tsx}', './index.html'],
+  content: {
+    files: ['./src/**/*.{js,ts,jsx,tsx}', './index.html'],
+  },
   theme: {
     extend: {},
   },
