+++
title = "After Dark"
description = "After Dark is free and open-source software you can use to create a website, blog or app."
images = [
  "https://after-dark.habd.as/images/screenshots/example-landing-page-fs8.png"
]
+++

<section class="grid logo">
  <div class="cell -12of12">
    <svg class="shaded animated" viewBox="0 0 46 45" width="92" height="90" xmlns="http://www.w3.org/2000/svg">
      <title>After Dark</title>
      <path d="M.708 45L23 .416 45.292 45H.708zM35 38L23 19 11 38h24z" fill="#000"/>
    </svg>
  </div>
</section>

<section class="grid tagline">
  <div class="cell -12of12">
    <p>After Dark is free and open-source software you can use to create a website, blog or app. Utilize the world's fastest framework for building websites and design your entire site right inside the terminal.</p>
  </div>
</section>

<section class="install cta">
  {{< 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;Quick Install
    {{< /hackcss-button >}}
  {{< /hackcss-form >}}
</section>

<section class="hero">
  {{< figure alt="After Dark screenshots" src="/images/minimal-mac_2400x1800-fs8.png" lqipsrc="/images/minimal-mac_800x600-fs8.png" >}}
</section>

<section id="feature-workflow" class="capabilities">
  <svg class="i-options" viewBox="0 0 32 32" width="32" height="32" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
    <path d="M28 6 L4 6 M28 16 L4 16 M28 26 L4 26 M24 3 L24 9 M8 13 L8 19 M20 23 L20 29" />
  </svg>
  <h2>Streamlined Workflow</h2>
  <table>
    <caption>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:</caption>
    <tr>
      <th scope="col" width="25%">Features</th>
      <th scope="col" width="25%">Modules</th>
      <th scope="col" width="25%">Shortcodes</th>
      <th scope="col" width="25%">Extras</th>
    </tr>
    <tr>
      <td><a href="./feature/">33</a></td>
      <td><a href="./module/">4</a></td>
      <td><a href="./shortcode/">26</a></td>
      <td><a href="./extra/">1</a></td>
    </tr>
  </table>
</section>

<section id="feature-speed" class="feature">
  <svg class="i-lightning" viewBox="0 0 32 32" width="32" height="32" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
    <path d="M18 13 L26 2 8 13 14 19 6 30 24 19 Z" />
  </svg>
  <h2>Unparalleled Speed</h2>
  <p>With {{< external text="0.615s average" href="https://forestry.io/blog/hugo-vs-jekyll-benchmark/" />}} builds and <strong><i>decisecond</i> page loads</strong> you could conceivably develop and serve your content from an {{< external "https://amzn.to/2Wx7xJk" "ODROID" />}} in space.</p>
  <nav><p>
    <a href="/feature/fetch-injection/">Fetch Inject</a> |
    <a href="/feature/lazy-loading/">Lazy Loading</a> |
    <a target="_blank" rel="external noopener nofollow" href="https://tools.pingdom.com/#5a399f9666400000">Benchmark</a>
  </p></nav>
</section>

<section id="feature-graphics" class="feature">
  <svg class="i-photo" viewBox="0 0 32 32" width="32" height="32" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
    <path d="M20 24 L12 16 2 26 2 2 30 2 30 24 M16 20 L22 14 30 22 30 30 2 30 2 24" />
    <circle cx="10" cy="9" r="3" />
  </svg>
  <h2>Advanced Graphics</h2>
  <p>Add high-resolution, responsive images with <strong>low-quality image placeholders</strong> and <strong>engaging visual effects</strong> without even touching an image editor.</p>
  <nav><p>
    <a href="/shortcode/figure/">Figures</a> |
    <a href="/feature/post-images/">Post Images</a> |
    <a href="/module/hall-of-mirrors/">Galleries</a> |
    <a href="/module/fractal-forest/">BPG</a>
  </p></nav>
</section>

<section id="feature-rewards" class="feature">
  <svg class="i-creditcard" viewBox="0 0 32 32" width="32" height="32" 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>
  <h2 style="margin-bottom:0.2rem">Rewards System</h2>
  <small><i style="color:lime">(Now in Beta!)</i></small>
  <p>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.</p>
  <nav><p>
    <a href="/module/toxic-swamp/#installation">Installation</a> |
    <a href="/module/toxic-swamp/#earning-rewards">Earning Rewards</a>
    <a href="/module/toxic-swamp/">Learn More</a>
  </p></nav>
</section>

<section id="feature-search" class="feature">
  <svg class="i-search" viewBox="0 0 32 32" width="32" height="32" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
    <circle cx="14" cy="14" r="12" />
    <path d="M23 23 L30 30"  />
  </svg>
  <h2>Fuzzy Search</h2>
  <p>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>.</p>
  <nav><p>
    <a href="/search/?s=lay%20load">Try It Now</a> |
    <a href="/feature/fuzzy-search/">More Detail</a>
  </p></nav>
</section>

<section id="feature-customize" class="feature">
  <svg class="i-compose" viewBox="0 0 32 32" width="32" height="32" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
    <path d="M27 15 L27 30 2 30 2 5 17 5 M30 6 L26 2 9 19 7 25 13 23 Z M22 6 L26 10 Z M9 19 L13 23 Z" />
  </svg>
  <h2>Easily Customized</h2>
  <p>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.</p>
  <nav><p>
    <a href="/feature/skin-styles/">Skins</a> |
    <a href="/feature/custom-layouts/">Layouts</a> |
    <a href="/feature/custom-styles/">Styles</a> |
    <a href="/feature/svg-favicon/">Favicons</a>
  </p></nav>
</section>

<section id="feature-security" class="feature">
  <svg class="i-lock" viewBox="0 0 32 32" width="32" height="32" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
    <path d="M5 15 L5 30 27 30 27 15 Z M9 15 C9 9 9 5 16 5 23 5 23 9 23 15 M16 20 L16 23" />
    <circle cx="16" cy="24" r="1" />
  </svg>
  <h2>Securely Designed</h2>
  <p>Verify the <i>authenticity</i> of your installation using secure cryptographic hashes and use CSP, SRI and Referrer Policy to <strong>lock down your content</strong>.</p>
  <nav><p>
    <a href="/feature/release-hashes/">Release Hashes</a> |
    <a href="/feature/content-security-policy/">CSP</a> |
    <a href="/feature/referrer-policy/">Referrer Policy</a>
  </p></nav>
</section>

<section id="feature-privacy" class="feature">
  <svg class="i-eye" viewBox="0 0 32 32" width="32" height="32" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
    <circle cx="17" cy="15" r="1" />
    <circle cx="16" cy="16" r="6" />
    <path d="M2 16 C2 16 7 6 16 6 25 6 30 16 30 16 30 16 25 26 16 26 7 26 2 16 2 16 Z" />
  </svg>
  <h2>Privacy Focused</h2>
  <p>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>.</p>
  <nav><p>
    <a href="/feature/air-gapping/">Air Gapping</a> |
    <a href="/feature/air-gapping/#ephemeral-hosting-with-end-to-end-encryption">Hosting</a> |
    <a href="/feature/referrer-policy/">Referrer Policy</a>
  </p></nav>
</section>

<footer>
  <section class="grid cta">
    <div class="cell -2of12">
      {{< external rel="prefetch" target="_self" itemtype="significantLink" href="https://git.habd.as/comfusion/after-dark/activity" >}}
        <svg id="activity" aria-labelledby="activity-label" class="i-activity" viewBox="0 0 32 32" width="32" height="32" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
          <path d="M4 16 L11 16 14 29 18 3 21 16 28 16" />
        </svg>
        <small role="tooltip" id="activity-label">Activity</small>
      {{< /external >}}
    </div>
    <div class="cell -2of12">
      {{< external rel="prefetch" target="_self" itemtype="significantLink" href="https://git.habd.as/comfusion/after-dark/" >}}
        <svg id="source" aria-labelledby="source-label" class="i-code" viewBox="0 0 32 32" width="32" height="32" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
          <path d="M10 9 L3 17 10 25 M22 9 L29 17 22 25 M18 7 L14 27" />
        </svg>
        <small role="tooltip" id="source-label">Source</small>
      {{< /external >}}
    </div>
    <div class="cell -2of12">
      {{< external rel="noopener" itemtype="significantLink" href="https://t.me/comfusion" >}}
        <svg id="telegram" aria-labelledby="telegram-label" class="i-send" viewBox="0 0 32 32" width="32" height="32" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
          <path d="M2 16 L30 2 16 30 12 20 Z M30 2 L12 20" />
        </svg>
        <small role="tooltip" id="telegram-label">Telegram</small>
      {{< /external >}}
    </div>
    <div class="cell -2of12">
      {{< external title="Download" rel="prefetch" target="_self" itemtype="significantLink" href="https://git.habd.as/comfusion/after-dark/releases" >}}
        <svg id="download" aria-labelledby="download-label" class="i-download" viewBox="0 0 32 32" width="32" height="32" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
          <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" />
        </svg>
        <small role="tooltip" id="download-label">Download</small>
      {{< /external >}}
    </div>
  </section>

  <section class="grid license">
    <div class="cell -12of12">
      {{< external rel="noopener license" href="https://choosealicense.com/licenses/wtfpl/" >}}
        <img width="48" src="/images/wtfpl.svg" alt="WTFPL logo" title="After Dark is yours, gratis and without restriction under the WTFPL.">
      {{< /external >}}
    </div>
  </section>

</footer>
