-
-
diff --git a/src/routes/(main)/+error.svelte b/src/routes/(main)/+error.svelte
index 38f7757..326ddca 100644
--- a/src/routes/(main)/+error.svelte
+++ b/src/routes/(main)/+error.svelte
@@ -1,59 +1,70 @@
- {title}
+ {title}
-
diff --git a/src/routes/(main)/+layout.svelte b/src/routes/(main)/+layout.svelte
index eb75480..39c0c8e 100644
--- a/src/routes/(main)/+layout.svelte
+++ b/src/routes/(main)/+layout.svelte
@@ -1,76 +1,89 @@
-
+
-
- {title} -
-
-
+
-
diff --git a/src/lib/components/Header.svelte b/src/lib/components/Header.svelte
index 226b21d..6004c5b 100644
--- a/src/lib/components/Header.svelte
+++ b/src/lib/components/Header.svelte
@@ -1,67 +1,72 @@
diff --git a/src/lib/components/Icon.svelte b/src/lib/components/Icon.svelte
index 7bc2719..9e5a4f4 100644
--- a/src/lib/components/Icon.svelte
+++ b/src/lib/components/Icon.svelte
@@ -1,15 +1,15 @@
-
diff --git a/src/lib/content.js b/src/lib/content.js
index 1eb4a9d..4c24f94 100644
--- a/src/lib/content.js
+++ b/src/lib/content.js
@@ -1,17 +1,17 @@
-import { dev } from '$app/environment';
-import fetch from 'node-fetch';
+import { dev } from '$app/environment'
+import fetch from 'node-fetch'
import {
- GH_USER_REPO,
- APPROVED_POSTERS_GH_USERNAME,
- GH_PUBLISHED_TAGS,
- REPO_OWNER
-} from './siteConfig';
+ GH_USER_REPO,
+ APPROVED_POSTERS_GH_USERNAME,
+ GH_PUBLISHED_TAGS,
+ REPO_OWNER,
+} from './siteConfig'
import { slugify, readingTime, baseIssueContent, formatContent } from './utils'
-import parse from 'parse-link-header';
+import parse from 'parse-link-header'
-let allBlogposts = [];
-let allGalleries = [];
-let allPosts = [];
+let allBlogposts = []
+let allGalleries = []
+let allPosts = []
/*
* Gets all github issues with a provided label.
@@ -21,109 +21,115 @@ let allPosts = [];
* Gallery pages: 'Gallery'
*/
export async function listContentFromIssues(label) {
- let allContentWithLabel = []
- let next = null;
-
- const authheader = process.env.GH_TOKEN && {
- Authorization: `token ${process.env.GH_TOKEN}`
- };
-
- let url =
- `https://api.github.com/repos/${GH_USER_REPO}/issues?` +
- new URLSearchParams({
- state: 'all',
- labels: label,
- per_page: '100',
- });
-
- // pull issues created by owner only if allowed author = repo owner
- if (APPROVED_POSTERS_GH_USERNAME.length === 1 && APPROVED_POSTERS_GH_USERNAME[0] === REPO_OWNER) {
- url += '&' + new URLSearchParams({ creator: REPO_OWNER });
- }
-
- do {
- const res = await fetch(next?.url ?? url, {
- headers: authheader
- });
-
- const issues = await res.json();
- if ('message' in issues && res.status > 400)
- throw new Error(res.status + ' ' + res.statusText + '\n' + (issues && issues.message));
-
- issues.forEach((issue) => {
- if (APPROVED_POSTERS_GH_USERNAME.includes(issue.user.login)) {
- allContentWithLabel.push(parseIssue(issue, label))
- }
- });
- const headers = parse(res.headers.get('Link'));
- next = headers && headers.next;
- } while (next)
-
- allContentWithLabel.sort((a, b) => b.date.valueOf() - a.date.valueOf()); // use valueOf to make TS happy https://stackoverflow.com/a/60688789/1106414
- return allContentWithLabel
+ let allContentWithLabel = []
+ let next = null
+
+ const authheader = process.env.GH_TOKEN && {
+ Authorization: `token ${process.env.GH_TOKEN}`,
+ }
+
+ let url =
+ `https://api.github.com/repos/${GH_USER_REPO}/issues?` +
+ new URLSearchParams({
+ state: 'all',
+ labels: label,
+ per_page: '100',
+ })
+
+ // pull issues created by owner only if allowed author = repo owner
+ if (
+ APPROVED_POSTERS_GH_USERNAME.length === 1 &&
+ APPROVED_POSTERS_GH_USERNAME[0] === REPO_OWNER
+ ) {
+ url += '&' + new URLSearchParams({ creator: REPO_OWNER })
+ }
+
+ do {
+ const res = await fetch(next?.url ?? url, {
+ headers: authheader,
+ })
+
+ const issues = await res.json()
+ if ('message' in issues && res.status > 400)
+ throw new Error(
+ res.status + ' ' + res.statusText + '\n' + (issues && issues.message)
+ )
+
+ issues.forEach((issue) => {
+ if (APPROVED_POSTERS_GH_USERNAME.includes(issue.user.login)) {
+ allContentWithLabel.push(parseIssue(issue, label))
+ }
+ })
+ const headers = parse(res.headers.get('Link'))
+ next = headers && headers.next
+ } while (next)
+
+ allContentWithLabel.sort((a, b) => b.date.valueOf() - a.date.valueOf()) // use valueOf to make TS happy https://stackoverflow.com/a/60688789/1106414
+ return allContentWithLabel
}
// searches the list of content returned and matches based on slug
export async function getContent(slug) {
- // get all posts if not already done - or in development
- if (dev || allPosts.length === 0) {
- console.log('loading allBlogposts');
- allBlogposts = await listContentFromIssues('Published');
- allGalleries = await listContentFromIssues('Gallery');
- allPosts = [...allBlogposts, ...allGalleries];
- console.log('loaded ' + allBlogposts.length + ' blogposts');
- console.log('loaded ' + allGalleries.length + ' galleries');
- console.log('loaded ' + allPosts.length + ' posts from issues');
-
- if (!allPosts.length)
- throw new Error(
- 'failed to load posts from github issues for some reason. check token' + process.env.GH_TOKEN
- );
- }
- 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('Issue not found for slug: ' + slug);
- }
+ // get all posts if not already done - or in development
+ if (dev || allPosts.length === 0) {
+ console.log('loading allPosts')
+ allBlogposts = await listContentFromIssues('Published')
+ allGalleries = await listContentFromIssues('Gallery')
+ allPosts = [...allBlogposts, ...allGalleries]
+ console.log('loaded ' + allBlogposts.length + ' blogposts')
+ console.log('loaded ' + allGalleries.length + ' galleries')
+ console.log('loaded ' + allPosts.length + ' posts from issues')
+
+ if (!allPosts.length)
+ throw new Error(
+ 'failed to load posts from github issues for some reason. check token' +
+ process.env.GH_TOKEN
+ )
+ }
+ 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('Issue not found for slug: ' + slug)
+ }
}
// 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;
- }
-
- return post
+ 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
+ }
+
+ return post
}
diff --git a/src/lib/localContent.js b/src/lib/localContent.js
index b723261..984661a 100644
--- a/src/lib/localContent.js
+++ b/src/lib/localContent.js
@@ -1,4 +1,4 @@
-import { dev } from '$app/environment';
+import { dev } from '$app/environment'
let localContent = []
@@ -13,7 +13,7 @@ export const fetchMarkdownPosts = async () => {
const { name, url, slug, description, type, date, image } = post.metadata
const project = {
- content: post.default.render().html,
+ content: post.default.render().html,
name,
url,
slug,
@@ -21,14 +21,14 @@ export const fetchMarkdownPosts = async () => {
type,
date,
image,
- path
+ path,
}
return { ...project }
})
)
- localContent = allPosts;
+ localContent = allPosts
return allPosts
}
@@ -36,15 +36,16 @@ export const fetchMarkdownPosts = async () => {
// fetch single markdown post and format it for display
export async function fetchMarkdownPost(slug) {
if (dev || localContent.length === 0) {
- console.log('loading allProjects');
- localContent = await fetchMarkdownPosts();
- console.log('loaded ' + localContent.length + ' projects');
- if (!localContent.length) throw new Error('failed to load projects for some reason.');
- }
+ console.log('loading allProjects')
+ localContent = await fetchMarkdownPosts()
+ console.log('loaded ' + localContent.length + ' projects')
+ if (!localContent.length)
+ throw new Error('failed to load projects for some reason.')
+ }
- const project = localContent.find((p) => p.slug === slug);
+ const project = localContent.find((p) => p.slug === slug)
return {
- ...project
+ ...project,
}
}
diff --git a/src/lib/siteConfig.js b/src/lib/siteConfig.js
index 7f561be..20f55c9 100644
--- a/src/lib/siteConfig.js
+++ b/src/lib/siteConfig.js
@@ -1,18 +1,18 @@
// export const SITE_URL = 'https://heffner.netlify.app';
-export const SITE_URL = 'https://heffner.dev';
-export const GH_USER = 'tjheffner';
-export const GH_USER_REPO = 'tjheffner/heffdotdev'; // used for pulling github issues and offering comments
-export const SITE_TITLE = 'heffner.dev';
-export const SITE_DESCRIPTION = 'personal site of tanner heffner';
-export const DEFAULT_OG_IMAGE = 'https://heffner.dev/og?message=heffner.dev';
-export const MY_TWITTER_HANDLE = 'foodpyramids';
+export const SITE_URL = 'https://heffner.dev'
+export const GH_USER = 'tjheffner'
+export const GH_USER_REPO = 'tjheffner/heffdotdev' // used for pulling github issues and offering comments
+export const SITE_TITLE = 'heffner.dev'
+export const SITE_DESCRIPTION = 'personal site of tanner heffner'
+export const DEFAULT_OG_IMAGE = 'https://heffner.dev/og?message=heffner.dev'
+export const MY_TWITTER_HANDLE = 'foodpyramids'
-export const APPROVED_POSTERS_GH_USERNAME = ['tjheffner'];
-export const GH_PUBLISHED_TAGS = ['Published'];
+export const APPROVED_POSTERS_GH_USERNAME = ['tjheffner']
+export const GH_PUBLISHED_TAGS = ['Published']
// auto generated variables
-export const REPO_URL = 'https://github.com/' + GH_USER_REPO;
-export const REPO_OWNER = GH_USER_REPO.split('/')[0];
+export const REPO_URL = 'https://github.com/' + GH_USER_REPO
+export const REPO_OWNER = GH_USER_REPO.split('/')[0]
// dont forget process.env.GH_TOKEN
// if supplied, raises rate limit from 60 to 5000
diff --git a/src/lib/types.d.ts b/src/lib/types.d.ts
index aed263e..f3a9afd 100644
--- a/src/lib/types.d.ts
+++ b/src/lib/types.d.ts
@@ -1,108 +1,108 @@
export type BaseContentItem = {
- content: string;
- frontmatter: {
- [key: string]: string;
- };
- title: string;
- subtitle: string;
- description: string;
- canonical: string;
- slug: string;
- date: Date;
- ghMetadata: GHMetadata;
- image: string;
+ content: string
+ frontmatter: {
+ [key: string]: string
+ }
+ title: string
+ subtitle: string
+ description: string
+ canonical: string
+ slug: string
+ date: Date
+ ghMetadata: GHMetadata
+ image: string
}
export type BlogItem = BaseContentItem & {
- type: 'blog';
- category: string;
- tags: string[];
- readingTime: string;
-};
+ type: 'blog'
+ category: string
+ tags: string[]
+ readingTime: string
+}
export type GalleryItem = BaseContentItem & {
- type: 'gallery';
- images: GalleryImage[]
+ type: 'gallery'
+ images: GalleryImage[]
}
export type GalleryImage = {
- src: string;
- alt: string;
- size: string;
+ src: string
+ alt: string
+ size: string
}
export type GHMetadata = {
- issueUrl: string;
- commentsUrl: string;
- title: string;
- created_at: Date;
- updated_at: Date;
- reactions: GHReactions;
-};
+ issueUrl: string
+ commentsUrl: string
+ title: string
+ created_at: Date
+ updated_at: Date
+ reactions: GHReactions
+}
export type GHReactions = {
- total_count: number;
- '+1': number;
- '-1': number;
- laugh: number;
- hooray: number;
- confused: number;
- heart: number;
- rocket: number;
- eyes: number;
-};
+ total_count: number
+ '+1': number
+ '-1': number
+ laugh: number
+ hooray: number
+ confused: number
+ heart: number
+ rocket: number
+ eyes: number
+}
export type GHComment = {
- body: string;
- user: GHUser;
- created_at: Date;
- updated_at: Date;
- html_url: string;
- issue_url: string;
- author_association: string;
- reactions: GHReactions;
-};
+ body: string
+ user: GHUser
+ created_at: Date
+ updated_at: Date
+ html_url: string
+ issue_url: string
+ author_association: string
+ reactions: GHReactions
+}
export type GHUser = {
- login: string;
- avatar_url: string;
- id: number;
- node_id: string;
- avatar_url: string;
- gravatar_id: string;
- url: string;
- html_url: string;
- followers_url: string;
- following_url: string;
- gists_url: string;
- starred_url: string;
- subscriptions_url: string;
- organizations_url: string;
- repos_url: string;
- events_url: string;
- received_events_url: string;
- type: 'User';
- site_admin: boolean;
-};
+ login: string
+ avatar_url: string
+ id: number
+ node_id: string
+ avatar_url: string
+ gravatar_id: string
+ url: string
+ html_url: string
+ followers_url: string
+ following_url: string
+ gists_url: string
+ starred_url: string
+ subscriptions_url: string
+ organizations_url: string
+ repos_url: string
+ events_url: string
+ received_events_url: string
+ type: 'User'
+ site_admin: boolean
+}
export type GithubIssue = {
- user: GHUser;
- labels: {
- name: string;
- }[];
- title: string;
- body: string;
- created_at: Date;
- updated_at: Date;
- html_url: string;
- comments_url: string;
- reactions: GHReactions;
-};
+ user: GHUser
+ labels: {
+ name: string
+ }[]
+ title: string
+ body: string
+ created_at: Date
+ updated_at: Date
+ html_url: string
+ comments_url: string
+ reactions: GHReactions
+}
export type Project = {
- type: 'project';
- frontmatter: {
- [key: string]: string;
- };
- content: string;
-};
+ type: 'project'
+ frontmatter: {
+ [key: string]: string
+ }
+ content: string
+}
diff --git a/src/lib/utils.js b/src/lib/utils.js
index 72e0c27..0dc025f 100644
--- a/src/lib/utils.js
+++ b/src/lib/utils.js
@@ -1,32 +1,32 @@
-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';
+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 remarkPlugins = undefined
const rehypePlugins = [
- rehypeStringify,
- rehypeSlug,
- [
- rehypeAutoLink,
- {
- behavior: 'wrap',
- properties: { class: 'hover:text-yellow-100 no-underline' }
- }
- ]
-];
+ rehypeStringify,
+ rehypeSlug,
+ [
+ rehypeAutoLink,
+ {
+ behavior: 'wrap',
+ properties: { class: 'hover:text-yellow-100 no-underline' },
+ },
+ ],
+]
/**
* @param {string} text
* @returns {string}
*/
export function readingTime(text) {
- let minutes = Math.ceil(text.trim().split(' ').length / 225);
- return minutes > 1 ? `${minutes} minutes` : `${minutes} minute`;
+ let minutes = Math.ceil(text.trim().split(' ').length / 225)
+ return minutes > 1 ? `${minutes} minutes` : `${minutes} minute`
}
/**
@@ -34,18 +34,17 @@ export function readingTime(text) {
* @returns {string}
*/
export function slugify(text) {
- return text
- .toString() // Cast to string (optional)
- .normalize('NFKD') // The normalize() using NFKD method returns the Unicode Normalization Form of a given string.
- .toLowerCase() // Convert the string to lowercase letters
- .trim() // Remove whitespace from both sides of a string (optional)
- .replace(/\s+/g, '-') // Replace spaces with hyphen
- .replace(/[^\w-]+/g, '') // Remove all non-word chars
- .replace(/--+/g, '-') // Replace multiple hyphen with single hyphen
- .replace(/(^-|-$)/g, ''); // Remove leading or trailing hyphen
+ return text
+ .toString() // Cast to string (optional)
+ .normalize('NFKD') // The normalize() using NFKD method returns the Unicode Normalization Form of a given string.
+ .toLowerCase() // Convert the string to lowercase letters
+ .trim() // Remove whitespace from both sides of a string (optional)
+ .replace(/\s+/g, '-') // Replace spaces with hyphen
+ .replace(/[^\w-]+/g, '') // Remove all non-word chars
+ .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
*
@@ -53,62 +52,61 @@ export function slugify(text) {
* @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);
- }
+ 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, '');
+ 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
- }
- }
+ 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 `
+ aria-hidden="true">`
+ })
+ .replace(/\n{% (tweet|twitter) (.*?) %}/g, (_, _2, x) => {
+ const url = x.startsWith('https://twitter.com/')
+ ? x
+ : `https://twitter.com/x/status/${x}`
+ return `
+
diff --git a/src/lib/components/Comments.svelte b/src/lib/components/Comments.svelte
index 024796f..dd86218 100644
--- a/src/lib/components/Comments.svelte
+++ b/src/lib/components/Comments.svelte
@@ -1,14 +1,14 @@
-
+ {title} +
+ +
-
+
diff --git a/src/lib/components/GetInTouch.svelte b/src/lib/components/GetInTouch.svelte
index b076aba..7276921 100644
--- a/src/lib/components/GetInTouch.svelte
+++ b/src/lib/components/GetInTouch.svelte
@@ -1,18 +1,22 @@
If any of the above resonates with you, let's talk.
++ If any of the above resonates with you, let's talk. +
- Feel free to send me an email or connect on + Feel free to send me an email + or connect on linkedin with a message.
- Please no recruiters. I'm happy where I'm at. 🤠🤠
-
- {#if isOpen}
-
- {/if}
+
+ {#if isOpen}
+
+ {/if}
diff --git a/src/lib/components/NavLink.svelte b/src/lib/components/NavLink.svelte
index a49c339..5cd9eb3 100644
--- a/src/lib/components/NavLink.svelte
+++ b/src/lib/components/NavLink.svelte
@@ -1,14 +1,14 @@
-
- {message}
+ {message}
-
diff --git a/src/lib/components/ProjectItem.svelte b/src/lib/components/ProjectItem.svelte
index f2e24fc..74f3bad 100644
--- a/src/lib/components/ProjectItem.svelte
+++ b/src/lib/components/ProjectItem.svelte
@@ -1,24 +1,26 @@
- {item.title}
+
+
+ + {item.title} +
-
+
- {new Date(item.date).toISOString().slice(0, 10)} -
-+ {new Date(item.date).toISOString().slice(0, 10)} +
+
-
diff --git a/src/lib/components/Slice.svelte b/src/lib/components/Slice.svelte
index 16d1813..deaef54 100644
--- a/src/lib/components/Slice.svelte
+++ b/src/lib/components/Slice.svelte
@@ -1,50 +1,50 @@
+ {/if}
+ {item.name}
+
+
+ + {item.name} +
-{item.description}
-{item.description}
+
+
+
+
- `; - }); + ` + }) - // 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, '');
+ // 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
+ return output
}
diff --git a/src/mdsvexlayout.svelte b/src/mdsvexlayout.svelte
index b1f1cf8..6093b4c 100644
--- a/src/mdsvexlayout.svelte
+++ b/src/mdsvexlayout.svelte
@@ -1,9 +1,9 @@
{$page.status}: {title}
- - {#if $page.status === 404} -There is no post at the slug {$page.url.pathname}.
- If you believe this was a bug, please let me know! Open an issue here. -
- {:else} -{message}
- {/if} - {#if dev && $page.error.stack} -{$page.error.stack}
- {/if}
+ {$page.status}: {title}
+ + {#if $page.status === 404} +
+ There is no post at the slug {$page.url.pathname}.
+
+ Try searching for it here! +
++ If you believe this was a bug, please let me know! Open an issue here. +
+ {:else} +{message}
+ {/if} + {#if dev && $page.error.stack} +{$page.error.stack}
+ {/if}
-
-
+
+ {#if showBackToTop}
+ Back to top
+ {/if}
+
-
{/key}
diff --git a/src/routes/(main)/+page.svelte b/src/routes/(main)/+page.svelte
index d1d18c9..58c0bb2 100644
--- a/src/routes/(main)/+page.svelte
+++ b/src/routes/(main)/+page.svelte
@@ -1,65 +1,87 @@
- {SITE_TITLE}
-
-
-
-
-
-
-
-
-
-
-
-
-
+ {SITE_TITLE}
+
+
+
+
+
+
+
+
+
+
+
+
+
-
-
-
+
+
+
-
-
+
-
+
+
+
+
-
-
-
-
-
+
+
diff --git a/src/routes/(main)/[slug]/+page.js b/src/routes/(main)/[slug]/+page.js
index 16f67b6..876e552 100644
--- a/src/routes/(main)/[slug]/+page.js
+++ b/src/routes/(main)/[slug]/+page.js
@@ -1,37 +1,37 @@
-import { error, redirect } from '@sveltejs/kit';
-import { REPO_URL } from '$lib/siteConfig';
+import { error, redirect } from '@sveltejs/kit'
+import { REPO_URL } from '$lib/siteConfig'
-export const csr = true; // https://github.com/sveltejs/kit/pull/6446
+export const csr = true // https://github.com/sveltejs/kit/pull/6446
export async function load({ params, fetch, setHeaders }) {
- const slug = params.slug;
+ const slug = params.slug
- // redirect these slugs to appropriate routes
- if (slug === 'feed' || slug === 'rss' || slug === 'rss.xml') {
- throw redirect(308, '/rss.xml')
- }
- if (slug === 'sitemap' || slug === 'sitemap.xml') {
- throw redirect(308, '/sitemap.xml')
- }
+ // redirect these slugs to appropriate routes
+ if (slug === 'feed' || slug === 'rss' || slug === 'rss.xml') {
+ throw redirect(308, '/rss.xml')
+ }
+ if (slug === 'sitemap' || slug === 'sitemap.xml') {
+ throw redirect(308, '/sitemap.xml')
+ }
- let res = null;
- res = await fetch(`/api/getContent/${slug}.json`);
- if (res.status > 400) {
- throw error(res.status, await res.text());
- }
- const json = await res.json()
+ let res = null
+ res = await fetch(`/api/getContent/${slug}.json`)
+ if (res.status > 400) {
+ throw error(res.status, await res.text())
+ }
+ const json = await res.json()
- // because [slug] is a catchall, it gets gallery slugs too. redirect them.
- // e.g. /japan -> /gallery/japan
- if (json.type === 'gallery') {
- throw redirect(308, `/gallery/${json.slug}`)
- }
+ // because [slug] is a catchall, it gets gallery slugs too. redirect them.
+ // e.g. /japan -> /gallery/japan
+ if (json.type === 'gallery') {
+ throw redirect(308, `/gallery/${json.slug}`)
+ }
- setHeaders({
- 'Cache-Control': 'public, max-age=60'
- });
- return {
- json,
- slug,
- REPO_URL
- };
+ setHeaders({
+ 'Cache-Control': 'public, max-age=60',
+ })
+ return {
+ json,
+ slug,
+ REPO_URL,
+ }
}
diff --git a/src/routes/(main)/[slug]/+page.svelte b/src/routes/(main)/[slug]/+page.svelte
index 509e2e2..368dded 100644
--- a/src/routes/(main)/[slug]/+page.svelte
+++ b/src/routes/(main)/[slug]/+page.svelte
@@ -1,86 +1,109 @@
- {json.title}
-
+ {json.title}
+
-
-
-
-
-
-
-
-
-
- {#if json.image}
-
-
-
- {:else}
-
-
-
- {/if}
+
+
+
+
+
+
+
+
+
+ {#if json.image}
+
+
+
+ {:else}
+
+
+
+ {/if}
Back
-
+
- -
-
+
{#key data.currentRoute}
-- 🌊 welcome to my page 🌊 -
-+ 🌊 welcome to my page 🌊 +
+This site is perpetually under construction but coming along. 😎
+This site is perpetually under construction but coming along. 😎
-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.
+
+ 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. ✌️
+Thanks for stopping by, check out the links that work. ✌️
-+ 🎶 - Stove God Cooks, Nujabes, Fleetwood Mac +
+🍿 - The Righteous Gemstones, Saltburn
++ 📚 - Thinking, Fast And Slow by Daniel Kahneman +
++ 🎮 - Baldur's Gate 3, Monster Train, RDR2 +
+Last updated: Jan 12, 2024
+🎶 - Stove God Cooks, Nujabes, Fleetwood Mac
-🍿 - The Righteous Gemstones, Saltburn
-📚 - Thinking, Fast And Slow by Daniel Kahneman
-🎮 - Baldur's Gate 3, Monster Train, RDR2
- -Last updated: Jan 12, 2024
-In no particular order...
-
-
-
-
-
-
- In no particular order...
+
+
+ - {json.title} -
-
-
+ 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)} -
-+ {json.title} +
+
+
- + 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)} +
++
- -
- {@html json.content}
-
+
+ {@html json.content}
+
-
+
- heffner.dev | posts
-
-
-
-
+ heffner.dev | posts
+
+
+
+
-
diff --git a/src/routes/(main)/gallery/+page.js b/src/routes/(main)/gallery/+page.js
index f72efef..76e4f58 100644
--- a/src/routes/(main)/gallery/+page.js
+++ b/src/routes/(main)/gallery/+page.js
@@ -1,16 +1,16 @@
-import { error } from '@sveltejs/kit';
+import { error } from '@sveltejs/kit'
// export const prerender = true; // turned off so it refreshes quickly
export async function load({ setHeaders, fetch }) {
- const res = await fetch(`/api/listGallery.json`);
+ const res = await fetch(`/api/listGallery.json`)
- if (res.status > 400) {
- throw error(res.status, await res.text())
- }
+ if (res.status > 400) {
+ throw error(res.status, await res.text())
+ }
- /** @type {import('$lib/types').GalleryItem[]} */
- const items = await res.json();
- setHeaders({
- 'Cache-Control': 'public, max-age=60' // 1 minute
- })
- return {items}
+ /** @type {import('$lib/types').GalleryItem[]} */
+ const items = await res.json()
+ setHeaders({
+ 'Cache-Control': 'public, max-age=60', // 1 minute
+ })
+ return { items }
}
diff --git a/src/routes/(main)/gallery/+page.svelte b/src/routes/(main)/gallery/+page.svelte
index 7fd1fda..cb2b817 100644
--- a/src/routes/(main)/gallery/+page.svelte
+++ b/src/routes/(main)/gallery/+page.svelte
@@ -1,32 +1,44 @@
- heffner.dev | gallery
-
-
-
-
+ heffner.dev | gallery
+
+
+
+
-
-
-
+
+
+
{#each items as trip}
- 
- {trip.description}
-
-
+
+ {trip.description}
+
+
{/each}
-
diff --git a/src/routes/(main)/gallery/[slug]/+page.js b/src/routes/(main)/gallery/[slug]/+page.js
index e68b476..853bc5a 100644
--- a/src/routes/(main)/gallery/[slug]/+page.js
+++ b/src/routes/(main)/gallery/[slug]/+page.js
@@ -1,21 +1,21 @@
-import { error, redirect } from '@sveltejs/kit';
-import { REPO_URL } from '$lib/siteConfig';
+import { error, redirect } from '@sveltejs/kit'
+import { REPO_URL } from '$lib/siteConfig'
-export const csr = true; // https://github.com/sveltejs/kit/pull/6446
+export const csr = true // https://github.com/sveltejs/kit/pull/6446
export async function load({ params, url, fetch, setHeaders }) {
- const slug = params.slug;
+ const slug = params.slug
- let res = null;
- res = await fetch(`/api/gallery/${slug}.json`);
- if (res.status > 400) {
- throw error(res.status, await res.text());
- }
- setHeaders({
- 'Cache-Control': 'public, max-age=60'
- });
- return {
- json: await res.json(),
- slug,
- REPO_URL
- };
+ let res = null
+ res = await fetch(`/api/gallery/${slug}.json`)
+ if (res.status > 400) {
+ throw error(res.status, await res.text())
+ }
+ setHeaders({
+ 'Cache-Control': 'public, max-age=60',
+ })
+ return {
+ json: await res.json(),
+ slug,
+ REPO_URL,
+ }
}
diff --git a/src/routes/(main)/gallery/[slug]/+page.svelte b/src/routes/(main)/gallery/[slug]/+page.svelte
index 4f66430..bc69b2d 100644
--- a/src/routes/(main)/gallery/[slug]/+page.svelte
+++ b/src/routes/(main)/gallery/[slug]/+page.svelte
@@ -1,86 +1,109 @@
- {json.title}
-
+ {json.title}
+
-
-
-
-
-
-
-
-
-
- {#if json.image}
-
-
-
- {:else}
-
-
-
- {/if}
+
+
+
+
+
+
+
+
+
+ {#if json.image}
+
+
+
+ {:else}
+
+
+
+ {/if}
Back
-
+
- -
-
+
+
-
diff --git a/src/routes/(main)/blog/+page.js b/src/routes/(main)/blog/+page.js
index adbbc8b..ad319d6 100644
--- a/src/routes/(main)/blog/+page.js
+++ b/src/routes/(main)/blog/+page.js
@@ -1,16 +1,16 @@
-import { error } from '@sveltejs/kit';
+import { error } from '@sveltejs/kit'
// export const prerender = true; // turned off so it refreshes quickly
export async function load({ setHeaders, fetch }) {
- const res = await fetch(`/api/listContent.json`);
+ const res = await fetch(`/api/listContent.json`)
- if (res.status > 400) {
- throw error(res.status, await res.text())
- }
+ if (res.status > 400) {
+ throw error(res.status, await res.text())
+ }
- /** @type {import('$lib/types').ContentItem[]} */
- const items = await res.json();
- setHeaders({
- 'Cache-Control': 'public, max-age=60' // 1 minute
- })
- return {items}
+ /** @type {import('$lib/types').ContentItem[]} */
+ const items = await res.json()
+ setHeaders({
+ 'Cache-Control': 'public, max-age=60', // 1 minute
+ })
+ return { items }
}
diff --git a/src/routes/(main)/blog/+page.svelte b/src/routes/(main)/blog/+page.svelte
index bcb288d..7a97e35 100644
--- a/src/routes/(main)/blog/+page.svelte
+++ b/src/routes/(main)/blog/+page.svelte
@@ -1,241 +1,251 @@
-
-
+
+
Posts
-- In total, I've written {items.length} posts on my blog. Use the search below to filter. -
- -
-
+
- - - {#if list.length} -
+ + + {#if list.length} +
+ {/if}
+ {:else if filterStr}
+ + Posts +
++ In total, I've written {items.length} posts on my blog. Use the search below + to filter. +
+ +
+
-
-
-
-
-
- Filter:
-
-
-
-
-
-
-
- - - - {#if list.length} -
-
- {#each list as item}
-
-
-
- {item.description} - -
- {/each}
-
-
+
+
+
+ Filter:
+
+
+
+
+
+
+
+ + + + {#if list.length} +
-
+ {#each list as item}
+
-
+
+ {item.description} + +
+ {/each}
+
+
-
- {/if}
- {:else if filterStr}
-
- No posts found for
-
-
+ {filterStr}.
-
+ No posts found for
+
+
- {:else}
- {filterStr}.
+ Search something else!
- {/if}
-
-
+ >
+ Clear your search
+
+ {:else}
+ Search something else!
+ {/if}
+
+
Gallery
-- details, photos, ephemera from past adventures -
-+ Gallery +
++ details, photos, ephemera from past adventures +
+- {json.title} -
-
-
+ 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)} -
-+ {json.title} +
+
+
- + 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)} +
++
- -
- {@html json.content}
-
+
+ {@html json.content}
+
-
+
- Tanner Heffner's Resume
-
-
-
-
+ Tanner Heffner's Resume
+
+
+
+
-
-
+
+
-
-
+
+
-
-
+
+
-
-
+
+
-
diff --git a/src/routes/(main)/work/+page.js b/src/routes/(main)/work/+page.js
index e43fab7..af1a7da 100644
--- a/src/routes/(main)/work/+page.js
+++ b/src/routes/(main)/work/+page.js
@@ -1,16 +1,16 @@
-import { error } from '@sveltejs/kit';
+import { error } from '@sveltejs/kit'
export async function load({ setHeaders, fetch }) {
- const res = await fetch(`/api/listLocalContent.json`);
+ const res = await fetch(`/api/listLocalContent.json`)
- if (res.status > 400) {
- throw error(res.status, await res.text())
- }
+ if (res.status > 400) {
+ throw error(res.status, await res.text())
+ }
- /** @type {import('$lib/types').Project[]} */
- const items = await res.json();
- setHeaders({
- 'Cache-Control': 'public, max-age=60' // 1 minute
- })
- return { items };
+ /** @type {import('$lib/types').Project[]} */
+ const items = await res.json()
+ setHeaders({
+ 'Cache-Control': 'public, max-age=60', // 1 minute
+ })
+ return { items }
}
diff --git a/src/routes/(main)/work/+page.svelte b/src/routes/(main)/work/+page.svelte
index 2e958e1..b250545 100644
--- a/src/routes/(main)/work/+page.svelte
+++ b/src/routes/(main)/work/+page.svelte
@@ -1,55 +1,76 @@
- {SITE_TITLE} | Work
-
-
-
+ {SITE_TITLE} | Work
+
+
+
-
-
-
+
+
+
-
-
+
+ Resume
+
-
-
-
-
diff --git a/src/routes/(main)/work/[slug]/+page.js b/src/routes/(main)/work/[slug]/+page.js
index a456805..5d01ffb 100644
--- a/src/routes/(main)/work/[slug]/+page.js
+++ b/src/routes/(main)/work/[slug]/+page.js
@@ -1,24 +1,24 @@
-import { error } from '@sveltejs/kit';
-import { REPO_URL } from '$lib/siteConfig';
-export const csr = true; // https://github.com/sveltejs/kit/pull/6446
+import { error } from '@sveltejs/kit'
+import { REPO_URL } from '$lib/siteConfig'
+export const csr = true // https://github.com/sveltejs/kit/pull/6446
export async function load({ params, fetch, setHeaders }) {
- const slug = params.slug;
- let res = null;
- res = await fetch(`/api/work/${slug}.json`);
+ const slug = params.slug
+ let res = null
+ res = await fetch(`/api/work/${slug}.json`)
- if (res.status > 400) {
- throw error(res.status, await res.text());
- }
+ if (res.status > 400) {
+ throw error(res.status, await res.text())
+ }
- const items = await res.json();
+ const items = await res.json()
- setHeaders({
- 'Cache-Control': 'public, max-age=60'
- });
- return {
- ...items,
- slug,
- REPO_URL
- };
+ setHeaders({
+ 'Cache-Control': 'public, max-age=60',
+ })
+ return {
+ ...items,
+ slug,
+ REPO_URL,
+ }
}
diff --git a/src/routes/(main)/work/[slug]/+page.svelte b/src/routes/(main)/work/[slug]/+page.svelte
index cf92083..c97d6bb 100644
--- a/src/routes/(main)/work/[slug]/+page.svelte
+++ b/src/routes/(main)/work/[slug]/+page.svelte
@@ -1,57 +1,72 @@
- {name}
-
-
-
-
-
-
-
-
-
-
- {#if image}
-
-
- {:else}
-
-
- {/if}
+ {name}
+
+
+
+
+
+
+
+
+
+
+ {#if image}
+
+
+ {:else}
+
+
+ {/if}
Back
-
- {#if name}
- 
- {/if}
-
-
+ {#if name}
+
+ {/if}
+
+
-
+
-
-
-
+
+
+
-
-
+
-
+
`${SITE_URL}
${pages
- .map((page) => `
+ .map(
+ (page) => `
${SITE_URL}/${page}
`
- ).join('')}
+ )
+ .join('')}
${posts
- .map((post) =>
- post.isPrivate
- ? null
- : `
+ .map((post) =>
+ post.isPrivate
+ ? null
+ : `
${SITE_URL}/${post.slug}
- ${post.ghMetadata.updated_at ? post.ghMetadata.updated_at.substring(0, 10) : post.ghMetadata.created_at.substring(0, 10)}
+ ${
+ post.ghMetadata.updated_at
+ ? post.ghMetadata.updated_at.substring(0, 10)
+ : post.ghMetadata.created_at.substring(0, 10)
+ }
`
- ).join('')}
+ )
+ .join('')}
${galleries
.map((gallery) =>
gallery.isPrivate
@@ -55,18 +67,24 @@ const sitemap = (posts, projects, pages, galleries) => `
${SITE_URL}/gallery/${gallery.slug}
- ${gallery.ghMetadata.updated_at ? gallery.ghMetadata.updated_at.substring(0, 10) : gallery.ghMetadata.created_at.substring(0, 10)}
+ ${
+ gallery.ghMetadata.updated_at
+ ? gallery.ghMetadata.updated_at.substring(0, 10)
+ : gallery.ghMetadata.created_at.substring(0, 10)
+ }
`
- ).join('')}
+ )
+ .join('')}
${projects
- .map((project) =>
- project.isPrivate
- ? null
- : `
+ .map((project) =>
+ project.isPrivate
+ ? null
+ : `
${SITE_URL}/work/${project.slug}
`
- ).join('')}
- `;
+ )
+ .join('')}
+ `
diff --git a/src/tailwind.css b/src/tailwind.css
index 00eb5dd..71f4e93 100644
--- a/src/tailwind.css
+++ b/src/tailwind.css
@@ -2,149 +2,153 @@
@tailwind components;
@layer components {
- body {
- --brand-accent: theme('colors.sky.600');
- --brand-alternate: theme('colors.orange.300');
-
- /* https://ishadeed.com/article/defensive-css */
- overflow-wrap: break-word;
- overflow-y: auto;
- scrollbar-gutter: stable;
- }
- .dark body {
- --brand-accent: theme('colors.blue.300');
- --brand-alternate: theme('colors.indigo.700');
- }
- :root {
- accent-color: var(--brand-accent);
- }
- :focus-visible {
- outline-color: var(--brand-accent);
- }
- ::selection {
- color: theme('colors.sky.200');
- background-color: var(--brand-accent);
- }
- .dark ::selection {
- color: theme('colors.slate.900');
- }
- ::marker {
- color: var(--brand-accent);
- }
- .text-accent {
- color: var(--brand-accent);
- }
-
- :is(::-webkit-calendar-picker-indicator, ::-webkit-clear-button, ::-webkit-inner-spin-button, ::-webkit-outer-spin-button) {
- color: var(--brand-accent);
- }
-
- /* https://css-tricks.com/two-issues-styling-the-details-element-and-how-to-solve-them/ */
- details {
- border: 2px solid var(--brand-accent);
- padding: 0.5rem 1rem;
- }
- details > summary {
- cursor: pointer;
- }
-
- details > summary > *:first-child {
- display: inline;
- }
-
- img {
- /* https://ishadeed.com/article/defensive-css */
- max-width: 100%;
- object-fit: cover;
- background-color: grey;
- }
-
- hr {
- @apply w-full border-t-2 border-sky-600 dark:border-blue-300;
- }
-
- /* header styles, works best larger font sizes */
- .text-shadow {
- @apply text-red-600;
- text-shadow: 2px 3px 1px theme('colors.sky.600');
- }
- .dark .text-shadow {
- @apply text-yellow-400;
- text-shadow: 2px 3px 1px theme('colors.yellow.700');
- }
- .text-unshadow {
- text-shadow: none !important;
- }
-
- /* Links that highlight from bottom */
- .gh-link,
- .footer-link,
- .prose a {
- @apply from-red-600 to-red-600 dark:from-yellow-400 dark:to-yellow-400;
- @apply text-red-600 hover:text-sky-200 dark:text-yellow-400 dark:hover:text-slate-900;
-
- cursor: pointer;
- text-decoration: none;
- padding: 1px 4px;
- background: linear-gradient(to bottom, var(--tw-gradient-from) 0%, var(--tw-gradient-to) 100%);
- background-position: 0 100%;
- background-repeat: repeat-x;
- background-size: 4px 2px;
- transition: all 0.3s linear;
-
- &:hover {
- background-size: 4px 50px;
- }
- }
-
- /* to undo above */
- .bg-unset {
- background: unset;
- color: currentColor;
- }
+ body {
+ --brand-accent: theme('colors.sky.600');
+ --brand-alternate: theme('colors.orange.300');
+
+ /* https://ishadeed.com/article/defensive-css */
+ overflow-wrap: break-word;
+ overflow-y: auto;
+ scrollbar-gutter: stable;
+ }
+ .dark body {
+ --brand-accent: theme('colors.blue.300');
+ --brand-alternate: theme('colors.indigo.700');
+ }
+ :root {
+ accent-color: var(--brand-accent);
+ }
+ :focus-visible {
+ outline-color: var(--brand-accent);
+ }
+ ::selection {
+ color: theme('colors.sky.200');
+ background-color: var(--brand-accent);
+ }
+ .dark ::selection {
+ color: theme('colors.slate.900');
+ }
+ ::marker {
+ color: var(--brand-accent);
+ }
+ .text-accent {
+ color: var(--brand-accent);
+ }
+
+ :is(::-webkit-calendar-picker-indicator, ::-webkit-clear-button, ::-webkit-inner-spin-button, ::-webkit-outer-spin-button) {
+ color: var(--brand-accent);
+ }
+
+ /* https://css-tricks.com/two-issues-styling-the-details-element-and-how-to-solve-them/ */
+ details {
+ border: 2px solid var(--brand-accent);
+ padding: 0.5rem 1rem;
+ }
+ details > summary {
+ cursor: pointer;
+ }
+
+ details > summary > *:first-child {
+ display: inline;
+ }
+
+ img {
+ /* https://ishadeed.com/article/defensive-css */
+ max-width: 100%;
+ object-fit: cover;
+ background-color: grey;
+ }
+
+ hr {
+ @apply w-full border-t-2 border-sky-600 dark:border-blue-300;
+ }
+
+ /* header styles, works best larger font sizes */
+ .text-shadow {
+ @apply text-red-600;
+ text-shadow: 2px 3px 1px theme('colors.sky.600');
+ }
+ .dark .text-shadow {
+ @apply text-yellow-400;
+ text-shadow: 2px 3px 1px theme('colors.yellow.700');
+ }
+ .text-unshadow {
+ text-shadow: none !important;
+ }
+
+ /* Links that highlight from bottom */
+ .gh-link,
+ .footer-link,
+ .prose a {
+ @apply from-red-600 to-red-600 dark:from-yellow-400 dark:to-yellow-400;
+ @apply text-red-600 hover:text-sky-200 dark:text-yellow-400 dark:hover:text-slate-900;
+
+ cursor: pointer;
+ text-decoration: none;
+ padding: 1px 4px;
+ background: linear-gradient(
+ to bottom,
+ var(--tw-gradient-from) 0%,
+ var(--tw-gradient-to) 100%
+ );
+ background-position: 0 100%;
+ background-repeat: repeat-x;
+ background-size: 4px 2px;
+ transition: all 0.3s linear;
+
+ &:hover {
+ background-size: 4px 50px;
+ }
+ }
+
+ /* to undo above */
+ .bg-unset {
+ background: unset;
+ color: currentColor;
+ }
}
/* filters on /blog page */
.filter {
- @apply m-1 inline-block whitespace-nowrap rounded rounded-md px-4 py-2;
- @apply border-red-600 bg-sky-600 font-bold text-orange-100;
- @apply dark:border-slate-600 dark:bg-gray-800 dark:text-gray-100;
- @apply ring-sky-600 transition-all duration-200 ease-in-out hover:ring-2 dark:ring-lime-700;
+ @apply m-1 inline-block whitespace-nowrap rounded rounded-md px-4 py-2;
+ @apply border-red-600 bg-sky-600 font-bold text-orange-100;
+ @apply dark:border-slate-600 dark:bg-gray-800 dark:text-gray-100;
+ @apply ring-sky-600 transition-all duration-200 ease-in-out hover:ring-2 dark:ring-lime-700;
}
.activefilter {
- @apply border-red-600 bg-orange-300 text-red-600;
- @apply dark:border-slate-600 dark:bg-blue-300 dark:text-slate-800;
- @apply ring-yellow-400 dark:ring-yellow-800;
+ @apply border-red-600 bg-orange-300 text-red-600;
+ @apply dark:border-slate-600 dark:bg-blue-300 dark:text-slate-800;
+ @apply ring-yellow-400 dark:ring-yellow-800;
}
/* Cleanup styles for markdown headers */
.prose h1 a {
- @apply bg-unset text-lime-800 hover:text-lime-800 dark:text-yellow-400 dark:hover:text-yellow-400;
+ @apply bg-unset text-lime-800 hover:text-lime-800 dark:text-yellow-400 dark:hover:text-yellow-400;
}
.prose h2,
.prose h3,
.prose h4 {
- @apply relative;
- a {
- @apply bg-unset font-bold !text-accent p-0;
- }
- &::before {
- @apply absolute -left-5;
- @apply text-accent;
- content: '#';
- }
+ @apply relative;
+ a {
+ @apply bg-unset p-0 font-bold !text-accent;
+ }
+ &::before {
+ @apply absolute -left-5;
+ @apply text-accent;
+ content: '#';
+ }
}
.prose-img-dense {
- @apply !m-0;
+ @apply !m-0;
}
.back-link {
- @apply relative mb-4 font-bold text-accent mx-4 lg:mx-12;
- &::before {
- @apply absolute -left-5;
- content: '<';
- color: currentColor;
- }
+ @apply relative mx-4 mb-4 font-bold text-accent lg:mx-12;
+ &::before {
+ @apply absolute -left-5;
+ content: '<';
+ color: currentColor;
+ }
}
/*
@@ -152,37 +156,42 @@
- https://css-tricks.com/strut-your-stuff-with-a-custom-scrollbar/
*/
body {
- --sb-primary-color: theme('colors.amber.400');
- --sb-accent-color: theme('colors.red.500');
- --sb-track-1: theme('colors.sky.600');
- --sb-track-2: theme('colors.blue.300');
+ --sb-primary-color: theme('colors.amber.400');
+ --sb-accent-color: theme('colors.red.500');
+ --sb-track-1: theme('colors.sky.600');
+ --sb-track-2: theme('colors.blue.300');
}
.dark body {
- --sb-primary-color: theme('colors.yellow.600');
- --sb-accent-color: theme('colors.amber.900');
- --sb-track-1: theme('colors.sky.900');
- --sb-track-2: theme('colors.slate.800');
+ --sb-primary-color: theme('colors.yellow.600');
+ --sb-accent-color: theme('colors.amber.900');
+ --sb-track-1: theme('colors.sky.900');
+ --sb-track-2: theme('colors.slate.800');
}
body::-webkit-scrollbar {
- width: 1rem;
- height: 1rem;
+ width: 1rem;
+ height: 1rem;
}
body::-webkit-scrollbar-thumb {
- background: linear-gradient(270deg, var(--sb-accent-color), var(--sb-primary-color));
- border-radius: 2px;
- box-shadow: inset 2px 2px 2px var(--sb-primary-color), inset -1px -1px 1px var(--sb-track-1);
+ background: linear-gradient(
+ 270deg,
+ var(--sb-accent-color),
+ var(--sb-primary-color)
+ );
+ border-radius: 2px;
+ box-shadow: inset 2px 2px 2px var(--sb-primary-color),
+ inset -1px -1px 1px var(--sb-track-1);
}
body::-webkit-scrollbar-track {
- background: linear-gradient(
- 90deg,
- var(--sb-track-2),
- var(--sb-track-2) 1px,
- var(--sb-track-1) 0,
- var(--sb-track-1)
- );
+ background: linear-gradient(
+ 90deg,
+ var(--sb-track-2),
+ var(--sb-track-2) 1px,
+ var(--sb-track-1) 0,
+ var(--sb-track-1)
+ );
}
@tailwind utilities;
diff --git a/svelte.config.js b/svelte.config.js
index 6c1aa3a..90435d8 100644
--- a/svelte.config.js
+++ b/svelte.config.js
@@ -1,54 +1,54 @@
-import preprocess from 'svelte-preprocess';
-import adapter from '@sveltejs/adapter-auto';
-import { mdsvex } from 'mdsvex';
-import remarkGithub from 'remark-github';
-import remarkAbbr from 'remark-abbr';
-import rehypeSlug from 'rehype-slug';
-import rehypeAutolinkHeadings from 'rehype-autolink-headings';
+import preprocess from 'svelte-preprocess'
+import adapter from '@sveltejs/adapter-auto'
+import { mdsvex } from 'mdsvex'
+import remarkGithub from 'remark-github'
+import remarkAbbr from 'remark-abbr'
+import rehypeSlug from 'rehype-slug'
+import rehypeAutolinkHeadings from 'rehype-autolink-headings'
// mdsvex config
const mdsvexConfig = {
- extensions: ['.svelte.md', '.md', '.svx'],
- layout: {
- _: './src/mdsvexlayout.svelte' // default mdsvex layout
- },
- remarkPlugins: [
- [
- remarkGithub,
- {
- // Use your own repository
- repository: 'https://github.com/tjheffner/heffdotdev.git'
- }
- ],
- remarkAbbr
- ],
- rehypePlugins: [
- rehypeSlug,
- [
- rehypeAutolinkHeadings,
- {
- behavior: 'wrap'
- }
- ]
- ]
-};
+ extensions: ['.svelte.md', '.md', '.svx'],
+ layout: {
+ _: './src/mdsvexlayout.svelte', // default mdsvex layout
+ },
+ remarkPlugins: [
+ [
+ remarkGithub,
+ {
+ // Use your own repository
+ repository: 'https://github.com/tjheffner/heffdotdev.git',
+ },
+ ],
+ remarkAbbr,
+ ],
+ rehypePlugins: [
+ rehypeSlug,
+ [
+ rehypeAutolinkHeadings,
+ {
+ behavior: 'wrap',
+ },
+ ],
+ ],
+}
/** @type {import('@sveltejs/kit').Config} */
const config = {
- extensions: ['.svelte', '.html', '.svx', ...mdsvexConfig.extensions],
- preprocess: [
- mdsvex(mdsvexConfig),
- preprocess({
- postcss: true
- })
- ],
- outDir: 'public',
+ extensions: ['.svelte', '.html', '.svx', ...mdsvexConfig.extensions],
+ preprocess: [
+ mdsvex(mdsvexConfig),
+ preprocess({
+ postcss: true,
+ }),
+ ],
+ outDir: 'public',
- kit: {
- adapter: adapter({
- split: true
- })
- }
-};
+ kit: {
+ adapter: adapter({
+ split: true,
+ }),
+ },
+}
-export default config;
+export default config
diff --git a/tailwind.config.cjs b/tailwind.config.cjs
index f90d1ab..6da8c99 100644
--- a/tailwind.config.cjs
+++ b/tailwind.config.cjs
@@ -1,90 +1,90 @@
module.exports = {
- content: [
- './src/**/*.svelte',
- // may also want to include HTML files
- './src/**/*.html'
- ],
- darkMode: 'class',
- theme: {
- extend: {
- colors: {
- accent: 'var(--brand-accent)',
- alternate: 'var(--brand-alternate)'
- },
- typography: (theme) => ({
- DEFAULT: {
- css: {
- '--tw-prose-bullets': theme('colors.black'),
- '--tw-prose-th-borders': theme('colors.accent'),
- '--tw-prose-td-borders': theme('colors.accent'),
- // these customizations are explained here https://youtu.be/-FzemNMcOGs
- blockquote: {
- borderLeft: '3px solid theme("colors.accent")',
- fontSize: 'inherit',
- fontStyle: 'inherit',
- fontWeight: 'medium'
- },
- 'blockquote p:first-of-type::before': {
- content: ''
- },
- 'blockquote p:last-of-type::after': {
- content: ''
- },
- 'code::before': false,
- 'code::after': false,
- code: {
- 'border-radius': '0.25rem',
- padding: '0.15rem 0.3rem',
- borderWidth: '2px',
- borderColor: 'rgba(0,0,0,0.1)'
- },
- 'a code': {
- color: 'unset'
- },
- 'a strong': {
- color: 'currentColor'
- },
- 'li, ul, ol': {
- margin: 0
- },
- 'li > img': {
- margin: 0,
- display: 'inline'
- },
- 'ol > li::marker': {
- color: 'var(--tw-prose-body)'
- },
- 'ul > li::marker': {
- color: 'var(--tw-prose-body)'
- },
- tfoot: {
- borderTopWidth: '1px',
- borderColor: 'var(--tw-prose-th-borders)'
- },
- mark: {
- padding: '0.25rem',
- background: theme('colors.indigo.300'),
- color: 'var(--tw-prose-body)'
- }
- }
- },
- // for dark:prose-invert
- invert: {
- css: {
- '--tw-prose-th-borders': theme('colors.blue.300'),
- '--tw-prose-td-borders': theme('colors.gray.600'),
- mark: {
- background: theme('colors.blue.300'),
- color: theme('colors.slate.900')
- },
- hr: {
- borderColor: theme('colors.accent')
- }
- }
- }
- })
- }
- },
- variants: {},
- plugins: [require('@tailwindcss/typography')]
-};
+ content: [
+ './src/**/*.svelte',
+ // may also want to include HTML files
+ './src/**/*.html',
+ ],
+ darkMode: 'class',
+ theme: {
+ extend: {
+ colors: {
+ accent: 'var(--brand-accent)',
+ alternate: 'var(--brand-alternate)',
+ },
+ typography: (theme) => ({
+ DEFAULT: {
+ css: {
+ '--tw-prose-bullets': theme('colors.black'),
+ '--tw-prose-th-borders': theme('colors.accent'),
+ '--tw-prose-td-borders': theme('colors.accent'),
+ // these customizations are explained here https://youtu.be/-FzemNMcOGs
+ blockquote: {
+ borderLeft: '3px solid theme("colors.accent")',
+ fontSize: 'inherit',
+ fontStyle: 'inherit',
+ fontWeight: 'medium',
+ },
+ 'blockquote p:first-of-type::before': {
+ content: '',
+ },
+ 'blockquote p:last-of-type::after': {
+ content: '',
+ },
+ 'code::before': false,
+ 'code::after': false,
+ code: {
+ 'border-radius': '0.25rem',
+ padding: '0.15rem 0.3rem',
+ borderWidth: '2px',
+ borderColor: 'rgba(0,0,0,0.1)',
+ },
+ 'a code': {
+ color: 'unset',
+ },
+ 'a strong': {
+ color: 'currentColor',
+ },
+ 'li, ul, ol': {
+ margin: 0,
+ },
+ 'li > img': {
+ margin: 0,
+ display: 'inline',
+ },
+ 'ol > li::marker': {
+ color: 'var(--tw-prose-body)',
+ },
+ 'ul > li::marker': {
+ color: 'var(--tw-prose-body)',
+ },
+ tfoot: {
+ borderTopWidth: '1px',
+ borderColor: 'var(--tw-prose-th-borders)',
+ },
+ mark: {
+ padding: '0.25rem',
+ background: theme('colors.indigo.300'),
+ color: 'var(--tw-prose-body)',
+ },
+ },
+ },
+ // for dark:prose-invert
+ invert: {
+ css: {
+ '--tw-prose-th-borders': theme('colors.blue.300'),
+ '--tw-prose-td-borders': theme('colors.gray.600'),
+ mark: {
+ background: theme('colors.blue.300'),
+ color: theme('colors.slate.900'),
+ },
+ hr: {
+ borderColor: theme('colors.accent'),
+ },
+ },
+ },
+ }),
+ },
+ },
+ variants: {},
+ plugins: [require('@tailwindcss/typography')],
+}
diff --git a/tsconfig.json b/tsconfig.json
index b6fcc24..2abb47e 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,39 +1,39 @@
{
- "extends": "./.svelte-kit/tsconfig.json",
- "compilerOptions": {
- "moduleResolution": "node",
- "module": "es2020",
- "lib": ["es2021"],
- "target": "es2021",
- /**
+ "extends": "./.svelte-kit/tsconfig.json",
+ "compilerOptions": {
+ "moduleResolution": "node",
+ "module": "es2020",
+ "lib": ["es2021"],
+ "target": "es2021",
+ /**
svelte-preprocess cannot figure out whether you have a value or a type, so tell TypeScript
to enforce using \`import type\` instead of \`import\` for Types.
*/
- "importsNotUsedAsValues": "error",
- "isolatedModules": true,
- "resolveJsonModule": true,
- /**
+ "importsNotUsedAsValues": "error",
+ "isolatedModules": true,
+ "resolveJsonModule": true,
+ /**
To have warnings/errors of the Svelte compiler at the correct position,
enable source maps by default.
*/
- "sourceMap": true,
- "esModuleInterop": true,
- "skipLibCheck": true,
- "forceConsistentCasingInFileNames": true,
- "baseUrl": ".",
- "allowJs": true,
- "checkJs": true,
- "paths": {
- "$lib/*": ["src/lib/*"],
- "$lib": ["src/lib"]
- }
- },
- "include": [
- "src/**/*.d.ts",
- "src/**/*.js",
- "src/**/*.ts",
- "src/**/*.svelte",
- "src/lib/content.js",
- "src/lib/types.d.ts"
- ]
+ "sourceMap": true,
+ "esModuleInterop": true,
+ "skipLibCheck": true,
+ "forceConsistentCasingInFileNames": true,
+ "baseUrl": ".",
+ "allowJs": true,
+ "checkJs": true,
+ "paths": {
+ "$lib/*": ["src/lib/*"],
+ "$lib": ["src/lib"]
+ }
+ },
+ "include": [
+ "src/**/*.d.ts",
+ "src/**/*.js",
+ "src/**/*.ts",
+ "src/**/*.svelte",
+ "src/lib/content.js",
+ "src/lib/types.d.ts"
+ ]
}
diff --git a/vite.config.js b/vite.config.js
index ba09fdb..64d31cd 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -1,22 +1,22 @@
// vite.config.js
-import { sveltekit } from '@sveltejs/kit/vite';
-import fs from 'fs';
+import { sveltekit } from '@sveltejs/kit/vite'
+import fs from 'fs'
/** @type {import('vite').UserConfig} */
const config = {
- plugins: [sveltekit(), rawFonts(['.ttf'])]
-};
+ plugins: [sveltekit(), rawFonts(['.ttf'])],
+}
function rawFonts(ext) {
- return {
+ return {
name: 'vite-plugin-raw-fonts',
transform(code, id) {
- if (ext.some(e => id.endsWith(e))) {
- const buffer = fs.readFileSync(id);
- return {code: `export default ${JSON.stringify(buffer)}`, map: null};
+ if (ext.some((e) => id.endsWith(e))) {
+ const buffer = fs.readFileSync(id)
+ return { code: `export default ${JSON.stringify(buffer)}`, map: null }
}
- }
- };
+ },
+ }
}
-export default config;
+export default config
+
+
-
diff --git a/src/routes/(main)/og/+server.js b/src/routes/(main)/og/+server.js
index f741791..b8a4e27 100644
--- a/src/routes/(main)/og/+server.js
+++ b/src/routes/(main)/og/+server.js
@@ -1,43 +1,43 @@
// see https://geoffrich.net/posts/svelte-social-image/
-import satori from 'satori';
-import { Resvg } from '@resvg/resvg-js';
-import PTSerif from '$lib/font/PTSerif-Regular.ttf';
-import { html as toReactNode } from 'satori-html';
-import Og from '$lib/components/Og.svelte';
+import satori from 'satori'
+import { Resvg } from '@resvg/resvg-js'
+import PTSerif from '$lib/font/PTSerif-Regular.ttf'
+import { html as toReactNode } from 'satori-html'
+import Og from '$lib/components/Og.svelte'
-const height = 400;
-const width = 800;
+const height = 400
+const width = 800
/** @type {import('./$types').RequestHandler} */
export const GET = async ({ url }) => {
- const message = url.searchParams.get('message') ?? undefined;
- const result = Og.render({ message });
- const element = toReactNode(`${result.html}`);
+ const message = url.searchParams.get('message') ?? undefined
+ const result = Og.render({ message })
+ const element = toReactNode(`${result.html}`)
- const svg = await satori(element, {
- fonts: [
- {
- name: 'PT Serif',
- data: Buffer.from(PTSerif),
- style: 'normal'
- }
- ],
- height,
- width
- });
+ const svg = await satori(element, {
+ fonts: [
+ {
+ name: 'PT Serif',
+ data: Buffer.from(PTSerif),
+ style: 'normal',
+ },
+ ],
+ height,
+ width,
+ })
- const resvg = new Resvg(svg, {
- fitTo: {
- mode: 'width',
- value: width
- }
- });
+ const resvg = new Resvg(svg, {
+ fitTo: {
+ mode: 'width',
+ value: width,
+ },
+ })
- const image = resvg.render();
+ const image = resvg.render()
- return new Response(image.asPng(), {
- headers: {
- 'content-type': 'image/png'
- }
- });
-};
+ return new Response(image.asPng(), {
+ headers: {
+ 'content-type': 'image/png',
+ },
+ })
+}
diff --git a/src/routes/(main)/resume/+page.svelte b/src/routes/(main)/resume/+page.svelte
index 577f687..55a55ae 100644
--- a/src/routes/(main)/resume/+page.svelte
+++ b/src/routes/(main)/resume/+page.svelte
@@ -1,103 +1,126 @@
-
-
+
+
- Creative technologist passionate about design systems, responsive web design and - accessibility. -
-+ Creative technologist passionate about design systems, responsive web + design and accessibility. +
+I believe the web should be enjoyable for all.
-To me, that means that websites should:
++ I believe the web should be enjoyable for all. +
+To me, that means that websites should:
--
-
- - Load quickly with minimal page bloat and disruption (no unnecessary tracking, excessive - and obtrusive advertisements, autoplaying videos etc.) - -
- - Be functional for all users regardless of their manner of access (sighted or - screenreaders, navigable by keyboard, mouse or touch, etc.) - -
- At the bare minimum, pass WCAG-AA accessibility guidelines -
-
+
- + Load quickly with minimal page bloat and disruption (no unnecessary + tracking, excessive and obtrusive advertisements, autoplaying videos + etc.) + +
- + Be functional for all users regardless of their manner of access + (sighted or screenreaders, navigable by keyboard, mouse or touch, etc.) + +
- At the bare minimum, pass WCAG-AA accessibility guidelines +
The web can be so much more than it is. Let's make it better.
-+ The web can be so much more than it is. Let's make it better. +
+- Working across the web tech stack, I've consulted, architected, and delivered numerous - projects for clients big and small with all sorts of use cases. -
++ Working across the web tech stack, I've consulted, architected, and + delivered numerous projects for clients big and small with + all sorts of use cases. +
-- I love to design and architect design systems and responsive component libraries in close - collaboration with designers. In the past, I've helped build and maintain agency-wide - front-end tooling for consistently delivering best practices to clients and stakeholders. - Rapid prototyping is my jam. -
++ I love to design and architect design systems and responsive component + libraries in close collaboration with designers. In the past, I've helped + build and maintain agency-wide front-end tooling for consistently + delivering best practices to clients and stakeholders. Rapid prototyping + is my jam. +
-- I'm comfortable working in and with a number of languages and technologies, but have a - strong preference towards modern Javascript and CSS. I've been a mostly off-and-on contributor to the Drupal ecosystem - for eight+ years. A long time ago (read: 2015), I dove into node and an early edition of - Pattern Lab - to build a command line-based training module around atomic design concepts for - nodeschool.io. It is not being maintained. -
++ I'm comfortable working in and with a number of languages and + technologies, but have a strong preference towards modern Javascript and + CSS. I've been a mostly off-and-on contributor to the Drupal ecosystem + for eight+ years. A long time ago (read: 2015), I dove into node and an early + edition of + Pattern Lab + to build a command line-based training module around atomic design concepts + for + nodeschool.io. It is not being + maintained. +
-- I mentor new and junior developers and perform duties as a front-end tech lead. -
-+ I mentor new and junior developers and perform duties as a front-end tech + lead. +
+Designing for the web since '05.
+Designing for the web since '05.
-- I hacked together my first CSS file at age 12 customizing a phpBB forum theme. Years later - in a college art class, I was exposed to the Processing language and rediscovered how magical that feeling of creation through code was. -
++ I hacked together my first CSS file at age 12 customizing a phpBB forum + theme. Years later in a college art class, I was exposed to the Processing language and rediscovered how magical that feeling of creation through code + was. +
-- After graduating from the University of Oregon with a journalism degree (minor in multimedia art), I continued my - education with a four-month programming bootcamp. I've been a professional web developer - since 2015, across all parts of the web stack. That means I know just enough SQL to be - dangerous, but I'd rather work on the front end. 😉 -
++ After graduating from the University of Oregon with a journalism degree + (minor in multimedia art), I continued my education with a four-month + programming bootcamp. I've been a professional web developer since 2015, + across all parts of the web stack. That means I know just enough SQL to be + dangerous, but I'd rather work on the front end. 😉 +
-- Currently, I'm a senior software developer at Agile6, - working on the modernization effort for VA.gov serving millions - of veterans nationwide. -
++ Currently, I'm a senior software developer at Agile6, working on the modernization effort for + VA.gov serving millions of veterans nationwide. +
-- Previously: Instrument, - Phase2 -
-+ Previously: Instrument, + Phase2 +
+Past work
-- A selection of previously completed projects, personal and professional. -
-+ Past work +
++ A selection of previously completed projects, personal and professional. +
+-
- {#each data.items as project}
- {#if project.type === 'professional'}
-
-
-
-
- {/if}
- {/each}
-
Other clients
-Department of Veterans Affairs, Epic Games, Crossfit, Norwegian Cruise Line, PGA Tour, Weight Watchers, Urban Institute, Wilson Center
+-
+ {#each data.items as project}
+ {#if project.type === 'professional'}
+
-
+
+
+ {/if}
+ {/each}
+
+ Other clients +
++ Department of Veterans Affairs, Epic Games, Crossfit, Norwegian Cruise + Line, PGA Tour, Weight Watchers, Urban Institute, Wilson Center +
- Resume --
- {#each data.items as project}
- {#if project.type === 'personal'}
-
-
-
-
- {/if}
- {/each}
+ -
+
+
+ {/if}
+ {/each}
+
-
+ {#each data.items as project}
+ {#if project.type === 'personal'}
+
-
- {/if}
-
- {#if image}
- - {name} - ({date.slice(0,4)}) -
-
- {@html content}
-
-
- {#if url}
- View this project live
- {/if}
+
+
+ {/if}
+
+ {#if image}
+ + {name} + ({date.slice(0, 4)}) +
+
+ {@html content}
+
+
+ {#if url}
+ View this project live
+ {/if}
- 
-
+
+
-
-
+
+
{data.title}
+{data.title}
at
-{data.where} | {data.when}
- - - -
Schedule
+ +Schedule
-
- {#each data.agenda as {event, time}}
-
-
-
{event} - {time}
-
- {/each}
+ {#each data.agenda as { event, time }}
+ -
+
+ {event} - {time} +
+
+ {/each}
Menu
+Menu
-
- {#each data.menu as {name, ingredients}}
-
-
-
{name}
-{ingredients}
-
- {/each}
+ {#each data.menu as { name, ingredients }}
+ -
+
{name}
+{ingredients}
+
+ {/each}
{data.disclaimer}
- +{data.disclaimer}
-
-
+
+
diff --git a/src/routes/(nowrapper)/christmas/christmas.css b/src/routes/(nowrapper)/christmas/christmas.css
index f6ebc43..d2584dd 100644
--- a/src/routes/(nowrapper)/christmas/christmas.css
+++ b/src/routes/(nowrapper)/christmas/christmas.css
@@ -2,12 +2,16 @@ body {
background-color: rgb(17 24 39 / var(--tw-bg-opacity)) !important;
}
body::-webkit-scrollbar-thumb {
- background: repeating-linear-gradient(60deg, red 0 9%, white 10% 18%) !important;
+ background: repeating-linear-gradient(
+ 60deg,
+ red 0 9%,
+ white 10% 18%
+ ) !important;
border-radius: 100vw !important;
margin-block: 10px !important;
}
body::-webkit-scrollbar-track {
- background: powderblue !important;
+ background: powderblue !important;
}
.serif {
diff --git a/src/routes/(nowrapper)/christmas/christmas.js b/src/routes/(nowrapper)/christmas/christmas.js
index cde0b3c..c25706c 100644
--- a/src/routes/(nowrapper)/christmas/christmas.js
+++ b/src/routes/(nowrapper)/christmas/christmas.js
@@ -1,42 +1,45 @@
export const json = {
- "title": "Christmas Dinner",
- "where": "the purr palace",
- "when": "december 23, 2023",
- "agenda": [
+ title: 'Christmas Dinner',
+ where: 'the purr palace',
+ when: 'december 23, 2023',
+ agenda: [
{
- "event": "cocktails",
- "time": "1pm onwards"
+ event: 'cocktails',
+ time: '1pm onwards',
},
{
- "event": "dinner",
- "time": "around 3"
+ event: 'dinner',
+ time: 'around 3',
},
{
- "event": "presents",
- "time": "4"
+ event: 'presents',
+ time: '4',
},
{
- "event": "fun & games",
- "time": "throughout"
- }
+ event: 'fun & games',
+ time: 'throughout',
+ },
],
- "menu": [
+ menu: [
{
- "name": "baked potato soup",
- "ingredients": "yukon gold potatoes, cream, bacon, chives, cheese"
+ name: 'baked potato soup',
+ ingredients: 'yukon gold potatoes, cream, bacon, chives, cheese',
},
{
- "name": "winter salad",
- "ingredients": "mixed greens, apple, cranberry, walnut, cranberry vinaigrette",
+ name: 'winter salad',
+ ingredients:
+ 'mixed greens, apple, cranberry, walnut, cranberry vinaigrette',
},
{
- "name": "duck a l'orange",
- "ingredients": "roast duck, orange pan sauce, porcini mushroom risotto, baked vegetables",
+ name: "duck a l'orange",
+ ingredients:
+ 'roast duck, orange pan sauce, porcini mushroom risotto, baked vegetables',
},
{
- "name": "dessert",
- "ingredients": "creme brulee, assorted treats"
- }
+ name: 'dessert',
+ ingredients: 'creme brulee, assorted treats',
+ },
],
- "disclaimer": "all items are gluten-free, however some may contain dairy products"
+ disclaimer:
+ 'all items are gluten-free, however some may contain dairy products',
}
diff --git a/src/routes/+layout.js b/src/routes/+layout.js
index 67f54db..d3eb8c5 100644
--- a/src/routes/+layout.js
+++ b/src/routes/+layout.js
@@ -2,6 +2,6 @@ export const load = ({ url }) => {
const currentRoute = url.pathname
return {
- currentRoute
+ currentRoute,
}
}
diff --git a/src/routes/api/gallery/[slug].json/+server.js b/src/routes/api/gallery/[slug].json/+server.js
index b071857..247ee28 100644
--- a/src/routes/api/gallery/[slug].json/+server.js
+++ b/src/routes/api/gallery/[slug].json/+server.js
@@ -1,20 +1,20 @@
-import { getContent } from '$lib/content';
-import { error } from '@sveltejs/kit';
+import { getContent } from '$lib/content'
+import { error } from '@sveltejs/kit'
/**
* @type {import('@sveltejs/kit').RequestHandler}
*/
export async function GET({ params }) {
- const { slug } = params;
- let data;
- try {
- data = await getContent(slug);
- return new Response(JSON.stringify(data), {
- headers: {
- 'Cache-Control': `max-age=0, s-maxage=${60}` // 1 minute.. for now
- }
- });
- } catch (err) {
- throw error(404, err.message);
- }
+ const { slug } = params
+ let data
+ try {
+ data = await getContent(slug)
+ return new Response(JSON.stringify(data), {
+ headers: {
+ 'Cache-Control': `max-age=0, s-maxage=${60}`, // 1 minute.. for now
+ },
+ })
+ } catch (err) {
+ throw error(404, err.message)
+ }
}
diff --git a/src/routes/api/getContent/[slug].json/+server.js b/src/routes/api/getContent/[slug].json/+server.js
index b071857..247ee28 100644
--- a/src/routes/api/getContent/[slug].json/+server.js
+++ b/src/routes/api/getContent/[slug].json/+server.js
@@ -1,20 +1,20 @@
-import { getContent } from '$lib/content';
-import { error } from '@sveltejs/kit';
+import { getContent } from '$lib/content'
+import { error } from '@sveltejs/kit'
/**
* @type {import('@sveltejs/kit').RequestHandler}
*/
export async function GET({ params }) {
- const { slug } = params;
- let data;
- try {
- data = await getContent(slug);
- return new Response(JSON.stringify(data), {
- headers: {
- 'Cache-Control': `max-age=0, s-maxage=${60}` // 1 minute.. for now
- }
- });
- } catch (err) {
- throw error(404, err.message);
- }
+ const { slug } = params
+ let data
+ try {
+ data = await getContent(slug)
+ return new Response(JSON.stringify(data), {
+ headers: {
+ 'Cache-Control': `max-age=0, s-maxage=${60}`, // 1 minute.. for now
+ },
+ })
+ } catch (err) {
+ throw error(404, err.message)
+ }
}
diff --git a/src/routes/api/listContent.json/+server.js b/src/routes/api/listContent.json/+server.js
index f855d3f..3e44509 100644
--- a/src/routes/api/listContent.json/+server.js
+++ b/src/routes/api/listContent.json/+server.js
@@ -1,16 +1,16 @@
-import { listContentFromIssues } from '$lib/content';
+import { listContentFromIssues } from '$lib/content'
/**
* @type {import('./$types').RequestHandler}
*/
export async function GET({ setHeaders }) {
- const list = await listContentFromIssues('Published');
- setHeaders({
- 'Cache-Control': `max-age=0, s-maxage=${60}` // 1 minute.. for now
- });
- return new Response(JSON.stringify(list), {
- headers: {
- 'content-type': 'application/json; charset=utf-8'
- }
- });
+ const list = await listContentFromIssues('Published')
+ setHeaders({
+ 'Cache-Control': `max-age=0, s-maxage=${60}`, // 1 minute.. for now
+ })
+ return new Response(JSON.stringify(list), {
+ headers: {
+ 'content-type': 'application/json; charset=utf-8',
+ },
+ })
}
diff --git a/src/routes/api/listGallery.json/+server.js b/src/routes/api/listGallery.json/+server.js
index 6e8ed29..d027d0e 100644
--- a/src/routes/api/listGallery.json/+server.js
+++ b/src/routes/api/listGallery.json/+server.js
@@ -1,17 +1,17 @@
-import { listContentFromIssues } from '$lib/content';
+import { listContentFromIssues } from '$lib/content'
/**
* @type {import('./$types').RequestHandler}
*/
export async function GET({ setHeaders }) {
- const list = await listContentFromIssues('Gallery');
+ const list = await listContentFromIssues('Gallery')
- setHeaders({
- 'Cache-Control': `max-age=0, s-maxage=${60}` // 1 minute.. for now
- });
- return new Response(JSON.stringify(list), {
- headers: {
- 'content-type': 'application/json; charset=utf-8'
- }
- });
+ setHeaders({
+ 'Cache-Control': `max-age=0, s-maxage=${60}`, // 1 minute.. for now
+ })
+ return new Response(JSON.stringify(list), {
+ headers: {
+ 'content-type': 'application/json; charset=utf-8',
+ },
+ })
}
diff --git a/src/routes/api/work/[slug].json/+server.js b/src/routes/api/work/[slug].json/+server.js
index c45a4ae..439c9b4 100644
--- a/src/routes/api/work/[slug].json/+server.js
+++ b/src/routes/api/work/[slug].json/+server.js
@@ -1,17 +1,19 @@
-import { error } from '@sveltejs/kit';
-import { fetchMarkdownPost } from '$lib/localContent';
+import { error } from '@sveltejs/kit'
+import { fetchMarkdownPost } from '$lib/localContent'
/**
* @type {import('@sveltejs/kit').RequestHandler}
*/
export async function GET({ params }) {
- const { slug } = params;
- let data;
- data = await fetchMarkdownPost(slug).catch(err => new Response(err.message, { status: 404 }));
+ const { slug } = params
+ let data
+ data = await fetchMarkdownPost(slug).catch(
+ (err) => new Response(err.message, { status: 404 })
+ )
- return new Response(JSON.stringify(data), {
- headers: {
- 'Cache-Control': `max-age=0, s-maxage=${60}` // 1 minute.. for now
- }
- });
+ return new Response(JSON.stringify(data), {
+ headers: {
+ 'Cache-Control': `max-age=0, s-maxage=${60}`, // 1 minute.. for now
+ },
+ })
}
diff --git a/src/routes/rss.xml/+server.js b/src/routes/rss.xml/+server.js
index aa9c818..abc8a6f 100644
--- a/src/routes/rss.xml/+server.js
+++ b/src/routes/rss.xml/+server.js
@@ -1,44 +1,49 @@
-import RSS from 'rss';
-import { SITE_TITLE, SITE_URL } from '$lib/siteConfig';
-import { remark } from 'remark';
-import remarkHTML from 'remark-html';
-import { listContentFromIssues } from '$lib/content';
+import RSS from 'rss'
+import { SITE_TITLE, SITE_URL } from '$lib/siteConfig'
+import { remark } from 'remark'
+import remarkHTML from 'remark-html'
+import { listContentFromIssues } from '$lib/content'
// Reference: https://github.com/sveltejs/kit/blob/master/examples/hn.svelte.dev/src/routes/%5Blist%5D/rss.js
/** @type {import('@sveltejs/kit').RequestHandler} */
export async function GET({ fetch }) {
- const feed = new RSS({
- title: SITE_TITLE + ' RSS Feed',
- site_url: SITE_URL,
- feed_url: SITE_URL + '/rss.xml'
- });
-
- const allBlogs = await listContentFromIssues('Published');
- allBlogs.forEach((post) => {
- // extract HTML from markdown
- const htmlDescription = remark()
- .use(remarkHTML)
- .processSync(post.description)
-
- feed.item({
- title: post.title,
- url: SITE_URL + `/${post.slug}`,
- date: post.date,
- description: htmlDescription.toString()
- });
- });
-
- // inject our custom rss stylesheet
- return new Response(feed.xml({ indent: true }).replace(
- ``,
- ``
- ), {
- headers: {
- 'Cache-Control': `public, max-age=${86400}`, // 24 hours
- 'Content-Type': 'application/xml; charset=utf-8', // not application/rss+xml
- 'x-content-type-options': 'nosniff'
- }
- });
+ const feed = new RSS({
+ title: SITE_TITLE + ' RSS Feed',
+ site_url: SITE_URL,
+ feed_url: SITE_URL + '/rss.xml',
+ })
+
+ const allBlogs = await listContentFromIssues('Published')
+ allBlogs.forEach((post) => {
+ // extract HTML from markdown
+ const htmlDescription = remark()
+ .use(remarkHTML)
+ .processSync(post.description)
+
+ feed.item({
+ title: post.title,
+ url: SITE_URL + `/${post.slug}`,
+ date: post.date,
+ description: htmlDescription.toString(),
+ })
+ })
+
+ // inject our custom rss stylesheet
+ return new Response(
+ feed
+ .xml({ indent: true })
+ .replace(
+ ``,
+ ``
+ ),
+ {
+ headers: {
+ 'Cache-Control': `public, max-age=${86400}`, // 24 hours
+ 'Content-Type': 'application/xml; charset=utf-8', // not application/rss+xml
+ 'x-content-type-options': 'nosniff',
+ },
+ }
+ )
}
// misc notes for future users
diff --git a/src/routes/sitemap.xml/+server.js b/src/routes/sitemap.xml/+server.js
index c933372..66500a7 100644
--- a/src/routes/sitemap.xml/+server.js
+++ b/src/routes/sitemap.xml/+server.js
@@ -1,24 +1,29 @@
-import { SITE_URL } from '$lib/siteConfig';
-import { listContentFromIssues } from '$lib/content';
+import { SITE_URL } from '$lib/siteConfig'
+import { listContentFromIssues } from '$lib/content'
import { fetchMarkdownPosts } from '$lib/localContent'
/** @type {import('@sveltejs/kit').RequestHandler} */
export async function GET({ fetch }) {
- const posts = await listContentFromIssues('Published');
- const galleries = await listContentFromIssues('Gallery');
+ const posts = await listContentFromIssues('Published')
+ const galleries = await listContentFromIssues('Gallery')
const projects = await fetchMarkdownPosts()
- const pages = ['about', 'resume', 'blogroll', 'christmas', 'blog', 'work'];
- const body = sitemap(posts, projects, pages, galleries);
+ const pages = ['about', 'resume', 'blogroll', 'christmas', 'blog', 'work']
+ const body = sitemap(posts, projects, pages, galleries)
- return new Response(body, {
- headers: {
+ return new Response(body, {
+ headers: {
'Cache-Control': `public, max-age=${86400}`, // 24 hours
- 'Content-Type': 'application/xml'
- }
- });
+ 'Content-Type': 'application/xml',
+ },
+ })
}
-const sitemap = (posts, projects, pages, galleries) => `
+const sitemap = (
+ posts,
+ projects,
+ pages,
+ galleries
+) => `
-
+
+