Compare commits
No commits in common. "ef025e58c416ae89a3d11cce6407ddff52d33954" and "c6b43bb5acd34601ad919ecf6ba9be07a2463c91" have entirely different histories.
ef025e58c4
...
c6b43bb5ac
160
.eleventy.js
160
.eleventy.js
|
|
@ -17,24 +17,21 @@ const pluginRss = require("@11ty/eleventy-plugin-rss");
|
||||||
const UpgradeHelper = require("@11ty/eleventy-upgrade-help");
|
const UpgradeHelper = require("@11ty/eleventy-upgrade-help");
|
||||||
const xmlFiltersPlugin = require("eleventy-xml-plugin");
|
const xmlFiltersPlugin = require("eleventy-xml-plugin");
|
||||||
const yaml = require("js-yaml");
|
const yaml = require("js-yaml");
|
||||||
//const syntaxHighlight = require("@11ty/eleventy-plugin-syntaxhighlight");
|
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 inspect = require("node:util").inspect;
|
const inspect = require("node:util").inspect;
|
||||||
|
|
||||||
// relativeURL
|
// relativeURL
|
||||||
const path = require("path");
|
const path = require("path");
|
||||||
const urlFilter = require("@11ty/eleventy/src/Filters/Url");
|
const urlFilter = require("@11ty/eleventy/src/Filters/Url");
|
||||||
const { assert } = require("console");
|
|
||||||
const indexify = (url) => url.replace(/(\/[^.]*)$/, "$1index.html");
|
const indexify = (url) => url.replace(/(\/[^.]*)$/, "$1index.html");
|
||||||
|
|
||||||
module.exports = function (eleventyConfig) {
|
module.exports = function (eleventyConfig) {
|
||||||
let pathPrefix = "/";
|
let pathPrefix = "/";
|
||||||
|
|
||||||
eleventyConfig.addDataExtension("yaml", (contents) => yaml.load(contents));
|
eleventyConfig.addDataExtension("yaml", contents => yaml.load(contents));
|
||||||
eleventyConfig.addDataExtension("yml", (contents) => yaml.load(contents));
|
eleventyConfig.addDataExtension("yml", contents => yaml.load(contents));
|
||||||
|
|
||||||
eleventyConfig.addPlugin(pluginRss);
|
eleventyConfig.addPlugin(pluginRss);
|
||||||
//Blog excerpts
|
//Blog excerpts
|
||||||
|
|
@ -51,55 +48,34 @@ module.exports = function (eleventyConfig) {
|
||||||
// TODO https://www.npmjs.com/package/eleventy-plugin-meta-generator
|
// TODO https://www.npmjs.com/package/eleventy-plugin-meta-generator
|
||||||
// Eleventy Syntax Highlighting (https://www.11ty.dev/docs/plugins/syntaxhighlight/)
|
// Eleventy Syntax Highlighting (https://www.11ty.dev/docs/plugins/syntaxhighlight/)
|
||||||
// eleventyConfig.addPlugin(require("@11ty/eleventy-plugin-syntaxhighlight"));
|
// eleventyConfig.addPlugin(require("@11ty/eleventy-plugin-syntaxhighlight"));
|
||||||
|
|
||||||
eleventyConfig.addPlugin(syntaxHighlight, {
|
eleventyConfig.addPlugin(syntaxHighlight, {
|
||||||
theme: "base16-snazzy",
|
|
||||||
|
|
||||||
lexerOverrides: {
|
alwaysWrapLineHighlights: true,
|
||||||
njk: "vue",
|
// Change which Eleventy template formats use syntax highlighters
|
||||||
liquid: "vue",
|
// 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(xmlFiltersPlugin);
|
||||||
|
|
||||||
// eleventyConfig.addPlugin(eleventySass);
|
|
||||||
|
|
||||||
// Custom Collections
|
// Custom Collections
|
||||||
eleventyConfig.addCollection("pages", (collection) =>
|
eleventyConfig.addCollection("pages", (collection) =>
|
||||||
collection.getFilteredByGlob("./src/_pages/**/*")
|
collection.getFilteredByGlob("./src/_pages/**/*")
|
||||||
|
|
@ -132,10 +108,11 @@ module.exports = function (eleventyConfig) {
|
||||||
// });
|
// });
|
||||||
|
|
||||||
eleventyConfig.addCollection("drafts", (collection) =>
|
eleventyConfig.addCollection("drafts", (collection) =>
|
||||||
collection
|
collection
|
||||||
.getFilteredByGlob("./src/_drafts/**/*")
|
.getFilteredByGlob("./src/_drafts/**/*")
|
||||||
.sort((a, b) => a.data.weight - b.data.weight)
|
.sort((a, b) => a.data.weight - b.data.weight)
|
||||||
);
|
) ;
|
||||||
|
|
||||||
|
|
||||||
eleventyConfig.addCollection("tags", (collection) => {
|
eleventyConfig.addCollection("tags", (collection) => {
|
||||||
let tags = new Set();
|
let tags = new Set();
|
||||||
|
|
@ -159,7 +136,7 @@ module.exports = function (eleventyConfig) {
|
||||||
collection.getAll().forEach((item) => {
|
collection.getAll().forEach((item) => {
|
||||||
if ("category" in item.data) {
|
if ("category" in item.data) {
|
||||||
if (item.data.category != undefined) {
|
if (item.data.category != undefined) {
|
||||||
for (const category of item.data.category) {
|
for (const category of item.data.category) {
|
||||||
categories.add(category);
|
categories.add(category);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -221,10 +198,10 @@ module.exports = function (eleventyConfig) {
|
||||||
});
|
});
|
||||||
|
|
||||||
eleventyConfig.addFilter("inspect", function (obj = {}) {
|
eleventyConfig.addFilter("inspect", function (obj = {}) {
|
||||||
return inspect(obj, { sorted: true });
|
return inspect(obj, {sorted: true});
|
||||||
});
|
});
|
||||||
|
|
||||||
eleventyConfig.addFilter("group_by", groupBy);
|
eleventyConfig.addFilter('group_by', groupBy)
|
||||||
|
|
||||||
eleventyConfig.addLayoutAlias(
|
eleventyConfig.addLayoutAlias(
|
||||||
"archive-taxonomy",
|
"archive-taxonomy",
|
||||||
|
|
@ -288,31 +265,23 @@ module.exports = function (eleventyConfig) {
|
||||||
// Set section
|
// Set section
|
||||||
|
|
||||||
// Configure BrowserSync to serve the 404 page for missing files
|
// Configure BrowserSync to serve the 404 page for missing files
|
||||||
// eleventyConfig.setBrowserSyncConfig({
|
eleventyConfig.setBrowserSyncConfig({
|
||||||
// callbacks: {
|
callbacks: {
|
||||||
// ready: (_err, browserSync) => {
|
ready: (_err, browserSync) => {
|
||||||
// const content_404 = fs.readFileSync("dist/404.html");
|
const content_404 = fs.readFileSync("dist/404.html");
|
||||||
|
|
||||||
// browserSync.addMiddleware("*", (_req, res) => {
|
browserSync.addMiddleware("*", (_req, res) => {
|
||||||
// // render the 404 content instead of redirecting
|
// render the 404 content instead of redirecting
|
||||||
// res.write(content_404);
|
res.write(content_404);
|
||||||
// res.end();
|
res.end();
|
||||||
// });
|
});
|
||||||
// },
|
},
|
||||||
// },
|
},
|
||||||
// });
|
|
||||||
|
|
||||||
eleventyConfig.setServerOptions({
|
|
||||||
// Default values are shown:
|
|
||||||
|
|
||||||
// Whether the live reload snippet is used
|
|
||||||
liveReload: true,
|
|
||||||
watch: ["dist/assets/css/main.css"],
|
|
||||||
});
|
});
|
||||||
|
|
||||||
// eleventyConfig.setBrowserSyncConfig({
|
eleventyConfig.setBrowserSyncConfig({
|
||||||
// files: "./dist/assets/css/*.css",
|
files: "./dist/assets/styles/**/*.css",
|
||||||
// });
|
});
|
||||||
|
|
||||||
// Merge Data (https://www.11ty.dev/docs/data-deep-merge/)
|
// Merge Data (https://www.11ty.dev/docs/data-deep-merge/)
|
||||||
eleventyConfig.setDataDeepMerge(true);
|
eleventyConfig.setDataDeepMerge(true);
|
||||||
|
|
@ -391,8 +360,6 @@ module.exports = function (eleventyConfig) {
|
||||||
// }
|
// }
|
||||||
// );
|
// );
|
||||||
|
|
||||||
// eleventyConfig.addWatchTarget("dist/assets/css/*.css");
|
|
||||||
|
|
||||||
eleventyConfig.addFilter("relative_url", relativeURLALT);
|
eleventyConfig.addFilter("relative_url", relativeURLALT);
|
||||||
eleventyConfig.addFilter("absolute_url", absoluteUrl);
|
eleventyConfig.addFilter("absolute_url", absoluteUrl);
|
||||||
|
|
||||||
|
|
@ -509,28 +476,29 @@ function relativeURLALT(url, pathPrefix = undefined) {
|
||||||
|
|
||||||
function absoluteUrl(url) {
|
function absoluteUrl(url) {
|
||||||
if (url !== undefined) {
|
if (url !== undefined) {
|
||||||
return siteURL + url;
|
return siteURL + url
|
||||||
} else {
|
} else {
|
||||||
return siteURL;
|
return siteURL
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function groupBy(array, key) {
|
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 map = array.reduce((acc, entry) => {
|
||||||
const value = get(entry);
|
const value = get(entry)
|
||||||
|
|
||||||
if (typeof acc[value] === "undefined") {
|
if (typeof acc[value] === 'undefined') {
|
||||||
acc[value] = [];
|
acc[value] = []
|
||||||
}
|
}
|
||||||
|
|
||||||
acc[value].push(entry);
|
acc[value].push(entry)
|
||||||
return acc;
|
return acc
|
||||||
}, {});
|
}, {})
|
||||||
|
|
||||||
return Object.keys(map).reduce(
|
return Object.keys(map).reduce(
|
||||||
(acc, key) => [...acc, { name: key, items: map[key] }],
|
(acc, key) => [...acc, { name: key, items: map[key] }],
|
||||||
[]
|
[]
|
||||||
);
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
File diff suppressed because it is too large
Load Diff
10
package.json
10
package.json
|
|
@ -5,8 +5,7 @@
|
||||||
"main": "index.js",
|
"main": "index.js",
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"build:sass": "sass --load-path=src/_sass --style=compressed dist/assets/css/tocompile.scss dist/assets/css/main.css",
|
"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",
|
||||||
"watch:eleventy": "eleventy --serve --ignore-initial --incremental",
|
|
||||||
"build:eleventy": "eleventy",
|
"build:eleventy": "eleventy",
|
||||||
"clean": "rm -rf dist",
|
"clean": "rm -rf dist",
|
||||||
"postbuild": "",
|
"postbuild": "",
|
||||||
|
|
@ -27,16 +26,14 @@
|
||||||
"author": "Robert McGovern et all",
|
"author": "Robert McGovern et all",
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@11ty/eleventy": "^2.0.0"
|
"@11ty/eleventy": "^2.0.0-beta.1"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@11ty/eleventy-navigation": "^0.3.5",
|
"@11ty/eleventy-navigation": "^0.3.5",
|
||||||
"@11ty/eleventy-plugin-rss": "^1.2.0",
|
"@11ty/eleventy-plugin-rss": "^1.2.0",
|
||||||
"@11ty/eleventy-plugin-syntaxhighlight": "^4.2.0",
|
"@11ty/eleventy-plugin-syntaxhighlight": "^4.2.0",
|
||||||
"@11ty/eleventy-upgrade-help": "^2.0.5",
|
"@11ty/eleventy-upgrade-help": "^2.0.5",
|
||||||
"@11tyrocks/eleventy-plugin-sass-lightningcss": "^1.0.0",
|
|
||||||
"autoprefixer": "^10.4.13",
|
"autoprefixer": "^10.4.13",
|
||||||
"chroma-highlight": "^2.4.2",
|
|
||||||
"const": "^1.0.0",
|
"const": "^1.0.0",
|
||||||
"eleventy-load": "^0.3.1",
|
"eleventy-load": "^0.3.1",
|
||||||
"eleventy-load-css": "^0.3.0",
|
"eleventy-load-css": "^0.3.0",
|
||||||
|
|
@ -44,7 +41,6 @@
|
||||||
"eleventy-load-html": "^0.1.1",
|
"eleventy-load-html": "^0.1.1",
|
||||||
"eleventy-load-sass": "^0.1.2",
|
"eleventy-load-sass": "^0.1.2",
|
||||||
"eleventy-plugin-description": "^0.1.5",
|
"eleventy-plugin-description": "^0.1.5",
|
||||||
"eleventy-plugin-syntaxhighlight-chroma": "^0.0.1",
|
|
||||||
"eleventy-plugin-toc": "^1.1.5",
|
"eleventy-plugin-toc": "^1.1.5",
|
||||||
"eleventy-xml-plugin": "^0.1.0",
|
"eleventy-xml-plugin": "^0.1.0",
|
||||||
"fs-extra": "^11.1.0",
|
"fs-extra": "^11.1.0",
|
||||||
|
|
@ -63,4 +59,4 @@
|
||||||
"sass": "^1.57.1",
|
"sass": "^1.57.1",
|
||||||
"slugify": "^1.6.5"
|
"slugify": "^1.6.5"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -19,8 +19,7 @@
|
||||||
"words_per_minute": 200,
|
"words_per_minute": 200,
|
||||||
"head_scripts": [
|
"head_scripts": [
|
||||||
"/assets/js/progress.js",
|
"/assets/js/progress.js",
|
||||||
"/assets/js/scroll-to-top.js",
|
"/assets/js/scroll-to-top.js"
|
||||||
"/assets/js/copy-code-button.js"
|
|
||||||
],
|
],
|
||||||
"comments": {
|
"comments": {
|
||||||
"provider": "disqus",
|
"provider": "disqus",
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,7 @@
|
||||||
{% if site.comments.provider and comments or site.defaults.posts.comments %}
|
{% if site.comments.provider and comments or site.defaults.posts.comments %}
|
||||||
{% case site.comments.provider %}
|
{% case site.comments.provider %}
|
||||||
{% when "disqus" %}
|
{% when "disqus" %}
|
||||||
|
bing
|
||||||
{% include comments-providers/disqus.html %}
|
{% include comments-providers/disqus.html %}
|
||||||
{% when "discourse" %}
|
{% when "discourse" %}
|
||||||
{% include comments-providers/discourse.html %}
|
{% include comments-providers/discourse.html %}
|
||||||
|
|
|
||||||
|
|
@ -40,20 +40,7 @@ layout: default
|
||||||
</nav>
|
</nav>
|
||||||
</aside>
|
</aside>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
|
{{ content }}
|
||||||
{% 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 }}
|
|
||||||
|
|
||||||
{% 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 %}
|
{% 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>
|
</section>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -6,24 +6,12 @@ layout: default
|
||||||
permalink: /404.html
|
permalink: /404.html
|
||||||
---
|
---
|
||||||
|
|
||||||
<style type="text/css" media="screen">
|
Sorry, but the page you were trying to view does not exist --- perhaps you can try searching for it below.
|
||||||
.container {
|
|
||||||
margin: 10px auto;
|
|
||||||
max-width: 600px;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
h1 {
|
|
||||||
margin: 30px 0;
|
|
||||||
font-size: 4em;
|
|
||||||
line-height: 1;
|
|
||||||
letter-spacing: -1px;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
<div class="container">
|
<script type="text/javascript">
|
||||||
<h1>404</h1>
|
var GOOG_FIXURL_LANG = 'en';
|
||||||
|
var GOOG_FIXURL_SITE = '{{ site.url }}'
|
||||||
<p><strong>😬 Page not found 😬</strong></p>
|
</script>
|
||||||
<p>Sadly the requested page could not be found.</p>
|
<script type="text/javascript"
|
||||||
<p><a href="./">Maybe via the home page?</a></p>
|
src="//linkhelp.clients.google.com/tbproxy/lh/wm/fixurl.js">
|
||||||
</div>
|
</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:
|
When the 11ty build occurs, it takes two nunjucks snippets then first takes the service section and fills out the details:
|
||||||
|
|
||||||
{% raw %}
|
{% raw %}
|
||||||
```njk
|
```liquid
|
||||||
{% for service in webprojects.services %}
|
{% for service in webprojects.services %}
|
||||||
<div class="projectsDiv {{service.cssClass}}">
|
<div class="projectsDiv {{service.cssClass}}">
|
||||||
<div class="alignedHeader">
|
<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
|
My Github 11ty build action
|
||||||
|
|
||||||
```yaml
|
```
|
||||||
name: Build Eleventy
|
name: Build Eleventy
|
||||||
|
|
||||||
on:
|
on:
|
||||||
|
|
|
||||||
|
|
@ -17,7 +17,7 @@ form {
|
||||||
display: block;
|
display: block;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
margin-bottom: 5px * 2;
|
margin-bottom: 5px * 2;
|
||||||
margin-left: -7px;
|
*margin-left: -7px;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
color: $text-color;
|
color: $text-color;
|
||||||
border: 0;
|
border: 0;
|
||||||
|
|
@ -25,7 +25,7 @@ form {
|
||||||
}
|
}
|
||||||
|
|
||||||
p {
|
p {
|
||||||
margin-bottom: calc(5px / 2);
|
margin-bottom: (5px / 2);
|
||||||
}
|
}
|
||||||
|
|
||||||
ul {
|
ul {
|
||||||
|
|
@ -45,7 +45,7 @@ button,
|
||||||
select,
|
select,
|
||||||
textarea {
|
textarea {
|
||||||
vertical-align: baseline;
|
vertical-align: baseline;
|
||||||
/*vertical-align: middle; */
|
*vertical-align: middle;
|
||||||
}
|
}
|
||||||
|
|
||||||
input,
|
input,
|
||||||
|
|
@ -102,7 +102,7 @@ input[type="radio"] {
|
||||||
height: auto;
|
height: auto;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
margin: 3px 0;
|
margin: 3px 0;
|
||||||
/* *margin-top: 0; */
|
*margin-top: 0;
|
||||||
line-height: normal;
|
line-height: normal;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
border-radius: 0;
|
border-radius: 0;
|
||||||
|
|
@ -114,8 +114,8 @@ input[type="checkbox"],
|
||||||
input[type="radio"] {
|
input[type="radio"] {
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
/* *width: 13px; */
|
*width: 13px;
|
||||||
/* *height: 13px; */
|
*height: 13px;
|
||||||
}
|
}
|
||||||
|
|
||||||
input[type="image"] {
|
input[type="image"] {
|
||||||
|
|
@ -138,12 +138,12 @@ input[type="submit"] {
|
||||||
width: auto;
|
width: auto;
|
||||||
height: auto;
|
height: auto;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
/* *overflow: visible; */
|
*overflow: visible;
|
||||||
}
|
}
|
||||||
|
|
||||||
select,
|
select,
|
||||||
input[type="file"] {
|
input[type="file"] {
|
||||||
/* *margin-top: 4px; */
|
*margin-top: 4px;
|
||||||
}
|
}
|
||||||
|
|
||||||
select {
|
select {
|
||||||
|
|
|
||||||
|
|
@ -15,7 +15,7 @@
|
||||||
========================================================================== */
|
========================================================================== */
|
||||||
|
|
||||||
@function em($target, $context: $doc-font-size) {
|
@function em($target, $context: $doc-font-size) {
|
||||||
@return (calc($target / $context)) * 1em;
|
@return ($target / $context) * 1em;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -65,7 +65,7 @@
|
||||||
$green: green($color);
|
$green: green($color);
|
||||||
$blue: blue($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; }
|
@if $yiq-debug { @debug $yiq, $threshold; }
|
||||||
|
|
||||||
|
|
@ -89,4 +89,4 @@
|
||||||
) {
|
) {
|
||||||
background-color: $background-color;
|
background-color: $background-color;
|
||||||
color: yiq-contrast-color($background-color, $dark, $light, $threshold);
|
color: yiq-contrast-color($background-color, $dark, $light, $threshold);
|
||||||
}
|
}
|
||||||
|
|
@ -64,8 +64,8 @@ audio,
|
||||||
canvas,
|
canvas,
|
||||||
video {
|
video {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
/* display: inline; */
|
*display: inline;
|
||||||
/* zoom: 1; */
|
*zoom: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Prevents modern browsers from displaying 'audio' without controls */
|
/* Prevents modern browsers from displaying 'audio' without controls */
|
||||||
|
|
@ -142,7 +142,7 @@ textarea {
|
||||||
|
|
||||||
button,
|
button,
|
||||||
input {
|
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*/
|
line-height: normal; /* FF3/4 have !important on line-height in UA stylesheet*/
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -25,16 +25,16 @@
|
||||||
$unit: unit($value);
|
$unit: unit($value);
|
||||||
|
|
||||||
@if $unit == 'px' {
|
@if $unit == 'px' {
|
||||||
@return calc($value / 16px * 1em);
|
@return $value / 16px * 1em;
|
||||||
}
|
}
|
||||||
@else if $unit == '%' {
|
@else if $unit == '%' {
|
||||||
@return calc($value / 100% * 1em);
|
@return $value / 100% * 1em;
|
||||||
}
|
}
|
||||||
@else if $unit == 'em' {
|
@else if $unit == 'em' {
|
||||||
@return $value;
|
@return $value;
|
||||||
}
|
}
|
||||||
@else if $unit == 'pt' {
|
@else if $unit == 'pt' {
|
||||||
@return calc($value / 12pt * 1em);
|
@return $value / 12pt * 1em;
|
||||||
}
|
}
|
||||||
@else {
|
@else {
|
||||||
@return $value;
|
@return $value;
|
||||||
|
|
|
||||||
|
|
@ -52,7 +52,7 @@ $mfp-include-iframe-type: true !default;
|
||||||
$mfp-iframe-padding-top: 40px !default;
|
$mfp-iframe-padding-top: 40px !default;
|
||||||
$mfp-iframe-background: #000 !default;
|
$mfp-iframe-background: #000 !default;
|
||||||
$mfp-iframe-max-width: 900px !default;
|
$mfp-iframe-max-width: 900px !default;
|
||||||
$mfp-iframe-ratio: calc(9/16) !default;
|
$mfp-iframe-ratio: 9/16 !default;
|
||||||
|
|
||||||
// Image-type options
|
// Image-type options
|
||||||
$mfp-include-image-type: true !default;
|
$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-padding-top: 40px; // Iframe padding top
|
||||||
$mfp-iframe-background: #000; // Background color of iframes
|
$mfp-iframe-background: #000; // Background color of iframes
|
||||||
$mfp-iframe-max-width: 900px; // Maximum width 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
|
// Image-type options
|
||||||
$mfp-include-image-type: true; // Enable Image-type popups
|
$mfp-include-image-type: true; // Enable Image-type popups
|
||||||
|
|
@ -43,4 +43,4 @@ $mfp-caption-subtitle-color: #bdbdbd; // Caption sub
|
||||||
.mfp-counter { font-family: $serif; } // Caption font family
|
.mfp-counter { font-family: $serif; } // Caption font family
|
||||||
|
|
||||||
// A11y
|
// A11y
|
||||||
$mfp-use-visuallyhidden: false;
|
$mfp-use-visuallyhidden: false;
|
||||||
|
|
@ -90,7 +90,7 @@
|
||||||
@if unitless($span-width) {
|
@if unitless($span-width) {
|
||||||
$container-spread: su-valid-spread($container-spread);
|
$container-spread: su-valid-spread($container-spread);
|
||||||
$container: _su-sum($columns, $gutters, $container-spread, $validate: false);
|
$container: _su-sum($columns, $gutters, $container-spread, $validate: false);
|
||||||
@return percentage(calc($span-width / $container));
|
@return percentage($span-width / $container);
|
||||||
}
|
}
|
||||||
|
|
||||||
@return $span-width;
|
@return $span-width;
|
||||||
|
|
@ -141,7 +141,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
$container: _su-sum($columns, $gutters, $container-spread);
|
$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;
|
$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 "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' }}"; // skin
|
||||||
@import "minimal-mistakes/skins/_{{ site.minimal_mistakes_skin | default: 'default' }}.scss"; // 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