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