` all receive top and bottom margins. We nuke the top
97 | // margin for easier control within type scales as it avoids margin collapsing.
98 |
99 | // Abbreviations and acronyms
100 | abbr[title],
101 | // Add data-* attribute to help out our tooltip plugin, per https://github.com/twbs/bootstrap/issues/5257
102 | abbr[data-original-title] {
103 | cursor: help;
104 | }
105 |
106 | ol,
107 | ul,
108 | dl {
109 | padding: 0;
110 | margin: 0;
111 | list-style-type: none;
112 | }
113 |
114 | //
115 | // Code
116 | //
117 |
118 | pre {
119 | margin: 0;
120 | }
121 |
122 | //
123 | // Images
124 | //
125 |
126 | img {
127 | // By default, `![]()
`s are `inline-block`. This assumes that, and vertically
128 | // centers them. This won't apply should you reset them to `block` level.
129 | vertical-align: middle;
130 | // Note: `![]()
`s are deliberately not made responsive by default.
131 | // For the rationale behind this, see the comments on the `.img-fluid` class.
132 | }
133 |
134 | // iOS "clickable elements" fix for role="button"
135 | //
136 | // Fixes "clickability" issue (and more generally, the firing of events such as focus as well)
137 | // for traditionally non-focusable elements with role="button"
138 | // see https://developer.mozilla.org/en-US/docs/Web/Events/click#Safari_Mobile
139 |
140 | [role='button'] {
141 | cursor: pointer;
142 | }
143 |
144 | // Avoid 300ms click delay on touch devices that support the `touch-action` CSS property.
145 | //
146 | // In particular, unlike most other browsers, IE11+Edge on Windows 10 on touch devices and IE Mobile 10-11
147 | // DON'T remove the click delay when `` is present.
148 | // However, they DO support removing the click delay via `touch-action: manipulation`.
149 | // See:
150 | // * http://v4-alpha.getbootstrap.com/content/reboot/#click-delay-optimization-for-touch
151 | // * http://caniuse.com/#feat=css-touch-action
152 | // * http://patrickhlauke.github.io/touch/tests/results/#suppressing-300ms-delay
153 |
154 | a,
155 | area,
156 | button,
157 | [role='button'],
158 | input,
159 | label,
160 | select,
161 | summary,
162 | textarea {
163 | touch-action: manipulation;
164 | }
165 |
166 | //
167 | // Tables
168 | //
169 |
170 | th {
171 | // Centered by default, but left-align-ed to match the `td`s below.
172 | text-align: left;
173 | }
174 |
175 | //
176 | // Forms
177 | //
178 |
179 | label {
180 | // Allow labels to use `margin` for spacing.
181 | display: inline-block;
182 | margin: 0;
183 | }
184 |
185 | input,
186 | button,
187 | select,
188 | textarea {
189 | // Remove all `margin`s so our classes don't have to do it themselves.
190 | margin: 0;
191 | // Normalize includes `font: inherit;`, so `font-family`. `font-size`, etc are
192 | // properly inherited. However, `line-height` isn't addressed there. Using this
193 | // ensures we don't need to unnecessarily redeclare the global font stack.
194 | line-height: inherit;
195 | // iOS adds rounded borders by default
196 | border-radius: 0;
197 | }
198 |
199 | textarea {
200 | // Textareas should really only resize vertically so they don't break their (horizontal) containers.
201 | resize: vertical;
202 | }
203 |
204 | fieldset {
205 | // Chrome and Firefox set a `min-width: min-content;` on fieldsets,
206 | // so we reset that to ensure it behaves more like a standard block element.
207 | // See https://github.com/twbs/bootstrap/issues/12359.
208 | min-width: 0;
209 | padding: 0;
210 | margin: 0;
211 | border: 0;
212 | }
213 |
214 | legend {
215 | // Reset the entire legend element to match the `fieldset`
216 | display: block;
217 | width: 100%;
218 | padding: 0;
219 | margin-bottom: 0.5rem;
220 | font-size: 1.5rem;
221 | line-height: inherit;
222 | border: 0;
223 | }
224 |
225 | input[type='search'] {
226 | // Undo Normalize's default here to match our global overrides.
227 | box-sizing: inherit;
228 | // This overrides the extra rounded corners on search inputs in iOS so that our
229 | // `.form-control` class can properly style them. Note that this cannot simply
230 | // be added to `.form-control` as it's not specific enough. For details, see
231 | // https://github.com/twbs/bootstrap/issues/11586.
232 | -webkit-appearance: none;
233 | }
234 |
--------------------------------------------------------------------------------
/src/assets/styles/base/_screenreader.scss:
--------------------------------------------------------------------------------
1 | //
2 | // Screenreaders
3 | //
4 |
5 | .sr-only {
6 | @include sr-only();
7 | }
8 |
9 | .sr-only-focusable {
10 | @include sr-only-focusable();
11 | }
12 |
13 | .sr-skip-link {
14 | @include sr-only();
15 | @include sr-only-focusable();
16 | font-family: $font-family-sans-serif;
17 |
18 | &:focus {
19 | position: absolute;
20 | z-index: 9999;
21 | left: 50%;
22 | top: 0;
23 | font-size: 1rem;
24 | transform: translateX(-50%);
25 | background-color: $gray-darkest;
26 | color: #fff;
27 | border-radius: 0 0 0.5rem 0.5rem;
28 | padding: 1rem 1.5rem;
29 | outline: 0;
30 | white-space: nowrap;
31 | }
32 | }
33 |
--------------------------------------------------------------------------------
/src/assets/styles/base/_typography.scss:
--------------------------------------------------------------------------------
1 | h1,
2 | h2,
3 | h3,
4 | h4,
5 | h5,
6 | h6 {
7 | margin: 0;
8 | line-height: 1.3;
9 | }
10 |
11 | h1 {
12 | font-size: 2.5rem;
13 | font-weight: 400;
14 | text-rendering: optimizeLegibility;
15 | }
16 |
17 | h2 {
18 | font-size: 2.125rem;
19 | font-weight: 700;
20 | }
21 |
22 | p {
23 | margin: 0;
24 | }
25 |
26 | .lead {
27 | font-size: 1.5rem;
28 | font-weight: 300;
29 | line-height: 1.4;
30 |
31 | @include mq(md) {
32 | font-size: 2rem;
33 | }
34 | }
35 |
--------------------------------------------------------------------------------
/src/assets/styles/base/_utilities.scss:
--------------------------------------------------------------------------------
1 | // UTILITY CLASSES
2 | // All of these have !important because they should always overrule any other style
3 |
4 | // Layout Utils
5 |
6 | .u-mt0 {
7 | margin-top: 0 !important;
8 | }
9 | .u-mt1 {
10 | margin-top: 1rem !important;
11 | }
12 | .u-mt2 {
13 | margin-top: 2rem !important;
14 | }
15 | .u-mt3 {
16 | margin-top: 3rem !important;
17 | }
18 | .u-mt4 {
19 | margin-top: 4rem !important;
20 | }
21 |
22 | .u-mb0 {
23 | margin-bottom: 0 !important;
24 | }
25 | .u-mb1 {
26 | margin-bottom: 1rem !important;
27 | }
28 | .u-mb2 {
29 | margin-bottom: 2rem !important;
30 | }
31 | .u-mb3 {
32 | margin-bottom: 3rem !important;
33 | }
34 | .u-mb4 {
35 | margin-bottom: 4rem !important;
36 | }
37 |
38 | // Text Utilities
39 |
40 | .u-align-left {
41 | text-align: left !important;
42 | }
43 | .u-align-center {
44 | text-align: center !important;
45 | }
46 | .u-align-right {
47 | text-align: right !important;
48 | }
49 |
50 | // Display Utils
51 |
52 | .u-mobile-only {
53 | @include mq(md) {
54 | display: none !important;
55 | }
56 | }
57 | .u-tablet-only {
58 | @include mq(lg) {
59 | display: none !important;
60 | }
61 | }
62 | .u-desktop-only {
63 | @include mq-down(lg) {
64 | display: none !important;
65 | }
66 | }
67 | .u-print-only {
68 | @media not print {
69 | display: none !important;
70 | }
71 | }
72 |
--------------------------------------------------------------------------------
/src/assets/styles/components/_footer.scss:
--------------------------------------------------------------------------------
1 | .footer {
2 | font-size: 0.875rem;
3 | padding: $spacing-y 0;
4 | background-color: $gray-lightest;
5 |
6 | &__inner {
7 | display: flex;
8 | justify-content: space-between;
9 | align-items: center;
10 | }
11 | }
12 |
--------------------------------------------------------------------------------
/src/assets/styles/components/_header.scss:
--------------------------------------------------------------------------------
1 | .header {
2 | padding: $spacing-y 0;
3 |
4 | &__inner {
5 | display: flex;
6 | justify-content: space-between;
7 | align-items: center;
8 | }
9 | }
10 |
--------------------------------------------------------------------------------
/src/assets/styles/components/_icon.scss:
--------------------------------------------------------------------------------
1 | .icon {
2 | display: inline-block;
3 | font-size: 1.5em;
4 | height: 1em;
5 | width: 1em;
6 | vertical-align: middle;
7 | fill: currentColor;
8 | pointer-events: none;
9 | }
10 |
11 | // ==========================
12 | // Animated Pure CSS Menu Burger Icon
13 | // ==========================
14 |
15 | .menuicon {
16 | display: block;
17 | width: 18px;
18 | height: 16px;
19 | position: relative;
20 | transform: rotate(0deg);
21 | transition: transform 0.3s $animation-curve-default;
22 | cursor: pointer;
23 | margin: 0 auto;
24 |
25 | &__bar {
26 | display: block;
27 | position: absolute;
28 | left: 0;
29 | right: 0;
30 | height: 2px;
31 | width: 100%;
32 | background-color: currentColor;
33 | transform: rotate(0deg);
34 | transition: transform 0.25s ease-in-out;
35 |
36 | &:nth-child(1) {
37 | top: 0px;
38 | }
39 | &:nth-child(2),
40 | &:nth-child(3) {
41 | top: 50%;
42 | }
43 | &:nth-child(4) {
44 | top: 100%;
45 | }
46 | }
47 |
48 | // Active State: Transform to "X"
49 | .is-open & {
50 | top: 2px;
51 | transform: rotate(-180deg);
52 |
53 | .menuicon__bar {
54 | &:nth-child(1),
55 | &:nth-child(4) {
56 | width: 0;
57 | top: 50%;
58 | left: 50%;
59 | }
60 | &:nth-child(2) {
61 | transform: rotate(45deg);
62 | }
63 | &:nth-child(3) {
64 | transform: rotate(-45deg);
65 | }
66 | }
67 | }
68 | }
69 |
--------------------------------------------------------------------------------
/src/assets/styles/components/_nav.scss:
--------------------------------------------------------------------------------
1 | .nav {
2 | &__menu {
3 | display: none;
4 | position: absolute;
5 | left: 0;
6 | right: 0;
7 | background-color: #fff;
8 | }
9 | &__link {
10 | display: block;
11 | padding: 0.5em 1em;
12 | }
13 | &__toggle {
14 | @include button-reset;
15 | }
16 |
17 | @include mq-down(lg) {
18 | &.is-open &__menu {
19 | display: block;
20 | }
21 | }
22 |
23 | @include mq(lg) {
24 | &__toggle {
25 | display: none;
26 | }
27 | &__menu {
28 | display: flex;
29 | position: static;
30 | background-color: transparent;
31 | }
32 | }
33 | }
34 |
--------------------------------------------------------------------------------
/src/assets/styles/main.scss:
--------------------------------------------------------------------------------
1 | // ---------------------------------
2 | // MASTER STYLESHEET INDEX
3 | // ---------------------------------
4 |
5 | //--------------------
6 | // UTILITIES
7 | //--------------------
8 |
9 | @import 'utils/functions';
10 | @import 'utils/variables';
11 | @import 'utils/mixins';
12 |
13 | //--------------------
14 | // BASE MODULES
15 | // partials with global scope
16 | //--------------------
17 |
18 | @import 'base/fonts';
19 | @import 'base/normalize';
20 | @import 'base/reboot';
21 | @import 'base/layout';
22 | @import 'base/typography';
23 | @import 'base/focus';
24 | @import 'base/utilities';
25 | @import 'base/screenreader';
26 | @import 'base/animation';
27 |
28 | //--------------------
29 | // COMPONENTS
30 | // partials with local scope to a component
31 | //--------------------
32 |
33 | @import 'components/header';
34 | @import 'components/nav';
35 | @import 'components/footer';
36 | @import 'components/icon';
37 |
--------------------------------------------------------------------------------
/src/assets/styles/utils/_functions.scss:
--------------------------------------------------------------------------------
1 | //--------------------
2 | // SCSS CUSTOM FUNCTIONS
3 | //--------------------
4 |
5 | @function breakpoint-min($name, $breakpoints: $grid-breakpoints) {
6 | $min: map-get($breakpoints, $name);
7 | @return if($min != 0, $min, null);
8 | }
9 |
10 | // z-index layering
11 | @function z($layer) {
12 | @if map-has-key($z-layers, $layer) == false {
13 | @warn "No layer found for `#{$layer}` in $z-layers map. Property omitted.";
14 | }
15 |
16 | @return map-get($z-layers, $layer);
17 | }
18 |
--------------------------------------------------------------------------------
/src/assets/styles/utils/_mixins.scss:
--------------------------------------------------------------------------------
1 | //--------------------
2 | // SCSS MIXINS
3 | //--------------------
4 |
5 | @mixin mq($name) {
6 | $min: breakpoint-min($name, $breakpoints);
7 | @if $min {
8 | @media (min-width: $min) {
9 | @content;
10 | }
11 | } @else {
12 | @content;
13 | }
14 | }
15 |
16 | @mixin mq-down($name) {
17 | $min: breakpoint-min($name, $breakpoints);
18 | @if $min {
19 | @media (max-width: ($min - 1px)) {
20 | @content;
21 | }
22 | } @else {
23 | @content;
24 | }
25 | }
26 |
27 | @mixin hover-focus {
28 | &:hover,
29 | &:focus {
30 | @content;
31 | }
32 | }
33 |
34 | @mixin sr-only {
35 | position: absolute;
36 | width: 1px;
37 | height: 1px;
38 | padding: 0;
39 | overflow: hidden;
40 | clip: rect(0, 0, 0, 0);
41 | white-space: nowrap;
42 | border: 0;
43 | }
44 |
45 | @mixin sr-only-focusable {
46 | &:active,
47 | &:focus {
48 | position: static;
49 | width: auto;
50 | height: auto;
51 | overflow: visible;
52 | clip: auto;
53 | white-space: normal;
54 | }
55 | }
56 |
57 | @mixin hyphenate() {
58 | word-wrap: break-word;
59 | overflow-wrap: break-word;
60 | hyphens: auto;
61 | }
62 |
63 | @mixin coverall() {
64 | position: absolute;
65 | top: 0;
66 | left: 0;
67 | bottom: 0;
68 | right: 0;
69 | }
70 |
71 | @mixin scrollable() {
72 | overflow-y: auto;
73 | -webkit-overflow-scrolling: touch;
74 | }
75 |
76 | @mixin button-reset() {
77 | border: 0;
78 | padding: 0;
79 | background-color: transparent;
80 | -webkit-appearance: none;
81 | }
82 |
--------------------------------------------------------------------------------
/src/assets/styles/utils/_variables.scss:
--------------------------------------------------------------------------------
1 | //--------------------
2 | // SCSS VARIABLES
3 | //--------------------
4 |
5 | // Grid breakpoints
6 | //
7 | // Define the minimum and maximum dimensions at which your layout will change,
8 | // adapting to different screen sizes, for use in media queries.
9 |
10 | $breakpoints: (
11 | md: 670px,
12 | lg: 940px,
13 | xl: 1260px
14 | );
15 |
16 | $container-max-width: 1200px;
17 |
18 | // Z-Index Stack
19 | //
20 | // Control the order of layers in the application
21 | $z-layers: (
22 | 'modal': 999,
23 | 'nav': 100,
24 | 'content-overlay': 30
25 | );
26 |
27 | // Colors
28 | //
29 | // Grayscale.
30 |
31 | $gray-darkest: #373a3c;
32 | $gray-dark: #55595c;
33 | $gray: #818a91;
34 | $gray-light: #eceeef;
35 | $gray-lightest: #f7f7f9;
36 |
37 | // Brand Colors
38 |
39 | $brand-red: #fc6767;
40 |
41 | // Color Mappings
42 |
43 | $bg-color: #fff;
44 | $text-color: $gray-darkest;
45 | $brand-color-primary: $brand-red;
46 | $brand-color-primary-offset: darken($brand-red, 6%);
47 |
48 | // Typography
49 | //
50 | // Font, line-height, and color for body text, headings, and more.
51 |
52 | $font-family-sans-serif: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto',
53 | 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
54 | sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
55 | $font-family-serif: 'Times New Roman', Georgia, Times, serif;
56 | $font-family-monospace: Menlo, Monaco, Consolas, 'Andale Mono', 'Courier New',
57 | monospace;
58 | $font-family-base: $font-family-sans-serif;
59 |
60 | $font-size-root: 100%;
61 | $font-size-base: 1rem;
62 | $line-height: 1.625;
63 |
64 | // Animation
65 | //
66 | // Default easing curves, Transitions, etc
67 |
68 | $animation-curve-fast-out-slow-in: cubic-bezier(0.4, 0, 0.2, 1);
69 | $animation-curve-linear-out-slow-in: cubic-bezier(0, 0, 0.2, 1);
70 | $animation-curve-fast-out-linear-in: cubic-bezier(0.4, 0, 1, 1);
71 | $animation-curve-default: $animation-curve-fast-out-slow-in;
72 |
73 | // Misc Shared
74 | //
75 | // common shared styles
76 |
77 | $spacing-x: 2rem;
78 | $spacing-y: 2rem;
79 |
80 | $box-shadow: 0 2px 16px rgba(0, 0, 0, 0.15);
81 | $box-shadow-elevated: 0 6px 12px 0 rgba(0, 0, 0, 0.1);
82 |
83 | $border-radius: 0.25rem;
84 |
--------------------------------------------------------------------------------
/src/build.njk:
--------------------------------------------------------------------------------
1 | ---
2 | permalink: build.txt
3 | eleventyExcludeFromCollections: true
4 | ---
5 | LAST BUILD: {{ build.timestamp | dateToISO }}
6 | ENV: {{ build.env}}
7 |
--------------------------------------------------------------------------------
/src/data/build.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | env: process.env.ELEVENTY_ENV,
3 | timestamp: new Date()
4 | }
5 |
--------------------------------------------------------------------------------
/src/data/meta.json:
--------------------------------------------------------------------------------
1 | {
2 | "title": "Eleventastic",
3 | "description": "An Eleventy Starter Kit",
4 | "url": "https://eleventastic.netlify.app",
5 | "lang": "en",
6 | "locale": "en_us"
7 | }
--------------------------------------------------------------------------------
/src/feed.njk:
--------------------------------------------------------------------------------
1 | ---
2 | permalink: feed.xml
3 | eleventyExcludeFromCollections: true
4 | ---
5 |
6 |
7 | {{ meta.title }}
8 | {{ meta.description }}
9 |
10 |
11 |
12 | {{ meta.title }}
13 |
14 | {% if collections.posts %}
15 | {{ collections.posts | rssLastUpdatedDate }}
16 | {% endif %}
17 | {{ meta.url }}/
18 | {%- for post in collections.posts | reverse -%}
19 | {% set absolutePostUrl %}{{ post.url | url | absoluteUrl(meta.url) }}{% endset %}
20 |
21 | {{ post.data.title }}
22 |
23 | {{ post.date | rssDate }}
24 | {{ absolutePostUrl }}
25 |
29 | {%- endfor -%}
30 |
--------------------------------------------------------------------------------
/src/includes/footer.njk:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/includes/header.njk:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | 🎩 Eleventastic
5 |
6 |
7 | {% include "navigation.njk" %}
8 |
9 |
10 |
--------------------------------------------------------------------------------
/src/includes/meta.njk:
--------------------------------------------------------------------------------
1 | {%- set absolutePageUrl -%}{{ page.url | url | absoluteUrl(meta.url) }}{%- endset -%}
2 |
3 | {# General #}
4 |
5 |
6 |
7 | {# Open Graph #}
8 |
9 |
10 |
11 |
12 |
13 |
14 | {%- if image -%}
15 |
16 | {%- endif -%}
17 |
18 | {# Favicon #}
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 | {# RSS Feed #}
27 |
--------------------------------------------------------------------------------
/src/includes/navigation.njk:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/index.njk:
--------------------------------------------------------------------------------
1 | ---
2 | layout: base
3 | eleventyNavigation:
4 | key: Home
5 | ---
6 |
7 |
8 | A blank 11ty project.
9 |
--------------------------------------------------------------------------------
/src/layouts/base.njk:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | {{ meta.title }}
7 |
8 |
9 | {% include "meta.njk" %}
10 |
11 |
12 | {% iconsprite %}
13 | skip to main content
14 |
15 |
16 | {% include "header.njk" %}
17 |
18 | {{ content | safe }}
19 |
20 | {% include "footer.njk" %}
21 |
22 |
23 |
24 |
29 |
30 |
--------------------------------------------------------------------------------
/src/layouts/post.njk:
--------------------------------------------------------------------------------
1 | ---
2 | layout: base
3 | ---
4 |
5 |
--------------------------------------------------------------------------------
/src/pages/about.njk:
--------------------------------------------------------------------------------
1 | ---
2 | layout: base
3 | permalink: /about/
4 | eleventyNavigation:
5 | key: About
6 | ---
7 |
8 |
9 | About
10 |
--------------------------------------------------------------------------------
/src/pages/offline.njk:
--------------------------------------------------------------------------------
1 | ---
2 | layout: base
3 | permalink: /offline/
4 | eleventyExcludeFromCollections: true
5 | ---
6 |
7 |
8 | Offline
9 | You are currently offline.
10 |
--------------------------------------------------------------------------------
/src/posts/2020-04-12-sample-post.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: An example post.
3 | ---
4 |
5 | Lorem Ipsum Dolor.
--------------------------------------------------------------------------------
/src/posts/posts.json:
--------------------------------------------------------------------------------
1 | {
2 | "tags": "posts",
3 | "layout": "post"
4 | }
--------------------------------------------------------------------------------
/src/robots.njk:
--------------------------------------------------------------------------------
1 | ---
2 | permalink: robots.txt
3 | eleventyExcludeFromCollections: true
4 | ---
5 | # www.robotstxt.org
6 |
7 | User-agent: *
8 | Disallow: /build.txt
9 |
10 | Sitemap: {{ meta.url }}/sitemap.xml
--------------------------------------------------------------------------------
/src/serviceworker.njk:
--------------------------------------------------------------------------------
1 | ---
2 | permalink: /serviceworker.js
3 | eleventyExcludeFromCollections: true
4 | ---
5 |
6 | const CACHE_NAME = 'cache-{{ build.timestamp|dateToISO }}'
7 | const OFFLINE_PAGE_URL = '/offline/'
8 | const PRECACHE_RESOURCES = []
9 | const IGNORED_HOSTS = ['localhost']
10 |
11 | // On Install
12 | self.addEventListener('install', (event) => {
13 | event.waitUntil(
14 | (async () => {
15 | const cache = await caches.open(CACHE_NAME)
16 |
17 | // add all resources we want to precache first
18 | if (PRECACHE_RESOURCES.length) {
19 | cache.addAll(PRECACHE_RESOURCES)
20 | }
21 |
22 | // then add the offline page.
23 | // Setting {cache: 'reload'} in the new request will ensure that the
24 | // response isn't fulfilled from the HTTP cache; i.e., it will be from
25 | // the network.
26 | await cache.add(new Request(OFFLINE_PAGE_URL, { cache: 'reload' }))
27 | })()
28 | )
29 | // Force the waiting service worker to become the active service worker.
30 | self.skipWaiting()
31 | })
32 |
33 | // On Activation
34 | self.addEventListener('activate', (event) => {
35 | event.waitUntil(
36 | (async () => {
37 | // Enable navigation preload if it's supported.
38 | // See https://developers.google.com/web/updates/2017/02/navigation-preload
39 | if ('navigationPreload' in self.registration) {
40 | await self.registration.navigationPreload.enable()
41 | }
42 |
43 | // clear out any old caches that might still be around
44 | const cacheNames = await caches.keys()
45 | await Promise.all(
46 | cacheNames.map((cacheName) => {
47 | if (cacheName !== CACHE_NAME) {
48 | return caches.delete(cacheName)
49 | }
50 | })
51 | )
52 | })()
53 | )
54 |
55 | // Tell the active service worker to take control of the page immediately.
56 | self.clients.claim()
57 | })
58 |
59 | // On Request
60 | self.addEventListener('fetch', (event) => {
61 | const { hostname } = new URL(event.request.url)
62 | if (IGNORED_HOSTS.indexOf(hostname) >= 0) {
63 | return
64 | }
65 |
66 | // For navigation requests (GET to a new location)
67 | if (event.request.mode === 'navigate') {
68 | event.respondWith(
69 | (async () => {
70 | try {
71 | // First, try to use the navigation preload response if it's supported.
72 | const preloadResponse = await event.preloadResponse
73 | if (preloadResponse) {
74 | return preloadResponse
75 | }
76 | // Then try the network.
77 | const networkResponse = await fetch(event.request)
78 | return networkResponse
79 | } catch (error) {
80 | // catch is only triggered if an exception is thrown, which is likely
81 | // due to a network error.
82 | // If fetch() returns a valid HTTP response with a response code in
83 | // the 4xx or 5xx range, the catch() will NOT be called.
84 | console.log(
85 | 'Fetch failed; returning offline page instead.',
86 | error
87 | )
88 |
89 | const cache = await caches.open(CACHE_NAME)
90 | const cachedResponse = await cache.match(OFFLINE_PAGE_URL)
91 | return cachedResponse
92 | }
93 | })()
94 | )
95 | }
96 | })
97 |
--------------------------------------------------------------------------------
/src/site.webmanifest:
--------------------------------------------------------------------------------
1 | {
2 | "lang": "en",
3 | "dir": "ltr",
4 | "name": "Eleventastic",
5 | "short_name": "11tstc",
6 | "icons": [
7 | {
8 | "src": "/assets/images/favicon/android-chrome-192x192.png",
9 | "sizes": "192x192",
10 | "type": "image/png"
11 | },
12 | {
13 | "src": "/assets/images/favicon/android-chrome-384x384.png",
14 | "sizes": "384x384",
15 | "type": "image/png"
16 | }
17 | ],
18 | "theme_color": "#1a1a1a",
19 | "background_color": "#1a1a1a",
20 | "start_url": "/index.html",
21 | "display": "standalone",
22 | "orientation": "natural"
23 | }
24 |
--------------------------------------------------------------------------------
/src/sitemap.njk:
--------------------------------------------------------------------------------
1 | ---
2 | permalink: /sitemap.xml
3 | eleventyExcludeFromCollections: true
4 | ---
5 |
6 |
7 | {%- for item in collections.all -%}
8 | {%- if not item.data.excludeFromSitemap and item.url -%}
9 |
10 | {{ item.url | url | absoluteUrl(meta.url) }}
11 | {{ item.date | dateToFormat('yyyy-MM-dd') }}
12 |
13 | {%- endif -%}
14 | {%- endfor -%}
15 |
--------------------------------------------------------------------------------
/utils/filters.js:
--------------------------------------------------------------------------------
1 | const { DateTime } = require('luxon')
2 |
3 | module.exports = {
4 | dateToFormat: function (date, format) {
5 | return DateTime.fromJSDate(date, { zone: 'utc' }).toFormat(
6 | String(format)
7 | )
8 | },
9 |
10 | dateToISO: function (date) {
11 | return DateTime.fromJSDate(date, { zone: 'utc' }).toISO({
12 | includeOffset: false,
13 | suppressMilliseconds: true
14 | })
15 | },
16 |
17 | obfuscate: function (str) {
18 | const chars = []
19 | for (var i = str.length - 1; i >= 0; i--) {
20 | chars.unshift(['&#', str[i].charCodeAt(), ';'].join(''))
21 | }
22 | return chars.join('')
23 | }
24 | }
25 |
--------------------------------------------------------------------------------
/utils/shortcodes.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | icon: function (name) {
3 | return ``
6 | }
7 | }
8 |
--------------------------------------------------------------------------------
/utils/transforms.js:
--------------------------------------------------------------------------------
1 | const htmlmin = require('html-minifier')
2 | const critical = require('critical')
3 | const buildDir = 'dist'
4 |
5 | const shouldTransformHTML = (outputPath) =>
6 | outputPath &&
7 | outputPath.endsWith('.html') &&
8 | process.env.ELEVENTY_ENV === 'production'
9 |
10 | const isHomePage = (outputPath) => outputPath === `${buildDir}/index.html`
11 |
12 | process.setMaxListeners(Infinity)
13 | module.exports = {
14 | htmlmin: function (content, outputPath) {
15 | if (shouldTransformHTML(outputPath)) {
16 | return htmlmin.minify(content, {
17 | useShortDoctype: true,
18 | removeComments: true,
19 | collapseWhitespace: true
20 | })
21 | }
22 | return content
23 | },
24 |
25 | critical: async function (content, outputPath) {
26 | if (shouldTransformHTML(outputPath) && isHomePage(outputPath)) {
27 | try {
28 | const config = {
29 | base: `${buildDir}/`,
30 | html: content,
31 | inline: true,
32 | width: 1280,
33 | height: 800
34 | }
35 | const { html } = await critical.generate(config)
36 | return html
37 | } catch (err) {
38 | console.error(err)
39 | }
40 | }
41 | return content
42 | }
43 | }
44 |
--------------------------------------------------------------------------------
3 |
10 |
4 | 🎩 Eleventastic
5 |
6 |
7 | {% include "navigation.njk" %}
8 |
9 | A blank 11ty project.
9 |About
10 |Offline
9 |You are currently offline.
10 |