diff --git a/apps/web/app/layout.tsx b/apps/web/app/layout.tsx index 30ce8f3..3a95a7d 100644 --- a/apps/web/app/layout.tsx +++ b/apps/web/app/layout.tsx @@ -1,3 +1,4 @@ +import { IBM_Plex_Mono, Inter } from "next/font/google"; import "./globals.css"; export const metadata = { @@ -5,6 +6,19 @@ export const metadata = { description: "An open source blogging platform", }; +const ibmPlexMono = IBM_Plex_Mono({ + subsets: ["latin"], + weight: ["400", "500", "600"], + display: "swap", + variable: "--font-mono", +}); + +const inter = Inter({ + subsets: ["latin"], + display: "swap", + variable: "--font-sans", +}); + export default function RootLayout({ children, }: { @@ -12,7 +26,9 @@ export default function RootLayout({ }) { return ( - {children} + + {children} + ); } diff --git a/apps/web/app/pub/[subdomain]/page.tsx b/apps/web/app/pub/[subdomain]/page.tsx index 7c8cb57..f5f003a 100644 --- a/apps/web/app/pub/[subdomain]/page.tsx +++ b/apps/web/app/pub/[subdomain]/page.tsx @@ -10,7 +10,7 @@ async function HostedBlog({ const supa = createClient(); const { data: blog } = await supa .from("blogs") - .select("title, emoji") + .select("title, emoji, description") .eq("slug", subdomain) .single(); @@ -30,32 +30,40 @@ async function HostedBlog({ return (
-

- {blog?.emoji} - {blog?.title} -

+
+

+ {blog?.emoji} + {blog?.title} +

+ {blog?.description && ( +

{blog?.description}

+ )} +
{posts.data?.length === 0 && ( <>

No posts yet

-

Check back later, see you soon!

+

+ Check back later, see you soon! +

)} {posts.data?.map((post) => ( - - {formatDate(post.published_at)} - - + {post.title} + opinion + + {formatDate(post.published_at)} + ))}
diff --git a/apps/web/src/pages/_app.tsx b/apps/web/src/pages/_app.tsx index 763e901..3ea4d35 100644 --- a/apps/web/src/pages/_app.tsx +++ b/apps/web/src/pages/_app.tsx @@ -11,20 +11,19 @@ import { import { Toaster } from "sonner"; import { useState } from "react"; import { UserProvider } from "@/utils/supabase/browser"; -import Head from "next/head"; // Fonts const inter = Inter({ subsets: ["latin"], display: "swap", - variable: "--font-inter", + variable: "--font-sans", }); const ibmPlexMono = IBM_Plex_Mono({ subsets: ["latin"], weight: ["400", "500", "600"], display: "swap", - variable: "--font-ibm-plex-mono", + variable: "--font-mono", }); // Main Component diff --git a/apps/web/tailwind.config.ts b/apps/web/tailwind.config.ts index 7029c84..65e8401 100644 --- a/apps/web/tailwind.config.ts +++ b/apps/web/tailwind.config.ts @@ -13,6 +13,29 @@ module.exports = { "./src/**/*.{ts,tsx}", ], theme: { + fontFamily: { + default: [ + "var(--font-sans)", + "ui-sans-serif", + "system-ui", + "sans-serif", + "Apple Color Emoji", + "Segoe UI Emoji", + "Segoe UI Symbol", + "Noto Color Emoji", + ], + mono: [ + "var(--font-mono)", + "ui-monospace", + "SFMono-Regular", + "Menlo", + "Monaco", + "Consolas", + "Liberation Mono", + "Courier New", + "monospace", + ], + }, border: { DEFAULT: "0.3px solid var(--border-color)", 1: "1px", @@ -34,10 +57,7 @@ module.exports = { highlight: { DEFAULT: "shadow", }, - fontFamily: { - default: ["var(--font-inter)"], - mono: ["var(--font-ibm-plex-mono)", "monospace"], - }, + colors: { slate: { 50: "#f9fafb",