arona/website
1
0
Fork 0
Code Issues 1 Pull Requests Releases Activity

Initial AD port

Browse Source
This commit is contained in:
FreneticScribbler
2021-04-26 18:26:42 +01:00
parent 6911ce346b
commit 7e7773258a
408 changed files with 17799 additions and 172 deletions
Download Patch File Download Diff File Expand all files Collapse all files

144
themes/after-dark/docs/content/_index.md Normal file
View File

@@ -0,0 +1,144 @@
+++
title = "After Dark"
description = "After Dark is open source software you can use to build a secure website, blog or app. One command is all you need to start a new website."
images = [
"https://after-dark.habd.as/images/screenshots/after-dark-v6.15.0-homepage-fs8.png"
]
[[copyright]]
owner = "Josh Habdas"
date = "2019"
license = "agpl-3.0-or-later"
[[spotlight]]
name = "workflow"
title = "Developer Focused"
description = "Develop and publish websites cross-platform using a <strong>single codebase</strong> with just <strong>one dependency</strong> and capabilities designed to make you more productive:"
icon = "code"
[[spotlight]]
name = "speed"
title = "Incredibly Fast"
description = "With <a target=\"_blank\" rel=\"external nofollow noopener\" href=\"https://forestry.io/blog/hugo-vs-jekyll-benchmark/\">0.615s average</a> builds and <strong><i>decisecond</i> page loads</strong> you could conceivably develop and serve your content from an <a target=\"_blank\" rel=\"external nofollow noopener\" href=\"https://amzn.to/2Wx7xJk\">ODROID</a> in space."
icon = "lightning"
[[spotlight.link]]
href = "/feature/fetch-injection/"
text = "Fetch Inject"
[[spotlight.link]]
href = "/feature/lazy-loading/"
text = "Lazy Loading"
[[spotlight.link]]
href = "https://tools.pingdom.com/#5a399f9666400000"
text = "Benchmark"
target = "_blank"
rel = "external nofollow noopener"
[[spotlight]]
name = "privacy"
title = "Privacy Aware"
description = "Develop your entire site <strong><i>without</i> Internet</strong> connectivity and <i>expose</i> an ephemeral Web server with e2e encryption and <strong>real-time traffic inspection</strong>."
icon = "eye"
[[spotlight.link]]
href = "/feature/work-offline/"
text = "Work Offline"
[[spotlight.link]]
href = "/feature/referrer-policy/"
text = "Hide Referrals"
[[spotlight.link]]
href = "/feature/ephemeral-hosting/"
text = "SSH Host"
[[spotlight]]
name = "security"
title = "Securely Designed"
description = "Verify the <i>authenticity</i> of your installation using secure cryptographic hashes and use <abbr title=\"Content Security Policy\">CSP</abbr>, <abbr title=\"Sub-Resource Integrity\">SRI</abbr> and Referrer Policy to <strong>lock down your content</strong>."
icon = "lock"
[[spotlight.link]]
href = "/feature/content-security-policy/"
text = "Content Policy"
[[spotlight.link]]
href = "/validate/"
text = "Check Integrity"
[[spotlight.link]]
href = "/feature/#security"
text = "See All"
[[spotlight]]
name = "graphics"
title = "Advanced Graphics"
description = "Add high-resolution, responsive images with <strong>low-quality image placeholders</strong> and <strong>engaging visual effects</strong> without even touching an image editor."
icon = "photo"
[[spotlight.link]]
href = "/feature/post-images/"
text = "Post Images"
[[spotlight.link]]
href = "/feature/custom-homepage/"
text = "Thumbnails"
[[spotlight.link]]
href = "/module/hall-of-mirrors/"
text = "Galleries"
[[spotlight]]
name = "customize"
title = "Easily Customized"
description = "Toggle between 1 of 8 <strong><i>customizable</i> skin styles</strong> or disable them entirely and use custom layouts and styles to take complete design control."
icon = "options"
[[spotlight.link]]
href = "/feature/custom-homepage/"
text = "Homepage"
[[spotlight.link]]
href = "/feature/skin-styles/"
text = "Skins"
[[spotlight.link]]
href = "/feature/#customizing"
text = "See All"
[[spotlight]]
name = "search"
title = "Fuzzy Search"
description = "Quickly <strong>locate <i>indexed</i> content</strong> anywhere on your site using inbuilt fuzzy search with automatic search indexing and <strong>full offline support</strong>."
icon = "search"
[[spotlight.link]]
href = "/feature/fuzzy-search/"
text = "Learn More"
[[spotlight.link]]
href = "/search/?s=uzzy%20searvh"
text = "Try It Now"
[[spotlight]]
name = "rewards"
title = "Rewards System"
description = "Earn rewards for keeping your software up-to-date and <strong>monetize attention</strong> to generate a <strong><i>borderless</i></strong>, low-maintenance passive income."
icon = "creditcard"
beta = true
[[spotlight.link]]
href = "/module/toxic-swamp/#installation"
text = "Installation"
[[spotlight.link]]
href = "/module/toxic-swamp/"
text = "Learn More"
[[spotlight]]
name = "extras"
title = "Batteries Included"
description = "Self-host your entire stack using <strong><i>commodity hardware</i></strong> and keep your source code and visitor metrics entirely <strong>under your control</strong>."
icon = "paperclip"
[[spotlight.link]]
href = "/extra/high-tea/"
text = "Gitea"
[[spotlight.link]]
href = "/extra/after-dark-k3s/"
text = "Kubernetes"
[[spotlight.link]]
href = "/module/voyeur/"
text = "Fathom"
[[spotlight]]
name = "builds"
title = "Extended Builds"
description = "Create **high-performance Hugo builds** using Alpine Linux with Musl. Builds Hugo Extended binary <i>with Sass support</i> using Docker **directly from source**."
icon = "export"
[[spotlight.link]]
href = "/feature/extended-builds/"
text = "Create Build Now"
+++
{{< hackcss-form action="/feature/quick-install" >}}
{{< hackcss-button type="primary" isghost="true" >}}
<svg class="i-download" viewBox="0 0 32 32" width="24" height="24" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
<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"></path>
</svg>&nbsp;&nbsp;Get Started
{{< /hackcss-button >}}
{{< hackcss-helpblock >}}
<small>English and <a href="/id/feature/quick-install">Bahasa</a></small>
{{< /hackcss-helpblock >}}
{{< /hackcss-form >}}

29
themes/after-dark/docs/content/extra/after-dark-k3s.md Normal file
View File

@@ -0,0 +1,29 @@
+++
title = "After Dark K3s"
date = 2019-06-27T16:00:54+08:00
description = "Run containerized in a lightweight Kubernetes cluster."
categories = ["devops"]
keywords = ["cloud", "container", "k3s", "k8s", "kubernetes"]
features = ["code highlighter", "snippets"]
[[copyright]]
owner = "Josh Habdas"
date = "2019"
license = "agpl-3.0-or-later"
+++
After Dark K3s pairs {{< external "https://k3s.io" "K3s" />}} with {{< external "https://www.nginx.com" "Nginx" />}} enabling you to scale After Dark using container orchestration in a low-friction, efficient multi-tier deployment. Use it to self-host, and automatically build and serve your site in real-time.
{{% hackcss-alert type="success" %}}**Tip:** Learn how to get wildcard SSL certificates (with auto-renewal) using K3s and Traefik in {{< external "https://plaindark.com/post/how-to-ssl-with-letsencrypt-and-kubernetes-traefik/" "Wildcard Let's Encrypt certs on Kubernetes with Traefik" />}}.{{% /hackcss-alert %}}
# Benefits
- Isolates published site inside a container.
- Uses <abbr title="Inversion of Control">IoC</abbr> pattern to remove Hugo dependency.
- Doubles as a web server and reverse proxy.
- 75% more memory efficient than Kubernetes.
- Native support for ARM devices, ideal for <abbr title="Internet of Things">IoT</abbr>.
- Manage set-up using Configuration as Code.
- Integrate with {{< external "https://traefik.io/" "Traefik" />}} for <abbr title="High Availability">HA</abbr> front-ends.
**Repository:** {{< external "https://git.habd.as/teowood/after-dark-k3s-amd64" />}}
<br>**Mirror:** {{< external "https://git.plaindark.com/teowood/after-dark-k3s-amd64" />}}

29
themes/after-dark/docs/content/extra/high-tea.md Normal file
View File

@@ -0,0 +1,29 @@
+++
title = "High Tea"
description = "Production-ready self-hosted full-stack git service."
categories = ["security"]
slug = "high-tea"
tags = ["privacy", "networking"]
features = ["related content", "snippets"]
[[copyright]]
owner = "Josh Habdas"
date = "2019"
license = "agpl-3.0-or-later"
+++
High Tea pairs {{< external href="https://gitea.io" text="Gitea" />}} with {{< external href="https://traefik.io" text="Traefik" />}} enabling you to manage your source code online using an intuitive and sleek-looking web-based interface:
{{< figure alt="High Tea dashboard"
src="/images/addon-high-tea_1440x900-fs8.png"
lqipsrc="/images/addon-high-tea_960x600-fs8.png"
caption="Dashboard view within the High Tea Gitea application."
>}}
Use it to manage organizations, create pull mirrors, selectively mark private repos, configure <abbr title="Large File Storage">LFS</abbr> and collaborate on code with others using git for free.
High Tea also provides a Traefik integration so you can manage web services, monitor traffic and inspect service health in real-time.
---
- {{< external "https://git.habd.as/comfusion/high-tea" />}} -- source
- {{< external "https://after-dark.habd.as/extra/high-tea/" />}} -- website

10
themes/after-dark/docs/content/feature/_index.id.md Normal file
View File

@@ -0,0 +1,10 @@
+++
title = "Features"
description = "Menjelajahi bermacam-macam fitur yang tersedia untuk anda di After Dark."
[[copyright]]
owner = "Josh Habdas"
date = "2019"
license = "agpl-3.0-or-later"
+++
Pilih fitur untuk mempelajari lebih lanjut atau menjalankan <a href="./quick-install">Instal Cepat</a> untuk men-download dan menginstal setelah Dark dan mencoba salah satu dari ini sendiri.

10
themes/after-dark/docs/content/feature/_index.md Normal file
View File

@@ -0,0 +1,10 @@
+++
title = "Features"
description = "Explore the many features available to you in After Dark."
[[copyright]]
owner = "Josh Habdas"
date = "2019"
license = "agpl-3.0-or-later"
+++
Choose a feature to learn more or run <a href="./quick-install">Quick Install</a> to download and install After Dark and try any of these yourself.

35
themes/after-dark/docs/content/feature/code-analysis.md Normal file
View File

@@ -0,0 +1,35 @@
+++
title = "Code Analysis"
description = "Test generated website HTML for problems."
categories = ["experience"]
tags = ["docker", "container", "cloud", "ci", "go", "robots"]
features = ["code highlighter", "related content", "snippets"]
[[copyright]]
owner = "Josh Habdas"
date = "2019"
license = "agpl-3.0-or-later"
+++
After Dark includes a source build of {{< external "https://github.com/wjdp/htmltest" "htmltest" />}} which may be used to analyze HTML generated for problems such as linkrot, meta attributes and more.
Code analysis is ideal for identifying potential 404 errors and determining when to link to the archived version of an external page which has gone offline.
To use install Docker then run the following command:
```sh
cd after-dark/docker/htmltest && docker build --rm .
```
Build container uses Alpine and includes `musl-dev` for high-performance. Update the `HTMLTEST_VERSION` to get a specific release built. Upon successful build extract the resulting binary out of the scratch container like:
```
docker create -it --name temp f2b785583ce8 sh && \
sudo docker cp temp:/htmltest /usr/local/bin && \
docker rm -fv temp
```
Where `f2b785583ce8` is the scratch container’s Image ID and `/usr/local/bin` is the destination on the host. Place executable in most appropriate directory.
If using Hugo `0.56.x` or higher may also possible to include `htmltest` as a Go module using {{< external "https://gohugo.io/hugo-modules/" "Hugo Modules" />}} if your particular use case calls for it.
See {{< external "https://github.com/wjdp/htmltest" "htmltest" />}} for documentation and usage.

113
themes/after-dark/docs/content/feature/code-highlighter.id.md Normal file
View File

@@ -0,0 +1,113 @@
+++
title = "Code Highlighter"
description = "Kode sorot ditulis lebih dari 160 bahasa."
categories = ["experience"]
tags = ["color", "style", "syntax"]
feature = ["snippets", "related content", "jit requests"]
[[copyright]]
owner = "Josh Habdas"
date = "2019"
license = "agpl-3.0-or-later"
+++
After Dark menggunakan versi yang disesuaikan {{< external href="https://atom.io/themes/one-dark-syntax" text="One Dark Syntax" />}} untuk menghasilkan kode yang ramah cetak untuk lebih dari 160 bahasa.
<style>.card-content .inner { overflow: scroll; height: 200px; }</style>
{{< 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" />}}
Untuk mengaktifkan highlighter gunakan Hugo {{% external href="https://gohugo.io/content-management/syntax-highlighting/#highlight-shortcode" %}}`highlight` shortcode{{% /external %}} atau menunjukkan {{< external href="https://gohugo.io/content-management/syntax-highlighting/#list-of-chroma-highlighting-languages" text="highlighting language" />}} di blok kode berpagar di dalam markdown anda:
````
```go-html-template
<div class="alert {{ with .type }}alert-{{ . }}{{ end }}">
{{ .body }}
</div>
```
````
Menghasilkan kode yang dihighlight seperti berikut:
```go-html-template
<div class="alert {{ with .type }}alert-{{ . }}{{ end }}">
{{ .body }}
</div>
```
Atau gunakan shortcode highlight yang disediakan oleh Hugo:
Atau gabungkan {{% external href="https://gohugo.io/content-management/syntax-highlighting/#highlight-shortcode" %}}highlight shortcode{{% /external %}} disediakan oleh Hugo:
```html
{{</* highlight python */>}}
@app.on_message(Filters.private)
def hello(client, message):
message.reply_text("Hello {}".format(message.from_user.first_name))
{{</* /highlight */>}}
```
Untuk menambahkan nomor baris dan sorotan:
{{< highlight python "linenos=inline,linenostart=5,hl_lines=2" >}}
@app.on_message(Filters.private)
def hello(client, message):
message.reply_text("Hello {}".format(message.from_user.first_name))
{{< /highlight >}}
Tidak menyukai warnanya? Tidak masalah. Gunakan perintah `hugo gen chromastyles` untuk {{< external href="https://gohugo.io/content-management/syntax-highlighting/#generate-syntax-highlighter-css" text="generate your own" />}} `syntax.css` stylesheet dari {{< external href="https://help.farbox.com/pygments.html" text="style gallery" />}} dan menyesuaikannya menggunakan tujuan umum {{< external href="https://git.habd.as/comfusion/atom-one-chroma" text="Atom One Chroma" />}} tema rol sintaks.
Dan jika anda benar-benar berani berusaha mengapa tidak membuat beberapa seni ASCII yang dapat dieksekusi yang mewakili nama permainan yang anda implementasikan dalam bahasa yang digunakan:
```brainfuck
Linus Akesson mempersembahkan:
The Game Of Life implemented in Brainfuck
+>>++++[<++++>-]<[<++++++>-]+[<[>>>>+<<<<-]>>>>[<<<<+>>>>>>+<<-]<+
+++[>++++++++<-]>.[-]<+++[>+++<-]>+[>>.+<<-]>>[-]<<<++[<+++++>-]<.<<[>>>>+
<<<<-]>>>>[<<<<+>>>>>>+<<-]<<[>>>>.+<<<++++++++++[<[>>+<<-]>>[<<+>>>>>++++++++
+++<<<-]<[>+<-]>[<+>>>>+<<<-]>>>[>>>>>>>>>>>>+>+<< <<<<<<<<<<<-]>>>>>>>>>>
>>[-[>>>>+<<<<-]>[>>>>+<<<<-]>>>]> >>[<<<+>> >- ]<<<[>>+>+<<<-]>[->[<<<
<+>>>>-]<[<<< <+> >>>-]<<<< ]< ++++++ ++ +[>+++++<-]>>[<<+>>-]<
<[>---<-]>.[- ] <<<<<<<<< < <<<<<< < -]++++++++++.[-]<-]>>>
>[-]<[-]+++++ +++[>++++ ++++< - ]>--.[-]<,----------[<+
>-]>>>>>>+<<<<< < <[>+>>>>>+>[ -]<<< << <<-]>++++++++++>>>>>[[-]
<<,<<<<<<<->>>> > >>[<<<<+>>>>-]<<<<[>>>>+ >+<<<<<-]>>>>>----------[<<<<
<<<<+<[>>>>+<<< <-]>>>>[<<<<+>>>>>>+<<- ]>[>-<-]>++++++++++[>+++++++++
++<-]<<<<<<[>>> >+<<<<-]>>>>[<<<<+>>>>> >+<<-]>>>>[<<->>-]<<++++++++++
[>+<-]>[>>>>>>> >>>>>+>+<<<< <<<<< <<<<-]>>> >> >>>>>>>[-[>>>
>+<<<<-]>[>>>> +<<<<-]>> > ]>> > [<< < +>>>-]+<<<[>
>>-<<<-]>[->[< <<<+>>>>-] <[ < < < <+>>>>-]<<<
<]<<<<<<<<<<<, [ -]]>]>[-+++ ++ + +++ ++[>+++++++
++++>+++++++++ + +<<-]>[-[>>> +<<<- ]>>>[ < <<+ >>>>>>>+>+<
<<<<-]>>>>[-[> > >>+<<<<-]>[> >>>+< < <<-]> > >]> >>[<<<+>>>-
]<<<[>>+>+<<< - ]>[->[<<<<+> >>>-] < [<<< < +>> >>-]<<<<]<<
<<<<<<[>>>+<< < -]>>>[<<<+>> >>>>> + >+<< < <<-]<<[>>+<<
-]>>[<<+>>>>> >+>+<<<<<-]>> >>[-[ > >>>+ < <<<-]>[>>>>+<
<<<-]>[>>>>+< <<<-]>>]>>>[ - ]<[>+< - ]<[ - [<<<<+>>>>-]<<<
<]<<<<<<<<]<< <<<<<<<<++++ + +++++ [ >+++ + ++++++[<[>>+<<-]>>[<<+
>>>>>++++++++ + ++<<< -] < [>+<- ] >[<+ > >>>+<<<-]>>>[<<<+>>>-]
<<<[>>>+>>>> > +<<<< << <<-]> > >>>> >>>[>>+<<-]>>[<<+<+>>
>-]<<<------ - -----[ >> >+<<< - ]>>> [<<<+> > >>>>>+>+<<<<
<-]>>>>[-[>> > >+<<<< -] > [>>>> + <<<<- ]>>> ] >>>[<<<+>>>-
]<<<[>>+>+<< < -]>>> >> > > [<<<+ >>>-]<<<[>>>
+<<<<<+>>- ]> > >>>>>[< <<+>>>-]<<<[>
>>+<<<<<<< <<+ > >>>>>-]< <<<<<<[->[<<<<+
>>>>-]<[<<<<+>>>>-]<<<<]>[<<<<<< <+>>> >>>>-]<<<< <<<<<+++++++++++[>
>>+<<<-]>>>[<<<+>>>>>>>+>+<<<<<-]>>>>[-[> >>>+<<<<-]>[>>>>+<<<<-]>>>]>>>[<<<
+>>>-]<<<[>>+>+<<<-]>>>>>>>[<<<+>>>-]<<<[ >>>+<<<<<+>>-]>>>>>>>[<<<+>>>-]<<<
[>>>+<<<<<<<<<+>>>>>>-]<<<<<<<[->[< < < <+>>>>-]<[<<<<+>>>>-]<<<<]>[<<<<<<<
+>>>>>>>-]<<<<<<<<<+++++++++++[>>> > >>>+>+<<<<<<<<-]>>>>>>>[-[>>>>+<<<<-
]>[>>>>+<<<<-]>>>]>>>[<<<+>>>-]<<< [ >>+>+<<<-]>>>>>>>[<<<+>>>-]<<<[>>>+<<
<<<+>>-]>>>>>>>[<<<+>>>-]<<<[>>>+< <<<<<<<<+>>>>>>-]<<<<<<<[->[<<<<+>>>>-
]<[<<<<+>>>>-]<<<<]>[<<<<<<<+>>>>> >>-]<<<<<<<----[>>>>>>>+<<<<<<<+[>>>>>
>>-<<<<<<<[-]]<<<<<<<[>>>>>>>>>>>>+>+<<<<<<<<<<<<<-][ lft@df.lth.se ]>>>>>
>>>>>>>[-[>>>>+<<<<-]>[>>>>+<<<<-]>[>>>>+<<<<-]>>]>>>[-]<[>+<-]<[-[<<<<+>>
>>-]<<<<]<<<<<<[-]]<<<<<<<[-]<<<<-]<-]>>>>>>>>>>>[-]<<]<<<<<<<<<<]
Sebagai contoh, ketik "fg" untuk menghidupkan sel di baris f dan kolom g
Tekan enter untuk menghitung generasi berikutnya
Ketik q untuk berhenti
```
Itu benar-benar Brainfuck.

111
themes/after-dark/docs/content/feature/code-highlighter.md Normal file
View File

@@ -0,0 +1,111 @@
+++
title = "Code Highlighter"
description = "Highlight code written in more than 160 languages."
categories = ["experience"]
tags = ["color", "style", "syntax"]
features = ["snippets", "related content", "jit requests"]
[[copyright]]
owner = "Josh Habdas"
date = "2019"
license = "agpl-3.0-or-later"
+++
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.
<style>.card-content .inner { overflow: scroll; height: 200px; }</style>
{{< hackcss-card header="Supported Languages" text="ABNF, ANTLR, APL, ActionScript, ActionScript 3, Ada, Angular2, ApacheConf, AppleScript, Arduino, 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, Graphql, 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, Matlab, 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, Turing, Turtle, Twig, TypeScript, TypoScript, TypoScriptCssData, TypoScriptHtmlData, VHDL, VimL, WDTE, XML, Xorg, YAML, cfstatement, markdown, reStructuredText, reg, systemverilog, verilog" />}}
To activate the highlighter 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:
````
```go-html-template
<div class="alert {{ with .type }}alert-{{ . }}{{ end }}">
{{ .body }}
</div>
```
````
Resulting in the following highlighted code:
```go-html-template
<div class="alert {{ with .type }}alert-{{ . }}{{ end }}">
{{ .body }}
</div>
```
Or use the {{% external href="https://gohugo.io/content-management/syntax-highlighting/#highlight-shortcode" %}}highlight shortcode{{% /external %}} provided by Hugo:
```html
{{</* highlight python */>}}
@app.on_message(Filters.private)
def hello(client, message):
message.reply_text("Hello {}".format(message.from_user.first_name))
{{</* /highlight */>}}
```
To add line numbers and highlighting:
{{< highlight python "linenos=inline,linenostart=5,hl_lines=2" >}}
@app.on_message(Filters.private)
def hello(client, message):
message.reply_text("Hello {}".format(message.from_user.first_name))
{{< /highlight >}}
Not feeling the colors? No problem. Use the `hugo gen chromastyles` command to {{< external href="https://gohugo.io/content-management/syntax-highlighting/#generate-syntax-highlighter-css" text="generate your own" />}} `syntax.css` stylesheet from the {{< external href="https://help.farbox.com/pygments.html" text="style gallery" />}} and customize it using the general-purpose {{< external href="https://git.habd.as/comfusion/atom-one-chroma" text="Atom One Chroma" />}} syntax theme-roller.
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:
```brainfuck
Linus Akesson presents:
The Game Of Life implemented in Brainfuck
+>>++++[<++++>-]<[<++++++>-]+[<[>>>>+<<<<-]>>>>[<<<<+>>>>>>+<<-]<+
+++[>++++++++<-]>.[-]<+++[>+++<-]>+[>>.+<<-]>>[-]<<<++[<+++++>-]<.<<[>>>>+
<<<<-]>>>>[<<<<+>>>>>>+<<-]<<[>>>>.+<<<++++++++++[<[>>+<<-]>>[<<+>>>>>++++++++
+++<<<-]<[>+<-]>[<+>>>>+<<<-]>>>[>>>>>>>>>>>>+>+<< <<<<<<<<<<<-]>>>>>>>>>>
>>[-[>>>>+<<<<-]>[>>>>+<<<<-]>>>]> >>[<<<+>> >- ]<<<[>>+>+<<<-]>[->[<<<
<+>>>>-]<[<<< <+> >>>-]<<<< ]< ++++++ ++ +[>+++++<-]>>[<<+>>-]<
<[>---<-]>.[- ] <<<<<<<<< < <<<<<< < -]++++++++++.[-]<-]>>>
>[-]<[-]+++++ +++[>++++ ++++< - ]>--.[-]<,----------[<+
>-]>>>>>>+<<<<< < <[>+>>>>>+>[ -]<<< << <<-]>++++++++++>>>>>[[-]
<<,<<<<<<<->>>> > >>[<<<<+>>>>-]<<<<[>>>>+ >+<<<<<-]>>>>>----------[<<<<
<<<<+<[>>>>+<<< <-]>>>>[<<<<+>>>>>>+<<- ]>[>-<-]>++++++++++[>+++++++++
++<-]<<<<<<[>>> >+<<<<-]>>>>[<<<<+>>>>> >+<<-]>>>>[<<->>-]<<++++++++++
[>+<-]>[>>>>>>> >>>>>+>+<<<< <<<<< <<<<-]>>> >> >>>>>>>[-[>>>
>+<<<<-]>[>>>> +<<<<-]>> > ]>> > [<< < +>>>-]+<<<[>
>>-<<<-]>[->[< <<<+>>>>-] <[ < < < <+>>>>-]<<<
<]<<<<<<<<<<<, [ -]]>]>[-+++ ++ + +++ ++[>+++++++
++++>+++++++++ + +<<-]>[-[>>> +<<<- ]>>>[ < <<+ >>>>>>>+>+<
<<<<-]>>>>[-[> > >>+<<<<-]>[> >>>+< < <<-]> > >]> >>[<<<+>>>-
]<<<[>>+>+<<< - ]>[->[<<<<+> >>>-] < [<<< < +>> >>-]<<<<]<<
<<<<<<[>>>+<< < -]>>>[<<<+>> >>>>> + >+<< < <<-]<<[>>+<<
-]>>[<<+>>>>> >+>+<<<<<-]>> >>[-[ > >>>+ < <<<-]>[>>>>+<
<<<-]>[>>>>+< <<<-]>>]>>>[ - ]<[>+< - ]<[ - [<<<<+>>>>-]<<<
<]<<<<<<<<]<< <<<<<<<<++++ + +++++ [ >+++ + ++++++[<[>>+<<-]>>[<<+
>>>>>++++++++ + ++<<< -] < [>+<- ] >[<+ > >>>+<<<-]>>>[<<<+>>>-]
<<<[>>>+>>>> > +<<<< << <<-]> > >>>> >>>[>>+<<-]>>[<<+<+>>
>-]<<<------ - -----[ >> >+<<< - ]>>> [<<<+> > >>>>>+>+<<<<
<-]>>>>[-[>> > >+<<<< -] > [>>>> + <<<<- ]>>> ] >>>[<<<+>>>-
]<<<[>>+>+<< < -]>>> >> > > [<<<+ >>>-]<<<[>>>
+<<<<<+>>- ]> > >>>>>[< <<+>>>-]<<<[>
>>+<<<<<<< <<+ > >>>>>-]< <<<<<<[->[<<<<+
>>>>-]<[<<<<+>>>>-]<<<<]>[<<<<<< <+>>> >>>>-]<<<< <<<<<+++++++++++[>
>>+<<<-]>>>[<<<+>>>>>>>+>+<<<<<-]>>>>[-[> >>>+<<<<-]>[>>>>+<<<<-]>>>]>>>[<<<
+>>>-]<<<[>>+>+<<<-]>>>>>>>[<<<+>>>-]<<<[ >>>+<<<<<+>>-]>>>>>>>[<<<+>>>-]<<<
[>>>+<<<<<<<<<+>>>>>>-]<<<<<<<[->[< < < <+>>>>-]<[<<<<+>>>>-]<<<<]>[<<<<<<<
+>>>>>>>-]<<<<<<<<<+++++++++++[>>> > >>>+>+<<<<<<<<-]>>>>>>>[-[>>>>+<<<<-
]>[>>>>+<<<<-]>>>]>>>[<<<+>>>-]<<< [ >>+>+<<<-]>>>>>>>[<<<+>>>-]<<<[>>>+<<
<<<+>>-]>>>>>>>[<<<+>>>-]<<<[>>>+< <<<<<<<<+>>>>>>-]<<<<<<<[->[<<<<+>>>>-
]<[<<<<+>>>>-]<<<<]>[<<<<<<<+>>>>> >>-]<<<<<<<----[>>>>>>>+<<<<<<<+[>>>>>
>>-<<<<<<<[-]]<<<<<<<[>>>>>>>>>>>>+>+<<<<<<<<<<<<<-][ lft@df.lth.se ]>>>>>
>>>>>>>[-[>>>>+<<<<-]>[>>>>+<<<<-]>[>>>>+<<<<-]>>]>>>[-]<[>+<-]<[-[<<<<+>>
>>-]<<<<]<<<<<<[-]]<<<<<<<[-]<<<<-]<-]>>>>>>>>>>>[-]<<]<<<<<<<<<<]
Type for instance "fg" to toggle the cell at row f and column g
Hit enter to calculate the next generation
Type q to quit
```
That really is Brainfuck.

89
themes/after-dark/docs/content/feature/content-security-policy.md Normal file
View File

@@ -0,0 +1,89 @@
+++
title = "Content Security Policy"
description = "Control resources the user agent is allowed to load."
categories = ["security"]
tags = ["privacy", "xss", "csp"]
features = ["code highlighter", "related content", "snippets"]
[blackfriday]
smartypants = false
[[copyright]]
owner = "Josh Habdas"
date = "2019"
license = "agpl-3.0-or-later"
+++
After Dark helps you secure your site using Content Security Policy (CSP). Basic CSP is enabled by default and [Advanced Configurations]({{< relref "#advanced-configuration" >}}) are also possible.
Basic CSP offers minimal protection but is still helpful as it keeps resources from accidentally being loaded over `http`. In addition, Basic CSP automatically blocks all Flash and Silverlight objects before they have a chance to load.
## Basic Configuration
Disable CSP site-wide add the following to your site config:
```toml
[params]
disable_csp = true # disable site-wide
```
Disable CSP for a specific page using front matter:
```toml
disable_csp = true # disable for page
```
## Advanced Configuration
Advanced configuration allows you to fine-tune policy directives based on your specific needs. To get started specify at least 1 CSP directive in site config.
{{% hackcss-alert type="info" %}}**Note:** You may wish to {{< external "https://gohugo.io/getting-started/usage/#disable-livereload" "Disable LiveReload" />}} while defining advanced config.{{% /hackcss-alert %}}
Define the {{< external "https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/script-src" "script-src" />}} directive site-wide:
```toml
[params.security.csp.directives]
scriptSrc = [
"'self'",
"'unsafe-inline'",
"https:",
"'sha512-Jx/MqTxYWqHdoOkHItRJJZCvFDhERPr5gG4I5ESu3V+BgQyAQ6wXfdsGzhzmT0yyvkAWz2jbrn81q90RRJTSTg=='",
"'sha512-hno7WeTIciCJSjg/myjyK30HYkrcGCVwo4g4SpUalvrs3r2lS7bPNIQwbCNypKbg7BZ1sA4AsGnk6Gq4NOKpGA=='",
"'sha512-ISTAV0GadOIz/NXXHOS&+eCM0ysXVVHhQTlvA6LJxz/DeA5yIxm0Vqf5IE&+WH0yuuXkayAKtoZkQ326nch5f/fg=='",
"'strict-dynamic'"
]
```
This will override the `script-src` directive's advanced default:
Directive | Mapping | Advanced Default
--- | --- | ---
default-src | defaultSrc | 'none'
connect-src | connectSrc | 'self'
worker-src | workerSrc | 'self'
font-src | fontSrc | 'self'
media-src | mediaSrc | 'self'
img-src | imgSrc | 'self' data:
script-src | scriptSrc | 'none'
style-src | styleSrc | 'self' 'unsafe-inline'
frame-src | frameSrc | 'self'
object-src | objectSrc | 'none'
Once set, view the `Content-Security-Policy` meta tag in the `head` of your page and inspect the console for errors as you navigate to different pages. Each time you encounter an error caused by CSP is an opportunity to improve your policy.
Add page-specific directives from page front matter using the same structure and naming conventions used in site config to append items for that page:
```toml
[security.csp.directives]
scriptSrc = [
"'sha512-TKVuLlCT8+a0Chpa6Pw3clhu9fhZ9JOzgblgxQaUQVP/z4lfPnrdyWDOgucORnS2qapWu/iPVG2d0ywyGH2NjA=='"
]
```
{{% hackcss-alert type="info" %}}**Note:** Page-specific directives _will not_ override any site-wide setting and will not apply without first overriding its advanced default via site config.{{% /hackcss-alert %}}
Continue overriding advanced defaults as necessary until all CSP errors are resolved or you're satisfied with the changes.
## Additional Resources
- About {{< external "https://infosec.mozilla.org/guidelines/web_security#content-security-policy" "Content Security Policy" />}}
- Test policy with {{< external "https://observatory.mozilla.org" "Observatory by Mozilla" />}}
- See {{< external "https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy#Examples" "CSP examples" />}} to learn more

167
themes/after-dark/docs/content/feature/custom-homepage.md Normal file
View File

@@ -0,0 +1,167 @@
+++
title = "Custom Homepage"
description = "Hide the blog and specify how content is shown."
categories = ["customizing"]
tags = ["layout", "templating", "style", "metadata", "semantics", "robots"]
features = ["code highlighter", "snippets", "related content"]
[[copyright]]
owner = "Josh Habdas"
date = "2019"
license = "agpl-3.0-or-later"
+++
After Dark provides a configurable way to customize the content shown on your homepage without the need for creating a [Custom Layout](../custom-layouts). Use it to hide the blog and display recent content from various sections of your site.
{{< hackcss-alert >}}
{{< figure
src="/images/screenshots/feature-homepage-fs8.png"
>}}
{{< /hackcss-alert >}}
{{< hackcss-card header="Quick Example" >}}
{{< highlight toml "linenos=inline" >}}
[params.layout.home]
hide_blog = true
[[params.layout.home.section]]
type = "about"
weight = 1
[[params.layout.home.section]]
type = "code" # Required, name of section to show on homepage
limit = 4 # Optional, set number of items to show from section
weight = 2 # Optional, choose layout order for section
thumbs = ["fill", "400x400"] # Optional, thumbnail image processing
[[params.layout.home.section]]
type = "site"
limit = 2
weight = 3
[[params.layout.home.section]]
type = "post"
limit = 3
weight = 4
{{< /highlight >}}
{{< /hackcss-card >}}
Start by adding a section to display:
```toml
[[params.layout.home.section]]
type = "post"
```
Limit the number of items shown:
```toml
[[params.layout.home.section]]
type = "post"
limit = 3
```
Then hide the blog if you like:
```toml
[params.layout.home]
hide_blog = true
```
And use the space to add more sections:
```toml
[[params.layout.home.section]]
type = "post"
[[params.layout.home.section]]
type = "podcast"
```
Or add stand-alone pages too:
```toml
[[params.layout.home.section]]
type = "about"
```
And display them in order by weight:
```toml
[[params.layout.home.section]]
type = "about"
weight = 1
[[params.layout.home.section]]
type = "podcast"
weight = 2
```
With each section containing generic [Structured Data](../structured-data):
```
Homepage
├── Thing
└── ItemList
├── Thing
├── Thing
└── Thing
```
Which may be enhanced using front matter:
```
├── archetypes
├── content
│ └── about.md
│ └── podcast
│ ├── _index.md
│ ├── secrets-of-silicon-valley
│ ├── the-5g-dragnet
│ └── language-is-a-weapon
├── layouts
```
```toml
title = "About"
description = "Information about the site."
[schema]
type = "AboutPage" # inside about.md
```
```toml
title = "Podcasts"
description = "Live on the Web. Fresh to your head."
[schema]
type = "Audiobook" # inside _index.md
```
Resulting in machine-readable structure:
```
Homepage
├── AboutPage
└── ItemList
├── Audiobook
├── Audiobook
└── Audiobook
```
Including `name` and `description` properties consistent between what's shown to users and what will appear in <abbr title="Search Engine Results Page">SERP</abbr>s.
Item lists may include thumbnail images generated automatically for any `ItemList` element using a [Post Images](../post-images)-formatted resource bundle and containing `thumbnail` in the name:
```toml
[[resources]]
src = "**hyperdrive-logo.png"
name = "header thumbnail"
```
Images include high-performance defaults and may be modified using {{< external "https://gohugo.io/content-management/image-processing/#readout" "Hugo Image Processing" />}} via config using the `thumbs` property in site config:
```toml
[[params.layout.home.section]]
type = "code"
thumbs = ["fill", "400x400"]
```
Valid image processing options are `fit`, `resize` and `fill`, and image dimensions may be omitted for a 4x3 aspect ratio thumbnail.

86
themes/after-dark/docs/content/feature/custom-layouts.id.md Normal file
View File

@@ -0,0 +1,86 @@
+++
title = "Custom Layouts"
description = "Menyesuaikan tata letak tanpa memodifikasi sumber tema."
categories = ["customizing"]
tags = ["layout", "templating", "style"]
feature = ["code highlighter", "snippets", "related content"]
[[copyright]]
owner = "Josh Habdas"
date = "2019"
license = "agpl-3.0-or-later"
+++
After Dark menggunakan blok template untuk memfasilitasi pembuatan tata letak halaman yang unik di mana saja di dalam situs anda. Gunakan itu untuk menambah [Snippets](../snippets) ke setiap bagian halaman, secara selektif [Custom Styles](../custom-styles) atau tambahkan kira-kira satu bagian ke beranda.
## Bagaimana cara kerjanya
Berikan 'block' berikut ini dengan nilai standart pilihan:
```go-html-template
<title>{{ block "title" }}Judul Situs{{ end }}</title>
```
Templates warisan dapat menghilangkan blok dan mempertahankan nilai standart atau menerangkan block untuk mengubah nilainya, seperti yang ditunjukan berikut ini:
```go-html-template
{{ define "title" }}Judul Halaman | Site Title{{ end }}
```
Digabungkan dengan {{< external href="https://gohugo.io/templates/lookup-order/" text="Lookup Order in Hugo" />}} block menjadi penting dalam menunjuk bagian dalam yang dapat diedit, dan meningkatkan penggunaan kembali file templates yang sudah ada.
## Diterapkan dalam konteks
Inilah template yang digunakan untuk menampilkan sebuah halaman di After Dark:
{{< highlight go-html-template >}}
{{< include "themes/after-dark/layouts/_default/single.html" >}}
{{< /highlight >}}
Tidak banyak tentang itu. Sebagian besar kode diwarisi dari template lain, memberikan gambaran yang jelas tentang struktur halaman dan membuat modifikasi yang sepele.
## Membuat milik anda sendiri
Bayangkan anda membuat bagian Buku Audio untuk situs anda dan menginginkan dua layout khusus baru: yang satu untuk membuat daftar klip audio dan yang lain untuk menjelaskan.
Untuk mendapatkan hal tersebut dengan menggunakan template block, pertama buat bagian 'audiobook' dengan satu halaman untuk menggambarkan klip:
```sh
$ hugo new audiobook/the-power-of-now.md
```
Menghasilkan struktur pohon sebagai berikut:
```
├── assets
├── content
│   └── audiobook
│   └── the-power-of-now.md
├── layouts
```
Jika sudah melayani situs anda bagian dan halaman audiobooks anda akan segera muncul menggunakan standart template block. Untuk menyesuaikan dari standart, tambahkan `list.html` dan `single.html` ke a `layouts/audiobook` di situs direktori anda.
Jika file belum ada, salinlah dari tema standart:
```sh
$ mkdir -p layouts/audiobook
$ cp themes/after-dark/layouts/_default/list.html layouts/audiobook
$ cp themes/after-dark/layouts/_default/single.html layouts/audiobook
```
Menghasilkan struktur pohon`layouts` sebagai berikut:
```
├── content
├── layouts
│   └── audiobook
│   ├── list.html
│ └── single.html
├── static
```
Sesuaikan `list.html` dan `single.html` layouts dan gunakan [Custom Styles](../custom-styles) untuk mendapatkan hasil yang diinginkan. Gunakan referensi sumber daya berikut sebagai bantuan:
- {{< external "https://gohugo.io/templates/" />}} untuk fungsi templating dan logika
- {{< external "https://devdocs.io" />}} untuk HTML yang komprehensif dan CSS reference
- {{< external "https://inclusive-components.design" />}} untuk ide pola design

89
themes/after-dark/docs/content/feature/custom-layouts.md Normal file
View File

@@ -0,0 +1,89 @@
+++
title = "Custom Layouts"
description = "Customize layouts without modifying theme source."
categories = ["customizing"]
tags = ["layout", "templating", "style"]
features = ["code highlighter", "snippets", "related content"]
[[copyright]]
owner = "Josh Habdas"
date = "2019"
license = "agpl-3.0-or-later"
+++
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.
## How it works
Given the following `block` with optional default value:
```go-html-template
<title>{{ block "title" }}Site Title{{ end }}</title>
```
Inheriting templates may omit the block and keep the default value or `define` the block to change its value, as shown here:
```go-html-template
{{ define "title" }}Page Title | Site Title{{ end }}
```
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.
## Applied in context
Here's the template used to display an individual page in After Dark:
{{< highlight go-html-template >}}
{{< include "themes/after-dark/layouts/_default/single.html" >}}
{{< /highlight >}}
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.
## Creating your own
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.
To achieve this using block templates first create an `audiobook` section with a single page to describe a clip:
```sh
$ hugo new audiobook/the-power-of-now.md
```
Resulting in the following `content` tree structure:
```
├── assets
├── content
│   └── audiobook
│   └── the-power-of-now.md
├── layouts
```
If already serving your site the Audiobooks section and page will appear 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.
If the files don't exist yet, copy them from theme defaults:
```sh
$ mkdir -p layouts/audiobook
$ cp themes/after-dark/layouts/_default/list.html layouts/audiobook
$ cp themes/after-dark/layouts/_default/single.html layouts/audiobook
```
Resulting in the following `layouts` tree structure:
```
├── content
├── layouts
│   └── audiobook
│   ├── list.html
│ └── single.html
├── static
```
Adjust `list.html` and `single.html` layouts and use [Custom Styles](../custom-styles) to achieve the desired result. Reference the following resources for help:
- {{< external "https://gohugo.io/templates/" />}} for templating functions and logic
- {{< external "https://devdocs.io" />}} for a comprehensive HTML and CSS reference
- {{< external "https://internetingishard.com" />}} learn HTML & CSS for free
- {{< external "https://inclusive-components.design" />}} for design pattern ideas
- {{< external "https://diveintohtml5.info" >}} background behind HTML5
- {{< external "https://gsnedders.html5.org/outliner/" />}} test your HTML document outline

40
themes/after-dark/docs/content/feature/custom-styles.id.md Normal file
View File

@@ -0,0 +1,40 @@
+++
title = "Custom Styles"
description = "Mengubah gaya tema untuk design kontrol yang lengkap."
categories = ["customizing"]
tags = ["color", "style", "branding"]
feature = ["code highlighter", "snippets"]
[[copyright]]
owner = "Josh Habdas"
date = "2019"
license = "agpl-3.0-or-later"
+++
After Dark menggunakan {{< external href="https://gohugo.io/hugo-pipes/" text="Hugo Pipes" />}} untuk mengaktifkan kostomisasi gaya tema menggunakan CSS. Jika tidak diubah gaya khusus berikut disediakan secara standart:
{{< highlight css "linenos=inline" >}}
{{< include "themes/after-dark/assets/css/custom.css" >}}
{{< /highlight >}}
Sesuaikan dari `custom.css` di situs `assets/css` direktori:
```
├── archetypes
├── assets
│   └── css
│   └── custom.css
├── content
```
Jika file belum ada, salinlah dari tema standart:
```sh
$ mkdir -p assets/css
$ cp themes/after-dark/assets/css/custom.css assets/css
```
Kemudian buka file dan mulailah mengedit, atau menghapusnya untuk mengembalikan ke bentuk standart.
{{< hackcss-alert type="info" >}}
<strong>Tip:</strong> Pilih dari ribuan palet warna yang telah ditetapkan {{< external "https://coolors.co/" />}}.
{{< /hackcss-alert >}}

40
themes/after-dark/docs/content/feature/custom-styles.md Normal file
View File

@@ -0,0 +1,40 @@
+++
title = "Custom Styles"
description = "Modify theme styles for complete design control."
categories = ["customizing"]
tags = ["color", "style", "branding"]
features = ["code highlighter", "snippets"]
[[copyright]]
owner = "Josh Habdas"
date = "2019"
license = "agpl-3.0-or-later"
+++
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:
{{< highlight css "linenos=inline" >}}
{{< include "themes/after-dark/assets/css/custom.css" >}}
{{< /highlight >}}
Adjust them from `custom.css` in the site `assets/css` directory:
```
├── archetypes
├── assets
│   └── css
│   └── custom.css
├── content
```
If the file doesn't exist yet, copy it from the theme default:
```sh
$ mkdir -p assets/css
$ cp themes/after-dark/assets/css/custom.css assets/css
```
Then open the file and begin editing, or remove it to restore default styles.
{{< hackcss-alert type="info" >}}
<strong>Tip:</strong> Choose from thousands of predefined color palettes on {{< external "https://coolors.co/" />}}.
{{< /hackcss-alert >}}

23
themes/after-dark/docs/content/feature/ephemeral-hosting.id.md Normal file
View File

@@ -0,0 +1,23 @@
+++
title = "Ephemeral Hosting"
description = "Hosting ephemeral dengan enkripsi end-to-end."
categories = ["security"]
tags = ["privacy", "networking"]
features = ["related content", "snippets"]
[[copyright]]
owner = "Josh Habdas"
date = "2019"
license = "agpl-3.0-or-later"
+++
Menggunakan {{< external href="https://serveo.net" text="Serveo" />}} secara singkat anda dapat membuka situs anda ke internet, tanpa perlu mendaftar. Use this to [Work Offline]({{< relref "work-offline" >}}) and quietly poke a hole through your NAT or firewall to move information more discretely.
{{% hackcss-alert type="warning" %}}**Warning:** No form of communication over the Internet is 100% secure.{{% /hackcss-alert %}}
Sajikan dan buka situs anda dengan perintah berikut:
```sh
$ hugo serve --disableLiveReload & ssh -R 80:localhost:1313 serveo.net
```
Setelah dimulai tekan `g` untuk inspeksi lalu lintas, atau berhenti untuk offline dan gunakan `fg` untuk kembali ke `hugo`. Instal {{< external href="https://matt.ucc.asn.au/dropbear/dropbear.html" text="dropbear" />}} or {{< external href="https://www.openssh.com" text="openssh" />}} jika anda membutuhkan `ssh`.

23
themes/after-dark/docs/content/feature/ephemeral-hosting.md Normal file
View File

@@ -0,0 +1,23 @@
+++
title = "Ephemeral Hosting"
description = "Briefly expose your site to the Internet over SSH with encryption."
categories = ["security"]
tags = ["privacy", "networking"]
features = ["related content", "snippets"]
[[copyright]]
owner = "Josh Habdas"
date = "2019"
license = "agpl-3.0-or-later"
+++
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. Use this to [Work Offline]({{< relref "work-offline" >}}) and quietly poke a hole through your NAT or firewall to move information more discretely.
{{% hackcss-alert type="warning" %}}**Warning:** No form of communication over the Internet is 100% secure.{{% /hackcss-alert %}}
Serve and expose your site with the following command:
```sh
$ hugo serve --disableLiveReload & ssh -R 80:localhost:1313 serveo.net
```
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`.

37
themes/after-dark/docs/content/feature/error-page.id.md Normal file
View File

@@ -0,0 +1,37 @@
+++
title = "Error Page"
description = "Berikan para pengunjung sebuah alasan agar tidak meninggalkan halaman ketika terjadi error."
categories = ["experience"]
tags = ["engagement", "retention", "branding"]
feature = ["error page", "snippets", "code highlighter", "related content", "index blocking"]
[[copyright]]
owner = "Josh Habdas"
date = "2019"
license = "agpl-3.0-or-later"
+++
After Dark termasuk animasi {{< external rel="nofollow help" href="/404.html" text="404 Page" />}} yang dapat anda tampilkan ketika halaman lain tidak dapat ditemukan. Halaman yang error berisi latar belakang animasi dengan layar penuh dan "404" link dengan perawatan Ginsu. Mengikuti tautan untuk menavigasi ke beranda.
{{< hackcss-card header="Interactive Example" >}}
<iframe title="Error Page Example" width="100%" height="300" src="/404.html"></iframe>
{{< /hackcss-card >}}
<!--more-->
Sesuaikan itu dari `404.html` di situs `content` direktori:
```
├── archetypes
├── content
│ ├── post
│   └── 404.html
├── layouts
```
Jika file belum ada, salinlah dari tema standart:
```sh
$ cp themes/after-dark/content/404.html content
```
Konfigurasikan server web anda untuk mengarahkan ulang ke `404.html` ketika halaman tidak dapat ditemukan untuk menggunakannya. Gabungkan dengan [Voyeur Module](/module/voyeur) untuk membantu membuat {{< external href="https://gohugo.io/content-management/urls/#aliases" text="Page Aliases" />}}.

37
themes/after-dark/docs/content/feature/error-page.md Normal file
View File

@@ -0,0 +1,37 @@
+++
title = "Error Page"
description = "Give visitors a reason to stay when errors occur."
categories = ["experience"]
tags = ["engagement", "retention", "branding"]
features = ["error page", "snippets", "code highlighter", "related content", "index blocking"]
[[copyright]]
owner = "Josh Habdas"
date = "2019"
license = "agpl-3.0-or-later"
+++
After Dark includes an animated {{< external rel="nofollow help" href="/404.html" text="404 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.
{{< hackcss-card header="Interactive Example" >}}
<iframe title="Error Page Example" width="100%" height="300" src="/404.html"></iframe>
{{< /hackcss-card >}}
<!--more-->
Adjust it from `404.html` in the site `content` directory:
```
├── archetypes
├── content
│ ├── post
│   └── 404.html
├── layouts
```
If the file doesn't exist yet, copy it from the theme default:
```sh
$ cp themes/after-dark/content/404.html content
```
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" />}}.

37
themes/after-dark/docs/content/feature/extended-builds.id.md Normal file
View File

@@ -0,0 +1,37 @@
+++
title = "Extended Builds"
description = "Build Hugo with Sass and Go CDK Deploy support."
categories = ["core"]
tags = ["docker", "container", "sass", "cloud", "ci"]
features = ["code highlighter", "related content"]
[[copyright]]
owner = "Josh Habdas"
date = "2019, 2020"
license = "agpl-3.0-or-later"
+++
After Dark ships with the ability to build Hugo from tagged-version source. Supply a version tag and let Docker Machine build you a high-performance extended Hugo build with integrated Sass and Go CDK deployment support.
To use install Docker then run the following command:
```sh
cd after-dark/docker/hugo && docker build .
```
Build container uses Alpine and includes `musl-dev` for high-performance. Update the `HUGO_VERSION` to get a specific Hugo release built. Upon successful build extract the resulting `hugo` binary out of the scratch container like:
```sh
docker create -it --name temp f2b785583ce8 sh && \
sudo docker cp temp:/usr/local/bin/hugo /usr/local/bin && \
docker rm -fv temp
```
Where `f2b785583ce8` is the scratch container's Image ID and `/usr/local/bin` is the destination on the host. Place executable in most appropriate directory.
For builds without Sass support enabled turn off `CGO_ENABLED`, pass in a phony value to `BUILD_TAGS`, create another build and give it a docker tag:
```sh
docker tag $(docker images -q | head -n 1) gohugoio/hugo:v0.61.0
```
It's recommended at least 2GB of storage space is available when running builds. The resulting binary inside the scratch container is less than 50MB.

37
themes/after-dark/docs/content/feature/extended-builds.md Normal file
View File

@@ -0,0 +1,37 @@
+++
title = "Extended Builds"
description = "Build Hugo with Sass and Go CDK Deploy support."
categories = ["core"]
tags = ["docker", "container", "sass", "cloud", "ci"]
features = ["code highlighter", "related content"]
[[copyright]]
owner = "Josh Habdas"
date = "2019, 2020"
license = "agpl-3.0-or-later"
+++
After Dark ships with the ability to build Hugo from tagged-version source. Supply a version tag and let Docker Machine build you a high-performance extended Hugo build with integrated Sass and Go CDK deployment support.
To use install Docker then run the following command:
```sh
cd after-dark/docker/hugo && docker build .
```
Build container uses Alpine and includes `musl-dev` for high-performance. Update the `HUGO_VERSION` to get a specific Hugo release built. Upon successful build extract the resulting `hugo` binary out of the scratch container like:
```sh
docker create -it --name temp f2b785583ce8 sh && \
sudo docker cp temp:/usr/local/bin/hugo /usr/local/bin && \
docker rm -fv temp
```
Where `f2b785583ce8` is the scratch container's Image ID and `/usr/local/bin` is the destination on the host. Place executable in most appropriate directory.
For builds without Sass support enabled turn off `CGO_ENABLED`, pass in a phony value to `BUILD_TAGS`, create another build and give it a docker tag:
```sh
docker tag $(docker images -q | head -n 1) gohugoio/hugo:v0.61.0
```
It's recommended at least 2GB of storage space is available when running builds. The resulting binary inside the scratch container is less than 50MB.

62
themes/after-dark/docs/content/feature/featured-posts.md Normal file
View File

@@ -0,0 +1,62 @@
+++
title = "Featured Posts"
description = "Display your favorite blog posts front-and-center."
categories = ["navigation"]
tags = ["seo", "retention", "layout", "templating", "style"]
features = ["code highlighter", "snippets", "related content"]
[[copyright]]
owner = "Josh Habdas"
date = "2019"
license = "agpl-3.0-or-later"
+++
After Dark helps you showcase your favorite blog posts by allowing you to easily specify a set of pages to appear first in post listings using only site config.
{{< hackcss-alert >}}
{{< figure
src="/images/screenshots/feature-featured-posts-fs8.png"
>}}
{{< /hackcss-alert >}}
Use featured posts to drive more traffic to your highest value pages, increase the visibility of niche content or target pages for additional inbound links.
Adjust featured posts from {{< external href="https://gohugo.io/getting-started/configuration/" text="Site Configuration" />}} by adding:
```toml
[params.layout.post.featured]
limit = 3
items = [
"borg-backup-minio-scaleway",
"dual-boot-manjaro-mojave-macbook-pro",
"surfing-uncensorable-web",
"encrypted-internet-wireguard-manjaro-linux"
]
```
Modify `items` using the {{< external "https://gohugo.io/content-management/organization#slug" "page slugs" />}} from your posts and adjust the featured `limit` to the total number of items you wish to display. Like [Custom Homepage](../custom-homepage/) and [Related Content](../related-content/) performance-optimized thumbnail images will appear automatically when a post contains a [Post Image](../post-images/) with `thumbnail` in the name.
Optionally, customize thumbnail styling using [Custom Styles](../custom-styles/):
```css
ul.thumbnail.grid li a:hover figure {
filter: initial;
}
ul.thumbnail.grid li a figure {
position: relative;
line-height: 0;
margin-bottom: 8px;
}
ul.thumbnail.grid li a:hover figure::after {
content: "";
position: absolute;
bottom: 0;
display: block;
width: 100%;
height: 100%;
background: radial-gradient(
circle,
rgba(0,0,0,0.1) 0,
rgba(0,0,0,0.3) 100%
);
}
```

72
themes/after-dark/docs/content/feature/fetch-injection.id.md Normal file
View File

@@ -0,0 +1,72 @@
+++
title = "Fetch Injection"
description = "Memuat skrip dan gaya eksternal dengan kecepatan luar biasa."
categories = ["experience"]
tags = ["performance", "styles"]
feature = ["snippets", "related content", "code highlighter"]
[[copyright]]
owner = "Josh Habdas"
date = "2019"
license = "agpl-3.0-or-later"
+++
After Dark menggunakan {{< external rel="external help" href="https://git.habd.as/jhabdas/fetch-inject" text="Fetch Inject" />}} pustaka untuk memuat dan menjalankan skrip dan gaya ekesternal lebih cepat dari yang dapat dilakukan browser.
{{< external href="https://hackcabin.com/post/managing-async-dependencies-javascript/" text="Fetch Injection" />}} terkonsep dan dikembangkan untuk After Dark agar memungkinkan tautan dalam ke ukuran penuh [Galeri Gambar](/module/hall-of-mirrors) gambar tanpa memblokir pemuatan halaman dan memilki kinerja aplikasi lainnya:
<table>
<thead>
<tr>
<th rowspan="2" scope="col">Use Case</th>
<th colspan="2" scope="col">Chrome Performance Comparison (4G simulated connection speed)</th>
</tr>
<tr>
<th scope="col">Without Fetch Inject</th>
<th scope="col">With Fetch Inject</th>
</tr>
</thead>
<tbody>
<td>{{< external href="https://habd.as/talks/screaming-fast-wordpress-redis-vultr/" text="WordPress Twenty Seventeen" />}}</td>
<td>~3.600s</td>
<td>~0.918s</td>
</tbody>
</table>
Gunakan Fetch Inject di [Custom Layouts](../custom-layouts) untuk memuat skrip dan gaya asal usul silang atau dari direktori statis situs anda.
Berikan isi folder statis berikut:
```
├── layouts
├── static
│ ├── js
│ │ ├── jquery.slim.min.js
│ │ ├── tether.min.js
│ │ └── bootstrap.min.js
│ └── css
│ └── font-awesome.min.css
└── themes
```
Anda dapat memuat Bootstrap (w/Font Awesome) dan menunjukkan berapa lama itu selesai:
{{< highlight html "linenos=inline" >}}
<script>
fetchInject([
'https://cdn.jsdelivr.net/lodash/latest/lodash.min.js',
'https://cdn.jsdelivr.net/momentjs/latest/moment.min.js'
])
.then(() => {
const start = moment();
fetchInject(['/js/bootstrap.min.js'],
fetchInject([
'/js/jquery.slim.min.js',
'/js/tether.min.js',
'/css/font-awesome.min.css'
])
).then(console.log(`Bootstrap Loaded: ${_.capitalize(start.toNow())}.`));
});
</script>
{{< /highlight >}}
Fetch Inject adalah 555 bytes terkompresi, non-blocking dan disertakan secara default pada [Custom Layouts](../custom-layouts). Kunjungi {{< external href="https://codepen.io/jhabdas/pen/MpVeOE?editors=0012" text="CodePen Playground" />}} untuk mencobanya.

72
themes/after-dark/docs/content/feature/fetch-injection.md Normal file
View File

@@ -0,0 +1,72 @@
+++
title = "Fetch Injection"
description = "Load external scripts and styles with incredible speed."
categories = ["experience"]
tags = ["performance", "styles"]
features = ["snippets", "related content", "code highlighter"]
[[copyright]]
owner = "Josh Habdas"
date = "2019"
license = "agpl-3.0-or-later"
+++
After Dark uses the {{< external rel="external help" href="https://git.habd.as/jhabdas/fetch-inject" text="Fetch Inject" />}} library to load and execute external scripts and styles faster than browsers are capable of otherwise.
{{< external href="https://hackcabin.com/post/managing-async-dependencies-javascript/" text="Fetch Injection" />}} was conceptualized and developed for After Dark to make it possible to deep-link to full-sized [Image Gallery](/module/hall-of-mirrors) images without blocking page load and has other performance applications:
<table>
<thead>
<tr>
<th rowspan="2" scope="col">Use Case</th>
<th colspan="2" scope="col">Chrome Performance Comparison (4G simulated connection speed)</th>
</tr>
<tr>
<th scope="col">Without Fetch Inject</th>
<th scope="col">With Fetch Inject</th>
</tr>
</thead>
<tbody>
<td>{{< external href="https://habd.as/talks/screaming-fast-wordpress-redis-vultr/" text="WordPress Twenty Seventeen" />}}</td>
<td>~3.600s</td>
<td>~0.918s</td>
</tbody>
</table>
Use Fetch Inject in your [Custom Layouts](../custom-layouts) to load scripts and styles cross-origin or from your site `static` directory.
Given the following `static` folder contents:
```
├── layouts
├── static
│ ├── js
│ │ ├── jquery.slim.min.js
│ │ ├── tether.min.js
│ │ └── bootstrap.min.js
│ └── css
│ └── font-awesome.min.css
└── themes
```
You can load Bootstrap (w/Font Awesome) and show how long ago it finished:
{{< highlight html "linenos=inline" >}}
<script>
fetchInject([
'https://cdn.jsdelivr.net/lodash/latest/lodash.min.js',
'https://cdn.jsdelivr.net/momentjs/latest/moment.min.js'
])
.then(() => {
const start = moment();
fetchInject(['/js/bootstrap.min.js'],
fetchInject([
'/js/jquery.slim.min.js',
'/js/tether.min.js',
'/css/font-awesome.min.css'
])
).then(console.log(`Bootstrap Loaded: ${_.capitalize(start.toNow())}.`));
});
</script>
{{< /highlight >}}
Fetch Inject is 555 bytes compressed, non-blocking and included by default in [Custom Layouts](../custom-layouts). Visit the {{< external href="https://codepen.io/jhabdas/pen/MpVeOE?editors=0012" text="CodePen Playground" />}} to try it out.

47
themes/after-dark/docs/content/feature/fuzzy-search.id.md Normal file
View File

@@ -0,0 +1,47 @@
+++
title = "Fuzzy Search"
description = "Secara cepat menemukan konten yang telah di indeks dimanapun pada situs anda."
categories = ["navigation"]
tags = ["links", "search", "controls"]
feature = ["code highlighter", "snippets", "related content"]
[[copyright]]
owner = "Josh Habdas"
date = "2019"
license = "agpl-3.0-or-later"
+++
Jika mesin pencari dapat menemukannya, anda pun juga bisa. Temukan lokasi konten yang dapat diindeks dengan cepat menggunakan fuzzy search. Tidak memerlukan pendaftaran.
{{< hackcss-card header="Interactive Example" >}}
<iframe scrolling="no" title="Error Page Example" width="100%" height="300" src="/search/?s=uzzy%20searvh"></iframe>
{{< /hackcss-card >}}
Sesuaikan dari `_index.md` di situs `content/search` direktori:
```
├── archetypes
├── content
│ └── search
│ └── _index.md
├── static
├── themes
```
Jika file belum ada, buatlah:
```sh
$ hugo new search/_index.md
```
Dan tentukan`JSON` {{< external href="https://gohugo.io/templates/output-formats" text="Output Format" />}} di dalam situs konfigurasi:
```toml
[outputs]
home = ["HTML", "RSS", "JSON"]
```
{{% hackcss-alert type="info" %}}**Note:** ini menambahkan `JSON` sambil menyimpan `HTML` dan `RSS` secara standart.{{% /hackcss-alert %}}
Setelah diaktifkan, situs anda akan mulai menghasilkan file `index.json` selama pembuatan, memberikan fuzzy search data yang dibutuhkan untuk membantu anda menemukan halaman.
Cobalah dengan menavigasi [domain.example/search](/search), memasukkan permintaan pencarian dan dengan menggunakan <kbd>Tab</kbd> untuk menavigasi diantara hasil pencarian.

47
themes/after-dark/docs/content/feature/fuzzy-search.md Normal file
View File

@@ -0,0 +1,47 @@
+++
title = "Fuzzy Search"
description = "Quickly locate indexed content anywhere on the site."
categories = ["navigation"]
tags = ["links", "search", "controls"]
features = ["code highlighter", "snippets", "related content"]
[[copyright]]
owner = "Josh Habdas"
date = "2019"
license = "agpl-3.0-or-later"
+++
If a search engine can find it, so can you. Quickly locate indexable content site-wide with fuzzy search. No registration necessary.
{{< hackcss-card header="Interactive Example" >}}
<iframe scrolling="no" title="Error Page Example" width="100%" height="300" src="/search/?s=uzzy%20searvh"></iframe>
{{< /hackcss-card >}}
Adjust it from `_index.md` in the site `content/search` directory:
```
├── archetypes
├── content
│ └── search
│ └── _index.md
├── static
├── themes
```
If the file doesn't exist, yet create it:
```sh
$ hugo new search/_index.md
```
And specify the `JSON` {{< external href="https://gohugo.io/templates/output-formats" text="Output Format" />}} in site config:
```toml
[outputs]
home = ["HTML", "RSS", "JSON"]
```
{{% hackcss-alert type="info" %}}**Note:** This adds `JSON` while keeping the `HTML` and `RSS` defaults.{{% /hackcss-alert %}}
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.
Try it now by navigating to [domain.example/search](/search/), or, if enabled, `Search` in the [Section Menu](../section-menu/), entering a query and navigating between results using <kbd>Tab</kbd>.

56
themes/after-dark/docs/content/feature/index-blocking.id.md Normal file
View File

@@ -0,0 +1,56 @@
+++
title = "Index Blocking"
description = "Menentukan halaman untuk mencegahnya muncul dalam pencarian."
categories = ["search"]
tags = ["links", "search", "robots", "metadata"]
feature = ["code highlighter", "related content", "snippets"]
[[copyright]]
owner = "Josh Habdas"
date = "2019"
license = "agpl-3.0-or-later"
+++
After Dark menggunakan `noindex` robots meta arahan untuk mencegah mesin pencari merayap dan mengindeks bagian-bagian tertentu dari situs anda. Itu muncul di dokumen HTML `head` dan terlihat seperti berikut ini:
```html
<meta name="robots" content="noindex">
```
Tidak seperti {{< external href="http://www.robotstxt.org" text="robots.txt" />}} meta arahan diterangkan dalam konten halaman itu sendiri dan dengan jelas menunjuk yang mana, jika ada, halaman harus diblokir dari pengindeksan bahkan jika beberapa halaman tersebut muncul di situs anda {{< external href="https://gohugo.io/templates/sitemap-template/" text="Sitemap" />}}.
Untuk memfasilitasi penemuan halaman indeks yang diblokir [Fuzzy Search](../fuzzy-search) menggunakan meta arahan yang sama yang terbuka ke mesin pencari untuk mencegah penyingkapan halaman dalam daftar hasil itu sendiri. Oleh karena itu jika sebuah halaman dapat ditemukan di fuzzy search, pada akhirnya halaman itu dapat muncul pada halaman hasil mesin pencari.
Sesuaikan pemblokiran indeks per-halaman menggunakan `noindex` {{< external href="https://gohugo.io/content-management/front-matter/" text="Front Matter" />}}:
```toml
noindex = true # set false atau hapus untuk mmebuka blokir
```
Blok semua bagian menggunakan file`_index.md` dengan pengaturan seperti diatas:
```
├── content
│ ├── legal
│ │ ├── _index.md
│ │ ├── terms.md
│ │ └── privacy.md
│ ├── post
```
Secara standart jenis halaman seperti berikut diblokir secara otomatis:
- Daftar bagian secara otomatis ditautkan dari [Menu Bagian](../section-menu);
- [Halaman Taksonomi](../taxonomy-pages) seperti `Category`, `Tag` dan daftar istilah; dan,
- Jika diaktifkan, halaman [Fuzzy Search](../fuzzy-search) atau beberapa hasil yang terkait erat di dalam.
Sesuaikan defaults menggunakan pengaturan `noindex_kinds` dari {{< external href="https://gohugo.io/getting-started/configuration/" text="Site Configuration" />}}. Sebagai contoh, untuk mengaktifkan perayapan dari bagian halaman tambahkan hal berikut ini ke konfigurasi :
```toml
[params]
noindex_kinds = [
"taxonomy",
"taxonomyTerm"
] # crawl "section" pages
```
Pelajari tentang {{< external href="https://moz.com/learn/seo/robots-meta-directives" text="Robots Meta Directives on Moz" />}} dan lihatlah bagaimana Google menggunakan `noindex` di {{< external href="https://support.google.com/webmasters/answer/93710" text="Block search indexing with 'noindex'" />}}.

56
themes/after-dark/docs/content/feature/index-blocking.md Normal file
View File

@@ -0,0 +1,56 @@
+++
title = "Index Blocking"
description = "Define pages to prevent them from appearing in search."
categories = ["search"]
tags = ["links", "search", "robots", "metadata"]
features = ["code highlighter", "related content", "snippets"]
[[copyright]]
owner = "Josh Habdas"
date = "2019"
license = "agpl-3.0-or-later"
+++
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:
```html
<meta name="robots" content="noindex">
```
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" />}}.
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.
Adjust index blocking per-page using `noindex` {{< external href="https://gohugo.io/content-management/front-matter/" text="Front Matter" />}}:
```toml
noindex = true # set false or remove to unblock
```
Block entire sections using an `_index.md` file with the above setting:
```
├── content
│ ├── legal
│ │ ├── _index.md
│ │ ├── terms.md
│ │ └── privacy.md
│ ├── post
```
By default the following page types are blocked automatically:
- Section listings automatically linked to from the [Section Menu](../section-menu);
- [Taxonomy Pages](../taxonomy-pages) such as `Category`, `Tag` and terms listings; and,
- If enabled, the [Fuzzy Search](../fuzzy-search) page or any deep-linked result within.
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:
```toml
[params]
noindex_kinds = [
"taxonomy",
"taxonomyTerm"
] # crawl "section" pages
```
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'" />}}.

31
themes/after-dark/docs/content/feature/jit-requests.id.md Normal file
View File

@@ -0,0 +1,31 @@
+++
title = "JIT Requests"
description = "Memaksimalkan sumber daya sambil meminimalkan permintaan eksternal."
categories = ["experience"]
tags = ["performance", "styles", "javascript"]
feature = ["related content", "snippets", "code highlighter"]
[[copyright]]
owner = "Josh Habdas"
date = "2019"
license = "agpl-3.0-or-later"
+++
After Dark membuat permintaan <abbr title="Just-In-Time">JIT</abbr> untuk beberapa aset eksternal untuk mengurangi konsumsi sumber daya dan meningkatkan kinerja halaman.
Ambil [Code Highlighter](../code-highlighter) stylesheet sebagai contoh:
{{< highlight css >}}
{{< include "themes/after-dark/static/css/syntax.css" >}}
{{< /highlight >}}
Kode stylesheet yang ditunjukkan diatas itu sendiri disorot menggunakan permintaan JIT. Konfirmasikan dengan melihat permintaan jaringan untuk halaman ini dan amati permintaan`fetch` untuk file `syntax.css` seperti yang digambarkan sebagai berikut:
```sh
jit-requests (document)
├── lazysizes.min.js (fetch)
├── syntax.css (fetch)
```
Menggunakan [Fetch Injection](../fetch-injection) permintaan JIT dikeluarkan untuk mulai mengunduh sorotan stylesheet dengan cepat secara pararel dengan sumber daya lain, dan tata letak dasar berhati-hati untuk memastikan CSS hanya diminta pada halaman yang membutuhkan itu.
Buatlah permintaan JIT anda sendiri menggunakan [Custom Layout](../custom-layouts) dan [Fetch Injection](../fetch-injection).

31
themes/after-dark/docs/content/feature/jit-requests.md Normal file
View File

@@ -0,0 +1,31 @@
+++
title = "JIT Requests"
description = "Maximize resources while minimizing external requests."
categories = ["experience"]
tags = ["performance", "styles", "javascript"]
features = ["related content", "snippets", "code highlighter"]
[[copyright]]
owner = "Josh Habdas"
date = "2019"
license = "agpl-3.0-or-later"
+++
After Dark makes <abbr title="Just-In-Time">JIT</abbr> requests for some external assets to cut down on resource consumption and increase page performance.
Take the [Code Highlighter](../code-highlighter) stylesheet for example:
{{< highlight css >}}
{{< include "themes/after-dark/static/css/syntax.css" >}}
{{< /highlight >}}
The stylesheet code shown above is itself highlighted using a JIT request. Confirm by viewing the network requests for this page and observe the `fetch` request for the `syntax.css` file as depicted here:
```sh
jit-requests (document)
├── lazysizes.min.js (fetch)
├── syntax.css (fetch)
```
Using [Fetch Injection](../fetch-injection) a JIT request is issued to begin downloading the highlighter stylesheet on-the-fly in parallel with other resources and the base layout takes care to ensure the CSS is only requested on pages that need it.
Create your own JIT requests using [Custom Layout](../custom-layouts) and [Fetch Injection](../fetch-injection).

26
themes/after-dark/docs/content/feature/keywords-meta.id.md Normal file
View File

@@ -0,0 +1,26 @@
+++
title = "Keywords Meta"
description = "Tambahkan detail semantik tentang isi materi pelajaran."
categories = ["search"]
tags = ["metadata", "robots", "SEO"]
feature = ["code highlighter", "related content"]
[[copyright]]
owner = "Josh Habdas"
date = "2019"
license = "agpl-3.0-or-later"
+++
Kata kunci menawarkan penjelasan kepada robot mengenai masalah pada konten anda. After Dark menghasilkan kata kunci secara otomatis untuk halaman yang diberikan tag taksonomi untuk halaman itu, dan untuk halaman lain menggunakan taksonomi kategori situs.
Sesuaikan frase kunci dari {{< external href="https://gohugo.io/content-management/front-matter/" text="Front Matter" />}} menggunakan `keywords` array seperti:
```toml
keywords = [
"web development",
"digital marketing",
"social media",
"link building"
]
```
Meskipun dianggap tidak relevan untuk mencari peringkat, kata kunci dapat menjadi cara yang berguna untuk mendokumentasikan istilah pencarian target dan frase kunci yang digunakan dalam <abbr title="Bayar Per Klik">PPC</abbr> kampanye.

26
themes/after-dark/docs/content/feature/keywords-meta.md Normal file
View File

@@ -0,0 +1,26 @@
+++
title = "Keywords Meta"
description = "Add semantic detail regarding content subject matter."
categories = ["search"]
tags = ["metadata", "robots", "SEO"]
features = ["code highlighter", "related content"]
[[copyright]]
owner = "Josh Habdas"
date = "2019"
license = "agpl-3.0-or-later"
+++
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.
Adjust key phrases from {{< external href="https://gohugo.io/content-management/front-matter/" text="Front Matter" />}} using a `keywords` array like so:
```toml
keywords = [
"web development",
"digital marketing",
"social media",
"link building"
]
```
While not considered relevant to search rankings, keywords can be a useful way to document target search terms and key phrases used in <abbr title="Pay Per Click">PPC</abbr> campaigns.

35
themes/after-dark/docs/content/feature/last-modified.id.md Normal file
View File

@@ -0,0 +1,35 @@
+++
title = "Last Modified"
description = "Membantu pengunjung memahami kapan postingan terakhir diubah."
categories = ["experience"]
tags = ["publishing", "expired", "future", "posts", "date", "time"]
feature = ["code highlighter", "snippets", "related content"]
[[copyright]]
owner = "Josh Habdas"
date = "2019"
license = "agpl-3.0-or-later"
+++
Menunjukkan postingan dengan perubahan substantif atau cukup dengan gambar sebelumnya, postingan yang lebih relevan semakin dekat ke bagian atas daftar postingan yang terakhir dimodifikasi.
Modifikasi akan dibuat jelas bagi pengunjung dengan info yang terlihat di rangkuman postingan dan tanggal publikasi asli akan tetap utuh di dalam postingan bylines .
Untuk robot, melakukan perubahan ini akan secara otomatis memperbarui Skema Data Terstruktur, umpan RSS dan pengaturan`lastmod` {{< external href="https://gohugo.io/templates/sitemap-template/" text="Sitemap" />}} anda.
Sesuaikan yang terakhir diubah dengan menambahkan `publishdate` ke postingan {{< external href="https://gohugo.io/content-management/front-matter/" text="Front Matter" />}} dan memperbarui `date` ke tanggal dan waktu yang ingin anda tampilkan untuk modifikasi.
Anda bisa spesifik dan menggunakan tanggal dan waktu (dengan mengimbangi zona waktu) seperti:
```toml
date = "2017-02-02T01:20:56-06:00"
publishdate = "2016-11-21T10:32:33+08:00"
```
Atau kurang spesifik dan hanya menggunakan tanggal:
```toml
date = "2017-02-02"
publishdate = "2016-11-21"
```
Juga memungkinkan untuk tanggal yang akan datang dan yang sudah berlalu untuk konten di Hugo. Untuk mempelajari lebih lanjut,lihat dokumentasi di {{< external href="https://gohugo.io/getting-started/usage/#draft-future-and-expired-content" text="Draft, Future, and Expired Content" />}}.

35
themes/after-dark/docs/content/feature/last-modified.md Normal file
View File

@@ -0,0 +1,35 @@
+++
title = "Last Modified"
description = "Help visitors understand when posts were last modified."
categories = ["experience"]
tags = ["publishing", "expired", "future", "posts", "date", "time"]
features = ["code highlighter", "snippets", "related content"]
[[copyright]]
owner = "Josh Habdas"
date = "2019"
license = "agpl-3.0-or-later"
+++
Denote posts with substantive changes or simply draw older, more relevant posts closer to the top of the listings with last modified.
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](../post-bylines).
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" />}}.
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.
You can be specific and use a datetime (with timezone offset) like:
```toml
date = "2017-02-02T01:20:56-06:00"
publishdate = "2016-11-21T10:32:33+08:00"
```
Or less specific and use just the dates:
```toml
date = "2017-02-02"
publishdate = "2016-11-21"
```
It's also possible to set 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" />}}.

50
themes/after-dark/docs/content/feature/lazy-loading.id.md Normal file
View File

@@ -0,0 +1,50 @@
+++
title = "Lazy Loading"
description = "Tunda pemuatan gambar, iframe dan skrip."
categories = ["experience"]
tags = ["performance", "images", "graphics"]
feature = ["code highlighter", "related content", "snippets"]
[[copyright]]
owner = "Josh Habdas"
date = "2019"
license = "agpl-3.0-or-later"
+++
After Dark menggunakan {{< external href="https://github.com/aFarkas/lazysizes" text="lazySizes" />}} untuk memprioritaskan pemuatan sumber daya eksternal tertentu untuk meningkatkan waktu pemuatan halaman dan membantu mengurangi konsumsi bandwith secara keseluruhan.
Lazy loading bekerja secara otomatis untuk [Custom Homepage](../custom-homepage) thumbnails, [Post Images](../post-images) dan ketika menggunakan [Figure Shortcode](/shortcode/figure), atau terkait dengan [Snippet](../snippets), seperti yang terlihat sebagai berikut:
{{< figure
src="https://source.unsplash.com/Y-w15LfHO8w/5184x3456"
lqipsrc="https://source.unsplash.com/Y-w15LfHO8w/1080x720"
caption="Be Creative"
attr="AK¥N Cakiner"
attrlink="https://unsplash.com/@akin"
>}}
Untuk menggunakan lazy loading di [Custom Layouts](../custom-layouts) atau saat membuat milik anda sendiri [Shortcodes](/shortcode) menambahkan atribut kelas `lazyload` dan `data` yang relevan seperti yang ditunjukkan di sini:
```html
<!-- non-responsive -->
<img data-src="image.jpg" class="lazyload">
```
```html
<!-- responsive with automatic sizes calculation -->
<img
data-sizes="auto"
data-src="image2.jpg"
data-srcset="image1.jpg 300w, image2.jpg 600w, image3.jpg 900w"
class="lazyload">
```
```html
<!-- iframe example -->
<iframe frameborder="0"
class="lazyload"
allowfullscreen
data-src="//www.youtube.com/embed/ZfV-aYdU4uE">
</iframe>
```
Lihat {{< external href="https://github.com/aFarkas/lazysizes" text="lazySizes" />}} sebagai informasi dan contoh tambahan.

50
themes/after-dark/docs/content/feature/lazy-loading.md Normal file
View File

@@ -0,0 +1,50 @@
+++
title = "Lazy Loading"
description = "Defer loading of images, iframes and scripts."
categories = ["experience"]
tags = ["performance", "images", "graphics"]
features = ["code highlighter", "related content", "snippets"]
[[copyright]]
owner = "Josh Habdas"
date = "2019"
license = "agpl-3.0-or-later"
+++
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.
Lazy loading works automatically for [Custom Homepage](../custom-homepage) thumbnails, [Post Images](../post-images) and when using the [Figure Shortcode](/shortcode/figure), or related [Snippet](../snippets), as seen here:
{{< figure
src="https://source.unsplash.com/Y-w15LfHO8w/5184x3456"
lqipsrc="https://source.unsplash.com/Y-w15LfHO8w/1080x720"
caption="Be Creative"
attr="AK¥N Cakiner"
attrlink="https://unsplash.com/@akin"
>}}
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:
```html
<!-- non-responsive -->
<img data-src="image.jpg" class="lazyload">
```
```html
<!-- responsive with automatic sizes calculation -->
<img
data-sizes="auto"
data-src="image2.jpg"
data-srcset="image1.jpg 300w, image2.jpg 600w, image3.jpg 900w"
class="lazyload">
```
```html
<!-- iframe example -->
<iframe frameborder="0"
class="lazyload"
allowfullscreen
data-src="//www.youtube.com/embed/ZfV-aYdU4uE">
</iframe>
```
See {{< external href="https://github.com/aFarkas/lazysizes" text="lazySizes" />}} for additional information and examples.

32
themes/after-dark/docs/content/feature/link-typing.id.md Normal file
View File

@@ -0,0 +1,32 @@
+++
title = "Link Typing"
description = "Menunjukkan hubungan antar dokumen secara eksplisit."
categories = ["navigation"]
tags = ["links", "accessibility", "taxonomy", "metadata"]
feature = ["code highlighter", "snippets", "related content"]
[[copyright]]
owner = "Josh Habdas"
date = "2019"
license = "agpl-3.0-or-later"
+++
After Dark menggunakan pengetikan tautan untuk menunjukkan hubungan semantik antara dokumen. Secara default tipe tautan `alternate` digunakan untuk menyorot keberadaan umpan web di beranda dan di dalam daftar taksonomi:
```html
<link href="https://domain.example/index.xml" rel="alternate" type="application/rss+xml" title="After Dark">
<link href="https://domain.example/categories/privacy/index.xml" rel="alternate" type="application/rss+xml" title="After Dark">
<link href="https://domain.example/tags/color/index.xml" rel="alternate" type="application/rss+xml" title="After Dark">
```
Sebagai tambahan ke defaults After Dark mengenali jenis tautan `prev` dan `next` jika ditentukan di halaman {{< external href="https://gohugo.io/content-management/front-matter/" text="Front Matter" />}}:
```toml
prev = "/series/learn-to-code/part-one/"
next = "/series/learn-to-code/part-three/"
```
Gunakan jenis tautan `prev` dan `next` untuk artikel tersegmentasi, {{< external "https://schema.org/LiveBlogPosting" "Live Blog Postings" />}} atau untuk meniru ciri-ciri taksonomi `series` jika tidak ada taksonomi seri.
Jenis tautan biasanya ditampilkan di bagian atas halaman di browser teks seperti {{< external href="http://elinks.or.cz" text="ELinks" />}} sebagai bentuk navigasi tambahan dan dapat membantu robot dan pengguna lebih memahami hubungan antar konten anda.
Pelajari lagi tentang {{< external href="http://devdocs.io/html/link_types" text="link types" />}} dan {{< external href="https://gohugo.io/content-management/taxonomies" text="Taxonomies in Hugo" />}}.

32
themes/after-dark/docs/content/feature/link-typing.md Normal file
View File

@@ -0,0 +1,32 @@
+++
title = "Link Typing"
description = "Explicitly indicate relationships between documents."
categories = ["navigation"]
tags = ["links", "accessibility", "taxonomy", "metadata"]
features = ["code highlighter", "snippets", "related content"]
[[copyright]]
owner = "Josh Habdas"
date = "2019"
license = "agpl-3.0-or-later"
+++
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:
```html
<link href="https://domain.example/index.xml" rel="alternate" type="application/rss+xml" title="After Dark">
<link href="https://domain.example/categories/privacy/index.xml" rel="alternate" type="application/rss+xml" title="After Dark">
<link href="https://domain.example/tags/color/index.xml" rel="alternate" type="application/rss+xml" title="After Dark">
```
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" />}}:
```toml
prev = "/series/learn-to-code/part-one/"
next = "/series/learn-to-code/part-three/"
```
Use `prev` and `next` link types for segmented articles, {{< external "https://schema.org/LiveBlogPosting" "Live Blog Postings" />}} or to mimic the traits of a `series` taxonomy if no series taxonomy is present.
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.
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" />}}.

15
themes/after-dark/docs/content/feature/module-system.id.md Normal file
View File

@@ -0,0 +1,15 @@
+++
title = "Module System"
description = "Meningkatkan fungsionalitas dengan modul pre built add on."
categories = ["core"]
tags = ["module", "imaging", "graphics", "analytics", "installation"]
feature = ["module system", "related content"]
[[copyright]]
owner = "Josh Habdas"
date = "2019"
license = "agpl-3.0-or-later"
+++
After Dark menggunakan {{< external href="https://gohugo.io/themes/theme-components/" text="Hugo Theme Components" />}} untuk menghasilkan sistem untuk menyertakan sejumlah prebuilt add-on [Modules](/module/) yang menyediakan fungsionalitas tambahan.
Lihat [Modules](/module/) ringkasan modul yang tersedia.

15
themes/after-dark/docs/content/feature/module-system.md Normal file
View File

@@ -0,0 +1,15 @@
+++
title = "Module System"
description = "Enhance site functionality with add-on modules."
categories = ["core"]
tags = ["module", "imaging", "graphics", "analytics", "installation"]
features = ["module system", "related content"]
[[copyright]]
owner = "Josh Habdas"
date = "2019"
license = "agpl-3.0-or-later"
+++
After Dark uses {{< external href="https://gohugo.io/themes/theme-components/" text="Theme Components" />}} and [Fetch Injection](../fetch-injection/) to provide a plug-in system for enhancing site functionality using optional add-on modules.
View the list of [available modules](/module/).

37
themes/after-dark/docs/content/feature/online-help.id.md Normal file
View File

@@ -0,0 +1,37 @@
+++
title = "Online Help"
description = "Panduan bantuan self-hosted lengkap dan contoh website."
categories = ["core"]
tags = ["scripts", "security", "networking"]
feature = ["related content", "code highlighter", "snippets"]
[[copyright]]
owner = "Josh Habdas"
date = "2019"
license = "agpl-3.0-or-later"
+++
After Dark termasuk bantuan online manual yang luas dan contoh website.
Melihat bantuan Dokumen lokal dengan menavigasi ke http://localhost:1414 mengikuti [Quick Install](../quick-install) atau setelah menjalankan [Upgrade Script](../upgrade-script). Tidak memerlukan koneksi internet.
Jika bantuan tidak berjalan, anda dapat memulainya kapan saja melalui skrip:
{{< hackcss-alert >}}
{{< highlight sh >}}
cd flying-toasters && \
./themes/after-dark/bin/help
{{< /highlight >}}
{{< /hackcss-alert >}}
Atau cukup membuat alias dan sajikan dokumen dengan live-reload:
{{< hackcss-alert >}}
{{< highlight sh >}}
alias hs='hugo serve --navigateToChanged' && \
hs --port 1414 --source themes/after-dark/docs
{{< /highlight >}}
{{< /hackcss-alert >}}
Bantuan termasuk dalam kode sumber After Dark. Jadi setiap rilis baru akan menyertakan dokumen bantuan terbaru, khusus untuk versi tertentu.
Upgradelah untuk mendapatkan update terbaru menggunakan [Upgrade Script](../upgrade-script/).

37
themes/after-dark/docs/content/feature/online-help.md Normal file
View File

@@ -0,0 +1,37 @@
+++
title = "Online Help"
description = "Complete self-hosted help guide and example website."
categories = ["core"]
tags = ["scripts", "security", "networking"]
features = ["related content", "code highlighter", "snippets"]
[[copyright]]
owner = "Josh Habdas"
date = "2019"
license = "agpl-3.0-or-later"
+++
After Dark includes an extensive online help manual and example website.
View help docs locally by navigating to http://localhost:1414 following a [Quick Install](../quick-install) or after running the [Upgrade Script](../upgrade-script). Internet connection not required.
If help is not running you may start it anytime via script:
{{< hackcss-alert >}}
{{< highlight sh >}}
cd flying-toasters && \
./themes/after-dark/bin/help
{{< /highlight >}}
{{< /hackcss-alert >}}
Or simply create an alias and serve docs with live-reload:
{{< hackcss-alert >}}
{{< highlight sh >}}
alias hs='hugo serve --navigateToChanged' && \
hs --port 1414 --source themes/after-dark/docs
{{< /highlight >}}
{{< /hackcss-alert >}}
Help is included within the After Dark source code. So each new release will include the latest help docs, specific to that particular version.
Upgrade to get the latest updates using the [Upgrade Script](../upgrade-script/).

37
themes/after-dark/docs/content/feature/post-bylines.id.md Normal file
View File

@@ -0,0 +1,37 @@
+++
title = "Post Bylines"
description = "Membuat byline yang dapat dibaca manusia dan mesin di postingan."
categories = ["experience"]
tags = ["author", "posts", "taxonomy", "publishing"]
feature = ["related content", "code highlighter"]
notes = [
"perbarui contoh postingan byline'taxonomy pages'jika dimodifikasi"
]
[[copyright]]
owner = "Josh Habdas"
date = "2019"
license = "agpl-3.0-or-later"
+++
After Dark mwmbuat postingan byline yang sangat banyak secara otomatis. Bylines termasuk pilihan nama penuis, jumlah kata, tautan ke [Halaman Taksonomi](../taxonomy-pages) dan [Structured Data](../structured-data).
{{% hackcss-card header="Example Byline" %}}
Diterbitkan [by `author`] [`publishdate` or `date`] di [navigation](/categories/navigation) dan ditandai [links](/tags/links) dan [taxonomy](/tags/taxonomy) menggunakan [`wordcount`] kata-kata.
{{% /hackcss-card %}}
Jika `author` ditentukan di {{< external href="https://gohugo.io/getting-started/configuration/" text="Site Configuration" />}} params atau posting {{< external href="https://gohugo.io/content-management/front-matter/" text="Front Matter" />}} itu akan dimasukkan secara otomatis dalam byline yang menghubungkan penulis:
```toml
[params]
author = "Billy Joe Jim Bob" # the guy behind the guy behind the guy
```
Sesuaikan `hide_author` di {{< external href="https://gohugo.io/getting-started/configuration/" text="Site Configuration" />}} untuk menekan atribusi di seluruh situs:
```toml
[params]
author = "" # optional setting, not required in config
hide_author = true # hides author name and related structured data
```
Gabungkan dengan`categories` dan [Last Modified](../last-modified) untuk mengahasilkan [Structured Data](../structured-data) yang unik.

37
themes/after-dark/docs/content/feature/post-bylines.md Normal file
View File

@@ -0,0 +1,37 @@
+++
title = "Post Bylines"
description = "Create human and machine readable bylines in posts."
categories = ["experience"]
tags = ["author", "posts", "taxonomy", "publishing"]
features = ["related content", "code highlighter"]
notes = [
"update 'taxonomy pages' post byline example if modified"
]
[[copyright]]
owner = "Josh Habdas"
date = "2019"
license = "agpl-3.0-or-later"
+++
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).
{{% hackcss-card header="Example Byline" %}}
Published [by `author`] [`publishdate` or `date`] in [navigation](/categories/navigation) and tagged [links](/tags/links) and [taxonomy](/tags/taxonomy) using [`wordcount`] words.
{{% /hackcss-card %}}
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:
```toml
[params]
author = "Billy Joe Jim Bob" # the guy behind the guy behind the guy
```
Adjust `hide_author` in {{< external href="https://gohugo.io/getting-started/configuration/" text="Site Configuration" />}} to suppress attribution site-wide:
```toml
[params]
author = "" # optional setting, not required in config
hide_author = true # hides author name and related structured data
```
Combine with `categories` and [Last Modified](../last-modified) to produce unique [Structured Data](../structured-data).

53
themes/after-dark/docs/content/feature/post-images.id.md Normal file
View File

@@ -0,0 +1,53 @@
+++
title = "Post Images"
description = "menambahkan gambar ke postingan tanpa menyentuh editor gambar."
categories = ["experience"]
tags = ["performance", "imaging", "graphics", "posts"]
feature = ["code highlighter", "snippets", "related content"]
[[copyright]]
owner = "Josh Habdas"
date = "2019"
license = "agpl-3.0-or-later"
+++
Tambahkan daya tarik visual ke postingan anda dengan memposting gambar. Gambar postingan muncul diatas konten postingan dan pengaruh {{< external href="https://gohugo.io/content-management/image-processing/" text="Hugo Image Processing" />}} dan [Lazy Loading](../lazy-loading) untuk menyediakan gambar yang sepenuhnya otomatis dan lazy-loaded <abbr title="Low-Quality Image Placeholders">LQIP</abbr> dan arah seni bawaan.
{{< figure
src="https://source.unsplash.com/Y-w15LfHO8w/1200x900"
lqipsrc="https://source.unsplash.com/Y-w15LfHO8w/800x600"
caption="Be Creative. Photo:"
attr="AK¥N Cakiner on Unsplash"
attrlink="https://unsplash.com/@akin"
>}}
Menggunakan gambar postingan memerlukan beberapa pendapat terkait dengan struktur konten anda. Untuk membuat postingan dengan gambar posting anda harus:
1. Gabungkan gambar dan konten dalam direktori seperti yang ditunjukan di bawah ini.
2. Perbarui postingan {{< external href="https://gohugo.io/content-management/front-matter/" text="Front Matter" />}} seperti yang dijelaskan dibawah ini.
Contoh bundel halaman mungkin akan terlihat seperti berikut ini:
```
├── archetypes
├── content
│ └── post
│ └── secure-your-digital-life
│ ├── images
│ │ └── florian-klauer-119557-unsplash.jpg
│ └── index.md
├── layouts
```
Dengan gambar `header` yang ditunjukkan di `index.md`:
```toml
[[resources]]
src = "images/*119557*"
name = "header"
```
{{% hackcss-alert type="info" %}}**Tip:** Orientasi tidak signifikan. Untuk tampilan optimal gunakan gambar yang lebih besar.{{% /hackcss-alert %}}
Itu dia! After Dark melakukan hal selebihnya.
Untuk membantu memahami bundel, lihat {{< external href="https://gohugo.io/content-management/page-bundles/" text="Page Bundles in Hugo" />}}.

87
themes/after-dark/docs/content/feature/post-images.md Normal file
View File

@@ -0,0 +1,87 @@
+++
title = "Post Images"
description = "Add large hero images without touching an image editor."
categories = ["experience"]
tags = ["performance", "imaging", "graphics", "posts"]
features = ["code highlighter", "snippets", "related content"]
[[copyright]]
owner = "Josh Habdas"
date = "2019"
license = "agpl-3.0-or-later"
+++
{{< figure
src="/images/watercolor_pTIyYTqAlF8_w1440h700.jpeg"
alt="Map image"
lqipsrc="/images/watercolor_pTIyYTqAlF8_w936h455.jpeg"
caption="Sample image placement. Not the real deal."
>}}
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.
Using post images requires some opinion with regard to the structure of your content. To create a post with a post image you must:
1. Group image and content in a {{< external href="https://gohugo.io/content-management/page-bundles/" text="Page Bundle" />}} as shown below.
2. Update post {{< external href="https://gohugo.io/content-management/front-matter/" text="Front Matter" />}} as described below.
An example page bundle might look like:
```
├── archetypes
├── content
│ └── post
│ └── secure-your-digital-life
│ ├── images
│ │ └── florian-klauer-119557-unsplash.jpg
│ └── index.md
├── layouts
```
With a `header` image specified in `index.md`:
```toml
[[resources]]
src = "images/*119557*"
name = "header"
```
{{% hackcss-alert type="info" %}}**Tip:** Orientation is not significant. For optimal display use larger images.{{% /hackcss-alert %}}
Add an image caption showing the image title:
```toml
[[resources]]
src = "**291607-unsplash.jpg"
name = "header"
title = "Ottawa road in the evening" # adds image caption
```
Add [Structured Data]({{< relref "structured-data" >}}) using {{< external "https://gohugo.io/content-management/page-resources/#page-resources-metadata" "Resources Metadata" />}} to improve accessibility:
```toml
[[resources]]
src = "**291607-unsplash.jpg"
name = "header"
title = "Ottawa road in the evening"
[resources.params.meta]
description = "Light trails depicting speed" # adds alt text and image meta
creator = "Marc-Olivier Jodoin" # updates caption and adds image meta
```
Continue adding metadata to improve accessibility:
```toml
[[resources]]
src = "**291607-unsplash.jpg"
name = "header"
title = "Ottawa road in the evening"
[resources.params.meta]
description = "Light trails depicting speed"
creator = "Marc-Olivier Jodoin"
sameAs = "https://unsplash.com/photos/NqOInJ-ttqM/" # also updates caption
license = "https://unsplash.com/license" # attribution not required
contentLocation = "Ottawa, Canada"
keywords = ["light trail", "building", "speed", "night"]
```
Supported metadata in examples above. Adjust display using [Custom Styles]({{< relref "custom-styles" >}}).

134
themes/after-dark/docs/content/feature/quick-install.id.md Normal file
View File

@@ -0,0 +1,134 @@
+++
title = "Instal Cepat"
description = "Hanya satu perintah yang anda butuhkan untuk membuat website baru."
categories = ["core"]
tags = ["setup", "installation", "scripts"]
features = ["code highlighter", "snippets", "related content"]
notes = [
"mengulas 'module-system' saat menambah atau menghapus add-on yang telah di instal",
"juga meninjau pilihan modul yang sudah dipasang sebelumnya (lihat masalah di depan)"
]
[[copyright]]
owner = "Josh Habdas"
date = "2019"
license = "agpl-3.0-or-later"
+++
After Dark termasuk skrip instalasi portabel untuk pengaturan cepat. Silahkan instal {{< external href="https://gohugo.io" text="Hugo" />}} `0.51` atau yang lebih besar sebelum menjalankan skrip:
{{< hackcss-alert >}}
<details itemscope itemtype="https://schema.org/SoftwareSourceCode">
<summary>Perluas untuk melihat skrip</summary>
{{< highlight shell "linenos=inline" >}}
{{< include "themes/after-dark/bin/install" >}}
{{< /highlight >}}
<link itemprop="codeRepository" href="https://git.habd.as/comfusion/after-dark">
<meta itemprop="codeSampleType" content="script">
<meta itemprop="programmingLanguage" content="sh">
<meta itemprop="runtimePlatform" content="busybox">
<link itemprop="targetProduct" href="https://after-dark.habd.as">
<meta itemprop="accessMode" content="textual">
</details>
{{< /hackcss-alert >}}
<!--more-->
Skrip telah diuji pada GNU/Linux dan BSD (Darwin) dan Windows melalui {{< external href="http://cmder.net" text="Cmder" />}}.
{{% hackcss-alert type="warning" %}}**Warning:** Periksa skrip yang diunduh dari Internet sebelum menjalankannya.{{% /hackcss-alert %}}
Berikut adalah tiga metode untuk men-download dan menjalankan:
1. Unduh dan kirim ke `sh` secara langsung:
{{< hackcss-alert >}}
{{< highlight shell >}}wget -qO - https://go.habd.as/after-dark | sh{{< /highlight >}}
{{< /hackcss-alert >}}
2. Unduh di file baru, `chmod` dan jalankan:
{{< hackcss-alert >}}
{{< highlight shell >}}curl -O https://cdn.jsdelivr.net/npm/after-dark@latest/bin/install && \
chmod +x install && ./install{{< /highlight >}}
{{< /hackcss-alert >}}
3. Dari kanonik `git` klon:
{{< hackcss-alert >}}
{{< highlight shell >}}# sumber klon dan ubah ke direktori sumber git klon https://git.habd.as/comfusion/after-dark.git && cd "$_"
# gunakan npm cli untuk mendapatkan hash rilis
echo "${$(npm run integrity)#*sha512-}"
# jalankan instal cepat setelah memvalidasi
./bin/install
{{< /highlight >}}
{{< /hackcss-alert >}}
Skrip harus selesai dalam 5-10 detik sehingga menghasilkan sampel situs dan dokumen bantuan:
{{< figure alt="After Dark screenshots"
src="/images/quick-install.png"
lqipsrc="/images/quick-install-fs8.png"
caption="After Dark Quick Install running to completion in Terminal on Deepin Manjaro."
>}}
Situs baru Anda akan disebut `flying-toaster`. Ubah ke nama proyek anda kapan saja anda suka. Akses situs dengan menavigasi ke https://localhost:1313.
# Konfigurasi Multi-situs (Lanjutan)
After Dark memungkingkan menjalankan manajemen multi situs dari satu instalasi. Untuk mengelola beberapa website gunakan `-c` dan `-d` bendera untuk menentukan konten dan tujuan direktori secara berurutan.
Misalnya, untuk mengahasilkan situs audio menggunakan instalasi After Dark saat ini, buat skrip yang dapat dieksekusi untuk menghasilkan situs tersebut:
{{< hackcss-card header="flying-toasters/bin/gen-audio-site" >}}
{{< highlight shell >}}#!/bin/sh
hugo -c sites/audio -d public/static.domain.example{{< /highlight >}}
{{< /hackcss-card >}}
Dimana `audio` berisi konten untuk situs itu:
```
├── layouts
├── sites
│   └── audio
│   ├── audiobooks
│ │ ├── gaining-currency.md
│   │ └── the-power-of-now.md
│   └── clips
│   └── war-of-the-worlds.md
├── static
```
Dan `public` berisi folder untuk setiap situs:
```
public
└── static.domain.example
├── categories
│   └── index.xml
├── audiobooks
│ └── index.html
├── clips
│   └── index.html
├── css
├── index.html
├── index.xml
├── js
├── sitemap.xml
└── tags
└── index.xml
```
Dan buat skrip lain untuk menyajikan konten untuk diedit:
{{< hackcss-card header="flying-toasters/bin/serve-audio-site" >}}
{{< highlight shell >}}#!/bin/sh
hugo -c sites/audio{{< /highlight >}}
{{< /hackcss-card >}}
Setiap subdirektori `public` kemudian menjadi website yang independen dan dapat disebarkan serta salinan persisnya disimpan untuk konten tujuan yang dihasilkan.
{{% hackcss-alert type="info" %}}**Tip:** Untuk jenis fleksibiltas tambahan `hugo --help` dan modifikasi skrip anda menggunakan `--theme` dan `--config` flags.{{% /hackcss-alert %}}
Multi situs sangat cocok untuk mempertahankan tampilan dan rasa yang konsisten di berbagai domain asal sekaligus membatasi kebutuhan untuk menjalankannya [Upgrade Script](/feature/upgrade-script/) untuk setiap situs.

142
themes/after-dark/docs/content/feature/quick-install.md Normal file
View File

@@ -0,0 +1,142 @@
+++
title = "Quick Install"
description = "One command is all you need to start a new website."
categories = ["core"]
tags = ["setup", "installation", "scripts"]
features = ["code highlighter", "snippets", "related content"]
aliases = [
"/feature/quick-installer/"
]
[[copyright]]
owner = "Josh Habdas"
date = "2019"
license = "agpl-3.0-or-later"
+++
{{< hackcss-alert type="success" >}}
{{< highlight shell >}}wget -qO - https://go.habd.as/after-dark | sh{{< /highlight >}}
{{< /hackcss-alert >}}
Run the above command in a terminal emulator after {{< external href="https://gohugo.io/getting-started/installing" text="installing Hugo" />}} to start a new website in 5-10 seconds. Hugo version `0.51` or greater required.
---
After Dark includes a portable installation script for quick set-up. Please install {{< external href="https://gohugo.io" text="Hugo" />}} `0.51` or greater before running:
{{< hackcss-alert >}}
<details itemscope itemtype="https://schema.org/SoftwareSourceCode">
<summary>Expand to view script</summary>
{{< highlight sh "linenos=inline" >}}
{{< include "themes/after-dark/bin/install" >}}
{{< /highlight >}}
<link itemprop="codeRepository" href="https://git.habd.as/comfusion/after-dark">
<meta itemprop="codeSampleType" content="script">
<meta itemprop="programmingLanguage" content="sh">
<meta itemprop="runtimePlatform" content="busybox">
<link itemprop="targetProduct" href="https://after-dark.habd.as">
<meta itemprop="accessMode" content="textual">
</details>
{{< /hackcss-alert >}}
<!--more-->
Script has been tested on GNU/Linux, BSD (Darwin) and Windows via {{< external href="http://cmder.net" text="Cmder" />}}.
{{% hackcss-alert type="warning" %}}**Warning:** Examine scripts downloaded from the Internet before running them.{{% /hackcss-alert %}}
Here are three methods for downloading and running:
1. Download and pipe to `sh` directly:
{{< hackcss-alert >}}
{{< highlight shell >}}wget -qO - https://go.habd.as/after-dark | sh{{< /highlight >}}
{{< /hackcss-alert >}}
2. Download into new file, `chmod` and execute:
{{< hackcss-alert >}}
{{< highlight shell >}}curl -O https://cdn.jsdelivr.net/npm/after-dark@latest/bin/install && \
chmod +x install && ./install{{< /highlight >}}
{{< /hackcss-alert >}}
3. From canonical `git` clone:
{{< hackcss-alert >}}
{{< highlight shell >}}# clone source and change to source directory
git clone https://git.habd.as/comfusion/after-dark.git && cd "$_"
# use npm cli to get the release hash
echo "${$(npm run integrity)#*sha512-}"
# run quick install after validating
./bin/install
{{< /highlight >}}
{{< /hackcss-alert >}}
Script should complete in 5-10 seconds resulting in a sample site and help docs:
{{< figure alt="After Dark screenshots"
src="/images/quick-install.png"
lqipsrc="/images/quick-install-fs8.png"
caption="After Dark Quick Install running to completion in Terminal on Deepin Manjaro."
>}}
Your new site will be called `flying-toasters`. Change it to the name of your project anytime you like. Access site by navigating to https://localhost:1313.
# Multi-site Configuration (Advanced)
After Dark enables multi-site management from a single installation. To manage multiple websites use the `-c` and `-d` flags to specify the `content` and `destination` directories, respectively.
For example, to generate an audio site using the current After Dark installation create an executable script to generate the site:
{{< hackcss-card header="flying-toasters/bin/gen-audio-site" >}}
{{< highlight shell >}}#!/bin/sh
hugo -c sites/audio -d public/static.domain.example{{< /highlight >}}
{{< /hackcss-card >}}
Where `audio` contains the content for that site:
```
├── layouts
├── sites
│   └── audio
│   ├── audiobooks
│ │ ├── gaining-currency.md
│   │ └── the-power-of-now.md
│   └── clips
│   └── war-of-the-worlds.md
├── static
```
And `public` contains a folder for each site:
```
public
└── static.domain.example
├── categories
│   └── index.xml
├── audiobooks
│ └── index.html
├── clips
│   └── index.html
├── css
├── index.html
├── index.xml
├── js
├── sitemap.xml
└── tags
└── index.xml
```
And create another script to serve the content for editing:
{{< hackcss-card header="flying-toasters/bin/serve-audio-site" >}}
{{< highlight shell >}}#!/bin/sh
hugo -c sites/audio{{< /highlight >}}
{{< /hackcss-card >}}
Each subdirectory of `public` then becomes an independent, deployable website and exact copy save for destination content generated.
{{% hackcss-alert type="info" %}}**Tip:** For additional flexibility type `hugo --help` and modify your scripts using the `--theme` and `--config` flags.{{% /hackcss-alert %}}
Multi-site is perfect for maintaining a consistent look-and-feel across multiple domain origins while limiting the need to run the [Upgrade Script](/feature/upgrade-script/) for each site.

28
themes/after-dark/docs/content/feature/referrer-policy.id.md Normal file
View File

@@ -0,0 +1,28 @@
+++
title = "Referrer Policy"
description = "Menentukan berapa banyak info yang diteruskan ke tautan eksternal."
categories = ["security"]
tags = ["privacy", "security", "SEO", "metadata"]
feature = ["related content", "code highlighter", "snippets"]
[[copyright]]
owner = "Josh Habdas"
date = "2019"
license = "agpl-3.0-or-later"
+++
After Dark menambahkan {{< external href="https://w3c.github.io/webappsec-referrer-policy/" text="Referrer Policy" />}} untuk meningkatkan keamanan situs dan meningkatkan privasi pengunjung di luar browser standar menggunakan kebijakan seluruh situs sederhana.
Sesuaikan site-wide default`same-origin` dari {{< external href="https://gohugo.io/getting-started/configuration/" text="Site Configuration" />}}:
```toml
[params.seo]
referrer = "same-origin"
```
Melonggarkan kebijakan keamanan dengan:
- Menyesuaikan standar seluruh situs;
- Menggunakan atribut `referrerpolicy` dari [External Shortcode](/shortcode/external);
- Menggunakan {{< external href="https://w3c.github.io/webappsec-referrer-policy/#referrer-policy-delivery-nested" text="nested browsing context" />}} untuk menyesuaikan secara kontekstual.
Lihat {{< external href="https://w3c.github.io/webappsec-referrer-policy/" text="Referrer Policy on W3C" />}} untuk daftar nilai yang memungkinkan.

28
themes/after-dark/docs/content/feature/referrer-policy.md Normal file
View File

@@ -0,0 +1,28 @@
+++
title = "Referrer Policy"
description = "Specify how much info is passed to external links."
categories = ["security"]
tags = ["privacy", "security", "SEO", "metadata"]
features = ["related content", "code highlighter", "snippets"]
[[copyright]]
owner = "Josh Habdas"
date = "2019"
license = "agpl-3.0-or-later"
+++
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.
Adjust the site-wide default of `same-origin` from {{< external href="https://gohugo.io/getting-started/configuration/" text="Site Configuration" />}}:
```toml
[params.seo]
referrer = "same-origin"
```
Relax the security policy by:
- Adjusting the site-wide default;
- Using the `referrerpolicy` attribute of the [External Shortcode](/shortcode/external);
- Using a {{< external href="https://w3c.github.io/webappsec-referrer-policy/#referrer-policy-delivery-nested" text="nested browsing context" />}} to adjust contextually.
See {{< external href="https://w3c.github.io/webappsec-referrer-policy/" text="Referrer Policy on W3C" />}} for a list of possible values.

32
themes/after-dark/docs/content/feature/related-content.id.md Normal file
View File

@@ -0,0 +1,32 @@
+++
title = "Related Content"
description = "Mempromosikan lebih banyak konten anda kepada pengunjung situs."
categories = ["navigation"]
tags = ["links", "retention", "engagement", "layout", "templating", "style"]
feature = ["code highlighter", "snippets", "related content"]
[[copyright]]
owner = "Josh Habdas"
date = "2019"
license = "agpl-3.0-or-later"
+++
After Dark menyediakan konten terkait untuk membantu pengguna menemukan lebih banyak informasi yang relevan bagi mereka dan dapat meningkatkan tampilan halaman dan waktu yang dihabiskan untuk situs anda.
{{< hackcss-alert >}}
{{< figure
src="/images/screenshots/feature-related-content-fs8.png"
>}}
{{< /hackcss-alert >}}
Ketika dua halaman atau lebih atau postingan yang berisi taksonomi`tags` yang sama, mereka akan ditautkan di bagian seperti yang ditunjukkan di bagian bawah halaman. Bagian ini muncul secara otomatis seperti dibawah ini [Post Bylines](../post-bylines) dengan maksimum 7 item default yang ditampilkan.
{{% hackcss-alert type="info" %}}**Tip:** Buatlah [Custom Layout](/feature/custom-layouts) untuk menampilkan konten terkait diluar postingan.{{% /hackcss-alert %}}
Sesuaikan seluruh situs maksimum dari {{< external href="https://gohugo.io/getting-started/configuration/" text="Site Configuration" />}} dengan menambah `related_content_limit`:
```toml
[params]
related_content_limit = 5 # limit to 5 items maximum site-wide
```
Lihat {{< external href="https://gohugo.io/content-management/related/" text="Related Content in Hugo" />}} untuk pilihan konfigurasi tambahan .

53
themes/after-dark/docs/content/feature/related-content.md Normal file
View File

@@ -0,0 +1,53 @@
+++
title = "Related Content"
description = "Promote more of your content to your site's visitors."
categories = ["navigation"]
tags = ["links", "retention", "engagement", "layout", "templating", "style"]
features = ["code highlighter", "snippets", "related content"]
[[copyright]]
owner = "Josh Habdas"
date = "2019"
license = "agpl-3.0-or-later"
+++
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.
{{< hackcss-alert >}}
{{< figure
src="/images/screenshots/feature-related-content-fs8.png"
>}}
{{< /hackcss-alert >}}
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.
{{% hackcss-alert type="info" %}}**Tip:** Create a [Custom Layout](/feature/custom-layouts) to show Related Content outside posts.{{% /hackcss-alert %}}
Adjust site-wide maximum from {{< external href="https://gohugo.io/getting-started/configuration/" text="Site Configuration" />}} by adding `related_content_limit`:
```toml
[params]
related_content_limit = 5 # limit to 5 items maximum site-wide
```
By default related content will appear as an unordered list of page titles with hyperlinks to their respective pages along with the approximate reading time.
For posts, display thumbnail images instead by adding a related limit:
```toml
[params.layout.post.related]
limit = 3
```
And for each post create a [Post Images](../post-images/)-formatted resource bundle containing `thumbnail` in the name as described in more detail on [Custom Homepage](../custom-homepage/).
As with homepage thumbnails, image processing may be adjusted:
```toml
[params.layout.post.related]
limit = 4
thumbs = ["fill", "400x400"] # Optional, thumbnail image processing
```
Set `limit` to `0` to hide the related content section.
See {{< external href="https://gohugo.io/content-management/related/" text="Related Content in Hugo" />}} for additional configuration options.

42
themes/after-dark/docs/content/feature/release-hashes.id.md Normal file
View File

@@ -0,0 +1,42 @@
+++
title = "Release Hashes"
description = "Memastikan anda menggunakan perangkat After Dark yang asli."
categories = ["security"]
tags = ["validate", "privacy", "security", "cryptography", "npm", "git"]
feature = ["code highlighter", "related content"]
[[copyright]]
owner = "Josh Habdas"
date = "2019"
license = "agpl-3.0-or-later"
+++
After Dark memanfaatkan {{< external href="https://www.npmjs.com" text="NPM" />}} CLI untuk menghasilkan hash kriptografi yang unik di setiap rilis, memungkinkan setiap salinan diidentifikasi secara unik terlepas dari sumbernya.
Lepaskan penggunaan hash dengan <abbr title="Secure Hashing Algorithm">SHA-512</abbr> algoritma dan terlihat seperti ini:
{{< hackcss-alert type="success" >}}
<samp>VWcn7AxXUkZRGsRIM/6A5RjqW7DOPH+XbnLGRp7hpr0TCH/9l31ug2h2JaIlEvsDzOPRcZDBdyZvJ4mSm/Rqjg==</samp>
{{< /hackcss-alert >}}
Setiap rilis hash baru dihasilkan di lokasi berikut:
- Tertanam menggunakan PGP di {{< external href="https://git.habd.as/comfusion/after-dark/releases" text="release source" />}} pesan`git tag`.
- Dikodifikasikan ke dalam {{< external href="https://registry.npmjs.org/after-dark/latest" text="latest" />}} atau {{< external href="https://registry.npmjs.org/after-dark/6.7.9" text="version-specific" />}} metadata paket NPM.
- Tertanam di dalam After Dark [Bantuan Online](../online-help) dokumentasi.
Setelah menerima salinan After Dark anda, anda dapat menggunakan hash rilis, untuk memverifikasi anda dapat menggunakan versi perangkat lunak yang tidak dipalsukan.
Jalankan [Release Validator](/validate) untuk memeriksa dengan cepat rilis anda secara offline:
{{< hackcss-card header="Interactive Release Validator" >}}
<iframe title="Validate Release" scrolling="no" width="100%" height="360" src="/validate"></iframe>
{{< /hackcss-card >}}
Untuk pemeriksaan yang lebih meyeluruh lakukan hal berikut ini, membandingkan hash anda dengan yang dihasilkan selama rilis seperti yang didefinisikan diatas:
1. Instal {{< external href="https://docs.npmjs.com/cli/npm" text="npm cli" />}} di perangkat anda.
2. Navigasikan ke `themes/after-dark` dari dalam situs anda.
3. Jalankan `npm run integrity` untuk menghasilkan SHA-512 hash anda.
Jika semuanya cocok, berarti anda sudah siap. Jika tidak, silahkan {{< external href="https://git.habd.as/comfusion/after-dark/issues/new" text="Submit an Issue" />}}.

44
themes/after-dark/docs/content/feature/release-hashes.md Normal file
View File

@@ -0,0 +1,44 @@
+++
title = "Release Hashes"
description = "Verify you are using genuine After Dark software."
categories = ["security"]
tags = ["validate", "privacy", "security", "cryptography", "npm", "git"]
features = ["code highlighter", "related content"]
[[copyright]]
owner = "Josh Habdas"
date = "2019"
license = "agpl-3.0-or-later"
+++
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.
Release hashes use the <abbr title="Secure Hashing Algorithm">SHA-512</abbr> algorithm and look like this:
{{< hackcss-alert type="success" >}}
<samp>VWcn7AxXUkZRGsRIM/6A5RjqW7DOPH+XbnLGRp7hpr0TCH/9l31ug2h2JaIlEvsDzOPRcZDBdyZvJ4mSm/Rqjg==</samp>
{{< /hackcss-alert >}}
Each release a new hash is generated in the following locations:
- Embedded using PGP in the {{< external href="https://git.habd.as/comfusion/after-dark/releases" text="release source" />}} `git tag` message.
- 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.
- Embedded inside the After Dark [Online Help](../online-help) documentation.
Upon receiving your copy of After Dark you may use the release hash to verify you are using an unadulterated version of the software.
Run the [Release Validator](/validate) to quickly check your release offline:
{{< hackcss-card header="Interactive Release Validator" >}}
<iframe title="Validate Release" scrolling="no" width="100%" height="360" src="/validate"></iframe>
{{< /hackcss-card >}}
For a more thorough inspection do the following:
1. Install the {{< external href="https://docs.npmjs.com/cli/npm" text="npm cli" />}} on your machine.
2. Navigate to `themes/after-dark` from within your site.
3. Run `npm i && npm run integrity` to generate your SHA-512 hash.
4. Compare your hash to the hash generated during a signed release.
5. If equal, verify the GPG signature used to sign that release.
If inspection fails run the [Upgrade Script](../upgrade-script/) and try again.

54
themes/after-dark/docs/content/feature/section-menu.id.md Normal file
View File

@@ -0,0 +1,54 @@
+++
title = "Section Menu"
description = "Menampilkan navigasi site-wide kontekstual dengan tautan."
categories = ["navigation"]
tags = ["links", "taxonomy"]
feature = ["code highlighter", "snippets", "section menu"]
notes = [
"meninjau contoh 'fuzzy-search' jika dimodifikasi"
]
[[copyright]]
owner = "Josh Habdas"
date = "2019"
license = "agpl-3.0-or-later"
+++
After Dark menggunakan Hugo's {{< external href="https://gohugo.io/templates/menu-templates/#section-menu-for-lazy-bloggers" text="Section Menu for “Lazy” Bloggers" />}} untuk membuat bantuan navigasi di seluruh situs. Menu bagian dinonaktifkan secara default.
{{< hackcss-card header="Interactive Example" >}}
{{< navmenu >}}
{{< /hackcss-card >}}
Aktifkan itu dengan mengubah pengaturan `show_menu` dalam konfigurasi situs anda:
```toml
[params]
show_menu = false # atur ke `true` untuk mengaktifkan menu bagian
```
Dengan menu yang diaktifkan, tautan navigasi akan mulai muncul secara otomatis di setiap bagian saat {{< external href="https://gohugo.io/getting-started/usage/#draft-future-and-expired-content" text="Published Content" />}} tersedia dalam bagian itu.
Tautan ke halaman yang berdiri sendiri dari {{< external href="https://gohugo.io/content-management/front-matter/" text="Front Matter" />}} dengan menentukan `menu = "main"`:
```toml
title = "About"
menu = "main"
```
Sesuaikan nama tautan dan posisi menu dengan menambahkan kode blok berikut ke {{< external href="https://gohugo.io/getting-started/configuration/" text="Site Configuration" />}} anda dan memodifikasinya untuk memenuhi kebutuhan anda:
```toml
[[menu.main]]
name = "Home"
weight = 1
identifier = "home"
url = "/"
[[menu.main]]
name = "Posts"
weight = 2
identifier = "post"
url = "/post/"
```
Lihat {{< external href="https://gohugo.io/content-management/menus/" text="Menus in Hugo" />}} untuk informasi tambahan.

132
themes/after-dark/docs/content/feature/section-menu.md Normal file
View File

@@ -0,0 +1,132 @@
+++
title = "Section Menu"
description = "Display a contextual site-wide navigation with links."
categories = ["navigation"]
tags = ["links", "taxonomy"]
features = ["code highlighter", "snippets", "section menu"]
notes = [
"review 'fuzzy-search' examples if modified"
]
[[copyright]]
owner = "Josh Habdas"
date = "2019"
license = "agpl-3.0-or-later"
+++
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.
{{< hackcss-card header="Interactive Example" >}}
{{< navmenu >}}
{{< /hackcss-card >}}
Enable it from `menu.main` layout config in your site configuration:
```toml
[params.layout.menu.main]
hidden = true # set `false` or remove to show section menu
```
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.
## Customizing
Adjust link names and menu positions 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:
```toml
[[menu.main]]
name = "Home"
weight = 1
identifier = "home"
url = "/"
[[menu.main]]
name = "Posts"
weight = 2
identifier = "post"
url = "/post/"
```
Exclude menu items by identifier:
```toml
[params.layout.menu.main]
exclude = ["home", "post"] # exclude homepage and blog postings
```
Decorate links with SVG icons using `pre` and `post`:
```toml
[[menu.main]]
name = "Search"
identifier = "search"
url = "/search/"
post = "<svg aria-hidden=\"true\" class=\"i-search\" viewBox=\"0 0 32 32\" width=\"14\" height=\"14\" fill=\"none\" stroke=\"currentcolor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"3\"><circle cx=\"14\" cy=\"14\" r=\"12\" /><path d=\"M23 23 L30 30\" /></svg>"
```
Link to stand-alone pages using {{< external href="https://gohugo.io/content-management/front-matter/" text="Front Matter" />}} menu setting:
```toml
title = "About"
menu = "main"
```
Change the link title to differentiate from page:
```toml
title = "About Us"
menu = "main"
linktitle = "About"
```
Position items using {{< external "https://gohugo.io/variables/menus/#menu-entry-variables" "Menu Entry Variables" />}} for more control:
```toml
title = "About Us"
[menu.main]
name = "About"
weight = 5
```
Provide your own config settings for use in [Custom Layouts]({{< relref "custom-layouts" >}}):
```toml
[params.layout.menu.main.custom]
social_icons = ["telegram", "mastodon", "matrix"]
```
And access them via your customized `navmenu.html`, if present:
```go-html-template
{{ range .settings.custom.social_icons }}
{{ partial "social-links.html" . }}
{{ end }}
```
Create a second menu immediately after the first:
```toml
[[menu.main]]
name = "Posts"
weight = 2
identifier = "post"
url = "/post/"
[[menu.utility]]
name = "Email"
weight = 1
identifier = "email"
url = "mailto:d0x3d@posteo.com"
```
And position it to the right using [Custom Styles]({{< relref "custom-styles" >}}):
```css
.hack > header {
display: grid;
grid-template-columns: 1fr minmax(min-content, auto);
column-gap: 20px;
grid-template-areas: "nav nav";
}
```
See {{< external href="https://gohugo.io/content-management/menus/" text="Menus in Hugo" />}} for additional capabilities. For help with CSS Grid Layout get your feet wet at {{< external "https://cssgridgarden.com" />}}.

112
themes/after-dark/docs/content/feature/skin-styles.id.md Normal file
View File

@@ -0,0 +1,112 @@
+++
title = "Skin Styles"
description = "Pilih satu dari delapan skin style yang dapat disesuaikan."
categories = ["customizing"]
tags = ["color", "style", "branding"]
feature = ["code highlighter", "snippets", "related content"]
alias = [
"/feature/display-variants/"
]
[[copyright]]
owner = "Josh Habdas"
date = "2019"
license = "agpl-3.0-or-later"
+++
After Dark menggunakan {{< external href="https://hackcss.egoist.moe" text="hackcss" />}} untuk menyediakan empat palet warna dan dua mode tampilan. Beralih diantara mereka dari {{< external href="https://gohugo.io/getting-started/configuration/" text="site configuration" />}} anda untuk 8 kemungkinan kombinasi:
<style>
table[summary] td pre {
margin: 0;
}
.hack.dark table tr:nth-child(odd) td {
background-color: initial;
}
</style>
<table summary="Display Variations">
<thead>
<tr>
<th rowspan="2">Palette</th>
<th colspan="2">Mode</th>
</tr>
<tr>
<th>Hack</th>
<th>Standard</th>
</tr>
</thead>
<tbody>
<tr>
<td>Dark</td>
<td><i>None required.</i></td>
<td class="highlight">
<pre><code><span class="p">[</span><span class="nx">params</span><span class="p">.</span><span class="nx">hackcss</span><span class="p">]</span>
<span class="nx">mode</span> <span class="p">=</span> <span class="s2">&quot;standard&quot;</span></code></pre>
</td>
</tr>
<tr>
<td style="background-color:#181818;color:#ccc">Dark Grey</td>
<td class="highlight">
<pre><code><span class="p">[</span><span class="nx">params</span><span class="p">.</span><span class="nx">hackcss</span><span class="p">]</span>
<span class="nx">palette</span> <span class="p">=</span> <span class="s2">&quot;dark-grey&quot;</span></code></pre>
</td>
<td class="highlight">
<pre><code><span class="p">[</span><span class="nx">params</span><span class="p">.</span><span class="nx">hackcss</span><span class="p">]</span>
<span class="nx">mode</span> <span class="p">=</span> <span class="s2">&quot;standard&quot;</span>
<span class="nx">palette</span> <span class="p">=</span> <span class="s2">&quot;dark-grey&quot;</span></code></pre>
</td>
</tr>
<tr>
<td style="background-color:#073642;color:#78909c">Solarized Dark</td>
<td class="highlight">
<pre><code><span class="p">[</span><span class="nx">params</span><span class="p">.</span><span class="nx">hackcss</span><span class="p">]</span>
<span class="nx">palette</span> <span class="p">=</span> <span class="s2">&quot;solarized-dark&quot;</span></code></pre>
</td>
<td class="highlight">
<pre><code><span class="p">[</span><span class="nx">params</span><span class="p">.</span><span class="nx">hackcss</span><span class="p">]</span>
<span class="nx">mode</span> <span class="p">=</span> <span class="s2">&quot;standard&quot;</span>
<span class="nx">palette</span> <span class="p">=</span> <span class="s2">&quot;solarized-dark&quot;</span></code></pre>
</td>
</tr>
<tr>
<td style="background-color:#fff;color:#000">Light</td>
<td class="highlight">
<pre><code><span class="p">[</span><span class="nx">params</span><span class="p">.</span><span class="nx">hackcss</span><span class="p">]</span>
<span class="nx">palette</span> <span class="p">=</span> <span class="s2">&quot;light&quot;</span></code></pre>
</td>
<td class="highlight">
<pre><code><span class="p">[</span><span class="nx">params</span><span class="p">.</span><span class="nx">hackcss</span><span class="p">]</span>
<span class="nx">mode</span> <span class="p">=</span> <span class="s2">&quot;standard&quot;</span>
<span class="nx">palette</span> <span class="p">=</span> <span class="s2">&quot;light&quot;</span></code></pre>
</td>
</tr>
</tbody>
</table>
Skin default menggunakan palet warna`dark` dengan mode tampilan `hack`. Tidak diperlukan konfigurasi untuk menggunakan skin default.
Pilih skin style dari konfigurasi situs anda. Sebagai contoh , untuk mengatur warna abu-abu gelap tanpa gaya perawatan `markdown` perbarui konfigurasi anda seperti:
{{< hackcss-card header="config.toml" >}}
{{< highlight toml "linenos=inline" >}}
baseurl = "https://letterboxd.com/"
languageCode = "en-US"
title = "A Scanner Darkly"
[params]
description = "Seorang polisi yang menyamar di masa depan yang tidak terlalu jauh terlibat dengan narkoba baru yang berbahaya dan sebagai akibatnya dia mulai kehilangan identitasnya."
images = ["https://a.ltrbxd.com/resized/sm/upload/e3/kt/un/fi/nZuqo9yQpEo447sH0w0MFBgdT6J-1200-1200-675-675-crop-000000.jpg"]
[params.hackcss]
mode = "standard"
palette = "dark-grey"
{{< /highlight >}}
{{< /hackcss-card >}}
Nonaktifkan skin styles dengan mengatur bendera`disabled`:
```toml
[params.hackcss]
disabled = true # disable skin styles entirely
```
Saat mengganti warna, tinjau [Custom Styles](../custom-styles), [Trim Color](../trim-color) dan [Error Page](../error-page), buat penyesuaian yang diperlukan untuk mencapai tampilan dan rasa yang diinginkan.

112
themes/after-dark/docs/content/feature/skin-styles.md Normal file
View File

@@ -0,0 +1,112 @@
+++
title = "Skin Styles"
description = "Choose one of eight customizable skin styles."
categories = ["customizing"]
tags = ["color", "style", "branding"]
features = ["code highlighter", "snippets", "related content"]
aliases = [
"/feature/display-variants/"
]
[[copyright]]
owner = "Josh Habdas"
date = "2019"
license = "agpl-3.0-or-later"
+++
After Dark uses {{< external href="https://hackcss.egoist.moe" text="hackcss" />}} to provide four color palettes and two display modes. Toggle between them from your {{< external href="https://gohugo.io/getting-started/configuration/" text="site configuration" />}} for 8 possible combinations:
<style>
table[summary] td pre {
margin: 0;
}
.hack.dark table tr:nth-child(odd) td {
background-color: initial;
}
</style>
<table summary="Color palette and display mode settings">
<thead>
<tr>
<th rowspan="2">Palette</th>
<th colspan="2">Mode</th>
</tr>
<tr>
<th>Hack</th>
<th>Standard</th>
</tr>
</thead>
<tbody>
<tr>
<td>Dark</td>
<td><i>None required.</i></td>
<td class="highlight">
<pre><code><span class="p">[</span><span class="nx">params</span><span class="p">.</span><span class="nx">hackcss</span><span class="p">]</span>
<span class="nx">mode</span> <span class="p">=</span> <span class="s2">&quot;standard&quot;</span></code></pre>
</td>
</tr>
<tr>
<td style="background-color:#181818;color:#ccc">Dark Grey</td>
<td class="highlight">
<pre><code><span class="p">[</span><span class="nx">params</span><span class="p">.</span><span class="nx">hackcss</span><span class="p">]</span>
<span class="nx">palette</span> <span class="p">=</span> <span class="s2">&quot;dark-grey&quot;</span></code></pre>
</td>
<td class="highlight">
<pre><code><span class="p">[</span><span class="nx">params</span><span class="p">.</span><span class="nx">hackcss</span><span class="p">]</span>
<span class="nx">mode</span> <span class="p">=</span> <span class="s2">&quot;standard&quot;</span>
<span class="nx">palette</span> <span class="p">=</span> <span class="s2">&quot;dark-grey&quot;</span></code></pre>
</td>
</tr>
<tr>
<td style="background-color:#073642;color:#78909c">Solarized Dark</td>
<td class="highlight">
<pre><code><span class="p">[</span><span class="nx">params</span><span class="p">.</span><span class="nx">hackcss</span><span class="p">]</span>
<span class="nx">palette</span> <span class="p">=</span> <span class="s2">&quot;solarized-dark&quot;</span></code></pre>
</td>
<td class="highlight">
<pre><code><span class="p">[</span><span class="nx">params</span><span class="p">.</span><span class="nx">hackcss</span><span class="p">]</span>
<span class="nx">mode</span> <span class="p">=</span> <span class="s2">&quot;standard&quot;</span>
<span class="nx">palette</span> <span class="p">=</span> <span class="s2">&quot;solarized-dark&quot;</span></code></pre>
</td>
</tr>
<tr>
<td style="background-color:#fff;color:#000">Light</td>
<td class="highlight">
<pre><code><span class="p">[</span><span class="nx">params</span><span class="p">.</span><span class="nx">hackcss</span><span class="p">]</span>
<span class="nx">palette</span> <span class="p">=</span> <span class="s2">&quot;light&quot;</span></code></pre>
</td>
<td class="highlight">
<pre><code><span class="p">[</span><span class="nx">params</span><span class="p">.</span><span class="nx">hackcss</span><span class="p">]</span>
<span class="nx">mode</span> <span class="p">=</span> <span class="s2">&quot;standard&quot;</span>
<span class="nx">palette</span> <span class="p">=</span> <span class="s2">&quot;light&quot;</span></code></pre>
</td>
</tr>
</tbody>
</table>
The default skin uses the `dark` color palette with the `hack` display mode. No configuration is necessary to use the default skin.
Choose a skin style from your site configuration. For example, to set a dark grey color _without_ the stylistic `markdown` treatment update your config like:
{{< hackcss-card header="config.toml" >}}
{{< highlight toml "linenos=inline" >}}
baseurl = "https://letterboxd.com/"
languageCode = "en-US"
title = "A Scanner Darkly"
[params]
description = "An undercover cop in a not-too-distant future becomes involved with a dangerous new drug and begins to lose his own identity as a result."
images = ["https://a.ltrbxd.com/resized/sm/upload/e3/kt/un/fi/nZuqo9yQpEo447sH0w0MFBgdT6J-1200-1200-675-675-crop-000000.jpg"]
[params.hackcss]
mode = "standard"
palette = "dark-grey"
{{< /highlight >}}
{{< /hackcss-card >}}
Disable skin styles by setting the `disabled` flag:
```toml
[params.hackcss]
disabled = true # disable skin styles entirely
```
When changing colors 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.

53
themes/after-dark/docs/content/feature/snippets.id.md Normal file
View File

@@ -0,0 +1,53 @@
+++
title = "Snippets"
description = "Bagikan kode antara Shortcodes and Templat Kustom."
categories = ["customizing"]
tags = ["shortcodes", "templating", "layout"]
feature = ["related content", "code highlighter", "snippets"]
[[copyright]]
owner = "Josh Habdas"
date = "2019"
license = "agpl-3.0-or-later"
+++
Snippets adalah abstraksi templat yang memungkinkan anda menggunakan kembali markup dan logika yang sama dengan yang digunakan untuk membuat [Shortcodes](/shortcode) di [Custom Layouts](../custom-layouts) anda.
Ambil contoh yang termasuk [Button Group](/shortcode/button-group) kode pendek yang digunakan untuk membuat satu set tombol gaya, yang akan kita lihat secara rinci disini.
Pertama, Parsial:
{{< highlight go-html-template >}}
{{< include "themes/after-dark/layouts/partials/components/buttongroup.html" >}}
{{< /highlight >}}
Kemudian shortcode:
{{< highlight go-html-template >}}
{{< include "themes/after-dark/layouts/shortcodes/hackcss-buttongroup.html" >}}
{{< /highlight >}}
Perhatikan bagaimana shortcode hanya berfungsi untuk mengumpulkan input dan memanggil parsial, yang berisi semua markup dan logika tambahan. Pelimpahan tanggungjawab ini adalah abstraksi yang memungkinkan penggunaan kembali antara konten dan templat.
Sekarang mari kita lihat bagaimana cara menggunakannya.
Gunakan [Button Group](/shortcode/button-group) shortcode ke tombol grup dalam konten:
```html
{{</* hackcss-buttongroup >}}
{{< hackcss-button text="Left" />}}
{{< hackcss-button text="Middle" type="info" />}}
{{< hackcss-button text="Right" isghost="true" />}}
{{< /hackcss-buttongroup */>}}
```
Yang membuat grup tombol gaya dengan tiga tombol seperti yang dtunjukkan disini:
{{< hackcss-buttongroup >}}
{{< hackcss-button text="Left" />}}
{{< hackcss-button text="Middle" type="info" />}}
{{< hackcss-button text="Right" isghost="true" />}}
{{< /hackcss-buttongroup >}}
Untuk menggunakan kembali di mirror layout panggilan parsial yang digunakan di dalam shortcode.
Seluruh [Shortcodes](/shortcode) mengimplementasikan {{< external href="https://hackcss.egoist.moe" text="hackcss" />}} komponen dibangun menggunakan abstraksi templat snippets yang memungkinkan masing-masing digunakan kembali [Custom Layouts](../custom-layouts).

53
themes/after-dark/docs/content/feature/snippets.md Normal file
View File

@@ -0,0 +1,53 @@
+++
title = "Snippets"
description = "Share code between Shortcodes and Custom Layouts."
categories = ["customizing"]
tags = ["shortcodes", "templating", "layout"]
features = ["related content", "code highlighter", "snippets"]
[[copyright]]
owner = "Josh Habdas"
date = "2019"
license = "agpl-3.0-or-later"
+++
Snippets are template abstractions enabling you to reuse the same markup and logic used to create [Shortcodes](/shortcode) in your [Custom Layouts](../custom-layouts).
Take for example the included [Button Group](/shortcode/button-group) shortcode used for creating a set of styled buttons, which we'll look at in detail here.
First the partial:
{{< highlight go-html-template >}}
{{< include "themes/after-dark/layouts/partials/components/buttongroup.html" >}}
{{< /highlight >}}
Now the shortcode:
{{< highlight go-html-template >}}
{{< include "themes/after-dark/layouts/shortcodes/hackcss-buttongroup.html" >}}
{{< /highlight >}}
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.
Now let's see how to actually use it.
Use the [Button Group](/shortcode/button-group) shortcode to group buttons in content:
```html
{{</* hackcss-buttongroup >}}
{{< hackcss-button text="Left" />}}
{{< hackcss-button text="Middle" type="info" />}}
{{< hackcss-button text="Right" isghost="true" />}}
{{< /hackcss-buttongroup */>}}
```
Which creates a styled button group with three buttons as shown here:
{{< hackcss-buttongroup >}}
{{< hackcss-button text="Left" />}}
{{< hackcss-button text="Middle" type="info" />}}
{{< hackcss-button text="Right" isghost="true" />}}
{{< /hackcss-buttongroup >}}
To reuse in layout mirror the `partial` call used inside the shortcode.
All [Shortcodes](/shortcode) implementing {{< external href="https://hackcss.egoist.moe" text="hackcss" />}} components are built using the snippets template abstraction enabling each of them to be reused in [Custom Layouts](../custom-layouts).

56
themes/after-dark/docs/content/feature/social-meta.id.md Normal file
View File

@@ -0,0 +1,56 @@
+++
title = "Social Meta"
description = "Membagikan tautan dengan gambar di Facebook dan Twitter."
categories = ["social"]
tags = ["author", "metadata", "images"]
feature = ["code highlighter", "snippets", "related content"]
[[copyright]]
owner = "Josh Habdas"
date = "2019"
license = "agpl-3.0-or-later"
+++
After Dark menyediakan {{< external text="Open Graph Protocol" href="http://opengraphprotocol.org" />}} dan {{< external href="https://developer.twitter.com/en/docs/tweets/optimize-with-cards" text="Twitter Cards" />}} metadata di halaman untuk mencapai kartu berbagi yang banyak:
![Open Graph sharing card screenshot](/images/instant-view-fs8.png "Contoh kartu berbagi Open Graph yang dihasilkan oleh by After Dark")
Menyesuaikan`author` di {{< external href="https://gohugo.io/getting-started/configuration/" text="Site Configuration" />}} untuk menentukan nama yang ditampilkan, jika ada:
```toml
[params]
author = "Bali Bebas!"
```
Setel atau ganti`author` per halaman menggunakan {{< external href="https://gohugo.io/content-management/front-matter/" text="Front Matter" />}} seperti yang ditunjukkan disini:
```toml
title = "Become a Digital Nomad in Bali: The Lost Guide"
description = "Everything you need to know to become a Digital Nomad in Bali."
author = "After Dark"
date = "2017-02-02T11:57:24+08:00"
publishdate = "2017-01-28T02:31:22+08:00"
images = [
"https://source.unsplash.com/-09QE4q0ezw/2000x1322"
]
```
Sesuaikan `images` untuk menentukan gambar eksternal atau jika menggunakan {{< external href="https://gohugo.io/content-management/page-bundles/" text="Page Bundles" />}}, tentukan jalur relatif ke sumber gambar untuk digunakan:
```toml
images = [
"/post/post-title/images/lana-abie-581813-unsplash.jpg"
]
```
{{% hackcss-alert type="info" %}}**Kenapa menggunakan susunan?** Open Graph mendukung berbagai ukuran gambar. Dan meskipun After Dark tidak mendukung berbagai ukuran, pengguna dapat membuat [custom layouts](../custom-layouts) itu.{{% /hackcss-alert %}}
Jika tidak ada gambar tingkat halaman yang disediakan After Dark akan mundur ke gambar site-wide yang dapat disesuaikan atau dihapus dari {{< external href="https://gohugo.io/getting-started/configuration/" text="Site Configuration" />}}:
```toml
[params]
images = [
"https://source.unsplash.com/-09QE4q0ezw/2000x1322" # site-wide og:image
]
```
Lihat {{< external href="https://unsplash.com/" text="Unsplash" />}} dan {{< external href="https://source.unsplash.com/" text="Unsplash Source" />}} untuk ribuan gambar bebas royalti.

56
themes/after-dark/docs/content/feature/social-meta.md Normal file
View File

@@ -0,0 +1,56 @@
+++
title = "Social Meta"
description = "Share links with images on Facebook and Twitter."
categories = ["social"]
tags = ["author", "metadata", "images"]
features = ["code highlighter", "snippets", "related content"]
[[copyright]]
owner = "Josh Habdas"
date = "2019"
license = "agpl-3.0-or-later"
+++
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 WhatsApp, Twitter, Telegram and more:
![Open Graph sharing card screenshot](/images/instant-view-fs8.png "Example Open Graph sharing card produced by After Dark")
Adjust `author` in {{< external href="https://gohugo.io/getting-started/configuration/" text="Site Configuration" />}} to specify name shown, if any:
```toml
[params]
author = "Bali Bebas!"
```
Set or override `author` per page using{{< external href="https://gohugo.io/content-management/front-matter/" text="Front Matter" />}} as shown here:
```toml
title = "Become a Digital Nomad in Bali: The Lost Guide"
description = "Everything you need to know to become a Digital Nomad in Bali."
author = "After Dark"
date = "2017-02-02T11:57:24+08:00"
publishdate = "2017-01-28T02:31:22+08:00"
images = [
"https://source.unsplash.com/-09QE4q0ezw/2000x1322"
]
```
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:
```toml
images = [
"/post/post-title/images/lana-abie-581813-unsplash.jpg"
]
```
{{% 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 %}}
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" />}}:
```toml
[params]
images = [
"https://source.unsplash.com/-09QE4q0ezw/2000x1322" # site-wide og:image
]
```
See {{< external href="https://unsplash.com/" text="Unsplash" />}} and {{< external href="https://source.unsplash.com/" text="Unsplash Source" />}} for thousands of royalty-free images.

36
themes/after-dark/docs/content/feature/structured-data.id.md Normal file
View File

@@ -0,0 +1,36 @@
+++
title = "Structured Data"
description = "Memberikan mesin pencari yang kaya tentang struktur situs."
categories = ["search"]
tags = ["metadata", "semantics", "robots", "SEO"]
feature = ["related content"]
[[copyright]]
owner = "Josh Habdas"
date = "2019"
license = "agpl-3.0-or-later"
+++
After Dark menghasilkan metadata terstruktur menggunakan {{< external "https://schema.org" />}} spesifikasi untuk postingan blog, [Custom Homepage](../custom-homepage), [Related Content](../related-content/), [Featured Posts](../featured-posts), [Menu Bagian](../section-menu), [Hall of Mirrors](/module/hall-of-mirrors) galeri gambar dan mengadaptasi data secara otomatis menggunakan yang ditentukan penulis [Post Bylines](../post-bylines) seperti yang ditunjukkan disini:
Properti skema | Nilai frontmatter
--------------- | -----------------
author? | `author`
datePublished | `publishdate` atau `date`
articleSection | `categories`
[Post Images]({{< relref "post-images" >}}) use {{< external "https://gohugo.io/content-management/page-resources/#page-resources-metadata" "Page Resources Metadata" />}} to add image captions:
Schema Property | Header Image Resource Metadata
--------------- | ----------------
caption? | `creator` [`sameas` domain] or `caption`
Pertimbangkan untuk menambahkan data terstruktur saat membuat [Custom Layouts](../custom-layouts) untuk meningkatkan semantik halaman dan SEO yang lebih baik.
Pelajari lebih lanjut tentang data terstruktur menggunakan sumber daya berikut:
- {{< external href="https://www.w3.org/TR/microdata/" text="HTML Microdata on W3C" />}}
- {{< external href="https://developer.mozilla.org/en-US/docs/Web/HTML/Microdata" text="Microdata on MDN" />}}
- {{< external href="https://moz.com/learn/seo/schema-structured-data" text="Schema Structured Data on Moz" />}}
Gunakan [Webmaster Tools](../webmaster-tools/) untuk memvalidasi data terstruktur. Ini dapat dilakukan dari mesin pengembangan menggunakan [ephemeral hosting](../ephemeral-hosting/).

36
themes/after-dark/docs/content/feature/structured-data.md Normal file
View File

@@ -0,0 +1,36 @@
+++
title = "Structured Data"
description = "Give search engines rich info about site structure."
categories = ["search"]
tags = ["metadata", "semantics", "robots", "SEO"]
features = ["related content"]
[[copyright]]
owner = "Josh Habdas"
date = "2019"
license = "agpl-3.0-or-later"
+++
After Dark generates structured metadata using {{< external "https://schema.org" />}} specifications for [Custom Homepage](../custom-homepage), [Related Content](../related-content/), [Featured Posts](../featured-posts), [Section Menu](../section-menu), [Image Galleries](/module/hall-of-mirrors) and adapts data automatically using author-defined [Post Bylines](../post-bylines) as shown here:
Schema Property | Frontmatter Value
--------------- | -----------------
author? | `author`
datePublished | `publishdate` or `date`
articleSection | `categories`
[Post Images]({{< relref "post-images" >}}) use {{< external "https://gohugo.io/content-management/page-resources/#page-resources-metadata" "Page Resources Metadata" />}} to add image captions:
Schema Property | Header Image Resource Metadata
--------------- | ----------------
caption? | `creator` [`sameas` domain] or `caption`
Consider adding structured data when creating [Custom Layouts](../custom-layouts) for improved page semantics and better SEO.
Learn more about structured data using the following resources:
- {{< external href="https://www.w3.org/TR/microdata/" text="HTML Microdata on W3C" />}}
- {{< external href="https://developer.mozilla.org/en-US/docs/Web/HTML/Microdata" text="Microdata on MDN" />}}
- {{< external href="https://moz.com/learn/seo/schema-structured-data" text="Schema Structured Data on Moz" />}}
Use [Webmaster Tools](../webmaster-tools/) to validate structured data. This can be done from a development machine using [Ephemeral Hosting](../ephemeral-hosting/).

97
themes/after-dark/docs/content/feature/svg-favicon.id.md Normal file
View File

@@ -0,0 +1,97 @@
+++
title = "SVG Favicon"
description = "Hiasi situs anda dengan favicon SVG yang unik."
categories = ["customizing"]
tags = ["color", "style", "graphics", "branding"]
feature = ["code highlighter", "snippets", "related content"]
[[copyright]]
owner = "Josh Habdas"
date = "2019"
license = "agpl-3.0-or-later"
+++
After Dark dikirimkan dengan 169B yang dioptimalkan[^1] SVG favicon tertanam di setiap halaman:
<details>
<summary>Perluas untuk melihat kode</summary>
{{< highlight html >}}
{{< include "themes/after-dark/layouts/partials/head/favicon.html" >}}
{{< /highlight >}}
</details>
{{% hackcss-alert type="info" %}}**Catatan**: HTML (Go) Komentar template yang dilucuti selama generasi situs.{{% /hackcss-alert %}}
Favicon adalah segitiga miring berwarna hitam dalam bentuk tepee seperti yang ditunjukkan[^2] di [Bantuan Online](../online-help) [Overview](/). Pusat segitiga menggunakan ruang negatif untuk memberikan ilusi segitiga sama sisi kedua dalam bentuk piramida, atau api terbuka, yang terkandung di dalam.
Warna ikon dapat dimodifikasi dengan mengubah atribut `fill`:
<style>
.hack figure {
text-align: center;
margin-top: 2rem;
}
</style>
{{< hackcss-grid class="-around" >}}
{{< hackcss-cell class="-2of12" >}}
<figure>
<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">
<figcaption class="highlight">
<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>
</figcaption>
</figure>
{{< /hackcss-cell >}}
{{< hackcss-cell class="-2of12" >}}
<figure>
<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">
<figcaption class="highlight">
<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>
</figcaption>
</figure>
{{< /hackcss-cell >}}
{{< hackcss-cell class="-2of12" >}}
<figure>
<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">
<figcaption class="highlight">
<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>
</figcaption>
</figure>
{{< /hackcss-cell >}}
{{< /hackcss-grid >}}
Sesuaikan dari`favicon.html` di direktori situs `layouts/partials/head`:
```
├── content
├── layouts
│   └── partials
│      └── head
│   └── favicon.html
├── static
```
Jika file belum ada, salin darii tema default:
```sh
$ mkdir -p layouts/partials/head
$ cp themes/after-dark/layouts/partials/head/favicon.html layouts/partials/head
```
Ganti SVG dengan grafik lain jika diinginkan:
```html
<link rel="icon" sizes="128x128" href="/favicon.png">
```
Jika mengoptimalkan pengalaman platform lakukan dari dalam `favicon.html`:
{{< highlight go-html-template "linenos=inline" >}}
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-title" content="{{ .Site.Title }}">
<link rel="apple-touch-icon" href="data:image/png;base64,{{ readFile "static/icon.png" | base64Encode }}">
{{< /highlight >}}
Lihat {{< external href="https://github.com/h5bp/html5-boilerplate/blob/master/dist/doc/extend.md#web-apps" text="H5BP Extend" />}} untuk persyaratan khusus platform dan {{< external href="https://gohugo.io/documentation/" text="Hugo Documentation" />}} untuk bantuan dengan templating fungsi dan variabel.
[^1]: Lihat [Mengoptimalkan SVGs dalam data URIs](https://codepen.io/tigt/post/optimizing-svgs-in-data-uris) untuk membantu mengoptimalkan SVGs anda sendiri.
[^2]: Pelajari cara mendaftar [animasi SVG dengan SMIL](https://devdocs.io/svg/svg_animation_with_smil).

97
themes/after-dark/docs/content/feature/svg-favicon.md Normal file
View File

@@ -0,0 +1,97 @@
+++
title = "SVG Favicon"
description = "Decorate your site with a unique SVG favicon."
categories = ["customizing"]
tags = ["color", "style", "graphics", "branding"]
features = ["code highlighter", "snippets", "related content"]
[[copyright]]
owner = "Josh Habdas"
date = "2019"
license = "agpl-3.0-or-later"
+++
After Dark ships with an 169B optimized[^1] SVG favicon embedded into every page:
<details>
<summary>Expand to view code</summary>
{{< highlight html >}}
{{< include "themes/after-dark/layouts/partials/head/favicon.html" >}}
{{< /highlight >}}
</details>
{{% hackcss-alert type="info" %}}**Note**: HTML (Go) template comments are stripped out during site generation.{{% /hackcss-alert %}}
The favicon is a black-colored oblique triangle in the shape of a tepee as shown[^2] on the [Online Help](../online-help) [Overview](/). 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.
The color of the icon can be modified by changing the `fill` attribute:
<style>
.hack figure {
text-align: center;
margin-top: 2rem;
}
</style>
{{< hackcss-grid class="-around" >}}
{{< hackcss-cell class="-2of12" >}}
<figure>
<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">
<figcaption class="highlight">
<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>
</figcaption>
</figure>
{{< /hackcss-cell >}}
{{< hackcss-cell class="-2of12" >}}
<figure>
<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">
<figcaption class="highlight">
<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>
</figcaption>
</figure>
{{< /hackcss-cell >}}
{{< hackcss-cell class="-2of12" >}}
<figure>
<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">
<figcaption class="highlight">
<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>
</figcaption>
</figure>
{{< /hackcss-cell >}}
{{< /hackcss-grid >}}
Adjust it from `favicon.html` in the site `layouts/partials/head` directory:
```
├── content
├── layouts
│   └── partials
│      └── head
│   └── favicon.html
├── static
```
If the file doesn't exist yet, copy it from the theme default:
```sh
mkdir -p layouts/partials/head && \
cp themes/after-dark/layouts/partials/head/favicon.html layouts/partials/head
```
Replace SVG with another graphic if desired:
```html
<link rel="icon" sizes="128x128" href="/favicon.png">
```
If optimizing for platform experiences do so from within `favicon.html`:
{{< highlight go-html-template >}}
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-title" content="{{ .Site.Title }}">
<link rel="apple-touch-icon" href="data:image/png;base64,{{ readFile "static/icon.png" | base64Encode }}">
{{< /highlight >}}
See {{< external href="https://github.com/h5bp/html5-boilerplate/blob/master/dist/doc/extend.md#web-apps" text="H5BP Extend" />}} for platform-specific requirements and {{< external href="https://gohugo.io/documentation/" text="Hugo Documentation" />}} for help with templating functions and variables.
[^1]: See [Optimizing SVGs in data URIs](https://codepen.io/tigt/post/optimizing-svgs-in-data-uris) for help optimizing your own SVGs.
[^2]: Learn how to apply [SVG animation with SMIL](https://devdocs.io/svg/svg_animation_with_smil).

21
themes/after-dark/docs/content/feature/table-of-contents.id.md Normal file
View File

@@ -0,0 +1,21 @@
+++
title = "Table of Contents"
description = "Menemukan informasi dengan cepat di postingan yang lebih panjang."
categories = ["navigation"]
tags = ["metadata"]
feature = ["related content", "snippets", "code highlighter"]
[[copyright]]
owner = "Josh Habdas"
date = "2019"
license = "agpl-3.0-or-later"
+++
Secara otomatis menghasilkan daftar isi dengan tautan gulir halus berdasarkan {{< external href="https://gsnedders.html5.org/outliner/" text="page outline" />}} saat ini. Untuk melakukannya tambahkan yang berikut ini ke postingan {{< external href="https://gohugo.io/content-management/front-matter/" text="Front Matter" />}}:
```toml
toc = true
```
Atur `false`, atau cukup hapus pengaturan untuk menonaktifkan.
Daftar isi akan jatuh di bawah penyingkapan pada pemuatan halaman. Setelah penyingkapan diperluas, outline halaman penuh akan tersingkap. Memilih item dalam outline akan menggulir halus ke bagian yang sesuai, memperbarui riwayat browser dan menyorot judul bagian.

21
themes/after-dark/docs/content/feature/table-of-contents.md Normal file
View File

@@ -0,0 +1,21 @@
+++
title = "Table of Contents"
description = "Quickly locate information in longer posts."
categories = ["navigation"]
tags = ["metadata"]
features = ["related content", "snippets", "code highlighter"]
[[copyright]]
owner = "Josh Habdas"
date = "2019"
license = "agpl-3.0-or-later"
+++
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" />}}:
```toml
toc = true
```
Set `false`, or simply remove the setting, to disable.
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.

46
themes/after-dark/docs/content/feature/taxonomy-pages.id.md Normal file
View File

@@ -0,0 +1,46 @@
+++
title = "Taxonomy Pages"
description = "Menavigasi situs menggunakan taksonomi yang ditentukan penulis."
categories = ["navigation"]
tags = ["links", "taxonomy"]
feature = ["related content", "code highlighter", "snippets"]
alias = [
"/feature/page-taxonomies/"
]
[[copyright]]
owner = "Josh Habdas"
date = "2019"
license = "agpl-3.0-or-later"
+++
After Dark menghasilkan tag dan kategoris taksonomi, halaman dan tautan istilah taksonomi [Post Bylines](../post-bylines).
Berikan halaman berikut ini {{< external href="https://gohugo.io/content-management/front-matter/" text="Front Matter" />}} untuk jenis postingan:
```toml
categories = ["navigation"]
tags = ["links", "taxonomy"]
```
Tautan taksonomi berikut akan muncul di bylines:
> Diterbitkan [by `author`] [`publishdate` or `date`] di dalam [navigation](/categories/navigation) and tagged [links](/tags/links) dan [taxonomy](/tags/taxonomy) menggunakan [`wordcount`] words.
Berikut ini [Index Blocked](../index-blocking) halaman taksonomi dihasilkan:
- [/categories/index.html](/categories/index.html)
- [/categories/navigation/index.html](/categories/navigation/index.html)
- [/tags/index.html](/tags/index.html)
- [/tags/links/index.html](/tags/links/index.html)
- [/tags/taxonomy/index.html](/tags/taxonomy/index.html)
Umpan web taksonomi berikut dibuat:
- [/categories/index.xml](/categories/index.xml)
- [/categories/navigation/index.xml](/categories/navigation/index.xml)
- [/tags/index.xml](/tags/index.xml)
- [/tags/links/index.xml](/tags/links/index.xml)
- [/tags/taxonomy/index.xml](/tags/taxonomy/index.xml)
{{< external href="https://gohugo.io/templates/sitemap-template/" text="Sitemap" />}} dan [Related Content](../related-content) perbarui dan, jika diaktifkan, [Fuzzy Search](../fuzzy-search) indeks pencarian JSON (ditimbang pada taksonomi) dibuat ulang, semuanya otomatis
Lihat {{< external href="https://gohugo.io/content-management/taxonomies" text="Taxonomies in Hugo" />}} untuk mempelajari tentang taksonoomi dan cara menyesuaikannya.

47
themes/after-dark/docs/content/feature/taxonomy-pages.md Normal file
View File

@@ -0,0 +1,47 @@
+++
title = "Taxonomy Pages"
description = "Navigate the site using author-defined taxonomies."
categories = ["navigation"]
tags = ["links", "taxonomy"]
features = ["related content", "code highlighter", "snippets"]
aliases = [
"/feature/page-taxonomies/"
]
[[copyright]]
owner = "Josh Habdas"
date = "2019"
license = "agpl-3.0-or-later"
+++
After Dark generates categorical and tag taxonomy and taxonomy terms pages and links to them automatically in posts using [Post Bylines](../post-bylines).
Given the following page {{< external href="https://gohugo.io/content-management/front-matter/" text="Front Matter" />}} for a post type:
```toml
categories = ["navigation"]
tags = ["links", "taxonomy"]
```
The following taxonomy links would appear in the byline:
> Published [by `author`] [`publishdate` or `date`] in [navigation](/categories/navigation) and tagged [links](/tags/links) and [taxonomy](/tags/taxonomy) using [`wordcount`] words.
The following [Index Blocked](../index-blocking) taxonomy pages generated:
- [/categories/index.html](/categories/index.html)
- [/categories/navigation/index.html](/categories/navigation/index.html)
- [/tags/index.html](/tags/index.html)
- [/tags/links/index.html](/tags/links/index.html)
- [/tags/taxonomy/index.html](/tags/taxonomy/index.html)
The following taxonomic web feeds created:
- [/categories/index.xml](/categories/index.xml)
- [/categories/navigation/index.xml](/categories/navigation/index.xml)
- [/tags/index.xml](/tags/index.xml)
- [/tags/links/index.xml](/tags/links/index.xml)
- [/tags/taxonomy/index.xml](/tags/taxonomy/index.xml)
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.
See {{< external href="https://gohugo.io/content-management/taxonomies" text="Taxonomies in Hugo" />}} to learn about taxonomies and how to customize them.

59
themes/after-dark/docs/content/feature/telegram-iv.id.md Normal file
View File

@@ -0,0 +1,59 @@
+++
title = "Instant Views"
description = "Preview secara instant konten anda di Telegram."
categories = ["social"]
tags = ["author", "templating"]
features = ["related content"]
[[copyright]]
owner = "Josh Habdas"
date = "2019"
license = "agpl-3.0-or-later"
+++
After Dark menyediakan panduan templat untuk mengaktifkan Telegram Instant Views untuk postingan. Gunakan itu untuk membuat {{< external href="https://instantview.telegram.org/my/" text="Instant View Template" />}} di situs telegram:
```yaml
# menggunakan 2.0
~version: "2.0"
# aktifkan untuk item di bagian postingan
?path: /post/.+
# mendefinisikan elemen-elemen yang diperlukan
title: //*[@itemprop="headline"]
body: //*[@itemprop="articleBody"]
# add optional site name and subtitle
subtitle: //*[@itemprop="description"][normalize-space()]
site_name: //*[@itemprop="url"][@href="/"]
# if author exists, define name and url
?exists: //*[@itemprop="author"]
author: //*[@itemprop="author"]
author_url: //*[@itemprop="url"]/@href
# add optional telegram channel
channel: //*[@name="telegram:channel"]/@content
# jika cover ada, tentukan gambar
?exists: //article/meta[@itemprop="image"]/@content
cover: //article/header/figure[@itemprop="image"]
image_url: $cover/self::img/@src
# data tanggal postingan diekstraksi secara otomatis
```
Preview hasilnya di situs Telegram :
![Telegram Instant View screenshot](/images/feature-instant-view-fs8.png "Example Telegram Instant View for After Dark")
Selain itu, jika situs anda memiliki saluran telegram, anda dapat menentukannya dengan mengatur seperti yang berikut ini di konfigurasi situs anda:
```toml
[params.seo]
telegram_channel = "channelname" # omit the leading `@`
```
Menentukan nama saluran memungkinkan pengguna telegram untuk bergabung dengan saluran anda dengan satu klik di dalam Instant view.
Lihat {{< external href="https://instantview.telegram.org/" text="Instant View on Telegram" />}} untuk informasi tambahan.

59
themes/after-dark/docs/content/feature/telegram-iv.md Normal file
View File

@@ -0,0 +1,59 @@
+++
title = "Instant Views"
description = "Instantly preview your content from within Telegram."
categories = ["social"]
tags = ["author", "templating"]
features = ["related content"]
[[copyright]]
owner = "Josh Habdas"
date = "2019"
license = "agpl-3.0-or-later"
+++
After Dark provides a template guide to enable Telegram Instant Views for posts. Use it to create an {{< external href="https://instantview.telegram.org/my/" text="Instant View Template" />}} on the Telegram site:
```yaml
# use 2.0
~version: "2.0"
# enable for items in the post section
?path: /post/.+
# define required elements
title: //*[@itemprop="headline"]
body: //*[@itemprop="articleBody"]
# add optional site name and subtitle
subtitle: //*[@itemprop="description"][normalize-space()]
site_name: //*[@itemprop="url"][@href="/"]
# if author exists, define name and url
?exists: //*[@itemprop="author"]
author: //*[@itemprop="author"]
author_url: //*[@itemprop="url"]/@href
# add optional telegram channel
channel: //*[@name="telegram:channel"]/@content
# if cover exists, define images
?exists: //article/meta[@itemprop="image"]/@content
cover: //article/header/figure[@itemprop="image"]
image_url: $cover/self::img/@src
# post date extracted automatically
```
Preview your results on the Telegram site:
![Telegram Instant View screenshot](/images/feature-instant-view-fs8.png "Example Telegram Instant View for After Dark")
Additionally, if your site has a telegram channel, you can specify it by setting the following in your site config:
```toml
[params.seo]
telegram_channel = "channelname" # omit the leading `@`
```
Specifying a channel name allows Telegram users to join your channel with a single click from within an Instant View.
See the {{< external href="https://instantview.telegram.org/" text="Instant View on Telegram" />}} for additional information.

31
themes/after-dark/docs/content/feature/trim-color.id.md Normal file
View File

@@ -0,0 +1,31 @@
+++
title = "Trim Color"
description = "Menentukan warna yang digunakan untuk menampilkan batas di sekitar situs anda."
categories = ["customizing"]
tags = ["color", "style", "branding"]
feature = ["code highlighter", "snippets", "related content"]
[[copyright]]
owner = "Josh Habdas"
date = "2019"
license = "agpl-3.0-or-later"
+++
Trim color terkadang dapat mempengaruhi cara browser atau OS memilih untuk menampilkan batas dan aksen warna untuk situs anda. Didalam {{< external href="https://brave.com/" text="Brave" />}}, misalnya, menyesuaikan trim color mempengaruhi gaya bilah lokasi. Atur trim colors untuk menyesuaikan hal ini.
Trim color standar secara otomatis diatur ke warna latar belakang dari yang saat ini dipilih [Skin Style](../skin-styles). Mengganti default di [Custom Styles](../custom-styles) anda dengan mendeklarasikan variabel `--trim-color` di dalam pemilih `:root` di bagian atas file:
{{< highlight css "linenos=inline" >}}
:root {
--trim-color: firebrick;
}
{{< /highlight >}}
Gunakan kembali variabel untuk mempertahankan konsistensi di seluruh gaya kustom anda:
{{< highlight css "linenos=inline,linenostart=4" >}}
nav a.active {
background-color: var(--trim-color);
}
{{< /highlight >}}
Lihat {{< external href="https://devdocs.io/css/using_css_variables" text="Using CSS variables" />}} untuk bantuan menggunakan variabel CSS.

31
themes/after-dark/docs/content/feature/trim-color.md Normal file
View File

@@ -0,0 +1,31 @@
+++
title = "Trim Color"
description = "Define the color used to display borders around your site."
categories = ["customizing"]
tags = ["color", "style", "branding"]
features = ["code highlighter", "snippets", "related content"]
[[copyright]]
owner = "Josh Habdas"
date = "2019"
license = "agpl-3.0-or-later"
+++
Trim color can sometimes affect how a browser or OS chooses to display borders and accent colors for your site. In {{< external href="https://brave.com/" text="Brave" />}}, for example, adjusting trim color affects stylizes the location bar. Set a trim color to customize this behavior.
The default trim color is automatically set to background color of the currently selected [Skin Style](../skin-styles). Override the default in your [Custom Styles](../custom-styles) by declaring the `--trim-color` variable inside a `:root` selector at the top of the file:
{{< highlight css "linenos=inline" >}}
:root {
--trim-color: firebrick;
}
{{< /highlight >}}
Reuse the variable to maintain consistency throughout your custom styles:
{{< highlight css "linenos=inline,linenostart=4" >}}
nav a.active {
background-color: var(--trim-color);
}
{{< /highlight >}}
See {{< external href="https://devdocs.io/css/using_css_variables" text="Using CSS variables" />}} for help using CSS variables.

47
themes/after-dark/docs/content/feature/upgrade-script.id.md Normal file
View File

@@ -0,0 +1,47 @@
+++
title = "Upgrade Script"
description = "Memeriksa pembaruan After Dark dan mengupgrade dengan mudah."
categories = ["core"]
tags = ["updating", "installation", "scripts"]
feature = ["code highlighter", "related content", "snippets"]
[[copyright]]
owner = "Josh Habdas"
date = "2019"
license = "agpl-3.0-or-later"
+++
Untuk memeriksa pembaruan dan secara otomatis megupgrade After Dark ke versi terbaru, jalankan upgrade skrip dari direktori situs anda:
```sh
cd flying toasters && \
./themes/after-dark/bin/upgrade
```
Jika anda sudah menggunakan versi terbaru, skrip akan memberitahu anda:
{{< hackcss-alert type="info" >}}
<samp class="muted">Did not upgrade after-dark. Already using latest version.</samp>
{{< /hackcss-alert >}}
Jika pembaruan tersedia, skrip akan mengunduh dan menginstalnya secara otomatis:
{{< hackcss-alert type="info" >}}
<samp class="muted">Starting upgrade from 6.7.6 to 6.8.0 ...<br>
Version 6.8.0 downloaded to themes/after-dark<br>
Stopping help server if running ...</br>
Generating help documentation ...<br>
Upgrade complete! Please see CHANGELOG.md for changes.</samp>
{{< /hackcss-alert >}}
Jika versi saat ini tidak dapat dideteksi skrip akan meminta anda:
{{< hackcss-alert type="info" >}}
<samp class="muted">Cannot detect version. Upgrade after-dark anyway (y/n)? y<br>
Starting upgrade from unknown version to 6.12.1 ...<br>
Version 6.12.1 downloaded to themes/after-dark<br>
Stopping help server if running ...</br>
Generating help documentation ...<br>
Upgrade complete! Please see CHANGELOG.md for changes.</samp>
{{< /hackcss-alert >}}
Seperti [Quick Install](../quick-install) Skrip upgrade ditulis ke standar PSOIX tidak akan memerlukan ketergantungan tambahan untuk beroperasi di sebagian besar sistem. Setelah upgrade [Release Hash](../release-hashes) akan memperbarui juga sehingga anda akan [Validate Release](/validate).

47
themes/after-dark/docs/content/feature/upgrade-script.md Normal file
View File

@@ -0,0 +1,47 @@
+++
title = "Upgrade Script"
description = "Check for After Dark updates and upgrade effortlessly."
categories = ["core"]
tags = ["updating", "installation", "scripts"]
features = ["code highlighter", "related content", "snippets"]
[[copyright]]
owner = "Josh Habdas"
date = "2019"
license = "agpl-3.0-or-later"
+++
To check for updates and automatically upgrade After Dark to the latest version simply run the upgrade script from your site directory:
```sh
cd flying toasters && \
./themes/after-dark/bin/upgrade
```
If you're already using the latest version the script will let you know:
{{< hackcss-alert type="info" >}}
<samp class="muted">Did not upgrade after-dark. Already using latest version.</samp>
{{< /hackcss-alert >}}
If an update is available the script will download and install it automatically:
{{< hackcss-alert type="info" >}}
<samp class="muted">Starting upgrade from 6.7.6 to 6.8.0 ...<br>
Version 6.8.0 downloaded to themes/after-dark<br>
Stopping help server if running ...</br>
Generating help documentation ...<br>
Upgrade complete! Please see CHANGELOG.md for changes.</samp>
{{< /hackcss-alert >}}
If current version can't be detected the script will prompt you:
{{< hackcss-alert type="info" >}}
<samp class="muted">Cannot detect version. Upgrade after-dark anyway (y/n)? y<br>
Starting upgrade from unknown version to 6.12.1 ...<br>
Version 6.12.1 downloaded to themes/after-dark<br>
Stopping help server if running ...</br>
Generating help documentation ...<br>
Upgrade complete! Please see CHANGELOG.md for changes.</samp>
{{< /hackcss-alert >}}
Like [Quick Install](../quick-install) the upgrade script is written to POSIX standard will not require additional dependencies to operate on most systems. Upon upgrade the [Release Hash](../release-hashes) will update as well so you may [Validate Release](/validate).

69
themes/after-dark/docs/content/feature/web-feeds.md Normal file
View File

@@ -0,0 +1,69 @@
+++
title = "Web Feeds"
description = "Share RSS feeds with full-content and optional enclosures."
categories = ["search"]
tags = ["metadata", "robots", "SEO"]
features = ["snippets", "related content", "code highlighter"]
[[copyright]]
owner = "Josh Habdas"
date = "2019"
license = "agpl-3.0-or-later"
+++
After Dark provides RSS web feeds conforming with the {{< external "https://cyber.harvard.edu/rss/rss.html" "RSS 2.0 Specification" />}} and enhanced semantically using the following custom extensions:
- {{< external "https://purl.org/rss/1.0/modules/content/" "Content Module" />}} to convey the full content of pages and posts
- {{< external "https://purl.org/dc/elements/1.1/" "Dublin Core" />}} to give authorship credit on individual pages
- {{< external "https://www.w3.org/2005/Atom" "Atom" />}} for improved compatibility with Atom feeds
Feeds are generated automatically on a per-section basis, in addition to a consolidated site-wide feed combining content from across the site:
- [/index.xml](/index.xml) site-wide feed
- [/feature/index.xml](/feature/index.xml) features feed
- [/module/index.xml](/module/index.xml) modules feed
- [/shortcode/index.xml](/shortcode/index.xml) shortcodes feed
- [/extra/index.xml](/extra/index.xml) extras feed
Add multimedia attachments to pages and posts using RSS enclosures. Enclosures will output automatically to feeds when supplied. To supply an enclosure create a {{< external "https://gohugo.io/content-management/page-bundles/" "Page Bundle" />}} as described in [Post Images]({{< relref "post-images" >}}) and shown here for a blog post:
```
├── archetypes
├── content
│ └── post
│ └── backup-restore-macos-mojave
│ ├── assets
│ │ └── macos_v10.14.3-upgrade-fail.mp4
│ ├── images
│ └── index.md
├── layouts
```
Then reference the resource from front matter as shown here:
```toml
[[resources]]
src = "assets/macos_v10.14.3-upgrade-fail.mp4"
name = "enclosure"
title = "Software Update Malfunction: Mojave 10.14.3"
[resources.params]
length = "3705578"
```
{{% hackcss-alert type="info" %}}**Note:** Length is the number of bytes in the file and required by RSS 2.0 spec.{{% /hackcss-alert %}}
{{% hackcss-alert type="success" %}}**Tip:** From a terminal get length using `wc -c < /path/to/file`.{{% /hackcss-alert %}}
Enclosures may be output to page content by creating a custom shortcode or using a [Custom Layout]({{< relref "custom-layouts" >}}) with content like:
```go-html-template
{{ with .Resources.GetMatch "enclosure" }}{{ if .Params.length }}
<svg id="i-paperclip" viewBox="0 0 32 32" width="16" height="16" fill="none" stroke="var(--accent-color)" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
<path d="M10 9 L10 24 C10 28 13 30 16 30 19 30 22 28 22 24 L22 6 C22 3 20 2 18 2 16 2 14 3 14 6 L14 23 C14 24 15 25 16 25 17 25 18 24 18 23 L18 9" />
</svg>
<a href="{{ .Permalink }}" title="{{ with .Title }}{{ . }} {{ end }}[{{ .Params.length }} byte {{ .MediaType }}]">Enclosure</a>
{{ end }}{{ end }}
```
Use the {{< external "https://validator.w3.org/feed/" "W3C Feed Validation Service" />}} to validate your feed. For help creating custom shortcodes see {{< external "https://gohugo.io/templates/shortcode-templates/#create-custom-shortcodes" "Create Your Own Shortcodes" />}} on the Hugo docs site.
See {{< external "https://gohugo.io/templates/rss/" "RSS Templates" />}} in Hugo for additional information.

74
themes/after-dark/docs/content/feature/webmaster-tools.id.md Normal file
View File

@@ -0,0 +1,74 @@
+++
title = "Webmaster Tools"
description = "Menguji dan mengirim situs anda dengan mesin pencari yang terkenal."
categories = ["search"]
tags = ["SEO", "robots", "metadata"]
feature = ["code highlighter", "related content", "snippets"]
[[copyright]]
owner = "Josh Habdas"
date = "2019"
license = "agpl-3.0-or-later"
+++
## Verifikasi Webmaster
Gunakan beranda`meta` untuk memverifikasi situs anda dengan Google, Bing, Alexa dan Yandex. Semua verifikasi bersifat opsional dan beberapa penyedia mengizinkan anda [submit manually](#submit-manually).
Untuk memverifikasi dengan`meta` tambahkan yang berikut ini ke {{< external href="https://gohugo.io/getting-started/configuration/" text="Site Configuration" />}} dan isi nilai yang diberikan kepada anda oleh konsol webmaster mesin pencari atau sejenisnya :
```toml
[params.seo.webmaster_verifications]
google = "" # Opsional, lihat https://search.google.com/search-console
bing = "" # Opsional, lihat https://www.bing.com/toolbox/webmaster/
yandex = "" # Opsional, lihat https://webmaster.yandex.com/
alexa = "" # Opsional, mengklaim dihentikan (lihat catatan di bawah ini)
```
{{< hackcss-alert type="info" >}}
<strong>Note:</strong> Mengklaim situs anda dengan Alexa {{< external text="dihentikan" href="https://support.alexa.com/hc/en-us/articles/219135887-Claiming-has-been-retired-May-2016" />}} dalam May 2016.
{{< /hackcss-alert >}}
Nanti anda dapat menghapus verifikasi yang tidak anda perlukan lagi atau memutuskan untuk tidak menggunakannya.
### Kirim secara manual
Mengirim peta situs anda secara manual untuk pengindeksan pencarian:
{{< hackcss-form target="_blank" action="https://www.google.com/webmasters/tools/ping" >}}
{{< hackcss-formgroup >}}
{{< hackcss-label for="google" text="Google:" />}}
{{< hackcss-textinput id="google" name="sitemap" placeholder="https://domain.example/sitemap.xml" >}}
{{< /hackcss-formgroup >}}
{{< /hackcss-form >}}
{{< hackcss-form target="_blank" action="https://bing.com/webmaster/ping.aspx" >}}
{{< hackcss-formgroup >}}
{{< hackcss-label for="bing" text="Bing:" />}}
{{< hackcss-textinput id="bing" name="siteMap" placeholder="https://domain.example/sitemap.xml" >}}
{{< /hackcss-formgroup >}}
{{< /hackcss-form >}}
## Uji Data Terstruktur
Untuk menguji dengan Yandex gunakan {{< external href="https://webmaster.yandex.com/tools/microtest" text="Structured data validator" />}} alat uji. Untuk Google kirimkan formulir dibawah ini dengan URL yang ingin anda uji:
{{< hackcss-form target="_blank" action="https://search.google.com/structured-data/testing-tool" >}}
{{< hackcss-formgroup >}}
{{< hackcss-textinput type="hidden" name="hl" value="en" >}}
{{< hackcss-label for="google" text="Test URL:" />}}
{{< hackcss-textinput id="google" name="url" placeholder="https://domain.example/post/" >}}
{{< /hackcss-formgroup >}}
{{< /hackcss-form >}}
Gunakan [Hosting Ephemeral]({{< relref "ephemeral-hosting" >}}) untuk memeriksa situs anda saat dalam pengembangan/pengujian.
## Menguji dan memantau kecepatan
Tidak ada yang menyukai website yang lambat. Mengevaluasi dan menganalisa kinerja dari berbagai lokasi di seluruh dunia menggunakan {{< external href="https://tools.pingdom.com" text="Pingdom Tools" />}} dan {{< external "https://webpagetest.org" />}} secara gratis.
Memantau kinerja dari waktu ke waktu menggunakan {{< external href="https://speedtracker.org" text="SpeedTracker" />}}.
## Layanan Tambahan
- {{< external "https://webmaster.yandex.com/tools/robotstxt/" />}}
- {{< external "https://w3c.github.io/developers/tools/" />}}

73
themes/after-dark/docs/content/feature/webmaster-tools.md Normal file
View File

@@ -0,0 +1,73 @@
+++
title = "Webmaster Tools"
description = "Test and submit your site with popular search engines."
categories = ["search"]
tags = ["SEO", "robots", "metadata"]
features = ["code highlighter", "related content", "snippets"]
[[copyright]]
owner = "Josh Habdas"
date = "2019"
license = "agpl-3.0-or-later"
+++
## Webmaster verification
Use homepage `meta` to verify your site with Google, Bing, Alexa and Yandex. All verifications are optional and some providers allow you to [submit manually](#submit-manually).
To verify with `meta` add the following to your {{< external href="https://gohugo.io/getting-started/configuration/" text="Site Configuration" />}} and fill in the value provided to you by the search engine webmaster console or similar:
```toml
[params.seo.webmaster_verifications]
google = "" # Optional, see https://search.google.com/search-console
bing = "" # Optional, see https://www.bing.com/toolbox/webmaster/
yandex = "" # Optional, see https://webmaster.yandex.com/
alexa = "" # Optional, claiming retired (see note below)
```
{{< hackcss-alert type="info" >}}
<strong>Note:</strong> Claiming your site with Alexa {{< external text="was retired" href="https://support.alexa.com/hc/en-us/articles/219135887-Claiming-has-been-retired-May-2016" />}} in May 2016.
{{< /hackcss-alert >}}
You may later remove verifications you no longer need or decide not to use.
### Submit manually
Manually submit your Sitemap for search indexing:
{{< hackcss-form target="_blank" action="https://www.google.com/webmasters/tools/ping" >}}
{{< hackcss-formgroup >}}
{{< hackcss-label for="google" text="Google:" />}}
{{< hackcss-textinput id="google" name="sitemap" placeholder="https://domain.example/sitemap.xml" >}}
{{< /hackcss-formgroup >}}
{{< /hackcss-form >}}
{{< hackcss-form target="_blank" action="https://bing.com/webmaster/ping.aspx" >}}
{{< hackcss-formgroup >}}
{{< hackcss-label for="bing" text="Bing:" />}}
{{< hackcss-textinput id="bing" name="siteMap" placeholder="https://domain.example/sitemap.xml" >}}
{{< /hackcss-formgroup >}}
{{< /hackcss-form >}}
## Test Structured Data
To test with Yandex use their {{< external href="https://webmaster.yandex.com/tools/microtest" text="Structured data validator" />}} testing tool. For Google submit the form below with the URL you wish to test:
{{< hackcss-form target="_blank" action="https://search.google.com/structured-data/testing-tool" >}}
{{< hackcss-formgroup >}}
{{< hackcss-textinput type="hidden" name="hl" value="en" >}}
{{< hackcss-label for="google" text="Test URL:" />}}
{{< hackcss-textinput id="google" name="url" placeholder="https://domain.example/post/" >}}
{{< /hackcss-formgroup >}}
{{< /hackcss-form >}}
Use [Ephemeral Hosting]({{< relref "ephemeral-hosting" >}}) to check your site while in development/testing.
## Test and Monitor Speed
Nobody likes a slow website. Benchmark and analyze performance from various locations worldwide using {{< external href="https://tools.pingdom.com" text="Pingdom Tools" />}} and {{< external "https://webpagetest.org" />}} for free.
Monitor performance over time using {{< external href="https://speedtracker.org" text="SpeedTracker" />}}.
## Additional services
- {{< external "https://webmaster.yandex.com/tools/robotstxt/" />}}
- {{< external "https://w3c.github.io/developers/tools/" />}}

26
themes/after-dark/docs/content/feature/work-offline.id.md Normal file
View File

@@ -0,0 +1,26 @@
+++
title = "Work Offline"
description = "Membangun dan menjalankan seluruh situs anda tanpa akses internet."
categories = ["security"]
tags = ["privacy", "networking"]
feature = ["related content"]
aliases = [
"/feature/air-gapping"
]
[[copyright]]
owner = "Josh Habdas"
date = "2019"
license = "agpl-3.0-or-later"
+++
Kecuali menjalankan [Instal Cepat](../quick-install) After Dark tidak memerlukan koneksi internet untuk berfungsi. Manfaatkan fitur ini dengan berbagai cara yang kreatif:
- Menggunakan [Hosting Ephemeral]({{< relref "ephemeral-hosting" >}}) untuk laporkan berita tanpa memberitahu pihak berwenang.
- Meninjau [Bantuan Online](../online-help) dokumen selama penerbangan dengan Virgin Galactic.
- Menyimpan jurnal pribadi saat melakukan couchsurfing melalui Asia Tenggara.
- Dengan aman menghasilkan konfigurasi untuk [Penambang Web](/module/toxic-swamp#config-generator) modul tambahan.
- Jalankan situs anda di belakang NAT atau firewall yang memblokir semua permintaan keluar.
- Mengembangkan konten anda menggunakan {{< external href="https://termux.com" text="Termux" />}} pada Android dengan mode pesawat.
- Membuat sebuah [Galeri Gambar](/module/hall-of-mirrors) saat trekking ke Gunung Nimbus melalui ferrata.
Secara default After Dark tidak membuat permintaan keluar **kecuali** saat melihat dokumentasi tertentu [Bantuan Online](../online-help) untuk menutupi fungsionalitas terkait.

26
themes/after-dark/docs/content/feature/work-offline.md Normal file
View File

@@ -0,0 +1,26 @@
+++
title = "Work Offline"
description = "Build and run your entire site without Internet access."
categories = ["security"]
tags = ["privacy", "networking"]
features = ["related content"]
aliases = [
"/feature/air-gapping"
]
[[copyright]]
owner = "Josh Habdas"
date = "2019"
license = "agpl-3.0-or-later"
+++
Unless running the [Quick Install](../quick-install) After Dark does not require an Internet connection to function. Leverage this feature in creative ways:
- Use [Ephemeral Hosting]({{< relref "ephemeral-hosting" >}}) to report news without tipping off authorities.
- Run your site behind a NAT or firewall blocking all outbound requests.
- Review the [Online Help](../online-help) docs during a flight on Virgin Galactic.
- Keep a personal journal while couchsurfing through Southeast Asia.
- Securely generate configuration for the [Web Mining](/module/toxic-swamp#config-generator) add-on module.
- Develop your content using {{< external href="https://termux.com" text="Termux" />}} on Android in airplane mode.
- Create an [Image Gallery](/module/hall-of-mirrors) while trekking the Mount Nimbus via ferrata.
By default After Dark makes no outbound requests **except** when viewing certain [Online Help](../online-help) documentation to cover related functionality.

10
themes/after-dark/docs/content/module/_index.md Normal file
View File

@@ -0,0 +1,10 @@
+++
title = "Modules"
description = "Enhance site functionality with add-on modules."
[[copyright]]
owner = "Josh Habdas"
date = "2019"
license = "agpl-3.0-or-later"
+++
After Dark includes a [Module System]({{< relref "module-system" >}}) and several optional modules designed to compliment your site. A list of available modules can be found below.

56
themes/after-dark/docs/content/module/fractal-forest.md Normal file
View File

@@ -0,0 +1,56 @@
+++
title = "Fractal Forest"
slug = "fractal-forest"
description = "BPG Image Format add-on module for After Dark."
summary = "BPG Image Format (Preinstalled)."
categories = ["addon"]
tags = ["module", "images", "graphics", "installation", "performance"]
features = ["related content", "snippets", "section menu"]
[[copyright]]
owner = "Josh Habdas"
date = "2019"
license = "agpl-3.0-or-later"
+++
**BPG Image format Homepage:** {{< external "https://bellard.org/bpg/" />}}<br>
**Module Source:** {{< external "https://git.habd.as/comfusion/fractal-forest" />}}
## Demo
- {{< external "http://xooyoozoo.github.io/yolo-octo-bugfixes/" "Visual comparison" />}} between BPG, JPEG, JP2K and WebP
- {{< external "https://bellard.org/bpg/lena.html" "Lena 512x512 image, visual comparison with JPEG" />}}
- {{< external "https://bellard.org/bpg/gallery1.html" "Wikipedia photos" />}}
- {{< external "https://bellard.org/bpg/gallery2.html" "Images with alpha channel" />}}
- {{< external "https://bellard.org/bpg/gallery3.html" "Test images using different color spaces and bit depth" />}}
- {{< external "https://bellard.org/bpg/animation.html" "Test animations" />}}
## Installation
{{% hackcss-alert type="info" %}}**Note:** Module pre-installed via [Quick Install]({{< relref "quick-install" >}}) with example in post archetype.{{% /hackcss-alert %}}
Choose a module download source:
- {{< external "https://www.npmjs.com/package/fractal-forest" />}}
- {{< external "https://www.jsdelivr.com/package/npm/fractal-forest" />}}
- {{< external "https://git.habd.as/comfusion/fractal-forest" />}}
Extract module contents into site `themes` directory:
```sh
├── static
└── themes
├── after-dark
└── fractal-forest
```
Specify module in site config:
{{< highlight toml "linenos=inline,linenostart=6" >}}
# Controls default theme and theme components
theme = [
"fractal-forest", # sequence before "after-dark"
"after-dark"
]
{{< /highlight >}}
See {{< external href="https://git.habd.as/comfusion/fractal-forest/src/branch/master/README.md" text="README.md" />}} to confirm you're using the minimum required version of After Dark; and module setup, configuration and usage instructions. If you need help you may {{< external href="https://git.habd.as/comfusion/fractal-forest/issues" text="Submit an Issue" />}} with your question.

51
themes/after-dark/docs/content/module/hall-of-mirrors.md Normal file
View File

@@ -0,0 +1,51 @@
+++
title = "Hall of Mirrors"
slug = "hall-of-mirrors"
description = "Responsive PhotoSwipe Image Galleries add-on module for After Dark."
summary = "Responsive PhotoSwipe Image Galleries."
categories = ["addon"]
tags = ["module", "images", "graphics", "engagement"]
features = ["related content", "snippets", "section menu"]
[[copyright]]
owner = "Josh Habdas"
date = "2019"
license = "agpl-3.0-or-later"
+++
**PhotoSwipe Homepage:** {{< external "http://photoswipe.com" />}}<br>
**Module Source:** {{< external "https://git.habd.as/comfusion/hall-of-mirrors" />}}
## Demo
{{< hackcss-alert >}}
{{< video controls="true" preload="auto" src="https://habd.as/code/after-dark/assets/after-dark-hall-of-mirrors-demo.mp4" width="100%" >}}
{{< /hackcss-alert >}}
## Installation
Choose a module download source:
- {{< external "https://www.npmjs.com/package/hall-of-mirrors" />}}
- {{< external "https://www.jsdelivr.com/package/npm/hall-of-mirrors" />}}
- {{< external "https://git.habd.as/comfusion/hall-of-mirrors" />}}
Extract module contents into site `themes` directory:
```sh
├── static
└── themes
├── after-dark
└── hall-of-mirrors
```
Specify module in site config:
{{< highlight toml "linenos=inline,linenostart=6" >}}
# Controls default theme and theme components
theme = [
"hall-of-mirrors", # sequence before "after-dark"
"after-dark"
]
{{< /highlight >}}
See {{< external href="https://git.habd.as/comfusion/hall-of-mirrors/src/branch/master/README.md" text="README.md" />}} to confirm you're using the minimum required version of After Dark; and module setup, configuration and usage instructions. If you need help you may {{< external href="https://git.habd.as/comfusion/hall-of-mirrors/issues" text="Submit an Issue" />}} with your question.

527
themes/after-dark/docs/content/module/toxic-swamp.md Normal file
View File

@@ -0,0 +1,527 @@
+++
title = "Toxic Swamp"
slug = "toxic-swamp"
description = "Monero/Aeon Web Miner add-on module for After Dark."
summary = "Monero/Aeon Web Miner."
categories = ["addon"]
tags = ["module", "monetization", "rewards", "cryptocurrency"]
features = ["snippets", "related content"]
[security.csp.directives]
scriptSrc = [
"'sha512-TKVuLlCT8+a0Chpa6Pw3clhu9fhZ9JOzgblgxQaUQVP/z4lfPnrdyWDOgucORnS2qapWu/iPVG2d0ywyGH2NjA=='"
]
[[copyright]]
owner = "Josh Habdas"
date = "2019"
license = "agpl-3.0-or-later"
+++
Monetize attention in one of more than 40 cryptocurrency mining pools with support for the March 2019 Monero hard fork.
{{< hackcss-alert >}}
{{< video controls="true" src="https://habd.as/code/toxic-swamp/assets/toxic-swamp-demo.mp4" preload="auto" poster="https://habd.as/code/toxic-swamp/images/after-dark-v6.15.0-homepage-fs8.png" width="100%" >}}
{{< /hackcss-alert >}}
# Features
- Mine cryptocurrency while visitors browse your sites
- Reward effort during site development and publishing
- Transparent, unobtrusive multilingual user interface
- Does not use cookies or connect to any third-parties
- Obfuscates end-user IPs and other connection details
- Automatically starts when external power is detected
- Suspends operation during loss of power or attention
- Optimized for low-bandwidth high-latency connections
- Cannot be detected by MinerBlock extension at 1.2.12
# Installation
Choose a module download source:
- {{< external "https://www.npmjs.com/package/toxic-swamp" />}} - npm
- {{< external "https://www.jsdelivr.com/package/npm/toxic-swamp" />}} - cdn
- {{< external "https://git.habd.as/comfusion/toxic-swamp" />}} - git
Extract module contents into site themes directory:
```
├── static
└── themes
├── after-dark
└── toxic-swamp
```
Verify [Release Hash]({{< relref "release-hashes" >}}) and GPG signature:
```sh
cd themes/toxic-swamp && \
npm install && npm run integrity && \
git tag --verify v1.0.0-beta.28
```
Specify module in site config:
{{< highlight toml "linenos=inline,linenostart=6" >}}
# Controls default theme and theme components
theme = [
"toxic-swamp", # sequence before "after-dark"
"after-dark"
]
{{< /highlight >}}
Configure with payout address to start earning rewards:
{{< highlight toml "linenos=inline,linenostart=36" >}}
[params.modules.toxic_swamp]
enabled = true # Optional, set false to disable module
address = "your-address-here"
{{< /highlight >}}
# Earning Rewards
Using [The Fire Swamp](#the-fire-swamp) with a configured payout address, you may view your hash metrics and payout information from the {{< external href="https://moneroocean.stream/?dark#/dashboard" text="MoneroOcean Dashboard" />}}:
{{< figure alt="MoneroOcean Dashboard screenshots"
src="/images/screenshots/monero-ocean-dashboard-fs8.png"
caption="Monero Ocean Dashboard showing Toxic Swamp mining activity."
>}}
See the MoneroOcean {{< external href="https://moneroocean.stream/?dark#/help/faq" text="FAQ" />}} for more details.
# The Fire Swamp
After Dark provides upgrade incentives The Fire Swamp using {{< external href="https://moneroocean.stream/?dark" text="MoneroOcean" />}} to help you get started and as a fallback when custom proxies fail to connect.
The proxy servers are located at `fs*.habd.as:80` and will be used by default until you [Create Your Own Proxy](#create-your-own-proxy) or fall more than two major versions behind.
To maximize your rewards while using the Fire Swamp proxy you must try to keep your After Dark version up-to-date as illustrated here:
<style>
.dark table tbody td:first-child { color: inherit; }
table tbody td:first-child { font-weight: initial; }
</style>
<table>
<caption>Figure 1: Fire Swamp upgrade incentive based on After Dark version</caption>
<thead>
<tr>
<th scope="col">Latest Version</th>
<th scope="col">Your Version</th>
<th scope="col">Upgrade Incentive</th>
</tr>
</thead>
<tbody>
<tr>
<td>7.0.0</td>
<td>7.0.0</td>
<td>None</td>
</tr>
<tr>
<td>7.0.2</td>
<td>7.0.1</td>
<td>2.2%</td>
</tr>
<tr>
<td>7.1.0</td>
<td>7.0.2</td>
<td>13.6%</td>
</tr>
<tr>
<td>8.0.0</td>
<td>7.1.0</td>
<td>34.1%</td>
</tr>
</tbody>
</table>
To describe in more detail:
- If a bugfix, documentation update, refactoring or other patch release occurs your upgrade incentive is 2.2% of your total combined mining hash power.
- If an enhancement, feature or other minor release occurs your upgrade incentive is 13.6% of your total combined mining hash power.
- If a breaking change, license update or other major release occurs your upgrade incentive is 34.1% of your total combined mining hash power.
- If you fall more than one point release behind any minor or patch release the upgrade incentive will remain the same as if you were only one release behind.
- If you fall more than two majors behind your miner may continue to function but you will be required to upgrade to maintain your upgrade incentive.
Maximize your incentive with reduced effort by using the [Upgrade Script](/feature/upgrade-script/) to check for and automatically update After Dark to the latest available version.
{{< hackcss-alert type="success" >}}
<strong>Tip:</strong> After Dark uses {{< external href="https://semver.org" text="Semantic Versioning" />}} and the <code>latest</code> version may be tracked programmatically using on the NPM registry and in JSON form {{< external href="https://registry.npmjs.org/-/package/after-dark/dist-tags" text="here" />}}.
{{< /hackcss-alert >}}
{{< hackcss-alert type="info" >}}
<strong>Note:</strong> After Dark updates are typically backwards compatible with existing modules though there may be cases where module updates are required.
{{< /hackcss-alert >}}
# Create Your Own Proxy
Advanced users may wish to configure their own proxy servers. To do so select <samp>Advanced Settings</samp> when generating configuration after standing-up your proxy server described in more detail here:
<details>
<summary>Expand to view details</summary>
Use the instructions in {{< external "https://git.habd.as/comfusion/webminerpool" />}} to stand up your own proxy server and reference the following to understand connection activity:
<style>
table { caption-side: bottom; }
caption { margin-top: 0.5rem; font-variant: all-small-caps; }
dd, dt { display: inline-block; }
dt { margin-left: 3rem; }
dd { width: 10rem; }
</style>
<table>
<legend>
Legend
<dl>
<dt>A<dd>Active
<dt>I<dd>Inactive
<dt>S<dd>Standby
<dt>E<dd>Error
<dt>O<dd>Open
<dt>C<dd>Closed
<dt>K<dd>Known
<dt>U<dd>Unknown
</dl>
</legend>
<caption>Figure 2: Miner connection activity by device, proxy and toolbar state</caption>
<thead>
<tr>
<th colspan="3" scope="col">Device</th>
<th colspan="3" scope="col">Toolbar</th>
<th colspan="4" scope="col">Miner</th>
<th colspan="3" scope="col">Proxy</th>
</tr>
<tr>
<th scope="col">Charging</th>
<th scope="col">Online</th>
<th scope="col">Cores</th>
<th scope="col">Visible</th>
<th scope="col">Powered</th>
<th scope="col">Throttle</th>
<th scope="col">Status</th>
<th scope="col">Socket</th>
<th scope="col">Workers</th>
<th scope="col">Load</th>
<th scope="col">Online</th>
<th scope="col">Pool</th>
<th scope="col">Allow</th>
</tr>
</thead>
<tbody>
<tr>
<td>--</td>
<td>--</td>
<td>--</td>
<td>--</td>
<td>Off</td>
<td>--</td>
<td>I</td>
<td>--</td>
<td>--</td>
<td>--</td>
<td>--</td>
<td>--</td>
<td>--</td>
</tr>
<tr>
<td>Yes</td>
<td>Yes</td>
<td>8</td>
<td>No</td>
<td>On</td>
<td>Any</td>
<td>S</td>
<td>C</td>
<td>8</td>
<td>0</td>
<td>--</td>
<td>--</td>
<td>--</td>
</tr>
<tr>
<td>Yes</td>
<td>No</td>
<td>8</td>
<td>Yes</td>
<td>On</td>
<td>Any</td>
<td>S</td>
<td>E</td>
<td>8</td>
<td>0</td>
<td>--</td>
<td>--</td>
<td>--</td>
</tr>
<tr>
<td>No</td>
<td>Yes</td>
<td>16</td>
<td>Yes</td>
<td>On</td>
<td>25</td>
<td>I</td>
<td>C</td>
<td>16</td>
<td>4</td>
<td>Yes</td>
<td>K</td>
<td>Yes</td>
</tr>
<tr>
<td>Yes</td>
<td>Yes</td>
<td>16</td>
<td>Yes</td>
<td>On</td>
<td>25</td>
<td>A</td>
<td>O</td>
<td>16</td>
<td>12</td>
<td>Yes</td>
<td>K</td>
<td>Yes</td>
</tr>
<tr>
<td>Yes</td>
<td>Yes</td>
<td>32</td>
<td>Yes</td>
<td>On</td>
<td>50</td>
<td>A</td>
<td>O</td>
<td>32</td>
<td>16</td>
<td>Yes</td>
<td>K</td>
<td>Yes</td>
</tr>
<tr>
<td>Yes</td>
<td>Yes</td>
<td>32</td>
<td>Yes</td>
<td>On</td>
<td>75</td>
<td>A</td>
<td>O</td>
<td>32</td>
<td>24</td>
<td>Yes</td>
<td>K</td>
<td>Yes</td>
</tr>
<tr>
<td>Yes</td>
<td>Yes</td>
<td>64</td>
<td>Yes</td>
<td>On</td>
<td>Any</td>
<td>S</td>
<td>E</td>
<td>64</td>
<td>0</td>
<td>Yes</td>
<td>U</td>
<td>No</td>
</tr>
<tr>
<td>Yes</td>
<td>Yes</td>
<td>64</td>
<td>Yes</td>
<td>On</td>
<td>Any</td>
<td>S</td>
<td>E</td>
<td>64</td>
<td>0</td>
<td>No</td>
<td>--</td>
<td>--</td>
</tr>
</tbody>
</table>
Generate configuration with `Advanced Settings` specified:
{{< hackcss-card header="Interactive Config Generator" >}}
<style>.form { width: unset; }</style>
{{< hackcss-form name="generator" disabled="true" action="http://localhost:1414/module/toxic-swamp/configuration/" >}}
<noscript>
{{< hackcss-helpblock >}}
<p>Enable JavaScript for offline config generation.</p>
{{< /hackcss-helpblock >}}
</noscript>
{{< hackcss-alert type="warning" class="js-usesameorigin" >}}
<style>.js-usesameorigin { display: none }</style>
<strong>NOPE!</strong> Attempting to submit to unknown origin.
{{< /hackcss-alert >}}
{{< hackcss-alert type="warning" class="js-useonlinehelp" >}}
Please use <a href="/feature/online-help/">Online Help</a> to generate configuration while <a href="/feature/work-offline/">Working Offline</a>.
{{< /hackcss-alert >}}
{{< hackcss-alert type="warning" class="js-disconnect" >}}
<style>.js-disconnect { display: none }</style>
Please <a href="/feature/work-offline/">Disconnect</a> from the network before generating your configuration.
{{< /hackcss-alert >}}
{{< hackcss-formgroup name="addressgroup" >}}
{{< hackcss-label for="address" >}}
<abbr title="Monero">XMR</abbr> Address:
{{< /hackcss-label >}}
{{< hackcss-textinput
required="true"
disabled="true"
type="text" id="address" name="address"
placeholder="44ky1q4d..."
pattern="^4[0-9AB][123456789ABCDEFGHJKLMNPQRSTUVWXYZabcdefghijkmnopqrstuvwxyz]{93}$"
>}}
{{< hackcss-helpblock >}}
Enter payout address. {{< external href="https://getmonero.org/resources/user-guides/securely_purchase.html" >}}Create Secure Wallet{{< /external >}}.
{{< /hackcss-helpblock >}}
{{< /hackcss-formgroup >}}
{{< hackcss-buttongroup formactions="true" >}}
{{< hackcss-button class="muted" name="generate" type="success" text="Generate Config" disabled="true" />}}
{{< /hackcss-buttongroup >}}
<details>
<summary>Advanced Settings</summary>
<p>Optional. <a href="#create-your-own-proxy">Create Your Own Proxy</a> before using.</p>
{{< hackcss-formgroup name="servergroup" >}}
{{< hackcss-label for="server" text="Proxy Server:" />}}
{{< hackcss-textinput type="url" id="server" name="server" placeholder="wss://domain.example:80" >}}
{{< hackcss-helpblock >}}
Web Socket URL for custom proxy server.
{{< /hackcss-helpblock >}}
{{< /hackcss-formgroup >}}
{{< hackcss-formgroup name="poolgroup" >}}
{{< hackcss-label for="pool" text="Mining pool:" />}}
{{< hackcss-select id="pool" name="pool" >}}
<option>moneroocean.stream</option>
<option>etn.nanopool.org</option>
<option>monero.hashvault.pro</option>
<option>minemonero.pro</option>
<option>moneroocean.stream:100</option>
<option>aeon-pool.com</option>
<option>aeon-pool.sytes.net</option>
<option>aeonpool.xyz</option>
<option>trtl.flashpool.club</option>
<option>aeonpool.dreamitsystems.com</option>
<option>clawde.xyz</option>
<option>xmr.prohash.net</option>
<option>aeon.uax.io</option>
<option>aeonpool.net</option>
<option>xmrminerpro.com</option>
<option>minercircle.com</option>
<option>xmrpool.net</option>
<option>supportaeon.com</option>
<option>usxmrpool.com</option>
<option>aeonminingpool.com</option>
<option>supportxmr.com</option>
<option>aeonhash.com</option>
<option>minexmr.com</option>
<option>pooltupi.com</option>
<option>xmrpool.eu</option>
<option>slowandsteady.fun</option>
<option>etn.hashvault.pro</option>
<option>poolmining.org</option>
<option>aeon.rupool.tk</option>
<option>aeon.semipool.com</option>
<option>etn.spacepools.org</option>
<option>osiamining.com</option>
<option>durinsmine.com</option>
<option>dwarfpool.com</option>
<option>arhash.xyz</option>
<option>xmr.nanopool.org</option>
<option>aeon.hashvault.pro</option>
<option>minereasy.com</option>
<option>moneropool.com</option>
<option>aeon.n-engine.com</option>
<option>aeon.sumominer.com</option>
<option>monerohash.com</option>
<option>monero.crypto-pool.fr</option>
{{< /hackcss-select >}}
{{< hackcss-helpblock >}}
Select a {{< external href="https://git.habd.as/comfusion/webminerpool/src/branch/master/server/pools.json" text="supported pool" />}} to mine with.
{{< /hackcss-helpblock >}}
{{< /hackcss-formgroup >}}
{{< hackcss-formgroup name="poolpassgroup" >}}
{{< hackcss-label for="poolpass" text="Password:" />}}
{{< hackcss-textinput type="password" id="poolpass" name="poolpass" >}}
{{< hackcss-helpblock >}}
Password for your pool. Often not needed.
{{< /hackcss-helpblock >}}
{{< /hackcss-formgroup >}}
{{< hackcss-formgroup name="throttlegroup" >}}
{{< hackcss-label for="throttle" text="Throttle:" />}}
{{< hackcss-textinput type="number" id="throttle" name="throttle" placeholder="Use 90 for 10% capacity" step="5" min="70" max="90" >}}
{{< hackcss-helpblock >}}
Override default of 70 (30% capacity).
{{< /hackcss-helpblock >}}
{{< /hackcss-formgroup >}}
{{< hackcss-formgroup name="useridgroup" >}}
{{< hackcss-label for="userid" text="User Id:" />}}
{{< hackcss-textinput type="text" id="userid" name="userid" placeholder="Any string with a length < 200 characters" maxlength="200" >}}
{{< hackcss-helpblock >}}
Combine hash metrics for all users.
{{< /hackcss-helpblock >}}
{{< /hackcss-formgroup >}}
</details>
{{< /hackcss-form >}}
{{< /hackcss-card >}}
Enable debugging to output detailed socket messages from the proxy to the browser console by adding the following to your site config:
```toml
[params.modules.toxic_swamp]
debugging = true
```
</details>
# Internationalization
English translations available for toolbar display:
- Indonesian (id)
- Russian (ru)
- Greek (el)
- German (de)
- Polish (pl)
- Italian (it)
Enable them with module `translations` whitelist:
```toml
[params.modules.toxic_swamp]
translations = ["id", "ru", "el", "de", "pl", "it"] # English translations enabled
```
Use `languageCode` site config to control which is displayed:
```toml
languageCode = "en-US" # English (United States) or English by default
languageCode = "id-ID" # Indonesian (Indonesia) or Indonesian, if available
languageCode = "ru-RU" # Russian (Russia) or Russian, if available
languageCode = "el-GR" # Greek (Greece) or Greek, if available
languageCode = "de-DE" # German (Germany) or German, if available
languageCode = "pl-PL" # Polish (Poland) or Polish, if available
languageCode = "it-IT" # Italian (Italy) or Italian, if available
```
{{< hackcss-alert type="info" >}}
<strong>Note:</strong> Language tag syntax is defined by the <abbr title="Internet Engineering Task Force">IETF</abbr>'s {{< external href="https://tools.ietf.org/html/bcp47" text="BCP 47" />}}.
{{< /hackcss-alert >}}
Modify translations from `inline.jsonld.html` in your site `layouts` directory. If the file doesn't exist yet, copy it from module default:
```sh
mkdir -p layouts/partials/modules/toxic-swamp/ && \
cp themes/toxic-swamp/layouts/partials/modules/toxic-swamp/inline.jsonld.html $_
```
Remove config and customizations to return to module defaults.

74
themes/after-dark/docs/content/module/toxic-swamp/configuration.md Normal file
View File

@@ -0,0 +1,74 @@
+++
title = "Configuration Settings"
description = "Toxic Swamp one-time configuration settings."
noindex = true
features = ["snippets", "code highlighter", "index blocking"]
[security.csp.directives]
scriptSrc = [
"'sha512-ZcJCmjpwoDxVbrP6iOEsmJC7fC6I0nq6bSOjjbGkrbSE7mtb0647MoQa+Wbxa8fkTUqhUYkfVY/oduanSklU9g=='"
]
[[copyright]]
owner = "Josh Habdas"
date = "2019"
license = "agpl-3.0-or-later"
+++
<section class="js-toshow" style="display:none">
{{< hackcss-button type="info" isghost="true" onclick="print()" >}}
<svg viewBox="0 0 32 32" width="16" height="16" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
<path d="M7 25 L2 25 2 9 30 9 30 25 25 25 M7 19 L7 30 25 30 25 19 Z M25 9 L25 2 7 2 7 9 M22 14 L25 14" />
</svg>
{{< /hackcss-button >}}
You may print this page. If you refresh you will lose your settings.
</section>
Add the following to your site config:
<section class="js-tohide">
{{% hackcss-card header="config.toml" %}}[Generate Config](../#config-generator) to view config settings.{{% /hackcss-card %}}
</section>
<section class="js-toshow" style="display:none">
{{< hackcss-card header="config.toml" >}}
{{< highlight toml "linenos=inline,linenostart=36" >}}
[params.modules.toxic_swamp]
enabled = true # Optional, set false to disable module
address = "$address" # Required, public payout address
{{< /highlight >}}
{{< /hackcss-card >}}
</section>
<section class="js-showadvanced" style="display:none">
<p>Additionally add the following below the <code>address</code> setting:</p>
{{< hackcss-card header="config.toml" >}}
{{< highlight toml "linenos=inline,linenostart=39" >}}
proxies = ["proxy-name"] # Required, ordered list of custom proxy names
{{< /highlight >}}
{{< /hackcss-card >}}
<p>And create <code>proxies.toml</code> in your site <code>data</code> directory:</p>
{{< highlight sh >}}
mkdir -p data/modules/toxic_swamp && \
touch data/modules/toxic_swamp/proxies.toml
{{< /highlight >}}
<p>With the following file contents:</p>
{{< hackcss-card header="data/modules/toxic_swamp/proxies.toml" >}}
{{< highlight toml "linenos=inline" >}}
["proxy-name"]
server = "$server" # Required, use ws://localhost:8181 for testing
pool = "$pool" # Required, key for pool registered at the server
password = "$poolpass" # Optional, password for pool you're mining to, if any
{{< /highlight >}}
{{< /hackcss-card >}}
<p>Contact your pool admin for help configuring your proxy for their pool or {{< external href="https://git.habd.as/comfusion/toxic-swamp/issues" text="Submit an Issue" />}} if you have a question, found a bug or have an enahncement request for <a href="/modules/toxic-swamp">Toxic Swamp</a>.</p>
</section>
<section class="js-hideadvanced">
<p>Then rebuild your site to start <a href="../#earning-rewards">Earning Rewards</a>.
</section>

52
themes/after-dark/docs/content/module/voyeur.md Normal file
View File

@@ -0,0 +1,52 @@
+++
title = "Voyeur"
slug = "voyeur"
description = "DIY self-hosted Fathom Analytics add-on module for After Dark."
summary = "DIY self-hosted Fathom Analytics."
categories = ["addon"]
tags = ["module", "analytics", "privacy", "engagement"]
features = ["related content", "snippets", "section menu"]
[[copyright]]
owner = "Josh Habdas"
date = "2019"
license = "agpl-3.0-or-later"
+++
**Fathom Mirror:** {{< external "https://git.habd.as/comfusion/fathom" />}}<br>
**Module Source:** {{< external "https://git.habd.as/comfusion/voyeur" />}}
{{< figure alt="After Dark screenshots"
src="/images/screenshots/module-voyeur-analytics-fs8.png"
caption="Voyeur Analytics Dashboard."
>}}
Please visit the {{< external "https://usefathom.com" "Fathom Website" />}} for interactive product demo.
## Installation
Choose module download source:
- {{< external "https://www.npmjs.com/package/mod-voyeur" />}}
- {{< external "https://www.jsdelivr.com/package/npm/mod-voyeur" />}}
- {{< external "https://git.habd.as/comfusion/voyeur" />}}
Extract module contents into site `themes` directory:
```sh
├── static
└── themes
├── after-dark
└── voyeur
```
Specify module in site config:
{{< highlight toml "linenos=inline,linenostart=6" >}}
# Controls default theme and theme components
theme = [
"voyeur", # sequence before "after-dark"
"after-dark"
]
{{< /highlight >}}
See {{< external href="https://git.habd.as/comfusion/voyeur/src/branch/master/README.md" text="README.md" />}} to confirm you're using the minimum required version of After Dark; and module setup, configuration and usage instructions. If you need help you may {{< external href="https://git.habd.as/comfusion/voyeur/issues" text="Submit an Issue" />}} with your question.

16
themes/after-dark/docs/content/search/_index.md Normal file
View File

@@ -0,0 +1,16 @@
+++
title = "Search" # title of the page
layout = "search" # sets the layout to use
noindex = true # tell robots not to index
[form]
helpblock = "Press <kbd>/</kbd> or <kbd>s</kbd> to modify your search."
hotkeys = ["/", "s"]
[form.input]
placeholder = "uzzy searvh"
disabled = false
[security.csp.directives]
scriptSrc = [
"'sha512-6G7cmlXR4eLBphfUmmEWLEnLWSEtZPdKP2xv7bXZ8D3LReZazwxcwb4tTx2HeCeoAChG5ZCE+UqHmbe3K4xoJg=='",
"'unsafe-eval'"
]
+++

8
themes/after-dark/docs/content/shortcode/_index.md Normal file
View File

@@ -0,0 +1,8 @@
+++
title = "Shortcodes"
description = "Easily create complex interfaces directly within your content."
[[copyright]]
owner = "Josh Habdas"
date = "2019"
license = "agpl-3.0-or-later"
+++

158
themes/after-dark/docs/content/shortcode/alert.md Normal file
View File

File diff suppressed because one or more lines are too long

80
themes/after-dark/docs/content/shortcode/blockquote.md Normal file
View File

@@ -0,0 +1,80 @@
+++
title = "Blockquote"
description = "Create pull quotes with citations and citation links."
categories = ["experience"]
tags = []
html_attributes = []
custom_attributes = []
snippets_used = ["blockquote"]
[[copyright]]
owner = "Josh Habdas"
date = "2019"
license = "agpl-3.0-or-later"
+++
With source:
```html
{{</* blockquote
cite="Mark Twain"
text="The more things are forbidden, the more popular they become."
/*/>}}
```
{{< blockquote
cite="Mark Twain" text="The more things are forbidden, the more popular they become."
/>}}
With anonymous source:
```html
{{</* blockquote
text="Obsessed is a word that the lazy use to describe the dedicated."
/*/>}}
```
{{< blockquote
text="Obsessed is a word that the lazy use to describe the dedicated."
/>}}
With source and citation link:
```html
{{</* blockquote
citelink="https://style.mla.org/urls-some-practical-advice/"
cite="Angela Gibson, URLs: Some Practical Advice"
text="Ensuring the enduring availability and retrievability of a source is not the primary objective of documentation, even though the Internet allows for the retrieval of online works referred to in other online works."
/*/>}}
```
{{< blockquote
citelink="https://style.mla.org/urls-some-practical-advice/"
cite="Angela Gibson, URLs: Some Practical Advice"
text="Ensuring the enduring availability and retrievability of a source is not the primary objective of documentation, even though the Internet allows for the retrieval of online works referred to in other online works."
/>}}
With citation link but no source:
```html
{{</* blockquote
citelink="https://bitly.is/2mkxskj"
text="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
citelink="https://bitly.is/2mkxskj"
text="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."
/>}}
With longer quotations:
```html
{{</* blockquote cite="Erin Cummings" >}}
At the end of the day, you are solely responsible for your success and your failure. And the sooner you realize that, you accept that, and integrate that into your work ethic, you will start being successful. As long as you blame others for the reason you aren't where you want to be, you will always be a failure.
{{< /blockquote */>}}
```
{{< blockquote cite="Erin Cummings" >}}
At the end of the day, you are solely responsible for your success and your failure. And the sooner you realize that, you accept that, and integrate that into your work ethic, you will start being successful. As long as you blame others for the reason you aren't where you want to be, you will always be a failure.
{{< /blockquote >}}

68
themes/after-dark/docs/content/shortcode/button-group.md Normal file
View File

@@ -0,0 +1,68 @@
+++
title = "Button Group"
description = "Layout buttons to fit buttons snugly together."
categories = ["interaction"]
tags = ["controls"]
html_attributes = ["class"]
custom_attributes = ["formactions"]
snippets_used = ["button group", "button", "form"]
notes = [
"update 'snippets' if this content is updated"
]
[[copyright]]
owner = "Josh Habdas"
date = "2019"
license = "agpl-3.0-or-later"
+++
With three [Buttons](../button), one ghosted and one of type info:
```html
{{</* hackcss-buttongroup >}}
{{< hackcss-button text="Left" />}}
{{< hackcss-button type="info" >}}Middle{{< /hackcss-button >}}
{{< hackcss-button text="Right" isghost="true" />}}
{{< /hackcss-buttongroup */>}}
```
{{< hackcss-buttongroup >}}
{{< hackcss-button text="Left" />}}
{{< hackcss-button type="info" >}}Middle{{< /hackcss-button >}}
{{< hackcss-button text="Right" isghost="true" />}}
{{< /hackcss-buttongroup >}}
With three [Buttons](../button) styled using `class` attribute:
```html
<style>.btn-text button::after { content: attr(class) }</style>
{{</* hackcss-buttongroup class="btn-text" >}}
{{< hackcss-button />}}
{{< hackcss-button type="info" />}}
{{< /hackcss-buttongroup */>}}
```
<style>.btn-text button::after { content: attr(class) }</style>
{{< hackcss-buttongroup class="btn-text" >}}
{{< hackcss-button />}}
{{< hackcss-button type="info" />}}
{{< /hackcss-buttongroup >}}
With two [Buttons](../button) inside a [Form](../form) using `formactions` attribute:
```html
{{</* hackcss-form action="/search" >}}
{{< hackcss-textinput type="hidden" name="s" value="button" >}}
{{< hackcss-buttongroup formactions="true" >}}
{{< hackcss-button text="Print" action="javascript:window.print()" />}}
{{< hackcss-button text="Search" type="primary" isghost="true" />}}
{{< /hackcss-buttongroup >}}
{{< /hackcss-form */>}}
```
{{< hackcss-form action="/search" >}}
{{< hackcss-textinput type="hidden" name="s" value="group" >}}
{{< hackcss-buttongroup formactions="true" >}}
{{< hackcss-button text="Print" action="javascript:window.print()" />}}
{{< hackcss-button text="Search" type="primary" isghost="true" />}}
{{< /hackcss-buttongroup >}}
{{< /hackcss-form >}}

153
themes/after-dark/docs/content/shortcode/button.md Normal file
View File

@@ -0,0 +1,153 @@
+++
title = "Button"
description = "Add colorful buttons to forms and pages."
categories = ["experience"]
tags = ["controls"]
html_attributes = ["id", "value", "name", "class", "onclick", "tabindex", "target", "disabled", "form"]
custom_attributes = ["type", "text", "isghost", "isblock", "action", "method"]
snippets_used = ["button", "button group", "throbber", "form", "external"]
[[copyright]]
owner = "Josh Habdas"
date = "2019"
license = "agpl-3.0-or-later"
+++
Different types:
```html
{{</* hackcss-button text="Default" /*/>}}
{{</* hackcss-button text="Primary" type="primary" /*/>}}
{{</* hackcss-button text="Success" type="success" /*/>}}
{{</* hackcss-button text="Info" type="info" /*/>}}
{{</* hackcss-button text="Warning" type="warning" /*/>}}
{{</* hackcss-button text="Error" type="error" /*/>}}
```
{{< hackcss-button text="Default" />}}
{{< hackcss-button text="Primary" type="primary" />}}
{{< hackcss-button text="Success" type="success" />}}
{{< hackcss-button text="Info" type="info" />}}
{{< hackcss-button text="Warning" type="warning" />}}
{{< hackcss-button text="Error" type="error" />}}
Ghost types:
```html
{{</* hackcss-button isghost="true" text="Default" /*/>}}
{{</* hackcss-button isghost="true" text="Primary" type="primary" /*/>}}
{{</* hackcss-button isghost="true" text="Success" type="success" /*/>}}
{{</* hackcss-button isghost="true" text="Info" type="info" /*/>}}
{{</* hackcss-button isghost="true" text="Warning" type="warning" /*/>}}
{{</* hackcss-button isghost="true" text="Error" type="error" /*/>}}
```
{{< hackcss-button isghost="true" text="Default" />}}
{{< hackcss-button isghost="true" text="Primary" type="primary" />}}
{{< hackcss-button isghost="true" text="Success" type="success" />}}
{{< hackcss-button isghost="true" text="Info" type="info" />}}
{{< hackcss-button isghost="true" text="Warning" type="warning" />}}
{{< hackcss-button isghost="true" text="Error" type="error" />}}
Block-level:
```html
{{</* hackcss-button type="primary" isghost="true" isblock="true" text="Block Level Button" /*/>}}
```
{{< hackcss-button type="primary" isghost="true" isblock="true" text="Block Level Button" />}}
Text in body:
```html
{{</* hackcss-button >}}Default{{< /hackcss-button */>}}
{{</* hackcss-button type="primary" >}}<i>HTML</i>{{< /hackcss-button */>}}
{{%/* hackcss-button type="success" %}}~~Markdown~~{{% /hackcss-button */%}}
{{</* hackcss-button isghost="true" text="Comment" >}}Hidden comment{{< /hackcss-button */>}}
```
{{< hackcss-button >}}Default{{< /hackcss-button >}}
{{< hackcss-button type="primary" >}}<i>HTML</i>{{< /hackcss-button >}}
{{% hackcss-button type="success" %}}~~Markdown~~{{% /hackcss-button %}}
{{< hackcss-button isghost="true" text="Comment" >}}Hidden comment{{< /hackcss-button >}}
In [Button Group](../button-group):
```html
{{</* hackcss-buttongroup >}}
{{< hackcss-button isghost="true" type="success" text="Left" >}}
{{< hackcss-button isghost="true" type="success" text="Middle" >}}
{{< hackcss-button isghost="true" type="success" text="Right" >}}
{{< /hackcss-buttongroup */>}}
```
{{< hackcss-buttongroup >}}
{{< hackcss-button isghost="true" type="success" text="Left" />}}
{{< hackcss-button isghost="true" type="success" text="Middle" />}}
{{< hackcss-button isghost="true" type="success" text="Right" />}}
{{< /hackcss-buttongroup >}}
Print preview:
```html
{{</* hackcss-button type="info" isghost="true" onclick="print()" >}}
<svg viewBox="0 0 32 32" width="16" height="16" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
<path d="M7 25 L2 25 2 9 30 9 30 25 25 25 M7 19 L7 30 25 30 25 19 Z M25 9 L25 2 7 2 7 9 M22 14 L25 14" />
</svg>
{{< /hackcss-button */>}}
```
{{< hackcss-button type="info" isghost="true" onclick="print()" >}}
<svg viewBox="0 0 32 32" width="16" height="16" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
<path d="M7 25 L2 25 2 9 30 9 30 25 25 25 M7 19 L7 30 25 30 25 19 Z M25 9 L25 2 7 2 7 9 M22 14 L25 14" />
</svg>
{{< /hackcss-button >}}
[Loading](../throbber) indication:
```html
{{</* hackcss-button type="info" isghost="true" >}}
Loading&hellip; {{< hackcss-throbber >}}
{{< /hackcss-button */>}}
```
{{< hackcss-button type="info" isghost="true" >}}
Loading&hellip; {{< hackcss-throbber >}}
{{< /hackcss-button >}}
[External](../external) navigation:
```html
{{</* external rel="shortlink" href="https://go.habd.as/mavic-air" >}}
{{< hackcss-button type="success" text="Open" />}}
{{< /external */>}}
```
{{< external rel="shortlink" href="https://go.habd.as/mavic-air" >}}
{{< hackcss-button type="success" text="Open" />}}
{{< /external >}}
[Form](../form) control:
```html
{{</* hackcss-form action="javascript:alert('Form Alert')" >}}
{{< hackcss-buttongroup formactions="true" >}}
{{< hackcss-button text="Custom Action" action="javascript:alert('Custom Alert')" isghost="true" type="primary" />}}
{{< hackcss-button disabled="true" isghost="true" text="Disabled" />}}
{{< /hackcss-buttongroup >}}
{{< /hackcss-form */>}}
```
{{< hackcss-form action="javascript:alert('Form Alert')" >}}
{{< hackcss-buttongroup formactions="true" >}}
{{< hackcss-button text="Custom Action" action="javascript:alert('Custom Alert')" isghost="true" type="primary" />}}
{{< hackcss-button disabled="true" isghost="true" text="Disabled" />}}
{{< /hackcss-buttongroup >}}
{{< /hackcss-form >}}
```html
{{</* hackcss-form id="owner" action="javascript:alert('Form Alert')" /*/>}}
{{</* hackcss-button form="owner" text="Form Action" type="primary" isghost="true" /*/>}}
```
{{< hackcss-form id="owner" action="javascript:alert('Form Alert')" />}}
{{< hackcss-button form="owner" text="Form Action" type="primary" isghost="true" />}}

47
themes/after-dark/docs/content/shortcode/card.md Normal file
View File

File diff suppressed because one or more lines are too long

148
themes/after-dark/docs/content/shortcode/cell.md Normal file
View File

@@ -0,0 +1,148 @@
+++
title = "Cell"
description = "Display a responsive cell inside a grid."
categories = ["experience"]
tags = []
html_attributes = ["class"]
custom_attributes = []
snippets_used = ["grid", "card", "button"]
[[copyright]]
owner = "Josh Habdas"
date = "2019"
license = "agpl-3.0-or-later"
+++
Contained by [Grid](../grid) with three columns of equal size:
{{< highlight html "linenos=inline" >}}
{{</* hackcss-grid >}}
{{< hackcss-cell class="-4of12" text="4" />}}
{{< hackcss-cell class="-4of12" text="4" />}}
{{< hackcss-cell class="-4of12" text="4" />}}
{{< /hackcss-grid */>}}
{{< /highlight >}}
{{< hackcss-grid class="margin-reset" >}}
{{< hackcss-cell class="-4of12" text="4" />}}
{{< hackcss-cell class="-4of12" text="4" />}}
{{< hackcss-cell class="-4of12" text="4" />}}
{{< /hackcss-grid >}}
With two columns of odd size:
```html
{{</* hackcss-grid >}}
{{< hackcss-cell class="-4of12" text="4" />}}
{{< hackcss-cell class="-8of12" text="8" />}}
{{< /hackcss-grid */>}}
```
{{< hackcss-grid class="example" >}}
{{< hackcss-cell class="-4of12" text="4" />}}
{{< hackcss-cell class="-8of12" text="8" />}}
{{< /hackcss-grid >}}
With 12 columns:
```html
{{</* hackcss-grid >}}
{{< hackcss-cell class="-1of12" text="1" />}}
{{< hackcss-cell class="-1of12" text="1" />}}
{{< hackcss-cell class="-1of12" text="1" />}}
{{< hackcss-cell class="-1of12" text="1" />}}
{{< hackcss-cell class="-1of12" text="1" />}}
{{< hackcss-cell class="-1of12" text="1" />}}
{{< hackcss-cell class="-1of12" text="1" />}}
{{< hackcss-cell class="-1of12" text="1" />}}
{{< hackcss-cell class="-1of12" text="1" />}}
{{< hackcss-cell class="-1of12" text="1" />}}
{{< hackcss-cell class="-1of12" text="1" />}}
{{< hackcss-cell class="-1of12" text="1" />}}
{{< /hackcss-grid */>}}
```
{{< hackcss-grid >}}
{{< hackcss-cell class="-1of12" text="1" />}}
{{< hackcss-cell class="-1of12" text="1" />}}
{{< hackcss-cell class="-1of12" text="1" />}}
{{< hackcss-cell class="-1of12" text="1" />}}
{{< hackcss-cell class="-1of12" text="1" />}}
{{< hackcss-cell class="-1of12" text="1" />}}
{{< hackcss-cell class="-1of12" text="1" />}}
{{< hackcss-cell class="-1of12" text="1" />}}
{{< hackcss-cell class="-1of12" text="1" />}}
{{< hackcss-cell class="-1of12" text="1" />}}
{{< hackcss-cell class="-1of12" text="1" />}}
{{< hackcss-cell class="-1of12" text="1" />}}
{{< /hackcss-grid >}}
Enclosing [Cards](../card/) with various [Buttons](../button/) inside:
```html
{{</* hackcss-grid >}}
{{< hackcss-cell class="-4of12" >}}
{{< hackcss-card header="Step 1" >}}
{{< hackcss-button type="primary" isblock="true" isghost="true" >}}
<svg id="i-download" viewBox="0 0 32 32" width="24" height="24" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
<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"></path>
</svg>&nbsp;&nbsp;Download
{{< /hackcss-button >}}
{{< /hackcss-card >}}
{{< /hackcss-cell >}}
{{< hackcss-cell class="-4of12" >}}
{{< hackcss-card header="Step 2" >}}
{{< hackcss-button type="info" isblock="true" isghost="true" >}}
<svg id="i-code" aria-labelledby="source-label" viewBox="0 0 32 32" width="24" height="24" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
<path d="M10 9 L3 17 10 25 M22 9 L29 17 22 25 M18 7 L14 27" />
</svg>&nbsp;&nbsp;Install
{{< /hackcss-button >}}
{{< /hackcss-card >}}
{{< /hackcss-cell >}}
{{< hackcss-cell class="-4of12" >}}
{{< hackcss-card header="Step 3" >}}
{{< hackcss-button type="success" isblock="true" isghost="true" >}}
<svg id="i-creditcard" viewBox="0 0 32 32" width="24" height="24" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
<path d="M2 7 L2 25 30 25 30 7 Z M5 18 L9 18 M5 21 L11 21" />
<path d="M2 11 L2 13 30 13 30 11 Z" fill="currentColor" />
</svg>&nbsp;&nbsp;Profit
{{< /hackcss-button >}}
{{< /hackcss-card >}}
{{< /hackcss-cell >}}
{{< /hackcss-grid */>}}
```
{{< hackcss-grid >}}
{{< hackcss-cell class="-4of12" >}}
{{< hackcss-card header="Step 1" >}}
{{< hackcss-button type="primary" isblock="true" isghost="true" >}}
<svg id="i-download" viewBox="0 0 32 32" width="24" height="24" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
<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"></path>
</svg>&nbsp;&nbsp;Download
{{< /hackcss-button >}}
{{< /hackcss-card >}}
{{< /hackcss-cell >}}
{{< hackcss-cell class="-4of12" >}}
{{< hackcss-card header="Step 2" >}}
{{< hackcss-button type="info" isblock="true" isghost="true" >}}
<svg id="i-code" aria-labelledby="source-label" viewBox="0 0 32 32" width="24" height="24" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
<path d="M10 9 L3 17 10 25 M22 9 L29 17 22 25 M18 7 L14 27" />
</svg>&nbsp;&nbsp;Install
{{< /hackcss-button >}}
{{< /hackcss-card >}}
{{< /hackcss-cell >}}
{{< hackcss-cell class="-4of12" >}}
{{< hackcss-card header="Step 3" >}}
{{< hackcss-button type="success" isblock="true" isghost="true" >}}
<svg id="i-creditcard" viewBox="0 0 32 32" width="24" height="24" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
<path d="M2 7 L2 25 30 25 30 7 Z M5 18 L9 18 M5 21 L11 21" />
<path d="M2 11 L2 13 30 13 30 11 Z" fill="currentColor" />
</svg>&nbsp;&nbsp;Profit
{{< /hackcss-button >}}
{{< /hackcss-card >}}
{{< /hackcss-cell >}}
{{< /hackcss-grid >}}
See the {{< external text="hackcss" href="https://hackcss.egoist.moe/" />}} docs for full list of flexbox modifiers available. Reference the following resources for additional help:
- {{< external "https://philipwalton.github.io/solved-by-flexbox/" "Solved by Flexbox" />}} for cleaner, hack-free CSS
- {{< external "https://www.w3.org/TR/css-flexbox-1/" "CSS Flexible Box Layout Module" />}} for Level 1 spec on W3C

105
themes/after-dark/docs/content/shortcode/external.md Normal file
View File

@@ -0,0 +1,105 @@
+++
title = "External"
description = "Create links with external icon and custom behavior."
categories = ["navigation"]
tags = ["links", "security", "privacy"]
html_attributes = ["href", "class", "referrerpolicy", "target", "type", "rel"]
custom_attributes = ["text", "trusted"]
snippets_used = ["external", "button", "alert"]
[[copyright]]
owner = "Josh Habdas"
date = "2019"
license = "agpl-3.0-or-later"
+++
Basic usage:
```html
{{</* external href="https://after-dark.habd.as" text="After Dark" /*/>}}
{{</* external href="https://after-dark.habd.as" /*/>}}
```
{{< external href="https://after-dark.habd.as" text="After Dark" />}}
{{< external href="https://after-dark.habd.as" />}}
Shorthand usage:
```term
{{</* external "https://after-dark.habd.as" "After Dark" /*/>}}
{{</* external href="https://go.habd.as/after-dark" /*/>}}
{{</* external "wss://fs1.habd.as:80" /*/>}}
```
{{< external "https://after-dark.habd.as" "After Dark" />}}
{{< external href="https://go.habd.as/after-dark" />}}
{{< external "wss://fs1.habd.as:80" />}}
{{< hackcss-alert type="info" >}}
<strong>Note:</strong> URIs such as those using the <code>wss</code> scheme may be considered unsafe by the {{< external "https://golang.org/pkg/html/template/" "Go template package" />}}. Learn more in the package {{< external "https://golang.org/pkg/html/template/#hdr-Security_Model" "Security Model" />}}.
{{< /hackcss-alert >}}
With a trusted URL:
```html
{{</* external trusted="true" href="wss://fs1.habd.as:80" /*/>}}
{{</* external trusted="true" href="irc://chat.freenode.net:6667/after-dark" /*/>}}
```
{{< external trusted="true" href="wss://fs1.habd.as:80" />}}
{{< external trusted="true" href="irc://chat.freenode.net:6667/after-dark" />}}
With external link styling removed:
```html
{{</* external rel="noopener" href="https://blog.domain.example" /*/>}}
```
{{< external rel="noopener" href="https://blog.domain.example" />}}
With internal link opening in a new window:
```html
{{</* external href="/404.html" text="Error Page" /*/>}}
```
{{< external href="/404.html" text="Error Page" />}}
With structured data type:
```html
{{</* external itemtype="significantLink" href="https://habd.as" /*/>}}
```
{{< external itemtype="significantLink" href="https://habd.as" />}}
With site-wide [Referrer Policy](/feature/referrer-policy) overridden:
```html
{{</* external referrerpolicy="unsafe-url" href="http://goo.gl" /*/>}}
```
{{< external referrerpolicy="unsafe-url" href="http://goo.gl" />}}
With markdown image and link styling removed:
```markdown
{{%/* external rel="next" href="https://source.unsplash.com/collection/983219/2160x1440" %}}
![Example image](https://source.unsplash.com/collection/983219/1080x720 "View Random Image Enlarged")
{{% /external */%}}
```
{{% external rel="next" href="https://source.unsplash.com/collection/983219/1080x720" %}}
![Example image](https://source.unsplash.com/collection/983219/1080x720 "View Random Image Enlarged")
{{% /external %}}
With interactive [Button](../button) to run a [Fuzzy Search](/feature/fuzzy-search):
```html
{{</* external rel="search" target="_self" href="/search/?s=button" >}}
{{< hackcss-button type="primary" text="Search" />}}
{{< /external */>}}
```
{{< external rel="search" target="_self" href="/search/?s=button" >}}
{{< hackcss-button type="primary" text="Search" />}}
{{< /external >}}

46
themes/after-dark/docs/content/shortcode/figure.md Normal file
View File

@@ -0,0 +1,46 @@
+++
title = "Figure"
description = "Load images progressively with blurry placeholders."
categories = ["experience"]
tags = ["performance", "images", "graphics"]
html_attributes = ["class", "alt", "src"]
custom_attributes = ["lqipsrc", "caption", "link", "linktarget", "attr", "attrlink", "title"]
snippets_used = ["external"]
notes = [
"review 'lazy-loading' if this page is modified"
]
[[copyright]]
owner = "Josh Habdas"
date = "2019"
license = "agpl-3.0-or-later"
+++
With progressive image placeholder:
```html
{{</* figure
alt="Artistic map"
src="/images/watercolor_pTIyYTqAlF8_w1440h700.jpeg"
lqipsrc="/images/watercolor_pTIyYTqAlF8_w936h455.jpeg"
title="Map of Bali in Watercolor"
attr="Stamen Design"
attrlink="https://maps.stamen.com/"
*/>}}
```
{{< figure
alt="Artistic map"
src="/images/watercolor_pTIyYTqAlF8_w936h455.jpeg"
lqipsrc="/images/watercolor_pTIyYTqAlF8_w1440h700.jpeg"
title="Map of Bali in Watercolor"
attr="Stamen Design"
attrlink="https://maps.stamen.com/"
>}}
Above as a [Snippet](/feature/snippets/) used in a [Custom Layout](/feature/custom-layouts/):
```go-html-template
{{ partial "components/figure.html" (dict "alt" "Artistic map" "src" "/images/watercolor_pTIyYTqAlF8_w936h455.jpeg" "lqipsrc" "/images/watercolor_pTIyYTqAlF8_w1440h700.jpeg" "title" "Map of Bali in Watercolor" "attr" "Stamen Design" "attrlink" "https://maps.stamen.com/") }}
```
See {{< external href="https://gohugo.io/content-management/shortcodes/#figure" text="Figures in Hugo" />}} for Hugo-specific implementation.

73
themes/after-dark/docs/content/shortcode/form-group.md Normal file
View File

@@ -0,0 +1,73 @@
+++
title = "Form Group"
description = "Use with Label to visualize control validation states."
categories = ["experience"]
tags = ["form"]
html_attributes = ["disabled", "form", "name", "class", "legend", "body"]
custom_attributes = ["hastextarea", "state"]
snippets_used = ["label", "text input", "text area", "help block"]
[[copyright]]
owner = "Josh Habdas"
date = "2019"
license = "agpl-3.0-or-later"
+++
[Label](../label) states with [Text Input](../text-input):
```html
{{</* hackcss-formgroup >}}
{{< hackcss-label for="default" text="Default:" />}}
{{< hackcss-textinput id="default" >}}
{{< /hackcss-formgroup */>}}
{{</* hackcss-formgroup state="success" >}}
{{< hackcss-label for="success" text="Success:" />}}
{{< hackcss-textinput id="success" >}}
{{< /hackcss-formgroup */>}}
{{</* hackcss-formgroup state="warning" >}}
{{< hackcss-label for="warning" text="Warning:" />}}
{{< hackcss-textinput id="warning" >}}
{{< /hackcss-formgroup */>}}
{{</* hackcss-formgroup state="error" >}}
{{< hackcss-label for="error" text="Error:" />}}
{{< hackcss-textinput id="error" >}}
{{< /hackcss-formgroup */>}}
```
{{< hackcss-formgroup >}}
{{< hackcss-label for="default" text="Default:" />}}
{{< hackcss-textinput id="default" >}}
{{< /hackcss-formgroup >}}
{{< hackcss-formgroup state="success" >}}
{{< hackcss-label for="success" text="Success:" />}}
{{< hackcss-textinput id="success" >}}
{{< /hackcss-formgroup >}}
{{< hackcss-formgroup state="warning" >}}
{{< hackcss-label for="warning" text="Warning:" />}}
{{< hackcss-textinput id="warning" >}}
{{< /hackcss-formgroup >}}
{{< hackcss-formgroup state="error" >}}
{{< hackcss-label for="error" text="Error:" />}}
{{< hackcss-textinput id="error" >}}
{{< /hackcss-formgroup >}}
Disabling [Label](../label) and disabled [Text Area](../text-area) with [Help Block](../help-block):
```html
{{</* hackcss-formgroup hastextarea="true" disabled="true" >}}
{{< hackcss-helpblock >}}<strong>Sorry! Guestbook offline…</strong>{{< /hackcss-helpblock >}}
{{< hackcss-label for="message" text="Message:" />}}
{{< hackcss-textarea id="message" rows="10" >}}
{{< /hackcss-formgroup */>}}
```
{{< hackcss-formgroup hastextarea="true" disabled="true" >}}
{{< hackcss-helpblock >}}<strong>Sorry! Guestbook offline…</strong>{{< /hackcss-helpblock >}}
{{< hackcss-label for="message" text="Message:" />}}
{{< hackcss-textarea id="message" rows="10" >}}
{{< /hackcss-formgroup >}}

100
themes/after-dark/docs/content/shortcode/form.md Normal file
View File

@@ -0,0 +1,100 @@
+++
title = "Form"
description = "Collect, validate and handle user input."
categories = ["experience"]
tags = ["controls"]
html_attributes = ["id", "name", "accept-charset", "action", "enctype", "target", "novalidate", "method", "class", "autocomplete"]
custom_attributes = []
snippets_used = ["help block", "button", "alert", "throbber", "label", "form group", "form", "text input"]
[[copyright]]
owner = "Josh Habdas"
date = "2019"
license = "agpl-3.0-or-later"
+++
With auto-focused [Text Input](../text-input) requesting a new email address:
```html
{{</* hackcss-form autocomplete="disabled" >}}
{{< hackcss-textinput autofocus="true" type="email" placeholder="Please change your email…" >}}
{{< /hackcss-form */>}}
```
{{< hackcss-form autocomplete="disabled" >}}
{{< hackcss-textinput autofocus="true" type="email" placeholder="Please change your email…" >}}
{{< /hackcss-form >}}
With [Text Input](../text-input) and [Label](../label) inside [Form Group](../form-group) running [Fuzzy Search](/feature/fuzzy-search) in new window:
```html
{{</* hackcss-form id="search" action="/search/" target="_blank" */>}}
{{</* hackcss-formgroup >}}
{{< hackcss-label for="query" text="Search query:" />}}
{{< hackcss-textinput id="query" type="search" name="s" form="search" >}}
{{< /hackcss-formgroup */>}}
```
{{< hackcss-form id="search" action="/search" target="_blank" />}}
{{< hackcss-formgroup >}}
{{< hackcss-label for="query" text="Search query:" />}}
{{< hackcss-textinput id="query" type="search" name="s" form="search" >}}
{{< /hackcss-formgroup >}}
Two forms with a [Button](../button) and [Text Input](../text-input) inside [Alert](../alert) with [Throbber](../throbber):
```html
{{</* hackcss-alert type="info" >}}
{{< hackcss-form id="throttle" method="post" action="/throttle" />}}
{{< hackcss-form id="choke" novalidate="true" />}}
{{< hackcss-button type="primary" form="choke" text="Doh!" disabled="true" />}}
This one doesn't actually do anything… {{< hackcss-throbber >}}
{{< hackcss-textinput type="hidden" name="speed" value="80" form="throttle" >}}
{{< /hackcss-alert */>}}
```
{{< hackcss-alert type="info" >}}
{{< hackcss-form id="throttle" method="post" action="/throttle" />}}
{{< hackcss-form id="choke" novalidate="true" />}}
{{< hackcss-button type="primary" form="choke" text="Doh!" disabled="true" />}}
This one doesn't actually do anything… {{< hackcss-throbber >}}
{{< hackcss-textinput type="hidden" name="speed" value="80" form="throttle" >}}
{{< /hackcss-alert >}}
With [Form Group](../form-group), [Label](../label), required and validated [Text Input](../text-input) and [Help Block](../help-block):
```html
{{</* hackcss-form name="validate" action="/validate" >}}
{{< hackcss-formgroup name="integrity" >}}
{{< hackcss-label for="digest" >}}
<abbr title="Secure Hash Algorithm">SHA-512</abbr> Digest:
{{< /hackcss-label >}}
{{< hackcss-textinput
required="true"
autofocus="true"
autocomplete="off"
type="text" id="digest" name="digest"
pattern="^(?:[A-Za-z0-9+/]{4})*(?:[A-Za-z0-9+/]{2}==|[A-Za-z0-9+/]{3}=)?$" >}}
{{< hackcss-helpblock >}}
Submit with digest to validate installation.
<noscript>JavaScript must be enabled for proper validation.</noscript>
{{< /hackcss-helpblock >}}
{{< /hackcss-formgroup >}}
{{< /hackcss-form */>}}
```
{{< hackcss-form name="validate" action="/validate" >}}
{{< hackcss-formgroup name="integrity" >}}
{{< hackcss-label for="digest" >}}
<abbr title="Secure Hash Algorithm">SHA-512</abbr> Digest:
{{< /hackcss-label >}}
{{< hackcss-textinput
required="true"
autocomplete="off"
type="text" id="digest" name="digest"
pattern="^(?:[A-Za-z0-9+/]{4})*(?:[A-Za-z0-9+/]{2}==|[A-Za-z0-9+/]{3}=)?$" >}}
{{< hackcss-helpblock >}}
Submit with digest to validate installation.
<noscript>JavaScript must be enabled for proper validation.</noscript>
{{< /hackcss-helpblock >}}
{{< /hackcss-formgroup >}}
{{< /hackcss-form >}}

176
themes/after-dark/docs/content/shortcode/grid.md Normal file
View File

@@ -0,0 +1,176 @@
+++
title = "Grid"
description = "Display a responsive grid with cells."
categories = ["experience"]
tags = []
html_attributes = ["class"]
custom_attributes = []
snippets_used = ["cell", "card", "button"]
[[copyright]]
owner = "Josh Habdas"
date = "2019"
license = "agpl-3.0-or-later"
+++
Containing three [Cell](../cell) of equal size:
{{< highlight html "linenos=inline" >}}
{{</* hackcss-grid >}}
{{< hackcss-cell class="-4of12" text="4" />}}
{{< hackcss-cell class="-4of12" text="4" />}}
{{< hackcss-cell class="-4of12" text="4" />}}
{{< /hackcss-grid */>}}
{{< /highlight >}}
{{< hackcss-grid class="unset-margin" >}}
{{< hackcss-cell class="-4of12" text="4" />}}
{{< hackcss-cell class="-4of12" text="4" />}}
{{< hackcss-cell class="-4of12" text="4" />}}
{{< /hackcss-grid >}}
With two columns of odd size:
```html
{{</* hackcss-grid >}}
{{< hackcss-cell class="-4of12" text="4" />}}
{{< hackcss-cell class="-8of12" text="8" />}}
{{< /hackcss-grid */>}}
```
{{< hackcss-grid class="example" >}}
{{< hackcss-cell class="-4of12" text="4" />}}
{{< hackcss-cell class="-8of12" text="8" />}}
{{< /hackcss-grid >}}
With 12 columns:
```html
{{</* hackcss-grid >}}
{{< hackcss-cell class="-1of12" text="1" />}}
{{< hackcss-cell class="-1of12" text="1" />}}
{{< hackcss-cell class="-1of12" text="1" />}}
{{< hackcss-cell class="-1of12" text="1" />}}
{{< hackcss-cell class="-1of12" text="1" />}}
{{< hackcss-cell class="-1of12" text="1" />}}
{{< hackcss-cell class="-1of12" text="1" />}}
{{< hackcss-cell class="-1of12" text="1" />}}
{{< hackcss-cell class="-1of12" text="1" />}}
{{< hackcss-cell class="-1of12" text="1" />}}
{{< hackcss-cell class="-1of12" text="1" />}}
{{< hackcss-cell class="-1of12" text="1" />}}
{{< /hackcss-grid */>}}
```
{{< hackcss-grid >}}
{{< hackcss-cell class="-1of12" text="1" />}}
{{< hackcss-cell class="-1of12" text="1" />}}
{{< hackcss-cell class="-1of12" text="1" />}}
{{< hackcss-cell class="-1of12" text="1" />}}
{{< hackcss-cell class="-1of12" text="1" />}}
{{< hackcss-cell class="-1of12" text="1" />}}
{{< hackcss-cell class="-1of12" text="1" />}}
{{< hackcss-cell class="-1of12" text="1" />}}
{{< hackcss-cell class="-1of12" text="1" />}}
{{< hackcss-cell class="-1of12" text="1" />}}
{{< hackcss-cell class="-1of12" text="1" />}}
{{< hackcss-cell class="-1of12" text="1" />}}
{{< /hackcss-grid >}}
Enclosing [Cards](../card/) with various [Buttons](../button/) inside:
```html
{{</* hackcss-grid >}}
{{< hackcss-cell class="-4of12" >}}
{{< hackcss-card header="Step 1" >}}
{{< hackcss-button type="primary" isblock="true" isghost="true" >}}
<svg id="i-download" viewBox="0 0 32 32" width="24" height="24" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
<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"></path>
</svg>&nbsp;&nbsp;Download
{{< /hackcss-button >}}
{{< /hackcss-card >}}
{{< /hackcss-cell >}}
{{< hackcss-cell class="-4of12" >}}
{{< hackcss-card header="Step 2" >}}
{{< hackcss-button type="info" isblock="true" isghost="true" >}}
<svg id="i-code" aria-labelledby="source-label" viewBox="0 0 32 32" width="24" height="24" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
<path d="M10 9 L3 17 10 25 M22 9 L29 17 22 25 M18 7 L14 27" />
</svg>&nbsp;&nbsp;Install
{{< /hackcss-button >}}
{{< /hackcss-card >}}
{{< /hackcss-cell >}}
{{< hackcss-cell class="-4of12" >}}
{{< hackcss-card header="Step 3" >}}
{{< hackcss-button type="success" isblock="true" isghost="true" >}}
<svg id="i-creditcard" viewBox="0 0 32 32" width="24" height="24" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
<path d="M2 7 L2 25 30 25 30 7 Z M5 18 L9 18 M5 21 L11 21" />
<path d="M2 11 L2 13 30 13 30 11 Z" fill="currentColor" />
</svg>&nbsp;&nbsp;Profit
{{< /hackcss-button >}}
{{< /hackcss-card >}}
{{< /hackcss-cell >}}
{{< /hackcss-grid */>}}
```
{{< hackcss-grid >}}
{{< hackcss-cell class="-4of12" >}}
{{< hackcss-card header="Step 1" >}}
{{< hackcss-button type="primary" isblock="true" isghost="true" >}}
<svg id="i-download" viewBox="0 0 32 32" width="24" height="24" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
<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"></path>
</svg>&nbsp;&nbsp;Download
{{< /hackcss-button >}}
{{< /hackcss-card >}}
{{< /hackcss-cell >}}
{{< hackcss-cell class="-4of12" >}}
{{< hackcss-card header="Step 2" >}}
{{< hackcss-button type="info" isblock="true" isghost="true" >}}
<svg id="i-code" aria-labelledby="source-label" viewBox="0 0 32 32" width="24" height="24" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
<path d="M10 9 L3 17 10 25 M22 9 L29 17 22 25 M18 7 L14 27" />
</svg>&nbsp;&nbsp;Install
{{< /hackcss-button >}}
{{< /hackcss-card >}}
{{< /hackcss-cell >}}
{{< hackcss-cell class="-4of12" >}}
{{< hackcss-card header="Step 3" >}}
{{< hackcss-button type="success" isblock="true" isghost="true" >}}
<svg id="i-creditcard" viewBox="0 0 32 32" width="24" height="24" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
<path d="M2 7 L2 25 30 25 30 7 Z M5 18 L9 18 M5 21 L11 21" />
<path d="M2 11 L2 13 30 13 30 11 Z" fill="currentColor" />
</svg>&nbsp;&nbsp;Profit
{{< /hackcss-button >}}
{{< /hackcss-card >}}
{{< /hackcss-cell >}}
{{< /hackcss-grid >}}
Aligning three [SVG Favicons]({{< relref "svg-favicon" >}}) using `-around` modifier:
```html
{{</* hackcss-grid class="-around" >}}
{{< hackcss-cell class="-2of12" >}}
<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">
{{< /hackcss-cell >}}
{{< hackcss-cell class="-2of12" >}}
<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">
{{< /hackcss-cell >}}
{{< hackcss-cell class="-2of12" >}}
<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">
{{< /hackcss-cell >}}
{{< /hackcss-grid */>}}
```
{{< hackcss-grid class="-around" >}}
{{< hackcss-cell class="-2of12" >}}
<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">
{{< /hackcss-cell >}}
{{< hackcss-cell class="-2of12" >}}
<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">
{{< /hackcss-cell >}}
{{< hackcss-cell class="-2of12" >}}
<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">
{{< /hackcss-cell >}}
{{< /hackcss-grid >}}
See the {{< external text="hackcss" href="https://hackcss.egoist.moe/" />}} docs for full list of flexbox modifiers available. Reference the following resources for additional help:
- {{< external "https://philipwalton.github.io/solved-by-flexbox/" "Solved by Flexbox" />}} for cleaner, hack-free CSS
- {{< external "https://www.w3.org/TR/css-flexbox-1/" "CSS Flexible Box Layout Module" />}} for Level 1 spec on W3C

44
themes/after-dark/docs/content/shortcode/help-block.md Normal file
View File

@@ -0,0 +1,44 @@
+++
title = "Help Block"
description = "Combine with form controls to guide user input."
categories = ["experience"]
tags = []
html_attributes = ["class"]
custom_attributes = ["text"]
snippets_used = ["form group", "text input"]
[[copyright]]
owner = "Josh Habdas"
date = "2019"
license = "agpl-3.0-or-later"
+++
Plain or formatted text:
```html
{{</* hackcss-helpblock text="Plain text Help Block" /*/>}}
{{</* hackcss-helpblock >}}<i>Italicized HTML Help Block</i>{{< /hackcss-helpblock */>}}
{{%/* hackcss-helpblock %}}**Bold Markdown Help Block**{{% /hackcss-helpblock */%}}
```
{{< hackcss-helpblock text="Plain text Help Block" />}}
{{< hackcss-helpblock >}}<i>Italicized HTML Help Block</i>{{< /hackcss-helpblock >}}
{{% hackcss-helpblock %}}**Bold Markdown Help Block**{{% /hackcss-helpblock %}}
Used above and below [Text Input](../text-input) with `class` attribute:
```html
{{</* hackcss-formgroup >}}
{{< hackcss-helpblock >}}
<strong>Enter a <em>secure</em> password below:</strong>
{{< /hackcss-helpblock >}}
{{< hackcss-textinput type="password" minlength="27" >}}
{{< hackcss-helpblock class="muted" text="Min. 27 chars" />}}
{{< /hackcss-formgroup */>}}
```
{{< hackcss-formgroup >}}
{{< hackcss-helpblock >}}
<strong>Enter a <em>secure</em> password below:</strong>
{{< /hackcss-helpblock >}}
{{< hackcss-textinput type="password" minlength="27" >}}
{{< hackcss-helpblock class="muted" text="Min. 27 chars" />}}
{{< /hackcss-formgroup >}}

Some files were not shown because too many files have changed in this diff Show More