chore: upgrade to Fresh 1.6.1 and std 0.208.0

README.md

@@ -173,7 +173,7 @@ See other examples of blog post files in [/posts](/posts).
 
 You can customize theme options such as spacing, color, etc. By default, Deno
 SaaSKit comes with `primary` and `secondary` colors predefined within
-`twind.config.ts`. Change these values to match your desired color scheme.
+`tailwind.config.ts`. Change these values to match your desired color scheme.
 
 ### Cover Image
 

components/Footer.tsx

@@ -1,12 +1,5 @@
 // Copyright 2023 the Deno authors. All rights reserved. MIT license.
-import {
-  ACTIVE_LINK_STYLES,
-  LINK_STYLES,
-  NAV_STYLES,
-  SITE_BAR_STYLES,
-  SITE_NAME,
-} from "@/utils/constants.ts";
-import { cx } from "@twind/core";
+import { SITE_NAME } from "@/utils/constants.ts";
 import IconBrandDiscord from "tabler_icons_tsx/brand-discord.tsx";
 import IconBrandGithub from "tabler_icons_tsx/brand-github.tsx";
 import IconRss from "tabler_icons_tsx/rss.tsx";
@@ -66,33 +59,31 @@ export interface FooterProps {
 
 export default function Footer(props: FooterProps) {
   return (
-    <footer
-      class={`${SITE_BAR_STYLES} flex-col md:flex-row mt-8`}
-    >
+    <footer class="site-bar-styles flex-col md:flex-row mt-8">
       <p>© {SITE_NAME}</p>
-      <nav class={NAV_STYLES}>
+      <nav class="nav-styles">
         <a
           href="/blog"
-          class={cx(LINK_STYLES, ACTIVE_LINK_STYLES)}
+          class="link-styles data-[current]:!text-black data-[current]:dark:!text-white"
         >
           Blog
         </a>
-        <a href="/feed" aria-label="Deno Hunt RSS Feed" class={LINK_STYLES}>
+        <a href="/feed" aria-label="Deno Hunt RSS Feed" class="link-styles">
           <IconRss class="h-6 w-6" />
         </a>
         <a
           href="https://discord.gg/deno"
           target="_blank"
           aria-label="Deno SaaSKit on Discord"
-          class={LINK_STYLES}
+          class="link-styles"
         >
           <IconBrandDiscord class="h-6 w-6" />
         </a>
         <a
           href="https://github.com/denoland/saaskit"
           target="_blank"
           aria-label="Deno SaaSKit repo on GitHub"
-          class={LINK_STYLES}
+          class="link-styles"
         >
           <IconBrandGithub class="h-6 w-6" />
         </a>

components/Header.tsx

@@ -1,15 +1,8 @@
 // Copyright 2023 the Deno authors. All rights reserved. MIT license.
-import {
-  ACTIVE_ANCESTOR_LINK_STYLES,
-  ACTIVE_LINK_STYLES,
-  LINK_STYLES,
-  SITE_BAR_STYLES,
-  SITE_NAME,
-} from "@/utils/constants.ts";
+import { SITE_NAME } from "@/utils/constants.ts";
 import { isStripeEnabled } from "@/utils/stripe.ts";
 import IconX from "tabler_icons_tsx/x.tsx";
 import IconMenu from "tabler_icons_tsx/menu-2.tsx";
-import { cx } from "@twind/core";
 import { User } from "@/utils/db.ts";
 
 export interface HeaderProps {
@@ -23,14 +16,8 @@ export interface HeaderProps {
 }
 
 export default function Header(props: HeaderProps) {
-  const NAV_ITEM = "text-gray-500 px-3 py-4 sm:py-2";
   return (
-    <header
-      class={cx(
-        SITE_BAR_STYLES,
-        "flex-col sm:flex-row",
-      )}
-    >
+    <header class="site-bar-styles flex-col sm:flex-row">
       <input
         type="checkbox"
         id="nav-toggle"
@@ -71,19 +58,19 @@ export default function Header(props: HeaderProps) {
         `}
       </script>
       <nav
-        class={"hidden flex-col gap-x-4 divide-y divide-solid sm:(flex items-center flex-row divide-y-0)"}
+        class={"hidden flex-col gap-x-4 divide-y divide-solid sm:flex sm:items-center sm:flex-row sm:divide-y-0"}
       >
         <a
           href="/dashboard"
-          class={cx(LINK_STYLES, ACTIVE_ANCESTOR_LINK_STYLES, NAV_ITEM)}
+          class="link-styles data-[ancestor]:!text-black data-[ancestor]:dark:!text-white nav-item"
         >
           Dashboard
         </a>
         {isStripeEnabled() &&
           (
             <a
               href="/pricing"
-              class={cx(LINK_STYLES, ACTIVE_LINK_STYLES, NAV_ITEM)}
+              class="link-styles data-[current]:!text-black data-[current]:dark:!text-white nav-item"
             >
               Pricing
             </a>
@@ -92,16 +79,20 @@ export default function Header(props: HeaderProps) {
           ? (
             <a
               href="/account"
-              class={cx(LINK_STYLES, ACTIVE_LINK_STYLES, NAV_ITEM)}
+              class="link-styles data-[current]:!text-black data-[current]:dark:!text-white nav-item"
             >
               Account
             </a>
           )
-          : <a href="/signin" class={cx(LINK_STYLES, NAV_ITEM)}>Sign in</a>}
+          : (
+            <a href="/signin" class="link-styles nav-item">
+              Sign in
+            </a>
+          )}
         <div class="rounded-lg bg-gradient-to-tr from-secondary to-primary p-px">
           <a
             href="/submit"
-            class="text-center text-white rounded-[7px] transition duration-300 px-4 py-2 block hover:(bg-white text-black dark:(bg-gray-900 !text-white))"
+            class="text-center text-white rounded-[7px] transition duration-300 px-4 py-2 block hover:bg-white hover:text-black hover:dark:bg-gray-900 hover:dark:!text-white"
           >
             Submit
           </a>

components/TabsBar.tsx

@@ -1,6 +1,4 @@
 // Copyright 2023 the Deno authors. All rights reserved. MIT license.
-import { LINK_STYLES } from "@/utils/constants.ts";
-import { cx } from "@twind/core";
 import { ComponentChildren } from "preact";
 
 export interface TabItemProps {
@@ -15,13 +13,11 @@ export function TabItem(props: TabItemProps) {
   return (
     <a
       href={props.path}
-      class={cx(
-        "px-4 py-2 rounded-lg",
+      class={`px-4 py-2 rounded-lg ${
         props.active
-          ? "bg-gray-100 text-black dark:(bg-gray-800 text-white)"
-          : "",
-        LINK_STYLES,
-      )}
+          ? "bg-gray-100 text-black dark:bg-gray-800 dark:text-white"
+          : ""
+      } link-styles`}
     >
       {props.children}
     </a>

deno.json

@@ -22,21 +22,21 @@
   "compilerOptions": { "jsx": "react-jsx", "jsxImportSource": "preact" },
   "imports": {
     "@/": "./",
-    "$fresh/": "https://deno.land/x/fresh@1.5.4/",
+    "$fresh/": "https://deno.land/x/fresh@1.6.1/",
     "$gfm": "https://deno.land/x/gfm@0.2.5/mod.ts",
-    "preact": "https://esm.sh/preact@10.18.1",
-    "preact/": "https://esm.sh/preact@10.18.1/",
+    "preact": "https://esm.sh/preact@10.19.2",
+    "preact/": "https://esm.sh/preact@10.19.2/",
     "preact-render-to-string": "https://esm.sh/*preact-render-to-string@6.2.2",
     "@preact/signals": "https://esm.sh/*@preact/signals@1.2.1",
     "@preact/signals-core": "https://esm.sh/*@preact/signals-core@1.5.0",
-    "twind-preset-tailwind/": "https://esm.sh/@twind/preset-tailwind@1.1.4/",
-    "twind-preset-ext": "https://esm.sh/@twind/preset-ext@1.0.7/",
-    "std/": "https://deno.land/std@0.205.0/",
+    "tailwindcss": "npm:tailwindcss@3.3.5",
+    "tailwindcss/": "npm:/tailwindcss@3.3.5/",
+    "tailwindcss/plugin": "npm:/tailwindcss@3.3.5/plugin.js",
+    "std/": "https://deno.land/std@0.208.0/",
     "stripe": "npm:/stripe@13.5.0",
     "feed": "npm:/feed@4.2.2",
     "kv_oauth/": "https://deno.land/x/deno_kv_oauth@v0.9.1/",
     "tabler_icons_tsx/": "https://deno.land/x/tabler_icons_tsx@0.0.4/tsx/",
-    "@twind/core": "https://esm.sh/@twind/core@1.1.3",
     "fresh_charts/": "https://deno.land/x/fresh_charts@0.3.1/"
   },
   "exclude": ["cov/", "_fresh/", "**/_fresh/*"],