Update rss pages and get rid of old files

app/components/StoriesSection.tsx

@@ -1,7 +1,6 @@
 import React, { cloneElement, PropsWithChildren, ReactElement } from "react";
-import type Story from "../data/Story";
-import StoryCard from "./StoryCard";
 import { Post } from "~/data/types";
+import StoryCard from "./StoryCard";
 
 interface Props extends PropsWithChildren {
   label: string;

app/components/StoryCard.tsx

@@ -1,11 +1,10 @@
 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";
-import { Post } from "~/data/types";
-import { imageBuilder } from "~/data/sanityClient";
 
 const StoryCard: React.FC<Props> = ({ story }) => {
   return (

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.ts → app/data/sanityClient.server.ts

@@ -1,5 +1,4 @@
 import { createClient } from "@sanity/client";
-import imageUrlBuilder from "@sanity/image-url";
 
 export const sanity = createClient({
   projectId: "xpnntlnd",
@@ -9,15 +8,17 @@ export const sanity = createClient({
   token: process.env.SANITY_TOKEN // Only if you want to update content with the client
 });
 
-export const imageBuilder = imageUrlBuilder(sanity);
-
 export function getPostsByTag(tags: string[]) {
   const tagsFilters = tags.map((t) => `"${t}" in tags[]->title`).join(" || ");
   return `*[_type == "post" ${
     tagsFilters.length ? `&& ${tagsFilters}` : ""
-  }]{..., tags[]->{title}}`;
+  }]{_id, title, description, mainImage, tags[]->{title}, "slug": slug.current}`;
 }
 
 export function getAllPosts() {
-  return `*[_type == "post"] `;
+  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/emails/NewPostNewsletter.tsx

@@ -10,7 +10,8 @@ import {
 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/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
         }

app/routes/[feed.rss.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
         }

app/routes/index.tsx

@@ -1,6 +1,6 @@
 import { json } from "@remix-run/node";
 import { useLoaderData } from "@remix-run/react";
-import { getPostsByTag, sanity } from "~/data/sanityClient";
+import { getPostsByTag, sanity } from "~/data/sanityClient.server";
 import { Post } from "~/data/types";
 import LifeAni from "../animations/LifeAni";
 import Me from "../animations/Me";

app/routes/newsletter/webhook.tsx

@@ -3,10 +3,10 @@ import { ActionArgs, json } from "@remix-run/node";
 import { bundleMDX } from "~/helpers/mdx.server";
 import remarkGfm from "remark-gfm";
 import type { Newsletter } from "~/data/Newsletter";
-import { sanityClient } from "~/data/sanity";
 import { sendgridClient } from "~/data/sendgrid";
 import { EmailLayout } from "~/emails/EmailLayout";
 import { NewPostNewsletter } from "~/emails/NewPostNewsletter";
+import { sanity } from "~/data/sanityClient.server";
 
 export async function action(args: ActionArgs) {
   // Get Newsletter body
@@ -46,7 +46,7 @@ export async function action(args: ActionArgs) {
       });
 
     // Update the Newsletter with the design ID
-    await sanityClient.mutate([
+    await sanity.mutate([
       {
         patch: {
           id: newsletter._id,
@@ -86,7 +86,7 @@ export async function action(args: ActionArgs) {
       return new Response("Couldn't create single send in sendgrid.", {
         status: 200
       });
-    await sanityClient.mutate([
+    await sanity.mutate([
       {
         patch: {
           id: newsletter._id,

app/routes/stories.tsx

@@ -2,7 +2,7 @@ import { json } from "@remix-run/node";
 import { useLoaderData } from "@remix-run/react";
 import { useState } from "react";
 import StoryCard from "~/components/StoryCard";
-import { getAllPosts, getPostsByTag, sanity } from "~/data/sanityClient";
+import { getAllPosts, getPostsByTag, sanity } from "~/data/sanityClient.server";
 import { Post } from "~/data/types";
 import { filterStories } from "~/helpers/filterStories";