tlaternet/tlaternet-server
1
0
Fork 0
Code Issues 8 Pull requests Activity

feat(webserver): Vendor and reimplement main pages in leptos

Browse source
This commit is contained in:
Tristan Daniël Maat 2025-11-24 03:29:18 +08:00
parent aeba7301b0
commit 59fdb37222
Signed by: tlater
GPG key ID: 02E935006CF2E8E7
25 changed files with 4862 additions and 176 deletions
Download patch file Download diff file Expand all files Collapse all files

57
pkgs/packages/webserver/style/custom-bulma.scss Normal file
View file

@ -0,0 +1,57 @@
@use "bulma/sass/utilities/initial-variables" as iv with (
$black: #0f0f0f,
$grey-darker: #11151c,
$grey-light: #dddddd,
$white: #ffffff,
$orange: #d26937,
$yellow: #b58900,
$green: #2aa889,
$cyan: #99d1ce,
$blue: #195466,
$red: #dc322f,
);
iv.$family-sans-serif: "Nunito", iv.$family-sans-serif;
iv.$family-monospace: "Hack", iv.$family-monospace;
@forward "bulma/sass/utilities/functions";
@use "bulma/sass/utilities/derived-variables" with (
$link: iv.$cyan,
$primary: iv.$cyan,
);
@forward "bulma/sass/utilities/controls";
@forward "bulma/sass/form";
@forward "bulma/sass/base" with (
$body-background-color: iv.$black,
$body-color: iv.$grey-light,
$hr-background-color: iv.$grey-light,
$hr-height: 1px,
);
@forward "bulma/sass/themes";
@forward "bulma/sass/elements/button";
@use "bulma/sass/elements/content" with (
$content-heading-weight: iv.$weight-semibold,
);
@use "bulma/sass/elements/notification";
@use "bulma/sass/elements/delete";
@use "bulma/sass/elements/title" with (
$title-color: iv.$cyan,
);
@forward "bulma/sass/grid/columns";
@forward "bulma/sass/helpers/typography";
@forward "bulma/sass/helpers/color";
@forward "bulma/sass/layout/container";
@forward "bulma/sass/layout/section";
@forward "bulma/sass/components/navbar" with (
$navbar-burger-color: iv.$grey-light,
);

48
pkgs/packages/webserver/style/fonts.scss Normal file
View file

@ -0,0 +1,48 @@
@use "@fontsource-utils/scss/src/mixins" as fontsource with (
$display: auto
);
@use "@fontsource-variable/arimo/scss/metadata.scss" as arimo;
@use "@fontsource-variable/nunito/scss/metadata.scss" as nunito;
@include fontsource.faces(
$metadata: nunito.$metadata,
$weights: (
300,
400,
500,
600,
700,
),
$subsets: latin,
$styles: (
normal,
italic,
),
$family: "Nunito",
$directory: "/@fontsource-variable/nunito"
);
@include fontsource.faces(
$metadata: arimo.$metadata,
$weights: 400,
$subsets: latin,
$styles: normal,
$family: "Arimo",
$directory: "/@fontsource-variable/arimo"
);
// Hack *does* come with its own CSS, but it's broken and hasn't seen
// a release since https://github.com/source-foundry/Hack/issues/467
// was resolved.
$variants: regular normal 400, bold normal 700, italic italic 400, bolditalic italic 700;
@each $name, $style, $weights in $variants {
@font-face {
font-family: "Hack";
font-style: $style;
font-display: auto;
font-weight: $weights;
src: url("/hack-font/hack-#{$name}-subset.woff2") format("woff2-variations");
}
}

7
pkgs/packages/webserver/style/main.scss Normal file
View file

@ -0,0 +1,7 @@
@use "fonts";
@use "custom-bulma";
@use "typed";
#typed-welcome {
@include typed.typed-text(typed-welcome, "Welcome to tlater.net!", 1.2s);
}

149
pkgs/packages/webserver/style/typed.scss Normal file
View file

@ -0,0 +1,149 @@
@use "sass:math";
@use "sass:list";
@mixin test {
margin: 0;
}
@mixin typed-text($id, $text, $duration) {
&::before {
@include typed($id, $text, $duration);
}
&::after {
@include cursor($id, 6s);
}
}
/// Animate a blinking cursor.
@mixin cursor($id, $duration) {
$name: cursor-#{$id};
// The number of times we need to blink is = the number of full
// seconds (500ms * 2) that fit in the total duration, rounded up,
// and doubled.
$iterations: math.ceil(math.div($duration, 1s)) * 2;
animation: $name ease-in-out 500ms $iterations alternate;
content: " ";
@keyframes #{$name} {
from {
content: " ";
}
to {
content: "█";
}
}
}
/// Animate a piece of text as if it was being typed by a human.
@mixin typed($id, $text, $duration) {
word-break: break-all;
// We don't want a linearly typed set of text, which makes this
// significantly more complex.
//
// CSS animations normally do not permit per-frame changes in
// duration (since the total animation time is fixed). This means we
// need to create multiple animations, and delay them so that they
// happen in the time sequence we want.
//
// We generate the raw values with _generate-animations, and then
// split up the result into the animation API.
$frames: str-length($text);
$animations: _generate-animations($id, $frames, 1.2s);
animation-name: _unzip($animations, 1);
animation-delay: _unzip($animations, 3);
animation-fill-mode: forwards;
content: "";
// We need to type each character in separate animations, see above
// comment.
@each $name, $character in $animations {
@keyframes #{$name} {
from {
content: str-slice($text, 0, $character);
}
to {
content: str-slice($text, 0, $character + 1);
}
}
}
}
/// Unzip a nested set of lists, taking the nth value of each sublist.
@function _unzip($lists, $i) {
$out: ();
$sep: comma;
@each $sublist in $lists {
$out: list.append($out, list.nth($sublist, $i), $sep);
}
@return $out;
}
/// Compute the sum of all numbers in a list.
@function _sum($list) {
$out: 0;
@each $val in $list {
$out: $out + $val;
}
@return $out;
}
/// Produce a list from a shorter list by repeating it up until size
/// $length.
@function _round-robin($base, $length) {
$out: ();
$sep: list.separator($out);
@for $i from 0 through $length {
$out: list.append($out, list.nth($base, $i % list.length($base) + 1));
}
@return $out;
}
/// Generate the actual animation values.
///
/// This generates a nested list as:
///
/// (keyframe-name, index, start time)
///
/// The duration of each frame is taken from the internal $delays in a
/// round robin fashion, to give some amount of human-like variance to
/// the duration of each frame.
///
/// Start time is set to the time at which the frame should start to
/// achieve the desired frame-by-frame duration.
@function _generate-animations($id, $number, $total_duration) {
$out: ();
$sep: list.separator($out);
// A set of "human-like" delays for each typed character. In
// practice, my typing seems to be about 20-70ms, but it looks a bit
// nicer to increase all typing by 20ms to make the effect more
// noticeable.
//
// Numbers generated once with a random number generator, rather
// than using `math.random()`, since they end up in CSS verbatim,
// and the build would be non-reproducible if we didn't do it this
// way. Using `math.random() wouldn't change this dynamically each
// time the page loads anyway, so we don't really lose anything by
// pre-generating these numbers.
$delays: 69ms, 83ms, 49ms, 48ms, 52ms, 59ms, 40ms, 71ms, 80ms, 67ms;
@for $animation from 0 through $number {
$out: list.append(
$out,
(
type-#{$id}-#{$animation},
$animation,
_sum(_round_robin($delays, $animation))
),
$sep
);
}
@return $out;
}