Skip to content

Latest commit

 

History

History
173 lines (112 loc) · 5.54 KB

README.md

File metadata and controls

173 lines (112 loc) · 5.54 KB
Raw

Holy Unblocker Frontend 2

NOW WITH 0% REACT CODE >:) Written in Astro, TypeScript, and SCSS

JOIN OUR DISCORD

Quick Start

Host your own instance of Holy Unblocker, no configuration required at all.

You will need to install git and at least NodeJS v19.

git clone https://github.com/holy-unblocker/website2
cd website2
npm install
npm run build
npm start

Configuration

This program will look for a config in ./config/config.js. You copy the example config:

cp ./config/config.example.js ./config.js

We provide an example configuration in ./config/config.example.js

Hosting

This guide assumes your using linux as your host

  1. Install dependencies

    You will need to install git.

  2. Install NodeJS

    You need at least NodeJS v17 to deploy Holy Unblocker.

    We recommend installing from NodeSource, or using Node Version Manager to install the latest version.

    Most distros usually have very outdated versions of NodeJS.

    Verify you're using NodeJS v17 or higher:

    node -v

  3. Install PM2

    PM2 is a daemon process manager that will help you manage and keep your application online. Getting started with PM2 is straightforward, it is offered as a simple and intuitive CLI, installable via NPM.

    npm i -g pm2

  4. Install the repo

    git clone https://github.com/holy-unblocker/website2
cd website2
npm install
npm run build

  5. Start the frontend in PM2

    This will start a process in PM2 called "holy".

    pm2 start ./run-server.js --name holy

  6. View the logs

    Press CTRL + C to exit the logs.

    pm2 logs holy

  7. Save your PM2 config and enable running on startup

    This will make it so pm2 runs automatically when your VPS restarts.

    pm2 save
pm2 startup

  8. Setup a reverse proxy

    By default, Holy Unblocker listens on http://127.0.0.1:8080/ and isn't accessible over the internet.

    Keep in mind that you want to setup HTTPS/SSL, otherwise Ultraviolet won't work.

    I personally recommend Caddy as a reverse proxy.

    Caddy is a powerful, extensible platform to serve your sites, services, and apps...

    https://caddyserver.com/docs/

    You can view the example Caddyfile at ./config/Caddyfile

Project Structure

Within the boundaries of your Astro enterprise, you'll unveil the succeeding unambiguous hierarchical construct:

/
├── public/
├── src/
│   └── pages/
│       └── index.astro
└── package.json

Astro utilizes .astro or .md documents located in the src/pages/ division. Each file is propagated as a route subject to its filenomenclature.

The src/components/ section holds no particular status, yet we find it a conducive locus for any Astro constituents.

All static facets, such as metamorphic representations, can be allocated in the public/ regiment.

Commands

Execute all commands from the root of the project, employing a terminal:

Directive Implementation
npm install Installs dependencies
npm start Starts Holy Unblocker
npm run dev Initialize local dev server at localhost:4321
npm run build Construct productive site to ./dist/
npm run preview Localize preview of your build
npm run astro ... Apply CLI directives like astro add, astro audit
npm run astro -- --help Assistance for Astro CLI operations

Account System

The first account created will be given admin for convenience.

SVG formatting guide

im writing this here because I look crazy for updating like 30 svgs in one commit

  • keep style= attributes

  • NO BLOAT:

    • all icons in `./src/icons/
    • no CSS class= attributes
    • no inkscape bloat:
      • any inkscape:data tags
      • no JS id= attributes

  • try to use if your code is high performance (eg. theatre search results, proxy omnibox search results)

  • ALWAYS SET fill="none" SO THE SVG DOESN'T LOAD UNTIL THE CSS IS READY

    • if the file is meant to be a standalone .svg (eg. in ./public/):

      • set xmlns: xmlns="http://www.w3.org/2000/svg"
      • add the <?xml thing: <?xml version="1.0" encoding="UTF-8" standalone="no"?>

    • otherwise, DO NOT ADD THE ABOVE, IT IS USELESS IF THE ICON IS EMBEDDED ON THE PAGE

    • root.css sets the fill to currentColor

    • the only exception to this is ./src/icons/ultraviolet.svg

    • the Ultraviolet SVG with colors doesn't exist anywhere else (yet?)

      • I made the svg btw