stilde/README.md

# [stilde][stilde_repo]

![Bash](https://img.shields.io/badge/bash-1f425f.svg?style=for-the-badge&logo=image%2Fpng%3Bbase64%2CiVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw%2FeHBhY2tldCBiZWdpbj0i77u%2FIiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8%2BIDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTExIDc5LjE1ODMyNSwgMjAxNS8wOS8xMC0wMToxMDoyMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTUgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOkE3MDg2QTAyQUZCMzExRTVBMkQxRDMzMkJDMUQ4RDk3IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOkE3MDg2QTAzQUZCMzExRTVBMkQxRDMzMkJDMUQ4RDk3Ij4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6QTcwODZBMDBBRkIzMTFFNUEyRDFEMzMyQkMxRDhEOTciIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6QTcwODZBMDFBRkIzMTFFNUEyRDFEMzMyQkMxRDhEOTciLz4gPC9yZGY6RGVzY3JpcHRpb24%2BIDwvcmRmOlJERj4gPC94OnhtcG1ldGE%2BIDw%2FeHBhY2tldCBlbmQ9InIiPz6lm45hAAADkklEQVR42qyVa0yTVxzGn7d9Wy03MS2ii8s%2BeokYNQSVhCzOjXZOFNF4jx%2BMRmPUMEUEqVG36jo2thizLSQSMd4N8ZoQ8RKjJtooaCpK6ZoCtRXKpRempbTv5ey83bhkAUphz8fznvP8znn%2B%2F3NeEEJgNBoRRSmz0ub%2FfuxEacBg%2FDmYtiCjgo5NG2mBXq%2BH5I1ogMRk9Zbd%2BQU2e1ML6VPLOyf5tvBQ8yT1lG10imxsABm7SLs898GTpyYynEzP60hO3trHDKvMigUwdeaceacqzp7nOI4n0SSIIjl36ao4Z356OV07fSQAk6xJ3XGg%2BLCr1d1OYlVHp4eUHPnerU79ZA%2F1kuv1JQMAg%2BE4O2P23EumF3VkvHprsZKMzKwbRUXFEyTvSIEmTVbrysp%2BWr8wfQHGK6WChVa3bKUmdWou%2BjpArdGkzZ41c1zG%2Fu5uGH4swzd561F%2BuhIT4%2BLnSuPsv9%2BJKIpjNr9dXYOyk7%2FBZrcjIT4eCnoKgedJP4BEqhG77E3NKP31FO7cfQA5K0dSYuLgz2TwCWJSOBzG6crzKK%2BohNfni%2Bx6OMUMMNe%2Fgf7ocbw0v0acKg6J8Ql0q%2BT%2FAXR5PNi5dz9c71upuQqCKFAD%2BYhrZLEAmpodaHO3Qy6TI3NhBpbrshGtOWKOSMYwYGQM8nJzoFJNxP2HjyIQho4PewK6hBktoDcUwtIln4PjOWzflQ%2Be5yl0yCCYgYikTclGlxadio%2BBQCSiW1UXoVGrKYwH4RgMrjU1HAB4vR6LzWYfFUCKxfS8Ftk5qxHoCUQAUkRJaSEokkV6Y%2F%2BJUOC4hn6A39NVXVBYeNP8piH6HeA4fPbpdBQV5KOx0QaL1YppX3Jgk0TwH2Vg6S3u%2BdB91%2B%2FpuNYPYFl5uP5V7ZqvsrX7jxqMXR6ff3gCQSTzFI0a1TX3wIs8ul%2Bq4HuWAAiM39vhOuR1O1fQ2gT%2F26Z8Z5vrl2OHi9OXZn995nLV9aFfS6UC9JeJPfuK0NBohWpCHMSAAsFe74WWP%2BvT25wtP9Bpob6uGqqyDnOtaeumjRu%2ByFu36VntK%2FPA5umTJeUtPWZSU9BCgud661odVp3DZtkc7AnYR33RRC708PrVi1larW7XwZIjLnd7R6SgSqWSNjU1B3F72pz5TZbXmX5vV81Yb7Lg7XT%2FUXriu8XLVqw6c6XqWnBKiiYU%2BMt3wWF7u7i91XlSEITwSAZ%2FCzAAHsJVbwXYFFEAAAAASUVORK5CYII%3D)

![staticrypt](https://img.shields.io/badge/staticrypt-v3.3.0-brightgreen)

**Stilde** is the template for my personal static Startpage protected by encryption.

The startpage is a lightly modified version of the **[tilde][tilde_repo]** project by [cade](https://github.com/xvvvyz).

I use it both locally (localhost) and self-hosted (https), that's why I wanted a way to protect the page that would still stay light, static and bypassable by an action-less URI.

Stilde includes **[staticrypt][staticrypt_repo]** for that purpose and provides an authentification form to decrypt the page locally by password or by a secret decryption URI.

![Staticrypt Form](https://git.tkapias.net/tkapias/stilde/raw/branch/master/assets/screenshots/startpage.png)
![Stilde Startpage](https://git.tkapias.net/tkapias/stilde/raw/branch/master/assets/screenshots/staticrypt.png)

----

## Features

- Original [tilde][tilde_repo] features:
  - Redirect to a bookmarked website.
  - Run a search on a bookmarked website.
  - Get search suggestions from DuckDuckGo.
  - Redirect to a specific path or uri for a bookmarked website.
  - Access any other url.
  - Lauch a search on a customized DuckDuckGo session for anything outside the scope.
- New: toggle the input field by clicking on the logo (useful for mobile browsers).
- WebCrypto html encryption with password prompt page.
- Direct link decryption by secret hash URI.
- Deployment and re-deployment with a simple build script.
- New: custom logo on both form and startpage.

## License

UNLICENCED : like the original [tilde][tilde_repo] project.

## Requirements

- npm@lts (I use v18.16.0 with nvm)
- Bash (for the `build.sh` script)

## Installation

- Clone this repo in a parent directory outside of your webroot (the webroot is the destination of the build):

``` bash
git clone --depth=1 https://git.tkapias.net/tkapias/stilde
cd stilde
```

## Preparation (optional)

- Edit strings in french in `build.sh` (for the staticrypt form):

``` bash
  85   │     --template-button "DECRYPTER" \
  86   │     --template-instructions "Crypté avec StatiCrypt." \
  87   │     --template-error "Mot de passe incorrect !" \
  88   │     --template-placeholder "Mot de passe" \
  89   │     --template-remember "Se souvenir de moi" \
```

- Edit graphical assets in `assets/root/` (they will be copied to the destination with the encrypted html):
  - favicon.ico (`convert icon-512.png -define icon:auto-resize="48,32,16" favicon.ico`)
  - favicon.svg (square logo, width 192px)
  - icon-192.png (generated from favicon.svg)
  - icon-512.png (generated from favicon.svg)
  - logo.svg (trimmed favicon.svg, width 200px)

- Replace the svg logo in the startpage `assets/source/index.html`: 

  - I exported mines from inkscape, cleaned it's code and renamed paths to use them in css and scripts.

``` html
 622   │ <div class="box-container">
 623   │ 
 624   │   <svg
 625   │      preserveAspectRatio=true
 656   |      ...
```

  - There are also some css rules for the logo paths:

``` css
 607   │   #logo path#characters {
 608   │     fill-opacity: 0.5 !important;
 609   │     transition: fill 2s, fill-opacity 1s;
 610   │   }
 611   │   #logo path#characters:hover {
 612   │     fill: #ff4000 !important;
 613   │     fill-opacity: 0.8 !important;
 614   │     transition: fill 2s, fill-opacity 1s;
 615   │   }
 616   │   #logo path#shadows {
 617   │     fill: #808080;
 618   │     transition: fill 2s;
 619   │   }
```

  - And some javascript too:

``` javascript
 339   │       const shadows = document.querySelector('#logo path#shadows');
 438   │       shadows.style.fill = '#808080'
 465   │       shadows.style.fill = '#ff4000'
```

## Bookmarks & Commands

**The real content of the Startpage** and define the list of matching websites, search patterns, custom URIs and suggestions.

All of them are included inside the `COMMANDS` const after line 41 of `assets/source/index.html`.

I left enough examples to understand the syntax.

## Build

Just execute `build.sh` with its help:

``` bash
Generate static website with encrypted code by staticrypt.
The first pass requires -t, -d and -u options, re-run it with -c option only.

Syntax: ./build.sh [-h] [Options...]

options:
  -h                     Print this Help
  -c                     Fetch options from ".staticrypt.conf"
  -d "<path>"            Desination webroot path or directory
  -p "<password>"        Password for decryption >= 12 characters
  -s "<salt>"            Salt string = 32 hexadecimal characters
          -t "<string>"          Title for the staticrypt form page
  -u "<url>"             Https or localhost Url for the destination root

Example: ./build.sh -u https://start.domain.tld -d static -t "STILDE - StartPage"
```

## Basic Usage

- **Open a website**:
  type the corresponding key and press return, or click on the link.

- **Open a specific path on a site**: 
  type the path after the site’s key and press return.

- **Run a search on a website**: 
  type a space after the website’s key followed by your query and press return.

- **Perform a search with DuckDuckGo**: 
  input any string that doesn't match a key and press return.

- **suggestions** may be displayed under your input, they are **specific to a key** or construicted **from DuckDuckGo** background queries. Use press up/down/return or click to use them.

- **On mobile devices** you can open/close the input and you keyboard by a touch on the logo.


----

[//]: # (LINKS)
[stilde_repo]: https://git.tkapias.net/tkapias/stilde
[tilde_repo]: https://github.com/xvvvyz/tilde
[staticrypt_repo]: https://github.com/robinmoisson/staticrypt