feat: convert templates from njk to html
Note: Nunjucks will still process the templates, but this way they can be plain HTML files and will be formatted properly.
This commit is contained in:
Devin Lumley
parent
d666ef0731
commit
a5526174ba
11 changed files with 107 additions and 10 deletions
|
|
@ -10,6 +10,10 @@ module.exports = (eleventyConfig) => {
|
||||||
// Optional (default is set): If your site deploys to a subdirectory, change `pathPrefix`, for example with with GitHub pages
|
// Optional (default is set): If your site deploys to a subdirectory, change `pathPrefix`, for example with with GitHub pages
|
||||||
pathPrefix: "/",
|
pathPrefix: "/",
|
||||||
|
|
||||||
|
markdownTemplateEngine: "njk",
|
||||||
|
dataTemplateEngine: "njk",
|
||||||
|
htmlTemplateEngine: "njk",
|
||||||
|
|
||||||
dir: {
|
dir: {
|
||||||
output: "dist",
|
output: "dist",
|
||||||
input: "src",
|
input: "src",
|
||||||
|
|
|
||||||
1
src/_includes/partials/footer.html
Normal file
1
src/_includes/partials/footer.html
Normal file
|
|
@ -0,0 +1 @@
|
||||||
|
<footer>Footer.</footer>
|
||||||
|
|
@ -1,3 +0,0 @@
|
||||||
<footer class="site-foot">
|
|
||||||
Footer.
|
|
||||||
</footer>
|
|
||||||
1
src/_includes/partials/header.html
Normal file
1
src/_includes/partials/header.html
Normal file
|
|
@ -0,0 +1 @@
|
||||||
|
<header>{% include "partials/menu.html" %}</header>
|
||||||
|
|
@ -1,3 +0,0 @@
|
||||||
<header class="wrapper">
|
|
||||||
{% include "partials/menu.njk" %}
|
|
||||||
</header>
|
|
||||||
|
|
@ -1,4 +1,4 @@
|
||||||
<nav id="mainnav" class="navbar" aria-label="Main">
|
<nav aria-label="Main">
|
||||||
Menu.
|
Menu.
|
||||||
<ul>
|
<ul>
|
||||||
{% for item in navigation.top %}
|
{% for item in navigation.top %}
|
||||||
|
|
@ -10,8 +10,8 @@
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
{% include "partials/header.njk" %}
|
{% include "partials/header.html" %}
|
||||||
<main id="main" class="flow">{{ content | safe }}</main>
|
<main id="main" class="wrapper">{{ content | safe }}</main>
|
||||||
{% include "partials/footer.njk" %}
|
{% include "partials/footer.html" %}
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
@ -1,3 +1,5 @@
|
||||||
@import "global/reset.css";
|
@import "global/reset.css";
|
||||||
|
|
||||||
@import "global/global-styles.css";
|
@import "global/global-styles.css";
|
||||||
|
|
||||||
|
@import-glob "utils/*.css";
|
||||||
|
|
|
||||||
5
src/assets/css/global/variables.css
Normal file
5
src/assets/css/global/variables.css
Normal file
|
|
@ -0,0 +1,5 @@
|
||||||
|
/* Global variables */
|
||||||
|
:root {
|
||||||
|
--transition-duration: 250ms;
|
||||||
|
--transition-timing: ease;
|
||||||
|
}
|
||||||
15
src/assets/css/utils/wrapper.css
Normal file
15
src/assets/css/utils/wrapper.css
Normal file
|
|
@ -0,0 +1,15 @@
|
||||||
|
/**
|
||||||
|
* WRAPPER
|
||||||
|
* Sets a max width, adds a consistent gutter and horizontally
|
||||||
|
* centers the contents
|
||||||
|
* https://piccalil.li/quick-tip/use-css-clamp-to-create-a-more-flexible-wrapper-utility/
|
||||||
|
*/
|
||||||
|
.wrapper {
|
||||||
|
width: 90vw;
|
||||||
|
width: clamp(16rem, 90vw, 70rem);
|
||||||
|
margin-left: auto;
|
||||||
|
margin-right: auto;
|
||||||
|
padding-left: 1.5rem;
|
||||||
|
padding-right: 1.5rem;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
75
src/data/helpers.js
Normal file
75
src/data/helpers.js
Normal file
|
|
@ -0,0 +1,75 @@
|
||||||
|
/** © Andy Bell - https://buildexcellentwebsit.es/ */
|
||||||
|
|
||||||
|
module.exports = {
|
||||||
|
/**
|
||||||
|
* Returns back some attributes based on wether the
|
||||||
|
* link is active or a parent of an active item
|
||||||
|
*
|
||||||
|
* @param {String} itemUrl The link in question
|
||||||
|
* @param {String} pageUrl The page context
|
||||||
|
* @returns {String} The attributes or empty
|
||||||
|
*/
|
||||||
|
getLinkActiveState(itemUrl, pageUrl) {
|
||||||
|
let response = "";
|
||||||
|
|
||||||
|
if (itemUrl === pageUrl) {
|
||||||
|
response = ' aria-current="page"';
|
||||||
|
}
|
||||||
|
|
||||||
|
if (itemUrl.length > 1 && pageUrl.indexOf(itemUrl) === 0) {
|
||||||
|
response += ' data-state="active"';
|
||||||
|
}
|
||||||
|
|
||||||
|
return response;
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* Filters out the passed item from the passed collection
|
||||||
|
* and randomises and limits them based on flags
|
||||||
|
*
|
||||||
|
* @param {Array} collection The 11ty collection we want to take from
|
||||||
|
* @param {Object} item The item we want to exclude (often current page)
|
||||||
|
* @param {Number} limit=3 How many items we want back
|
||||||
|
* @param {Boolean} random=true Wether or not this should be randomised
|
||||||
|
* @returns {Array} The resulting collection
|
||||||
|
*/
|
||||||
|
getSiblingContent(collection, item, limit = 3, random = true) {
|
||||||
|
let filteredItems = collection.filter((x) => x.url !== item.url);
|
||||||
|
|
||||||
|
if (random) {
|
||||||
|
let counter = filteredItems.length;
|
||||||
|
|
||||||
|
while (counter > 0) {
|
||||||
|
// Pick a random index
|
||||||
|
let index = Math.floor(Math.random() * counter);
|
||||||
|
|
||||||
|
counter--;
|
||||||
|
|
||||||
|
let temp = filteredItems[counter];
|
||||||
|
|
||||||
|
// Swap the last element with the random one
|
||||||
|
filteredItems[counter] = filteredItems[index];
|
||||||
|
filteredItems[index] = temp;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Lastly, trim to length
|
||||||
|
if (limit > 0) {
|
||||||
|
filteredItems = filteredItems.slice(0, limit);
|
||||||
|
}
|
||||||
|
|
||||||
|
return filteredItems;
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Take an array of keys and return back items that match.
|
||||||
|
* Note: items in the collection must have a key attribute in
|
||||||
|
* Front Matter
|
||||||
|
*
|
||||||
|
* @param {Array} collection 11ty collection
|
||||||
|
* @param {Array} keys collection of keys
|
||||||
|
* @returns {Array} result collection or empty
|
||||||
|
*/
|
||||||
|
filterCollectionByKeys(collection, keys) {
|
||||||
|
return collection.filter((x) => keys.includes(x.data.key));
|
||||||
|
},
|
||||||
|
};
|
||||||
Loading…
Add table
Add a link
Reference in a new issue