Bauke/bauke-xyz
Bauke
/
bauke-xyz
1
Fork 0
Code Releases 12 Activity

Start over with Rust.

This commit is contained in:
Bauke 2021-08-26 17:52:13 +02:00
parent e3089afaf1
commit 8597ec3f37
Signed by: Bauke
GPG Key ID: C1C0F29952BCF558
35 changed files with 3962 additions and 5259 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
.gitignore vendored
View File

@ -103,5 +103,16 @@ dist
# TernJS port file # TernJS port file
.tern-port .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/ public/

25
Cargo.toml Normal file
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"]

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
Trunk.toml Normal file
View File

@ -0,0 +1,9 @@
[build]
dist = "public"
[serve]
no_autoreload = false
port = 5500
[clean]
dist = "public"

19
index.html Normal file
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>

53
package.json
View File

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

2
rustfmt.toml Normal file
View File

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

10
source/components/mod.rs Normal file
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
source/components/page_footer.rs Normal file
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
source/components/page_header.rs Normal file
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
source/components/page_main.rs Normal file
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>
}
}
}

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

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 118 KiB

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>

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();
}

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
source/main.rs Normal file
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>();
}

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
source/scss/_mixins.scss Normal file
View File

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

14
source/scss/_reset.scss Normal file
View File

@ -0,0 +1,14 @@
h1,
h2,
h3,
h4,
h5,
ol,
ul,
li,
p,
button,
input {
margin: 0;
padding: 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%;
}
}

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
source/scss/components/_page-footer.scss Normal file
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
source/scss/components/_page-header.scss Normal file
View File

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

24
source/scss/components/_page-main.scss Normal file
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;
}
}
}
}

33
source/scss/index.scss
View File

@ -1,5 +1,30 @@
body { @import 'reset';
--border-accent: var(--da-5); @import 'mixins';
--page-accent-1: var(--da-7);
--page-accent-2: var(--da-3); html {
font-size: 62.5%;
} }
body {
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';

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
source/scss/modern-normalize.scss Normal file
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;
}

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;
}

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;
}

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();
}

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>

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();
}

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>

7601
yarn.lock
View File

File diff suppressed because it is too large Load Diff