RGBCube/rgbcube.github.io
1
Fork 0
mirror of https://github.com/RGBCube/rgbcube.github.io synced 2025-05-14 05:54:58 +00:00
Code Issues Activity Actions

Add minification and write css js in their own files

Browse source
This commit is contained in:
RGBCube 2023-12-20 22:12:06 +03:00
parent 704c5f00d0
commit 389ca1f737
No known key found for this signature in database
18 changed files with 246 additions and 220 deletions
Download patch file Download diff file Expand all files Collapse all files

4
.gitignore vendored
View file

@ -3,7 +3,11 @@
!assets/
!src/
!src/cube/
!src/minify/
!src/pages/
!src/pages/_404/
!src/pages/index/
!.gitignore

114
404.html
View file

@ -1,114 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta property="og:type" content="website">
<title>RGBCube</title>
<meta name="author" content="RGBCube" />
<meta property="og:site_name" content="RGBCube" />
<meta property="og:title" content="RGBCube" />
<meta name="description" content="The official website and link portal of RGBCube and his work." />
<meta property="og:description" content="The official website and link portal of RGBCube and his work." />
<link rel="icon" href="favicon.gif" type="image/gif">
<meta property="og:image" content="/thumbnail.png" />
<meta property="og:image:type" content="image/png" />
<meta property="og:image:height" content="" />
<meta property="og:image:width" content="" />
<meta property="og:url" content="https://rgbcube.github.io/" />
<link rel="canonical" href="https://rgbcube.github.io/">
<link href="cube.css" rel="stylesheet">
</head>
<body>
<style>
.face {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(2, 1fr);
box-shadow: 0 0 10px #AAAAAA;
}
.square {
width: 100%;
height: 100%;
}
.magenta {
background-color: magenta;
}
.black {
background-color: black;
}
.frame {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: black;
}
</style>
<div class="scene">
<div class="cube">
<div class="face front">
<div class="frame">404</div>
<div class="square black"></div>
<div class="square magenta"></div>
<div class="square magenta"></div>
<div class="square black"></div>
</div>
<div class="face top">
<div class="frame">404</div>
<div class="square black"></div>
<div class="square magenta"></div>
<div class="square magenta"></div>
<div class="square black"></div>
</div>
<div class="face back">
<div class="frame">404</div>
<div class="square black"></div>
<div class="square magenta"></div>
<div class="square magenta"></div>
<div class="square black"></div>
</div>
<div class="face bottom">
<div class="frame">404</div>
<div class="square black"></div>
<div class="square magenta"></div>
<div class="square magenta"></div>
<div class="square black"></div>
</div>
<div class="face right">
<div class="frame">404</div>
<div class="square black"></div>
<div class="square magenta"></div>
<div class="square magenta"></div>
<div class="square black"></div>
</div>
<div class="face left">
<div class="frame">404</div>
<div class="square black"></div>
<div class="square magenta"></div>
<div class="square magenta"></div>
<div class="square black"></div>
</div>
</div>
</div>
<script src="cube.js"></script>
</body>
</html>

7
Cargo.lock generated
View file

@ -177,6 +177,12 @@ version = "1.0.0"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "baf1de4339761588bc0619e3cbc0120ee582ebb74b53b4efbf79117bd2da40fd"
[[package]]
name = "embed-file"
version = "0.1.0"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "11c84540ea27680af34e655a36b1b3d362f2a1d2088db07760358a01fa9546ad"
[[package]]
name = "env_logger"
version = "0.10.1"
@ -812,6 +818,7 @@ version = "0.1.0"
dependencies = [
"anyhow",
"axum",
"embed-file",
"env_logger",
"log",
"maud",

1
Cargo.toml
View file

@ -11,6 +11,7 @@ edition = "2021"
[dependencies]
anyhow = "1.0.75"
axum = "0.7.2"
embed-file = "0.1.0"
env_logger = "0.10.1"
log = "0.4.20"
maud = { git = "https://github.com/vidhanio/maud", branch = "patch-1", features = [ "axum" ] }

2
src/constants.rs
View file

@ -1 +1 @@
pub const URL: &'static str = "https://rgbcube.github.io/";
pub const URL: &str = "https://rgbcube.github.io/";

0
assets/cube.css → src/cube/cube.css
View file

0
assets/cube.js → src/cube/cube.js
View file

4
src/cube.rs → src/cube/mod.rs
View file

@ -10,7 +10,7 @@ const FACES: [&str; 6] = ["front", "top", "back", "bottom", "right", "left"];
pub fn create(styling: &str, faces: [Markup; 6]) -> Markup {
page::create(
html! {
link href="cube.css" rel="stylesheet";
link href="cube.min.css" rel="stylesheet";
},
html! {
style {
@ -26,6 +26,8 @@ pub fn create(styling: &str, faces: [Markup; 6]) -> Markup {
}
}
}
script src="cube.min.js" {}
},
)
}

1
src/main.rs
View file

@ -1,5 +1,6 @@
mod constants;
mod cube;
mod minify;
mod page;
mod pages;

44
src/minify/css.rs Normal file
View file

@ -0,0 +1,44 @@
const SPECIAL_CHARS: [char; 8] = ['{', '}', ':', ';', ' ', '\n', '!', '>'];
// Taken from https://github.com/amgarrett09/rust-css-minifier/blob/master/src/minify/mod.rs.
pub fn css(input: &str) -> String {
let mut last_char: Vec<char> = " ".chars().collect();
let mut output = Vec::new();
let mut inside_comment = false;
for c in input.chars() {
// We're in a comment if we find '/*'
if !inside_comment && c == '*' && last_char[0] == '/' {
inside_comment = true;
output.pop();
}
// We're no longer in a comment if we find '*/'
if inside_comment && c == '/' && last_char[0] == '*' {
inside_comment = false;
}
// We should NOT add a char to the output if:
// 1) It's a line break, OR
// 2) The char is a space AND the last char scanned was one of our
// special cases OR
// 3) We're inside a comment
// should_add_char is the negation of that
if !(c == '\n' || (c == ' ' && SPECIAL_CHARS.contains(&last_char[0])) || inside_comment) {
// Remove last char (and don't put it back) if it's a space before
// a special character, or if it's a semicolon before an ending brace
if let Some(last) = output.pop() {
if (!SPECIAL_CHARS.contains(&c) || last != ' ') && (c != '}' || last != ';') {
output.push(last);
}
}
output.push(c);
}
last_char[0] = c;
}
output.iter().collect()
}

18
src/minify/js.rs Normal file
View file

@ -0,0 +1,18 @@
use anyhow::Context;
use minify_js::{
Session,
TopLevelMode,
};
pub fn js(input: &str) -> String {
let session = Session::new();
let mut out = Vec::new();
minify_js::minify(&session, TopLevelMode::Module, input.as_bytes(), &mut out)
.with_context(|| format!("Failed to minify::js: {code}."))
.unwrap();
String::from_utf8(out)
.with_context(|| format!("Failed to create a string from minify::js output: {out:?}."))
.unwrap()
}

5
src/minify/mod.rs Normal file
View file

@ -0,0 +1,5 @@
mod css;
pub use css::css;
mod js;
pub use js::js;

29
src/pages/_404/404.css Normal file
View file

@ -0,0 +1,29 @@
.face {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(2, 1fr);
box-shadow: 0 0 10px #AAAAAA;
}
.square {
width: 100%;
height: 100%;
}
.magenta {
background-color: magenta;
}
.black {
background-color: black;
}
.frame {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: black;
}

28
src/pages/_404/mod.rs Normal file
View file

@ -0,0 +1,28 @@
use std::array;
use embed_file::embed_string as embed;
use maud::{
html,
Markup,
};
use crate::{
cube,
minify,
};
pub async fn generate() -> Markup {
cube::create(
minify::css(embed!("404.css").as_ref()).as_str(),
array::from_fn(|_| {
(html! {
div class="frame" {}
div class="square black" {}
div class="square magenta" {}
div class="square magenta" {}
div class="square black" {}
})
.clone()
}),
)
}

103
src/pages/index.rs
View file

@ -1,103 +0,0 @@
use maud::{
html,
Markup,
};
use crate::cube;
pub async fn generate() -> Markup {
cube::create(
STYLING,
[
html! {
a href="contact" {
div class="frame" {
"contact"
}
}
},
html! {
a href="github" {
div class="frame" {
"github"
}
}
},
html! {},
html! {},
html! {},
html! {},
],
)
}
const STYLING: &str = r#"
.frame:hover {
background-color: #FFFF00;
}
.face::after {
z-index: -1;
content: "";
height: inherit;
width: inherit;
position: absolute;
}
.front {
background: linear-gradient(to bottom, cyan, blue);
}
.front::after {
background: linear-gradient(to bottom, white, magenta);
mask-image: linear-gradient(to left, magenta, transparent);
}
.top {
background: linear-gradient(to bottom, lime, cyan);
}
.top::after {
background: linear-gradient(to bottom, yellow, white);
mask-image: linear-gradient(to left, white, transparent);
}
.back {
background: linear-gradient(to bottom, yellow, red);
}
.back::after {
background: linear-gradient(to bottom, lime, black);
mask-image: linear-gradient(to left, black, transparent);
}
.bottom {
background: linear-gradient(to bottom, blue, black);
}
.bottom::after {
background: linear-gradient(to bottom, magenta, red);
mask-image: linear-gradient(to left, red, transparent);
}
.right {
background: linear-gradient(to bottom, white, magenta);
}
.right::after {
background: linear-gradient(to bottom, yellow, red);
mask-image: linear-gradient(to left, red, transparent);
}
.left {
background: linear-gradient(to bottom, lime, black);
}
.left::after {
background: linear-gradient(to bottom, cyan, blue);
mask-image: linear-gradient(to left, blue, transparent);
}
"#;

68
src/pages/index/index.css Normal file
View file

@ -0,0 +1,68 @@
.frame:hover {
background-color: #FFFF00;
}
.face::after {
z-index: -1;
content: "";
height: inherit;
width: inherit;
position: absolute;
}
.front {
background: linear-gradient(to bottom, cyan, blue);
}
.front::after {
background: linear-gradient(to bottom, white, magenta);
mask-image: linear-gradient(to left, magenta, transparent);
}
.top {
background: linear-gradient(to bottom, lime, cyan);
}
.top::after {
background: linear-gradient(to bottom, yellow, white);
mask-image: linear-gradient(to left, white, transparent);
}
.back {
background: linear-gradient(to bottom, yellow, red);
}
.back::after {
background: linear-gradient(to bottom, lime, black);
mask-image: linear-gradient(to left, black, transparent);
}
.bottom {
background: linear-gradient(to bottom, blue, black);
}
.bottom::after {
background: linear-gradient(to bottom, magenta, red);
mask-image: linear-gradient(to left, red, transparent);
}
.right {
background: linear-gradient(to bottom, white, magenta);
}
.right::after {
background: linear-gradient(to bottom, yellow, red);
mask-image: linear-gradient(to left, red, transparent);
}
.left {
background: linear-gradient(to bottom, lime, black);
}
.left::after {
background: linear-gradient(to bottom, cyan, blue);
mask-image: linear-gradient(to left, blue, transparent);
}

36
src/pages/index/mod.rs Normal file
View file

@ -0,0 +1,36 @@
use embed_file::embed_string as embed;
use maud::{
html,
Markup,
};
use crate::{
cube,
minify,
};
pub async fn generate() -> Markup {
cube::create(
minify::css(embed!("index.css").as_ref()).as_str(),
[
html! {
a href="contact" {
div class="frame" {
"contact"
}
}
},
html! {
a href="github" {
div class="frame" {
"github"
}
}
},
html! {},
html! {},
html! {},
html! {},
],
)
}

2
src/pages/mod.rs
View file

@ -7,4 +7,4 @@ macro_rules! import {
};
}
import! { index }
import! { _404, index }