CTome
GitHub
commit
fa3dc09286
218
.eleventy.js
218
.eleventy.js
|
|
@ -6,139 +6,139 @@ const pluginNavigation = require("@11ty/eleventy-navigation");
|
|||
const markdownIt = require("markdown-it");
|
||||
const markdownItAnchor = require("markdown-it-anchor");
|
||||
|
||||
module.exports = function(eleventyConfig) {
|
||||
// Add plugins
|
||||
eleventyConfig.addPlugin(pluginRss);
|
||||
eleventyConfig.addPlugin(pluginSyntaxHighlight);
|
||||
eleventyConfig.addPlugin(pluginNavigation);
|
||||
module.exports = function (eleventyConfig) {
|
||||
// Add plugins
|
||||
eleventyConfig.addPlugin(pluginRss);
|
||||
eleventyConfig.addPlugin(pluginSyntaxHighlight);
|
||||
eleventyConfig.addPlugin(pluginNavigation);
|
||||
|
||||
// https://www.11ty.dev/docs/data-deep-merge/
|
||||
eleventyConfig.setDataDeepMerge(true);
|
||||
// https://www.11ty.dev/docs/data-deep-merge/
|
||||
eleventyConfig.setDataDeepMerge(true);
|
||||
|
||||
// Alias `layout: post` to `layout: layouts/post.njk`
|
||||
eleventyConfig.addLayoutAlias("post", "layouts/post.njk");
|
||||
// Alias `layout: post` to `layout: layouts/post.njk`
|
||||
eleventyConfig.addLayoutAlias("post", "layouts/post.njk");
|
||||
|
||||
eleventyConfig.addFilter("readableDate", dateObj => {
|
||||
return DateTime.fromJSDate(dateObj, {zone: 'utc'}).toFormat("dd LLL yyyy");
|
||||
});
|
||||
eleventyConfig.addFilter("readableDate", dateObj => {
|
||||
return DateTime.fromJSDate(dateObj, { zone: 'utc' }).toFormat("dd LLL yyyy");
|
||||
});
|
||||
|
||||
// https://html.spec.whatwg.org/multipage/common-microsyntaxes.html#valid-date-string
|
||||
eleventyConfig.addFilter('htmlDateString', (dateObj) => {
|
||||
return DateTime.fromJSDate(dateObj, {zone: 'utc'}).toFormat('yyyy-LL-dd');
|
||||
});
|
||||
// https://html.spec.whatwg.org/multipage/common-microsyntaxes.html#valid-date-string
|
||||
eleventyConfig.addFilter('htmlDateString', (dateObj) => {
|
||||
return DateTime.fromJSDate(dateObj, { zone: 'utc' }).toFormat('yyyy-LL-dd');
|
||||
});
|
||||
|
||||
// Get the first `n` elements of a collection.
|
||||
eleventyConfig.addFilter("head", (array, n) => {
|
||||
if(!Array.isArray(array) || array.length === 0) {
|
||||
return [];
|
||||
}
|
||||
if( n < 0 ) {
|
||||
return array.slice(n);
|
||||
}
|
||||
// Get the first `n` elements of a collection.
|
||||
eleventyConfig.addFilter("head", (array, n) => {
|
||||
if (!Array.isArray(array) || array.length === 0) {
|
||||
return [];
|
||||
}
|
||||
if (n < 0) {
|
||||
return array.slice(n);
|
||||
}
|
||||
|
||||
return array.slice(0, n);
|
||||
});
|
||||
return array.slice(0, n);
|
||||
});
|
||||
|
||||
// Return the smallest number argument
|
||||
eleventyConfig.addFilter("min", (...numbers) => {
|
||||
return Math.min.apply(null, numbers);
|
||||
});
|
||||
// Return the smallest number argument
|
||||
eleventyConfig.addFilter("min", (...numbers) => {
|
||||
return Math.min.apply(null, numbers);
|
||||
});
|
||||
|
||||
function filterTagList(tags) {
|
||||
return (tags || []).filter(tag => ["all", "nav", "post", "posts"].indexOf(tag) === -1);
|
||||
}
|
||||
function filterTagList(tags) {
|
||||
return (tags || []).filter(tag => ["all", "nav", "post", "posts"].indexOf(tag) === -1);
|
||||
}
|
||||
|
||||
eleventyConfig.addFilter("filterTagList", filterTagList)
|
||||
eleventyConfig.addFilter("filterTagList", filterTagList)
|
||||
|
||||
// Create an array of all tags
|
||||
eleventyConfig.addCollection("tagList", function(collection) {
|
||||
let tagSet = new Set();
|
||||
collection.getAll().forEach(item => {
|
||||
(item.data.tags || []).forEach(tag => tagSet.add(tag));
|
||||
});
|
||||
// Create an array of all tags
|
||||
eleventyConfig.addCollection("tagList", function (collection) {
|
||||
let tagSet = new Set();
|
||||
collection.getAll().forEach(item => {
|
||||
(item.data.tags || []).forEach(tag => tagSet.add(tag));
|
||||
});
|
||||
|
||||
return filterTagList([...tagSet]);
|
||||
});
|
||||
return filterTagList([...tagSet]);
|
||||
});
|
||||
|
||||
// Copy the `img` and `css` folders to the output
|
||||
eleventyConfig.addPassthroughCopy("img");
|
||||
eleventyConfig.addPassthroughCopy("css");
|
||||
// Copy the `img` and `css` folders to the output
|
||||
eleventyConfig.addPassthroughCopy("img");
|
||||
eleventyConfig.addPassthroughCopy("css");
|
||||
|
||||
// Customize Markdown library and settings:
|
||||
let markdownLibrary = markdownIt({
|
||||
html: true,
|
||||
breaks: true,
|
||||
linkify: true
|
||||
}).use(markdownItAnchor, {
|
||||
permalink: markdownItAnchor.permalink.ariaHidden({
|
||||
placement: "after",
|
||||
class: "direct-link",
|
||||
symbol: "#",
|
||||
level: [1,2,3,4],
|
||||
}),
|
||||
slugify: eleventyConfig.getFilter("slug")
|
||||
});
|
||||
eleventyConfig.setLibrary("md", markdownLibrary);
|
||||
// Customize Markdown library and settings:
|
||||
let markdownLibrary = markdownIt({
|
||||
html: true,
|
||||
breaks: true,
|
||||
linkify: true
|
||||
}).use(markdownItAnchor, {
|
||||
permalink: markdownItAnchor.permalink.ariaHidden({
|
||||
placement: "after",
|
||||
class: "direct-link",
|
||||
symbol: "#",
|
||||
level: [1, 2, 3, 4],
|
||||
}),
|
||||
slugify: eleventyConfig.getFilter("slug")
|
||||
});
|
||||
eleventyConfig.setLibrary("md", markdownLibrary);
|
||||
|
||||
// Override Browsersync defaults (used only with --serve)
|
||||
eleventyConfig.setBrowserSyncConfig({
|
||||
callbacks: {
|
||||
ready: function(err, browserSync) {
|
||||
const content_404 = fs.readFileSync('_site/404.html');
|
||||
// Override Browsersync defaults (used only with --serve)
|
||||
eleventyConfig.setBrowserSyncConfig({
|
||||
callbacks: {
|
||||
ready: function (err, browserSync) {
|
||||
const content_404 = fs.readFileSync('_site/404.html');
|
||||
|
||||
browserSync.addMiddleware("*", (req, res) => {
|
||||
// Provides the 404 content without redirect.
|
||||
res.writeHead(404, {"Content-Type": "text/html; charset=UTF-8"});
|
||||
res.write(content_404);
|
||||
res.end();
|
||||
});
|
||||
},
|
||||
},
|
||||
ui: false,
|
||||
ghostMode: false
|
||||
});
|
||||
browserSync.addMiddleware("*", (req, res) => {
|
||||
// Provides the 404 content without redirect.
|
||||
res.writeHead(404, { "Content-Type": "text/html; charset=UTF-8" });
|
||||
res.write(content_404);
|
||||
res.end();
|
||||
});
|
||||
},
|
||||
},
|
||||
ui: false,
|
||||
ghostMode: false
|
||||
});
|
||||
|
||||
return {
|
||||
// Control which files Eleventy will process
|
||||
// e.g.: *.md, *.njk, *.html, *.liquid
|
||||
templateFormats: [
|
||||
"md",
|
||||
"njk",
|
||||
"html",
|
||||
"liquid"
|
||||
],
|
||||
return {
|
||||
// Control which files Eleventy will process
|
||||
// e.g.: *.md, *.njk, *.html, *.liquid
|
||||
templateFormats: [
|
||||
"md",
|
||||
"njk",
|
||||
"html",
|
||||
"liquid"
|
||||
],
|
||||
|
||||
// -----------------------------------------------------------------
|
||||
// If your site deploys to a subdirectory, change `pathPrefix`.
|
||||
// Don’t worry about leading and trailing slashes, we normalize these.
|
||||
// -----------------------------------------------------------------
|
||||
// If your site deploys to a subdirectory, change `pathPrefix`.
|
||||
// Don’t worry about leading and trailing slashes, we normalize these.
|
||||
|
||||
// If you don’t have a subdirectory, use "" or "/" (they do the same thing)
|
||||
// This is only used for link URLs (it does not affect your file structure)
|
||||
// Best paired with the `url` filter: https://www.11ty.dev/docs/filters/url/
|
||||
// If you don’t have a subdirectory, use "" or "/" (they do the same thing)
|
||||
// This is only used for link URLs (it does not affect your file structure)
|
||||
// Best paired with the `url` filter: https://www.11ty.dev/docs/filters/url/
|
||||
|
||||
// You can also pass this in on the command line using `--pathprefix`
|
||||
// You can also pass this in on the command line using `--pathprefix`
|
||||
|
||||
// Optional (default is shown)
|
||||
pathPrefix: "/",
|
||||
// -----------------------------------------------------------------
|
||||
// Optional (default is shown)
|
||||
pathPrefix: "/",
|
||||
// -----------------------------------------------------------------
|
||||
|
||||
// Pre-process *.md files with: (default: `liquid`)
|
||||
markdownTemplateEngine: "njk",
|
||||
// Pre-process *.md files with: (default: `liquid`)
|
||||
markdownTemplateEngine: "njk",
|
||||
|
||||
// Pre-process *.html files with: (default: `liquid`)
|
||||
htmlTemplateEngine: "njk",
|
||||
// Pre-process *.html files with: (default: `liquid`)
|
||||
htmlTemplateEngine: "njk",
|
||||
|
||||
// Opt-out of pre-processing global data JSON files: (default: `liquid`)
|
||||
dataTemplateEngine: false,
|
||||
// Opt-out of pre-processing global data JSON files: (default: `liquid`)
|
||||
dataTemplateEngine: false,
|
||||
|
||||
// These are all optional (defaults are shown):
|
||||
dir: {
|
||||
input: ".",
|
||||
includes: "_includes",
|
||||
data: "_data",
|
||||
output: "_site"
|
||||
}
|
||||
};
|
||||
// These are all optional (defaults are shown):
|
||||
dir: {
|
||||
input: ".",
|
||||
includes: "_includes",
|
||||
data: "_data",
|
||||
output: "_site"
|
||||
}
|
||||
};
|
||||
};
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -1,38 +1,37 @@
|
|||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>{{ title or metadata.title }}</title>
|
||||
<meta name="description" content="{{ description or metadata.description }}">
|
||||
<link rel="stylesheet" href="{{ '/css/index.css' | url }}">
|
||||
<link rel="stylesheet" href="{{ '/css/prism-base16-monokai.dark.css' | url }}">
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
|
||||
/>
|
||||
<link rel="alternate" href="{{ metadata.feed.path | url }}" type="application/atom+xml" title="{{ metadata.title }}">
|
||||
<link rel="alternate" href="{{ metadata.jsonfeed.path | url }}" type="application/json" title="{{ metadata.title }}">
|
||||
<link rel="icon" href="/img/favicon.ico"/>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<h1 class="home"><a href="{{ '/' | url }}">{{ metadata.title }}</a></h1>
|
||||
|
||||
{#- Read more about `eleventy-navigation` at https://www.11ty.dev/docs/plugins/navigation/ #}
|
||||
|
||||
</header>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>{{ title or metadata.title }}</title>
|
||||
<meta name="description" content="{{ description or metadata.description }}">
|
||||
<link rel="stylesheet" href="{{ '/css/index.css' | url }}">
|
||||
<link rel="stylesheet" href="{{ '/css/prism-base16-monokai.dark.css' | url }}">
|
||||
<link rel="alternate" href="{{ metadata.feed.path | url }}" type="application/atom+xml"
|
||||
title="{{ metadata.title }}">
|
||||
<link rel="alternate" href="{{ metadata.jsonfeed.path | url }}" type="application/json"
|
||||
title="{{ metadata.title }}">
|
||||
<link rel="icon" href="/img/favicon.ico" />
|
||||
</head>
|
||||
|
||||
<main{% if templateClass %} class="{{ templateClass }}"{% endif %}>
|
||||
{{ content | safe }}
|
||||
</main>
|
||||
<body>
|
||||
<header>
|
||||
<h1 class="home"><a href="{{ '/' | url }}">{{ metadata.title }}</a></h1>
|
||||
{#- Read more about `eleventy-navigation` at https://www.11ty.dev/docs/plugins/navigation/ #}
|
||||
</header>
|
||||
|
||||
<footer><ul class="nav">
|
||||
{%- for entry in collections.all | eleventyNavigation %}
|
||||
<li class="nav-item{% if entry.url == page.url %} nav-item-active{% endif %}"><a href="{{ entry.url | url }}">{{ entry.title }}</a></li>
|
||||
{%- endfor %}
|
||||
</ul></footer>
|
||||
<main{% if templateClass %} class="{{ templateClass }}" {% endif %}>
|
||||
{{ content | safe }}
|
||||
</main>
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
<nav>
|
||||
<ul class="nav">
|
||||
{%- for entry in collections.all | eleventyNavigation %}
|
||||
<li class="nav-item{% if entry.url == page.url %} nav-item-active{% endif %}"><a
|
||||
href="{{ entry.url | url }}">{{ entry.title }}</a></li>
|
||||
{%- endfor %}
|
||||
</ul>
|
||||
</nav>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,12 +1,15 @@
|
|||
<ol reversed class="postlist" style="counter-reset: start-from {{ (postslistCounter or postslist.length) + 1 }}">
|
||||
{% for post in postslist | reverse %}
|
||||
<li class="postlist-item{% if post.url == url %} postlist-item-active{% endif %}">
|
||||
<a href="{{ post.url | url }}" class="postlist-link">{% if post.data.title %}{{ post.data.title }}{% else %}<code>{{ post.url }}</code>{% endif %}</a>
|
||||
<time class="postlist-date" datetime="{{ post.date | htmlDateString }}">{{ post.date | readableDate }}</time>
|
||||
{% for tag in post.data.tags | filterTagList %}
|
||||
{% set tagUrl %}/tags/{{ tag | slug }}/{% endset %}
|
||||
<a href="{{ tagUrl | url }}" class="post-tag">{{ tag }}</a>
|
||||
{% endfor %}
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ol>
|
||||
{% for post in postslist | reverse %}
|
||||
<li class="postlist-item{% if post.url == url %} postlist-item-active{% endif %}">
|
||||
<a href="{{ post.url | url }}" class="postlist-link">{% if post.data.title %}{{ post.data.title }}{% else
|
||||
%}<code>{{ post.url }}</code>{% endif %}</a>
|
||||
<time class="postlist-date" datetime="{{ post.date | htmlDateString }}">{{ post.date | readableDate }}</time>
|
||||
{% for tag in post.data.tags | filterTagList %}
|
||||
<span class="post-tags">
|
||||
{% set tagUrl %}/tags/{{ tag | slug }}/{% endset %}
|
||||
<a href="{{ tagUrl | url }}" class="post-tag">{{ tag }}</a>
|
||||
{% endfor %}
|
||||
</span>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ol>
|
||||
101
css/index.css
101
css/index.css
|
|
@ -17,26 +17,51 @@
|
|||
}
|
||||
|
||||
header {
|
||||
height: fit-content;
|
||||
height: fit-content;
|
||||
}
|
||||
|
||||
body {
|
||||
display: grid;
|
||||
text-align: justify;
|
||||
grid-template-rows: auto auto auto;
|
||||
grid-template-columns: 25% 50% 25%;
|
||||
grid-template-areas:
|
||||
"left content right";
|
||||
display: grid;
|
||||
text-align: justify;
|
||||
grid-template-rows: auto;
|
||||
grid-template-columns: 25% 1fr 25%;
|
||||
grid-template-areas:
|
||||
"left content right";
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
font-family: -apple-system, system-ui, sans-serif;
|
||||
font-family: -apple-system, system-ui, sans-serif;
|
||||
color: var(--text);
|
||||
min-height: 100vh;
|
||||
background-image: linear-gradient(116deg, rgba(232, 232, 232, 0.03) 0%, rgba(232, 232, 232, 0.03) 10%, rgba(14, 14, 14, 0.03) 10%, rgba(14, 14, 14, 0.03) 66%, rgba(232, 232, 232, 0.03) 66%, rgba(232, 232, 232, 0.03) 72%, rgba(44, 44, 44, 0.03) 72%, rgba(44, 44, 44, 0.03) 81%, rgba(51, 51, 51, 0.03) 81%, rgba(51, 51, 51, 0.03) 100%), linear-gradient(109deg, rgba(155, 155, 155, 0.03) 0%, rgba(155, 155, 155, 0.03) 23%, rgba(30, 30, 30, 0.03) 23%, rgba(30, 30, 30, 0.03) 63%, rgba(124, 124, 124, 0.03) 63%, rgba(124, 124, 124, 0.03) 73%, rgba(195, 195, 195, 0.03) 73%, rgba(195, 195, 195, 0.03) 84%, rgba(187, 187, 187, 0.03) 84%, rgba(187, 187, 187, 0.03) 100%), linear-gradient(79deg, rgba(254, 254, 254, 0.03) 0%, rgba(254, 254, 254, 0.03) 27%, rgba(180, 180, 180, 0.03) 27%, rgba(180, 180, 180, 0.03) 33%, rgba(167, 167, 167, 0.03) 33%, rgba(167, 167, 167, 0.03) 34%, rgba(68, 68, 68, 0.03) 34%, rgba(68, 68, 68, 0.03) 63%, rgba(171, 171, 171, 0.03) 63%, rgba(171, 171, 171, 0.03) 100%), linear-gradient(109deg, rgba(71, 71, 71, 0.03) 0%, rgba(71, 71, 71, 0.03) 3%, rgba(97, 97, 97, 0.03) 3%, rgba(97, 97, 97, 0.03) 40%, rgba(40, 40, 40, 0.03) 40%, rgba(40, 40, 40, 0.03) 55%, rgba(5, 5, 5, 0.03) 55%, rgba(5, 5, 5, 0.03) 73%, rgba(242, 242, 242, 0.03) 73%, rgba(242, 242, 242, 0.03) 100%), linear-gradient(271deg, rgba(70, 70, 70, 0.03) 0%, rgba(70, 70, 70, 0.03) 11%, rgba(178, 178, 178, 0.03) 11%, rgba(178, 178, 178, 0.03) 23%, rgba(28, 28, 28, 0.03) 23%, rgba(28, 28, 28, 0.03) 72%, rgba(152, 152, 152, 0.03) 72%, rgba(152, 152, 152, 0.03) 86%, rgba(43, 43, 43, 0.03) 86%, rgba(43, 43, 43, 0.03) 100%), linear-gradient(90deg, rgb(27, 27, 27), rgb(1, 1, 1));
|
||||
background-size: 100% 100%;
|
||||
|
||||
background-size: 100% 100%;
|
||||
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
body {
|
||||
grid-template-rows: auto auto 1fr;
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-areas: "left""right""content";
|
||||
}
|
||||
|
||||
.postlist .postlist-item {
|
||||
display: grid;
|
||||
grid-template-rows: auto 1fr;
|
||||
grid-template-columns: auto auto 1fr;
|
||||
grid-template-areas: "number title title" "time time tags";
|
||||
}
|
||||
|
||||
.postlist-item:before { grid-area: number; }
|
||||
.postlist-link { grid-area: title; }
|
||||
.postlist-date { grid-area: time; }
|
||||
.post-tags { grid-area: tags; text-align: left; }
|
||||
|
||||
}
|
||||
|
||||
nav {
|
||||
grid-area: right;
|
||||
justify-self: center;
|
||||
}
|
||||
|
||||
p:last-child {
|
||||
margin-bottom: 0;
|
||||
|
|
@ -57,7 +82,8 @@ a[href]:visited {
|
|||
|
||||
main {
|
||||
padding: 1rem;
|
||||
grid-area: content
|
||||
grid-area: content;
|
||||
justify-self: center;
|
||||
}
|
||||
|
||||
main :first-child {
|
||||
|
|
@ -65,13 +91,9 @@ main :first-child {
|
|||
}
|
||||
|
||||
header {
|
||||
color: var(--text)
|
||||
}
|
||||
|
||||
header:after {
|
||||
content: "";
|
||||
display: table;
|
||||
clear: both;
|
||||
grid-area: left;
|
||||
color: var(--text);
|
||||
justify-self: center;
|
||||
}
|
||||
|
||||
table {
|
||||
|
|
@ -108,7 +130,7 @@ pre {
|
|||
padding: 1em;
|
||||
margin: .5em 0;
|
||||
overflow-y: auto;
|
||||
|
||||
|
||||
}
|
||||
|
||||
/*background-color: var(--code-bg)*/
|
||||
|
|
@ -310,30 +332,37 @@ a[href].direct-link:focus:visited,
|
|||
color: #aaa;
|
||||
}
|
||||
|
||||
h1,h2,h3,h4,h5,h6 {
|
||||
text-align: center;
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
text-align: center;
|
||||
}
|
||||
div.time-and-tags{
|
||||
align-content: center;
|
||||
grid-template-rows: auto ;
|
||||
grid-template-columns: auto;
|
||||
grid-template-areas:
|
||||
"content";
|
||||
|
||||
div.time-and-tags {
|
||||
align-content: center;
|
||||
grid-template-rows: auto;
|
||||
grid-template-columns: auto;
|
||||
grid-template-areas:
|
||||
"content";
|
||||
}
|
||||
|
||||
.container {
|
||||
width: 100%;
|
||||
height: fit-content;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
height: fit-content;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.tandt {
|
||||
width: fit-content;
|
||||
height: fit-content;
|
||||
width: fit-content;
|
||||
height: fit-content;
|
||||
}
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
margin: auto;
|
||||
display: block;
|
||||
width: 100%;
|
||||
margin: auto;
|
||||
display: block;
|
||||
}
|
||||
Loading…
Reference in New Issue