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

Projects (#192)

Browse Source 
* Add file save UI and drafts project

* Fix build

* Create SearchList component as abstraction

* Add project page and file tree view

* Create Locale context

* Create Theme context

* Create Version context

* Create Title context

* Create Project context

* Store current file in project context

* Fix issues when renaming file and implement deleting

* Style improvements

* Make all project strings translatable

* Fix z-index
This commit is contained in:
Misode
2022-01-18 01:02:19 +01:00
committed by GitHub
parent cd318dc795
commit c6c52ca41a
39 changed files with 958 additions and 373 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
src/app/components/Header.tsx
View File

@@ -1,8 +1,7 @@
import { getCurrentUrl, Link, route } from 'preact-router'
import { Btn, BtnMenu, Icons, Octicon } from '.'
import config from '../../config.json'
import { locale } from '../Locales'
import type { VersionId } from '../services'
import { useLocale, useTheme, useTitle, useVersion } from '../contexts'
import { checkVersion } from '../services'
import { cleanUrl, getGenerator } from '../Utils'
@@ -12,51 +11,45 @@ const Themes: Record<string, keyof typeof Octicon> = {
light: 'sun',
}
type HeaderProps = {
lang: string,
title: string,
version: VersionId,
theme: string,
changeTheme: (theme: string) => unknown,
language: string,
changeLanguage: (language: string) => unknown,
}
export function Header({ lang, title, version, theme, changeTheme, language, changeLanguage }: HeaderProps) {
const loc = locale.bind(null, lang)
export function Header() {
const { lang, locale, changeLanguage } = useLocale()
const { theme, changeTheme } = useTheme()
const { version } = useVersion()
const { title } = useTitle()
const gen = getGenerator(getCurrentUrl())
return <header>
<div class="title">
<Link class="home-link" href="/" aria-label={loc('home')} data-cy="home-link">{Icons.home}</Link>
<Link class="home-link" href="/" aria-label={locale('home')} data-cy="home-link">{Icons.home}</Link>
<h1>{title}</h1>
{gen && <BtnMenu icon="chevron_down" tooltip={loc('switch_generator')} data-cy="generator-switcher">
{gen && <BtnMenu icon="chevron_down" tooltip={locale('switch_generator')} data-cy="generator-switcher">
{config.generators
.filter(g => g.category === gen?.category && checkVersion(version, g.minVersion))
.map(g =>
<Btn label={loc(g.id)} active={g.id === gen.id} onClick={() => route(cleanUrl(g.url))} />
<Btn label={locale(g.id)} active={g.id === gen.id} onClick={() => route(cleanUrl(g.url))} />
)}
</BtnMenu>}
</div>
<nav>
<ul>
<li data-cy="language-switcher">
<BtnMenu icon="globe" tooltip={loc('language')}>
<BtnMenu icon="globe" tooltip={locale('language')}>
{config.languages.map(({ code, name }) =>
<Btn label={name} active={code === language}
<Btn label={name} active={code === lang}
onClick={() => changeLanguage(code)} />
)}
</BtnMenu>
</li>
<li data-cy="theme-switcher">
<BtnMenu icon={Themes[theme]} tooltip={loc('theme')}>
<BtnMenu icon={Themes[theme]} tooltip={locale('theme')}>
{Object.entries(Themes).map(([th, icon]) =>
<Btn icon={icon} label={loc(`theme.${th}`)} active={th === theme}
<Btn icon={icon} label={locale(`theme.${th}`)} active={th === theme}
onClick={() => changeTheme(th)} />
)}
</BtnMenu>
</li>
<li class="dimmed">
<a href="https://github.com/misode/misode.github.io" target="_blank" rel="noreferrer" class="tooltipped tip-sw" aria-label={loc('github')}>
<a href="https://github.com/misode/misode.github.io" target="_blank" rel="noreferrer" class="tooltipped tip-sw" aria-label={locale('github')}>
{Octicon.mark_github}
</a>
</li>