chore: convert leading spaces to tabs
This commit is contained in:
18
README.md
18
README.md
@@ -9,15 +9,15 @@ More technical information about this website can be found the website's [coloph
|
||||
Requirement: [Node.js](https://nodejs.org/).
|
||||
|
||||
1. Clone this repository locally
|
||||
```
|
||||
git clone https://git.helenchong.dev/helenchong/helenchong.dev.git
|
||||
```
|
||||
```
|
||||
git clone https://git.helenchong.dev/helenchong/helenchong.dev.git
|
||||
```
|
||||
1. Install dependencies
|
||||
```
|
||||
npm install
|
||||
```
|
||||
```
|
||||
npm install
|
||||
```
|
||||
1. Run the project
|
||||
```
|
||||
npm run start
|
||||
```
|
||||
```
|
||||
npm run start
|
||||
```
|
||||
1. Open http://localhost:8080/ in your browser
|
||||
|
||||
@@ -15,43 +15,43 @@ import filtersConfig from "./src/_config/filters.js";
|
||||
import shortCodesConfig from "./src/_config/shortcodes.js";
|
||||
|
||||
export default function(eleventyConfig) {
|
||||
// ----- Installed Plugins
|
||||
eleventyConfig.addPlugin(InputPathToUrlTransformPlugin);
|
||||
eleventyConfig.addPlugin(pluginEleventyNavigation);
|
||||
eleventyConfig.addPlugin(pluginEmbedEverything, {
|
||||
youtube: {
|
||||
options: {
|
||||
lazy: true,
|
||||
recommendSelfOnly: true,
|
||||
}
|
||||
}
|
||||
});
|
||||
eleventyConfig.addPlugin(pluginSyntaxHighlight, { preAttributes: { tabindex: 0 } });
|
||||
eleventyConfig.addPlugin(pluginWordcount);
|
||||
// ----- Installed Plugins
|
||||
eleventyConfig.addPlugin(InputPathToUrlTransformPlugin);
|
||||
eleventyConfig.addPlugin(pluginEleventyNavigation);
|
||||
eleventyConfig.addPlugin(pluginEmbedEverything, {
|
||||
youtube: {
|
||||
options: {
|
||||
lazy: true,
|
||||
recommendSelfOnly: true,
|
||||
}
|
||||
}
|
||||
});
|
||||
eleventyConfig.addPlugin(pluginSyntaxHighlight, { preAttributes: { tabindex: 0 } });
|
||||
eleventyConfig.addPlugin(pluginWordcount);
|
||||
|
||||
// ----- Custom configurations
|
||||
eleventyConfig.addPlugin(markdownItConfig);
|
||||
eleventyConfig.addPlugin(feedsConfig);
|
||||
eleventyConfig.addPlugin(filesConfig);
|
||||
eleventyConfig.addPlugin(topicsConfig);
|
||||
eleventyConfig.addPlugin(filtersConfig);
|
||||
eleventyConfig.addPlugin(shortCodesConfig);
|
||||
// ----- Custom configurations
|
||||
eleventyConfig.addPlugin(markdownItConfig);
|
||||
eleventyConfig.addPlugin(feedsConfig);
|
||||
eleventyConfig.addPlugin(filesConfig);
|
||||
eleventyConfig.addPlugin(topicsConfig);
|
||||
eleventyConfig.addPlugin(filtersConfig);
|
||||
eleventyConfig.addPlugin(shortCodesConfig);
|
||||
|
||||
// ----- Eleventy bundle plugin
|
||||
eleventyConfig.addBundle("css");
|
||||
eleventyConfig.addBundle("js", { toFileDirectory: "assets/js" });
|
||||
// ----- Eleventy bundle plugin
|
||||
eleventyConfig.addBundle("css");
|
||||
eleventyConfig.addBundle("js", { toFileDirectory: "assets/js" });
|
||||
|
||||
// ----- Vento plugin for Eleventy
|
||||
// Must be loaded after plugins that modify filters
|
||||
eleventyConfig.addPlugin(VentoPlugin, {
|
||||
autotrim: true,
|
||||
});
|
||||
// ----- Vento plugin for Eleventy
|
||||
// Must be loaded after plugins that modify filters
|
||||
eleventyConfig.addPlugin(VentoPlugin, {
|
||||
autotrim: true,
|
||||
});
|
||||
|
||||
return {
|
||||
markdownTemplateEngine: "vto",
|
||||
htmlTemplateEngine: "vto",
|
||||
dir: {
|
||||
input: "src"
|
||||
}
|
||||
};
|
||||
return {
|
||||
markdownTemplateEngine: "vto",
|
||||
htmlTemplateEngine: "vto",
|
||||
dir: {
|
||||
input: "src"
|
||||
}
|
||||
};
|
||||
};
|
||||
|
||||
@@ -1,10 +1,10 @@
|
||||
// Passthrough File Copy
|
||||
export default function(eleventyConfig) {
|
||||
eleventyConfig.addPassthroughCopy("./src/assets/");
|
||||
eleventyConfig.addWatchTarget("./src/assets/");
|
||||
eleventyConfig.addPassthroughCopy({
|
||||
"./src/assets/favicon/favicon.ico": "/favicon.ico",
|
||||
"./src/assets/favicon/apple-touch-icon.png": "/apple-touch-icon.png",
|
||||
"node_modules/@zachleat/details-utils/details-utils.js": "assets/js/details-utils.js",
|
||||
});
|
||||
eleventyConfig.addPassthroughCopy("./src/assets/");
|
||||
eleventyConfig.addWatchTarget("./src/assets/");
|
||||
eleventyConfig.addPassthroughCopy({
|
||||
"./src/assets/favicon/favicon.ico": "/favicon.ico",
|
||||
"./src/assets/favicon/apple-touch-icon.png": "/apple-touch-icon.png",
|
||||
"node_modules/@zachleat/details-utils/details-utils.js": "assets/js/details-utils.js",
|
||||
});
|
||||
}
|
||||
|
||||
@@ -1,25 +1,25 @@
|
||||
import { DateTime } from "luxon";
|
||||
|
||||
export default function(eleventyConfig) {
|
||||
// Filter: Format dates
|
||||
eleventyConfig.addFilter("formatDate", (date) => {
|
||||
const dateFormat = "d LLLL yyyy";
|
||||
if (typeof date === "object") {
|
||||
return DateTime.fromJSDate(date).toFormat(dateFormat);
|
||||
}
|
||||
return DateTime.fromISO(date, { setZone: true }).toFormat(dateFormat);
|
||||
});
|
||||
// Filter: Format dates
|
||||
eleventyConfig.addFilter("formatDate", (date) => {
|
||||
const dateFormat = "d LLLL yyyy";
|
||||
if (typeof date === "object") {
|
||||
return DateTime.fromJSDate(date).toFormat(dateFormat);
|
||||
}
|
||||
return DateTime.fromISO(date, { setZone: true }).toFormat(dateFormat);
|
||||
});
|
||||
|
||||
// Filter: Limit the number of collection items displayed
|
||||
eleventyConfig.addFilter("itemLimit", (array, maximum) => {
|
||||
return array.slice(0, maximum);
|
||||
});
|
||||
// Filter: Limit the number of collection items displayed
|
||||
eleventyConfig.addFilter("itemLimit", (array, maximum) => {
|
||||
return array.slice(0, maximum);
|
||||
});
|
||||
|
||||
// Filter: Collection item count
|
||||
eleventyConfig.addFilter("itemCount", (array) => array.length );
|
||||
// Filter: Collection item count
|
||||
eleventyConfig.addFilter("itemCount", (array) => array.length );
|
||||
|
||||
// Filter: Thousands separator
|
||||
eleventyConfig.addFilter("thousands", (num) => {
|
||||
return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
|
||||
});
|
||||
// Filter: Thousands separator
|
||||
eleventyConfig.addFilter("thousands", (num) => {
|
||||
return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
|
||||
});
|
||||
}
|
||||
|
||||
@@ -13,60 +13,60 @@ import markdownItAttrs from "markdown-it-attrs";
|
||||
import markdownItBracketedSpans from "markdown-it-bracketed-spans";
|
||||
|
||||
export default function(eleventyConfig) {
|
||||
// Installed plugins
|
||||
eleventyConfig.addPlugin(pluginTOC, {
|
||||
tags: ['h2', 'h3', 'h4', 'h5', 'h6'],
|
||||
wrapper: (toc) => {
|
||||
return `<nav class="toc" aria-labelledby="toc-heading">${toc}</nav>`;
|
||||
},
|
||||
});
|
||||
eleventyConfig.addPlugin(embedEverything, { add: ['soundcloud'] });
|
||||
// Installed plugins
|
||||
eleventyConfig.addPlugin(pluginTOC, {
|
||||
tags: ['h2', 'h3', 'h4', 'h5', 'h6'],
|
||||
wrapper: (toc) => {
|
||||
return `<nav class="toc" aria-labelledby="toc-heading">${toc}</nav>`;
|
||||
},
|
||||
});
|
||||
eleventyConfig.addPlugin(embedEverything, { add: ['soundcloud'] });
|
||||
|
||||
// Configure markdown-it-anchor plugins
|
||||
eleventyConfig.setLibrary('md', markdownIt().use(markdownItAnchor))
|
||||
const linkAfterHeader = markdownItAnchor.permalink.linkAfterHeader({
|
||||
class: "heading-anchor",
|
||||
assistiveText: title => `Permalink to section '${title}'`,
|
||||
visuallyHiddenClass: 'visually-hidden',
|
||||
});
|
||||
const markdownItAnchorOptions = {
|
||||
level: [2, 3, 4, 5],
|
||||
slugify: (str) =>
|
||||
slugify(str, {
|
||||
lower: true,
|
||||
strict: true,
|
||||
remove: /["]/g,
|
||||
}),
|
||||
tabIndex: false,
|
||||
permalink(slug, opts, state, idx) {
|
||||
state.tokens.splice(idx, 0,
|
||||
Object.assign(new state.Token("div_open", "div", 1), {
|
||||
// Add class "header-wrapper [h1 or h2 or h3]"
|
||||
attrs: [["class", `heading-wrapper ${state.tokens[idx].tag}`]],
|
||||
block: true,
|
||||
})
|
||||
);
|
||||
// Configure markdown-it-anchor plugins
|
||||
eleventyConfig.setLibrary('md', markdownIt().use(markdownItAnchor))
|
||||
const linkAfterHeader = markdownItAnchor.permalink.linkAfterHeader({
|
||||
class: "heading-anchor",
|
||||
assistiveText: title => `Permalink to section '${title}'`,
|
||||
visuallyHiddenClass: 'visually-hidden',
|
||||
});
|
||||
const markdownItAnchorOptions = {
|
||||
level: [2, 3, 4, 5],
|
||||
slugify: (str) =>
|
||||
slugify(str, {
|
||||
lower: true,
|
||||
strict: true,
|
||||
remove: /["]/g,
|
||||
}),
|
||||
tabIndex: false,
|
||||
permalink(slug, opts, state, idx) {
|
||||
state.tokens.splice(idx, 0,
|
||||
Object.assign(new state.Token("div_open", "div", 1), {
|
||||
// Add class "header-wrapper [h1 or h2 or h3]"
|
||||
attrs: [["class", `heading-wrapper ${state.tokens[idx].tag}`]],
|
||||
block: true,
|
||||
})
|
||||
);
|
||||
|
||||
state.tokens.splice(idx + 4, 0,
|
||||
Object.assign(new state.Token("div_close", "div", -1), {
|
||||
block: true,
|
||||
})
|
||||
);
|
||||
state.tokens.splice(idx + 4, 0,
|
||||
Object.assign(new state.Token("div_close", "div", -1), {
|
||||
block: true,
|
||||
})
|
||||
);
|
||||
|
||||
linkAfterHeader(slug, opts, state, idx + 1);
|
||||
},
|
||||
};
|
||||
linkAfterHeader(slug, opts, state, idx + 1);
|
||||
},
|
||||
};
|
||||
|
||||
/* Markdown Overrides */
|
||||
let markdownLibrary = markdownIt({
|
||||
html: true,
|
||||
linkify: true,
|
||||
})
|
||||
.set({ fuzzyLink: false })
|
||||
.use(markdownItAnchor, markdownItAnchorOptions)
|
||||
.use(markdownItAttrs)
|
||||
.use(markdownItBracketedSpans)
|
||||
/* Markdown Overrides */
|
||||
let markdownLibrary = markdownIt({
|
||||
html: true,
|
||||
linkify: true,
|
||||
})
|
||||
.set({ fuzzyLink: false })
|
||||
.use(markdownItAnchor, markdownItAnchorOptions)
|
||||
.use(markdownItAttrs)
|
||||
.use(markdownItBracketedSpans)
|
||||
|
||||
/* This is the part that tells 11ty to swap to our custom config */
|
||||
eleventyConfig.setLibrary("md", markdownLibrary);
|
||||
/* This is the part that tells 11ty to swap to our custom config */
|
||||
eleventyConfig.setLibrary("md", markdownLibrary);
|
||||
}
|
||||
|
||||
@@ -1,49 +1,49 @@
|
||||
import slugify from "slugify";
|
||||
|
||||
export default function(eleventyConfig) {
|
||||
// Shortcode: Current year
|
||||
eleventyConfig.addShortcode("currentYear", () => `${new Date().getFullYear()}`);
|
||||
// Shortcode: Current year
|
||||
eleventyConfig.addShortcode("currentYear", () => `${new Date().getFullYear()}`);
|
||||
|
||||
// Shortcode: <cite> tag
|
||||
eleventyConfig.addShortcode('cite', (str) => `<cite>${str}</cite>`);
|
||||
// Shortcode: <cite> tag
|
||||
eleventyConfig.addShortcode('cite', (str) => `<cite>${str}</cite>`);
|
||||
|
||||
// Shortcode: Manual heading anchor
|
||||
eleventyConfig.addPairedShortcode('headingAnchor', (title, hLevel, id=slugify(title)) => {
|
||||
return `<div class="heading-wrapper h${hLevel}">
|
||||
<h${hLevel} id="${id}">${title}</h${hLevel}>
|
||||
<a class="heading-anchor" href="#${id}">
|
||||
<span class="visually-hidden">Permalink to '${title}'</span>
|
||||
<span aria-hidden="true">#</span>
|
||||
</a>
|
||||
</div>`;
|
||||
});
|
||||
// Shortcode: Manual heading anchor
|
||||
eleventyConfig.addPairedShortcode('headingAnchor', (title, hLevel, id=slugify(title)) => {
|
||||
return `<div class="heading-wrapper h${hLevel}">
|
||||
<h${hLevel} id="${id}">${title}</h${hLevel}>
|
||||
<a class="heading-anchor" href="#${id}">
|
||||
<span class="visually-hidden">Permalink to '${title}'</span>
|
||||
<span aria-hidden="true">#</span>
|
||||
</a>
|
||||
</div>`;
|
||||
});
|
||||
|
||||
/*
|
||||
Cloudinary responsive image shortcodes by Sia Karamalegos:
|
||||
https://sia.codes/posts/eleventy-and-cloudinary-images/
|
||||
*/
|
||||
// Set constants for the Cloudinary URL and fallback widths for images when not supplied by the shorcode params
|
||||
const CLOUDNAME = "helenchong";
|
||||
const FOLDER = "v1742915994/";
|
||||
const BASE_URL = `https://res.cloudinary.com/${CLOUDNAME}/image/upload/`;
|
||||
const FALLBACK_WIDTHS = [ 300, 600, 680, 1360 ];
|
||||
const FALLBACK_WIDTH = 680;
|
||||
/*
|
||||
Cloudinary responsive image shortcodes by Sia Karamalegos:
|
||||
https://sia.codes/posts/eleventy-and-cloudinary-images/
|
||||
*/
|
||||
// Set constants for the Cloudinary URL and fallback widths for images when not supplied by the shorcode params
|
||||
const CLOUDNAME = "helenchong";
|
||||
const FOLDER = "v1742915994/";
|
||||
const BASE_URL = `https://res.cloudinary.com/${CLOUDNAME}/image/upload/`;
|
||||
const FALLBACK_WIDTHS = [ 300, 600, 680, 1360 ];
|
||||
const FALLBACK_WIDTH = 680;
|
||||
|
||||
// Generate srcset attribute using the fallback widths or a supplied array of widths
|
||||
function getSrcset(file, widths) {
|
||||
const widthSet = widths ? widths : FALLBACK_WIDTHS;
|
||||
return widthSet.map(width => {
|
||||
return `${getSrc(file, width)} ${width}w`;
|
||||
}).join(", ");
|
||||
}
|
||||
// Generate srcset attribute using the fallback widths or a supplied array of widths
|
||||
function getSrcset(file, widths) {
|
||||
const widthSet = widths ? widths : FALLBACK_WIDTHS;
|
||||
return widthSet.map(width => {
|
||||
return `${getSrc(file, width)} ${width}w`;
|
||||
}).join(", ");
|
||||
}
|
||||
|
||||
// Generate the src attribute using the fallback width or a width supplied
|
||||
// by the shortcode params
|
||||
function getSrc(file, width) {
|
||||
return `${BASE_URL}q_auto,f_auto,w_${width ? width : FALLBACK_WIDTH}/${FOLDER}${file}`;
|
||||
}
|
||||
// Generate the src attribute using the fallback width or a width supplied
|
||||
// by the shortcode params
|
||||
function getSrc(file, width) {
|
||||
return `${BASE_URL}q_auto,f_auto,w_${width ? width : FALLBACK_WIDTH}/${FOLDER}${file}`;
|
||||
}
|
||||
|
||||
// Shortcode: Responsive image
|
||||
eleventyConfig.addShortcode('src', (file, width) => getSrc(file, width));
|
||||
eleventyConfig.addShortcode('srcset', (file, widths) => getSrcset(file, widths));
|
||||
// Shortcode: Responsive image
|
||||
eleventyConfig.addShortcode('src', (file, width) => getSrc(file, width));
|
||||
eleventyConfig.addShortcode('srcset', (file, widths) => getSrcset(file, widths));
|
||||
}
|
||||
|
||||
@@ -1,26 +1,26 @@
|
||||
export default function(eleventyConfig) {
|
||||
// Add blog post topics to collections
|
||||
eleventyConfig.addCollection("topics", (collectionApi) => {
|
||||
let topics = new Set();
|
||||
let posts = collectionApi.getFilteredByTag("posts");
|
||||
posts.forEach(p => {
|
||||
let tops = p.data.topics;
|
||||
if (tops) {
|
||||
tops.forEach(t => topics.add(t));
|
||||
}
|
||||
});
|
||||
return Array.from(topics).sort();
|
||||
});
|
||||
// Add blog post topics to collections
|
||||
eleventyConfig.addCollection("topics", (collectionApi) => {
|
||||
let topics = new Set();
|
||||
let posts = collectionApi.getFilteredByTag("posts");
|
||||
posts.forEach(p => {
|
||||
let tops = p.data.topics;
|
||||
if (tops) {
|
||||
tops.forEach(t => topics.add(t));
|
||||
}
|
||||
});
|
||||
return Array.from(topics).sort();
|
||||
});
|
||||
|
||||
// Filter: Filter blog posts by topic
|
||||
eleventyConfig.addFilter("filterByTopic", (posts, topic) => {
|
||||
topic = topic.toLowerCase();
|
||||
let result = posts.filter(p => {
|
||||
let tops = p.data.topics.map(t => t.toLowerCase());
|
||||
if (tops) {
|
||||
return tops.includes(topic);
|
||||
}
|
||||
});
|
||||
return result;
|
||||
});
|
||||
// Filter: Filter blog posts by topic
|
||||
eleventyConfig.addFilter("filterByTopic", (posts, topic) => {
|
||||
topic = topic.toLowerCase();
|
||||
let result = posts.filter(p => {
|
||||
let tops = p.data.topics.map(t => t.toLowerCase());
|
||||
if (tops) {
|
||||
return tops.includes(topic);
|
||||
}
|
||||
});
|
||||
return result;
|
||||
});
|
||||
}
|
||||
|
||||
@@ -1,9 +1,9 @@
|
||||
{{ if isArticle || hasBreadcrumbs }}
|
||||
<nav class="breadcrumbs" aria-labelledby="breadcrumbs-title">
|
||||
<h2 class="visually-hidden" id="breadcrumbs-title">Breadcrumbs</h2>
|
||||
{{ set breadcrumbNavPages = collections.all |> eleventyNavigationBreadcrumb(eleventyNavigation.key || pageTitle || title) }}
|
||||
{{ for entry of breadcrumbNavPages }}
|
||||
<a href="{{ entry.url }}">{{ entry.title }}</a> <span aria-hidden="true">➔</span>
|
||||
{{ /for }}
|
||||
<h2 class="visually-hidden" id="breadcrumbs-title">Breadcrumbs</h2>
|
||||
{{ set breadcrumbNavPages = collections.all |> eleventyNavigationBreadcrumb(eleventyNavigation.key || pageTitle || title) }}
|
||||
{{ for entry of breadcrumbNavPages }}
|
||||
<a href="{{ entry.url }}">{{ entry.title }}</a> <span aria-hidden="true">➔</span>
|
||||
{{ /for }}
|
||||
</nav>
|
||||
{{ /if }}
|
||||
|
||||
@@ -1,9 +1,9 @@
|
||||
<div class="h-card hidden">
|
||||
<span class="p-name">Helen Chong</span>
|
||||
<span class="p-given-name">Helen</span>
|
||||
<span class="p-family-name">Chong</span>
|
||||
<a href="/" class="u-url">Home page</a>
|
||||
<img src="/assets/graphics/profile/avatar-helen-chong.avif" alt="Helen Chong, Front-End Developer" class="u-photo">
|
||||
<span class="p-country-name">Malaysia</span>
|
||||
<span class="p-note">They/she. Graphic designer turned front-end web developer from Malaysia.</span>
|
||||
</div>
|
||||
<span class="p-name">Helen Chong</span>
|
||||
<span class="p-given-name">Helen</span>
|
||||
<span class="p-family-name">Chong</span>
|
||||
<a href="/" class="u-url">Home page</a>
|
||||
<img src="/assets/graphics/profile/avatar-helen-chong.avif" alt="Helen Chong, Front-End Developer" class="u-photo">
|
||||
<span class="p-country-name">Malaysia</span>
|
||||
<span class="p-note">They/she. Graphic designer turned front-end web developer from Malaysia.</span>
|
||||
</div>
|
||||
|
||||
@@ -15,68 +15,68 @@ Newer{{ /set }}
|
||||
{{ /set }}
|
||||
|
||||
<nav aria-labelledby="pagination-title" class="pagination__wrapper">
|
||||
<h2 class="visually-hidden" id="pagination-title">Pagination</h2>
|
||||
<ul class="pagination">
|
||||
<li>
|
||||
{{ if pagination.href.first }}
|
||||
<a href="{{ pagination.href.first }}">
|
||||
{{ firstLabel }}
|
||||
</a>
|
||||
{{ else }}
|
||||
{{ firstLabel }}
|
||||
{{ /if }}
|
||||
</li>
|
||||
<li>
|
||||
{{ if pagination.href.previous }}
|
||||
<a href=" {{ pagination.href.previous }}">
|
||||
<i class="fa-solid fa-angle-left"></i>
|
||||
{{ prevLabel }}
|
||||
</a>
|
||||
{{ else }}
|
||||
{{ prevLabel }}
|
||||
{{ /if }}
|
||||
</li>
|
||||
<li>
|
||||
{{ if pagination.href.next }}
|
||||
<a href=" {{ pagination.href.next }}">
|
||||
{{ nextLabel }}
|
||||
</a>
|
||||
{{ else }}
|
||||
{{ nextLabel }}
|
||||
{{ /if }}
|
||||
</li>
|
||||
<li>
|
||||
{{ if pagination.href.last }}
|
||||
<a href=" {{ pagination.href.last }}">
|
||||
{{ lastLabel }}
|
||||
</a>
|
||||
{{ else }}
|
||||
{{ lastLabel }}
|
||||
{{ /if }}
|
||||
</li>
|
||||
</ul>
|
||||
<h2 class="visually-hidden" id="pagination-title">Pagination</h2>
|
||||
<ul class="pagination">
|
||||
<li>
|
||||
{{ if pagination.href.first }}
|
||||
<a href="{{ pagination.href.first }}">
|
||||
{{ firstLabel }}
|
||||
</a>
|
||||
{{ else }}
|
||||
{{ firstLabel }}
|
||||
{{ /if }}
|
||||
</li>
|
||||
<li>
|
||||
{{ if pagination.href.previous }}
|
||||
<a href=" {{ pagination.href.previous }}">
|
||||
<i class="fa-solid fa-angle-left"></i>
|
||||
{{ prevLabel }}
|
||||
</a>
|
||||
{{ else }}
|
||||
{{ prevLabel }}
|
||||
{{ /if }}
|
||||
</li>
|
||||
<li>
|
||||
{{ if pagination.href.next }}
|
||||
<a href=" {{ pagination.href.next }}">
|
||||
{{ nextLabel }}
|
||||
</a>
|
||||
{{ else }}
|
||||
{{ nextLabel }}
|
||||
{{ /if }}
|
||||
</li>
|
||||
<li>
|
||||
{{ if pagination.href.last }}
|
||||
<a href=" {{ pagination.href.last }}">
|
||||
{{ lastLabel }}
|
||||
</a>
|
||||
{{ else }}
|
||||
{{ lastLabel }}
|
||||
{{ /if }}
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
{{ css }}
|
||||
.pagination__wrapper {
|
||||
display: grid;
|
||||
place-content: center;
|
||||
margin-top: 3em;
|
||||
display: grid;
|
||||
place-content: center;
|
||||
margin-top: 3em;
|
||||
}
|
||||
|
||||
.pagination {
|
||||
list-style-type: "";
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
display: flex;
|
||||
gap: 0.5em;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
list-style-type: "";
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
display: flex;
|
||||
gap: 0.5em;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.pagination li {
|
||||
text-align: center;
|
||||
padding: 0.3em 0.7em;
|
||||
text-align: center;
|
||||
padding: 0.3em 0.7em;
|
||||
}
|
||||
|
||||
.pagination li:has(a) { border: 0.15em solid var(--clr-accent-700); }
|
||||
|
||||
@@ -1,26 +1,26 @@
|
||||
<ul class="socials">
|
||||
<li>
|
||||
<a href="https://helenchong.omg.lol/" rel="me">omg.lol</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://git.helenchong.dev/helenchong/" rel="me">Gitea</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://codeberg.org/helenchong" rel="me">Codeberg</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://github.com/helenclx" rel="me">GitHub</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://codepen.io/helenclx" rel="me">CodePen</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="{{ sitemeta.siteAuthor.fediverse.url }}" rel="me">Mastodon</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://blacksky.community/profile/helenchong.omg.lol" rel="me">Blacksky</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://www.linkedin.com/in/helenclx/" rel="me">LinkedIn</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://helenchong.omg.lol/" rel="me">omg.lol</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://git.helenchong.dev/helenchong/" rel="me">Gitea</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://codeberg.org/helenchong" rel="me">Codeberg</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://github.com/helenclx" rel="me">GitHub</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://codepen.io/helenclx" rel="me">CodePen</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="{{ sitemeta.siteAuthor.fediverse.url }}" rel="me">Mastodon</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://blacksky.community/profile/helenchong.omg.lol" rel="me">Blacksky</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://www.linkedin.com/in/helenclx/" rel="me">LinkedIn</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
@@ -1,60 +1,60 @@
|
||||
<aside class="left-sidebar" aria-label="Left sidebar">
|
||||
<details-utils force-open="(min-width: 60rem)" force-restore>
|
||||
<details class="toc__wrapper sidebar--sticky">
|
||||
<summary class="toc__heading" id="toc-heading">
|
||||
Table of Contents
|
||||
</summary>
|
||||
{{ content |> toc }}
|
||||
</details>
|
||||
</details-utils>
|
||||
<details-utils force-open="(min-width: 60rem)" force-restore>
|
||||
<details class="toc__wrapper sidebar--sticky">
|
||||
<summary class="toc__heading" id="toc-heading">
|
||||
Table of Contents
|
||||
</summary>
|
||||
{{ content |> toc }}
|
||||
</details>
|
||||
</details-utils>
|
||||
</aside>
|
||||
|
||||
{{ css }}
|
||||
.toc__wrapper {
|
||||
max-height: 80vh;
|
||||
overflow-x: auto;
|
||||
padding: 0.3em 1.3rem 1.5em;
|
||||
max-height: 80vh;
|
||||
overflow-x: auto;
|
||||
padding: 0.3em 1.3rem 1.5em;
|
||||
}
|
||||
|
||||
.toc__heading {
|
||||
font-size: 1.4rem;
|
||||
font-weight: 700;
|
||||
font-size: 1.4rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.toc__wrapper[open] > .toc__heading {
|
||||
margin-bottom: 0.5em;
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
|
||||
.toc ol, .toc ol ol {
|
||||
display: grid;
|
||||
gap: 0.7em;
|
||||
display: grid;
|
||||
gap: 0.7em;
|
||||
}
|
||||
|
||||
.toc ol {
|
||||
border-top: 0.1em solid var(--clr-txt-default);
|
||||
padding-left: 1.3em;
|
||||
padding-top: 1em;
|
||||
border-top: 0.1em solid var(--clr-txt-default);
|
||||
padding-left: 1.3em;
|
||||
padding-top: 1em;
|
||||
}
|
||||
|
||||
.toc ol ol {
|
||||
border-top: none;
|
||||
list-style-type: disc;
|
||||
padding-left: 1em;
|
||||
padding-top: 0.5em;
|
||||
margin: 0;
|
||||
border-top: none;
|
||||
list-style-type: disc;
|
||||
padding-left: 1em;
|
||||
padding-top: 0.5em;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.toc ol a {
|
||||
font-size: 1.1em;
|
||||
padding-left: 0.3em;
|
||||
font-size: 1.1em;
|
||||
padding-left: 0.3em;
|
||||
}
|
||||
|
||||
.toc ol ol a {
|
||||
padding: 0;
|
||||
font-size: 1em;
|
||||
padding: 0;
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 60rem) {
|
||||
.toc__wrapper { padding-bottom: var(--sz-content-bottom); }
|
||||
.toc__wrapper { padding-bottom: var(--sz-content-bottom); }
|
||||
}
|
||||
{{ /css }}
|
||||
|
||||
@@ -2,54 +2,54 @@
|
||||
|
||||
<a href="#top" class="top-btn" aria-label="{{ topLinkTitle }}">Top</a>
|
||||
<noscript>
|
||||
<p><a class="top-link" href="#top">{{ topLinkTitle }}</a></p>
|
||||
<p><a class="top-link" href="#top">{{ topLinkTitle }}</a></p>
|
||||
</noscript>
|
||||
|
||||
{{ css }}
|
||||
.top-btn, .top-btn:hover { color: var(--clr-top-btn-txt); }
|
||||
|
||||
.top-btn {
|
||||
position: fixed;
|
||||
bottom: 0.5rem;
|
||||
right: 0.5rem;
|
||||
z-index: 999;
|
||||
text-decoration: none;
|
||||
text-transform: uppercase;
|
||||
font-size: 1rem;
|
||||
font-weight: 700;
|
||||
position: fixed;
|
||||
bottom: 0.5rem;
|
||||
right: 0.5rem;
|
||||
z-index: 999;
|
||||
text-decoration: none;
|
||||
text-transform: uppercase;
|
||||
font-size: 1rem;
|
||||
font-weight: 700;
|
||||
|
||||
background-color: var(--clr-top-btn-bg);
|
||||
border-radius: 50em;
|
||||
height: 3.25rem;
|
||||
aspect-ratio: 1 / 1;
|
||||
display: none;
|
||||
gap: 0.1em;
|
||||
justify-items: center;
|
||||
background-color: var(--clr-top-btn-bg);
|
||||
border-radius: 50em;
|
||||
height: 3.25rem;
|
||||
aspect-ratio: 1 / 1;
|
||||
display: none;
|
||||
gap: 0.1em;
|
||||
justify-items: center;
|
||||
}
|
||||
|
||||
.top-btn.show { display: grid; }
|
||||
|
||||
.top-btn::before {
|
||||
content: "";
|
||||
display: block;
|
||||
border-bottom: 0.6rem solid currentColor;
|
||||
border-left: 0.6rem solid transparent;
|
||||
border-right: 0.6rem solid transparent;
|
||||
content: "";
|
||||
display: block;
|
||||
border-bottom: 0.6rem solid currentColor;
|
||||
border-left: 0.6rem solid transparent;
|
||||
border-right: 0.6rem solid transparent;
|
||||
}
|
||||
|
||||
.top-btn:focus {
|
||||
outline: 0.25em solid var(--clr-top-btn-bg);
|
||||
outline-offset: 0.15em;
|
||||
outline: 0.25em solid var(--clr-top-btn-bg);
|
||||
outline-offset: 0.15em;
|
||||
}
|
||||
|
||||
.top-link::before,
|
||||
.top-link::after {
|
||||
--arrow-margin: 0.3em;
|
||||
content: "";
|
||||
display: inline-block;
|
||||
border-bottom: 0.7rem solid currentColor;
|
||||
border-left: 0.5rem solid transparent;
|
||||
border-right: 0.5rem solid transparent;
|
||||
--arrow-margin: 0.3em;
|
||||
content: "";
|
||||
display: inline-block;
|
||||
border-bottom: 0.7rem solid currentColor;
|
||||
border-left: 0.5rem solid transparent;
|
||||
border-right: 0.5rem solid transparent;
|
||||
}
|
||||
|
||||
.top-link::before { margin: 0 var(--arrow-margin) 0 0; }
|
||||
@@ -61,14 +61,14 @@ const topButton = document.querySelector(".top-btn");
|
||||
const scrollOffset = 400;
|
||||
|
||||
window.onscroll = () => {
|
||||
if (document.body.scrollTop > scrollOffset || document.documentElement.scrollTop > scrollOffset) {
|
||||
topButton.classList.add("show");
|
||||
} else {
|
||||
topButton.classList.remove("show");
|
||||
}
|
||||
if (document.body.scrollTop > scrollOffset || document.documentElement.scrollTop > scrollOffset) {
|
||||
topButton.classList.add("show");
|
||||
} else {
|
||||
topButton.classList.remove("show");
|
||||
}
|
||||
};
|
||||
|
||||
topButton.addEventListener('click', () => {
|
||||
window.scrollTo({ top: 0, left: 0 });
|
||||
window.scrollTo({ top: 0, left: 0 });
|
||||
});
|
||||
{{ /js }}
|
||||
|
||||
@@ -1,18 +1,18 @@
|
||||
<section class="section--home grid-center">
|
||||
<h2 class="heading--home">Badges</h2>
|
||||
<div class="widgets home__badges">
|
||||
<a href="https://validator.w3.org/feed/check.cgi?url=https%3A//helenchong.dev/blog/feed.xml"><img src="/assets/graphics/badges/valid-atom.png" alt="Valid Atom 1.0" width="88" height="31" loading="lazy"></a>
|
||||
<a href="https://ko-fi.com/s/798b83fbcc"><img src="/assets/graphics/badges/coffee-powered.svg" alt="Coffee powered" width="88" height="31" loading="lazy"></a>
|
||||
<a href="https://people.pledge.party/"><img src="/assets/graphics/badges/people-pledge.svg" alt="The People Pledge" width="88" height="31" loading="lazy"></a>
|
||||
<a href="https://fightfascism.neocities.org/"><img src="/assets/graphics/badges/fight-fascism.jpg" alt="Fight fascism" width="220" height="37" loading="lazy"></a>
|
||||
<a href="https://internet.nl/site/helenchong.dev/3290581/"><img src="/assets/graphics/badges/internet.nl-websitetest.svg" alt="Badge with a green check mark and text: 100% score in website test, internet.nl" width="204" height="38" loading="lazy"></a>
|
||||
</div>
|
||||
<div id="wcb" class="carbonbadge">
|
||||
<noscript>
|
||||
<p>Looks like you have JavaScript disabled. JavaScript is required to display the <a href="https://www.websitecarbon.com/badge/">Website Carbon badge</a>.</p>
|
||||
</noscript>
|
||||
</div>
|
||||
<script src="https://unpkg.com/website-carbon-badges@1.1.3/b.min.js" defer></script>
|
||||
<h2 class="heading--home">Badges</h2>
|
||||
<div class="widgets home__badges">
|
||||
<a href="https://validator.w3.org/feed/check.cgi?url=https%3A//helenchong.dev/blog/feed.xml"><img src="/assets/graphics/badges/valid-atom.png" alt="Valid Atom 1.0" width="88" height="31" loading="lazy"></a>
|
||||
<a href="https://ko-fi.com/s/798b83fbcc"><img src="/assets/graphics/badges/coffee-powered.svg" alt="Coffee powered" width="88" height="31" loading="lazy"></a>
|
||||
<a href="https://people.pledge.party/"><img src="/assets/graphics/badges/people-pledge.svg" alt="The People Pledge" width="88" height="31" loading="lazy"></a>
|
||||
<a href="https://fightfascism.neocities.org/"><img src="/assets/graphics/badges/fight-fascism.jpg" alt="Fight fascism" width="220" height="37" loading="lazy"></a>
|
||||
<a href="https://internet.nl/site/helenchong.dev/3290581/"><img src="/assets/graphics/badges/internet.nl-websitetest.svg" alt="Badge with a green check mark and text: 100% score in website test, internet.nl" width="204" height="38" loading="lazy"></a>
|
||||
</div>
|
||||
<div id="wcb" class="carbonbadge">
|
||||
<noscript>
|
||||
<p>Looks like you have JavaScript disabled. JavaScript is required to display the <a href="https://www.websitecarbon.com/badge/">Website Carbon badge</a>.</p>
|
||||
</noscript>
|
||||
</div>
|
||||
<script src="https://unpkg.com/website-carbon-badges@1.1.3/b.min.js" defer></script>
|
||||
</section>
|
||||
|
||||
{{ js }}
|
||||
@@ -20,14 +20,14 @@ const darkModePreference = window.matchMedia("(prefers-color-scheme: dark)");
|
||||
const websiteCarbonBadge = document.getElementById("wcb");
|
||||
|
||||
if (window.matchMedia && darkModePreference.matches) {
|
||||
websiteCarbonBadge.classList.add("wcb-d");
|
||||
websiteCarbonBadge.classList.add("wcb-d");
|
||||
}
|
||||
|
||||
darkModePreference.addEventListener("change", (event) => {
|
||||
if (event.matches) {
|
||||
websiteCarbonBadge.classList.add("wcb-d");
|
||||
} else {
|
||||
websiteCarbonBadge.classList.remove("wcb-d");
|
||||
}
|
||||
if (event.matches) {
|
||||
websiteCarbonBadge.classList.add("wcb-d");
|
||||
} else {
|
||||
websiteCarbonBadge.classList.remove("wcb-d");
|
||||
}
|
||||
});
|
||||
{{ /js }}
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<section class="section--home grid-center">
|
||||
<h2 class="heading--home">Latest Blog Posts</h2>
|
||||
{{ set postList = collections.posts |> toReversed |> itemLimit(3) }}
|
||||
{{ include "partials/postslist.vto" }}
|
||||
<a class="home__btn-link" href="/blog">More Blog Posts</a>
|
||||
<h2 class="heading--home">Latest Blog Posts</h2>
|
||||
{{ set postList = collections.posts |> toReversed |> itemLimit(3) }}
|
||||
{{ include "partials/postslist.vto" }}
|
||||
<a class="home__btn-link" href="/blog">More Blog Posts</a>
|
||||
</section>
|
||||
|
||||
@@ -1,31 +1,31 @@
|
||||
<section class="section--home grid-center">
|
||||
<h2 class=heading--home>Notice</h2>
|
||||
<div class=notice>
|
||||
<h3>Upcoming Talk</h3>
|
||||
<p>On 15 October 2025, I will be speaking at <a href=https://11tymeetup.dev/events/ep-27-11ty-at-the-museum-and-multilingual-blogs/>Episode 27</a> of <a href=https://11tymeetup.dev/>THE Eleventy Meetup</a>, about building a multilingual blog with the static site generator <a href=https://www.11ty.dev/>Eleventy</a>.</p>
|
||||
</div>
|
||||
<h2 class=heading--home>Notice</h2>
|
||||
<div class=notice>
|
||||
<h3>Upcoming Talk</h3>
|
||||
<p>On 15 October 2025, I will be speaking at <a href=https://11tymeetup.dev/events/ep-27-11ty-at-the-museum-and-multilingual-blogs/>Episode 27</a> of <a href=https://11tymeetup.dev/>THE Eleventy Meetup</a>, about building a multilingual blog with the static site generator <a href=https://www.11ty.dev/>Eleventy</a>.</p>
|
||||
</div>
|
||||
|
||||
<!-- <div class="notice"> -->
|
||||
<!-- <h3 class="notice__heading">I Am Open for Hire</h3> -->
|
||||
<!-- <p>I am available for new work opportunities and looking for a remote web developer position.</p> -->
|
||||
<!-- <p>If you would like to get in touch, please <a href="/contact">contact me</a> or check out <a href="/resume">my résumé</a>.</p> -->
|
||||
<!-- </div> -->
|
||||
<!-- <div class="notice"> -->
|
||||
<!-- <h3 class="notice__heading">I Am Open for Hire</h3> -->
|
||||
<!-- <p>I am available for new work opportunities and looking for a remote web developer position.</p> -->
|
||||
<!-- <p>If you would like to get in touch, please <a href="/contact">contact me</a> or check out <a href="/resume">my résumé</a>.</p> -->
|
||||
<!-- </div> -->
|
||||
</section>
|
||||
|
||||
{{ css }}
|
||||
.notice {
|
||||
border: 0.2em solid var(--clr-accent-700);
|
||||
background-color: var(--clr-accent-100);
|
||||
padding: 1em;
|
||||
max-width: 45rem;
|
||||
display: grid;
|
||||
gap: 1em;
|
||||
border: 0.2em solid var(--clr-accent-700);
|
||||
background-color: var(--clr-accent-100);
|
||||
padding: 1em;
|
||||
max-width: 45rem;
|
||||
display: grid;
|
||||
gap: 1em;
|
||||
}
|
||||
|
||||
.notice__heading { text-align: center; }
|
||||
.notice-list { padding: 0; }
|
||||
.notice-list__item {
|
||||
display: grid;
|
||||
gap: 0.3em;
|
||||
display: grid;
|
||||
gap: 0.3em;
|
||||
}
|
||||
{{ /css }}
|
||||
|
||||
@@ -1,10 +1,10 @@
|
||||
<section class="profile">
|
||||
<div class="profile__image-wrapper">
|
||||
<img fetchpriority="high" src="/assets/graphics/profile/avatar-helen-chong.avif" alt="Avatar of Helen Chong">
|
||||
</div>
|
||||
<div class="profile__card">
|
||||
<p class="profile__text">Hi! I am <span class="profile__text--highlight">Helen</span>, a graphic designer turned web developer from Malaysia. As a <span class="profile__text--highlight">Web Developer</span>, I love building the web to solve problems and express myself.</p>
|
||||
<p class="profile__text">I focus on accessibility, inclusive design and progressive enhancement to create a user experience that puts people first. You can <a class="profile__link" href="/about">learn more about me</a> and check out <a class="profile__link" href="{{sitemeta.siteUrl}}/resume">my résumé</a> for my professional history.</p>
|
||||
<p class="profile__text">I am always open to connect with more people, so do not hesitate to <a class="profile__link" href="/contact">get in touch with me</a>.<p>
|
||||
</div>
|
||||
</section>
|
||||
<div class="profile__image-wrapper">
|
||||
<img fetchpriority="high" src="/assets/graphics/profile/avatar-helen-chong.avif" alt="Avatar of Helen Chong">
|
||||
</div>
|
||||
<div class="profile__card">
|
||||
<p class="profile__text">Hi! I am <span class="profile__text--highlight">Helen</span>, a graphic designer turned web developer from Malaysia. As a <span class="profile__text--highlight">Web Developer</span>, I love building the web to solve problems and express myself.</p>
|
||||
<p class="profile__text">I focus on accessibility, inclusive design and progressive enhancement to create a user experience that puts people first. You can <a class="profile__link" href="/about">learn more about me</a> and check out <a class="profile__link" href="{{sitemeta.siteUrl}}/resume">my résumé</a> for my professional history.</p>
|
||||
<p class="profile__text">I am always open to connect with more people, so do not hesitate to <a class="profile__link" href="/contact">get in touch with me</a>.<p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
<section class="section--home">
|
||||
<h2 class="heading--home">Featured Projects</h2>
|
||||
<div class="project-grid">
|
||||
{{ set projectList = collections.projects |> itemLimit(3) }}
|
||||
{{ include "partials/project-card.vto" }}
|
||||
</div>
|
||||
<a class="home__btn-link" href="/projects">More Projects</a>
|
||||
<h2 class="heading--home">Featured Projects</h2>
|
||||
<div class="project-grid">
|
||||
{{ set projectList = collections.projects |> itemLimit(3) }}
|
||||
{{ include "partials/project-card.vto" }}
|
||||
</div>
|
||||
<a class="home__btn-link" href="/projects">More Projects</a>
|
||||
</section>
|
||||
|
||||
@@ -1,72 +1,72 @@
|
||||
<section class="section--home grid-center">
|
||||
<h2 class=heading--home>Web Directories</h2>
|
||||
<p class=text-center>{{ sitemeta.siteDomain }} is listed at the following web directories:</p>
|
||||
<ul class="widgets directories">
|
||||
<li><a href=https://bukmark.club/>BUKMARK.CLUB</a></li>
|
||||
<li><a href=https://darktheme.club/>The Darktheme Club</a></li>
|
||||
<li><a href=https://www.11ty.dev/authors/>Eleventy Authors</a></li>
|
||||
<li><a href=https://personalsit.es/>PersonalSit.es</a></li>
|
||||
<li><a href=https://uses.tech/>/uses</a></li>
|
||||
</ul>
|
||||
<h2 class=heading--home>Web Directories</h2>
|
||||
<p class=text-center>{{ sitemeta.siteDomain }} is listed at the following web directories:</p>
|
||||
<ul class="widgets directories">
|
||||
<li><a href=https://bukmark.club/>BUKMARK.CLUB</a></li>
|
||||
<li><a href=https://darktheme.club/>The Darktheme Club</a></li>
|
||||
<li><a href=https://www.11ty.dev/authors/>Eleventy Authors</a></li>
|
||||
<li><a href=https://personalsit.es/>PersonalSit.es</a></li>
|
||||
<li><a href=https://uses.tech/>/uses</a></li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<section class="section--home grid-center">
|
||||
<h2 class=heading--home>Webrings</h2>
|
||||
<p class=text-center>{{ sitemeta.siteDomain }} is a member of the following webrings:</p>
|
||||
<div class="widgets webrings">
|
||||
<nav class=a11y-webring-club aria-labelledby=a11y-webring-club>
|
||||
<h3 id=a11y-webring-club><a rel=external href=https://a11y-webring.club/>a11y-webring.club</a></h3>
|
||||
<ul>
|
||||
<li><a rel=external referrerpolicy=strict-origin href=https://a11y-webring.club/prev>Previous website</a></li>
|
||||
<li><a rel=external referrerpolicy=strict-origin href=https://a11y-webring.club/random>Random website</a></li>
|
||||
<li><a rel=external referrerpolicy=strict-origin href=https://a11y-webring.club/next>Next website</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
<h2 class=heading--home>Webrings</h2>
|
||||
<p class=text-center>{{ sitemeta.siteDomain }} is a member of the following webrings:</p>
|
||||
<div class="widgets webrings">
|
||||
<nav class=a11y-webring-club aria-labelledby=a11y-webring-club>
|
||||
<h3 id=a11y-webring-club><a rel=external href=https://a11y-webring.club/>a11y-webring.club</a></h3>
|
||||
<ul>
|
||||
<li><a rel=external referrerpolicy=strict-origin href=https://a11y-webring.club/prev>Previous website</a></li>
|
||||
<li><a rel=external referrerpolicy=strict-origin href=https://a11y-webring.club/random>Random website</a></li>
|
||||
<li><a rel=external referrerpolicy=strict-origin href=https://a11y-webring.club/next>Next website</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<nav aria-labelledby=ctp-webring>
|
||||
<h3 id=ctp-webring><a href=https://ctp-webr.ing/>The Catppuccin Webring</a></h3>
|
||||
<ul>
|
||||
<li><a href=https://ctp-webr.ing/helenchong/previous>Previous website</a></li>
|
||||
<li><a href=https://ctp-webr.ing/rand>Random website</a></li>
|
||||
<li><a href=https://ctp-webr.ing/helenchong/next>Next website</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
<nav aria-labelledby=ctp-webring>
|
||||
<h3 id=ctp-webring><a href=https://ctp-webr.ing/>The Catppuccin Webring</a></h3>
|
||||
<ul>
|
||||
<li><a href=https://ctp-webr.ing/helenchong/previous>Previous website</a></li>
|
||||
<li><a href=https://ctp-webr.ing/rand>Random website</a></li>
|
||||
<li><a href=https://ctp-webr.ing/helenchong/next>Next website</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
|
||||
<nav aria-labelledby=css-joy>
|
||||
<h3 id=css-joy><a href=https://cs.sjoy.lol/>CSS JOY Webring</a></h3>
|
||||
<ul>
|
||||
<li><a class=external-link href=https://webri.ng/webring/cssjoy/previous?via=https://helenchong.dev/>Previous website</a></li>
|
||||
<li><a class=external-link href=https://webri.ng/webring/cssjoy/random?via=https://helenchong.dev/>Random website</a></li>
|
||||
<li><a class=external-link href=https://webri.ng/webring/cssjoy/next?via=https://helenchong.dev/>Next website</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
<nav aria-labelledby=css-joy>
|
||||
<h3 id=css-joy><a href=https://cs.sjoy.lol/>CSS JOY Webring</a></h3>
|
||||
<ul>
|
||||
<li><a class=external-link href=https://webri.ng/webring/cssjoy/previous?via=https://helenchong.dev/>Previous website</a></li>
|
||||
<li><a class=external-link href=https://webri.ng/webring/cssjoy/random?via=https://helenchong.dev/>Random website</a></li>
|
||||
<li><a class=external-link href=https://webri.ng/webring/cssjoy/next?via=https://helenchong.dev/>Next website</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<nav aria-labelledby=fediring>
|
||||
<h3 id=fediring><a href=https://fediring.net/>Fediring</a></h3>
|
||||
<ul>
|
||||
<li><a class=external-link href=https://fediring.net/previous?host=helenchong.dev>Previous website</a></li>
|
||||
<li><a class=external-link href=https://fediring.net/random>Random website</a></li>
|
||||
<li><a class=external-link href=https://fediring.net/next?host=helenchong.dev>Next website</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
<nav aria-labelledby=fediring>
|
||||
<h3 id=fediring><a href=https://fediring.net/>Fediring</a></h3>
|
||||
<ul>
|
||||
<li><a class=external-link href=https://fediring.net/previous?host=helenchong.dev>Previous website</a></li>
|
||||
<li><a class=external-link href=https://fediring.net/random>Random website</a></li>
|
||||
<li><a class=external-link href=https://fediring.net/next?host=helenchong.dev>Next website</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<nav aria-labelledby=indieweb-webring>
|
||||
<h3 id=indieweb-webring>An <a href=https://xn--sr8hvo.ws>IndieWeb Webring</a> 🕸💍</h3>
|
||||
<ul>
|
||||
<li><a href=https://xn--sr8hvo.ws/previous>Previous website</a></li>
|
||||
<li><a href=https://xn--sr8hvo.ws/next>Next website</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
<nav aria-labelledby=indieweb-webring>
|
||||
<h3 id=indieweb-webring>An <a href=https://xn--sr8hvo.ws>IndieWeb Webring</a> 🕸💍</h3>
|
||||
<ul>
|
||||
<li><a href=https://xn--sr8hvo.ws/previous>Previous website</a></li>
|
||||
<li><a href=https://xn--sr8hvo.ws/next>Next website</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<nav aria-labelledby=staticquest-webring>
|
||||
<h3 id=staticquest-webring><a href=https://static.quest>Static.Quest</a></h3>
|
||||
<ul>
|
||||
<li><a class=external-link href=https://static.quest/previous/?host=helenchong.dev>Previous website</a></li>
|
||||
<li><a class=external-link href=https://static.quest/members>View members</a></li>
|
||||
<li><a class=external-link href=https://static.quest/next/?host=helenchong.dev>Next website</a></li>
|
||||
<li><a class=external-link href=https://static.quest/random>Random website</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
<nav aria-labelledby=staticquest-webring>
|
||||
<h3 id=staticquest-webring><a href=https://static.quest>Static.Quest</a></h3>
|
||||
<ul>
|
||||
<li><a class=external-link href=https://static.quest/previous/?host=helenchong.dev>Previous website</a></li>
|
||||
<li><a class=external-link href=https://static.quest/members>View members</a></li>
|
||||
<li><a class=external-link href=https://static.quest/next/?host=helenchong.dev>Next website</a></li>
|
||||
<li><a class=external-link href=https://static.quest/random>Random website</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@@ -1,38 +1,38 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="{{ sitemeta.siteLang }}" id="top">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<!-- Open Graph meta data -->
|
||||
<meta property="og:title" content="{{ title ? title : sitemeta.siteName }}">
|
||||
<meta name="generator" content="{{ eleventy.generator }}">
|
||||
<meta name="author" content="{{ sitemeta.siteAuthor.name }}">
|
||||
<meta name="fediverse:creator" content="{{ sitemeta.siteAuthor.fediverse.handle }}">
|
||||
<meta property="og:site_name" content="{{ sitemeta.siteName }}" />
|
||||
<meta property="og:type" content="{{ tags && tags.includes("posts") ? "article" : "website" }}">
|
||||
<meta name="description" content="{{ desc || sitemeta.siteDescription }}">
|
||||
<meta property="og:url" content="{{ sitemeta.siteUrl }}{{ page.url ? page.url : '' }}">
|
||||
<meta property="og:image" content="{{ sitemeta.siteUrl }}/assets/graphics/helenchong-meta-img.png">
|
||||
<meta name="theme-color" content="#8200cd">
|
||||
<!-- Fonts -->
|
||||
{{ include "partials/fonts.vto" }}
|
||||
<!-- Feeds -->
|
||||
<link rel="alternate" type="application/rss+xml" title="{{ sitemeta.siteBlog.title }}" href="{{ sitemeta.feedPath }}">
|
||||
<!-- CSS -->
|
||||
{{ include "partials/css.vto" }}
|
||||
<!-- Verifications -->
|
||||
<link rel="authorization_/point" href="https://indieauth.com/auth">
|
||||
<!-- JavaScript -->
|
||||
{{ include "partials/js.vto" }}
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<!-- Open Graph meta data -->
|
||||
<meta property="og:title" content="{{ title ? title : sitemeta.siteName }}">
|
||||
<meta name="generator" content="{{ eleventy.generator }}">
|
||||
<meta name="author" content="{{ sitemeta.siteAuthor.name }}">
|
||||
<meta name="fediverse:creator" content="{{ sitemeta.siteAuthor.fediverse.handle }}">
|
||||
<meta property="og:site_name" content="{{ sitemeta.siteName }}" />
|
||||
<meta property="og:type" content="{{ tags && tags.includes("posts") ? "article" : "website" }}">
|
||||
<meta name="description" content="{{ desc || sitemeta.siteDescription }}">
|
||||
<meta property="og:url" content="{{ sitemeta.siteUrl }}{{ page.url ? page.url : '' }}">
|
||||
<meta property="og:image" content="{{ sitemeta.siteUrl }}/assets/graphics/helenchong-meta-img.png">
|
||||
<meta name="theme-color" content="#8200cd">
|
||||
<!-- Fonts -->
|
||||
{{ include "partials/fonts.vto" }}
|
||||
<!-- Feeds -->
|
||||
<link rel="alternate" type="application/rss+xml" title="{{ sitemeta.siteBlog.title }}" href="{{ sitemeta.feedPath }}">
|
||||
<!-- CSS -->
|
||||
{{ include "partials/css.vto" }}
|
||||
<!-- Verifications -->
|
||||
<link rel="authorization_/point" href="https://indieauth.com/auth">
|
||||
<!-- JavaScript -->
|
||||
{{ include "partials/js.vto" }}
|
||||
|
||||
<title>{{ if title }} {{ title }} | {{ /if }} {{ sitemeta.siteName }}</title>
|
||||
</head>
|
||||
<body>
|
||||
<div class="skip-btn"><a href="#content">Skip to content</a></div>
|
||||
{{ include "partials/header.vto" }}
|
||||
<main id="content">
|
||||
{{ content }}
|
||||
</main>
|
||||
{{ include "partials/footer.vto" }}
|
||||
</body>
|
||||
<title>{{ if title }} {{ title }} | {{ /if }} {{ sitemeta.siteName }}</title>
|
||||
</head>
|
||||
<body>
|
||||
<div class="skip-btn"><a href="#content">Skip to content</a></div>
|
||||
{{ include "partials/header.vto" }}
|
||||
<main id="content">
|
||||
{{ content }}
|
||||
</main>
|
||||
{{ include "partials/footer.vto" }}
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -3,65 +3,65 @@ layout: layouts/base
|
||||
---
|
||||
|
||||
<header class="main__header">
|
||||
{{ include "components/breadcrumbs.vto" }}
|
||||
{{ include "components/breadcrumbs.vto" }}
|
||||
|
||||
<h1 class="heading--main">{{ pageTitle || title }}</h1>
|
||||
<h1 class="heading--main">{{ pageTitle || title }}</h1>
|
||||
|
||||
{{ if tags && tags.includes("posts") }}
|
||||
<div class="blog__post--info">
|
||||
<p>
|
||||
<span class="text-bold">{{ content |> wordcount |> thousands }} words</span>.
|
||||
<span class="text-bold">Posted:</span> <time datetime="{{ date }}">{{ date |> formatDate }}</time> by {{ sitemeta.siteAuthor.name }}
|
||||
</p>
|
||||
{{ if updated }}
|
||||
<p><span class="text-bold">Last Updated:</span> <time datetime="{{ updated }}">{{ updated |> formatDate }}</time></p>
|
||||
{{ /if }}
|
||||
<p><span class="text-bold">Topics:</span>
|
||||
{{ for topic of topics }}
|
||||
<a href="/blog/topics/{{ topic |> slugify }}">{{ topic }}</a>{{ if topics.indexOf(topic) !== topics.length - 1 }}, {{ /if }}
|
||||
{{ /for }}
|
||||
</p>
|
||||
</div>
|
||||
{{ /if }}
|
||||
{{ if tags && tags.includes("posts") }}
|
||||
<div class="blog__post--info">
|
||||
<p>
|
||||
<span class="text-bold">{{ content |> wordcount |> thousands }} words</span>.
|
||||
<span class="text-bold">Posted:</span> <time datetime="{{ date }}">{{ date |> formatDate }}</time> by {{ sitemeta.siteAuthor.name }}
|
||||
</p>
|
||||
{{ if updated }}
|
||||
<p><span class="text-bold">Last Updated:</span> <time datetime="{{ updated }}">{{ updated |> formatDate }}</time></p>
|
||||
{{ /if }}
|
||||
<p><span class="text-bold">Topics:</span>
|
||||
{{ for topic of topics }}
|
||||
<a href="/blog/topics/{{ topic |> slugify }}">{{ topic }}</a>{{ if topics.indexOf(topic) !== topics.length - 1 }}, {{ /if }}
|
||||
{{ /for }}
|
||||
</p>
|
||||
</div>
|
||||
{{ /if }}
|
||||
</header>
|
||||
|
||||
<content-wrapper>
|
||||
{{ if toc }}
|
||||
{{ include "components/toc.vto" }}
|
||||
{{ /if }}
|
||||
{{ if toc }}
|
||||
{{ include "components/toc.vto" }}
|
||||
{{ /if }}
|
||||
|
||||
{{ set contentEl = isArticle ? "article" : "div" }}
|
||||
<{{contentEl}} class="prose">
|
||||
{{ content }}
|
||||
{{ set contentEl = isArticle ? "article" : "div" }}
|
||||
<{{contentEl}} class="prose">
|
||||
{{ content }}
|
||||
|
||||
{{ if tags && tags.includes("posts") }}
|
||||
{{ if collections.posts.length > 1 }}
|
||||
<nav class="blog__post--pagination" aria-labelledby="nextprev-title">
|
||||
<h2 class="visually-hidden" id="nextprev-title">Next and Previous Blog Posts</h2>
|
||||
{{ set previousPost = collections.posts |> getPreviousCollectionItem }}
|
||||
{{ set nextPost = collections.posts |> getNextCollectionItem }}
|
||||
{{ if nextPost || previousPost }}
|
||||
<ul class="blog__post--nextprev">
|
||||
{{ if previousPost }}
|
||||
<li class="blog__post--prev">
|
||||
<p>Previous Post:</p>
|
||||
<a href="{{ previousPost.url }}">{{ previousPost.data.title }}</a>
|
||||
</li>
|
||||
{{ /if }}
|
||||
{{ if nextPost }}
|
||||
<li class="blog__post--next">
|
||||
<p>Next Post:</p>
|
||||
<a href="{{ nextPost.url }}">{{ nextPost.data.title }}</a>
|
||||
</li>
|
||||
{{ /if }}
|
||||
</ul>
|
||||
{{ /if }}
|
||||
</nav>
|
||||
{{ /if }}
|
||||
{{ /if }}
|
||||
</{{contentEl}}>
|
||||
{{ if tags && tags.includes("posts") }}
|
||||
{{ if collections.posts.length > 1 }}
|
||||
<nav class="blog__post--pagination" aria-labelledby="nextprev-title">
|
||||
<h2 class="visually-hidden" id="nextprev-title">Next and Previous Blog Posts</h2>
|
||||
{{ set previousPost = collections.posts |> getPreviousCollectionItem }}
|
||||
{{ set nextPost = collections.posts |> getNextCollectionItem }}
|
||||
{{ if nextPost || previousPost }}
|
||||
<ul class="blog__post--nextprev">
|
||||
{{ if previousPost }}
|
||||
<li class="blog__post--prev">
|
||||
<p>Previous Post:</p>
|
||||
<a href="{{ previousPost.url }}">{{ previousPost.data.title }}</a>
|
||||
</li>
|
||||
{{ /if }}
|
||||
{{ if nextPost }}
|
||||
<li class="blog__post--next">
|
||||
<p>Next Post:</p>
|
||||
<a href="{{ nextPost.url }}">{{ nextPost.data.title }}</a>
|
||||
</li>
|
||||
{{ /if }}
|
||||
</ul>
|
||||
{{ /if }}
|
||||
</nav>
|
||||
{{ /if }}
|
||||
{{ /if }}
|
||||
</{{contentEl}}>
|
||||
|
||||
{{ if tags && tags.includes("blog pages") }}
|
||||
{{ include "partials/blognav.vto" }}
|
||||
{{ /if }}
|
||||
{{ if tags && tags.includes("blog pages") }}
|
||||
{{ include "partials/blognav.vto" }}
|
||||
{{ /if }}
|
||||
</content-wrapper>
|
||||
|
||||
@@ -3,26 +3,26 @@ layout: layouts/base
|
||||
hasBreadcrumbs: true
|
||||
---
|
||||
<div class="project--page">
|
||||
<header class="main__header">
|
||||
{{ include "components/breadcrumbs.vto" }}
|
||||
<header class="main__header">
|
||||
{{ include "components/breadcrumbs.vto" }}
|
||||
|
||||
<h1 class="heading--main">{{ title }}</h1>
|
||||
</header>
|
||||
<h1 class="heading--main">{{ title }}</h1>
|
||||
</header>
|
||||
|
||||
<article class="project">
|
||||
<div class="project__image-wrapper">
|
||||
{{# <img src="{{ image }}" alt="{{ imageAlt }}"> #}}
|
||||
<img src="{{ src image }}"
|
||||
srcset="{{ srcset image }}"
|
||||
sizes="(min-width: 1080px) 1020px, calc(94.74vw + 16px)"
|
||||
alt="{{ imageAlt }}"
|
||||
width="{{ imageWidth }}"
|
||||
height="{{ imageHeight }}"
|
||||
loading="lazy"
|
||||
>
|
||||
</div>
|
||||
<div class="project__content prose">
|
||||
{{ content }}
|
||||
</div>
|
||||
</article>
|
||||
<article class="project">
|
||||
<div class="project__image-wrapper">
|
||||
{{# <img src="{{ image }}" alt="{{ imageAlt }}"> #}}
|
||||
<img src="{{ src image }}"
|
||||
srcset="{{ srcset image }}"
|
||||
sizes="(min-width: 1080px) 1020px, calc(94.74vw + 16px)"
|
||||
alt="{{ imageAlt }}"
|
||||
width="{{ imageWidth }}"
|
||||
height="{{ imageHeight }}"
|
||||
loading="lazy"
|
||||
>
|
||||
</div>
|
||||
<div class="project__content prose">
|
||||
{{ content }}
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
|
||||
@@ -1,17 +1,17 @@
|
||||
{{ set currentUrl }}{{ page.url }}{{ /set }}
|
||||
<aside class="right-sidebar">
|
||||
<nav class="blog__nav sidebar--sticky" aria-labelledby="blog-nav-title">
|
||||
<h2 class="blog__nav--title" id="blog-nav-title">Blog Navigation</h2>
|
||||
<ul class="blog__nav--links">
|
||||
<li><a {{ if page.url == "/blog/" }} aria-current="page"{{ /if }} href="/blog/">Index</a></li>
|
||||
{{ set navPages = collections.all |> eleventyNavigation("Blog") }}
|
||||
{{ for entry of navPages }}
|
||||
<li><a
|
||||
{{ if entry.url == page.url }}aria-current="page"{{ /if }}
|
||||
href="{{ entry.url }}">
|
||||
{{ entry.title }}
|
||||
</a></li>
|
||||
{{ /for }}
|
||||
</ul>
|
||||
</nav>
|
||||
<nav class="blog__nav sidebar--sticky" aria-labelledby="blog-nav-title">
|
||||
<h2 class="blog__nav--title" id="blog-nav-title">Blog Navigation</h2>
|
||||
<ul class="blog__nav--links">
|
||||
<li><a {{ if page.url == "/blog/" }} aria-current="page"{{ /if }} href="/blog/">Index</a></li>
|
||||
{{ set navPages = collections.all |> eleventyNavigation("Blog") }}
|
||||
{{ for entry of navPages }}
|
||||
<li><a
|
||||
{{ if entry.url == page.url }}aria-current="page"{{ /if }}
|
||||
href="{{ entry.url }}">
|
||||
{{ entry.title }}
|
||||
</a></li>
|
||||
{{ /for }}
|
||||
</ul>
|
||||
</nav>
|
||||
</aside>
|
||||
|
||||
@@ -1,13 +1,13 @@
|
||||
{{ set cssFiles = [
|
||||
"global",
|
||||
"a11y-syntax-highlighting",
|
||||
"general",
|
||||
"home",
|
||||
"components",
|
||||
"projects",
|
||||
"content",
|
||||
"blog",
|
||||
"utility"
|
||||
"global",
|
||||
"a11y-syntax-highlighting",
|
||||
"general",
|
||||
"home",
|
||||
"components",
|
||||
"projects",
|
||||
"content",
|
||||
"blog",
|
||||
"utility"
|
||||
] }}
|
||||
{{ for file of cssFiles }}
|
||||
<link rel="stylesheet" href="{{'/assets/css/' + file + '.css'}}">
|
||||
|
||||
@@ -3,26 +3,26 @@
|
||||
<link rel="preload" href="/assets/fonts/ibm-plex-sans/ibm-plex-sans-v19-latin-700.woff2" as="font" type="font/woff2" crossorigin="anonymous">
|
||||
<link rel="preload" href="/assets/fonts/work-sans/work-sans-v19-latin-700.woff2" as="font" type="font/woff2" crossorigin="anonymous">
|
||||
<style>
|
||||
@font-face {
|
||||
font-display: swap;
|
||||
font-family: 'IBM Plex Sans';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
src: url('/assets/fonts/ibm-plex-sans/ibm-plex-sans-v19-latin-regular.woff2') format('woff2');
|
||||
}
|
||||
@font-face {
|
||||
font-display: swap;
|
||||
font-family: 'IBM Plex Sans';
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
src: url('/assets/fonts/ibm-plex-sans/ibm-plex-sans-v19-latin-700.woff2') format('woff2');
|
||||
}
|
||||
@font-face {
|
||||
font-display: swap;
|
||||
font-family: 'Work Sans';
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
src: url('/assets/fonts/work-sans/work-sans-v19-latin-700.woff2') format('woff2');
|
||||
}
|
||||
@font-face {
|
||||
font-display: swap;
|
||||
font-family: 'IBM Plex Sans';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
src: url('/assets/fonts/ibm-plex-sans/ibm-plex-sans-v19-latin-regular.woff2') format('woff2');
|
||||
}
|
||||
@font-face {
|
||||
font-display: swap;
|
||||
font-family: 'IBM Plex Sans';
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
src: url('/assets/fonts/ibm-plex-sans/ibm-plex-sans-v19-latin-700.woff2') format('woff2');
|
||||
}
|
||||
@font-face {
|
||||
font-display: swap;
|
||||
font-family: 'Work Sans';
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
src: url('/assets/fonts/work-sans/work-sans-v19-latin-700.woff2') format('woff2');
|
||||
}
|
||||
</style>
|
||||
<link rel="stylesheet" href="/assets/fonts/fonts.css">
|
||||
|
||||
@@ -1,49 +1,49 @@
|
||||
<footer class="footer">
|
||||
<h2 class="visually-hidden">Footer Navigation:</h2>
|
||||
<ul class="inline-list">
|
||||
<li>
|
||||
<a href="{{ sitemeta.feedPath }}">
|
||||
<svg class="inline-icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M0 64C0 46.3 14.3 32 32 32c229.8 0 416 186.2 416 416c0 17.7-14.3 32-32 32s-32-14.3-32-32C384 253.6 226.4 96 32 96C14.3 96 0 81.7 0 64zM0 416a64 64 0 1 1 128 0A64 64 0 1 1 0 416zM32 160c159.1 0 288 128.9 288 288c0 17.7-14.3 32-32 32s-32-14.3-32-32c0-123.7-100.3-224-224-224c-17.7 0-32-14.3-32-32s14.3-32 32-32z"/></svg>RSS Feed</a>
|
||||
</li>
|
||||
{{ for link of collections["footer links"] }}
|
||||
<li><a
|
||||
{{ if link.url == page.url }}aria-current="page"{{ /if }}
|
||||
href="{{ link.url }}"
|
||||
>{{ link.data.title }}</a></li>
|
||||
{{ /for }}
|
||||
{{ for statement of collections.statements }}
|
||||
<li><a
|
||||
{{ if statement.url == page.url }}aria-current="page"{{ /if }}
|
||||
href="{{ statement.url }}"
|
||||
>{{ statement.data.title }}</a></li>
|
||||
{{ /for }}
|
||||
</ul>
|
||||
<h2 class="visually-hidden">Footer Navigation:</h2>
|
||||
<ul class="inline-list">
|
||||
<li>
|
||||
<a href="{{ sitemeta.feedPath }}">
|
||||
<svg class="inline-icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M0 64C0 46.3 14.3 32 32 32c229.8 0 416 186.2 416 416c0 17.7-14.3 32-32 32s-32-14.3-32-32C384 253.6 226.4 96 32 96C14.3 96 0 81.7 0 64zM0 416a64 64 0 1 1 128 0A64 64 0 1 1 0 416zM32 160c159.1 0 288 128.9 288 288c0 17.7-14.3 32-32 32s-32-14.3-32-32c0-123.7-100.3-224-224-224c-17.7 0-32-14.3-32-32s14.3-32 32-32z"/></svg>RSS Feed</a>
|
||||
</li>
|
||||
{{ for link of collections["footer links"] }}
|
||||
<li><a
|
||||
{{ if link.url == page.url }}aria-current="page"{{ /if }}
|
||||
href="{{ link.url }}"
|
||||
>{{ link.data.title }}</a></li>
|
||||
{{ /for }}
|
||||
{{ for statement of collections.statements }}
|
||||
<li><a
|
||||
{{ if statement.url == page.url }}aria-current="page"{{ /if }}
|
||||
href="{{ statement.url }}"
|
||||
>{{ statement.data.title }}</a></li>
|
||||
{{ /for }}
|
||||
</ul>
|
||||
|
||||
<p>Made with 💜 by {{ sitemeta.siteAuthor.name }} • 2023–{{ currentYear }}</p>
|
||||
<p>Built with <a href="https://www.11ty.dev/">Eleventy</a> v{{ eleventy.version }} • <a href="https://git.helenchong.dev/helenchong/helenchong.dev" class="external-link">Source Code</a></p>
|
||||
<p>Made with 💜 by {{ sitemeta.siteAuthor.name }} • 2023–{{ currentYear }}</p>
|
||||
<p>Built with <a href="https://www.11ty.dev/">Eleventy</a> v{{ eleventy.version }} • <a href="https://git.helenchong.dev/helenchong/helenchong.dev" class="external-link">Source Code</a></p>
|
||||
|
||||
<div class="widgets site-btns">
|
||||
<img src="/assets/graphics/helenchong-88x31.svg" alt="88-by-31 badge: my favicon, the white letters HC, next to the word Helen Chong on a purple background." width="88" height="31" loading="lazy">
|
||||
</div>
|
||||
<div class="widgets site-btns">
|
||||
<img src="/assets/graphics/helenchong-88x31.svg" alt="88-by-31 badge: my favicon, the white letters HC, next to the word Helen Chong on a purple background." width="88" height="31" loading="lazy">
|
||||
</div>
|
||||
|
||||
{{ include "components/socials.vto" }}
|
||||
{{ include "components/socials.vto" }}
|
||||
|
||||
<div class="widgets"><a href="https://buymeacoffee.com/helenchong"><img src="/assets/graphics/buymeacoffee.png" alt="Buy Me a Coffee" width="200" height="56" loading="lazy"></a></div>
|
||||
<div class="widgets"><a href="https://buymeacoffee.com/helenchong"><img src="/assets/graphics/buymeacoffee.png" alt="Buy Me a Coffee" width="200" height="56" loading="lazy"></a></div>
|
||||
|
||||
{{ include "components/h-card.vto" }}
|
||||
{{ include "components/top-btn.vto" }}
|
||||
{{ include "components/h-card.vto" }}
|
||||
{{ include "components/top-btn.vto" }}
|
||||
</footer>
|
||||
|
||||
{{ css }}
|
||||
.footer {
|
||||
width: 100%;
|
||||
padding: 2em 1em clamp(2em, calc(100% - 3.5rem), 4em);
|
||||
text-align: center;
|
||||
display: flex;
|
||||
gap: 0.7em;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-tems: center;
|
||||
box-shadow: var(--bs-footer);
|
||||
width: 100%;
|
||||
padding: 2em 1em clamp(2em, calc(100% - 3.5rem), 4em);
|
||||
text-align: center;
|
||||
display: flex;
|
||||
gap: 0.7em;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-tems: center;
|
||||
box-shadow: var(--bs-footer);
|
||||
}
|
||||
{{ /css }}
|
||||
|
||||
@@ -4,57 +4,57 @@
|
||||
{{ set navPages = collections["header links"] |> eleventyNavigation }}
|
||||
{{ for entry of navPages }}
|
||||
<li><a
|
||||
{{ if entry.url == page.url }} aria-current="page"{{ /if }}
|
||||
class="header__link {{ if (currentUrl.includes('/blog') && entry.url.includes('/blog'))
|
||||
|| (currentUrl.includes('/projects') && entry.url.includes('/projects'))
|
||||
}} link--active{{ /if }}"
|
||||
href="{{ entry.url }}">
|
||||
{{ entry.title }}
|
||||
{{ if entry.url == page.url }} aria-current="page"{{ /if }}
|
||||
class="header__link {{ if (currentUrl.includes('/blog') && entry.url.includes('/blog'))
|
||||
|| (currentUrl.includes('/projects') && entry.url.includes('/projects'))
|
||||
}} link--active{{ /if }}"
|
||||
href="{{ entry.url }}">
|
||||
{{ entry.title }}
|
||||
</a></li>
|
||||
{{ /for }}
|
||||
{{ /set }}
|
||||
|
||||
<header class="header">
|
||||
<a class="header__title" {{ if currentUrl === '/' }}aria-current="page"{{ /if }} href="/">
|
||||
<img class="header__logo" src="/assets/favicon/HC-favicon.svg" alt="Helen Chong initials logo, to the home page">
|
||||
</a>
|
||||
<nav aria-labelledby="top-nav-title">
|
||||
<p class="visually-hidden" id="top-nav-title">Main</p>
|
||||
<ul class="header__navmenu header__links">{{ navLinks }}</ul>
|
||||
<button class="header__toggle" popovertarget="nav-menu" aria-label="Toggle navigation menu">
|
||||
<svg aria-hidden="true" focusable="false" width="1em" height="1em" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path d="M464 256A208 208 0 1 0 48 256a208 208 0 1 0 416 0zM0 256a256 256 0 1 1 512 0A256 256 0 1 1 0 256zm306.7 69.1L162.4 380.6c-19.4 7.5-38.5-11.6-31-31l55.5-144.3c3.3-8.5 9.9-15.1 18.4-18.4l144.3-55.5c19.4-7.5 38.5 11.6 31 31L325.1 306.7c-3.2 8.5-9.9 15.1-18.4 18.4zM288 256a32 32 0 1 0 -64 0 32 32 0 1 0 64 0z"/></svg>
|
||||
Explore
|
||||
</button>
|
||||
</nav>
|
||||
<div popover id="nav-menu" class="header__popover">
|
||||
<ul class="header__navmenu">{{ navLinks }}</ul>
|
||||
</div>
|
||||
<a class="header__title" {{ if currentUrl === '/' }}aria-current="page"{{ /if }} href="/">
|
||||
<img class="header__logo" src="/assets/favicon/HC-favicon.svg" alt="Helen Chong initials logo, to the home page">
|
||||
</a>
|
||||
<nav aria-labelledby="top-nav-title">
|
||||
<p class="visually-hidden" id="top-nav-title">Main</p>
|
||||
<ul class="header__navmenu header__links">{{ navLinks }}</ul>
|
||||
<button class="header__toggle" popovertarget="nav-menu" aria-label="Toggle navigation menu">
|
||||
<svg aria-hidden="true" focusable="false" width="1em" height="1em" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path d="M464 256A208 208 0 1 0 48 256a208 208 0 1 0 416 0zM0 256a256 256 0 1 1 512 0A256 256 0 1 1 0 256zm306.7 69.1L162.4 380.6c-19.4 7.5-38.5-11.6-31-31l55.5-144.3c3.3-8.5 9.9-15.1 18.4-18.4l144.3-55.5c19.4-7.5 38.5 11.6 31 31L325.1 306.7c-3.2 8.5-9.9 15.1-18.4 18.4zM288 256a32 32 0 1 0 -64 0 32 32 0 1 0 64 0z"/></svg>
|
||||
Explore
|
||||
</button>
|
||||
</nav>
|
||||
<div popover id="nav-menu" class="header__popover">
|
||||
<ul class="header__navmenu">{{ navLinks }}</ul>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
{{ css }}
|
||||
.header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.5em 1em;
|
||||
padding: 1rem 1.5rem;
|
||||
background-color: var(--clr-body-bg);
|
||||
box-shadow: var(--bs-main);
|
||||
z-index: 998;
|
||||
position: static;
|
||||
top: 0;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.5em 1em;
|
||||
padding: 1rem 1.5rem;
|
||||
background-color: var(--clr-body-bg);
|
||||
box-shadow: var(--bs-main);
|
||||
z-index: 998;
|
||||
position: static;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.header__title {
|
||||
color: var(--clr-accent-600);
|
||||
font-size: 2rem;
|
||||
margin: 0;
|
||||
color: var(--clr-accent-600);
|
||||
font-size: 2rem;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.header__logo {
|
||||
aspect-ratio: 1 / 1;
|
||||
height: 1.3em;
|
||||
aspect-ratio: 1 / 1;
|
||||
height: 1.3em;
|
||||
}
|
||||
|
||||
.header__title:hover > *,
|
||||
@@ -66,72 +66,72 @@
|
||||
.header__title:focus > * { transform: scale(1.25); }
|
||||
|
||||
.header__toggle {
|
||||
border: 0.125em solid var(--clr-accent-700);
|
||||
border-radius: 0.2em;
|
||||
background-color: var(--clr-body-bg);
|
||||
color: var(--clr-accent-700);
|
||||
font-size: 1.5rem;
|
||||
font-weight: 600;
|
||||
box-shadow: -4px 4px 0px var(--clr-accent-700);
|
||||
display: none;
|
||||
align-items: center;
|
||||
gap: 0.15em;
|
||||
padding-left: 0.25em;
|
||||
padding-right: 0.26em;
|
||||
border: 0.125em solid var(--clr-accent-700);
|
||||
border-radius: 0.2em;
|
||||
background-color: var(--clr-body-bg);
|
||||
color: var(--clr-accent-700);
|
||||
font-size: 1.5rem;
|
||||
font-weight: 600;
|
||||
box-shadow: -4px 4px 0px var(--clr-accent-700);
|
||||
display: none;
|
||||
align-items: center;
|
||||
gap: 0.15em;
|
||||
padding-left: 0.25em;
|
||||
padding-right: 0.26em;
|
||||
}
|
||||
|
||||
.header__toggle svg { fill: var(--clr-accent-700); }
|
||||
.header__toggle:focus {
|
||||
outline: 0.15em solid var(--clr-accent-700);
|
||||
outline-offset: 0.1em;
|
||||
outline: 0.15em solid var(--clr-accent-700);
|
||||
outline-offset: 0.1em;
|
||||
}
|
||||
|
||||
.header__navmenu {
|
||||
list-style-type: "";
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
font-weight: 600;
|
||||
color: var(--clr-accent-600);
|
||||
text-align: center;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.5em 1em;
|
||||
list-style-type: "";
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
font-weight: 600;
|
||||
color: var(--clr-accent-600);
|
||||
text-align: center;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.5em 1em;
|
||||
}
|
||||
|
||||
.header__links { display: flex; }
|
||||
|
||||
.header__popover {
|
||||
background-color: var(--clr-body-bg);
|
||||
border: 0.15em solid var(--clr-accent-600);
|
||||
padding: 1.5em;
|
||||
box-shadow: var(--bs-main);
|
||||
max-width: 80%;
|
||||
background-color: var(--clr-body-bg);
|
||||
border: 0.15em solid var(--clr-accent-600);
|
||||
padding: 1.5em;
|
||||
box-shadow: var(--bs-main);
|
||||
max-width: 80%;
|
||||
}
|
||||
|
||||
.header__popover::backdrop {
|
||||
background-color: black;
|
||||
opacity: 0.5;
|
||||
background-color: black;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.header__navmenu [aria-current="page"],
|
||||
.link--active { color: var(--clr-link-hover); }
|
||||
|
||||
.header__link {
|
||||
position: relative;
|
||||
font-size: 1.15em;
|
||||
text-decoration: none;
|
||||
position: relative;
|
||||
font-size: 1.15em;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.header__link::after {
|
||||
content: "";
|
||||
left: 0px;
|
||||
bottom: -4px;
|
||||
height: 2px;
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
background-color: var(--clr-link-hover);
|
||||
transform: scaleX(0);
|
||||
transition: transform 0.3s ease 0s;
|
||||
content: "";
|
||||
left: 0px;
|
||||
bottom: -4px;
|
||||
height: 2px;
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
background-color: var(--clr-link-hover);
|
||||
transform: scaleX(0);
|
||||
transition: transform 0.3s ease 0s;
|
||||
}
|
||||
|
||||
.header__link:hover::after,
|
||||
@@ -139,26 +139,26 @@
|
||||
.link--active::after { transform: scaleX(1); }
|
||||
|
||||
.header__link:focus {
|
||||
outline: 0.2em solid var(--clr-accent-600);
|
||||
outline-offset: 0.1em;
|
||||
outline: 0.2em solid var(--clr-accent-600);
|
||||
outline-offset: 0.1em;
|
||||
}
|
||||
|
||||
@supports selector([popover]) {
|
||||
.header__toggle { display: flex; }
|
||||
.header__links { display: none; }
|
||||
.header__navmenu { margin: 0; }
|
||||
.header { position: sticky; }
|
||||
.header__toggle { display: flex; }
|
||||
.header__links { display: none; }
|
||||
.header__navmenu { margin: 0; }
|
||||
.header { position: sticky; }
|
||||
}
|
||||
|
||||
/* For larger screen sizes */
|
||||
@media (min-width: 640px) {
|
||||
.header__title { margin-bottom: 0; }
|
||||
.header__title { margin-bottom: 0; }
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 530px) {
|
||||
.header { position: sticky; }
|
||||
.header__navmenu { margin: 0; }
|
||||
.header__toggle, .header__popover { display: none; }
|
||||
.header__links { display: flex; }
|
||||
.header { position: sticky; }
|
||||
.header__navmenu { margin: 0; }
|
||||
.header__toggle, .header__popover { display: none; }
|
||||
.header__links { display: flex; }
|
||||
}
|
||||
{{ /css }}
|
||||
|
||||
@@ -1,15 +1,15 @@
|
||||
<ul class="blog__postlist">
|
||||
{{ for post of postList }}
|
||||
<li>
|
||||
<p class="blog__postlist--title">
|
||||
<a href="{{ post.url }}">
|
||||
{{ if post.data.title }}{{ post.data.title }}
|
||||
{{ else }}
|
||||
<code>{{ post.url }}</code>
|
||||
{{ /if }}
|
||||
</a>
|
||||
</p>
|
||||
<p><time datetime="{{ post.date }}">{{ post.date |> formatDate }}</time></p>
|
||||
</li>
|
||||
{{ /for }}
|
||||
{{ for post of postList }}
|
||||
<li>
|
||||
<p class="blog__postlist--title">
|
||||
<a href="{{ post.url }}">
|
||||
{{ if post.data.title }}{{ post.data.title }}
|
||||
{{ else }}
|
||||
<code>{{ post.url }}</code>
|
||||
{{ /if }}
|
||||
</a>
|
||||
</p>
|
||||
<p><time datetime="{{ post.date }}">{{ post.date |> formatDate }}</time></p>
|
||||
</li>
|
||||
{{ /for }}
|
||||
</ul>
|
||||
|
||||
@@ -7,29 +7,29 @@
|
||||
|
||||
{{ for project of projectList }}
|
||||
<article class="project-card">
|
||||
<div class="project-card__image-wrapper">
|
||||
{{# <img src="{{ project.data.image }}" alt="{{ project.data.imageAlt }}"> #}}
|
||||
<img src="{{ src project.data.image }}"
|
||||
srcset="{{ srcset project.data.image }}"
|
||||
sizes="{{ resProjectImgSizes }}"
|
||||
alt="{{ project.data.imageAlt }}"
|
||||
width="{{ project.data.imageWidth }}"
|
||||
height="{{ project.data.imageHeight }}"
|
||||
loading="lazy"
|
||||
>
|
||||
</div>
|
||||
<div class="project-card__body">
|
||||
<div class="project-card__tags">
|
||||
{{ for tag of project.data.tech }}
|
||||
<span class="project-card__tag">{{ tag }}</span>
|
||||
{{ /for }}
|
||||
</div>
|
||||
<h{{headingLevel}} class="project-card__title">{{ project.data.title }}</h{{headingLevel}}>
|
||||
<p class="project-card__summary">{{ project.data.summary }}</p>
|
||||
<p>
|
||||
<svg aria-hidden="true" class="inline-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M438.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L338.8 224 32 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l306.7 0L233.4 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l160-160z"/></svg>
|
||||
<a class="project-card__link" href="{{ project.url }}">Project case study of {{ project.data.title }}</a>
|
||||
</p>
|
||||
</div>
|
||||
<div class="project-card__image-wrapper">
|
||||
{{# <img src="{{ project.data.image }}" alt="{{ project.data.imageAlt }}"> #}}
|
||||
<img src="{{ src project.data.image }}"
|
||||
srcset="{{ srcset project.data.image }}"
|
||||
sizes="{{ resProjectImgSizes }}"
|
||||
alt="{{ project.data.imageAlt }}"
|
||||
width="{{ project.data.imageWidth }}"
|
||||
height="{{ project.data.imageHeight }}"
|
||||
loading="lazy"
|
||||
>
|
||||
</div>
|
||||
<div class="project-card__body">
|
||||
<div class="project-card__tags">
|
||||
{{ for tag of project.data.tech }}
|
||||
<span class="project-card__tag">{{ tag }}</span>
|
||||
{{ /for }}
|
||||
</div>
|
||||
<h{{headingLevel}} class="project-card__title">{{ project.data.title }}</h{{headingLevel}}>
|
||||
<p class="project-card__summary">{{ project.data.summary }}</p>
|
||||
<p>
|
||||
<svg aria-hidden="true" class="inline-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M438.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L338.8 224 32 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l306.7 0L233.4 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l160-160z"/></svg>
|
||||
<a class="project-card__link" href="{{ project.url }}">Project case study of {{ project.data.title }}</a>
|
||||
</p>
|
||||
</div>
|
||||
</article>
|
||||
{{ /for }}
|
||||
|
||||
@@ -5,36 +5,36 @@
|
||||
.blog__cat--title { margin-bottom: 1em; }
|
||||
|
||||
.blog__nav--title {
|
||||
font-size: var(--fs-h3);
|
||||
margin-bottom: 0.3em;
|
||||
font-size: var(--fs-h3);
|
||||
margin-bottom: 0.3em;
|
||||
}
|
||||
|
||||
.blog__postlist--title {
|
||||
font-size: var(--fs-bloglist-title);
|
||||
font-weight: 700;
|
||||
font-size: var(--fs-bloglist-title);
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.blog__post--info {
|
||||
gap: 0.3em;
|
||||
font-size: var(--fs-main-txt);
|
||||
gap: 0.3em;
|
||||
font-size: var(--fs-main-txt);
|
||||
}
|
||||
.blog__post--desc { margin-bottom: 1em; }
|
||||
|
||||
.blog__post--pagination {
|
||||
padding-top: 0.8em;
|
||||
margin-top: 2.5em;
|
||||
border-top: 0.1em solid var(--clr-slate-600);
|
||||
padding-top: 0.8em;
|
||||
margin-top: 2.5em;
|
||||
border-top: 0.1em solid var(--clr-slate-600);
|
||||
}
|
||||
|
||||
.blog__post--nextprev {
|
||||
list-style-type: "";
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
display: grid;
|
||||
gap: 1em;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
grid-template-areas: 'prev next';
|
||||
list-style-type: "";
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
display: grid;
|
||||
gap: 1em;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
grid-template-areas: 'prev next';
|
||||
}
|
||||
|
||||
.blog__post--prev { grid-area: prev; }
|
||||
.blog__post--next { grid-area: next; }
|
||||
.blog__post--next { grid-area: next; }
|
||||
|
||||
@@ -1,63 +1,63 @@
|
||||
/* Skip to content button */
|
||||
.skip-btn a {
|
||||
position: absolute;
|
||||
display: inline-block;
|
||||
top: -1000px;
|
||||
left: 50%;
|
||||
transform: translate(-50%, 0);
|
||||
overflow: hidden;
|
||||
transition: top 0.5s ease;
|
||||
background: var(--clr-body-bg);
|
||||
z-index: 1000;
|
||||
font-size: 1.25rem;
|
||||
padding: 0.3em 0.7em;
|
||||
position: absolute;
|
||||
display: inline-block;
|
||||
top: -1000px;
|
||||
left: 50%;
|
||||
transform: translate(-50%, 0);
|
||||
overflow: hidden;
|
||||
transition: top 0.5s ease;
|
||||
background: var(--clr-body-bg);
|
||||
z-index: 1000;
|
||||
font-size: 1.25rem;
|
||||
padding: 0.3em 0.7em;
|
||||
}
|
||||
|
||||
.skip-btn a:focus {
|
||||
top: 0;
|
||||
transition: top 0.3s ease;
|
||||
outline: 0.2em solid var(--clr-accent-600);
|
||||
top: 0;
|
||||
transition: top 0.3s ease;
|
||||
outline: 0.2em solid var(--clr-accent-600);
|
||||
}
|
||||
|
||||
/* Inline lists */
|
||||
.inline-list {
|
||||
justify-self: center;
|
||||
list-style-type: "";
|
||||
text-align: center;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
gap: 0 var(--sz-list-gap);
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
justify-self: center;
|
||||
list-style-type: "";
|
||||
text-align: center;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
gap: 0 var(--sz-list-gap);
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.inline-list li:not(:last-child)::after {
|
||||
content: '•';
|
||||
padding-left: 0.5em;
|
||||
content: '•';
|
||||
padding-left: 0.5em;
|
||||
}
|
||||
|
||||
/* Web widgets */
|
||||
.widgets {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
}
|
||||
* + .widgets { margin-top: var(--sz-list-gap); }
|
||||
|
||||
/* Site buttons */
|
||||
.site-btns {
|
||||
align-items: center;
|
||||
gap: var(--sz-list-gap);
|
||||
align-items: center;
|
||||
gap: var(--sz-list-gap);
|
||||
}
|
||||
|
||||
/* Breadcumbs */
|
||||
.breadcrumbs {
|
||||
display: flex;
|
||||
gap: 0.5em;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
font-size: var(--fs-main-txt);
|
||||
display: flex;
|
||||
gap: 0.5em;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
font-size: var(--fs-main-txt);
|
||||
}
|
||||
|
||||
/* Remove external link icon from Website Carbon badge */
|
||||
@@ -65,19 +65,19 @@
|
||||
|
||||
/* Button to copy code snippets */
|
||||
.cc-btn {
|
||||
font-size: 0.8em;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.2em;
|
||||
border: 0.115em solid var(--clr-code-border);
|
||||
border-radius: 0.2em;
|
||||
font-size: 0.8em;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.2em;
|
||||
border: 0.115em solid var(--clr-code-border);
|
||||
border-radius: 0.2em;
|
||||
}
|
||||
|
||||
/* Social links */
|
||||
.socials {
|
||||
display: flex;
|
||||
padding: 0;
|
||||
gap: var(--sz-list-gap) 1.2em;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
display: flex;
|
||||
padding: 0;
|
||||
gap: var(--sz-list-gap) 1.2em;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
@@ -2,18 +2,18 @@
|
||||
content-wrapper { gap: 1rem; }
|
||||
|
||||
.main__header {
|
||||
padding: 3em var(--sz-main-padding);
|
||||
text-align: center;
|
||||
padding: 3em var(--sz-main-padding);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.prose {
|
||||
font-size: var(--fs-main-txt);
|
||||
color: var(--clr-slate-600);
|
||||
padding: 0 var(--sz-main-padding) var(--sz-content-bottom);
|
||||
font-size: var(--fs-main-txt);
|
||||
color: var(--clr-slate-600);
|
||||
padding: 0 var(--sz-main-padding) var(--sz-content-bottom);
|
||||
}
|
||||
|
||||
.prose > * + :not([class]:not([class*="language-"])) {
|
||||
margin-block-start: var(--sz-paragraph-margin);
|
||||
margin-block-start: var(--sz-paragraph-margin);
|
||||
}
|
||||
|
||||
.prose > * + h2, .prose > * + .h2,
|
||||
@@ -24,37 +24,37 @@ content-wrapper { gap: 1rem; }
|
||||
.right-sidebar { padding: 0 clamp(1em, 5%, 1.5em) var(--sz-content-bottom); }
|
||||
|
||||
.sidebar--sticky {
|
||||
position: sticky;
|
||||
top: 6em;
|
||||
position: sticky;
|
||||
top: 6em;
|
||||
}
|
||||
|
||||
/* Heading Wrapper and Anchor */
|
||||
.heading-wrapper {
|
||||
display: flex;
|
||||
gap: 0.3em;
|
||||
align-items: baseline;
|
||||
display: flex;
|
||||
gap: 0.3em;
|
||||
align-items: baseline;
|
||||
}
|
||||
|
||||
* + .heading-wrapper { margin-block-start: 1.8em; }
|
||||
|
||||
.heading-anchor {
|
||||
order: -1;
|
||||
text-underline-offset: 0.1em;
|
||||
order: -1;
|
||||
text-underline-offset: 0.1em;
|
||||
}
|
||||
|
||||
.heading-anchor:focus {
|
||||
outline: 0.13em solid currentColor;
|
||||
outline-offset: 0.05em;
|
||||
outline: 0.13em solid currentColor;
|
||||
outline-offset: 0.05em;
|
||||
}
|
||||
|
||||
/* Desktop main content layout */
|
||||
@media only screen and (min-width: 60rem) {
|
||||
content-wrapper {
|
||||
grid-template-areas: 'leftbar article rightbar';
|
||||
grid-template-columns: 1fr minmax(min(60ch, 40vw), 2.5fr) 1fr;
|
||||
}
|
||||
content-wrapper {
|
||||
grid-template-areas: 'leftbar article rightbar';
|
||||
grid-template-columns: 1fr minmax(min(60ch, 40vw), 2.5fr) 1fr;
|
||||
}
|
||||
|
||||
.prose { grid-area: article; }
|
||||
.left-sidebar { grid-area: leftbar; }
|
||||
.right-sidebar { grid-area: rightbar; }
|
||||
.prose { grid-area: article; }
|
||||
.left-sidebar { grid-area: leftbar; }
|
||||
.right-sidebar { grid-area: rightbar; }
|
||||
}
|
||||
|
||||
@@ -2,124 +2,124 @@
|
||||
.home--container { margin: 0 auto 2em; }
|
||||
|
||||
.section--home {
|
||||
display: grid;
|
||||
font-size: var(--fs-main-txt);
|
||||
padding: 2em 1em;
|
||||
display: grid;
|
||||
font-size: var(--fs-main-txt);
|
||||
padding: 2em 1em;
|
||||
}
|
||||
|
||||
.section--home,
|
||||
.profile {
|
||||
max-width: 65rem;
|
||||
font-size: var(--fs-main-txt);
|
||||
justify-self: center;
|
||||
max-width: 65rem;
|
||||
font-size: var(--fs-main-txt);
|
||||
justify-self: center;
|
||||
}
|
||||
|
||||
.profile {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 2em;
|
||||
margin-bottom: 3em;
|
||||
padding: 0 1em;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 2em;
|
||||
margin-bottom: 3em;
|
||||
padding: 0 1em;
|
||||
}
|
||||
|
||||
.profile__image-wrapper {
|
||||
display: grid;
|
||||
place-content: center;
|
||||
display: grid;
|
||||
place-content: center;
|
||||
}
|
||||
|
||||
.profile__image-wrapper img {
|
||||
width: 250px;
|
||||
height: 250px;
|
||||
border-radius: 9999px;
|
||||
width: 250px;
|
||||
height: 250px;
|
||||
border-radius: 9999px;
|
||||
}
|
||||
|
||||
.profile__card {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.profile__text {
|
||||
margin-bottom: 1rem;
|
||||
color: var(--clr-slate-600);
|
||||
margin-bottom: 1rem;
|
||||
color: var(--clr-slate-600);
|
||||
}
|
||||
|
||||
.profile__text--lead {
|
||||
font-weight: 500;
|
||||
font-size: var(--fs-profile);
|
||||
font-weight: 500;
|
||||
font-size: var(--fs-profile);
|
||||
}
|
||||
|
||||
.profile__text--highlight {
|
||||
font-weight: bold;
|
||||
font-size: var(--fs-profile);
|
||||
color: var(--clr-accent-600);
|
||||
font-weight: bold;
|
||||
font-size: var(--fs-profile);
|
||||
color: var(--clr-accent-600);
|
||||
}
|
||||
|
||||
.profile__text--emphasis {
|
||||
font-weight: bold;
|
||||
font-size: 1.125rem;
|
||||
font-weight: bold;
|
||||
font-size: 1.125rem;
|
||||
}
|
||||
|
||||
.profile__link { font-weight: bold; }
|
||||
|
||||
/* For larger screen sizes */
|
||||
@media (min-width: 640px) {
|
||||
.profile {
|
||||
flex-direction: row;
|
||||
padding: 0 1em;
|
||||
}
|
||||
.profile {
|
||||
flex-direction: row;
|
||||
padding: 0 1em;
|
||||
}
|
||||
}
|
||||
|
||||
/* Home headings */
|
||||
.home__title {
|
||||
text-align: center;
|
||||
margin-top: 1em;
|
||||
margin-bottom: 0.7em;
|
||||
padding: 0 1em;
|
||||
text-align: center;
|
||||
margin-top: 1em;
|
||||
margin-bottom: 0.7em;
|
||||
padding: 0 1em;
|
||||
}
|
||||
|
||||
.heading--home {
|
||||
margin-bottom: 0.8em;
|
||||
text-align: center;
|
||||
margin-bottom: 0.8em;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* Home button links */
|
||||
.home__btn-link {
|
||||
display: block;
|
||||
margin: 1.3em auto 0;
|
||||
border: 0.15em solid currentColor;
|
||||
text-decoration: none;
|
||||
padding: 0.5em 1em;
|
||||
border-radius: 0.5em;
|
||||
font-weight: 700;
|
||||
display: block;
|
||||
margin: 1.3em auto 0;
|
||||
border: 0.15em solid currentColor;
|
||||
text-decoration: none;
|
||||
padding: 0.5em 1em;
|
||||
border-radius: 0.5em;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.home__btn-link:focus {
|
||||
outline: 0.2em solid var(--clr-accent-700);
|
||||
outline-offset: 0.15em;
|
||||
outline: 0.2em solid var(--clr-accent-700);
|
||||
outline-offset: 0.15em;
|
||||
}
|
||||
|
||||
/* Webrings and Badges */
|
||||
.widgets.webrings {
|
||||
gap: 2em;
|
||||
margin-top: 1.5em;
|
||||
gap: 2em;
|
||||
margin-top: 1.5em;
|
||||
}
|
||||
|
||||
.widgets.webrings h3 {
|
||||
font-size: 1.5rem;
|
||||
margin-bottom: 0.7em;
|
||||
font-size: 1.5rem;
|
||||
margin-bottom: 0.7em;
|
||||
}
|
||||
|
||||
.widgets.directories {
|
||||
padding: 0;
|
||||
gap: var(--sz-list-gap) 1.2em;
|
||||
padding: 0;
|
||||
gap: var(--sz-list-gap) 1.2em;
|
||||
}
|
||||
|
||||
.home__badges {
|
||||
--badge-gap: 0.5em;
|
||||
gap: var(--badge-gap);
|
||||
margin-bottom: var(--badge-gap);
|
||||
align-items: center;
|
||||
}
|
||||
--badge-gap: 0.5em;
|
||||
gap: var(--badge-gap);
|
||||
margin-bottom: var(--badge-gap);
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
@@ -1,97 +1,97 @@
|
||||
/* Project Styles */
|
||||
.project__heading {
|
||||
padding: 1rem 0;
|
||||
font-size: 2.5rem;
|
||||
padding: 1rem 0;
|
||||
font-size: 2.5rem;
|
||||
}
|
||||
|
||||
.project-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
||||
gap: 2rem;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
||||
gap: 2rem;
|
||||
}
|
||||
|
||||
.project-card {
|
||||
box-shadow: var(--bs-main);
|
||||
border-radius: 0.5em;
|
||||
border: 0.15em solid var(--clr-accent-700);
|
||||
box-shadow: var(--bs-main);
|
||||
border-radius: 0.5em;
|
||||
border: 0.15em solid var(--clr-accent-700);
|
||||
}
|
||||
|
||||
.project-card__image-wrapper img {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
border-top-left-radius: 0.375em;
|
||||
border-top-right-radius: 0.375em;
|
||||
transition: transform 0.3s ease 0s;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
border-top-left-radius: 0.375em;
|
||||
border-top-right-radius: 0.375em;
|
||||
transition: transform 0.3s ease 0s;
|
||||
}
|
||||
|
||||
.project-card__image-wrapper:hover img {
|
||||
transform: scale(1.05);
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
.project-card__body { padding: 1em; }
|
||||
|
||||
.project-card__title {
|
||||
margin-bottom: 1rem;
|
||||
font-size: 1.7rem;
|
||||
line-height: 1.3;
|
||||
margin-bottom: 1rem;
|
||||
font-size: 1.7rem;
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
.project-card__title a:focus { outline: 0.15em solid var(--clr-txt-default); }
|
||||
|
||||
.project-card__tags {
|
||||
margin-bottom: 1rem;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.5em;
|
||||
margin-bottom: 1rem;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.5em;
|
||||
}
|
||||
|
||||
.project-card__tag {
|
||||
display: flex;
|
||||
padding: 0.25rem 0.5rem;
|
||||
border-radius: 9999px;
|
||||
font-size: 0.7em;
|
||||
background-color: var(--clr-accent-100);
|
||||
color: var(--clr-accent-800);
|
||||
display: flex;
|
||||
padding: 0.25rem 0.5rem;
|
||||
border-radius: 9999px;
|
||||
font-size: 0.7em;
|
||||
background-color: var(--clr-accent-100);
|
||||
color: var(--clr-accent-800);
|
||||
}
|
||||
|
||||
.project-card__summary {
|
||||
margin-bottom: 1rem;
|
||||
color: var(--clr-slate-600);
|
||||
margin-bottom: 1rem;
|
||||
color: var(--clr-slate-600);
|
||||
}
|
||||
|
||||
.project-card__link {
|
||||
font-weight: 600;
|
||||
color: var(--clr-accent-600);
|
||||
margin-bottom: 0.6em;
|
||||
font-weight: 600;
|
||||
color: var(--clr-accent-600);
|
||||
margin-bottom: 0.6em;
|
||||
}
|
||||
|
||||
.project-card__link:focus { outline: 0.15em solid var(--clr-accent-700); }
|
||||
|
||||
.project-card__link-icon {
|
||||
display: inline-block;
|
||||
vertical-align: text-bottom;
|
||||
width: auto;
|
||||
height: 1.2em;
|
||||
margin-left: -0.2em;
|
||||
display: inline-block;
|
||||
vertical-align: text-bottom;
|
||||
width: auto;
|
||||
height: 1.2em;
|
||||
margin-left: -0.2em;
|
||||
}
|
||||
|
||||
/* Project Page Styles */
|
||||
.project-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 3rem;
|
||||
max-width: 42rem;
|
||||
margin: 0 auto 4rem auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 3rem;
|
||||
max-width: 42rem;
|
||||
margin: 0 auto 4rem auto;
|
||||
}
|
||||
|
||||
.project--page {
|
||||
margin: 0 auto;
|
||||
max-width: 60rem;
|
||||
margin: 0 auto;
|
||||
max-width: 60rem;
|
||||
}
|
||||
|
||||
.project__image-wrapper { margin-bottom: 1.5rem; }
|
||||
|
||||
.project__image-wrapper img {
|
||||
margin-bottom: 2rem;
|
||||
border-radius: 0.25rem;
|
||||
}
|
||||
margin-bottom: 2rem;
|
||||
border-radius: 0.25rem;
|
||||
}
|
||||
|
||||
@@ -1,9 +1,9 @@
|
||||
/* Utility Classes */
|
||||
.heading--main {
|
||||
padding: 1rem 0;
|
||||
font-size: var(--fs-h1);
|
||||
font-weight: 700;
|
||||
color: var(--clr-accent-600);
|
||||
padding: 1rem 0;
|
||||
font-size: var(--fs-h1);
|
||||
font-weight: 700;
|
||||
color: var(--clr-accent-600);
|
||||
}
|
||||
|
||||
.text-center { text-align: center; }
|
||||
@@ -13,30 +13,30 @@
|
||||
.update-info { margin-top: 3em; }
|
||||
|
||||
.inline-icon {
|
||||
display: inline-block;
|
||||
vertical-align: -10%;
|
||||
height: 0.9em;
|
||||
fill: currentColor;
|
||||
display: inline-block;
|
||||
vertical-align: -10%;
|
||||
height: 0.9em;
|
||||
fill: currentColor;
|
||||
}
|
||||
a > .inline-icon { padding-inline-end: .25em; }
|
||||
|
||||
.grid-center {
|
||||
display: grid;
|
||||
place-content: center;
|
||||
display: grid;
|
||||
place-content: center;
|
||||
}
|
||||
|
||||
.hidden { display: none; }
|
||||
|
||||
.visually-hidden {
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
padding: 0;
|
||||
margin: -1px;
|
||||
overflow: hidden;
|
||||
clip: rect(0,0,0,0);
|
||||
white-space: nowrap;
|
||||
border: 0;
|
||||
outline: 0;
|
||||
outline-offset: 0;
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
padding: 0;
|
||||
margin: -1px;
|
||||
overflow: hidden;
|
||||
clip: rect(0,0,0,0);
|
||||
white-space: nowrap;
|
||||
border: 0;
|
||||
outline: 0;
|
||||
outline-offset: 0;
|
||||
}
|
||||
|
||||
@@ -1,63 +1,63 @@
|
||||
/*
|
||||
Based on ttntm's code to add a button to copy code snippets:
|
||||
https://ttntm.me/blog/adding-a-copy-button-to-code-blocks/
|
||||
Based on ttntm's code to add a button to copy code snippets:
|
||||
https://ttntm.me/blog/adding-a-copy-button-to-code-blocks/
|
||||
*/
|
||||
|
||||
function createCopyBtn(blockIndex) {
|
||||
return `<div class="cc-wrapper d-none d-sm-block">
|
||||
<button class="cc-btn btn-muted shadow" data-target="${blockIndex}">
|
||||
<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="icon"><path stroke="none"d="M0 0h24v24H0z"fill="none"/><path d="M9 5h-2a2 2 0 0 0 -2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-12a2 2 0 0 0 -2 -2h-2"/><path d="M9 3m0 2a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v0a2 2 0 0 1 -2 2h-2a2 2 0 0 1 -2 -2z"/></svg>
|
||||
Copy Code
|
||||
</button>
|
||||
</div>`;
|
||||
return `<div class="cc-wrapper d-none d-sm-block">
|
||||
<button class="cc-btn btn-muted shadow" data-target="${blockIndex}">
|
||||
<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="icon"><path stroke="none"d="M0 0h24v24H0z"fill="none"/><path d="M9 5h-2a2 2 0 0 0 -2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-12a2 2 0 0 0 -2 -2h-2"/><path d="M9 3m0 2a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v0a2 2 0 0 1 -2 2h-2a2 2 0 0 1 -2 -2z"/></svg>
|
||||
Copy Code
|
||||
</button>
|
||||
</div>`;
|
||||
}
|
||||
|
||||
async function copyCode(block) {
|
||||
const code = document.querySelector(`[data-block-id="${block}"]`);
|
||||
const doCopy = async() => await navigator.clipboard.writeText(code?.innerText ?? '');
|
||||
const code = document.querySelector(`[data-block-id="${block}"]`);
|
||||
const doCopy = async() => await navigator.clipboard.writeText(code?.innerText ?? '');
|
||||
|
||||
if (!navigator.userAgent.includes('Firefox')) {
|
||||
const result = await navigator.permissions.query({ name: 'clipboard-write' });
|
||||
if (!navigator.userAgent.includes('Firefox')) {
|
||||
const result = await navigator.permissions.query({ name: 'clipboard-write' });
|
||||
|
||||
if (result.state === 'granted' || result.state === 'prompt') {
|
||||
doCopy();
|
||||
}
|
||||
} else {
|
||||
doCopy();
|
||||
}
|
||||
if (result.state === 'granted' || result.state === 'prompt') {
|
||||
doCopy();
|
||||
}
|
||||
} else {
|
||||
doCopy();
|
||||
}
|
||||
}
|
||||
|
||||
async function handleCopyBtnClick(event) {
|
||||
const btn = event?.target;
|
||||
const btnTarget = btn?.getAttribute('data-target');
|
||||
const btn = event?.target;
|
||||
const btnTarget = btn?.getAttribute('data-target');
|
||||
|
||||
if (btn && btnTarget) {
|
||||
const originalText = btn.innerHTML;
|
||||
if (btn && btnTarget) {
|
||||
const originalText = btn.innerHTML;
|
||||
|
||||
await copyCode(btnTarget);
|
||||
await copyCode(btnTarget);
|
||||
|
||||
btn.innerHTML = '<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="icon"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M9 5h-2a2 2 0 0 0 -2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-12a2 2 0 0 0 -2 -2h-2" /><path d="M9 3m0 2a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v0a2 2 0 0 1 -2 2h-2a2 2 0 0 1 -2 -2z" /><path d="M9 14l2 2l4 -4" /></svg> Copied!';
|
||||
btn.innerHTML = '<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="icon"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M9 5h-2a2 2 0 0 0 -2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-12a2 2 0 0 0 -2 -2h-2" /><path d="M9 3m0 2a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v0a2 2 0 0 1 -2 2h-2a2 2 0 0 1 -2 -2z" /><path d="M9 14l2 2l4 -4" /></svg> Copied!';
|
||||
|
||||
setTimeout(() => {
|
||||
btn.innerHTML = originalText;
|
||||
}, 1500);
|
||||
}
|
||||
setTimeout(() => {
|
||||
btn.innerHTML = originalText;
|
||||
}, 1500);
|
||||
}
|
||||
}
|
||||
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
const allCodeBlocks = Array.from(document.querySelectorAll('pre[class^="language-"]'));
|
||||
const allCodeBlocks = Array.from(document.querySelectorAll('pre[class^="language-"]'));
|
||||
|
||||
allCodeBlocks.forEach((b, i) => {
|
||||
const code = b.childNodes[0];
|
||||
const codeBlockIndex = `cb-${i}`;
|
||||
allCodeBlocks.forEach((b, i) => {
|
||||
const code = b.childNodes[0];
|
||||
const codeBlockIndex = `cb-${i}`;
|
||||
|
||||
b.insertAdjacentHTML('afterend', createCopyBtn(codeBlockIndex));
|
||||
code.setAttribute('data-block-id', codeBlockIndex);
|
||||
})
|
||||
b.insertAdjacentHTML('afterend', createCopyBtn(codeBlockIndex));
|
||||
code.setAttribute('data-block-id', codeBlockIndex);
|
||||
})
|
||||
|
||||
const allCopyBtns = Array.from(document.querySelectorAll('.cc-btn'));
|
||||
const allCopyBtns = Array.from(document.querySelectorAll('.cc-btn'));
|
||||
|
||||
allCopyBtns.forEach((btn) => {
|
||||
btn.addEventListener('click', handleCopyBtnClick);
|
||||
})
|
||||
})
|
||||
allCopyBtns.forEach((btn) => {
|
||||
btn.addEventListener('click', handleCopyBtnClick);
|
||||
})
|
||||
})
|
||||
|
||||
@@ -1,3 +1,3 @@
|
||||
export default {
|
||||
tags: "blog pages"
|
||||
}
|
||||
tags: "blog pages"
|
||||
}
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
export default {
|
||||
layout: "layouts/slashpage",
|
||||
tags: "footer links"
|
||||
layout: "layouts/slashpage",
|
||||
tags: "footer links"
|
||||
}
|
||||
|
||||
@@ -7,12 +7,12 @@ toc: true
|
||||
|
||||
{{ function linkRoll(siteName, siteUrl, feedUrl) }}
|
||||
<li>
|
||||
<a href="{{ siteUrl }}">{{ siteName }}</a>
|
||||
{{ if feedUrl }}
|
||||
<a href="{{ feedUrl }}" class="linkroll__feed">
|
||||
<svg class="inline-icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M0 64C0 46.3 14.3 32 32 32c229.8 0 416 186.2 416 416c0 17.7-14.3 32-32 32s-32-14.3-32-32C384 253.6 226.4 96 32 96C14.3 96 0 81.7 0 64zM0 416a64 64 0 1 1 128 0A64 64 0 1 1 0 416zM32 160c159.1 0 288 128.9 288 288c0 17.7-14.3 32-32 32s-32-14.3-32-32c0-123.7-100.3-224-224-224c-17.7 0-32-14.3-32-32s14.3-32 32-32z"/></svg>
|
||||
Feed</a>
|
||||
{{ /if }}
|
||||
<a href="{{ siteUrl }}">{{ siteName }}</a>
|
||||
{{ if feedUrl }}
|
||||
<a href="{{ feedUrl }}" class="linkroll__feed">
|
||||
<svg class="inline-icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M0 64C0 46.3 14.3 32 32 32c229.8 0 416 186.2 416 416c0 17.7-14.3 32-32 32s-32-14.3-32-32C384 253.6 226.4 96 32 96C14.3 96 0 81.7 0 64zM0 416a64 64 0 1 1 128 0A64 64 0 1 1 0 416zM32 160c159.1 0 288 128.9 288 288c0 17.7-14.3 32-32 32s-32-14.3-32-32c0-123.7-100.3-224-224-224c-17.7 0-32-14.3-32-32s14.3-32 32-32z"/></svg>
|
||||
Feed</a>
|
||||
{{ /if }}
|
||||
</li>
|
||||
{{ /function }}
|
||||
|
||||
@@ -20,233 +20,233 @@ toc: true
|
||||
|
||||
{{ headingAnchor 3 }}Developers and Tech People{{ /headingAnchor }}
|
||||
<ul>
|
||||
{{ linkRoll("Adrian Roselli", "https://adrianroselli.com/",
|
||||
"https://adrianroselli.com/feed"
|
||||
) }}
|
||||
{{ linkRoll("Ahmad Shadeed", "https://ishadeed.com/",
|
||||
"https://ishadeed.com/feed.xml"
|
||||
) }}
|
||||
{{ linkRoll("Aleksandr Hovhannisyan", "https://www.aleksandrhovhannisyan.com/",
|
||||
"https://www.aleksandrhovhannisyan.com/feed.xml"
|
||||
) }}
|
||||
{{ linkRoll("Alex Chan", "https://alexwlchan.net/",
|
||||
"https://alexwlchan.net/atom.xml"
|
||||
) }}
|
||||
{{ linkRoll("Alex Russell", "https://infrequently.org/",
|
||||
"https://infrequently.org/feed/"
|
||||
) }}
|
||||
{{ linkRoll("Andy Bell", "https://andy-bell.co.uk/",
|
||||
"https://andy-bell.co.uk/feed.xml"
|
||||
) }}
|
||||
{{ linkRoll("Angie Jones", "https://angiejones.tech/") }}
|
||||
{{ linkRoll("Ben Myers", "https://benmyers.dev/",
|
||||
"https://benmyers.dev/feed.xml"
|
||||
) }}
|
||||
{{ linkRoll("Blake Watson", "https://blakewatson.com/",
|
||||
"https://blakewatson.com/feed.xml"
|
||||
) }}
|
||||
{{ linkRoll("Bob Monsour", "https://www.bobmonsour.com/",
|
||||
"https://www.bobmonsour.com/feed.xml"
|
||||
) }}
|
||||
{{ linkRoll("Chen Hui Jing", "https://chenhuijing.com/",
|
||||
"https://chenhuijing.com/feed.xml"
|
||||
) }}
|
||||
{{ linkRoll("Chris Burnell", "https://chrisburnell.com/",
|
||||
"https://chrisburnell.com/feed.xml"
|
||||
) }}
|
||||
{{ linkRoll("Chris Coyier", "https://chriscoyier.net/",
|
||||
"https://chriscoyier.net/feed/"
|
||||
) }}
|
||||
{{ linkRoll("David Bushell", "https://dbushell.com/",
|
||||
"https://dbushell.com/rss.xml"
|
||||
) }}
|
||||
{{ linkRoll("Cory Dransfeldt", "https://coryd.dev/",
|
||||
"https://feedpress.me/coryd-all"
|
||||
) }}
|
||||
{{ linkRoll("Elly Loel", "https://ellyloel.com/",
|
||||
"https://www.ellyloel.com/feed.atom"
|
||||
) }}
|
||||
{{ linkRoll("Eric Bailey", "https://ericwbailey.website/",
|
||||
"https://ericwbailey.website/feed/feed.xml"
|
||||
) }}
|
||||
{{ linkRoll("Fynn Becker", "https://fynn.be/",
|
||||
"https://fynn.be/feed.xml"
|
||||
) }}
|
||||
{{ linkRoll("Heather Buchel", "https://heather-buchel.com/",
|
||||
"https://heather-buchel.com/feed/feed.xml"
|
||||
) }}
|
||||
{{ linkRoll("Heydon Pickering", "https://heydonworks.com/",
|
||||
"https://heydonworks.com/feed.xml"
|
||||
) }}
|
||||
{{ linkRoll("Hidde de Vries", "https://hidde.blog/",
|
||||
"https://hidde.blog/feed"
|
||||
) }}
|
||||
{{ linkRoll("Jens Oliver Meiert", "https://meiert.com/en/",
|
||||
"https://meiert.com/en/feed/"
|
||||
) }}
|
||||
{{ linkRoll("Josh Collinsworth", "https://joshcollinsworth.com/",
|
||||
"https://joshcollinsworth.com/api/rss.xml"
|
||||
) }}
|
||||
{{ linkRoll("Josh W. Comeau", "https://www.joshwcomeau.com/",
|
||||
"https://www.joshwcomeau.com/rss.xml"
|
||||
) }}
|
||||
{{ linkRoll("Karolina Szczur", "https://karolinaszczur.com/",
|
||||
"https://karolinaszczur.com/feed/feed.xml"
|
||||
) }}
|
||||
{{ linkRoll("Kitty Giraudel", "https://kittygiraudel.com/",
|
||||
"https://kittygiraudel.com/rss/index.xml"
|
||||
) }}
|
||||
{{ linkRoll("Lea Rosema", "https://lea.codes/",
|
||||
"https://lea.codes/rss.xml"
|
||||
) }}
|
||||
{{ linkRoll("Lene Saile", "https://www.lenesaile.com/",
|
||||
"https://www.lenesaile.com/en/feed.xml"
|
||||
) }}
|
||||
{{ linkRoll("Manuel Matuzović", "https://www.matuzo.at/",
|
||||
"https://www.matuzo.at/feed_all.xml"
|
||||
) }}
|
||||
{{ linkRoll("Melanie Kat", "https://melkat.blog/",
|
||||
"https://melkat.blog/rss.xml"
|
||||
) }}
|
||||
{{ linkRoll("Mayank", "https://www.mayank.co/",
|
||||
"https://mayank.co/blog/rss.xml"
|
||||
) }}
|
||||
{{ linkRoll("Miriam Eric Suzanne", "https://www.miriamsuzanne.com/",
|
||||
"https://www.miriamsuzanne.com/feed.xml"
|
||||
) }}
|
||||
{{ linkRoll("Mu-An Chiou", "https://muan.co/",
|
||||
"https://muan.co/notes.xml"
|
||||
) }}
|
||||
{{ linkRoll("Nic Chan", "https://www.nicchan.me/",
|
||||
"https://www.nicchan.me/feed.xml"
|
||||
) }}
|
||||
{{ linkRoll("Olu Niyi-Awosusi", "https://olu.online/",
|
||||
"https://olu.online/feed/"
|
||||
) }}
|
||||
{{ linkRoll("Robb Knight", "https://rknight.me/",
|
||||
"https://rknight.me/subscribe/everything/atom.xml"
|
||||
) }}
|
||||
{{ linkRoll("Robb Owen", "http://robbowen.digital/",
|
||||
"https://robbowen.digital/feed.xml"
|
||||
) }}
|
||||
{{ linkRoll("Sara Joy", "https://sarajoy.dev/",
|
||||
"https://sarajoy.dev/rss.xml"
|
||||
) }}
|
||||
{{ linkRoll("Seirdy", "https://seirdy.one/",
|
||||
"https://seirdy.one/atom.xml"
|
||||
) }}
|
||||
{{ linkRoll("Sia Karamalegos", "https://sia.codes/",
|
||||
"https://sia.codes/feed/feed.xml"
|
||||
) }}
|
||||
{{ linkRoll("Sara Soueidan", "https://sarasoueidan.com/",
|
||||
"https://www.sarasoueidan.com/blog/index.xml"
|
||||
) }}
|
||||
{{ linkRoll("Scott O’Hara", "https://scottohara.me/",
|
||||
"https://www.scottohara.me/feed.xml"
|
||||
) }}
|
||||
{{ linkRoll("Stefan Bohacek", "https://stefanbohacek.com/",
|
||||
"https://stefanbohacek.com/feed"
|
||||
) }}
|
||||
{{ linkRoll("Stephanie Eckles", "https://thinkdobecreate.com/",
|
||||
"https://thinkdobecreate.com/feed/"
|
||||
) }}
|
||||
{{ linkRoll("Steven Woodson", "https://stevenwoodson.com/",
|
||||
"https://stevenwoodson.com/feed/feed.xml"
|
||||
) }}
|
||||
{{ linkRoll("Tyler Sticka", "https://tylersticka.com/",
|
||||
"https://tylersticka.com/journal/feed.xml"
|
||||
) }}
|
||||
{{ linkRoll("Zach Leatherman", "https://www.zachleat.com/",
|
||||
"https://www.zachleat.com/web/feed/"
|
||||
) }}
|
||||
{{ linkRoll("Adrian Roselli", "https://adrianroselli.com/",
|
||||
"https://adrianroselli.com/feed"
|
||||
) }}
|
||||
{{ linkRoll("Ahmad Shadeed", "https://ishadeed.com/",
|
||||
"https://ishadeed.com/feed.xml"
|
||||
) }}
|
||||
{{ linkRoll("Aleksandr Hovhannisyan", "https://www.aleksandrhovhannisyan.com/",
|
||||
"https://www.aleksandrhovhannisyan.com/feed.xml"
|
||||
) }}
|
||||
{{ linkRoll("Alex Chan", "https://alexwlchan.net/",
|
||||
"https://alexwlchan.net/atom.xml"
|
||||
) }}
|
||||
{{ linkRoll("Alex Russell", "https://infrequently.org/",
|
||||
"https://infrequently.org/feed/"
|
||||
) }}
|
||||
{{ linkRoll("Andy Bell", "https://andy-bell.co.uk/",
|
||||
"https://andy-bell.co.uk/feed.xml"
|
||||
) }}
|
||||
{{ linkRoll("Angie Jones", "https://angiejones.tech/") }}
|
||||
{{ linkRoll("Ben Myers", "https://benmyers.dev/",
|
||||
"https://benmyers.dev/feed.xml"
|
||||
) }}
|
||||
{{ linkRoll("Blake Watson", "https://blakewatson.com/",
|
||||
"https://blakewatson.com/feed.xml"
|
||||
) }}
|
||||
{{ linkRoll("Bob Monsour", "https://www.bobmonsour.com/",
|
||||
"https://www.bobmonsour.com/feed.xml"
|
||||
) }}
|
||||
{{ linkRoll("Chen Hui Jing", "https://chenhuijing.com/",
|
||||
"https://chenhuijing.com/feed.xml"
|
||||
) }}
|
||||
{{ linkRoll("Chris Burnell", "https://chrisburnell.com/",
|
||||
"https://chrisburnell.com/feed.xml"
|
||||
) }}
|
||||
{{ linkRoll("Chris Coyier", "https://chriscoyier.net/",
|
||||
"https://chriscoyier.net/feed/"
|
||||
) }}
|
||||
{{ linkRoll("David Bushell", "https://dbushell.com/",
|
||||
"https://dbushell.com/rss.xml"
|
||||
) }}
|
||||
{{ linkRoll("Cory Dransfeldt", "https://coryd.dev/",
|
||||
"https://feedpress.me/coryd-all"
|
||||
) }}
|
||||
{{ linkRoll("Elly Loel", "https://ellyloel.com/",
|
||||
"https://www.ellyloel.com/feed.atom"
|
||||
) }}
|
||||
{{ linkRoll("Eric Bailey", "https://ericwbailey.website/",
|
||||
"https://ericwbailey.website/feed/feed.xml"
|
||||
) }}
|
||||
{{ linkRoll("Fynn Becker", "https://fynn.be/",
|
||||
"https://fynn.be/feed.xml"
|
||||
) }}
|
||||
{{ linkRoll("Heather Buchel", "https://heather-buchel.com/",
|
||||
"https://heather-buchel.com/feed/feed.xml"
|
||||
) }}
|
||||
{{ linkRoll("Heydon Pickering", "https://heydonworks.com/",
|
||||
"https://heydonworks.com/feed.xml"
|
||||
) }}
|
||||
{{ linkRoll("Hidde de Vries", "https://hidde.blog/",
|
||||
"https://hidde.blog/feed"
|
||||
) }}
|
||||
{{ linkRoll("Jens Oliver Meiert", "https://meiert.com/en/",
|
||||
"https://meiert.com/en/feed/"
|
||||
) }}
|
||||
{{ linkRoll("Josh Collinsworth", "https://joshcollinsworth.com/",
|
||||
"https://joshcollinsworth.com/api/rss.xml"
|
||||
) }}
|
||||
{{ linkRoll("Josh W. Comeau", "https://www.joshwcomeau.com/",
|
||||
"https://www.joshwcomeau.com/rss.xml"
|
||||
) }}
|
||||
{{ linkRoll("Karolina Szczur", "https://karolinaszczur.com/",
|
||||
"https://karolinaszczur.com/feed/feed.xml"
|
||||
) }}
|
||||
{{ linkRoll("Kitty Giraudel", "https://kittygiraudel.com/",
|
||||
"https://kittygiraudel.com/rss/index.xml"
|
||||
) }}
|
||||
{{ linkRoll("Lea Rosema", "https://lea.codes/",
|
||||
"https://lea.codes/rss.xml"
|
||||
) }}
|
||||
{{ linkRoll("Lene Saile", "https://www.lenesaile.com/",
|
||||
"https://www.lenesaile.com/en/feed.xml"
|
||||
) }}
|
||||
{{ linkRoll("Manuel Matuzović", "https://www.matuzo.at/",
|
||||
"https://www.matuzo.at/feed_all.xml"
|
||||
) }}
|
||||
{{ linkRoll("Melanie Kat", "https://melkat.blog/",
|
||||
"https://melkat.blog/rss.xml"
|
||||
) }}
|
||||
{{ linkRoll("Mayank", "https://www.mayank.co/",
|
||||
"https://mayank.co/blog/rss.xml"
|
||||
) }}
|
||||
{{ linkRoll("Miriam Eric Suzanne", "https://www.miriamsuzanne.com/",
|
||||
"https://www.miriamsuzanne.com/feed.xml"
|
||||
) }}
|
||||
{{ linkRoll("Mu-An Chiou", "https://muan.co/",
|
||||
"https://muan.co/notes.xml"
|
||||
) }}
|
||||
{{ linkRoll("Nic Chan", "https://www.nicchan.me/",
|
||||
"https://www.nicchan.me/feed.xml"
|
||||
) }}
|
||||
{{ linkRoll("Olu Niyi-Awosusi", "https://olu.online/",
|
||||
"https://olu.online/feed/"
|
||||
) }}
|
||||
{{ linkRoll("Robb Knight", "https://rknight.me/",
|
||||
"https://rknight.me/subscribe/everything/atom.xml"
|
||||
) }}
|
||||
{{ linkRoll("Robb Owen", "http://robbowen.digital/",
|
||||
"https://robbowen.digital/feed.xml"
|
||||
) }}
|
||||
{{ linkRoll("Sara Joy", "https://sarajoy.dev/",
|
||||
"https://sarajoy.dev/rss.xml"
|
||||
) }}
|
||||
{{ linkRoll("Seirdy", "https://seirdy.one/",
|
||||
"https://seirdy.one/atom.xml"
|
||||
) }}
|
||||
{{ linkRoll("Sia Karamalegos", "https://sia.codes/",
|
||||
"https://sia.codes/feed/feed.xml"
|
||||
) }}
|
||||
{{ linkRoll("Sara Soueidan", "https://sarasoueidan.com/",
|
||||
"https://www.sarasoueidan.com/blog/index.xml"
|
||||
) }}
|
||||
{{ linkRoll("Scott O’Hara", "https://scottohara.me/",
|
||||
"https://www.scottohara.me/feed.xml"
|
||||
) }}
|
||||
{{ linkRoll("Stefan Bohacek", "https://stefanbohacek.com/",
|
||||
"https://stefanbohacek.com/feed"
|
||||
) }}
|
||||
{{ linkRoll("Stephanie Eckles", "https://thinkdobecreate.com/",
|
||||
"https://thinkdobecreate.com/feed/"
|
||||
) }}
|
||||
{{ linkRoll("Steven Woodson", "https://stevenwoodson.com/",
|
||||
"https://stevenwoodson.com/feed/feed.xml"
|
||||
) }}
|
||||
{{ linkRoll("Tyler Sticka", "https://tylersticka.com/",
|
||||
"https://tylersticka.com/journal/feed.xml"
|
||||
) }}
|
||||
{{ linkRoll("Zach Leatherman", "https://www.zachleat.com/",
|
||||
"https://www.zachleat.com/web/feed/"
|
||||
) }}
|
||||
</ul>
|
||||
|
||||
{{ headingAnchor 3 }}Software and Web Development{{ /headingAnchor }}
|
||||
<ul>
|
||||
{{ linkRoll("The 11ty Bundle Blog", "https://11tybundle.dev/blog/",
|
||||
"https://11tybundle.dev/feed.xml"
|
||||
) }}
|
||||
{{ linkRoll("The 11ty Bundle Firehose", "https://11tybundle.dev/",
|
||||
"https://11tybundle.dev/firehosefeed.xml"
|
||||
) }}
|
||||
{{ linkRoll("Cloud Four", "https://cloudfour.com/",
|
||||
"https://cloudfour.com/feed/"
|
||||
) }}
|
||||
{{ linkRoll("CSS { In Real Life }", "https://css-irl.info/",
|
||||
"https://css-irl.info/rss.xml"
|
||||
) }}
|
||||
{{ linkRoll("CSS-Tricks", "https://css-tricks.com/",
|
||||
"https://css-tricks.com/feed/"
|
||||
) }}
|
||||
{{ linkRoll("Eleventy Firehose", "https://www.11ty.dev/firehose/",
|
||||
"https://www.11ty.dev/firehose/firehose.rss"
|
||||
) }}
|
||||
{{ linkRoll("THE Eleventy Meetup", "https://11tymeetup.dev/",
|
||||
"https://11tymeetup.dev/feed.xml"
|
||||
) }}
|
||||
{{ linkRoll("FED Mentor", "https://fedmentor.dev/",
|
||||
"https://fedmentor.dev/feed/feed.xml"
|
||||
) }}
|
||||
{{ linkRoll("freeCodeCamp.org", "https://www.freecodecamp.org/news/",
|
||||
"https://www.freecodecamp.org/news/rss/"
|
||||
) }}
|
||||
{{ linkRoll("Frontend Dogma", "https://frontenddogma.com/",
|
||||
"https://frontenddogma.com/feed/"
|
||||
) }}
|
||||
{{ linkRoll("Go Make Things", "https://gomakethings.com/",
|
||||
"https://gomakethings.com/feed/index.xml"
|
||||
) }}
|
||||
{{ linkRoll("HTMHell", "https://www.htmhell.dev/",
|
||||
"https://www.htmhell.dev/feed.xml"
|
||||
) }}
|
||||
{{ linkRoll("Inclusive Components", "https://inclusive-components.design/",
|
||||
"https://inclusive-components.design/rss"
|
||||
) }}
|
||||
{{ linkRoll("Kevin Powell", "https://www.kevinpowell.co/") }}
|
||||
{{ linkRoll("Modern CSS Solutions", "https://moderncss.dev/",
|
||||
"https://moderncss.dev/feed/"
|
||||
) }}
|
||||
{{ linkRoll("Neatnik Notes", "https://notes.neatnik.net/",
|
||||
"https://notes.neatnik.net/atom.xml"
|
||||
) }}
|
||||
{{ linkRoll("Piccalilli", "https://piccalil.li/",
|
||||
"https://piccalil.li/feed.xml"
|
||||
) }}
|
||||
{{ linkRoll("The Spicy Web", "https://www.spicyweb.dev/",
|
||||
"https://www.spicyweb.dev/feed.xml"
|
||||
) }}
|
||||
{{ linkRoll("Plain Vanilla", "https://www.spicyweb.dev/",
|
||||
"https://plainvanillaweb.com/blog/feed.xml"
|
||||
) }}
|
||||
{{ linkRoll("Smashing Magazine", "https://www.smashingmagazine.com/",
|
||||
"https://www.smashingmagazine.com/feed/"
|
||||
) }}
|
||||
{{ linkRoll("WordPress Accessibility Day", "https://wpaccessibility.day/",
|
||||
"https://wpaccessibility.day/feed/"
|
||||
) }}
|
||||
{{ linkRoll("The 11ty Bundle Blog", "https://11tybundle.dev/blog/",
|
||||
"https://11tybundle.dev/feed.xml"
|
||||
) }}
|
||||
{{ linkRoll("The 11ty Bundle Firehose", "https://11tybundle.dev/",
|
||||
"https://11tybundle.dev/firehosefeed.xml"
|
||||
) }}
|
||||
{{ linkRoll("Cloud Four", "https://cloudfour.com/",
|
||||
"https://cloudfour.com/feed/"
|
||||
) }}
|
||||
{{ linkRoll("CSS { In Real Life }", "https://css-irl.info/",
|
||||
"https://css-irl.info/rss.xml"
|
||||
) }}
|
||||
{{ linkRoll("CSS-Tricks", "https://css-tricks.com/",
|
||||
"https://css-tricks.com/feed/"
|
||||
) }}
|
||||
{{ linkRoll("Eleventy Firehose", "https://www.11ty.dev/firehose/",
|
||||
"https://www.11ty.dev/firehose/firehose.rss"
|
||||
) }}
|
||||
{{ linkRoll("THE Eleventy Meetup", "https://11tymeetup.dev/",
|
||||
"https://11tymeetup.dev/feed.xml"
|
||||
) }}
|
||||
{{ linkRoll("FED Mentor", "https://fedmentor.dev/",
|
||||
"https://fedmentor.dev/feed/feed.xml"
|
||||
) }}
|
||||
{{ linkRoll("freeCodeCamp.org", "https://www.freecodecamp.org/news/",
|
||||
"https://www.freecodecamp.org/news/rss/"
|
||||
) }}
|
||||
{{ linkRoll("Frontend Dogma", "https://frontenddogma.com/",
|
||||
"https://frontenddogma.com/feed/"
|
||||
) }}
|
||||
{{ linkRoll("Go Make Things", "https://gomakethings.com/",
|
||||
"https://gomakethings.com/feed/index.xml"
|
||||
) }}
|
||||
{{ linkRoll("HTMHell", "https://www.htmhell.dev/",
|
||||
"https://www.htmhell.dev/feed.xml"
|
||||
) }}
|
||||
{{ linkRoll("Inclusive Components", "https://inclusive-components.design/",
|
||||
"https://inclusive-components.design/rss"
|
||||
) }}
|
||||
{{ linkRoll("Kevin Powell", "https://www.kevinpowell.co/") }}
|
||||
{{ linkRoll("Modern CSS Solutions", "https://moderncss.dev/",
|
||||
"https://moderncss.dev/feed/"
|
||||
) }}
|
||||
{{ linkRoll("Neatnik Notes", "https://notes.neatnik.net/",
|
||||
"https://notes.neatnik.net/atom.xml"
|
||||
) }}
|
||||
{{ linkRoll("Piccalilli", "https://piccalil.li/",
|
||||
"https://piccalil.li/feed.xml"
|
||||
) }}
|
||||
{{ linkRoll("The Spicy Web", "https://www.spicyweb.dev/",
|
||||
"https://www.spicyweb.dev/feed.xml"
|
||||
) }}
|
||||
{{ linkRoll("Plain Vanilla", "https://www.spicyweb.dev/",
|
||||
"https://plainvanillaweb.com/blog/feed.xml"
|
||||
) }}
|
||||
{{ linkRoll("Smashing Magazine", "https://www.smashingmagazine.com/",
|
||||
"https://www.smashingmagazine.com/feed/"
|
||||
) }}
|
||||
{{ linkRoll("WordPress Accessibility Day", "https://wpaccessibility.day/",
|
||||
"https://wpaccessibility.day/feed/"
|
||||
) }}
|
||||
</ul>
|
||||
|
||||
{{ headingAnchor 2 }}Podroll{{ /headingAnchor }}
|
||||
<ul>
|
||||
{{ linkRoll("freeCodeCamp Podcast", "https://freecodecamp.libsyn.com/",
|
||||
"http://feeds.libsyn.com/110110/rss"
|
||||
) }}
|
||||
{{ linkRoll("The Scrimba Podcast", "https://podcast.scrimba.com/",
|
||||
"https://feeds.transistor.fm/scrimba"
|
||||
) }}
|
||||
{{ linkRoll("Underrepresented in Tech", "https://www.underrepresentedintech.com/",
|
||||
"https://www.underrepresentedintech.com/feed/"
|
||||
) }}
|
||||
{{ linkRoll("freeCodeCamp Podcast", "https://freecodecamp.libsyn.com/",
|
||||
"http://feeds.libsyn.com/110110/rss"
|
||||
) }}
|
||||
{{ linkRoll("The Scrimba Podcast", "https://podcast.scrimba.com/",
|
||||
"https://feeds.transistor.fm/scrimba"
|
||||
) }}
|
||||
{{ linkRoll("Underrepresented in Tech", "https://www.underrepresentedintech.com/",
|
||||
"https://www.underrepresentedintech.com/feed/"
|
||||
) }}
|
||||
</ul>
|
||||
|
||||
{{ css }}
|
||||
.linkroll__feed {
|
||||
display: inline-block;
|
||||
background-color: var(--clr-accent-100);
|
||||
font-size: 0.8em;
|
||||
padding: 0.1em 0.4em;
|
||||
border-radius: 0.2em;
|
||||
text-decoration: none;
|
||||
margin-left: 0.2em;
|
||||
display: inline-block;
|
||||
background-color: var(--clr-accent-100);
|
||||
font-size: 0.8em;
|
||||
padding: 0.1em 0.4em;
|
||||
border-radius: 0.2em;
|
||||
text-decoration: none;
|
||||
margin-left: 0.2em;
|
||||
}
|
||||
{{ /css }}
|
||||
|
||||
@@ -16,19 +16,19 @@ eleventyNavigation:
|
||||
|
||||
<p>Aside from the email contact form below, you can contact me through these othermethods:</p>
|
||||
<ul>
|
||||
<li>Email me directly to <a rel="nofollow, noindex" href="{{ sitemeta.siteAuthor.emailDecoyUrl }}">{{ sitemeta.siteAuthor.emailEncoded }}</a> (<a href=https://keys.openpgp.org/search?q=contact%40helenchong.dev>PGP key</a>)</li>
|
||||
<li>Fediverse: Ping me or send me a private mention to my Mastodon account at <a href="{{ sitemeta.siteAuthor.fediverse.url }}">{{ sitemeta.siteAuthor.fediverse.handle }}</a></li>
|
||||
<li>Signal: Message <code>{{ sitemeta.siteAuthor.signal }}</code></li>
|
||||
<li>Email me directly to <a rel="nofollow, noindex" href="{{ sitemeta.siteAuthor.emailDecoyUrl }}">{{ sitemeta.siteAuthor.emailEncoded }}</a> (<a href=https://keys.openpgp.org/search?q=contact%40helenchong.dev>PGP key</a>)</li>
|
||||
<li>Fediverse: Ping me or send me a private mention to my Mastodon account at <a href="{{ sitemeta.siteAuthor.fediverse.url }}">{{ sitemeta.siteAuthor.fediverse.handle }}</a></li>
|
||||
<li>Signal: Message <code>{{ sitemeta.siteAuthor.signal }}</code></li>
|
||||
</ul>
|
||||
|
||||
<h2>Email Contact Form</h2>
|
||||
{{ set letterbirdUser = "helenchongdev" }}
|
||||
<section class="contact">
|
||||
<script data-letterbirduser="{{ letterbirdUser }}" src="https://letterbird.co/embed/v1.js"></script>
|
||||
<noscript>
|
||||
<h3>You Have Disabled JavaScript</h3>
|
||||
<p>Looks like you have disabled JavaScript, preventing this contact form from being displayed on this page. You may visit <a href="https://letterbird.co/{{ letterbirdUser }}">my Letterbird contact form page</a> to reach out to me.</p>
|
||||
</noscript>
|
||||
<script data-letterbirduser="{{ letterbirdUser }}" src="https://letterbird.co/embed/v1.js"></script>
|
||||
<noscript>
|
||||
<h3>You Have Disabled JavaScript</h3>
|
||||
<p>Looks like you have disabled JavaScript, preventing this contact form from being displayed on this page. You may visit <a href="https://letterbird.co/{{ letterbirdUser }}">my Letterbird contact form page</a> to reach out to me.</p>
|
||||
</noscript>
|
||||
</section>
|
||||
|
||||
{{ css }}.contact { margin-top: 1em; }{{ /css }}
|
||||
|
||||
@@ -1,3 +1,3 @@
|
||||
export default {
|
||||
tags: "header links"
|
||||
}
|
||||
tags: "header links"
|
||||
}
|
||||
|
||||
@@ -7,6 +7,6 @@ eleventyNavigation:
|
||||
---
|
||||
|
||||
<div class="project-list">
|
||||
{{ set projectList = collections.projects }}
|
||||
{{ include "partials/project-card.vto" }}
|
||||
{{ set projectList = collections.projects }}
|
||||
{{ include "partials/project-card.vto" }}
|
||||
</div>
|
||||
|
||||
@@ -14,8 +14,8 @@ eleventyNavigation:
|
||||
<p>I spoke at <a href=https://11tymeetup.dev/events/ep-27-11ty-at-the-museum-and-multilingual-blogs/>Episode 27 of THE Eleventy Meetup</a>, by sharing my experience with building a multilingual blog using Eleventy.</p>
|
||||
|
||||
<ul>
|
||||
<li><a href=https://www.youtube.com/watch?v=9VmjX0muGkk>Watch my talk on YouTube</a></li>
|
||||
<li><a href=/blog/posts/2025-10-17-eleventy-meetup-27/>Read my write-up on Episode 19 of THE Eleventy Meetup</a></li>
|
||||
<li><a href=https://www.youtube.com/watch?v=9VmjX0muGkk>Watch my talk on YouTube</a></li>
|
||||
<li><a href=/blog/posts/2025-10-17-eleventy-meetup-27/>Read my write-up on Episode 19 of THE Eleventy Meetup</a></li>
|
||||
</ul>
|
||||
|
||||
<h2><a href=https://11tymeetup.dev/>THE Eleventy Meetup</a>: <a href=https://11tymeetup.dev/events/ep-19-migrating-to-3-0-and-blogging-with-storyblok/>Eleventy Journey From 2.0 to 3.0</a></h2>
|
||||
@@ -25,6 +25,6 @@ eleventyNavigation:
|
||||
<p>I spoke at <a href=https://11tymeetup.dev/events/ep-19-migrating-to-3-0-and-blogging-with-storyblok/>Episode 19 of THE Eleventy Meetup</a>, by sharing my experience with using Eleventy, including the decision and process of upgrading from Eleventy 2.0 to 3.0.</p>
|
||||
|
||||
<ul>
|
||||
<li><a href=https://www.youtube.com/watch?v=qgFNl_oAyQY>Watch my talk on YouTube</a></li>
|
||||
<li><a href=/blog/posts/2024-09-27-eleventy-meetup-19-first-talk/>Read my write-up on Episode 19 of THE Eleventy Meetup</a></li>
|
||||
<li><a href=https://www.youtube.com/watch?v=qgFNl_oAyQY>Watch my talk on YouTube</a></li>
|
||||
<li><a href=/blog/posts/2024-09-27-eleventy-meetup-19-first-talk/>Read my write-up on Episode 19 of THE Eleventy Meetup</a></li>
|
||||
</ul>
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
export default {
|
||||
tags: "pages",
|
||||
layout: "layouts/content",
|
||||
permalink: "/{{ page.fileSlug }}/"
|
||||
tags: "pages",
|
||||
layout: "layouts/content",
|
||||
permalink: "/{{ page.fileSlug }}/"
|
||||
}
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
export default {
|
||||
layout: "layouts/slashpage",
|
||||
tags: "statements",
|
||||
eleventyComputed: {
|
||||
desc: (data) => `${data.sitemeta.siteAuthor.name}'s ${data.keyword}.`
|
||||
}
|
||||
layout: "layouts/slashpage",
|
||||
tags: "statements",
|
||||
eleventyComputed: {
|
||||
desc: (data) => `${data.sitemeta.siteAuthor.name}'s ${data.keyword}.`
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,10 +1,10 @@
|
||||
export default {
|
||||
layout: "layouts/project",
|
||||
tags: "projects",
|
||||
eleventyComputed: {
|
||||
eleventyNavigation: {
|
||||
key: (data) => data.title,
|
||||
parent: "Projects"
|
||||
}
|
||||
}
|
||||
layout: "layouts/project",
|
||||
tags: "projects",
|
||||
eleventyComputed: {
|
||||
eleventyNavigation: {
|
||||
key: (data) => data.title,
|
||||
parent: "Projects"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -9,7 +9,7 @@ eleventyExcludeFromCollections: true
|
||||
<loc>{{ sitemeta.siteUrl + item.url }}</loc>
|
||||
<lastmod>{{ item.updated ? item.updated.toISOString() : item.date.toISOString() }}</lastmod>
|
||||
<changefreq>{{ item.data.sitemap.changefreq }}</changefreq>
|
||||
<priority>{{ item.data.sitemap.priority }}</priority>
|
||||
<priority>{{ item.data.sitemap.priority }}</priority>
|
||||
</url>
|
||||
{{ /for }}
|
||||
</urlset>
|
||||
|
||||
Reference in New Issue
Block a user