stilde

stilde is the template for my personal startpage.

The startpage by itself is a lightly modified version of the tilde project by cade.

I use it both locally (localhost file) 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 include staticrypt for that purpose and provide an authentification form to decrypt the page locally by password or by a decryption uri without any other input.

Features

All tilde 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.
WebCrypto html encryption with password prompt.
Direct decryption by secret hash uri.
Deployment and re-deployment with one command.
New: custom logo on both form and startpage.
New: toggle the input field by clicking on the logo (useful for mobile browsers)

License

UNLICENCED : like the original tilde 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):

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

Preparation (optional)

Edit french strings for the staticrypt form in build.sh:

  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 asset in assets/root/:
- 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.

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

There are also some css rules for the logo paths:

 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:

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

Bookmarks & Commands

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:

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.
Under your input suggestions will be displayed, they are specific to a key or from DuckDuckGo. 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.

7.9 KiB Raw Blame History Unescape Escape