🎨 link element more visible, footer to static layout

richard-unterberg · Jan 1, 2024 · de09423 · de09423
1 parent bad385a
commit de09423
Show file tree

Hide file tree

Showing 10 changed files with 130 additions and 107 deletions.
diff --git a/components/Link.tsx b/components/Link.tsx
@@ -25,9 +25,7 @@ const Link = ({ href, external, children, className = '', button }: LinkProps) =
 
     if (button) {
       return `${
-        isActive
-          ? 'bg-primary pointer-events-none'
-          : 'bg-darkLight hover:bg-primary hover:bg-opacity-75'
+        isActive ? 'bg-primary pointer-events-none' : 'bg-primary bg-opacity-50 hover:bg-opacity-75'
       } p-3 ${className} ${staticClassName} `
     }
 

diff --git a/components/LinkElement.tsx b/components/LinkElement.tsx
@@ -0,0 +1,24 @@
+import Icon from '#components/Icon'
+import Link from '#components/Link'
+import useAppTheme from '#hooks/useTheme'
+import { ICON_ID } from '#lib/icons/iconID'
+
+const LinkElement = ({ children, href }: { children: React.ReactNode; href: string }) => {
+  const { spacing } = useAppTheme()
+  return (
+    <Link
+      className="underline underline-offset-3 items-center inline-flex gap-0.5"
+      href={href}
+      external
+    >
+      {children}
+      <Icon
+        icon={ICON_ID.ExternalLink}
+        className="inline-block align-super mr-1"
+        size={spacing(2.5)}
+      />
+    </Link>
+  )
+}
+
+export default LinkElement
diff --git a/components/Nav.tsx b/components/Nav.tsx
@@ -14,7 +14,7 @@ const Nav = () => (
     <ul className="flex gap-3 relative">
       {mainNavigation.map(item => (
         <li key={item.href} className="block">
-          <Link className="bg-darkLight rounded" href={item.href} button>
+          <Link className="rounded" href={item.href} button>
             {item.label}
           </Link>
         </li>

diff --git a/layouts/Footer.tsx b/layouts/Footer.tsx
@@ -0,0 +1,12 @@
+import LinkElement from '#components/LinkElement'
+
+const Footer = () => (
+  <div className="mb-20 mt-20 text-small text-center">
+    <div className="w-1/2 mb-10 border-grayDark h-1 border-dotted border-b-2 mx-auto" />
+    <LinkElement href="https://github.com/richard-unterberg/vike-starter">
+      ⭐️ https://github.com/richard-unterberg/vike-starter
+    </LinkElement>
+  </div>
+)
+
+export default Footer
diff --git a/layouts/LayoutDefault.tsx b/layouts/LayoutDefault.tsx
@@ -4,13 +4,15 @@ import '#layouts/styles.css'
 
 import { ReactNode } from 'react'
 
+import Footer from '#layouts/Footer'
 import Topbar from '#layouts/Topbar'
 
 const LayoutDefault = ({ children }: { children: ReactNode }) => (
   <div className="max-w-4xl m-auto text-light">
     <div className="relative container px-5 mx-auto text-white text-base">
       <Topbar />
       <div>{children}</div>
+      <Footer />
     </div>
   </div>
 )

diff --git a/lib/navigation.ts b/lib/navigation.ts
@@ -1,10 +1,10 @@
 export const mainNavigation = [
   {
-    label: 'Startpage',
+    label: 'Get Started',
     href: '/',
   },
   {
-    label: 'Testpage',
-    href: '/test',
+    label: 'Preconditions & Features',
+    href: '/features',
   },
 ]
diff --git a/pages/features/+Page.tsx b/pages/features/+Page.tsx
@@ -0,0 +1,82 @@
+import BoxElement from '#components/BoxElement'
+import LinkElement from '#components/LinkElement'
+
+const Page = () => (
+  <>
+    <h2 className="text-3xl mb-4" id="usage">
+      Preconditions
+    </h2>
+    <div className="grid grid-cols-1 md:grid-cols-2 gap-3 mb-10">
+      <BoxElement>npm or yarn</BoxElement>
+      <BoxElement>
+        <LinkElement href="https://marketplace.visualstudio.com/items?itemName=EditorConfig.EditorConfig">
+          editorconfig
+        </LinkElement>
+        vs code extension
+      </BoxElement>
+      <BoxElement>
+        <LinkElement href="https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode">
+          prettier
+        </LinkElement>
+        vs code extension
+      </BoxElement>
+      <BoxElement>
+        <LinkElement href="https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss">
+          tailwindcss
+        </LinkElement>
+        vs code extension
+      </BoxElement>
+    </div>
+
+    <h2 className="text-3xl mb-4" id="usage">
+      Features
+    </h2>
+    <div className="grid grid-cols-2 md:grid-cols-3 gap-3 mb-10">
+      <BoxElement>
+        <span>👏 </span>
+        <LinkElement href="https://github.com/facebook/react">React</LinkElement> +{' '}
+        <LinkElement href="https://github.com/vikejs/vike">Vike</LinkElement>
+      </BoxElement>
+      <BoxElement>
+        <span>🎨 </span>
+        <LinkElement href="https://github.com/tailwindlabs/tailwindcss">Tailwind CSS</LinkElement>
+      </BoxElement>
+      <BoxElement>
+        ✍️ <LinkElement href="https://github.com/fontsource/fontsource">@fontsource</LinkElement>
+      </BoxElement>
+      <BoxElement>
+        <span>🎛️ </span> Custom Theme Hook
+      </BoxElement>
+      <BoxElement>
+        <span>💫 </span>{' '}
+        <LinkElement href="https://github.com/lucide-icons/lucide">lucide-react</LinkElement> icons
+      </BoxElement>
+      <BoxElement>
+        <span>🤌 </span> Strict{' '}
+        <LinkElement href="https://github.com/eslint/eslint">eslint</LinkElement> setup
+      </BoxElement>
+      <BoxElement>
+        <span>💄 </span>
+        <LinkElement href="https://github.com/prettier/prettier">Prettier</LinkElement> +{' '}
+        <LinkElement href="https://github.com/trivago/prettier-plugin-sort-imports">
+          Prettier Sort Imports
+        </LinkElement>
+      </BoxElement>
+      <BoxElement>
+        <span>🚨 </span>
+        <LinkElement href="https://github.com/typicode/husky">Husky</LinkElement> +{' '}
+        <LinkElement href="https://github.com/lint-staged/lint-staged">lint-staged</LinkElement>
+      </BoxElement>
+      <BoxElement>
+        <span>⚙️ </span>
+        <LinkElement href="https://github.com/editorconfig/editorconfig">editorconfig</LinkElement>
+      </BoxElement>
+      <BoxElement>
+        <span>🚓 </span>
+        <LinkElement href="https://github.com/microsoft/TypeScript">Typescript</LinkElement>
+      </BoxElement>
+    </div>
+  </>
+)
+
+export default Page
diff --git a/pages/features/+config.h.ts b/pages/features/+config.h.ts
@@ -0,0 +1,5 @@
+export default {
+  title: 'Features & Preconditions | ts-react-vike-start',
+  description:
+    'A list of features and preconditions to get TS-React working in Vite + Vike (Vite SSR) with HMR and handful of strict ESLint rules. I want to add to work with properly in my side projects.',
+}
diff --git a/pages/index/+Page.tsx b/pages/index/+Page.tsx
@@ -2,104 +2,13 @@ import BoxElement from '#components/BoxElement'
 import { BoxHeadline } from '#components/BoxHeadline'
 import CodeElement from '#components/CodeElement'
 import Icon from '#components/Icon'
-import Link from '#components/Link'
 import useAppTheme from '#hooks/useTheme'
 import { ICON_ID } from '#lib/icons/iconID'
 
-const LinkElement = ({ children, href }: { children: React.ReactNode; href: string }) => {
-  const { spacing } = useAppTheme()
-  return (
-    <Link
-      className="underline underline-offset-3 items-center inline-flex gap-0.5"
-      href={href}
-      external
-    >
-      {children}
-      <Icon
-        icon={ICON_ID.ExternalLink}
-        className="inline-block align-super mr-1"
-        size={spacing(2.5)}
-      />
-    </Link>
-  )
-}
-
 const StartPage = () => {
   const { color } = useAppTheme()
   return (
     <>
-      <p className="font-bold mb-4">Preconditions:</p>
-      <div className="grid grid-cols-1 md:grid-cols-2 gap-3 mb-10">
-        <BoxElement>npm or yarn</BoxElement>
-        <BoxElement>
-          <LinkElement href="https://marketplace.visualstudio.com/items?itemName=EditorConfig.EditorConfig">
-            editorconfig
-          </LinkElement>
-          vs code extension
-        </BoxElement>
-        <BoxElement>
-          <LinkElement href="https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode">
-            prettier
-          </LinkElement>
-          vs code extension
-        </BoxElement>
-        <BoxElement>
-          <LinkElement href="https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss">
-            tailwindcss
-          </LinkElement>
-          vs code extension
-        </BoxElement>
-      </div>
-
-      <p className="font-bold mb-4">Features:</p>
-      <div className="grid grid-cols-2 md:grid-cols-3 gap-3 mb-10">
-        <BoxElement>
-          <span>👏 </span>
-          <LinkElement href="https://github.com/facebook/react">React</LinkElement> +{' '}
-          <LinkElement href="https://github.com/vikejs/vike">Vike</LinkElement>
-        </BoxElement>
-        <BoxElement>
-          <span>🎨 </span>
-          <LinkElement href="https://github.com/tailwindlabs/tailwindcss">Tailwind CSS</LinkElement>
-        </BoxElement>
-        <BoxElement>
-          ✍️ <LinkElement href="https://github.com/fontsource/fontsource">@fontsource</LinkElement>
-        </BoxElement>
-        <BoxElement>
-          <span>🎛️ </span> Custom Theme Hook
-        </BoxElement>
-        <BoxElement>
-          <span>💫 </span>{' '}
-          <LinkElement href="https://github.com/lucide-icons/lucide">lucide-react</LinkElement>{' '}
-          icons
-        </BoxElement>
-        <BoxElement>
-          <span>🤌 </span> Strict{' '}
-          <LinkElement href="https://github.com/eslint/eslint">eslint</LinkElement> setup
-        </BoxElement>
-        <BoxElement>
-          <span>💄 </span>
-          <LinkElement href="https://github.com/prettier/prettier">Prettier</LinkElement> +{' '}
-          <LinkElement href="https://github.com/trivago/prettier-plugin-sort-imports">
-            Prettier Sort Imports
-          </LinkElement>
-        </BoxElement>
-        <BoxElement>
-          <span>🚨 </span>
-          <LinkElement href="https://github.com/typicode/husky">Husky</LinkElement> +{' '}
-          <LinkElement href="https://github.com/lint-staged/lint-staged">lint-staged</LinkElement>
-        </BoxElement>
-        <BoxElement>
-          <span>⚙️ </span>
-          <LinkElement href="https://github.com/editorconfig/editorconfig">
-            editorconfig
-          </LinkElement>
-        </BoxElement>
-        <BoxElement>
-          <span>🚓 </span>
-          <LinkElement href="https://github.com/microsoft/TypeScript">Typescript</LinkElement>
-        </BoxElement>
-      </div>
       <h2 className="text-3xl mb-4" id="usage">
         Usage
       </h2>
@@ -143,12 +52,6 @@ const StartPage = () => {
           </p>
         </BoxElement>
       </div>
-      <div className="mb-20 mt-20 text-small text-center">
-        <div className="w-1/2 mb-10 border-grayDark h-1 border-dotted border-b-2 mx-auto" />
-        <LinkElement href="https://github.com/richard-unterberg/vike-starter">
-          ⭐️ https://github.com/richard-unterberg/vike-starter
-        </LinkElement>
-      </div>
     </>
   )
 }

diff --git a/pages/test/+Page.tsx b/pages/test/+Page.tsx