1
Fork 0

Add a userstyles page.

This commit is contained in:
Bauke 2020-08-02 17:03:31 +02:00
parent 1988f0d324
commit 7aff924a13
Signed by: Bauke
GPG Key ID: C1C0F29952BCF558
8 changed files with 1694 additions and 46 deletions

3
.gitignore vendored
View File

@ -105,3 +105,6 @@ dist
# Build directory. # Build directory.
public/ public/
submodules/*
!submodules/.gitkeep

View File

@ -8,6 +8,8 @@
To build the site [Node](https://nodejs.org) and [Yarn](https://yarnpkg.com) are required. To build the site [Node](https://nodejs.org) and [Yarn](https://yarnpkg.com) are required.
Make sure the dependencies are installed in the project root and the submodules with `yarn --silent`. For more information see the [`.gitkeep` file in `submodules/`](https://git.holllo.cc/Bauke/bauke.xyz/src/branch/main/submodules/.gitkeep).
Then, run `yarn build`. The site will be built to the `public/` directory. Then, run `yarn build`. The site will be built to the `public/` directory.
## License ## License

View File

@ -1,16 +1,17 @@
{ {
"name": "bauke.xyz", "name": "bauke.xyz",
"description": "My personal website.", "description": "My personal website.",
"version": "0.1.5", "version": "0.1.6",
"author": "Bauke <me@bauke.xyz>", "author": "Bauke <me@bauke.xyz>",
"homepage": "https://bauke.xyz", "homepage": "https://bauke.xyz",
"repository": "https://git.holllo.cc/Bauke/bauke.xyz", "repository": "https://git.holllo.cc/Bauke/bauke.xyz",
"license": "MIT", "license": "MIT",
"scripts": { "scripts": {
"start": "nodemon --watch 'source/' --exec 'yarn build' --ext 'html css'", "start": "nodemon --watch 'source/' --exec 'yarn build' --ext 'html css'",
"build": "cpy '**' '../public/' --cwd='source' --parents && yarn build:css", "build": "cpy '**' '!index.js' '!userstyles/*' '../public/' --cwd='source' --parents && yarn build:css && yarn build:userstyles",
"build:css": "cpy 'node_modules/modern-normalize/modern-normalize.css' 'public/css/'", "build:css": "cpy 'node_modules/modern-normalize/modern-normalize.css' 'public/css/'",
"test": "stylelint 'source/css/*.css'", "build:userstyles": "node 'source/index.js'",
"test": "xo && stylelint 'source/css/*.css'",
"deploy": "rm -rf 'public/' && yarn build && yarn deploy:netlify", "deploy": "rm -rf 'public/' && yarn build && yarn deploy:netlify",
"deploy:netlify": "netlify deploy --prod --dir 'public/' -s 37bb1f7c-2abb-419f-9a31-a4b72209c1c8" "deploy:netlify": "netlify deploy --prod --dir 'public/' -s 37bb1f7c-2abb-419f-9a31-a4b72209c1c8"
}, },
@ -22,8 +23,10 @@
"husky": "^4.2.5", "husky": "^4.2.5",
"netlify-cli": "^2.58.0", "netlify-cli": "^2.58.0",
"nodemon": "^2.0.4", "nodemon": "^2.0.4",
"nunjucks": "^3.2.2",
"stylelint": "^13.6.1", "stylelint": "^13.6.1",
"stylelint-config-xo-space": "^0.14.0" "stylelint-config-xo-space": "^0.14.0",
"xo": "^0.32.1"
}, },
"stylelint": { "stylelint": {
"extends": [ "extends": [
@ -33,6 +36,16 @@
"no-descending-specificity": null "no-descending-specificity": null
} }
}, },
"xo": {
"ignores": [
"submodules/**/*.js"
],
"prettier": true,
"rules": {
"no-await-in-loop": "off"
},
"space": true
},
"husky": { "husky": {
"hooks": { "hooks": {
"pre-commit": "yarn test", "pre-commit": "yarn test",

28
source/css/userstyles.css Normal file
View File

@ -0,0 +1,28 @@
header {
align-items: center;
background-color: #2a2041;
border: 1px solid #3bd18a;
display: flex;
justify-content: center;
padding: 16px;
width: 100%;
}
h2 {
margin-right: auto;
padding: 0;
}
a.install {
background-color: #3bd18a;
color: #1f1731;
}
a.install:hover {
background-color: #96c839;
}
.remove-padding,
.remove-a-padding a {
padding: 0;
}

58
source/index.js Normal file
View File

@ -0,0 +1,58 @@
const {promises: fsp} = require('fs');
const nunjucks = require('nunjucks');
const {join} = require('path');
const {build} = require('../submodules/userstyles/source');
const {
readStyleMetadata
} = require('../submodules/userstyles/source/utilities');
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, '../submodules/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})
);
}
// Run `main()` if this script was called directly (like `node source/index.js`).
if (require.main === module) {
main();
}

View File

@ -0,0 +1,74 @@
<!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="stylesheet" href="../css/modern-normalize.css">
<link rel="stylesheet" href="../css/index.css">
<link rel="stylesheet" href="../css/userstyles.css">
</head>
<body>
<main>
<h1>Userstyles</h1>
<ul class="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
your problem as soon as possible.
</li>
<li>
Open-sourced with the MIT license, available at
<a href="git.holllo.cc/Bauke/userstyles" target="_blank">git.holllo.cc/Bauke/userstyles</a>.
</li>
</ul>
<div class="divider"></div>
{% for style in styles %}
<header>
<h2 id="{{ style.name | lower | replace(" ", "-") }}">
{{ style.name }}
</h2>
<a class="install" href="{{ style.updateURL }}" target="_blank">Install</a>
</header>
<ul>
<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 }}">{{ style.domain }}</a>.
</li>
</ul>
{% if not loop.last %}
<div class="divider"></div>
{% endif %}
{% endfor %}
</main>
<footer>
<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>

12
submodules/.gitkeep Normal file
View File

@ -0,0 +1,12 @@
# This `submodules` directory exists to hold external projects, but without using
# Git's submodule functionality (because they're kind of a pain in the ass to use).
# To initialize the submodules needed to build the website, run the following
# commands in this directory.
git clone git@git.holllo.cc/Bauke/userstyles.git
cd userstyles
yarn --silent
# Then, if they ever need to be updated, just pull the changes and run Yarn
# again, if necessary.

1542
yarn.lock

File diff suppressed because it is too large Load Diff