Skip to content

Commit

Permalink
chore: upgrade to Fresh 1.6.1 and std 0.208.0 (#646)
Browse files Browse the repository at this point in the history
closes #644

I see the guidelines have changed since I last contributed (thanks
github!) and that caused me to look for an issue. Fortunately there was
the above, but I see you want tailwind as well. I'll open this as a
draft for now.

---------

Co-authored-by: Asher Gomez <[email protected]>
  • Loading branch information
deer and iuioiua authored Dec 13, 2023
1 parent 311e103 commit 27320c5
Show file tree
Hide file tree
Showing 32 changed files with 259 additions and 274 deletions.
2 changes: 1 addition & 1 deletion README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down
23 changes: 7 additions & 16 deletions components/Footer.tsx
Original file line number Diff line number Diff line change
@@ -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";
Expand Down Expand Up @@ -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>
Expand Down
33 changes: 12 additions & 21 deletions components/Header.tsx
Original file line number Diff line number Diff line change
@@ -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 {
Expand All @@ -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"
Expand Down Expand Up @@ -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>
Expand All @@ -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>
Expand Down
12 changes: 4 additions & 8 deletions components/TabsBar.tsx
Original file line number Diff line number Diff line change
@@ -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 {
Expand All @@ -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>
Expand Down
14 changes: 7 additions & 7 deletions deno.json
Original file line number Diff line number Diff line change
Expand Up @@ -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/[email protected]/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/*[email protected]",
"@preact/signals": "https://esm.sh/*@preact/[email protected]",
"@preact/signals-core": "https://esm.sh/*@preact/[email protected]",
"twind-preset-tailwind/": "https://esm.sh/@twind/[email protected]/",
"twind-preset-ext": "https://esm.sh/@twind/[email protected]/",
"std/": "https://deno.land/[email protected]/",
"tailwindcss": "npm:[email protected]",
"tailwindcss/": "npm:/[email protected]/",
"tailwindcss/plugin": "npm:/[email protected]/plugin.js",
"std/": "https://deno.land/[email protected]/",
"stripe": "npm:/[email protected]",
"feed": "npm:/[email protected]",
"kv_oauth/": "https://deno.land/x/[email protected]/",
"tabler_icons_tsx/": "https://deno.land/x/[email protected]/tsx/",
"@twind/core": "https://esm.sh/@twind/[email protected]",
"fresh_charts/": "https://deno.land/x/[email protected]/"
},
"exclude": ["cov/", "_fresh/", "**/_fresh/*"],
Expand Down
Loading

0 comments on commit 27320c5

Please sign in to comment.