Initial commit

.editorconfig

@@ -0,0 +1,12 @@
+root = true
+
+[*]
+indent_style = tab
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.yml]
+indent_style = space
+indent_size = 2

.eslintrc

@@ -0,0 +1,3 @@
+{
+	"extends": ["next", "next/core-web-vitals", "prettier"]
+}

.gitignore

@@ -0,0 +1,9 @@
+# Generated via Next.js
+.next
+
+# Generated via Node.js
+node_modules
+
+# Generated via next-pwa
+**/public/workbox**
+**/public/sw**

components/appbar.tsx

@@ -0,0 +1,56 @@
+import Link from 'next/link'
+import { useRouter } from 'next/router'
+
+const links = [
+	{ label: 'Story', href: '/story' },
+	{ label: 'Recipes', href: '/recipes' },
+]
+
+const Appbar = () => {
+	const router = useRouter()
+
+	return (
+		<div className='fixed top-0 left-0 z-20 w-full bg-zinc-900 pt-safe'>
+			<header className='border-b bg-zinc-100 px-safe dark:border-zinc-800 dark:bg-zinc-900'>
+				<div className='mx-auto flex h-20 max-w-screen-md items-center justify-between px-6'>
+					<Link href='/'>
+						<a>
+							<h1 className='font-medium'>Rice Bowl</h1>
+						</a>
+					</Link>
+
+					<nav className='flex items-center space-x-6'>
+						<div className='hidden sm:block'>
+							<div className='flex items-center space-x-6'>
+								{links.map(({ label, href }) => (
+									<Link key={label} href={href}>
+										<a
+											className={`text-sm ${
+												router.pathname === href
+													? 'text-indigo-500 dark:text-indigo-400'
+													: 'text-zinc-600 hover:text-zinc-900 dark:text-zinc-400 dark:hover:text-zinc-50'
+											}`}
+										>
+											{label}
+										</a>
+									</Link>
+								))}
+							</div>
+						</div>
+
+						<div
+							title='Gluten Free'
+							className='h-10 w-10 rounded-full bg-zinc-200 bg-cover bg-center shadow-inner dark:bg-zinc-800'
+							style={{
+								backgroundImage:
+									'url(https://images.unsplash.com/photo-1612480797665-c96d261eae09?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80)',
+							}}
+						/>
+					</nav>
+				</div>
+			</header>
+		</div>
+	)
+}
+
+export default Appbar

components/bottom-nav.tsx

@@ -0,0 +1,90 @@
+import Link from 'next/link'
+import { useRouter } from 'next/router'
+
+const BottomNav = () => {
+	const router = useRouter()
+
+	return (
+		<div className='sm:hidden'>
+			<nav className='fixed bottom-0 w-full border-t bg-zinc-100 pb-safe dark:border-zinc-800 dark:bg-zinc-900'>
+				<div className='mx-auto flex h-16 max-w-md items-center justify-around px-6'>
+					{links.map(({ href, label, icon }) => (
+						<Link key={label} href={href}>
+							<a
+								className={`flex h-full w-full flex-col items-center justify-center space-y-1 ${
+									router.pathname === href
+										? 'text-indigo-500 dark:text-indigo-400'
+										: 'text-zinc-600 hover:text-zinc-900 dark:text-zinc-400 dark:hover:text-zinc-50'
+								}`}
+							>
+								{icon}
+								<span className='text-xs text-zinc-600 dark:text-zinc-400'>
+									{label}
+								</span>
+							</a>
+						</Link>
+					))}
+				</div>
+			</nav>
+		</div>
+	)
+}
+
+export default BottomNav
+
+const links = [
+	{
+		label: 'Home',
+		href: '/',
+		icon: (
+			<svg
+				viewBox='0 0 15 15'
+				fill='none'
+				xmlns='http://www.w3.org/2000/svg'
+				width='18'
+				height='18'
+			>
+				<path
+					d='M7.5.5l.325-.38a.5.5 0 00-.65 0L7.5.5zm-7 6l-.325-.38L0 6.27v.23h.5zm5 8v.5a.5.5 0 00.5-.5h-.5zm4 0H9a.5.5 0 00.5.5v-.5zm5-8h.5v-.23l-.175-.15-.325.38zM1.5 15h4v-1h-4v1zm13.325-8.88l-7-6-.65.76 7 6 .65-.76zm-7.65-6l-7 6 .65.76 7-6-.65-.76zM6 14.5v-3H5v3h1zm3-3v3h1v-3H9zm.5 3.5h4v-1h-4v1zm5.5-1.5v-7h-1v7h1zm-15-7v7h1v-7H0zM7.5 10A1.5 1.5 0 019 11.5h1A2.5 2.5 0 007.5 9v1zm0-1A2.5 2.5 0 005 11.5h1A1.5 1.5 0 017.5 10V9zm6 6a1.5 1.5 0 001.5-1.5h-1a.5.5 0 01-.5.5v1zm-12-1a.5.5 0 01-.5-.5H0A1.5 1.5 0 001.5 15v-1z'
+					fill='currentColor'
+				/>
+			</svg>
+		),
+	},
+	{
+		label: 'Story',
+		href: '/story',
+		icon: (
+			<svg
+				viewBox='0 0 15 15'
+				fill='none'
+				xmlns='http://www.w3.org/2000/svg'
+				width='18'
+				height='18'
+			>
+				<path
+					d='M2.5.5V0H2v.5h.5zm10 0h.5V0h-.5v.5zM4.947 4.724a.5.5 0 00-.894-.448l.894.448zM2.5 8.494l-.447-.223-.146.293.21.251.383-.32zm5 5.997l-.384.32a.5.5 0 00.769 0l-.385-.32zm5-5.996l.384.32.21-.251-.146-.293-.447.224zm-1.553-4.219a.5.5 0 00-.894.448l.894-.448zM8 9.494v-.5H7v.5h1zm-.5-4.497A4.498 4.498 0 013 .5H2a5.498 5.498 0 005.5 5.497v-1zM2.5 1h10V0h-10v1zM12 .5a4.498 4.498 0 01-4.5 4.497v1c3.038 0 5.5-2.46 5.5-5.497h-1zM4.053 4.276l-2 3.995.895.448 2-3.995-.895-.448zM2.116 8.815l5 5.996.769-.64-5-5.996-.769.64zm5.768 5.996l5-5.996-.768-.64-5 5.996.769.64zm5.064-6.54l-2-3.995-.895.448 2 3.995.895-.448zM8 14.49V9.494H7v4.997h1z'
+					fill='currentColor'
+				/>
+			</svg>
+		),
+	},
+	{
+		label: 'Recipes',
+		href: '/recipes',
+		icon: (
+			<svg
+				viewBox='0 0 15 15'
+				fill='none'
+				xmlns='http://www.w3.org/2000/svg'
+				width='18'
+				height='18'
+			>
+				<path
+					d='M7.5 15V7m0 .5v3m0-3a4 4 0 00-4-4h-3v3a4 4 0 004 4h3m0-3h3a4 4 0 004-4v-3h-3a4 4 0 00-4 4v3zm0 0l4-4m-4 7l-4-4'
+					stroke='currentColor'
+				/>
+			</svg>
+		),
+	},
+]

components/meta.tsx

@@ -0,0 +1,36 @@
+import Head from 'next/head'
+
+const Meta = () => (
+	<Head>
+		<title>Rice Bowl</title>
+		<meta charSet='utf-8' />
+		<meta name='mobile-web-app-capable' content='yes' />
+		<meta name='apple-mobile-web-app-capable' content='yes' />
+		<meta
+			name='apple-mobile-web-app-status-bar-style'
+			content='black-translucent'
+		/>
+		<meta name='apple-mobile-web-app-title' content='Rice Bowl' />
+		<meta name='application-name' content='Rice Bowl' />
+		<meta name='description' content='Bring your own ingredients' />
+		<meta
+			name='theme-color'
+			content='#f4f4f5'
+			media='(prefers-color-scheme: light)'
+		/>
+		<meta
+			name='theme-color'
+			content='#18181b'
+			media='(prefers-color-scheme: dark)'
+		/>
+		<meta
+			name='viewport'
+			content='width=device-width, initial-scale=1, user-scalable=0, viewport-fit=cover'
+		/>
+		<link rel='apple-touch-icon' href='/images/icon-maskable-512.png' />
+		<link rel='icon' type='image/png' href='/images/favicon.png' />
+		<link rel='manifest' href='/manifest.json' />
+	</Head>
+)
+
+export default Meta

components/page.tsx

@@ -0,0 +1,34 @@
+import Head from 'next/head'
+import Appbar from '@/components/appbar'
+import BottomNav from '@/components/bottom-nav'
+
+interface Props {
+	title?: string
+	children: React.ReactNode
+}
+
+const Page = ({ title, children }: Props) => (
+	<>
+		{title ? (
+			<Head>
+				<title>Rice Bowl | {title}</title>
+			</Head>
+		) : null}
+
+		<Appbar />
+
+		<main
+			/**
+			 * Padding top = `appbar` height
+			 * Padding bottom = `bottom-nav` height
+			 */
+			className='mx-auto max-w-screen-md pt-20 pb-16 px-safe sm:pb-0'
+		>
+			<div className='p-6'>{children}</div>
+		</main>
+
+		<BottomNav />
+	</>
+)
+
+export default Page

components/section.tsx

@@ -0,0 +1,9 @@
+interface Props {
+	children: React.ReactNode
+}
+
+const Section = ({ children }: Props) => (
+	<section className='mt-10'>{children}</section>
+)
+
+export default Section

next-env.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.

next.config.js

@@ -0,0 +1,9 @@
+const withPWA = require('next-pwa')
+const runtimeCaching = require('next-pwa/cache')
+
+module.exports = withPWA({
+	pwa: {
+		dest: 'public',
+		runtimeCaching,
+	},
+})