feat: link-peek component

.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)

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",

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",

src/_includes/partials/link-peek.liquid

@@ -0,0 +1,20 @@
+{% capture css %}
+  {% render "../../assets/styles/components/link-peek.css" %}
+{% endcapture %}
+<style>{{ css }}</style>
+<script type="module" src="/assets/scripts/components/link-peek.js"></script>
+<template id="link-peek-template">
+  <figure>
+    <figcaption>
+      <a data-key="data.title, link"></a>
+      <p data-key="data.description"></p>
+      <img data-key="data.logo.url" />
+      <small data-key="data.publisher"></small>
+    </figcaption>
+    <img data-key="data.image.url" />
+  </figure>
+</template>
+
+<link-peek api="https://api.microlink.io/?url={{ url }}">
+  <a href="{{ url }}">{{ title }}</a>
+</link-peek>

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 {

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);

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);
+}

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;

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,

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;
 }
 

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;
 }