Merge pull request #1 from richard-unterberg/feature/evaluate-uno-css

Feature/evaluate uno css

.eslintrc.json

@@ -26,6 +26,7 @@
     "react/jsx-props-no-spreading": 0,
     "no-param-reassign": 0,
     "no-console": 2,
+    "import/no-extraneous-dependencies": 0,
     "class-methods-use-this": 0,
     "react/require-default-props": 0,
     "import/prefer-default-export": 0,

README.md

@@ -1,11 +1,11 @@
 # TypeScript + React + Vike
-## feat. Tailwind CSS + ESLint + Prettier)
+## feat. Uno CSS + ESLint + Prettier)
 
 An SSR-ready vite-react starter with vike and my usual friends tailwind and lucide-icons 😙.
 
 Features:
 - vike (vite + ssr)
-- Tailwind CSS
+- Uno CSS
 - SPA + SSR
 - Fontsource
 - Custom Tailwind Theme Hook

components/LinkElement.tsx

@@ -1,24 +1,16 @@
 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 LinkElement = ({ children, href }: { children: React.ReactNode; href: string }) => (
+  <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={10} />
+  </Link>
+)
 
 export default LinkElement

layouts/Header.tsx

@@ -2,48 +2,39 @@ import Icon from '#components/Icon'
 import Link from '#components/Link'
 import Nav from '#components/Nav'
 import Popover from '#components/Popover'
-import useAppTheme from '#hooks/useTheme'
 import { ICON_ID } from '#lib/icons/iconID'
 
-const Header = () => {
-  const { spacing } = useAppTheme()
+const Header = () => (
+  <div>
+    <Popover>
+      <Link
+        aria-label="to-github"
+        href="https://github.com/richard-unterberg/ts-react-vike-start"
+        external
+      >
+        <Icon icon={ICON_ID.Github} size={32} className="text-dark" />
+      </Link>
+    </Popover>
 
-  return (
-    <div>
-      <Popover>
-        <Link
-          aria-label="to-github"
-          href="https://github.com/richard-unterberg/ts-react-vike-start"
-          external
-        >
-          <Icon icon={ICON_ID.Github} size={spacing(8)} className="text-dark" />
-        </Link>
-      </Popover>
-
-      <div className="xs:block md:flex gap-6 mt-16 my-10 items-center">
-        <Icon
-          icon={ICON_ID.MagnetIcon}
-          className="mx-auto mb-4 md:mx-0 text-warning"
-          size={spacing(24)}
-        />
-        <div className="text-center md:text-left">
-          <p className="mb-5 font-mono">ts-react-vike-start</p>
-          <h1 className="text-2xl md:text-3xl mb-2 font-bold" id="typescript--react--vite">
-            React + Vike + TS
-          </h1>
-          <h2 className="font-normal mb-6" id="feat-tailwind-css--eslint--prettier">
-            Tailwind CSS + ESLint + Prettier
-          </h2>
-        </div>
+    <div className="xs:block md:flex gap-6 mt-16 my-10 items-center">
+      <Icon icon={ICON_ID.MagnetIcon} className="mx-auto mb-4 md:mx-0 text-warning" size={96} />
+      <div className="text-center md:text-left">
+        <p className="mb-5 font-mono">ts-react-vike-start</p>
+        <h1 className="text-2xl md:text-3xl mb-2 font-bold" id="typescript--react--vite">
+          React + Vike + TS
+        </h1>
+        <h2 className="font-normal mb-6" id="feat-tailwind-css--eslint--prettier">
+          Tailwind CSS + ESLint + Prettier
+        </h2>
       </div>
-      <p className="mb-10">
-        Just another SSR-ready vite-react starter template with some sugar from my usual friends
-        tailwind, lucide-icons and a strict linting setup. React 18 Streaming enabled (Server /
-        Client) 🌊
-      </p>
-      <Nav />
     </div>
-  )
-}
+    <p className="mb-10">
+      Just another SSR-ready vite-react starter template with some sugar from my usual friends
+      tailwind, lucide-icons and a strict linting setup. React 18 Streaming enabled (Server /
+      Client) 🌊
+    </p>
+    <Nav />
+  </div>
+)
 
 export default Header

layouts/LayoutDefault.tsx

@@ -1,6 +1,8 @@
 import '@fontsource/inter/latin-400.css'
 import '@fontsource/inter/latin-700.css'
 import '#layouts/styles.css'
+import '@unocss/reset/tailwind.css'
+import 'virtual:uno.css'
 
 import { ReactNode, StrictMode } from 'react'
 import { PageContextClient, PageContextServer } from 'vike/types'
@@ -18,7 +20,7 @@ const LayoutDefault = ({
 }) => (
   <StrictMode>
     <PageContextProvider pageContext={pageContext}>
-      <div className="max-w-4xl m-auto text-light">
+      <div className="max-w-4xl m-auto text-light font-sans">
         <div className="relative container px-5 mx-auto text-white text-base">
           <Header />
           <div className="page-portal">{children}</div>

layouts/styles.css

@@ -1,16 +1,7 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-body {
-    background-color: var(--tw-dark);
-}
-
 .page-portal {
     opacity: 1;
     transition: opacity 0.5s ease-in-out;
 }
-
 body.page-is-transitioning .page-portal {
     opacity: 0;
     transition: opacity 0.5s ease-in-out;