Add audio embed feature
This commit is contained in:
parent
bfdb9f8419
commit
a908843984
@ -28,6 +28,7 @@ My blog, originally based on the very helpful eleventy-base-blog v8, although it
|
||||
* Mastodon comment
|
||||
* Profile picture
|
||||
* Embedded toot
|
||||
* Embed audio
|
||||
|
||||
### Quality of Life
|
||||
* Copyright notice, default post image, alt text, and author details defined in `metadata.js`.
|
||||
|
||||
@ -2,32 +2,43 @@ import { DateTime } from "luxon";
|
||||
import markdownIt from "markdown-it";
|
||||
import markdownItFootnote from "markdown-it-footnote";
|
||||
import markdownItAnchor from "markdown-it-anchor";
|
||||
import mdfigcaption from 'markdown-it-image-figures';
|
||||
import mdfigcaption from "markdown-it-image-figures";
|
||||
import pluginRss from "@11ty/eleventy-plugin-rss";
|
||||
import pluginSyntaxHighlight from "@11ty/eleventy-plugin-syntaxhighlight";
|
||||
import pluginBundle from "@11ty/eleventy-plugin-bundle";
|
||||
import pluginNavigation from "@11ty/eleventy-navigation";
|
||||
import prettier from "prettier";
|
||||
import { EleventyHtmlBasePlugin } from "@11ty/eleventy";
|
||||
import {dateSuffixAdder, monthMap, timeFormatter} from "./public/js/modules/mastodonDateTools.js";
|
||||
import {
|
||||
dateSuffixAdder,
|
||||
monthMap,
|
||||
timeFormatter,
|
||||
} from "./public/js/modules/mastodonDateTools.js";
|
||||
|
||||
const figoptions = {
|
||||
figcaption: true
|
||||
figcaption: true,
|
||||
};
|
||||
|
||||
export default async function(eleventyConfig) {
|
||||
|
||||
export default async function (eleventyConfig) {
|
||||
// Helper Functions
|
||||
const multiReplace = (text, replacementTable) => {
|
||||
let newText = text;
|
||||
replacementTable.forEach(x => { newText = newText.replace(x[0], x[1]) });
|
||||
replacementTable.forEach((x) => {
|
||||
newText = newText.replace(x[0], x[1]);
|
||||
});
|
||||
return newText;
|
||||
};
|
||||
|
||||
// Transforms
|
||||
eleventyConfig.addTransform("prettier", function (content, outputPath) {
|
||||
if (outputPath && outputPath.endsWith(".html")) {
|
||||
return prettier.format(content, {parser: "html", bracketSameLine: true, vueIndentScriptAndStyle: true, singleAttributePerLine: true, htmlWhitespaceSensitivity: "css"});
|
||||
return prettier.format(content, {
|
||||
parser: "html",
|
||||
bracketSameLine: true,
|
||||
vueIndentScriptAndStyle: true,
|
||||
singleAttributePerLine: true,
|
||||
htmlWhitespaceSensitivity: "css",
|
||||
});
|
||||
} else {
|
||||
return content;
|
||||
}
|
||||
@ -38,7 +49,7 @@ export default async function(eleventyConfig) {
|
||||
// Official plugins
|
||||
eleventyConfig.addPlugin(pluginRss);
|
||||
eleventyConfig.addPlugin(pluginSyntaxHighlight, {
|
||||
preAttributes: { tabindex: 0 }
|
||||
preAttributes: { tabindex: 0 },
|
||||
});
|
||||
eleventyConfig.addPlugin(pluginNavigation);
|
||||
eleventyConfig.addPlugin(EleventyHtmlBasePlugin);
|
||||
@ -47,37 +58,42 @@ export default async function(eleventyConfig) {
|
||||
// Filters
|
||||
eleventyConfig.addFilter("readableDate", (dateObj, format, zone) => {
|
||||
// Formatting tokens for Luxon: https://moment.github.io/luxon/#/formatting?id=table-of-tokens
|
||||
return DateTime.fromJSDate(dateObj, { zone: zone || "utc" }).toFormat(format || "dd LLLL yyyy");
|
||||
return DateTime.fromJSDate(dateObj, { zone: zone || "utc" }).toFormat(
|
||||
format || "dd LLLL yyyy",
|
||||
);
|
||||
});
|
||||
|
||||
eleventyConfig.addFilter('htmlDateString', (dateObj) => {
|
||||
eleventyConfig.addFilter("htmlDateString", (dateObj) => {
|
||||
// dateObj input: https://html.spec.whatwg.org/multipage/common-microsyntaxes.html#valid-date-string
|
||||
return DateTime.fromJSDate(dateObj, { zone: 'utc' }).toFormat('yyyy-LL-dd');
|
||||
return DateTime.fromJSDate(dateObj, { zone: "utc" }).toFormat("yyyy-LL-dd");
|
||||
});
|
||||
|
||||
eleventyConfig.addFilter("removeMostRecent", arr => {
|
||||
return arr.slice(0, arr.length-1);
|
||||
eleventyConfig.addFilter("removeMostRecent", (arr) => {
|
||||
return arr.slice(0, arr.length - 1);
|
||||
});
|
||||
|
||||
// Shortcodes
|
||||
|
||||
// Cowsay
|
||||
eleventyConfig.addFilter("cowsay", cowText => {
|
||||
eleventyConfig.addFilter("cowsay", (cowText) => {
|
||||
const cowCaptionReplacementTable = [
|
||||
[`
|
||||
[
|
||||
`
|
||||
o ^__^
|
||||
o (oo)\\_______
|
||||
(__)\\ )\\/\\
|
||||
||----w |
|
||||
|| ||`, ''],
|
||||
[/\(\s+/g, ''],
|
||||
[/\s+\(/g, ''],
|
||||
[/_{3,}/g, ''],
|
||||
[/-{3,}/g, ''],
|
||||
[/\s\)/g, ''],
|
||||
[/\n/g, ''],
|
||||
[/\s{2,}/g, ' '],
|
||||
[/^ /, '']
|
||||
|| ||`,
|
||||
"",
|
||||
],
|
||||
[/\(\s+/g, ""],
|
||||
[/\s+\(/g, ""],
|
||||
[/_{3,}/g, ""],
|
||||
[/-{3,}/g, ""],
|
||||
[/\s\)/g, ""],
|
||||
[/\n/g, ""],
|
||||
[/\s{2,}/g, " "],
|
||||
[/^ /, ""],
|
||||
];
|
||||
|
||||
return `
|
||||
@ -92,10 +108,8 @@ export default async function(eleventyConfig) {
|
||||
});
|
||||
|
||||
// Embed a toot
|
||||
eleventyConfig.addAsyncShortcode("toot", async function(instance, ID) {
|
||||
const tootData = await fetch(
|
||||
`https://${instance}/api/v1/statuses/${ID}`
|
||||
);
|
||||
eleventyConfig.addAsyncShortcode("toot", async function (instance, ID) {
|
||||
const tootData = await fetch(`https://${instance}/api/v1/statuses/${ID}`);
|
||||
|
||||
const toot = await tootData.json();
|
||||
|
||||
@ -114,12 +128,29 @@ export default async function(eleventyConfig) {
|
||||
publish_date="${dateTime}"
|
||||
sharp_corner="">
|
||||
</wc-toot>
|
||||
`
|
||||
`;
|
||||
});
|
||||
|
||||
// Embed audio
|
||||
eleventyConfig.addShortcode(
|
||||
"audio",
|
||||
function (title, artist, media_url, cover_url) {
|
||||
return `
|
||||
<wc-card>
|
||||
<wc-mplayer
|
||||
title="${title}"
|
||||
artist="${artist}"
|
||||
media_url="${media_url}"
|
||||
cover_url="${cover_url}"
|
||||
/>
|
||||
</wc-card>
|
||||
`;
|
||||
},
|
||||
);
|
||||
|
||||
// Passthrough
|
||||
|
||||
eleventyConfig.addPassthroughCopy({ './public/': "/" });
|
||||
eleventyConfig.addPassthroughCopy({ "./public/": "/" });
|
||||
|
||||
// Get the first `n` elements of a collection.
|
||||
eleventyConfig.addFilter("head", (array, n) => {
|
||||
@ -139,62 +170,59 @@ export default async function(eleventyConfig) {
|
||||
});
|
||||
|
||||
// Return all the tags used in a collection
|
||||
eleventyConfig.addFilter("getAllTags", collection => {
|
||||
eleventyConfig.addFilter("getAllTags", (collection) => {
|
||||
let tagSet = new Set();
|
||||
for (let item of collection) {
|
||||
(item.data.tags || []).forEach(tag => tagSet.add(tag));
|
||||
(item.data.tags || []).forEach((tag) => tagSet.add(tag));
|
||||
}
|
||||
return Array.from(tagSet);
|
||||
});
|
||||
|
||||
eleventyConfig.addFilter("filterTagList", function filterTagList(tags) {
|
||||
return (tags || []).filter(tag => ["all", "nav", "post", "posts"].indexOf(tag) === -1);
|
||||
return (tags || []).filter(
|
||||
(tag) => ["all", "nav", "post", "posts"].indexOf(tag) === -1,
|
||||
);
|
||||
});
|
||||
|
||||
// Customize Markdown library settings:
|
||||
let markdownItOptions = {
|
||||
html: true,
|
||||
typographer: true
|
||||
typographer: true,
|
||||
};
|
||||
|
||||
let mdLib = markdownIt(markdownItOptions);
|
||||
|
||||
eleventyConfig.amendLibrary("md", mdLib => {
|
||||
eleventyConfig.amendLibrary("md", (mdLib) => {
|
||||
mdLib
|
||||
.use(markdownItAnchor, {
|
||||
permalink: markdownItAnchor.permalink.ariaHidden({
|
||||
placement: "after",
|
||||
class: "header-anchor",
|
||||
symbol: "#",
|
||||
ariaHidden: false
|
||||
}),
|
||||
level: [1, 2, 3, 4],
|
||||
slugify: eleventyConfig.getFilter("slugify")
|
||||
})
|
||||
.use(markdownItFootnote)
|
||||
.use(mdfigcaption, figoptions);
|
||||
.use(markdownItAnchor, {
|
||||
permalink: markdownItAnchor.permalink.ariaHidden({
|
||||
placement: "after",
|
||||
class: "header-anchor",
|
||||
symbol: "#",
|
||||
ariaHidden: false,
|
||||
}),
|
||||
level: [1, 2, 3, 4],
|
||||
slugify: eleventyConfig.getFilter("slugify"),
|
||||
})
|
||||
.use(markdownItFootnote)
|
||||
.use(mdfigcaption, figoptions);
|
||||
});
|
||||
|
||||
eleventyConfig.setLibrary("md", mdLib);
|
||||
|
||||
return {
|
||||
templateFormats: [
|
||||
"md",
|
||||
"njk",
|
||||
"html",
|
||||
"liquid",
|
||||
],
|
||||
templateFormats: ["md", "njk", "html", "liquid"],
|
||||
|
||||
markdownTemplateEngine: "njk",
|
||||
|
||||
htmlTemplateEngine: "njk",
|
||||
|
||||
dir: {
|
||||
input: "content", // default: "."
|
||||
includes: "../_includes", // default: "_includes"
|
||||
data: "../_data", // default: "_data"
|
||||
output: "_site"
|
||||
input: "content", // default: "."
|
||||
includes: "../_includes", // default: "_includes"
|
||||
data: "../_data", // default: "_data"
|
||||
output: "_site",
|
||||
},
|
||||
pathPrefix: "/",
|
||||
};
|
||||
};
|
||||
}
|
||||
|
||||
@ -219,6 +219,9 @@ code {
|
||||
background-color: var(--card-color);
|
||||
}
|
||||
}
|
||||
.links-nextprev > .postlist-item-container {
|
||||
grid-column: var(--span-grid);
|
||||
}
|
||||
header,
|
||||
footer,
|
||||
main {
|
||||
@ -448,6 +451,52 @@ table th {
|
||||
padding-right: 1em;
|
||||
}
|
||||
|
||||
/* Audio Player */
|
||||
wc-mplayer {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
wc-mplayer::part(artist) {
|
||||
font-size: var(--meta-font-size);
|
||||
}
|
||||
|
||||
wc-mplayer::part(cover),
|
||||
wc-mplayer::part(coverContainer) {
|
||||
width: var(--space-3xl);
|
||||
height: var(--space-3xl);
|
||||
border-radius: var(--border-radius);
|
||||
}
|
||||
|
||||
wc-mplayer::part(captionAndPlayer) {
|
||||
display: flex;
|
||||
flex-flow: column nowrap;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
wc-mplayer::part(main) {
|
||||
border-radius: var(--border-radius);
|
||||
display: flex;
|
||||
gap: var(--space-s);
|
||||
margin: 0;
|
||||
padding: var(--space-m);
|
||||
}
|
||||
|
||||
wc-mplayer::part(player) {
|
||||
align-self: flex-end;
|
||||
border-radius: var(--border-radius);
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
wc-mplayer::part(title) {
|
||||
font-size: var(--step-1);
|
||||
font-variation-settings:
|
||||
"opsz" 50,
|
||||
"wght" 350,
|
||||
"SOFT" 20,
|
||||
"WONK" 1;
|
||||
}
|
||||
|
||||
/* Comments */
|
||||
#comments {
|
||||
grid-column: var(--span-grid);
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
import './webComponents/card.js';
|
||||
import './webComponents/profilePic.js';
|
||||
import './webComponents/comment.js';
|
||||
import './webComponents/toot.js';
|
||||
import "./webComponents/card.js";
|
||||
import "./webComponents/profilePic.js";
|
||||
import "./webComponents/comment.js";
|
||||
import "./webComponents/toot.js";
|
||||
import "./webComponents/musicPlayer.js";
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user