A retro dark theme for Hugo.
## Features
Feature | Summary |
---|---|
Deceptive Simplicity | After Dark is a Hugo theme, making it a suitable starting point for novice and advanced developers alike. It advances using the "Code for today, not for tomorrow" philosophy of XP and includes only what's necessary to create and run your site – nothing more. |
Semantic Versioning | Predictable changes enable theme users stay up-to-date with what's happening. After Dark uses Semantic Versioning and maintains a CHANGELOG for easy consumption. |
Inclusive Design | Optimized for mobile, tablet, desktop and terminal browsers. |
Performance Optimized | Page content, favicon and styles load in a single request on all pages. Resources loaded asynchronously whenver possible. Responsive images with LQIP out of the box. Users should see a ~1 second page loads over 2G when hosted using a CDN. |
Designed to Scale | After Dark is capable of generating ~1000 pages per second thanks to Hugo and is likely to become faster over time. |
Lazy Loading | Lazily load your images, iFrames and script embeds. After Dark uses the lazysizes library, a zero-configuration JavaScript library with support for LQIP and responsive images. |
BPG Image Support | After Dark supports the BPG Image format. Native browser support for BPG is dismal. As a result, a polyfill has been provided to render BPG images. |
Social Engagement | After Dark provides automatic and configurable Open Graph support, Twitter Cards and Telegram Instant View making social shares pop like 37 pieces of flair. |
Search Optimization | Using Schema Structured Data and meta tags, After Dark gives crawlers rich data about the site structure and content. No configuration required. |
Post Images | Increase the visual appeal of your posts by providing a captivating image above your content. After Dark enables configuration-driven post images which are lazy-loaded, responsive and automatically cropped for a consistent look-and-feel across your site. |
Fuzzy Search | After Dark ships with an in-browser search app built with Vue, Fuse and Mark. Use it to quickly find content anywhere your site. |
Personalization | Adjust CSS using purpose-built customization file. Choose one of several theme variants. Swap in your own favicon. Leverage block templates to quickly extend new custom layouts. And use hack.css flexbox grids and CSS components to add style your site. |
Section Menu | Add and customize your site's global navigation. After Dark uses Hugo's Section Menu for "the Lazy Blogger", making navigation easy to create and predictable to use. Don't want navigation? Simply disable it from your site configuration. |
Content Reuse | Sometimes plan markdown isn't enough to build engaging page content. For this reason After Dark provides a number of reusable code snippets and shortcodes for adding things blockquotes, figure elements, coubs, videos, hackcss components and more to your pages and posts. Use them to create completely custom layouts or simply spice up an old page. |
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. |
Table Of Contents | Help users locate and share information on your site. By providing a TOC, 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. |
Analytics | Understand and action on user behavior by enabling Google Analytics. After Dark uses the async tracking snippet to boost performance and allow script preloading. |
User Generated Content | Improve search rankings and provide interactivity to users with UGC. Enable Disqus commenting to get started. |
Reading Time | Set user expectations up-front. After Dark provides estimated reading time for each post near the top of the page. This feature is automatic and assumes a reading speed of 200-250 words per minute. |
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. |
Custom Syntax Highlighting | Share code snippets with style. After Dark provides custom syntax highlighting with support for both Pygments and Chroma. |
Taxonomy Pages | Help users discover taxonomic content. After Dark automatically generates taxonomy and taxonomy terms pages and links to them in post bylines. |
Post Bylines | Rich post bylines include optional author name, word count, links to taxonomy pages and metadata for search engines. |
Pagination | Pagination can be hard. After Dark makes it easy with simple list pagination with page indication. |
Animated Error Page | Decrease bounce rate when URL errors occur. After Dark provides an engaging 404 page with animated background. |
Accessibility | After Dark uses semantic HTML5 markup to provide a better experience for aural readers and facilitates navigation via keyboard only. |
{{ .Inner }} {{ with .Get "citelink" }} {{ $.Get "cite" }} {{ else }} {{ .Get "cite" }} {{ end }}``` Use it in your page or post markdown files like: ```html {{< blockquote cite="Bitly" citelink="https://bitly.is/2mkxskj" >}}
When you create your own Branded Short Domain, you can expect to see up to a 34% increase in CTR when compared to standard bit.ly links.
{{< /blockquote >}} ``` Additional theme-provided shortcodes at your disposal: - `privacytube` – It's YouTube. But without cookies and UI cruft. - `coub` - GIFs with sound. Think of it like YouTube for video loops. - `figure` - Similar to the Hugo built-in, but with [Lazy Loading](#lazy-loading), an adjusted caption title and smaller caption text. Also included are a number of shortcodes for [hackcss components](https://hackcss.egoist.moe/). These shortcodes function across After Dark [theme variants](#theme-variants) and were created as partials, enabling reuse in both your content as well as your [personalized layouts](#personalization): - `hackcss-alert` - Provides themed alert boxes. See `hackcss-alert.html` for usage notes. - `hackcss-button` - Provides themed buttons. See `hackcss-button.html` for usage notes. - `hackcss-buttongroup` - Allows buttons to be grouped together. See `hackcss-buttongroup.html` for usage notes. - `hackcss-card` - Provides themed card element. See `hackcss-card.html` for usage notes. - `hackcss-progress` - Provides themed progress meter. See `hackcss-progress.html` for usage notes. - `hackcss-throbber` - Provides themed loading indicator. See `hackcss-throbber.html` for usage notes. To create your own custom shortcodes add a `layouts/shortcodes` directory to your site, place your shortcodes within and start using them in your markdown content. To create or override provided components add a `layouts/partials/components` directory to your site and reference the theme-provided files as you hack away. Reference the Hugo docs for [shortcode usage instructions](https://gohugo.io/content-management/shortcodes/#using-a-shortcode) and see the inline documentation within each shortcode for example usage instructions. ### Syntax Highlighting Provide a richer experience when sharing code snippets on your site. After Dark provides support for code highlighting using the lovely [One Dark](https://github.com/atom/one-dark-syntax) and [One Light](https://github.com/atom/one-light-syntax) syntax themes for Pygments and Chroma. ![Syntax Highlighting screenshot](images/docs/feat-syntax-highlighting.png "Syntax Highlighting using Atom One Pygments and Chroma") To set-up syntax highlighting for your After Dark site: - Follow Hugo's [Syntax Highlighting](https://gohugo.io/content-management/syntax-highlighting/) instructions. - Open the `themes/after-dark` folder and run `npm i` (assumes NPM installed). - Then open `./node_modules/atom-one-pygments` and `npm i`. - Once dependencies are installed, issue `npm run build` within the module to generate the stylesheets to the module's `./dist` directory. Then choose either `./dist/light.css` or `dark.css` depending on your [Theme Variant](#theme-variants) and copy the contents of the file into your [Custom Styles](#custom-styles) file. Once configured, syntax highlighting can be achieved using the Hugo built-in [`highlight` shortcode](https://gohugo.io/extras/shortcodes#highlight). Reference Hugo's [Syntax Highlighting docs](https://gohugo.io/content-management/syntax-highlighting/) for usage instructions. **Not completely satisfied?** [Atom One Pygments](https://github.com/comfusion/atom-one-pygments) is built as a theme roller, making it possible to modify the look-and-feel of the resulting syntax highlighting. Make it your own. See the [README](https://github.com/comfusion/atom-one-pygments/blob/master/README.md) for more details. ### Personalization After Dark uses [hack.css](https://hackcss.egoist.moe/dark.html) to automatically style your markup, giving you instant access to flexbox grids, light and 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. #### Custom Styles Customize theme styles without forking using Hugo's inbuilt [Partial Templates](https://gohugo.io/templates/partials/). To get started: 1. Create a `critical-custom.css` in your site's `layouts/partials/head` directory. If the directory does not exist yet, simply create it. 2. Add your custom styles inside the file. Example customization file: ```css /* override theme defaults */ .muted { color: rgba(255, 255, 255, 0.5); } /* custom styles */ figure { margin-left: auto; margin-right: auto; text-align: center; } figure img { max-width: 80%; } figure a { border-bottom: none !important; } figure a:hover { background-color: inherit !important; } ``` Styles are inlined into the `head` of each page. If you would prefer to use external stylesheets override the `partials/global-styles.html` template, modeling from the theme's version of the file, and make any adjustments you see fit. #### Theme Variants [`hack.css`](https://hackcss.egoist.moe/) provides a few variants you may wish to use instead of the After Dark defaults. To download them do an `npm install` from `/themes/after-dark/` (assumes NodeJS installed). Once downloaded, open `./node_modules/hack/dist`, copy the styles you wish to use into a `critical-vendor.css` [template override](https://gohugo.io/themes/customizing/#override-template-files) and apply the variant by setting `theme_variant` in your site config to one of: "standard" "hack dark-grey" "hack solarized-dark" Once variant applied, open your browser's dev tools and test the changes by previewing your site on mobile, tablet and desktop at different display resolutions and orientations—overriding and making any desired changes to your [overridden](https://gohugo.io/themes/customizing/#override-template-files) `critical-theme.css`, 404 page, `theme-color.html` and [Custom Styles](#custom-styles). #### Favicon After Dark ships with a lightweight SVG favicon embedded into every page. To customize or replace it create a file named `favicon.html` under `layouts/partials/head` within your site and place an [`icon` link](http://devdocs.io/html/link_types#icon) within it. **Why SVG?** Though they don't have perfect [browser support](http://caniuse.com/#feat=link-icon-svg) yet, SVG favicons are smaller in size and more flexible. SVG favicons can be styled with CSS or even animated with JavaScript. ## License Copyright 2016-2018 Josh Habdas