convert to real starter
This commit is contained in:
madrilene
parent
32945ef13b
commit
42ca75760f
34 changed files with 71 additions and 1374 deletions
29
.eleventy.js
29
.eleventy.js
|
|
@ -5,11 +5,9 @@
|
|||
* - `src/config/plugins.js`
|
||||
* - `src/config/shortcodes.js`
|
||||
* - `src/config/transforms.js`
|
||||
* Based on https://github.com/AleksandrHovhannisyan.
|
||||
*/
|
||||
|
||||
// get package.json
|
||||
const pkg = require('./package.json');
|
||||
|
||||
// module import filters
|
||||
const {
|
||||
wordCount,
|
||||
|
|
@ -19,6 +17,8 @@ const {
|
|||
where,
|
||||
toISOString,
|
||||
formatDate,
|
||||
formatDateES,
|
||||
formatDateDE,
|
||||
dividedBy,
|
||||
newlineToBr,
|
||||
toAbsoluteUrl,
|
||||
|
|
@ -49,7 +49,6 @@ const {EleventyRenderPlugin} = require('@11ty/eleventy');
|
|||
const syntaxHighlight = require('@11ty/eleventy-plugin-syntaxhighlight');
|
||||
const {slugifyString} = require('./config/utils');
|
||||
const {escape} = require('lodash');
|
||||
const pluginWebc = require('@11ty/eleventy-plugin-webc');
|
||||
|
||||
module.exports = eleventyConfig => {
|
||||
// Tell 11ty to use the .eleventyignore and ignore our .gitignore file
|
||||
|
|
@ -74,6 +73,8 @@ module.exports = eleventyConfig => {
|
|||
eleventyConfig.addFilter('toHtml', toHtml);
|
||||
eleventyConfig.addFilter('toIsoString', toISOString);
|
||||
eleventyConfig.addFilter('formatDate', formatDate);
|
||||
eleventyConfig.addFilter('formatDateES', formatDateES);
|
||||
eleventyConfig.addFilter('formatDateDE', formatDateDE);
|
||||
eleventyConfig.addFilter('dividedBy', dividedBy);
|
||||
eleventyConfig.addFilter('newlineToBr', newlineToBr);
|
||||
eleventyConfig.addFilter('toAbsoluteUrl', toAbsoluteUrl);
|
||||
|
|
@ -106,29 +107,9 @@ module.exports = eleventyConfig => {
|
|||
eleventyConfig.addPlugin(EleventyRenderPlugin);
|
||||
eleventyConfig.addPlugin(syntaxHighlight);
|
||||
eleventyConfig.setLibrary('md', markdownLib);
|
||||
eleventyConfig.addPlugin(pluginWebc, {
|
||||
components: 'src/_includes/webc/*.webc'
|
||||
});
|
||||
|
||||
// --------------------- 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`,
|
||||
'node_modules/speedlify-score/speedlify-score.js': `assets/components/speedlify-score.js`,
|
||||
'node_modules/lite-youtube-embed/src/lite-yt-embed.css': `assets/components/lite-yt-embed.css`,
|
||||
'node_modules/lite-youtube-embed/src/lite-yt-embed.js': `assets/components/lite-yt-embed.js`,
|
||||
'node_modules/artificial-chart/artificial-chart.css': `assets/components/artificial-chart.css`,
|
||||
'node_modules/artificial-chart/artificial-chart.js': `assets/components/artificial-chart.js`,
|
||||
'node_modules/@11ty/is-land/is-land.js': `assets/components/is-land.js`
|
||||
});
|
||||
|
||||
eleventyConfig.addPassthroughCopy('src/assets/fonts/');
|
||||
eleventyConfig.addPassthroughCopy('src/assets/images/');
|
||||
|
||||
|
|
|
|||
170
package-lock.json
generated
170
package-lock.json
generated
|
|
@ -13,9 +13,6 @@
|
|||
"@11ty/eleventy-fetch": "^3.0.0",
|
||||
"@11ty/eleventy-img": "^2.0.1",
|
||||
"@11ty/eleventy-plugin-syntaxhighlight": "^4.1.0",
|
||||
"@11ty/eleventy-plugin-webc": "^0.4.0",
|
||||
"@11ty/is-land": "^2.0.3",
|
||||
"gsap": "^3.11.3",
|
||||
"tailwindcss": "^3.0.23"
|
||||
},
|
||||
"devDependencies": {
|
||||
|
|
@ -196,22 +193,6 @@
|
|||
"url": "https://opencollective.com/11ty"
|
||||
}
|
||||
},
|
||||
"node_modules/@11ty/eleventy-plugin-webc": {
|
||||
"version": "0.4.0",
|
||||
"resolved": "https://registry.npmjs.org/@11ty/eleventy-plugin-webc/-/eleventy-plugin-webc-0.4.0.tgz",
|
||||
"integrity": "sha512-G/mHFBY0xx6lonmM9CLX9gtwTCwdR5h1E3YZ0vbeAlhKbP6A3yM5RUUSMEUYm/eg8F+wbUCoE85AtmcTllPivg==",
|
||||
"dependencies": {
|
||||
"@11ty/eleventy": "^2.0.0-canary.16",
|
||||
"@11ty/webc": "^0.4.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=14.18"
|
||||
},
|
||||
"funding": {
|
||||
"type": "opencollective",
|
||||
"url": "https://opencollective.com/11ty"
|
||||
}
|
||||
},
|
||||
"node_modules/@11ty/eleventy-utils": {
|
||||
"version": "1.0.1",
|
||||
"resolved": "https://registry.npmjs.org/@11ty/eleventy-utils/-/eleventy-utils-1.0.1.tgz",
|
||||
|
|
@ -227,36 +208,6 @@
|
|||
"url": "https://opencollective.com/11ty"
|
||||
}
|
||||
},
|
||||
"node_modules/@11ty/is-land": {
|
||||
"version": "2.0.3",
|
||||
"resolved": "https://registry.npmjs.org/@11ty/is-land/-/is-land-2.0.3.tgz",
|
||||
"integrity": "sha512-XFZbODzs0kRbo4KEnSmCGmTMaqQhfKxFRMeA2wQiqqLq7P85RtHMbKhrLrR+nYmcwJUyMu/SUgl7b4B9+nnTJw==",
|
||||
"funding": {
|
||||
"type": "opencollective",
|
||||
"url": "https://opencollective.com/11ty"
|
||||
}
|
||||
},
|
||||
"node_modules/@11ty/webc": {
|
||||
"version": "0.4.5",
|
||||
"resolved": "https://registry.npmjs.org/@11ty/webc/-/webc-0.4.5.tgz",
|
||||
"integrity": "sha512-jqlIYJEa7YVEInkNUYssFTFtjKNV8zQmAUbMNemhS6iR5uwxL89PKCb1ekWBAGJy1YDnpHVxcBLlGt9Ru6tu/w==",
|
||||
"dependencies": {
|
||||
"@11ty/eleventy-utils": "^1.0.1",
|
||||
"css-tree": "^2.2.1",
|
||||
"dependency-graph": "^0.11.0",
|
||||
"entities": "^4.4.0",
|
||||
"fast-glob": "^3.2.12",
|
||||
"nanoid": "^4.0.0",
|
||||
"parse5": "^7.1.1"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=14.18"
|
||||
},
|
||||
"funding": {
|
||||
"type": "opencollective",
|
||||
"url": "https://opencollective.com/11ty"
|
||||
}
|
||||
},
|
||||
"node_modules/@babel/helper-string-parser": {
|
||||
"version": "7.19.4",
|
||||
"resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.19.4.tgz",
|
||||
|
|
@ -1242,19 +1193,6 @@
|
|||
"url": "https://github.com/sponsors/fb55"
|
||||
}
|
||||
},
|
||||
"node_modules/css-tree": {
|
||||
"version": "2.2.1",
|
||||
"resolved": "https://registry.npmjs.org/css-tree/-/css-tree-2.2.1.tgz",
|
||||
"integrity": "sha512-OA0mILzGc1kCOCSJerOeqDxDQ4HOh+G8NbOJFOTgOCzpw7fCBubk0fEyxp8AgOL/jvLgYA/uV0cMbe43ElF1JA==",
|
||||
"dependencies": {
|
||||
"mdn-data": "2.0.28",
|
||||
"source-map-js": "^1.0.1"
|
||||
},
|
||||
"engines": {
|
||||
"node": "^10 || ^12.20.0 || ^14.13.0 || >=15.0.0",
|
||||
"npm": ">=7.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/css-what": {
|
||||
"version": "6.1.0",
|
||||
"resolved": "https://registry.npmjs.org/css-what/-/css-what-6.1.0.tgz",
|
||||
|
|
@ -1685,17 +1623,6 @@
|
|||
"once": "^1.4.0"
|
||||
}
|
||||
},
|
||||
"node_modules/entities": {
|
||||
"version": "4.4.0",
|
||||
"resolved": "https://registry.npmjs.org/entities/-/entities-4.4.0.tgz",
|
||||
"integrity": "sha512-oYp7156SP8LkeGD0GF85ad1X9Ai79WtRsZ2gxJqtBuzH+98YUV6jkHEKlZkMbcrjJjIVJNIDP/3WL9wQkoPbWA==",
|
||||
"engines": {
|
||||
"node": ">=0.12"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://github.com/fb55/entities?sponsor=1"
|
||||
}
|
||||
},
|
||||
"node_modules/envinfo": {
|
||||
"version": "7.8.1",
|
||||
"resolved": "https://registry.npmjs.org/envinfo/-/envinfo-7.8.1.tgz",
|
||||
|
|
@ -2874,11 +2801,6 @@
|
|||
"js-yaml": "bin/js-yaml.js"
|
||||
}
|
||||
},
|
||||
"node_modules/gsap": {
|
||||
"version": "3.11.3",
|
||||
"resolved": "https://registry.npmjs.org/gsap/-/gsap-3.11.3.tgz",
|
||||
"integrity": "sha512-xc/iIJy+LWiMbRa4IdMtdnnKa/7PXEK6NNzV71gdOYUVeTZN7UWnLU0fB7Hi1iwiz4ZZoYkBZPPYGg+2+zzFHA=="
|
||||
},
|
||||
"node_modules/hamljs": {
|
||||
"version": "0.6.2",
|
||||
"resolved": "https://registry.npmjs.org/hamljs/-/hamljs-0.6.2.tgz",
|
||||
|
|
@ -3887,11 +3809,6 @@
|
|||
"node": ">=0.10.0"
|
||||
}
|
||||
},
|
||||
"node_modules/mdn-data": {
|
||||
"version": "2.0.28",
|
||||
"resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.28.tgz",
|
||||
"integrity": "sha512-aylIc7Z9y4yzHYAJNuESG3hfhC+0Ibp/MAMiaOZgNv4pmEdFyfZhhhny4MNiAfWdBQ1RQ2mfDWmM1x8SvGyp8g=="
|
||||
},
|
||||
"node_modules/mdurl": {
|
||||
"version": "1.0.1",
|
||||
"resolved": "https://registry.npmjs.org/mdurl/-/mdurl-1.0.1.tgz",
|
||||
|
|
@ -4032,17 +3949,6 @@
|
|||
"mustache": "bin/mustache"
|
||||
}
|
||||
},
|
||||
"node_modules/nanoid": {
|
||||
"version": "4.0.0",
|
||||
"resolved": "https://registry.npmjs.org/nanoid/-/nanoid-4.0.0.tgz",
|
||||
"integrity": "sha512-IgBP8piMxe/gf73RTQx7hmnhwz0aaEXYakvqZyE302IXW3HyVNhdNGC+O2MwMAVhLEnvXlvKtGbtJf6wvHihCg==",
|
||||
"bin": {
|
||||
"nanoid": "bin/nanoid.js"
|
||||
},
|
||||
"engines": {
|
||||
"node": "^14 || ^16 || >=18"
|
||||
}
|
||||
},
|
||||
"node_modules/napi-build-utils": {
|
||||
"version": "1.0.2",
|
||||
"resolved": "https://registry.npmjs.org/napi-build-utils/-/napi-build-utils-1.0.2.tgz",
|
||||
|
|
@ -4633,17 +4539,6 @@
|
|||
"resolved": "https://registry.npmjs.org/parse-srcset/-/parse-srcset-1.0.2.tgz",
|
||||
"integrity": "sha512-/2qh0lav6CmI15FzA3i/2Bzk2zCgQhGMkvhOhKNcBVQ1ldgpbfiNTVslmooUmWJcADi1f1kIeynbDRVzNlfR6Q=="
|
||||
},
|
||||
"node_modules/parse5": {
|
||||
"version": "7.1.1",
|
||||
"resolved": "https://registry.npmjs.org/parse5/-/parse5-7.1.1.tgz",
|
||||
"integrity": "sha512-kwpuwzB+px5WUg9pyK0IcK/shltJN5/OVhQagxhCQNtT9Y9QRZqNY2e1cmbu/paRh5LMnz/oVTVLBpjFmMZhSg==",
|
||||
"dependencies": {
|
||||
"entities": "^4.4.0"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://github.com/inikulin/parse5?sponsor=1"
|
||||
}
|
||||
},
|
||||
"node_modules/parseurl": {
|
||||
"version": "1.3.3",
|
||||
"resolved": "https://registry.npmjs.org/parseurl/-/parseurl-1.3.3.tgz",
|
||||
|
|
@ -7290,15 +7185,6 @@
|
|||
"prismjs": "^1.26.0"
|
||||
}
|
||||
},
|
||||
"@11ty/eleventy-plugin-webc": {
|
||||
"version": "0.4.0",
|
||||
"resolved": "https://registry.npmjs.org/@11ty/eleventy-plugin-webc/-/eleventy-plugin-webc-0.4.0.tgz",
|
||||
"integrity": "sha512-G/mHFBY0xx6lonmM9CLX9gtwTCwdR5h1E3YZ0vbeAlhKbP6A3yM5RUUSMEUYm/eg8F+wbUCoE85AtmcTllPivg==",
|
||||
"requires": {
|
||||
"@11ty/eleventy": "^2.0.0-canary.16",
|
||||
"@11ty/webc": "^0.4.0"
|
||||
}
|
||||
},
|
||||
"@11ty/eleventy-utils": {
|
||||
"version": "1.0.1",
|
||||
"resolved": "https://registry.npmjs.org/@11ty/eleventy-utils/-/eleventy-utils-1.0.1.tgz",
|
||||
|
|
@ -7307,25 +7193,6 @@
|
|||
"normalize-path": "^3.0.0"
|
||||
}
|
||||
},
|
||||
"@11ty/is-land": {
|
||||
"version": "2.0.3",
|
||||
"resolved": "https://registry.npmjs.org/@11ty/is-land/-/is-land-2.0.3.tgz",
|
||||
"integrity": "sha512-XFZbODzs0kRbo4KEnSmCGmTMaqQhfKxFRMeA2wQiqqLq7P85RtHMbKhrLrR+nYmcwJUyMu/SUgl7b4B9+nnTJw=="
|
||||
},
|
||||
"@11ty/webc": {
|
||||
"version": "0.4.5",
|
||||
"resolved": "https://registry.npmjs.org/@11ty/webc/-/webc-0.4.5.tgz",
|
||||
"integrity": "sha512-jqlIYJEa7YVEInkNUYssFTFtjKNV8zQmAUbMNemhS6iR5uwxL89PKCb1ekWBAGJy1YDnpHVxcBLlGt9Ru6tu/w==",
|
||||
"requires": {
|
||||
"@11ty/eleventy-utils": "^1.0.1",
|
||||
"css-tree": "^2.2.1",
|
||||
"dependency-graph": "^0.11.0",
|
||||
"entities": "^4.4.0",
|
||||
"fast-glob": "^3.2.12",
|
||||
"nanoid": "^4.0.0",
|
||||
"parse5": "^7.1.1"
|
||||
}
|
||||
},
|
||||
"@babel/helper-string-parser": {
|
||||
"version": "7.19.4",
|
||||
"resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.19.4.tgz",
|
||||
|
|
@ -8034,15 +7901,6 @@
|
|||
"nth-check": "^2.0.1"
|
||||
}
|
||||
},
|
||||
"css-tree": {
|
||||
"version": "2.2.1",
|
||||
"resolved": "https://registry.npmjs.org/css-tree/-/css-tree-2.2.1.tgz",
|
||||
"integrity": "sha512-OA0mILzGc1kCOCSJerOeqDxDQ4HOh+G8NbOJFOTgOCzpw7fCBubk0fEyxp8AgOL/jvLgYA/uV0cMbe43ElF1JA==",
|
||||
"requires": {
|
||||
"mdn-data": "2.0.28",
|
||||
"source-map-js": "^1.0.1"
|
||||
}
|
||||
},
|
||||
"css-what": {
|
||||
"version": "6.1.0",
|
||||
"resolved": "https://registry.npmjs.org/css-what/-/css-what-6.1.0.tgz",
|
||||
|
|
@ -8348,11 +8206,6 @@
|
|||
"once": "^1.4.0"
|
||||
}
|
||||
},
|
||||
"entities": {
|
||||
"version": "4.4.0",
|
||||
"resolved": "https://registry.npmjs.org/entities/-/entities-4.4.0.tgz",
|
||||
"integrity": "sha512-oYp7156SP8LkeGD0GF85ad1X9Ai79WtRsZ2gxJqtBuzH+98YUV6jkHEKlZkMbcrjJjIVJNIDP/3WL9wQkoPbWA=="
|
||||
},
|
||||
"envinfo": {
|
||||
"version": "7.8.1",
|
||||
"resolved": "https://registry.npmjs.org/envinfo/-/envinfo-7.8.1.tgz",
|
||||
|
|
@ -9143,11 +8996,6 @@
|
|||
}
|
||||
}
|
||||
},
|
||||
"gsap": {
|
||||
"version": "3.11.3",
|
||||
"resolved": "https://registry.npmjs.org/gsap/-/gsap-3.11.3.tgz",
|
||||
"integrity": "sha512-xc/iIJy+LWiMbRa4IdMtdnnKa/7PXEK6NNzV71gdOYUVeTZN7UWnLU0fB7Hi1iwiz4ZZoYkBZPPYGg+2+zzFHA=="
|
||||
},
|
||||
"hamljs": {
|
||||
"version": "0.6.2",
|
||||
"resolved": "https://registry.npmjs.org/hamljs/-/hamljs-0.6.2.tgz",
|
||||
|
|
@ -9877,11 +9725,6 @@
|
|||
}
|
||||
}
|
||||
},
|
||||
"mdn-data": {
|
||||
"version": "2.0.28",
|
||||
"resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.28.tgz",
|
||||
"integrity": "sha512-aylIc7Z9y4yzHYAJNuESG3hfhC+0Ibp/MAMiaOZgNv4pmEdFyfZhhhny4MNiAfWdBQ1RQ2mfDWmM1x8SvGyp8g=="
|
||||
},
|
||||
"mdurl": {
|
||||
"version": "1.0.1",
|
||||
"resolved": "https://registry.npmjs.org/mdurl/-/mdurl-1.0.1.tgz",
|
||||
|
|
@ -9983,11 +9826,6 @@
|
|||
"resolved": "https://registry.npmjs.org/mustache/-/mustache-4.2.0.tgz",
|
||||
"integrity": "sha512-71ippSywq5Yb7/tVYyGbkBggbU8H3u5Rz56fH60jGFgr8uHwxs+aSKeqmluIVzM0m0kB7xQjKS6qPfd0b2ZoqQ=="
|
||||
},
|
||||
"nanoid": {
|
||||
"version": "4.0.0",
|
||||
"resolved": "https://registry.npmjs.org/nanoid/-/nanoid-4.0.0.tgz",
|
||||
"integrity": "sha512-IgBP8piMxe/gf73RTQx7hmnhwz0aaEXYakvqZyE302IXW3HyVNhdNGC+O2MwMAVhLEnvXlvKtGbtJf6wvHihCg=="
|
||||
},
|
||||
"napi-build-utils": {
|
||||
"version": "1.0.2",
|
||||
"resolved": "https://registry.npmjs.org/napi-build-utils/-/napi-build-utils-1.0.2.tgz",
|
||||
|
|
@ -10424,14 +10262,6 @@
|
|||
"resolved": "https://registry.npmjs.org/parse-srcset/-/parse-srcset-1.0.2.tgz",
|
||||
"integrity": "sha512-/2qh0lav6CmI15FzA3i/2Bzk2zCgQhGMkvhOhKNcBVQ1ldgpbfiNTVslmooUmWJcADi1f1kIeynbDRVzNlfR6Q=="
|
||||
},
|
||||
"parse5": {
|
||||
"version": "7.1.1",
|
||||
"resolved": "https://registry.npmjs.org/parse5/-/parse5-7.1.1.tgz",
|
||||
"integrity": "sha512-kwpuwzB+px5WUg9pyK0IcK/shltJN5/OVhQagxhCQNtT9Y9QRZqNY2e1cmbu/paRh5LMnz/oVTVLBpjFmMZhSg==",
|
||||
"requires": {
|
||||
"entities": "^4.4.0"
|
||||
}
|
||||
},
|
||||
"parseurl": {
|
||||
"version": "1.3.3",
|
||||
"resolved": "https://registry.npmjs.org/parseurl/-/parseurl-1.3.3.tgz",
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "eleventy-excellent",
|
||||
"version": "1.0.1",
|
||||
"version": "1.0.2",
|
||||
"engines": {
|
||||
"node": "16.x"
|
||||
},
|
||||
|
|
@ -29,9 +29,6 @@
|
|||
"@11ty/eleventy-fetch": "^3.0.0",
|
||||
"@11ty/eleventy-img": "^2.0.1",
|
||||
"@11ty/eleventy-plugin-syntaxhighlight": "^4.1.0",
|
||||
"@11ty/eleventy-plugin-webc": "^0.4.0",
|
||||
"@11ty/is-land": "^2.0.3",
|
||||
"gsap": "^3.11.3",
|
||||
"tailwindcss": "^3.0.23"
|
||||
},
|
||||
"devDependencies": {
|
||||
|
|
|
|||
38
readme.md
38
readme.md
|
|
@ -25,6 +25,8 @@ Very opiniated Eleventy starter based on the workflow suggested by Andy Bell's <
|
|||
|
||||
## Using this
|
||||
|
||||
Search and replace 'eleventy-excellent.netlify.app' with your own domain.
|
||||
|
||||
### Install dependencies
|
||||
|
||||
```
|
||||
|
|
@ -49,6 +51,15 @@ npm run build
|
|||
|
||||
## Credits and Thank yous
|
||||
|
||||
**Andy Bell**
|
||||
|
||||
His CSS methodology makes sense to me. It also goes hand in hand with the Every Layout solutions he co-authors. An ardent opponent of the utility class framework Tailwind CSS. But has recently published an approach that incorporates Tailwind CSS into his methodology. This is built into my website and I'm working on tweaking it.
|
||||
I learned how to use Eleventy in 2020 with his (now free) course.
|
||||
|
||||
- https://cube.fyi/
|
||||
- https://buildexcellentwebsit.es/
|
||||
- https://learneleventyfromscratch.com/
|
||||
|
||||
**Heydon Pickering**
|
||||
|
||||
I strongly orientate myself on Heydon's approaches and love his books.
|
||||
|
|
@ -56,15 +67,6 @@ I strongly orientate myself on Heydon's approaches and love his books.
|
|||
- https://every-layout.dev/
|
||||
- https://inclusive-components.design/
|
||||
|
||||
**Andy Bell**
|
||||
|
||||
His CSS methodology makes sense to me. I'm still working on understanding it fully and using it consistently. It also goes hand in hand with the Every Layout solutions he co-authors. An ardent opponent of the utility class framework Tailwind CSS. But has recently published an approach that incorporates Tailwind CSS into his methodology. This is built into my website and I'm working on tweaking it.
|
||||
I learned how to use Eleventy in 2020 with his (now free) course.
|
||||
|
||||
- https://cube.fyi/
|
||||
- https://buildexcellentwebsit.es/
|
||||
- https://learneleventyfromscratch.com/
|
||||
|
||||
**Zach Leatherman**
|
||||
|
||||
He is developing Eleventy.
|
||||
|
|
@ -81,13 +83,21 @@ She provides a lot of resources for Eleventy and modern CSS.
|
|||
|
||||
**Aleksandr Hovhannisyan**
|
||||
|
||||
I love order and structure. Aleksandr Hovhannisyan does this in an exemplary way, which is why I based the structure of eleventy.js on his online resume and blog. Also, he writes great tutorials in his blog.
|
||||
I love order and structure. Aleksandr does this in an exemplary way, which is why I based the structure of eleventy.js on his personal site. The 301 redirect solution I'm using is from his blog.
|
||||
|
||||
- https://github.com/AleksandrHovhannisyan
|
||||
- https://www.aleksandrhovhannisyan.com/blog/eleventy-netlify-redirects/
|
||||
|
||||
**Josh Comeau**
|
||||
**Oliver Schöndorfer**
|
||||
|
||||
He created a fantastic CSS course that I am currently working through. Also, his in-depth tutorials are a great resource.
|
||||
Oliver is a type expert. He writes the Pimp my Type Newsletter where I dscovered the font I'm using for this website.
|
||||
|
||||
- https://www.joshwcomeau.com/tutorials/
|
||||
- https://courses.joshwcomeau.com/css-for-js
|
||||
- https://pimpmytype.com/outfit/
|
||||
- https://pimpmytype.com/category/fontfriday/
|
||||
|
||||
**Manuel Matuzović**
|
||||
|
||||
Manuel is an accessibility expert. The menu I'm using is from one of his articles on web.dev.
|
||||
|
||||
- https://web.dev/website-navigation/
|
||||
- https://www.matuzo.at/
|
||||
|
|
|
|||
|
|
@ -1,34 +1,34 @@
|
|||
const package = require('../../package.json');
|
||||
|
||||
module.exports = {
|
||||
siteName: 'Lene Saile',
|
||||
siteName: 'Eleventy Excellent',
|
||||
siteDescription:
|
||||
'Frontend developer based in Madrid. I enjoy working with Jamstack, vanilla Javascript and modern CSS. I do my very best to improve in terms of accessibility and performance. ',
|
||||
"Eleventy starter based on the workflow suggested by Andy Bell's https://buildexcellentwebsit.es/.",
|
||||
siteType: 'Person', // schema
|
||||
siteURL: 'https://www.lene.dev',
|
||||
siteURL: 'https://eleventy-excellent.netlify.app',
|
||||
locale: 'en_EN',
|
||||
lang: 'en',
|
||||
skipContent: 'Skip to content',
|
||||
author: 'Lene Saile',
|
||||
authorEmail: 'hola@lenesaile.com',
|
||||
authorWebsite: 'https://www.lenesaile.com',
|
||||
author: 'Author name',
|
||||
authorEmail: 'hola@authormail.com',
|
||||
authorWebsite: 'https://www.authorsite.com',
|
||||
meta_data: {
|
||||
twitterSite: '@lenesaile',
|
||||
twitterCreator: '@lenesaile',
|
||||
twitterSite: '@twitterorg',
|
||||
twitterCreator: '@twitterauthor',
|
||||
opengraph_default: '/assets/images/opengraph-default.jpg'
|
||||
},
|
||||
pagination: {
|
||||
itemsPerPage: 20
|
||||
},
|
||||
address: {
|
||||
firma: 'Lene Saile',
|
||||
street: 'c/ Humilladero 25, 2C',
|
||||
city: 'Madrid',
|
||||
state: 'Madrid',
|
||||
zip: '28005',
|
||||
mobileDisplay: '+34 644 959496',
|
||||
mobileCall: ' +34644959496',
|
||||
email: 'hola@lenesaile.com',
|
||||
firma: 'Organization name',
|
||||
street: '123 Main St.',
|
||||
city: 'Ciudad',
|
||||
state: 'Estado',
|
||||
zip: '12345',
|
||||
mobileDisplay: '+34 1234567',
|
||||
mobileCall: ' +341234567',
|
||||
email: 'hola@yoursite.com',
|
||||
cif: ''
|
||||
},
|
||||
menu: {
|
||||
|
|
|
|||
|
|
@ -10,11 +10,7 @@
|
|||
"url": "/markdown/"
|
||||
},
|
||||
{
|
||||
"text": "WebC",
|
||||
"url": "/test/"
|
||||
},
|
||||
{
|
||||
"text": "Github",
|
||||
"text": "Github Fetch",
|
||||
"url": "/github/"
|
||||
}
|
||||
]
|
||||
|
|
|
|||
|
|
@ -1,6 +0,0 @@
|
|||
{
|
||||
"name": "Build Excellent Websites",
|
||||
"url": "https://buildexcellentwebsit.es",
|
||||
"authorName": "Andy Bell",
|
||||
"authorEmail": "andy@set.studio"
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 8.3 KiB |
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 13 KiB |
|
|
@ -1,2 +0,0 @@
|
|||
<svg aria-hidden="true" focusable="false" viewBox="0 0 101 95" fill="none" xmlns="http://www.w3.org/2000/svg"><path opacity=".16" d="M8.304 22.314.543 26.782l38.746 22.302 7.826-4.424-38.81-22.346ZM47.051 62.538l-7.762 4.469.064 26.819 7.762-4.47-.064-26.818ZM47.051 44.917l-7.762 4.47.064 8.682 7.762-4.469-.064-8.683Z" fill="#FD308F"/><path opacity=".1" d="m92.581 22.31-38.81 22.347 7.749 4.467 38.819-22.352-7.758-4.462ZM53.917 44.773l-.145 44.579 7.761 4.47.141-44.587-7.757-4.462Z" fill="#00D9EE"/><path opacity=".13" d="m11.735 9.044-.157 8.848 38.809 22.17 38.81-22.17-.2-8.833-38.61 22.367L11.735 9.044Z" fill="#00FFCF"/><path opacity=".11" d="M65.743 4.767 42.607 17.89l7.763 4.47 15.324-8.657.049-8.936Z" fill="#00FFCF"/><path opacity=".07" d="m84.785 44.898-15.49 8.704v9.14l23.326-13.476-7.836-4.368Z" fill="#00D9EE"/><path opacity=".05" d="m92.52 48.782-7.735-3.885 7.736-4.52v8.404Z" fill="#00D9EE"/><path opacity=".07" d="M92.523 58.065 69.443 71.46l-.211 8.958 31.126-17.984-7.835-4.369Z" fill="#00D9EE"/><path opacity=".1" d="m15.896 44.658-7.762 4.47-.063-8.683 7.825 4.213Z" fill="#FD308F"/><path opacity=".1" d="m15.383 44.917-7.142 4.212 31.048 17.878 7.762-4.47-31.668-17.62ZM8.097 58.344.956 62.556 31.59 80.423v-8.942L8.097 58.344Z" fill="#FD308F"/><path d="M39.354 94.45 0 71.788v-9.565l7.219-4.16L0 53.903v-27.43l8.305-4.785 39.36 22.66v9.565l-7.225 4.16 7.224 4.16v27.435l-8.31 4.781ZM1.087 71.162l38.267 22.036 7.224-4.16V62.851L38.27 58.07l8.307-4.784v-8.313L8.305 22.94l-7.218 4.16v26.187l8.304 4.782-8.304 4.784v8.31Z" fill="#FD308F"/><path d="M39.334 49.754.244 27.244l.542-.937 38.548 22.196 7.492-4.313.544.936-8.036 4.628ZM39.832 66.998h-1.087v26.87h1.087v-26.87ZM32.134 81.36.264 63.008l.543-.937 30.241 17.413v-7.69L8.028 58.537l.543-.938 23.563 13.568V81.36ZM15.41 44.273 8 48.663l.554.932 7.41-4.392-.555-.931Z" fill="#FD308F"/><path d="M39.289 67.633 7.698 49.442v-9.91l31.047 17.605v-8.053h1.087V59L8.784 41.394v7.423L39.29 66.382l7.49-4.313.542.938-8.032 4.626Z" fill="#FD308F"/><path d="m61.532 94.448-8.305-4.783V44.348l39.348-22.66 8.305 4.782v27.44l-.27.157L69.84 71.79v7.687L100.886 61.6V71.79l-.27.156-39.084 22.503Zm-7.223-5.41 7.223 4.16L99.8 71.162v-7.687L68.756 81.351v-10.19l.27-.156 30.777-17.719V27.09l-7.223-4.16L54.315 44.97l-.006 44.067Z" fill="#00D9EE"/><path d="M68.756 63.507v-10.22l.27-.157 24.167-13.912v10.084L68.756 63.507Zm1.087-9.594v7.71l22.26-12.944v-7.585l-22.26 12.819Z" fill="#00D9EE"/><path d="m84.956 44.385-.506.959 7.871 4.132.506-.96-7.87-4.131ZM61.52 49.75l-8.036-4.626.543-.94 7.493 4.314 38.547-22.196.543.939L61.52 49.75Z" fill="#00D9EE"/><path d="M62.012 49.068h-1.087v44.785h1.087V49.068ZM92.821 57.586l-.486.97 8.07 4.021.486-.97-8.07-4.02Z" fill="#00D9EE"/><path d="m58.205 1.25 6.685 3.854v9.821l1.614-.896L81.45 5.734l6.664 3.837v7.692L50.387 38.987 12.665 17.265v-7.69l6.684-3.85 14.998 8.63.543.308.544-.308L58.204 1.25Zm0-1.25L34.89 13.425 19.35 4.474 11.58 8.949v8.938l38.807 22.352 38.81-22.348V8.947l-7.74-4.46-15.482 8.593V4.474L58.205 0Z" fill="#00FFCF"/><path d="m50.365 22.982-8.844-5.093L65.126 4.296l.543.938-21.976 12.655 6.682 3.847 14.536-8.06.528.947-15.074 8.36ZM50.93 39.898h-1.086v-8.285L11.834 9.726l.542-.939 38.555 22.2v8.91Z" fill="#00FFCF"/><path d="M88.468 8.893 50.011 30.94l.544.943L89.01 9.836l-.543-.943Z" fill="#00FFCF"/></svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 3.3 KiB |
|
|
@ -1,7 +1,7 @@
|
|||
<footer class="site-foot" role="contentinfo">
|
||||
<div class="wrapper">
|
||||
<div class="site-foot__inner">
|
||||
{% include "icons/keyboard.svg" %} © {% year %} {{ meta.siteName }}
|
||||
© {% year %} {{ meta.siteName }}
|
||||
<a href="/imprint/"> Imprint </a>
|
||||
|
||||
<a href="/privacy/"> Privacy </a><br />
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@
|
|||
/>
|
||||
</svg>
|
||||
|
||||
Lene Saile
|
||||
{{ meta.siteName }}
|
||||
</a>
|
||||
|
||||
{% include "partials/menu.njk" %}
|
||||
|
|
|
|||
|
|
@ -1,11 +0,0 @@
|
|||
Hallo ich bin ein webC
|
||||
|
||||
<style webc:scoped>
|
||||
:host {
|
||||
font-weight: bold;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
console.log('hello component', this);
|
||||
</script>
|
||||
|
|
@ -1,18 +0,0 @@
|
|||
<hr />
|
||||
<style webc:scoped>
|
||||
hr {
|
||||
--gradientStart: #7950f2;
|
||||
--gradientEnd: #f783ac;
|
||||
--gradient: linear-gradient(45deg, var(--gradientStart) 10%, var(--gradientEnd) 90%);
|
||||
--unit: 1rem;
|
||||
|
||||
border: 0;
|
||||
height: 2px;
|
||||
background-image: var(--gradient);
|
||||
border-radius: var(--unit);
|
||||
transform: rotate(-1.5deg);
|
||||
text-align: center;
|
||||
margin-top: calc(var(--unit) * 2);
|
||||
margin-bottom: calc(var(--unit) * 2);
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,41 +0,0 @@
|
|||
<div class="playground">
|
||||
<div class="box green"></div>
|
||||
<div class="box purple"></div>
|
||||
<div class="box orange"></div>
|
||||
</div>
|
||||
|
||||
<style webc:scoped>
|
||||
.playground {
|
||||
--grid-placement: auto-fit;
|
||||
--green: rgb(28, 113, 19);
|
||||
--purple: #c569bc;
|
||||
--orange: #ff8b59;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 1em;
|
||||
}
|
||||
|
||||
.box {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
border-radius: var(--border-radius);
|
||||
}
|
||||
|
||||
.green {
|
||||
background-color: var(--green);
|
||||
}
|
||||
|
||||
.purple {
|
||||
background-color: var(--purple);
|
||||
}
|
||||
|
||||
.orange {
|
||||
background-color: var(--orange);
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
import {testGSAP} from '../../assets/scripts/components/gsap.js';
|
||||
gsap();
|
||||
</script>
|
||||
|
|
@ -1,14 +0,0 @@
|
|||
<is-land on:visible>
|
||||
<template data-island>
|
||||
asdf
|
||||
<!-- CSS -->
|
||||
<style webc:keep>
|
||||
/* This is on-visible CSS */
|
||||
</style>
|
||||
|
||||
<!-- JS -->
|
||||
<script type="module" webc:keep>
|
||||
console.log('This is on-visible JavaScript');
|
||||
</script>
|
||||
</template>
|
||||
</is-land>
|
||||
|
|
@ -1,51 +0,0 @@
|
|||
<is-land on:visible>
|
||||
<button class="test-button" type="button">Add</button>
|
||||
<output @html="2"></output>
|
||||
|
||||
<style webc:scoped>
|
||||
:host > button {
|
||||
padding: var(--space-xs) var(--space-xl);
|
||||
cursor: pointer;
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
background: var(--color-primary);
|
||||
border: none;
|
||||
border-radius: 0.6818181818em;
|
||||
box-shadow: 0.3181818182em 0.3181818182em 0 black;
|
||||
color: var(--color-dark);
|
||||
display: inline-block;
|
||||
font-size: clamp(1.1rem, 1.8vw, 1.4rem);
|
||||
font-weight: 600;
|
||||
letter-spacing: 0;
|
||||
padding: 0.45em 1.5em;
|
||||
position: relative;
|
||||
text-decoration: none;
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
:host > output {
|
||||
padding: var(--space-xs) var(--space-xl);
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
window.customElements.define(
|
||||
'my-counter',
|
||||
class extends HTMLElement {
|
||||
connectedCallback() {
|
||||
console.log(this);
|
||||
let btn = this.querySelector(':scope button');
|
||||
let output = this.querySelector(':scope output');
|
||||
let value = parseInt(output.innerText);
|
||||
|
||||
console.log(this, btn);
|
||||
|
||||
btn.addEventListener('click', () => {
|
||||
output.innerText = ++value;
|
||||
});
|
||||
}
|
||||
}
|
||||
);
|
||||
</script>
|
||||
</is-land>
|
||||
|
|
@ -1,21 +0,0 @@
|
|||
<marquee>Lorem ipsum dolor sit amet, consectetur</marquee>
|
||||
|
||||
<style webc:scoped>
|
||||
:host:defined {
|
||||
font-size: 3rem;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
customElements.define(
|
||||
'my-marquee',
|
||||
class extends HTMLElement {
|
||||
connectedCallback() {
|
||||
console.log(this);
|
||||
this.addEventListener('click', () => {
|
||||
console.log('clicked');
|
||||
});
|
||||
}
|
||||
}
|
||||
);
|
||||
</script>
|
||||
|
|
@ -1,16 +0,0 @@
|
|||
<is-land on:visible>
|
||||
<speedlify-score
|
||||
webc:raw
|
||||
:class="this.class"
|
||||
:hash="this.hash"
|
||||
speedlify-url="https://www.speedlify.dev"
|
||||
:score="this.score"
|
||||
:weight="this.weight"
|
||||
:requests="this.requests"
|
||||
></speedlify-score>
|
||||
|
||||
<template data-island="once">
|
||||
<link rel="stylesheet" :href="`/assets/components/speedlify-score.css`" />
|
||||
<script :src="`/assets/components/speedlify-score.js`"></script>
|
||||
</template>
|
||||
</is-land>
|
||||
|
|
@ -1,151 +0,0 @@
|
|||
<is-land on:visible>
|
||||
<button
|
||||
type="button"
|
||||
aria-pressed="true"
|
||||
:class="`toggle${this.class ? ` ${this.class}`: ''}`"
|
||||
:data-toggle-class="this.toggleclass"
|
||||
>
|
||||
<span class="toggle-control"></span>
|
||||
<span class="toggle-text" @html="this.label"></span>
|
||||
</button>
|
||||
<template data-island="once">
|
||||
<style webc:scoped>
|
||||
/* Toggle code */
|
||||
.toggle {
|
||||
--toggle-padding: 2px;
|
||||
--toggle-color: hsl(0, 75%, 54%);
|
||||
--toggle-color-secondary: hsl(0, 75%, 80%);
|
||||
}
|
||||
.toggle[aria-pressed='true'] {
|
||||
--toggle-color: hsl(156, 78%, 15%);
|
||||
--toggle-color-secondary: hsl(156, 78%, 45%);
|
||||
}
|
||||
|
||||
.toggle {
|
||||
border: 0 solid transparent;
|
||||
background-color: transparent;
|
||||
-webkit-appearance: none;
|
||||
font-family: inherit;
|
||||
font-size: inherit;
|
||||
color: inherit;
|
||||
padding: 0;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
.toggle::-moz-focus-inner {
|
||||
border: 0;
|
||||
}
|
||||
.toggle[disabled] {
|
||||
cursor: not-allowed;
|
||||
opacity: 0.35;
|
||||
}
|
||||
|
||||
/* Focus style */
|
||||
@supports (box-shadow: none) {
|
||||
.toggle:focus {
|
||||
outline: none;
|
||||
}
|
||||
.toggle:focus .toggle-control {
|
||||
box-shadow: 0 0 0 3px #89deff;
|
||||
}
|
||||
}
|
||||
|
||||
.toggle-text {
|
||||
font-size: 1em; /* 16px /16 */
|
||||
line-height: 150%;
|
||||
}
|
||||
.toggle-control {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
margin-right: 0.5rem;
|
||||
width: 2em; /* 32px /16 */
|
||||
box-sizing: content-box;
|
||||
padding: var(--toggle-padding);
|
||||
border: 2px solid var(--toggle-color);
|
||||
background-color: var(--toggle-color-secondary);
|
||||
transition: background-color 0.15s ease-in-out;
|
||||
}
|
||||
.toggle[aria-label] .toggle-control {
|
||||
margin-right: 0;
|
||||
}
|
||||
.toggle-control,
|
||||
.toggle-control:after {
|
||||
height: 1em; /* 16px /16 */
|
||||
border-radius: 6.25em; /* 100px /16 */
|
||||
}
|
||||
.toggle-control:after {
|
||||
transition: left 0.3s ease-in-out, background-color 0.15s ease-in-out;
|
||||
position: absolute;
|
||||
content: '';
|
||||
left: var(--toggle-padding);
|
||||
width: 1em; /* 16px /16 */
|
||||
background-color: var(--toggle-color);
|
||||
}
|
||||
.toggle[aria-pressed='true'] .toggle-control:after {
|
||||
left: calc(1em + var(--toggle-padding)); /* 16px /16 */
|
||||
}
|
||||
|
||||
/* Forms */
|
||||
.toggle-features-form {
|
||||
margin-top: 0.5em;
|
||||
}
|
||||
.toggle-features-form button {
|
||||
white-space: nowrap;
|
||||
}
|
||||
.toggle-features-form > .lo {
|
||||
--lo-margin-h: 1em;
|
||||
--lo-margin-v: 0.5em;
|
||||
align-items: center;
|
||||
}
|
||||
.toggle-features-form > .lo > * {
|
||||
display: flex;
|
||||
flex-grow: 0;
|
||||
}
|
||||
.toggle-features-form .lo .speedlify-link {
|
||||
flex-grow: 999;
|
||||
flex-basis: 20em; /* 320px /16 */
|
||||
}
|
||||
@media (max-width: 21.8125em) {
|
||||
/* 349px */
|
||||
.toggle-features-form .speedlify-requests {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
function toggleCSS(enable) {
|
||||
var styles = Array.from(document.querySelectorAll('style'));
|
||||
for (var j = 0, k = styles.length; j < k; j++) {
|
||||
styles[j].disabled = !enable;
|
||||
}
|
||||
var stylesheets = Array.from(document.querySelectorAll('link[rel="stylesheet"]'));
|
||||
for (var j = 0, k = stylesheets.length; j < k; j++) {
|
||||
stylesheets[j].disabled = !enable;
|
||||
}
|
||||
}
|
||||
|
||||
function toggleClassname(enable, className) {
|
||||
document.documentElement.classList.toggle(className, !enable);
|
||||
}
|
||||
|
||||
document.addEventListener('click', function (event) {
|
||||
if ('closest' in event.target) {
|
||||
var toggle = event.target.closest('.toggle');
|
||||
if (toggle) {
|
||||
var wasPressed = toggle.getAttribute('aria-pressed') === 'true';
|
||||
var isPressed = !wasPressed;
|
||||
toggle.setAttribute('aria-pressed', String(isPressed));
|
||||
|
||||
if (toggle.classList.contains('toggle-css')) {
|
||||
toggleCSS(isPressed);
|
||||
} else {
|
||||
toggleClassname(isPressed, toggle.getAttribute('data-toggle-class'));
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</template>
|
||||
</is-land>
|
||||
|
|
@ -1,31 +0,0 @@
|
|||
<is-land
|
||||
on:visible
|
||||
:import="`/assets/components/lite-yt-embed.js`"
|
||||
class="fluid-width-video-wrapper"
|
||||
>
|
||||
<lite-youtube
|
||||
:videoid="this.slug"
|
||||
:params="this.start ? `start=${this.start}` : false"
|
||||
:playlabel="`Play${this.label ? `: ${this.label}` : ''}`"
|
||||
:style="`background-image:url('${this.poster || `https://i.ytimg.com/vi/${this.slug}/maxresdefault.jpg`}'); max-width: 100%`"
|
||||
>
|
||||
<a
|
||||
:href="`https://youtube.com/watch?v=${this.slug}`"
|
||||
class="lty-playbtn"
|
||||
title="Play Video"
|
||||
><span
|
||||
class="lyt-visually-hidden"
|
||||
@html="`Play Video${this.label ? `: ${this.label}` : ''}`"
|
||||
></span
|
||||
></a>
|
||||
</lite-youtube>
|
||||
<template data-island>
|
||||
<style>
|
||||
/* Plugin bug: clicking the red youtube play icon in the center would navigate to youtube.com */
|
||||
lite-youtube:defined .lty-playbtn {
|
||||
pointer-events: none;
|
||||
}
|
||||
</style>
|
||||
<link rel="stylesheet" :href="`/assets/components/lite-yt-embed.css`" />
|
||||
</template>
|
||||
</is-land>
|
||||
|
|
@ -17,11 +17,6 @@
|
|||
crossorigin
|
||||
/>
|
||||
|
||||
<!-- activating webc scoped styles und scripts -->
|
||||
{% renderTemplate "webc" %}
|
||||
<style @html="this.getCSS(this.page.url)"></style>
|
||||
{% endrenderTemplate %}
|
||||
|
||||
<link rel="stylesheet" href="/assets/css/global.css?{{ assetHash }}" />
|
||||
|
||||
<!-- defer js -->
|
||||
|
|
@ -38,13 +33,6 @@
|
|||
/>
|
||||
{% endfor %} {% endif %}
|
||||
|
||||
<!-- plausible for gdpr-compliant stats
|
||||
<script
|
||||
defer
|
||||
data-domain="lene.dev"
|
||||
src="https://plausible.io/js/plausible.js"
|
||||
></script> -->
|
||||
|
||||
<!-- include base schema -->
|
||||
{%- include "schemas/base-schema.njk" %}
|
||||
</head>
|
||||
|
|
@ -58,10 +46,5 @@
|
|||
|
||||
<!-- footer -->
|
||||
{% include "partials/footer.njk" %}
|
||||
|
||||
<!-- activating webc scoped styles und scripts -->
|
||||
{% renderTemplate "webc" %}
|
||||
<script @html="this.getJS(this.page.url)"></script>
|
||||
{% endrenderTemplate %}
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -11,57 +11,9 @@ layout: base
|
|||
</div>
|
||||
{% include 'svg/divider-pixels.svg' %}
|
||||
</header>
|
||||
<article class="region flow">
|
||||
<div class="wrapper">
|
||||
<h2>{{ principles.title }}</h2>
|
||||
<ul class="grid mt-l-xl" role="list" data-rows="masonry" data-layout="50-50">
|
||||
{% for item in principles.items %}
|
||||
<li class="card flow">
|
||||
<h3>{{ item.title }}</h3>
|
||||
{{ item.summary | md | safe }}
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
<div class="section flow-space-2xl-3xl spot-color-secondary">
|
||||
{% include 'svg/divider-pixels.svg' %}
|
||||
<div class="section__inner region">
|
||||
<blockquote class="wrapper">
|
||||
<p>{{ principles.quote }}</p>
|
||||
</blockquote>
|
||||
</div>
|
||||
{% include 'svg/divider-pixels.svg' %}
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="region">
|
||||
<div class="wrapper flow prose">
|
||||
{{ content | safe }}
|
||||
</div>
|
||||
</article>
|
||||
<article class="section spot-color-primary">
|
||||
{% include 'svg/divider-curve.svg' %}
|
||||
<div class="section__inner region">
|
||||
<div class="wrapper flow">
|
||||
<h2>{{ tools.title }}</h2>
|
||||
<p>{{ tools.summary }}</p>
|
||||
<ul class="features grid mt-l-xl" role="list">
|
||||
{% for item in tools.items %}
|
||||
<li class="flow">
|
||||
<div aria-hidden="true">{% include 'icons/' + item.icon %}</div>
|
||||
<h3>
|
||||
<a href="{{ item.link }}">{{ item.title }}</a>
|
||||
</h3>
|
||||
<p>{{ item.summary | md | safe }}</p>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
{% include 'svg/divider-curve.svg' %}
|
||||
</article>
|
||||
<article class="signoff region">
|
||||
<div class="wrapper flow flow-space-s-m">
|
||||
<h2>{{ signoff.title }}</h2>
|
||||
<p>{{ signoff.summary }}</p>
|
||||
</div>
|
||||
</article>
|
||||
|
|
|
|||
|
|
@ -92,7 +92,7 @@ main:focus {
|
|||
outline: none;
|
||||
}
|
||||
|
||||
article [href^='http']:not([href*='lene.dev'])::after {
|
||||
article [href^='http']:not([href*='eleventy-excellent.netlify.app'])::after {
|
||||
display: inline-block;
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
{
|
||||
"name": "Lene Saile - Frontend developer",
|
||||
"short_name": "Lene Saile",
|
||||
"start_url": "https://www.lene.dev",
|
||||
"name": "Eleventy Excellent - Starter based on buildexcellentwebsite.es",
|
||||
"short_name": "Eleventy Excellent",
|
||||
"start_url": "https://eleventy-excellent.netlify.app",
|
||||
"icons": [
|
||||
{
|
||||
"src": "/android-chrome-192x192.png",
|
||||
|
|
@ -20,7 +20,7 @@
|
|||
"purpose": "maskable"
|
||||
}
|
||||
],
|
||||
"theme_color": "#FF7F5C",
|
||||
"background_color": "#FF7F5C",
|
||||
"theme_color": "#FF5678",
|
||||
"background_color": "#FF5678",
|
||||
"display": "standalone"
|
||||
}
|
||||
|
|
|
|||
Binary file not shown.
|
Before Width: | Height: | Size: 510 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 74 KiB After Width: | Height: | Size: 79 KiB |
|
|
@ -50,13 +50,3 @@ document.addEventListener('click', e => {
|
|||
});
|
||||
|
||||
nav.insertBefore(burgerClone, list);
|
||||
|
||||
// ------------------- web components
|
||||
|
||||
document.querySelectorAll('img').forEach(img => {
|
||||
if (img.complete) {
|
||||
img.removeAttribute('data-is-loading');
|
||||
return;
|
||||
}
|
||||
img.addEventListener('load', () => img.removeAttribute('data-is-loading'));
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,9 +0,0 @@
|
|||
import {gsap} from 'gsap';
|
||||
|
||||
export const testGSAP = () => {
|
||||
let tl = gsap.timeline({repeat: -1, repeatDelay: 1, yoyo: true});
|
||||
|
||||
tl.to('.green', {rotation: 360});
|
||||
tl.to('.purple', {rotation: 360});
|
||||
tl.to('.orange', {rotation: 360});
|
||||
};
|
||||
|
|
@ -1,10 +1,12 @@
|
|||
---
|
||||
title: Github
|
||||
permalink: /github/index.html
|
||||
description: This is just a testing environment
|
||||
description: Showing Lenes repositories via eleventy fetch
|
||||
layout: page
|
||||
---
|
||||
|
||||
This is an example of fetching external data. Edit in _data/github.js.
|
||||
|
||||
<ul>
|
||||
{% for repository in github %}
|
||||
<li>
|
||||
|
|
|
|||
|
|
@ -1,83 +1,16 @@
|
|||
---
|
||||
permalink: /index.html
|
||||
title: ' Eleventy starter based on buildexcellentwebsit.es'
|
||||
summary: 'Give the browser some solid rules and hints, then let it make the right decisions for the people that visit it, based on their device, connection quality and capabilities. This is how they will get a genuinely great user experience, rather than a fragmented, broken one.'
|
||||
metaDesc: 'Key principles using modern CSS, fluid type, fluid space, flexible layout and progressive enhancement will help you to build better front-ends that work for everyone.'
|
||||
description: 'Key principles using modern CSS, fluid type, fluid space, flexible layout and progressive enhancement will help you to build better front-ends that work for everyone.'
|
||||
layout: 'home'
|
||||
principles:
|
||||
title: 'Key Foundations & Principles'
|
||||
quote: 'Stick to those principles and making excellent websites that work for everyone suddenly becomes much, much easier.'
|
||||
items:
|
||||
- title: 'Modern CSS with Methodologies'
|
||||
summary: |
|
||||
Instead of brute-forcing your designs together with a CSS framework, consider opting for a CSS methodology like [CUBE CSS](https://cube.fyi/), [SMACSS](http://smacss.com/) or [BEM](http://getbem.com/introduction/) that empowers you to write flexible, portable CSS, rather than rigid, inflexible and overly-specific CSS.
|
||||
- title: 'Fluid type & Space'
|
||||
summary: |
|
||||
Creating type scales that respond to the viewport, rather than setting explicit values for typography and space allows you to set rules once and forget about them, knowing that whatever device, regardless of its available size will be presented with appropriate sizes.
|
||||
- title: 'Flexible Layouts'
|
||||
summary: |
|
||||
Using flexible, flexbox-based layouts, like the ones we provide in [Every Layout](https://every-layout.dev/), ensures that regardless of conditions—be it content or available screen size: your front-end will be able to respond in the most appropriate way. Giving browsers hints and space to do what they do best, helps your front-end handle tricky scenarios where breakpoint-based layouts consistently fail.
|
||||
- title: 'Progressive Enhancement'
|
||||
summary: |
|
||||
Building up with the lowest possible technological solution and enhancing it where device capability, connection speeds and context conditions allow, helps you build for everyone, not just the minority of people that have fast connections and powerful devices that work well, all the time.
|
||||
|
||||
Doing the opposite: building the best experience, then hacking it down for a handful of selected edge-cases means you’re almost certainly going to build an experience that’s excludes a lot of people.
|
||||
tools:
|
||||
title: 'Tools of the trade'
|
||||
summary: 'Tools are just tools. They don’t really matter—especially to the people trying to use the websites you build. The same goes for frameworks too. The most important thing is that you stick to the key principles. Even so, here are some useful tools I use together to build flexible front-ends.'
|
||||
items:
|
||||
- title: 'CUBE CSS'
|
||||
icon: 'cube.svg'
|
||||
summary: 'A CSS methodology that’s orientated towards simplicity, pragmatism and consistency.'
|
||||
link: 'https://cube.fyi/'
|
||||
- title: 'Utopia'
|
||||
icon: 'utopia.svg'
|
||||
summary: 'A handy collection of generators and tools that let you build up various fluid type and space scales depending on viewport sizes to help with responsive design.'
|
||||
link: 'https://utopia.fyi/'
|
||||
- title: 'Every Layout'
|
||||
icon: 'every-layout.svg'
|
||||
summary: 'A series of simple, composable layouts that can be ported to any project. There’s also heaps of learning material to help you *really* learn CSS layout.'
|
||||
link: 'https://every-layout.dev/'
|
||||
- title: 'Design Tokens'
|
||||
icon: 'design-tokens.svg'
|
||||
summary: 'Centralised data—almost like a database of design values—that could be consumed by anything that understands a standard, like JSON to help with design consistency.'
|
||||
link: 'https://piccalil.li/tutorial/what-are-design-tokens'
|
||||
- title: 'Polypane'
|
||||
icon: 'polypane.svg'
|
||||
summary: 'A handy app that lets you spin up multiple viewports in various configurations to help you build truly responsive sites.'
|
||||
link: 'https://polypane.app/'
|
||||
- title: 'Tailwind'
|
||||
icon: 'tailwind.svg'
|
||||
summary: 'A utility-first CSS framework that is very useful for generating utility classes on demand for CUBE CSS.'
|
||||
link: 'https://github.com/tailwindlabs/tailwindcss'
|
||||
closer:
|
||||
title: 'Remember!'
|
||||
items:
|
||||
- title: 'Less pixel pushing & be more flexible'
|
||||
content: |
|
||||
Nulla vitae elit libero, a pharetra augue. Donec id elit non mi porta gravida at eget metus. Vestibulum id ligula porta felis euismod semper. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Cras justo odio, dapibus ac facilisis in, egestas eget quam.
|
||||
- title: 'Give up controL & get more control'
|
||||
content: |
|
||||
Nulla vitae elit libero, a pharetra augue. Donec id elit non mi porta gravida at eget metus. Vestibulum id ligula porta felis euismod semper. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Cras justo odio, dapibus ac facilisis in, egestas eget quam.
|
||||
signoff:
|
||||
title: 'So with all that new knowledge:'
|
||||
summary: 'Go Forth And Build Excellent Websites.'
|
||||
---
|
||||
|
||||
## Why though?
|
||||
## Eleventy Starter
|
||||
|
||||
It was in 2010 when [Ethan Marcotte](https://twitter.com/beep) published the legendary [Responsive Web Design](https://alistapart.com/article/responsive-web-design/) article. It completely changed how we built websites for an ever-growing variety of device types and sizes.
|
||||
Very opiniated Eleventy starter. Based on the companion website of Andy Bell's talk 'Be the browser’s mentor, not its micromanager'.
|
||||
This approach promotes modern CSS with methodologies, fluid type & Space, flexible Layouts and Progressive Enhancement.
|
||||
|
||||
The article has aged really well, but the practice of web design has not. Oftentimes, designers and developers get stuck into pixel-pushing a design into shape with rigid methods to ensure it looks exactly like that Figma, Sketch or even Photoshop design. This attitude has stuck around for a long time though, even as far back as the very early days of the web, which [Jeremy Keith](https://twitter.com/adactio) touched on in [Resilient Web Design](https://resilientwebdesign.com/):
|
||||
Page based on this starter: www.lenesaile.com
|
||||
|
||||
> It was as though the web design community were participating in a shared consensual hallucination. Rather than acknowledge the flexible nature of the browser window, they chose to settle on one set width as the ideal …even if that meant changing the ideal every few years.
|
||||
>
|
||||
> Jeremy Keith - Resilient Web Design
|
||||
|
||||
We absolutely **don’t know** what our audience device sizes are going to be or whether or not they have a decent connection speed, fully working browser or even a bright enough screen to present our designs how **we want them to be presented**. We are all guilty of micromanaging the browser in some aspects, and in turn, are creating an inflexible and fragile user experience.
|
||||
|
||||
A better way to approach this is to **be the browser’s mentor** by setting some base rules and hints, then getting out of its way to let it make decisions based on the challenges it will **undoubtedly face**. Even looking at [this 2015 report on Android device sizes](https://www.opensignal.com/sites/opensignal-com/files/data/reports/global/data-2015-08/2015_08_fragmentation_report.pdf) tells us just how fragmented devices are. This was also conducted **7 years ago** and at the time of writing, it’s **2022**. That’s a long time for even more fragmentation to occur. Now factor in all of the other brands and types of device and you can really see how problematic it is, building websites in a rigid, specific manner.
|
||||
|
||||
It makes sense to lose a bit of **perceived control** and instead, get even **greater control** by being the browser’s mentor and not its micromanger, right?
|
||||
|
||||
Go ahead and open up this website on multiple devices or just resize the browser window. You’ll see it deals with anything that is thrown at it. It also uses progressive enhancement to leverage modern CSS, while providing a solid, base experience for browsers that don’t yet support those features, thanks to the usage of semantic HTML. All in, it’s around 2kb of CSS **in total**.
|
||||
- Find out more on https://buildexcellentwebsit.es/.
|
||||
- Remix the original: https://glitch.com/edit/#!/remix/build-excellent-websites
|
||||
|
|
|
|||
|
|
@ -1,13 +1,13 @@
|
|||
---
|
||||
title: Legal notice
|
||||
seo:
|
||||
title: Legal notice | Lene Saile. Designer and Full Stack developer
|
||||
title: Legal notice
|
||||
permalink: /imprint/index.html
|
||||
description: Emisor, titular y responsable de la página web y información sobre las técnicas usadas en desarrollo y producción
|
||||
description: Imprint infos
|
||||
layout: page
|
||||
---
|
||||
|
||||
In accordance with article 10 of spanish Law 34/2002 on information society services and electronic commerce, the owner and party responsible for this website is:
|
||||
Imprint infos.
|
||||
|
||||
{{ meta.address.firma }}
|
||||
{{ meta.address.street }}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
---
|
||||
title: Privacy Policy
|
||||
seo:
|
||||
title: Privacy Policy | Lene Saile. Designer and Full Stack developer
|
||||
title: Privacy Policy
|
||||
permalink: /privacy/index.html
|
||||
description: I respect the EU General Data Protection Regulation (GDPR). This policy document explains how I collect and handle any information you provide to me.
|
||||
layout: page
|
||||
|
|
@ -11,18 +11,7 @@ layout: page
|
|||
|
||||
I respect the EU General Data Protection Regulation (GDPR) and this policy document explains how I collect and handle any information you provide to me.
|
||||
|
||||
**What background data is collected?**
|
||||
This site does not use any third party tracking scripts.
|
||||
For visitor statistics I use Plausible Analytics, a privacy-first web analytics tool. It is built to comply with the different privacy regulations, such as GDPR and CCPA. Plausible does not use cookies and does not collect any personal data.
|
||||
|
||||
**How do we use the data you provide?**
|
||||
This website does not collect any further information.
|
||||
|
||||
**How secure is your data?**
|
||||
Very secure, as this website does not collect any information.
|
||||
|
||||
**How secure is this website?**
|
||||
This website transmits itself using HTTPS, encrypting all data between the browser and the server. Your network provider can still see that you are downloading assets from this site, but not its content. This also protects you from third parties intercepting data, for example, while browsing on public WiFi, or from network providers injecting advertisements on this site. All relevant response HTTP headers are set for your protection and the Content Security Policy is adjusted to this websites requirements.
|
||||
...
|
||||
|
||||
**Data controller**
|
||||
{{ meta.address.firma }}
|
||||
|
|
@ -39,5 +28,3 @@ If I change the content of this policy, those changes will be effective at the t
|
|||
|
||||
**Complaints**
|
||||
If you have any reason to complain about the way I handle your privacy, please contact me by email: <a href="mailto:{{ meta.address.email }}">{{ meta.address.email }}</a>.
|
||||
|
||||
Last updated: 28 de mayo de 2022
|
||||
|
|
|
|||
|
|
@ -1,579 +0,0 @@
|
|||
---
|
||||
title: Testing webC plugin
|
||||
permalink: /test/index.html
|
||||
description: This is just a testing environment
|
||||
layout: page
|
||||
---
|
||||
|
||||
Version number
|
||||
|
||||
<!-- sdfg -->
|
||||
|
||||
<my-marquee>dsfgdfg</my-marquee>
|
||||
|
||||
<p>
|
||||
Icing jelly soufflé shortbread chocolate cake muffin gummies cotton candy lemon drops.
|
||||
Cake gummi bears dragée chocolate sweet croissant sweet croissant.
|
||||
</p>
|
||||
|
||||
<youtube-lite-player @slug="g2aTwnLgAc8" @label="{{ title }}"></youtube-lite-player>
|
||||
|
||||
<h2>Testing counter</h2>
|
||||
|
||||
<p>counter inside island, activate on interaction</p>
|
||||
|
||||
<speedlify-score></speedlify-score>
|
||||
|
||||
<p>
|
||||
Icing jelly soufflé shortbread chocolate cake muffin gummies cotton candy lemon drops.
|
||||
Cake gummi bears dragée chocolate sweet croissant sweet croissant.
|
||||
</p>
|
||||
|
||||
<fancy-rule></fancy-rule>
|
||||
|
||||
<p>
|
||||
Marzipan croissant halvah sweet wafer sesame snaps cheesecake. Jelly candy canes toffee
|
||||
macaroon fruitcake liquorice. Carrot cake jelly chocolate chupa chups tart danish icing.
|
||||
Wafer dessert gummi bears cake jujubes caramels sesame snaps carrot cake. Candy cake pie
|
||||
apple pie marshmallow. Powder apple pie tart carrot cake pudding dessert.
|
||||
</p>
|
||||
|
||||
<h2>Let's try with is-land</h2>
|
||||
|
||||
<p>
|
||||
A new performance-focused way to add interactive client-side components to your web
|
||||
site.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Or, more technically: a framework independent partial hydration islands architecture
|
||||
implementation.
|
||||
</p>
|
||||
|
||||
<p>Features:</p>
|
||||
|
||||
<ul>
|
||||
<li>Easy to add to existing components</li>
|
||||
<li>Zero dependencies</li>
|
||||
<li>Small footprint</li>
|
||||
<li>Not tightly coupled to a server framework or site generator tool.</li>
|
||||
<li>
|
||||
Server-rendering (SSR) component examples available for SSR-friendly frameworks (Lit,
|
||||
Svelte, Vue, and Preact are provided)
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<h2>Standalone</h2>
|
||||
|
||||
<p>
|
||||
This is a control to make sure the component initializes as expected without an island.
|
||||
</p>
|
||||
|
||||
<vanilla-web-component class="demo-component"
|
||||
>Vanilla web component</vanilla-web-component
|
||||
>
|
||||
|
||||
<h2>Defaults</h2>
|
||||
|
||||
<p>These islands are eagerly loaded and initialized.</p>
|
||||
|
||||
<is-land>
|
||||
<vanilla-web-component class="demo-component"
|
||||
>Vanilla web component</vanilla-web-component
|
||||
>
|
||||
</is-land>
|
||||
|
||||
<p>Gnarly nesting</p>
|
||||
|
||||
<is-land>
|
||||
<vanilla-web-component class="demo-component" custom-attribute some other attributes>
|
||||
Vanilla web component 1a
|
||||
<vanilla-web-component class="demo-component"
|
||||
>Vanilla web component 1b</vanilla-web-component
|
||||
>
|
||||
Vanilla web component 1c
|
||||
<vanilla-web-component class="demo-component"
|
||||
>Vanilla web component 1d</vanilla-web-component
|
||||
>
|
||||
</vanilla-web-component>
|
||||
<p>Testing A</p>
|
||||
<vanilla-web-component class="demo-component"
|
||||
>Vanilla web component 2</vanilla-web-component
|
||||
>
|
||||
<p>Testing B</p>
|
||||
<vanilla-web-component class="demo-component"
|
||||
>Vanilla web component 3</vanilla-web-component
|
||||
>
|
||||
</is-land>
|
||||
|
||||
<h2>Scroll down</h2>
|
||||
|
||||
<hr style="height: 100vh" />
|
||||
|
||||
<h2><code>on:visible</code></h2>
|
||||
<is-land on:visible>
|
||||
<vanilla-web-component class="demo-component"
|
||||
>Vanilla web component</vanilla-web-component
|
||||
>
|
||||
</is-land>
|
||||
|
||||
<h3>Works with <details></h3>
|
||||
<details>
|
||||
<summary>
|
||||
The child content in this <details> will not be initialized until you open it
|
||||
</summary>
|
||||
|
||||
<is-land on:visible>
|
||||
<vanilla-web-component class="demo-component"
|
||||
>Vanilla web component</vanilla-web-component
|
||||
>
|
||||
</is-land>
|
||||
</details>
|
||||
|
||||
<h2><code>on:visible</code> nested group</h2>
|
||||
|
||||
<p>
|
||||
Parent island has <code>on:visible</code> but none of the child components have an
|
||||
explicit loading condition. They will inherit the loading conditions of all of the
|
||||
ancestors.
|
||||
</p>
|
||||
|
||||
<is-land on:visible>
|
||||
<vanilla-web-component class="demo-component"
|
||||
>Vanilla web component</vanilla-web-component
|
||||
>
|
||||
|
||||
Here’s a nested island:
|
||||
|
||||
<is-land
|
||||
autoinit="petite-vue"
|
||||
import="https://unpkg.com/petite-vue@0.4.1/dist/petite-vue.es.js"
|
||||
v-scope="{ count: 0 }"
|
||||
>
|
||||
Petite Vue
|
||||
<template data-island>
|
||||
<button @click="count++">⬆️</button>
|
||||
<button @click="count--">⬇️</button>
|
||||
<span v-html="count">0</span>
|
||||
</template>
|
||||
</is-land>
|
||||
</is-land>
|
||||
|
||||
<h2><code>on:idle</code></h2>
|
||||
|
||||
<is-land on:idle>
|
||||
<vanilla-web-component class="demo-component"
|
||||
>Vanilla web component</vanilla-web-component
|
||||
>
|
||||
</is-land>
|
||||
<is-land on:idle>
|
||||
<vanilla-web-component class="demo-component"
|
||||
>Vanilla web component</vanilla-web-component
|
||||
>
|
||||
</is-land>
|
||||
<is-land on:idle>
|
||||
<vanilla-web-component class="demo-component"
|
||||
>Vanilla web component</vanilla-web-component
|
||||
>
|
||||
</is-land>
|
||||
<is-land on:idle>
|
||||
<vanilla-web-component class="demo-component"
|
||||
>Vanilla web component</vanilla-web-component
|
||||
>
|
||||
</is-land>
|
||||
<is-land on:idle>
|
||||
<vanilla-web-component class="demo-component"
|
||||
>Vanilla web component</vanilla-web-component
|
||||
>
|
||||
</is-land>
|
||||
<is-land on:idle>
|
||||
<vanilla-web-component class="demo-component"
|
||||
>Vanilla web component</vanilla-web-component
|
||||
>
|
||||
</is-land>
|
||||
<is-land on:idle>
|
||||
<vanilla-web-component class="demo-component"
|
||||
>Vanilla web component</vanilla-web-component
|
||||
>
|
||||
</is-land>
|
||||
<is-land on:idle>
|
||||
<vanilla-web-component class="demo-component"
|
||||
>Vanilla web component</vanilla-web-component
|
||||
>
|
||||
</is-land>
|
||||
<is-land on:idle>
|
||||
<vanilla-web-component class="demo-component"
|
||||
>Vanilla web component</vanilla-web-component
|
||||
>
|
||||
</is-land>
|
||||
<is-land on:idle>
|
||||
<vanilla-web-component class="demo-component"
|
||||
>Vanilla web component</vanilla-web-component
|
||||
>
|
||||
</is-land>
|
||||
|
||||
<h2><code>on:interaction</code></h2>
|
||||
|
||||
<p>Requires one of: touchstart, click.</p>
|
||||
<p>
|
||||
Note here that we used one parent island to group both of these components, and
|
||||
interacting with either initializes the whole group.
|
||||
</p>
|
||||
|
||||
<is-land on:interaction>
|
||||
<is-land
|
||||
autoinit="petite-vue"
|
||||
import="https://unpkg.com/petite-vue@0.4.1/dist/petite-vue.es.js"
|
||||
v-scope="{ count: 0 }"
|
||||
>
|
||||
Petite Vue
|
||||
<template data-island>
|
||||
<button @click="count++">⬆️</button>
|
||||
<button @click="count--">⬇️</button>
|
||||
<span v-html="count">0</span>
|
||||
</template>
|
||||
</is-land>
|
||||
|
||||
<vanilla-web-component class="demo-component"
|
||||
>Vanilla web component</vanilla-web-component
|
||||
>
|
||||
</is-land>
|
||||
|
||||
<p>Use <code>on:interaction="mouseenter,focusin"</code> to override the events.</p>
|
||||
<is-land on:interaction="mouseenter,focusin">
|
||||
<is-land
|
||||
autoinit="petite-vue"
|
||||
import="https://unpkg.com/petite-vue@0.4.1/dist/petite-vue.es.js"
|
||||
v-scope="{ count: 0 }"
|
||||
>
|
||||
Petite Vue
|
||||
<template data-island>
|
||||
<button @click="count++">⬆️</button>
|
||||
<button @click="count--">⬇️</button>
|
||||
<span v-html="count">0</span>
|
||||
</template>
|
||||
</is-land>
|
||||
|
||||
<vanilla-web-component class="demo-component"
|
||||
>Vanilla web component</vanilla-web-component
|
||||
>
|
||||
</is-land>
|
||||
|
||||
<p>
|
||||
In this example we use a third party web component (<a
|
||||
href="https://github.com/zachleat/details-utils"
|
||||
><details-utils></a
|
||||
>) without any code changes made to the component. Note that children here are
|
||||
maintained before and after initialization (e.g. click the summary to expand before init
|
||||
and it keeps that state after init).
|
||||
</p>
|
||||
|
||||
<is-land on:interaction import="./lib/details-utils.js">
|
||||
<button type="button" onclick="console.log('Click test')">
|
||||
Click test (log to console)
|
||||
</button>
|
||||
|
||||
<details-utils close-click-outside>
|
||||
<details open>
|
||||
<summary>
|
||||
Toggle Menu (Default open: click outside to close after island initializes)
|
||||
</summary>
|
||||
<p>
|
||||
Note that interacting with content inside of the menu works without closing the
|
||||
menu.
|
||||
</p>
|
||||
</details>
|
||||
|
||||
<details>
|
||||
<summary>
|
||||
Toggle Menu (Default closed: will toggle before island initializes)
|
||||
</summary>
|
||||
<p>
|
||||
Note that interacting with content inside of the menu works without closing the
|
||||
menu.
|
||||
</p>
|
||||
</details>
|
||||
</details-utils>
|
||||
</is-land>
|
||||
|
||||
<h2><code>on:media</code></h2>
|
||||
<h3>Viewport size</h3>
|
||||
<p><code>on:media="(min-width: 64em)"</code></p>
|
||||
<p>
|
||||
This only runs when the viewport is greater than or equal to 1024px wide:
|
||||
<code>on:media="(min-width: 64em)"</code>
|
||||
</p>
|
||||
<is-land on:media="(min-width: 64em)">
|
||||
<vanilla-web-component class="demo-component"
|
||||
>Vanilla web component</vanilla-web-component
|
||||
>
|
||||
</is-land>
|
||||
|
||||
<p>
|
||||
This only runs when the viewport is less than 1024px wide:
|
||||
<code>on:media="(max-width: 63.9375em)"</code>
|
||||
</p>
|
||||
<is-land on:media="(max-width: 63.9375em)">
|
||||
<vanilla-web-component class="demo-component"
|
||||
>Vanilla web component</vanilla-web-component
|
||||
>
|
||||
</is-land>
|
||||
|
||||
<h3>Reduced Motion</h3>
|
||||
<p>
|
||||
This runs when the user prefers reduced motion:
|
||||
<code>on:media="(prefers-reduced-motion)"</code>
|
||||
</p>
|
||||
|
||||
<is-land on:media="(prefers-reduced-motion)">
|
||||
<vanilla-web-component class="demo-component"
|
||||
>Vanilla web component</vanilla-web-component
|
||||
>
|
||||
</is-land>
|
||||
|
||||
<p>
|
||||
This runs when does not have a reduced motion preference:
|
||||
<code>on:media="(prefers-reduced-motion: no-preference)"</code>
|
||||
</p>
|
||||
|
||||
<is-land on:media="(prefers-reduced-motion: no-preference)">
|
||||
<vanilla-web-component class="demo-component"
|
||||
>Vanilla web component</vanilla-web-component
|
||||
>
|
||||
</is-land>
|
||||
|
||||
<h2><code>on:save-data</code></h2>
|
||||
|
||||
<p>
|
||||
This runs when the user has
|
||||
<a href="https://developer.mozilla.org/en-US/docs/Web/API/NetworkInformation/saveData"
|
||||
>Save Data</a
|
||||
>
|
||||
enabled:
|
||||
</p>
|
||||
|
||||
<is-land on:save-data>
|
||||
<vanilla-web-component class="demo-component"
|
||||
>Vanilla web component</vanilla-web-component
|
||||
>
|
||||
</is-land>
|
||||
|
||||
<p>
|
||||
<code>on:save-data="false"</code> This runs when the user does not have
|
||||
<a href="https://developer.mozilla.org/en-US/docs/Web/API/NetworkInformation/saveData"
|
||||
>Save Data</a
|
||||
>
|
||||
enabled:
|
||||
</p>
|
||||
|
||||
<is-land on:save-data="false">
|
||||
<vanilla-web-component class="demo-component"
|
||||
>Vanilla web component</vanilla-web-component
|
||||
>
|
||||
</is-land>
|
||||
|
||||
<h2>Controlling fallback content</h2>
|
||||
|
||||
<p>
|
||||
If you put child content in a <template> it will be JavaScript-only (no fallback).
|
||||
Use this to your advantage! You can mix and match <template> with other
|
||||
progressively enhanced content in the island.
|
||||
</p>
|
||||
|
||||
<is-land on:interaction>
|
||||
<form>
|
||||
<button type="button">Hydrate the island</button>
|
||||
</form>
|
||||
|
||||
<vanilla-web-component class="demo-component"
|
||||
>Vanilla web component (JS not required for fallback content)</vanilla-web-component
|
||||
>
|
||||
|
||||
<template data-island>
|
||||
These are nested in a <template>:
|
||||
|
||||
<vanilla-web-component class="demo-component"
|
||||
>Vanilla web component (JS is required for fallback)</vanilla-web-component
|
||||
>
|
||||
|
||||
<is-land
|
||||
autoinit="petite-vue"
|
||||
import="https://unpkg.com/petite-vue@0.4.1/dist/petite-vue.es.js"
|
||||
v-scope="{ count: 0 }"
|
||||
>
|
||||
Petite Vue (JS is required for fallback):
|
||||
<template data-island>
|
||||
<button @click="count++">⬆️</button>
|
||||
<button @click="count--">⬇️</button>
|
||||
<span v-html="count">0</span>
|
||||
</template>
|
||||
</is-land>
|
||||
</template>
|
||||
</is-land>
|
||||
|
||||
<p>
|
||||
Use the <code>ready</code> attribute on <code><is-land></code> (added when the
|
||||
island is hydrated) for additional styling!
|
||||
</p>
|
||||
<is-land on:interaction id="demo-island-ready">
|
||||
<style>
|
||||
#demo-island-ready[ready] {
|
||||
font-weight: bold;
|
||||
}
|
||||
#demo-island-ready[ready] .emoji {
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
|
||||
<form>
|
||||
<button type="button">Hydrate the island</button>
|
||||
</form>
|
||||
|
||||
<vanilla-web-component class="demo-component">
|
||||
When hydrated the text turns bold and the clock goes away
|
||||
<span class="emoji">⏰</span>
|
||||
</vanilla-web-component>
|
||||
</is-land>
|
||||
|
||||
<p>
|
||||
Use <code>data-island="replace"</code> to replace the island content with the template.
|
||||
If more than one of these exists in an island, only the first is used.
|
||||
</p>
|
||||
|
||||
<is-land on:interaction>
|
||||
<form>
|
||||
<button type="button">Hydrate the island</button>
|
||||
</form>
|
||||
|
||||
<p>This content is pre-JS. This is where your loading spinner goes 😈</p>
|
||||
|
||||
<template data-island="replace">
|
||||
<vanilla-web-component class="demo-component"
|
||||
>Vanilla web component (requires JS)</vanilla-web-component
|
||||
>
|
||||
</template>
|
||||
</is-land>
|
||||
|
||||
<p>
|
||||
Do you know the aspect ratio of the hydrated content? On my
|
||||
<a href="https://www.zachleat.com/web/eleventy-rendering-modes/">personal web site</a> I
|
||||
use this to hydrate a
|
||||
<a href="https://github.com/paulirish/lite-youtube-embed"
|
||||
><lite-youtube> component</a
|
||||
>. Works great with
|
||||
<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio"
|
||||
>CSS <code>aspect-ratio</code></a
|
||||
>!
|
||||
</p>
|
||||
|
||||
<style>
|
||||
#demo-aspect-ratio {
|
||||
aspect-ratio: 16/9;
|
||||
max-width: 400px;
|
||||
background-size: 68px 48px;
|
||||
background-repeat: no-repeat;
|
||||
background-position: 50% 50%;
|
||||
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 68 48"><path fill="%23f00" fill-opacity="0.8" d="M66.52,7.74c-0.78-2.93-2.49-5.41-5.42-6.19C55.79,.13,34,0,34,0S12.21,.13,6.9,1.55 C3.97,2.33,2.27,4.81,1.48,7.74C0.06,13.05,0,24,0,24s0.06,10.95,1.48,16.26c0.78,2.93,2.49,5.41,5.42,6.19 C12.21,47.87,34,48,34,48s21.79-0.13,27.1-1.55c2.93-0.78,4.64-3.26,5.42-6.19C67.94,34.95,68,24,68,24S67.94,13.05,66.52,7.74z"></path><path d="M 45,24 27,14 27,34" fill="%23fff"></path></svg>');
|
||||
}
|
||||
#demo-aspect-ratio[ready] {
|
||||
background-image: none;
|
||||
}
|
||||
</style>
|
||||
<is-land on:interaction id="demo-aspect-ratio">
|
||||
<form>
|
||||
<button type="button">Hydrate the island</button>
|
||||
</form>
|
||||
<template data-island="replace">Your video player here.</template>
|
||||
</is-land>
|
||||
|
||||
<h2>Custom Lazy Asset Loading</h2>
|
||||
|
||||
<is-land on:interaction id="script-style-loading">
|
||||
<form>
|
||||
<button type="button">Hydrate the island</button>
|
||||
</form>
|
||||
|
||||
<p>
|
||||
Nest any inline <code><script></code>, <code><script src></code>,
|
||||
<code><style></code>, <code><link rel="stylesheet"></code> inside a
|
||||
<code><template data-island></code> to execute when conditions are met. The text
|
||||
will turn red when the inline CSS loads and bold when the external stylesheet loads.
|
||||
</p>
|
||||
|
||||
<is-land on:interaction>
|
||||
<form>
|
||||
<button type="button">Hydrate the nested island</button>
|
||||
</form>
|
||||
<template data-island>
|
||||
<script type="module">
|
||||
console.log('Nested Inline JS executed.');
|
||||
</script>
|
||||
</template>
|
||||
</is-land>
|
||||
|
||||
<template data-island>
|
||||
<script type="module">
|
||||
console.log('Inline JS executed.');
|
||||
</script>
|
||||
<script type="module" src="./lib/js-file.js"></script>
|
||||
<style>
|
||||
#script-style-loading {
|
||||
color: red;
|
||||
}
|
||||
</style>
|
||||
<link rel="stylesheet" href="./lib/css-file.css" />
|
||||
</template>
|
||||
</is-land>
|
||||
|
||||
<h2>Once per page template</h2>
|
||||
|
||||
<h3>Group 1</h3>
|
||||
<is-land on:visible>
|
||||
Each of these islands has a console.log but you should only see one.
|
||||
<template data-island="once">
|
||||
<script type="module">
|
||||
console.log('Group 1: You should only see this once.');
|
||||
</script>
|
||||
</template>
|
||||
</is-land>
|
||||
<is-land on:visible>
|
||||
Each of these islands has a console.log but you should only see one.
|
||||
<template data-island="once">
|
||||
<script type="module">
|
||||
console.log('Group 1: You should only see this once.');
|
||||
</script>
|
||||
</template>
|
||||
</is-land>
|
||||
<is-land on:visible>
|
||||
Each of these islands has a console.log but you should only see one.
|
||||
<template data-island="once">
|
||||
<script type="module">
|
||||
console.log('Group 1: You should only see this once.');
|
||||
</script>
|
||||
</template>
|
||||
</is-land>
|
||||
<h3>Group 2</h3>
|
||||
<is-land on:visible>
|
||||
Each of these islands has a console.log but you should only see one.
|
||||
<template data-island="once">
|
||||
<script type="module">
|
||||
console.log('Group 2: You should only see this once.');
|
||||
</script>
|
||||
</template>
|
||||
</is-land>
|
||||
<is-land on:visible>
|
||||
Each of these islands has a console.log but you should only see one.
|
||||
<template data-island="once">
|
||||
<script type="module">
|
||||
console.log('Group 2: You should only see this once.');
|
||||
</script>
|
||||
</template>
|
||||
</is-land>
|
||||
<is-land on:visible>
|
||||
Each of these islands has a console.log but you should only see one.
|
||||
<template data-island="once">
|
||||
<script type="module">
|
||||
console.log('Group 2: You should only see this once.');
|
||||
</script>
|
||||
</template>
|
||||
</is-land>
|
||||
Loading…
Reference in a new issue