-- - `; - }); - - // compile it with mdsvex - const content = ( - await compile(blogbody, { - remarkPlugins, - // @ts-ignore - rehypePlugins - }) - ).code - // https://github.com/pngwn/MDsveX/issues/392 - .replace(/>{@html `
`}<\/pre>/g, '');
-
- return { ...blogpost, content };
+ if (!allPosts.length) throw new Error('no posts');
+ // find the issue that matches this slug
+ const post = allPosts.find((p) => p.slug === slug);
+ if (post) {
+ const content = await formatContent(post.content);
+
+ return { ...post, content };
} else {
- throw new Error('Blogpost not found for slug: ' + slug);
+ throw new Error('Issue not found for slug: ' + slug);
}
}
-/**
- * @param {import('./types').GithubIssue} issue
- * @returns {import('./types').ContentItem}
- */
-function parseIssue(issue) {
- const src = issue.body;
- const { content, data } = grayMatter(src);
- let title = data.title ?? issue.title;
- let slug;
- if (data.slug) {
- slug = data.slug;
- } else {
- slug = slugify(title);
+// format github issue into object that page type expects.
+// work pages are loaded using localContent.js for .svx files, not github issues
+function parseIssue(issue, label) {
+ const base = baseIssueContent(issue);
+ const data = base.frontmatter;
+
+ let post;
+
+ switch (label) {
+ case 'Gallery':
+ post = {
+ type: 'gallery',
+ ...base,
+ alt: data.alt,
+ }
+ break;
+ case 'Published':
+ default:
+ let tags = [];
+ if (data.tags) tags = Array.isArray(data.tags) ? data.tags : [data.tags];
+ tags = tags.map((tag) => tag.toLowerCase());
+
+ post = {
+ type: 'blog',
+ ...base,
+ category: data.category?.toLowerCase() || 'note',
+ tags,
+ readingTime: readingTime(base.content),
+ }
+
+ break;
}
- let description = data.description ?? content.trim().split('\n')[0];
- // extract plain text from markdown
- description = remark()
- .use(remarkParse)
- .use(remarkStringify)
- .processSync(description)
- .toString();
- description = description.replace(/\n/g, ' ');
- // strip html
- description = description.replace(/<[^>]*>?/gm, '');
- // strip markdown
- description = description.replace(/[[\]]/gm, '');
- // strip markdown
- description = description.replace(/[[\]]/gm, '');
-
- // you may wish to use a truncation approach like this instead...
- // let description = (data.content.length > 300) ? data.content.slice(0, 300) + '...' : data.content
-
- /** @type {string[]} */
- let tags = [];
- if (data.tags) tags = Array.isArray(data.tags) ? data.tags : [data.tags];
- tags = tags.map((tag) => tag.toLowerCase());
- // console.log(slug, tags);
-
- return {
- type: 'blog', // futureproof in case you want to add other types of content
- issueNumber: issue.number,
- content,
- frontmatter: data,
- title,
- subtitle: data.subtitle,
- description,
- category: data.category?.toLowerCase() || 'blog',
- tags,
- image: data.image ?? data.cover_image,
- canonical: data.canonical, // for canonical URLs of something published elsewhere
- slug: slug.toString().toLowerCase(),
- date: new Date(data.date ?? issue.created_at),
- readingTime: readingTime(content),
- ghMetadata: {
- issueUrl: issue.html_url,
- commentsUrl: issue.comments_url,
- title: issue.title,
- created_at: issue.created_at,
- updated_at: issue.updated_at,
- reactions: issue.reactions
- }
- };
+
+ return post
}
diff --git a/src/lib/types.d.ts b/src/lib/types.d.ts
index 08a30e8..aed263e 100644
--- a/src/lib/types.d.ts
+++ b/src/lib/types.d.ts
@@ -1,5 +1,4 @@
-export type ContentItem = {
- type: 'blog';
+export type BaseContentItem = {
content: string;
frontmatter: {
[key: string]: string;
@@ -7,15 +6,31 @@ export type ContentItem = {
title: string;
subtitle: string;
description: string;
- category: string;
- tags: string[];
- image: string;
canonical: string;
slug: string;
date: Date;
ghMetadata: GHMetadata;
+ image: string;
+}
+
+export type BlogItem = BaseContentItem & {
+ type: 'blog';
+ category: string;
+ tags: string[];
+ readingTime: string;
};
+export type GalleryItem = BaseContentItem & {
+ type: 'gallery';
+ images: GalleryImage[]
+}
+
+export type GalleryImage = {
+ src: string;
+ alt: string;
+ size: string;
+}
+
export type GHMetadata = {
issueUrl: string;
commentsUrl: string;
diff --git a/src/lib/utils.js b/src/lib/utils.js
index 18587f6..72e0c27 100644
--- a/src/lib/utils.js
+++ b/src/lib/utils.js
@@ -1,3 +1,25 @@
+import grayMatter from 'gray-matter';
+import { compile } from 'mdsvex';
+import { remark } from 'remark';
+import remarkParse from 'remark-parse';
+import remarkStringify from 'remark-stringify';
+import rehypeStringify from 'rehype-stringify';
+import rehypeSlug from 'rehype-slug';
+import rehypeAutoLink from 'rehype-autolink-headings';
+
+const remarkPlugins = undefined;
+const rehypePlugins = [
+ rehypeStringify,
+ rehypeSlug,
+ [
+ rehypeAutoLink,
+ {
+ behavior: 'wrap',
+ properties: { class: 'hover:text-yellow-100 no-underline' }
+ }
+ ]
+];
+
/**
* @param {string} text
* @returns {string}
@@ -22,3 +44,135 @@ export function slugify(text) {
.replace(/--+/g, '-') // Replace multiple hyphen with single hyphen
.replace(/(^-|-$)/g, ''); // Remove leading or trailing hyphen
}
+
+
+/**
+ * All pages built from github issue should contain this data at minimum
+ *
+ * @param {import('./types').GithubIssue} issue
+ * @returns {import('./types').BaseContentItem}
+ */
+export function baseIssueContent(issue) {
+ const src = issue.body;
+ const { content, data } = grayMatter(src);
+ let title = data.title ?? issue.title;
+ let slug;
+ if (data.slug) {
+ slug = data.slug;
+ } else {
+ slug = slugify(title);
+ }
+
+ let description = data.description ?? content.trim().split('\n')[0];
+ // extract plain text from markdown
+ description = remark()
+ .use(remarkParse)
+ .use(remarkStringify)
+ .processSync(description)
+ .toString();
+ description = description.replace(/\n/g, ' ');
+ // strip html
+ description = description.replace(/<[^>]*>?/gm, '');
+ // strip markdown
+ description = description.replace(/[[\]]/gm, '');
+ // strip markdown
+ description = description.replace(/[[\]]/gm, '');
+
+ return {
+ frontmatter: data,
+ issueNumber: issue.number,
+ slug: slug,
+ title,
+ description,
+ content,
+ image: data.image ?? data.cover_image,
+ date: new Date(data.date ?? issue.created_at),
+ ghMetadata: {
+ issueUrl: issue.html_url,
+ commentsUrl: issue.comments_url,
+ title: issue.title,
+ created_at: issue.created_at,
+ updated_at: issue.updated_at,
+ reactions: issue.reactions
+ }
+ }
+}
+
+export async function formatContent(content) {
+ const formatted = content
+ .replace(/\n{% youtube (.*?) %}/g, (_, x) => {
+ // https://stackoverflow.com/a/27728417/1106414
+ function youtube_parser(url) {
+ var rx =
+ /^.*(?:(?:youtu\.be\/|v\/|vi\/|u\/\w\/|embed\/)|(?:(?:watch)?\?v(?:i)?=|&v(?:i)?=))([^#&?]*).*/;
+ return url.match(rx)[1];
+ }
+ const videoId = x.startsWith('https://') ? youtube_parser(x) : x;
+ return ``;
+ })
+ .replace(/\n{% (tweet|twitter) (.*?) %}/g, (_, _2, x) => {
+ const url = x.startsWith('https://twitter.com/') ? x : `https://twitter.com/x/status/${x}`;
+ return `
+ ++ + `; + }); + + // compile it with mdsvex + const output = ( + await compile(formatted, { + remarkPlugins, + // @ts-ignore + rehypePlugins + }) + ).code + // https://github.com/pngwn/MDsveX/issues/392 + .replace(/>{@html `
`}<\/pre>/g, '');
+
+ return output
+}
diff --git a/src/routes/(main)/+layout.svelte b/src/routes/(main)/+layout.svelte
index 9b6e865..eb75480 100644
--- a/src/routes/(main)/+layout.svelte
+++ b/src/routes/(main)/+layout.svelte
@@ -53,6 +53,7 @@
This site is perpetually under construction but coming along :)
-It's mostly a place for me to post recipes I like, with the occasional technical post or personal blog mixed in. Some work-related stuff can be found here too, but that's not what I want to talk about.
+
It's mostly a place for me to post recipes I like and travel photos, with the occasional technical post or personal blog mixed in. Some work-related stuff can be found here too, but that's not what I want to talk about.
Thanks for stopping by, check out the links that work. ✌️
+ details, photos, ephemera from past adventures +
+tjheffner
++ {#if json.ghMetadata.reactions.total_count > 0} + + {json.ghMetadata.reactions.total_count} + {#if json.ghMetadata.reactions.total_count === 1}reaction{:else}reactions{/if} + + {/if} + {new Date(json.date).toISOString().slice(0, 10)} +
+