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
Download patch file Download diff file Expand all files Collapse all files

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

6
src/posts/2024/enhancing-pagination-with-a-page-selector.md
View file

@ -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 `<option>` node for the current page.
Within the `change` event listener I check whether we've extracted a url segment *and* that the last segment is a valid number — if not, we add a new numeric segment. If it is numeric, we replace it with the new page number. Finally, we have special handling for the root section — because my first page is at `/` and the second is at `/1/` we need to correctly navigate the user should the pageNumber be `0`.
Within the `change` event listener I check whether we've extracted a url segment *and* that the last segment is a valid number — if not, we add a new numeric segment. If it is numeric, we replace it with the new page number. Finally, we have special handling for the root section — because my first page is at `/` and the second is at `/1/` we need to correctly navigate the user should the pageNumber be `0`.
With that, we have quicker and more convenient page navigation for users that have JavaScript enabled and a handy page count for users that have disabled JavaScript in their browser.
With that, we have quicker and more convenient page navigation for users that have JavaScript enabled and a handy page count for users that have disabled JavaScript in their browser.
{% render "partials/banners/npm.liquid", url: 'https://www.npmjs.com/package/@cdransf/select-pagination', command: 'npm i @cdransf/select-pagination' %}
{% render "partials/banners/npm.liquid", url: 'https://www.npmjs.com/package/@cdransf/select-pagination', command: 'npm i @cdransf/select-pagination' %}