const { useState, useEffect, useRef, useMemo, useCallback } = React;
/// Hooks for the animations and such ///
// 3 Main hooks //
// useNow func for live clock
function useNow(intervalMs = 1000) {
const [now, setNow] = useState(() => new Date());
useEffect(() => {
const id = setInterval(() => setNow(new Date()), intervalMs);
return () => clearInterval(id);
}, [intervalMs]);
return now;
}
// useInView to detect when element in viewport
function useInView(opts = {rootMargin: "0px 0px -10% 0px", threshold: 0.05}) {
const ref = useRef(null);
const [seen, setSeen] = useState(false);
useEffect(() => {
if (!ref.current || seen) return;
const io = new IntersectionObserver((entries) => {
entries.forEach((e) => { if (e.isIntersecting) {setSeen(true); io.disconnect(); } });
}, opts);
io.observe(ref.current);
return () => io.disconnect();
}, [seen]);
return [ref, seen];
}
// useTypewriter types a string out. Im using this for some fun "typing" easter eggs
function useTypewriter(text, { speed = 22, start = true, onDone } = {}) {
const [out, setOut] = useState("");
const doneRef = useRef(false);
useEffect(() => {
if (!start) return;
setOut(""); doneRef.current = false;
let i = 0;
const id = setInterval(() => {
i++;
setOut(text.slice(0, i));
if (i >= text.length) {
clearInterval(id);
if (!doneRef.current && onDone) { doneRef.current = true; onDone(); }
}
}, speed);
return () => clearInterval(id);
}, [text, speed, start]);
return out;
}
// Smaller hooks //
function Cursor({ char = "▌", inline = true }) {
return {char};
}
// Prompt component shows the user@host and such
function Prompt({ user = "clicky", host = "keys", path = "~", symbol = "$", showTime = false }) {
const now = useNow(showTime ? 1000 : 60000);
const t = now.toTimeString().slice(0, 8);
return (
{showTime && [{t}] }
{user}@{host}:{path} {symbol}
);
}
// Shelline component is the primary section that uses useInView and useTypewriter
function ShellLine({ cmd, prompt = true, promptProps = {}, children, autoplay = false, speed = 25 }) {
const [ref, seen] = useInView();
const active = seen || autoplay;
const typed = useTypewriter(cmd || "", {speed, start: active});
const done = typed === (cmd || "");
return (
{prompt && }
{typed}{!done && active && }
{done && (
{children}
)}
);
}
// TerminalWindow is to show a linux style terminal
function TerminalWindow({ title = "clicky@keys: ~", children, style, dense = false, glow = true }) {
return (
[1]
{title}
_✕
{children}
);
}
// ASCII art of 'clicky'
const CLICKY_ASCII = String.raw`
██████╗ ██╗ ██╗ ██████╗██╗ ██╗██╗ ██╗
██╔════╝██║ ██║██╔════╝██║ ██╔╝╚██╗ ██╔╝
██║ ██║ ██║██║ █████╔╝ ╚████╔╝
██║ ██║ ██║██║ ██╔═██╗ ╚██╔╝
╚██████╗███████╗██║╚██████╗██║ ██╗ ██║
╚═════╝╚══════╝╚═╝ ╚═════╝╚═╝ ╚═╝ ╚═╝
`.trim();
// Banner to show the ascii art
function AsciiBanner({ text = CLICKY_ASCII }) {
return (
{text}
);
}
// Colored 'key caps' for keyboard shortcuts
function Kbd({ children }) {
return (
{children}
);
}
function Tag({ children, color }) {
const c = color || "var(--accent)";
return (
{children}
);
}
// LiveBar
function LiveBar({ label, min = 12, max = 60, color }) {
const [v, setV] = useState(min + (max - min) * 0.5);
useEffect(() => {
const id = setInterval(() => {
setV((prev) => {
const delta = (Math.random() - 0.5) * 18;
let n = prev + delta;
if (n < min) n = min + (min - n) * 0.4;
if (n > max) n = max - (n - max) * 0.4;
return Math.max(min, Math.min(max, n));
});
}, 800);
return () => clearInterval(id);
}, [min, max]);
const pct = Math.round(v);
const c = color || "var(--accent)";
return (
{label}{pct}%
);
}
function Clock() {
const now = useNow(1000);
const t = now.toTimeString().slice(0, 8);
const d = now.toISOString().slice(0, 10);
return (