├── .eleventyignore ├── src ├── en │ ├── en.json │ ├── tags-list.njk │ ├── feed │ │ ├── feed.njk │ │ └── json.njk │ ├── about.md │ ├── 404.njk │ ├── archive.njk │ ├── index.njk │ └── tags.njk ├── posts │ ├── en │ │ ├── en.json │ │ ├── second.md │ │ ├── third.md │ │ ├── fourth.md │ │ ├── fifth.md │ │ └── first.md │ └── posts.json ├── assets │ ├── js │ │ └── index.js │ └── css │ │ ├── components │ │ ├── time.scss │ │ ├── header.scss │ │ ├── pagination.scss │ │ ├── logo.scss │ │ ├── nav.scss │ │ ├── footer.scss │ │ ├── post.scss │ │ ├── picture.scss │ │ ├── link.scss │ │ └── content.scss │ │ ├── functions.scss │ │ ├── pages │ │ ├── tags.scss │ │ ├── archive.scss │ │ ├── about.scss │ │ ├── index.scss │ │ └── article.scss │ │ ├── mixins.scss │ │ ├── index.scss │ │ ├── layouts │ │ └── post-grid.scss │ │ ├── utilities │ │ ├── spacing.scss │ │ └── flex.scss │ │ ├── variables.scss │ │ ├── reset.scss │ │ ├── settings.scss │ │ ├── base.scss │ │ └── prism.scss ├── _includes │ ├── layouts │ │ ├── home.njk │ │ ├── about.njk │ │ ├── post.njk │ │ └── base.njk │ ├── pages │ │ ├── 404.njk │ │ ├── tags-list.njk │ │ ├── archive.njk │ │ ├── tags.njk │ │ └── index.njk │ ├── icons │ │ ├── letter-v.svg │ │ ├── brand-gitlab.svg │ │ ├── brand-telegram.svg │ │ ├── terminal.svg │ │ ├── letter-c.svg │ │ ├── at.svg │ │ ├── folder.svg │ │ ├── phone.svg │ │ ├── language.svg │ │ ├── link.svg │ │ ├── file-download.svg │ │ ├── brand-github.svg │ │ └── rotate-2.svg │ └── components │ │ ├── feed-json.njk │ │ ├── feed-atom.njk │ │ ├── header.njk │ │ ├── footer.njk │ │ └── blog-post-items.njk └── sitemap.xml.njk ├── _data ├── notFound.js ├── projEnv.js ├── about.js ├── archive.js ├── tagsPage.js ├── footer.js ├── main.js └── metadata.js ├── static ├── favicon.ico ├── favicon-16x16.png ├── favicon-32x32.png ├── apple-touch-icon.png ├── android-chrome-192x192.png └── android-chrome-512x512.png ├── .gitignore ├── .editorconfig ├── csshash.js ├── rollup.config.js ├── cssmin.js ├── .markdown.js ├── .github └── workflows │ └── build.yml ├── LICENSE ├── package.json ├── README.md └── .eleventy.js /.eleventyignore: -------------------------------------------------------------------------------- 1 | README.md 2 | _drafts/ 3 | cv/ 4 | -------------------------------------------------------------------------------- /src/en/en.json: -------------------------------------------------------------------------------- 1 | { 2 | "locale": "en" 3 | } 4 | -------------------------------------------------------------------------------- /src/posts/en/en.json: -------------------------------------------------------------------------------- 1 | { 2 | "locale": "en" 3 | } 4 | -------------------------------------------------------------------------------- /_data/notFound.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | en: { 3 | } 4 | } 5 | -------------------------------------------------------------------------------- /src/posts/posts.json: -------------------------------------------------------------------------------- 1 | { 2 | "tags": [ 3 | "posts" 4 | ] 5 | } 6 | -------------------------------------------------------------------------------- /src/assets/js/index.js: -------------------------------------------------------------------------------- 1 | console.log("%cHELLO, WORLD!!!", "color: green"); 2 | -------------------------------------------------------------------------------- /_data/projEnv.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | eleventy: process.env.ELEVENTY_ENV 3 | } 4 | -------------------------------------------------------------------------------- /src/assets/css/components/time.scss: -------------------------------------------------------------------------------- 1 | .c-time { 2 | font-size: var(--text-xs); 3 | } 4 | -------------------------------------------------------------------------------- /_data/about.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | en: { 3 | title: "about me", 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /_data/archive.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | en: { 3 | title: 'Archive' 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /_data/tagsPage.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | en: { 3 | tag: "tag", 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /static/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/anparfenov/11ty-starter/HEAD/static/favicon.ico -------------------------------------------------------------------------------- /static/favicon-16x16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/anparfenov/11ty-starter/HEAD/static/favicon-16x16.png -------------------------------------------------------------------------------- /static/favicon-32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/anparfenov/11ty-starter/HEAD/static/favicon-32x32.png -------------------------------------------------------------------------------- /static/apple-touch-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/anparfenov/11ty-starter/HEAD/static/apple-touch-icon.png -------------------------------------------------------------------------------- /static/android-chrome-192x192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/anparfenov/11ty-starter/HEAD/static/android-chrome-192x192.png -------------------------------------------------------------------------------- /static/android-chrome-512x512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/anparfenov/11ty-starter/HEAD/static/android-chrome-512x512.png -------------------------------------------------------------------------------- /src/_includes/layouts/home.njk: -------------------------------------------------------------------------------- 1 | --- 2 | layout: layouts/base.njk 3 | templateClass: tmpl-home 4 | --- 5 | {{ content | safe }} 6 | -------------------------------------------------------------------------------- /src/en/tags-list.njk: -------------------------------------------------------------------------------- 1 | --- 2 | permalink: /tags/ 3 | layout: layouts/home.njk 4 | --- 5 | 6 | {% extends "pages/tags-list.njk" %} 7 | -------------------------------------------------------------------------------- /_data/footer.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | en: { 3 | madeWith: "made with", 4 | sources: "sources", 5 | }, 6 | }; 7 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | _site/ 2 | _cache/ 3 | node_modules/ 4 | _data/css.json 5 | 6 | *.log 7 | csshash 8 | _data/csshash.json 9 | _data/year.json 10 | -------------------------------------------------------------------------------- /src/assets/css/functions.scss: -------------------------------------------------------------------------------- 1 | @use "variables"; 2 | 3 | @function get-utility-size-prefix($size) { 4 | @return "#{variables.$utility-prefix}#{$size}"; 5 | } 6 | -------------------------------------------------------------------------------- /src/en/feed/feed.njk: -------------------------------------------------------------------------------- 1 | --- 2 | permalink: "{{ metadata[locale].feed.path }}" 3 | eleventyExcludeFromCollections: true 4 | --- 5 | 6 | {% extends "components/feed-atom.njk" %} 7 | -------------------------------------------------------------------------------- /src/en/feed/json.njk: -------------------------------------------------------------------------------- 1 | --- 2 | permalink: "{{ metadata[locale].jsonfeed.path }}" 3 | eleventyExcludeFromCollections: true 4 | --- 5 | 6 | {% extends "components/feed-json.njk" %} 7 | -------------------------------------------------------------------------------- /src/_includes/pages/404.njk: -------------------------------------------------------------------------------- 1 |

{{ notFound[locale].notFound }}

2 | 3 | {{ notFound[locale].goto }} {{ notFound[locale].mainPage }}. 4 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | indent_style = space 5 | indent_size = 4 6 | end_of_line = lf 7 | insert_final_newline = true 8 | trim_trailing_whitespace = true 9 | charset = utf-8 10 | -------------------------------------------------------------------------------- /src/en/about.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: layouts/about.njk 3 | permalink: /about/ 4 | eleventyNavigation: 5 | key: about 6 | title: about 7 | order: 2 8 | --- 9 | 10 | TODO: write about yourself. 11 | -------------------------------------------------------------------------------- /src/assets/css/pages/tags.scss: -------------------------------------------------------------------------------- 1 | @use "../mixins"; 2 | 3 | .p-tags { 4 | @include mixins.content-width(); 5 | 6 | padding: 1rem; 7 | 8 | &_link { 9 | margin-top: 1rem; 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /src/posts/en/second.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: This is my second post. 3 | description: TODO 4 | date: 2022-01-02 5 | tags: 6 | - tag 7 | layout: layouts/post.njk 8 | --- 9 | 10 | # Hello 11 | 12 | second post 13 | -------------------------------------------------------------------------------- /src/en/404.njk: -------------------------------------------------------------------------------- 1 | --- 2 | layout: layouts/home.njk 3 | title: 404 4 | description: Page Not Found 5 | permalink: /404.html 6 | eleventyExcludeFromCollections: true 7 | --- 8 | 9 | {% extends "pages/404.njk" %} 10 | -------------------------------------------------------------------------------- /src/en/archive.njk: -------------------------------------------------------------------------------- 1 | --- 2 | layout: layouts/home.njk 3 | permalink: /posts/ 4 | eleventyNavigation: 5 | key: archive 6 | title: archive 7 | order: 1 8 | --- 9 | 10 | {% extends "pages/archive.njk" %} 11 | -------------------------------------------------------------------------------- /src/en/index.njk: -------------------------------------------------------------------------------- 1 | --- 2 | permalink: /index.html 3 | layout: layouts/home.njk 4 | eleventyNavigation: 5 | key: main 6 | title: main 7 | order: 0 8 | --- 9 | 10 | {% extends "pages/index.njk" %} 11 | -------------------------------------------------------------------------------- /src/assets/css/pages/archive.scss: -------------------------------------------------------------------------------- 1 | @forward "../components/post"; 2 | @forward "../layouts/post-grid"; 3 | 4 | .p-archive { 5 | width: 100%; 6 | max-width: var(--max-content-width); 7 | margin: 0 auto; 8 | padding: 1rem; 9 | } 10 | -------------------------------------------------------------------------------- /src/assets/css/pages/about.scss: -------------------------------------------------------------------------------- 1 | @use "../components/link"; 2 | 3 | .p-about { 4 | width: 100%; 5 | max-width: var(--max-content-width); 6 | margin: 0 auto; 7 | padding: 1rem; 8 | &_content { 9 | margin-top: 1.5rem; 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /src/_includes/pages/tags-list.njk: -------------------------------------------------------------------------------- 1 |

{{ tagsPage[locale].tags }}

2 | 3 |
4 | {% for tag in collections.tagList | filterTagList %} 5 | {% set tagUrl %}/tags/{{ tag | slug }}/{% endset %} 6 | {{ tag }} 7 | {% endfor %} 8 |
9 | -------------------------------------------------------------------------------- /src/_includes/layouts/about.njk: -------------------------------------------------------------------------------- 1 | --- 2 | layout: layouts/base.njk 3 | templateClass: tmpl-about 4 | --- 5 | 6 |
7 |

{{ about[locale].title | capitalize }}

8 | 9 |
10 | {{ content | safe }} 11 |
12 |
13 | -------------------------------------------------------------------------------- /src/posts/en/third.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: This is my third post. 3 | description: TODO 4 | date: 2022-01-03 5 | tags: 6 | - another one 7 | layout: layouts/post.njk 8 | --- 9 | 10 | # Hello 11 | 12 | third post post 13 | 14 | ```js 15 | var a = 1; 16 | var b = 2; 17 | var c = a + b; 18 | console.log('c = ', c); 19 | ``` 20 | -------------------------------------------------------------------------------- /csshash.js: -------------------------------------------------------------------------------- 1 | const fs = require('fs') 2 | const { nanoid } = require('nanoid') 3 | 4 | const hash = nanoid(); 5 | 6 | const DATAFILE = '_data/csshash.json'; 7 | const MINIFIED_CSSFILE = `index.${hash}.min.css` 8 | 9 | var jsonValue = `{ 10 | "indexCSS": "${MINIFIED_CSSFILE}" 11 | }` 12 | fs.writeFileSync(DATAFILE, jsonValue) 13 | -------------------------------------------------------------------------------- /src/assets/css/mixins.scss: -------------------------------------------------------------------------------- 1 | @use "sass:map"; 2 | @use "variables"; 3 | 4 | @mixin media($screen) { 5 | @media (min-width: map.get(variables.$breakpoints, $screen)) { 6 | @content; 7 | } 8 | } 9 | 10 | @mixin content-width() { 11 | width: 100%; 12 | max-width: var(--max-content-width); 13 | margin: 0 auto; 14 | } 15 | -------------------------------------------------------------------------------- /src/assets/css/components/header.scss: -------------------------------------------------------------------------------- 1 | @use "../mixins"; 2 | @forward "nav"; 3 | @forward "logo"; 4 | 5 | .c-header { 6 | width: 100%; 7 | max-width: var(--max-content-width); 8 | margin: 0 auto; 9 | 10 | display: flex; 11 | flex-flow: row wrap; 12 | align-items: center; 13 | padding: 1rem; 14 | gap: 1rem; 15 | } 16 | -------------------------------------------------------------------------------- /src/assets/css/index.scss: -------------------------------------------------------------------------------- 1 | @use "reset"; 2 | @use "settings"; 3 | @use "base"; 4 | @use "prism"; 5 | 6 | @use "utilities/flex"; 7 | @use "utilities/spacing"; 8 | @use "components/header"; 9 | @use "components/footer"; 10 | @use "pages/index"; 11 | @use "pages/about"; 12 | @use "pages/archive"; 13 | @use "pages/article"; 14 | @use "pages/tags"; 15 | -------------------------------------------------------------------------------- /src/posts/en/fourth.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: This is my fourth post. 3 | description: TODO 4 | date: 2022-01-04 5 | tags: 6 | - another one 7 | layout: layouts/post.njk 8 | --- 9 | 10 | # Hello 11 | 12 | fourth post post 13 | 14 | [google](https://google.com) 15 | [ddg](https://duckduckgo.com) 16 | [bing](https://bing.com) 17 | [ya](https://ya.ru) 18 | -------------------------------------------------------------------------------- /src/_includes/icons/letter-v.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /src/assets/css/components/pagination.scss: -------------------------------------------------------------------------------- 1 | .c-pagination { 2 | margin-top: 2rem; 3 | background: var(--color-gray-200); 4 | color: var(--color-text); 5 | padding: 0.5rem; 6 | border-radius: 0.25rem; 7 | &_list { 8 | display: flex; 9 | flex-direction: row-reverse; 10 | justify-content: space-between; 11 | gap: 1rem; 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /src/_includes/icons/brand-gitlab.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /src/en/tags.njk: -------------------------------------------------------------------------------- 1 | --- 2 | pagination: 3 | data: collections 4 | size: 1 5 | alias: tag 6 | filter: 7 | - all 8 | - nav 9 | - post 10 | - posts 11 | - tagList 12 | addAllPagesToCollections: true 13 | layout: layouts/home.njk 14 | eleventyComputed: 15 | title: Tagged “{{ tag }}” 16 | permalink: /tags/{{ tag | slug }}/ 17 | --- 18 | 19 | {% extends "pages/tags.njk" %} 20 | -------------------------------------------------------------------------------- /src/_includes/icons/brand-telegram.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /src/_includes/icons/terminal.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /src/posts/en/fifth.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: This is my fifth post. 3 | description: TODO 4 | date: 2022-01-05 5 | tags: 6 | - last one 7 | layout: layouts/post.njk 8 | --- 9 | 10 | # Hello 11 | 12 | fifth post post 13 | 14 | | Item | Price | # In stock | 15 | |--------------|-----------|------------| 16 | | Juicy Apples | 1.99 | *7* | 17 | | Bananas | **1.89** | 5234 | 18 | -------------------------------------------------------------------------------- /src/_includes/icons/letter-c.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /src/assets/css/components/logo.scss: -------------------------------------------------------------------------------- 1 | .c-logo { 2 | background: var(--main-gradient); 3 | display: inline-block; 4 | -webkit-background-clip: text; 5 | -webkit-text-fill-color: transparent; 6 | 7 | &:hover { 8 | background: var(--main-gradient-inv); 9 | display: inline-block; 10 | -webkit-background-clip: text; 11 | -webkit-text-fill-color: transparent; 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /src/_includes/icons/at.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /src/_includes/icons/folder.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /src/_includes/icons/phone.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /src/_includes/icons/language.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /src/_includes/pages/archive.njk: -------------------------------------------------------------------------------- 1 |
2 |

{{ archive[locale].title }}

3 | 4 | {% set postslist = collections.posts %} 5 | {% if postslist | length %} 6 | 10 | {% else %} 11 | {% endif %} 12 |
13 | -------------------------------------------------------------------------------- /src/assets/css/components/nav.scss: -------------------------------------------------------------------------------- 1 | @forward "link"; 2 | 3 | .c-nav-list { 4 | display: flex; 5 | flex-flow: row wrap; 6 | margin-left: -0.5rem; 7 | margin-bottom: -0.5rem; 8 | 9 | &_item { 10 | margin-left: 0.5rem; 11 | margin-bottom: 0.5rem; 12 | &--active { 13 | color: var(--color-accent); 14 | } 15 | &:hover { 16 | color: var(--color-accent); 17 | } 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /rollup.config.js: -------------------------------------------------------------------------------- 1 | import { nodeResolve } from '@rollup/plugin-node-resolve'; 2 | import { terser } from "rollup-plugin-terser"; 3 | 4 | const isProd = process.env.NODE_ENV === 'production'; 5 | 6 | const plugins = [nodeResolve()] 7 | if (isProd) { 8 | plugins.push(terser()); 9 | } 10 | 11 | export default { 12 | input: './src/assets/js/index.js', 13 | output: { 14 | file: './_site/assets/js/bundle.js', 15 | format: 'iife' 16 | }, 17 | plugins 18 | }; 19 | -------------------------------------------------------------------------------- /src/_includes/icons/link.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /src/sitemap.xml.njk: -------------------------------------------------------------------------------- 1 | --- 2 | permalink: /sitemap.xml 3 | eleventyExcludeFromCollections: true 4 | --- 5 | 6 | 7 | {%- for page in collections.all %} 8 | {% set absoluteUrl %}{{ page.url | url | absoluteUrl(metadata.url) }}{% endset %} 9 | 10 | {{ absoluteUrl }} 11 | {{ page.date | htmlDateString }} 12 | 13 | {%- endfor %} 14 | 15 | -------------------------------------------------------------------------------- /src/_includes/pages/tags.njk: -------------------------------------------------------------------------------- 1 |
2 |

{{ tagsPage[locale].tag | capitalize }}: {{ tag }}

3 | 4 | {% set postslist = collections[ tag ] %} 5 | 8 | 9 |

{{ tagsPage[locale].see }} 10 | 11 | {{ tagsPage[locale].allTags }} 12 | 13 |

14 |
15 | -------------------------------------------------------------------------------- /cssmin.js: -------------------------------------------------------------------------------- 1 | const fs = require('fs') 2 | const CleanCss = require('clean-css'); 3 | 4 | const DATAFILE = '_data/csshash.json'; 5 | const CSSFILE = '_site/assets/css/index.css' 6 | 7 | const cssHash = JSON.parse(fs.readFileSync(DATAFILE, 'utf-8')); 8 | const MINIFIED_CSSFILE = `_site/assets/css/${cssHash.indexCSS}`; 9 | 10 | const cssFile = fs.readFileSync(CSSFILE, 'utf-8'); 11 | 12 | const minified = new CleanCss({}).minify(cssFile).styles; 13 | 14 | fs.unlinkSync(CSSFILE); 15 | fs.writeFileSync(MINIFIED_CSSFILE, minified); 16 | -------------------------------------------------------------------------------- /src/_includes/icons/file-download.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /src/assets/css/pages/index.scss: -------------------------------------------------------------------------------- 1 | @use "../mixins"; 2 | 3 | .p-index { 4 | width: 100%; 5 | max-width: var(--max-content-width); 6 | margin: 0 auto; 7 | 8 | &_hero { 9 | font-family: var(--monospace); 10 | padding: 1rem; 11 | background: var(--color-dark); 12 | color: var(--color-main); 13 | 14 | @include mixins.media('tablet') { 15 | border-radius: 0.5rem; 16 | box-shadow: 2px 2px 5px var(--color-gray-500); 17 | } 18 | } 19 | 20 | &_latest { 21 | padding: 1rem; 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /src/assets/css/components/footer.scss: -------------------------------------------------------------------------------- 1 | @use "sass:map"; 2 | @forward "link"; 3 | 4 | .c-footer { 5 | background-color: var(--color-accent); 6 | 7 | &_wrapper { 8 | width: 100%; 9 | max-width: var(--max-content-width); 10 | margin: 0 auto; 11 | 12 | display: flex; 13 | flex-flow: row wrap; 14 | gap: 1rem; 15 | justify-content: space-between; 16 | align-items: center; 17 | padding: 1rem; 18 | } 19 | &_source { 20 | display: flex; 21 | align-items: center; 22 | gap: 0.25rem; 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /.markdown.js: -------------------------------------------------------------------------------- 1 | const markdownIt = require("markdown-it"); 2 | const markdownItAnchor = require("markdown-it-anchor"); 3 | // const markdownItContainer = require("markdown-it-container"); 4 | const fs = require("fs"); 5 | 6 | const linkIcon = fs.readFileSync("./src/_includes/icons/link.svg"); 7 | 8 | let markdownLibrary = markdownIt({ 9 | html: true, 10 | breaks: true, 11 | linkify: true, 12 | typographer: true, 13 | }).use(markdownItAnchor, { 14 | permalink: true, 15 | permalinkClass: "direct-link", 16 | permalinkSymbol: linkIcon 17 | }); 18 | 19 | module.exports = { 20 | markdownLibrary 21 | } 22 | -------------------------------------------------------------------------------- /src/_includes/icons/brand-github.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /src/assets/css/layouts/post-grid.scss: -------------------------------------------------------------------------------- 1 | .l-post-grid { 2 | display: grid; 3 | grid-template-areas: 4 | "title" 5 | "desc" 6 | "meta"; 7 | gap: 0.5rem; 8 | 9 | &--image { 10 | grid-template-rows: auto repeat(3, 1fr); 11 | grid-template-areas: 12 | "image" 13 | "title" 14 | "date" 15 | "tags"; 16 | } 17 | 18 | &_tags { 19 | grid-area: tags; 20 | } 21 | 22 | &_title { 23 | grid-area: title; 24 | } 25 | 26 | &_meta { 27 | grid-area: meta; 28 | } 29 | 30 | &_image { 31 | grid-area: image; 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /src/_includes/icons/rotate-2.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /src/assets/css/components/post.scss: -------------------------------------------------------------------------------- 1 | @use "../mixins"; 2 | @use "link"; 3 | @forward "../layouts/post-grid"; 4 | 5 | .c-posts-list { 6 | display: flex; 7 | flex-flow: row wrap; 8 | gap: 1rem; 9 | 10 | &--archive, &--tags { 11 | margin-top: 1.5rem; 12 | } 13 | } 14 | .c-post-item { 15 | min-width: calc(100% / 2 - 1rem); 16 | &_date { 17 | font-size: var(--text-sm); 18 | color: var(--color-gray-900); 19 | } 20 | &_tags { 21 | display: flex; 22 | flex-flow: column wrap; 23 | gap: 0.25rem; 24 | } 25 | &_meta { 26 | display: flex; 27 | align-items: center; 28 | gap: 0.5rem; 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /_data/main.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | en: { 3 | welcome: "Welcome", 4 | siteDescription: `

This is starter for eleventy ssg.

5 |

It's built with nunjuks and sass also it has rollup config for your js

6 |

For site serving you can use caddy, nginx 7 | or use vercel or netlify

`, 8 | latest: 'latest', 9 | post: 'post', 10 | posts: 'posts', 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /src/assets/css/utilities/spacing.scss: -------------------------------------------------------------------------------- 1 | @use "../variables"; 2 | 3 | $spacing-types: ( 4 | "margin": "m", 5 | "padding": "p", 6 | ); 7 | 8 | $spacing-directions: ( 9 | "left": "l", 10 | "right": "r", 11 | "top": "t", 12 | "bottom": "b" 13 | ); 14 | 15 | @each $type, $type-val in $spacing-types { 16 | .#{variables.$utility-prefix}#{$type-val} { 17 | @each $direction, $dir-val in $spacing-directions { 18 | &#{$dir-val} { 19 | @each $size-name, $size in variables.$spacing-sizes { 20 | &--#{$size-name} { 21 | #{$type}-#{$direction}: #{$size}; 22 | } 23 | } 24 | } 25 | } 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /src/assets/css/components/picture.scss: -------------------------------------------------------------------------------- 1 | .c-picture { 2 | width: 100%; 3 | height: 100%; 4 | overflow: hidden; 5 | display: block; 6 | position: relative; 7 | 8 | &--br-8 { 9 | border-radius: 8px; 10 | } 11 | 12 | &_image { 13 | object-fit: cover; 14 | position: absolute; 15 | width: 100%; 16 | height: 100%; 17 | left: 0; 18 | right: 0; 19 | top: 0; 20 | bottom: 0; 21 | } 22 | 23 | &_caption { 24 | position: absolute; 25 | bottom: 0.5rem; 26 | left: 0.5rem; 27 | padding: 0.1rem; 28 | background: var(--color-gray-200); 29 | color: var(--color-text); 30 | font-size: var(--text-xs); 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /src/assets/css/pages/article.scss: -------------------------------------------------------------------------------- 1 | @forward "../components/content"; 2 | @forward "../components/pagination"; 3 | 4 | .p-article { 5 | width: 100%; 6 | max-width: var(--max-content-width); 7 | margin: 0 auto; 8 | display: flex; 9 | flex-direction: column; 10 | flex:1; 11 | 12 | padding: 0 1rem; 13 | background: var(--gradient-header); 14 | border-radius: 0.25rem; 15 | margin-bottom: 1rem; 16 | 17 | &_hero { 18 | border: 1px solid var(--color-text); 19 | padding: 1rem; 20 | border-radius: 0.5rem; 21 | } 22 | 23 | &_date { 24 | font-size: var(--text-sm); 25 | margin-right: 0.5rem; 26 | } 27 | 28 | &_tags { 29 | display: flex; 30 | gap: 0.5rem; 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /.github/workflows/build.yml: -------------------------------------------------------------------------------- 1 | name: Build Eleventy 2 | 3 | on: 4 | push: 5 | branches: [ main ] 6 | pull_request: 7 | branches: [ main ] 8 | 9 | jobs: 10 | build: 11 | runs-on: ubuntu-20.04 12 | 13 | strategy: 14 | matrix: 15 | node-version: [14.x] 16 | 17 | steps: 18 | - uses: actions/checkout@v2 19 | 20 | - name: Use Node.js ${{ matrix.node-version }} 21 | uses: actions/setup-node@v2 22 | with: 23 | node-version: ${{ matrix.node-version }} 24 | 25 | - name: Install dependencies & build 26 | run: | 27 | npm ci 28 | npm run build:github 29 | 30 | - name: Deploy 31 | uses: peaceiris/actions-gh-pages@v3 32 | with: 33 | publish_dir: ./_site 34 | github_token: ${{ secrets.GITHUB_TOKEN }} 35 | -------------------------------------------------------------------------------- /src/assets/css/variables.scss: -------------------------------------------------------------------------------- 1 | @use "sass:map"; 2 | 3 | $viewport: ( 4 | "mobile": "mobile", 5 | "tablet": "tablet", 6 | "laptop": "laptop", 7 | "desktop": "desktop" 8 | ); 9 | 10 | $breakpoints: ( 11 | map.get($viewport, "mobile"): 30rem, 12 | map.get($viewport, "tablet"): 48rem, 13 | map.get($viewport, "laptop"): 70rem, 14 | map.get($viewport, "desktop"): 90rem 15 | ); 16 | 17 | $sizes: ( 18 | map.get($viewport, "mobile"): "sm", 19 | map.get($viewport, "tablet"): "md", 20 | map.get($viewport, "laptop"): "lg", 21 | map.get($viewport, "desktop"): "xl" 22 | ); 23 | 24 | $spacing-sizes: ( 25 | "4": "0.25rem", 26 | "6": "0.325rem", 27 | "8": "0.5rem", 28 | "10": "0.625rem", 29 | "12": "0.75rem", 30 | "14": "0.875rem", 31 | "16": "1rem", 32 | "18": "1.125rem", 33 | "20": "1.25rem", 34 | "22": "1.375rem", 35 | "24": "1.5rem", 36 | "32": "2.rem", 37 | ); 38 | 39 | $utility-prefix: "u-"; 40 | -------------------------------------------------------------------------------- /_data/metadata.js: -------------------------------------------------------------------------------- 1 | const url = process.env.URL ?? "https://example.com"; 2 | const title = "Eleventy starter"; 3 | 4 | module.exports = { 5 | en: { 6 | url, 7 | title, 8 | description: "TODO", 9 | feed: { 10 | subtitle: "TODO", 11 | filename: "feed.xml", 12 | path: "/feed/en.feed.xml", 13 | id: "TODO", 14 | }, 15 | jsonfeed: { 16 | path: "/feed/en.feed.json", 17 | url: `${url}/feed/en.feed.json`, 18 | }, 19 | source: { 20 | label: 'github', 21 | link: 'https://github.com/moody-person/11ty-starter' 22 | }, 23 | author: { 24 | url, 25 | name: "Your name", 26 | email: "example@mail.com", 27 | }, 28 | posts: { 29 | title: `Posts | ${title}`, 30 | description: "Blog posts list", 31 | }, 32 | about: { 33 | title: `About | ${title}`, 34 | }, 35 | }, 36 | }; 37 | -------------------------------------------------------------------------------- /src/_includes/components/feed-json.njk: -------------------------------------------------------------------------------- 1 | { 2 | "version": "https://jsonfeed.org/version/1.1", 3 | "title": "{{ metadata[locale].title }}", 4 | "language": "{{ locale }}", 5 | "home_page_url": "{{ metadata[locale].url }}", 6 | "feed_url": "{{ metadata[locale].jsonfeed.url }}", 7 | "description": "{{ metadata[locale].description }}", 8 | "author": { 9 | "name": "{{ metadata[locale].author.name }}", 10 | "url": "{{ metadata[locale].author.url }}" 11 | }, 12 | "items": [ 13 | {%- for post in collections.posts | reverse %} 14 | {%- set absolutePostUrl %}{{ post.url | url | absoluteUrl(metadata[locale].url) }}{% endset -%} 15 | { 16 | "id": "{{ absolutePostUrl }}", 17 | "url": "{{ absolutePostUrl }}", 18 | "title": "{{ post.data.title }}", 19 | "content_html": {% if post.templateContent %}{{ post.templateContent | dump | safe }}{% else %}""{% endif %}, 20 | "date_published": "{{ post.date | rssDate }}" 21 | } 22 | {%- if not loop.last -%} 23 | , 24 | {%- endif -%} 25 | {%- endfor %} 26 | ] 27 | } 28 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2022 moody-person 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. 22 | -------------------------------------------------------------------------------- /src/_includes/components/feed-atom.njk: -------------------------------------------------------------------------------- 1 | 2 | 3 | {{ metadata[locale].title }} 4 | {{ metadata[locale].feed.subtitle }} 5 | {% set absoluteUrl %}{{ metadata[locale].feed.path | url | absoluteUrl(metadata[locale].url) }}{% endset %} 6 | 7 | 8 | {{ collections.posts | rssLastUpdatedDate }} 9 | {{ metadata[locale].feed.id }} 10 | 11 | {{ metadata[locale].author.name }} 12 | {{ metadata[locale].author.email }} 13 | 14 | {%- for post in collections.posts | reverse %} 15 | {% set absolutePostUrl %}{{ post.url | url | absoluteUrl(metadata[locale].url) }}{% endset %} 16 | 17 | {{ post.data.title }} 18 | 19 | {{ post.date | rssDate }} 20 | {{ absolutePostUrl }} 21 | {{ post.templateContent | htmlToAbsoluteUrls(absolutePostUrl) }} 22 | 23 | {%- endfor %} 24 | 25 | -------------------------------------------------------------------------------- /src/_includes/components/header.njk: -------------------------------------------------------------------------------- 1 |
2 | 3 | 4 | 5 | 26 |
27 | -------------------------------------------------------------------------------- /src/_includes/components/footer.njk: -------------------------------------------------------------------------------- 1 | 29 | -------------------------------------------------------------------------------- /src/assets/css/reset.scss: -------------------------------------------------------------------------------- 1 | /* http://meyerweb.com/eric/tools/css/reset/ 2 | v2.0 | 20110126 3 | License: none (public domain) 4 | */ 5 | 6 | html, body, div, span, applet, object, iframe, 7 | h1, h2, h3, h4, h5, h6, p, blockquote, pre, 8 | a, abbr, acronym, address, big, cite, code, 9 | del, dfn, em, img, ins, kbd, q, s, samp, 10 | small, strike, strong, sub, sup, tt, var, 11 | b, u, i, center, 12 | dl, dt, dd, ol, ul, li, 13 | fieldset, form, label, legend, 14 | table, caption, tbody, tfoot, thead, tr, th, td, 15 | article, aside, canvas, details, embed, 16 | figure, figcaption, footer, header, hgroup, 17 | menu, nav, output, ruby, section, summary, 18 | time, mark, audio, video { 19 | margin: 0; 20 | padding: 0; 21 | border: 0; 22 | font-size: 100%; 23 | font: inherit; 24 | vertical-align: baseline; 25 | } 26 | /* HTML5 display-role reset for older browsers */ 27 | article, aside, details, figcaption, figure, 28 | footer, header, hgroup, menu, nav, section { 29 | display: block; 30 | } 31 | body { 32 | line-height: 1; 33 | } 34 | ol, ul { 35 | list-style: none; 36 | } 37 | blockquote, q { 38 | quotes: none; 39 | } 40 | blockquote:before, blockquote:after, 41 | q:before, q:after { 42 | content: ''; 43 | content: none; 44 | } 45 | table { 46 | border-collapse: collapse; 47 | border-spacing: 0; 48 | } 49 | -------------------------------------------------------------------------------- /src/_includes/pages/index.njk: -------------------------------------------------------------------------------- 1 |
2 |
3 |

4 | {{ main[locale].welcome }} 5 |

6 |
7 |

This is starter for eleventy ssg.

8 |

It's built with nunjuks and sass also it has rollup config for your js

9 |

For site serving you can use caddy, nginx 10 | or use vercel or netlify 11 |

12 |
13 |
14 |
15 |

16 | {% set maxPosts = collections.posts.length | min(3) %} 17 | {{ main[locale].latest | capitalize }} 18 | {% if maxPosts == 1 %} 19 | {{ main[locale].post }} 20 | {% else %} 21 | {{ maxPosts }} 22 | {{ main[locale].posts }} 23 | {% endif %} 24 |

25 | 29 |
30 |
-------------------------------------------------------------------------------- /src/_includes/layouts/post.njk: -------------------------------------------------------------------------------- 1 | --- 2 | layout: layouts/base.njk 3 | templateClass: tmpl-post 4 | --- 5 | 6 |
7 |
8 | {% if page.data.image %} 9 | 10 | {{ post.data.imageAlt }} 11 | 12 | {% endif %} 13 | 16 |

{{ title }}

17 |
18 | {%- for tag in tags | filterTagList -%} 19 | {%- set tagUrl %}/tags/{{ tag | slug }}/{% endset -%} 20 | {{ tag }} 21 | {%- endfor %} 22 |
23 |
24 | 25 |
26 | {{ content | safe }} 27 |
28 | 29 | {%- set nextPost = collections.posts | getNextCollectionItem(page) %} 30 | {%- set previousPost = collections.posts | getPreviousCollectionItem(page) %} 31 | {%- if nextPost or previousPost %} 32 |
33 | 41 |
42 | {%- endif %} 43 |
44 | 45 | 46 | -------------------------------------------------------------------------------- /src/assets/css/settings.scss: -------------------------------------------------------------------------------- 1 | .s-common { 2 | --text-xs: 0.7rem; 3 | --text-sm: 0.875rem; 4 | --text-base: 1rem; 5 | --text-lg: 1.25rem; 6 | --text-xl: 1.5rem; 7 | --text-xxl: 2rem; 8 | 9 | --max-content-width: 70rem; 10 | 11 | @media 12 | only screen and (-webkit-min-device-pixel-ratio: 2), 13 | only screen and ( min--moz-device-pixel-ratio: 2), 14 | only screen and (-o-min-device-pixel-ratio: 2/1), 15 | only screen and (min-device-pixel-ratio: 2), 16 | only screen and (min-resolution: 192dpi), 17 | only screen and (min-resolution: 2dppx) { 18 | --max-content-width: 60rem; 19 | } 20 | 21 | --sans-serif: -apple-system, system-ui, sans-serif; 22 | --monospace: Consolas, Menlo, Monaco, Andale Mono WT, Andale Mono, Lucida Console, Lucida Sans Typewriter, DejaVu Sans Mono, Bitstream Vera Sans Mono, Liberation Mono, Nimbus Mono L, Courier New, Courier, monospace; 23 | 24 | --color-gray-100: hsl(0, 0%, 90%); 25 | --color-gray-200: hsl(0, 0%, 85%); 26 | --color-gray-300: hsl(0, 0%, 80%); 27 | --color-gray-400: hsl(0, 0%, 70%); 28 | --color-gray-500: hsl(0, 0%, 65%); 29 | --color-gray-600: hsl(0, 0%, 60%); 30 | --color-gray-700: hsl(0, 0%, 55%); 31 | --color-gray-800: hsl(0, 0%, 40%); 32 | --color-gray-900: hsl(0, 0%, 30%); 33 | 34 | --color-warning: hsl(37, 79%, 60%); 35 | 36 | --main-gradient: linear-gradient(to right, #dd33b3, #1ca6b5); 37 | --main-gradient-inv: linear-gradient(to right, #1ca6b5, #dd33b3); 38 | } 39 | 40 | .s-light-theme { 41 | --color-main: hsla(0, 0%, 98%, 1); 42 | --color-text: hsla(0, 0%, 0%, 1); 43 | --color-dark: hsla(0, 0%, 20%, 1); 44 | --color-bg: hsla(0, 0%, 66%, 1); 45 | --color-accent: hsla(165, 56%, 83%,1); 46 | --color-extra: hsl(315, 71%, 53%); 47 | } 48 | -------------------------------------------------------------------------------- /src/_includes/components/blog-post-items.njk: -------------------------------------------------------------------------------- 1 | {% for post in postslist %} 2 |
  • 3 |
    4 | {% if includeImage and post.data.image %} 5 | 6 | 7 | 8 | {% endif %} 9 |
    10 | 11 |

    {{ post.data.title }}

    12 |     13 |
    14 |

    {{ post.data.description }}

    15 |
    16 | {% if locale == 'en' %} 17 | 20 | {% else %} 21 | 24 | {% endif %} 25 | {% if post.data.tags %} 26 | | 27 |
      28 | {% for tag in post.data.tags | filterTagList %} 29 |
    • 30 | {% set tagurl = "/tags/" + tag | slugify %} 31 | {{ tag }} 32 |
      • 33 | {% endfor %} 34 |
    35 | {% endif %} 36 |
    37 |
    38 |
    • 39 | {% endfor %} 40 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "11ty-starter", 3 | "version": "0.0.1", 4 | "description": "eleventy starter", 5 | "scripts": { 6 | "clean": "rm -rf _site", 7 | "hasher": "node csshash.js", 8 | "cssmin": "node cssmin.js", 9 | "build": "npm-run-all clean hasher -p build:eleventy build:sass build:rollup", 10 | "build:github": "npm-run-all clean hasher -p build:eleventy:pathPrefix build:sass build:rollup", 11 | "build:eleventy": "ELEVENTY_ENV=production eleventy", 12 | "build:eleventy:pathPrefix": "ELEVENTY_ENV=production eleventy --pathprefix=11ty-starter", 13 | "build:sass": "sass src/assets/css/index.scss _site/assets/css/index.css && npm run cssmin", 14 | "build:rollup": "NODE_ENV=production rollup -c", 15 | "dev": "npm-run-all clean hasher -p dev:*", 16 | "dev:sass": "sass --watch src/assets/css/index.scss _site/assets/css/index.css", 17 | "dev:eleventy": "ELEVENTY_ENV=development eleventy --serve --port=3000", 18 | "dev:rollup": "rollup -c -w", 19 | "debug": "DEBUG=* eleventy" 20 | }, 21 | "repository": { 22 | "type": "git", 23 | "url": "https://github.com/moody-person/11ty-starter" 24 | }, 25 | "author": { 26 | "name": "Andrey Parfenov", 27 | "email": "asleeppiano@outlook.com", 28 | "url": "https://andreyparfenov.com" 29 | }, 30 | "license": "MIT", 31 | "devDependencies": { 32 | "@11ty/eleventy": "^1.0.0", 33 | "@11ty/eleventy-navigation": "^0.3.2", 34 | "@11ty/eleventy-plugin-rss": "^1.1.1", 35 | "@11ty/eleventy-plugin-syntaxhighlight": "^3.1.0", 36 | "@rollup/plugin-node-resolve": "^13.1.3", 37 | "autoprefixer": "^10.2.5", 38 | "clean-css": "^5.2.2", 39 | "luxon": "^2.3.0", 40 | "markdown-it": "^12.0.4", 41 | "markdown-it-anchor": "^8.4.1", 42 | "markdown-it-container": "^3.0.0", 43 | "nanoid": "^3.1.30", 44 | "npm-run-all": "^4.1.5", 45 | "rollup": "^2.63.0", 46 | "rollup-plugin-terser": "^7.0.2", 47 | "sass": "^1.46.0" 48 | }, 49 | "dependencies": { 50 | "animejs": "^3.2.1" 51 | } 52 | } 53 | -------------------------------------------------------------------------------- /src/_includes/layouts/base.njk: -------------------------------------------------------------------------------- 1 | {% set currentUrl = page.url | replace('/', '') %} 2 | 3 | 4 | 5 | 6 | 7 | 8 | {% if currentUrl %} 9 | {{ title or metadata[locale][currentUrl].title }} 10 | 11 | {% else %} 12 | {{ title or metadata[locale].title }} 13 | 14 | {% endif %} 15 | 16 | {% set appleTouchIcon = "/static/apple-touch-icon.png" | url %} 17 | {% set favicon32 = "/static/favicon-32x32.png" | url %} 18 | {% set favicon16 = "/static/favicon-16x16.png" | url %} 19 | 20 | 21 | 22 | 23 | {% if projEnv.eleventy === "production" %} 24 | {% set link = "/assets/css/" + csshash.indexCSS %} 25 | 26 | 27 | {% else %} 28 | 29 | {% endif %} 30 | 31 | 32 | 33 | 34 | {% include "components/header.njk" %} 35 | 36 |
    37 | {{ content | safe }} 38 |
    39 | 40 | {% include "components/footer.njk" %} 41 | 42 | 43 | 44 | 45 | -------------------------------------------------------------------------------- /src/assets/css/components/link.scss: -------------------------------------------------------------------------------- 1 | .c-simple-link { 2 | color: var(--color-text); 3 | padding: 0.25rem; 4 | border-radius: 0.25rem; 5 | transition: background 0.2s; 6 | 7 | &:hover { 8 | background: var(--color-accent); 9 | } 10 | 11 | &:visited { 12 | color: var(--color-text); 13 | 14 | &:hover { 15 | background: var(--color-accent); 16 | } 17 | } 18 | 19 | &--active { 20 | background: var(--color-accent); 21 | color: var(--color-text); 22 | } 23 | } 24 | 25 | .c-text-link { 26 | transition: color 0.2s; 27 | color: var(--color-accent); 28 | 29 | &:hover { 30 | color: var(--color-extra); 31 | } 32 | 33 | &:visited { 34 | color: var(--color-accent); 35 | 36 | &:hover { 37 | color: var(--color-extra); 38 | } 39 | } 40 | } 41 | 42 | .c-underline-link { 43 | // text-decoration: underline; 44 | color: var(--color-text); 45 | min-height: 24px; 46 | 47 | &:hover { 48 | text-decoration-color: var(--color-extra); 49 | background-color: var(--color-gray-200); 50 | } 51 | 52 | &:visited { 53 | text-decoration: underline; 54 | color: var(--color-text); 55 | 56 | &:hover { 57 | text-decoration-color: var(--color-extra); 58 | background-color: var(--color-gray-200); 59 | } 60 | } 61 | } 62 | 63 | .c-gradient-link { 64 | background: var(--main-gradient); 65 | display: inline-block; 66 | -webkit-background-clip: text; 67 | -webkit-text-fill-color: transparent; 68 | 69 | &:hover { 70 | color: var(--color-main); 71 | display: inline-block; 72 | -webkit-background-clip: unset; 73 | -webkit-text-fill-color: unset; 74 | } 75 | } 76 | 77 | .c-icon-link { 78 | --color: var(--color-text); 79 | --hover-color: var(--color-accent); 80 | 81 | &--hover-accent { 82 | --hover-color: var(--color-accent); 83 | } 84 | &--hover-extra { 85 | --hover-color: var(--color-extra); 86 | } 87 | 88 | svg { 89 | stroke: currentColor; 90 | color: var(--color); 91 | } 92 | 93 | &:hover { 94 | svg { 95 | color: var(--hover-color); 96 | } 97 | } 98 | } 99 | -------------------------------------------------------------------------------- /src/assets/css/base.scss: -------------------------------------------------------------------------------- 1 | @use "mixins"; 2 | 3 | * { 4 | box-sizing: border-box; 5 | } 6 | 7 | html, 8 | body { 9 | margin: 0; 10 | font-family: var(--monospace); 11 | color: var(--color-text); 12 | background-color: var(--color-main); 13 | min-height: 100vh; 14 | line-height: 1.5; 15 | } 16 | 17 | .default-layout { 18 | display: flex; 19 | flex-direction: column; 20 | } 21 | 22 | .visuallyhidden { 23 | border: 0; 24 | clip: rect(0 0 0 0); 25 | height: 1px; 26 | margin: -1px; 27 | overflow: hidden; 28 | padding: 0; 29 | position: absolute; 30 | width: 1px; 31 | } 32 | 33 | h1 { 34 | font-size: var(--text-xxl); 35 | font-weight: 900; 36 | } 37 | h2 { 38 | font-size: var(--text-xl); 39 | font-weight: 800; 40 | } 41 | h3 { 42 | font-size: var(--text-lg); 43 | font-weight: 800; 44 | } 45 | h4 { 46 | font-size: var(--text-base); 47 | font-weight: 800; 48 | } 49 | h5 { 50 | font-size: var(--text-sm); 51 | font-weight: 800; 52 | } 53 | h6 { 54 | font-size: var(--text-xs); 55 | font-weight: 800; 56 | } 57 | 58 | main { 59 | margin: 0 auto; 60 | max-width: var(--max-main-width); 61 | width: 100%; 62 | flex: 1; 63 | display: flex; 64 | flex-direction: column; 65 | } 66 | 67 | button { 68 | background: transparent; 69 | border: none; 70 | cursor: pointer; 71 | } 72 | 73 | ul { 74 | list-style-type: none; 75 | } 76 | 77 | a { 78 | text-decoration: none; 79 | cursor: pointer; 80 | } 81 | 82 | img { 83 | width: 100%; 84 | height: auto; 85 | } 86 | 87 | pre, 88 | code { 89 | font-family: var(--monospace); 90 | line-height: 1.5; 91 | } 92 | pre { 93 | font-size: 14px; 94 | line-height: 1.375; 95 | direction: ltr; 96 | text-align: left; 97 | white-space: pre; 98 | word-spacing: normal; 99 | word-break: normal; 100 | -moz-tab-size: 2; 101 | -o-tab-size: 2; 102 | tab-size: 2; 103 | -webkit-hyphens: none; 104 | -moz-hyphens: none; 105 | -ms-hyphens: none; 106 | hyphens: none; 107 | padding: 1em; 108 | margin: .5em 0; 109 | background-color: #f6f6f6; 110 | } 111 | code { 112 | word-break: break-all; 113 | } 114 | 115 | table { 116 | margin: 1em 0; 117 | } 118 | table td, 119 | table th { 120 | padding-right: 1em; 121 | } 122 | 123 | time { 124 | font-family: var(--monospace); 125 | } 126 | -------------------------------------------------------------------------------- /src/assets/css/utilities/flex.scss: -------------------------------------------------------------------------------- 1 | @use "../variables"; 2 | @use "../functions"; 3 | @use "../mixins"; 4 | 5 | .#{variables.$utility-prefix}flex { 6 | display: flex; 7 | } 8 | .#{variables.$utility-prefix}flex-row { 9 | flex-direction: row; 10 | } 11 | .#{variables.$utility-prefix}flex-column { 12 | flex-direction: column; 13 | } 14 | .#{variables.$utility-prefix}flex-wrap { 15 | flex-wrap: wrap; 16 | } 17 | .#{variables.$utility-prefix}flex-nowrap { 18 | flex-wrap: nowrap; 19 | } 20 | 21 | .#{variables.$utility-prefix}items-start { align-items: flex-start } 22 | .#{variables.$utility-prefix}items-end { align-items: flex-end } 23 | .#{variables.$utility-prefix}items-center { align-items: center } 24 | .#{variables.$utility-prefix}items-baseline { align-items: baseline } 25 | .#{variables.$utility-prefix}items-stretch { align-items: stretch } 26 | 27 | .#{variables.$utility-prefix}self-start { align-self: flex-start } 28 | .#{variables.$utility-prefix}self-end { align-self: flex-end } 29 | .#{variables.$utility-prefix}self-center { align-self: center } 30 | .#{variables.$utility-prefix}self-baseline { align-self: baseline } 31 | .#{variables.$utility-prefix}self-stretch { align-self: stretch } 32 | 33 | .#{variables.$utility-prefix}justify-start { justify-content: flex-start } 34 | .#{variables.$utility-prefix}justify-end { justify-content: flex-end } 35 | .#{variables.$utility-prefix}justify-center { justify-content: center } 36 | .#{variables.$utility-prefix}justify-between { justify-content: space-between } 37 | .#{variables.$utility-prefix}justify-around { justify-content: space-around } 38 | .#{variables.$utility-prefix}justify-evenly { justify-content: space-evenly } 39 | 40 | .#{variables.$utility-prefix}content-start { align-content: flex-start } 41 | .#{variables.$utility-prefix}content-end { align-content: flex-end } 42 | .#{variables.$utility-prefix}content-center { align-content: center } 43 | .#{variables.$utility-prefix}content-between { align-content: space-between } 44 | .#{variables.$utility-prefix}content-around { align-content: space-around } 45 | .#{variables.$utility-prefix}content-stretch { align-content: stretch } 46 | 47 | .#{variables.$utility-prefix}flex-auto { 48 | flex: 1 1 auto; 49 | min-width: 0; /* 1 */ 50 | min-height: 0; /* 1 */ 51 | } 52 | .#{variables.$utility-prefix}flex-none { flex: none } 53 | 54 | .#{variables.$utility-prefix}order-0 { order: 0 } 55 | .#{variables.$utility-prefix}order-1 { order: 1 } 56 | .#{variables.$utility-prefix}order-2 { order: 2 } 57 | .#{variables.$utility-prefix}order-3 { order: 3 } 58 | .#{variables.$utility-prefix}order-last { order: 99999 } 59 | 60 | .#{variables.$utility-prefix}flex-gap { 61 | @each $size-name, $size in variables.$spacing-sizes { 62 | &--#{$size-name} { 63 | gap: #{$size}; 64 | } 65 | } 66 | } 67 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ## 11ty-starter 2 | 3 | This is [eleventy](https://11ty.dev) starter. 4 | 5 | It uses [sass](https://sass-lang.com/), [nunjucks](https://mozilla.github.io/nunjucks/), [rollup](https://rollupjs.org/guide/en/). 6 | 7 | It also has i18n support. 8 | 9 | [DEMO](https://moody-person.github.io/11ty-starter/) on github pages 10 | 11 | ## Installation 12 | 13 | You can init repo with this template. 14 | 15 | [How to create project from a template](https://docs.github.com/en/repositories/creating-and-managing-repositories/creating-a-repository-from-a-template) 16 | 17 | Or just clone this repo, remove .git directory and init with your own git repo. 18 | 19 | ## File stucture 20 | 21 | src/en - put your pages here. For other language create directory named {lang}.json for example and add {lang}.json file. 22 | 23 | ``` json 24 | { 25 | "locale": "lang" 26 | } 27 | ``` 28 | 29 | src/posts/en - your posts 30 | 31 | src/_includes/pages - pages layouts. Create your pages here and export them in src/en directory files. 32 | 33 | src/_inlcudes/layouts - layouts. 34 | 35 | - `base.njk` - main layout with head, header, main, footer sections. 36 | - `post.njk` - layout for post using `base` layout. 37 | - `about.njk` - layout for about page. With markdown content. 38 | - `home.njk` - layout for all other pages. 39 | 40 | src/assets - your css and js 41 | 42 | src/assets/css 43 | 44 | - `components` - sass components. `c` prefix. 45 | - `layouts` - grid, flexbox layouts. `l` prefix. 46 | - `pages` - styles for pages. `p` prefix. 47 | - `utilties` - utility styles like u-mr--8 (margin-right: 0.5rem). `u` prefix. 48 | 49 | - `base.scss` - base html elements styles. 50 | - `functions.scss` - sass functions. 51 | - `mixins.scss` - sass mixins. 52 | - `prism.scss` - [prism](https://prismjs.com/) tomorrow night colorscheme 53 | - `reset.scss` - [reset](https://meyerweb.com/eric/tools/css/reset/) 54 | - `settings.scss` - css variables. 55 | - `variables.scss` - sass variables. 56 | 57 | src/assets/js - example index.js file. You can remove it, if you don't need js. Don't forget to remove `rollup`, `rollup-plugin-terser` and `@rollup/plugin-node-resolve` dependencies. Also remove `