Browse Source

feat(help): multipage help docs

partial reversion of 5a8dec0

closes #61
Josh Habdas 11 months ago
parent
commit
0446f50341
Signed by: Josh Habdas <jhabdas@protonmail.com> GPG Key ID: B148B31154C75A74
87 changed files with 4047 additions and 732 deletions
  1. 0
    618
      archetypes/help.md
  2. 43
    1
      archetypes/post.md
  3. 4
    9
      bin/help
  4. 15
    9
      bin/install
  5. 5
    9
      bin/upgrade
  6. 5
    0
      docs/.gitignore
  7. 7
    0
      docs/archetypes/feature.md
  8. 9
    0
      docs/archetypes/shortcode.md
  9. 79
    0
      docs/archetypes/validate.md
  10. 65
    0
      docs/config.toml
  11. 114
    0
      docs/content/_index.md
  12. 31
    0
      docs/content/feature/air-gapping.md
  13. 101
    0
      docs/content/feature/code-highlighter.md
  14. 78
    0
      docs/content/feature/custom-layouts.md
  15. 32
    0
      docs/content/feature/custom-styles.md
  16. 80
    0
      docs/content/feature/display-variants.md
  17. 31
    0
      docs/content/feature/error-page.md
  18. 45
    0
      docs/content/feature/fuzzy-search.md
  19. 52
    0
      docs/content/feature/index-blocking.md
  20. 22
    0
      docs/content/feature/keywords-meta.md
  21. 31
    0
      docs/content/feature/last-modified.md
  22. 46
    0
      docs/content/feature/lazy-loading.md
  23. 28
    0
      docs/content/feature/link-typing.md
  24. 11
    0
      docs/content/feature/module-system.md
  25. 9
    0
      docs/content/feature/online-help.md
  26. 33
    0
      docs/content/feature/post-bylines.md
  27. 52
    0
      docs/content/feature/post-images.md
  28. 19
    0
      docs/content/feature/quick-installer.md
  29. 24
    0
      docs/content/feature/referrer-policy.md
  30. 24
    0
      docs/content/feature/related-content.md
  31. 38
    0
      docs/content/feature/release-hashes.md
  32. 50
    0
      docs/content/feature/section-menu.md
  33. 51
    0
      docs/content/feature/snippets.md
  34. 52
    0
      docs/content/feature/social-meta.md
  35. 20
    0
      docs/content/feature/structured-data.md
  36. 82
    0
      docs/content/feature/svg-favicon.md
  37. 17
    0
      docs/content/feature/table-of-contents.md
  38. 43
    0
      docs/content/feature/taxonomy-pages.md
  39. 42
    0
      docs/content/feature/telegram-iv.md
  40. 27
    0
      docs/content/feature/trim-color.md
  41. 36
    0
      docs/content/feature/upgrade-script.md
  42. 42
    0
      docs/content/feature/webmaster-tools.md
  43. 10
    0
      docs/content/module/fractal-forest.md
  44. 10
    0
      docs/content/module/hall-of-mirrors.md
  45. 10
    0
      docs/content/module/voyeur.md
  46. 10
    0
      docs/content/search/_index.md
  47. 135
    0
      docs/content/shortcode/alert.md
  48. 76
    0
      docs/content/shortcode/blockquote.md
  49. 64
    0
      docs/content/shortcode/button-group.md
  50. 149
    0
      docs/content/shortcode/button.md
  51. 43
    0
      docs/content/shortcode/card.md
  52. 82
    0
      docs/content/shortcode/external.md
  53. 34
    0
      docs/content/shortcode/figure.md
  54. 69
    0
      docs/content/shortcode/form-group.md
  55. 96
    0
      docs/content/shortcode/form.md
  56. 40
    0
      docs/content/shortcode/help-block.md
  57. 53
    0
      docs/content/shortcode/label.md
  58. 49
    0
      docs/content/shortcode/progress.md
  59. 47
    0
      docs/content/shortcode/text-area.md
  60. 73
    0
      docs/content/shortcode/text-input.md
  61. 31
    0
      docs/content/shortcode/throbber.md
  62. 961
    0
      docs/index.html
  63. 25
    0
      docs/layouts/feature/list.html
  64. 35
    0
      docs/layouts/feature/single.html
  65. 89
    0
      docs/layouts/index.html
  66. 27
    0
      docs/layouts/module/list.html
  67. 36
    0
      docs/layouts/module/single.html
  68. 1
    0
      docs/layouts/partials/category-link.html
  69. 1
    0
      docs/layouts/partials/definition-data.html
  70. 1
    0
      docs/layouts/partials/feature-link.html
  71. 1
    0
      docs/layouts/partials/module-latest.html
  72. 1
    0
      docs/layouts/partials/module-link.html
  73. 1
    0
      docs/layouts/partials/shortcode-link.html
  74. 6
    0
      docs/layouts/partials/shortcode/navmenu.html
  75. 25
    0
      docs/layouts/shortcode/list.html
  76. 49
    0
      docs/layouts/shortcode/single.html
  77. 22
    0
      docs/layouts/shortcodes/include.html
  78. 13
    0
      docs/layouts/shortcodes/navmenu.html
  79. 66
    0
      docs/s3_website.yml
  80. BIN
      docs/static/minimal-mac_1600x1200-fs8.png
  81. BIN
      docs/static/minimal-mac_800x600-fs8.png
  82. 1
    0
      docs/themes/after-dark
  83. 0
    1
      layouts/_default/baseof.html
  84. 0
    10
      layouts/_default/help.html
  85. 1
    1
      layouts/index.html
  86. 0
    65
      layouts/partials/head/validate-maybe.html
  87. 9
    9
      package-lock.json

+ 0
- 618
archetypes/help.md View File

@@ -1,618 +0,0 @@
1
-+++
2
-title = "Help {{ .Site.Data.npm.latest.version }}"
3
-expirydate = {{ .Date }}
4
-noindex = true
5
-toc = true
6
-type = "help"
7
-layout = "help"
8
-integrity = "{{ strings.TrimLeft "sha512-" .Site.Data.npm.latest.dist.integrity }}"
9
-+++
10
-
11
-{{< hackcss-form name="validate" action="/help/" >}}
12
-  {{< hackcss-formgroup name="integrity" >}}
13
-    {{< hackcss-label for="digest" >}}
14
-      <abbr title="Secure Hash Algorithm">SHA-512</abbr> Digest:
15
-    {{< /hackcss-label >}}
16
-    {{< hackcss-textinput
17
-        required="true"
18
-        autofocus="true"
19
-        autocomplete="off"
20
-        type="text" id="digest" name="digest"
21
-        pattern="^(?:[A-Za-z0-9+/]{4})*(?:[A-Za-z0-9+/]{2}==|[A-Za-z0-9+/]{3}=)?$" >}}
22
-    {{< hackcss-helpblock >}}
23
-      Submit with digest to validate installation.
24
-      <noscript>JavaScript must be enabled for proper validation.</noscript>
25
-    {{< /hackcss-helpblock >}}
26
-  {{< /hackcss-formgroup >}}
27
-{{< /hackcss-form >}}
28
-
29
-<!--more-->
30
-
31
-Welcome to the Online Help for After Dark. Here you will find instructions for configuring your site. Use the `Table of Contents` to jump ahead to any section.
32
-
33
-If you can't find what you're looking for, or just need a helping hand, please join the private telegram chatroom and ask for help. Active chatroom link can be found at the top of the `README` in the latest version of the theme.
34
-
35
-To return to this documentation later run `./themes/after-dark/bin/help`.
36
-
37
-# Module System
38
-
39
-After Dark includes a custom module system and provides a number of prebuilt modules. Modules use Hugo [Theme Components](https://gohugo.io/themes/theme-components/) and are packaged using NPM for convenience. A summary of available modules can be found in the following table.
40
-
41
-Module Name | Version | Description
42
----|---|---
43
-[Fractal Forest] | ![Latest version](https://img.shields.io/badge/dynamic/json.svg?url=https://git.habd.as/comfusion/fractal-forest/raw/branch/master/package.json&label=vers&query=$.version&colorB=000000&style=for-the-badge&longCache=true&maxAge=86400) | Better Portable Graphics (Preinstalled)
44
-[Voyeur] | ![Latest version](https://img.shields.io/badge/dynamic/json.svg?url=https://git.habd.as/comfusion/voyeur/raw/branch/master/package.json&label=vers&query=$.version&colorB=000000&style=for-the-badge&longCache=true&maxAge=86400) | Fathom Analytics
45
-[Hall of Mirrors] | ![Latest version](https://img.shields.io/badge/dynamic/json.svg?url=https://git.habd.as/comfusion/hall-of-mirrors/raw/branch/master/package.json&label=vers&query=$.version&colorB=000000&style=for-the-badge&longCache=true&maxAge=86400) | PhotoSwipe Image Gallery
46
-
47
-Shown here, an animation made possible with the `Fractal Forest` module:
48
-
49
-![BPG animation example](/bpg/cinemagraph-6.bpg)
50
-
51
-Fractal Forest gives After Dark the ability to render images encoded using Fabrice Bellard's [BPG Image format](https://bellard.org/bpg/) and comes preinstalled with After Dark.
52
-
53
-Choose a module above to learn how to install and use them.
54
-
55
-# Section Menu
56
-
57
-After Dark uses Hugo's [Section Menu for Lazy Bloggers](https://gohugo.io/templates/menu-templates/#section-menu-for-lazy-bloggers) to produce global site navigation, if enabled.
58
-
59
-To customize the section menu add and adjust settings in `config.toml` like:
60
-
61
-```toml
62
-[[menu.main]]
63
-  name = "Home"
64
-  weight = 1
65
-  identifier = "home"
66
-  url = "/"
67
-[[menu.main]]
68
-  name = "Posts"
69
-  weight = 2
70
-  identifier = "post"
71
-  url = "/post/"
72
-```
73
-
74
-Alternatively, update the menu from your content front matter like:
75
-
76
-```toml
77
-menu = "main"
78
-weight = 3
79
-```
80
-
81
-Finally, the menu can be disabled from site config anytime:
82
-
83
-```toml
84
-[params]
85
-  show_menu = false
86
-```
87
-
88
-See Hugo's [Menu docs](https://gohugo.io/content-management/menus/) for more information.
89
-
90
-# Code Highlighter
91
-
92
-After Dark automatically highlights code written in more than 160 languages using a customized version of [One Dark Syntax](https://atom.io/themes/one-dark-syntax) with support for terminal browsers. To activate the code highlighter use the [`highlight` shortcode](https://gohugo.io/content-management/syntax-highlighting/#highlight-shortcode) or indicate the [highlighting language](https://gohugo.io/content-management/syntax-highlighting/#list-of-chroma-highlighting-languages) with a fenced code block from within your page content, e.g. ```` ```js ````
93
-
94
-![Syntax Highlighting screenshot](data:image/png;base64,{{ readFile "themes/after-dark/images/docs/feat-syntax-highlighting-fs8.png" | base64Encode }} "Example JavaScript highlighting with line numbers.")
95
-
96
-If you'd prefer a lighter background create a file called `syntax.css` in your site `static/css` folder and drop in the contents of one of the following:
97
-
98
-- [dark.css](https://cdn.jsdelivr.net/npm/atom-one-chroma/dist/dark.css) `#282c34` colored background
99
-- [light.css](https://cdn.jsdelivr.net/npm/atom-one-chroma/dist/light.css) `#fafafa` colored background
100
-
101
-Specifying a site-level `syntax.css` file will override the theme-provided file in its entirety, enabling you to roll your own syntax highlighting theme using the [syntax roller](https://git.habd.as/comfusion/atom-one-chroma) purpose-built for use with After Dark.
102
-
103
-Reference the Hugo [Syntax Highlighting](https://gohugo.io/content-management/syntax-highlighting/) docs for additional information and configuration settings.
104
-
105
-# Fuzzy Search
106
-
107
-If a web crawler can find it, so can you. Search for indexable content site-wide using the inbuilt JavaScript search app built with [Vue](https://vuejs.org/), [Fuse](http://fusejs.io/) and [Mark](https://markjs.io). Searches are fuzzy and typos are forgiven.
108
-
109
-To begin using fuzzy search create a section called `search` using the After Dark search layout like so:
110
-
111
-```
112
-└── content
113
-    └── search
114
-        └── _index.md
115
-```
116
-
117
-With an `_index.md` using the search layout:
118
-
119
-```toml
120
-title = "Search"
121
-layout = "search"
122
-noindex = true
123
-```
124
-
125
-Then tell Hugo to output an `index.json` file along with your site when building by adding the following to your `config.toml`:
126
-
127
-```toml
128
-[outputs]
129
-  home = ["HTML", "RSS", "JSON"]
130
-  section = ["HTML", "RSS", "JSON"]
131
-```
132
-
133
-The above configuration tells Hugo to create an `index.json` file in addition to `index.xml` and `index.html` when building your site. The JSON file will be consumed by the search app when the layout is used and will update automatically whenever your site is built.
134
-
135
-**Tip:** While updating the config consider enabling the After Dark [section menu](#section-menu) to expose search to users.
136
-
137
-Finally, go ahead and serve your site, and navigate to the `/search/` path to begin using fuzzy search. Notice how the page URL updates when queries are entered and search terms highlighted in results. Try refreshing the page then copying the URL and opening it in a new window. Notice how the search query and results are persisted across page loads.
138
-
139
-Fuzzy Search will only return results for [Regular Pages](https://gohugo.io/variables/site/#site-variables-list) and intentionally omits pages tagged for [index blocking](#index-blocking). Anything you see in search results is also indexable to well-behaved web crawlers and anything you can't search is not.
140
-
141
-# Post Images
142
-
143
-Bring your words to life with post images. Post images appear above post content and leverage Hugo's inbuilt [Image Processing](https://gohugo.io/content-management/image-processing/) to enable automatic cropping and image positioning.
144
-
145
-Because post images are often one of the first things users see when visiting your site After Dark takes some extra steps to load them in a performant manner. Techniques used to speed up image loading include [Low-Quality Image Placeholders](https://www.afasterweb.com/2016/08/31/low-quality-blur-in/), [Lazy Loading](#lazy-loading) and responsive images using the `srcset` and `sizes` attributes.
146
-
147
-Using post images requires some opinion with regard to the structure of your content. To create a post with a post image you must:
148
-
149
-1. Create a [Page Bundle](https://gohugo.io/content-management/page-bundles/) grouping your desired image together with your post content.
150
-2. Specify the [Resources Metadata](https://gohugo.io/content-management/page-resources/#resources-metadata-toml-example) in the post front matter and set the `name` property to `"header"`.
151
-
152
-An example page bundle might look like:
153
-
154
-```
155
-└── post
156
-    └── secure-your-digital-life
157
-        ├── images
158
-        │   └── florian-klauer-119557-unsplash.jpg
159
-        └── index.md
160
-```
161
-
162
-With the following front matter specified in `index.md`:
163
-
164
-```toml
165
-[[resources]]
166
-  src = "images/florian-klauer-119557-unsplash.jpg"
167
-  name = "header"
168
-```
169
-
170
-That's it! After Dark does the rest.
171
-
172
-# Lazy Loading
173
-
174
-Lazy loading prioritizes when and how images and other external resources are downloaded when viewing a page. Used effectively lazy loading can improve user experience by reducing the amount of time and bandwidth required to load a page.
175
-
176
-To facilitate the effective use of lazy loading After Dark includes the [lazySizes] JavaScript library on every page. Use it to take control over how external resources are loaded on your site.
177
-
178
-By default After Dark will lazy load [Post Images](#post-images). It also [includes](#snippets) a custom `figure` shortcode to provide a consistent and easy-to-use lazy-loading experience for post images with optional caption text.
179
-
180
-To manually activate lazySizes add the `lazyload` class to your images, iframes and more as illustrated in the following examples:
181
-
182
-```html
183
-<!-- non-responsive -->
184
-<img data-src="image.jpg" class="lazyload">
185
-```
186
-
187
-```html
188
-<!-- responsive with automatic sizes calculation -->
189
-<img
190
-  data-sizes="auto"
191
-  data-src="image2.jpg"
192
-  data-srcset="image1.jpg 300w, image2.jpg 600w, image3.jpg 900w"
193
-  class="lazyload">
194
-```
195
-
196
-```html
197
-<!-- iframe example -->
198
-<iframe frameborder="0"
199
-  class="lazyload"
200
-  allowfullscreen
201
-  data-src="//www.youtube.com/embed/ZfV-aYdU4uE">
202
-</iframe>
203
-```
204
-
205
-See the [lazySizes] docs for additional information and examples, including instructions on how to use it to create <abbr title="Low-Quality Image Placeholders">LQIP</abbr>.
206
-
207
-# Related Content
208
-
209
-Promote more of your content to your site visitors. By offering your readers more content that's relevant to them you can increase your site's page views, the time spent on your site and reader loyalty.
210
-
211
-Related content surfaces content across sections by matching taxonomy tags. If After Dark finds related content, it will automatically output a list of links to that content in reverse chronological order below the byline of your post content.
212
-
213
-By default After Dark will display up to 7 items by title along with their reading times. You can limit the number of items displayed by setting the following optional parameter in the `[params]` section of your `config.toml` file:
214
-
215
-```toml
216
-related_content_limit = 5
217
-```
218
-
219
-Learn more about [Related Content in Hugo](https://gohugo.io/content-management/related/), including configuration options you may wish to add to your site.
220
-
221
-# Table Of Contents
222
-
223
-Help users locate and share information on your site. By providing a <abbr title="Table Of Contents">TOC</abbr>, users will spend less time scrolling to locate information in larger documents and are more likely to deep to specific information on a page.
224
-
225
-To automatically generate a TOC for a post based on the [page outline](https://gsnedders.html5.org/outliner/), add the following to your post front matter:
226
-
227
-```toml
228
-toc = true
229
-```
230
-
231
-To hide the TOC set `toc = false`, or simply remove the setting from the post front matter.
232
-
233
-After Dark uses the HTML5 [`details`](http://devdocs.io/html/element/details) and [`summary`](http://devdocs.io/html/element/summary) elements to provide a TOC which does not require use of CSS or JavaScript to function.
234
-
235
-When a page is first loaded, the TOC will be collapsed so it does not clutter up the page. Once expanded, selecting an item in the TOC will smooth scroll to that section within the document, highlight the section header and updating the browser's location bar for deep linking and back-button support.
236
-
237
-# Social Engagement
238
-
239
-Increase engagement when sharing links to your site on social media.
240
-
241
-## Open Graph
242
-
243
-After Dark uses the `opengraph` Hugo [internal template](https://gohugo.io/templates/internal/#the-internal-templates) to achieve rich sharing cards for Facebook and other social networks, as shown here:
244
-
245
-![Open Graph sharing card screenshot](data:image/png;base64,{{ readFile "themes/after-dark/images/docs/feat-social-awareness-fs8.png" | base64Encode }} "Example Open Graph sharing card produced by After Dark")
246
-
247
-To create a social sharing card like the one shown above, specify `author` in `config.toml` and, optionally, override it from your front matter as shown here:
248
-
249
-```toml
250
-title = "Become a Digital Nomad in Bali: The Lost Guide"
251
-description = "Everything you need to know to become a Digital Nomad in Bali."
252
-author = "Bali Bebas!"
253
-date = "2017-02-02T11:57:24+08:00"
254
-publishdate = "2017-01-28T02:31:22+08:00"
255
-images = [
256
-  "https://source.unsplash.com/-09QE4q0ezw/2000x1322"
257
-]
258
-```
259
-
260
-**Why use arrays?** Open Graph [supports them](http://ogp.me/#array) and users may wish to extend internal templates to output multiple images.
261
-
262
-To configure site-wide Open Graph images to use as fallbacks for posts not specifying their own open graph images, add an array of URLs to the `[params]` section in `config.toml`:
263
-
264
-```toml
265
-images = [
266
-  "https://source.unsplash.com/-09QE4q0ezw/2000x1322" # Default Open Graph image for site
267
-]
268
-```
269
-
270
-Or, if using [Page Bundles](https://gohugo.io/content-management/page-bundles/), specify the relative path to an image resource for the page:
271
-
272
-```toml
273
-images = [
274
-  "/post/post-title/images/lana-abie-581813-unsplash.jpg"
275
-]
276
-```
277
-
278
-Images stored in bundles can be grouped together with content (i.e. `/post-title/images/*`) or kept together in a [headless bundle](https://gohugo.io/content-management/page-bundles/#headless-bundle) (e.g. `content/uploads`) and reused anywhere on your site.
279
-
280
-See [Unsplash Source](https://source.unsplash.com/) for image configuration options for images sourced externally or copied from Unsplash.
281
-
282
-## Twitter Cards
283
-
284
-Optimize tweets with Twitter Cards. After Dark leverages the Hugo [internal template](https://gohugo.io/templates/internal/#the-internal-templates) for Twitter to provide large preview images in addition to associating shares with the site creator.
285
-
286
-See the Hugo [Internal Templates documentation](https://gohugo.io/templates/internal/#the-internal-templates) for more information.
287
-
288
-## Telegram Instant View
289
-
290
-Improve experience for Telegram users by providing an [Instant View](https://instantview.telegram.org/) for your site. After Dark makes easy.
291
-
292
-![Open Graph sharing card screenshot](data:image/png;base64,{{ readFile "themes/after-dark/images/docs/feat-instant-view-fs8.png" | base64Encode }} "Example Telegram Instant View for After Dark")
293
-
294
-To create an Instant View for your site [create your own](https://instantview.telegram.org/my/) IV template modeling from the example here:
295
-
296
-```yaml
297
-# enable for items in the post section
298
-?path: /post/.+
299
-
300
-# define required elements
301
-title: //*[@itemprop="headline"]
302
-body: //*[@itemprop="articleBody"]
303
-
304
-# if cover exists, define images
305
-?exists: //head/meta[@property="og:image"]/@content
306
-cover: //head/meta[@property="og:image"]/@content
307
-image_url: $cover/self::img/@src
308
-
309
-# author and post date extracted automatically
310
-```
311
-
312
-Additionally, if your site has a telegram channel, you can specify it by setting the following in your site config:
313
-
314
-```toml
315
-[params.seo]
316
-  telegram_channel = "channelname" # omit the `@`
317
-```
318
-
319
-Specifying a channel name allows Telegram users to join your channel with a single click from within an Instant View.
320
-
321
-See the [Telegram IV docs](https://instantview.telegram.org/docs) for additional information.
322
-
323
-# Search Optimization
324
-
325
-After Dark is built with SEO in mind. Schema Structured Data and other meta are applied to give robots what they want, automatically, without any configuration necessary.
326
-
327
-The default set-up helps ensure your After Dark site will rank well in <abbr title="Search Engine Results Pages">SERP</abbr>s and prevent search crawlers from indexing undesirable content. Fine-tune your search settings using the following available options.
328
-
329
-## Webmaster Verification
330
-
331
-Though not required you may wish to verify your site with Google, Bing, Alexa and Yandex. To verify simply add the `META` verification code supplied by the provider in your `config.toml` as shown here:
332
-
333
-```toml
334
-[params.seo.webmaster_verifications]
335
-  google = "" # Optional, Google verification code
336
-  bing = "" # Optional, Bing verification code
337
-  alexa = "" # Optional, Alexa verification code
338
-  yandex = "" # Optional, Yandex verification code
339
-```
340
-
341
-**Note:** Claiming your site with Alexa was [retired in May 2016](https://support.alexa.com/hc/en-us/articles/219135887-Claiming-has-been-retired-May-2016).
342
-
343
-If you choose not to verify it's still possible to submit your site to search engines though the specific method may vary by provider.
344
-
345
-## Meta Descriptions
346
-
347
-Well-crafted page titles help catch the human eye on search results pages and meta descriptions provide a summary of the content and why its relevant for the reader, driving click-throughs.
348
-
349
-To add a custom meta description to your pages and posts add `description` to the front matter:
350
-
351
-```toml
352
-description = "Everything you need to know to become a Digital Nomad in Bali."
353
-```
354
-
355
-In addition to appearing in search engines, meta descriptions also appear on individual pages and in content summaries in After Dark, adding transparency to how your page will appear in search.
356
-
357
-If no custom description is provided, After Dark will fallback to the description provided in `config.toml`. Learn more on [how to craft your meta descriptions](https://moz.com/learn/seo/meta-description).
358
-
359
-## Modification Dating
360
-
361
-Help user agents know when posts were last modified. To do so add `publishdate` to your page front matter and update `date` anytime you make an update to a post.
362
-
363
-Updates will be made visible to readers by surfacing content higher in your page and post listings and by using visible callouts on content summaries. For robots, making this change will automatically update Schema Structured Data and Web feeds, as well as the `lastmod` setting in your `sitemap.xml` file.
364
-
365
-You can be specific and use a datetime (with timezone offset) like:
366
-
367
-```toml
368
-date = "2017-02-02T01:20:56-06:00"
369
-publishdate = "2016-11-21T10:32:33+08:00"
370
-```
371
-
372
-Or less specific and use just the dates:
373
-
374
-```toml
375
-date = "2017-02-02"
376
-publishdate = "2016-11-21"
377
-```
378
-
379
-In addition to `date` and `publishdate`, it's also possible to set an expiry date. Expired posts will automatically disappear when the site is built, but the content will be retained. To future- or back-date content for expiration, set the `expirydate` field in the front matter.
380
-
381
-## Index Blocking
382
-
383
-Just because a page appears in your `sitemap.xml` does not mean you want it to appear in a SERP. Examples of pages which will appear in your `sitemap.xml` that you typically do not want indexed by crawlers include error pages, search pages, legal pages, and pages which list summaries of other pages.
384
-
385
-Though it's possible to block search indexing from a `robots.txt` file, After Dark makes it possible to block page indexing using Hugo configuration as well. By default the following page types will be blocked:
386
-
387
-- Section Pages (e.g. Post listings)
388
-- Taxonomy Pages (e.g. Category and Tag listings)
389
-- Taxonomy Terms Pages (e.g. Pages listing taxonomies)
390
-
391
-To customize default blocking configure the `noindex_kinds` setting in the `[params]` section of your `config.toml`.
392
-
393
-For example, if you want to enable crawling for sections appearing in [Section Menu](#section-menu), add the following to your configuration file:
394
-
395
-```toml
396
-[params]
397
-  noindex_kinds = [
398
-    "taxonomy",
399
-    "taxonomyTerm"
400
-  ]
401
-```
402
-
403
-To block individual pages from being indexed add `noindex` to your page's front matter and set the value to `true`, like:
404
-
405
-```toml
406
-noindex = true
407
-```
408
-
409
-You may also add an `_index.md` file with the `noindex` front matter to control indexing for an entire section:
410
-
411
-```shell
412
-├── content
413
-│   ├── modules
414
-│   │   ├── _index.md
415
-│   │   ├── starry-night.md
416
-│   │   └── flying-toilets.md
417
-│   └── articles
418
-│       ├── aggressively-stupid-story-behind-after-dark.md
419
-│       ├── another-poppin-fresh-lawsuit.md
420
-```
421
-
422
-To learn how crawlers use this see [Block search indexing with 'noindex'](https://support.google.com/webmasters/answer/93710).
423
-
424
-## Referrer Policy
425
-
426
-Resource requests such as images and scripts typically send an HTTP header containing the location where the request originated. Most of the time this is okay. But sometimes it's not. Sometimes the referrer header is used to censor information or even perform [spear phishing](https://en.wikipedia.org/wiki/Phishing#Spear_phishing) attacks. Perhaps more importantly, transmission of the referrer header can present a privacy concern when transmitted to external sites. But not in After Dark.
427
-
428
-After Dark leverages [Referrer Policy](https://w3c.github.io/webappsec-referrer-policy/) to increase security and privacy beyond browser defaults by preventing spec-compliant browsers from passing referrer data when making cross-origin requests.
429
-
430
-If you wish to relax the security policy for whatever reason you may do so by:
431
-
432
-- Setting the [referrerpolicy](https://w3c.github.io/webappsec-referrer-policy/#referrer-policy-delivery-referrer-attribute) by HTML attribute;
433
-- Override the policy using a [nested browsing context](https://w3c.github.io/webappsec-referrer-policy/#referrer-policy-delivery-nested); or,
434
-- Override the page-level default specified by After Dark.
435
-
436
-To override the page-level default of [`same-origin`](https://w3c.github.io/webappsec-referrer-policy/#referrer-policy-same-origin) add/adjust the following config when building your site:
437
-
438
-```toml
439
-[params.seo]
440
-  referrer = "same-origin"
441
-```
442
-
443
-For a list of possible values and their meanings please see [Referrer Policy](https://w3c.github.io/webappsec-referrer-policy/).
444
-
445
-## Link Types
446
-
447
-For related content split across multiple pages in a sequence After Dark supports use of `prev` and `next` settings in your front matter. Use them to provide semantic relationships between pages in a segmented article or series or [LiveBlogPosting](https://schema.org/LiveBlogPosting).
448
-
449
-```toml
450
-prev = "/series/learn-to-code/part-one/"
451
-next = "/series/learn-to-code/part-three/"
452
-```
453
-
454
-Link Types are commonly shown at the top of the page in terminal browsers as auxiliary means of navigation and may help crawlers better understand relationships within your content.
455
-
456
-Learn more about [link types](http://devdocs.io/html/link_types) and how to [customize Hugo taxonomies](https://gohugo.io/taxonomies/overview/).
457
-
458
-## Meta Keywords
459
-
460
-Meta keywords offer semantic detail to crawlers regarding the subject matter of your content. Keywords meta are generated automatically for pages given the tags used for that page, and for other pages using the site categories taxonomy. Keywords and key phrases may be customized by setting a `keywords` array in your front matter:
461
-
462
-```toml
463
-keywords = [
464
-  "web development",
465
-  "digital marketing",
466
-  "social media",
467
-  "link building"
468
-]
469
-```
470
-
471
-While not considered relevant to some crawlers, keywords can be a useful way to document target search terms for use in <abbr title="Pay-Per-Click">PPC</abbr> online advertising and provide semantic value to your pages.
472
-
473
-# Markdown Output
474
-
475
-Gain more control over markdown conversion to HTML. By modifying the markdown processor settings you can take advantage of [Blackfriday](https://github.com/russross/blackfriday) features not enabled by default.
476
-
477
-To customize conversion output add a `[blackfriday]` section to your site's `config.toml` file like so:
478
-
479
-```toml
480
-[blackfriday]
481
-  hrefTargetBlank = true
482
-  fractions = false
483
-```
484
-
485
-Overrides to theme markdown processing defaults are available from page front matter as well, giving you control on a page-by-page basis.
486
-
487
-See the Hugo docs for additional [configuration options](http://gohugo.io/overview/configuration/#configure-blackfriday-rendering).
488
-
489
-# Snippets
490
-
491
-Snippets are reusable bits of code you can add to your site to reduce repetition and improve consistency. They are composed of [partials](https://gohugo.io/templates/partials) and [shortcodes](https://gohugo.io/content-management/shortcodes) and may be combined together to produce powerful results.
492
-
493
-The following core snippets are supplied by the theme:
494
-
495
-- `external` - Create styled anchor links.
496
-- `navmenu` - Displays a navigation menu.
497
-
498
-After Dark also includes snippets to take advantage of [hackcss components][hackcss]:
499
-
500
-- `hackcss-alert` - Show various alert boxes.
501
-- `hackcss-button` - Add buttons inside and out of forms.
502
-- `hackcss-buttongroup` - Group buttons together visually.
503
-- `hackcss-card` - Display a card with title.
504
-- `hackcss-form` - Enables powerful form-building applications.
505
-- `hackcss-formgroup` - Groups together form controls.
506
-- `hackcss-helpblock` - Display help text in your forms.
507
-- `hackcss-label` - Add labels to form controls.
508
-- `hackcss-progress` - Display a progress meter.
509
-- `hackcss-textarea` - Provide an area to enter longer text.
510
-- `hackcss-textinput` - Accept any kind of text input.
511
-- `hackcss-throbber` - Show an animated spinner.
512
-
513
-Each snippet includes extensive inline documentation. Docs are located in the shortcode files in the `layouts/shortcodes` directory of the theme.
514
-
515
-Combine snippets to build great-looking forms anywhere on your site:
516
-
517
-![Form snippets screenshot](data:image/png;base64,{{ readFile "themes/after-dark/images/docs/feat-snippets-fs8.png" | base64Encode }} "Example form created using snippet shortcodes.")
518
-
519
-Or try your hand at creating your own snippets for the following additional shortcodes included with After Dark:
520
-
521
-- `blockquote` – Provides a styled blockquote with optional citation link.
522
-- `figure` – Overrides Hugo [built-in](https://gohugo.io/content-management/shortcodes/#use-hugo-s-built-in-shortcodes) for [lazy loading](#lazy-loading) and small caption text.
523
-
524
-Reference the Hugo [shortcode](https://gohugo.io/templates/shortcode-templates/) and [partial](https://gohugo.io/templates/partials/) template docs for additional help.
525
-
526
-# Personalization
527
-
528
-After Dark provides several options to give you more freedom and control over your site's look-and-feel. Read on to learn more.
529
-
530
-## Display Variants
531
-
532
-Customize the look-and-feel of your site with display variants. After Dark provides three dark color palettes and two display modes. Toggle between them anytime directly from your site configuration.
533
-
534
-The default display variant uses the `dark` color palette with the `hack` display mode. To modify it add the following to your site configuration and choose one of the available options:
535
-
536
-```toml
537
-[params.hackcss]
538
-  disabled = false # Optional, set true to disable hackcss styles
539
-  mode = "hack" # Optional, choose from 'hack' and 'standard'
540
-  palette = "dark" # Optional, choose from 'dark', 'dark-grey' and 'solarized-dark'
541
-```
542
-
543
-Once updated review the [Error Page](#error-page), [Trim Color](#trim-color) and tweak your [Custom Styles](#custom-styles) to suit your personal taste.
544
-
545
-## Custom Styles
546
-
547
-Add to or override existing styles without modifying theme source.
548
-
549
-To add your own custom styles:
550
-
551
-1. Create a file named `custom.css` in your site's `assets/css` directory. If it doesn't exist yet, simply create it:
552
-
553
-    ```sh
554
-    mkdir -p assets/css && touch "$_"/custom.css
555
-    ```
556
-
557
-2. Then add any custom styles to `custom.css`. For example, to adjust the treatment of output from the included [`figure` shortcode](https://git.habd.as/comfusion/after-dark#snippets) add the following to your `custom.css`:
558
-
559
-    ```css
560
-    figure {
561
-      margin-left: auto;
562
-      margin-right: auto;
563
-      text-align: center;
564
-    }
565
-    figure img {
566
-      max-width: 80%;
567
-    }
568
-    figure a {
569
-      border-bottom: none;
570
-    }
571
-    figure a:hover {
572
-      background-color: inherit;
573
-    }
574
-    ```
575
-
576
-    The above will center figures on the page, constrain their width to 80% of the available layout space and remove any link underlines.
577
-
578
-**Heads up:** After Dark ships with some example customizations in [its own `custom.css`](assets/css/custom.css) file. If you wish to keep these in your site, copy the styles within into your site-level `custom.css` file after creating it.
579
-
580
-With `hugo serve` running, changes to your site `custom.css` will trigger an automatic rebuild and a live reload in any open browsers with JavaScript support.
581
-
582
-**How does this work?** Custom styles are concatenated into a `style` element in the document `head` along with theme and vendor styles. [Specificity](https://devdocs.io/css/specificity) in this file trumps what is output at the theme or vendor levels, so no `!important` hacks are strictly necessary to override anything. See the [Asset Bundling](https://gohugo.io/hugo-pipes/bundling/) Hugo docs for a better understanding of file concatenation using [Hugo Pipes](https://gohugo.io/hugo-pipes/).
583
-
584
-Finally, if you wish to disable all theme styles, disable the [Display Variant](#display-variants) after creating your `custom.css`.
585
-
586
-## Trim Color
587
-
588
-Defines the default trim color and sometimes affects how a browser or OS displays the site (e.g., in Brave, trim color styles the browser chrome).
589
-
590
-If left unchanged, trim color is set automatically to background color of the [Display Variant](#display-variants). To customize the trim color add a CSS variable called `--trim-color` to your [Custom Styles](#custom-styles):
591
-
592
-```css
593
-:root {
594
-  --trim-color: papayawhip;
595
-}
596
-```
597
-
598
-You may then start adding and [Using CSS variables](https://devdocs.io/css/using_css_variables) within your `custom.css` anywhere colors or other variables are desired.
599
-
600
-## SVG Favicon
601
-
602
-After Dark ships with a 224B SVG favicon embedded into every page.
603
-
604
-**Why SVG?** SVG favicons are lightweight enough to embed for offline use and, unlike traditional graphics, may can be styled with CSS, animated with JavaScript resized without loss in image fidelity.
605
-
606
-To customize the favicon create a `favicon.html` under `layouts/partials/head` within your site and place an [`icon` link](http://devdocs.io/html/link_types#icon) within it as illustrated in the included [`favicon.html` partial](layouts/partials/head/favicon.html). If you're planning to optimize for specific [platform experiences](https://github.com/h5bp/html5-boilerplate/blob/6.1.0/dist/doc/extend.md#web-apps) this override file is a good place to add any additional tags required.
607
-
608
-## Error Page
609
-
610
-Errors can be embarrassing. If you forget to set your [page aliases](https://gohugo.io/content-management/urls/#aliases) or sipmly fat-finger a URL, don't send your users packing. After Dark includes an engaging 404 error page which links back to your homepage. Use it to encourage users to stick around when resources can't be located by redirecting them to `404.html` when a page can't be found.
611
-
612
-To customize the provided error page create a `404.html` in your site `layouts` directory and let [Hugo's Lookup Order](https://gohugo.io/templates/lookup-order/) do the rest.
613
-
614
-[lazySizes]: https://afarkas.github.io/lazysizes/
615
-[hackcss]: https://hackcss.egoist.moe/dark.html
616
-[Fractal Forest]: https://git.habd.as/comfusion/fractal-forest
617
-[Voyeur]: https://git.habd.as/comfusion/voyeur
618
-[Hall of Mirrors]: https://git.habd.as/comfusion/hall-of-mirrors

+ 43
- 1
archetypes/post.md View File

@@ -1,7 +1,7 @@
1 1
 +++
2 2
 title = "{{ replace .TranslationBaseName "-" " " | title }}"
3 3
 date = {{ .Date }}
4
-description = "This text is displayed in search result listings."
4
+description = "This text was generated using the default post archetype."
5 5
 draft = true
6 6
 toc = false
7 7
 categories = ["hacking"]
@@ -10,3 +10,45 @@ images = [
10 10
   "https://source.unsplash.com/collection/983219/1600x900"
11 11
 ] # overrides site-wide open graph image
12 12
 +++
13
+
14
+Before you continue please take a moment to customize your `post` archetype. Your post archetype is located in the following file relative to your site: `archetypes/post.md`.
15
+
16
+If the file does not exist yet, create it by copying from the After Dark default:
17
+
18
+```sh
19
+$ cp themes/after-dark/archetypes/post.md archetypes/
20
+```
21
+
22
+Once copied, edit your new `post.md` to remove the text you see here then use it go generate a new post for your site:
23
+
24
+```
25
+$ hugo new post/the-darkness-is-spreading.md
26
+```
27
+
28
+Use archetypes to establish sensible defaults when generating content for your {{< external rel="help" target="help" href="http://localhost:1414/feature/custom-layouts" text="Custom Layouts" />}}.
29
+
30
+Visit {{< external target="help" href="https://gohugo.io/content-management/archetypes/" text="Archetypes in Hugo" />}} to learn more about them.
31
+
32
+<!--more-->
33
+
34
+{{< hackcss-alert type="info" >}}
35
+This text appears below the {{< external target="help" href="https://gohugo.io/content-management/summaries/" text="Summary Split" />}}.
36
+{{< /hackcss-alert >}}
37
+
38
+After Dark ships with a {{< external rel="help" target="help" href="http://localhost:1414/feature/module-system" text="Module System" />}} and provides several {{< external rel="help" href="https://after-dark.habd.as/module/" text="prebuilt modules" />}} designed to enhance your site.
39
+
40
+Shown here, an animation made possible with the {{< external rel="help" target="help" href="http://localhost:1414/module/fractal-forest" text="Fractal Forest" />}} module:
41
+
42
+![BPG animation example](/bpg/cinemagraph-6.bpg)
43
+
44
+Fractal Forest gives After Dark the ability to render images encoded using Fabrice Bellard's {{< external href="https://bellard.org/bpg/" target="help" text="BPG Image format" />}} and comes preinstalled for sites created using the {{< external rel="help" target="help" href="https://after-dark.habd.as/feature/quick-installer" text="Quick Installer" />}}.
45
+
46
+To learn more about Fractal Forest and other modules available, in addition to the many features available in After Dark please spend some time reviewing the {{< external rel="help" target="help" href="https://localhost:1414/feature/online-help" text="Online Help" documentation before you continue.
47
+
48
+If help is not running, start it with the following command:
49
+
50
+```sh
51
+./themes/after-dark/bin/help
52
+```
53
+
54
+Thank you for choosing After Dark.

+ 4
- 9
bin/help View File

@@ -1,15 +1,10 @@
1 1
 #!/bin/sh
2 2
 
3
-CONFIG_FILE=config.toml
4
-CONTENT_DIR=`sed -n 's/contentDir[=:]"\([^"]*\)".*/\1/p' <<< "$(cat $CONFIG_FILE | tr -d ' ')"`
5
-[ -z $CONTENT_DIR ] && CONTENT_DIR=content
3
+THEME_PATH=themes/after-dark
6 4
 
7
-echo "Updating help documentation ..."
5
+echo "Starting help server ..."
8 6
 kill $(ps aux | awk '/[h]ugo.*1414/ {print $2}') 2>/dev/null
9
-[ -f "$CONTENT_DIR"/help/index.md ] && rm "$CONTENT_DIR"/help/index.md
10
-hugo new help/index.md --kind help 1>/dev/null
11
-echo "Restarting help server ..."
12
-hugo serve --buildExpired --disableLiveReload --port 1414 1>/dev/null &
7
+cd "$THEME_PATH"/docs && hugo serve --disableLiveReload --port 1414 1>/dev/null &
13 8
 echo "Help server started at http://localhost:1414/"
14 9
 echo "To stop it run \"kill \$(ps aux | awk '/[h]ugo.*1414/ {print \$2}')\"."
15
-echo "To update and start it again run \"./themes/after-dark/bin/help\"."
10
+echo "To start it again run \"./themes/after-dark/bin/help\"."

+ 15
- 9
bin/install View File

@@ -32,8 +32,8 @@ create_site () {
32 32
 
33 33
 download_theme () {
34 34
    echo "Downloading the latest version of After Dark ..."
35
-   THEME_META=$(wget -qO - https://registry.npmjs.org/after-dark/latest)
36
-   vers=$(echo "$THEME_META" | egrep -o "\"version\".*[^,]*," | cut -d ',' -f1 | cut -d ':' -f2 | tr -d '" ')
35
+   LATEST_META=$(wget -qO - https://registry.npmjs.org/after-dark/latest)
36
+   vers=$(echo "$LATEST_META" | egrep -o "\"version\".*[^,]*," | cut -d ',' -f1 | cut -d ':' -f2 | tr -d '" ')
37 37
    mkdir -p themes/after-dark
38 38
    wget -qO - https://registry.npmjs.org/after-dark/-/after-dark-"$vers".tgz | tar --strip-components=1 -xz -C themes/after-dark
39 39
    echo "Version $vers downloaded to $SITE_DIR/themes/after-dark"
@@ -89,22 +89,27 @@ TOML
89 89
 }
90 90
 
91 91
 update_archetypes () {
92
-   echo "Updating site default content archetype ..."
92
+   echo "Updating the default content archetype ..."
93 93
    rm -f archetypes/default.md
94 94
    cp themes/after-dark/archetypes/default.md archetypes
95 95
 }
96 96
 
97
+create_welcome_post () {
98
+   echo "Creating a helpful welcome post ..."
99
+   hugo new post/welcome.md
100
+}
101
+
97 102
 generate_help_docs () {
98 103
    echo "Generating help documentation ..."
99
-   meta_path=themes/after-dark/data/npm
100
-   mkdir -p "$meta_path" && echo "$THEME_META" | tr '\r\n' ' ' > "$meta_path"/latest.json
101
-   hugo new help/index.md --kind help 1>/dev/null
104
+   THEME_PATH=themes/after-dark
105
+   meta_path="$THEME_PATH"/data/npm
106
+   mkdir -p "$meta_path" && echo "$LATEST_META" | tr '\r\n' ' ' > "$meta_path"/latest.json
107
+   cd "$THEME_PATH"/docs && hugo new validate.md --kind validate 1>/dev/null
102 108
 }
103 109
 
104 110
 serve_help_docs () {
105 111
    echo "Starting help server ..."
106
-   sleep 1
107
-   hugo serve --buildExpired --disableLiveReload --port 1414 1>/dev/null &
112
+   hugo serve --disableLiveReload --port 1414 1>/dev/null &
108 113
 }
109 114
 
110 115
 echo "Welcome to the After Dark quick installer. Press CTRL-C at any time to abort."
@@ -116,6 +121,7 @@ download_theme
116 121
 update_archetypes
117 122
 download_module "fractal-forest"
118 123
 configure_theme
124
+create_welcome_post
119 125
 generate_help_docs
120 126
 serve_help_docs
121 127
 
@@ -126,6 +132,6 @@ printf "${YELLOW}Installation successful!${NC}\n"
126 132
 echo "Site created in $SITE_DIR_ABS"
127 133
 echo "Help server started at http://localhost:1414/"
128 134
 echo "To stop it run \"kill \$(ps aux | awk '/[h]ugo.*1414/ {print \$2}')\"."
129
-echo "To update and start it again run \"./themes/after-dark/bin/help\"."
135
+echo "To start it again run \"./themes/after-dark/bin/help\"."
130 136
 echo "Run \"cd $SITE_DIR && hugo serve\" to start your site."
131 137
 echo "Thank you for choosing After Dark."

+ 5
- 9
bin/upgrade View File

@@ -1,19 +1,15 @@
1 1
 #!/bin/sh
2 2
 set -e
3 3
 
4
-CONFIG_FILE=config.toml
5
-CONTENT_DIR=`sed -n 's/contentDir[=:]"\([^"]*\)".*/\1/p' <<< "$(cat $CONFIG_FILE | tr -d ' ')"`
6
-[ -z $CONTENT_DIR ] && CONTENT_DIR=content
7
-
8 4
 generate_help_docs () {
9 5
    echo "Generating help documentation ..."
10
-   meta_path=themes/after-dark/data/npm
6
+   THEME_PATH=themes/after-dark
7
+   meta_path="$THEME_PATH"/data/npm
11 8
    mkdir -p "$meta_path" && echo "$LATEST_META" | tr '\r\n' ' ' > "$meta_path"/latest.json
12
-   [ -f "$CONTENT_DIR"/help/index.md ] && rm "$CONTENT_DIR"/help/index.md
13
-   hugo new help/index.md --kind help 1>/dev/null
9
+   cd "$THEME_PATH"/docs && hugo new validate.md --kind validate 1>/dev/null
14 10
 }
15 11
 
16
-upgrade () {
12
+update_module () {
17 13
    meta_file=themes/"$1"/data/npm/latest.json
18 14
    current_vers=`sed -n 's/.*"version":"\([^"]*\).*/\1/p' < "$meta_file"`
19 15
    if ! [ -f "$meta_file" ] ; then
@@ -34,4 +30,4 @@ upgrade () {
34 30
    fi
35 31
 }
36 32
 
37
-upgrade "after-dark"
33
+update_module "after-dark"

+ 5
- 0
docs/.gitignore View File

@@ -0,0 +1,5 @@
1
+.DS_Store
2
+.env
3
+public
4
+resources
5
+content/validate.md

+ 7
- 0
docs/archetypes/feature.md View File

@@ -0,0 +1,7 @@
1
++++
2
+title = "{{ replace .TranslationBaseName "-" " " | title }}"
3
+description = "This text is displayed in search result listings."
4
+categories = ["features"]
5
+tags = ["after", "dark"]
6
+features = [""]
7
++++

+ 9
- 0
docs/archetypes/shortcode.md View File

@@ -0,0 +1,9 @@
1
++++
2
+title = "{{ replace .TranslationBaseName "-" " " | title }}"
3
+description = "This text is displayed in search result listings."
4
+categories = ["experience"]
5
+tags = ["after", "dark"]
6
+html_attributes = []
7
+custom_attributes = []
8
+snippets_used = []
9
++++

+ 79
- 0
docs/archetypes/validate.md View File

@@ -0,0 +1,79 @@
1
++++
2
+title = "Validate Release"
3
+description = "Complete the included form to validate the release."
4
+noindex = true
5
++++
6
+
7
+{{< hackcss-form name="validate" action="/validate" >}}
8
+  {{< hackcss-formgroup name="integrity" >}}
9
+    {{< hackcss-label for="digest" >}}
10
+      <abbr title="Secure Hash Algorithm">SHA-512</abbr> Digest:
11
+    {{< /hackcss-label >}}
12
+    {{< hackcss-textinput
13
+        required="true"
14
+        autofocus="true"
15
+        autocomplete="off"
16
+        spellcheck="false"
17
+        type="text" id="digest" name="digest"
18
+        pattern="^(?:[A-Za-z0-9+/]{4})*(?:[A-Za-z0-9+/]{2}==|[A-Za-z0-9+/]{3}=)?$"
19
+        placeholder="whUlqT0w6vfvTzd12LpU5kst/Cz3yt9j3ncIHcB4CDQFFiMVPlfX/I+vKl3Y98faqBLlgh6M4pyhiYzZNIPUPA=="
20
+    >}}
21
+    {{< hackcss-helpblock >}}
22
+      Submit with {{ .Site.Data.npm.latest.version }} <a href="/feature/release-hashes">Release Hash</a> to validate.
23
+      <noscript>JavaScript required for proper validation.</noscript>
24
+    {{< /hackcss-helpblock >}}
25
+  {{< /hackcss-formgroup >}}
26
+{{< /hackcss-form >}}
27
+
28
+<small>Valid installations use the [Quick Installer](/feature/quick-installer) or [Upgrade Script](/feature/upgrade-script) and may be checked offline. See [Release Hashes](/feature/release-hashes) for a more thorough approach to validation.</small>
29
+
30
+<script>
31
+  (function (window, document, undefined) {
32
+    "use strict";
33
+    const digest = '{{ strings.TrimLeft "sha512-" .Site.Data.npm.latest.dist.integrity }}';
34
+    const confirm = form => {
35
+      form.digest.readOnly = true;
36
+      form.digest.value = digest;
37
+      form.integrity.classList.add('form-success');
38
+      const message = "Hash verified. Valid installation detected."
39
+      form.querySelector('.help-block').innerHTML = message;
40
+    };
41
+    const validate = (search, form) => {
42
+      search.includes(encodeURIComponent(digest)) ? confirm(form) : challenge(form);
43
+    };
44
+    const challenge = form => {
45
+      form.digest.value = digest;
46
+      const check = () => {
47
+        const classes = form.integrity.classList;
48
+        if (form.checkValidity()) {
49
+          classes.add('form-success');
50
+          classes.remove('form-warning');
51
+        } else {
52
+          classes.add('form-warning');
53
+          classes.remove('form-success');
54
+        }
55
+      };
56
+      form.oninput = check;
57
+      document.location.search && (() => {
58
+        form.integrity.classList.add('form-error');
59
+        document.title = "Invalid Hash | {{ .Site.Title }}";
60
+        const help = form.querySelector('.help-block');
61
+        help.innerHTML = help.innerText = "Unexpected hash. Please try again.";
62
+        const alert = document.createElement('div');
63
+        alert.classList.add('alert');
64
+        alert.classList.add('alert-warning');
65
+        alert.innerHTML = '<strong>WARNING:</strong> Your installation is invalid or has been tampered with. Please run the <a href="/feature/upgrade-script">Upgrade Script</a> to download the latest version.';
66
+        document.querySelector('main').appendChild(alert);
67
+      })();
68
+    };
69
+    const initialize = () => {
70
+      const form = document.forms.validate;
71
+      (document.location.search.replace('?digest=','').length)
72
+        ? validate(location.search, form)
73
+        : challenge(form);
74
+    };
75
+    document.onreadystatechange = () => {
76
+      document.readyState === 'interactive' && initialize();
77
+    };
78
+  })(window, document);
79
+</script>

+ 65
- 0
docs/config.toml View File

@@ -0,0 +1,65 @@
1
+baseurl = "https://after-dark.habd.as/" # Controls base URL sitewide
2
+languageCode = "en-US" # Controls site language
3
+title = "After Dark" # Homepage title and page title suffix
4
+paginate = 32 # Number of items to show before paginating
5
+
6
+# Controls default theme and theme components
7
+theme = [
8
+  "after-dark"
9
+]
10
+
11
+enableRobotsTXT = true # Suggested, enable robots.txt file
12
+disqusShortname = "" # Deprecated, add Disqus shortname for comments
13
+
14
+pygmentsCodefences = true # Suggested, highlight fenced code blocks
15
+pygmentsUseClasses = true # Required for custom syntax highlighting
16
+
17
+sectionPagesMenu = "main" # Enable menu system for lazy bloggers
18
+footnoteReturnLinkContents = "↩" # Provides a nicer footnote return link
19
+
20
+[params]
21
+  description = "After Dark is a complete hypermedia authoring system for the Hugo Static Site Generator." # Suggested, controls default description meta
22
+  author = "Josh Habdas" # Optional, controls author name display on posts
23
+  hide_author = true # Optional, set true to hide author name on posts
24
+  show_menu = true # Optional, set true to enable section menu
25
+  powered_by = true # Optional, set false to disable credits
26
+  images = [
27
+    "https://source.unsplash.com/collection/983219/2000x1322"
28
+  ] # Suggested, controls default Open Graph images
29
+
30
+[outputs]
31
+  home = ["HTML", "RSS", "JSON"]
32
+  section = ["HTML", "RSS", "JSON"]
33
+
34
+[params.seo.webmaster_verifications]
35
+  yandex = "4006a8813cbb9fdb" # https://webmaster.yandex.com/
36
+
37
+[[menu.main]]
38
+  name = "Overview"
39
+  weight = 1
40
+  identifier = "home"
41
+  url = "/"
42
+
43
+[[menu.main]]
44
+  name = "Features"
45
+  weight = 2
46
+  identifier = "feature"
47
+  url = "/feature/"
48
+
49
+[[menu.main]]
50
+  name = "Modules"
51
+  weight = 3
52
+  identifier = "module"
53
+  url = "/module/"
54
+
55
+[[menu.main]]
56
+  name = "Shortcodes"
57
+  weight = 4
58
+  identifier = "shortcode"
59
+  url = "/shortcode/"
60
+
61
+[[menu.main]]
62
+  name = "Search"
63
+  weight = 5
64
+  identifier = "search"
65
+  url = "/search/"

+ 114
- 0
docs/content/_index.md View File

@@ -0,0 +1,114 @@
1
++++
2
+title = "After Dark"
3
+description = "After Dark is a complete hypermedia authoring system for the Hugo Static Site Generator."
4
++++
5
+
6
+<svg class="logo" width="96" viewBox="0 0 46 45" xmlns="http://www.w3.org/2000/svg"><title>After Dark</title><path d="M.708 45L23 .416 45.292 45H.708zM35 38L23 19 11 38h24z" class="logo" fill="#000"/></svg>
7
+
8
+<p class="leading">After Dark is a complete hypermedia authoring system for the {{< external text="Hugo Static Site Generator" href="https://gohugo.io" />}} designed for the creation of engaging websites that are easy to build, fully customizable and secure by design.</p>
9
+
10
+<!-- <svg viewBox="0 0 32 32" width="32" height="32" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
11
+  <path d="M30 10 L16 26 2 10 Z" />
12
+</svg>
13
+<svg viewBox="0 0 32 32" width="32" height="32" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
14
+  <path d="M30 10 L16 26 2 10 Z" />
15
+</svg>
16
+<svg viewBox="0 0 32 32" width="32" height="32" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
17
+  <path d="M30 10 L16 26 2 10 Z" />
18
+</svg> -->
19
+
20
+<section class="hero">
21
+  {{< figure
22
+    src="minimal-mac_1600x1200-fs8.png"
23
+    lqipsrc="minimal-mac_800x600-fs8.png"
24
+    alt="After Dark Screenshots"
25
+  >}}
26
+</section>
27
+
28
+<section>
29
+  <svg viewBox="0 0 32 32" width="32" height="32" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
30
+    <path d="M20 24 L12 16 2 26 2 2 30 2 30 24 M16 20 L22 14 30 22 30 30 2 30 2 24" />
31
+    <circle cx="10" cy="9" r="3" />
32
+  </svg>
33
+  <h2 id="feature-imaging">Unreal Graphics</h2>
34
+  <p>Create lazy-loading responsive images and galleries with low-quality image placeholders and special effects all without touching an image editor.</p>
35
+  <nav><p>
36
+    <a href="/feature/post-images">Responsive Images</a> |
37
+    <a href="/module/hall-of-mirrors">PhotoSwipe Galleries</a> |
38
+    <a href="/module/fractal-forest">Canvas Images</a>
39
+  </p></nav>
40
+</section>
41
+
42
+<section>
43
+  <svg viewBox="0 0 32 32" width="32" height="32" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
44
+    <path d="M27 15 L27 30 2 30 2 5 17 5 M30 6 L26 2 9 19 7 25 13 23 Z M22 6 L26 10 Z M9 19 L13 23 Z" />
45
+  </svg>
46
+  <h2 id="feature-customize">Fully Customizable</h2>
47
+  <p>Choose from one of eight styleable theme skins or disable theming entirely and use custom layouts and CSS to take complete design control.</p>
48
+  <nav><p>
49
+    <a href="/feature/display-variants">Theme Skins</a> |
50
+    <a href="/feature/custom-layouts">Custom Layouts</a> |
51
+    <a href="/feature/custom-styles">Custom Styles</a>
52
+  </p></nav>
53
+</section>
54
+
55
+<section>
56
+  <svg viewBox="0 0 32 32" width="32" height="32" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
57
+    <circle cx="14" cy="14" r="12" />
58
+    <path d="M23 23 L30 30"  />
59
+  </svg>
60
+  <h2 id="feature-search">Offline Search</h2>
61
+  <p>Locate indexed content anywhere on your site in the blink of an eye, even without an Internet connection. No registration required.</p>
62
+  <nav><p>
63
+    <a href="/feature/fuzzy-search">Fuzzy Search</a> |
64
+    <a href="/shortcode/form">Form Controls</a> |
65
+    <a href="/search?uzzy%20erch">Try It Now</a>
66
+  </p></nav>
67
+</section>
68
+
69
+<section>
70
+  <svg viewBox="0 0 32 32" width="32" height="32" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
71
+    <path d="M5 15 L5 30 27 30 27 15 Z M9 15 C9 9 9 5 16 5 23 5 23 9 23 15 M16 20 L16 23" />
72
+    <circle cx="16" cy="24" r="1" />
73
+  </svg>
74
+  <h2 id="feature-security">Secure by Design</h2>
75
+  <p>From PGP-signed cryptographic release hashes to ephemeral hosting options with end-to-end encryption security is tight as a drum, sir.</p>
76
+  <nav><p>
77
+    <a href="/feature/release-hashes">Release Hashes</a> |
78
+    <a href="/module/voyeur">Privacy Analytics</a> |
79
+    <a href="/feature/air-gapping">Air Gapping</a>
80
+  </p></nav>
81
+</section>
82
+
83
+<div class="grid">
84
+  <div class="cell -1of12">
85
+    {{< external title="Activity" rel="prefetch" target="_self" itemtype="significantLink" href="https://git.habd.as/comfusion/after-dark/activity" >}}
86
+      <svg id="activity" class="i-activity" viewBox="0 0 32 32" width="32" height="32" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
87
+        <path d="M4 16 L11 16 14 29 18 3 21 16 28 16" />
88
+      </svg>
89
+    {{< /external >}}
90
+  </div>
91
+  <div class="cell -1of12">
92
+    {{< external title="Source" rel="prefetch" target="_self" itemtype="significantLink" href="https://git.habd.as/comfusion/after-dark/" >}}
93
+      <svg id="source" class="i-code" viewBox="0 0 32 32" width="32" height="32" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
94
+        <path d="M10 9 L3 17 10 25 M22 9 L29 17 22 25 M18 7 L14 27" />
95
+      </svg>
96
+    {{< /external >}}
97
+  </div>
98
+  <div class="cell -1of12">
99
+    {{< external title="Chat" rel="noopener" itemtype="significantLink" href="https://t.me/joinchat/Iw_6FEhmKL9sPUAukX9jzg" >}}
100
+      <svg id="chat" class="i-msg" viewBox="0 0 32 32" width="32" height="32" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
101
+        <path d="M2 4 L30 4 30 22 16 22 8 29 8 22 2 22 Z" />
102
+      </svg>
103
+    {{< /external >}}
104
+  </div>
105
+  <div class="cell -1of12">
106
+    {{< external title="Download" rel="prefetch" target="_self" itemtype="significantLink" href="https://git.habd.as/comfusion/after-dark/#getting-started" >}}
107
+      <svg id="download" class="i-download" viewBox="0 0 32 32" width="32" height="32" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
108
+        <path d="M9 22 C0 23 1 12 9 13 6 2 23 2 22 10 32 7 32 23 23 22 M11 26 L16 30 21 26 M16 16 L16 30" />
109
+      </svg>
110
+    {{< /external >}}
111
+  </div>
112
+</div>
113
+
114
+[1]: https://t.me/joinchat/Iw_6FEhmKL9sPUAukX9jzg

+ 31
- 0
docs/content/feature/air-gapping.md View File

@@ -0,0 +1,31 @@
1
++++
2
+title = "Air Gapping"
3
+description = "Build and run your entire site without Internet access."
4
+categories = ["security"]
5
+tags = ["privacy", "networking"]
6
+features = ["related content"]
7
++++
8
+
9
+Unless running the [Quick Installer](../quick-installer) After Dark does not require an Internet connection to function. Leverage this feature in creative ways:
10
+
11
+- Keep a personal journal while couchsurfing through Southeast Asia.
12
+- Develop your content using {{< external href="https://termux.com" text="Termux" />}} on Android in airplane mode.
13
+- Run your site behind a NAT or firewall blocking all outbound requests.
14
+- Review the [Online Help](../online-help) docs during a flight on Virgin Galactic.
15
+- Report local news from West Timor without tipping off the authorities.
16
+- Create a [PhotoSwipe Gallery](modules/hall-of-mirrors) while trekking the Mount Nimbus via ferrata.
17
+- Document the Syrian Civil War without revealing activity to ISPs.
18
+
19
+By default After Dark makes no outbound requests **except** when viewing non-essential [Online Help](../online-help) and where appropriate to cover related functionality.
20
+
21
+## Ephemeral hosting with end-to-end encryption
22
+
23
+Using {{< external href="https://serveo.net" text="Serveo" />}} you may briefly expose your site to the Internet with end-to-end encryption, no sign-up required.
24
+
25
+Serve and expose your site with the following command:
26
+
27
+```sh
28
+$ hugo serve --disableLiveReload & ssh -R 80:localhost:1313 serveo.net
29
+```
30
+
31
+Once started press `g` for traffic inspection, or quit to go offline and use `fg` to return to `hugo`. Install {{< external href="https://matt.ucc.asn.au/dropbear/dropbear.html" text="dropbear" />}} or {{< external href="https://www.openssh.com" text="openssh" />}} if you need `ssh`.

+ 101
- 0
docs/content/feature/code-highlighter.md View File

@@ -0,0 +1,101 @@
1
++++
2
+title = "Code Highlighter"
3
+description = "Highlight code written in more than 160 languages."
4
+categories = ["Experience"]
5
+tags = ["color", "style", "syntax"]
6
+features = ["snippets", "related content"]
7
++++
8
+
9
+After Dark uses a customized version of {{< external href="https://atom.io/themes/one-dark-syntax" text="One Dark Syntax" />}} to produce print-friendly code highlighting for more than 160 languages.
10
+
11
+<style>.card-content .inner { overflow: scroll; height: 200px; }</style>
12
+{{< hackcss-card header="Supported Languages" text="ABNF, ANTLR, APL, ActionScript, ActionScript 3, Ada, Angular2, ApacheConf, AppleScript, Awk, BNF, Ballerina, Base Makefile, Bash, Batchfile, BlitzBasic, Brainfuck, C, C#, C++, CFEngine3, CMake, COBOL, CSS, Cap'n Proto, Ceylon, ChaiScript, Cheetah, Clojure, CoffeeScript, Common Lisp, Coq, Crystal, Cython, DTD, Dart, Diff, Django/Jinja, Docker, EBNF, Elixir, Elm, EmacsLisp, Erlang, FSharp, Factor, Fish, Forth, Fortran, GAS, GDScript, GLSL, Genshi, Genshi HTML, Genshi Text, Gnuplot, Go, Go HTML Template, Go Text Template, Groovy, HTML, HTTP, Handlebars, Haskell, Haxe, Hexdump, Hy, INI, Idris, Io, JSON, JSX, Java, JavaScript, Julia, Kotlin, LLVM, Lighttpd configuration file, Lua, Mako, Mason, Mathematica, MiniZinc, Modula-2, MorrowindScript, MySQL, Myghty, NASM, Newspeak, Nginx configuration file, Nim, Nix, OCaml, Objective-C, Octave, Org Mode, PHP, PL/pgSQL, POVRay, PacmanConf, Perl, Pig, PkgConfig, PostScript, PostgreSQL SQL dialect, PowerShell, Prolog, Protocol Buffer, Puppet, Python, Python 3, QBasic, R, Racket, Ragel, Rexx, Ruby, Rust, SCSS, SPARQL, SQL, Sass, Scala, Scheme, Scilab, Smalltalk, Smarty, Snobol, Solidity, SquidConf, Swift, TASM, TOML, Tcl, Tcsh, TeX, Termcap, Terminfo, Terraform, Thrift, Transact-SQL, Turtle, Twig, TypeScript, TypoScript, TypoScriptCssData, TypoScriptHtmlData, VHDL, VimL, WDTE, XML, Xorg, YAML, cfstatement, markdown, reStructuredText, reg, systemverilog, verilog" />}}
13
+
14
+To activate the highlighter use the Hugo {{% external href="https://gohugo.io/content-management/syntax-highlighting/#highlight-shortcode" %}}`highlight` shortcode{{% /external %}} or indicate the {{< external href="https://gohugo.io/content-management/syntax-highlighting/#list-of-chroma-highlighting-languages" text="highlighting language" />}} in a fenced code block within your markdown:
15
+
16
+````
17
+```go-html-template
18
+<div class="alert {{ with .type }}alert-{{ . }}{{ end }}">
19
+  {{ .body }}
20
+</div>
21
+```
22
+````
23
+
24
+Resulting in the following highlighted code:
25
+
26
+```go-html-template
27
+<div class="alert {{ with .type }}alert-{{ . }}{{ end }}">
28
+  {{ .body }}
29
+</div>
30
+```
31
+
32
+Or combine with the {{% external href="https://gohugo.io/content-management/syntax-highlighting/#highlight-shortcode" %}}`highlight` shortcode{{% /external %}} and `include` [Snippet](../page-snippets):
33
+
34
+```html
35
+{{</* highlight css */>}}
36
+{{</* include file="themes/after-dark/static/css/syntax.css" */>}}
37
+{{</* /highlight */>}}
38
+```
39
+
40
+To see the CSS used to display the highlighter highlighting highlighted:
41
+
42
+{{< highlight css >}}
43
+{{< include type="source" file="themes/after-dark/static/css/syntax.css" >}}
44
+{{< /highlight >}}
45
+
46
+And if you're really enterprising why not create some executable ASCII art representing the name of the game you implemented in the language used:
47
+
48
+```brainfuck
49
+
50
+                           Linus Akesson presents:
51
+                  The Game Of Life implemented in Brainfuck
52
+
53
+       +>>++++[<++++>-]<[<++++++>-]+[<[>>>>+<<<<-]>>>>[<<<<+>>>>>>+<<-]<+
54
+   +++[>++++++++<-]>.[-]<+++[>+++<-]>+[>>.+<<-]>>[-]<<<++[<+++++>-]<.<<[>>>>+
55
+ <<<<-]>>>>[<<<<+>>>>>>+<<-]<<[>>>>.+<<<++++++++++[<[>>+<<-]>>[<<+>>>>>++++++++
56
+ +++<<<-]<[>+<-]>[<+>>>>+<<<-]>>>[>>>>>>>>>>>>+>+<<     <<<<<<<<<<<-]>>>>>>>>>>
57
+>>[-[>>>>+<<<<-]>[>>>>+<<<<-]>>>]>      >>[<<<+>>  >-    ]<<<[>>+>+<<<-]>[->[<<<
58
+<+>>>>-]<[<<<  <+>      >>>-]<<<< ]<     ++++++  ++       +[>+++++<-]>>[<<+>>-]<
59
+<[>---<-]>.[- ]         <<<<<<<<< <      <<<<<< <         -]++++++++++.[-]<-]>>>
60
+>[-]<[-]+++++           +++[>++++        ++++<     -     ]>--.[-]<,----------[<+
61
+>-]>>>>>>+<<<<< <     <[>+>>>>>+>[      -]<<<      <<   <<-]>++++++++++>>>>>[[-]
62
+<<,<<<<<<<->>>> >    >>[<<<<+>>>>-]<<<<[>>>>+      >+<<<<<-]>>>>>----------[<<<<
63
+<<<<+<[>>>>+<<<      <-]>>>>[<<<<+>>>>>>+<<-      ]>[>-<-]>++++++++++[>+++++++++
64
+++<-]<<<<<<[>>>      >+<<<<-]>>>>[<<<<+>>>>>      >+<<-]>>>>[<<->>-]<<++++++++++
65
+[>+<-]>[>>>>>>>      >>>>>+>+<<<<      <<<<<      <<<<-]>>> >>     >>>>>>>[-[>>>
66
+>+<<<<-]>[>>>>       +<<<<-]>> >       ]>> >           [<< <        +>>>-]+<<<[>
67
+>>-<<<-]>[->[<      <<<+>>>>-]         <[ <            < <           <+>>>>-]<<<
68
+<]<<<<<<<<<<<, [    -]]>]>[-+++        ++               +    +++     ++[>+++++++
69
+++++>+++++++++ +    +<<-]>[-[>>>      +<<<-      ]>>>[ <    <<+      >>>>>>>+>+<
70
+<<<<-]>>>>[-[> >    >>+<<<<-]>[>      >>>+< <    <<-]> >    >]>      >>[<<<+>>>-
71
+]<<<[>>+>+<<< -     ]>[->[<<<<+>      >>>-] <    [<<< <    +>>       >>-]<<<<]<<
72
+<<<<<<[>>>+<< <     -]>>>[<<<+>>      >>>>> +    >+<< <             <<-]<<[>>+<<
73
+-]>>[<<+>>>>>      >+>+<<<<<-]>>      >>[-[ >    >>>+ <            <<<-]>[>>>>+<
74
+<<<-]>[>>>>+<      <<<-]>>]>>>[ -    ]<[>+< -    ]<[ -           [<<<<+>>>>-]<<<
75
+<]<<<<<<<<]<<      <<<<<<<<++++ +    +++++  [   >+++ +    ++++++[<[>>+<<-]>>[<<+
76
+>>>>>++++++++ +    ++<<<     -] <    [>+<- ]    >[<+ >    >>>+<<<-]>>>[<<<+>>>-]
77
+<<<[>>>+>>>>  >    +<<<<     <<      <<-]> >    >>>>       >>>[>>+<<-]>>[<<+<+>>
78
+>-]<<<------ -    -----[     >>      >+<<< -    ]>>>       [<<<+> > >>>>>+>+<<<<
79
+<-]>>>>[-[>> >    >+<<<<    -] >     [>>>> +    <<<<-       ]>>> ]  >>>[<<<+>>>-
80
+]<<<[>>+>+<< <    -]>>>     >>           > >    [<<<+               >>>-]<<<[>>>
81
++<<<<<+>>-                  ]>           >     >>>>>[<             <<+>>>-]<<<[>
82
+>>+<<<<<<<                  <<+         >      >>>>>-]<          <<<<<<[->[<<<<+
83
+>>>>-]<[<<<<+>>>>-]<<<<]>[<<<<<<    <+>>>      >>>>-]<<<<     <<<<<+++++++++++[>
84
+>>+<<<-]>>>[<<<+>>>>>>>+>+<<<<<-]>>>>[-[>     >>>+<<<<-]>[>>>>+<<<<-]>>>]>>>[<<<
85
++>>>-]<<<[>>+>+<<<-]>>>>>>>[<<<+>>>-]<<<[     >>>+<<<<<+>>-]>>>>>>>[<<<+>>>-]<<<
86
+[>>>+<<<<<<<<<+>>>>>>-]<<<<<<<[->[< <  <     <+>>>>-]<[<<<<+>>>>-]<<<<]>[<<<<<<<
87
++>>>>>>>-]<<<<<<<<<+++++++++++[>>> >        >>>+>+<<<<<<<<-]>>>>>>>[-[>>>>+<<<<-
88
+]>[>>>>+<<<<-]>>>]>>>[<<<+>>>-]<<< [       >>+>+<<<-]>>>>>>>[<<<+>>>-]<<<[>>>+<<
89
+<<<+>>-]>>>>>>>[<<<+>>>-]<<<[>>>+<        <<<<<<<<+>>>>>>-]<<<<<<<[->[<<<<+>>>>-
90
+ ]<[<<<<+>>>>-]<<<<]>[<<<<<<<+>>>>>      >>-]<<<<<<<----[>>>>>>>+<<<<<<<+[>>>>>
91
+ >>-<<<<<<<[-]]<<<<<<<[>>>>>>>>>>>>+>+<<<<<<<<<<<<<-][   lft@df.lth.se   ]>>>>>
92
+   >>>>>>>[-[>>>>+<<<<-]>[>>>>+<<<<-]>[>>>>+<<<<-]>>]>>>[-]<[>+<-]<[-[<<<<+>>
93
+       >>-]<<<<]<<<<<<[-]]<<<<<<<[-]<<<<-]<-]>>>>>>>>>>>[-]<<]<<<<<<<<<<]
94
+
95
+       Type for instance "fg" to toggle the cell at row f and column g
96
+                  Hit enter to calculate the next generation
97
+                                Type q to quit
98
+
99
+```
100
+
101
+That really is Brainfuck.

+ 78
- 0
docs/content/feature/custom-layouts.md View File

@@ -0,0 +1,78 @@
1
++++
2
+title = "Custom Layouts"
3
+description = "Customize layouts without modifying theme source."
4
+categories = ["customizing"]
5
+tags = ["layout", "templating", "style"]
6
+features = ["code highlighter", "snippets", "related content"]
7
++++
8
+
9
+After Dark uses block templates to facilitate the creation of unique page layouts anywhere on your site. Use them to add [Snippets](../snippets) to pages in a section, selectively apply [Custom Styles](../custom-styles) or add an about section to the homepage.
10
+
11
+## How it works
12
+
13
+Given the following `block` with optional default value:
14
+
15
+```go-html-template
16
+<title>{{ block "title" }}Site Title{{ end }}</title>
17
+```
18
+
19
+Inheriting templates may omit the block and keep the default value or `define` the block to change its value, as shown here:
20
+
21
+```go-html-template
22
+{{ define "title" }}Page Title | Site Title{{ end }}
23
+```
24
+
25
+Combined with {{< external href="https://gohugo.io/templates/lookup-order/" text="Lookup Order in Hugo" />}} blocks become valuable in designating editable regions within, and improving reuse of, existing template files.
26
+
27
+## Applied in context
28
+
29
+Here's the template used to display an individual page in After Dark:
30
+
31
+{{< highlight go-html-template >}}
32
+{{< include "themes/after-dark/layouts/_default/single.html" >}}
33
+{{< /highlight >}}
34
+
35
+There's not much to it. Most of the code is inherited from another template, giving a clear picture of the page structure and making modifications trivial.
36
+
37
+## Creating your own
38
+
39
+Imagine you're creating an Audiobooks section for your site and want two new custom layouts: one to list audio clips and another to describe them.
40
+
41
+To achieve this using block templates first create an `audiobook` section with a single page to describe a clip:
42
+
43
+```sh
44
+$ hugo new audiobook/the-power-of-now.md
45
+```
46
+
47
+Resulting in the following `content` tree structure:
48
+
49
+```
50
+├── assets
51
+├── content
52
+│   └── audiobook
53
+│       └── the-power-of-now.md
54
+├── layouts
55
+```
56
+
57
+If already serving your site the Audiobooks section and page will immediately using the default block templates. To customize from default add a `list.html` and `single.html` to a `layouts/audiobook` directory in your site.
58
+
59
+If the files don't exist yet, copy them from theme defaults:
60
+
61
+```sh
62
+$ mkdir -p layouts/audiobook
63
+$ cp themes/after-dark/layouts/_default/list.html layouts/audiobook
64
+$ cp themes/after-dark/layouts/_default/single.html layouts/audiobook
65
+```
66
+
67
+Resulting in the following `layouts` tree structure:
68
+
69
+```
70
+├── content
71
+├── layouts
72
+│   └── audiobook
73
+│       ├── list.html
74
+│       └── single.html
75
+├── static
76
+```
77
+
78
+From there adjust the new `list.html` and `single.html` layouts, and leverage [Custom Styles](../custom-styles) and {{< external href="https://gohugo.io/content-management/archetypes/" text="Hugo Archetypes" />}} to achieve the desired result.

+ 32
- 0
docs/content/feature/custom-styles.md View File

@@ -0,0 +1,32 @@
1
++++
2
+title = "Custom Styles"
3
+description = "Modify theme styles for complete design control."
4
+categories = ["customizing"]
5
+tags = ["color", "style", "branding"]
6
+features = ["code highlighter", "snippets"]
7
++++
8
+
9
+After Dark uses {{< external href="https://gohugo.io/hugo-pipes/" text="Hugo Pipes" />}} to enable customization of theme styles using CSS. Left unmodified the following custom styles are provided by default:
10
+
11
+{{< highlight css "linenos=inline" >}}
12
+{{< include "themes/after-dark/assets/css/custom.css" >}}
13
+{{< /highlight >}}
14
+
15
+Adjust them from `custom.css` in the site `assets/css` directory:
16
+
17
+```
18
+├── archetypes
19
+├── assets
20
+│   └── css
21
+│       └── custom.css
22
+├── content
23
+```
24
+
25
+If the file doesn't exist yet, copy it from the theme default:
26
+
27
+```sh
28
+$ mkdir -p assets/css
29
+$ cp themes/after-dark/assets/css/custom.css assets/css
30
+```
31
+
32
+Then open the file and begin editing, or remove it to restore default styles.

+ 80
- 0
docs/content/feature/display-variants.md View File

@@ -0,0 +1,80 @@
1
++++
2
+title = "Display Variants"
3
+description = "Choose one of eight included skin styles."
4
+categories = ["customizing"]
5
+tags = ["color", "style", "branding"]
6
+features = ["code highlighter", "snippets", "related content"]
7
++++
8
+
9
+After Dark uses {{< external href="https://hackcss.egoist.moe" text="hackcss" />}} to provide four color palettes and two display modes. Toggle between them from {{< external href="https://gohugo.io/getting-started/configuration/" text="Site Configuration" />}} for 8 possible styles.
10
+
11
+<style>table[summary] td pre { margin:0 }</style>
12
+<table summary="Display Variations">
13
+  <thead>
14
+    <tr>
15
+      <th rowspan="2">Palette</th>
16
+      <th colspan="2">Mode</th>
17
+    </tr>
18
+    <tr>
19
+      <th>Hack</th>
20
+      <th>Standard</th>
21
+    </tr>
22
+  </thead>
23
+  <tbody>
24
+    <tr>
25
+      <td>Dark</td>
26
+      <td><i>None required.</i></td>
27
+      <td class="highlight">
28
+        <pre><code><span class="p">[</span><span class="nx">params</span><span class="p">.</span><span class="nx">hackcss</span><span class="p">]</span>
29
+  <span class="nx">mode</span> <span class="p">=</span> <span class="s2">&quot;standard&quot;</span></code></pre>
30
+      </td>
31
+    </tr>
32
+    <tr>
33
+      <td style="background-color:#181818;color:#ccc">Dark Grey</td>
34
+      <td class="highlight">
35
+        <pre><code><span class="p">[</span><span class="nx">params</span><span class="p">.</span><span class="nx">hackcss</span><span class="p">]</span>
36
+  <span class="nx">palette</span> <span class="p">=</span> <span class="s2">&quot;dark-grey&quot;</span></code></pre>
37
+      </td>
38
+      <td class="highlight">
39
+        <pre><code><span class="p">[</span><span class="nx">params</span><span class="p">.</span><span class="nx">hackcss</span><span class="p">]</span>
40
+  <span class="nx">mode</span> <span class="p">=</span> <span class="s2">&quot;standard&quot;</span>
41
+  <span class="nx">palette</span> <span class="p">=</span> <span class="s2">&quot;dark-grey&quot;</span></code></pre>
42
+      </td>
43
+    </tr>
44
+    <tr>
45
+      <td style="background-color:#073642;color:#78909c">Solarized Dark</td>
46
+      <td class="highlight">
47
+        <pre><code><span class="p">[</span><span class="nx">params</span><span class="p">.</span><span class="nx">hackcss</span><span class="p">]</span>
48
+  <span class="nx">palette</span> <span class="p">=</span> <span class="s2">&quot;solarized-dark&quot;</span></code></pre>
49
+      </td>
50
+      <td class="highlight">
51
+        <pre><code><span class="p">[</span><span class="nx">params</span><span class="p">.</span><span class="nx">hackcss</span><span class="p">]</span>
52
+  <span class="nx">mode</span> <span class="p">=</span> <span class="s2">&quot;standard&quot;</span>
53
+  <span class="nx">palette</span> <span class="p">=</span> <span class="s2">&quot;solarized-dark&quot;</span></code></pre>
54
+      </td>
55
+    </tr>
56
+    <tr>
57
+      <td style="background-color:#fff;color:#000">Light</td>
58
+      <td class="highlight">
59
+        <pre><code><span class="p">[</span><span class="nx">params</span><span class="p">.</span><span class="nx">hackcss</span><span class="p">]</span>
60
+  <span class="nx">palette</span> <span class="p">=</span> <span class="s2">&quot;light&quot;</span></code></pre>
61
+      </td>
62
+      <td class="highlight">
63
+        <pre><code><span class="p">[</span><span class="nx">params</span><span class="p">.</span><span class="nx">hackcss</span><span class="p">]</span>
64
+  <span class="nx">mode</span> <span class="p">=</span> <span class="s2">&quot;standard&quot;</span>
65
+  <span class="nx">palette</span> <span class="p">=</span> <span class="s2">&quot;light&quot;</span></code></pre>
66
+      </td>
67
+    </tr>
68
+  </tbody>
69
+</table>
70
+
71
+The default display variant uses the `dark` color palette with the `hack` display mode. No configuration is necessary to use the default display variant.
72
+
73
+Disable display variants entirely with `disabled = true`:
74
+
75
+```toml
76
+[params.hackcss]
77
+  disabled = true # disable the display variant
78
+```
79
+
80
+When changing variants review [Custom Styles](../custom-styles), [Trim Color](../trim-color) and [Error Page](../error-page), making any adjustments necessary to achieve the desired look-and-feel.

+ 31
- 0
docs/content/feature/error-page.md View File

@@ -0,0 +1,31 @@
1
++++
2
+title = "Error Page"
3
+description = "Give visitors a reason to stay when errors occur."
4
+categories = ["experience"]
5
+tags = ["engagement", "retention", "branding"]
6
+features = ["error page", "snippets", "code highlighter", "related content", "index blocking"]
7
++++
8
+
9
+After Dark includes an animated 404 error page you can display when other pages cannot be found. The error page contains a full-screen background animation and "404" link with Ginsu treatment. Following the link navigates to the homepage.
10
+
11
+{{< hackcss-card header="Interactive Example" >}}
12
+  <iframe title="Error Page Example" width="100%" height="300" src="/404.html"></iframe>
13
+{{< /hackcss-card >}}
14
+
15
+Adjust it from `404.html` in the site `content` directory:
16
+
17
+```
18
+├── archetypes
19
+├── content
20
+│   ├── post
21
+│   └── 404.html
22
+├── layouts
23
+```
24
+
25
+If the file doesn't exist yet, copy it from the theme default:
26
+
27
+```sh
28
+$ cp themes/after-dark/content/404.html content
29
+```
30
+
31
+Configure your web server to redirect to `404.html` when pages cannot be found to use it. Combine with [Voyeur Module](/module/voyeur) for help creating {{< external href="https://gohugo.io/content-management/urls/#aliases" text="Page Aliases" />}}.

+ 45
- 0
docs/content/feature/fuzzy-search.md View File

@@ -0,0 +1,45 @@
1
++++
2
+title = "Fuzzy Search"
3
+description = "Quickly locate indexed content anywhere on the site."
4
+categories = ["navigation"]
5
+tags = ["links", "search", "controls"]
6
+features = ["code highlighter", "snippets", "related content"]
7
+todo = ["link to page layout"]
8
++++
9
+
10
+If a search engine can find it, so can you. Quickly locate indexable content site-wide with fuzzy search. No registration necessary.
11
+
12
+{{< hackcss-card header="Interactive Example" >}}
13
+  <iframe scrolling="no" title="Error Page Example" width="100%" height="300" src="/search?s=uzzy%20searvh"></iframe>
14
+{{< /hackcss-card >}}
15
+
16
+Adjust it from `_index.md` in the site `content/search` directory:
17
+
18
+```
19
+├── archetypes
20
+├── content
21
+│   └── search
22
+│       └── _index.md
23
+├── static
24
+├── themes
25
+```
26
+
27
+If the file doesn't exist, yet create it:
28
+
29
+```sh
30
+$ hugo new search/_index.md
31
+```
32
+
33
+And specify the `JSON` {{< external href="https://gohugo.io/templates/output-formats" text="Output Format" />}} in site config:
34
+
35
+```toml
36
+[outputs]
37
+  home = ["HTML", "RSS", "JSON"]
38
+  section = ["HTML", "RSS", "JSON"]
39
+```
40
+
41
+{{% hackcss-alert type="info" %}}**Note:** This adds `JSON` while keeping the `HTML` and `RSS` defaults.{{% /hackcss-alert %}}
42
+
43
+Once activated your site will begin outputting an `index.json` file during generation, giving fuzzy search the data it needs to help you locate pages.
44
+
45
+Try it by navigating to [domain.example/search](/search), entering a search query and using <kbd>Tab</kbd> to navigate between search results.

+ 52
- 0
docs/content/feature/index-blocking.md View File

@@ -0,0 +1,52 @@
1
++++
2
+title = "Index Blocking"
3
+description = "Define pages to prevent them from appearing in search."
4
+categories = ["search"]
5
+tags = ["links", "search", "robots", "metadata"]
6
+features = ["code highlighter", "related content", "snippets"]
7
++++
8
+
9
+After Dark uses the `noindex` robots meta directive to prevent search engines from crawling and indexing certain parts of your site. It appears in the HTML document `head` and looks like this:
10
+
11
+```html
12
+<meta name="robots" content="noindex">
13
+```
14
+
15
+Unlike {{< external href="http://www.robotstxt.org" text="robots.txt" />}} meta directives are defined within page content itself and unambiguously indicate which, if any, pages should be blocked from indexing — even if some of those pages appear in your site's {{< external href="https://gohugo.io/templates/sitemap-template/" text="Sitemap" />}}.
16
+
17
+To facilitate the discovery of index blocked pages [Fuzzy Search](../fuzzy-search) utilizes the very same meta directive exposed to search engines to prevent disclosure of pages in its own result listings. Therefore, if a page can be found in fuzzy search, that page may ultimately appear on a search engine result page.
18
+
19
+Adjust index blocking per-page using `noindex` {{< external href="https://gohugo.io/content-management/front-matter/" text="Front Matter" />}}:
20
+
21
+```toml
22
+noindex = true # set false or remove to unblock
23
+```
24
+
25
+Block entire sections using an `_index.md` file with the above setting:
26
+
27
+```
28
+├── content
29
+│   ├── legal
30
+│   │   ├── _index.md
31
+│   │   ├── terms.md
32
+│   │   └── privacy.md
33
+│   ├── post
34
+```
35
+
36
+By default the following page types are blocked automatically:
37
+
38
+- Section listings automatically linked to from the [Section Menu](../section-menu);
39
+- [Taxonomy Pages](../taxonomy-pages) such as `Category`, `Tag` and terms listings; and,
40
+- If enabled, the [Fuzzy Search](../fuzzy-search) page or any deep-linked result within.
41
+
42
+Adjust defaults using the `noindex_kinds` setting from {{< external href="https://gohugo.io/getting-started/configuration/" text="Site Configuration" />}}. For example, to enable crawling of section pages add the following to the config:
43
+
44
+```toml
45
+[params]
46
+  noindex_kinds = [
47
+    "taxonomy",
48
+    "taxonomyTerm"
49
+  ] # crawl "section" pages
50
+```
51
+
52
+Learn about {{< external href="https://moz.com/learn/seo/robots-meta-directives" text="Robots Meta Directives on Moz" />}} and see how Google uses `noindex` in {{< external href="https://support.google.com/webmasters/answer/93710" text="Block search indexing with 'noindex'" />}}.

+ 22
- 0
docs/content/feature/keywords-meta.md View File

@@ -0,0 +1,22 @@
1
++++
2
+title = "Keywords Meta"
3
+description = "Add semantic detail regarding content subject matter."
4
+categories = ["search"]
5
+tags = ["metadata", "robots", "SEO"]
6
+features = ["code highlighter", "related content"]
7
++++
8
+
9
+Keywords offer detail to robots regarding the subject matter of your content. After Dark generates keywords automatically for pages given the tags taxonomy for that page, and for other pages using the site's categories taxonomy.
10
+
11
+Adjust key phrases from {{< external href="https://gohugo.io/content-management/front-matter/" text="Front Matter" />}} using a `keywords` array like so:
12
+
13
+```toml
14
+keywords = [
15
+  "web development",
16
+  "digital marketing",
17
+  "social media",
18
+  "link building"
19
+]
20
+```
21
+
22
+While not considered relevant to search rankings, keywords can be a useful way to document target search terms and give more semantic meaning to your pages.

+ 31
- 0
docs/content/feature/last-modified.md View File

@@ -0,0 +1,31 @@
1
++++
2
+title = "Last Modified"
3
+description = "Help visitors understand when posts were last modified."
4
+categories = ["experience"]
5
+tags = ["publishing", "expired", "future", "posts", "date", "time"]
6
+features = ["code highlighter", "snippets", "related content"]
7
++++
8
+
9
+Denote posts with substantive changes or simply draw older, more relevant posts closer to the top of the listings with last modified.
10
+
11
+Modifications will be made obvious to visitors with a visible callout in post summaries and the original publish date will be kept intact in the post bylines.
12
+
13
+For robots, making this change will automatically update Schema Structured Data, RSS feeds and the `lastmod` setting in your {{< external href="https://gohugo.io/templates/sitemap-template/" text="Sitemap" />}}.
14
+
15
+Adjust last modified by adding a `publishdate` to post {{< external href="https://gohugo.io/content-management/front-matter/" text="Front Matter" />}} and updating the `date` to the date and time you would like to show for the modification.
16
+
17
+You can be specific and use a datetime (with timezone offset) like:
18
+
19
+```toml
20
+date = "2017-02-02T01:20:56-06:00"
21
+publishdate = "2016-11-21T10:32:33+08:00"
22
+```
23
+
24
+Or less specific and use just the dates:
25
+
26
+```toml
27
+date = "2017-02-02"
28
+publishdate = "2016-11-21"
29
+```
30
+
31
+It's also possible to future and expiry dates for content in Hugo. To learn more see the documentation on {{< external href="https://gohugo.io/getting-started/usage/#draft-future-and-expired-content" text="Draft, Future, and Expired Content" />}}.

+ 46
- 0
docs/content/feature/lazy-loading.md View File

@@ -0,0 +1,46 @@
1
++++
2
+title = "Lazy Loading"
3
+description = "Defer loading of images, iframes and scripts."
4
+categories = ["experience"]
5
+tags = ["performance", "images", "graphics"]
6
+features = ["code highlighter", "related content", "snippets"]
7
++++
8
+
9
+After Dark uses {{< external href="https://github.com/aFarkas/lazysizes" text="lazySizes" />}} to prioritize loading of certain external resources to improve page load times and help reduce overall bandwidth consumption.
10
+
11
+Lazy loading works automatically for [Post Images](../post-images) and when using the [Figure Shortcode](/shortcode/figure), or related [Snippet](../snippets), as seen here:
12
+
13
+{{< figure
14
+  src="https://source.unsplash.com/Y-w15LfHO8w/5184x3456"
15
+  lqipsrc="https://source.unsplash.com/Y-w15LfHO8w/1080x720"
16
+  caption="Be Creative"
17
+  attr="AK¥N Cakiner"
18
+  attrlink="https://unsplash.com/@akin"
19
+>}}
20
+
21
+To use lazy loading in [Custom Layouts](../custom-layouts) or when creating your own [Shortcodes](/shortcode) adding the `lazyload` class and relevant `data` attributes as shown here:
22
+
23
+```html
24
+<!-- non-responsive -->
25
+<img data-src="image.jpg" class="lazyload">
26
+```
27
+
28
+```html
29
+<!-- responsive with automatic sizes calculation -->
30
+<img
31
+  data-sizes="auto"
32
+  data-src="image2.jpg"
33
+  data-srcset="image1.jpg 300w, image2.jpg 600w, image3.jpg 900w"
34
+  class="lazyload">
35
+```
36
+
37
+```html
38
+<!-- iframe example -->
39
+<iframe frameborder="0"
40
+  class="lazyload"
41
+  allowfullscreen
42
+  data-src="//www.youtube.com/embed/ZfV-aYdU4uE">
43
+</iframe>
44
+```
45
+
46
+See {{< external href="https://github.com/aFarkas/lazysizes" text="lazySizes" />}} for additional information and examples.

+ 28
- 0
docs/content/feature/link-typing.md View File

@@ -0,0 +1,28 @@
1
++++
2
+title = "Link Typing"
3
+description = "Explicitly indicate relationships between documents."
4
+categories = ["navigation"]
5
+tags = ["links", "accessibility", "taxonomy", "metadata"]
6
+features = ["code highlighter", "snippets", "related content"]
7
++++
8
+
9
+After Dark uses link typing to indicate semantic relationships between documents. By default the `alternate` link type is used to highlight the presence of web feeds on the homepage and in taxonomy listings:
10
+
11
+```html
12
+<link href="https://domain.example/index.xml" rel="alternate" type="application/rss+xml" title="After Dark">
13
+<link href="http://domain.example/categories/privacy/index.xml" rel="alternate" type="application/rss+xml" title="After Dark">
14
+<link href="http://domain.example/tags/color/index.xml" rel="alternate" type="application/rss+xml" title="After Dark">
15
+```
16
+
17
+In addition to defaults After Dark recognizes the `prev` and `next` link types if specified in page {{< external href="https://gohugo.io/content-management/front-matter/" text="Front Matter" />}}:
18
+
19
+```toml
20
+prev = "/series/learn-to-code/part-one/"
21
+next = "/series/learn-to-code/part-three/"
22
+```
23
+
24
+Use `prev` and `next` link types for segmented articles, [Live Blog Postings](https://schema.org/LiveBlogPosting) or to mimic the traits of a `series` taxonomy if no series taxonomy is present.
25
+
26
+Link Types are commonly shown at the top of the page in text browsers such as {{< external href="http://elinks.or.cz" text="ELinks" />}} as an auxiliary form of navigation and can help robots and users better understand relationships between your content.
27
+
28
+Learn more about {{< external href="http://devdocs.io/html/link_types" text="link types" />}} and {{< external href="https://gohugo.io/content-management/taxonomies" text="Taxonomies in Hugo" />}}.

+ 11
- 0
docs/content/feature/module-system.md View File

@@ -0,0 +1,11 @@
1
++++
2
+title = "Module System"
3
+description = "Enhance functionality with prebuilt add-on modules."
4
+categories = ["experience"]
5
+tags = ["imaging", "graphics", "analytics", "installation"]
6
+features = ["module system", "related content"]
7
++++
8
+
9
+After Dark uses {{< external href="https://gohugo.io/themes/theme-components/" text="Hugo Theme Components" />}} to produce a system for including a number of prebuilt add-on [Modules](/module) providing additional functionality.
10
+
11
+See [Modules](/module) a summary of available modules.

+ 9
- 0
docs/content/feature/online-help.md View File

@@ -0,0 +1,9 @@
1
++++
2
+title = "Online Help"
3
+description = "You're looking at it."
4
+categories = ["experience"]
5
+tags = ["security", "networking"]
6
+features = ["related content"]
7
++++
8
+
9
+Documentation seen here included in After Dark and available during [offline use](../air-gapping).

+ 33
- 0
docs/content/feature/post-bylines.md View File

@@ -0,0 +1,33 @@
1
++++
2
+title = "Post Bylines"
3
+description = "Create human and machine readable bylines in posts."
4
+categories = ["experience"]
5
+tags = ["author", "posts", "taxonomy", "publishing"]
6
+features = ["related content", "code highlighter"]
7
+notes = [
8
+  "update 'taxonomy pages' post byline example if modified"
9
+]
10
++++
11
+
12
+After Dark creates rich post bylines automatically. Bylines include optional author name, word count, links to [Taxonomy Pages](../taxonomy-pages) and [Structured Data](../structured-data).
13
+
14
+{{% hackcss-card header="Example Byline" %}}
15
+Published [by `author`] [`publishdate` or `date`] in [navigation](/categories/navigation) and tagged [links](/tags/links) and [taxonomy](/tags/taxonomy) using [`wordcount`] words.
16
+{{% /hackcss-card %}}
17
+
18
+If `author` is specified in {{< external href="https://gohugo.io/getting-started/configuration/" text="Site Configuration" />}} params or post {{< external href="https://gohugo.io/content-management/front-matter/" text="Front Matter" />}} it will be included automatically in the byline attributing the author:
19
+
20
+```toml
21
+[params]
22
+  author = "Billy Joe Jim Bob" # the guy behind the guy behind the guy
23
+```
24
+
25
+Adjust `hide_author` in {{< external href="https://gohugo.io/getting-started/configuration/" text="Site Configuration" />}} to suppress attribution site-wide:
26
+
27
+```toml
28
+[params]
29
+  author = "" # optional setting, not required in config
30
+  hide_author = true # hides author name and related structured data
31
+```
32
+
33
+Combine with `categories` and [Last Modified](../last-modified) to produce unique [Structured Data](../structured-data).

+ 52
- 0
docs/content/feature/post-images.md View File

@@ -0,0 +1,52 @@
1
++++
2
+title = "Post Images"
3
+description = "Add graphics to posts without touching an image editor."
4
+categories = ["experience"]
5
+tags = ["imaging", "graphics", "posts"]
6
+features = ["code highlighter", "snippets", "related content"]
7
+todo = [
8
+  "normalize with the actual code to create a responsive post image"
9
+]
10
++++
11
+
12
+Add visual appeal to your posts with post images. Post images appear above post content and leverage {{< external href="https://gohugo.io/content-management/image-processing/" text="Hugo Image Processing" />}} and [Lazy Loading](../lazy-loading) to provide fully automatic, lazy-loaded responsive images with <abbr title="Low-Quality Image Placeholders">LQIP</abbr> and built-in art direction.
13
+
14
+{{< figure
15
+  src="https://source.unsplash.com/Y-w15LfHO8w/5184x3456"
16
+  lqipsrc="https://source.unsplash.com/Y-w15LfHO8w/1080x720"
17
+  caption="Be Creative"
18
+  attr="AK¥N Cakiner"
19
+  attrlink="https://unsplash.com/@akin"
20
+>}}
21
+
22
+Using post images requires some opinion with regard to the structure of your content. To create a post with a post image you must:
23
+
24
+1. Bundle image and content in a directory as shown below.
25
+2. Update post {{< external href="https://gohugo.io/content-management/front-matter/" text="Front Matter" />}} as described below.
26
+
27
+An example page bundle might look like:
28
+
29
+```
30
+├── archetypes
31
+├── content
32
+│   └── post
33
+│       └── secure-your-digital-life
34
+│           ├── images
35
+│           │   └── florian-klauer-119557-unsplash.jpg
36
+│           └── index.md
37
+├── layouts
38
+```
39
+
40
+With a `header` image specified in `index.md`:
41
+
42
+```toml
43
+[[resources]]
44
+  src = "images/*119557*"
45
+  name = "header"
46
+```
47
+
48
+{{% hackcss-alert type="info" %}}**Tip:** Orientation is not significant. For optimal display use larger images.{{% /hackcss-alert %}}
49
+
50
+That's it! After Dark does the rest.
51
+
52
+For help understanding bundles see {{< external href="https://gohugo.io/content-management/page-bundles/" text="Page Bundles in Hugo" />}}.

+ 19
- 0
docs/content/feature/quick-installer.md View File

@@ -0,0 +1,19 @@
1
++++
2
+title = "Quick Installer"
3
+description = "One command is all you need to start a new website."
4
+categories = ["experience"]
5
+tags = ["setup", "installation", "scripts"]
6
+features = ["code highlighter", "snippets", "related content"]
7
+notes = [
8
+  "review 'module-system' when adding or removing installed add-ons",
9
+  "also review selection of pre-installed modules (see front matter)"
10
+]
11
++++
12
+
13
+After Dark includes a portable installation script located in `bin/install`. Run it using `./bin/install` or copy the code below into a file and execute it:
14
+
15
+{{< highlight shell "linenos=inline" >}}
16
+{{< include "themes/after-dark/bin/install" >}}
17
+{{< /highlight >}}
18
+
19
+Installation has been tested on Debian, BusyBox and Darwin, and should also work under Alpine, Ubuntu, Docker and Windows via {{< external href="http://cmder.net" text="Cmder" />}} without added dependencies.

+ 24
- 0
docs/content/feature/referrer-policy.md View File

@@ -0,0 +1,24 @@
1
++++
2
+title = "Referrer Policy"
3
+description = "Specify how much info is passed to external links."
4
+categories = ["security"]
5
+tags = ["privacy", "security", "SEO", "metadata"]
6
+features = ["related content", "code highlighter", "snippets"]
7
++++
8
+
9
+After Dark adds a {{< external href="https://w3c.github.io/webappsec-referrer-policy/" text="Referrer Policy" />}} to improve site security and increase visitor privacy beyond browser defaults using a simple site-wide policy.
10
+
11
+Adjust the site-wide default of `same-origin` from {{< external href="https://gohugo.io/getting-started/configuration/" text="Site Configuration" />}}:
12
+
13
+```toml
14
+[params.seo]
15
+  referrer = "same-origin"
16
+```
17
+
18
+Relax the security policy by:
19
+
20
+- Adjusting the site-wide default;
21
+- Using the `referrerpolicy` attribute of the [External Shortcode](/shortcode/external);
22
+- Using a {{< external href="https://w3c.github.io/webappsec-referrer-policy/#referrer-policy-delivery-nested" text="nested browsing context" />}} to adjust contextually.
23
+
24
+See {{< external href="https://w3c.github.io/webappsec-referrer-policy/" text="Referrer Policy on W3C" />}} for a list of possible values.

+ 24
- 0
docs/content/feature/related-content.md View File

@@ -0,0 +1,24 @@
1
++++
2
+title = "Related Content"
3
+description = "Promote more of your content to your site's visitors."
4
+categories = ["navigation"]
5
+tags = ["links", "retention", "engagement"]
6
+features = ["code highlighter", "snippets", "related content"]
7
++++
8
+
9
+After Dark provides related content to help users find more information that's relevant to them and can increase page views and time spent on your site.
10
+
11
+When two or more pages or posts contain the same taxonomy `tags` they will be linked in a section as shown near the bottom of the page. The section appears automatically below [Post Bylines](../post-bylines) with a default maximum of 7 items shown.
12
+
13
+{{% hackcss-alert type="info" %}}**Tip:** Create a [Custom Layout](/feature/custom-layouts) to show Related Content outside posts.{{% /hackcss-alert %}}
14
+
15
+Adjust the maximum from {{< external href="https://gohugo.io/getting-started/configuration/" text="Site Configuration" />}} by adding `related_content_limit`:
16
+
17
+```toml
18
+[params]
19
+  related_content_limit = 5 # limit to 5 items maximum site-wide
20
+```
21
+
22
+Remove the setting to return to the default.
23
+
24
+See {{< external href="https://gohugo.io/content-management/related/" text="Related Content in Hugo" />}} for additional configuration options.

+ 38
- 0
docs/content/feature/release-hashes.md View File

@@ -0,0 +1,38 @@
1
++++
2
+title = "Release Hashes"
3
+description = "Verify you are using genuine After Dark software."
4
+categories = ["security"]
5
+tags = ["privacy", "security", "cryptography", "npm", "git"]
6
+features = ["code highlighter", "related content"]
7
++++
8
+
9
+After Dark utilizes the {{< external href="https://www.npmjs.com" text="NPM" />}} CLI to produce a unique cryptographic hash each release, enabling any copy to be uniquely identified regardless of its source.
10
+
11
+Release hashes use the <abbr title="Secure Hashing Algorithm">SHA-512</abbr> algorithm and look like this:
12
+
13
+{{< hackcss-alert type="success" >}}
14
+<samp>VWcn7AxXUkZRGsRIM/6A5RjqW7DOPH+XbnLGRp7hpr0TCH/9l31ug2h2JaIlEvsDzOPRcZDBdyZvJ4mSm/Rqjg==</samp>
15
+{{< /hackcss-alert >}}
16
+
17
+
18
+Each release a new hash is generated in the following locations:
19
+
20
+- Embedded using PGP in the {{< external href="https://git.habd.as/comfusion/after-dark/releases" text="release source" />}} `git tag` message.
21
+- Codified into the {{< external href="https://registry.npmjs.org/after-dark/latest" text="latest" />}} or {{< external href="https://registry.npmjs.org/after-dark/6.7.9" text="version-specific" />}} NPM package metadata.
22
+- Embedded inside the After Dark [Online Help](../online-help) documentation.
23
+
24
+Upon receiving your copy of After Dark you may use the release hash to verify you are using an unadulterated version of the software.
25
+
26
+Run the [Release Validator](/validate) to quickly check your release offline:
27
+
28
+{{< hackcss-card header="Interactive Release Validator" >}}
29
+<iframe title="Validate Release" scrolling="no" width="100%" height="360" src="/validate"></iframe>
30
+{{< /hackcss-card >}}
31
+
32
+For a more thorough inspection do the following, comparing your hash with those generated during the release as defined above:
33
+
34
+1. Install the {{< external href="https://docs.npmjs.com/cli/npm" text="npm cli" />}} on your machine.
35
+2. Navigate to `themes/after-dark` from within your site.
36
+3. Run `npm run integrity` to generate your SHA-512 hash.
37
+
38
+If everything matches you're all set. If not, please {{< external href="https://git.habd.as/comfusion/after-dark/issues/new" text="Submit an Issue" />}}.

+ 50
- 0
docs/content/feature/section-menu.md View File

@@ -0,0 +1,50 @@
1
++++
2
+title = "Section Menu"
3
+description = "Display a contextual site-wide navigation with links."
4
+categories = ["navigation"]
5
+tags = ["links", "taxonomy"]
6
+features = ["code highlighter", "snippets", "section menu"]
7
+notes = [
8
+  "review 'fuzzy-search' examples if modified"
9
+]
10
++++
11
+
12
+After Dark uses Hugo's {{< external href="https://gohugo.io/templates/menu-templates/#section-menu-for-lazy-bloggers" text="Section Menu for “Lazy” Bloggers" />}} to create a site-wide navigational aid. The section menu is disabled by default.
13
+
14
+{{< hackcss-card header="Interactive Example" >}}
15
+  {{< navmenu >}}
16
+{{< /hackcss-card >}}
17
+
18
+Enable it by toggling the `show_menu` setting in your site configuration:
19
+
20
+```toml
21
+[params]
22
+  show_menu = false # set to `true` to enable section menu
23
+```
24
+
25
+With the menu enabled navigation links will begin appearing automatically on a per-section basis whenever {{< external href="https://gohugo.io/getting-started/usage/#draft-future-and-expired-content" text="Published Content" />}} is available within that section.
26
+
27
+Link to stand-alone pages from {{< external href="https://gohugo.io/content-management/front-matter/" text="Front Matter" />}} by specifying `menu = "main"`:
28
+
29
+```toml
30
+title = "About"
31
+menu = "main"
32
+```
33
+
34
+Adjust link names and menu position by adding the following code block to your {{< external href="https://gohugo.io/getting-started/configuration/" text="Site Configuration" />}} and modifying it to meet your needs:
35
+
36
+```toml
37
+[[menu.main]]
38
+  name = "Home"
39
+  weight = 1
40
+  identifier = "home"
41
+  url = "/"
42
+
43
+[[menu.main]]
44
+  name = "Posts"
45
+  weight = 2
46
+  identifier = "post"
47
+  url = "/post/"
48
+```
49
+
50
+See {{< external href="https://gohugo.io/content-management/menus/" text="Menus in Hugo" />}} for additional information.

+ 51
- 0
docs/content/feature/snippets.md View File

@@ -0,0 +1,51 @@
1
++++
2
+title = "Snippets"
3
+description = "Share code between Shortcodes and Custom Templates."
4
+categories = ["extending"]
5
+tags = ["shortcodes", "templating", "layout"]
6
+features = ["related content", "code highlighter", "snippets"]
7
++++
8
+
9
+Snippets are template abstractions enabling you to reuse the same markup and logic used to create [Shortcodes](/shortcode) in your [Custom Layouts](../custom-layouts).
10
+
11
+Take for example the included [Button Group](/shortcode/button-group) shortcode used for creating a set of [hackcss][1]-styled buttons, which we'll look at in detail here.
12
+
13
+First the partial:
14
+
15
+{{< highlight go-html-template >}}
16
+{{< include "themes/after-dark/layouts/partials/components/buttongroup.html" >}}
17
+{{< /highlight >}}
18
+
19
+Now the shortcode:
20
+
21
+{{< highlight go-html-template >}}
22
+{{< include "themes/after-dark/layouts/shortcodes/hackcss-buttongroup.html" >}}
23
+{{< /highlight >}}
24
+
25
+Notice how the shortcode serves only to collect input and call the partial, which contains all markup and display logic. This delegation of responsibility is the abstraction that enables reuse between content and template.
26
+
27
+Now let's see how to actually use it.
28
+
29
+Use the [Button Group](/shortcode/button-group) shortcode to group buttons in content:
30
+
31
+```html
32
+{{</* hackcss-buttongroup >}}
33
+  {{< hackcss-button text="Left" />}}
34
+  {{< hackcss-button text="Middle" type="info" />}}
35
+  {{< hackcss-button text="Right" isghost="true" />}}
36
+{{< /hackcss-buttongroup */>}}
37
+```
38
+
39
+Which creates a styled button group with three buttons as shown here:
40
+
41
+{{< hackcss-buttongroup >}}
42
+  {{< hackcss-button text="Left" />}}
43
+  {{< hackcss-button text="Middle" type="info" />}}
44
+  {{< hackcss-button text="Right" isghost="true" />}}
45
+{{< /hackcss-buttongroup >}}
46
+
47
+To reuse in layout mirror the `partial` call used inside the shortcode.
48
+
49
+All [Shortcodes](/shortcode) implementing [hackcss][1] components are built using the snippets template abstraction enabling each of them to be reused in [Custom Layouts](../custom-layouts).
50
+
51
+[1]: https://hackcss.egoist.moe

+ 52
- 0
docs/content/feature/social-meta.md View File

@@ -0,0 +1,52 @@
1
++++
2
+title = "Social Meta"
3
+description = "Share links with images on Facebook and Twitter."
4
+categories = ["social"]
5
+tags = ["author", "metadata", "images"]
6
+features = ["code highlighter", "snippets", "related content"]
7
++++
8
+
9
+After Dark provides {{< external text="Open Graph Protocol" href="http://opengraphprotocol.org" />}} and {{< external href="https://developer.twitter.com/en/docs/tweets/optimize-with-cards" text="Twitter Cards" />}} metadata in pages to achieve rich sharing cards on Facebook, Twitter and more:
10
+
11
+![Open Graph sharing card screenshot](data:image/png;base64,{{< include type="image" file="themes/after-dark/images/docs/feat-social-awareness-fs8.png" >}} "Example Open Graph sharing card produced by After Dark")
12
+
13
+Adjust `author` in {{< external href="https://gohugo.io/getting-started/configuration/" text="Site Configuration" />}} to specify name shown, if any:
14
+
15
+```toml
16
+[params]
17
+  author = "Bali Bebas!"
18
+```
19
+
20
+Set or override `author` per page using{{< external href="https://gohugo.io/content-management/front-matter/" text="Front Matter" />}} as shown here:
21
+
22
+```toml
23
+title = "Become a Digital Nomad in Bali: The Lost Guide"
24
+description = "Everything you need to know to become a Digital Nomad in Bali."
25
+author = "After Dark"
26
+date = "2017-02-02T11:57:24+08:00"
27
+publishdate = "2017-01-28T02:31:22+08:00"
28
+images = [
29
+  "https://source.unsplash.com/-09QE4q0ezw/2000x1322"
30
+]
31
+```
32
+
33
+Adjust `images` to specify an external image or, if using {{< external href="https://gohugo.io/content-management/page-bundles/" text="Page Bundles" />}}, specify the relative path to the image resource to use:
34
+
35
+```toml
36
+images = [
37
+  "/post/post-title/images/lana-abie-581813-unsplash.jpg"
38
+]
39
+```
40
+
41
+{{% hackcss-alert type="info" %}}**Why use arrays?** Open Graph supports multiple image sizes. And though After Dark doesn't support multiple sizes, users can create [custom layouts](../custom-layouts) that do.{{% /hackcss-alert %}}
42
+
43
+If no page-level image is provided After Dark will fallback to a site-wide image which may be adjusted or removed from {{< external href="https://gohugo.io/getting-started/configuration/" text="Site Configuration" />}}:
44
+
45
+```toml
46
+[params]
47
+  images = [
48
+    "https://source.unsplash.com/-09QE4q0ezw/2000x1322" # site-wide og:image
49
+  ]
50
+```
51
+
52
+See {{< external href="https://unsplash.com/" text="Unsplash" />}} and {{< external href="https://source.unsplash.com/" text="Unsplash Source" />}} for thousands of royalty-free images.

+ 20
- 0
docs/content/feature/structured-data.md View File

@@ -0,0 +1,20 @@
1
++++
2
+title = "Structured Data"
3
+description = "Give search engines rich info about site structure."
4
+categories = ["search"]
5
+tags = ["metadata", "semantics", "robots", "SEO"]
6
+features = ["related content"]
7
++++
8
+
9
+After Dark generates structured metadata using {{< external "http://schema.org" />}} specifications for blog posts, [Section Menu](../section-menu), [Hall of Mirrors](/module/hall-of-mirrors) image galleries and adapts data automatically using author-defined [Post Bylines](../post-bylines) as shown here:
10
+
11
+Schema Property | Frontmatter Value
12
+--------------- | -----------------
13
+author?         | `author`
14
+datePublished   | `publishdate` or `date`
15
+articleSection  | `[categories]`
16
+wordCount       | `wordcount`
17
+
18
+Consider adding your own structured data when creating [Custom Layouts](../custom-layouts) for improved page semantics and better SEO.
19
+
20
+Learn more about {{< external href="https://moz.com/learn/seo/schema-structured-data" text="Schema Structured Data on Moz" />}}.

+ 82
- 0
docs/content/feature/svg-favicon.md View File

@@ -0,0 +1,82 @@
1
++++
2
+title = "SVG Favicon"
3
+description = "Decorate your site with a unique SVG favicon."
4
+categories = ["customizing"]
5
+tags = ["color", "style", "graphics", "branding"]
6
+features = ["code highlighter", "snippets", "related content"]
7
++++
8
+
9
+After Dark ships with a 169B SVG favicon embedded into every page:
10
+
11
+{{< highlight html >}}
12
+{{< include "themes/after-dark/layouts/partials/head/favicon.html" >}}
13
+{{< /highlight >}}
14
+
15
+The default favicon is a black-colored oblique triangle in the shape of a tepee. The center of the triangle uses negative space to give the illusion of a second equilateral triangle in the shape of a pyramid, or open fire, contained within.
16
+
17
+The color of the icon can be modified by changing the `fill` attribute:
18
+
19
+<style>
20
+.hack figcaption pre {
21
+  margin-top: 1em;
22
+}
23
+.hack .grid {
24
+  margin-top: 3em;
25
+  text-align: center;
26
+}
27
+</style>
28
+<div class="grid">
29
+  <div class="cell -4of12">
30
+    <figure>
31
+      <img src="data:image/svg+xml,%3Csvg%20viewBox='0%200%2046%2045'%20xmlns='http://www.w3.org/2000/svg'%3E%3Ctitle%3EAfter%20Dark%3C/title%3E%3Cpath%20d='M.708%2045L23%20.416%2045.292%2045H.708zM35%2038L23%2019%2011%2038h24z'%20fill='%23f00'/%3E%3C/svg%3E" width="96">
32
+      <figcaption class="highlight">
33
+        <pre class="chroma"><code class="language-toml" data-lang="toml"><span class="nx">fill</span><span class="p">=</span><span class="s1">&quot;%23f00&quot;</span></code></pre>
34
+      </figcaption>
35
+    </figure>
36
+  </div>
37
+  <div class="cell -4of12">
38
+    <figure>
39
+      <img src="data:image/svg+xml,%3Csvg%20viewBox='0%200%2046%2045'%20xmlns='http://www.w3.org/2000/svg'%3E%3Ctitle%3EAfter%20Dark%3C/title%3E%3Cpath%20d='M.708%2045L23%20.416%2045.292%2045H.708zM35%2038L23%2019%2011%2038h24z'%20fill='lime'/%3E%3C/svg%3E" width="96">
40
+      <figcaption class="highlight">
41
+        <pre class="chroma"><code class="language-toml" data-lang="toml"><span class="nx">fill</span><span class="p">=</span><span class="s1">&quot;lime&quot;</span></code></pre>
42
+      </figcaption>
43
+    </figure>
44
+  </div>
45
+  <div class="cell -4of12">
46
+    <figure>
47
+      <img src="data:image/svg+xml,%3Csvg%20viewBox='0%200%2046%2045'%20xmlns='http://www.w3.org/2000/svg'%3E%3Ctitle%3EAfter%20Dark%3C/title%3E%3Cpath%20d='M.708%2045L23%20.416%2045.292%2045H.708zM35%2038L23%2019%2011%2038h24z'%20fill='%2300f'/%3E%3C/svg%3E" width="96">
48
+      <figcaption class="highlight">
49
+        <pre class="chroma"><code class="language-toml" data-lang="toml"><span class="nx">fill</span><span class="p">=</span><span class="s1">&quot;%2300f&quot;</span></code></pre>
50
+      </figcaption>
51
+    </figure>
52
+  </div>
53
+</div>
54
+
55
+Adjust it from `favicon.html` in the site `layouts/partials/head` directory:
56
+
57
+```
58
+├── content
59
+├── layouts
60
+│   └── partials
61
+│       └── head
62
+│           └── favicon.html
63
+├── static
64
+```
65
+
66
+If the file doesn't exist yet, copy it from the theme default:
67
+
68
+```sh
69
+$ mkdir -p layouts/partials/head
70
+$ cp themes/after-dark/layouts/partials/head/favicon.html layouts/partials/head
71
+```
72
+
73
+If optimizing for platform experiences do so from within `favicon.html`:
74
+
75
+{{< highlight go-html-template "linenos=inline" >}}
76
+<meta name="apple-mobile-web-app-capable" content="yes">
77
+<meta name="apple-mobile-web-app-status-bar-style" content="black">
78
+<meta name="apple-mobile-web-app-title" content="{{ .Site.Title }}">
79
+<link rel="apple-touch-icon" href="data:image/png;base64,{{ readFile "static/icon.png" | base64Encode }}">
80
+{{< /highlight >}}
81
+
82
+See the {{< external href="https://github.com/h5bp/html5-boilerplate/blob/6.1.0/dist/doc/extend.md#web-apps" text="H5BP Wiki" />}} for platform-specific requirements and {{< external href="https://gohugo.io/documentation/" text="Hugo Documentation" />}} for help with templating functions and variables.

+ 17
- 0
docs/content/feature/table-of-contents.md View File

@@ -0,0 +1,17 @@
1
++++
2
+title = "Table of Contents"
3
+description = "Quickly locate information in longer posts."
4
+categories = ["navigation"]
5
+tags = ["metadata"]
6
+features = ["related content", "snippets", "code highlighter"]
7
++++
8
+
9
+Automatically generate a table of contents with smooth-scroll links based on the current {{< external href="https://gsnedders.html5.org/outliner/" text="page outline" />}}. To do so add the following to post {{< external href="https://gohugo.io/content-management/front-matter/" text="Front Matter" />}}:
10
+
11
+```toml
12
+toc = true
13
+```
14
+
15
+Set `false`, or simply remove the setting, to disable.
16
+
17
+The table of contents will be collapsed under a disclosure on page load. Once the disclosure is expanded the full page outline will be revealed. Selecting an item in the outline will smooth-scroll to the corresponding section, update the browser history and highlight the section title.

+ 43
- 0
docs/content/feature/taxonomy-pages.md View File

@@ -0,0 +1,43 @@
1
++++
2
+title = "Taxonomy Pages"
3
+description = "Navigate the site using author-defined taxonomies."
4
+categories = ["navigation"]
5
+tags = ["links", "taxonomy"]
6
+features = ["related content", "code highlighter", "snippets"]
7
+aliases = [
8
+  "/feature/page-taxonomies/"
9
+]
10
++++
11
+
12
+After Dark generates categorical and tag taxonomy and taxonomy terms pages and links to them automatically in posts using [Post Bylines](../post-bylines).
13
+
14
+Given the following page {{< external href="https://gohugo.io/content-management/front-matter/" text="Front Matter" />}} for a post type:
15
+
16
+```toml
17
+categories = ["navigation"]
18
+tags = ["links", "taxonomy"]
19
+```
20
+
21
+The following taxonomy links would appear in the byline:
22
+
23
+> Published [by `author`] [`publishdate` or `date`] in [navigation](/categories/navigation) and tagged [links](/tags/links) and [taxonomy](/tags/taxonomy) using [`wordcount`] words.
24
+
25
+The following [Index Blocked](../index-blocking) taxonomy pages generated:
26
+
27
+- [/categories/index.html](/categories/index.html)
28
+- [/categories/navigation/index.html](/categories/navigation/index.html)
29
+- [/tags/index.html](/tags/index.html)
30
+- [/tags/links/index.html](/tags/links/index.html)
31
+- [/tags/taxonomy/index.html](/tags/taxonomy/index.html)
32
+
33
+The following taxonomic web feeds created:
34
+
35
+- [/categories/index.xml](/categories/index.xml)
36
+- [/categories/navigation/index.xml](/categories/navigation/index.xml)
37
+- [/tags/index.xml](/tags/index.xml)
38
+- [/tags/links/index.xml](/tags/links/index.xml)
39
+- [/tags/taxonomy/index.xml](/tags/taxonomy/index.xml)
40
+
41
+The {{< external href="https://gohugo.io/templates/sitemap-template/" text="Sitemap" />}} and [Related Content](../related-content) updated and, if activated, the [Fuzzy Search](../fuzzy-search) JSON search index (weighted on taxonomy) regenerated, all automatically.
42
+
43
+See {{< external href="https://gohugo.io/content-management/taxonomies" text="Taxonomies in Hugo" />}} to learn about taxonomies and how to customize them.

+ 42
- 0
docs/content/feature/telegram-iv.md View File

@@ -0,0 +1,42 @@
1
++++
2
+title = "Instant Views"
3
+description = "Instantly preview your content from within Telegram."
4
+categories = ["social"]
5
+tags = ["author", "templating"]
6
+features = ["related content"]
7
++++
8
+
9
+Provide an {{< external href="https://instantview.telegram.org/" text="Instant View" />}} for users sharing links to your site on Telegram.
10
+
11
+To enable instant views for After Dark create an {{< external href="https://instantview.telegram.org/my/" text="Instant View Template" />}} on the Telegram site using the following template:
12
+
13
+```yaml
14
+# enable for items in the post section
15
+?path: /post/.+
16
+
17
+# define required elements
18
+title: //*[@itemprop="headline"]
19
+body: //*[@itemprop="articleBody"]
20
+
21
+# if cover exists, define images
22
+?exists: //head/meta[@property="og:image"]/@content
23
+cover: //head/meta[@property="og:image"]/@content
24
+image_url: $cover/self::img/@src
25
+
26
+# author and post date extracted automatically
27
+```
28
+
29
+Preview your result from the Telegram site:
30
+
31
+![Telegram Instant View screenshot](data:image/png;base64,{{< include type="image" file="themes/after-dark/images/docs/feat-instant-view-fs8.png" >}} "Example Telegram Instant View for After Dark")
32
+
33
+Additionally, if your site has a telegram channel, you can specify it by setting the following in your site config:
34
+
35
+```toml
36
+[params.seo]
37
+  telegram_channel = "channelname" # omit the leading `@`
38
+```
39
+
40
+Specifying a channel name allows Telegram users to join your channel with a single click from within an Instant View.
41
+
42
+See the [Telegram Instant View](https://instantview.telegram.org/docs) docs for additional help and information.

+ 27
- 0
docs/content/feature/trim-color.md View File

@@ -0,0 +1,27 @@
1
++++
2
+title = "Trim Color"
3
+description = "Define the color used to display borders around your site."
4
+categories = ["customizing"]
5
+tags = ["color", "style", "branding"]
6
+features = ["code highlighter", "snippets", "related content"]
7
++++
8
+
9
+Trim color can sometimes affect how a browser or OS chooses to display the site. In {{< external href="https://brave.com/" text="Brave" />}} adjusting trim color affects the appearance of the location bar. By default trim color is set to background color of the current [Display Variant](../display-variants).
10
+
11
+Define trim color in your [Custom Styles](../custom-styles) by declaring the `--trim-color` variable inside a `:root` selector at the top of the file:
12
+
13
+{{< highlight css "linenos=inline" >}}
14
+:root {
15
+  --trim-color: firebrick;
16
+}
17
+{{< /highlight >}}
18
+
19
+Reuse the variable to maintain consistency throughout your custom styles:
20
+
21
+{{< highlight css "linenos=inline,linenostart=4" >}}
22
+nav a.active {
23
+  background-color: var(--trim-color);
24
+}
25
+{{< /highlight >}}
26
+
27
+See {{< external href="https://devdocs.io/css/using_css_variables" text="Using CSS variables" />}} for help using CSS variables.

+ 36
- 0
docs/content/feature/upgrade-script.md View File

@@ -0,0 +1,36 @@
1
++++
2
+title = "Upgrade Script"
3
+description = "Check for After Dark updates and upgrade effortlessly."
4
+categories = ["experience"]
5
+tags = ["updating", "installation", "scripts"]
6
+features = ["code highlighter", "related content"]
7
++++
8
+
9
+{{< hackcss-alert type="info" >}}
10
+<strong>Note:</strong> Use of the upgrade script requires After Dark version 6.7.5 or better. If you're running an earlier version please follow {{< external href="https://git.habd.as/comfusion/after-dark/commit/6415250769c9c78338893f98b5ab9b77968053f7" text="these steps" />}} first.
11
+{{< /hackcss-alert >}}
12
+
13
+To check for updates and automatically upgrade to the latest version simply run the upgrade script from your site directory:
14
+
15
+```sh
16
+$ ./themes/after-dark/bin/upgrade
17
+```
18
+
19
+Like [Quick Installer](../quick-installer) the upgrade script is written for POSIX shells and does not require additional dependencies to operate.
20
+
21
+If you're already using the latest version the script will let you know:
22
+
23
+{{< hackcss-alert >}}
24
+<samp>Did not upgrade after-dark. Already using latest version.</samp>
25
+{{< /hackcss-alert >}}
26
+
27
+If an update is available the script will download and install it automatically:
28
+
29
+{{< hackcss-alert >}}
30
+<samp>Starting upgrade from 6.7.6 to 6.8.0 ...<br>
31
+Version 6.8.0 downloaded to themes/after-dark<br>
32
+Generating help documentation ...<br>
33
+Upgrade complete! Please see CHANGELOG.md for changes.</samp>
34
+{{< /hackcss-alert >}}
35
+
36
+Upon upgrade the [Release Hash](../release-hashes) will change for accurate [Release Validation](/validate).

+ 42
- 0
docs/content/feature/webmaster-tools.md View File

@@ -0,0 +1,42 @@
1
++++
2
+title = "Webmaster Tools"
3
+description = "Submit your site to Google, Yandex, Bing and more."
4
+categories = ["search"]
5
+tags = ["SEO", "robots", "metadata"]
6
+features = ["code highlighter", "related content", "snippets"]
7
++++
8
+
9
+Use homepage `meta` to verify your site with Google, Bing, Alexa and Yandex. All verifications are optional and [some not required](#submit-manually) to get your site listed.
10
+
11
+To verify with any of the available providers add the following to your {{< external href="https://gohugo.io/getting-started/configuration/" text="Site Configuration" />}} and fill in the value given to you by the provider:
12
+
13
+```toml
14
+[params.seo.webmaster_verifications]
15
+  google = "" # https://search.google.com/search-console
16
+  bing = "" # https://www.bing.com/toolbox/webmaster/
17
+  alexa = "" # claiming retired (see note below)