Add Tailwind CSS (#425)

* Install and configure tailwind

* Fix style issues

package.json

@@ -55,11 +55,14 @@
     "@types/seedrandom": "^2.4.28",
     "@typescript-eslint/eslint-plugin": "^5.28.0",
     "@typescript-eslint/parser": "^5.28.0",
+    "autoprefixer": "^10.4.16",
     "eslint": "^8.17.0",
     "fast-glob": "^3.2.11",
+    "postcss": "^8.4.31",
     "preact": "^10.8.0",
     "preact-router": "^3.2.1",
     "rollup-plugin-visualizer": "^5.6.0",
+    "tailwindcss": "^3.3.3",
     "typescript": "^4.7.3",
     "vite": "^3.2.7",
     "vite-plugin-static-copy": "^0.12.0"

postcss.config.js

@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

src/app/Main.tsx

@@ -1,5 +1,6 @@
 import { render } from 'preact'
 import '../styles/global.css'
+import '../styles/main.css'
 import '../styles/nodes.css'
 import { App } from './App.js'
 import { LocaleProvider, ProjectProvider, StoreProvider, ThemeProvider, TitleProvider, VersionProvider } from './contexts/index.js'

src/app/components/Card.tsx

@@ -10,7 +10,7 @@ export function Card({ title, overlay, link, children }: Props) {
 	const content = <>
 		{overlay && <span class="card-overlay">{overlay}</span>}
 		<div class="card-content">
-			{title && <h3 class="card-title">{title}</h3>}
+			{title && <h3 class="card-title font-bold text-[1.17em]">{title}</h3>}
 			{children}
 		</div>
 	</>

src/app/components/Header.tsx

@@ -23,7 +23,7 @@ export function Header() {
 	return <header>
 		<div class="title">
 			<Link class="home-link" href="/" aria-label={locale('home')} data-cy="home-link">{Icons.home}</Link>
-			<h1>{title}</h1>
+			<h1 class="font-bold">{title}</h1>
 			{gen && <BtnMenu icon="chevron_down" tooltip={locale('switch_generator')} data-cy="generator-switcher">
 				{config.generators
 					.filter(g => g.tags?.[0] === gen?.tags?.[0] && checkVersion(version, g.minVersion))

src/app/components/ToolCard.tsx

@@ -25,7 +25,7 @@ export function ToolCard({ title, desc, link, icon, titleIcon }: Props) {
 }
 
 function ToolHead({ title, titleIcon }: Pick<Props, 'title' | 'titleIcon'>) {
-	return <h3>
+	return <h3 class="text-[1.17em]">
 		{title}
 		{titleIcon && (titleIcon in Octicon ? (Octicon as any)[titleIcon] : (Icons as any)[titleIcon])}
 	</h3>

src/app/components/ToolGroup.tsx

@@ -12,7 +12,7 @@ interface Props {
 export function ToolGroup({ title, titleIcon, link, children }: Props) {
 	return <div class="tool-group">
 		{link === undefined
-			? <div class="tool-card"><h3>{title}</h3></div>
+			? <div class="tool-card"><h3 class="text-[1.17em]">{title}</h3></div>
 			: <ToolCard {...{ title, titleIcon, link}} />
 		}
 		{children && <div class="tool-body">

src/app/components/whatsnew/WhatsNewEntry.tsx

@@ -9,7 +9,7 @@ export function WhatsNewEntry({ item }: EntryProps) {
 	return <article class="whats-new-entry">
 		<a href={item.url} target="_blank">
 			<WhatsNewTime item={item} />
-			<h2>{item.title}</h2>
+			<h2 class="font-bold text-[27px]">{item.title}</h2>
 		</a>
 		<div class="guide-content" dangerouslySetInnerHTML={{ __html: marked(item.body) }} />
 	</article>

src/app/pages/Changelog.tsx

@@ -14,7 +14,7 @@ export function Changelog({}: Props) {
 
 	return <main>
 		{error && <ErrorPanel error={error} />}
-		<div class="container changelog">
+		<div class="legacy-container changelog">
 			<ChangelogList changes={changes} defaultOrder="desc" limit={100} navigation={(
 				<BtnLink link="/versions/" icon="three_bars" label={locale('versions.all')} />
 			)} />

src/app/pages/Customized.tsx

@@ -82,7 +82,7 @@ export function Customized({}: Props) {
 	}, [model, version])
 
 	return <main>
-		<div class="container customized">
+		<div class="legacy-container customized">
 			<div class="tabs tabs-sticky">
 				<span class={tab === 'basic' ? 'selected' : ''} onClick={() => setTab('basic')}>{locale('customized.basic')}</span>
 				<span class={tab === 'structures' ? 'selected' : ''} onClick={() => setTab('structures')}>{locale('customized.structures')}</span>

src/app/pages/Generators.tsx

@@ -9,7 +9,7 @@ export function Generators({}: Props) {
 	useTitle(locale('title.generators'))
 
 	return <main>
-		<div class="container">
+		<div class="legacy-container">
 			<GeneratorList predicate={gen => !gen.partner} />
 		</div>
 		<Footer />

src/app/pages/Guide.tsx

@@ -3,12 +3,12 @@ import json from 'highlight.js/lib/languages/json'
 import { marked } from 'marked'
 import { route } from 'preact-router'
 import { useCallback, useEffect, useMemo, useState } from 'preact/hooks'
-import { Ad, Badge, Btn, Footer, Giscus, Icons, Octicon, VersionSwitcher } from '../components/index.js'
 import config from '../Config.js'
+import { parseFrontMatter, versionContent } from '../Utils.js'
+import { Ad, Badge, Btn, Footer, Giscus, Icons, Octicon, VersionSwitcher } from '../components/index.js'
 import { useLocale, useTitle, useVersion } from '../contexts/index.js'
 import { useActiveTimeout, useAsync, useHash } from '../hooks/index.js'
 import type { VersionId } from '../services/index.js'
-import { parseFrontMatter, versionContent } from '../Utils.js'
 
 const HASH = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M6.368 1.01a.75.75 0 01.623.859L6.57 4.5h3.98l.46-2.868a.75.75 0 011.48.237L12.07 4.5h2.18a.75.75 0 010 1.5h-2.42l-.64 4h2.56a.75.75 0 010 1.5h-2.8l-.46 2.869a.75.75 0 01-1.48-.237l.42-2.632H5.45l-.46 2.869a.75.75 0 01-1.48-.237l.42-2.632H1.75a.75.75 0 010-1.5h2.42l.64-4H2.25a.75.75 0 010-1.5h2.8l.46-2.868a.75.75 0 01.858-.622zM9.67 10l.64-4H6.33l-.64 4h3.98z"></path></svg>'
 
@@ -172,7 +172,7 @@ export function Guide({ id }: Props) {
 	const [largeWidth] = useState(window.innerWidth > 600)
 
 	return <main>
-		<div class="container guide">
+		<div class="legacy-container guide">
 			<div class="navigation">
 				<a class="btn btn-link" href="/guides/">
 					{Octicon.arrow_left}

src/app/pages/Guides.tsx

@@ -41,7 +41,7 @@ export function Guides({}: Props) {
 	}, [versionedGuides, search, activeTags])
 
 	return <main>
-		<div class="container guides">
+		<div class="legacy-container guides">
 			<div class="navigation">
 				<TextInput class="btn btn-input query-search" placeholder={locale('guides.search')} value={search} onChange={setSearch} />
 				<VersionSwitcher value={versionFilter ? version : undefined} onChange={v => {changeVersion(v); setVersionFiler(true)}} hasAny onAny={() => setVersionFiler(false)} />

src/app/pages/Home.tsx

@@ -22,7 +22,7 @@ export function Home({}: Props) {
 	const smallScreen = useMediaQuery('(max-width: 580px)')
 
 	return <main>
-		<div class="container">
+		<div class="legacy-container">
 			<MinecraftWikiBanner />
 			<div class="card-group">
 				<div class="card-column">

src/app/pages/Partners.tsx

@@ -9,7 +9,7 @@ export function Partners({}: Props) {
 	useTitle(locale('title.partners'))
 
 	return <main>
-		<div class="container">
+		<div class="legacy-container">
 			<GeneratorList predicate={gen => gen.partner !== undefined} />
 		</div>
 		<Footer donate={false} />

src/app/pages/Versions.tsx

@@ -27,7 +27,7 @@ export function Versions({}: Props) {
 
 	return <main>
 		{error && <ErrorPanel error={error} />}
-		<div class="container">
+		<div class="legacy-container">
 			{selectedId ? <>
 				<div class="navigation">
 					<BtnLink link="/versions/" icon="three_bars" label={locale('versions.all')} />

src/app/pages/WhatsNew.tsx

@@ -29,7 +29,7 @@ export function WhatsNew({}: Props) {
 	}, [items, storeTime])
 
 	return <main>
-		<div class="container whats-new">
+		<div class="legacy-container whats-new">
 			<p>{locale('whats_new.description')}</p>
 			{error && <ErrorPanel error={error} />}
 			{items?.map(item => <WhatsNewEntry item={item} />)}

src/app/pages/Worldgen.tsx

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

src/app/schema/renderHtml.tsx

@@ -278,10 +278,10 @@ const renderHtml: RenderHook = {
 		if (node.optional()) {
 			if (value === undefined) {
 				const onExpand = () => path.set(DataModel.wrapLists(node.default()))
-				suffix = <button class="collapse closed tooltipped tip-se" aria-label={localize(lang, 'expand')} onClick={onExpand}>{Octicon.plus_circle}</button>
+				suffix = <button class="node-collapse closed tooltipped tip-se" aria-label={localize(lang, 'expand')} onClick={onExpand}>{Octicon.plus_circle}</button>
 			} else {
 				const onCollapse = () => path.set(undefined)
-				suffix = <button class="collapse open tooltipped tip-se" aria-label={localize(lang, 'remove')} onClick={onCollapse}>{Octicon.trashcan}</button>
+				suffix = <button class="node-collapse open tooltipped tip-se" aria-label={localize(lang, 'remove')} onClick={onCollapse}>{Octicon.trashcan}</button>
 			}
 		}
 		const context = path.getContext().join('.')

src/styles/global.css

@@ -126,12 +126,6 @@
 	}
 }
 
-* {
-	box-sizing: border-box;
-	margin: 0;
-	padding: 0;
-}
-
 ::selection {
 	background-color: var(--selection);
 }
@@ -1444,7 +1438,7 @@ main.has-project {
 	box-shadow: none;
 }
 
-.container {
+.legacy-container {
 	padding: 16px;
 	max-width: 960px;
 	margin: 0 auto;
@@ -2421,8 +2415,8 @@ hr {
 	background-color: var(--background-1);
 	border: 3px solid var(--text-1);
 	border-radius: 10px;
-	width: 10px;
-	height: 10px;
+	width: 16px;
+	height: 16px;
 }
 
 .whats-new-entry > a {
@@ -2650,6 +2644,7 @@ hr {
 	padding: 8px 16px;
 	line-height: 1.2;
 	font-size: 90%;
+	list-style-type: decimal;
 }
 
 .guide-content {

src/styles/main.css

@@ -0,0 +1,15 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+html {
+	line-height: normal;
+}
+
+a {
+	text-decoration: underline;
+}
+
+input::placeholder {
+	color: rgb(117, 117, 117);
+}

src/styles/nodes.css

@@ -165,7 +165,7 @@
   background-color: var(--node-background-input);
 }
 
-.object-node > .node-header > .collapse {
+.object-node > .node-header > .node-collapse {
   cursor: pointer;
 }
 
@@ -215,40 +215,37 @@ button:not([disabled]).selected:hover {
   background-color: var(--node-selected-hover);
 }
 
-.collapse svg {
+.node-collapse svg {
   fill: var(--node-text);
 }
 
-.collapse.closed,
+.node-collapse.closed,
 button.add {
   background-color: var(--node-add);
   border-color: var(--node-add-border);
 }
 
-.collapse:not([disabled]).closed:hover,
+.node-collapse:not([disabled]).closed:hover,
 button:not([disabled]).add:hover {
   background-color: var(--node-add-hover);
 }
 
-.collapse.open,
+.node-collapse.open,
 button.remove {
   background-color: var(--node-remove);
   border-color: var(--node-remove-border);
 }
 
-.collapse:not([disabled]).open:hover,
+.node-collapse:not([disabled]).open:hover,
 button:not([disabled]).remove:hover {
   background-color: var(--node-remove-hover);
 }
 
 .node-header > button svg {
-  display: inline-block;
-  position: relative;
-  top: 2px;
   fill: var(--node-text);
 }
 
-.node-header > button.collapse:last-child,
+.node-header > button.node-collapse:last-child,
 .node-header > button.add:last-child {
   border-top-right-radius: 6px;
   border-bottom-right-radius: 6px;

tailwind.config.js

@@ -0,0 +1,11 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: [
+    "./index.html",
+    "./src/app/**/*.{js,ts,jsx,tsx}",
+  ],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+}