Gittes-archive/new-horizons
2
0
Fork 0
mirror of https://github.com/Outer-Wilds-New-Horizons/new-horizons.git synced 2025-12-11 20:15:44 +01:00
Code Issues Packages Projects Releases Wiki Activity

Fix Best Practices, Add 404 Page, Remove Light Theme

Browse Source
This commit is contained in:
Ben C 2023-07-03 02:42:58 -04:00
parent da1e5cdf08
commit 21863c687c
No known key found for this signature in database
GPG Key ID: 556064B755159BBC
12 changed files with 46 additions and 167 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
docs/public/icon.webp
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 660 B

After

Width:  |  Height:  |  Size: 2.6 KiB

2
docs/src/components/Header/AstroLogo.astro
View File

@ -5,4 +5,4 @@ type Props = {
const { size } = Astro.props;
---
<img src="/icon.webp" width="40" height="40" />
<img alt="New Horizons Icon" src="/icon.webp" width="40" height="40" />

4
docs/src/components/RightSidebar/MoreMenu.astro
View File

@ -1,5 +1,4 @@
---
import ThemeToggleButton from "./ThemeToggleButton";
import { COMMUNITY_INVITE_URL } from "../../consts";
type Props = {
@ -66,9 +65,6 @@ const showMoreSection = Boolean(COMMUNITY_INVITE_URL);
)
}
</ul>
<div style="margin: 2rem 0; text-align: center;">
<ThemeToggleButton client:visible />
</div>
<style>
.edit-on-github {

37
docs/src/components/RightSidebar/ThemeToggleButton.css
View File

@ -1,37 +0,0 @@
.theme-toggle {
display: inline-flex;
align-items: center;
gap: 0.25em;
padding: 0.33em 0.67em;
border-radius: 99em;
background-color: var(--theme-code-inline-bg);
}
.theme-toggle > label:focus-within {
outline: 2px solid transparent;
box-shadow: 0 0 0 0.08em var(--theme-accent), 0 0 0 0.12em white;
}
.theme-toggle > label {
color: var(--theme-code-inline-text);
position: relative;
display: flex;
align-items: center;
justify-content: center;
opacity: 0.5;
}
.theme-toggle .checked {
color: var(--theme-accent);
opacity: 1;
}
input[name="theme-toggle"] {
position: absolute;
opacity: 0;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: -1;
}

82
docs/src/components/RightSidebar/ThemeToggleButton.tsx
View File

@ -1,82 +0,0 @@
import type { FunctionalComponent } from "preact";
import { useState, useEffect } from "preact/hooks";
import "./ThemeToggleButton.css";
const themes = ["light", "dark"];
const icons = [
<svg
xmlns="http://www.w3.org/2000/svg"
width="20"
height="20"
viewBox="0 0 20 20"
fill="currentColor"
>
<path
fillRule="evenodd"
d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z"
clipRule="evenodd"
/>
</svg>,
<svg
xmlns="http://www.w3.org/2000/svg"
width="20"
height="20"
viewBox="0 0 20 20"
fill="currentColor"
>
<path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z" />
</svg>
];
const ThemeToggle: FunctionalComponent = () => {
const [theme, setTheme] = useState(() => {
if (import.meta.env.SSR) {
return undefined;
}
if (typeof localStorage !== undefined && localStorage.getItem("theme")) {
return localStorage.getItem("theme");
}
if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
return "dark";
}
return "light";
});
useEffect(() => {
const root = document.documentElement;
if (theme === "light") {
root.classList.remove("theme-dark");
} else {
root.classList.add("theme-dark");
}
}, [theme]);
return (
<div className="theme-toggle">
{themes.map((t, i) => {
const icon = icons[i];
const checked = t === theme;
return (
<label className={checked ? " checked" : ""}>
{icon}
<input
type="radio"
name="theme-toggle"
checked={checked}
value={t}
title={`Use ${t} theme`}
aria-label={`Use ${t} theme`}
onChange={() => {
localStorage.setItem("theme", t);
setTheme(t);
}}
/>
</label>
);
})}
</div>
);
};
export default ThemeToggle;

34
docs/src/components/Schemas/Content.astro
View File

@ -44,6 +44,21 @@ const HeadingTag = levelMap[level] ?? "h6";
{SchemaTools.getAdditionalBadges(schema).map((b) => <span>{b}</span>)}
</div>
</div>
{
level === 0 && !isDef && (
<div class="tool-links">
<p>
<a href={`/schemas/${schema.slug}/defs`}>View Definitions</a>
</p>
<p>|</p>
<p>
<a rel="noreferer" target="_blank" href={link}>
View Raw
</a>
</p>
</div>
)
}
{description && <p>{description}</p>}
{
enumVals.length !== 0 && (
@ -64,20 +79,6 @@ const HeadingTag = levelMap[level] ?? "h6";
<a href={`/schemas/${schema.rootSlug}/defs/${refSlug}`}>See Definitions/{refSlug}</a>
)
}
{
level === 0 && !isDef && (
<div>
<p>
<a href={`/schemas/${schema.slug}/defs`}>View Definitions</a>
</p>
<p>
<a rel="noreferer" target="_blank" href={link}>
View Raw
</a>
</p>
</div>
)
}
{
props.length !== 0 && (
<div class="children">
@ -140,6 +141,11 @@ const HeadingTag = levelMap[level] ?? "h6";
gap: 2rem;
}
div.tool-links {
display: flex;
gap: 1rem;
}
ul {
margin-top: 0.5rem;
}

13
docs/src/pages/404.astro Normal file
View File

@ -0,0 +1,13 @@
---
import MainLayout from "../layouts/MainLayout.astro";
---
<MainLayout
headings={[]}
title="Page Not Found"
description="Page Not Found"
dir="ltr"
lang="en-us"
>
The page you requested could not be found.
</MainLayout>

2
docs/src/pages/schemas/[schema]/defs/[...def].astro
View File

@ -44,7 +44,7 @@ const headings = SchemaTools.getHeaders(def);
dir="ltr"
headings={headings}
title={title ?? "??"}
description={""}
description={`New Horizons ${def.rootTitle} Definition For ${title}`}
>
<Breadcrumb schema={def} />
<Content level={0} schema={def} isDef />

9
docs/src/pages/schemas/[schema]/defs/index.astro
View File

@ -29,7 +29,14 @@ const title = `${SchemaTools.getTitle(schema) ?? "??"} Definitions`;
const defs = SchemaTools.getDefs(schema).map((d) => d.slug);
---
<MainLayout noFileEdit lang="en-us" dir="ltr" headings={[]} title={title} description={""}>
<MainLayout
noFileEdit
lang="en-us"
dir="ltr"
headings={[]}
title={title}
description={`New Horizons ${title}`}
>
<Breadcrumb schema={schema} onlyDefs />
<ul>
{

2
docs/src/pages/schemas/[schema]/index.astro
View File

@ -34,7 +34,7 @@ const headings = SchemaTools.getHeaders(schema);
dir="ltr"
headings={headings}
title={title ?? "??"}
description={""}
description={`New Horizons ${title} Reference`}
>
<Content level={0} schema={schema} />
</MainLayout>

2
docs/src/styles/index.css
View File

@ -322,7 +322,7 @@ h2.heading {
gap: 0.5em;
width: 100%;
font: inherit;
padding: 0.4rem 0;
padding: 0.6rem 0;
line-height: 1.3;
color: inherit;
text-decoration: none;

26
docs/src/styles/theme.css
View File

@ -56,36 +56,12 @@
--color-yellow: var(--color-base-yellow), 59%;
}
:root {
color-scheme: light;
--theme-accent: hsla(var(--color-green), 1);
--theme-text-accent: hsla(var(--color-green), 1);
--theme-accent-opacity: 0.15;
--theme-divider: hsla(var(--color-gray-95), 1);
--theme-text: hsla(var(--color-gray-10), 1);
--theme-text-light: hsla(var(--color-gray-40), 1);
/* @@@: not used anywhere */
--theme-text-lighter: hsla(var(--color-gray-80), 1);
--theme-bg: hsla(var(--color-base-white), 100%, 1);
--theme-bg-hover: hsla(var(--color-gray-95), 1);
--theme-bg-offset: hsla(var(--color-gray-90), 1);
--theme-bg-accent: hsla(var(--color-green), var(--theme-accent-opacity));
--theme-code-inline-bg: hsla(var(--color-gray-95), 1);
--theme-code-inline-text: var(--theme-text);
--theme-code-bg: hsla(217, 19%, 27%, 1);
--theme-code-text: hsla(var(--color-gray-95), 1);
--theme-navbar-bg: hsla(var(--color-base-white), 100%, 1);
--theme-navbar-height: 6rem;
--theme-selection-color: hsla(var(--color-green), 1);
--theme-selection-bg: hsla(var(--color-purple), var(--theme-accent-opacity));
}
body {
background: var(--theme-bg);
color: var(--theme-text);
}
:root.theme-dark {
:root {
color-scheme: dark;
--theme-accent-opacity: 0.15;
--theme-accent: hsla(var(--color-green), 1);