hygraph for real

fweth · Feb 14, 2023 · d1c3ab4 · d1c3ab4
1 parent 85414ee
commit d1c3ab4
Show file tree

Hide file tree

Showing 28 changed files with 394 additions and 18,450 deletions.
diff --git a/app/components/image.jsx b/app/components/image.jsx
@@ -1,13 +1,27 @@
-export default function Image({ baseUrl, alt, width, height }) {
+export default function Image({ data, width, height }) {
   return (
     <img
-      src={baseUrl.replace(
-        "media.graphassets.com",
-        `media.graphassets.com/resize=fit:crop,width:${width},height:${height}`
-      )}
-      alt={alt}
-      width={width}
-      height={height}
+      src={
+        width && height
+          ? data.file.url.replace(
+              "media.graphassets.com",
+              `media.graphassets.com/resize=fit:crop,width:${width},height:${height}`
+            )
+          : width
+          ? data.file.url.replace(
+              "media.graphassets.com",
+              `media.graphassets.com/resize=width:${width}`
+            )
+          : height
+          ? data.file.url.replace(
+              "media.graphassets.com",
+              `media.graphassets.com/resize=height:${height}`
+            )
+          : data.file.url
+      }
+      alt={data.alt}
+      {...(width && { width })}
+      {...(height && { height })}
     />
   );
 }
diff --git a/app/components/mixedContent.jsx b/app/components/mixedContent.jsx
@@ -0,0 +1,27 @@
+import Image from "./image";
+
+export default function MixedContent({ data }) {
+  return data.map(function (block) {
+    switch (block.__typename) {
+      case "TextBlock":
+        return (
+          <div
+            className="text-block"
+            dangerouslySetInnerHTML={{ __html: block.richtext.html }}
+            key={block.id}
+          />
+        );
+      case "VisualBlock":
+        return (
+          <div className="visual-block" key={block.id}>
+            {block.columns.map((col) => (
+              <figure key={col.id}>
+                <Image data={col} height={300} />
+                <figcaption>{col.alt}</figcaption>
+              </figure>
+            ))}
+          </div>
+        );
+    }
+  });
+}
diff --git a/app/root.jsx b/app/root.jsx
@@ -9,12 +9,6 @@ import {
 
 import styles from "./styles/root.css";
 
-export const meta = () => ({
-  charset: "utf-8",
-  title: "Martin Grandits",
-  viewport: "width=device-width,initial-scale=1",
-});
-
 export const links = () => [
   {
     rel: "stylesheet",
@@ -27,6 +21,13 @@ export const links = () => [
   },
 ];
 
+
+export const meta = () => ({
+  charset: "utf-8",
+  title: "Martin Grandits",
+  viewport: "width=device-width,initial-scale=1",
+});
+
 export default function App() {
   return (
     <html lang="en">

diff --git a/app/routes/__layout.jsx b/app/routes/__layout.jsx
@@ -22,7 +22,7 @@ export default function Layout() {
         </nav>
       </header>
       <Outlet />
-      <footer>Hello, I'm footer</footer>
+      <footer/>
     </>
   );
 }
diff --git a/app/routes/__layout/about.jsx b/app/routes/__layout/about.jsx
@@ -1,3 +1,61 @@
-export default function About(){
-  return <h1>This is About.</h1>
-}
+import { useLoaderData } from "@remix-run/react";
+import { request, gql } from "graphql-request";
+import styles from "../../styles/artworks.css";
+
+export const links = () => [
+  {
+    rel: "stylesheet",
+    href: styles,
+  },
+];
+
+export const meta = ({ data: { page } }) => page.meta;
+
+export async function loader() {
+  const query = gql`
+    {
+      page(where: { slug: "about" }) {
+        meta {
+          description
+          title
+        }
+        conntent {
+          blocks
+        }
+        content {
+          blocks {
+            ... on TextBlock {
+              __typename
+              id
+              richtext {
+                html
+              }
+            }
+            ... on VisualBlock {
+              __typename
+              columns {
+                alt
+                file {
+                  url
+                }
+                id
+              }
+              id
+            }
+          }
+        }
+      }
+    }
+  `;
+  return request(process.env.CONTENT_API, query);
+}
+
+export default function Artworks() {
+  const { page } = useLoaderData();
+  console.log(page)
+  return (
+    <main className="artworks">
+      {/* <MixedContent data={page.MixedContent}/> */}
+    </main>
+  );
+}
diff --git a/app/routes/__layout/artworks.$artworkId.jsx b/app/routes/__layout/artworks.$artworkId.jsx
diff --git a/app/routes/__layout/artworks.jsx b/app/routes/__layout/artworks.jsx
@@ -3,55 +3,56 @@ import { request, gql } from "graphql-request";
 import Image from "../../components/image";
 import styles from "../../styles/artworks.css";
 
+export const links = () => [
+  {
+    rel: "stylesheet",
+    href: styles,
+  },
+];
+
+export const meta = ({ data: { page } }) => page.meta;
+
 export async function loader() {
   const query = gql`
     query {
-      pages(first: 1) {
-        artworksMeta {
+      page(where: { slug: "artworks" }) {
+        meta {
           description
           title
         }
-        artworksContent {
-          caption
+        collection {
           image {
-            url
+            alt
+            file {
+              url
+            }
           }
-          portrait
+          singleCol
           slug
         }
       }
     }
   `;
-  return (await request(process.env.CONTENT_API, query)).pages[0];
+  return request(process.env.CONTENT_API, query);
 }
 
-export const meta = ({ data }) => data.artworksMeta;
-
-export const links = () => [
-  {
-    rel: "stylesheet",
-    href: styles,
-  },
-];
-
 export default function Artworks() {
-  const { artworksContent: data } = useLoaderData();
+  console.log(page)
   return (
     <main className="artworks">
-      {data.map((aw) => (
+      {page.collection.map((aw) => (
         <Link
-          className={aw.portrait ? "portrait" : "landscape"}
+          className={aw.singleCol ? "portrait" : "landscape"}
           to={`${aw.slug}/1`}
           key={aw.slug}
         >
           <figure>
             <Image
-              baseUrl={aw.image.url}
-              alt={aw.image.alt}
-              width={aw.portrait ? 540 : 970}
-              height={aw.portrait ? 675 : 776}
+              data={aw.image}
+              width={aw.singleCol ? 540 : 970}
+              height={aw.singleCol ? 675 : 776}
             />
-            <figcaption>{aw.caption}</figcaption>
+            <figcaption>{aw.image.alt}</figcaption>
           </figure>
         </Link>
       ))}

diff --git a/app/routes/__slides.jsx b/app/routes/__slides.jsx
@@ -0,0 +1,74 @@
+import { redirect } from "@remix-run/node";
+import { Link, Outlet, useLoaderData } from "@remix-run/react";
+import { request, gql } from "graphql-request";
+
+import styles from "../styles/slides.css";
+
+export const links = () => [
+  {
+    rel: "stylesheet",
+    href: styles,
+  },
+];
+
+export const meta = ({ data: { artwork } }) => artwork.meta;
+
+export const shouldRevalidate = () => true;
+
+export async function loader({ params: { index } }) {
+  const query = gql`
+    query {
+      artwork(where: { slug: "adilette-carinthia-ry-hypo" }) {
+        image {
+          alt
+        }
+        meta {
+          description
+          title
+        }
+        slides {
+          __typename
+        }
+      }
+    }
+  `;
+  const { artwork } = await request(process.env.CONTENT_API, query);
+  const i = parseInt(index);
+  const n = artwork.slides.length;
+  if (i < 1 || i > n) {
+    redirect("/404");
+  }
+  return { artwork, i, n };
+}
+
+export default function Slides() {
+  const { artwork, i, n } = useLoaderData();
+  return (
+    <>
+      <Outlet />
+      <div className="caption">{artwork.image.alt}</div>
+      <nav className="slideNav">
+        {i > 1 && (
+          <Link className="prev" to={`../${i - 1}`} relative="path">
+            <svg>
+              <use href="/icons.svg#leftArrow" />
+            </svg>
+          </Link>
+        )}
+        <div className="indicator">{`${i}/${n}`}</div>
+        {i < n && (
+          <Link className="next" to={`../${i + 1}`} relative="path">
+            <svg>
+              <use href="/icons.svg#rightArrow" />
+            </svg>
+          </Link>
+        )}
+      </nav>
+      <Link className="close" to="/artworks">
+        <svg>
+          <use href="/icons.svg#close" />
+        </svg>
+      </Link>
+    </>
+  );
+}