165 lines
8.2 KiB
Markdown
165 lines
8.2 KiB
Markdown
# [stilde][stilde_repo]
|
||
|
||
|
||
|
||
|
||
|
||
**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.
|
||
|
||
|
||
|
||
|
||
----
|
||
|
||
## 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 website**:
|
||
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
|