Browse Source

Start over with Rust.

tags/1.0.0^0
Bauke 8 months ago
parent
commit
8597ec3f37
Signed by: Bauke <me@bauke.xyz> GPG Key ID: C1C0F29952BCF558
35 changed files with 3998 additions and 5295 deletions
  1. +12
    -1
      .gitignore
  2. +25
    -0
      Cargo.toml
  3. +0
    -15
      README.md
  4. +9
    -0
      Trunk.toml
  5. +19
    -0
      index.html
  6. +14
    -39
      package.json
  7. +2
    -0
      rustfmt.toml
  8. +10
    -0
      source/components/mod.rs
  9. +164
    -0
      source/components/page_footer.rs
  10. +31
    -0
      source/components/page_header.rs
  11. +43
    -0
      source/components/page_main.rs
  12. +0
    -17
      source/discord/index.html
  13. BIN
      source/images/avatar.jpg
  14. +0
    -71
      source/index.html
  15. +0
    -40
      source/index.js
  16. +0
    -129
      source/libraries/index.html
  17. +48
    -0
      source/main.rs
  18. +0
    -45
      source/scss/_love.scss
  19. +5
    -0
      source/scss/_mixins.scss
  20. +14
    -0
      source/scss/_reset.scss
  21. +0
    -14
      source/scss/_variables.scss
  22. +0
    -110
      source/scss/common.scss
  23. +40
    -0
      source/scss/components/_page-footer.scss
  24. +6
    -0
      source/scss/components/_page-header.scss
  25. +24
    -0
      source/scss/components/_page-main.scss
  26. +28
    -3
      source/scss/index.scss
  27. +0
    -44
      source/scss/libraries.scss
  28. +283
    -0
      source/scss/modern-normalize.scss
  29. +0
    -19
      source/scss/userscripts.scss
  30. +0
    -19
      source/scss/userstyles.scss
  31. +0
    -66
      source/userscripts.js
  32. +0
    -75
      source/userscripts/index.html
  33. +0
    -59
      source/userstyles.js
  34. +0
    -75
      source/userstyles/index.html
  35. +3221
    -4454
      yarn.lock

+ 12
- 1
.gitignore View File

@@ -103,5 +103,16 @@ dist
# TernJS port file
.tern-port

# Build directory.
# Generated by Cargo
# will have compiled files and executables
/target/

# Remove Cargo.lock from gitignore if creating an executable, leave it for libraries
# More information here https://doc.rust-lang.org/cargo/guide/cargo-toml-vs-cargo-lock.html
Cargo.lock

# These are backup files generated by rustfmt
**/*.rs.bk

# Build directory
public/

+ 25
- 0
Cargo.toml View File

@@ -0,0 +1,25 @@
# https://doc.rust-lang.org/cargo/reference/manifest.html

[package]
name = "bauke-xyz"
description = "https://bauke.xyz"
version = "1.0.0"
edition = "2018"
repository = "https://git.holllo.cc/Bauke/bauke.xyz"
license = "AGPL-3.0-or-later"

[[bin]]
name = "bauke-xyz"
path = "source/main.rs"

[dependencies]
gloo-console = "0.1.0"
gloo-timers = "0.2.1"
log = "0.4.14"
rand = "0.8.4"
wasm-logger = "0.2.0"
yew = "0.18.0"

[dependencies.getrandom]
version = "0.2.3"
features = ["js"]

+ 0
- 15
README.md View File

@@ -1,15 +0,0 @@
# bauke.xyz

> My personal website.

[![Netlify deploy status](https://api.netlify.com/api/v1/badges/37bb1f7c-2abb-419f-9a31-a4b72209c1c8/deploy-status)](https://app.netlify.com/sites/bauke/deploys)

## Building

To build the site [Node](https://nodejs.org) and [Yarn](https://yarnpkg.com) are required.

Then, run `yarn build`. The site will be built to the `public/` directory.

## License

Code open-sourced with the [AGPL-3.0-or-later license](https://git.holllo.cc/Bauke/bauke.xyz/src/branch/main/LICENSE), content licensed under [CC BY-SA 4.0](https://creativecommons.org/licenses/by-sa/4.0/).

+ 9
- 0
Trunk.toml View File

@@ -0,0 +1,9 @@
[build]
dist = "public"

[serve]
no_autoreload = false
port = 5500

[clean]
dist = "public"

+ 19
- 0
index.html View File

@@ -0,0 +1,19 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>bauke.xyz</title>
<link data-trunk rel="sass" href="source/scss/modern-normalize.scss" />
<link data-trunk rel="sass" href="source/scss/index.scss" />
</head>

<body>
<noscript>
This website requires JavaScript and WebAssembly to work.
</noscript>
</body>

</html>

+ 14
- 39
package.json View File

@@ -1,57 +1,32 @@
{
"name": "bauke.xyz",
"description": "My personal website.",
"version": "0.2.0",
"author": "Bauke <me@bauke.xyz>",
"homepage": "https://bauke.xyz",
"repository": "https://git.holllo.cc/Bauke/bauke.xyz",
"version": "0.0.0",
"license": "AGPL-3.0-or-later",
"scripts": {
"start": "nodemon --watch 'source/' --exec 'yarn build' --ext 'html scss'",
"build": "node 'source/index.js' && sass 'source/scss/':'public/css/'",
"test": "xo && stylelint 'source/scss/*.scss'",
"deploy": "rm -rf 'public/' && yarn build && yarn deploy:netlify",
"deploy:netlify": "netlify deploy --prod --dir 'public/' -s 37bb1f7c-2abb-419f-9a31-a4b72209c1c8"
},
"dependencies": {
"modern-normalize": "^1.0.0",
"userscripts": "git+https://git.holllo.cc/Bauke/userscripts.git",
"userstyles": "git+https://git.holllo.cc/Bauke/userstyles.git"
"deploy": "trunk clean && trunk build --release && yarn deploy:netlify",
"deploy:netlify": "netlify deploy --prod --dir 'public/' -s bauke.xyz",
"test": "stylelint 'source/**/*.scss'"
},
"devDependencies": {
"cpy": "^8.1.1",
"husky": "^4.3.0",
"netlify-cli": "^2.64.1",
"nodemon": "^2.0.4",
"nunjucks": "^3.2.2",
"sass": "^1.26.11",
"stylelint": "^13.7.2",
"stylelint-config-xo-scss": "^0.13.0",
"stylelint-config-xo-space": "^0.14.0",
"xo": "^0.33.1"
"netlify-cli": "^6.7.6",
"stylelint": "^13.13.1",
"stylelint-config-xo-scss": "^0.14.0",
"stylelint-config-xo-space": "^0.15.1"
},
"stylelint": {
"extends": [
"stylelint-config-xo-scss",
"stylelint-config-xo-space"
],
"ignoreFiles": [
"**/*.css"
],
"rules": {
"at-rule-empty-line-before": null,
"at-rule-no-unknown": null,
"no-descending-specificity": null
}
},
"xo": {
"prettier": true,
"rules": {
"no-await-in-loop": "off"
},
"space": true
},
"husky": {
"hooks": {
"pre-commit": "yarn test",
"pre-push": "yarn test"
"no-descending-specificity": null,
"scss/at-import-partial-extension": null,
"scss/at-rule-no-unknown": null
}
}
}

+ 2
- 0
rustfmt.toml View File

@@ -0,0 +1,2 @@
max_width = 80
tab_spaces = 2

+ 10
- 0
source/components/mod.rs View File

@@ -0,0 +1,10 @@
/// Contains the main page `<footer>` component.
mod page_footer;
/// Contains the main page `<header>` component.
mod page_header;
/// Contains the main page `<main>` component.
mod page_main;

pub(crate) use page_footer::PageFooter;
pub(crate) use page_header::PageHeader;
pub(crate) use page_main::PageMain;

+ 164
- 0
source/components/page_footer.rs View File

@@ -0,0 +1,164 @@
use gloo_timers::callback::Interval;
use rand::Rng;
use yew::prelude::*;

/// The main page `<footer>` element.
pub(crate) struct PageFooter {
/// The handle to the `setInterval`, this is stored so it doesn't get dropped
/// and stop the interval from happening.
_interval_handle: Interval,
/// The number of which square is currently active.
active_square: u32,
/// The link to this component.
link: ComponentLink<Self>,
/// The maximum number of squares to render.
max_squares: u32,
}

/// The possible messages for [`PageFooter`].
#[derive(Debug)]
pub(crate) enum PageFooterMessage {
/// The message to decrease the max squares by 1.
DecrementMaxSquares,
/// The message to increase the max squares by 1.
IncrementMaxSquares,
/// The message from the interval to update the active square.
TickActiveSquare,
}

impl Component for PageFooter {
type Message = PageFooterMessage;
type Properties = ();

fn create(_props: Self::Properties, link: ComponentLink<Self>) -> Self {
log::trace!("Creating PageFooter");

let interval_handle = {
let link = link.clone();
Interval::new(1000, move || {
link.send_message(Self::Message::TickActiveSquare)
})
};

Self {
_interval_handle: interval_handle,
active_square: 0,
link,
max_squares: 5,
}
}

fn update(&mut self, msg: Self::Message) -> ShouldRender {
log::trace!("PageFooterMessage::{:?}", msg);

match msg {
Self::Message::DecrementMaxSquares => {
if self.max_squares > 1 {
self.max_squares -= 1;
log::debug!("Max squares set to {}", self.max_squares);
true
} else {
false
}
}

Self::Message::IncrementMaxSquares => {
if self.max_squares < 360 {
self.max_squares += 1;
log::debug!("Max squares set to {}", self.max_squares);
true
} else {
false
}
}

Self::Message::TickActiveSquare => {
if self.max_squares == 1 {
if self.active_square == 0 {
self.active_square = 1;
} else {
self.active_square = 0;
}
} else {
self.active_square += 1;
if self.active_square >= self.max_squares {
self.active_square = 0;
}
}

true
}
}
}

fn change(&mut self, _props: Self::Properties) -> ShouldRender {
false
}

fn view(&self) -> Html {
let squares = (0..self.max_squares)
.into_iter()
.map(|square| {
let mut classes = classes!("square");
if square == self.active_square {
classes.push("active");
}

let hue = {
if self.max_squares == 1 {
rand::thread_rng().gen_range(0..=360)
} else {
(360 / self.max_squares) * square
}
};
let style = format!("background-color: hsl({}, 100%, 50%);", hue);

return html! {
<div style=style class=classes />
};
})
.collect::<Html>();

let squares = {
let style = format!(
"--square-transition: {0}s; --squares: {0};",
self.max_squares
);
let decrement = self
.link
.callback(|_| PageFooterMessage::DecrementMaxSquares);
let increment = self
.link
.callback(|_| PageFooterMessage::IncrementMaxSquares);

html! {
<div style=style class="squares">
<button onclick=decrement>{"-"}</button>
{squares}
<button onclick=increment>{"+"}</button>
</div>
}
};

let technologies = html! {
<p class="technologies">
{"Written in "}
<a target="_blank" href="https://www.rust-lang.org">{"Rust"}</a>
{" with "}
<a target="_blank" href="https://yew.rs">{"Yew"}</a>
{" and compiled to "}
<a target="_blank" href="https://webassembly.org">{"WebAssembly"}</a>
{" with "}
<a target="_blank" href="https://trunkrs.dev">{"Trunk"}</a>
{"."}
</p>
};

html! {
<footer class="page-footer">
{squares}
{technologies}
</footer>
}
}
}

+ 31
- 0
source/components/page_header.rs View File

@@ -0,0 +1,31 @@
use yew::prelude::*;

/// The main page `<header>` element.
pub(crate) struct PageHeader;

impl Component for PageHeader {
type Message = ();
type Properties = ();

fn create(_props: Self::Properties, _link: ComponentLink<Self>) -> Self {
log::trace!("Creating PageHeader");

Self
}

fn update(&mut self, _msg: Self::Message) -> ShouldRender {
unimplemented!()
}

fn change(&mut self, _props: Self::Properties) -> ShouldRender {
false
}

fn view(&self) -> Html {
html! {
<header class="page-header">
<h1>{"bauke.xyz"}</h1>
</header>
}
}
}

+ 43
- 0
source/components/page_main.rs View File

@@ -0,0 +1,43 @@
use yew::prelude::*;

/// The main page `<main>` element.
pub(crate) struct PageMain;

impl Component for PageMain {
type Message = ();
type Properties = ();

fn create(_props: Self::Properties, _link: ComponentLink<Self>) -> Self {
log::trace!("Creating PageMain");

Self
}

fn update(&mut self, _msg: Self::Message) -> ShouldRender {
unimplemented!()
}

fn change(&mut self, _props: Self::Properties) -> ShouldRender {
false
}

fn view(&self) -> Html {
html! {
<main class="page-main">
<div class="contact-links">
<a target="_blank" href="mailto:me@bauke.xyz">
{"me@bauke.xyz"}
</a>

<a target="_blank" href="https://matrix.to/#/@baukexyz:matrix.org">
{"@baukexyz:matrix.org"}
</a>

<a target="_blank" href="https://mastodon.social/@bauke">
{"@bauke@mastodon.social"}
</a>
</div>
</main>
}
}
}

+ 0
- 17
source/discord/index.html View File

@@ -1,17 +0,0 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Discord</title>
<meta http-equiv="refresh" content="0; url=https://discord.gg/NN5Ubtwdt3">
</head>

<body>
Redirecting to
<a href="https://discord.gg/NN5Ubtwdt3">https://discord.gg/NN5Ubtwdt3</a>.
</body>

</html>

BIN
source/images/avatar.jpg View File

Before After
Width: 600  |  Height: 600  |  Size: 118 KiB

+ 0
- 71
source/index.html View File

@@ -1,71 +0,0 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bauke</title>
<link rel="shortcut icon" href="/images/avatar.jpg" type="image/jpeg">
<link rel="stylesheet" href="/css/modern-normalize.css">
<link rel="stylesheet" href="/css/common.css">
<link rel="stylesheet" href="/css/index.css">
</head>

<body>
<main class="bordered">
<h1 class="bordered">Bauke</h1>
<ul class="bordered">
<li>
<a href="https://git.holllo.cc/Bauke" target="_blank">Gitea</a>
</li>
<li>
<a href="https://github.com/Bauke" target="_blank">GitHub</a>
</li>
<li>
<a href="https://gitlab.com/Bauke" target="_blank">GitLab</a>
</li>
</ul>
<ul class="bordered">
<li>
<a href="https://holllo.cc" target="_blank">Holllo</a>
</li>
<li>
<a href="https://driftingnebula.com" target="_blank">driftingnebula</a>
</li>
</ul>
<ul class="bordered">
<li>
<a href="https://matrix.org" target="_blank">Matrix: @baukexyz:matrix.org</a>
</li>
<li>
<a href="mailto:me@bauke.xyz">Email: me@bauke.xyz</a>
</li>
<li>
<a rel="me" href="https://mastodon.social/@bauke" target="_blank">Mastodon: @bauke@mastodon.social</a>
</li>
<li>
<a href="https://tildes.net/user/Bauke" target="_blank">Tildes</a>
</li>
</ul>
<div class="divider"></div>
<ul class="bordered">
<li>
<a href="https://git.holllo.cc/Bauke?q=open-source" target="_blank">♡ Open Source</a>
</li>
<li>
<a href="https://git.holllo.cc/Bauke?q=rust" target="_blank">♥ Rust</a>
</li>
<li>
<a href="https://git.holllo.cc/Bauke?q=javascript" target="_blank">♡ TypeScript & JavaScript</a>
</li>
</ul>
</main>
<footer class="bordered">
<p>
&copy; Bauke
<a href="https://creativecommons.org/licenses/by-sa/4.0/" target="_blank">CC BY-SA 4.0</a>
</p>
</footer>
</body>

</html>

+ 0
- 40
source/index.js View File

@@ -1,40 +0,0 @@
const cpy = require('cpy');

const {build: buildUserscripts} = require('./userscripts');
const {build: buildUserstyles} = require('./userstyles');

async function main() {
console.log('Copying files.');
await cpy(
[
'**',
'!index.js',
'!userscripts.js',
'!userstyles.js',
'!userscripts/*',
'!userstyles/*',
'!scss/*'
],
'../public/',
{
cwd: 'source',
parents: true
}
);

await cpy(
['node_modules/modern-normalize/modern-normalize.css'],
'public/css/'
);

console.log('Building userscripts.');
await buildUserscripts();

console.log('Building userstyles.');
await buildUserstyles();
}

// Run `main()` if this script was called directly (like `node source/index.js`).
if (require.main === module) {
main();
}

+ 0
- 129
source/libraries/index.html View File

@@ -1,129 +0,0 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Libraries</title>
<link rel="shortcut icon" href="/images/avatar.jpg" type="image/jpeg">
<link rel="stylesheet" href="/css/modern-normalize.css">
<link rel="stylesheet" href="/css/common.css">
<link rel="stylesheet" href="/css/libraries.css">
</head>

<body>
<main class="bordered">
<h1 class="bordered">Libraries</h1>

<div id="crates">
<h2 class="bordered">Crates.io</h2>
<ul class="bordered libraries">
<li class="bordered crates" id="opml">
<a class="button" href="https://crates.io/crates/opml" target="_blank">opml</a>
<p class="badges">
<img src="https://img.shields.io/crates/v/opml?color=yellowgreen&amp;style=flat-square"
alt="Crates.io version">
<img src="https://img.shields.io/crates/dr/opml?color=yellowgreen&amp;style=flat-square"
alt="Crates.io recent downloads">
<img src="https://img.shields.io/crates/l/opml?color=yellowgreen&amp;style=flat-square"
alt="Crates.io license">
</p>
</li>
<li class="bordered crates" id="opml_cli">
<a class="button" href="https://crates.io/crates/opml_cli" target="_blank">opml_cli</a>
<p class="badges">
<img src="https://img.shields.io/crates/v/opml_cli?color=yellowgreen&amp;style=flat-square"
alt="Crates.io version">
<img src="https://img.shields.io/crates/dr/opml_cli?color=yellowgreen&amp;style=flat-square"
alt="Crates.io recent downloads">
<img src="https://img.shields.io/crates/l/opml_cli?color=yellowgreen&amp;style=flat-square"
alt="Crates.io license">
</p>
</li>
<li class="bordered crates" id="liver">
<a class="button" href="https://crates.io/crates/liver" target="_blank">liver</a>
<p class="badges">
<img src="https://img.shields.io/crates/v/liver?color=yellowgreen&amp;style=flat-square"
alt="Crates.io version">
<img src="https://img.shields.io/crates/dr/liver?color=yellowgreen&amp;style=flat-square"
alt="Crates.io recent downloads">
<img src="https://img.shields.io/crates/l/liver?color=yellowgreen&amp;style=flat-square"
alt="Crates.io license">
</p>
</li>
<li class="bordered crates" id="pushover_api">
<a class="button" href="https://crates.io/crates/pushover_api" target="_blank">pushover_api</a>
<p class="badges">
<img src="https://img.shields.io/crates/v/pushover_api?color=yellowgreen&amp;style=flat-square"
alt="Crates.io version">
<img src="https://img.shields.io/crates/dr/pushover_api?color=yellowgreen&amp;style=flat-square"
alt="Crates.io recent downloads">
<img src="https://img.shields.io/crates/l/pushover_api?color=yellowgreen&amp;style=flat-square"
alt="Crates.io license">
</p>
</li>
<li class="bordered crates" id="pushover_cli">
<a class="button" href="https://crates.io/crates/pushover_cli" target="_blank">pushover_cli</a>
<p class="badges">
<img src="https://img.shields.io/crates/v/pushover_cli?color=yellowgreen&amp;style=flat-square"
alt="Crates.io version">
<img src="https://img.shields.io/crates/dr/pushover_cli?color=yellowgreen&amp;style=flat-square"
alt="Crates.io recent downloads">
<img src="https://img.shields.io/crates/l/pushover_cli?color=yellowgreen&amp;style=flat-square"
alt="Crates.io license">
</p>
</li>
</ul>
</div>

<div class="divider"></div>

<div id="npm">
<h2 class="bordered">npm</h2>
<ul class="bordered libraries">
<li class="bordered npm" id="fancify">
<a class="button" href="https://npmjs.com/package/fancify" target="_blank">fancify</a>
<p class="badges">
<img src="https://img.shields.io/npm/v/fancify?color=red&amp;style=flat-square"
alt="npm version">
<img src="https://img.shields.io/npm/dm/fancify?color=red&amp;style=flat-square"
alt="npm downloads per month">
<img src="https://img.shields.io/npm/l/fancify?color=red&amp;style=flat-square"
alt="npm license">
</p>
</li>
<li class="bordered npm" id="node-ddg">
<a class="button" href="https://npmjs.com/package/node-ddg" target="_blank">node-ddg</a>
<p class="badges">
<img src="https://img.shields.io/npm/v/node-ddg?color=red&amp;style=flat-square"
alt="npm version">
<img src="https://img.shields.io/npm/dm/node-ddg?color=red&amp;style=flat-square"
alt="npm downloads per month">
<img src="https://img.shields.io/npm/l/node-ddg?color=red&amp;style=flat-square"
alt="npm license">
</p>
</li>
<li class="bordered npm" id="owofy">
<a class="button" href="https://npmjs.com/package/owofy" target="_blank">owofy</a>
<p class="badges">
<img src="https://img.shields.io/npm/v/owofy?color=red&amp;style=flat-square"
alt="npm version">
<img src="https://img.shields.io/npm/dm/owofy?color=red&amp;style=flat-square"
alt="npm downloads per month">
<img src="https://img.shields.io/npm/l/owofy?color=red&amp;style=flat-square"
alt="npm license">
</p>
</li>
</ul>
</div>
</main>

<footer class="bordered">
<p>
&copy; Bauke
<a href="https://creativecommons.org/licenses/by-sa/4.0/" target="_blank">CC BY-SA 4.0</a>
</p>
</footer>
</body>

</html>

+ 48
- 0
source/main.rs View File

@@ -0,0 +1,48 @@
#![forbid(unsafe_code)]
#![warn(missing_docs, clippy::missing_docs_in_private_items)]

//! # [bauke.xyz](https://bauke.xyz)

use yew::prelude::*;

/// Components collection.
pub(crate) mod components;

use components::{PageFooter, PageHeader, PageMain};

/// The main component.
pub(crate) struct Model;

impl Component for Model {
type Message = ();
type Properties = ();

fn create(_props: Self::Properties, _link: ComponentLink<Self>) -> Self {
Self
}

fn update(&mut self, _msg: Self::Message) -> ShouldRender {
unimplemented!()
}

fn change(&mut self, _props: Self::Properties) -> ShouldRender {
false
}

fn view(&self) -> Html {
html! {
<>
<PageHeader />
<PageMain />
<PageFooter />
</>
}
}
}

/// Our main function.
pub(crate) fn main() {
wasm_logger::init(wasm_logger::Config::new(log::Level::Debug));
log::debug!("Initializing Yew");
yew::start_app::<Model>();
}

+ 0
- 45
source/scss/_love.scss View File

@@ -1,45 +0,0 @@
/*
The Love Theme CSS Custom Properties
https://love.holllo.cc - version 0.1.0
MIT license
*/

body {
/* Love Dark */
--df-1: #f2efff;
--df-2: #e6deff;
--db-1: #1f1731;
--db-2: #2a2041;
--da-1: #f99fb1;
--da-2: #faa56c;
--da-3: #d2b83a;
--da-4: #96c839;
--da-5: #3bd18a;
--da-6: #3ecdbf;
--da-7: #41c8e5;
--da-8: #98b9f8;
--da-9: #d5a6f8;
--da-10: #f99add;
--dg-1: #e2e2e2;
--dg-2: #c6c6c6;
--dg-3: #ababab;

/* Love Light */
--lf-1: #1f1731;
--lf-2: #2a2041;
--lb-1: #f2efff;
--lb-2: #e6deff;
--la-1: #8b123c;
--la-2: #6a3b11;
--la-3: #514610;
--la-4: #384d10;
--la-5: #115133;
--la-6: #124f49;
--la-7: #144d5a;
--la-8: #17477e;
--la-9: #6f1995;
--la-10: #81156a;
--lg-1: #1b1b1b;
--lg-2: #303030;
--lg-3: #474747;
}

+ 5
- 0
source/scss/_mixins.scss View File

@@ -0,0 +1,5 @@
@mixin responsive-container {
margin-left: auto;
margin-right: auto;
width: 1000px;
}

+ 14
- 0
source/scss/_reset.scss View File

@@ -0,0 +1,14 @@
h1,
h2,
h3,
h4,
h5,
ol,
ul,
li,
p,
button,
input {
margin: 0;
padding: 0;
}

+ 0
- 14
source/scss/_variables.scss View File

@@ -1,14 +0,0 @@
$small-breakpoint: 600px;
$medium-breakpoint: 900px;
$large-breakpoint: 1200px;
$extra-large-breakpoint: 1800px;

@mixin responsive-container {
margin-left: auto;
margin-right: auto;
width: $small-breakpoint;

@media (max-width: $small-breakpoint) {
width: 100%;
}
}

+ 0
- 110
source/scss/common.scss View File

@@ -1,110 +0,0 @@
@import 'variables';
@import 'love';

html {
font-size: 62.5%;
}

body {
background-color: var(--db-1);
color: var(--df-1);
font-size: 1.75rem;
padding: 16px;
}

main {
@include responsive-container;
display: flex;
gap: 16px;
flex-direction: column;
margin-bottom: 16px;
padding: 16px;
}

h1,
h2 {
background-color: var(--db-2);
padding: 16px;
width: 100%;
}

h1,
h2,
p {
margin: 0;
}

a {
border: 1px dashed transparent;
color: var(--page-accent-1, var(--da-7));
display: inline-block;
font-weight: bold;
padding: 4px 8px;
text-decoration: none;

&:hover {
background-color: var(--page-accent-2, var(--da-3));
color: var(--db-1);
}

&:active,
&:focus {
border: 1px dashed var(--df-1);
outline: none;
}
}

img {
display: inline-block;
}

ul {
align-items: center;
background-color: var(--db-2);
list-style: none;
margin: 0;
overflow: auto;
padding: 16px;
width: 100%;
}

li {
margin-bottom: 8px;

&:last-of-type {
margin-bottom: 0;
}
}

footer {
@include responsive-container;
font-weight: bold;
padding: 16px;

a {
padding: 0;
}
}

.bordered {
border: var(--border-size, 1px) solid var(--border-accent, var(--da-5));
}

.button {
background-color: var(--page-accent-1);
color: var(--db-1);

&:hover {
background-color: var(--page-accent-2);
}
}

.divider {
border-top: var(--border-size, 1px) solid var(--border-accent, var(--da-5));
width: 100%;
}

.remove-padding,
.remove-a-padding a {
padding: 0;
}

+ 40
- 0
source/scss/components/_page-footer.scss View File

@@ -0,0 +1,40 @@
.page-footer {
@include responsive-container;
margin-top: 1rem;

.squares {
display: grid;
grid-template-columns: min-content repeat(var(--squares, 5), 1fr) min-content;
height: 1rem;
margin-bottom: 1rem;

button {
align-items: center;
border: none;
display: flex;
font-family: monospace;
font-size: 1rem;
height: 100%;
justify-content: center;
width: 2rem;
}

.square {
height: 100%;

&.active {
opacity: 100%;
}

&:not(.active) {
opacity: 0%;
transition: opacity var(--square-transition, 5s);
}
}
}

.technologies {
background-color: #333;
padding: 1rem;
}
}

+ 6
- 0
source/scss/components/_page-header.scss View File

@@ -0,0 +1,6 @@
.page-header {
@include responsive-container;
background-color: #333;
margin-top: 1rem;
padding: 1rem;
}

+ 24
- 0
source/scss/components/_page-main.scss View File

@@ -0,0 +1,24 @@
.page-main {
@include responsive-container;
background-color: #333;
margin-top: 1rem;
padding: 1rem;

.contact-links {
display: flex;
flex-direction: column;
gap: 1rem;

a {
border: 2px solid;
color: #fff;
padding: 1rem;
text-decoration: none;

&:hover {
background-color: #fff;
color: #000;
}
}
}
}

+ 28
- 3
source/scss/index.scss View File

@@ -1,5 +1,30 @@
@import 'reset';
@import 'mixins';

html {
font-size: 62.5%;
}

body {
--border-accent: var(--da-5);
--page-accent-1: var(--da-7);
--page-accent-2: var(--da-3);
background-color: #111;
color: #fff;
font-family: sans-serif;
font-size: 2rem;
}

a {
color: #ff0;
font-weight: bold;
}

button {
cursor: pointer;
}

.monospace {
font-family: monospace;
}

@import 'components/page-footer';
@import 'components/page-header';
@import 'components/page-main';

+ 0
- 44
source/scss/libraries.scss View File

@@ -1,44 +0,0 @@
body {
--border-accent: var(--da-5);
--page-accent-1: var(--da-7);
--page-accent-2: var(--da-3);
}

.libraries {
background-color: transparent;
border: none;
padding: 0;
}

.libraries li {
background-color: var(--db-2);
padding: 16px;
}

.libraries a {
margin-bottom: 8px;
}

.libraries .badges {
display: flex;
gap: 8px;
}

#crates,
#npm {
display: flex;
flex-direction: column;
gap: 16px;
}

#crates {
--border-accent: var(--da-4);
--page-accent-1: var(--da-4);
--page-accent-2: var(--da-7);
}

#npm {
--border-accent: var(--da-1);
--page-accent-1: var(--da-1);
--page-accent-2: var(--da-7);
}

+ 283
- 0
source/scss/modern-normalize.scss View File

@@ -0,0 +1,283 @@
/*! modern-normalize v1.1.0 | MIT License | https://github.com/sindresorhus/modern-normalize */

/*
Document
========
*/

/**
Use a better box model (opinionated).
*/

*,
::before,
::after {
box-sizing: border-box;
}

/**
Use a more readable tab size (opinionated).
*/

/**
1. Correct the line height in all browsers.
2. Prevent adjustments of font size after orientation changes in iOS.
*/

html {
-moz-tab-size: 4;
tab-size: 4;
line-height: 1.15; /* 1 */
text-size-adjust: 100%; /* 2 */
}

/*
Sections
========
*/

/**
Improve consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3)
*/

/**
Remove the margin in all browsers.
*/

body {
font-family: system-ui;
margin: 0;
}

/*
Grouping content
================
*/

/**
1. Add the correct height in Firefox.
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
*/

hr {
height: 0; /* 1 */
color: inherit; /* 2 */
}

/*
Text-level semantics
====================
*/

/**
Add the correct text decoration in Chrome, Edge, and Safari.
*/

abbr[title] {
text-decoration: underline dotted;
}

/**
Add the correct font weight in Edge and Safari.
*/

b,
strong {
font-weight: bolder;
}

/**
1. Improve consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3)
2. Correct the odd 'em' font sizing in all browsers.
*/

code,
kbd,
samp,
pre {
font-family:
ui-monospace,
SFMono-Regular,
Consolas,
'Liberation Mono',
Menlo,
monospace; /* 1 */
font-size: 1em; /* 2 */
}

/**
Add the correct font size in all browsers.
*/

small {
font-size: 80%;
}

/**
Prevent 'sub' and 'sup' elements from affecting the line height in all browsers.
*/

sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}

sub {
bottom: -0.25em;
}

sup {
top: -0.5em;
}

/*
Tabular data
============
*/

/**
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
*/

table {
text-indent: 0; /* 1 */
border-color: inherit; /* 2 */
}

/*
Forms
=====
*/

/**
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
*/

button,
input,
optgroup,
select,
textarea {
font-family: inherit; /* 1 */
font-size: 100%; /* 1 */
line-height: 1.15; /* 1 */
margin: 0; /* 2 */
}

/**
Remove the inheritance of text transform in Edge and Firefox.
1. Remove the inheritance of text transform in Firefox.
*/

button,
select { /* 1 */
text-transform: none;
}

/**
Correct the inability to style clickable types in iOS and Safari.
*/

button,
[type='button'],
[type='reset'],
[type='submit'] {
-webkit-appearance: button;
}

/**
Remove the inner border and padding in Firefox.
*/

::-moz-focus-inner {
border-style: none;
padding: 0;
}

/**
Restore the focus styles unset by the previous rule.
*/

:-moz-focusring {
outline: 1px dotted ButtonText;
}

/**
Remove the additional ':invalid' styles in Firefox.
See: https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737
*/

:-moz-ui-invalid {
box-shadow: none;
}

/**
Remove the padding so developers are not caught out when they zero out 'fieldset' elements in all browsers.
*/

legend {
padding: 0;
}

/**
Add the correct vertical alignment in Chrome and Firefox.
*/

progress {
vertical-align: baseline;
}

/**
Correct the cursor style of increment and decrement buttons in Safari.
*/

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
height: auto;
}

/**
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/

[type='search'] {
-webkit-appearance: textfield; /* 1 */
outline-offset: -2px; /* 2 */
}

/**
Remove the inner padding in Chrome and Safari on macOS.
*/

::-webkit-search-decoration {
-webkit-appearance: none;
}

/**
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to 'inherit' in Safari.
*/

::-webkit-file-upload-button {
-webkit-appearance: button; /* 1 */
font: inherit; /* 2 */
}

/*
Interactive
===========
*/

/*
Add the correct display in Chrome and Safari.
*/

summary {
display: list-item;
}

+ 0
- 19
source/scss/userscripts.scss View File

@@ -1,19 +0,0 @@
body {
--border-accent: var(--da-10);
--page-accent-1: var(--da-7);
--page-accent-2: var(--da-3);
}

header {
align-items: center;
background-color: var(--db-2);
display: flex;
justify-content: center;
padding: 16px;
width: 100%;
}

h2 {
margin-right: auto;
padding: 0;
}

+ 0
- 19
source/scss/userstyles.scss View File

@@ -1,19 +0,0 @@
body {
--border-accent: var(--da-1);
--page-accent-1: var(--da-7);
--page-accent-2: var(--da-3);
}

header {
align-items: center;
background-color: var(--db-2);
display: flex;
justify-content: center;
padding: 16px;
width: 100%;
}

h2 {
margin-right: auto;
padding: 0;
}

+ 0
- 66
source/userscripts.js View File

@@ -1,66 +0,0 @@
const {promises: fsp} = require('fs');
const nunjucks = require('nunjucks');
const {join} = require('path');

const {readScriptMetadata, scripts} = require('userscripts');

async function main() {
// Make sure the `public/userscripts` directory exists.
await fsp.mkdir(join(__dirname, '../public/userscripts/'), {recursive: true});

// Configure Nunjucks to use the current directory for templates.
nunjucks.configure(__dirname, {
lstripBlocks: true,
trimBlocks: true,
throwOnUndefined: true
});

// Create an array to hold all the script metadatas we'll use to render the template.
const scriptMetadatas = [];

// Define the source directory where the userscripts are located.
const sourceDir = join(__dirname, '../node_modules/userscripts/source/');

for (const script of scripts) {
// Read the script metadata and add it to our array.
const metadata = await readScriptMetadata(script);

// The way the metadata is parsed is inside arrays, so extract
// all of them so we don't have to in the template.
metadata.description = metadata.description[0];
metadata.downloadURL = metadata.downloadURL[0];
metadata.name = metadata.name[0];
metadata.version = metadata.version[0];
// Remove the `https://` and trailing `/*` from the domain.
metadata.domain = metadata.match[0].slice(
metadata.match[0].indexOf('://') + 3,
metadata.match[0].lastIndexOf('/')
);

scriptMetadatas.push(metadata);

// Define the filename for the script.
const filename = `${script}.user.js`;

// Copy all the userscripts to the `public/userscripts/` directory.
await fsp.copyFile(
join(sourceDir, filename),
join(__dirname, '../public/userscripts/', filename)
);
}

// Render the userscripts template and write it to file.
await fsp.writeFile(
join(__dirname, '../public/userscripts/index.html'),
nunjucks.render('userscripts/index.html', {scripts: scriptMetadatas})
);
}

module.exports = {
build: main
};

// Run `main()` if this script was called directly (like `node source/userscripts.js`).
if (require.main === module) {
main();
}

+ 0
- 75
source/userscripts/index.html View File

@@ -1,75 +0,0 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Userscripts</title>
<link rel="shortcut icon" href="/images/avatar.jpg" type="image/jpeg">
<link rel="stylesheet" href="/css/modern-normalize.css">
<link rel="stylesheet" href="/css/common.css">
<link rel="stylesheet" href="/css/userscripts.css">
</head>

<body>
<main class="bordered">
<h1 class="bordered">Userscripts</h1>

<ul class="bordered remove-a-padding">
<li>A collection of all my userscripts for various websites.</li>

<li>
Don't know how to install userscripts? Install
<a href="https://greasyfork.org" target="_blank">a userscript manager</a>
and then click on the "Install" button. This should open a new window
or tab where your userscript manager will ask you to install the userscript
in question.
</li>

<li>
Encounter an issue with any of the scripts?
<a href="mailto:me@bauke.xyz">Email (me@bauke.xyz)</a>
or message me on Matrix (@baukexyz:matrix.org) and I'll try to fix
the problem as soon as possible.
</li>

<li>
Open-sourced with the MIT license, available at
<a href="https://git.holllo.cc/Bauke/userscripts" target="_blank">git.holllo.cc/Bauke/userscripts</a>.
</li>
</ul>

<div class="divider"></div>

{% for script in scripts %}
<header class="bordered">
<h2 id="{{ script.name | lower | replace(" ", "-") }}">
{{ script.name }}
</h2>
<a class="button" href="{{ script.downloadURL }}" target="_blank">Install</a>
</header>

<ul class="bordered">
<li>{{ script.description }}</li>
<li>Version {{ script.version }}</li>
<li>
Applies to
<a class="remove-padding" href="https://{{ script.domain }}" target="_blank">{{ script.domain }}</a>.
</li>
</ul>

{% if not loop.last %}
<div class="divider"></div>
{% endif %}
{% endfor %}
</main>

<footer class="bordered">
<p>
&copy; Bauke
<a href="https://creativecommons.org/licenses/by-sa/4.0/" target="_blank">CC BY-SA 4.0</a>
</p>
</footer>
</body>

</html>

+ 0
- 59
source/userstyles.js View File

@@ -1,59 +0,0 @@
const {promises: fsp} = require('fs');
const nunjucks = require('nunjucks');
const {join} = require('path');

const {build, readStyleMetadata} = require('userstyles');

async function main() {
// Make sure the `public/userstyles` directory exists.
await fsp.mkdir(join(__dirname, '../public/userstyles/'), {recursive: true});

// Configure Nunjucks to use the current directory for templates.
nunjucks.configure(__dirname, {
lstripBlocks: true,
trimBlocks: true,
throwOnUndefined: true
});

// Build the userstyles.
await build();

// Define the build directory where the userstyles will be built to.
const buildDir = join(__dirname, '../node_modules/userstyles/build/');

// Read and sort the files in the build directory.
const styles = await fsp.readdir(buildDir);
styles.sort((a, b) => a.localeCompare(b));

// Create an array to hold all the style metadatas we'll use to render the template.
const styleMetadatas = [];

for (const style of styles) {
// Remove the `.user.css` so we get just the style name.
const styleName = style.slice(0, style.indexOf('.'));

// Read the style metadata and add it to our array.
styleMetadatas.push(await readStyleMetadata(styleName));

// Copy all the built userstyles to the `public/userstyles/` directory.
await fsp.copyFile(
join(buildDir, style),
join(__dirname, '../public/userstyles/', style)
);
}

// Render the userstyles template and write it to file.
await fsp.writeFile(
join(__dirname, '../public/userstyles/index.html'),
nunjucks.render('userstyles/index.html', {styles: styleMetadatas})
);
}

module.exports = {
build: main
};

// Run `main()` if this script was called directly (like `node source/userstyles.js`).
if (require.main === module) {
main();
}

+ 0
- 75
source/userstyles/index.html View File

@@ -1,75 +0,0 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Userstyles</title>
<link rel="shortcut icon" href="/images/avatar.jpg" type="image/jpeg">
<link rel="stylesheet" href="/css/modern-normalize.css">
<link rel="stylesheet" href="/css/common.css">
<link rel="stylesheet" href="/css/userstyles.css">
</head>

<body>
<main class="bordered">
<h1 class="bordered">Userstyles</h1>

<ul class="bordered remove-a-padding">
<li>A collection of all my userstyles for various websites.</li>

<li>
Don't know how to install userstyles? Install the
<a href="https://add0n.com/stylus.html" target="_blank">Stylus web extension</a>
and then click on the "Install" button. This will open a new tab where Stylus
will ask you to install the userstyle in question.
</li>

<li>
Encounter an issue with any of the styles?
<a href="mailto:me@bauke.xyz">Email (me@bauke.xyz)</a>
or message me on Matrix (@baukexyz:matrix.org) and I'll try to fix
the problem as soon as possible.
</li>

<li>
Open-sourced with the MIT license, available at
<a href="https://git.holllo.cc/Bauke/userstyles" target="_blank">git.holllo.cc/Bauke/userstyles</a>.
</li>
</ul>

<div class="divider"></div>

{% for style in styles %}
<header class="bordered">
<h2 id="{{ style.name | lower | replace(" ", "-") }}">
{{ style.name }}
</h2>
<a class="button" href="{{ style.updateURL }}" target="_blank">Install</a>
</header>

<ul class="bordered">
<li>{{ style.description }}</li>
<li>Version {{ style.version }}</li>
<li>Licensed under {{ style.license }}.</li>
<li>
Applies to
<a class="remove-padding" href="https://{{ style.domain }}" target="_blank">{{ style.domain }}</a>.
</li>
</ul>

{% if not loop.last %}
<div class="divider"></div>
{% endif %}
{% endfor %}
</main>

<footer class="bordered">
<p>
&copy; Bauke
<a href="https://creativecommons.org/licenses/by-sa/4.0/" target="_blank">CC BY-SA 4.0</a>
</p>
</footer>
</body>

</html>

+ 3221
- 4454
yarn.lock
File diff suppressed because it is too large
View File


Loading…
Cancel
Save