Please don’t submit issues or PRs. I’m just sharing this for people that might want a decent starter. This isn’t open source: just free. Thanks.
6 | 7 | ℹ️ If you want to learn how it works, go ahead and take my [Eleventy course](//swop.link/11ty) 8 | 9 | ## Getting started 10 | 11 | Ideally, you’ll be using an LTS version of Node JS and if in Windows, the WSL setup because it works better with gulp. 12 | 13 | 1. Run `npm install` 14 | 2. Run `npm start` to run locally 15 | 3. Run `npm run production` to do a prod build 16 | -------------------------------------------------------------------------------- /src/_data/global.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | random() { 3 | const segment = () => { 4 | return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1); 5 | }; 6 | return `${segment()}-${segment()}-${segment()}`; 7 | } 8 | }; 9 | -------------------------------------------------------------------------------- /src/_data/helpers.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | /** 3 | * Returns back some attributes based on wether the 4 | * link is active or a parent of an active item 5 | * 6 | * @param {String} itemUrl The link in question 7 | * @param {String} pageUrl The page context 8 | * @returns {String} The attributes or empty 9 | */ 10 | getLinkActiveState(itemUrl, pageUrl) { 11 | let response = ''; 12 | 13 | if (itemUrl === pageUrl) { 14 | response = ' aria-current="page"'; 15 | } 16 | 17 | if (itemUrl.length > 1 && pageUrl.indexOf(itemUrl) === 0) { 18 | response += ' data-state="active"'; 19 | } 20 | 21 | return response; 22 | }, 23 | /** 24 | * Filters out the passed item from the passed collection 25 | * and randomises and limits them based on flags 26 | * 27 | * @param {Array} collection The 11ty collection we want to take from 28 | * @param {Object} item The item we want to exclude (often current page) 29 | * @param {Number} limit=3 How many items we want back 30 | * @param {Boolean} random=true Wether or not this should be randomised 31 | * @returns {Array} The resulting collection 32 | */ 33 | getSiblingContent(collection, item, limit = 3, random = true) { 34 | let filteredItems = collection.filter(x => x.url !== item.url); 35 | 36 | if (random) { 37 | let counter = filteredItems.length; 38 | 39 | while (counter > 0) { 40 | // Pick a random index 41 | let index = Math.floor(Math.random() * counter); 42 | 43 | counter--; 44 | 45 | let temp = filteredItems[counter]; 46 | 47 | // Swap the last element with the random one 48 | filteredItems[counter] = filteredItems[index]; 49 | filteredItems[index] = temp; 50 | } 51 | } 52 | 53 | // Lastly, trim to length 54 | if (limit > 0) { 55 | filteredItems = filteredItems.slice(0, limit); 56 | } 57 | 58 | return filteredItems; 59 | }, 60 | 61 | /** 62 | * Take an array of keys and return back items that match. 63 | * Note: items in the collection must have a key attribute in 64 | * Front Matter 65 | * 66 | * @param {Array} collection 11ty collection 67 | * @param {Array} keys collection of keys 68 | * @returns {Array} result collection or empty 69 | */ 70 | filterCollectionByKeys(collection, keys) { 71 | return collection.filter(x => keys.includes(x.data.key)); 72 | } 73 | }; 74 | -------------------------------------------------------------------------------- /src/_data/navigation.json: -------------------------------------------------------------------------------- 1 | { 2 | "items": [ 3 | { 4 | "text": "Home", 5 | "url": "/" 6 | }, 7 | { 8 | "text": "About", 9 | "url": "/about/" 10 | } 11 | ] 12 | } 13 | -------------------------------------------------------------------------------- /src/_data/site.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "11ty Base Project", 3 | "url": "https://example.com", 4 | "authorName": "Base Author", 5 | "authorEmail": "hi@example.com" 6 | } 7 | -------------------------------------------------------------------------------- /src/_includes/layouts/base.njk: -------------------------------------------------------------------------------- 1 | {% set assetHash = global.random() %} 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | {% include "partials/meta-info.njk" %} 10 | 11 | 12 | 13 | {# Add facility for pages to delare an array of critical styles #} 14 | {% if pageCriticalStyles %} 15 | {% for item in pageCriticalStyles %} 16 | 17 | {% endfor %} 18 | {% endif %} 19 | 20 | 21 | 22 | {# Add facility for pages to declare an array of stylesheet paths #} 23 | {% if pageStylesheets %} 24 | {% for item in pageStylesheets %} 25 | 26 | {% endfor %} 27 | {% endif %} 28 | 29 | 30 | {% include "partials/site-head.njk" %} 31 | 32 |