Update home page and logo in header

2026-04-23 07:10:41 +00:00 · 2021-06-30 05:36:26 +02:00
parent 2fb4848425
commit cabd97cb39
10 changed files with 140 additions and 79 deletions
--- a/src/app/Main.tsx
+++ b/src/app/Main.tsx
@@ -7,9 +7,7 @@ import '../styles/nodes.css'
 import { Analytics } from './Analytics'
 import { Header } from './components'
 import { loadLocale, locale, Locales } from './Locales'
-import { FieldSettings } from './pages/FieldSettings'
-import { Generator } from './pages/Generator'
-import { Home } from './pages/Home'
+import { FieldSettings, Generator, Home, Worldgen } from './pages'
 import type { VersionId } from './Schemas'
 import { Store } from './Store'
 import { cleanUrl } from './Utils'
@@ -68,7 +66,7 @@ function Main() {
 		<Router onChange={changeRoute}>
 			<Home path="/" {...{lang, changeTitle}} />
 			<FieldSettings path="/settings/fields" {...{lang, changeTitle}} />
-			<Home path="/worldgen" category="worldgen" {...{lang, changeTitle}} />
+			<Worldgen path="/worldgen" {...{lang, changeTitle}} />
 			<Generator path="/:generator" {...{lang, version, changeTitle}} onChangeVersion={changeVersion} />
 			<Generator path="/worldgen/:generator" category="worldgen" {...{lang, version, changeTitle}} onChangeVersion={changeVersion} />
 		</Router>
--- a/src/app/components/Header.tsx
+++ b/src/app/components/Header.tsx
@@ -1,7 +1,8 @@
 import { getCurrentUrl, Link } from 'preact-router'
-import { Btn, BtnMenu, Octicon } from '.'
+import { Btn, BtnMenu, Icons, Octicon } from '.'
 import config from '../../config.json'
 import { locale } from '../Locales'
+import { cleanUrl } from '../Utils'

 const Themes: Record<string, keyof typeof Octicon> = {
 	system: 'device_desktop',
@@ -19,10 +20,13 @@ type HeaderProps = {
 }
 export function Header({ lang, title, theme, changeTheme, language, changeLanguage }: HeaderProps) {
 	const loc = locale.bind(null, lang)
+	const id = getCurrentUrl().replace(/^\//, '').replace(/\/$/, '')
+	const category = config.models.find(m => m.id === id)?.category
+
 	return <header>
 		<div class="header-title">
-			<Link class="home-link" href={getCurrentUrl().match(/^\/worldgen\/.+/) ? '/worldgen/' : '/'}>
-				{Octicon.three_bars}
+			<Link class="home-link" href={typeof category === 'string' ? cleanUrl(category) : '/'}>
+				{Icons.home}
 			</Link>
 			<h2>{title}</h2>
 		</div>
--- a/src/app/components/Icons.tsx
+++ b/src/app/components/Icons.tsx
@@ -0,0 +1,5 @@
+export const Icons = {
+	home: <svg width="32" height="28" viewBox="0 0 32 28" fill="none" xmlns="http://www.w3.org/2000/svg"><rect width="26" height="6" rx="3" fill="#7CB45C"/><rect x="8" width="18" height="6" rx="3" fill="#4BA041"/><rect y="11" width="32" height="6" rx="3" fill="#AAA8A8"/><rect x="11" y="11" width="21" height="6" rx="3" fill="#91908F"/><rect x="11" y="22" width="21" height="6" rx="3" fill="#70B5C3"/><rect x="17" y="22" width="15" height="6" rx="3" fill="#4D989B"/></svg>,
+	report: <svg width="30" height="36" viewBox="0 0 30 36" xmlns="http://www.w3.org/2000/svg"><path d="M0 16C0 13.7909 1.79086 12 4 12V12C6.20914 12 8 13.7909 8 16V32C8 34.2091 6.20914 36 4 36V36C1.79086 36 0 34.2091 0 32V16Z" fill="#6ACC5D"/><path d="M11 4C11 1.79086 12.7909 0 15 0V0C17.2091 0 19 1.79086 19 4V32C19 34.2091 17.2091 36 15 36V36C12.7909 36 11 34.2091 11 32V4Z" fill="#FF4C4C"/><path d="M22 10C22 7.79086 23.7909 6 26 6V6C28.2091 6 30 7.79086 30 10V32C30 34.2091 28.2091 36 26 36V36C23.7909 36 22 34.2091 22 32V10Z" fill="#E5B442"/><path d="M0 23C0 20.7909 1.79086 19 4 19V19C6.20914 19 8 20.7909 8 23V32C8 34.2091 6.20914 36 4 36V36C1.79086 36 0 34.2091 0 32V23Z" fill="#2BAD1D"/><path d="M11 15C11 12.7909 12.7909 11 15 11V11C17.2091 11 19 12.7909 19 15V32C19 34.2091 17.2091 36 15 36V36C12.7909 36 11 34.2091 11 32V15Z" fill="#C10B0B"/><path d="M22 19C22 16.7909 23.7909 15 26 15V15C28.2091 15 30 16.7909 30 19V32C30 34.2091 28.2091 36 26 36V36C23.7909 36 22 34.2091 22 32V19Z" fill="#CC8E00"/></svg>,
+	sounds: <svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><circle cx="10" cy="10" r="10" fill="#451475"/><path fill-rule="evenodd" clip-rule="evenodd" d="M3.5 10C3.5 8.27609 4.18482 6.62279 5.40381 5.40381C6.62279 4.18482 8.27609 3.5 10 3.5C11.7239 3.5 13.3772 4.18482 14.5962 5.40381C15.8152 6.62279 16.5 8.27609 16.5 10C16.5 11.7239 15.8152 13.3772 14.5962 14.5962C13.3772 15.8152 11.7239 16.5 10 16.5C8.27609 16.5 6.62279 15.8152 5.40381 14.5962C4.18482 13.3772 3.5 11.7239 3.5 10V10ZM10 2C7.87827 2 5.84344 2.84285 4.34315 4.34315C2.84285 5.84344 2 7.87827 2 10C2 12.1217 2.84285 14.1566 4.34315 15.6569C5.84344 17.1571 7.87827 18 10 18C12.1217 18 14.1566 17.1571 15.6569 15.6569C17.1571 14.1566 18 12.1217 18 10C18 7.87827 17.1571 5.84344 15.6569 4.34315C14.1566 2.84285 12.1217 2 10 2V2ZM8.379 7.227C8.34101 7.20412 8.29762 7.19175 8.25327 7.19117C8.20892 7.19059 8.16522 7.20181 8.12664 7.2237C8.08807 7.24558 8.05601 7.27733 8.03375 7.3157C8.0115 7.35406 7.99985 7.39765 8 7.442V12.559C8.00003 12.6033 8.0118 12.6467 8.03413 12.685C8.05646 12.7232 8.08854 12.7548 8.12708 12.7765C8.16563 12.7983 8.20926 12.8095 8.25352 12.8088C8.29778 12.8082 8.34108 12.7958 8.379 12.773L12.643 10.214C12.6798 10.1917 12.7103 10.1604 12.7315 10.1229C12.7526 10.0854 12.7638 10.043 12.7638 10C12.7638 9.95695 12.7526 9.91463 12.7315 9.87714C12.7103 9.83965 12.6798 9.80825 12.643 9.786L8.379 7.227Z" fill="#C5A5E6"/></svg>,
+}
--- a/src/app/components/ToolCard.tsx
+++ b/src/app/components/ToolCard.tsx
@@ -0,0 +1,18 @@
+import type { ComponentChildren } from 'preact'
+import { Icons } from './Icons'
+
+type ToolCardProps = {
+	title: string,
+	link: string,
+	icon?: keyof typeof Icons,
+	children?: ComponentChildren,
+}
+export function ToolCard({ title, link, icon, children }: ToolCardProps) {
+	return <a class="tool-card" href={link}>
+		{icon && Icons[icon]}
+		<div>
+			<h3>{title}</h3>
+			{children}
+		</div>
+	</a>
+}
--- a/src/app/components/index.ts
+++ b/src/app/components/index.ts
@@ -4,7 +4,9 @@ export * from './BtnInput'
 export * from './BtnMenu'
 export * from './ErrorPanel'
 export * from './Header'
+export * from './Icons'
 export * from './Octicon'
 export * from './PreviewPanel'
 export * from './SourcePanel'
+export * from './ToolCard'
 export * from './Tree'
--- a/src/app/pages/Home.tsx
+++ b/src/app/pages/Home.tsx
@@ -1,6 +1,5 @@
-import { Link } from 'preact-router'
 import config from '../../config.json'
-import { Octicon } from '../components/Octicon'
+import { ToolCard } from '../components'
 import { locale } from '../Locales'
 import { cleanUrl } from '../Utils'

@@ -8,31 +7,25 @@ type HomeProps = {
 	lang: string,
 	changeTitle: (title: string) => unknown,
 	path?: string,
-	category?: string,
 }
-export function Home({ lang, changeTitle, category }: HomeProps) {
+export function Home({ lang, changeTitle }: HomeProps) {
 	const loc = locale.bind(null, lang)
-	changeTitle(category ? loc('title.generator_category', loc(category)) : loc('title.home'))
+	changeTitle(loc('title.home'))
 	return <main>
 		<div class="home">
-			<div class="generator-picker">
-				<ul class="generators-list">
-					{config.models.filter(m => typeof m.category !== 'string').map(m => <li>
-						<Link class={`generators-card${m.category === true && m.id === category ? ' selected' : ''}`} href={cleanUrl(m.id)}>
-							{loc(m.id)}
-							{m.category && Octicon.chevron_right}
-						</Link>
-					</li>)}
-				</ul>
-				{(category && config.models.some(m => m.category === category)) &&
-				<ul class="generators-list">
-					{config.models.filter(m => m.category === category).map(m => <li>
-						<Link class="generators-card" href={cleanUrl(m.id)}>
-							{loc(m.id)}
-						</Link>
-					</li>)}
-				</ul>}
-			</div>
+			{config.models.filter(m => typeof m.category !== 'string').map(m => 
+				<ToolCard title={loc(m.id)} link={cleanUrl(m.id)} />
+			)}
+			<hr />
+			<ToolCard title="Report Inspector" icon="report" link="https://misode.github.io/report/">
+				<p>Analyse your performance reports</p>
+			</ToolCard>
+			<ToolCard title="Minecraft Sounds" icon="sounds" link="https://misode.github.io/sounds/">
+				<p>Browse through and mix all the vanilla sounds</p>
+			</ToolCard>
+			<ToolCard title="Data Pack Upgrader" link="https://misode.github.io/upgrader/">
+				<p>Convert your 1.16 data packs to 1.17</p>
+			</ToolCard>
 		</div>
 	</main>
 }
--- a/src/app/pages/Worldgen.tsx
+++ b/src/app/pages/Worldgen.tsx
@@ -0,0 +1,21 @@
+import config from '../../config.json'
+import { ToolCard } from '../components'
+import { locale } from '../Locales'
+import { cleanUrl } from '../Utils'
+
+type WorldgenProps = {
+	lang: string,
+	changeTitle: (title: string) => unknown,
+	path?: string,
+}
+export function Worldgen({ lang, changeTitle }: WorldgenProps) {
+	const loc = locale.bind(null, lang)
+	changeTitle(loc('title.generator_category', loc('worldgen')))
+	return <main>
+		<div class="home">
+			{config.models.filter(m => m.category === 'worldgen').map(m => 
+				<ToolCard title={loc(m.id)} link={cleanUrl(m.id)} />
+			)}
+		</div>
+	</main>
+}
--- a/src/app/pages/index.ts
+++ b/src/app/pages/index.ts
@@ -0,0 +1,4 @@
+export * from './FieldSettings'
+export * from './Generator'
+export * from './Home'
+export * from './Worldgen'
--- a/src/config.json
+++ b/src/config.json
@@ -102,6 +102,7 @@
      "name": "Dimension",
      "path": "dimension",
      "schema": "dimension",
+      "category": "worldgen",
      "minVersion": "1.16"
    },
    {
@@ -109,12 +110,14 @@
      "name": "Dimension Type",
      "path": "dimension_type",
      "schema": "dimension_type",
+      "category": "worldgen",
      "minVersion": "1.16"
    },
    {
      "id": "world",
      "name": "World Settings",
      "schema": "world_settings",
+      "category": "worldgen",
      "minVersion": "1.16"
    },
    {
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -1,8 +1,9 @@
 :root {
 	--background-1: #1b1b1b;
 	--background-2: #252525;
-	--background-3: #3d3d3d;
-	--background-4: #464646;
+	--background-3: #2f2f2f;
+	--background-4: #3d3d3d;
+	--background-5: #464646;
 	--text-1: #ffffff;
 	--text-2: #dcdcdc;
 	--text-3: #c3c3c3;
@@ -20,8 +21,9 @@
 :root[data-theme=light] {
 	--background-1: #fafafa;
 	--background-2: #e2e2e2;
-	--background-3: #cccccc;
-	--background-4: #d6d6d6;
+	--background-3: #d4d3d3;
+	--background-4: #cccccc;
+	--background-5: #d6d6d6;
 	--text-1: #000000;
 	--text-2: #505050;
 	--text-3: #6a6a6a;
@@ -40,8 +42,9 @@
 	:root[data-theme=system] {
 		--background-1: #fafafa;
 		--background-2: #e2e2e2;
-		--background-3: #cccccc;
-		--background-4: #d6d6d6;
+		--background-3: #d4d3d3;
+		--background-4: #cccccc;
+		--background-5: #d6d6d6;
 		--text-1: #000000;
 		--text-2: #505050;
 		--text-3: #6a6a6a;
@@ -107,16 +110,31 @@ body[data-panel="settings"] header {

 .home-link {
 	margin: 0 8px 0 0;
-	height: 32px;
-	fill: var(--nav);
 }

 .home-link svg {
+	display: block;
 	width: 32px;
 	height: 32px;
 	padding: 2px;
 }

+.home-link svg rect:nth-child(2n) {
+	transition: transform 0.2s;
+}
+
+.home-link:hover rect:nth-child(2) {
+	transform: translateX(-8px);
+}
+
+.home-link:hover rect:nth-child(4) {
+	transform: translateX(-11px);
+}
+
+.home-link:hover rect:nth-child(6) {
+	transform: translateX(-6px);
+}
+
 nav ul {
 	display: flex;
 	align-items: center;
@@ -289,7 +307,7 @@ main.has-preview {
 	outline: none;
 	font-size: 1rem;
 	white-space: nowrap;
-	background-color: var(--background-3);
+	background-color: var(--background-4);
 	box-shadow: 0 1px 7px -2px #000;
 	color: var(--text-2);
 	fill: var(--text-2);
@@ -305,7 +323,7 @@ main.has-preview {
 }

 .btn:not(.btn-input):hover {
-	background-color: var(--background-4);
+	background-color: var(--background-5);
 }

 .btn.no-pointer {
@@ -398,7 +416,7 @@ main.has-preview {
 	padding: 0 8px;
 	border-top-left-radius: 24px;
 	border-bottom-left-radius: 24px;
-	background-color: var(--background-3);
+	background-color: var(--background-4);
 	box-shadow: 0 0 7px -3px #000;
 	user-select: none;
 	-webkit-user-select: none;
@@ -409,7 +427,7 @@ main.has-preview {
 }

 .popup-actions:hover {
-	background-color: var(--background-4);
+	background-color: var(--background-5);
 }

 .popup-action {
@@ -470,49 +488,44 @@ main.has-preview {
 	font-size: 20px;
 }

-.generators-list {
+.home {
+	max-width: 960px;
+	margin: 0 auto;
+}
+
+.tool-card {
 	display: flex;
-	flex-direction: column;
-	list-style-type: none;
-}
-
-.generators-list:not(:last-child) {
-	margin-right: 20px
-}
-
-.generators-card {
-	margin-bottom: 10px;
-	padding: 8px 15px;
-	cursor: pointer;
+	padding: 10px;
+	margin-bottom: 8px;
+	color: var(--text-2);
+	background-color: var(--background-2);
+	box-shadow: 1px 1px 7px -3px #000;
+	border-radius: 6px;
 	text-decoration: none;
-	text-transform: capitalize;
-	border-radius: 3px;
-	background-color: var(--nav-faded);
-	color: var(--text-1);
-	fill: var(--text-1);
-	display: flex;
-	align-items: center;
-	justify-content: space-between;
-	user-select: none;
-	-webkit-user-select: none;
-	-moz-user-select: none;
-	-ms-user-select: none;
-	transition: margin 0.2s;
 }

-.generators-card * {
-	pointer-events: none;
+.tool-card:hover {
+	background-color: var(--background-3);
 }

-.generators-card:hover,
-.generators-card.selected {
-	background-color: var(--nav-faded-hover);
-	margin-left: 8px;
-	margin-right: -8px;
+.tool-card svg {
+	width: 32px;
+	height: 32px;
+	flex-shrink: 0;
+	margin-right: 8px;
 }

-.generators-card svg {
-	margin-left: 10px;
+.tool-card h3 {
+	font-weight: unset;
+}
+
+.tool-card p {
+	color: var(--text-3);
+}
+
+hr {
+	margin: 12px 0;
+	border: none;
 }

 .settings {
@@ -522,7 +535,7 @@ main.has-preview {
 .settings p {
 	color: var(--nav);
 	padding: 8px;
-	border-bottom: 2px solid var(--background-3);
+	border-bottom: 2px solid var(--background-4);
 }

 .field-list {
@@ -535,7 +548,7 @@ main.has-preview {
 	display: flex;
 	justify-content: space-between;
 	padding: 4px 0;
-	border-bottom: 1px solid var(--background-3);
+	border-bottom: 1px solid var(--background-4);
 }

 .field-prop {