feat: installs prismic and sets it offline its post structure

mstarkRules · Jun 18, 2022 · 201634e · 201634e
1 parent 1b7b13b
commit 201634e
Show file tree

Hide file tree

Showing 27 changed files with 8,756 additions and 4,240 deletions.
diff --git a/.slicemachine/assets/customtypes/my-custom-post/mocks.json b/.slicemachine/assets/customtypes/my-custom-post/mocks.json
@@ -0,0 +1,35 @@
+{
+  "id": "3ce964e0-2ab1-4397-a511-6878526957dd",
+  "uid": "explicabo-sunt-porro",
+  "type": "my-custom-post",
+  "data": {
+    "title": [
+      {
+        "type": "heading1",
+        "text": "Synergize synergistic web-readiness",
+        "spans": []
+      }
+    ],
+    "content": [
+      {
+        "type": "heading1",
+        "text": "Matrix cutting-edge paradigms",
+        "spans": []
+      },
+      {
+        "type": "paragraph",
+        "text": "Amet excepteur mollit officia est id nostrud fugiat incididunt irure laboris ipsum.",
+        "spans": []
+      }
+    ],
+    "image": {
+      "dimensions": {
+        "width": 900,
+        "height": 500
+      },
+      "alt": "Placeholder image",
+      "copyright": null,
+      "url": "https://images.unsplash.com/photo-1499951360447-b19be8fe80f5?w=900&h=500&fit=crop"
+    }
+  }
+}
diff --git a/.slicemachine/libraries-state.json b/.slicemachine/libraries-state.json
@@ -0,0 +1,5 @@
+{
+  "slices": {
+    "components": {}
+  }
+}
diff --git a/.slicemachine/mock-config.json b/.slicemachine/mock-config.json
@@ -0,0 +1,18 @@
+{
+  "_cts": {
+    "my-custom-post": {
+      "title": {
+        "config": {
+          "patternType": "HEADING",
+          "blocks": 1
+        }
+      },
+      "content": {
+        "config": {
+          "patternType": "STORY",
+          "blocks": 1
+        }
+      }
+    }
+  }
+}
diff --git a/customtypes/my-custom-post/index.json b/customtypes/my-custom-post/index.json
@@ -0,0 +1,43 @@
+{
+  "id": "my-custom-post",
+  "label": "posts",
+  "repeatable": true,
+  "status": true,
+  "json": {
+    "Main": {
+      "uid": {
+        "type": "UID",
+        "config": {
+          "label": "Uid",
+          "placeholder": ""
+        }
+      },
+      "title": {
+        "type": "StructuredText",
+        "config": {
+          "label": "Title",
+          "placeholder": "",
+          "allowTargetBlank": true,
+          "single": "paragraph,preformatted,heading1,heading2,heading3,heading4,heading5,heading6,strong,em,hyperlink,image,embed,list-item,o-list-item,rtl"
+        }
+      },
+      "content": {
+        "type": "StructuredText",
+        "config": {
+          "label": "",
+          "placeholder": "",
+          "allowTargetBlank": true,
+          "multi": "paragraph,preformatted,heading1,heading2,heading3,heading4,heading5,heading6,strong,em,hyperlink,image,embed,list-item,o-list-item,rtl"
+        }
+      },
+      "image": {
+        "type": "Image",
+        "config": {
+          "label": "Featured Image",
+          "constraint": {},
+          "thumbnails": []
+        }
+      }
+    }
+  }
+}
diff --git a/package.json b/package.json
@@ -6,9 +6,14 @@
     "dev": "next dev",
     "build": "next build",
     "start": "next start",
-    "lint": "next lint"
+    "lint": "next lint",
+    "slicemachine": "start-slicemachine"
   },
   "dependencies": {
+    "@prismicio/client": "^6.4.3",
+    "@prismicio/helpers": "^2.3.0",
+    "@prismicio/react": "^2.3.0",
+    "@prismicio/slice-simulator-react": "^0.2.2",
     "@stripe/stripe-js": "^1.22.0",
     "axios": "^0.25.0",
     "faunadb": "^4.4.1",
@@ -26,6 +31,7 @@
     "@types/react": "^17.0.22",
     "eslint": "7.32.0",
     "eslint-config-next": "11.1.2",
+    "slice-machine-ui": "^0.3.7",
     "typescript": "^4.4.3"
   }
-}
+}
diff --git a/sm.json b/sm.json
@@ -0,0 +1,7 @@
+{
+  "_latest": "0.3.7",
+  "apiEndpoint": "https://post-server.prismic.io/api/v2",
+  "libraries": [
+    "@/slices"
+  ]
+}
diff --git a/src/components/Header/index.tsx b/src/components/Header/index.tsx
@@ -1,22 +1,22 @@
-import { SignInButton } from "../SignInButton";
-import styles from "./styles.module.scss";
-
-export function Header() {
-  return (
-    <header className={styles.headerContainer}>
-      <div className={styles.headerContent}>
-        <a href="/">
-          <img src="/images/logo.svg" alt="ig.news" />
-        </a>
-
-        <nav>
-          <a href="/" className={styles.active}>
-            Home
-          </a>
-          <a href="/posts">Posts</a>
-        </nav>
-        <SignInButton />
-      </div>
-    </header>
-  );
-}
+import { SignInButton } from "../SignInButton";
+import styles from "./styles.module.scss";
+
+export function Header() {
+  return (
+    <header className={styles.headerContainer}>
+      <div className={styles.headerContent}>
+        <a href="/">
+          <img src="/images/logo.svg" alt="ig.news" />
+        </a>
+
+        <nav>
+          <a href="/" className={styles.active}>
+            Home
+          </a>
+          <a href="/posts">Posts</a>
+        </nav>
+        <SignInButton />
+      </div>
+    </header>
+  );
+}
diff --git a/src/components/Header/styles.module.scss b/src/components/Header/styles.module.scss
@@ -1,57 +1,57 @@
-.headerContainer {
-  height: 5rem;
-  border-bottom: 1px solid var(--gray-800);
-}
-
-.headerContent {
-  max-width: 1120px;
-  height: 5rem;
-  margin: 0 auto;
-  padding: 0 2rem;
-
-  display: flex;
-  align-items: center;
-
-  nav {
-    margin-left: 5rem;
-    height: 5rem;
-
-    a {
-      display: inline-block;
-      position: relative;
-      padding: 0 0.5rem;
-      height: 5rem;
-      line-height: 5rem;
-      color: var(--gray-300);
-
-      & + a {
-        margin-left: 2rem;
-      }
-
-      transition: color 0.2s;
-      &:hover {
-        color: var(--white);
-      }
-
-      &.active {
-        color: var(--white);
-        font-weight: bold;
-      }
-
-      &.active::after {
-        content: "";
-        height: 3px;
-        border-radius: 3px 3px 0 0;
-        width: 100%;
-        position: absolute;
-        bottom: 1px;
-        left: 0;
-        background: var(--yellow-500);
-      }
-    }
-  }
-
-  button {
-    margin-left: auto;
-  }
-}
+.headerContainer {
+  height: 5rem;
+  border-bottom: 1px solid var(--gray-800);
+}
+
+.headerContent {
+  max-width: 1120px;
+  height: 5rem;
+  margin: 0 auto;
+  padding: 0 2rem;
+
+  display: flex;
+  align-items: center;
+
+  nav {
+    margin-left: 5rem;
+    height: 5rem;
+
+    a {
+      display: inline-block;
+      position: relative;
+      padding: 0 0.5rem;
+      height: 5rem;
+      line-height: 5rem;
+      color: var(--gray-300);
+
+      & + a {
+        margin-left: 2rem;
+      }
+
+      transition: color 0.2s;
+      &:hover {
+        color: var(--white);
+      }
+
+      &.active {
+        color: var(--white);
+        font-weight: bold;
+      }
+
+      &.active::after {
+        content: "";
+        height: 3px;
+        border-radius: 3px 3px 0 0;
+        width: 100%;
+        position: absolute;
+        bottom: 1px;
+        left: 0;
+        background: var(--yellow-500);
+      }
+    }
+  }
+
+  button {
+    margin-left: auto;
+  }
+}
diff --git a/src/components/SignInButton/index.tsx b/src/components/SignInButton/index.tsx
@@ -1,31 +1,31 @@
-import { FaGithub } from "react-icons/fa";
-import { FiX } from "react-icons/fi";
-import { SessionProvider, signIn, signOut, useSession } from "next-auth/react";
-
-import styles from "./styles.module.scss";
-
-export function SignInButton() {
-  const { data: session } = useSession();
-
-  console.log("session: ", session);
-  return session ? (
-    <button
-      type="button"
-      className={styles.signInButton}
-      onClick={() => signOut()}
-    >
-      <FaGithub color="#04d361" />
-      {session.user.name}
-      <FiX color="#737388" className={styles.closeIcon} />
-    </button>
-  ) : (
-    <button
-      type="button"
-      className={styles.signInButton}
-      onClick={() => signIn("github")}
-    >
-      <FaGithub color="#eba417" />
-      Sign In with Github
-    </button>
-  );
-}
+import { FaGithub } from "react-icons/fa";
+import { FiX } from "react-icons/fi";
+import { SessionProvider, signIn, signOut, useSession } from "next-auth/react";
+
+import styles from "./styles.module.scss";
+
+export function SignInButton() {
+  const { data: session } = useSession();
+
+  console.log("session: ", session);
+  return session ? (
+    <button
+      type="button"
+      className={styles.signInButton}
+      onClick={() => signOut()}
+    >
+      <FaGithub color="#04d361" />
+      {session.user.name}
+      <FiX color="#737388" className={styles.closeIcon} />
+    </button>
+  ) : (
+    <button
+      type="button"
+      className={styles.signInButton}
+      onClick={() => signIn("github")}
+    >
+      <FaGithub color="#eba417" />
+      Sign In with Github
+    </button>
+  );
+}