users/foo-dogsquared/programs/browsers: init and set custom homepage

This commit is contained in:
Gabriel Arazas 2024-09-02 12:03:04 +08:00
parent bffd3d003b
commit 657afd19d6
No known key found for this signature in database
GPG Key ID: 62104B43D00AA360
21 changed files with 496 additions and 0 deletions

View File

@ -0,0 +1,16 @@
### Hugo ###
# Generated files by hugo
/public/
/resources/_gen/
/assets/jsconfig.json
hugo_stats.json
# Executable may be added to repository
hugo.exe
hugo.darwin
hugo.linux
# Temporary lock file while building
/.hugo_build.lock

View File

@ -0,0 +1,7 @@
.PHONY: build
build:
hugo --destination public
.PHONY: serve
serve:
hugo serve

View File

@ -0,0 +1,33 @@
= foodogsquared's custom homepage
:toc:
My custom homepage intended to be deployed alongside my home-manager configuration.
In theory, you could deploy this outside of the home-manager config but that's on you (READ: anyone that is not foodogsquared) to figure out.
It should be fairly easy to do that though since all you need is the following list of components to successfully build the website:
* GNU Make for its build automation.
This is structured in this way to make building consistent either with Nix and non-Nix'd environments.
* https://gohugo.io/[Hugo] is the site generator mainly designed to be deployed with one binary.
* https://foo-dogsquared.github.io/panapton[Panapton] to compile the stylesheet with my custom scheme.
In place of this, you could use other Base16 builders but you'll have to recreate the stylesheet template for that particular builder.
There are some design constraints when developing this website.
* This homepage is pretty much designed to be completely possible to use entirely offline.
As such, it has a design constraint of using less (zero as much as possible) remote resources such as a CDN.
Usage of third-party libraries are fine as long as it is bundled nicely (we'll probably use something like https://bun.sh/[Bun] for this).
* We cannot use anything within the site generator requiring a network access mostly because we're relying on the Nix which has sandboxing by default including networking isolation. footnote:[While we can remove it ourselves, it isn't really good practice.]
As a neat side effect, it also strengthens the previous goal of keeping it as offline as possible.
[#development]
== Development
It is recommended to set up the development environment with https://nixos.org/[Nix package manager].
In case it isn't possible to use it, you'll have to install the following tools.
* Hugo v0.130.0 and above
* https://treefmt.com/[treefmt]

View File

@ -0,0 +1,69 @@
:root {
height: 100%;
font-size: 1.1em;
--background: var(--base00);
--foreground: var(--base05);
--accent-color: var(--base0C);
}
body {
min-height: 100%;
margin: 0;
background: var(--background);
}
#links {
--width: 40ch;
display: grid;
grid-auto-flow: column;
grid-auto-columns: var(--width);
grid-template-columns: repeat(auto-fill, minmax(var(--width), 1fr));
gap: 0.5em;
// Place it at the very center.
position: absolute;
top: 30%;
margin-top: calc(var(--width) / 2);
margin-left: calc(0 - var(--width));
height: auto;
margin: 0 auto;
overflow-x: scroll;
section[id^="section-"] {
background: var(--foreground);
color: var(--background);
font-family: sans-serif;
border: 0.5em solid var(--accent-color);
padding: 1rem;
text-align: center;
.nav-header {
font-size: 1.5em;
font-weight: bolder;
}
.flavor-text {
font-size: 0.9em;
font-style: italic;
display: inline-block;
width: 100%;
}
nav {
display: flex;
flex-direction: column;
}
a {
color: var(--background);
&:hover {
color: var(--accent-color);
}
}
}
}

View File

@ -0,0 +1,9 @@
{{- /*
This template applies an ID to an SVG from the Heroicons set to be used with `<use>` element.
*/ -}}
{{- $match := "^\\s*<svg (.*)?>" }}
{{- $name := default .id .name }}
{{- $icon := resources.Get (printf "svg/heroicons/24/solid/%s.svg" .id) }}
{{- $replaceWith := printf `<svg id="%s" ${1}>` $name }}
{{- replaceRE $match $replaceWith $icon.Content | safeHTML -}}

View File

@ -0,0 +1,9 @@
{{- /*
This template applies an ID to an SVG from the Simple Icons set to be used with `<use>` element.
*/ -}}
{{- $match := "<svg (.*)?>\\s*(.*)\\s*</svg>" }}
{{- $name := default .id .name }}
{{- $icon := resources.Get (printf "svg/simple-icons/%s.svg" .id) }}
{{- $replaceWith := printf `<svg id="%s" ${1}>${2}</svg>` $name }}
{{- replaceRE $match $replaceWith $icon.Content | safeHTML }}

View File

@ -0,0 +1,113 @@
{{ $data := newScratch }}
{{/*
Create an automatic way of generating system color schemes, if set by the user.
* If either only one is set, generate an appropriate color scheme with the given color scheme.
For example, if there is only a given dark theme, the theme will generate a light color scheme.
* If given neither, go with the fallback themes.
*/}}
{{ $themes := (index $.Site.Data "foodogsquared-homepage").themes }}
{{ $hasLight := $themes._light }}
{{ $hasDark := $themes._dark }}
{{ $hasSystemTheme := or $hasLight $hasDark }}
{{/*
Take note how the other half get its colors. It's not exactly a color
string but it is a SASS expression to be evaluated and put into string
interpolation in SASS.
*/}}
{{ if (and $hasLight (not $hasDark)) }}
{{- warnf "No given dark theme. Generating one from the light theme..." }}
{{ $darkTheme := dict
"scheme" (printf "%s (light)" $hasLight.scheme)
"base00" $hasLight.base07
"base01" $hasLight.base06
"base02" $hasLight.base05
"base03" $hasLight.base04
"base04" $hasLight.base03
"base05" $hasLight.base02
"base06" $hasLight.base01
"base07" $hasLight.base00
"base08" (print "{lighten(saturate(#" $hasLight.base08 ", 10%), 15%)}")
"base09" (print "{lighten(saturate(#" $hasLight.base09 ", 10%), 15%)}")
"base0A" (print "{lighten(saturate(#" $hasLight.base0A ", 10%), 15%)}")
"base0B" (print "{lighten(saturate(#" $hasLight.base0B ", 10%), 15%)}")
"base0C" (print "{lighten(saturate(#" $hasLight.base0C ", 10%), 15%)}")
"base0D" (print "{lighten(saturate(#" $hasLight.base0D ", 10%), 15%)}")
"base0E" (print "{lighten(saturate(#" $hasLight.base0E ", 10%), 15%)}")
"base0F" (print "{lighten(saturate(#" $hasLight.base0F ", 10%), 15%)}")
}}
{{ $themes = merge $themes (dict "_dark" $darkTheme) }}
{{ else if (and $hasDark (not $hasLight)) }}
{{- warnf "No given light theme. Generating one from the dark theme..." }}
{{ $lightTheme := dict
"scheme" (printf "%s (light)" $hasDark.scheme)
"base00" $hasDark.base07
"base01" $hasDark.base06
"base02" $hasDark.base05
"base03" $hasDark.base04
"base04" $hasDark.base03
"base05" $hasDark.base02
"base06" $hasDark.base01
"base07" $hasDark.base00
"base08" (print "{darken(saturate(#" $hasDark.base08 ", 10%), 15%)}")
"base09" (print "{darken(saturate(#" $hasDark.base09 ", 10%), 15%)}")
"base0A" (print "{darken(saturate(#" $hasDark.base0A ", 10%), 15%)}")
"base0B" (print "{darken(saturate(#" $hasDark.base0B ", 10%), 15%)}")
"base0C" (print "{darken(saturate(#" $hasDark.base0C ", 10%), 15%)}")
"base0D" (print "{darken(saturate(#" $hasDark.base0D ", 10%), 15%)}")
"base0E" (print "{darken(saturate(#" $hasDark.base0E ", 10%), 15%)}")
"base0F" (print "{darken(saturate(#" $hasDark.base0F ", 10%), 15%)}")
}}
{{ $themes = merge $themes (dict "_light" $lightTheme) }}
{{ else if not $hasSystemTheme }}
{{ $systemThemes := dict
"_dark" $themes._dark_fallback
"_light" $themes._light_fallback
}}
{{ $themes = merge $systemThemes $themes }}
{{ end }}
{{- range $name, $scheme := $themes }}
// This is a template for a colorscheme based from a Base16 data file from
// https://github.com/chriskempson/base16.
@mixin createColorScheme {
{{- range $i := seq 0 15 }}
{{- $hex := upper (printf "%02x" $i) }}
{{- $key := printf "base%s" $hex }}
// TODO: Make a better way to interpolate the color strings.
{{/* We're just taking advantage the fact that the SASS color functions
returns the colors in the same format we needed. */}}
{{- $color := printf "#%s" (index $scheme $key) }}
--{{ $key }}: {{ $color }};
{{- end }}
}
{{- if (or (eq $name "_light_fallback") (eq $name "_dark_fallback")) }}
{{ continue }}
{{- end }}
{{- if eq $name "_light" }}
:root {
@include createColorScheme
}
@media (prefers-color-scheme: light) {
:root, ::backdrop {
@include createColorScheme
}
}
{{- else if eq $name "_dark" }}
@media (prefers-color-scheme: dark) {
:root, ::backdrop {
@include createColorScheme
}
}
{{- end }}
[data-theme="{{ .scheme }}"]:root, [data-theme="{{ .scheme }}"]::backdrop {
@include createColorScheme;
}
{{- end }}

View File

@ -0,0 +1,5 @@
baseURL = "./"
defaultContentLanguage = "en"
title = "foodogsquared's homepage"
timeZone = "UTC"
disableKinds = [ "taxonomy", "sitemap", "robotstxt", "rss" ]

View File

@ -0,0 +1,13 @@
[[imports]]
path = "github.com/foo-dogsquared/hugo-mod-simple-icons"
[[imports]]
path = "github.com/Templarian/MaterialDesign"
[[imports.mounts]]
source = "svg/"
target = "assets/svg/material-design-icons/"
[[imports.mounts]]
source = "meta.json"
target = "data/icons/material-design-icons/meta.json"

View File

@ -0,0 +1,72 @@
[quicklinks]
name = "Quicklinks"
flavorText = "For the quick-wilting brain"
textOnly = true
weight = -100
links = [
{ url = "org-protocol://wiki-open-up-b4-u-todo-anything?where=latest", text = "YOUR GODFORSAKEN TODO LIST" },
{ url = "org-protocol://wiki-open-journal?when=today", text = "Open journal for today" },
{ url = "org-protocol://roam-node?node=41da43fe-a8a9-4a2e-a361-05a11ce8b318", text = "Open todo for today" },
{ url = "https://login.tailscale.com", text = "Tailscale" },
{ url = "https://devdocs.io", text = "Devdocs" },
]
[applications]
name = "Applications"
flavorText = "Self-hosting is not the answer to everything, btw"
weight = -1
textOnly = false
links = [
{ url = "https://start.foodogsquared.one", text = "The other homepage" },
{ url = "https://code.foodogsquared.one", icon = "gitea", text = "Personal forge" },
{ url = "https://pass.foodogsquared.one", icon = "bitwarden", text = "Password manager" },
{ url = "https://monitoring.foodogsquared.one", icon = "grafana", text = "Monitoring application" },
]
[dev]
name = "Software dev"
flavorText = "...is just standing on a house of cards"
textOnly = true
links = [
{ url = "https://github.com", text = "GitHub" },
{ url = "https://sourcegraph.com", text = "SourceGraph" },
{ url = "https://devdocs.io", text = "Devdocs" },
{ url = "https://vscode.dev", text = "Online Visual Studio Code" },
{ url = "https://cloud.oracle.com", text = "Oracle Cloud" },
{ url = "https://cloud.hetzner.com", text = "Hetzner Cloud" },
]
[design]
name = "Design"
flavorText = "No matter how hard I try, it's pretty crap"
textOnly = true
links = [
{ url = "https://www.awwwards.com/", text = "Awwwards" },
{ url = "https://dribbble.com", text = "Dribbble" },
{ url = "https://simpleicons.org/", text = "Simple Icons" },
{ url = "https://pictogrammers.com/library/mdi/", text = "Material Design Icons" },
]
[music]
name = "Music"
flavorText = "Jammin' and groovin'"
textOnly = true
links = [
{ url = "https://music.youtube.com", text = "YouTube Music" },
{ url = "https://open.spotify.com", text = "Spotify" },
{ url = "https://www.last.fm", text = "last.fm" },
{ url = "https://modarchive.org/", text = "The Mod Archive" },
]
[YOHOOHOOHOOHOO]
name = "🏴💀🏴"
flavorText = "Sailing on the high seas"
textOnly = true
weight = 100
links = [
{ url = "https://libgen.is/", text = "Library Genesis" },
{ url = "https://sci-hub.se/", text = "sci-hub" },
{ url = "https://archive.org", text = "Internet Archive" },
{ url = "https://annas-archive.se/", text = "Anna's Archive" },
{ url = "https://archive.softwareheritage.org", text = "Software Heritage" },
]

View File

@ -0,0 +1,18 @@
scheme: "Bark on a tree"
author: "Gabriel Arazas (https://foo-dogsquared.github.io)"
base00: "2b221f"
base01: "412c26"
base02: "5c362c"
base03: "a45b43"
base04: "e1bcb2"
base05: "f5ecea"
base06: "fefefe"
base07: "eb8a65"
base08: "d03e68"
base09: "df937a"
base0A: "afa644"
base0B: "85b26e"
base0C: "eb914a"
base0D: "c67f62"
base0E: "8b7ab9"
base0F: "7f3F83"

View File

@ -0,0 +1,18 @@
scheme: "Albino bark on a tree"
author: "Gabriel Arazas (https://foo-dogsquared.github.io)"
base00: "f0f0f0"
base01: "e1e3e2"
base02: "dacec7"
base03: "9d5c4c"
base04: "54352c"
base05: "392c26"
base06: "2b220f"
base07: "cb6d48"
base08: "b52b52"
base09: "d56f17"
base0A: "b0a52e"
base0B: "5c963e"
base0C: "e46403"
base0D: "954c2f"
base0E: "6751a5"
base0F: "55195a"

View File

@ -0,0 +1,5 @@
{ pkgs ? import <nixpkgs> {
overlays = [ (import ../../../../../overlays).default ];
} }:
pkgs.callPackage ./package.nix { }

View File

@ -0,0 +1,9 @@
module foodogsquared.one/nixos-homepage
go 1.22.5
require (
github.com/Templarian/MaterialDesign v0.0.0-20240619144146-ce55b68ba730 // indirect
github.com/foo-dogsquared/hugo-mod-simple-icons v0.0.0-20240829051824-890465b5b17e // indirect
github.com/simple-icons/simple-icons v0.0.0-20240828075807-7197fd28e247 // indirect
)

View File

@ -0,0 +1,6 @@
github.com/Templarian/MaterialDesign v0.0.0-20240619144146-ce55b68ba730 h1:x7myofnw5/5o02a3XMH0IKqGF1uTVdP7TSxEPiX3zKE=
github.com/Templarian/MaterialDesign v0.0.0-20240619144146-ce55b68ba730/go.mod h1:ERpxhfm8YCuNFFEBv+hLM4M4VOrfV5g/mpVMNEfj0MQ=
github.com/foo-dogsquared/hugo-mod-simple-icons v0.0.0-20240829051824-890465b5b17e h1:h4Abw0MZnXP2hFavjEEcXY+lCPJtNejp6CXntXwW8fA=
github.com/foo-dogsquared/hugo-mod-simple-icons v0.0.0-20240829051824-890465b5b17e/go.mod h1:rcVWEdpC9uuXK5ydiewUfaEcoKIZv+l91hphiKrxVq4=
github.com/simple-icons/simple-icons v0.0.0-20240828075807-7197fd28e247 h1:eKjM/xegyBg3XIb+p55bnnB6bD32e0GbCA/1/9vq8aY=
github.com/simple-icons/simple-icons v0.0.0-20240828075807-7197fd28e247/go.mod h1:oOgUUt8yVYOso/wEBi2ojfZP2MU/xxiNccIpaE+jCvE=

View File

@ -0,0 +1,29 @@
<!DOCTYPE html>
<html lang="{{ .Site.LanguageCode | default " en" }}">
<head>
{{ partial "head.html" . -}}
</head>
<body>
<div id="links">
{{ range $key, $value := sort (index $.Site.Data (slice "foodogsquared-homepage" "links")) "weight" }}
{{- $name := default $key $value.name -}}
<section id="section-{{ $name }}">
<span class="nav-header">{{ $name }}</span>
{{ with $value.flavorText }}
<span class="flavor-text">{{ . }}</span>
{{ end }}
<hr />
<nav>
{{ range $link := $value.links }}
<a href="{{ safeURL $link.url }}">{{ $link.text }}</a>
{{ end }}
</nav>
</section>
{{ end }}
</div>
</body>
</html>

View File

@ -0,0 +1,11 @@
{{ hugo.Generator }}
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="referrer" content="no-referrer" />
{{ $site := resources.Get "scss/main.scss" | resources.ToCSS }}
{{ $themes := resources.Get "templates/theme.scss" | resources.ExecuteAsTemplate "css/themes.css" . | resources.ToCSS }}
{{ $stylesheets := slice | append $site $themes | resources.Concat "css/main.css" }}
<link rel="stylesheet" href="{{ $stylesheets.RelPermalink }}" />
<title>{{ .Site.Title }}</title>

View File

@ -0,0 +1,15 @@
{{- /*
A partial for easily using icons from Simple Icons set.
*/ -}}
{{- $name := default .id .name }}
{{- $iconset := .iconset }}
{{- $output := cond "" "" "" }}
{{- $template := cond "" "" "" }}
{{- $res := resources.ExecuteAsTemplate (printf $output .id)
(dict "id" .id
"name" $name)
(resources.Get $template) }}
<svg class="site__icon">
<use href="{{ $res.RelPermalink }}#{{ $name }}"></use>
</svg>

View File

@ -0,0 +1,22 @@
{
buildHugoSite,
lib,
}:
buildHugoSite {
pname = "foodogsquared-hm-startpage";
version = "0.1.0";
src = lib.cleanSource ./.;
vendorHash = "sha256-Mi61QK1yKWIneZ+i79fpJqP9ew5r5vnv7ptr9YGq0Uk=";
preBuild = ''
install -Dm0644 ${../tinted-theming/base16/bark-on-a-tree.yaml} ./data/foodogsquared-homepage/themes/_dark.yaml
install -Dm0644 ${../tinted-theming/base16/albino-bark-on-a-tree.yaml} ./data/foodogsquared-homepage/themes/_dark.yaml
'';
meta = with lib; {
description = "foodogsquared's homepage";
license = licenses.gpl3Only;
};
}

View File

@ -0,0 +1,14 @@
{ pkgs ? import <nixpkgs> {
overlays = [ (import ../../../../../overlays).default ];
} }:
let
site = pkgs.callPackage ./package.nix { };
in
pkgs.mkShell {
inputsFrom = [ site ];
packages = with pkgs; [
treefmt
npins
];
}

View File

@ -4,6 +4,8 @@
let let
userCfg = config.users.foo-dogsquared; userCfg = config.users.foo-dogsquared;
cfg = userCfg.programs.browsers; cfg = userCfg.programs.browsers;
homepage = pkgs.callPackage ../../files/homepage/package.nix { };
in in
{ {
options.users.foo-dogsquared.programs.browsers = { options.users.foo-dogsquared.programs.browsers = {
@ -130,6 +132,7 @@ in
# Some quality of lifes. # Some quality of lifes.
"browser.search.widget.inNavBar" = true; "browser.search.widget.inNavBar" = true;
"browser.search.openintab" = true; "browser.search.openintab" = true;
"browser.startup.homepage" = "file://${homepage}";
# Some privacy settings... # Some privacy settings...
"privacy.donottrackheader.enabled" = true; "privacy.donottrackheader.enabled" = true;