From 67693635d85c02d759f1072997a6f618055c334b Mon Sep 17 00:00:00 2001 From: Cory Dransfeldt Date: Fri, 12 Apr 2024 09:17:52 -0700 Subject: [PATCH] feat: link-peek component --- .eleventy.js | 3 ++ package-lock.json | 6 ++++ package.json | 3 +- src/_includes/partials/link-peek.liquid | 20 +++++++++++ src/assets/styles/components/banners.css | 2 +- src/assets/styles/components/forms.css | 2 +- src/assets/styles/components/link-peek.css | 36 +++++++++++++++++++ src/assets/styles/components/media-grid.css | 4 +-- src/assets/styles/components/track-chart.css | 2 +- src/assets/styles/index.css | 4 +-- src/assets/styles/plugins/prism.css | 4 +-- ...hancing-pagination-with-a-page-selector.md | 6 ++-- 12 files changed, 79 insertions(+), 13 deletions(-) create mode 100644 src/_includes/partials/link-peek.liquid create mode 100644 src/assets/styles/components/link-peek.css diff --git a/.eleventy.js b/.eleventy.js index 795904cd..bf57cfa6 100644 --- a/.eleventy.js +++ b/.eleventy.js @@ -73,6 +73,9 @@ export default async function (eleventyConfig) { eleventyConfig.addPassthroughCopy({ 'node_modules/youtube-video-element/youtube-video-element.js': 'assets/scripts/components/youtube-video-element.js' }) + eleventyConfig.addPassthroughCopy({ + 'node_modules/@daviddarnes/link-peek/link-peek.js': 'assets/scripts/components/link-peek.js' + }) // enable merging of tags eleventyConfig.setDataDeepMerge(true) diff --git a/package-lock.json b/package-lock.json index af28e327..54635d55 100644 --- a/package-lock.json +++ b/package-lock.json @@ -12,6 +12,7 @@ "@cdransf/api-text": "^1.2.2", "@cdransf/select-pagination": "^1.0.4", "@cdransf/theme-toggle": "^1.2.3", + "@daviddarnes/link-peek": "^1.0.0", "@daviddarnes/mastodon-post": "^1.1.1", "@remy/webmention": "^1.5.0", "@zachleat/webcare-webshare": "^1.0.3", @@ -1240,6 +1241,11 @@ "resolved": "https://registry.npmjs.org/@cdransf/theme-toggle/-/theme-toggle-1.2.3.tgz", "integrity": "sha512-K2NniEup/OFgSH+cqG2plY5iPFBevu7mMrz10HL1KzcEulA8AxPyPDcuOAC0Hdt7OpWAIzAk0hB0wvI7g8KW3A==" }, + "node_modules/@daviddarnes/link-peek": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/@daviddarnes/link-peek/-/link-peek-1.0.0.tgz", + "integrity": "sha512-Chix5Lhb/+hLvUkNMCeakP+hojOZ5FhiDxT8uqd0vQMI5jxeATjh/WEMNNH6fR7U7wdJaKa24SKPkWLg8MdIFg==" + }, "node_modules/@daviddarnes/mastodon-post": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/@daviddarnes/mastodon-post/-/mastodon-post-1.2.0.tgz", diff --git a/package.json b/package.json index a4f5eca9..32b775c0 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "coryd.dev", - "version": "9.10.4", + "version": "9.11.4", "description": "The source for my personal site. Built using 11ty.", "type": "module", "scripts": { @@ -22,6 +22,7 @@ "@cdransf/api-text": "^1.2.2", "@cdransf/select-pagination": "^1.0.4", "@cdransf/theme-toggle": "^1.2.3", + "@daviddarnes/link-peek": "^1.0.0", "@daviddarnes/mastodon-post": "^1.1.1", "@remy/webmention": "^1.5.0", "@zachleat/webcare-webshare": "^1.0.3", diff --git a/src/_includes/partials/link-peek.liquid b/src/_includes/partials/link-peek.liquid new file mode 100644 index 00000000..69f8f78a --- /dev/null +++ b/src/_includes/partials/link-peek.liquid @@ -0,0 +1,20 @@ +{% capture css %} + {% render "../../assets/styles/components/link-peek.css" %} +{% endcapture %} + + + + + + {{ title }} + \ No newline at end of file diff --git a/src/assets/styles/components/banners.css b/src/assets/styles/components/banners.css index 62ad7335..f5a818e5 100644 --- a/src/assets/styles/components/banners.css +++ b/src/assets/styles/components/banners.css @@ -2,7 +2,7 @@ margin: var(--sizing-base) 0; padding: var(--sizing-md); border: 1px solid; - border-radius: var(--rounded-lg); + border-radius: var(--sizing-xs); } .banner.old-post { diff --git a/src/assets/styles/components/forms.css b/src/assets/styles/components/forms.css index 087452b9..69586b66 100644 --- a/src/assets/styles/components/forms.css +++ b/src/assets/styles/components/forms.css @@ -14,7 +14,7 @@ textarea { padding: var(--sizing-sm); font-size: var(--font-size-base); width: 100%; - border-radius: var(--rounded-md); + border-radius: var(--sizing-xs); outline: none; margin-bottom: var(--sizing-base); font-weight: var(--font-weight-base); diff --git a/src/assets/styles/components/link-peek.css b/src/assets/styles/components/link-peek.css new file mode 100644 index 00000000..fb7e0f24 --- /dev/null +++ b/src/assets/styles/components/link-peek.css @@ -0,0 +1,36 @@ +link-peek:defined a:not([data-key]) { + display: none; +} + +link-peek:defined figure { + position: relative; + display: grid; + grid-template-columns: repeat(auto-fit, minmax(300px, max-content)); + gap: 1rem; + max-inline-size: max-content; + border: 1px solid var(--gray-light); + border-radius: var(--sizing-xs); + padding: 1rem; + margin: 0 0 var(--sizing-base); + font-size: var(--font-size-sm); + line-height: var(--line-height-sm); +} + +link-peek:defined a[data-key="data.title.link"], +link-peek:defined figure p { + font-size: var(--font-size-sm); + line-height: var(--line-height-sm); +} + +link-peek img[data-key="data.logo.url"] { + margin-right: var(--sizing-xs); + inline-size: var(--sizing-lg); + block-size: var(--sizing-lg); + vertical-align: middle; +} + +link-peek img[data-key="data.image.url"] { + max-inline-size: 100%; + block-size: auto; + border-radius: var(--sizing-xs); +} \ No newline at end of file diff --git a/src/assets/styles/components/media-grid.css b/src/assets/styles/components/media-grid.css index 092f08d5..bc7af3d6 100644 --- a/src/assets/styles/components/media-grid.css +++ b/src/assets/styles/components/media-grid.css @@ -49,7 +49,7 @@ content: ''; top: 0; left: 1px; - border-radius: calc(var(--rounded-md) * .85); + border-radius: calc(var(--sizing-xs) * .85); box-shadow: inset 0 -70px 50px -40px #000; width: 100%; height: calc(100% - 1px); @@ -84,7 +84,7 @@ .media__grid img { border: 1px solid var(--accent-color); - border-radius: var(--rounded-md); + border-radius: var(--sizing-xs); transition-property: border-color; transition-timing-function: var(--transition-ease-in-out); transition-duration: 300ms; diff --git a/src/assets/styles/components/track-chart.css b/src/assets/styles/components/track-chart.css index 8465ccea..878b53d5 100644 --- a/src/assets/styles/components/track-chart.css +++ b/src/assets/styles/components/track-chart.css @@ -51,7 +51,7 @@ .track__chart--item img { border: 1px solid var(--accent-color); - border-radius: var(--rounded-md); + border-radius: var(--sizing-xs); } .track__chart--item img, diff --git a/src/assets/styles/index.css b/src/assets/styles/index.css index 9a9df638..7fc7262f 100644 --- a/src/assets/styles/index.css +++ b/src/assets/styles/index.css @@ -118,7 +118,7 @@ table { max-width: fit-content; margin: 0 auto; white-space: nowrap; - border-radius: var(--rounded-lg); + border-radius: var(--sizing-xs); border: 1px solid var(--gray-light); } @@ -375,7 +375,7 @@ li { /* images */ .image__banner { border: 1px solid var(--accent-color); - border-radius: var(--rounded-lg); + border-radius: var(--sizing-xs); height: auto; } diff --git a/src/assets/styles/plugins/prism.css b/src/assets/styles/plugins/prism.css index b520042a..8a8a78c8 100644 --- a/src/assets/styles/plugins/prism.css +++ b/src/assets/styles/plugins/prism.css @@ -20,7 +20,7 @@ pre[class*="language-"] { padding: 1rem; margin: 1.25rem 0; overflow: auto; - border-radius: var(--rounded-md); + border-radius: var(--sizing-xs); } :not(pre) > code[class*="language-"], @@ -31,7 +31,7 @@ pre[class*="language-"] { /* Inline code */ :not(pre) > code[class*="language-"] { padding: 0.1rem; - border-radius: var(--rounded-md); + border-radius: var(--sizing-xs); white-space: normal; } diff --git a/src/posts/2024/enhancing-pagination-with-a-page-selector.md b/src/posts/2024/enhancing-pagination-with-a-page-selector.md index e2e86ac9..8d127602 100644 --- a/src/posts/2024/enhancing-pagination-with-a-page-selector.md +++ b/src/posts/2024/enhancing-pagination-with-a-page-selector.md @@ -38,8 +38,8 @@ window.onload = () => { We wait for the document to load, select the pagination DOM node, get the current `pathname`, split it at '/' delimited segments, filter empty values and look for a number representing the current page. We then set the `selected` attribute on the appropriate `