feat: Integrate typography plugin

package-lock.json

@@ -18,7 +18,7 @@
 				"@sveltejs/adapter-auto": "^3.0.0",
 				"@sveltejs/kit": "^2.0.0",
 				"@sveltejs/vite-plugin-svelte": "^3.0.0",
-				"@tailwindcss/typography": "^0.5.14",
+				"@tailwindcss/typography": "^0.5.15",
 				"@types/eslint": "^9.6.0",
 				"autoprefixer": "^10.4.20",
 				"eslint": "^9.0.0",
@@ -1085,6 +1085,7 @@
 			"resolved": "https://registry.npmjs.org/@tailwindcss/typography/-/typography-0.5.15.tgz",
 			"integrity": "sha512-AqhlCXl+8grUz8uqExv5OTtgpjuVIwFTSXTrh8y9/pw6q2ek7fJ+Y8ZEVw7EB2DCcuCOtEjf9w3+J3rzts01uA==",
 			"dev": true,
+			"license": "MIT",
 			"dependencies": {
 				"lodash.castarray": "^4.4.0",
 				"lodash.isplainobject": "^4.0.6",

package.json

@@ -20,7 +20,7 @@
 		"@sveltejs/adapter-auto": "^3.0.0",
 		"@sveltejs/kit": "^2.0.0",
 		"@sveltejs/vite-plugin-svelte": "^3.0.0",
-		"@tailwindcss/typography": "^0.5.14",
+		"@tailwindcss/typography": "^0.5.15",
 		"@types/eslint": "^9.6.0",
 		"autoprefixer": "^10.4.20",
 		"eslint": "^9.0.0",

src/content/home.md

@@ -5,18 +5,21 @@ name: Cirno
 
 Strongest of Gensokyo
 
-- Associate Professor in Pure Mathematics (1970 - )
+- Associate Professor in Pure Mathematics (1970 - ), Stanford University
+- Ph.D. in Pure Mathematics (1960 - 1966), University of Helsinki
 
 ## Publications
 
-Perfect Math Class
+* Perfect Math Class
+* おてんば恋娘
 
 # Projects
 
 > This is a quote
 
 ```python
-print("this is python")
+for i in range(9):
+	print("this is python")
 ```
 
 

src/content/metadata.json

@@ -2,5 +2,6 @@
 	"name": "Cirno",
 	"blogName": "Cirno's Blog",
 	"frontDescription": "This is a very long description.",
-	"frontCover": "/favicon.svg"
+	"frontCover": "/favicon.svg",
+	"avatar": "/favicon.svg"
 }

src/routes/+layout.svelte

@@ -8,7 +8,7 @@
 
 <!-- Homepage has its own navbar with animations -->
 {#if $page.url.pathname != "/"}
-	<div>
+	<div id="navbar">
 		<div class="flex h-5 items-center space-x-4 text-sm">
 			{#each routes as item, i}
 				{#if i > 0}
@@ -52,4 +52,9 @@
 			color: theme('colors.java.500');
 		}
 	}
+	#navbar {
+		margin-left: auto;
+		margin-right: auto;
+		padding-left: 10px;
+	}
 </style>

src/routes/+page.svelte

@@ -48,10 +48,17 @@
 	</div>
 </div>
 <div id="bio" class="bg-white dark:bg-gray-900" style="">
-	<div>
-		<h1 id="bio-name">{name}</h1>
+	<div class="p-1">
+		<div class="flex">
+			<p id="bio-name">{name}</p>
+			<div id="avatar">
+				<img src={metadata.avatar} alt={metadata.name} />
 			</div>
+		</div>
+	</div>
+	<article class="prose-bio lg:prose-xl dark:prose-invert">
 		<Content />
+	</article>
 </div>
 
 <svelte:window
@@ -97,6 +104,27 @@
 	}
  	#bio-name {
 		font-family: sans-serif;
-		font-size: 60px;
+		font-size: 10vh;
+		line-height: 10vh;
+		display: inline-block;
+	}
+	#avatar {
+		line-height: 0;
+		display: inline-block;
+		margin: 5px;
+		border: 4px solid rgba(100,100,100,0.4);
+		border-radius: 50%;
+		margin-right: auto;
+		@apply ml-auto mr-0;
+	}
+	#avatar img {
+		width: 20vh;
+		height: 20vh;
+		border-radius: 50%;
+	}
+	:global(h1 after) {
+		content: ' ';
+		display: block;
+		border: 2px solid black;
 	}
 </style>

src/routes/post/[slug]/+page.svelte

@@ -9,7 +9,7 @@
 	<title>{title} | {metadata.blogName}</title>
 </svelte:head>
 
-<article>
+<article class="prose lg:prose-xl dark:prose-invert p-4">
 	<h1>{title}</h1>
 	<p>Published: {date}</p>
 	<Content />

src/style/content.css

@@ -1,34 +1,3 @@
-.heading {
-	@apply leading-tight font-medium;
-	font-family: serif;
-	color: theme('colors.eucalyptus.700');
-}
-h1 {
-   @apply heading text-5xl;
-	@apply lg:text-4xl;
-}
-h2 {
-   @apply heading text-2xl;
-	@apply lg:text-3xl;
-}
-h3 {
-   @apply heading text-xl;
-	@apply lg:text-2xl;
-}
-h4 {
-   @apply heading text-lg;
-	@apply lg:text-xl;
-}
-h5 {
-   @apply heading text-lg;
-}
-h6 {
-   @apply heading text-lg;
-}
-p {
-    font-family: serif;
-}
-
 /* block quotes */
 .note-blockquote {
     border-left: 4px solid #0078d4; /* Blue left border */

tailwind.config.ts

@@ -84,9 +84,49 @@ const config: Config = {
 				serif: '"Source Han Serif SC", "Source Han Serif CN","Noto Serif CJK SC", "Songti SC",  STSong, "AR PL New Sung", "AR PL SungtiL GB", NSimSun, SimSun, "TW\-Sung", "WenQuanYi Bitmap Song", "AR PL UMing CN", "AR PL UMing HK", "AR PL UMing TW", "AR PL UMing TW MBE", PMingLiU, MingLiU, serif',
 				cursive: 'FancyTitleFont,"Source Han Serif SC", "Source Han Serif CN",  "Noto Serif CJK SC", "Songti SC", STSong, "AR PL New Sung", "AR PL SungtiL GB", NSimSun, SimSun, "TW\-Sung", "WenQuanYi Bitmap Song", "AR PL UMing CN", "AR PL UMing HK", "AR PL UMing TW", "AR PL UMing TW MBE", PMingLiU, MingLiU, serif',
 				mono: "'Fira Code','Cascadia Code',Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New','Sarasa Mono SC','Noto Sans CJK SC','monospace', monospace"
+			},
+			typography: ((theme) => (
+				{
+					bio: {
+						css: {
+							h1: {
+								color: theme('colors.eucalyptus.700'),
+								"border-bottom": "1px solid",
+							},
+							h2: {
+								color: theme('colors.eucalyptus.700'),
+							},
+							h3: {
+								color: theme('colors.eucalyptus.800'),
+							},
+							h4: {
+								color: theme('colors.eucalyptus.800'),
+							},
+						},
+					},
+					DEFAULT: {
+						css: {
+							h1: {
+								color: theme('colors.eucalyptus.700'),
+							},
+							h2: {
+								color: theme('colors.eucalyptus.700'),
+							},
+							h3: {
+								color: theme('colors.eucalyptus.800'),
+							},
+							h4: {
+								color: theme('colors.eucalyptus.800'),
+							},
+						},
+					},
 				}
+			)),
 		}
 	},
+	plugins: [
+		require('@tailwindcss/typography'),
+	],
 };
 
 export default config;