first

SimeonGriggs · Sep 15, 2022 · b876b23 · b876b23
commit b876b23
Show file tree

Hide file tree

Showing 22 changed files with 30,340 additions and 0 deletions.
diff --git a/.eslintrc b/.eslintrc
@@ -0,0 +1,20 @@
+{
+  "extends": [
+    "@remix-run/eslint-config",
+    "@remix-run/eslint-config/node",
+    "prettier"
+  ],
+  "ignorePatterns": ["node_modules", "build", ".cache"],
+  "plugins": ["prettier"],
+  "rules": {
+    "prettier/prettier": [
+      "error",
+      {
+        "semi": false,
+        "printWidth": 100,
+        "bracketSpacing": false,
+        "singleQuote": true
+      }
+    ]
+  }
+}
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,6 @@
+node_modules
+
+/.cache
+/build
+/public/build
+.env
diff --git a/README.md b/README.md
@@ -0,0 +1,53 @@
+# Welcome to Remix!
+
+- [Remix Docs](https://remix.run/docs)
+
+## Development
+
+From your terminal:
+
+```sh
+npm run dev
+```
+
+This starts your app in development mode, rebuilding assets on file changes.
+
+## Deployment
+
+First, build your app for production:
+
+```sh
+npm run build
+```
+
+Then run the app in production mode:
+
+```sh
+npm start
+```
+
+Now you'll need to pick a host to deploy it to.
+
+### DIY
+
+If you're familiar with deploying node applications, the built-in Remix app server is production-ready.
+
+Make sure to deploy the output of `remix build`
+
+- `build/`
+- `public/build/`
+
+### Using a Template
+
+When you ran `npx create-remix@latest` there were a few choices for hosting. You can run that again to create a new project, then copy over your `app/` folder to the new project that's pre-configured for your target server.
+
+```sh
+cd ..
+# create a new project, and pick a pre-configured host
+npx create-remix@latest
+cd my-new-remix-app
+# remove the new project's app (not the old one!)
+rm -rf app
+# copy your app over
+cp -R ../my-old-remix-app/app app
+```
diff --git a/app/entry.client.tsx b/app/entry.client.tsx
@@ -0,0 +1,4 @@
+import {RemixBrowser} from '@remix-run/react'
+import {hydrateRoot} from 'react-dom/client'
+
+hydrateRoot(document, <RemixBrowser />)
diff --git a/app/entry.server.tsx b/app/entry.server.tsx
@@ -0,0 +1,48 @@
+import {PassThrough} from 'stream'
+import type {EntryContext} from '@remix-run/node'
+import {Response} from '@remix-run/node'
+import {RemixServer} from '@remix-run/react'
+import {renderToPipeableStream} from 'react-dom/server'
+
+const ABORT_DELAY = 5000
+
+export default function handleRequest(
+  request: Request,
+  responseStatusCode: number,
+  responseHeaders: Headers,
+  remixContext: EntryContext
+) {
+  return new Promise((resolve, reject) => {
+    let didError = false
+
+    const {pipe, abort} = renderToPipeableStream(
+      <RemixServer context={remixContext} url={request.url} />,
+      {
+        onShellReady: () => {
+          const body = new PassThrough()
+
+          responseHeaders.set('Content-Type', 'text/html')
+
+          resolve(
+            new Response(body, {
+              headers: responseHeaders,
+              status: didError ? 500 : responseStatusCode,
+            })
+          )
+
+          pipe(body)
+        },
+        onShellError: (err) => {
+          reject(err)
+        },
+        onError: (error) => {
+          didError = true
+
+          console.error(error)
+        },
+      }
+    )
+
+    setTimeout(abort, ABORT_DELAY)
+  })
+}
diff --git a/app/root.tsx b/app/root.tsx
@@ -0,0 +1,31 @@
+import type {MetaFunction, LinksFunction} from '@remix-run/node'
+import {Links, LiveReload, Meta, Outlet, Scripts, ScrollRestoration} from '@remix-run/react'
+
+import styles from './styles/app.css'
+
+export const links: LinksFunction = () => {
+  return [{rel: 'stylesheet', href: styles}]
+}
+
+export const meta: MetaFunction = () => ({
+  charset: 'utf-8',
+  title: 'New Remix App',
+  viewport: 'width=device-width,initial-scale=1',
+})
+
+export default function App() {
+  return (
+    <html lang="en">
+      <head>
+        <Meta />
+        <Links />
+      </head>
+      <body>
+        <Outlet />
+        <ScrollRestoration />
+        <Scripts />
+        <LiveReload />
+      </body>
+    </html>
+  )
+}
diff --git a/app/routes/$slug.tsx b/app/routes/$slug.tsx
@@ -0,0 +1,26 @@
+import type {LoaderFunction} from '@remix-run/node'
+import {useLoaderData} from '@remix-run/react'
+import SanityClient from '@sanity/client'
+
+const client = new SanityClient({
+  projectId: '6h1mv88x',
+  dataset: 'production',
+  useCdn: true,
+})
+
+export const loader: LoaderFunction = async ({params}) => {
+  const {slug} = params
+  const product = await client.fetch(`*[_type == "product" && slug.current == $slug][0]`, {slug})
+
+  return {product}
+}
+
+export default function Product() {
+  const {product} = useLoaderData()
+
+  return (
+    <div className="bg-green-100 p-12 min-h-screen">
+      <h1 className="text-2xl mb-6 font-bold">{product.title}</h1>
+    </div>
+  )
+}
diff --git a/app/routes/index.tsx b/app/routes/index.tsx
@@ -0,0 +1,36 @@
+import type {LoaderFunction} from '@remix-run/node'
+import {Link, useLoaderData} from '@remix-run/react'
+import SanityClient from '@sanity/client'
+
+const client = new SanityClient({
+  projectId: '6h1mv88x',
+  dataset: 'production',
+  useCdn: true,
+})
+
+export const loader: LoaderFunction = async () => {
+  const products = await client.fetch(`*[_type == "product"]`)
+
+  return {products}
+}
+
+export default function Index() {
+  const {products} = useLoaderData()
+
+  return (
+    <div className="bg-green-100 p-12 min-h-screen">
+      <h1 className="text-2xl mb-6 font-bold">Welcome to Remix</h1>
+      {products.length > 0 ? (
+        <ul>
+          {products.map((product) => (
+            <li key={product._id}>
+              <Link to={product?.slug?.current} className="text-green-600 underline">
+                {product.title}
+              </Link>
+            </li>
+          ))}
+        </ul>
+      ) : null}
+    </div>
+  )
+}
diff --git a/app/routes/studio/*.tsx b/app/routes/studio/*.tsx
@@ -0,0 +1,14 @@
+import type {LinksFunction} from '@remix-run/node'
+import {Studio} from 'sanity'
+
+import {config} from '~/sanity/config'
+
+import styles from '~/styles/studio.css'
+
+export const links: LinksFunction = () => {
+  return [{rel: 'stylesheet', href: styles}]
+}
+
+export default function StudioPage() {
+  return <Studio config={config} />
+}
diff --git a/app/sanity/config.ts b/app/sanity/config.ts
@@ -0,0 +1,14 @@
+import {createConfig} from 'sanity'
+import {deskTool} from 'sanity/desk'
+
+import schema from './schema'
+
+export const config = createConfig({
+  projectId: `6h1mv88x`,
+  dataset: `production`,
+  plugins: [deskTool()],
+  basePath: `/studio`,
+  schema: {
+    types: schema,
+  },
+})
diff --git a/app/sanity/schema/index.ts b/app/sanity/schema/index.ts
@@ -0,0 +1,3 @@
+import product from './product'
+
+export default [product]
diff --git a/app/sanity/schema/product.ts b/app/sanity/schema/product.ts
@@ -0,0 +1,25 @@
+import {defineType, defineField} from 'sanity'
+
+export default defineType({
+  name: 'product',
+  title: 'Product',
+  type: 'document',
+  fields: [
+    defineField({
+      name: 'title',
+      type: 'string',
+    }),
+    defineField({
+      name: 'slug',
+      type: 'slug',
+      options: {
+        source: 'title',
+      },
+    }),
+    defineField({
+      name: 'content',
+      type: 'array' as const,
+      of: [{type: 'block'}],
+    }),
+  ],
+})
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		import product from './product'

		export default [product]