Browse Source

docs(readme): add about section

Josh Habdas 1 year ago
parent
commit
1fc4ec8100
Signed by: Josh Habdas <jhabdas@protonmail.com> GPG Key ID: B148B31154C75A74
1 changed files with 33 additions and 29 deletions
  1. 33
    29
      README.md

+ 33
- 29
README.md View File

@@ -10,33 +10,35 @@
10 10
 
11 11
 ![After Dark screenshots](https://git.habd.as/comfusion/after-dark/raw/branch/master/images/docs/minimal-mac.png)
12 12
 
13
+## About
14
+
15
+After Dark is a blog theme for the [Hugo](https://gohugo.io/) static site generator. The theme makes use of emerging web development and design trends while maintaining the aesthetic and design minimalism of hobbiest websites created during the mid- to late-1990's. It is built to be quick and efficient to serve as many users as possible using the least amount of code possible with as little maintenance as possible. Welcome to After Dark.
16
+
13 17
 ## Demo & Tutorial
14 18
 
15 19
 Visit [Hack Cabin](https://hackcabin.com) for a production example of which the [site architecture](https://hackcabin.com/post/initial-commit/#site-architecture) can be recreated using a [step-by-step guide](https://go.habd.as/zero-to-http-2).
16 20
 
17 21
 ## Features
18 22
 
19
-The following table outlines key features which differentiate After Dark for other themes.
23
+The following table outlines some key theme features with links to more detailed information.
20 24
 
21 25
 Feature | Summary
22 26
 --------|--------
23
-[Quick Installer](#getting-started) | After Dark provides a cross-platform quick installer. One command is all you need to start creating a website.
24
-[Module System](#module-system) | Add more functionality to your site. After Dark includes a module system and a number of custom-built modules designed to compliment the theme.
25
-[Theme Variants](#theme-variants) | Choose from one of three dark color pallets and two different display modes. Toggle between them anytime directly from your site configuration.
26
-[Fuzzy Search](#fuzzy-search) | Find crawlable content anywhere on your site. After Dark includes a custom search app built with [Vue](https://vuejs.org/), [Fuse](http://fusejs.io/) and [Mark](https://markjs.io). No registration necessary.
27
-[Syntax Highlighting](#syntax-highlighting) | Share code with style. After Dark automatically highlights code written more than 160 languages and doesn't require any JavaScript to do it.
28
-[Post Images](#post-images) | Easily add performance-optimized, responsive post images without fiddling around with an image editor or touching a single line of code.
29
-[Lazy Loading](#lazy-loading) | Decrease page load time and improve user experience on slower connections. After Dark includes [lazysizes](https://github.com/aFarkas/lazysizes) for dead simple lazy-loading of images, scripts, iFrames and more.
30
-[Social Engagement](#social-engagement) | After Dark provides automatic and configurable [Open Graph](http://ogp.me/) support, Twitter Cards and Telegram Instant View template to make social shares pop like 37 pieces of flair.
31
-[Search Optimization](#search-optimization) | Using [Schema Structured Data](https://moz.com/learn/seo/schema-structured-data) and meta tags, After Dark gives crawlers rich data about the site structure and content. No configuration required.
32
-[Personalization](#personalization) | Tweak CSS using the purpose-built [customization file](#custom-styles). Swap in [your own favicon](#favicon). Leverage [block templates](https://gohugo.io/templates/blocks) to quickly extend new custom layouts. And use [hack.css](https://hackcss.egoist.moe/dark.html) flexbox grids and CSS components to add style your site.
33
-[Code Snippets](#code-snippets) | After Dark provides a number of reusable code snippets for adding things like tweets, [coubs](https://coub.com), blockquotes, figures, [hackcss components](https://hackcss.egoist.moe/) and more. Use them to create completely custom layouts or simply spice up an existing document.
34
-[Related Content](#related-content) | 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.
35
-[Table of Contents](#table-of-contents) | Help users locate and share information in long posts. By providing a Table of Contents, users will spend less time scrolling to locate information in larger documents and are more likely to deep link to specific information on a page.
36
-[Modification Dating](#modification-dating) | Surface recently updated content to users and crawlers, allowing them to understand when a post or page was was last modified. Recently updated posts will be flagged as modified and visually lifted upwards in chronological listings.
37
-[Taxonomy Pages](https://gohugo.io/content-management/taxonomies) | Help users discover taxonomic content. After Dark automatically generates taxonomy and taxonomy terms pages and links to them in post bylines.
38
-[Error Page](https://hackcabin.com/post/after-dark-error-page-redesign/) | Decrease bounce rate when URL errors occur. After Dark provides an engaging 404 page with animated background.
39
-Post Bylines | Rich post bylines include optional author name, word count, links to taxonomy pages and metadata for search engines.
27
+[Quick Installer](#getting-started) | One command is all you need to start creating a websiteCode .
28
+[Module System](#module-system) | Increase functionality with add-on modules designed to compliment your site.
29
+[Display Variants](#display-variants) | Customize the look with one of six display variations.
30
+[Fuzzy Search](#fuzzy-search) | Find indexable content anywhere on your site. No registration required.
31
+[Code Highlighter](#code-highlighter) | Instantly highlight code in over 160 languages without requiring JavaScript.
32
+[Post Images](#post-images) | Add graphics to your posts without touching an image editor.
33
+[Lazy Loading](#lazy-loading) | Boost page speed and save resources by deferring assets you define.
34
+[Social Flair](#social-flair) | Brag about your site and look good doing it on Twitter, Telegram and more.
35
+[SEO](#search-optimization) | Give crawlers rich information about your site structure and content.
36
+[Modification Dating](#modification-dating) | Recently updated content is flagged and made more discoverable to readers.
37
+[Index Blocking](#index-blocking) | Control what web crawlers see when they visit your site without using robots.txt.
38
+[Referrer Policy](#referrer-policy) | Help protect your visitors from nosy neighbors.
39
+[Snippets](#snippets) | Add tweets, coubs, videos and more without learning APIs or even HTML.
40
+[Related Content](#related-content) | Display links to relevant content below blog posts, automatically.
41
+[Table of Contents](#table-of-contents) | Create collapsable content summaries with smooth scroll links.
40 42
 
41 43
 ## Getting Started
42 44
 
@@ -109,11 +111,11 @@ Finally, the menu can be disabled from site config anytime:
109 111
 
110 112
 See Hugo's [Menu docs](https://gohugo.io/content-management/menus/) for more information.
111 113
 
112
-### Syntax Highlighting
114
+### Code Highlighter
113 115
 
114
-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 full color display support in terminal browsers.
116
+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.
115 117
 
116
-To activate the syntax highlighter simply 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. ```` ```rust ````
118
+To activate the code highlighter simply 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. ```` ```rust ````
117 119
 
118 120
 ![Syntax Highlighting screenshot](https://git.habd.as/comfusion/after-dark/raw/branch/master/images/docs/feat-syntax-highlighting-fs8.png "Example JavaScript highlighting with line numbers.")
119 121
 
@@ -128,7 +130,9 @@ Reference the Hugo [Syntax Highlighting](https://gohugo.io/content-management/sy
128 130
 
129 131
 ### Fuzzy Search
130 132
 
131
-Find content site-wide in the blink of an eye. JavaScript fuzzy search is at your fingertips. To use it simply create a section called `search` using the After Dark search layout like so:
133
+If a web crawler can find it, so can you. Search for indexable content site-wide using the inbuilt search app built with [Vue](https://vuejs.org/), [Fuse](http://fusejs.io/) and [Mark](https://markjs.io). Searches are fuzzy and typos encouraged.
134
+
135
+To use it simply create a section called `search` using the After Dark search layout like so:
132 136
 
133 137
 ```
134 138
 └── content
@@ -256,9 +260,9 @@ After Dark uses the HTML5 [`details`](http://devdocs.io/html/element/details) an
256 260
 
257 261
 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.
258 262
 
259
-### Social Engagement
263
+### Social Flair
260 264
 
261
-Increase user engagement when sharing links on social media.
265
+Increase engagement when sharing links to your site on social media.
262 266
 
263 267
 #### Open Graph
264 268
 
@@ -505,7 +509,7 @@ Overrides to theme markdown processing defaults are available from page front ma
505 509
 
506 510
 See the Hugo docs for additional [configuration options](http://gohugo.io/overview/configuration/#configure-blackfriday-rendering).
507 511
 
508
-### Code Snippets
512
+### Snippets
509 513
 
510 514
 Snippets are reusable bits of code you can sprinkle across your site to reduce repetition and improve consistency. After Dark provides a number of snippets in the form of [hackcss components](https://hackcss.egoist.moe/) and [Hugo Shortcodes](https://gohugo.io/extras/shortcodes) to help make your site easier to maintain.
511 515
 
@@ -530,7 +534,7 @@ Rather than repeating the HTML to create a blockquote in your content simply cal
530 534
 {{< /blockquote >}}
531 535
 ```
532 536
 
533
-Included are a number of shortcodes for hackcss components designed to work across all [theme variants](#theme-variants):
537
+Included are a number of shortcodes for hackcss components designed to work across all theme [variants](#variants):
534 538
 
535 539
 - `hackcss-alert` - Provides themed alert boxes. See `hackcss-alert.html` for usage notes.
536 540
 - `hackcss-button` - Provides themed buttons. See `hackcss-button.html` for usage notes.
@@ -553,11 +557,11 @@ Reference the Hugo docs for [shortcode usage instructions](https://gohugo.io/con
553 557
 
554 558
 ### Personalization
555 559
 
556
-After Dark uses [hack.css](https://hackcss.egoist.moe/dark.html) to automatically style your markup, giving you instant access to flexbox grids, several dark theme variants, and other pre-built components. Use them while creating new [sections](#section-menu) leveraging [block templates](https://gohugo.io/templates/blocks). Additional personalization options listed below.
560
+After Dark uses [hack.css](https://hackcss.egoist.moe/dark.html) to automatically style your markup, giving you instant access to flexbox grids, several display variants, and other pre-built components. Use them while creating new [sections](#section-menu) leveraging [block templates](https://gohugo.io/templates/blocks). Additional personalization options listed below.
557 561
 
558
-#### Theme Variants
562
+#### Display Variants
559 563
 
560
-Customize the look and feel of your site using theme variants. After Dark provides three dark color palettes and two display modes. Toggle between them anytime directly from your site configuration.
564
+Customize the look-and-feel of your site with variants. After Dark provides three dark color palettes and two display modes. Toggle between them anytime directly from your site configuration.
561 565
 
562 566
 The default theme 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:
563 567
 

Loading…
Cancel
Save