cdransf/coryd.dev-eleventy
Archived
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: link-peek component

Browse source
This commit is contained in:
Cory Dransfeldt 2024-04-12 09:17:52 -07:00
parent 1f25a4df35
commit 67693635d8
No known key found for this signature in database
12 changed files with 79 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
.eleventy.js
View file

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

6
package-lock.json generated
View file

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

3
package.json
View file

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

20
src/_includes/partials/link-peek.liquid Normal file
View file

@ -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>

2
src/assets/styles/components/banners.css
View file

@ -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 {

2
src/assets/styles/components/forms.css
View file

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

36
src/assets/styles/components/link-peek.css Normal file
View file

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

4
src/assets/styles/components/media-grid.css
View file

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

2
src/assets/styles/components/track-chart.css
View file

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

4
src/assets/styles/index.css
View file

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

4
src/assets/styles/plugins/prism.css
View file

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