diff --git a/.npmrc b/.npmrc new file mode 100644 index 0000000..e9ee3cb --- /dev/null +++ b/.npmrc @@ -0,0 +1 @@ +legacy-peer-deps=true \ No newline at end of file diff --git a/.nvmrc b/.nvmrc index 2a4e4ab..25bf17f 100644 --- a/.nvmrc +++ b/.nvmrc @@ -1 +1 @@ -16.17.0 +18 \ No newline at end of file diff --git a/app/components/StoriesSection.tsx b/app/components/StoriesSection.tsx index bf0910f..010a031 100644 --- a/app/components/StoriesSection.tsx +++ b/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 = ({ @@ -33,7 +33,7 @@ const StoriesSection: React.FC = ({
{stories.map((story) => ( - + ))}
diff --git a/app/components/StoryCard.tsx b/app/components/StoryCard.tsx index e177fb0..482baa3 100644 --- a/app/components/StoryCard.tsx +++ b/app/components/StoryCard.tsx @@ -1,9 +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"; const StoryCard: React.FC = ({ story }) => { return ( @@ -11,12 +12,12 @@ const StoryCard: React.FC = ({ story }) => {
t.title === "highlighted") })} > {`${story.title}`} @@ -41,7 +42,7 @@ const StoryCard: React.FC = ({ story }) => { }; type Props = { - story: Story; + story: Post; }; export default StoryCard; diff --git a/app/components/Subscribe.tsx b/app/components/Subscribe.tsx index c1257a4..f5e9d98 100644 --- a/app/components/Subscribe.tsx +++ b/app/components/Subscribe.tsx @@ -15,8 +15,6 @@ export const Subscribe: React.FC<{ ? "error" : "idle"; - console.log(data); - return (
{noPreamble ? ( diff --git a/app/data/GetHighlighted.ts b/app/data/GetHighlighted.ts deleted file mode 100644 index 4696582..0000000 --- a/app/data/GetHighlighted.ts +++ /dev/null @@ -1,25 +0,0 @@ -import { gql } from "graphql-request"; - -export default gql` - { - stories(where: { highlighted: true }) { - id - title - slug - description - mdx - featuredImage { - url - } - publishedAt - highlighted - author { - id - name - picture { - url - } - } - } - } -`; diff --git a/app/data/GetStories.ts b/app/data/GetStories.ts deleted file mode 100644 index e2222ac..0000000 --- a/app/data/GetStories.ts +++ /dev/null @@ -1,26 +0,0 @@ -import { gql } from "graphql-request"; - -export default gql` - { - stories(orderBy: publishedAt_DESC, where: { preview: false }) { - id - title - slug - description - mdx - preview - featuredImage { - url - } - highlighted - publishedAt - author { - id - name - picture { - url - } - } - } - } -`; diff --git a/app/data/GetStoriesByTag.ts b/app/data/GetStoriesByTag.ts deleted file mode 100644 index c6413f0..0000000 --- a/app/data/GetStoriesByTag.ts +++ /dev/null @@ -1,21 +0,0 @@ -import { gql } from "graphql-request"; - -export default gql` - query GetStoriesByTag($tags: [Tags!]) { - stories( - orderBy: publishedAt_DESC - where: { tags_contains_some: $tags, preview: false } - first: 2 - ) { - id - title - description - mdx - slug - publishedAt - featuredImage { - url - } - } - } -`; diff --git a/app/data/GetStory.ts b/app/data/GetStory.ts deleted file mode 100644 index 0d2e178..0000000 --- a/app/data/GetStory.ts +++ /dev/null @@ -1,31 +0,0 @@ -import { gql } from "graphql-request"; - -export default gql` - query GetStory($slug: String) { - story(where: { slug: $slug }) { - id - title - description - publishedAt - mdx - preview - content { - html - } - featuredImage { - url - } - author { - id - bio - name - picture { - id - url - } - } - videoUrl - portfolioUrl - } - } -`; diff --git a/app/data/RichText.ts b/app/data/RichText.ts deleted file mode 100644 index 3fdf124..0000000 --- a/app/data/RichText.ts +++ /dev/null @@ -1,5 +0,0 @@ -export type RichText = { - html: string; - markdown: string; - text: string; -}; diff --git a/app/data/Story.ts b/app/data/Story.ts deleted file mode 100644 index d3c08cb..0000000 --- a/app/data/Story.ts +++ /dev/null @@ -1,24 +0,0 @@ -import type { RichText } from "./RichText"; - -export default interface Story { - id: string; - title: string; - description: string; - content: RichText; - mdx: string; - slug: string; - videoUrl: string; - highlighted: boolean; - preview: boolean; - featuredImage: { - url: string; - }; - publishedAt: string; - author: { - name: string; - bio: string; - picture: { - url: string; - }; - }; -} diff --git a/app/data/sanity.ts b/app/data/sanity.ts deleted file mode 100644 index 7384ec4..0000000 --- a/app/data/sanity.ts +++ /dev/null @@ -1,15 +0,0 @@ -export const sanityClient = { - async mutate(mutations: object[]) { - return await fetch( - `https://${process.env.SANITY_PROJECT_ID}.api.sanity.io/v2021-06-07/data/mutate/production`, - { - method: "post", - headers: { - "Content-type": "application/json", - Authorization: `Bearer ${process.env.SANITY_TOKEN}` - }, - body: JSON.stringify({ mutations }) - } - ); - } -}; diff --git a/app/data/sanityClient.server.ts b/app/data/sanityClient.server.ts new file mode 100644 index 0000000..7aae1f2 --- /dev/null +++ b/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}`; +} diff --git a/app/data/types.ts b/app/data/types.ts new file mode 100644 index 0000000..5570cad --- /dev/null +++ b/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[]; +}; diff --git a/app/emails/NewPostNewsletter.tsx b/app/emails/NewPostNewsletter.tsx index c9eb3a3..7bd7975 100644 --- a/app/emails/NewPostNewsletter.tsx +++ b/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; @@ -62,7 +63,7 @@ const MDXBlockQuote: React.FC = ({ children }) => { ); }; -const MDXStory: React.FC<{ story: Story }> = ({ story }) => { +const MDXStory: React.FC<{ story: Post }> = ({ story }) => { return (