4.0

.eslintrc

@@ -0,0 +1,10 @@
+{
+  "extends": [
+    "@remix-run/eslint-config",
+    "@remix-run/eslint-config/node",
+    "prettier"
+  ],
+  "ignorePatterns": ["node_modules", "build", ".cache"],
+  "plugins": ["remix"],
+  "rules": {}
+}

.gitignore

@@ -1,13 +1,10 @@
+node_modules
 
-/public
-/node_modules
+/.cache
+/build
+/public/build
+.env
+!.env.template
 
-/functions
-/resources
+app/styles/app.css
 .DS_Store
-
-/dist
-# Local Netlify folder
-.netlify
-scripts/cache.json
-yarn-error.log

.node-version

@@ -0,0 +1 @@
+17.9.1

app/components/ExitPreview.tsx

@@ -0,0 +1,17 @@
+import React from "react";
+
+export default function ExitPreview() {
+  return (
+    <div className="pointer-events-none fixed inset-0 flex h-screen w-screen items-end justify-center">
+      <form
+        className="pointer-events-auto"
+        action="/resource/preview"
+        method="POST"
+      >
+        <button className="bg-black p-4 font-bold text-white" type="submit">
+          Exit Preview Mode
+        </button>
+      </form>
+    </div>
+  );
+}

app/components/Footer.tsx

@@ -0,0 +1,14 @@
+import Logo from '~/components/Logo'
+
+export default function Footer() {
+  return (
+    <header className="border-t border-gray-100 dark:border-gray-900">
+      <div className="container mx-auto flex items-center justify-between p-4 lg:px-12">
+        <Logo />
+        <div className="flex flex-1 flex-col items-end justify-end gap-2 text-sm md:flex-row md:items-center md:gap-5">
+          <a href="/studio">&copy; {new Date().getFullYear()} Veklabs</a>
+        </div>
+      </div>
+    </header>
+  )
+}

app/components/Header.tsx

@@ -0,0 +1,13 @@
+import ThemeToggle from '~/components/ThemeToggle'
+import Logo from '~/components/Logo'
+
+export default function Header() {
+  return (
+    <header className="sticky top-0 border-b border-gray-100 dark:border-gray-900">
+      <div className="container mx-auto flex items-center justify-between p-4 lg:px-12">
+        <Logo />
+        <ThemeToggle />
+      </div>
+    </header>
+  )
+}

app/components/Layout.tsx

@@ -0,0 +1,16 @@
+import type { PropsWithChildren } from "react";
+
+import Footer from "~/components/Footer";
+import Header from "~/components/Header";
+
+export default function Layout(props: PropsWithChildren) {
+  const { children } = props;
+
+  return (
+    <>
+      <Header />
+      <div className="container mx-auto min-h-full p-4 lg:p-12">{children}</div>
+      <Footer />
+    </>
+  );
+}

app/components/LikeDislike.tsx

@@ -0,0 +1,53 @@
+import { useFetcher, useLocation } from '@remix-run/react'
+import { ThumbsDown, ThumbsUp } from 'lucide-react'
+
+type LikeDislikeProps = {
+  id: string
+  likes: number
+  dislikes: number
+}
+
+export default function LikeDislike(props: LikeDislikeProps) {
+  const { id } = props
+  const fetcher = useFetcher()
+  const location = useLocation()
+
+  // Use fresh data returned from the ActionFunction, if a mutation has just finished
+  const likes = fetcher.type === 'done' ? fetcher.data.likes : props.likes
+  const dislikes =
+    fetcher.type === 'done' ? fetcher.data.dislikes : props.dislikes
+
+  return (
+    <fetcher.Form
+      action={location.pathname}
+      className="flex items-center justify-center gap-4 bg-black text-white"
+      method="post"
+    >
+      <input name="id" type="hidden" value={id} />
+      <button
+        name="action"
+        type="submit"
+        value="LIKE"
+        disabled={fetcher.state !== 'idle'}
+        className="flex items-center gap-2 bg-black p-4 transition-all duration-100 ease-in-out hover:bg-cyan-400 hover:text-black disabled:opacity-50"
+        title="Like"
+      >
+        <span className="text-xs font-bold">{likes}</span>
+        <ThumbsUp />
+        <span className="sr-only">Like</span>
+      </button>
+      <button
+        name="action"
+        type="submit"
+        value="DISLIKE"
+        disabled={fetcher.state !== 'idle'}
+        className="flex items-center gap-2 bg-black p-4 transition-all duration-100 ease-in-out hover:bg-cyan-400 hover:text-black disabled:opacity-50"
+        title="Dislike"
+      >
+        <ThumbsDown />
+        <span className="text-xs font-bold">{dislikes}</span>
+        <span className="sr-only">Dislike</span>
+      </button>
+    </fetcher.Form>
+  )
+}

app/components/Logo.tsx

@@ -0,0 +1,14 @@
+import { Link } from "@remix-run/react";
+import { useRouteData } from "remix-utils";
+
+import type { HomeDocument } from "~/types/home";
+
+export default function Logo() {
+  const { home } = useRouteData(`root`) as { home: HomeDocument };
+
+  return (
+    <p className="text-lg font-bold tracking-tighter text-black dark:text-white lg:text-2xl">
+      <Link to="/">{home.siteTitle}</Link>
+    </p>
+  );
+}