Removed query-string, use goto svelte for url state changes

README.md

@@ -49,6 +49,7 @@ See https://swyxkit.netlify.app/ (see [Deploy Logs](https://app.netlify.com/site
 - **Minor design/UX touches**
   - Top level blog URLs (`/myblog` instead of `/blog/myblog` - [why](https://www.swyx.io/namespacing-sites/))
   - Blog index truncates at 20 posts to make sure to render quickly
+  - Blog search/facets serialize to URLs for easy copy paste ([thanks @Ak4zh](https://github.com/sw-yx/swyxkit/pull/97))
   - [Comments are rendered and sanitized](https://github.com/developit/snarkdown/issues/70)
   - Error page (try going to URL that doesnt exist)
     - including nice error when github api rate limit exceeded - fix with `GH_TOKEN`
@@ -111,6 +112,7 @@ export const DEFAULT_OG_IMAGE =
 	'https://user-images.githubusercontent.com/6764957/147861359-3ad9438f-41d1-47c8-aa05-95c7d18497f0.png';
 export const MY_TWITTER_HANDLE = 'swyx';
 export const MY_YOUTUBE = 'https://youtube.com/swyxTV';
+export const POST_CATEGORIES = ['Blog'] // Other categories you can consider adding: Talks, Tutorials, Snippets, Podcasts, Notes...
 ```
 
 Of course, you should then go page by page (there aren't that many) and customize some of the other hardcoded items, for example

package.json

@@ -63,7 +63,6 @@
 		"node-fetch": "2.6.7",
 		"parse-link-header": "^2.0.0",
 		"prism-themes": "^1.9.0",
-		"query-string": "^7.1.1",
 		"shiki": "^0.11.1",
 		"slugify": "^1.6.5",
 		"snarkdown": "^2.0.0"

playwright.config.js

@@ -2,8 +2,7 @@
 const config = {
 	webServer: {
 		command: 'npm run build && npm run preview',
-		port: 3000,
-		reuseExistingServer: true,
+		port: 4173
 	}
 };
 

src/components/Comment.svelte

@@ -46,24 +46,32 @@
 	// }
 </script>
 
+
 <div
 	class="mb-4 border-y-2 px-2 pt-4 dark:border-blue-700 sm:border-x sm:border-blue-200 sm:border-opacity-40 sm:px-4"
 >
-	<div>
-		{@html body}
-		<div class="flex min-w-[8rem] flex-row-reverse items-center text-xs">
-			<img
-				class="ml-4 h-8 w-8 rounded-full"
-				alt={`avatar of commenter ${comment.user.login}`}
-				src={comment.user.avatar_url}
-			/>
-			<div class="flex flex-col" class:text-green-600={comment.author_association === 'OWNER'}>
-				<a href={comment.html_url} class="no-underline" rel="external" target="_blank">
-					<time>{formatDistance(new Date(comment.created_at), new Date())} ago</time>
-				</a>
+	<div class="flex flex-row md-10">
+		<img 
+			class="w-12 h-12 border-2 border-gray-300 rounded-full" 
+			alt={`avatar of commenter ${comment.user.login}`}
+			src={comment.user.avatar_url}
+		/>
+		<div class="flex-col mt-1">
+			<div class="flex items-center flex-1 px-4 font-bold leading-tight" class:text-green-600={comment.author_association === 'OWNER'}>
 				{comment.user.login}
+				<span class="ml-2 text-xs font-normal text-gray-500">
+					<a href={comment.html_url} class="no-underline" rel="external" target="_blank">
+						<time>{formatDistance(new Date(comment.created_at), new Date())} ago</time>
+					</a>
+				</span>
+			</div>
+			<div class="flex-1 px-2 ml-2">
+				{@html body}
+
+			</div>
+			<div class="flex-1 px-2 ml-2 mb-4">
+				<Reactions issueUrl={comment.issue_url} reactions={comment.reactions} />
 			</div>
-			<Reactions issueUrl={comment.issue_url} reactions={comment.reactions} />
 		</div>
 	</div>
 </div>

src/lib/content.js

@@ -201,7 +201,7 @@ function parseIssue(issue) {
 		title,
 		subtitle: data.subtitle,
 		description,
-		category: data.category,
+		category: data.category?.toLowerCase() || 'blog',
 		tags,
 		image: data.image ?? data.cover_image,
 		canonical: data.canonical, // for canonical URLs of something published elsewhere

src/lib/siteConfig.js

@@ -8,6 +8,7 @@ export const DEFAULT_OG_IMAGE =
 	'https://user-images.githubusercontent.com/6764957/147861359-3ad9438f-41d1-47c8-aa05-95c7d18497f0.png';
 export const MY_TWITTER_HANDLE = 'swyx';
 export const MY_YOUTUBE = 'https://youtube.com/swyxTV';
+export const POST_CATEGORIES = ['Blog'] // Other categories you can consider adding: Talks, Tutorials, Snippets, Podcasts, Notes...
 
 // dont forget process.env.GH_TOKEN
 // if supplied, raises rate limit from 60 to 5000