pihkaal/pihkaal-me
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: moving from nextjs to vite+react

Browse Source
This commit is contained in:
Pihkaal
2024-01-28 12:14:04 +01:00
parent 9bb6ccdd4f
commit 8446ee6c65
52 changed files with 610 additions and 2337 deletions
Download Patch File Download Diff File Expand all files Collapse all files

85
src/components/MusicPlayer.tsx
View File

@@ -1,85 +0,0 @@
import { useTerminal } from "~/context/TerminalContext";
import { TerminalRenderer } from "~/utils/terminal/renderer";
import { TerminalBoxElement } from "~/utils/terminal/elements/box";
import { useEffect, useState } from "react";
const theme = {
black: "#45475a",
red: "#f38ba8",
green: "#a6e3a1",
yellow: "#f9e2af",
blue: "#89bafa",
magenta: "#f5c2e7",
cyan: "#94e2d5",
white: "#bac2de",
grey: "#585B70",
lightGrey: "#a6adc8",
};
const formatDurationMSS = (duration: number) => {
const minutes = Math.floor(duration / 60);
const seconds = duration % 60;
return `${minutes}:${seconds.toString().padStart(2, "0")}`;
};
export const MusicPlayer = (props: {
title: string;
artist: string;
album: string;
duration: number;
}) => {
const { cols } = useTerminal();
const canvas = new TerminalRenderer(cols, 5);
const [played, setPlayed] = useState(0);
useEffect(() => {
const interval = setInterval(() => {
setPlayed(x => Math.min(props.duration, x + 1));
}, 1000);
return () => clearInterval(interval);
}, [setPlayed, props.duration]);
canvas.writeElement(
new TerminalBoxElement(canvas.width, canvas.height),
0,
0,
);
canvas.write(1, 0, "Playback".substring(0, Math.min(8, canvas.width - 2)), {
foreground: theme.magenta,
});
const inner = new TerminalRenderer(canvas.width - 2, canvas.height - 2);
// Title and Artist
inner.write(2, 0, `${props.title} · ${props.artist}`, {
foreground: theme.cyan,
fontWeight: 700,
});
inner.apply(0, 0, {
char: "\udb81\udc0a",
foreground: theme.cyan,
fontWeight: 800,
});
// Album
inner.write(0, 1, props.album, { foreground: theme.yellow });
// Bar
inner.write(0, 2, " ".repeat(inner.width), {
foreground: theme.green,
background: "#55576d",
});
inner.write(0, 2, " ".repeat((inner.width * played) / props.duration), {
foreground: "#55576d",
background: theme.green,
});
const time = `${formatDurationMSS(played)}/${formatDurationMSS(
props.duration,
)}`;
inner.write(inner.width / 2 - time.length / 2, 2, time, { fontWeight: 800 });
canvas.writeElement(inner, 1, 1);
return <p>{canvas.render()}</p>;
};

5
src/components/MusicVisualizer.tsx
View File

@@ -1,5 +0,0 @@
import { type FunctionComponent } from "react";
export const MusicVisualizer: FunctionComponent = () => (
<div className="h-full w-full bg-red-500"></div>
);

19
src/components/Nvim/Nvim.tsx
View File

@@ -1,19 +0,0 @@
import { NvimStatusBar } from "./NvimStatusBar";
import { NvimTree } from "./NvimTree";
export const Nvim = () => {
return (
<div>
<div className="flex">
<div className="w-fit">
<NvimTree />
</div>
<div className="flex-1"></div>
</div>
<div className="h-fit bg-[#29293c]">
<NvimStatusBar label="NORMAL" fileName="README.md" />
</div>
</div>
);
};

31
src/components/Nvim/NvimStatusBar.tsx
View File

@@ -1,31 +0,0 @@
import { useTerminal } from "~/context/TerminalContext";
import { TerminalRenderer } from "~/utils/terminal/renderer";
import { theme } from "~/utils/terminal/theme";
export const NvimStatusBar = (props: { label: string; fileName: string }) => {
const { cols: width } = useTerminal();
const canvas = new TerminalRenderer(width, 1);
canvas.write(0, 0, ` ${props.label} `, {
background: theme.blue,
foreground: "#000",
});
canvas.write(props.label.length + 2, 0, "\ue0ba", {
background: theme.blue,
foreground: "#474353",
});
canvas.write(props.label.length + 3, 0, "\ue0ba", {
background: "#474353",
foreground: "#373040",
});
canvas.write(props.label.length + 4, 0, ` ${props.fileName} `, {
background: "#373040",
foreground: theme.white,
});
canvas.write(props.label.length + 6 + props.fileName.length, 0, "\ue0ba", {
background: "#373040",
foreground: "#29293c",
});
return <p>{canvas.render()}</p>;
};

172
src/components/Nvim/NvimTree.tsx
View File

@@ -1,172 +0,0 @@
import { useState, useEffect } from "react";
import { useApp } from "~/context/AppContext";
import { useTerminal } from "~/context/TerminalContext";
import { FILE_STYLES, File } from "~/utils/filesystem";
import { type Cell } from "~/utils/terminal/cell";
import { TerminalRenderer } from "~/utils/terminal/renderer";
import { theme } from "~/utils/terminal/theme";
import { Manifest } from "~/utils/types";
const PATH_FOLDED: Cell = {
char: "",
foreground: theme.grey,
};
const PATH_UNFOLDED: Cell = {
char: "",
foreground: theme.blue,
};
const FILES_SRC: Array<File> = [
{
name: "projects",
type: "directory",
children: [{ name: "README.md", type: "md" }],
folded: true,
},
{ name: "README.md", type: "md" },
{ name: "LICENSE.md", type: "md" },
{ name: "prout", type: "directory", children: [], folded: true },
{ name: "hello", type: "directory", children: [], folded: true },
{ name: "pubkey.asc", type: "asc" },
];
const buildFileTree = (manifest: Manifest): Array<File> => {
if (manifest === undefined) return [];
const files: Array<File> = [];
manifest.projects.forEach(project => {
if (project.name === "pihkaal") {
project.files.forEach(file => {
files.push({
name: file,
type: "md",
});
});
} else {
files.push({
name: project.name,
type: "directory",
folded: true,
children: project.files.map(file => ({
name: file,
type: "md",
})),
});
}
});
return files;
};
export const NvimTree = () => {
const manifest = useApp();
const [selected, setSelected] = useState(0);
const [files, setFiles] = useState(buildFileTree(manifest));
const { cols: width, rows: height } = useTerminal();
const canvas = new TerminalRenderer(width * 0.2, height - 2, {
background: "#0000001a",
});
const tree = new TerminalRenderer(canvas.width - 3, height - 1);
tree.write(0, selected, " ".repeat(tree.width), { background: "#504651" });
let y = 0;
let indent = 0;
const renderTree = (files: Array<File>) => {
files.forEach(file => {
tree.apply(2 + indent * 2, y, FILE_STYLES[file.type]);
if (file.type === "directory") {
tree.apply(indent * 2, y, file.folded ? PATH_FOLDED : PATH_UNFOLDED);
tree.write(4 + indent * 2, y, file.name, {
foreground: FILE_STYLES.directory.foreground,
});
y++;
if (!file.folded) {
indent++;
renderTree(file.children);
indent--;
}
} else {
if (file.name === "README.md") {
tree.write(4 + indent * 2, y, file.name, {
foreground: theme.yellow,
fontWeight: 800,
});
} else {
tree.write(4 + indent * 2, y, file.name);
}
y++;
}
});
};
useEffect(() => {
const onScroll = (event: KeyboardEvent) => {
switch (event.key) {
case "ArrowUp":
setSelected(x => Math.max(0, x - 1));
break;
case "ArrowDown":
setSelected(x => Math.min(y - 1, x + 1));
break;
case "Enter":
let y = 0;
const findFile = (files: Array<File>): File | null => {
for (const f of files) {
if (y === selected) {
return f;
}
y++;
if (f.type === "directory" && !f.folded) {
const found = findFile(f.children);
if (found) return found;
}
}
return null;
};
const current = findFile(files);
if (!current) {
setSelected(0);
return;
}
if (current.type === "directory") {
current.folded = !current.folded;
setFiles([...files]);
}
break;
}
};
window.addEventListener("keydown", onScroll);
return () => {
window.removeEventListener("keydown", onScroll);
};
});
renderTree(files);
canvas.writeElement(tree, 2, 1);
return <p>{canvas.render()}</p>;
};
/*
.sort((a, b) => a.name.localeCompare(b.name)).sort((a, b) =>
a.type === "directory" && b.type !== "directory"
? -1
: a.type !== "directory" && b.type === "directory"
? 1
: 0,
),
*/

64
src/components/Terminal.tsx
View File

@@ -1,64 +0,0 @@
import { useRef, useState, useEffect, type ReactNode } from "react";
import clsx from "clsx";
import { TerminalContextProvider } from "~/context/TerminalContext";
export const Terminal = (props: {
children?: ReactNode;
className?: string;
}) => {
const terminalRef = useRef<HTMLDivElement>(null);
const [size, setSize] = useState<{ cols: number; rows: number }>();
useEffect(() => {
const precision = 300;
const calculateSize = () => {
if (!terminalRef.current) return;
const node = document.createElement("span");
node.style.color = "transparent";
node.style.position = "absolute";
node.textContent = "A".repeat(precision);
terminalRef.current.appendChild(node);
setSize({
cols: Math.floor(
(terminalRef.current.offsetWidth - 4) /
(node.offsetWidth / precision),
),
rows: Math.floor(
(terminalRef.current.offsetHeight - 4) / node.offsetHeight,
),
});
node.remove();
};
calculateSize();
setTimeout(() => calculateSize(), 1);
window.addEventListener("resize", calculateSize);
return () => {
window.removeEventListener("resize", calculateSize);
};
}, []);
return (
<TerminalContextProvider value={size}>
<div
ref={terminalRef}
className={clsx(
"overflow-hidden whitespace-pre rounded-lg border-2 border-borderInactive bg-background bg-opacity-80 text-lg text-color7 text-foreground shadow-window transition-colors duration-[500ms] ease-out hover:border-borderActive hover:duration-[200ms]",
props.className,
)}
style={{ backdropFilter: "blur(2px)" }}
>
{size && props.children}
</div>
</TerminalContextProvider>
);
};

23
src/components/Text.tsx
View File

@@ -1,23 +0,0 @@
import config from "~/../tailwind.config";
const THEME = config.theme.extend.colors;
type TerminalColor = keyof {
[K in keyof typeof THEME]: K extends `color${number}` ? K : never;
};
export const Text = (props: {
children: string | Array<string>;
bold?: boolean;
fg?: TerminalColor;
bg?: TerminalColor;
}) => (
<span
style={{
fontWeight: props.bold ? "bold" : "normal",
color: THEME[props.fg ?? "color7"],
backgroundColor: props.bg ? THEME[props.bg] : "transparent",
}}
>
{props.children}
</span>
);

22
src/components/terminal/TerminalBox.tsx
View File

@@ -1,22 +0,0 @@
import { useTerminalCanvas } from "~/context/TerminalCanvasContext";
import { type CellStyle } from "~/utils/terminal/cell";
import { TerminalBoxElement } from "~/utils/terminal/elements/box";
export const TerminalBox = (props: {
x: number;
y: number;
width: number;
height: number;
style?: CellStyle;
}) => {
const canvas = useTerminalCanvas();
const element = new TerminalBoxElement(
props.width,
props.height,
props.style ?? {},
);
canvas.writeElement(element, props.x, props.y);
return null;
};

23
src/components/terminal/TerminalCanvas.tsx
View File

@@ -1,23 +0,0 @@
import React, { type ReactNode, useEffect, useState } from "react";
import { TerminalCanvasContextProvider } from "~/context/TerminalCanvasContext";
import { TerminalRenderer } from "~/utils/terminal/renderer";
export const TerminalCanvas = (props: {
width: number;
height: number;
children?: Array<ReactNode> | ReactNode;
}) => {
const [canvas] = useState(new TerminalRenderer(props.width, props.height));
const [render, setRender] = useState<Array<ReactNode>>([]);
useEffect(() => {
setRender(canvas.render());
}, [canvas, props.children]);
return (
<TerminalCanvasContextProvider value={canvas}>
{props.children}
{render}
</TerminalCanvasContextProvider>
);
};

21
src/components/terminal/TerminalCell.tsx
View File

@@ -1,21 +0,0 @@
import { useTerminalCanvas } from "~/context/TerminalCanvasContext";
import { type CellStyle } from "~/utils/terminal/cell";
export const TerminalCell = (props: {
x: number;
y: number;
children: Array<string> | string;
style?: CellStyle;
}) => {
const canvas = useTerminalCanvas();
const text = Array.isArray(props.children)
? props.children.join("")
: props.children;
canvas.apply(props.x, props.y, {
char: text,
...(props.style ?? {}),
});
return null;
};

25
src/components/terminal/TerminalSubCanvas.tsx
View File

@@ -1,25 +0,0 @@
import React, { type ReactNode, useState } from "react";
import {
TerminalCanvasContextProvider,
useTerminalCanvas,
} from "~/context/TerminalCanvasContext";
import { TerminalRenderer } from "~/utils/terminal/renderer";
export const TerminalSubCanvas = (props: {
x: number;
y: number;
width: number;
height: number;
children?: Array<ReactNode> | ReactNode;
}) => {
const parent = useTerminalCanvas();
const [canvas] = useState(new TerminalRenderer(props.width, props.height));
parent.writeElement(canvas, props.x, props.y);
return (
<TerminalCanvasContextProvider value={canvas}>
{props.children}
</TerminalCanvasContextProvider>
);
};

16
src/components/terminal/TerminalText.tsx
View File

@@ -1,16 +0,0 @@
import { useTerminalCanvas } from "~/context/TerminalCanvasContext";
export const TerminalText = (props: {
x: number;
y: number;
children: Array<string> | string;
}) => {
const canvas = useTerminalCanvas();
const text = Array.isArray(props.children)
? props.children.join("")
: props.children;
canvas.write(props.x, props.y, text);
return null;
};