From 9c13d3f4d9c3549ff2df3f6ece16a775b94d0d2b Mon Sep 17 00:00:00 2001 From: Tanner Heffner Date: Thu, 25 Jan 2024 23:39:40 -0800 Subject: [PATCH 1/6] fix lazy load, move content folder --- src/{lib => }/content/work/aj.svx | 0 src/{lib => }/content/work/arsenal.svx | 0 src/{lib => }/content/work/blink.svx | 0 src/{lib => }/content/work/burrito.svx | 0 src/{lib => }/content/work/ccf.svx | 0 src/{lib => }/content/work/dieter.svx | 0 src/{lib => }/content/work/google.svx | 0 src/{lib => }/content/work/greenhouse.svx | 0 src/{lib => }/content/work/mbr.svx | 0 src/{lib => }/content/work/mskcc.svx | 0 src/{lib => }/content/work/pinterest.svx | 0 src/{lib => }/content/work/smoker.svx | 0 src/{lib => }/content/work/twitter.svx | 0 src/{lib => }/content/work/uarts.svx | 0 src/lib/localContent.js | 2 +- src/lib/rehype-wrap-img.js | 5 +++++ src/routes/(main)/gallery/+page.svelte | 8 +++----- src/tailwind.css | 4 ++++ 18 files changed, 13 insertions(+), 6 deletions(-) rename src/{lib => }/content/work/aj.svx (100%) rename src/{lib => }/content/work/arsenal.svx (100%) rename src/{lib => }/content/work/blink.svx (100%) rename src/{lib => }/content/work/burrito.svx (100%) rename src/{lib => }/content/work/ccf.svx (100%) rename src/{lib => }/content/work/dieter.svx (100%) rename src/{lib => }/content/work/google.svx (100%) rename src/{lib => }/content/work/greenhouse.svx (100%) rename src/{lib => }/content/work/mbr.svx (100%) rename src/{lib => }/content/work/mskcc.svx (100%) rename src/{lib => }/content/work/pinterest.svx (100%) rename src/{lib => }/content/work/smoker.svx (100%) rename src/{lib => }/content/work/twitter.svx (100%) rename src/{lib => }/content/work/uarts.svx (100%) diff --git a/src/lib/content/work/aj.svx b/src/content/work/aj.svx similarity index 100% rename from src/lib/content/work/aj.svx rename to src/content/work/aj.svx diff --git a/src/lib/content/work/arsenal.svx b/src/content/work/arsenal.svx similarity index 100% rename from src/lib/content/work/arsenal.svx rename to src/content/work/arsenal.svx diff --git a/src/lib/content/work/blink.svx b/src/content/work/blink.svx similarity index 100% rename from src/lib/content/work/blink.svx rename to src/content/work/blink.svx diff --git a/src/lib/content/work/burrito.svx b/src/content/work/burrito.svx similarity index 100% rename from src/lib/content/work/burrito.svx rename to src/content/work/burrito.svx diff --git a/src/lib/content/work/ccf.svx b/src/content/work/ccf.svx similarity index 100% rename from src/lib/content/work/ccf.svx rename to src/content/work/ccf.svx diff --git a/src/lib/content/work/dieter.svx b/src/content/work/dieter.svx similarity index 100% rename from src/lib/content/work/dieter.svx rename to src/content/work/dieter.svx diff --git a/src/lib/content/work/google.svx b/src/content/work/google.svx similarity index 100% rename from src/lib/content/work/google.svx rename to src/content/work/google.svx diff --git a/src/lib/content/work/greenhouse.svx b/src/content/work/greenhouse.svx similarity index 100% rename from src/lib/content/work/greenhouse.svx rename to src/content/work/greenhouse.svx diff --git a/src/lib/content/work/mbr.svx b/src/content/work/mbr.svx similarity index 100% rename from src/lib/content/work/mbr.svx rename to src/content/work/mbr.svx diff --git a/src/lib/content/work/mskcc.svx b/src/content/work/mskcc.svx similarity index 100% rename from src/lib/content/work/mskcc.svx rename to src/content/work/mskcc.svx diff --git a/src/lib/content/work/pinterest.svx b/src/content/work/pinterest.svx similarity index 100% rename from src/lib/content/work/pinterest.svx rename to src/content/work/pinterest.svx diff --git a/src/lib/content/work/smoker.svx b/src/content/work/smoker.svx similarity index 100% rename from src/lib/content/work/smoker.svx rename to src/content/work/smoker.svx diff --git a/src/lib/content/work/twitter.svx b/src/content/work/twitter.svx similarity index 100% rename from src/lib/content/work/twitter.svx rename to src/content/work/twitter.svx diff --git a/src/lib/content/work/uarts.svx b/src/content/work/uarts.svx similarity index 100% rename from src/lib/content/work/uarts.svx rename to src/content/work/uarts.svx 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..9912e6c 100644 --- a/src/lib/rehype-wrap-img.js +++ b/src/lib/rehype-wrap-img.js @@ -12,6 +12,11 @@ export default function rehypeZoomImages(options = { selector: 'img' }) { 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] parent.children[i] = wrapper diff --git a/src/routes/(main)/gallery/+page.svelte b/src/routes/(main)/gallery/+page.svelte index dec5852..d068435 100644 --- a/src/routes/(main)/gallery/+page.svelte +++ b/src/routes/(main)/gallery/+page.svelte @@ -33,13 +33,13 @@ {#each items as trip} - - {trip.alt} + + {trip.alt} {'>> ' + trip.description + ' <<'} {#if trip.title === 'Japan'} -

The above link has >150 MB worth of images. Please be on wifi.

+

The above link has >400 MB worth of images. Please be on wifi.

{/if} {/each} @@ -52,8 +52,6 @@ diff --git a/src/tailwind.css b/src/tailwind.css index 9a982d6..507a663 100644 --- a/src/tailwind.css +++ b/src/tailwind.css @@ -176,6 +176,10 @@ cursor: zoom-out } +.lazy-image { + @apply bg-gray-600; +} + .emoji { display: inline-block; cursor: pointer; From b8bced6fb1bd748253846fd83a0c1930a9f3da6f Mon Sep 17 00:00:00 2001 From: Tanner Heffner Date: Thu, 25 Jan 2024 23:50:08 -0800 Subject: [PATCH 2/6] bring in toc from swyxkit --- package-lock.json | 17 +++++++ package.json | 1 + src/lib/components/Toc.svelte | 44 +++++++++++++++++++ src/routes/(main)/gallery/[slug]/+page.svelte | 9 +++- 4 files changed, 70 insertions(+), 1 deletion(-) create mode 100644 src/lib/components/Toc.svelte diff --git a/package-lock.json b/package-lock.json index 90de33b..0af3f0e 100644 --- a/package-lock.json +++ b/package-lock.json @@ -22,6 +22,7 @@ }, "devDependencies": { "@resvg/resvg-js": "^2.4.1", + "@svelte-put/toc": "^4.0.0", "@sveltejs/adapter-auto": "^3.1.1", "@sveltejs/adapter-netlify": "^2.0.8", "@sveltejs/kit": "1.27.6", @@ -1185,6 +1186,15 @@ "node": ">= 8.0.0" } }, + "node_modules/@svelte-put/toc": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/@svelte-put/toc/-/toc-4.0.0.tgz", + "integrity": "sha512-Z7iWtG1XMQXaeyzV1PZJ47STaBRGEhbW5EHBZOjcoqIrimBNKhtGMNhfecanFBQZZKblT1BCsq5OfOjf/vpFyQ==", + "dev": true, + "peerDependencies": { + "svelte": "^3.55.0 || ^4.0.0" + } + }, "node_modules/@sveltejs/adapter-auto": { "version": "3.1.1", "resolved": "https://registry.npmjs.org/@sveltejs/adapter-auto/-/adapter-auto-3.1.1.tgz", @@ -9768,6 +9778,13 @@ "string.prototype.codepointat": "^0.2.1" } }, + "@svelte-put/toc": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/@svelte-put/toc/-/toc-4.0.0.tgz", + "integrity": "sha512-Z7iWtG1XMQXaeyzV1PZJ47STaBRGEhbW5EHBZOjcoqIrimBNKhtGMNhfecanFBQZZKblT1BCsq5OfOjf/vpFyQ==", + "dev": true, + "requires": {} + }, "@sveltejs/adapter-auto": { "version": "3.1.1", "resolved": "https://registry.npmjs.org/@sveltejs/adapter-auto/-/adapter-auto-3.1.1.tgz", diff --git a/package.json b/package.json index 5f9d147..f268dc6 100644 --- a/package.json +++ b/package.json @@ -17,6 +17,7 @@ "@sveltejs/adapter-auto": "^3.1.1", "@sveltejs/adapter-netlify": "^2.0.8", "@sveltejs/kit": "1.27.6", + "@svelte-put/toc": "^4.0.0", "@tailwindcss/typography": "^0.5.10", "@typescript-eslint/eslint-plugin": "^4.33.0", "@typescript-eslint/parser": "^4.33.0", diff --git a/src/lib/components/Toc.svelte b/src/lib/components/Toc.svelte new file mode 100644 index 0000000..918bc9f --- /dev/null +++ b/src/lib/components/Toc.svelte @@ -0,0 +1,44 @@ + + + +{#if Object.values($tocStore.items).length && Object.values($tocStore.items).length > 1} +
+ {#if !isOpen} + + {/if} + {#if isOpen} +
    +

    + Table of Contents + +

    + {#each Object.values($tocStore.items) as { id, text }} + +
  • {text}
    • +     + {/each} +
+ {/if} +
+{/if} diff --git a/src/routes/(main)/gallery/[slug]/+page.svelte b/src/routes/(main)/gallery/[slug]/+page.svelte index 9f08d74..640a4d8 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,7 +52,9 @@ Back -
+ +
{#if json.title} From 64ac919150a8e69c766d58c4d7246a5d40c7b4d4 Mon Sep 17 00:00:00 2001 From: Tanner Heffner Date: Fri, 26 Jan 2024 00:31:26 -0800 Subject: [PATCH 3/6] stub out early toc styles --- src/lib/components/Toc.svelte | 17 ++++++++--------- src/routes/(main)/gallery/[slug]/+page.svelte | 1 + 2 files changed, 9 insertions(+), 9 deletions(-) diff --git a/src/lib/components/Toc.svelte b/src/lib/components/Toc.svelte index 918bc9f..059ab45 100644 --- a/src/lib/components/Toc.svelte +++ b/src/lib/components/Toc.svelte @@ -10,12 +10,13 @@ } }) + console.log($tocStore.items) {#if Object.values($tocStore.items).length && Object.values($tocStore.items).length > 1}
{#if !isOpen} {/if} {#if isOpen} -
    -

    - Table of Contents - -

    - {#each Object.values($tocStore.items) as { id, text }} +
      + {#each Object.values($tocStore.items) as { id, text, element }}
    • {text}
      • diff --git a/src/routes/(main)/gallery/[slug]/+page.svelte b/src/routes/(main)/gallery/[slug]/+page.svelte index 640a4d8..3753a55 100644 --- a/src/routes/(main)/gallery/[slug]/+page.svelte +++ b/src/routes/(main)/gallery/[slug]/+page.svelte @@ -57,6 +57,7 @@
      + {#if json.title}

      Date: Fri, 26 Jan 2024 18:48:51 -0800 Subject: [PATCH 4/6] style TOC, update slices for gallery --- src/lib/components/Slice.svelte | 11 +++- src/lib/components/Toc.svelte | 53 ++++++++++++------- src/routes/(main)/gallery/+page.svelte | 13 +++-- src/routes/(main)/gallery/[slug]/+page.svelte | 11 ++-- 4 files changed, 57 insertions(+), 31 deletions(-) diff --git a/src/lib/components/Slice.svelte b/src/lib/components/Slice.svelte index 896cb99..21cf206 100644 --- a/src/lib/components/Slice.svelte +++ b/src/lib/components/Slice.svelte @@ -4,6 +4,13 @@ export let prose = true export let full = false export let warn = false + export let titleLink = true + + let tag = 'a' + + if (titleLink === false) { + tag = 'div' + } let sliceClasses = "slice mb-6 grid w-full grid-cols-4 gap-4 py-8 md:mb-8 md:gap-8 md:py-12 lg:gap-12 xl:gap-16" let slotWrapperClasses = 'w-full md:w-2/3 md:ml-4 lg:ml-12' @@ -24,9 +31,9 @@ {#if title}

      - + {title}{#if warn}*{/if} - + {#if date} ({date.slice(0, 4)}) diff --git a/src/lib/components/Toc.svelte b/src/lib/components/Toc.svelte index 059ab45..94e05cb 100644 --- a/src/lib/components/Toc.svelte +++ b/src/lib/components/Toc.svelte @@ -16,28 +16,43 @@ {#if Object.values($tocStore.items).length && Object.values($tocStore.items).length > 1} {/if} + + diff --git a/src/routes/(main)/gallery/+page.svelte b/src/routes/(main)/gallery/+page.svelte index d068435..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.alt} {'>> ' + trip.description + ' <<'} {#if trip.title === 'Japan'} -

      The above link has >400 MB worth of images. Please be on wifi.

      +

      The above link has >500 MB worth of images. Please be on wifi.

      {/if}       {/each} @@ -54,4 +54,7 @@ max-height: 600px; object-fit: cover; } + .gallery-link:hover { + background-size: 4px 100px; + } diff --git a/src/routes/(main)/gallery/[slug]/+page.svelte b/src/routes/(main)/gallery/[slug]/+page.svelte index 3753a55..16a4c2c 100644 --- a/src/routes/(main)/gallery/[slug]/+page.svelte +++ b/src/routes/(main)/gallery/[slug]/+page.svelte @@ -54,20 +54,21 @@ -
      {#if json.title} -
      +

      {json.title} - ({json.date.slice(0, 4)})

      + ({json.date.slice(0, 4)})
      {/if} From b680d8d1626520644bf480b43b1ab1f6afd1e22c Mon Sep 17 00:00:00 2001 From: Tanner Heffner Date: Fri, 26 Jan 2024 18:51:08 -0800 Subject: [PATCH 5/6] run prettier --- package.json | 4 +-- src/lib/content.js | 2 +- src/lib/loadUtterances.js | 58 ++++++++++++++++++-------------------- src/lib/rehype-wrap-img.js | 8 +++--- src/lib/utils.js | 6 ++-- src/params/string.js | 2 +- src/tailwind.css | 12 ++++---- 7 files changed, 45 insertions(+), 47 deletions(-) diff --git a/package.json b/package.json index f268dc6..d68a890 100644 --- a/package.json +++ b/package.json @@ -9,8 +9,8 @@ "postinstall": "svelte-kit sync", "check": "svelte-check --tsconfig ./tsconfig.json", "check:watch": "svelte-check --tsconfig ./tsconfig.json --watch", - "lint": "prettier --check --plugin-search-dir=. . && eslint --ignore-path .gitignore .", - "format": "prettier --write --plugin-search-dir=. ." + "lint": "prettier --check . && eslint --ignore-path .gitignore .", + "format": "prettier --write ." }, "devDependencies": { "@resvg/resvg-js": "^2.4.1", 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/rehype-wrap-img.js b/src/lib/rehype-wrap-img.js index 9912e6c..d5b4175 100644 --- a/src/lib/rehype-wrap-img.js +++ b/src/lib/rehype-wrap-img.js @@ -10,12 +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" + 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(/ Date: Fri, 26 Jan 2024 19:29:36 -0800 Subject: [PATCH 6/6] cleanup filter colors, emoji wall space a little bit --- src/lib/components/EmojiWall.svelte | 10 +++++----- src/lib/components/PostItem.svelte | 2 +- src/routes/(main)/+page.svelte | 2 +- src/tailwind.css | 6 +++--- 4 files changed, 10 insertions(+), 10 deletions(-) diff --git a/src/lib/components/EmojiWall.svelte b/src/lib/components/EmojiWall.svelte index ccf664c..7588969 100644 --- a/src/lib/components/EmojiWall.svelte +++ b/src/lib/components/EmojiWall.svelte @@ -1,12 +1,12 @@ -