Compare commits
No commits in common. "ef025e58c416ae89a3d11cce6407ddff52d33954" and "c6b43bb5acd34601ad919ecf6ba9be07a2463c91" have entirely different histories.
ef025e58c4
...
c6b43bb5ac
136
.eleventy.js
136
.eleventy.js
|
|
@ -17,24 +17,21 @@ const pluginRss = require("@11ty/eleventy-plugin-rss");
|
|||
const UpgradeHelper = require("@11ty/eleventy-upgrade-help");
|
||||
const xmlFiltersPlugin = require("eleventy-xml-plugin");
|
||||
const yaml = require("js-yaml");
|
||||
//const syntaxHighlight = require("@11ty/eleventy-plugin-syntaxhighlight");
|
||||
const syntaxHighlight = require("eleventy-plugin-syntaxhighlight-chroma");
|
||||
const highlight = require("chroma-highlight");
|
||||
const eleventySass = require("@11tyrocks/eleventy-plugin-sass-lightningcss");
|
||||
const syntaxHighlight = require("@11ty/eleventy-plugin-syntaxhighlight");
|
||||
|
||||
|
||||
const inspect = require("node:util").inspect;
|
||||
|
||||
// relativeURL
|
||||
const path = require("path");
|
||||
const urlFilter = require("@11ty/eleventy/src/Filters/Url");
|
||||
const { assert } = require("console");
|
||||
const indexify = (url) => url.replace(/(\/[^.]*)$/, "$1index.html");
|
||||
|
||||
module.exports = function (eleventyConfig) {
|
||||
let pathPrefix = "/";
|
||||
|
||||
eleventyConfig.addDataExtension("yaml", (contents) => yaml.load(contents));
|
||||
eleventyConfig.addDataExtension("yml", (contents) => yaml.load(contents));
|
||||
eleventyConfig.addDataExtension("yaml", contents => yaml.load(contents));
|
||||
eleventyConfig.addDataExtension("yml", contents => yaml.load(contents));
|
||||
|
||||
eleventyConfig.addPlugin(pluginRss);
|
||||
//Blog excerpts
|
||||
|
|
@ -51,55 +48,34 @@ module.exports = function (eleventyConfig) {
|
|||
// TODO https://www.npmjs.com/package/eleventy-plugin-meta-generator
|
||||
// Eleventy Syntax Highlighting (https://www.11ty.dev/docs/plugins/syntaxhighlight/)
|
||||
// eleventyConfig.addPlugin(require("@11ty/eleventy-plugin-syntaxhighlight"));
|
||||
|
||||
eleventyConfig.addPlugin(syntaxHighlight, {
|
||||
theme: "base16-snazzy",
|
||||
|
||||
lexerOverrides: {
|
||||
njk: "vue",
|
||||
liquid: "vue",
|
||||
alwaysWrapLineHighlights: true,
|
||||
// Change which Eleventy template formats use syntax highlighters
|
||||
// templateFormats: ["*"], // default
|
||||
|
||||
// Use only a subset of template types (11ty.js added in v4.0.0)
|
||||
// templateFormats: ["liquid", "njk", "md", "11ty.js"],
|
||||
|
||||
// init callback lets you customize Prism
|
||||
// init: function({ Prism }) {
|
||||
// Prism.languages.myCustomLanguage = /* */;
|
||||
// },
|
||||
|
||||
// Added in 3.1.1, add HTML attributes to the <pre> or <code> tags
|
||||
preAttributes: {
|
||||
tabindex: 0,
|
||||
|
||||
// Added in 4.1.0 you can use callback functions too
|
||||
"data-language": function({ language, content, options }) {
|
||||
return language;
|
||||
}
|
||||
},
|
||||
codeAttributes: {},
|
||||
});
|
||||
|
||||
// eleventyConfig.addPlugin(syntaxHighlight, {
|
||||
|
||||
// alwaysWrapLineHighlights: true,
|
||||
// // Change which Eleventy template formats use syntax highlighters
|
||||
// // templateFormats: ["*"], // default
|
||||
|
||||
// // Use only a subset of template types (11ty.js added in v4.0.0)
|
||||
// // templateFormats: ["liquid", "njk", "md", "11ty.js"],
|
||||
|
||||
// // init callback lets you customize Prism
|
||||
// // init: function({ Prism }) {
|
||||
// // Prism.languages.myCustomLanguage = /* */;
|
||||
// // },
|
||||
|
||||
// // Added in 3.1.1, add HTML attributes to the <pre> or <code> tags
|
||||
// preAttributes: {
|
||||
// tabindex: 0,
|
||||
|
||||
// // Added in 4.1.0 you can use callback functions too
|
||||
// "data-language": function({ language, content, options }) {
|
||||
// return language;
|
||||
// }
|
||||
// },
|
||||
// codeAttributes: {},
|
||||
// });
|
||||
|
||||
// assert(typeof highlight === "function");
|
||||
// eleventyConfig.addPlugin(highlight);
|
||||
|
||||
// eleventyConfig.addMarkdownHighlighter(
|
||||
// highlight(
|
||||
// `--formatter html --html-only --html-inline-styles --lexer typescript --style base16-snazzy`
|
||||
// )
|
||||
// );
|
||||
|
||||
eleventyConfig.addPlugin(xmlFiltersPlugin);
|
||||
|
||||
// eleventyConfig.addPlugin(eleventySass);
|
||||
|
||||
// Custom Collections
|
||||
eleventyConfig.addCollection("pages", (collection) =>
|
||||
collection.getFilteredByGlob("./src/_pages/**/*")
|
||||
|
|
@ -137,6 +113,7 @@ module.exports = function (eleventyConfig) {
|
|||
.sort((a, b) => a.data.weight - b.data.weight)
|
||||
) ;
|
||||
|
||||
|
||||
eleventyConfig.addCollection("tags", (collection) => {
|
||||
let tags = new Set();
|
||||
|
||||
|
|
@ -224,7 +201,7 @@ module.exports = function (eleventyConfig) {
|
|||
return inspect(obj, {sorted: true});
|
||||
});
|
||||
|
||||
eleventyConfig.addFilter("group_by", groupBy);
|
||||
eleventyConfig.addFilter('group_by', groupBy)
|
||||
|
||||
eleventyConfig.addLayoutAlias(
|
||||
"archive-taxonomy",
|
||||
|
|
@ -288,31 +265,23 @@ module.exports = function (eleventyConfig) {
|
|||
// Set section
|
||||
|
||||
// Configure BrowserSync to serve the 404 page for missing files
|
||||
// eleventyConfig.setBrowserSyncConfig({
|
||||
// callbacks: {
|
||||
// ready: (_err, browserSync) => {
|
||||
// const content_404 = fs.readFileSync("dist/404.html");
|
||||
eleventyConfig.setBrowserSyncConfig({
|
||||
callbacks: {
|
||||
ready: (_err, browserSync) => {
|
||||
const content_404 = fs.readFileSync("dist/404.html");
|
||||
|
||||
// browserSync.addMiddleware("*", (_req, res) => {
|
||||
// // render the 404 content instead of redirecting
|
||||
// res.write(content_404);
|
||||
// res.end();
|
||||
// });
|
||||
// },
|
||||
// },
|
||||
// });
|
||||
|
||||
eleventyConfig.setServerOptions({
|
||||
// Default values are shown:
|
||||
|
||||
// Whether the live reload snippet is used
|
||||
liveReload: true,
|
||||
watch: ["dist/assets/css/main.css"],
|
||||
browserSync.addMiddleware("*", (_req, res) => {
|
||||
// render the 404 content instead of redirecting
|
||||
res.write(content_404);
|
||||
res.end();
|
||||
});
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
// eleventyConfig.setBrowserSyncConfig({
|
||||
// files: "./dist/assets/css/*.css",
|
||||
// });
|
||||
eleventyConfig.setBrowserSyncConfig({
|
||||
files: "./dist/assets/styles/**/*.css",
|
||||
});
|
||||
|
||||
// Merge Data (https://www.11ty.dev/docs/data-deep-merge/)
|
||||
eleventyConfig.setDataDeepMerge(true);
|
||||
|
|
@ -391,8 +360,6 @@ module.exports = function (eleventyConfig) {
|
|||
// }
|
||||
// );
|
||||
|
||||
// eleventyConfig.addWatchTarget("dist/assets/css/*.css");
|
||||
|
||||
eleventyConfig.addFilter("relative_url", relativeURLALT);
|
||||
eleventyConfig.addFilter("absolute_url", absoluteUrl);
|
||||
|
||||
|
|
@ -509,28 +476,29 @@ function relativeURLALT(url, pathPrefix = undefined) {
|
|||
|
||||
function absoluteUrl(url) {
|
||||
if (url !== undefined) {
|
||||
return siteURL + url;
|
||||
return siteURL + url
|
||||
} else {
|
||||
return siteURL;
|
||||
return siteURL
|
||||
}
|
||||
}
|
||||
|
||||
function groupBy(array, key) {
|
||||
const get = (entry) => key.split(".").reduce((acc, key) => acc[key], entry);
|
||||
const get = entry => key.split('.').reduce((acc, key) => acc[key], entry)
|
||||
|
||||
const map = array.reduce((acc, entry) => {
|
||||
const value = get(entry);
|
||||
const value = get(entry)
|
||||
|
||||
if (typeof acc[value] === "undefined") {
|
||||
acc[value] = [];
|
||||
if (typeof acc[value] === 'undefined') {
|
||||
acc[value] = []
|
||||
}
|
||||
|
||||
acc[value].push(entry);
|
||||
return acc;
|
||||
}, {});
|
||||
acc[value].push(entry)
|
||||
return acc
|
||||
}, {})
|
||||
|
||||
return Object.keys(map).reduce(
|
||||
(acc, key) => [...acc, { name: key, items: map[key] }],
|
||||
[]
|
||||
);
|
||||
)
|
||||
}
|
||||
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
|
|
@ -5,8 +5,7 @@
|
|||
"main": "index.js",
|
||||
"scripts": {
|
||||
"build:sass": "sass --load-path=src/_sass --style=compressed dist/assets/css/tocompile.scss dist/assets/css/main.css",
|
||||
"watch:sass": "npm run build:sass -- --watch",
|
||||
"watch:eleventy": "eleventy --serve --ignore-initial --incremental",
|
||||
"watch:eleventy": "eleventy --serve",
|
||||
"build:eleventy": "eleventy",
|
||||
"clean": "rm -rf dist",
|
||||
"postbuild": "",
|
||||
|
|
@ -27,16 +26,14 @@
|
|||
"author": "Robert McGovern et all",
|
||||
"license": "MIT",
|
||||
"devDependencies": {
|
||||
"@11ty/eleventy": "^2.0.0"
|
||||
"@11ty/eleventy": "^2.0.0-beta.1"
|
||||
},
|
||||
"dependencies": {
|
||||
"@11ty/eleventy-navigation": "^0.3.5",
|
||||
"@11ty/eleventy-plugin-rss": "^1.2.0",
|
||||
"@11ty/eleventy-plugin-syntaxhighlight": "^4.2.0",
|
||||
"@11ty/eleventy-upgrade-help": "^2.0.5",
|
||||
"@11tyrocks/eleventy-plugin-sass-lightningcss": "^1.0.0",
|
||||
"autoprefixer": "^10.4.13",
|
||||
"chroma-highlight": "^2.4.2",
|
||||
"const": "^1.0.0",
|
||||
"eleventy-load": "^0.3.1",
|
||||
"eleventy-load-css": "^0.3.0",
|
||||
|
|
@ -44,7 +41,6 @@
|
|||
"eleventy-load-html": "^0.1.1",
|
||||
"eleventy-load-sass": "^0.1.2",
|
||||
"eleventy-plugin-description": "^0.1.5",
|
||||
"eleventy-plugin-syntaxhighlight-chroma": "^0.0.1",
|
||||
"eleventy-plugin-toc": "^1.1.5",
|
||||
"eleventy-xml-plugin": "^0.1.0",
|
||||
"fs-extra": "^11.1.0",
|
||||
|
|
|
|||
|
|
@ -19,8 +19,7 @@
|
|||
"words_per_minute": 200,
|
||||
"head_scripts": [
|
||||
"/assets/js/progress.js",
|
||||
"/assets/js/scroll-to-top.js",
|
||||
"/assets/js/copy-code-button.js"
|
||||
"/assets/js/scroll-to-top.js"
|
||||
],
|
||||
"comments": {
|
||||
"provider": "disqus",
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
{% if site.comments.provider and comments or site.defaults.posts.comments %}
|
||||
{% case site.comments.provider %}
|
||||
{% when "disqus" %}
|
||||
bing
|
||||
{% include comments-providers/disqus.html %}
|
||||
{% when "discourse" %}
|
||||
{% include comments-providers/discourse.html %}
|
||||
|
|
|
|||
|
|
@ -40,20 +40,7 @@ layout: default
|
|||
</nav>
|
||||
</aside>
|
||||
{% endif %}
|
||||
|
||||
{% assign Content = content %}
|
||||
{% assign withoutDivStart = '<pre ' %}
|
||||
{% assign withDivStart = '<div class="highlight codeblock"><pre ' %}
|
||||
{% assign withoutDivEnd = '</code></pre>' %}
|
||||
{% assign withDivEnd = '</code></pre></div>' %}
|
||||
|
||||
{% if content contains withoutDivStart %}
|
||||
{% assign Content = content | replace: withoutDivStart, withDivStart %}
|
||||
{% assign Content = Content | replace: withoutDivEnd, withDivEnd %}
|
||||
{% endif %}
|
||||
|
||||
{{ Content }}
|
||||
|
||||
{{ content }}
|
||||
{% if page.link %}<div><a href="{{ page.link }}" class="btn btn--primary">{{ ui-text[site.locale].ext_link_label | default: "Direct Link" }}</a></div>{% endif %}
|
||||
</section>
|
||||
|
||||
|
|
|
|||
|
|
@ -6,24 +6,12 @@ layout: default
|
|||
permalink: /404.html
|
||||
---
|
||||
|
||||
<style type="text/css" media="screen">
|
||||
.container {
|
||||
margin: 10px auto;
|
||||
max-width: 600px;
|
||||
text-align: center;
|
||||
}
|
||||
h1 {
|
||||
margin: 30px 0;
|
||||
font-size: 4em;
|
||||
line-height: 1;
|
||||
letter-spacing: -1px;
|
||||
}
|
||||
</style>
|
||||
Sorry, but the page you were trying to view does not exist --- perhaps you can try searching for it below.
|
||||
|
||||
<div class="container">
|
||||
<h1>404</h1>
|
||||
|
||||
<p><strong>😬 Page not found 😬</strong></p>
|
||||
<p>Sadly the requested page could not be found.</p>
|
||||
<p><a href="./">Maybe via the home page?</a></p>
|
||||
</div>
|
||||
<script type="text/javascript">
|
||||
var GOOG_FIXURL_LANG = 'en';
|
||||
var GOOG_FIXURL_SITE = '{{ site.url }}'
|
||||
</script>
|
||||
<script type="text/javascript"
|
||||
src="//linkhelp.clients.google.com/tbproxy/lh/wm/fixurl.js">
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -55,7 +55,7 @@ Each section is generated from a json file I created ([src/_data/webprojects.jso
|
|||
When the 11ty build occurs, it takes two nunjucks snippets then first takes the service section and fills out the details:
|
||||
|
||||
{% raw %}
|
||||
```njk
|
||||
```liquid
|
||||
{% for service in webprojects.services %}
|
||||
<div class="projectsDiv {{service.cssClass}}">
|
||||
<div class="alignedHeader">
|
||||
|
|
@ -161,7 +161,7 @@ Having a static site where I can quickly add a challenge to the front page witho
|
|||
|
||||
My Github 11ty build action
|
||||
|
||||
```yaml
|
||||
```
|
||||
name: Build Eleventy
|
||||
|
||||
on:
|
||||
|
|
|
|||
|
|
@ -17,7 +17,7 @@ form {
|
|||
display: block;
|
||||
width: 100%;
|
||||
margin-bottom: 5px * 2;
|
||||
margin-left: -7px;
|
||||
*margin-left: -7px;
|
||||
padding: 0;
|
||||
color: $text-color;
|
||||
border: 0;
|
||||
|
|
@ -25,7 +25,7 @@ form {
|
|||
}
|
||||
|
||||
p {
|
||||
margin-bottom: calc(5px / 2);
|
||||
margin-bottom: (5px / 2);
|
||||
}
|
||||
|
||||
ul {
|
||||
|
|
@ -45,7 +45,7 @@ button,
|
|||
select,
|
||||
textarea {
|
||||
vertical-align: baseline;
|
||||
/*vertical-align: middle; */
|
||||
*vertical-align: middle;
|
||||
}
|
||||
|
||||
input,
|
||||
|
|
@ -102,7 +102,7 @@ input[type="radio"] {
|
|||
height: auto;
|
||||
padding: 0;
|
||||
margin: 3px 0;
|
||||
/* *margin-top: 0; */
|
||||
*margin-top: 0;
|
||||
line-height: normal;
|
||||
cursor: pointer;
|
||||
border-radius: 0;
|
||||
|
|
@ -114,8 +114,8 @@ input[type="checkbox"],
|
|||
input[type="radio"] {
|
||||
box-sizing: border-box;
|
||||
padding: 0;
|
||||
/* *width: 13px; */
|
||||
/* *height: 13px; */
|
||||
*width: 13px;
|
||||
*height: 13px;
|
||||
}
|
||||
|
||||
input[type="image"] {
|
||||
|
|
@ -138,12 +138,12 @@ input[type="submit"] {
|
|||
width: auto;
|
||||
height: auto;
|
||||
cursor: pointer;
|
||||
/* *overflow: visible; */
|
||||
*overflow: visible;
|
||||
}
|
||||
|
||||
select,
|
||||
input[type="file"] {
|
||||
/* *margin-top: 4px; */
|
||||
*margin-top: 4px;
|
||||
}
|
||||
|
||||
select {
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@
|
|||
========================================================================== */
|
||||
|
||||
@function em($target, $context: $doc-font-size) {
|
||||
@return (calc($target / $context)) * 1em;
|
||||
@return ($target / $context) * 1em;
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -65,7 +65,7 @@
|
|||
$green: green($color);
|
||||
$blue: blue($color);
|
||||
|
||||
$yiq: calc((($red * 299) + ($green * 587) + ($blue * 114)) / 1000);
|
||||
$yiq: (($red*299)+($green*587)+($blue*114))/1000;
|
||||
|
||||
@if $yiq-debug { @debug $yiq, $threshold; }
|
||||
|
||||
|
|
|
|||
|
|
@ -64,8 +64,8 @@ audio,
|
|||
canvas,
|
||||
video {
|
||||
display: inline-block;
|
||||
/* display: inline; */
|
||||
/* zoom: 1; */
|
||||
*display: inline;
|
||||
*zoom: 1;
|
||||
}
|
||||
|
||||
/* Prevents modern browsers from displaying 'audio' without controls */
|
||||
|
|
@ -142,7 +142,7 @@ textarea {
|
|||
|
||||
button,
|
||||
input {
|
||||
/* *overflow: visible; */ /* inner spacing ie IE6/7*/
|
||||
*overflow: visible; /* inner spacing ie IE6/7*/
|
||||
line-height: normal; /* FF3/4 have !important on line-height in UA stylesheet*/
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -25,16 +25,16 @@
|
|||
$unit: unit($value);
|
||||
|
||||
@if $unit == 'px' {
|
||||
@return calc($value / 16px * 1em);
|
||||
@return $value / 16px * 1em;
|
||||
}
|
||||
@else if $unit == '%' {
|
||||
@return calc($value / 100% * 1em);
|
||||
@return $value / 100% * 1em;
|
||||
}
|
||||
@else if $unit == 'em' {
|
||||
@return $value;
|
||||
}
|
||||
@else if $unit == 'pt' {
|
||||
@return calc($value / 12pt * 1em);
|
||||
@return $value / 12pt * 1em;
|
||||
}
|
||||
@else {
|
||||
@return $value;
|
||||
|
|
|
|||
|
|
@ -52,7 +52,7 @@ $mfp-include-iframe-type: true !default;
|
|||
$mfp-iframe-padding-top: 40px !default;
|
||||
$mfp-iframe-background: #000 !default;
|
||||
$mfp-iframe-max-width: 900px !default;
|
||||
$mfp-iframe-ratio: calc(9/16) !default;
|
||||
$mfp-iframe-ratio: 9/16 !default;
|
||||
|
||||
// Image-type options
|
||||
$mfp-include-image-type: true !default;
|
||||
|
|
|
|||
|
|
@ -28,7 +28,7 @@ $mfp-include-iframe-type: true; // Enable Ifra
|
|||
$mfp-iframe-padding-top: 40px; // Iframe padding top
|
||||
$mfp-iframe-background: #000; // Background color of iframes
|
||||
$mfp-iframe-max-width: 900px; // Maximum width of iframes
|
||||
$mfp-iframe-ratio: calc(9/16); // Ratio of iframe (9/16 = widescreen, 3/4 = standard, etc.)
|
||||
$mfp-iframe-ratio: 9/16; // Ratio of iframe (9/16 = widescreen, 3/4 = standard, etc.)
|
||||
|
||||
// Image-type options
|
||||
$mfp-include-image-type: true; // Enable Image-type popups
|
||||
|
|
|
|||
|
|
@ -90,7 +90,7 @@
|
|||
@if unitless($span-width) {
|
||||
$container-spread: su-valid-spread($container-spread);
|
||||
$container: _su-sum($columns, $gutters, $container-spread, $validate: false);
|
||||
@return percentage(calc($span-width / $container));
|
||||
@return percentage($span-width / $container);
|
||||
}
|
||||
|
||||
@return $span-width;
|
||||
|
|
@ -141,7 +141,7 @@
|
|||
}
|
||||
|
||||
$container: _su-sum($columns, $gutters, $container-spread);
|
||||
@return percentage(calc($gutters / $container));
|
||||
@return percentage($gutters / $container);
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -143,63 +143,6 @@ pre {
|
|||
|
||||
$github-color: #fff !default;
|
||||
|
||||
div.highlight {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.codeblock {
|
||||
outline: 4px #7e1c1c solid;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
// === for copy-code-to-clipboard
|
||||
|
||||
// h/t https://simplernerd.com/hugo-add-copy-to-clipboard-button/
|
||||
|
||||
.clipboard-button {
|
||||
position: absolute;
|
||||
top: 2px;
|
||||
right: 2px;
|
||||
padding: 6px 8px 4px 8px;
|
||||
margin: 5px;
|
||||
// color: gray-500;
|
||||
// border-color: gray-500;
|
||||
// background-color: gray-100;
|
||||
border: 1px solid;
|
||||
border-radius: 6px;
|
||||
font-size: 0.8em;
|
||||
z-index: 1;
|
||||
opacity: 0;
|
||||
transition: 0.1s;
|
||||
}
|
||||
.clipboard-button > svg {
|
||||
// fill: gray-500;
|
||||
}
|
||||
.clipboard-button:hover {
|
||||
cursor: pointer;
|
||||
border-color: #01b139;
|
||||
background-color: #87d09e;
|
||||
opacity: 1;
|
||||
}
|
||||
.clipboard-button:hover > svg {
|
||||
fill: #1900ff;
|
||||
}
|
||||
.clipboard-button:focus {
|
||||
outline: 0;
|
||||
}
|
||||
// .highlight {
|
||||
// position: relative;
|
||||
// }
|
||||
.highlight:hover > .clipboard-button {
|
||||
opacity: 1;
|
||||
transition: 0.2s;
|
||||
}
|
||||
|
||||
.highlight {
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
|
||||
//@import "progress.css"; // for progress bar
|
||||
//@import "minimal-mistakes/skins/{{ site.minimal_mistakes_skin | default: 'default' }}"; // skin
|
||||
@import "minimal-mistakes/skins/_{{ site.minimal_mistakes_skin | default: 'default' }}.scss"; // skin
|
||||
|
|
|
|||
|
|
@ -1,57 +0,0 @@
|
|||
/*
|
||||
h/t to...
|
||||
- https://www.brycewray.com/posts/2023/02/code-copying-code-eleventy-edition/ & Bryce's gitrepo
|
||||
- https://github.com/brycewray/eleventy_site/blob/main/src/assets/js/copy-code-button.js
|
||||
- https://www.dannyguo.com/blog/how-to-add-copy-to-clipboard-buttons-to-code-blocks-in-hugo/
|
||||
- https://aaronluna.dev/blog/add-copy-button-to-code-blocks-hugo-chroma/
|
||||
- https://simplernerd.com/hugo-add-copy-to-clipboard-button/
|
||||
- https://digitaldrummerj.me/hugo-add-copy-code-snippet-button/
|
||||
*/
|
||||
|
||||
const svgCopy =
|
||||
'<svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true"><path fill-rule="evenodd" d="M0 6.75C0 5.784.784 5 1.75 5h1.5a.75.75 0 010 1.5h-1.5a.25.25 0 00-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 00.25-.25v-1.5a.75.75 0 011.5 0v1.5A1.75 1.75 0 019.25 16h-7.5A1.75 1.75 0 010 14.25v-7.5z"></path><path fill-rule="evenodd" d="M5 1.75C5 .784 5.784 0 6.75 0h7.5C15.216 0 16 .784 16 1.75v7.5A1.75 1.75 0 0114.25 11h-7.5A1.75 1.75 0 015 9.25v-7.5zm1.75-.25a.25.25 0 00-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 00.25-.25v-7.5a.25.25 0 00-.25-.25h-7.5z"></path></svg><span class="sr-only"> Click to copy code</span>';
|
||||
const svgCheck =
|
||||
'<svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true"><path fill-rule="evenodd" fill="rgb(25, 0, 255)" d="M13.78 4.22a.75.75 0 010 1.06l-7.25 7.25a.75.75 0 01-1.06 0L2.22 9.28a.75.75 0 011.06-1.06L6 10.94l6.72-6.72a.75.75 0 011.06 0z"></path></svg><span class="sr-only"> Copied!</span>';
|
||||
|
||||
const addCopyButtons = (clipboard) => {
|
||||
// 1. Look for pre > code elements in the DOM
|
||||
document.querySelectorAll("pre > code").forEach((codeBlock) => {
|
||||
// 2. Create a button that will trigger a copy operation
|
||||
const button = document.createElement("button");
|
||||
button.className = "clipboard-button";
|
||||
button.type = "button";
|
||||
button.innerHTML = svgCopy;
|
||||
button.addEventListener("click", () => {
|
||||
clipboard.writeText(codeBlock.innerText).then(
|
||||
() => {
|
||||
button.blur();
|
||||
button.innerHTML = svgCheck;
|
||||
setTimeout(() => (button.innerHTML = svgCopy), 2000);
|
||||
},
|
||||
(error) => (button.innerHTML = "Error")
|
||||
);
|
||||
});
|
||||
// 3. Append the button directly before the pre tag
|
||||
// (with content-searching fix in place for Prism)
|
||||
const pre = codeBlock.parentNode;
|
||||
pre.parentNode.insertBefore(button, pre);
|
||||
});
|
||||
};
|
||||
|
||||
function addCopyButtonsAfterLoad() {
|
||||
console.log("Loaded");
|
||||
if (navigator && navigator.clipboard) {
|
||||
addCopyButtons(navigator.clipboard);
|
||||
} else {
|
||||
const script = document.createElement("script");
|
||||
script.src =
|
||||
"https://cdnjs.cloudflare.com/ajax/libs/clipboard-polyfill/2.7.0/clipboard-polyfill.promise.js";
|
||||
script.integrity =
|
||||
"sha256-waClS2re9NUbXRsryKoof+F9qc1gjjIhc2eT7ZbIv94=";
|
||||
script.crossOrigin = "anonymous";
|
||||
script.onload = () => addCopyButtons(clipboard);
|
||||
document.body.appendChild(script);
|
||||
}
|
||||
}
|
||||
|
||||
window.addEventListener("load", addCopyButtonsAfterLoad);
|
||||
Loading…
Reference in New Issue