Sanity upgrade

.npmrc

@@ -0,0 +1 @@
+legacy-peer-deps=true

.nvmrc

@@ -1 +1 @@
-16.17.0
+18

app/components/StoriesSection.tsx

@@ -1,12 +1,12 @@
 import React, { cloneElement, PropsWithChildren, ReactElement } from "react";
-import type Story from "../data/Story";
+import { Post } from "~/data/types";
 import StoryCard from "./StoryCard";
 
 interface Props extends PropsWithChildren {
   label: string;
   id: string;
   animation: ReactElement;
-  stories: Story[];
+  stories: Post[];
 }
 
 const StoriesSection: React.FC<Props> = ({
@@ -33,7 +33,7 @@
       </div>
       <div className="flex flex-wrap items-start">
         {stories.map((story) => (
-          <StoryCard story={story} key={story.id} />
+          <StoryCard story={story} key={story._id} />
         ))}
       </div>
     </section>

app/components/StoryCard.tsx

@@ -1,22 +1,23 @@
 import { Link } from "@remix-run/react";
 import classNames from "classnames";
 import React from "react";
+import { imageBuilder } from "~/helpers/imageBuilder";
+import { Post } from "~/data/types";
 import routes from "../helpers/routes";
 import { truncateString } from "../helpers/truncateString";
-import type Story from "../data/Story";
 
 const StoryCard: React.FC<Props> = ({ story }) => {
   return (
     <div className="post-item relative px-2 py-4 flex-grow">
       <Link to={routes.story(story.slug)}>
         <div
           className={classNames("mb-4 rounded-2xl overflow-hidden relative", {
-            featured: story.highlighted
+            featured: story.tags.find((t) => t.title === "highlighted")
           })}
         >
           <img
             className="w-full"
-            src={story.featuredImage.url}
+            src={imageBuilder.image(story.mainImage).url()}
             alt={`${story.title}`}
             loading="lazy"
           />
@@ -41,7 +42,7 @@
 };
 
 type Props = {
-  story: Story;
+  story: Post;
 };
 
 export default StoryCard;

app/components/Subscribe.tsx

@@ -15,8 +15,6 @@ export const Subscribe: React.FC<{
     ? "error"
     : "idle";
 
-  console.log(data);
-
   return (
     <div className="bg-black bg-opacity-5 dark:bg-opacity-20 px-10 py-8 rounded-2xl mb-8">
       {noPreamble ? (

app/data/sanityClient.server.ts

@@ -0,0 +1,24 @@
+import { createClient } from "@sanity/client";
+
+export const sanity = createClient({
+  projectId: "xpnntlnd",
+  dataset: "production",
+  useCdn: process.env.NODE_ENV === "production", // set to `false` to bypass the edge cache
+  apiVersion: "2023-05-03", // use current date (YYYY-MM-DD) to target the latest API version
+  token: process.env.SANITY_TOKEN // Only if you want to update content with the client
+});
+
+export function getPostsByTag(tags: string[]) {
+  const tagsFilters = tags.map((t) => `"${t}" in tags[]->title`).join(" || ");
+  return `*[_type == "post" ${
+    tagsFilters.length ? `&& ${tagsFilters}` : ""
+  }]{_id, title, description, mainImage, tags[]->{title}, "slug": slug.current}`;
+}
+
+export function getAllPosts() {
+  return `*[_type == "post"]{_id, title, description, mainImage, tags[]->{title}, "slug": slug.current}`;
+}
+
+export function getPostBySlug(slug: string) {
+  return `*[_type == "post" && slug.current match "${slug}" ][0]{_id, title, description, mainImage, tags[]->{title}, "slug": slug.current, body, author->{...}, publishedAt}`;
+}

app/data/types.ts

@@ -0,0 +1,29 @@
+export type Author = {
+  name: string;
+  bio: string;
+  image: {
+    asset: {
+      _ref: string;
+    };
+  };
+};
+
+export type Image = {
+  asset: {
+    _ref: string;
+  };
+};
+
+export type Tag = { title: string; description: string };
+
+export type Post = {
+  _id: string;
+  title: string;
+  description: string;
+  body: string;
+  slug: string;
+  mainImage: Image;
+  author: Author;
+  publishedAt: string;
+  tags: Tag[];
+};

app/emails/NewPostNewsletter.tsx

@@ -7,10 +7,11 @@ import {
   Section,
   Text
 } from "@react-email/components";
-import { getMDXComponent } from "mdx-bundler/client";
+import { getMDXComponent } from "~/helpers/mdx.server";
 import type { PropsWithChildren } from "react";
 import type { Newsletter } from "~/data/Newsletter";
-import type Story from "~/data/Story";
+import { Post } from "~/data/types";
+import { imageBuilder } from "~/helpers/imageBuilder";
 
 type NewsletterEmailProps = Pick<Newsletter, "body" | "author" | "preview">;
 
@@ -62,7 +63,7 @@ const MDXBlockQuote: React.FC<PropsWithChildren> = ({ children }) => {
   );
 };
 
-const MDXStory: React.FC<{ story: Story }> = ({ story }) => {
+const MDXStory: React.FC<{ story: Post }> = ({ story }) => {
   return (
     <Button
       href={`https://www.drewis.cool/story/${story.slug}?ref=newsletter`}
@@ -71,7 +72,7 @@ const MDXStory: React.FC<{ story: Story }> = ({ story }) => {
       <Section>
         <div className="border border-solid rounded-md border-gray-300 my-6">
           <Img
-            src={story.featuredImage.url}
+            src={imageBuilder.image(story.mainImage).url()}
             className="rounded-t-md"
             width={"100%"}
           />

app/helpers/filterStories.ts

@@ -1,9 +1,9 @@
-import type Story from "~/data/Story";
+import { Post } from "~/data/types";
 
 export function filterStories(
-  storiesArray: Array<Story>,
+  storiesArray: Array<Post>,
   searchString: string
-): Array<Story> {
+): Array<Post> {
   if (!storiesArray) return [];
   return storiesArray.filter((story): Boolean => {
     return (

app/helpers/imageBuilder.ts

@@ -0,0 +1,11 @@
+import imageUrlBuilder from "@sanity/image-url";
+import { createClient } from "@sanity/client";
+
+const sanity = createClient({
+  projectId: "xpnntlnd",
+  dataset: "production",
+  useCdn: process.env.NODE_ENV === "production", // set to `false` to bypass the edge cache
+  apiVersion: "2023-05-03" // use current date (YYYY-MM-DD) to target the latest API version
+});
+
+export const imageBuilder = imageUrlBuilder(sanity);

app/routes/[feed.atom.xml].tsx

@@ -1,12 +1,12 @@
 import type { LoaderFunction } from "@remix-run/node";
-import { client } from "~/data/client";
-import GetStories from "~/data/GetStories";
-import type Story from "~/data/Story";
+import { getAllPosts, sanity } from "~/data/sanityClient.server";
+import { Post } from "~/data/types";
 import { feed } from "~/helpers/feed";
 import { getHost } from "~/helpers/getHost.server";
+import { imageBuilder } from "~/helpers/imageBuilder";
 
 export const loader: LoaderFunction = async ({ request }) => {
-  const { stories }: { stories: Story[] } = await client.request(GetStories);
+  const stories = (await sanity.fetch(getAllPosts())) as Post[];
 
   const origin = new URL(request.url).origin;
   const storyURL = (slug: string) =>
@@ -15,7 +15,7 @@ export const loader: LoaderFunction = async ({ request }) => {
   const rss = feed(origin);
 
   stories.forEach(
-    ({ author, title, description, slug, publishedAt, featuredImage }) => {
+    ({ author, title, description, slug, publishedAt, mainImage }) => {
       rss.addItem({
         title,
         id: storyURL(slug),
@@ -29,7 +29,7 @@ export const loader: LoaderFunction = async ({ request }) => {
           }
         ],
         image: {
-          url: featuredImage.url,
+          url: imageBuilder.image(mainImage).url(),
           type: "image/jpg",
           length: 0
         }