Initial commit

.browserlistrc

@@ -0,0 +1,3 @@
+> 1%
+last 2 versions
+not dead

.editorconfig

@@ -0,0 +1,9 @@
+root = true
+
+[*]
+charset = utf-8
+end_of_line = lf
+indent_style = space
+indent_size = 2
+insert_final_newline = true
+trim_trailing_whitespace = true

.eleventy.js

@@ -0,0 +1,22 @@
+const pluginRss = require("@11ty/eleventy-plugin-rss");
+const { DateTime } = require("luxon");
+
+module.exports = function(config) {
+  config.addPassthroughCopy("static/img");
+  config.addPassthroughCopy("static/js");
+  config.addPassthroughCopy("css/style.css");
+  config.addPlugin(pluginRss);
+
+  config.addFilter('htmlDateString', (dateObj) => {
+    return DateTime.fromJSDate(dateObj, {zone: 'utc'}).toFormat('yyyy-LL-dd');
+  });
+
+  return {
+    passthroughFileCopy: true,
+    dir: {
+      includes: "_includes",
+      data: "_data",
+      output: "_site"
+  }
+  }
+}

.eleventyignore

@@ -0,0 +1,2 @@
+readme.md
+code_of_conduct.md

.eslintrc.js

@@ -0,0 +1,11 @@
+module.exports = {
+    "env": {
+        "browser": true,
+        "commonjs": true,
+        "es6": true
+    },
+    "extends": "eslint:recommended",
+    "rules": {
+      'no-console': 1,
+  },
+};

.gitignore

@@ -0,0 +1,15 @@
+# macOS
+.DS_Store
+
+# Logs
+logs
+*.log
+
+# Dependency directories
+node_modules/
+
+# Build
+_site
+
+# environment variables file
+.env

404.md

@@ -0,0 +1,5 @@
+---
+layout: layouts/base
+permalink: 404.html
+---
+# Computer says no

README.md

@@ -0,0 +1,53 @@
+![Static Site Starter](/docs/github-banner.jpg)
+
+[![Netlify Status](https://api.netlify.com/api/v1/badges/8101fd14-c131-4e52-969a-ccc0ffd038c4/deploy-status)](https://app.netlify.com/sites/suspicious-lamport-275cea/deploys)
+[![Deploy to Netlify](https://www.netlify.com/img/deploy/button.svg)](https://app.netlify.com/start/deploy?repository=https://github.com/dandevri/static-site-starter)
+
+# static-site-starter
+
+Opinionated boilerplate that can be used to start a new static site project. It's built with static site generator [Eleventy (11ty)][11ty] and has a minimal asset pipeline using [PostCSS][postcss]. JavaScript all the way down.
+
+## Features ✨
+
+* Uses [`11ty`][11ty] as a static site generator which compiles [`nunjucks`][nunjucks] templates
+* Compiles SCSS [(`postcss`)][postcss], minifies [(`cssnano`)][cssnano] & prefixes [(`autoprefixer`)][cssnano]
+* Linting with [`Stylelint`][stylelint] and browser scope [`browserslist`][browserslist]
+* Minifies images using [`imagemin`](imagemin) and several [`plugins`][imagemin-plugins]
+* Easily deployed to [`Netlify`][netlify]
+
+
+## Install
+
+Follow these steps to get started:
+
+1. Clone the project
+
+```
+$ git clone https://github.com/dandevri/static-site-starter.git
+```
+
+2. Then do the
+```
+npm run dev
+```
+
+to start the live-reloadzz on a local development server.
+
+## License
+
+[MIT][license] © [Danny de Vries][author]
+
+[11ty]: https://www.11ty.io/]
+[postcss]: https://postcss.org/
+[cssnano]: https://cssnano.co/
+[nunjucks]: https://mozilla.github.io/nunjucks/
+[autoprefixer]: https://github.com/postcss/autoprefixer
+[stylelint]: https://stylelint.io/
+[browserslist]: https://github.com/browserslist/browserslist
+[netlify]: https://www.netlify.com/
+[imagemin]: https://github.com/imagemin/imagemin
+[imagemin-plugins]: https://web.dev/use-imagemin-to-compress-images#plugins
+[author]: https://github.com/dandevri
+[license]: license
+
+[image]: https://images.guide/

_data/metadata.json

@@ -0,0 +1,11 @@
+{
+  "title": "Static Site Starter",
+  "author": "Danny de Vries",
+  "mail": "hi@dandevri.es",
+  "url": "https://example.com",
+  "description": "A boilerplate for building static websites",
+  "theme": "#222",
+  "lang": "en_US",
+  "share": "/static/img/social/",
+  "social": "dandevri"
+}

_includes/components/button.njk

@@ -0,0 +1,10 @@
+{% macro linkInt(link, label) %}
+  <a class="btn" href="{{ link }}">{{ label }}</a>
+{% endmacro %}
+
+{% macro linkExt(link, label) %}
+  <a class="btn" href="{{ link }}" target="_blank" rel="noopener">{{ label }}</a>
+{% endmacro %}
+
+{{ linkInt("https://dandevri.es/", "Internal") }}
+{{ linkExt("https://dandevri.es/", "External") }}

_includes/components/figure.njk

@@ -0,0 +1,8 @@
+{% macro figure(src, alt, caption) %}
+  <figure class="image">
+    <img src="{{ src }}" alt="{{ alt }}">
+    <figcaption>{{ caption }}</figcaption>
+  </figure>
+{% endmacro %}
+
+{{ figure("/static/img/image.jpg", "Image form Unsplash", "Caption of the image") }}

_includes/components/header.njk

@@ -0,0 +1,6 @@
+<header>
+  <div>
+    <h1 class="display">{{ title }}</h1>
+    <h2>Welcome to the world</h2>
+  </div>
+</header>

_includes/components/image-motion.njk

@@ -0,0 +1,12 @@
+{% macro imageMotion(src1, src2, src3, alt) %}
+<div class="image-motion">
+  <picture>
+    <source srcset="{{ src1 }}" media="(prefers-reduced-motion: reduce)">
+    <source srcset="{{ src3 }}" type="video/mp4">
+    <img src="{{ src2 }}" alt="{{ alt }}">
+  </picture>
+  <button class="animate-button">Animate</button>
+</div>
+{% endmacro %}
+
+{{ imageMotion("/static/img/blade-runner.png", "/static/img/blade-runner.gif", "/static/img/blade-runner.mp4", "Blade Runner Blip") }}

_includes/components/image.njk

@@ -0,0 +1,8 @@
+{% macro image(src1, src2, alt) %}
+  <picture>
+    <source srcset="{{ src1 }}" type="image/webp">
+    <img src="{{ src2 }}" alt="{{ alt }}">
+  </picture>
+{% endmacro %}
+
+{{ image("/static/img/image.webp", "/static/img/image.jpg", "Alt of the image") }}

_includes/components/nav.njk

@@ -0,0 +1,9 @@
+<nav>
+  <img src="/static/img/logo.svg">
+  <ul>
+    <li><a href="#">Item-1</a></li>
+    <li><a href="#">Item-1</a></li>
+    <li><a href="#">Item-1</a></li>
+    <li><a href="#">Item-1</a></li>
+  </ul>
+</nav>

_includes/config/favicon.njk

@@ -0,0 +1,12 @@
+<link rel="apple-touch-icon" sizes="180x180" href="/static/img/icons/apple-touch-icon.png">
+<link rel="icon" type="image/png" sizes="32x32" href="/static/img/icons/favicon-32x32.png">
+<link rel="icon" type="image/png" sizes="16x16" href="/static/img/icons/favicon-16x16.png">
+<link rel="manifest" href="/static/img/icons/site.webmanifest">
+<link rel="mask-icon" href="/static/img/icons/safari-pinned-tab.svg" color="#5bbad5">
+<link rel="shortcut icon" href="/static/img/icons/favicon.ico">
+<link rel="icon" type="image/x-icon" href="/static/img/icons/favicon.ico">
+<link rel="icon" type="image/png" href="/static/img/icons/favicon-32x32.png">
+<meta name="msapplication-TileColor" content="{{ metadata.theme }}">
+<meta name="msapplication-config" content="/static/img/icons/browserconfig.xml">
+<meta name="theme-color" content="{{ metadata.theme }}">
+

_includes/config/meta.njk

@@ -0,0 +1,11 @@
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
+<meta http-equiv="X-UA-Compatible" content="IE=edge">
+<meta name="description" content="{{ metadata.description }}">
+<meta name="apple-mobile-web-app-capable" content="yes">
+<meta name="apple-mobile-web-app-status-bar-style" content="black">
+<meta name="msapplication-config" content="browserconfig.xml">
+<link rel="canonical" href="{{ metadata.url }}{{ page.url }}">
+<link rel="shortlink" href="{{ metadata.url }}{{ page.url }}">
+<link rel="dns-prefetch" href="{{ metadata.url }}">
+<link rel="preconnect" href="{{ metadata.url }}">

_includes/config/pre.njk

@@ -0,0 +1,2 @@
+<link rel="preload" type="text/css" href="/css/style.css" as="style">
+<link rel="preload" href="http://fonts.gstatic.com/s/robotoslab/v7/BngMUXZYTXPIvIBgJJSb6ufN5qU.woff2" as="font" type="font/woff2" crossorigin>

_includes/config/social.njk

@@ -0,0 +1,14 @@
+  <meta property="og:locale" content="{{ metadata.lang }}">
+  <meta property="og:site_name" content="{{ metadata.author }}">
+  <meta property="og:title" content="{{ metadata.title }}">
+  <meta property="og:url" content="{{ metadata.url }}">
+  <meta property="og:type" content="website">
+  <meta property="og:description" content="{{ metadata.description }}">
+  <meta property="og:image:url" content="{{ metadata.url }}{{ metadata.share }}share-image.jpg">
+  <meta property="og:image" content="{{ metadata.url }}{{ metadata.share }}share-image.jpg">
+  <meta name="twitter:title" content="{{ metadata.title }}">
+  <meta name="twitter:url" content="{{ metadata.url }}">
+  <meta name="twitter:description" content="{{ metadata.description }}">
+  <meta name="twitter:image" content="{{ metadata.url }}{{ metadata.share }}share-image.jpg">
+  <meta name="twitter:card" content="summary_large_image">
+  <meta name="twitter:site" content="@{{ metadata.social }}">

_includes/layouts/base.njk

@@ -0,0 +1,15 @@
+<!doctype html>
+<html lang="en" dir="ltr">
+  <head>
+    {% include 'config/meta.njk' %}
+    {% include 'config/favicon.njk' %}
+    {% include 'config/social.njk' %}
+    {% include 'config/pre.njk' %}
+    <title>{{ metadata.title }}</title>
+    <link rel="stylesheet" type="text/css" href="/css/style.css">
+    <script src="/static/js/script.js" type="text/javascript" defer></script>
+  </head>
+  <body>
+    {{ content | safe }}
+  </body>
+</html>

_includes/layouts/default.njk

@@ -0,0 +1,7 @@
+---
+layout: layouts/base
+---
+
+<main>
+  {{ content | safe }}
+</main>

blog/first-post.md

@@ -0,0 +1,10 @@
+---
+title: This is my first post.
+description: This is a post on My Blog
+date: 2019-05-31
+tags:
+  - blog
+layout: layouts/default.njk
+---
+
+# {{ title }}

blog/second-post.md

@@ -0,0 +1,10 @@
+---
+title: This is my second post.
+description: This is a post on My Blog
+date: 2019-05-31
+tags:
+  - blog
+layout: layouts/default.njk
+---
+
+# {{ title }}

blog/third-post.md

@@ -0,0 +1,10 @@
+---
+title: This is my third post.
+description: This is a post on My Blog
+date: 2019-05-31
+tags:
+  - blog
+layout: layouts/default.njk
+---
+
+# {{ title }}

code_of_conduct.md

@@ -0,0 +1,76 @@
+# Contributor Covenant Code of Conduct
+
+## Our Pledge
+
+In the interest of fostering an open and welcoming environment, we as
+contributors and maintainers pledge to making participation in our project and
+our community a harassment-free experience for everyone, regardless of age, body
+size, disability, ethnicity, sex characteristics, gender identity and expression,
+level of experience, education, socio-economic status, nationality, personal
+appearance, race, religion, or sexual identity and orientation.
+
+## Our Standards
+
+Examples of behavior that contributes to creating a positive environment
+include:
+
+* Using welcoming and inclusive language
+* Being respectful of differing viewpoints and experiences
+* Gracefully accepting constructive criticism
+* Focusing on what is best for the community
+* Showing empathy towards other community members
+
+Examples of unacceptable behavior by participants include:
+
+* The use of sexualized language or imagery and unwelcome sexual attention or
+ advances
+* Trolling, insulting/derogatory comments, and personal or political attacks
+* Public or private harassment
+* Publishing others' private information, such as a physical or electronic
+ address, without explicit permission
+* Other conduct which could reasonably be considered inappropriate in a
+ professional setting
+
+## Our Responsibilities
+
+Project maintainers are responsible for clarifying the standards of acceptable
+behavior and are expected to take appropriate and fair corrective action in
+response to any instances of unacceptable behavior.
+
+Project maintainers have the right and responsibility to remove, edit, or
+reject comments, commits, code, wiki edits, issues, and other contributions
+that are not aligned to this Code of Conduct, or to ban temporarily or
+permanently any contributor for other behaviors that they deem inappropriate,
+threatening, offensive, or harmful.
+
+## Scope
+
+This Code of Conduct applies both within project spaces and in public spaces
+when an individual is representing the project or its community. Examples of
+representing a project or community include using an official project e-mail
+address, posting via an official social media account, or acting as an appointed
+representative at an online or offline event. Representation of a project may be
+further defined and clarified by project maintainers.
+
+## Enforcement
+
+Instances of abusive, harassing, or otherwise unacceptable behavior may be
+reported by contacting the project team at hi@dandevri.es. All
+complaints will be reviewed and investigated and will result in a response that
+is deemed necessary and appropriate to the circumstances. The project team is
+obligated to maintain confidentiality with regard to the reporter of an incident.
+Further details of specific enforcement policies may be posted separately.
+
+Project maintainers who do not follow or enforce the Code of Conduct in good
+faith may face temporary or permanent repercussions as determined by other
+members of the project's leadership.
+
+## Attribution
+
+This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4,
+available at https://www.contributor-covenant.org/version/1/4/code-of-conduct.html
+
+[homepage]: https://www.contributor-covenant.org
+
+For answers to common questions about this code of conduct, see
+https://www.contributor-covenant.org/faq