aronmal/jg-eucs
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Update to latest solidjs and added some spice

Browse source
This commit is contained in:
aronmal 2024-02-23 19:08:09 +01:00
parent fad746ceec
commit b09418b3ec
Signed by: aronmal
GPG key ID: 816B7707426FC612
35 changed files with 4318 additions and 2831 deletions
Download patch file Download diff file Expand all files Collapse all files

5
src/components/DeviceTile.tsx
View file

@ -1,9 +1,8 @@
import { Show } from "solid-js";
import { A } from "solid-start";
function DeviceTile(props: { href?: string; name: string; src: string }) {
return (
<A href={props.href ?? "/soon"}>
<a href={props.href ?? "/soon"}>
<h3>{props.name}</h3>
<Show when={props.src.startsWith("/images")}>
<img src={props.src} alt={props.name} />
@ -13,7 +12,7 @@ function DeviceTile(props: { href?: string; name: string; src: string }) {
<source src={props.src} type="video/mp4" />
</video>
</Show>
</A>
</a>
);
}

82
src/components/Progress.tsx Normal file
View file

@ -0,0 +1,82 @@
import { JSX, createEffect, createSignal, onCleanup } from "solid-js";
function ProgressHandler() {
const [scrollPercentage, setScrollPercentage] = createSignal(0);
// const [active, setActive] = createSignal("");
// const [zoomLevel, setZoomLevel] = createSignal(0);
// const zoomAmount = () => 1 + zoomLevel() * 0.5;
// const [x, setX] = createSignal(0);
// const [y, setY] = createSignal(0);
function ProgressBar() {
// const [muted, setMuted] = createSignal(true);
// const [controlls, setControlls] = createSignal(false);
// const [clientX, setClientX] = createSignal(0);
// const [clientY, setClientY] = createSignal(0);
// const [ref, setRef] = createSignal<HTMLElement | null>(null);
const handleScroll = () => {
const scrollHeight =
document.documentElement.scrollHeight - window.innerHeight;
const currentScroll = window.scrollY;
const scrollPercentage = (currentScroll / scrollHeight) * 100;
setScrollPercentage(scrollPercentage);
};
createEffect(() => {
window.addEventListener("scroll", handleScroll);
onCleanup(() => {
window.removeEventListener("scroll", handleScroll);
});
});
createEffect(() => {
// const thisRef = ref();
// if (!thisRef) return;
// const rectA = thisRef.getBoundingClientRect();
// const origSizeW = rectA.width / zoomAmount();
// const origSizeH = rectA.height / zoomAmount();
// const rectW = wrapperRef.getBoundingClientRect();
// const hori = rectW.width - origSizeW + origSizeW / zoomAmount();
// const verti = rectW.height - origSizeH + origSizeH / zoomAmount();
// const xP = (clientX() - hori / 2) / (rectW.width - hori);
// const yP = (clientY() - verti / 2) / (rectW.height - verti);
// setX((xP > 0 ? (xP < 1 ? xP : 1) : 0) * origSizeW);
// setY((yP > 0 ? (yP < 1 ? yP : 1) : 0) * origSizeH);
// const moving =
// clientX() > (rectW.width - origSizeW) / 2 &&
// clientX() < rectW.width - (rectW.width - origSizeW) / 2 &&
// clientY() > (rectW.height - origSizeH) / 2 &&
// clientY() < rectW.height - (rectW.height - origSizeH) / 2;
// setMoving(moving);
});
// let wrapperRef: HTMLDivElement;
createEffect(() => {
// if (active()) return;
// setZoomLevel(0);
// setMuted(true);
// setControlls(false);
});
return (
<div class="progress">
<></>
</div>
);
}
function Chapter(props: { children: JSX.Element }) {
let divRef: HTMLDivElement;
// let videoRef: HTMLVideoElement;
// const shouldZoom = () => active() === props.src && !!zoomLevel();
return <div ref={divRef!}>{props.children}</div>;
}
return { FullscreenView: ProgressBar, Asset: Chapter };
}
export default ProgressHandler;

5
src/components/Reference.tsx
View file

@ -4,7 +4,6 @@ import {
faHashtag,
} from "@fortawesome/pro-regular-svg-icons";
import { JSXElement, Show, createMemo } from "solid-js";
import { A } from "solid-start";
import { FontAwesomeIcon } from "./FontAwesomeIcon";
const types = {
@ -38,7 +37,7 @@ function R(props: {
return (
<>
{" "}
<A
<a
href={props.href}
target={type() === "external" ? "_blank" : ""}
rel={type() === "external" ? "noreferrer noopener" : ""}
@ -52,7 +51,7 @@ function R(props: {
<Show when={type() !== "id"}>
<FontAwesomeIcon class="right" icon={types[type()]} title={type()} />
</Show>
</A>{" "}
</a>{" "}
</>
);
}

15
src/components/Wrapper.tsx Normal file
View file

@ -0,0 +1,15 @@
import { JSX, Suspense } from "solid-js";
function Wrapper(props: {
class: string;
classList: Record<string, boolean>;
children: JSX.Element | JSX.Element[];
}) {
return (
<div id="body" class={props.class} classList={props.classList}>
<Suspense>{props.children}</Suspense>
</div>
);
}
export default Wrapper;

109
src/components/de/Navbar.tsx
View file

@ -6,18 +6,38 @@ import {
faGlobe,
faXmark,
} from "@fortawesome/pro-regular-svg-icons";
import {
useIsRouting,
useLocation,
useNavigate,
useSearchParams,
} from "@solidjs/router";
import { createEffect, createSignal, onCleanup } from "solid-js";
import { A, useIsRouting, useLocation, useNavigate } from "solid-start";
import { FontAwesomeIcon } from "../FontAwesomeIcon";
export const [lightMode, setLightMode] = createSignal(false);
const [menu, setMenu] = createSignal(false);
function Navbar() {
const [menu, setMenu] = createSignal(false);
const navigate = useNavigate();
const location = useLocation();
const [searchParams] = useSearchParams();
const isRouting = useIsRouting();
createEffect(() => {
const mode = searchParams.lightMode;
const prefersDarkMode =
window.matchMedia &&
window.matchMedia("(prefers-color-scheme: dark)").matches;
if (typeof mode === "undefined") {
setLightMode(!prefersDarkMode);
return;
}
const parsedMode = JSON.parse(mode);
if (typeof parsedMode !== "boolean") return;
setLightMode(parsedMode);
});
createEffect(() => {
if (!isRouting() || !menu()) return;
setMenu(false);
@ -39,83 +59,94 @@ function Navbar() {
return (
<>
<div id="navbar" style={{ visibility: menu() ? "visible" : "hidden" }}>
<A href="/de/">
<a href="/de/">
<FontAwesomeIcon icon={faBookOpen} /> Einführung
</A>
</a>
<A href="/de/overview">
<a href="/de/overview">
<FontAwesomeIcon icon={faBookOpen} /> Start
</A>
</a>
<ol>
<li>
<A href="/de/overview#start">Was sind EUCs?</A>
<a href="/de/overview#start">Was sind EUCs?</a>
</li>
<li>
<A href="/de/overview#why">Warum EUCs?</A>
<a href="/de/overview#why">Warum EUCs?</a>
</li>
<li>
<A href="/de/overview#funktion">Funktionsweise</A>
<a href="/de/overview#funktion">Funktionsweise</a>
</li>
<li>
<A href="/de/overview#begriffe">Begriffe</A>
<a href="/de/overview#begriffe">Begriffe</a>
</li>
<li>
<A href="/de/overview#sicherheit">Sicherheit</A>
<a href="/de/overview#sicherheit">Sicherheit</a>
</li>
<li>
<A href="/de/overview#ausrüstung">Ausrüstung</A>
<a href="/de/overview#ausrüstung">Ausrüstung</a>
</li>
<li>
<A href="/de/overview#cutout">Cut-out's</A>
<a href="/de/overview#cutout">Cut-out's</a>
</li>
<li>
<A href="/de/overview#akkuss">Akkusicherheit</A>
<a href="/de/overview#akkuss">Akkusicherheit</a>
</li>
<li>
<A href="/de/overview#fahrweise">Fahrweise</A>
<a href="/de/overview#fahrweise">Fahrweise</a>
</li>
<li>
<A href="/de/overview#wobbles">Wobbles</A>
<a href="/de/overview#wobbles">Wobbles</a>
</li>
<li>
<A href="/de/overview#leistung">Leistung</A>
<a href="/de/overview#leistung">Leistung</a>
</li>
<li>
<A href="/de/overview#federung">Federung</A>
<a href="/de/overview#federung">Federung</a>
</li>
<li>
<A href="/de/overview#reifen">Reifen</A>
<a href="/de/overview#reifen">Reifen</a>
</li>
<li>
<A href="/de/overview#historie">Historie</A>
<a href="/de/overview#historie">Historie</a>
</li>
<li>
<A href="/de/overview#geraete">Geräte Liste</A>
<a href="/de/overview#geraete">Geräte Liste</a>
</li>
</ol>
<A href="/de/manufacturers">
<a href="/de/manufacturers">
<FontAwesomeIcon icon={faBookOpen} /> Hersteller
</A>
</a>
<A href="/de/imprint">
<a href="/de/imprint">
<FontAwesomeIcon icon={faGavel} /> Impressum
</A>
</a>
<button onClick={() => setLightMode((e) => !e)}>
{lightMode() ? "Dark Mode " : "Light Mode "}
<FontAwesomeIcon icon={faCircleHalfStroke} />
</button>
<button
onClick={() =>
navigate("/en" + location.pathname.slice(3), { scroll: false })
}
>
Englisch <FontAwesomeIcon icon={faGlobe} />
</button>
<button onClick={() => setMenu(false)}>
Close <FontAwesomeIcon icon={faXmark} />
</button>
<div class="modes">
<button
onClick={() => {
const mode = !lightMode() ? "?lightMode=true" : "";
const url = location.pathname + mode;
navigate(url, {
replace: true,
scroll: false,
});
}}
>
{lightMode() ? "Dark Mode " : "Light Mode "}
<FontAwesomeIcon icon={faCircleHalfStroke} />
</button>
<button
onClick={() =>
navigate("/en" + location.pathname.slice(3), { scroll: false })
}
>
Englisch <FontAwesomeIcon icon={faGlobe} />
</button>
<button onClick={() => setMenu(false)}>
Close <FontAwesomeIcon icon={faXmark} />
</button>
</div>
</div>
<button class="menu" title="Menu" onClick={() => setMenu(true)}>

109
src/components/en/Navbar.tsx
View file

@ -6,18 +6,38 @@ import {
faGlobe,
faXmark,
} from "@fortawesome/pro-regular-svg-icons";
import {
useIsRouting,
useLocation,
useNavigate,
useSearchParams,
} from "@solidjs/router";
import { createEffect, createSignal, onCleanup } from "solid-js";
import { A, useIsRouting, useLocation, useNavigate } from "solid-start";
import { FontAwesomeIcon } from "../FontAwesomeIcon";
export const [lightMode, setLightMode] = createSignal(false);
const [menu, setMenu] = createSignal(false);
function Navbar() {
const [menu, setMenu] = createSignal(false);
const navigate = useNavigate();
const location = useLocation();
const [searchParams] = useSearchParams();
const isRouting = useIsRouting();
createEffect(() => {
const mode = searchParams.lightMode;
const prefersDarkMode =
window.matchMedia &&
window.matchMedia("(prefers-color-scheme: dark)").matches;
if (typeof mode === "undefined") {
setLightMode(!prefersDarkMode);
return;
}
const parsedMode = JSON.parse(mode);
if (typeof parsedMode !== "boolean") return;
setLightMode(parsedMode);
});
createEffect(() => {
if (!isRouting() || !menu()) return;
setMenu(false);
@ -39,83 +59,94 @@ function Navbar() {
return (
<>
<div id="navbar" style={{ visibility: menu() ? "visible" : "hidden" }}>
<A href="/en/">
<a href="/en/">
<FontAwesomeIcon icon={faBookOpen} /> Introduction
</A>
</a>
<A href="/en/overview">
<a href="/en/overview">
<FontAwesomeIcon icon={faBookOpen} /> Start
</A>
</a>
<ol>
<li>
<A href="/en/overview#start">What are EUCs?</A>
<a href="/en/overview#start">What are EUCs?</a>
</li>
<li>
<A href="/en/overview#why">Why EUCs?</A>
<a href="/en/overview#why">Why EUCs?</a>
</li>
<li>
<A href="/en/overview#funktion">Functionality</A>
<a href="/en/overview#funktion">Functionality</a>
</li>
<li>
<A href="/en/overview#begriffe">Glossarry</A>
<a href="/en/overview#begriffe">Glossarry</a>
</li>
<li>
<A href="/en/overview#sicherheit">Safety</A>
<a href="/en/overview#sicherheit">Safety</a>
</li>
<li>
<A href="/en/overview#ausrüstung">Gear</A>
<a href="/en/overview#ausrüstung">Gear</a>
</li>
<li>
<A href="/en/overview#cutout">Cut-out's</A>
<a href="/en/overview#cutout">Cut-out's</a>
</li>
<li>
<A href="/en/overview#akkuss">Battery safety</A>
<a href="/en/overview#akkuss">Battery safety</a>
</li>
<li>
<A href="/en/overview#fahrweise">Ride style</A>
<a href="/en/overview#fahrweise">Ride style</a>
</li>
<li>
<A href="/en/overview#wobbles">Wobbles</A>
<a href="/en/overview#wobbles">Wobbles</a>
</li>
<li>
<A href="/en/overview#leistung">Performance</A>
<a href="/en/overview#leistung">Performance</a>
</li>
<li>
<A href="/en/overview#federung">Suspension</A>
<a href="/en/overview#federung">Suspension</a>
</li>
<li>
<A href="/en/overview#reifen">Tires</A>
<a href="/en/overview#reifen">Tires</a>
</li>
<li>
<A href="/en/overview#historie">History</A>
<a href="/en/overview#historie">History</a>
</li>
<li>
<A href="/en/overview#geraete">Device list</A>
<a href="/en/overview#geraete">Device list</a>
</li>
</ol>
<A href="/en/manufacturers">
<a href="/en/manufacturers">
<FontAwesomeIcon icon={faBookOpen} /> Manufacturers
</A>
</a>
<A href="/de/imprint">
<a href="/de/imprint">
<FontAwesomeIcon icon={faGavel} /> Legal Notice (DE)
</A>
</a>
<button onClick={() => setLightMode((e) => !e)}>
{lightMode() ? "Dark Mode " : "Light Mode "}
<FontAwesomeIcon icon={faCircleHalfStroke} />
</button>
<button
onClick={() =>
navigate("/de" + location.pathname.slice(3), { scroll: false })
}
>
Deutsch <FontAwesomeIcon icon={faGlobe} />
</button>
<button onClick={() => setMenu(false)}>
Close <FontAwesomeIcon icon={faXmark} />
</button>
<div class="modes">
<button
onClick={() => {
const mode = !lightMode() ? "?lightMode=true" : "";
const url = location.pathname + mode;
navigate(url, {
replace: true,
scroll: false,
});
}}
>
{lightMode() ? "Dark Mode " : "Light Mode "}
<FontAwesomeIcon icon={faCircleHalfStroke} />
</button>
<button
onClick={() =>
navigate("/de" + location.pathname.slice(3), { scroll: false })
}
>
Deutsch <FontAwesomeIcon icon={faGlobe} />
</button>
<button onClick={() => setMenu(false)}>
Close <FontAwesomeIcon icon={faXmark} />
</button>
</div>
</div>
<button class="menu" title="Menu" onClick={() => setMenu(true)}>