+
+ {isOpen && (
+
+ )
+}
diff --git a/fictionarchive-web/src/components/Navbar.tsx b/fictionarchive-web/src/components/Navbar.tsx
new file mode 100644
index 0000000..a6b13cd
--- /dev/null
+++ b/fictionarchive-web/src/components/Navbar.tsx
@@ -0,0 +1,50 @@
+import { Link, NavLink } from 'react-router-dom'
+import { AuthenticationDisplay } from './AuthenticationDisplay'
+import { Button } from './ui/button'
+import { Input } from './ui/input'
+
+export function Navbar() {
+ return (
+
+ )
+}
diff --git a/fictionarchive-web/src/components/NovelCard.tsx b/fictionarchive-web/src/components/NovelCard.tsx
new file mode 100644
index 0000000..4a5db75
--- /dev/null
+++ b/fictionarchive-web/src/components/NovelCard.tsx
@@ -0,0 +1,47 @@
+import type { Novel } from '../__generated__/graphql'
+import { Card, CardContent, CardHeader, CardTitle } from './ui/card'
+
+type NovelCardProps = {
+ novel: Novel
+}
+
+function pickText(novelText?: Novel['name'] | Novel['description']) {
+ const texts = novelText?.texts ?? []
+ const english = texts.find((t) => t.language === 'EN')
+ return (english ?? texts[0])?.text ?? 'No description available.'
+}
+
+export function NovelCard({ novel }: NovelCardProps) {
+ const title = pickText(novel.name)
+ const description = pickText(novel.description)
+ const cover = novel.coverImage
+
+ const coverSrc = cover?.newPath ?? cover?.originalPath
+
+ return (
+
+
+ )}
+
+
+
+ + Signed in +
+{email ?? 'User'}
+
+ 
+
+ ) : (
+
+ )}
+ + {description} +
+
+
+
+
+ )
+}
diff --git a/fictionarchive-web/src/lib/utils.ts b/fictionarchive-web/src/lib/utils.ts
new file mode 100644
index 0000000..d32b0fe
--- /dev/null
+++ b/fictionarchive-web/src/lib/utils.ts
@@ -0,0 +1,6 @@
+import { type ClassValue, clsx } from 'clsx'
+import { twMerge } from 'tailwind-merge'
+
+export function cn(...inputs: ClassValue[]) {
+ return twMerge(clsx(inputs))
+}
diff --git a/fictionarchive-web/src/main.tsx b/fictionarchive-web/src/main.tsx
new file mode 100644
index 0000000..9745d00
--- /dev/null
+++ b/fictionarchive-web/src/main.tsx
@@ -0,0 +1,20 @@
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import './index.css'
+import App from './App.tsx'
+import { ApolloProvider } from '@apollo/client/react'
+import { apolloClient } from './apolloClient.ts'
+import { AuthProvider } from './auth/AuthContext'
+import { BrowserRouter } from 'react-router-dom'
+
+createRoot(document.getElementById('root')!).render(
+ + The page you are looking for does not exist. Head back to the novels + list to continue. +
++ Detail view coming soon. Select a novel to explore chapters and + metadata once implemented. +
+
+
+
+ Latest Novels
+
+
+
+ {loading && !data && (
+
+
+
+
+ )}
+
+ {error && (
+
+
+
+
+ )}
+
+ {!loading && novels.length === 0 && !error && (
+
+
+
+
+ )}
+
+ {novels.length > 0 && (
+
+ )
+}
diff --git a/fictionarchive-web/tailwind.config.cjs b/fictionarchive-web/tailwind.config.cjs
new file mode 100644
index 0000000..2f4e182
--- /dev/null
+++ b/fictionarchive-web/tailwind.config.cjs
@@ -0,0 +1,69 @@
+const { fontFamily } = require('tailwindcss/defaultTheme')
+
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+ darkMode: ['class'],
+ content: ['./index.html', './src/**/*.{ts,tsx}'],
+ theme: {
+ extend: {
+ colors: {
+ border: 'hsl(var(--border))',
+ input: 'hsl(var(--input))',
+ ring: 'hsl(var(--ring))',
+ background: 'hsl(var(--background))',
+ foreground: 'hsl(var(--foreground))',
+ primary: {
+ DEFAULT: 'hsl(var(--primary))',
+ foreground: 'hsl(var(--primary-foreground))',
+ },
+ secondary: {
+ DEFAULT: 'hsl(var(--secondary))',
+ foreground: 'hsl(var(--secondary-foreground))',
+ },
+ destructive: {
+ DEFAULT: 'hsl(var(--destructive))',
+ foreground: 'hsl(var(--destructive-foreground))',
+ },
+ muted: {
+ DEFAULT: 'hsl(var(--muted))',
+ foreground: 'hsl(var(--muted-foreground))',
+ },
+ accent: {
+ DEFAULT: 'hsl(var(--accent))',
+ foreground: 'hsl(var(--accent-foreground))',
+ },
+ popover: {
+ DEFAULT: 'hsl(var(--popover))',
+ foreground: 'hsl(var(--popover-foreground))',
+ },
+ card: {
+ DEFAULT: 'hsl(var(--card))',
+ foreground: 'hsl(var(--card-foreground))',
+ },
+ },
+ borderRadius: {
+ lg: 'var(--radius)',
+ md: 'calc(var(--radius) - 2px)',
+ sm: 'calc(var(--radius) - 4px)',
+ },
+ fontFamily: {
+ sans: ['var(--font-sans)', ...fontFamily.sans],
+ },
+ keyframes: {
+ 'accordion-down': {
+ from: { height: '0' },
+ to: { height: 'var(--radix-accordion-content-height)' },
+ },
+ 'accordion-up': {
+ from: { height: 'var(--radix-accordion-content-height)' },
+ to: { height: '0' },
+ },
+ },
+ animation: {
+ 'accordion-down': 'accordion-down 0.2s ease-out',
+ 'accordion-up': 'accordion-up 0.2s ease-out',
+ },
+ },
+ },
+ plugins: [require('tailwindcss-animate')],
+}
diff --git a/fictionarchive-web/tsconfig.app.json b/fictionarchive-web/tsconfig.app.json
new file mode 100644
index 0000000..a9b5a59
--- /dev/null
+++ b/fictionarchive-web/tsconfig.app.json
@@ -0,0 +1,28 @@
+{
+ "compilerOptions": {
+ "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+ "target": "ES2022",
+ "useDefineForClassFields": true,
+ "lib": ["ES2022", "DOM", "DOM.Iterable"],
+ "module": "ESNext",
+ "types": ["vite/client"],
+ "skipLibCheck": true,
+
+ /* Bundler mode */
+ "moduleResolution": "bundler",
+ "allowImportingTsExtensions": true,
+ "verbatimModuleSyntax": true,
+ "moduleDetection": "force",
+ "noEmit": true,
+ "jsx": "react-jsx",
+
+ /* Linting */
+ "strict": true,
+ "noUnusedLocals": true,
+ "noUnusedParameters": true,
+ "erasableSyntaxOnly": true,
+ "noFallthroughCasesInSwitch": true,
+ "noUncheckedSideEffectImports": true
+ },
+ "include": ["src"]
+}
diff --git a/fictionarchive-web/tsconfig.json b/fictionarchive-web/tsconfig.json
new file mode 100644
index 0000000..1ffef60
--- /dev/null
+++ b/fictionarchive-web/tsconfig.json
@@ -0,0 +1,7 @@
+{
+ "files": [],
+ "references": [
+ { "path": "./tsconfig.app.json" },
+ { "path": "./tsconfig.node.json" }
+ ]
+}
diff --git a/fictionarchive-web/tsconfig.node.json b/fictionarchive-web/tsconfig.node.json
new file mode 100644
index 0000000..8a67f62
--- /dev/null
+++ b/fictionarchive-web/tsconfig.node.json
@@ -0,0 +1,26 @@
+{
+ "compilerOptions": {
+ "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+ "target": "ES2023",
+ "lib": ["ES2023"],
+ "module": "ESNext",
+ "types": ["node"],
+ "skipLibCheck": true,
+
+ /* Bundler mode */
+ "moduleResolution": "bundler",
+ "allowImportingTsExtensions": true,
+ "verbatimModuleSyntax": true,
+ "moduleDetection": "force",
+ "noEmit": true,
+
+ /* Linting */
+ "strict": true,
+ "noUnusedLocals": true,
+ "noUnusedParameters": true,
+ "erasableSyntaxOnly": true,
+ "noFallthroughCasesInSwitch": true,
+ "noUncheckedSideEffectImports": true
+ },
+ "include": ["vite.config.ts"]
+}
diff --git a/fictionarchive-web/vite.config.ts b/fictionarchive-web/vite.config.ts
new file mode 100644
index 0000000..1d4b6a5
--- /dev/null
+++ b/fictionarchive-web/vite.config.ts
@@ -0,0 +1,22 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+import path from 'node:path'
+
+// https://vite.dev/config/
+export default defineConfig({
+ plugins: [react()],
+ resolve: {
+ alias: {
+ react: path.resolve(__dirname, 'node_modules/react'),
+ 'react-dom': path.resolve(__dirname, 'node_modules/react-dom'),
+ 'react/jsx-runtime': path.resolve(
+ __dirname,
+ 'node_modules/react/jsx-runtime'
+ ),
+ 'react/jsx-dev-runtime': path.resolve(
+ __dirname,
+ 'node_modules/react/jsx-dev-runtime'
+ ),
+ },
+ },
+})
+ Novels that have recently been updated. +
++ Loading novels... +
++ Could not load novels: {error.message} +
++ No novels found yet. Try adding content to the gateway. +
+
+ {novels.map(
+ (novel) =>
+ novel &&
+ )}
+
+ {hasNextPage && (
+
+
+
+ )}
+