diff --git a/src/routes/+page.server.ts b/src/routes/+page.server.ts new file mode 100644 index 0000000..b0f78e1 --- /dev/null +++ b/src/routes/+page.server.ts @@ -0,0 +1,41 @@ +import { readingTime } from 'reading-time-estimator'; +import path from 'path'; +import { readFile } from 'fs/promises'; +import { slugify } from '$lib/slugify.js'; +import _ from 'lodash'; + +export async function load() { + const allPostFiles = import.meta.glob('/src/routes/posts/*.md'); + const iterablePostFiles = Object.entries(allPostFiles); + + const markdownFilesPath = path.resolve( + process.env.npm_package_json ? path.dirname(process.env.npm_package_json) : '.', + 'src', + 'routes', + 'posts', + ); + + const posts = await Promise.all( + iterablePostFiles.map(async ([filePath, resolver]) => { + const { metadata } = await resolver(); + + const slug = slugify(filePath); + const contents = await readFile(path.join(markdownFilesPath, `${slug}.md`), 'utf8'); + + return { + meta: metadata, + path: slug, + readingTime: readingTime(contents), + }; + }), + ); + + const highlightedPosts = _.reverse( + _.sortBy( + posts.filter((post) => post.meta.highlighted), + ({ meta }) => meta.date, + ), + ); + + return { highlightedPosts }; +} diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte index b0a824c..aaa1b59 100644 --- a/src/routes/+page.svelte +++ b/src/routes/+page.svelte @@ -10,6 +10,10 @@ import GithubLogo from 'phosphor-svelte/lib/GithubLogo'; import LinkedinLogo from 'phosphor-svelte/lib/LinkedinLogo'; import MastodonLogo from 'phosphor-svelte/lib/MastodonLogo'; + import BlogPostList from './posts/[[page=integer]]/BlogPostList.svelte'; + import Button from '$lib/Button.svelte'; + + export let data; @@ -22,7 +26,7 @@ -
+
@@ -95,7 +99,17 @@ -
+ + +{#if data.highlightedPosts.length > 0} +
+

Highlighted Blog Posts

+ +
+ +
+
+{/if} diff --git a/src/routes/posts/2023.07.02.css-only-contenteditable-placeholder.md b/src/routes/posts/2023.07.02.css-only-contenteditable-placeholder.md index 9b9e108..8203788 100644 --- a/src/routes/posts/2023.07.02.css-only-contenteditable-placeholder.md +++ b/src/routes/posts/2023.07.02.css-only-contenteditable-placeholder.md @@ -7,6 +7,7 @@ tags: - dev - web description: Here is how to make a text area that resizes automatically and has placeholder text, with no JavaScript with this clever CSS trick! +highlighted: true --- The HTML elements `input` and `textarea` include a `placeholder` property. This diff --git a/src/routes/posts/2023.08.10.react-daisyui-tailwindcss-theme-colors-in-js.md b/src/routes/posts/2023.08.10.react-daisyui-tailwindcss-theme-colors-in-js.md index fadfe7f..0d6a50a 100644 --- a/src/routes/posts/2023.08.10.react-daisyui-tailwindcss-theme-colors-in-js.md +++ b/src/routes/posts/2023.08.10.react-daisyui-tailwindcss-theme-colors-in-js.md @@ -8,6 +8,7 @@ tags: - dev - react description: This post shows you how to use JavaScript to read CSS variables and create dynamic UIs, using SWR for seamless light & dark mode switching! +highlighted: true --- I've been building a web app using React and TailwindCSS, with DaisyUI. But diff --git a/src/routes/posts/2024.05.12.svelte-customizable-components.md b/src/routes/posts/2024.05.12.svelte-customizable-components.md index d0d7503..738d39a 100644 --- a/src/routes/posts/2024.05.12.svelte-customizable-components.md +++ b/src/routes/posts/2024.05.12.svelte-customizable-components.md @@ -6,6 +6,7 @@ tags: - svelte - typescript description: Making customizable components in Svelte can be hard, but check out this post on how to use Svelte with TailwindCSS to make them possible at no performance penalty. +highlighted: true --- I really like [Svelte](https://svelte.dev), but it has one big limitation diff --git a/src/routes/posts/2024.05.18.using-shadow-dom-to-isolate-injected-browser-extension-compo.md b/src/routes/posts/2024.05.18.using-shadow-dom-to-isolate-injected-browser-extension-compo.md index 98f91f6..9823906 100644 --- a/src/routes/posts/2024.05.18.using-shadow-dom-to-isolate-injected-browser-extension-compo.md +++ b/src/routes/posts/2024.05.18.using-shadow-dom-to-isolate-injected-browser-extension-compo.md @@ -2,6 +2,7 @@ title: 'Using Shadow DOM to isolate injected browser extension components' date: 2024-05-18T23:08:16-05:00 description: 'I spent a weekend building a browser extension with React and TailwindCSS, but injected components can be a lot of trouble. This post explores how Shadow DOM saves the day (and your CSS sanity).' +highlighted: true --- I recently started experimenting with building a browser extension. I'm using diff --git a/src/routes/posts/[[page=integer]]/+page.svelte b/src/routes/posts/[[page=integer]]/+page.svelte index 375275d..e5903af 100644 --- a/src/routes/posts/[[page=integer]]/+page.svelte +++ b/src/routes/posts/[[page=integer]]/+page.svelte @@ -6,6 +6,7 @@ import ArrowRight from 'phosphor-svelte/lib/ArrowRight'; import { format } from 'date-fns'; import type { Post } from './+page.server'; + import BlogPostList from './BlogPostList.svelte'; export let data; @@ -26,35 +27,14 @@ Kaan Barmore-Genç's Blog Posts - +