{children}
76 | }, 77 | }, 78 | types: { 79 | article: ({value}: {value: Article}) => { 80 | const {title, slug} = value 81 | const url = getUrlForDocumentType('article', slug, value.brand) 82 | return ( 83 |
84 |
91 | )
92 | },
93 | mainImage: ({value}: {value: MainImage}) => {
94 | return 85 | Read more:{' '} 86 | 87 | {title} 88 | 89 |
90 |
100 |
102 | )
103 | },
104 | video: ({value}: {value: MediaNode}) => {
105 | const {url} = value
106 | return (
107 |
108 |
110 | )
111 | },
112 | },
113 | marks: {
114 | articleLink: ({children}: PortableTextMarkComponentProps) => {
115 | return {children}
116 | },
117 | },
118 | }
119 |
120 | export default function Body({
121 | date,
122 | content,
123 | people,
124 | brand,
125 | }: {
126 | content: any
127 | date?: any
128 | people?: any
129 | brand?: 'tech' | 'lifestyle'
130 | }) {
131 | const isLifestyle = brand === config.lifestyleBrand
132 |
133 | return (
134 |
141 | {people && people.length &&
155 | )
156 | }
157 |
--------------------------------------------------------------------------------
/components/Container.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react'
2 |
3 | export default function Container({children}: {children: React.ReactNode}) {
4 | return
148 |
154 | {children}
5 | }
6 |
--------------------------------------------------------------------------------
/components/CoverImage.tsx:
--------------------------------------------------------------------------------
1 | import cn from 'classnames'
2 | import Image from 'next/image'
3 | import Link from 'next/link'
4 | import * as React from 'react'
5 |
6 | import {urlForImage} from '../lib/sanity'
7 | import {getUrlForDocumentType} from '../utils/routing'
8 |
9 | interface CoverImageProps {
10 | title: string
11 | className?: string
12 | wrapperClassName?: string
13 | aspectClass?: string
14 | slug?: string
15 | brand?: string
16 | image?: {
17 | alt?: string
18 | image: any
19 | }
20 | priority?: boolean
21 | width?: number
22 | height?: number
23 | }
24 |
25 | export default function CoverImage(props: CoverImageProps) {
26 | const {
27 | title,
28 | slug,
29 | brand,
30 | image: source,
31 | priority,
32 | className,
33 | wrapperClassName = '',
34 | aspectClass = 'aspect-[4/2] md:aspect-[3/2]',
35 | width,
36 | height,
37 | } = props
38 | const alt = source?.alt
39 | const image = source?.image?.asset?._ref ? (
40 |
45 |
58 | ) : (
59 |
60 | )
61 |
62 | return (
63 |
64 | {slug ? (
65 |
69 | {image}
70 |
71 | ) : (
72 | image
73 | )}
74 |
75 | )
76 | }
77 |
--------------------------------------------------------------------------------
/components/Credits.tsx:
--------------------------------------------------------------------------------
1 | import {config} from 'lib/config'
2 | import Image from 'next/image'
3 | import Link from 'next/link'
4 | import React, {createContext, useContext} from 'react'
5 |
6 | import {urlForImage} from '../lib/sanity'
7 | import {Article} from '../types'
8 | import {getUrlForDocumentType} from '../utils/routing'
9 | import Date from './Date'
10 |
11 | const PeopleContext = createContext
51 |
92 | )
93 | }
94 |
95 | return (
96 |
52 | {firstPerson?.image && (
53 |
91 |
54 |
65 | )}
66 |
67 | {date && (
68 | <>
69 |
71 | 72 | )} 73 | {firstPerson && ( 74 | 75 | by 76 | 77 | 84 | {firstPerson.name} 85 | 86 | 87 | 88 | )} 89 |
90 | 71 | 72 | )} 73 | {firstPerson && ( 74 | 75 | by 76 | 77 | 84 | {firstPerson.name} 85 | 86 | 87 | 88 | )} 89 |
97 | {date && (
98 | 0 ? ' ● ' : undefined}
100 | className="after:inline after:content-[attr(data-after)]"
101 | >
102 |
107 | )
108 | }
109 |
110 | export const PeopleList = ({people}: {people: Article['people']}) => {
111 | return (
112 | <>
113 | {people &&
114 | people?.length > 0 &&
115 | people.map((person) => (
116 |
121 |
122 | {person.name}
123 |
124 |
125 | ))}
126 |
127 | )
128 | }
129 |
--------------------------------------------------------------------------------
/components/Date.tsx:
--------------------------------------------------------------------------------
1 | import {format, parseISO} from 'date-fns'
2 | import * as React from 'react'
3 |
4 | export default function Date({dateString}: {dateString: string}) {
5 | if (!dateString) return null
6 |
7 | const date = parseISO(dateString)
8 | return
9 | }
10 |
--------------------------------------------------------------------------------
/components/Figure.tsx:
--------------------------------------------------------------------------------
1 | import {ReactNode} from 'react'
2 | import * as React from 'react'
3 |
4 | export function Figure(props: {
5 | caption?: ReactNode
6 | className?: string
7 | img?: ReactNode
8 | }) {
9 | const {caption, className = '', img} = props
10 |
11 | return (
12 | {caption}
17 |
17 |
25 | )
26 | }
27 |
28 | return (
29 |
20 |
21 | ● Reach
22 |
23 |
24 |
34 |
42 | )
43 | }
44 |
--------------------------------------------------------------------------------
/components/Header.tsx:
--------------------------------------------------------------------------------
1 | import {PortableText} from '@portabletext/react'
2 | import {config} from 'lib/config'
3 | import Image from 'next/image'
4 | import Link from 'next/link'
5 | import React from 'react'
6 | import {logError} from 'utils/logError'
7 |
8 | import {urlForImage} from '../lib/sanity'
9 | import {Article, BrandSpecificProps, MainImage} from '../types'
10 | import {getUrlForDocumentType} from '../utils/routing'
11 | import {PeopleList, usePeople} from './Credits'
12 | import {Figure} from './Figure'
13 |
14 | type HeaderProps = Pick
37 |
38 | ● Media
39 |
40 |
41 |
26 | {sections && sections?.length > 0 && (
27 |
40 | {mainImage && mainImage.image && mainImage.image.asset?._ref && (
41 | 31 | {title || 'Untitled'} 32 |
33 | 34 | {intro && ( 35 |
36 |
38 | )}
39 |
68 |
72 |
73 | )
74 | }
75 |
76 | function MainCoverImage({
77 | title,
78 | mainImage,
79 | width = 2000,
80 | height = 1000,
81 | brandName = 'tech',
82 | }: {
83 | title: string
84 | width?: number
85 | height?: number
86 | mainImage: MainImage
87 | brandName?: string
88 | }) {
89 | const photographers = usePeople('photographer')
90 | const hasPhotographers = photographers && photographers.length > 0
91 | const separator =
92 | mainImage?.caption && photographers && photographers.length > 0 && ' ● '
93 |
94 | return (
95 | <>
96 | 69 | {title || 'Untitled'} 70 |
71 |
142 | {sections &&
143 | sections.map((section) =>
144 | section && section._id && section.slug ? (
145 |
155 | {section.name}
156 |
157 | ) : null
158 | )}
159 |
160 | )
161 | }
162 |
--------------------------------------------------------------------------------
/components/Layout.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react'
2 |
3 | import Alert from './Alert'
4 | import Footer from './Footer'
5 | import Navbar from './Navbar'
6 |
7 | export default function LayoutTech({
8 | preview,
9 | children,
10 | }: {
11 | preview: boolean
12 | children: React.ReactNode
13 | }) {
14 | return (
15 | <>
16 |
18 | {preview && {children}
20 |
21 |
22 |
23 | )
24 | }
25 |
--------------------------------------------------------------------------------
/components/LayoutLifestyle.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react'
2 |
3 | import Alert from './Alert'
4 | import Footer from './Footer'
5 | import NavbarLifestyle from './NavbarLifestyle'
6 |
7 | export default function Layout({
8 | preview,
9 | children,
10 | }: {
11 | preview: boolean
12 | children: React.ReactNode
13 | }) {
14 | return (
15 | <>
16 |
18 | {preview && {children}
20 |
21 |
22 |
23 | )
24 | }
25 |
--------------------------------------------------------------------------------
/components/MoreStories.tsx:
--------------------------------------------------------------------------------
1 | import {config} from 'lib/config'
2 | import React, {useMemo} from 'react'
3 |
4 | import {Article, isArticle, Review} from '../types'
5 | import {useSplitLifestyleArticles} from '../utils/useSplitLifestyleArticles'
6 | import ArticlePreview from './ArticlePreview'
7 |
8 | function StorySection({
9 | articles,
10 | title,
11 | columns = 4,
12 | sectionType,
13 | brandName,
14 | token,
15 | }: {
16 | articles?: (Article | Review)[]
17 | title?: string
18 | columns?: number
19 | sectionType?: 'featured' | 'normal'
20 | brandName?: string
21 | token?: string
22 | }) {
23 | const isLifestyleBrand = brandName === config.lifestyleBrand
24 | // Sorry for the mess, but this was the only way I could get the correct borders to work in all breakpoints, in light and dark mode :grimacing:
25 | const gridClass = useMemo(() => {
26 | return sectionType === 'featured'
27 | ? `grid border-gray-200 dark:divide-gray-900 dark:border-gray-900 max-sm:divide-gray-200 max-sm:divide-y max-sm:dark:divide-gray-900 border-b sm:grid-cols-2 sm:border sm:[&>*]:dark:border-gray-900 sm:[&>:not(:last-child):nth-child(odd)]:border-r sm:[&>:not(:last-child)]:border-b md:rounded md:grid-cols-${columns} md:[&>:not(:last-child):not(:nth-child(4))]:border-r`
28 | : `grid border-gray-200 dark:divide-gray-900 dark:border-gray-900 max-sm:divide-gray-200 max-sm:dark:divide-gray-900 max-sm:divide-y sm:grid-cols-2 sm:border sm:[&>*]:dark:border-gray-900 sm:[&>:nth-child(odd)]:border-r sm:[&>:nth-child(-n+3):not(:last-child)]:border-b md:rounded md:grid-cols-${columns} md:border md:[&>:not(:nth-child(3n))]:border-r`
29 | }, [columns, sectionType])
30 | if (isLifestyleBrand) {
31 | /* md:grid-cols-2 md:grid-cols-3 md:grid-cols-4 */
32 | return (
33 | 36 | ● {title} 37 |
38 | )} 39 | 40 |
41 |
72 |
42 | {articles?.map((article) => {
43 | const baseProps = {
44 | title: article?.title,
45 | mainImage: article?.mainImage,
46 | slug: article?.slug,
47 | intro: article?.intro,
48 | sectionType,
49 | isHighlighted: Boolean(article?.isHighlighted),
50 | brandName,
51 | }
52 |
53 | let additionalProps = {}
54 |
55 | if (isArticle(article)) {
56 | additionalProps = {
57 | date: article?.date,
58 | people: article?.people,
59 | sections: article?.sections,
60 | }
61 | }
62 |
63 | const props = {
64 | ...baseProps,
65 | ...additionalProps,
66 | }
67 |
68 | return
71 | Articles
79 |
80 |
111 |
81 | {articles?.map((article) => {
82 | const baseProps = {
83 | title: article?.title,
84 | mainImage: article?.mainImage,
85 | slug: article?.slug,
86 | intro: article?.intro,
87 | sectionType,
88 | isHighlighted: Boolean(article?.isHighlighted),
89 | brandName,
90 | }
91 |
92 | let additionalProps = {}
93 |
94 | if (isArticle(article)) {
95 | additionalProps = {
96 | date: article?.date,
97 | people: article?.people,
98 | sections: article?.sections,
99 | }
100 | }
101 |
102 | const props = {
103 | ...baseProps,
104 | ...additionalProps,
105 | }
106 |
107 | return
110 |
130 | {Boolean(topArticles?.length) && (
131 | <>
132 |
153 | )
154 | }
155 |
156 | return (
157 | Articles
159 |
160 |
190 |
161 | {articles?.map((article) => {
162 | const baseProps = {
163 | title: article?.title,
164 | mainImage: article?.mainImage,
165 | slug: article?.slug,
166 | intro: article?.intro,
167 | isHighlighted: Boolean(article?.isHighlighted),
168 | brandName,
169 | }
170 |
171 | let additionalProps = {}
172 |
173 | if (isArticle(article)) {
174 | additionalProps = {
175 | date: article?.date,
176 | people: article?.people,
177 | sections: article?.sections,
178 | }
179 | }
180 |
181 | const props = {
182 | ...baseProps,
183 | ...additionalProps,
184 | }
185 |
186 | return
189 |
15 |
21 | )
22 | }
23 |
--------------------------------------------------------------------------------
/components/NavbarLifestyle.tsx:
--------------------------------------------------------------------------------
1 | import clsx from 'clsx'
2 | import Link from 'next/link'
3 | import {useRouter} from 'next/router'
4 | import * as React from 'react'
5 |
6 | const SECTIONS = [
7 | {name: 'Entertainment', href: '/lifestyle/sections/entertainment'},
8 | {name: 'Wellness', href: '/lifestyle/sections/wellness'},
9 | {name: 'Beauty', href: '/lifestyle/sections/beauty'},
10 | {name: 'Fashion', href: '/lifestyle/sections/fashion'},
11 | {name: 'Must have', href: '/lifestyle/sections/must-have'},
12 | ]
13 |
14 | const CLASS_NAMES = `uppercase antialiased transition ease-in-out duration-300 text-black-500 hover:text-purple-500`
15 | export default function NavbarLifestyle() {
16 | const router = useRouter()
17 |
18 | return (
19 |
16 |
17 | ● Media
18 |
19 |
20 |
20 |
42 | )
43 | }
44 |
--------------------------------------------------------------------------------
/components/PreviewArticlePage.tsx:
--------------------------------------------------------------------------------
1 | 'use client'
2 | import * as React from 'react'
3 |
4 | import {articleQuery} from '../lib/queries'
5 | import {usePreview} from '../lib/sanity.preview'
6 | import ArticlePage from './ArticlePage'
7 |
8 | interface Props {
9 | token: string
10 | slug: string
11 | brand: string
12 | }
13 |
14 | export default function PreviewArticlePage({token, slug, brand}: Props) {
15 | const {article} = usePreview(token, articleQuery, {slug, brand})
16 | return
21 |
22 | ● Reach
23 |
24 |
25 |
40 |
41 |
28 |
35 |
29 | {name}
30 |
31 | {articles && articles?.length > 0 && (
32 | 5 | } 6 | -------------------------------------------------------------------------------- /components/Seo.tsx: -------------------------------------------------------------------------------- 1 | import {toPlainText} from '@portabletext/react' 2 | import {config} from 'lib/config' 3 | import {urlForImage} from 'lib/sanity' 4 | import {NextSeo} from 'next-seo' 5 | import React from 'react' 6 | import {isArticle, isAuthor, SEODocumentType} from 'types' 7 | import {getUrlForDocumentType} from 'utils/routing' 8 | 9 | const createCanonicalUrl = (doc: SEODocumentType) => { 10 | const url = 11 | config.env === 'production' 12 | ? 'https://demo-media-site-nextjs.sanity.build' 13 | : 'http://localhost:3000' 14 | const {_type, brand, slug} = doc 15 | return url + getUrlForDocumentType(_type, slug, brand) 16 | } 17 | 18 | const createOpenGraphObject = ( 19 | title: string, 20 | description: string, 21 | url: string, 22 | document: SEODocumentType 23 | ) => { 24 | //it would be nice if we could get all the images from, 25 | //for example, the entire body of a article. We can't demo 26 | //it at the moment, so we'll just use the main image 27 | const images = [] 28 | if (document.seo?.image) { 29 | images.push({ 30 | url: urlForImage(document.seo.image) 31 | .width(1200) 32 | .height(627) 33 | .fit('crop') 34 | .url(), 35 | }) 36 | } 37 | 38 | if (isArticle(document) && document?.mainImage?.image?.asset?._ref) { 39 | images.push({ 40 | url: urlForImage(document.mainImage.image) 41 | .width(1200) 42 | .height(627) 43 | .fit('crop') 44 | .url(), 45 | }) 46 | } 47 | 48 | if (isAuthor(document) && document.image?.asset?._ref) { 49 | images.push({ 50 | url: urlForImage(document.image) 51 | .width(1200) 52 | .height(627) 53 | .fit('crop') 54 | .url(), 55 | }) 56 | } 57 | 58 | //we will do types at a later date, again with the better OG/card preview 59 | //and JSON-LD previews 60 | return { 61 | title, 62 | description, 63 | url, 64 | images, 65 | } 66 | } 67 | 68 | export const Seo = ({doc}: {doc: SEODocumentType}) => { 69 | const defaultTitle = isArticle(doc) ? doc.title : doc.name 70 | const title = doc.seo?.title || defaultTitle 71 | let defaultDescription = '' 72 | 73 | if (isAuthor(doc)) { 74 | defaultDescription = doc.bio ? toPlainText(doc.bio) : defaultDescription 75 | } else if (isArticle(doc)) { 76 | defaultDescription = doc.intro ? toPlainText(doc.intro) : defaultDescription 77 | } else { 78 | defaultDescription = `Check out more ${ 79 | doc.name && `about ${doc.name}` 80 | } on the ${doc.brand} site.` 81 | } 82 | 83 | const description = doc.seo?.description || defaultDescription 84 | const canonicalUrl = createCanonicalUrl(doc) 85 | 86 | return ( 87 |
7 | 8 | {title} 9 | 10 |
11 | ) 12 | } 13 | -------------------------------------------------------------------------------- /components/Title.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react' 2 | 3 | export default function Title({children}: {children: React.ReactNode}) { 4 | return ( 5 |6 | {children} 7 |
8 | ) 9 | } 10 | 11 | export function TitleLifeStyle({children}: {children: React.ReactNode}) { 12 | return ( 13 |14 | ● {children} 15 |
16 | ) 17 | } 18 | -------------------------------------------------------------------------------- /lib/config.ts: -------------------------------------------------------------------------------- 1 | /* eslint-disable no-process-env */ 2 | export type Config = { 3 | env: string 4 | brand: string 5 | lifestyleBrand: string 6 | git: { 7 | repoOwner?: string 8 | repoProvider?: string 9 | repoSlug?: string 10 | } 11 | 12 | sanity: { 13 | projectId: string 14 | dataset: string 15 | apiVersion: string 16 | projectTitle?: string 17 | useCdn?: boolean 18 | readToken?: string 19 | writeToken?: string 20 | previewSecretId: `${string}.${string}` 21 | } 22 | revalidateSecret?: string 23 | } 24 | 25 | export const config: Config = { 26 | env: process.env.NODE_ENV || 'development', 27 | brand: process.env.NEXT_PUBLIC_BRAND || 'tech', 28 | lifestyleBrand: process.env.NEXT_PUBLIC_LIFESTYLE_BRAND || 'lifestyle', 29 | git: { 30 | repoOwner: process.env.NEXT_PUBLIC_GIT_REPO_OWNER, 31 | repoProvider: process.env.NEXT_PUBLIC_GIT_REPO_PROVIDER, 32 | repoSlug: process.env.NEXT_PUBLIC_GIT_REPO_SLUG, 33 | }, 34 | sanity: { 35 | projectId: process.env.NEXT_PUBLIC_SANITY_PROJECT_ID || 'ejk8qe4e', 36 | dataset: process.env.NEXT_PUBLIC_SANITY_DATASET || 'production', 37 | apiVersion: '2022-03-13', 38 | projectTitle: process.env.NEXT_PUBLIC_SANITY_PROJECT_TITLE, 39 | // useCdn == true gives fast, cheap responses using a globally distributed cache. 40 | // When in production the Sanity API is only queried on build-time, and on-demand when responding to webhooks. 41 | // Thus the data need to be fresh and API response time is less important. 42 | // When in development/working locally, it's more important to keep costs down as hot reloading can incurr a lot of API calls 43 | // And every page load calls getStaticProps. 44 | // To get the lowest latency, lowest cost, and latest data, use the Instant Preview mode 45 | // see https://www.sanity.io/docs/api-versioning for how versioning works 46 | useCdn: 47 | typeof document !== 'undefined' && process.env.NODE_ENV === 'production', 48 | readToken: process.env.SANITY_API_READ_TOKEN, 49 | writeToken: process.env.SANIY_API_WRITE_TOKEN, 50 | previewSecretId: `preview.secret`, 51 | }, 52 | revalidateSecret: process.env.SANIY_REVALIDATE_SECRET, 53 | // This is the document id used for the preview secret that's stored in your dataset. 54 | // The secret protects against unauthorized access to your draft content and have a lifetime of 60 minutes, to protect against bruteforcing. 55 | } 56 | 57 | export const reviewConfig: Config = { 58 | ...config, 59 | sanity: { 60 | ...config.sanity, 61 | dataset: process.env.NEXT_PUBLIC_SANITY_REVIEW_DATASET || 'reviews', 62 | }, 63 | } 64 | -------------------------------------------------------------------------------- /lib/constants.tsx: -------------------------------------------------------------------------------- 1 | import { 2 | FiFeather, 3 | FiHash, 4 | FiHeadphones, 5 | FiMail, 6 | FiStar, 7 | FiUser, 8 | } from 'react-icons/fi' 9 | import {IconType} from 'react-icons/lib' 10 | export type Brand = { 11 | name: string 12 | title: string 13 | structure: (SchemaItem | SchemaDivider | SchemaSiteSettings)[] 14 | } 15 | 16 | export type SchemaItem = { 17 | schemaType: string 18 | title: string 19 | icon?: IconType 20 | } 21 | 22 | export type SchemaDivider = 'divider' 23 | export type SchemaSiteSettings = 'siteSettings' 24 | 25 | export const CMS_NAME = 'Sanity' 26 | export const CMS_URL = 'https://sanity.io/' 27 | export const HOME_OG_IMAGE_URL = 28 | 'https://og-image.vercel.app/Next.js%20Blog%20Example%20with%20**Sanity**.png?theme=light&md=1&fontSize=75px&images=https%3A%2F%2Fassets.vercel.com%2Fimage%2Fupload%2Ffront%2Fassets%2Fdesign%2Fnextjs-black-logo.svg&images=data%3Aimage%2Fsvg%2Bxml%3Bbase64%2CPHN2ZyB2aWV3Qm94PSIwIDAgMTA1IDIyIiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMWVtIj48dGl0bGU%2BU2FuaXR5PC90aXRsZT48cGF0aCBvcGFjaXR5PSIwLjciIGQ9Ik03OC4xNzkzIDcuOTkyNjFWMjEuMDAyOEg3My45MDMxVjEwLjIxMzhMNzguMTc5MyA3Ljk5MjYxWiIgZmlsbD0iY3VycmVudENvbG9yIj48L3BhdGg%2BPHBhdGggb3BhY2l0eT0iMC43IiBkPSJNMjAuOTUxMSAyMS4zM0wzMC45NDQgMTYuMTA1MUwyOS43MTIxIDEyLjkxNDFMMjMuMTMzMiAxNS45ODIxTDIwLjk1MTEgMjEuMzNaIiBmaWxsPSJjdXJyZW50Q29sb3IiPjwvcGF0aD48cGF0aCBvcGFjaXR5PSIwLjUiIGQ9Ik03My45MDMxIDEwLjIwMjdMODQuNzQ0MyA0LjY1NDc3TDgyLjkxMjYgMS41NTcxTDczLjkwMzEgNS45NTk5N1YxMC4yMDI3WiIgZmlsbD0iY3VycmVudENvbG9yIj48L3BhdGg%2BPHBhdGggb3BhY2l0eT0iMC43IiBkPSJNNDMuMzcwNSA2Ljk2MjMzVjIxLjAwMjhIMzkuMjkyN1YxLjAwNzE0TDQzLjM3MDUgNi45NjIzM1oiIGZpbGw9ImN1cnJlbnRDb2xvciI%2BPC9wYXRoPjxwYXRoIG9wYWNpdHk9IjAuNSIgZD0iTTI3LjEyOTkgNi4xODYxN0wyMC45NTExIDIxLjMzTDE3Ljc3MzEgMTguNTk0M0wyNS4xMzUzIDEuMDA3MTRMMjcuMTI5OSA2LjE4NjE3WiIgZmlsbD0iY3VycmVudENvbG9yIj48L3BhdGg%2BPHBhdGggZD0iTTI1LjEzNTMgMS4wMDcxNEgyOS4zNDc3TDM3LjEzODYgMjEuMDAyOEgzMi44MjY5TDI1LjEzNTMgMS4wMDcxNFoiIGZpbGw9ImN1cnJlbnRDb2xvciI%2BPC9wYXRoPjxwYXRoIGQ9Ik00NC4wMDEyIDEuMDA3MTRMNTIuOTgyNCAxNC42NjgyVjIxLjAwMjhMMzkuMjkyNyAxLjAwNzE0SDQ0LjAwMTJaIiBmaWxsPSJjdXJyZW50Q29sb3IiPjwvcGF0aD48cGF0aCBkPSJNNjQuOTE4MyAxLjAwNzE0SDYwLjY3MzlWMjEuMDA2M0g2NC45MTgzVjEuMDA3MTRaIiBmaWxsPSJjdXJyZW50Q29sb3IiPjwvcGF0aD48cGF0aCBkPSJNNzMuOTAzMSA0LjY1NDc0SDY3LjM3VjEuMDA3MTRIODIuNTg2N0w4NC43NDQzIDQuNjU0NzRINzguMTc5M0g3My45MDMxWiIgZmlsbD0iY3VycmVudENvbG9yIj48L3BhdGg%2BPHBhdGggb3BhY2l0eT0iMC41IiBkPSJNOTcuMjc1NCAxMy40MTUzVjIxLjAwMjhIOTMuMDYyOVYxMy40MTUzIiBmaWxsPSJjdXJyZW50Q29sb3IiPjwvcGF0aD48cGF0aCBkPSJNOTMuMDYyOSAxMy40MTUyTDEwMC4xOTEgMS4wMDcxNEgxMDQuNjY2TDk3LjI3NTQgMTMuNDE1Mkg5My4wNjI5WiIgZmlsbD0iY3VycmVudENvbG9yIj48L3BhdGg%2BPHBhdGggb3BhY2l0eT0iMC43IiBkPSJNOTMuMDYzIDEzLjQxNTJMODUuNzM2MyAxLjAwNzE0SDkwLjM0NTZMOTUuMzA5MiA5LjUxMDA4TDkzLjA2MyAxMy40MTUyWiIgZmlsbD0iY3VycmVudENvbG9yIj48L3BhdGg%2BPHBhdGggZD0iTTEuOTYxMjYgMy4zMTQ3OUMxLjk2MTI2IDYuMDk5MjEgMy43MTE0NSA3Ljc1NTk1IDcuMjE1MzYgOC42Mjk1NkwxMC45MjgzIDkuNDc1MzNDMTQuMjQ0NCAxMC4yMjM2IDE2LjI2MzkgMTIuMDgyMiAxNi4yNjM5IDE1LjExMDNDMTYuMjg5NyAxNi40Mjk1IDE1Ljg1MzEgMTcuNzE3MyAxNS4wMjc0IDE4Ljc1NzlDMTUuMDI3NCAxNS43MzY4IDEzLjQzNjcgMTQuMTA0NCA5LjU5OTcyIDEzLjEyMjlMNS45NTQwOSAxMi4zMDg1QzMuMDM0NzUgMTEuNjU0MSAwLjc4MTQ3OCAxMC4xMjYyIDAuNzgxNDc4IDYuODM3MDlDMC43NjYxMjMgNS41NjY5MyAxLjE4MTE2IDQuMzI3ODEgMS45NjEyNiAzLjMxNDc5IiBmaWxsPSJjdXJyZW50Q29sb3IiPjwvcGF0aD48cGF0aCBvcGFjaXR5PSIwLjciIGQ9Ik01Mi45ODI0IDEzLjY0MTVWMS4wMDcxNEg1Ny4wNjAyVjIxLjAwMjhINTIuOTgyNFYxMy42NDE1WiIgZmlsbD0iY3VycmVudENvbG9yIj48L3BhdGg%2BPHBhdGggb3BhY2l0eT0iMC43IiBkPSJNMTIuNzQ1OCAxNC4zNjg5QzE0LjMyOTQgMTUuMzY0MyAxNS4wMjM4IDE2Ljc1NjUgMTUuMDIzOCAxOC43NTQ0QzEzLjcxMyAyMC40MDQxIDExLjQxMDEgMjEuMzMgOC43MDMzMyAyMS4zM0M0LjE0NzE4IDIxLjMzIDAuOTU4NTc3IDE5LjEyNjggMC4yNSAxNS4yOTgySDQuNjI1NDdDNS4xODg3OCAxNy4wNTU5IDYuNjgwMzQgMTcuODcwMyA4LjY3MTQ0IDE3Ljg3MDNDMTEuMTAxOSAxNy44NzAzIDEyLjcxNzQgMTYuNTk2NCAxMi43NDkzIDE0LjM2MTkiIGZpbGw9ImN1cnJlbnRDb2xvciI%2BPC9wYXRoPjxwYXRoIG9wYWNpdHk9IjAuNyIgZD0iTTQuMjM1NjcgNy40NDI2N0MzLjUxMjUgNy4wMjA0NSAyLjkxOTIgNi40MTM3NSAyLjUxODczIDUuNjg2OTdDMi4xMTgyNyA0Ljk2MDE5IDEuOTI1NTggNC4xNDA0NSAxLjk2MTEzIDMuMzE0NzZDMy4yMjU5NCAxLjY3ODkxIDUuNDI2MDggMC42Nzk5OTMgOC4xMDgwNCAwLjY3OTk5M0MxMi43NDkyIDAuNjc5OTkzIDE1LjQzNDcgMy4wODg1MiAxNi4wOTcyIDYuNDc4NTZIMTEuODg4M0MxMS40MjQyIDUuMTQyMDMgMTAuMjYyMSA0LjEwMTM2IDguMTQzNDcgNC4xMDEzNkM1Ljg3OTU3IDQuMTAxMzYgNC4zMzQ4NyA1LjM5NjExIDQuMjQ2MjkgNy40NDI2NyIgZmlsbD0iY3VycmVudENvbG9yIj48L3BhdGg%2BPC9zdmc%2B&widths=undefined&widths=auto&heights=250&heights=150' 29 | 30 | export const SCHEMA_ITEMS_LIFESTYLE: ( 31 | | SchemaItem 32 | | SchemaDivider 33 | | SchemaSiteSettings 34 | )[] = [ 35 | 'siteSettings', 36 | 'divider', 37 | {schemaType: `article`, title: 'Articles', icon: FiFeather}, 38 | 'divider', 39 | {schemaType: `person`, title: 'People', icon: FiUser}, 40 | {schemaType: `section`, title: 'Sections', icon: FiHash}, 41 | ] 42 | 43 | export const SCHEMA_ITEMS_TECH: ( 44 | | SchemaItem 45 | | SchemaDivider 46 | | SchemaSiteSettings 47 | )[] = [ 48 | 'siteSettings', 49 | 'divider', 50 | {schemaType: `article`, title: 'Articles', icon: FiFeather}, 51 | {schemaType: `newsletter`, title: 'Newsletter', icon: FiMail}, 52 | {schemaType: `podcast`, title: 'Podcast', icon: FiHeadphones}, 53 | 'divider', 54 | {schemaType: `person`, title: 'People', icon: FiUser}, 55 | {schemaType: `section`, title: 'Sections', icon: FiHash}, 56 | ] 57 | 58 | export const SCHEMA_ITEMS_REVIEWS: (SchemaItem | SchemaDivider)[] = [ 59 | {schemaType: `review`, title: 'Reviews', icon: FiStar}, 60 | ] 61 | 62 | export const BRANDS: Brand[] = [ 63 | { 64 | name: 'tech', 65 | title: 'Tech', 66 | structure: SCHEMA_ITEMS_TECH, 67 | }, 68 | { 69 | name: 'lifestyle', 70 | title: 'Lifestyle', 71 | structure: SCHEMA_ITEMS_LIFESTYLE, 72 | }, 73 | { 74 | name: 'reviews', 75 | title: 'Reviews', 76 | structure: SCHEMA_ITEMS_REVIEWS, 77 | }, 78 | ] 79 | -------------------------------------------------------------------------------- /lib/homeVariationsMiddleware.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * Logic to fetch the available experiments and determine which to show to a user 3 | */ 4 | import {NextMiddleware, NextRequest, NextResponse} from 'next/server' 5 | 6 | import {config} from './config' 7 | 8 | const {projectId, dataset, apiVersion} = config.sanity 9 | 10 | // this query must match the filter and order of the home page 11 | // but only needs to fetch the ones we are going to experiment on 12 | const query = ` 13 | *[_type == "article" && defined(variations) && brand == $brand] | order(date desc, _updatedAt desc) [0...3] { 14 | _id, 15 | 'variations': variations[]._key 16 | } 17 | ` 18 | 19 | interface Article { 20 | _id: string 21 | variations?: string[] 22 | } 23 | 24 | const urlQuery = encodeURIComponent(query) 25 | 26 | const queryUrl = (brand: string) => 27 | new URL( 28 | `https://${projectId}.apicdn.sanity.io/v${apiVersion}/data/query/${dataset}?query=${urlQuery}&$brand="${brand}"` 29 | ) 30 | 31 | // NOTE this calls the APICDN for every view of the homepage 32 | // Although Netlify has a way to rewrite HTML in edge middleware, and thus not call the API for every page view, 33 | // Vercel does not have such a capability, so we have to do this on every page view for now. 34 | const fetchArticles = async (brand: string) => { 35 | const response = await fetch(queryUrl(brand)) 36 | const {result} = (await response.json()) as {result: Article[]} 37 | return result 38 | } 39 | 40 | export const homeMiddleware: NextMiddleware = async (request: NextRequest) => { 41 | const currentExperiments = JSON.parse( 42 | request.cookies.get('homeContent')?.value || '{}' 43 | ) 44 | const brand = request.nextUrl.pathname.split('/')[1] 45 | 46 | const articles = await fetchArticles(brand) 47 | 48 | const newExperiments = {} 49 | 50 | articles.forEach((article) => { 51 | const currentVariant = currentExperiments[article._id] 52 | 53 | if ( 54 | currentVariant && 55 | (currentVariant === 'fallback' || 56 | article.variations?.includes(currentVariant)) 57 | ) { 58 | // preserve existing experiments 59 | //@ts-expect-error 60 | newExperiments[article._id] = currentExperiments[article._id] 61 | } else if (article.variations) { 62 | // add 1 to account for the fallback/baseline content! 63 | //@ts-expect-error 64 | newExperiments[article._id] = 65 | article.variations[ 66 | Math.floor(Math.random() * (article.variations.length + 1)) 67 | ] || 'fallback' 68 | } 69 | }) 70 | 71 | const path = Object.entries(newExperiments) 72 | .map((item) => item.join(':')) 73 | .join('/') 74 | 75 | // console.log('newExperiments', newExperiments) 76 | 77 | const response = NextResponse.rewrite( 78 | new URL(`/${brand}/home/${path}`, request.url) 79 | ) 80 | 81 | const newExperimentsHeaderValue = JSON.stringify(newExperiments) 82 | // console.log('header', newExperimentsHeaderValue) 83 | 84 | response.cookies.set('homeContent', newExperimentsHeaderValue) 85 | 86 | return response 87 | } 88 | -------------------------------------------------------------------------------- /lib/next-seo.config.ts: -------------------------------------------------------------------------------- 1 | import {DefaultSeoProps} from 'next-seo' 2 | 3 | const envBasedConfig = (brand: string | undefined) => 4 | brand === 'lifestyle' 5 | ? { 6 | titleTemplate: '%s | Lifestyle', 7 | defaultTitle: 'Lifestyle', 8 | openGraph: { 9 | type: 'website', 10 | locale: 'en', 11 | url: 'https://www.url.ie/', 12 | siteName: 'Lifestyle', 13 | }, 14 | } 15 | : { 16 | titleTemplate: '%s | Tech', 17 | defaultTitle: 'Tech', 18 | openGraph: { 19 | type: 'website', 20 | locale: 'en', 21 | url: 'https://www.url.ie/', 22 | siteName: 'Tech', 23 | }, 24 | } 25 | 26 | const config = (brand: string): DefaultSeoProps => ({ 27 | dangerouslySetAllPagesToNoIndex: true, 28 | ...envBasedConfig(brand), 29 | description: 'A demo of the Sanity.io editorial workflow', 30 | additionalLinkTags: [ 31 | { 32 | rel: 'apple-touch-icon', 33 | sizes: '180x180', 34 | href: '/favicon/apple-touch-icon.png', 35 | }, 36 | { 37 | rel: 'icon', 38 | type: 'image/png', 39 | sizes: '32x32', 40 | href: '/favicon/favicon-32x32.png', 41 | }, 42 | { 43 | rel: 'icon', 44 | type: 'image/png', 45 | sizes: '16x16', 46 | href: '/favicon/favicon-16x16.png', 47 | }, 48 | { 49 | rel: 'manifest', 50 | href: '/favicon/site.webmanifest', 51 | }, 52 | { 53 | rel: 'mask-icon', 54 | href: '/favicon/safari-pinned-tab.svg', 55 | color: '#000000', 56 | }, 57 | { 58 | rel: 'shortcut icon', 59 | href: '/favicon/favicon.ico', 60 | }, 61 | /* 62 | 63 | */ 64 | ], 65 | additionalMetaTags: [ 66 | { 67 | name: 'msapplication-TileColor', 68 | content: 'Jane Doe', 69 | }, 70 | { 71 | name: 'msapplication-config', 72 | content: '/favicon/browserconfig.xml', 73 | }, 74 | { 75 | name: 'theme-color', 76 | content: '#000', 77 | }, 78 | ], 79 | }) 80 | 81 | export default config 82 | -------------------------------------------------------------------------------- /lib/queries/article.ts: -------------------------------------------------------------------------------- 1 | import groq from 'groq' 2 | 3 | export const articleContentFields = groq` 4 | "content": content[]{ 5 | _type == 'articleReference' => @->{_type, _id, title, "slug": slug.current}, 6 | _type != 'articleReference' => @, 7 | _type == 'podcastReference' => @->{_type, _id, "url": podcastEpisode.url }, 8 | }, 9 | ` 10 | 11 | export const articleFields = groq` 12 | _id, 13 | _type, 14 | title, 15 | date, 16 | intro, 17 | brand, 18 | "summary": intro, 19 | seo, 20 | mainImage, 21 | "date": _updatedAt, 22 | "slug": slug.current, 23 | "people": people[]{ role, ...person->{name, image, bio, 'slug': slug.current} }, 24 | "sections": sections[]->{name, _id, "slug": slug.current}, 25 | ` 26 | 27 | export const settingsQuery = groq`*[_type == "settings"][0]{title}` 28 | 29 | export const indexQuery = groq` 30 | { 31 | "featuredArticles": *[_type == 'siteSettings' && brand == $brand][0].featured[defined(_ref) || defined(review._ref)]{ 32 | _type == 'articleReference' => @->, 33 | _type == 'reviewReference'=> { 34 | ...@.review->, 35 | @.review->soldOut => { 36 | "title": "SOLD OUT: " + coalesce(@.titleOverride, @.review->{title}.title) 37 | }, 38 | @.review->soldOut == false => { 39 | "title": coalesce(@.titleOverride, @.review->{title}.title) 40 | }, 41 | "sections": @.sections 42 | } 43 | }, 44 | "recentArticles": *[_type == "article" && brand == $brand] | order(date desc, _createdAt desc) [0..10] 45 | } | 46 | { 47 | "featuredArticles": @.featuredArticles, 48 | "filteredRecent": @.recentArticles[!(_id in ^.featuredArticles[]._id)] 49 | } | { 50 | "combined": @.featuredArticles + @.filteredRecent 51 | }.combined[0..10]{ 52 | ${articleFields} 53 | variations 54 | }` 55 | 56 | export const articleQuery = groq` 57 | { 58 | "article": *[_type == "article" && slug.current == $slug && brand == $brand] | order(_updatedAt desc) [0] { 59 | ${articleContentFields} 60 | ${articleFields} 61 | }, 62 | "morePosts": *[_type == "article" && slug.current != $slug] | order(date desc, _updatedAt desc) [0...2] { 63 | content, 64 | ${articleFields} 65 | } 66 | }` 67 | 68 | export const articleSlugsQuery = groq` 69 | *[_type == "article" && defined(slug.current)][]{ 70 | brand, 71 | "slug": slug.current, 72 | } 73 | ` 74 | 75 | export const articleBySlugQuery = groq` 76 | *[_type == "article" && slug.current == $slug && brand == $brand][0] { 77 | ${articleFields} 78 | } 79 | ` 80 | 81 | export const reviewQuery = groq` 82 | *[_type == "review" && slug.current == $slug][0] { 83 | ${articleFields} 84 | // mainImage->{..., image{..., asset->{..., '_dataset': 'reviews'}}}, 85 | } 86 | ` 87 | -------------------------------------------------------------------------------- /lib/queries/index.ts: -------------------------------------------------------------------------------- 1 | export * from './article' 2 | export * from './person' 3 | export * from './section' 4 | -------------------------------------------------------------------------------- /lib/queries/newsletter.ts: -------------------------------------------------------------------------------- 1 | import groq from 'groq' 2 | 3 | export const newsletterFields = groq` 4 | _id, 5 | title, 6 | subject, 7 | intro, 8 | hasCustomTextContent, 9 | "content": content[]{ 10 | _type == 'articleReference' => @->{_type, _id, title, intro, "slug": slug.current, mainImage }, 11 | _type == 'articleReferences' => @{_type, _key, references[]->{_type, _id, title, intro, "slug": slug.current, mainImage }}, 12 | _type != 'articleReference' && _type != 'articleReferences' => @, 13 | }, 14 | "date": _updatedAt, 15 | ` 16 | 17 | export const settingsQuery = groq`*[_type == "settings"][0]{title}` 18 | 19 | export const indexQuery = groq` 20 | *[_type == "newsletter"] | order(date desc, _updatedAt desc) { 21 | ${newsletterFields} 22 | }` 23 | 24 | export const newsletterQuery = groq` 25 | { 26 | "newsletter": *[_type == "newsletter" && slug.current == $slug] | order(_updatedAt desc) [0] { 27 | content, 28 | ${newsletterFields} 29 | }, 30 | "morePosts": *[_type == "newsletter" && slug.current != $slug] | order(date desc, _updatedAt desc) [0...2] { 31 | content, 32 | ${newsletterFields} 33 | } 34 | }` 35 | 36 | export const newsletterSlugsQuery = groq` 37 | *[_type == "newsletter" && defined(slug.current)][].slug.current 38 | ` 39 | 40 | export const newsletterBySlugQuery = groq` 41 | *[_type == "newsletter" && slug.current == $slug][0] { 42 | ${newsletterFields} 43 | } 44 | ` 45 | 46 | export const newsletterByIdQuery = groq` 47 | *[_type == "newsletter" && _id == $id][0] { 48 | ${newsletterFields} 49 | } 50 | ` 51 | export const newslettersByIdQuery = groq` 52 | *[_type == "newsletter" && _id in $ids] { 53 | ${newsletterFields} 54 | } 55 | ` 56 | -------------------------------------------------------------------------------- /lib/queries/person.ts: -------------------------------------------------------------------------------- 1 | import groq from 'groq' 2 | 3 | import {articleFields} from './article' 4 | 5 | export const personFields = groq` 6 | _id, 7 | _type, 8 | name, 9 | bio, 10 | isStaff, 11 | seo, 12 | brand, 13 | "slug": slug.current, 14 | ` 15 | 16 | export const personIndexQuery = groq` 17 | *[_type == "person"] | order(date desc, _updatedAt desc) { 18 | ${personFields} 19 | }` 20 | 21 | export const personBySlugQuery = groq`*[_type == "person" && slug.current == $slug] | order(_updatedAt desc) [0] { 22 | ${personFields} 23 | "articles": *[_type == 'article' && references(^._id)] | order(_updatedAt desc) { 24 | ${articleFields} 25 | } 26 | }` 27 | 28 | export const personSlugsQuery = groq` 29 | *[_type == "person" && defined(slug.current)][]{ 30 | "slug": slug.current, 31 | brand 32 | } 33 | ` 34 | -------------------------------------------------------------------------------- /lib/queries/section.ts: -------------------------------------------------------------------------------- 1 | import groq from 'groq' 2 | 3 | import {articleFields} from './article' 4 | 5 | export const sectionFields = groq` 6 | _id, 7 | _type, 8 | name, 9 | brand, 10 | seo, 11 | "slug": slug.current, 12 | ` 13 | 14 | export const sectionIndexQuery = groq` 15 | *[_type == "section"] | order(date desc, _updatedAt desc) { 16 | ${sectionFields} 17 | }` 18 | 19 | export const sectionBySlugQuery = groq`*[_type == "section" && slug.current == $slug && brand == $brand] | order(_updatedAt desc) [0] { 20 | ${sectionFields} 21 | "articles": *[_type == 'article' && references(^._id) && brand == $brand] | order(_updatedAt desc) { 22 | ${articleFields} 23 | } 24 | }` 25 | 26 | export const sectionSlugsQuery = groq` 27 | *[_type == "section" && defined(slug.current)][]{ 28 | "slug": slug.current, 29 | brand 30 | } 31 | ` 32 | -------------------------------------------------------------------------------- /lib/sanity.preview.ts: -------------------------------------------------------------------------------- 1 | 'use client' 2 | 3 | import {definePreview} from 'next-sanity/preview' 4 | 5 | import {config, reviewConfig} from './config' 6 | 7 | function onPublicAccessOnly() { 8 | throw new Error(`Unable to load preview as you're not logged in`) 9 | } 10 | 11 | const {projectId, dataset} = config.sanity 12 | 13 | export const usePreview = definePreview({ 14 | projectId, 15 | dataset, 16 | onPublicAccessOnly, 17 | }) 18 | 19 | const reviewProjectId = reviewConfig.sanity.projectId 20 | const reviewDataset = reviewConfig.sanity.dataset 21 | 22 | export const useReviewPreview = definePreview({ 23 | projectId: reviewProjectId, 24 | dataset: reviewDataset, 25 | onPublicAccessOnly, 26 | }) 27 | -------------------------------------------------------------------------------- /lib/sanity.server.tsx: -------------------------------------------------------------------------------- 1 | /** 2 | * Server-side Sanity utilities. By having these in a separate file from the 3 | * utilities we use on the client side, we are able to tree-shake (remove) 4 | * code that is not used on the client side. 5 | */ 6 | import {createClient} from 'next-sanity' 7 | import {SanityDocument} from 'sanity' 8 | 9 | import {config} from './config' 10 | 11 | export const getClient = (preview: boolean) => 12 | preview 13 | ? createClient({ 14 | projectId: config.sanity.projectId, 15 | dataset: config.sanity.dataset, 16 | useCdn: false, 17 | // Fallback to using the WRITE token until https://www.sanity.io/docs/vercel-integration starts shipping a READ token. 18 | // As this client only exists on the server and the token is never shared with the browser, we don't risk escalating permissions to untrustworthy users 19 | token: config.sanity.readToken || config.sanity.writeToken, 20 | apiVersion: config.sanity.apiVersion, 21 | }) 22 | : createClient({ 23 | projectId: config.sanity.projectId, 24 | dataset: config.sanity.dataset, 25 | apiVersion: config.sanity.apiVersion, 26 | useCdn: true, 27 | }) 28 | 29 | export function overlayDrafts(docs: SanityDocument[]) { 30 | const documents = docs || [] 31 | const overlayed = documents.reduce((map, doc) => { 32 | if (!doc._id) { 33 | throw new Error('Ensure that `_id` is included in query projection') 34 | } 35 | 36 | const isDraft = doc._id.startsWith('drafts.') 37 | const id = isDraft ? doc._id.slice(7) : doc._id 38 | return isDraft || !map.has(id) ? map.set(id, doc) : map 39 | }, new Map()) 40 | 41 | return Array.from(overlayed.values()) 42 | } 43 | -------------------------------------------------------------------------------- /lib/sanity.tsx: -------------------------------------------------------------------------------- 1 | import createImageUrlBuilder from '@sanity/image-url' 2 | import {SanityAsset} from '@sanity/image-url/lib/types/types' 3 | import {CrossDatasetSource} from 'types' 4 | 5 | import {config, reviewConfig} from './config' 6 | 7 | export const imageBuilder = createImageUrlBuilder({ 8 | projectId: config.sanity.projectId, 9 | dataset: config.sanity.dataset, 10 | }) 11 | 12 | export const urlForImage = (source: SanityAsset | CrossDatasetSource) => { 13 | if (source?.asset?._dataset == 'reviews') { 14 | const reviewImageBuilder = createImageUrlBuilder({ 15 | projectId: reviewConfig.sanity.projectId, 16 | dataset: reviewConfig.sanity.dataset, 17 | }) 18 | return reviewImageBuilder.image(source).auto('format').fit('max') 19 | } 20 | 21 | return imageBuilder.image(source).auto('format').fit('max') 22 | } 23 | -------------------------------------------------------------------------------- /lint-staged.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | '**/*.{js,jsx}': ['prettier --list-different', 'eslint'], 3 | '**/*.{ts,tsx}': [ 4 | 'prettier --list-different', 5 | 'eslint', 6 | () => 'tsc --noEmit', 7 | ], 8 | } 9 | -------------------------------------------------------------------------------- /logo.tsx: -------------------------------------------------------------------------------- 1 | import {Flex, Text} from '@sanity/ui' 2 | import React, {memo, useMemo} from 'react' 3 | 4 | export const Logo = memo(function Logo(props: {type?: string}) { 5 | const type = props?.type || 'tech' 6 | const settings: Record
35 | {/* live preview commented out here for demo day purposes, please do not uncomment!! */}
36 | {/* {preview ? (
37 |
38 |
40 | ) : ( */}
41 |
44 | = NextPage github.com/{username}
13 | {brand.title} Website
14 |
16 |
17 | {brand.title} Sanity Studio
18 |
19 | ${toPlainText(email.content)}
50 |
77 | ),
78 | {
79 | width: 1200,
80 | height: 630,
81 | }
82 | )
83 | }
84 |
85 | return new ImageResponse(
86 | (
87 |
51 |
76 |
52 |
75 |
53 |
54 |
66 | {' '}
67 | Reach
68 |
69 |
70 |
74 |
71 | {doc?.title || 'Untitled'}
72 |
73 |
101 | {/* eslint-disable-next-line @next/next/no-img-element */}
102 |
112 | ),
113 | {
114 | width: 1200,
115 | height: 630,
116 | }
117 | )
118 | }
119 |
--------------------------------------------------------------------------------
/pages/api/exit-preview.tsx:
--------------------------------------------------------------------------------
1 | import {NextApiRequest, NextApiResponse} from 'next'
2 |
3 | export default function exit(_: NextApiRequest, res: NextApiResponse) {
4 | // Exit the current user from "Preview Mode". This function accepts no args.
5 | res.clearPreviewData()
6 |
7 | // Redirect the user back to the index page.
8 | res.writeHead(307, {Location: '/tech'})
9 | return res.end()
10 | }
11 |
--------------------------------------------------------------------------------
/pages/api/newsletter/preview.tsx:
--------------------------------------------------------------------------------
1 | import path from 'node:path'
2 |
3 | import {toPlainText} from '@portabletext/react'
4 | import {SanityDocumentStub} from '@sanity/client'
5 | import * as fs from 'fs'
6 | import mjml2html from 'mjml'
7 | import {NextApiRequest, NextApiResponse} from 'next'
8 | import {twig} from 'twig'
9 |
10 | import {newslettersByIdQuery} from '../../../lib/queries/newsletter'
11 | import {getClient} from '../../../lib/sanity.server'
12 | import {
13 | blocksToCustomContentBlocks,
14 | customToPlainText,
15 | formatDate,
16 | } from '../../../plugins/newsletter/utils/format'
17 |
18 | function wrapIds(ids: any) {
19 | if (!Array.isArray(ids)) {
20 | return [ids]
21 | }
22 |
23 | return ids
24 | }
25 |
26 | function renderMjml(s: string) {
27 | return mjml2html(s).html
28 | }
29 |
30 | async function renderNewsletter(newsletter: SanityDocumentStub) {
31 | const data = {
32 | subject: newsletter.subject ?? newsletter.title,
33 | intro: toPlainText(newsletter.intro),
34 | publishDate: formatDate(newsletter.date),
35 | contentBlocks: blocksToCustomContentBlocks(newsletter.content),
36 | html: customToPlainText(newsletter.content),
37 | text: customToPlainText(newsletter.content),
38 | }
39 |
40 | const templateFile = await getTemplateFile()
41 | const template = twig({data: templateFile.toString()})
42 |
43 | try {
44 | const htmlOutput = renderMjml(template.render(data))
45 | return {data, htmlOutput}
46 | } catch (e) {
47 | throw e
48 | }
49 | // console.dir(data.contentBlocks)
50 | }
51 |
52 | export default async function preview(
53 | req: NextApiRequest,
54 | res: NextApiResponse
55 | ) {
56 | // if (secret && req.query.secret !== secret) {
57 | // return res.status(401).json({ message: 'Invalid secret' })
58 | // }
59 |
60 | // If no ids is provided return error
61 | if (!req.query.ids) {
62 | return res.status(401).json({message: 'Invalid ids'})
63 | }
64 |
65 | // // Get newsletter by ids
66 | const newsletters = await getClient(true).fetch(newslettersByIdQuery, {
67 | ids: wrapIds(req.query.ids),
68 | })
69 |
70 | // If no newsletter is found return error
71 | if (!newsletters || newsletters?.length === 0) {
72 | return res.status(401).json({message: 'No newsletter documents found'})
73 | }
74 |
75 | const renderedNewsletter = await renderNewsletter(newsletters[0])
76 |
77 | return res.status(200).json({output: renderedNewsletter, newsletters})
78 | }
79 |
80 | function getTemplateFile(): Promise
110 | Media brands:
9 | {BRANDS.map((brand) => (
10 | {brand.title}
12 |
21 |
40 |
41 |
42 | )
43 | })
44 |
--------------------------------------------------------------------------------
/plugins/defaultConfig/defaultDocumentNode.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import {DefaultDocumentNodeResolver} from 'sanity/structure'
3 | import DocumentsPane from 'sanity-plugin-documents-pane'
4 |
5 | import {PreviewPane} from '../../plugins/PreviewPane'
6 | import {NewsletterPreview} from '../newsletter'
7 |
8 | const defaultDocumentNode: DefaultDocumentNodeResolver = (S, {schemaType}) => {
9 | const previewTypes = ['article', 'person', 'section', 'siteSettings']
10 | const articleReferenceTypes = ['person', 'section']
11 | const views = []
12 |
13 | if (previewTypes.includes(schemaType)) {
14 | views.push(
15 | S.view
16 | .component(({document}) =>
81 |
83 | )}
84 | ${email.subject}
127 |
64 |
71 | )
72 | }
73 | return (
74 |
27 |
34 | )
35 | }
36 | return Video missing URL
37 | },
38 | },
39 | preview: {
40 | select: {
41 | url: 'url',
42 | },
43 | },
44 | })
45 |
--------------------------------------------------------------------------------
/schemas/person.ts:
--------------------------------------------------------------------------------
1 | import {FiUser} from 'react-icons/fi'
2 | import {defineField, defineType} from 'sanity'
3 |
4 | export default defineType({
5 | name: 'person',
6 | title: 'People',
7 | icon: FiUser,
8 | type: 'document',
9 | fields: [
10 | defineField({
11 | name: 'name',
12 | type: 'string',
13 | }),
14 | defineField({
15 | name: 'slug',
16 | type: 'slug',
17 | options: {
18 | source: 'name',
19 | },
20 | }),
21 | defineField({
22 | name: 'image',
23 | type: 'image',
24 | options: {
25 | hotspot: true,
26 | },
27 | }),
28 | defineField({
29 | name: 'bio',
30 | type: 'minimalPortableText',
31 | }),
32 | defineField({
33 | name: 'isStaff',
34 | type: 'boolean',
35 | }),
36 | defineField({type: 'brand', name: 'brand'}),
37 | defineField({type: 'seo', name: 'seo', title: 'SEO'}),
38 | ],
39 | preview: {
40 | select: {
41 | title: 'name',
42 | isStaff: 'isStaff',
43 | media: 'image',
44 | },
45 | prepare({title, isStaff, media}) {
46 | return {
47 | title: `${title}`,
48 | subtitle: isStaff ? 'Staff' : 'Contributor',
49 | media,
50 | }
51 | },
52 | },
53 | })
54 |
--------------------------------------------------------------------------------
/schemas/podcast.ts:
--------------------------------------------------------------------------------
1 | import {FiHeadphones} from 'react-icons/fi'
2 | import {defineField, defineType} from 'sanity'
3 |
4 | export default defineType({
5 | name: 'podcast',
6 | title: 'Podcast',
7 | icon: FiHeadphones,
8 | type: 'document',
9 | fields: [
10 | defineField({
11 | name: 'title',
12 | title: 'Title',
13 | type: 'string',
14 | validation: (Rule) => Rule.required(),
15 | }),
16 | defineField({
17 | name: 'podcastEpisode',
18 | type: 'podcastEpisode',
19 | }),
20 | defineField({
21 | name: 'intro',
22 | title: 'Summary',
23 | description:
24 | 'Used by certain presentations to describe what the podcast episode is about',
25 | type: 'minimalPortableText',
26 | validation: (Rule) => Rule.required(),
27 | }),
28 | defineField({type: 'brand', name: 'brand'}),
29 | ],
30 | preview: {
31 | select: {
32 | title: 'title',
33 | },
34 | prepare({title}) {
35 | return {
36 | title,
37 | }
38 | },
39 | },
40 | })
41 |
--------------------------------------------------------------------------------
/schemas/review.ts:
--------------------------------------------------------------------------------
1 | import {FiStar} from 'react-icons/fi'
2 | import {defineField, defineType} from 'sanity'
3 |
4 | export default defineType({
5 | name: 'review',
6 | title: 'Review',
7 | icon: FiStar,
8 | type: 'document',
9 | // readOnly: true,
10 | fields: [
11 | defineField({
12 | name: 'title',
13 | title: 'Title',
14 | type: 'string',
15 | validation: (Rule) => Rule.required(),
16 | }),
17 | defineField({
18 | type: 'mainImage',
19 | name: 'mainImage',
20 | }),
21 | defineField({
22 | name: 'slug',
23 | title: 'Slug',
24 | type: 'slug',
25 | options: {source: 'title'},
26 | validation: (Rule) => Rule.required(),
27 | }),
28 | defineField({
29 | name: 'intro',
30 | title: 'Summary',
31 | description:
32 | 'Used by certain presentations to describe what the review is about',
33 | type: 'minimalPortableText',
34 | validation: (Rule) => Rule.required(),
35 | }),
36 | defineField({
37 | name: 'content',
38 | title: 'Content',
39 | type: 'portableText',
40 | }),
41 | defineField({type: 'boolean', name: 'soldOut'}),
42 | defineField({type: 'seo', name: 'seo', title: 'SEO'}),
43 | defineField({type: 'brand', name: 'brand'}),
44 | ],
45 | preview: {
46 | select: {
47 | title: 'title',
48 | media: 'mainImage.image',
49 | },
50 | prepare({title, media}) {
51 | return {
52 | title,
53 | media,
54 | }
55 | },
56 | },
57 | })
58 |
--------------------------------------------------------------------------------
/schemas/section.ts:
--------------------------------------------------------------------------------
1 | import {FiHash} from 'react-icons/fi'
2 | import {defineField, defineType} from 'sanity'
3 |
4 | export default defineType({
5 | name: 'section',
6 | title: 'Section',
7 | icon: FiHash,
8 | type: 'document',
9 | fields: [
10 | defineField({
11 | name: 'name',
12 | title: 'Name',
13 | type: 'string',
14 | }),
15 | defineField({
16 | name: 'slug',
17 | title: 'Slug',
18 | type: 'slug',
19 | options: {source: 'name'},
20 | validation: (Rule) => Rule.required(),
21 | }),
22 | defineField({type: 'brand', name: 'brand'}),
23 | defineField({type: 'seo', name: 'seo', title: 'SEO'}),
24 | ],
25 | preview: {
26 | select: {
27 | title: 'name',
28 | },
29 | prepare({title}) {
30 | return {
31 | title,
32 | media: FiHash,
33 | }
34 | },
35 | },
36 | })
37 |
--------------------------------------------------------------------------------
/schemas/siteSettings.ts:
--------------------------------------------------------------------------------
1 | import {defineArrayMember, defineField, defineType} from 'sanity'
2 |
3 | export default defineType({
4 | name: 'siteSettings',
5 | title: 'Site Settings',
6 | type: 'document',
7 | fields: [
8 | defineField({
9 | name: 'brand',
10 | type: 'brand',
11 | hidden: true,
12 | }),
13 | defineField({
14 | name: 'featured',
15 | type: 'array',
16 | of: [
17 | defineArrayMember({
18 | type: 'articleReference',
19 | }),
20 | defineArrayMember({
21 | type: 'reviewReference',
22 | }),
23 | ],
24 | }),
25 | ],
26 | preview: {
27 | prepare: () => ({title: 'Site Settings'}),
28 | },
29 | })
30 |
--------------------------------------------------------------------------------
/schemas/utils/getVariablePortableText.ts:
--------------------------------------------------------------------------------
1 | import {defineArrayMember, FieldDefinition} from 'sanity'
2 |
3 | import {rawPortableTextObj} from '../objects/portableText'
4 |
5 | //in certain contexts we may want to add blocks. this function
6 | //allows us to use the already-defined "default" Portable Text object
7 | //and make changes
8 | export const getVariablePortableText = (
9 | documentType: string,
10 | fieldName: string
11 | ): FieldDefinition => {
12 | const blocksToAdd = []
13 | if (documentType === 'newsletter') {
14 | blocksToAdd.push(
15 | defineArrayMember({
16 | type: 'articleReferences',
17 | title: 'Articles',
18 | })
19 | )
20 | }
21 | return {
22 | ...rawPortableTextObj,
23 | //@ts-ignore
24 | of: [...rawPortableTextObj.of, ...blocksToAdd],
25 | name: fieldName,
26 | }
27 | }
28 |
--------------------------------------------------------------------------------
/schemas/utils/index.ts:
--------------------------------------------------------------------------------
1 | export {getVariablePortableText} from './getVariablePortableText'
2 | export {referenceBrandFilter} from './referenceBrandHelpers'
3 |
--------------------------------------------------------------------------------
/schemas/utils/referenceBrandHelpers.ts:
--------------------------------------------------------------------------------
1 | import {ReferenceFilterResolver} from 'sanity'
2 |
3 | export const referenceBrandFilter: ReferenceFilterResolver = ({document}) => {
4 | return {
5 | filter: 'brand == $brand',
6 | params: {brand: document.brand},
7 | }
8 | }
9 |
--------------------------------------------------------------------------------
/styles/index.css:
--------------------------------------------------------------------------------
1 | /* purgecss start ignore */
2 | @tailwind base;
3 | @tailwind components;
4 | /* purgecss end ignore */
5 | @tailwind utilities;
6 |
--------------------------------------------------------------------------------
/tailwind.config.js:
--------------------------------------------------------------------------------
1 | /** @type {import('tailwindcss').Config} */
2 |
3 | const {theme} = require('@sanity/demo/tailwind')
4 |
5 | module.exports = {
6 | content: [
7 | './pages/**/*.{js,ts,jsx,tsx}',
8 | './components/**/*.{js,ts,jsx,tsx}',
9 | ],
10 | theme,
11 | plugins: [require('@tailwindcss/typography')],
12 | }
13 |
--------------------------------------------------------------------------------
/themer.d.ts:
--------------------------------------------------------------------------------
1 | declare module 'https://themer.sanity.build/api/hues?*' {
2 | interface Hue
3 | extends Omit