akanealw/misode.github.io
1
0
Fork 0
mirror of https://github.com/misode/misode.github.io.git synced 2026-04-23 07:10:41 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Use masonry layout for homepage

Browse Source
This commit is contained in:
Misode
2022-07-02 01:51:44 +02:00
parent d0bae089d1
commit 231b032029
4 changed files with 109 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
src/app/components/GuideCard.tsx
View File

@@ -5,10 +5,11 @@ import { Badge } from './index.js'
interface Props {
id: string,
minimal?: boolean,
activeTags?: string[],
toggleTag?: (tag: string) => unknown,
}
export function GuideCard({ id, activeTags, toggleTag }: Props) {
export function GuideCard({ id, minimal, activeTags, toggleTag }: Props) {
const { title, versions, tags } = useMemo(() => getGuide(id), [id])
const onToggleTag = (tag: string) => (e: MouseEvent) => {
@@ -17,7 +18,7 @@ export function GuideCard({ id, activeTags, toggleTag }: Props) {
e.stopImmediatePropagation()
}
return <Card title={title} overlay={versions?.join(' • ')} link={`/guides/${id}/`}>
return <Card title={title} overlay={!minimal && versions?.join(' • ')} link={`/guides/${id}/`}>
<div class="badges-list">
{tags?.sort().map(tag => <Badge label={tag} onClick={onToggleTag(tag)} active={activeTags?.includes(tag)} />)}
</div>

135
src/app/pages/Home.tsx
View File

@@ -2,6 +2,7 @@ import { useMemo } from 'preact/hooks'
import { ChangelogEntry, Footer, GeneratorCard, Giscus, GuideCard, ToolCard, ToolGroup } from '../components/index.js'
import { useLocale, useTitle } from '../contexts/index.js'
import { useAsync } from '../hooks/useAsync.js'
import { useMediaQuery } from '../hooks/useMediaQuery.js'
import { fetchChangelogs, fetchVersions } from '../services/DataFetcher.js'
import { Store } from '../Store.js'
@@ -15,6 +16,45 @@ export function Home({}: Props) {
const { locale } = useLocale()
useTitle(locale('title.home'))
const smallScreen = useMediaQuery('(max-width: 580px)')
return <main>
<div class="container">
<div class="card-group">
<div class="card-column">
<PopularGenerators />
{smallScreen && <FavoriteGenerators />}
<Changelog />
{smallScreen && <Guides />}
<Versions />
{smallScreen && <Tools />}
</div>
{!smallScreen && <div class="card-column">
<FavoriteGenerators />
<Guides />
<Tools />
</div>}
</div>
<Giscus />
<Footer />
</div>
</main>
}
function PopularGenerators() {
const { locale } = useLocale()
return <ToolGroup title={locale('generators.popular')} link="/generators/">
<GeneratorCard minimal id="loot_table" />
<GeneratorCard minimal id="advancement" />
<GeneratorCard minimal id="predicate" />
<ToolCard title={locale('worldgen')} link="/worldgen/" titleIcon="worldgen" />
<ToolCard title={locale('generators.all')} link="/generators/" titleIcon="arrow_right" />
</ToolGroup>
}
function FavoriteGenerators() {
const { locale } = useLocale()
const favorites = useMemo(() => {
const history: string[] = []
for (const id of Store.getGeneratorHistory().reverse()) {
@@ -25,54 +65,61 @@ export function Home({}: Props) {
return history.slice(0, MAX_FAVORITES)
}, [])
if (favorites.length < MIN_FAVORITES) return <></>
return <ToolGroup title={locale('generators.recent')}>
{favorites.map(f => <GeneratorCard minimal id={f} />)}
</ToolGroup>
}
function Guides() {
const { locale } = useLocale()
return <ToolGroup title={locale('guides')} link="/guides/" titleIcon="arrow_right">
<GuideCard minimal id="adding-custom-structures" />
<GuideCard minimal id="noise-router" />
</ToolGroup>
}
function Tools() {
const { locale } = useLocale()
return <ToolGroup title={locale('tools')}>
<ToolCard title="Report Inspector" icon="report"
link="https://misode.github.io/report/"
desc="Analyse your performance reports" />
<ToolCard title="Minecraft Sounds" icon="sounds"
link="/sounds/"
desc="Browse through and mix all the vanilla sounds" />
<ToolCard title="Data Pack Upgrader"
link="https://misode.github.io/upgrader/"
desc="Convert your data packs from 1.16 to 1.19" />
</ToolGroup>
}
function Versions() {
const { locale } = useLocale()
const { value: versions } = useAsync(fetchVersions, [])
const release = useMemo(() => versions?.find(v => v.type === 'release'), [versions])
return <ToolGroup title={locale('versions.minecraft_versions')} link="/versions/" titleIcon="arrow_right">
{(versions?.[0] && release) && <>
{versions[0].id !== release.id && (
<ToolCard title={versions[0].name} link={`/versions/?id=${versions[0].id}`} desc={locale('versions.latest_snapshot')} />
)}
<ToolCard title={release.name} link={`/versions/?id=${release.id}`} desc={locale('versions.latest_release')} />
</>}
</ToolGroup>
}
function Changelog() {
const { locale } = useLocale()
const { value: changes } = useAsync(fetchChangelogs, [])
const latestChanges = useMemo(() => changes?.sort((a, b) => b.order - a.order).slice(0, 2), [changes])
return <main>
<div class="container">
<div class="card-group">
<ToolGroup title={locale('generators.popular')} link="/generators/">
<GeneratorCard minimal id="loot_table" />
<GeneratorCard minimal id="advancement" />
<GeneratorCard minimal id="predicate" />
<ToolCard title={locale('worldgen')} link="/worldgen/" titleIcon="worldgen" />
<ToolCard title={locale('generators.all')} link="/generators/" titleIcon="arrow_right" />
</ToolGroup>
{favorites.length >= MIN_FAVORITES && <ToolGroup title={locale('generators.recent')}>
{favorites.map(f => <GeneratorCard minimal id={f} />)}
</ToolGroup>}
<ToolGroup title={locale('guides')} link="/guides/" titleIcon="arrow_right">
<GuideCard id="adding-custom-structures" />
<GuideCard id="noise-router" />
</ToolGroup>
<ToolGroup title={locale('tools')}>
<ToolCard title="Report Inspector" icon="report"
link="https://misode.github.io/report/"
desc="Analyse your performance reports" />
<ToolCard title="Minecraft Sounds" icon="sounds"
link="/sounds/"
desc="Browse through and mix all the vanilla sounds" />
<ToolCard title="Data Pack Upgrader"
link="https://misode.github.io/upgrader/"
desc="Convert your data packs from 1.16 to 1.19" />
</ToolGroup>
<ToolGroup title={locale('versions.minecraft_versions')} link="/versions/" titleIcon="arrow_right">
{(versions?.[0] && release) && <>
{versions[0].id !== release.id && (
<ToolCard title={versions[0].name} link={`/versions/?id=${versions[0].id}`} desc={locale('versions.latest_snapshot')} />
)}
<ToolCard title={release.name} link={`/versions/?id=${release.id}`} desc={locale('versions.latest_release')} />
</>}
</ToolGroup>
<ToolGroup title={locale('changelog')} link="/changelog/" titleIcon="git_commit">
{latestChanges?.map(change => <ChangelogEntry change={change} />)}
</ToolGroup>
</div>
<Giscus />
<Footer />
</div>
</main>
return <ToolGroup title={locale('changelog')} link="/changelog/" titleIcon="git_commit">
{latestChanges?.map(change => <ChangelogEntry change={change} />)}
</ToolGroup>
}

2
src/app/pages/Worldgen.tsx
View File

@@ -11,7 +11,7 @@ export function Worldgen({}: Props) {
return <main>
<div class="container worldgen">
<div class="card-group">
<ToolGroup title={locale('popular_generators')}>
<ToolGroup title={locale('generators.popular')}>
<GeneratorCard minimal id="dimension" />
<GeneratorCard minimal id="worldgen/biome" />
<GeneratorCard minimal id="worldgen/noise_settings" />

14
src/styles/global.css
View File

@@ -1571,6 +1571,7 @@ hr {
.badges-list {
display: flex;
flex-wrap: wrap;
gap: 8px 0;
}
.changelog-version {
@@ -1816,6 +1817,15 @@ hr {
align-items: flex-start;
}
.card-column {
display: flex;
flex-direction: column;
}
.card-column > *:not(:last-child) {
margin-bottom: 8px;
}
.card {
display: block;
text-decoration: none;
@@ -2135,6 +2145,10 @@ hr {
grid-template-columns: 1fr;
}
.card-columns {
grid-template-columns: 1fr;
}
.title h1 {
font-size: 18px;
}