wonderfulfrog/wonderfulfrog.com
1
0
Fork 0
Code Issues Pull requests Activity Actions

feat: convert templates from njk to html

Browse source 
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 2024-01-28 20:52:09 -08:00
parent d666ef0731
commit a5526174ba
11 changed files with 107 additions and 10 deletions
Download patch file Download diff file Expand all files Collapse all files

4
.eleventy.js
View file

@ -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
pathPrefix: "/",
markdownTemplateEngine: "njk",
dataTemplateEngine: "njk",
htmlTemplateEngine: "njk",
dir: {
output: "dist",
input: "src",

1
src/_includes/partials/footer.html Normal file
View file

@ -0,0 +1 @@
<footer>Footer.</footer>

3
src/_includes/partials/footer.njk
View file

@ -1,3 +0,0 @@
<footer class="site-foot">
Footer.
</footer>

1
src/_includes/partials/header.html Normal file
View file

@ -0,0 +1 @@
<header>{% include "partials/menu.html" %}</header>

3
src/_includes/partials/header.njk
View file

@ -1,3 +0,0 @@
<header class="wrapper">
{% include "partials/menu.njk" %}
</header>

2
src/_includes/partials/menu.njk → src/_includes/partials/menu.html
View file

@ -1,4 +1,4 @@
<nav id="mainnav" class="navbar" aria-label="Main">
<nav aria-label="Main">
Menu.
<ul>
{% for item in navigation.top %}

6
src/_layouts/base.njk → src/_layouts/base.html
View file

@ -10,8 +10,8 @@
</head>
<body>
{% include "partials/header.njk" %}
<main id="main" class="flow">{{ content | safe }}</main>
{% include "partials/footer.njk" %}
{% include "partials/header.html" %}
<main id="main" class="wrapper">{{ content | safe }}</main>
{% include "partials/footer.html" %}
</body>
</html>

2
src/assets/css/global.css
View file

@ -1,3 +1,5 @@
@import "global/reset.css";
@import "global/global-styles.css";
@import-glob "utils/*.css";

5
src/assets/css/global/variables.css Normal file
View file

@ -0,0 +1,5 @@
/* Global variables */
:root {
--transition-duration: 250ms;
--transition-timing: ease;
}

15
src/assets/css/utils/wrapper.css Normal file
View 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
View 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));
},
};