From 4379cb9bba93ce06823eb5c09c283627bda960e1 Mon Sep 17 00:00:00 2001
From: Misode <Misoloo64@gmail.com>
Date: Mon, 6 Jun 2022 03:32:59 +0200
Subject: [PATCH] Add footer with donate link

---
 src/app/components/Footer.tsx  | 23 ++++++++++++++++++++
 src/app/components/Octicon.tsx |  1 +
 src/app/components/index.ts    |  1 +
 src/app/pages/Category.tsx     |  3 ++-
 src/app/pages/Changelog.tsx    |  3 ++-
 src/app/pages/Generator.tsx    |  3 ++-
 src/app/pages/Guide.tsx        |  3 ++-
 src/app/pages/Guides.tsx       |  3 ++-
 src/app/pages/Home.tsx         |  3 ++-
 src/app/pages/Partners.tsx     |  3 ++-
 src/app/pages/Sounds.tsx       |  3 ++-
 src/app/pages/Versions.tsx     |  3 ++-
 src/locales/en.json            |  3 +++
 src/styles/global.css          | 39 ++++++++++++++++++++++++++++++++++
 14 files changed, 85 insertions(+), 9 deletions(-)
 create mode 100644 src/app/components/Footer.tsx

diff --git a/src/app/components/Footer.tsx b/src/app/components/Footer.tsx
new file mode 100644
index 00000000..47aaf959
--- /dev/null
+++ b/src/app/components/Footer.tsx
@@ -0,0 +1,23 @@
+import { Octicon } from '.'
+import { useLocale } from '../contexts'
+
+interface Props {
+	donate?: boolean,
+}
+export function Footer({ donate }: Props) {
+	const { locale } = useLocale()
+
+	return <footer>
+		<p>
+			<span>{locale('developed_by')} <a href="https://github.com/misode" target="_blank" rel="noreferrer">Misode</a></span>
+		</p>
+		{donate !== false && <p class="donate">
+			{Octicon.heart}
+			<a href="https://ko-fi.com/misode" target="_blank" rel="noreferrer">{locale('donate')}</a>
+		</p>}
+		<p>
+			{Octicon.mark_github}
+			<span>{locale('source_code_on')} <a href="https://github.com/misode/misode.github.io" target="_blank" rel="noreferrer">{locale('github')}</a></span>
+		</p>
+	</footer>
+}
diff --git a/src/app/components/Octicon.tsx b/src/app/components/Octicon.tsx
index 9404a34c..5acff40c 100644
--- a/src/app/components/Octicon.tsx
+++ b/src/app/components/Octicon.tsx
@@ -20,6 +20,7 @@ export const Octicon = {
 	file_directory: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M1.75 1A1.75 1.75 0 000 2.75v10.5C0 14.216.784 15 1.75 15h12.5A1.75 1.75 0 0016 13.25v-8.5A1.75 1.75 0 0014.25 3h-6.5a.25.25 0 01-.2-.1l-.9-1.2c-.33-.44-.85-.7-1.4-.7h-3.5z"></path></svg>,
 	gear: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M7.429 1.525a6.593 6.593 0 011.142 0c.036.003.108.036.137.146l.289 1.105c.147.56.55.967.997 1.189.174.086.341.183.501.29.417.278.97.423 1.53.27l1.102-.303c.11-.03.175.016.195.046.219.31.41.641.573.989.014.031.022.11-.059.19l-.815.806c-.411.406-.562.957-.53 1.456a4.588 4.588 0 010 .582c-.032.499.119 1.05.53 1.456l.815.806c.08.08.073.159.059.19a6.494 6.494 0 01-.573.99c-.02.029-.086.074-.195.045l-1.103-.303c-.559-.153-1.112-.008-1.529.27-.16.107-.327.204-.5.29-.449.222-.851.628-.998 1.189l-.289 1.105c-.029.11-.101.143-.137.146a6.613 6.613 0 01-1.142 0c-.036-.003-.108-.037-.137-.146l-.289-1.105c-.147-.56-.55-.967-.997-1.189a4.502 4.502 0 01-.501-.29c-.417-.278-.97-.423-1.53-.27l-1.102.303c-.11.03-.175-.016-.195-.046a6.492 6.492 0 01-.573-.989c-.014-.031-.022-.11.059-.19l.815-.806c.411-.406.562-.957.53-1.456a4.587 4.587 0 010-.582c.032-.499-.119-1.05-.53-1.456l-.815-.806c-.08-.08-.073-.159-.059-.19a6.44 6.44 0 01.573-.99c.02-.029.086-.075.195-.045l1.103.303c.559.153 1.112.008 1.529-.27.16-.107.327-.204.5-.29.449-.222.851-.628.998-1.189l.289-1.105c.029-.11.101-.143.137-.146zM8 0c-.236 0-.47.01-.701.03-.743.065-1.29.615-1.458 1.261l-.29 1.106c-.017.066-.078.158-.211.224a5.994 5.994 0 00-.668.386c-.123.082-.233.09-.3.071L3.27 2.776c-.644-.177-1.392.02-1.82.63a7.977 7.977 0 00-.704 1.217c-.315.675-.111 1.422.363 1.891l.815.806c.05.048.098.147.088.294a6.084 6.084 0 000 .772c.01.147-.038.246-.088.294l-.815.806c-.474.469-.678 1.216-.363 1.891.2.428.436.835.704 1.218.428.609 1.176.806 1.82.63l1.103-.303c.066-.019.176-.011.299.071.213.143.436.272.668.386.133.066.194.158.212.224l.289 1.106c.169.646.715 1.196 1.458 1.26a8.094 8.094 0 001.402 0c.743-.064 1.29-.614 1.458-1.26l.29-1.106c.017-.066.078-.158.211-.224a5.98 5.98 0 00.668-.386c.123-.082.233-.09.3-.071l1.102.302c.644.177 1.392-.02 1.82-.63.268-.382.505-.789.704-1.217.315-.675.111-1.422-.364-1.891l-.814-.806c-.05-.048-.098-.147-.088-.294a6.1 6.1 0 000-.772c-.01-.147.039-.246.088-.294l.814-.806c.475-.469.679-1.216.364-1.891a7.992 7.992 0 00-.704-1.218c-.428-.609-1.176-.806-1.82-.63l-1.103.303c-.066.019-.176.011-.299-.071a5.991 5.991 0 00-.668-.386c-.133-.066-.194-.158-.212-.224L10.16 1.29C9.99.645 9.444.095 8.701.031A8.094 8.094 0 008 0zm1.5 8a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0zM11 8a3 3 0 11-6 0 3 3 0 016 0z"></path></svg>,
 	globe: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M1.543 7.25h2.733c.144-2.074.866-3.756 1.58-4.948.12-.197.237-.381.353-.552a6.506 6.506 0 00-4.666 5.5zm2.733 1.5H1.543a6.506 6.506 0 004.666 5.5 11.13 11.13 0 01-.352-.552c-.715-1.192-1.437-2.874-1.581-4.948zm1.504 0h4.44a9.637 9.637 0 01-1.363 4.177c-.306.51-.612.919-.857 1.215a9.978 9.978 0 01-.857-1.215A9.637 9.637 0 015.78 8.75zm4.44-1.5H5.78a9.637 9.637 0 011.363-4.177c.306-.51.612-.919.857-1.215.245.296.55.705.857 1.215A9.638 9.638 0 0110.22 7.25zm1.504 1.5c-.144 2.074-.866 3.756-1.58 4.948-.12.197-.237.381-.353.552a6.506 6.506 0 004.666-5.5h-2.733zm2.733-1.5h-2.733c-.144-2.074-.866-3.756-1.58-4.948a11.738 11.738 0 00-.353-.552 6.506 6.506 0 014.666 5.5zM8 0a8 8 0 100 16A8 8 0 008 0z"></path></svg>,
+	heart: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M4.25 2.5c-1.336 0-2.75 1.164-2.75 3 0 2.15 1.58 4.144 3.365 5.682A20.565 20.565 0 008 13.393a20.561 20.561 0 003.135-2.211C12.92 9.644 14.5 7.65 14.5 5.5c0-1.836-1.414-3-2.75-3-1.373 0-2.609.986-3.029 2.456a.75.75 0 01-1.442 0C6.859 3.486 5.623 2.5 4.25 2.5zM8 14.25l-.345.666-.002-.001-.006-.003-.018-.01a7.643 7.643 0 01-.31-.17 22.075 22.075 0 01-3.434-2.414C2.045 10.731 0 8.35 0 5.5 0 2.836 2.086 1 4.25 1 5.797 1 7.153 1.802 8 3.02 8.847 1.802 10.203 1 11.75 1 13.914 1 16 2.836 16 5.5c0 2.85-2.045 5.231-3.885 6.818a22.08 22.08 0 01-3.744 2.584l-.018.01-.006.003h-.002L8 14.25zm0 0l.345.666a.752.752 0 01-.69 0L8 14.25z"></path></svg>,
 	history: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M1.643 3.143L.427 1.927A.25.25 0 000 2.104V5.75c0 .138.112.25.25.25h3.646a.25.25 0 00.177-.427L2.715 4.215a6.5 6.5 0 11-1.18 4.458.75.75 0 10-1.493.154 8.001 8.001 0 101.6-5.684zM7.75 4a.75.75 0 01.75.75v2.992l2.028.812a.75.75 0 01-.557 1.392l-2.5-1A.75.75 0 017 8.25v-3.5A.75.75 0 017.75 4z"></path></svg>,
 	info: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M8 1.5a6.5 6.5 0 100 13 6.5 6.5 0 000-13zM0 8a8 8 0 1116 0A8 8 0 010 8zm6.5-.25A.75.75 0 017.25 7h1a.75.75 0 01.75.75v2.75h.25a.75.75 0 010 1.5h-2a.75.75 0 010-1.5h.25v-2h-.25a.75.75 0 01-.75-.75zM8 6a1 1 0 100-2 1 1 0 000 2z"></path></svg>,
 	issue_opened: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M8 1.5a6.5 6.5 0 100 13 6.5 6.5 0 000-13zM0 8a8 8 0 1116 0A8 8 0 010 8zm9 3a1 1 0 11-2 0 1 1 0 012 0zm-.25-6.25a.75.75 0 00-1.5 0v3.5a.75.75 0 001.5 0v-3.5z"></path></svg>,
diff --git a/src/app/components/index.ts b/src/app/components/index.ts
index d858264a..28e59053 100644
--- a/src/app/components/index.ts
+++ b/src/app/components/index.ts
@@ -3,6 +3,7 @@ export * from './Btn'
 export * from './BtnInput'
 export * from './BtnMenu'
 export * from './ErrorPanel'
+export * from './Footer'
 export * from './forms'
 export * from './generator'
 export * from './Giscus'
diff --git a/src/app/pages/Category.tsx b/src/app/pages/Category.tsx
index d9a1474e..555502e6 100644
--- a/src/app/pages/Category.tsx
+++ b/src/app/pages/Category.tsx
@@ -1,5 +1,5 @@
 import config from '../../config.json'
-import { ToolCard } from '../components'
+import { Footer, ToolCard } from '../components'
 import { useLocale, useTitle } from '../contexts'
 import { cleanUrl } from '../Utils'
 
@@ -16,5 +16,6 @@ export function Category({ category }: Props) {
 				<ToolCard title={locale(g.id)} link={cleanUrl(g.url)} />
 			)}
 		</div>
+		<Footer donate={false} />
 	</main>
 }
diff --git a/src/app/pages/Changelog.tsx b/src/app/pages/Changelog.tsx
index 66d03582..a7638e41 100644
--- a/src/app/pages/Changelog.tsx
+++ b/src/app/pages/Changelog.tsx
@@ -1,4 +1,4 @@
-import { Ad, ChangelogList, ErrorPanel } from '../components'
+import { Ad, ChangelogList, ErrorPanel, Footer } from '../components'
 import { useLocale, useTitle } from '../contexts'
 import { useAsync } from '../hooks'
 import { getChangelogs } from '../services'
@@ -18,5 +18,6 @@ export function Changelog({}: Props) {
 		<div class="changelog">
 			<ChangelogList changes={changelogs} defaultOrder="desc" />
 		</div>
+		<Footer />
 	</main>
 }
diff --git a/src/app/pages/Generator.tsx b/src/app/pages/Generator.tsx
index 5a974884..018b6260 100644
--- a/src/app/pages/Generator.tsx
+++ b/src/app/pages/Generator.tsx
@@ -3,7 +3,7 @@ import { getCurrentUrl, route } from 'preact-router'
 import { useEffect, useErrorBoundary, useMemo, useRef, useState } from 'preact/hooks'
 import config from '../../config.json'
 import { Analytics } from '../Analytics'
-import { Ad, Btn, BtnMenu, ErrorPanel, HasPreview, Octicon, PreviewPanel, SearchList, SourcePanel, TextInput, Tree } from '../components'
+import { Ad, Btn, BtnMenu, ErrorPanel, Footer, HasPreview, Octicon, PreviewPanel, SearchList, SourcePanel, TextInput, Tree } from '../components'
 import { useLocale, useProject, useTitle, useVersion } from '../contexts'
 import { AsyncCancel, useActiveTimeout, useAsync, useModel, useSearchParam } from '../hooks'
 import { getOutput } from '../schema/transformOutput'
@@ -377,6 +377,7 @@ export function Generator({}: Props) {
 			</div>
 			{error && <ErrorPanel error={error} onDismiss={() => setError(null)} />}
 			<Tree {...{model, version, blockStates}} onError={setError} />
+			<Footer donate={!gen.partner} />
 		</main>
 		<div class="popup-actions" style={`--offset: -${8 + actionsShown * 50}px;`}>
 			<div class={`popup-action action-preview${hasPreview ? ' shown' : ''} tooltipped tip-nw`} aria-label={locale(previewShown ? 'hide_preview' : 'show_preview')} onClick={togglePreview}>
diff --git a/src/app/pages/Guide.tsx b/src/app/pages/Guide.tsx
index a6612d2f..4232995a 100644
--- a/src/app/pages/Guide.tsx
+++ b/src/app/pages/Guide.tsx
@@ -4,7 +4,7 @@ import { marked } from 'marked'
 import { route } from 'preact-router'
 import { useCallback, useEffect, useMemo, useState } from 'preact/hooks'
 import config from '../../config.json'
-import { Ad, Btn, BtnMenu, ChangelogTag, Giscus, Octicon } from '../components'
+import { Ad, Btn, BtnMenu, ChangelogTag, Footer, Giscus, Octicon } from '../components'
 import { useLocale, useTitle, useVersion } from '../contexts'
 import { useActiveTimeout, useAsync, useHash } from '../hooks'
 import type { VersionId } from '../services'
@@ -195,5 +195,6 @@ export function Guide({ id }: Props) {
 				<Giscus />
 			</>}
 		</div>
+		<Footer />
 	</main>
 }
diff --git a/src/app/pages/Guides.tsx b/src/app/pages/Guides.tsx
index 15b77d7d..e8b13fd5 100644
--- a/src/app/pages/Guides.tsx
+++ b/src/app/pages/Guides.tsx
@@ -1,6 +1,6 @@
 import { useMemo, useState } from 'preact/hooks'
 import config from '../../config.json'
-import { Btn, BtnMenu, ChangelogTag, GuideCard, TextInput } from '../components'
+import { Btn, BtnMenu, ChangelogTag, Footer, GuideCard, TextInput } from '../components'
 import { useLocale, useTitle, useVersion } from '../contexts'
 import { useTags } from '../hooks/useTags'
 import type { VersionId } from '../services'
@@ -72,5 +72,6 @@ export function Guides({}: Props) {
 				<GuideCard title={g.title} link={`/guides/${g.id}/`} tags={g.tags ?? []} versions={g.versions ?? []} activeTags={activeTags} toggleTag={toggleTag} />
 			)}
 		</div>
+		<Footer />
 	</main>
 }
diff --git a/src/app/pages/Home.tsx b/src/app/pages/Home.tsx
index 62598025..6d0a3062 100644
--- a/src/app/pages/Home.tsx
+++ b/src/app/pages/Home.tsx
@@ -1,5 +1,5 @@
 import config from '../../config.json'
-import { Giscus, ToolCard } from '../components'
+import { Footer, Giscus, ToolCard } from '../components'
 import { useLocale, useTitle } from '../contexts'
 import { cleanUrl } from '../Utils'
 
@@ -37,6 +37,7 @@ export function Home({}: Props) {
 			<ToolCard title="Minecraft Versions" link="/versions/" />
 			<ToolCard title="Data Pack Guides" link="/guides/" />
 			<Giscus />
+			<Footer />
 		</div>
 	</main>
 }
diff --git a/src/app/pages/Partners.tsx b/src/app/pages/Partners.tsx
index 2338382d..cb18e2e6 100644
--- a/src/app/pages/Partners.tsx
+++ b/src/app/pages/Partners.tsx
@@ -1,5 +1,5 @@
 import config from '../../config.json'
-import { ToolCard } from '../components'
+import { Footer, ToolCard } from '../components'
 import { useLocale, useTitle } from '../contexts'
 import { cleanUrl } from '../Utils'
 
@@ -23,5 +23,6 @@ export function Partners({}: Props) {
 				)}
 			</ToolCard>)}
 		</div>
+		<Footer donate={false} />
 	</main>
 }
diff --git a/src/app/pages/Sounds.tsx b/src/app/pages/Sounds.tsx
index b8072640..051bbc96 100644
--- a/src/app/pages/Sounds.tsx
+++ b/src/app/pages/Sounds.tsx
@@ -1,7 +1,7 @@
 import type { Howl, HowlOptions } from 'howler'
 import { useEffect, useMemo, useRef, useState } from 'preact/hooks'
 import config from '../../config.json'
-import { Btn, BtnMenu, ErrorPanel, SoundConfig, TextInput } from '../components'
+import { Btn, BtnMenu, ErrorPanel, Footer, SoundConfig, TextInput } from '../components'
 import { useLocale, useTitle, useVersion } from '../contexts'
 import { useAsync } from '../hooks'
 import type { VersionId } from '../services'
@@ -87,5 +87,6 @@ export function Sounds({}: Props) {
 				{soundKeys.map(s => <option key={s} value={s} />)}
 			</datalist>
 		</>}
+		<Footer donate={false} />
 	</main>
 }
diff --git a/src/app/pages/Versions.tsx b/src/app/pages/Versions.tsx
index 7711efee..5104cf83 100644
--- a/src/app/pages/Versions.tsx
+++ b/src/app/pages/Versions.tsx
@@ -1,4 +1,4 @@
-import { Ad, ErrorPanel, Octicon, VersionDetail, VersionList } from '../components'
+import { Ad, ErrorPanel, Footer, Octicon, VersionDetail, VersionList } from '../components'
 import { useLocale, useTitle } from '../contexts'
 import { useAsync, useSearchParam } from '../hooks'
 import type { VersionMeta } from '../services'
@@ -46,6 +46,7 @@ export function Versions({}: Props) {
 				<VersionDetail id={selectedId} version={selected} />
 			</> : <VersionList versions={versions ?? []} link={id => `/versions/?id=${id}`} />}
 		</div>
+		<Footer donate={false} />
 	</main>
 }
 
diff --git a/src/locales/en.json b/src/locales/en.json
index f28df0a2..98e47b64 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -16,9 +16,11 @@
   "copy_share": "Copy share link",
   "copied": "Copied!",
   "copy_context": "Copy context",
+  "developed_by": "Developed by",
   "dimension_type": "Dimension Type",
   "dimension": "Dimension",
   "disabled": "Disabled",
+  "donate": "Donate",
   "download": "Download",
   "duplicate": "Duplicate",
   "enabled": "Enabled",
@@ -135,6 +137,7 @@
   "sounds.remove_sound": "Remove sound",
   "sounds.unknown_sound": "Unknown sound",
   "sounds.loading_sound": "Loading sound",
+  "source_code_on": "Source code on",
   "source_placeholder": "Paste raw %0% content here",
   "switch_generator": "Switch generator",
   "switch_version": "Switch version",
diff --git a/src/styles/global.css b/src/styles/global.css
index f46fb1dc..c986d53d 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -12,6 +12,7 @@
 	--accent-success: #3eb84f;
 	--accent-warning: #b8893e;
 	--accent-danger: #cf4945;
+	--accent-donate: #db61a2;
 	--accent-sounds-1: #451475;
 	--accent-sounds-2: #39155e;
 	--accent-sounds-3: #6a08a3;
@@ -233,6 +234,44 @@ header .btn-menu > .btn:hover {
 	fill: var(--nav-hover);
 }
 
+footer {
+	display: flex;
+	align-items: flex-end;
+	flex-wrap: wrap;
+	padding: 50px 30px;
+	color: var(--text-3);
+}
+
+footer > * {
+	margin-bottom: 10px;
+}
+
+footer > *:not(:last-child) {
+	margin-right: 30px;
+}
+
+footer p {
+	display: flex;
+	align-items: center;
+}
+
+footer a {
+	color: var(--text-3);
+}
+
+footer a:hover {
+	color: var(--text-1);
+}
+
+footer svg {
+	fill: var(--text-3);
+	margin-right: 8px;
+}
+
+footer .donate svg {
+	fill: var(--accent-donate);
+}
+
 main {
 	padding-top: 68px;
 	color: var(--text-1);