seth/cdn.how
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Formatting. :trolley:

Browse source
This commit is contained in:
Seth 2025-01-17 18:16:22 -05:00
parent e9b9175d51
commit b8362d2d30
No known key found for this signature in database
GPG key ID: 8B7A2C60CDF65CAC
7 changed files with 149 additions and 142 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

80
index.ts
View file

@ -7,55 +7,55 @@ import { join } from "node:path";
const glob = new Glob("**/*"); const glob = new Glob("**/*");
const build = async () => { const build = async () => {
const start = Date.now(); const start = Date.now();
const built = await Bun.build({ const built = await Bun.build({
entrypoints: ["./src/index.html"], entrypoints: ["./src/index.html"],
outdir: "./dist", outdir: "./dist",
html: true, html: true,
experimentalCss: true, experimentalCss: true,
splitting: true, splitting: true,
sourcemap: "linked" sourcemap: "linked",
//minify: true, //minify: true,
}) });
const end = Date.now(); const end = Date.now();
await cleanOldFiles(built.outputs); await cleanOldFiles(built.outputs);
console.log("Did build", built.success, built.logs) console.log("Did build", built.success, built.logs);
console.log("Build time:", end - start, "ms"); console.log("Build time:", end - start, "ms");
} };
const cleanOldFiles = async (outputs: BuildArtifact[]) => { const cleanOldFiles = async (outputs: BuildArtifact[]) => {
let distFiles: string[] = [] let distFiles: string[] = [];
for await (const file of glob.scan("./dist")) { for await (const file of glob.scan("./dist")) {
distFiles.push(file) distFiles.push(file);
} }
for await (const output of outputs) { for await (const output of outputs) {
const arr = output.path.split("\\") const arr = output.path.split("\\");
const file = arr[arr.length - 1] const file = arr[arr.length - 1];
distFiles = distFiles.filter(item => item !== file); distFiles = distFiles.filter((item) => item !== file);
} }
return await Promise.all( return await Promise.all(
Array.from(distFiles).map(file => unlink(join("dist", file))) Array.from(distFiles).map((file) => unlink(join("dist", file))),
); );
} };
if (process.env.NOWATCH !== "1") { if (process.env.NOWATCH !== "1") {
watch(import.meta.dir, { recursive: true }, async (_, file) => { watch(import.meta.dir, { recursive: true }, async (_, file) => {
if (!file?.startsWith("dist")) return await build(); if (!file?.startsWith("dist")) return await build();
return; return;
}); });
Bun.serve({ Bun.serve({
async fetch(request, server) { async fetch(request, server) {
const { pathname } = new URL(request.url); const { pathname } = new URL(request.url);
const file = pathname === "/" ? "/index.html" : pathname; const file = pathname === "/" ? "/index.html" : pathname;
return new Response(Bun.file(`dist${file}`)) return new Response(Bun.file(`dist${file}`));
} },
}) });
} }
await build(); await build();

112
src/components/App.css
View file

@ -1,94 +1,94 @@
@font-face { @font-face {
font-family: "Circular Std"; font-family: "Circular Std";
src: url("../../public/circularstd/Black.woff2") format("woff2"); src: url("../../public/circularstd/Black.woff2") format("woff2");
font-style: normal; font-style: normal;
font-display: swap; font-display: swap;
} }
@font-face { @font-face {
font-family: "Circular Std"; font-family: "Circular Std";
src: url("../../public/circularstd/BlackItalic.woff2") format("woff2"); src: url("../../public/circularstd/BlackItalic.woff2") format("woff2");
font-style: italic; font-style: italic;
font-display: swap; font-display: swap;
} }
@font-face { @font-face {
font-family: "Circular Std"; font-family: "Circular Std";
src: url("../../public/circularstd/Bold.woff2") format("woff2"); src: url("../../public/circularstd/Bold.woff2") format("woff2");
font-style: normal; font-style: normal;
font-weight: 700; font-weight: 700;
font-display: swap; font-display: swap;
} }
@font-face { @font-face {
font-family: "Circular Std"; font-family: "Circular Std";
src: url("../../public/circularstd/BoldItalic.woff2") format("woff2"); src: url("../../public/circularstd/BoldItalic.woff2") format("woff2");
font-style: italic; font-style: italic;
font-weight: 700; font-weight: 700;
font-display: swap; font-display: swap;
} }
@font-face { @font-face {
font-family: "Circular Std"; font-family: "Circular Std";
src: url("../../public/circularstd/Book.woff2") format("woff2"); src: url("../../public/circularstd/Book.woff2") format("woff2");
font-style: normal; font-style: normal;
font-weight: 400; font-weight: 400;
font-display: swap; font-display: swap;
} }
@font-face { @font-face {
font-family: "Circular Std"; font-family: "Circular Std";
src: url("../../public/circularstd/BookItalic.woff2"); src: url("../../public/circularstd/BookItalic.woff2");
font-style: italic; font-style: italic;
font-weight: 400; font-weight: 400;
font-display: swap; font-display: swap;
} }
@font-face { @font-face {
font-family: "Circular Std"; font-family: "Circular Std";
src: url("../../public/circularstd/Medium.woff2"); src: url("../../public/circularstd/Medium.woff2");
font-style: normal; font-style: normal;
font-weight: 500; font-weight: 500;
font-display: swap; font-display: swap;
} }
@font-face { @font-face {
font-family: "Circular Std"; font-family: "Circular Std";
src: url("../../public/circularstd/MediumItalic.woff2"); src: url("../../public/circularstd/MediumItalic.woff2");
font-style: italic; font-style: italic;
font-weight: 500; font-weight: 500;
font-display: swap; font-display: swap;
} }
html, html,
body { body {
margin: 0; margin: 0;
padding: 0; padding: 0;
height: 100vh; height: 100vh;
width: 100vw; width: 100vw;
font-family: "Circular Std", sans-serif; font-family: "Circular Std", sans-serif;
background-color: #111; background-color: #111;
overflow: hidden; overflow: hidden;
scrollbar-width: thin; scrollbar-width: thin;
scrollbar-color: #333 #222; scrollbar-color: #333 #222;
} }
::-webkit-scrollbar { ::-webkit-scrollbar {
width: 8px; width: 8px;
height: 8px; height: 8px;
} }
::-webkit-scrollbar-track { ::-webkit-scrollbar-track {
background: #222; background: #222;
} }
::-webkit-scrollbar-thumb { ::-webkit-scrollbar-thumb {
background-color: #333; background-color: #333;
border-radius: 10px; border-radius: 10px;
} }
.container { .container {
scroll-snap-type: y mandatory; scroll-snap-type: y mandatory;
overflow: scroll; overflow: scroll;
height: 100vh; height: 100vh;
} }

2
src/components/App.tsx
View file

@ -1,7 +1,7 @@
import Hero from "./Hero"; import Hero from "./Hero";
import IconAnchor from "./IconAnchor"; import IconAnchor from "./IconAnchor";
import { Music, } from "lucide-preact"; import { Music } from "lucide-preact";
import { SiGithub, SiForgejo, SiInstagram } from "react-icons/si"; import { SiGithub, SiForgejo, SiInstagram } from "react-icons/si";
import "./App.css"; import "./App.css";

74
src/components/Hero/Hero.css
View file

@ -1,53 +1,53 @@
.hero { .hero {
scroll-snap-align: start; scroll-snap-align: start;
position: relative; position: relative;
background: #111111; background: #111111;
color: white; color: white;
height: 100vh; height: 100vh;
display: flex; display: flex;
align-items: center; align-items: center;
overflow: hidden; overflow: hidden;
} }
.content { .content {
max-width: 600px; max-width: 600px;
margin: 0 auto; margin: 0 auto;
padding: 0 20px; padding: 0 20px;
} }
.hero h2 { .hero h2 {
position: relative; position: relative;
z-index: 1; z-index: 1;
font-size: 4rem; font-size: 4rem;
margin: 0 0px; margin: 0 0px;
line-height: 1; line-height: 1;
} }
.hero p { .hero p {
position: relative; position: relative;
z-index: 1; z-index: 1;
font-size: 2rem; font-size: 2rem;
color: #DEDEDE color: #dedede;
} }
.waves-header { .waves-header {
position: absolute; position: absolute;
left: 0; left: 0;
right: 0; right: 0;
top: 0; top: 0;
height: 150px; height: 150px;
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: cover; background-size: cover;
background-image: url("./header.svg") background-image: url("./header.svg");
} }
.waves-footer { .waves-footer {
position: absolute; position: absolute;
left: 0; left: 0;
right: 0; right: 0;
bottom: 0; bottom: 0;
height: 200px; height: 200px;
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: cover; background-size: cover;
background-image: url("./footer.svg") background-image: url("./footer.svg");
} }

4
src/components/IconAnchor/IconAnchor.css
View file

@ -1,3 +1,3 @@
.IconAnchor { .IconAnchor {
margin: 5px; margin: 5px;
} }

17
src/components/IconAnchor/index.tsx
View file

@ -2,8 +2,15 @@ import type { VNode } from "preact";
import "./IconAnchor.css"; import "./IconAnchor.css";
export default (props: {icon: VNode; link: string; title: string;}) => { export default (props: { icon: VNode; link: string; title: string }) => {
return ( return (
<a class="IconAnchor" href={props.link} title={props.title} rel="noreferrer noopener">{props.icon}</a> <a
); class="IconAnchor"
} href={props.link}
title={props.title}
rel="noreferrer noopener"
>
{props.icon}
</a>
);
};

2
src/index.css
View file

@ -1 +1 @@
@import "modern-normalize"; @import "modern-normalize";