Update routes, docs as default, new Tech and Demo sections

Author: Adam Plesnik

docs/src/docs/Docs.tsx

@@ -1,3 +1,4 @@
+import { Minus } from 'lucide-react'
 import Code from '../components/Code'
 import CodeBlock from '../components/CodeBlock'
 import Heading from '../components/Heading'
@@ -59,6 +60,27 @@ const Docs = () => {
       <Heading size={2} id="documentation">
         Documentation
       </Heading>
+      <Paragraph>
+        The plugin provides utilities for a subset of CSS scroll-driven animation properties:
+      </Paragraph>
+      <ul className="mb-4">
+        <li>
+          <Minus className="inline" />
+          <Code>animation-timeline</Code>
+        </li>
+        <li>
+          <Minus className="inline" />
+          <Code>scroll-timeline</Code>, <Code>view-timeline</Code>
+        </li>
+        <li>
+          <Minus className="inline" />
+          <Code>animation-range</Code>
+        </li>
+        <li>
+          <Minus className="inline" />
+          <Code>timeline-scope</Code>
+        </li>
+      </ul>
       <Heading size={3} id="documentation-101">
         How to Make Your CSS Animation Scroll-driven
       </Heading>

docs/src/main.tsx

@@ -2,22 +2,18 @@ import React from 'react'
 import ReactDOM from 'react-dom/client'
 import { RouterProvider, createBrowserRouter } from 'react-router-dom'
 import './index.css'
-import HomeView from './views/HomeView'
 import DocsView from './views/DocsView'
+import TechView from './views/TechView'
 
 const router = createBrowserRouter([
   {
     path: '/',
-    element: <HomeView />,
-    errorElement: <HomeView />,
-  },
-  {
-    path: '/usage',
     element: <DocsView />,
+    errorElement: <DocsView />,
   },
   {
-    path: '/docs',
-    element: <DocsView />,
+    path: '/tech',
+    element: <TechView />,
   },
 ])
 

docs/src/partials/Animations.tsx

@@ -17,28 +17,6 @@ const Animations = () => {
       <Heading size={2} id={'plugin'}>
         Plugin
       </Heading>
-      <Paragraph>
-        The plugin provides utilities for a subset of CSS scroll-driven animation properties:
-      </Paragraph>
-      <ul className="mb-4">
-        <li>
-          <Minus className="inline" />
-          <Code>animation-timeline</Code>
-        </li>
-        <li>
-          <Minus className="inline" />
-          <Code>scroll-timeline</Code>, <Code>view-timeline</Code>
-        </li>
-        <li>
-          <Minus className="inline" />
-          <Code>animation-range</Code>
-        </li>
-        <li>
-          <Minus className="inline" />
-          <Code>timeline-scope</Code>
-        </li>
-      </ul>
-
       <Heading size={3} id={'code'} href="/docs#documentation-animation-timeline">
         Animation Timeline
       </Heading>

docs/src/partials/Installation.tsx

@@ -0,0 +1,24 @@
+import CodeBlock from '../components/CodeBlock'
+import Heading from '../components/Heading'
+import Paragraph from '../components/Paragraph'
+
+const plugin = `module.exports = {
+  plugins: [
+    require('@adam.plesnik/tailwindcss-scroll-driven-animations'),
+    // ...
+  ],
+}`
+
+const Installation = () => {
+  return (
+    <div>
+      <Heading size={2}>Installation</Heading>
+      <Paragraph>Install the plugin from npm.</Paragraph>
+      <CodeBlock>npm install @adam.plesnik/tailwindcss-scroll-driven-animations</CodeBlock>
+      <Paragraph> Then add the plugin to your tailwind.config.js.</Paragraph>
+      <CodeBlock>{plugin}</CodeBlock>
+    </div>
+  )
+}
+
+export default Installation

docs/src/partials/Nav.tsx

@@ -6,8 +6,8 @@ const Nav = () => {
   return (
     <div className="sticky top-0 z-20 flex w-full items-stretch justify-center border-b border-b-slate-200/50 bg-white/20 text-zinc-800 shadow-lg backdrop-blur-sm dark:border-b-slate-600/50 dark:bg-slate-800/60 dark:text-zinc-300">
       <div className="flex w-full max-w-screen-lg items-stretch gap-2 px-8 py-2 md:px-16 lg:px-20">
-        <HeaderNavAnchor to="/">Plugin</HeaderNavAnchor>
-        <HeaderNavAnchor to="/docs">Docs</HeaderNavAnchor>
+        <HeaderNavAnchor to="/">Docs</HeaderNavAnchor>
+        <HeaderNavAnchor to="/tech">Tech</HeaderNavAnchor>
         <div className="flex-1" />
         <DarkModeSwitch />
         <a

docs/src/views/DocsView.tsx

@@ -2,10 +2,14 @@ import { WandSparkles } from 'lucide-react'
 import Docs from '../docs/Docs'
 import Page from '../layouts/Page'
 import Demo from '../partials/Demo'
+import Installation from '../partials/Installation'
+import MainTitle from '../partials/MainTitle'
 
 const DocsView = () => {
   return (
     <Page>
+      <MainTitle />
+      <Installation />
       <div className="hidden gap-4 rounded-lg border border-amber-400 bg-amber-50 p-4 text-sm no-animations:flex dark:border-amber-600 dark:bg-stone-700/30">
         <WandSparkles
           className="size-6 shrink-0 text-amber-500 dark:text-amber-600"

docs/src/views/HomeView.tsx renamed to docs/src/views/TechView.tsx

@@ -2,7 +2,7 @@ import Page from '../layouts/Page.tsx'
 import Animations from '../partials/Animations.tsx'
 import MainTitle from '../partials/MainTitle.tsx'
 
-function HomeView() {
+function TechView() {
   return (
     <Page>
       <MainTitle />
@@ -11,4 +11,4 @@ function HomeView() {
   )
 }
 
-export default HomeView
+export default TechView