starred/zenblog
1
0
Fork 0
mirror of https://github.com/jordienr/zenblog.git synced 2026-09-25 07:59:28 -05:00
Code Issues Packages Projects Releases Wiki Activity

improve ui

Browse Source
This commit is contained in:
Jordi Enric
2024-05-11 16:28:41 +02:00
parent 6cbea13791
commit 36ef17ccce
4 changed files with 62 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/app/layout.tsx
+17 -1
View File
@@ -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 (
<html lang="en">
<body>{children}</body>
<body className={`${ibmPlexMono.variable} ${inter.variable}`}>
{children}
</body>
</html>
);
}
apps/web/app/pub/[subdomain]/page.tsx
+19 -11
View File
@@ -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 (
<div className="mx-auto max-w-xl px-2 py-8">
<h2 className="mb-4 flex items-center gap-2 p-2 font-medium">
<span className="text-xl">{blog?.emoji}</span>
<span>{blog?.title}</span>
</h2>
<div className="mb-8 grid p-2">
<h2 className="flex flex-col gap-2 font-medium">
<span className="text-xl">{blog?.emoji}</span>
<span className="text-lg">{blog?.title}</span>
</h2>
{blog?.description && (
<p className="font-mono text-sm text-zinc-500">{blog?.description}</p>
)}
</div>
{posts.data?.length === 0 && (
<>
<div className="">
<h2 className="font-medium">No posts yet</h2>
<p className="text-slate-500">Check back later, see you soon!</p>
<p className="font-mono text-slate-500">
Check back later, see you soon!
</p>
</div>
</>
)}
{posts.data?.map((post) => (
<Link
className="group grid grid-cols-6 border-b border-transparent p-2 transition-all hover:border-slate-300"
className="group flex flex-wrap gap-2 rounded-lg border-b border-transparent p-2 transition-all hover:bg-zinc-50"
key={post.slug}
href={`/blog/${post.slug}`}
>
<span className="col-span-2 text-slate-500">
{formatDate(post.published_at)}
</span>
<span className="col-span-4 font-medium group-hover:text-orange-500">
<span className="font-medium group-hover:text-orange-500">
{post.title}
</span>
<span>opinion</span>
<span className="ml-auto text-right font-mono tracking-tight text-slate-400">
{formatDate(post.published_at)}
</span>
</Link>
))}
</div>
apps/web/src/pages/_app.tsx
+2 -3
View File
@@ -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
apps/web/tailwind.config.ts
+24 -4
View File
@@ -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",