Skip to content

Commit 702406b

Browse files
axaxamanaxaxaman
authored
Initial commit
0 parents  commit 702406b

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

81 files changed

+1499
-0
lines changed

‎.editorconfig

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
# This file is for unifying the coding style for different editors and IDEs
2+
# editorconfig.org
3+
4+
root = true
5+
6+
[*]
7+
indent_style = tab
8+
indent_size = 2
9+
end_of_line = lf
10+
insert_final_newline = false
11+
trim_trailing_whitespace = true
12+
charset = utf-8
13+
14+
[*.js]
15+
insert_final_newline = true

‎.eleventy.js

Lines changed: 137 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,137 @@
1+
import markdownIt from 'markdown-it'
2+
import markdownItAnchor from 'markdown-it-anchor'
3+
4+
import EleventyPluginNavigation from '@11ty/eleventy-navigation';
5+
import EleventyPluginRss from '@11ty/eleventy-plugin-rss'
6+
import EleventyPluginSyntaxhighlight from '@11ty/eleventy-plugin-syntaxhighlight'
7+
import EleventyVitePlugin from '@11ty/eleventy-plugin-vite'
8+
9+
import rollupPluginCritical from 'rollup-plugin-critical'
10+
11+
12+
import filters from './utils/filters.js'
13+
import transforms from './utils/transforms.js'
14+
import shortcodes from './utils/shortcodes.js'
15+
16+
export default function (eleventyConfig) {
17+
eleventyConfig.setServerPassthroughCopyBehavior('copy');
18+
eleventyConfig.addPassthroughCopy("public");
19+
20+
// Plugins
21+
eleventyConfig.addPlugin(EleventyPluginNavigation)
22+
eleventyConfig.addPlugin(EleventyPluginRss)
23+
eleventyConfig.addPlugin(EleventyPluginSyntaxhighlight)
24+
eleventyConfig.addPlugin(EleventyVitePlugin, {
25+
tempFolderName: '.11ty-vite', // Default name of the temp folder
26+
27+
// Vite options (equal to vite.config.js inside project root)
28+
viteOptions: {
29+
publicDir: 'public',
30+
clearScreen: false,
31+
server: {
32+
mode: 'development',
33+
middlewareMode: true,
34+
},
35+
appType: 'custom',
36+
assetsInclude: ['**/*.xml', '**/*.txt'],
37+
build: {
38+
mode: 'production',
39+
sourcemap: 'true',
40+
manifest: true,
41+
// This puts CSS and JS in subfolders – remove if you want all of it to be in /assets instead
42+
rollupOptions: {
43+
output: {
44+
assetFileNames: 'assets/css/main.[hash].css',
45+
chunkFileNames: 'assets/js/[name].[hash].js',
46+
entryFileNames: 'assets/js/[name].[hash].js'
47+
},
48+
plugins: [rollupPluginCritical({
49+
criticalUrl: './_site/',
50+
criticalBase: './_site/',
51+
criticalPages: [
52+
{ uri: 'index.html', template: 'index' },
53+
{ uri: 'posts/index.html', template: 'posts/index' },
54+
{ uri: '404.html', template: '404' },
55+
],
56+
criticalConfig: {
57+
inline: true,
58+
dimensions: [
59+
{
60+
height: 900,
61+
width: 375,
62+
},
63+
{
64+
height: 720,
65+
width: 1280,
66+
},
67+
{
68+
height: 1080,
69+
width: 1920,
70+
}
71+
],
72+
penthouse: {
73+
forceInclude: ['.fonts-loaded-1 body', '.fonts-loaded-2 body'],
74+
}
75+
}
76+
})
77+
]
78+
}
79+
}
80+
}
81+
})
82+
83+
// Filters
84+
Object.keys(filters).forEach((filterName) => {
85+
eleventyConfig.addFilter(filterName, filters[filterName])
86+
})
87+
88+
// Transforms
89+
Object.keys(transforms).forEach((transformName) => {
90+
eleventyConfig.addTransform(transformName, transforms[transformName])
91+
})
92+
93+
// Shortcodes
94+
Object.keys(shortcodes).forEach((shortcodeName) => {
95+
eleventyConfig.addShortcode(shortcodeName, shortcodes[shortcodeName])
96+
})
97+
98+
eleventyConfig.addShortcode('year', () => `${new Date().getFullYear()}`)
99+
100+
// Customize Markdown library and settings:
101+
let markdownLibrary = markdownIt({
102+
html: true,
103+
breaks: true,
104+
linkify: true
105+
}).use(markdownItAnchor, {
106+
permalink: markdownItAnchor.permalink.ariaHidden({
107+
placement: 'after',
108+
class: 'direct-link',
109+
symbol: '#',
110+
level: [1, 2, 3, 4]
111+
}),
112+
slugify: eleventyConfig.getFilter('slug')
113+
})
114+
eleventyConfig.setLibrary('md', markdownLibrary)
115+
116+
// Layouts
117+
eleventyConfig.addLayoutAlias('base', 'base.njk')
118+
eleventyConfig.addLayoutAlias('post', 'post.njk')
119+
120+
// Copy/pass-through files
121+
eleventyConfig.addPassthroughCopy('src/assets/css')
122+
eleventyConfig.addPassthroughCopy('src/assets/js')
123+
124+
return {
125+
templateFormats: ['md', 'njk', 'html', 'liquid'],
126+
htmlTemplateEngine: 'njk',
127+
passthroughFileCopy: true,
128+
dir: {
129+
input: 'src',
130+
// better not use "public" as the name of the output folder (see above...)
131+
output: '_site',
132+
includes: '_includes',
133+
layouts: 'layouts',
134+
data: '_data'
135+
}
136+
}
137+
}

‎.gitignore

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
# Logs
2+
logs
3+
*.log
4+
npm-debug.log*
5+
6+
# Dependencies
7+
node_modules/
8+
package-lock.json
9+
10+
# Eleventy
11+
_site/
12+
13+
# Misc
14+
.DS_Store
15+
.env
16+
17+
# Local Netlify folder
18+
.netlify

‎.nvmrc

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
v22.6.0

‎.prettierrc

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
{
2+
"tabWidth": 2,
3+
"semi": false,
4+
"singleQuote": true,
5+
"trailingComma": "none"
6+
}

‎LICENSE

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
MIT License
2+
3+
Copyright (c) 2022 Matthias Ott
4+
5+
Permission is hereby granted, free of charge, to any person obtaining a copy
6+
of this software and associated documentation files (the "Software"), to deal
7+
in the Software without restriction, including without limitation the rights
8+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9+
copies of the Software, and to permit persons to whom the Software is
10+
furnished to do so, subject to the following conditions:
11+
12+
The above copyright notice and this permission notice shall be included in all
13+
copies or substantial portions of the Software.
14+
15+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21+
SOFTWARE.

‎README.md

Lines changed: 88 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,88 @@
1+
# Eleventy Plus Vite <br>🏃💨
2+
3+
A clean and fast Eleventy Starter Project with Vite.
4+
5+
[![Netlify Status](https://api.netlify.com/api/v1/badges/ef99b4ea-199f-497b-84c1-48c34355da8a/deploy-status)](https://app.netlify.com/sites/eleventyplusvite/deploys)
6+
## Features
7+
8+
* Eleventy v3
9+
* Eleventy Dev Server with live reload
10+
* Vite v5
11+
* Vite as Middleware in Eleventy Dev Server (uses [eleventy-plugin-vite](https://github.com/11ty/eleventy-plugin-vite/))
12+
* Eleventy build output is post-processed by [Vite](https://vitejs.dev) (with Rollup)
13+
* CSS/Sass post-processing with PostCSS incl. [Autoprefixer](https://github.com/postcss/autoprefixer) and cssnano
14+
* Uses [my own opinionated CSS/Sass structure](https://matthiasott.com/notes/how-i-structure-my-css)
15+
* Critical CSS, generated and inlined via [rollup-plugin-critical](https://github.com/nystudio107/rollup-plugin-critical). The main CSS file is then loaded asynchronously with [Scott Jehl’s `media` loading strategy](https://www.filamentgroup.com/lab/load-css-simpler/) (adds `media="print"` and swaps to `media="all"` once loaded)
16+
* Example implementation of a web font loading strategy ([critical FOFT with preload](https://www.zachleat.com/web/comprehensive-webfonts/#critical-foft-preload))
17+
* Basic fluid typography based on [Utopia](https://utopia.fyi)
18+
* Basic dark mode support (using `prefers-color-scheme` and CSS Custom Properties)
19+
* Polyfill for [focus-visible](https://matthiasott.com/notes/focus-visible-is-here)
20+
* RSS feed 🧡
21+
* XML sitemap
22+
* Four Hundos Lighthouse score 💯💯💯💯
23+
24+
## Getting started
25+
26+
Start by [generating a new repository based on this project](https://github.com/matthiasott/eleventy-plus-vite/generate).
27+
28+
After cloning (or downloading) the repository to your local machine, install all dependencies with the command
29+
30+
```sh
31+
npm install
32+
```
33+
34+
## Run dev server
35+
36+
The project comes with Eleventy’s built-in development server. You can start the server with
37+
38+
```sh
39+
npm start
40+
````
41+
42+
or
43+
44+
```sh
45+
npx @11ty/eleventy --serve
46+
````
47+
48+
49+
## Build
50+
51+
To trigger a production build, use
52+
53+
```sh
54+
npm run build
55+
````
56+
57+
or
58+
59+
```sh
60+
npx @11ty/eleventy
61+
```
62+
63+
## Deploy a fork of this template to Netlify
64+
65+
[![Deploy to Netlify](https://www.netlify.com/img/deploy/button.svg)](https://app.netlify.com/start/deploy?repository=https://github.com/matthiasott/eleventy-plus-vite)
66+
67+
## CSS
68+
By default, this starter project uses Sass with an opinionated folder structure. Feel free to replace this structure with your own. If you prefer to write standards-compliant, good old plain CSS, this is also supported. Nesting is then possible via the [PostCSS Nesting plugin](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-nesting), following the [CSS Nesting specification](https://drafts.csswg.org/css-nesting-1/).
69+
70+
[Autoprefixer](https://github.com/postcss/autoprefixer) adds necessary browser prefixes. The [browserslist](https://github.com/browserslist/browserslist) settings can be adjusted in `package.json`.
71+
72+
## Roadmap
73+
* Add more base styles and a demo page that shows example styles and components
74+
* Add a toggle button for the dark mode theme
75+
* More advanced base styles for modern CSS layout
76+
* Webmention/IndieWeb support
77+
78+
## Feedback
79+
80+
Please provide feedback! 🤗 Ideally by [filing an issue here](https://github.com/matthiasott/eleventy-plus-vite/issues) – or via a pull request.
81+
## Thank you!
82+
83+
This starter project would not have been possible without the many great sites and projects I was able to learn from, use as inspiration, and shamelessly copy code from:
84+
85+
* Zach Leatherman [zachleat.com](https://github.com/zachleat/zachleat.com)
86+
* Max Böck’s [Eleventastic](https://github.com/maxboeck/eleventastic)
87+
* Stephanie Eckles’s [11ty Netlify Jumpstart](https://github.com/5t3ph/11ty-netlify-jumpstart)
88+
* Miriam Suzanne [miriamsuzanne.com](https://www.miriamsuzanne.com)

‎netlify.toml

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
[build]
2+
command = "npm run build"
3+
publish = "_site"

‎package.json

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
{
2+
"name": "eleventy-plus-vite",
3+
"version": "1.2.0",
4+
"type": "module",
5+
"description": "A clean and simple Eleventy 2 Starter Kit with Vite",
6+
"browserslist": [
7+
"> 0.5%",
8+
"not IE 11"
9+
],
10+
"scripts": {
11+
"start": "npx @11ty/eleventy --serve",
12+
"watch": "npx @11ty/eleventy --watch",
13+
"serve": "npx @11ty/eleventy --serve",
14+
"bench": "DEBUG=Eleventy:Benchmark* npx @11ty/eleventy",
15+
"build": "npx @11ty/eleventy",
16+
"clean": "del-cli _site",
17+
"test": "echo \"Error: no test specified\" && exit 1"
18+
},
19+
"repository": {
20+
"type": "git",
21+
"url": "git+https://[email protected]/matthiasott/11ty22.git"
22+
},
23+
"author": "Matthias Ott",
24+
"license": "MIT",
25+
"bugs": {
26+
"url": "https://github.com/matthiasott/11ty22/issues"
27+
},
28+
"homepage": "https://github.com/matthiasott/11ty22#readme",
29+
"devDependencies": {
30+
"@11ty/eleventy": "^3.0.0-beta.1",
31+
"@11ty/eleventy-img": "^4.0.2",
32+
"@11ty/eleventy-navigation": "^0.3.5",
33+
"@11ty/eleventy-plugin-rss": "^2.0.2",
34+
"@11ty/eleventy-plugin-syntaxhighlight": "^5.0.0",
35+
"@11ty/eleventy-plugin-vite": "^5.0.0-alpha.1",
36+
"autoprefixer": "^10.4.20",
37+
"cssnano": "^7.0.5",
38+
"cssremedy": "^0.1.0-beta.2",
39+
"del-cli": "^5.1.0",
40+
"eslint": "^8.57.0",
41+
"eslint-config-standard": "^17.1.0",
42+
"eslint-plugin-import": "^2.29.1",
43+
"eslint-plugin-n": "^16.6.2",
44+
"eslint-plugin-promise": "^6.6.0",
45+
"focus-visible": "^5.2.1",
46+
"luxon": "^3.5.0",
47+
"markdown-it": "^14.1.0",
48+
"markdown-it-anchor": "^9.0.1",
49+
"npm-run-all": "^4.1.5",
50+
"postcss-nesting": "^13.0.0",
51+
"rollup-plugin-critical": "^1.0.13",
52+
"sass": "^1.77.8",
53+
"vite": "^5.4.1"
54+
}
55+
}

‎postcss.config.js

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
export default {
2+
plugins: {
3+
'postcss-nesting': {},
4+
'autoprefixer': {},
5+
'cssnano': {
6+
preset: 'default',
7+
}
8+
}
9+
}

0 commit comments

Comments
 (0)