diff --git a/.eleventy.js b/.eleventy.js index f2ba554..9bda938 100644 --- a/.eleventy.js +++ b/.eleventy.js @@ -7,6 +7,9 @@ * - `src/config/transforms.js` */ +// get package.json +const pkg = require('./package.json'); + // module import filters const { wordCount, @@ -109,6 +112,12 @@ module.exports = eleventyConfig => { // --------------------- Passthrough File Copy ----------------------- + // webc js and css dependencies + eleventyConfig.addPassthroughCopy({ + 'src/_includes/webc/*.css': `assets/components/`, + 'src/_includes/webc/*.js': `assets/components/` + }); + // node modules eleventyConfig.addPassthroughCopy({ 'node_modules/speedlify-score/speedlify-score.css': `assets/components/speedlify-score.css`, diff --git a/netlify.toml b/netlify.toml index 1ea1e37..4b2c545 100644 --- a/netlify.toml +++ b/netlify.toml @@ -7,6 +7,12 @@ wcagLevel = 'WCAG2AAA' +[[plugins]] +package = "netlify-plugin-cache" + [plugins.inputs] + paths = [ ".cache" ] + + [[headers]] for = "/*" [headers.values] diff --git a/package-lock.json b/package-lock.json index d1c69e8..be1766c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -27,6 +27,7 @@ "cross-env": "^7.0.3", "cssnano": "^5.1.7", "dayjs": "^1.11.5", + "dotenv": "^16.0.3", "esbuild": "^0.15.10", "eslint": "^8.24.0", "eslint-config-prettier": "^8.5.0", @@ -1628,6 +1629,15 @@ "url": "https://github.com/fb55/domutils?sponsor=1" } }, + "node_modules/dotenv": { + "version": "16.0.3", + "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-16.0.3.tgz", + "integrity": "sha512-7GO6HghkA5fYG9TYnNxi14/7K9f5occMlp3zXAuSxn7CKCxt9xbNWG7yF8hTCSUchlfWSe3uLmlPfigevRItzQ==", + "dev": true, + "engines": { + "node": ">=12" + } + }, "node_modules/ee-first": { "version": "1.1.1", "resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz", @@ -8294,6 +8304,12 @@ "domhandler": "^4.2.0" } }, + "dotenv": { + "version": "16.0.3", + "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-16.0.3.tgz", + "integrity": "sha512-7GO6HghkA5fYG9TYnNxi14/7K9f5occMlp3zXAuSxn7CKCxt9xbNWG7yF8hTCSUchlfWSe3uLmlPfigevRItzQ==", + "dev": true + }, "ee-first": { "version": "1.1.1", "resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz", diff --git a/package.json b/package.json index 933f866..e904168 100644 --- a/package.json +++ b/package.json @@ -9,11 +9,11 @@ "scripts": { "clean": "rimraf dist", "dev:postcss": "postcss src/assets/css/global.css --o dist/assets/css/global.css --watch --verbose", - "dev:scripts": "esbuild src/assets/scripts/app.js src/assets/scripts/is-land.js --bundle --watch --outdir=dist/assets", + "dev:scripts": "esbuild src/assets/scripts/app.js --bundle --watch --outdir=dist/assets", "dev:11ty": "eleventy --serve --watch", "build:postcss": "NODE_ENV=production postcss src/assets/css/global.css -o dist/assets/css/global.css", "build:11ty": "cross-env ELEVENTY_ENV=production eleventy", - "build:scripts": "esbuild src/assets/scripts/app.js src/assets/scripts/is-land.js --bundle --minify --outdir=dist/assets --platform=node --tree-shaking=true", + "build:scripts": "esbuild src/assets/scripts/app.js --bundle --minify --outdir=dist/assets --platform=node --tree-shaking=true", "start": "run-p dev:*", "build": "run-s clean build:*" }, @@ -43,6 +43,7 @@ "cross-env": "^7.0.3", "cssnano": "^5.1.7", "dayjs": "^1.11.5", + "dotenv": "^16.0.3", "esbuild": "^0.15.10", "eslint": "^8.24.0", "eslint-config-prettier": "^8.5.0", diff --git a/src/_data/github.js b/src/_data/github.js new file mode 100644 index 0000000..0142bf6 --- /dev/null +++ b/src/_data/github.js @@ -0,0 +1,14 @@ +const EleventyFetch = require('@11ty/eleventy-fetch'); + +module.exports = async function () { + let url = 'https://api.github.com/users/madrilene/repos'; + + // returning promise + + let data = await EleventyFetch(url, { + duration: '1d', + type: 'json' + }); + + return data; +}; diff --git a/src/_data/meta.js b/src/_data/meta.js index 3103f31..4f8bc05 100644 --- a/src/_data/meta.js +++ b/src/_data/meta.js @@ -1,3 +1,5 @@ +const package = require('../../package.json'); + module.exports = { siteName: 'Lene Saile', siteDescription: @@ -32,5 +34,6 @@ module.exports = { menu: { closedText: 'Menu' }, - env: process.env.ELEVENTY_ENV === 'production' + env: process.env.ELEVENTY_ENV === 'production', + pkv: package.version || 'v1' }; diff --git a/src/_data/navigation.json b/src/_data/navigation.json index 2967fd6..03a1bcd 100644 --- a/src/_data/navigation.json +++ b/src/_data/navigation.json @@ -12,6 +12,10 @@ { "text": "WebC", "url": "/test/" + }, + { + "text": "Github", + "url": "/github/" } ] } diff --git a/src/_includes/webc/islandcomp.webc b/src/_includes/webc/island-comp.webc similarity index 100% rename from src/_includes/webc/islandcomp.webc rename to src/_includes/webc/island-comp.webc diff --git a/src/_includes/webc/my-marquee.webc b/src/_includes/webc/my-marquee.webc new file mode 100644 index 0000000..6ff45ae --- /dev/null +++ b/src/_includes/webc/my-marquee.webc @@ -0,0 +1,21 @@ +Lorem ipsum dolor sit amet, consectetur + + + + diff --git a/src/_includes/webc/speedlify-score.webc b/src/_includes/webc/speedlify-score.webc new file mode 100644 index 0000000..2b8ec4d --- /dev/null +++ b/src/_includes/webc/speedlify-score.webc @@ -0,0 +1,14 @@ + + + diff --git a/src/_includes/webc/youtube-lite-player.webc b/src/_includes/webc/youtube-lite-player.webc index 5ab96f6..c049473 100644 --- a/src/_includes/webc/youtube-lite-player.webc +++ b/src/_includes/webc/youtube-lite-player.webc @@ -1,31 +1,21 @@ - - - - - - + + + + diff --git a/src/assets/scripts/app.js b/src/assets/scripts/app.js index 4417bde..d8ca4bf 100644 --- a/src/assets/scripts/app.js +++ b/src/assets/scripts/app.js @@ -1,5 +1,3 @@ -import {testGSAP} from './components/gsap'; - // ------------------- cards redundant click, accessible whole card clickable solution by Heydon Pickering const cards = [...document.querySelectorAll('.card')]; @@ -62,7 +60,3 @@ document.querySelectorAll('img').forEach(img => { } img.addEventListener('load', () => img.removeAttribute('data-is-loading')); }); - -// GSAP - -// testGSAP(); diff --git a/src/assets/scripts/is-land.js b/src/assets/scripts/is-land.js deleted file mode 100644 index 3d55f26..0000000 --- a/src/assets/scripts/is-land.js +++ /dev/null @@ -1,341 +0,0 @@ -const islandOnceCache = new Map(); - -class Island extends HTMLElement { - static tagName = 'is-land'; - - static fallback = { - ':not(:defined)': (readyPromise, node, prefix) => { - // remove from document to prevent web component init - let cloned = document.createElement(prefix + node.localName); - for (let attr of node.getAttributeNames()) { - cloned.setAttribute(attr, node.getAttribute(attr)); - } - - let children = Array.from(node.childNodes); - for (let child of children) { - cloned.append(child); // Keep the *same* child nodes, clicking on a details->summary child should keep the state of that child - } - node.replaceWith(cloned); - - return readyPromise.then(() => { - // restore children (not cloned) - for (let child of Array.from(cloned.childNodes)) { - node.append(child); - } - cloned.replaceWith(node); - }); - } - }; - - static autoinit = { - 'petite-vue': function (library) { - library.createApp().mount(this); - }, - 'vue': function (library) { - library.createApp().mount(this); - }, - 'svelte': function (mod) { - new mod.default({target: this}); - }, - 'svelte-ssr': function (mod) { - new mod.default({target: this, hydrate: true}); - }, - 'preact': function (mod) { - mod.default(this); - } - }; - - constructor() { - super(); - - this.attrs = { - autoInitType: 'autoinit', - import: 'import', - template: 'data-island', - ready: 'ready' - }; - - this.conditionMap = { - 'visible': Conditions.visible, - 'idle': Conditions.idle, - 'interaction': Conditions.interaction, - 'media': Conditions.media, - 'save-data': Conditions.saveData - }; - - // Internal promises - this.ready = new Promise((resolve, reject) => { - this.readyResolve = resolve; - this.readyReject = reject; - }); - } - - static getParents(el, selector, stopAt = false) { - let nodes = []; - while (el) { - if (el.matches && el.matches(selector)) { - if (stopAt && el === stopAt) { - break; - } - - nodes.push(el); - } - el = el.parentNode; - } - return nodes; - } - - static async ready(el) { - let parents = Island.getParents(el, Island.tagName); - let imports = await Promise.all(parents.map(el => el.wait())); - - // return innermost module import - if (imports.length) { - return imports[0]; - } - } - - async forceFallback() { - let prefix = Island.tagName + '--'; - let promises = []; - - if (window.Island) { - Object.assign(Island.fallback, window.Island.fallback); - } - - for (let selector in Island.fallback) { - // Reverse here as a cheap way to get the deepest nodes first - let components = Array.from(this.querySelectorAll(selector)).reverse(); - - // with thanks to https://gist.github.com/cowboy/938767 - for (let node of components) { - if (!node.isConnected || node.localName === Island.tagName) { - continue; - } - - let readyPromise = Island.ready(node); - promises.push(Island.fallback[selector](readyPromise, node, prefix)); - } - } - - return promises; - } - - wait() { - return this.ready; - } - - getConditions() { - let map = {}; - for (let key of Object.keys(this.conditionMap)) { - if (this.hasAttribute(`on:${key}`)) { - map[key] = this.getAttribute(`on:${key}`); - } - } - - return map; - } - - async connectedCallback() { - // Keep fallback content without initializing the components - // TODO improvement: only run this for not-eager components? - await this.forceFallback(); - - await this.hydrate(); - } - - getTemplates() { - return this.querySelectorAll(`:scope template[${this.attrs.template}]`); - } - - replaceTemplates(templates) { - // replace