chore: scrollbar style & rewrite long class string with Astro class:l…

…ist directive

- nav text changed to default sans
- remove prettier-plugin-tailwindcss for inconsistent with eslint-plugin-tailwindcss

.prettierrc

@@ -5,7 +5,7 @@
   "semi": true,
   "singleQuote": true,
   "trailingComma": "es5",
-  "plugins": ["prettier-plugin-astro", "prettier-plugin-tailwindcss"],
+  "plugins": ["prettier-plugin-astro"],
   "overrides": [
     {
       "files": ["*.astro"],

README.md

@@ -4,8 +4,8 @@ An opinionated and neat blog template built with [Astro](https://astro.build). T
 
 Check out the ✨ [Live Demo](https://astro-blog-zozo.pages.dev/) ✨.
 
-<a href="https://astro-blog-zozo.pages.dev/"><img src="./screenshot-light.png" height="300"></a>
-<a href="https://astro-blog-zozo.pages.dev/"><img src="./screenshot-dark.png" height="300"></a>
+<a href="https://astro-blog-zozo.pages.dev/"><img src="./screenshot-light.png" height="500"></a>
+<a href="https://astro-blog-zozo.pages.dev/"><img src="./screenshot-dark.png" height="500"></a>
 
 ## Features
 
@@ -29,7 +29,6 @@ See [this post](https://astro-blog-zozo.pages.dev/posts/getting-started) for usi
 ## Todo
 
 - `@shikijs/transformers` require custom style
-- svg can not be embeded in open graph image. Maybe a satori bug.
 - i18n
 
 ## Contribute

package.json

@@ -58,6 +58,7 @@
     "remark-math": "^6.0.0",
     "satori": "^0.10.13",
     "sharp": "^0.33.2",
+    "tailwind-scrollbar": "^3.1.0",
     "tailwindcss": "^3.4.1"
   },
   "devDependencies": {
@@ -79,7 +80,6 @@
     "globals": "^14.0.0",
     "prettier": "^3.2.5",
     "prettier-plugin-astro": "^0.13.0",
-    "prettier-plugin-tailwindcss": "^0.5.11",
     "typescript": "^5.3.3",
     "typescript-eslint": "^7.1.1"
   }

src/components/Nav.astro

@@ -14,13 +14,13 @@ const navs = [
 ---
 
 <nav>
-	<ul class="flex flex-col gap-3 lg:flex-row">
+	<ul class="flex flex-col gap-3 font-default-sans lg:flex-row">
 		{
 			navs.map((nav) => (
 				<li>
 					<button
 						type="button"
-						class="text-neutral-700 opacity-75 hover:opacity-100 aria-pressed:opacity-100 dark:text-neutral-50"
+						class="text-neutral-700 opacity-75 aria-pressed:opacity-100 hover:opacity-100 dark:text-neutral-50"
 						aria-pressed={currentNav === nav.name ? 'true' : 'false'}
 						aria-label={`Navigate to ${nav.name}`}
 						data-nav={nav.name}

src/components/ThemeToggler.astro

@@ -13,7 +13,7 @@ const themes = [
 		themes.map((theme) => (
 			<button
 				type="button"
-				class="theme-toggler opacity-75 hover:opacity-100 aria-pressed:opacity-100"
+				class="theme-toggler opacity-75 aria-pressed:opacity-100 hover:opacity-100"
 				aria-pressed="false"
 				aria-label={`Switch to ${theme.name} theme`}
 				data-theme={theme.name}

src/content/posts/getting-started.md

@@ -28,6 +28,7 @@ public              # favicons here
 src
 ├── assets
 │   ├── logo.svg    # site logo read in components/Header.astro
+│   ├── og-logo.png # logo image for OG generation. Check src/utils/openGraphImage.tsx for detail
 ├── config.ts       # main config
 ├── content         # markdown posts and attachments go here
 │   ├── attachments

src/content/posts/hidden.md

@@ -13,3 +13,5 @@ tags:
 # This post is hidden
 
 It will not be shown in RSS and sitemap. But you can still access it at `/posts/my-hidden-post`.
+
+Note that if you deploy on public Github repo, hidden posts may be seen in build output such as workflow artifacts.

src/layouts/BaseLayout.astro

@@ -118,6 +118,10 @@ const socialImg = new URL(socialImage ?? '/og.png', Astro.url).href;
 						}
 					}
 				}
+
+				.prose pre {
+					@apply scrollbar-thin scrollbar-track-transparent scrollbar-thumb-neutral-200 dark:scrollbar-thumb-neutral-700;
+				}
 			}
 
 			@tailwind components;

src/layouts/MarkdownLayout.astro

@@ -74,8 +74,27 @@ const showTimes = showDate || showLastmod || showReadingTime;
 		}
 	</div>
 	<article
-		class="prose max-w-full dark:prose-invert prose-p:hyphens-auto prose-p:text-justify prose-pre:rounded-lg prose-pre:!bg-neutral-100 prose-img:rounded-lg prose-video:rounded-lg [&_.toc-item]:my-0 [&_.toc-level]:mt-0 [&_p_code]:rounded [&_p_code]:bg-neutral-100 [&_p_code]:p-1 [&_p_code]:before:content-none [&_p_code]:after:content-none dark:[&_p_code]:bg-[#121212]"
-		class:list={{ '[&_.toc]:hidden': !show('toc') }}
+		class:list={[
+			'prose',
+			'max-w-full',
+			'dark:prose-invert',
+			'prose-p:hyphens-auto',
+			'prose-p:text-justify',
+			'prose-pre:rounded-lg',
+			'prose-pre:!bg-neutral-100', // override shiki theme
+			'prose-img:rounded-lg',
+			'prose-video:rounded-lg',
+			'[&_.toc-item]:my-0',
+			'[&_.toc-level]:mt-0',
+			'[&_iframe]:rounded-lg',
+			'[&_p_code]:rounded',
+			'[&_p_code]:bg-neutral-100',
+			'[&_p_code]:p-1',
+			'[&_p_code]:before:content-none',
+			'[&_p_code]:after:content-none',
+			'dark:[&_p_code]:bg-[#121212]',
+			{ '[&_.toc]:hidden': !show('toc') },
+		]}
 	>
 		<slot />
 	</article>

src/layouts/ScaffoldLayout.astro

@@ -14,10 +14,38 @@ interface Props {
 
 <BaseLayout
 	{...Astro.props}
-	bodyClass="text-neutral-600 flex flex-col justify-between min-h-dvh py-[2dvh] lg:pt-[6dvh] lg:pb-[3dvh] bg-[#f7f7f7] bg-local dark:bg-[#202124] dark:text-neutral-50"
+	rootClass="scrollbar-none"
+	bodyClass={[
+		'text-neutral-600',
+		'flex',
+		'flex-col',
+		'justify-between',
+		'min-h-dvh',
+		'py-[2dvh]',
+		'lg:pt-[6dvh]',
+		'lg:pb-[3dvh]',
+		'bg-[#f7f7f7]',
+		'bg-local',
+		'dark:bg-[#202124]',
+		'dark:text-neutral-50',
+	]}
 >
 	<div
-		class="mx-auto flex w-[90dvw] max-w-[1400px] grow flex-col bg-neutral-50 bg-local p-[3dvw] shadow-[0_0.5em_1em_0_rgba(236,236,236,0.86)] lg:p-[2dvw] dark:bg-[#212223] dark:shadow-[0_0_0.5em_0.25em_rgba(136,136,136,0.35)]"
+		class:list={[
+			'mx-auto',
+			'flex',
+			'w-[90dvw]',
+			'max-w-[1400px]',
+			'grow',
+			'flex-col',
+			'bg-neutral-50',
+			'bg-local',
+			'p-[3dvw]',
+			'shadow-[0_0.5em_1em_0_rgba(236,236,236,0.86)]',
+			'lg:p-[2dvw]',
+			'dark:bg-[#212223]',
+			'dark:shadow-[0_0_0.5em_0.25em_rgba(136,136,136,0.35)]',
+		]}
 	>
 		<Header currentNav={Astro.props.currentNav} />
 		<main class="px-[2dvw] pt-[2dvh] lg:pt-[6dvh]">

tailwind.config.mjs

@@ -1,5 +1,6 @@
 import defaultTheme from 'tailwindcss/defaultTheme';
 import typography from '@tailwindcss/typography';
+import scrollbar from 'tailwind-scrollbar';
 
 /** @type {import('tailwindcss').Config} */
 export default {
@@ -9,9 +10,23 @@ export default {
 			sans: ['"LXGW WenKai GB Screen"', ...defaultTheme.fontFamily.sans],
 			serif: ['"LXGW WenKai GB Screen"', ...defaultTheme.fontFamily.serif],
 			mono: ['Menlo', 'Consolas', ...defaultTheme.fontFamily.mono],
+			'default-sans': defaultTheme.fontFamily.sans,
+			'default-serif': defaultTheme.fontFamily.serif,
+			'default-mono': defaultTheme.fontFamily.mono,
 		},
 	},
-	plugins: [typography],
+	plugins: [
+		typography,
+		scrollbar(),
+		// taken from https://github.com/tailwindlabs/tailwindcss.com/blob/master/tailwind.config.js
+		// function ({ addVariant }) {
+		// 	addVariant('children', '& > *');
+		// 	addVariant('supports-scrollbars', '@supports selector(::-webkit-scrollbar)');
+		// 	addVariant('scrollbar', '&::-webkit-scrollbar');
+		// 	addVariant('scrollbar-track', '&::-webkit-scrollbar-track');
+		// 	addVariant('scrollbar-thumb', '&::-webkit-scrollbar-thumb');
+		// },
+	],
 	darkMode: [
 		'variant',
 		['@media (prefers-color-scheme: dark) { &:not(.light *) }', '&:is(.dark *)'],