({date.slice(0, 4)})
diff --git a/src/lib/components/Toc.svelte b/src/lib/components/Toc.svelte
new file mode 100644
index 0000000..94e05cb
--- /dev/null
+++ b/src/lib/components/Toc.svelte
@@ -0,0 +1,58 @@
+
+
+
+{#if Object.values($tocStore.items).length && Object.values($tocStore.items).length > 1}
+
+
+
+
+
+
+ {#each Object.values($tocStore.items) as { id, text, element }}
+ -
+
+ {text}
+
+
+ {/each}
+
+
+{/if}
+
+
diff --git a/src/lib/content.js b/src/lib/content.js
index 16fce4f..17ea5bd 100644
--- a/src/lib/content.js
+++ b/src/lib/content.js
@@ -112,7 +112,7 @@ function parseIssue(issue, label) {
...base,
alt: data.alt,
images: data.images,
- warn: data.warn || false
+ warn: data.warn || false,
}
break
case 'Published':
diff --git a/src/lib/loadUtterances.js b/src/lib/loadUtterances.js
index 19aedf1..efae1fe 100644
--- a/src/lib/loadUtterances.js
+++ b/src/lib/loadUtterances.js
@@ -1,57 +1,55 @@
-
// this is an action that loads utterances comments when the element is in view
// so as not to incur the JS cost upfront if the person never scrolls down to the comments
// https://svelte.dev/repl/c6a402704224403f96a3db56c2f48dfc?version=3.55.1
-import { GH_USER_REPO } from "$lib/siteConfig";
+import { GH_USER_REPO } from '$lib/siteConfig'
/** @type any */
-let intersectionObserver;
+let intersectionObserver
let hasLoaded = false
export function injectScript(element, number) {
// have to do this because direct injection using @html doesnt work
// adapted from https://github.com/utterance/utterances/issues/161#issuecomment-550991248
- const scriptElem = document.createElement("script");
- scriptElem.src = "https://utteranc.es/client.js";
- scriptElem.async = true;
- scriptElem.crossOrigin = "anonymous";
- scriptElem.setAttribute("repo", GH_USER_REPO);
- scriptElem.setAttribute("issue-number", number);
- const theme = document.documentElement.classList.contains('dark') ? 'github-dark-orange' : 'boxy-light';
- scriptElem.setAttribute("theme", theme);
+ const scriptElem = document.createElement('script')
+ scriptElem.src = 'https://utteranc.es/client.js'
+ scriptElem.async = true
+ scriptElem.crossOrigin = 'anonymous'
+ scriptElem.setAttribute('repo', GH_USER_REPO)
+ scriptElem.setAttribute('issue-number', number)
+ const theme = document.documentElement.classList.contains('dark')
+ ? 'github-dark-orange'
+ : 'boxy-light'
+ scriptElem.setAttribute('theme', theme)
// replace all contents of element and append script
- element.innerHTML = "";
- element.appendChild(scriptElem);
+ element.innerHTML = ''
+ element.appendChild(scriptElem)
}
export default function viewport(element, { number }) {
-
function ensureIntersectionObserver() {
- if (intersectionObserver) return;
-
- intersectionObserver = new IntersectionObserver(
- (entries) => {
- entries.forEach(entry => {
- if (!hasLoaded && entry.isIntersecting) {
- injectScript(element, number);
- hasLoaded = true
- }
- });
- }
- );
+ if (intersectionObserver) return
+
+ intersectionObserver = new IntersectionObserver((entries) => {
+ entries.forEach((entry) => {
+ if (!hasLoaded && entry.isIntersecting) {
+ injectScript(element, number)
+ hasLoaded = true
+ }
+ })
+ })
}
- ensureIntersectionObserver();
+ ensureIntersectionObserver()
- intersectionObserver.observe(element);
+ intersectionObserver.observe(element)
return {
destroy() {
hasLoaded = false
- intersectionObserver.unobserve(element);
- }
+ intersectionObserver.unobserve(element)
+ },
}
}
diff --git a/src/lib/localContent.js b/src/lib/localContent.js
index 984661a..20724da 100644
--- a/src/lib/localContent.js
+++ b/src/lib/localContent.js
@@ -4,7 +4,7 @@ let localContent = []
// fetch all markdown posts and shape into item with metadata
export const fetchMarkdownPosts = async () => {
- const allPostFiles = import.meta.glob('$lib/content/work/*.svx')
+ const allPostFiles = import.meta.glob('./../content/work/*.svx')
const iterablePostFiles = Object.entries(allPostFiles)
const allPosts = await Promise.all(
diff --git a/src/lib/rehype-wrap-img.js b/src/lib/rehype-wrap-img.js
index 0bb6d88..d5b4175 100644
--- a/src/lib/rehype-wrap-img.js
+++ b/src/lib/rehype-wrap-img.js
@@ -10,7 +10,12 @@ export default function rehypeZoomImages(options = { selector: 'img' }) {
const label = fromSelector('label')
const checkbox = fromSelector('input[type="checkbox"]')
- node.properties.loading = "lazy"
+ node.properties.loading = 'lazy'
+
+ // needs height and width defined for lazy loading
+ node.properties.height = '100%'
+ node.properties.width = '100%'
+ node.properties.class = 'lazy-image'
label.children = [checkbox, node]
wrapper.children = [label]
diff --git a/src/lib/utils.js b/src/lib/utils.js
index 8af3c76..532042c 100644
--- a/src/lib/utils.js
+++ b/src/lib/utils.js
@@ -9,7 +9,7 @@ import rehypeSlug from 'rehype-slug'
import rehypeAutoLink from 'rehype-autolink-headings'
import rehypeZoomImages from './rehype-wrap-img.js'
-const remarkPlugins = [ remarkUnwrapImages ]
+const remarkPlugins = [remarkUnwrapImages]
const rehypePlugins = [
rehypeStringify,
rehypeSlug,
@@ -180,8 +180,8 @@ export async function formatContent(content) {
// https://github.com/pngwn/MDsveX/issues/392
.replace(/>{@html ``}<\/pre>/g, '')
- // lazy load images
- // .replace(/![]()
about.
- Thanks for stopping by, check out the links that work. ✌️
+ Thanks for stopping by, check out the links that work. ✌️
diff --git a/src/routes/(main)/gallery/+page.svelte b/src/routes/(main)/gallery/+page.svelte
index dec5852..85cf725 100644
--- a/src/routes/(main)/gallery/+page.svelte
+++ b/src/routes/(main)/gallery/+page.svelte
@@ -9,12 +9,12 @@
@@ -32,14 +32,14 @@
{#each items as trip}
-
-
- 
+
+
+
{'>> ' + trip.description + ' <<'}
{#if trip.title === 'Japan'}
- The above link has >150 MB worth of images. Please be on wifi.
+ The above link has >500 MB worth of images. Please be on wifi.
{/if}
{/each}
@@ -52,8 +52,9 @@
diff --git a/src/routes/(main)/gallery/[slug]/+page.svelte b/src/routes/(main)/gallery/[slug]/+page.svelte
index 9f08d74..16a4c2c 100644
--- a/src/routes/(main)/gallery/[slug]/+page.svelte
+++ b/src/routes/(main)/gallery/[slug]/+page.svelte
@@ -3,6 +3,11 @@
import { TWITTER_ID, SITE_URL } from '$lib/siteConfig'
import Comments from '$lib/components/Comments.svelte'
import 'prism-themes/themes/prism-shades-of-purple.min.css'
+ import { toc, createTocStore } from '@svelte-put/toc';
+ import Toc from '$lib/components/Toc.svelte';
+
+ // table of contents
+ const tocStore = createTocStore();
/** @type {import('./$types').PageData} */
export let data
@@ -47,19 +52,23 @@
Back
+
+
+
{#if json.title}
-
+
{json.title}
- ({json.date.slice(0, 4)})
+ ({json.date.slice(0, 4)})
{/if}
diff --git a/src/tailwind.css b/src/tailwind.css
index 9a982d6..2ff2b5d 100644
--- a/src/tailwind.css
+++ b/src/tailwind.css
@@ -121,9 +121,9 @@
/* filters on /blog page */
.filter {
@apply m-1 inline-block whitespace-nowrap rounded rounded-md px-4 py-2;
- @apply border-secondary bg-alternate text-secondary font-bold;
+ @apply border-accent bg-gray-200 text-gray-900 font-bold;
@apply dark:border-slate-600 dark:bg-gray-800 dark:text-gray-100;
- @apply ring-secondary transition-all duration-200 ease-in-out hover:ring-2;
+ @apply ring-accent transition-all duration-200 ease-in-out hover:ring-2;
}
.activefilter {
@apply border-secondary bg-accent text-orange-100;
@@ -162,27 +162,31 @@
}
/* zoomable images */
-.zoom input[type=checkbox] {
- display: none
+.zoom input[type='checkbox'] {
+ display: none;
}
.zoom img {
transition: transform 0.25s ease;
- cursor: zoom-in
+ cursor: zoom-in;
}
-.zoom input[type=checkbox]:checked~img {
+.zoom input[type='checkbox']:checked ~ img {
transform: scale(1.65);
- cursor: zoom-out
+ cursor: zoom-out;
+}
+
+.lazy-image {
+ @apply bg-gray-600;
}
.emoji {
display: inline-block;
cursor: pointer;
- transition: transform .2s;
+ transition: transform 0.2s;
}
.emoji:hover {
- transform: scale(3);
+ transform: scale(2);
}
/*