zooniverse · goplayoutside3 · Oct 5, 2023 · Sep 20, 2023 · Sep 21, 2023 · Sep 21, 2023
diff --git a/bin/bootstrap.sh b/bin/bootstrap.sh
@@ -32,4 +32,8 @@ printf 'Building `fe-content-pages`...\n'
 yarn workspace @zooniverse/fe-content-pages build
 printf '\n'
 
+printf 'Building `app-root`...\n'
+yarn workspace @zooniverse/app-root build
+printf '\n'
+
 echo 'Done!'
diff --git a/packages/app-root/.gitignore b/packages/app-root/.gitignore
@@ -0,0 +1,35 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts
diff --git a/packages/app-root/README.md b/packages/app-root/README.md
@@ -0,0 +1,12 @@
+# app-root
+
+### Node
+```sh
+yarn dev
+```
+or
+
+```sh
+yarn build
+yarn start
+```
diff --git a/packages/app-root/jsconfig.json b/packages/app-root/jsconfig.json
@@ -0,0 +1,7 @@
+{
+  "compilerOptions": {
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  }
+}
diff --git a/packages/app-root/next.config.js b/packages/app-root/next.config.js
@@ -0,0 +1,4 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {}
+
+module.exports = nextConfig
diff --git a/packages/app-root/package.json b/packages/app-root/package.json
@@ -0,0 +1,29 @@
+{
+  "name": "@zooniverse/app-root",
+  "description": "",
+  "license": "Apache-2.0",
+  "author": "Zooniverse <contact@zooniverse.org> (https://www.zooniverse.org/)",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint"
+  },
+  "dependencies": {
+    "@zooniverse/async-states": "~0.0.1",
+    "@zooniverse/grommet-theme": "~3.1.1",
+    "@zooniverse/panoptes-js": "~0.4.1",
+    "@zooniverse/react-components": "~1.6.1",
+    "grommet": "~2.33.2",
+    "grommet-icons": "~4.11.0",
+    "next": "13.5.2",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "styled-components": "^5.3.10"
+  },
+  "engines": {
+    "node": ">=18.13"
+  }
+}
diff --git a/packages/app-root/src/app/about/page.js b/packages/app-root/src/app/about/page.js
@@ -0,0 +1,7 @@
+export default function AboutPage() {
+  return (
+    <div>
+      <p>This is lib-content-pages</p>
+    </div>
+  )
+}
diff --git a/packages/app-root/src/app/groups/page.js b/packages/app-root/src/app/groups/page.js
@@ -0,0 +1,7 @@
+export default function UserGroupPage() {
+  return (
+    <div>
+      <p>This is lib-user</p>
+    </div>
+  )
+}
diff --git a/packages/app-root/src/app/layout.js b/packages/app-root/src/app/layout.js
@@ -0,0 +1,19 @@
+import RootLayout from '@/components/RootLayout'
+import StyledComponentsRegistry from './style-registry'
+
+export const metadata = {
+  title: 'Zooniverse',
+  description: 'People-powered Research'
+}
+
+export default function NextLayout({ children }) {
+  return (
+    <html lang='en'>
+      <body style={{ margin: 0 }}>
+        <StyledComponentsRegistry>
+          <RootLayout>{children}</RootLayout>
+        </StyledComponentsRegistry>
+      </body>
+    </html>
+  )
+}
diff --git a/packages/app-root/src/app/loading.js b/packages/app-root/src/app/loading.js
@@ -0,0 +1,7 @@
+function RootLoading() {
+  return (
+    <p>Loading...</p>
+  )
+}
+
+export default RootLoading
diff --git a/packages/app-root/src/app/page.js b/packages/app-root/src/app/page.js
@@ -0,0 +1,7 @@
+export default function HomePage() {
+  return (
+    <div>
+      <p>This is the zooniverse.org home page</p>
+    </div>
+  )
+}
diff --git a/packages/app-root/src/app/projects/page.js b/packages/app-root/src/app/projects/page.js
@@ -0,0 +1,7 @@
+export default function ProjectPage() {
+  return (
+    <div>
+      <p>This is lib-project</p>
+    </div>
+  )
+}
diff --git a/packages/app-root/src/app/style-registry.js b/packages/app-root/src/app/style-registry.js
@@ -0,0 +1,27 @@
+'use client'
+
+import { useServerInsertedHTML } from 'next/navigation'
+import { ServerStyleSheet, StyleSheetManager } from 'styled-components'
+import { useState } from 'react'
+
+export default function StyledComponentsRegistry({
+  children
+}) {
+  // Only create stylesheet once with lazy initial state
+  // x-ref: https://reactjs.org/docs/hooks-reference.html#lazy-initial-state
+  const [styledComponentsStyleSheet] = useState(() => new ServerStyleSheet())
+
+  useServerInsertedHTML(() => {
+    const styles = styledComponentsStyleSheet.getStyleElement()
+    styledComponentsStyleSheet.instance.clearTag()
+    return <>{styles}</>
+  })
+
+  if (typeof window !== 'undefined') return <>{children}</>
+
+  return (
+    <StyleSheetManager sheet={styledComponentsStyleSheet.instance}>
+      {children}
+    </StyleSheetManager>
+  )
+}
diff --git a/packages/app-root/src/app/users/page.js b/packages/app-root/src/app/users/page.js
@@ -0,0 +1,7 @@
+export default function UserPage() {
+  return (
+    <div>
+      <p>This is lib-user</p>
+    </div>
+  )
+}
diff --git a/packages/app-root/src/components/RootLayout.js b/packages/app-root/src/components/RootLayout.js
@@ -0,0 +1,24 @@
+'use client'
+
+import { Grommet } from 'grommet'
+import zooTheme from '@zooniverse/grommet-theme'
+import { base as baseTheme } from 'grommet'
+import { ZooHeader, ZooFooter } from '@zooniverse/react-components'
+
+const theme = { ...baseTheme, ...zooTheme }
+
+export default function RootLayout({ children }) {
+  return (
+    <Grommet
+      background={{
+        dark: 'dark-1',
+        light: 'light-1'
+      }}
+      theme={theme}
+    >
+      <ZooHeader />
+      <main>{children}</main>
+      <ZooFooter />
+    </Grommet>
+  )
+}