Compare commits

..

No commits in common. "pages" and "prod" have entirely different histories.

17 changed files with 298 additions and 100 deletions

3
.gitignore vendored Normal file
View file

@ -0,0 +1,3 @@
package-lock.json
node_modules/
*.~undo-tree~

1
.naverc Normal file
View file

@ -0,0 +1 @@
lts

View file

@ -1 +0,0 @@
2dfd947

View file

@ -1,7 +1,36 @@
DATE=$(shell date -Is)
ifndef dev
sass_opts = --no-source-map --style=compressed
else
compile_opts = dev
endif
.PHONY: all
all: build/index.html build/style.css
.PHONY: clean
clean:
rm -v build/index.html build/style.css*
.PHONY: serve
serve: all
php -S 0.0.0.0:7654 -t build
build/index.html: index.html config.toml compile.js
node compile.js $(compile_opts)
build/style.css: scss/style.scss node_modules/bootstrap/scss/_root.scss
npx sass $(sass_opts) $< $@
node_modules/bootstrap/scss/_root.scss: package-lock.json
npm ci
package-lock.json: package.json
npm install
.PHONY: deploy
deploy:
git add .
git commit -m "Deployed on $(DATE)"
git push codeberg pages
deploy: ../links-pages/index.html ../links-pages/Makefile
$(MAKE) -C ../links-pages
../links-pages/index.html: all
git rev-parse --short @ > build/.version
rsync -av --exclude=.gitignore --exclude='*.~undo-tree~' --delete --filter='P .git' build/ ../links-pages

0
README.md Normal file
View file

4
build/.gitignore vendored Normal file
View file

@ -0,0 +1,4 @@
index.html
style.css
style.css.map
.version

7
build/Makefile Normal file
View file

@ -0,0 +1,7 @@
DATE=$(shell date -Is)
.PHONY: deploy
deploy:
git add .
git commit -m "Deployed on $(DATE)"
git push codeberg pages

View file

Before

Width:  |  Height:  |  Size: 50 KiB

After

Width:  |  Height:  |  Size: 50 KiB

Before After
Before After

View file

Before

Width:  |  Height:  |  Size: 2.7 MiB

After

Width:  |  Height:  |  Size: 2.7 MiB

Before After
Before After

39
compile.js Normal file
View file

@ -0,0 +1,39 @@
/* global process */
const { parse } = require('@ltd/j-toml');
const { render } = require('mustache');
const { readFile, writeFile } = require('node:fs/promises');
const { resolve } = require('node:path');
const util = require('node:util');
const exec = util.promisify(require('node:child_process').exec);
async function compile() {
const { stdout, stderr } = await exec('git rev-parse --short @');
const confPath = resolve('./config.toml');
const confToml = await readFile(confPath, { encoding: 'utf8' });
const config = parse(confToml);
config.version = stdout.trim();
config.slug = function () {
return this.text ? this.text.toLowerCase() : this.icon;
};
config.text = function () {
const string = this.icon;
return string.charAt(0).toUpperCase() + string.slice(1);
};
if (process.argv[2] === 'dev') {
config.umami.website_id = config.umami.dev_website_id;
}
const tempPath = resolve('./index.html');
const template = await readFile(tempPath, { encoding: 'utf8' });
const out = render(template, config);
const outPath = resolve('./build/index.html');
await writeFile(outPath, out);
}
compile();

104
config.toml Normal file
View file

@ -0,0 +1,104 @@
title = "Dan Jones's Links"
name = "Dan Jones"
[umami]
website_id = "698f40c8-f098-4287-8d01-f98e55902d6c"
dev_website_id = "23b68fab-0a02-4e81-8240-63bec79b5f2e"
[[links]]
icon = "pen-fancy"
la = "las"
text = "Microblog"
slug = "microwords"
url = "https://microwords.goodevilgenius.org"
note = "Better than the birdsite"
[[links]]
icon = "blog"
la = "las"
text = "Dan's Musings"
slug = "musings"
url = "https://goodevilgenius.org"
note = "My blog"
[[links]]
icon = "swatchbook"
la = "las"
text = "Résumé"
slug = "danielrayjones"
url = "https://danielrayjones.com/"
[[links]]
icon = "code-branch"
la = "las"
text = "Codeberg"
url = "https://codeberg.org/danjones000/"
note = "I put most of my new projects here"
[[links]]
icon = "gitlab"
url = "https://gitlab.com/danjones000"
[[links]]
icon = "github"
url = "https://github.com/goodevilgenius"
note = "I don't use this much anymore"
[[links]]
icon = "linkedin"
text = "LinkedIn"
url = "https://www.linkedin.com/in/DanJones000/"
[[links]]
icon = "book-reader"
la = "las"
text = "Bookwyrm"
slug = "bookwyrm"
url = "https://book.dansmonorage.blue/user/danjones000"
note = "Better than Goodreads"
[[links]]
icon = "goodreads"
url = "https://www.goodreads.com/user/show/2404213-dan-jones"
note = "Not as good as Bookwyrm"
[[links]]
icon = "film"
la = "las"
text = "Trakt"
url = "https://trakt.tv/users/goodevilgenius/"
note = "Keep track of my TV & Movie watching. Like last.fm for TV"
[[links]]
icon = "map-marked-alt"
slug = "openstreetmap"
text = "OpenStreetMap"
la = "las"
note = "Sometimes I contribute to OpenStreetMap"
url = "https://www.openstreetmap.org/user/DanJones000"
[[links]]
icon = "mastodon"
text = "Mastodon (backup)"
url = "https://fosstodon.org/@danjones000"
note = "Still better than Twitter, but I don't post here much. Check out my microblog instead"
[[links]]
icon = "comment-dots"
la = "las"
text = "XMPP/Jabber"
slug = "xmpp"
url = "xmpp:danjones000@conversations.im"
[[links]]
icon = "sms"
la = "las"
text = "Matrix"
url = "https://matrix.to/#/@danjones000:matrix.org"
[[links]]
icon = "at"
la = "las"
text = "Email"
url = "mailto:danjones@goodevilgenius.org"
note = "Last resort"

View file

@ -3,116 +3,34 @@
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Dan Jones&#39;s Links</title>
<title>{{title}}</title>
<link rel="stylesheet" href="https://maxst.icons8.com/vue-static/landings/line-awesome/line-awesome/1.3.0/css/line-awesome.min.css"/>
<link rel="stylesheet" href="style.css?ver=2dfd947"/>
<script async data-website-id="698f40c8-f098-4287-8d01-f98e55902d6c" data-do-not-track="true" src="https://whoami.goodevilgenius.org/whoami.js"></script>
<script async src="app.js?ver=2dfd947"></script>
<link rel="stylesheet" href="style.css?ver={{version}}"/>
<script async data-website-id="{{umami.website_id}}" data-do-not-track="true" src="https://whoami.goodevilgenius.org/whoami.js"></script>
<script async src="app.js?ver={{version}}"></script>
</head>
<body>
<header class="py-3 mb-4 border-bottom">
<figure class="figure">
<img src="img/ai-mirror-watercolor.jpg" class="figure-img img-fluid rounded-circle" alt="Dan Jones"/>
<img src="img/ai-mirror-watercolor.jpg" class="figure-img img-fluid rounded-circle" alt="{{name}}"/>
</figure>
<div class="container d-flex flex-wrap justify-content-center">
<h1 class="d-flex align-items-center me-lg-auto text-dark px-4 py-2 border border-white rounded">
Dan Jones
{{name}}
</h1>
</div>
</header>
<section id="links" class="container">
<ul class="list-group">
{{#links}}
<li class="list-group-item text-center">
<a href="https://microwords.goodevilgenius.org" data-name="microwords" rel="me" class="fs-4 text-decoration-none text-dark" title="Better than the birdsite">
<i class="las la-pen-fancy"></i>
Microblog
</a>
</li>
<li class="list-group-item text-center">
<a href="https://goodevilgenius.org" data-name="musings" rel="me" class="fs-4 text-decoration-none text-dark" title="My blog">
<i class="las la-blog"></i>
Dan&#39;s Musings
</a>
</li>
<li class="list-group-item text-center">
<a href="https://danielrayjones.com/" data-name="danielrayjones" rel="me" class="fs-4 text-decoration-none text-dark" >
<i class="las la-swatchbook"></i>
Résumé
</a>
</li>
<li class="list-group-item text-center">
<a href="https://codeberg.org/danjones000/" data-name="codeberg" rel="me" class="fs-4 text-decoration-none text-dark" title="I put most of my new projects here">
<i class="las la-code-branch"></i>
Codeberg
</a>
</li>
<li class="list-group-item text-center">
<a href="https://gitlab.com/danjones000" data-name="gitlab" rel="me" class="fs-4 text-decoration-none text-dark" >
<i class="lab la-gitlab"></i>
Gitlab
</a>
</li>
<li class="list-group-item text-center">
<a href="https://github.com/goodevilgenius" data-name="github" rel="me" class="fs-4 text-decoration-none text-dark" title="I don&#39;t use this much anymore">
<i class="lab la-github"></i>
Github
</a>
</li>
<li class="list-group-item text-center">
<a href="https://www.linkedin.com/in/DanJones000/" data-name="linkedin" rel="me" class="fs-4 text-decoration-none text-dark" >
<i class="lab la-linkedin"></i>
LinkedIn
</a>
</li>
<li class="list-group-item text-center">
<a href="https://book.dansmonorage.blue/user/danjones000" data-name="bookwyrm" rel="me" class="fs-4 text-decoration-none text-dark" title="Better than Goodreads">
<i class="las la-book-reader"></i>
Bookwyrm
</a>
</li>
<li class="list-group-item text-center">
<a href="https://www.goodreads.com/user/show/2404213-dan-jones" data-name="goodreads" rel="me" class="fs-4 text-decoration-none text-dark" title="Not as good as Bookwyrm">
<i class="lab la-goodreads"></i>
Goodreads
</a>
</li>
<li class="list-group-item text-center">
<a href="https://trakt.tv/users/goodevilgenius/" data-name="trakt" rel="me" class="fs-4 text-decoration-none text-dark" title="Keep track of my TV &amp; Movie watching. Like last.fm for TV">
<i class="las la-film"></i>
Trakt
</a>
</li>
<li class="list-group-item text-center">
<a href="https://www.openstreetmap.org/user/DanJones000" data-name="openstreetmap" rel="me" class="fs-4 text-decoration-none text-dark" title="Sometimes I contribute to OpenStreetMap">
<i class="las la-map-marked-alt"></i>
OpenStreetMap
</a>
</li>
<li class="list-group-item text-center">
<a href="https://fosstodon.org/@danjones000" data-name="mastodon (backup)" rel="me" class="fs-4 text-decoration-none text-dark" title="Still better than Twitter, but I don&#39;t post here much. Check out my microblog instead">
<i class="lab la-mastodon"></i>
Mastodon (backup)
</a>
</li>
<li class="list-group-item text-center">
<a href="xmpp:danjones000@conversations.im" data-name="xmpp" rel="me" class="fs-4 text-decoration-none text-dark" >
<i class="las la-comment-dots"></i>
XMPP&#x2F;Jabber
</a>
</li>
<li class="list-group-item text-center">
<a href="https://matrix.to/#/@danjones000:matrix.org" data-name="matrix" rel="me" class="fs-4 text-decoration-none text-dark" >
<i class="las la-sms"></i>
Matrix
</a>
</li>
<li class="list-group-item text-center">
<a href="mailto:danjones@goodevilgenius.org" data-name="email" rel="me" class="fs-4 text-decoration-none text-dark" title="Last resort">
<i class="las la-at"></i>
Email
<a href="{{{url}}}" data-name="{{slug}}" rel="me" class="fs-4 text-decoration-none text-dark" {{#note}}title="{{.}}"{{/note}}>
<i class="{{la}}{{^la}}lab{{/la}} la-{{icon}}"></i>
{{text}}
</a>
</li>
{{/links}}
</ul>
</section>
</body>

24
package.json Normal file
View file

@ -0,0 +1,24 @@
{
"name": "links",
"version": "1.0.0",
"description": "my personal link tree",
"main": "compile.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"repository": {
"type": "git",
"url": "https://codeberg.org/danjones000/links.git"
},
"keywords": [
"links"
],
"author": "Dan Jones",
"license": "AGPL-3.0-or-later",
"dependencies": {
"@ltd/j-toml": "^1.36.0",
"bootstrap": "^5.2.3",
"mustache": "^4.2.0",
"sass": "^1.57.1"
}
}

71
scss/style.scss Normal file
View file

@ -0,0 +1,71 @@
@use "sass:map";
// 1. Include functions first (so you can manipulate colors, SVGs, calc, etc)
@import "../node_modules/bootstrap/scss/functions";
// 2. Include any default variable overrides here
$list-group-bg: inherit;
$mostly-white: rgba(255,255,255, 0.7);
// 3. Include remainder of required Bootstrap stylesheets
@import "../node_modules/bootstrap/scss/variables";
// 4. Include any default map overrides here
// 5. Include remainder of required parts
@import "../node_modules/bootstrap/scss/maps";
@import "../node_modules/bootstrap/scss/mixins";
@import "../node_modules/bootstrap/scss/root";
// 6. Optionally include any other parts as needed
@import "../node_modules/bootstrap/scss/utilities";
@import "../node_modules/bootstrap/scss/reboot";
// @import "../node_modules/bootstrap/scss/type";
// @import "../node_modules/bootstrap/scss/images";
@import "../node_modules/bootstrap/scss/containers";
@import "../node_modules/bootstrap/scss/grid";
@import "../node_modules/bootstrap/scss/list-group";
@import "../node_modules/bootstrap/scss/helpers";
// 7. Optionally include utilities API last to generate classes based on the Sass map in `_utilities.scss`
@import "../node_modules/bootstrap/scss/utilities/api";
// 8. Add additional custom code here
body {
background-image: linear-gradient(rgba(0,0,0,.6),rgba(0,0,0,.3)), url('img/pexels-bert-5985264.jpg');
height: 120vh;
background-position: center;
background-size: cover;
}
header {
h1 {
background-color: $mostly-white;
margin: 0 auto;
}
figure {
max-width: 10rem;
text-align: center;
margin: map.get($spacers, 5) auto $spacer;
img {
max-width: 100%;
}
}
}
section ul {
background-color: $mostly-white;
max-width: 20rem;
margin: 1rem auto;
li {
width: 100%;
overflow: auto;
i {
float: left;
}
}
}

File diff suppressed because one or more lines are too long