@@ -115,7 +154,7 @@ export default function Post(props) { ); } -export async function getStaticPaths() { +export const getStaticPaths: GetStaticPaths = async () => { const posts = await prisma.post.findMany({ where: { published: true, @@ -134,36 +173,66 @@ export async function getStaticPaths() { }, }, }); + return { paths: posts.flatMap((post) => { + if (post.site === null || post.site.subdomain === null) return []; + if (post.site.customDomain) { return [ - { params: { site: post.site.customDomain, slug: post.slug } }, - { params: { site: post.site.subdomain, slug: post.slug } }, + { + params: { + site: post.site.customDomain, + slug: post.slug, + }, + }, + { + params: { + site: post.site.subdomain, + slug: post.slug, + }, + }, ]; } else { - return { params: { site: post.site.subdomain, slug: post.slug } }; + return { + params: { + site: post.site.subdomain, + slug: post.slug, + }, + }; } }), fallback: true, }; -} +}; -export async function getStaticProps({ params: { site, slug } }) { - let constraint = { - site: { - subdomain: site, - }, +export const getStaticProps: GetStaticProps = async ({ + params, +}) => { + if (!params) throw new Error("No path parameters found"); + + const { site, slug } = params; + + let filter: { + subdomain?: string; + customDomain?: string; + } = { + subdomain: site, }; + if (site.includes(".")) { - constraint = { - site: { - customDomain: site, - }, + filter = { + customDomain: site, }; } - let data = await prisma.post.findFirst({ - where: { ...constraint, slug: slug }, + + const data = (await prisma.post.findFirst({ + where: { + site: { + ...filter, + }, + slug, + }, include: { site: { include: { @@ -171,53 +240,60 @@ export async function getStaticProps({ params: { site, slug } }) { }, }, }, - }); - - if (!data) { - return { notFound: true, revalidate: 10 }; - } + })) as _SiteSlugData | null; - data.mdxSource = await getMdxSource(data.content); + if (!data) return { notFound: true, revalidate: 10 }; - const adjacentPosts = await prisma.post.findMany({ - where: { - ...constraint, - published: true, - NOT: { - id: data.id, + const [mdxSource, adjacentPosts] = await Promise.all([ + getMdxSource(data.content!), + prisma.post.findMany({ + where: { + site: { + ...filter, + }, + published: true, + NOT: { + id: data.id, + }, }, - }, - select: { - slug: true, - title: true, - createdAt: true, - description: true, - image: true, - imageBlurhash: true, - }, - }); + select: { + slug: true, + title: true, + createdAt: true, + description: true, + image: true, + imageBlurhash: true, + }, + }), + ]); return { props: { - stringifiedData: JSON.stringify(data), + stringifiedData: JSON.stringify({ + ...data, + mdxSource, + }), stringifiedAdjacentPosts: JSON.stringify(adjacentPosts), }, revalidate: 3600, }; -} +}; -async function getMdxSource(postContents) { +async function getMdxSource(postContents: string) { // Use remark plugins to convert markdown into HTML string const processedContent = await remark() - .use(remarkMdx) // native remark plugin that parses markdown into MDX - .use(replaceTweets) // replaces tweets with static component - .use(() => replaceExamples(prisma)) // replaces examples with component (only for demo.vercel.pub) + // Native remark plugin that parses markdown into MDX + .use(remarkMdx) + // Replaces tweets with static component + .use(replaceTweets) + // Replaces examples with component (only for demo.vercel.pub) + .use(() => replaceExamples(prisma)) .process(postContents); // Convert converted html to string format const contentHtml = String(processedContent); - // serialize the content string into MDX + // Serialize the content string into MDX const mdxSource = await serialize(contentHtml); return mdxSource; diff --git a/pages/_sites/[site]/index.js b/pages/_sites/[site]/index.tsx similarity index 60% rename from pages/_sites/[site]/index.js rename to pages/_sites/[site]/index.tsx index 814adff..0622503 100644 --- a/pages/_sites/[site]/index.js +++ b/pages/_sites/[site]/index.tsx @@ -7,41 +7,57 @@ import Loader from "@/components/sites/Loader"; import Date from "@/components/Date"; import prisma from "@/lib/prisma"; -export default function Index(props) { +import type { GetStaticPaths, GetStaticProps } from "next"; +import type { _SiteData, Meta } from "@/types"; +import type { ParsedUrlQuery } from "querystring"; + +interface PathProps extends ParsedUrlQuery { + site: string; +} + +interface IndexProps { + stringifiedData: string; +} + +export default function Index({ stringifiedData }: IndexProps) { const router = useRouter(); - if (router.isFallback) { - return ; - } + if (router.isFallback) return ; - const data = JSON.parse(props.data); + const data = JSON.parse(stringifiedData) as _SiteData; const meta = { title: data.name, description: data.description, + logo: "/logo.png", + ogImage: data.image, ogUrl: data.customDomain ? data.customDomain : `https://${data.subdomain}.vercel.pub`, - ogImage: data.image, - logo: "/logo.png", - }; + } as Meta; return ( - + {data.posts.length > 0 ? ( - + {data.posts[0].image ? ( + + ) : ( + + ? + + )} @@ -52,18 +68,25 @@ export default function Index(props) { - + {data.user?.image ? ( + + ) : ( + + ? + + )} - {data.user.name} + {data.user?.name} - + @@ -99,54 +122,67 @@ export default function Index(props) { ); } -export async function getStaticPaths() { - const subdomains = await prisma.site.findMany({ - // you can remove this if you want to generate all sites at build time - where: { - subdomain: "demo", - }, - select: { - subdomain: true, - }, - }); - const customDomains = await prisma.site.findMany({ - where: { - NOT: { - customDomain: null, - }, +export const getStaticPaths: GetStaticPaths = async () => { + const [subdomains, customDomains] = await Promise.all([ + prisma.site.findMany({ // you can remove this if you want to generate all sites at build time - customDomain: "platformize.co", - }, - select: { - customDomain: true, - }, - }); - const allPaths = [ - ...subdomains.map((subdomain) => { - return subdomain.subdomain; + where: { + subdomain: "demo", + }, + select: { + subdomain: true, + }, }), - ...customDomains.map((customDomain) => { - return customDomain.customDomain; + prisma.site.findMany({ + where: { + NOT: { + customDomain: null, + }, + // you can remove this if you want to generate all sites at build time + customDomain: "platformize.co", + }, + select: { + customDomain: true, + }, }), - ]; + ]); + + const allPaths = [ + ...subdomains.map(({ subdomain }) => subdomain), + ...customDomains.map(({ customDomain }) => customDomain), + ].filter((path) => path) as Array; + return { - paths: allPaths.map((path) => { - return { params: { site: path } }; - }), + paths: allPaths.map((path) => ({ + params: { + site: path, + }, + })), fallback: true, }; -} +}; + +export const getStaticProps: GetStaticProps = async ({ + params, +}) => { + if (!params) throw new Error("No path parameters found"); + + const { site } = params; -export async function getStaticProps({ params: { site } }) { - let filter = { + let filter: { + subdomain?: string; + customDomain?: string; + } = { subdomain: site, }; + if (site.includes(".")) { filter = { customDomain: site, }; } - const data = await prisma.site.findUnique({ + + const data = (await prisma.site.findUnique({ where: filter, include: { user: true, @@ -161,16 +197,14 @@ export async function getStaticProps({ params: { site } }) { ], }, }, - }); + })) as _SiteData; - if (!data) { - return { notFound: true, revalidate: 10 }; - } + if (!data) return { notFound: true, revalidate: 10 }; return { props: { - data: JSON.stringify(data), + stringifiedData: JSON.stringify(data), }, revalidate: 3600, }; -} +}; diff --git a/pages/api/add-domain.js b/pages/api/add-domain.js deleted file mode 100644 index 9c35def..0000000 --- a/pages/api/add-domain.js +++ /dev/null @@ -1,36 +0,0 @@ -import prisma from "@/lib/prisma"; - -export default async function addDomain(req, res) { - const { domain, siteId } = req.query; - - const response = await fetch( - `https://api.vercel.com/v8/projects/${process.env.VERCEL_PROJECT_ID}/domains?teamId=${process.env.VERCEL_TEAM_ID}`, - { - body: `{\n "name": "${domain}"\n}`, - headers: { - Authorization: `Bearer ${process.env.AUTH_BEARER_TOKEN}`, - "Content-Type": "application/json", - }, - method: "POST", - } - ); - - const data = await response.json(); - - if (data.error?.code == "forbidden") { - res.status(403).end(); // domain is already owned by another team but you can request delegation to access it - } else if (data.error?.code == "domain_taken") { - res.status(409).end(); // domain is already being used by a different project - } else { - // domain is successfully added - await prisma.site.update({ - where: { - id: siteId, - }, - data: { - customDomain: domain, - }, - }); - res.status(200).end(); - } -} diff --git a/pages/api/auth/[...nextauth].js b/pages/api/auth/[...nextauth].ts similarity index 83% rename from pages/api/auth/[...nextauth].js rename to pages/api/auth/[...nextauth].ts index 4f78e8f..bfe91b4 100644 --- a/pages/api/auth/[...nextauth].js +++ b/pages/api/auth/[...nextauth].ts @@ -3,6 +3,11 @@ import GitHubProvider from "next-auth/providers/github"; import { PrismaAdapter } from "@next-auth/prisma-adapter"; import prisma from "@/lib/prisma"; +import type { NextAuthOptions } from "next-auth"; + +if (!process.env.GITHUB_ID || !process.env.GITHUB_SECRET) + throw new Error("Failed to initialize Github authentication"); + export const authOptions = { providers: [ GitHubProvider({ @@ -36,6 +41,6 @@ export const authOptions = { }, }), }, -}; +} as NextAuthOptions; export default NextAuth(authOptions); diff --git a/pages/api/blurhash.js b/pages/api/blurhash.js deleted file mode 100644 index 1f71133..0000000 --- a/pages/api/blurhash.js +++ /dev/null @@ -1,8 +0,0 @@ -import { getPlaiceholder } from "plaiceholder"; - -export default async function blurhash(req, res) { - const { url } = req.query; - const { blurhash } = await getPlaiceholder(url); - - res.status(200).json(blurhash); -} diff --git a/pages/api/blurhash.ts b/pages/api/blurhash.ts new file mode 100644 index 0000000..76e6151 --- /dev/null +++ b/pages/api/blurhash.ts @@ -0,0 +1,30 @@ +import { getPlaiceholder } from "plaiceholder"; +import { HttpMethod } from "@/types"; + +import type { NextApiRequest, NextApiResponse } from "next"; + +export default async function blurhash( + req: NextApiRequest, + res: NextApiResponse +) { + if (req.method !== HttpMethod.GET) { + res.setHeader("Allow", [HttpMethod.GET]); + return res.status(405).end(`Method ${req.method} Not Allowed`); + } + + const { url } = req.query; + + if (Array.isArray(url)) + return res + .status(400) + .end("Bad request. URL parameter cannot be an array of urls."); + + try { + const { blurhash } = await getPlaiceholder(url); + + res.status(200).json(blurhash); + } catch (error) { + console.error(error); + res.status(500).end(error); + } +} diff --git a/pages/api/check-domain.js b/pages/api/check-domain.js deleted file mode 100644 index 2df6d82..0000000 --- a/pages/api/check-domain.js +++ /dev/null @@ -1,20 +0,0 @@ -export default async function checkDomain(req, res) { - const { domain } = req.query; - - const response = await fetch( - `https://api.vercel.com/v6/domains/${domain}/config?teamId=${process.env.VERCEL_TEAM_ID}`, - { - method: "GET", - headers: { - Authorization: `Bearer ${process.env.AUTH_BEARER_TOKEN}`, - "Content-Type": "application/json", - }, - } - ); - - const data = await response.json(); - - const valid = data?.configuredBy ? true : false; - - res.status(200).json(valid); -} diff --git a/pages/api/check-subdomain.js b/pages/api/check-subdomain.js deleted file mode 100644 index ae1a793..0000000 --- a/pages/api/check-subdomain.js +++ /dev/null @@ -1,16 +0,0 @@ -import prisma from "@/lib/prisma"; - -export default async function checkSubdomain(req, res) { - const { subdomain } = req.query; - const sub = subdomain.replace(/[^a-zA-Z0-9/-]+/g, ""); - - const data = await prisma.site.findUnique({ - where: { - subdomain: sub, - }, - }); - - const available = data === null && sub.length !== 0; - - res.status(200).json(available); -} diff --git a/pages/api/domain/check.ts b/pages/api/domain/check.ts new file mode 100644 index 0000000..dae1bdc --- /dev/null +++ b/pages/api/domain/check.ts @@ -0,0 +1,54 @@ +import prisma from "@/lib/prisma"; +import { HttpMethod } from "@/types"; + +import type { NextApiRequest, NextApiResponse } from "next"; + +export default async function post(req: NextApiRequest, res: NextApiResponse) { + if (req.method !== HttpMethod.GET) { + res.setHeader("Allow", [HttpMethod.GET]); + return res.status(405).end(`Method ${req.method} Not Allowed`); + } + + const { domain, subdomain = false } = req.query; + + if (Array.isArray(domain)) + return res + .status(400) + .end("Bad request. domain parameter cannot be an array."); + + try { + if (subdomain) { + const sub = domain.replace(/[^a-zA-Z0-9/-]+/g, ""); + + const data = await prisma.site.findUnique({ + where: { + subdomain: sub, + }, + }); + + const available = data === null && sub.length !== 0; + + return res.status(200).json(available); + } + + const response = await fetch( + `https://api.vercel.com/v6/domains/${domain}/config?teamId=${process.env.VERCEL_TEAM_ID}`, + { + method: HttpMethod.GET, + headers: { + Authorization: `Bearer ${process.env.AUTH_BEARER_TOKEN}`, + "Content-Type": "application/json", + }, + } + ); + + const data = await response.json(); + + const valid = data?.configuredBy ? true : false; + + return res.status(200).json(valid); + } catch (error) { + console.error(error); + return res.status(500).end(error); + } +} diff --git a/pages/api/domain/index.ts b/pages/api/domain/index.ts new file mode 100644 index 0000000..4765c12 --- /dev/null +++ b/pages/api/domain/index.ts @@ -0,0 +1,25 @@ +import { createDomain, deleteDomain } from "@/lib/api"; +import { getServerSession } from "next-auth/next"; + +import { authOptions } from "../auth/[...nextauth]"; +import { HttpMethod } from "@/types"; + +import type { NextApiRequest, NextApiResponse } from "next"; + +export default async function domain( + req: NextApiRequest, + res: NextApiResponse +) { + const session = await getServerSession({ req, res }, authOptions); + if (!session) return res.status(401).end(); + + switch (req.method) { + case HttpMethod.POST: + return createDomain(req, res); + case HttpMethod.DELETE: + return deleteDomain(req, res); + default: + res.setHeader("Allow", [HttpMethod.POST, HttpMethod.DELETE]); + return res.status(405).end(`Method ${req.method} Not Allowed`); + } +} diff --git a/pages/api/post.js b/pages/api/post.js deleted file mode 100644 index 2e5915d..0000000 --- a/pages/api/post.js +++ /dev/null @@ -1,138 +0,0 @@ -import prisma from "@/lib/prisma"; -import { getServerSession } from "next-auth/next"; -import { authOptions } from "./auth/[...nextauth]"; -import { revalidate } from "@/lib/revalidate"; - -export default async function post(req, res) { - const session = await getServerSession({ req, res }, authOptions); - if (!session) { - res.status(401).end(); - return; - } - - switch (req.method) { - case "GET": { - const { postId, siteId, published } = req.query; - if (postId) { - // get individual post - const post = await prisma.post.findFirst({ - where: { - id: postId, - site: { - user: { - id: session.user.id, - }, - }, - }, - include: { - site: true, - }, - }); - res.status(200).json(post); - } else { - // get all posts - const site = await prisma.site.findFirst({ - where: { - id: siteId, - user: { - id: session.user.id, - }, - }, - }); - const posts = !site - ? [] - : await prisma.post.findMany({ - where: { - site: { - id: siteId, - }, - published: JSON.parse(published), - }, - orderBy: { - createdAt: "desc", - }, - }); - res.status(200).json({ posts, site }); - } - return; - } - case "POST": { - // create post - const { siteId } = req.query; - const response = await prisma.post.create({ - data: { - image: `/placeholder.png`, - imageBlurhash: - "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAoJJREFUWEfFl4lu4zAMRO3cx/9/au6reMaOdkxTTl0grQFCRoqaT+SQotq2bV9N8rRt28xms87m83l553eZ/9vr9Wpkz+ezkT0ej+6dv1X81AFw7M4FBACPVn2c1Z3zLgDeJwHgeLFYdAARYioAEAKJEG2WAjl3gCwNYymQQ9b7/V4spmIAwO6Wy2VnAMikBWlDURBELf8CuN1uHQSrPwMAHK5WqwFELQ01AIXdAa7XawfAb3p6AOwK5+v1ugAoEq4FRSFLgavfQ49jAGQpAE5wjgGCeRrGdBArwHOPcwFcLpcGU1X0IsBuN5tNgYhaiFFwHTiAwq8I+O5xfj6fOz38K+X/fYAdb7fbAgFAjIJ6Aav3AYlQ6nfnDoDz0+lUxNiLALvf7XaDNGQ6GANQBKR85V27B4D3QQRw7hGIYlQKWGM79hSweyCUe1blXhEAogfABwHAXAcqSYkxCtHLUK3XBajSc4Dj8dilAeiSAgD2+30BAEKV4GKcAuDqB4TdYwBgPQByCgApUBoE4EJUGvxUjF3Q69/zLw3g/HA45ABKgdIQu+JPIyDnisCfAxAFNFM0EFNQ64gfS0EUoQP8ighrZSjn3oziZEQpauyKbfjbZchHUL/3AS/Dd30gAkxuRACgfO+EWQW8qwI1o+wseNuKcQiESjALvwNoMI0TcRzD4lFcPYwIM+JTF5x6HOs8yI7jeB5oKhpMRFH9UwaSCDB2Jmg4rc6E2TT0biIaG0rQhNqyhpHBcayTTSXH6vcDL7/sdqRK8LkwTsU499E8vRcAojHcZ4AxABdilgrp4lsXk8oVqgwh7+6H3phqd8J0Kk4vbx/+sZqCD/vNLya/5dT9fAH8g1WdNGgwbQAAAABJRU5ErkJggg==", - site: { - connect: { - id: siteId, - }, - }, - }, - }); - res.status(200).json({ postId: response.id }); - return; - } - case "DELETE": { - // delete post - const { postId } = req.query; - const response = await prisma.post.delete({ - where: { - id: postId, - }, - include: { - site: { - select: { subdomain: true, customDomain: true }, - }, - }, - }); - await revalidate( - `https://${response.site.subdomain}.vercel.pub`, - response.slug - ); // revalidate for subdomain - if (response.site.customDomain) - await revalidate( - `https://${response.site.customDomain}`, - response.slug - ); // revalidate for custom domain - res.status(200).end(); - return; - } - case "PUT": { - // publish post, update post content, update post settings - const { - id, - title, - description, - content, - slug, - image, - imageBlurhash, - published, - subdomain, - customDomain, - } = req.body; - const post = await prisma.post.update({ - where: { - id: id, - }, - data: { - title, - description, - content, - slug, - image, - imageBlurhash, - published, - }, - }); - if (subdomain) await revalidate(`https://${subdomain}.vercel.pub`, slug); // revalidate for subdomain - if (customDomain) await revalidate(`https://${customDomain}`, slug); // revalidate for custom domain - res.status(200).json(post); - } - default: - res.status(405).end(); - return; - } -} diff --git a/pages/api/post.ts b/pages/api/post.ts new file mode 100644 index 0000000..230f3b1 --- /dev/null +++ b/pages/api/post.ts @@ -0,0 +1,31 @@ +import { createPost, deletePost, getPost, updatePost } from "@/lib/api"; +import { getServerSession } from "next-auth/next"; + +import { authOptions } from "./auth/[...nextauth]"; +import { HttpMethod } from "@/types"; + +import type { NextApiRequest, NextApiResponse } from "next"; + +export default async function post(req: NextApiRequest, res: NextApiResponse) { + const session = await getServerSession({ req, res }, authOptions); + if (!session) return res.status(401).end(); + + switch (req.method) { + case HttpMethod.GET: + return getPost(req, res, session); + case HttpMethod.POST: + return createPost(req, res); + case HttpMethod.DELETE: + return deletePost(req, res); + case HttpMethod.PUT: + return updatePost(req, res); + default: + res.setHeader("Allow", [ + HttpMethod.GET, + HttpMethod.POST, + HttpMethod.DELETE, + HttpMethod.PUT, + ]); + return res.status(405).end(`Method ${req.method} Not Allowed`); + } +} diff --git a/pages/api/remove-domain.js b/pages/api/remove-domain.js deleted file mode 100644 index 0c8b851..0000000 --- a/pages/api/remove-domain.js +++ /dev/null @@ -1,28 +0,0 @@ -import prisma from "@/lib/prisma"; - -export default async function removeDomain(req, res) { - const { domain, siteId } = req.query; - - const response = await fetch( - `https://api.vercel.com/v8/projects/${process.env.VERCEL_PROJECT_ID}/domains/${domain}?teamId=${process.env.VERCEL_TEAM_ID}`, - { - headers: { - Authorization: `Bearer ${process.env.AUTH_BEARER_TOKEN}`, - }, - method: "DELETE", - } - ); - - await response.json(); - - await prisma.site.update({ - where: { - id: siteId, - }, - data: { - customDomain: null, - }, - }); - - res.status(200).end(); -} diff --git a/pages/api/request-delegation.js b/pages/api/request-delegation.js deleted file mode 100644 index 8e4d4d6..0000000 --- a/pages/api/request-delegation.js +++ /dev/null @@ -1,20 +0,0 @@ -export default async function requestDelegation(req, res) { - const { domain } = req.query; - - const response = await fetch( - `https://api.vercel.com/v6/domains/${domain}/request-delegation?teamId=${process.env.VERCEL_TEAM_ID}`, - { - headers: { - Authorization: `Bearer ${process.env.AUTH_BEARER_TOKEN}`, - "Content-Type": "application/json", - }, - method: "POST", - } - ); - - if (response.ok) { - res.status(200).end(); - } else { - res.status(403).end(); - } -} diff --git a/pages/api/request-delegation.ts b/pages/api/request-delegation.ts new file mode 100644 index 0000000..ab00b60 --- /dev/null +++ b/pages/api/request-delegation.ts @@ -0,0 +1,28 @@ +import { HttpMethod } from "@/types"; + +import type { NextApiRequest, NextApiResponse } from "next"; + +export default async function requestDelegation( + req: NextApiRequest, + res: NextApiResponse +) { + const { domain } = req.query; + + try { + const response = await fetch( + `https://api.vercel.com/v6/domains/${domain}/request-delegation?teamId=${process.env.VERCEL_TEAM_ID}`, + { + headers: { + Authorization: `Bearer ${process.env.AUTH_BEARER_TOKEN}`, + "Content-Type": "application/json", + }, + method: HttpMethod.POST, + } + ); + + res.status(response.ok ? 200 : 403).end(); + } catch (error) { + console.error(error); + res.status(500).end(error); + } +} diff --git a/pages/api/revalidate.js b/pages/api/revalidate.js deleted file mode 100644 index f9ac0bf..0000000 --- a/pages/api/revalidate.js +++ /dev/null @@ -1,10 +0,0 @@ -export default async function handler(req, res) { - const urlPath = req.body.urlPath; - try { - await res.unstable_revalidate(urlPath); - } catch { - res.status(500); - return res.json({ message: `Failed to revalidate "${urlPath}"` }); - } - return res.json({ message: "OK" }); -} diff --git a/pages/api/revalidate.ts b/pages/api/revalidate.ts new file mode 100644 index 0000000..64a7403 --- /dev/null +++ b/pages/api/revalidate.ts @@ -0,0 +1,20 @@ +import type { NextApiRequest, NextApiResponse } from "next"; + +export default async function handler( + req: NextApiRequest, + res: NextApiResponse +) { + const { urlPath } = req.body; + + try { + await res.unstable_revalidate(urlPath); + + res.status(200).json({ + message: "OK", + }); + } catch (error) { + res.status(500).json({ + message: `Failed to revalidate "${urlPath}"`, + }); + } +} diff --git a/pages/api/save-settings.js b/pages/api/save-settings.js deleted file mode 100644 index f9604fd..0000000 --- a/pages/api/save-settings.js +++ /dev/null @@ -1,17 +0,0 @@ -import prisma from "@/lib/prisma"; - -export default async function SaveSiteSettings(req, res) { - const data = JSON.parse(req.body); - const response = await prisma.user.update({ - where: { - id: data.id, - }, - data: { - name: data.name, - email: data.email, - image: data.image, - }, - }); - - res.status(200).json(response); -} diff --git a/pages/api/save-settings.ts b/pages/api/save-settings.ts new file mode 100644 index 0000000..4223359 --- /dev/null +++ b/pages/api/save-settings.ts @@ -0,0 +1,34 @@ +import prisma from "@/lib/prisma"; +import { HttpMethod } from "@/types"; + +import type { NextApiRequest, NextApiResponse } from "next"; + +export default async function SaveSiteSettings( + req: NextApiRequest, + res: NextApiResponse +) { + if (req.method !== HttpMethod.POST) { + res.setHeader("Allow", [HttpMethod.POST]); + return res.status(405).end(`Method ${req.method} Not Allowed`); + } + + const data = JSON.parse(req.body); + + try { + const response = await prisma.user.update({ + where: { + id: data.id, + }, + data: { + name: data.name, + email: data.email, + image: data.image, + }, + }); + + res.status(200).json(response); + } catch (error) { + console.error(error); + res.status(500).end(error); + } +} diff --git a/pages/api/site.js b/pages/api/site.js deleted file mode 100644 index 566fdd6..0000000 --- a/pages/api/site.js +++ /dev/null @@ -1,120 +0,0 @@ -import prisma from "@/lib/prisma"; -import { getServerSession } from "next-auth/next"; -import { authOptions } from "./auth/[...nextauth]"; - -export default async function site(req, res) { - const session = await getServerSession({ req, res }, authOptions); - if (!session) { - res.status(401).end(); - return; - } - - switch (req.method) { - case "GET": { - const { siteId } = req.query; - if (siteId) { - // get individual site - const { siteId } = req.query; - const settings = await prisma.site.findFirst({ - where: { - id: siteId, - user: { - id: session.user.id, - }, - }, - }); - res.status(200).json(settings); - } else { - // get all sites - const sites = await prisma.site.findMany({ - where: { - user: { - id: session.user.id, - }, - }, - }); - res.status(200).json(sites); - } - return; - } - case "POST": { - // create site - const { name, subdomain, description, userId } = req.body; - const sub = subdomain.replace(/[^a-zA-Z0-9/-]+/g, ""); - - const response = await prisma.site.create({ - data: { - name: name, - description: description, - subdomain: sub.length > 0 ? sub : cuid(), - logo: "/logo.png", - image: `/placeholder.png`, - imageBlurhash: - "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAoJJREFUWEfFl4lu4zAMRO3cx/9/au6reMaOdkxTTl0grQFCRoqaT+SQotq2bV9N8rRt28xms87m83l553eZ/9vr9Wpkz+ezkT0ej+6dv1X81AFw7M4FBACPVn2c1Z3zLgDeJwHgeLFYdAARYioAEAKJEG2WAjl3gCwNYymQQ9b7/V4spmIAwO6Wy2VnAMikBWlDURBELf8CuN1uHQSrPwMAHK5WqwFELQ01AIXdAa7XawfAb3p6AOwK5+v1ugAoEq4FRSFLgavfQ49jAGQpAE5wjgGCeRrGdBArwHOPcwFcLpcGU1X0IsBuN5tNgYhaiFFwHTiAwq8I+O5xfj6fOz38K+X/fYAdb7fbAgFAjIJ6Aav3AYlQ6nfnDoDz0+lUxNiLALvf7XaDNGQ6GANQBKR85V27B4D3QQRw7hGIYlQKWGM79hSweyCUe1blXhEAogfABwHAXAcqSYkxCtHLUK3XBajSc4Dj8dilAeiSAgD2+30BAEKV4GKcAuDqB4TdYwBgPQByCgApUBoE4EJUGvxUjF3Q69/zLw3g/HA45ABKgdIQu+JPIyDnisCfAxAFNFM0EFNQ64gfS0EUoQP8ighrZSjn3oziZEQpauyKbfjbZchHUL/3AS/Dd30gAkxuRACgfO+EWQW8qwI1o+wseNuKcQiESjALvwNoMI0TcRzD4lFcPYwIM+JTF5x6HOs8yI7jeB5oKhpMRFH9UwaSCDB2Jmg4rc6E2TT0biIaG0rQhNqyhpHBcayTTSXH6vcDL7/sdqRK8LkwTsU499E8vRcAojHcZ4AxABdilgrp4lsXk8oVqgwh7+6H3phqd8J0Kk4vbx/+sZqCD/vNLya/5dT9fAH8g1WdNGgwbQAAAABJRU5ErkJggg==", - user: { - connect: { - id: userId, - }, - }, - }, - }); - res.status(200).json({ siteId: response.id }); - return; - } - case "DELETE": { - // delete site - const { siteId } = req.query; - await prisma.$transaction([ - prisma.post.deleteMany({ - where: { - site: { - id: siteId, - }, - }, - }), - prisma.site.delete({ - where: { - id: siteId, - }, - }), - ]); - res.status(200).end(); - return; - } - case "PUT": { - // save site settings - let { - id, - currentSubdomain, - name, - description, - subdomain, - image, - imageBlurhash, - } = req.body; - - // processing subdomain - const sub = subdomain.replace(/[^a-zA-Z0-9/-]+/g, ""); - subdomain = sub.length > 0 ? sub : currentSubdomain; - - // update site settings - const response = await prisma.site.update({ - where: { - id: id, - }, - data: { - name, - description, - subdomain, - image, - imageBlurhash, - }, - }); - - res.status(200).json(response); - } - default: - res.status(405).end(); - return; - } -} diff --git a/pages/api/site.ts b/pages/api/site.ts new file mode 100644 index 0000000..410a7ab --- /dev/null +++ b/pages/api/site.ts @@ -0,0 +1,31 @@ +import { createSite, deleteSite, getSite, updateSite } from "@/lib/api"; +import { getServerSession } from "next-auth/next"; + +import { authOptions } from "./auth/[...nextauth]"; +import { HttpMethod } from "@/types"; + +import type { NextApiRequest, NextApiResponse } from "next"; + +export default async function site(req: NextApiRequest, res: NextApiResponse) { + const session = await getServerSession({ req, res }, authOptions); + if (!session) return res.status(401).end(); + + switch (req.method) { + case HttpMethod.GET: + return getSite(req, res, session); + case HttpMethod.POST: + return createSite(req, res); + case HttpMethod.DELETE: + return deleteSite(req, res); + case HttpMethod.PUT: + return updateSite(req, res); + default: + res.setHeader("Allow", [ + HttpMethod.GET, + HttpMethod.POST, + HttpMethod.DELETE, + HttpMethod.PUT, + ]); + return res.status(405).end(`Method ${req.method} Not Allowed`); + } +} diff --git a/pages/app/index.js b/pages/app/index.tsx similarity index 77% rename from pages/app/index.js rename to pages/app/index.tsx index 8af8558..6a5740a 100644 --- a/pages/app/index.js +++ b/pages/app/index.tsx @@ -1,4 +1,4 @@ -import { useState, useEffect } from "react"; +import { useState, useEffect, useRef } from "react"; import Layout from "@/components/app/Layout"; import BlurImage from "@/components/BlurImage"; import Modal from "@/components/Modal"; @@ -8,28 +8,38 @@ import { useSession } from "next-auth/react"; import { useRouter } from "next/router"; import useSWR from "swr"; import { useDebounce } from "use-debounce"; +import { fetcher } from "@/lib/fetcher"; +import { HttpMethod } from "@/types"; -const fetcher = (...args) => fetch(...args).then((res) => res.json()); +import type { FormEvent } from "react"; +import type { Site } from "@prisma/client"; export default function AppIndex() { - const [showModal, setShowModal] = useState(false); - const [creatingSite, setCreatingSite] = useState(false); - const [subdomain, setSubdomain] = useState(""); + const [showModal, setShowModal] = useState(false); + const [creatingSite, setCreatingSite] = useState(false); + const [subdomain, setSubdomain] = useState(""); const [debouncedSubdomain] = useDebounce(subdomain, 1500); - const [error, setError] = useState(null); + const [error, setError] = useState(null); - useEffect(async () => { - if (debouncedSubdomain.length > 0) { - const response = await fetch( - `/api/check-subdomain?subdomain=${debouncedSubdomain}` - ); - const available = await response.json(); - if (available) { - setError(null); - } else { - setError(`${debouncedSubdomain}.vercel.pub`); + const siteNameRef = useRef(null); + const siteSubdomainRef = useRef(null); + const siteDescriptionRef = useRef(null); + + useEffect(() => { + async function checkSubDomain() { + if (debouncedSubdomain.length > 0) { + const response = await fetch( + `/api/domain/check?domain=${debouncedSubdomain}&subdomain=1` + ); + const available = await response.json(); + if (available) { + setError(null); + } else { + setError(`${debouncedSubdomain}.vercel.pub`); + } } } + checkSubDomain(); }, [debouncedSubdomain]); const router = useRouter(); @@ -37,19 +47,22 @@ export default function AppIndex() { const { data: session } = useSession(); const sessionId = session?.user?.id; - const { data: sites } = useSWR(sessionId && `/api/site`, fetcher); + const { data: sites } = useSWR>( + sessionId && `/api/site`, + fetcher + ); - async function createSite(e) { + async function createSite(e: FormEvent) { const res = await fetch("/api/site", { - method: "POST", + method: HttpMethod.POST, headers: { "Content-Type": "application/json", }, body: JSON.stringify({ userId: sessionId, - name: e.target.name.value, - subdomain: e.target.subdomain.value, - description: e.target.description.value, + name: siteNameRef.current?.value, + subdomain: siteSubdomainRef.current?.value, + description: siteDescriptionRef.current?.value, }), }); if (res.ok) { @@ -75,19 +88,21 @@ export default function AppIndex() { 📌 🪧 setSubdomain(siteSubdomainRef.current!.value)} placeholder="Subdomain" - onInput={(e) => setSubdomain(e.target.value)} + ref={siteSubdomainRef} + type="text" /> .vercel.pub @@ -102,11 +117,12 @@ export default function AppIndex() { ✍️ @@ -124,7 +140,7 @@ export default function AppIndex() { - + {site.image ? ( + + ) : ( + + ? + + )} {site.name} diff --git a/pages/app/login.js b/pages/app/login.tsx similarity index 96% rename from pages/app/login.js rename to pages/app/login.tsx index a9cef5a..db53625 100644 --- a/pages/app/login.js +++ b/pages/app/login.tsx @@ -13,10 +13,12 @@ const description = export default function Login() { const [loading, setLoading] = useState(false); - //Get error message added by next/auth in URL. - const { error } = useRouter().query; + // Get error message added by next/auth in URL. + const { query } = useRouter(); + const { error } = query; + useEffect(() => { - const errorMessage = Array.isArray(error) ? error.pop(error) : error; + const errorMessage = Array.isArray(error) ? error.pop() : error; errorMessage && toast.error(errorMessage); }, [error]); diff --git a/pages/app/post/[id]/index.js b/pages/app/post/[id]/index.tsx similarity index 60% rename from pages/app/post/[id]/index.js rename to pages/app/post/[id]/index.tsx index eac5f79..60b4934 100644 --- a/pages/app/post/[id]/index.js +++ b/pages/app/post/[id]/index.tsx @@ -1,28 +1,70 @@ -import Layout from "@/components/app/Layout"; +import TextareaAutosize from "react-textarea-autosize"; +import toast from "react-hot-toast"; import useSWR, { mutate } from "swr"; import { useDebounce } from "use-debounce"; -import { useState, useEffect } from "react"; -import TextareaAutosize from "react-textarea-autosize"; import { useRouter } from "next/router"; -import LoadingDots from "@/components/app/loading-dots"; +import { useState, useEffect } from "react"; + +import Layout from "@/components/app/Layout"; import Loader from "@/components/app/Loader"; +import LoadingDots from "@/components/app/loading-dots"; +import { fetcher } from "@/lib/fetcher"; +import { HttpMethod } from "@/types"; -const fetcher = (...args) => fetch(...args).then((res) => res.json()); +import type { ChangeEvent } from "react"; + +import type { WithSitePost } from "@/types"; + +interface PostData { + title: string; + description: string; + content: string; +} + +const CONTENT_PLACEHOLDER = `Write some content. Markdown supported: + +# A H1 header + +## A H2 header + +Fun fact: You embed tweets by pasting the tweet URL in a new line: + +https://twitter.com/nextjs/status/1468044361082580995 + +Paragraphs are separated by a blank line. + +2nd paragraph. *Italic*, and **bold**. Itemized lists look like: + + * this one + * that one + * the other one + +Ordered lists look like: + + 1. first item + 2. second item + 3. third item + +> Block quotes are written like so. +> +> They can span multiple paragraphs, +> if you like. + + `; export default function Post() { const router = useRouter(); - const { id } = router.query; - const postId = id; - const { data: post, isValidating } = useSWR( + // TODO: Undefined check redirects to error + const { id: postId } = router.query; + + const { data: post, isValidating } = useSWR( router.isReady && `/api/post?postId=${postId}`, fetcher, { - revalidateOnFocus: false, dedupingInterval: 1000, - onError: () => { - router.push("/"); - }, + onError: () => router.push("/"), + revalidateOnFocus: false, } ); @@ -39,19 +81,21 @@ export default function Post() { : "Saving changes..." ); - const [data, setData] = useState({ + const [data, setData] = useState({ title: "", description: "", content: "", }); + useEffect(() => { if (post) setData({ - title: post.title, - description: post.description, - content: post.content, + title: post.title ?? "", + description: post.description ?? "", + content: post.content ?? "", }); }, [post]); + const [debouncedData] = useDebounce(data, 1000); useEffect(() => { @@ -68,73 +112,91 @@ export default function Post() { }, [publishing, data]); useEffect(() => { - const clickedSave = (e) => { + function clickedSave(e: KeyboardEvent) { let charCode = String.fromCharCode(e.which).toLowerCase(); + if ((e.ctrlKey || e.metaKey) && charCode === "s") { e.preventDefault(); saveChanges(data); } - }; + } + window.addEventListener("keydown", clickedSave); - return () => { - window.removeEventListener("keydown", clickedSave); - }; + + return () => window.removeEventListener("keydown", clickedSave); }, [data]); - async function saveChanges(data) { + async function saveChanges(data: PostData) { setSavedState("Saving changes..."); - const response = await fetch("/api/post", { - method: "PUT", - headers: { - "Content-Type": "application/json", - }, - body: JSON.stringify({ - id: postId, - title: data.title, - description: data.description, - content: data.content, - }), - }); - if (response.ok) { - const responseData = await response.json(); - setSavedState( - `Last save ${Intl.DateTimeFormat("en", { month: "short" }).format( - new Date(responseData.updatedAt) - )} ${Intl.DateTimeFormat("en", { day: "2-digit" }).format( - new Date(responseData.updatedAt) - )} at ${Intl.DateTimeFormat("en", { - hour: "numeric", - minute: "numeric", - }).format(new Date(responseData.updatedAt))}` - ); - } else { - setSavedState("Failed to save."); + + try { + const response = await fetch("/api/post", { + method: HttpMethod.PUT, + headers: { + "Content-Type": "application/json", + }, + body: JSON.stringify({ + id: postId, + title: data.title, + description: data.description, + content: data.content, + }), + }); + + if (response.ok) { + const responseData = await response.json(); + setSavedState( + `Last save ${Intl.DateTimeFormat("en", { month: "short" }).format( + new Date(responseData.updatedAt) + )} ${Intl.DateTimeFormat("en", { day: "2-digit" }).format( + new Date(responseData.updatedAt) + )} at ${Intl.DateTimeFormat("en", { + hour: "numeric", + minute: "numeric", + }).format(new Date(responseData.updatedAt))}` + ); + } else { + setSavedState("Failed to save."); + toast.error("Failed to save"); + } + } catch (error) { + console.error(error); } } - const publish = async () => { + async function publish() { setPublishing(true); - const response = await fetch(`/api/post`, { - method: "PUT", - headers: { - "Content-Type": "application/json", - }, - body: JSON.stringify({ - id: postId, - title: data.title, - description: data.description, - content: data.content, - published: true, - subdomain: post.site.subdomain, - customDomain: post.site.customDomain, - slug: post.slug, - }), - }); - if (response.ok) { - mutate(`/api/post?postId=${postId}`); - router.push(`https://${post.site.subdomain}.vercel.pub/${post.slug}`); + + try { + const response = await fetch(`/api/post`, { + method: HttpMethod.PUT, + headers: { + "Content-Type": "application/json", + }, + body: JSON.stringify({ + id: postId, + title: data.title, + description: data.description, + content: data.content, + published: true, + subdomain: post?.site?.subdomain, + customDomain: post?.site?.customDomain, + slug: post?.slug, + }), + }); + + if (response.ok) { + mutate(`/api/post?postId=${postId}`); + router.push( + `https://${post?.site?.subdomain}.vercel.pub/${post?.slug}` + ); + } + } catch (error) { + console.error(error); + } finally { + setPublishing(false); } - }; + } if (isValidating) return ( @@ -145,18 +207,22 @@ export default function Post() { return ( <> - + setData({ ...data, title: e.target.value })} + onInput={(e: ChangeEvent) => + setData({ ...data, title: e.currentTarget.value }) + } className="w-full px-2 py-4 text-gray-800 placeholder-gray-400 mt-6 text-5xl font-cal resize-none border-none focus:outline-none focus:ring-0" placeholder="Untitled Post" value={data.title} /> setData({ ...data, description: e.target.value })} + onInput={(e: ChangeEvent) => + setData({ ...data, description: e.currentTarget.value }) + } className="w-full px-2 py-3 text-gray-800 placeholder-gray-400 text-xl mb-3 resize-none border-none focus:outline-none focus:ring-0" placeholder="No description provided. Click to edit." value={data.description} @@ -172,38 +238,11 @@ export default function Post() { setData({ ...data, content: e.target.value })} + onInput={(e: ChangeEvent) => + setData({ ...data, content: e.currentTarget.value }) + } className="w-full px-2 py-3 text-gray-800 placeholder-gray-400 text-lg mb-5 resize-none border-none focus:outline-none focus:ring-0" - placeholder={`Write some content. Markdown supported: - -# A H1 header - -## A H2 header - -Fun fact: You embed tweets by pasting the tweet URL in a new line: - -https://twitter.com/nextjs/status/1468044361082580995 - -Paragraphs are separated by a blank line. - -2nd paragraph. *Italic*, and **bold**. Itemized lists look like: - - * this one - * that one - * the other one - -Ordered lists look like: - - 1. first item - 2. second item - 3. third item - -> Block quotes are written like so. -> -> They can span multiple paragraphs, -> if you like. - - `} + placeholder={CONTENT_PLACEHOLDER} value={data.content} /> diff --git a/pages/app/post/[id]/settings.js b/pages/app/post/[id]/settings.tsx similarity index 80% rename from pages/app/post/[id]/settings.js rename to pages/app/post/[id]/settings.tsx index 4c1ecfb..7eba2e8 100644 --- a/pages/app/post/[id]/settings.js +++ b/pages/app/post/[id]/settings.tsx @@ -1,30 +1,41 @@ -import Layout from "@/components/app/Layout"; +import toast, { Toaster } from "react-hot-toast"; import useSWR from "swr"; +import { useRouter } from "next/router"; +import { useState, useEffect } from "react"; + import BlurImage from "@/components/BlurImage"; import CloudinaryUploadWidget from "@/components/Cloudinary"; +import Layout from "@/components/app/Layout"; +import Loader from "@/components/app/Loader"; import LoadingDots from "@/components/app/loading-dots"; -import saveImage from "@/lib/save-image"; import Modal from "@/components/Modal"; -import { useState, useEffect } from "react"; -import { useRouter } from "next/router"; -import Loader from "@/components/app/Loader"; -import toast, { Toaster } from "react-hot-toast"; +import saveImage from "@/lib/save-image"; +import { fetcher } from "@/lib/fetcher"; +import { HttpMethod } from "@/types"; + +import type { ChangeEvent } from "react"; -const fetcher = (...args) => fetch(...args).then((res) => res.json()); +import type { WithSitePost } from "@/types"; + +interface SettingsData { + slug: string; + id: string; + image: string; + imageBlurhash: string; +} export default function PostSettings() { const router = useRouter(); - const { id } = router.query; - const postId = id; - const { data: settings, isValidating } = useSWR( + // TODO: Undefined check redirects to error + const { id: postId } = router.query; + + const { data: settings, isValidating } = useSWR( `/api/post?postId=${postId}`, fetcher, { + onError: () => router.push("/"), revalidateOnFocus: false, - onError: () => { - router.push("/"); - }, } ); @@ -32,49 +43,64 @@ export default function PostSettings() { const [showDeleteModal, setShowDeleteModal] = useState(false); const [deletingPost, setDeletingPost] = useState(false); - const [data, setData] = useState({ - image: settings?.image, - imageBlurhash: settings?.imageBlurhash, + const [data, setData] = useState({ + image: settings?.image ?? "", + imageBlurhash: settings?.imageBlurhash ?? "", + slug: settings?.slug ?? "", + id: settings?.id ?? "", }); useEffect(() => { if (settings) setData({ slug: settings.slug, - image: settings.image, - imageBlurhash: settings.imageBlurhash, + image: settings.image ?? "", + imageBlurhash: settings.imageBlurhash ?? "", + id: settings.id, }); }, [settings]); - async function savePostSettings(data) { + async function savePostSettings(data: SettingsData) { setSaving(true); - const response = await fetch("/api/post", { - method: "PUT", - headers: { - "Content-Type": "application/json", - }, - body: JSON.stringify({ - id: postId, - slug: data.slug, - subdomain: settings.site.subdomain, - customDomain: settings.site.customDomain, - image: data.image, - imageBlurhash: data.imageBlurhash, - }), - }); - if (response.ok) { + + try { + const response = await fetch("/api/post", { + method: HttpMethod.PUT, + headers: { + "Content-Type": "application/json", + }, + body: JSON.stringify({ + id: postId, + slug: data.slug, + image: data.image, + imageBlurhash: data.imageBlurhash, + subdomain: settings?.site?.subdomain, + customDomain: settings?.site?.customDomain, + }), + }); + + if (response.ok) toast.success(`Changes Saved`); + } catch (error) { + console.error(error); + } finally { setSaving(false); - toast.success(`Changes Saved`); } } - async function deletePost(postId) { + async function deletePost(postId: string) { setDeletingPost(true); - const response = await fetch(`/api/post?postId=${postId}`, { - method: "DELETE", - }); - if (response.ok) { - router.push(`/site/${settings.site.id}`); + try { + const response = await fetch(`/api/post?postId=${postId}`, { + method: HttpMethod.DELETE, + }); + + if (response.ok) { + router.push(`/site/${settings?.site?.id}`); + } + } catch (error) { + console.error(error); + } finally { + setDeletingPost(false); } } @@ -87,7 +113,7 @@ export default function PostSettings() { return ( <> - + Post Slug - {settings?.site.subdomain}.vercel.pub/ + {settings?.site?.subdomain}.vercel.pub/ + onInput={(e: ChangeEvent) => setData((data) => ({ ...data, slug: e.target.value })) } /> @@ -182,7 +208,7 @@ export default function PostSettings() { { event.preventDefault(); - await deletePost(postId); + await deletePost(postId as string); }} className="inline-block w-full max-w-md pt-8 overflow-hidden text-center align-middle transition-all bg-white shadow-xl rounded-lg" > diff --git a/pages/app/settings.js b/pages/app/settings.tsx similarity index 86% rename from pages/app/settings.js rename to pages/app/settings.tsx index a70e980..c650483 100644 --- a/pages/app/settings.js +++ b/pages/app/settings.tsx @@ -4,16 +4,21 @@ import BlurImage from "@/components/BlurImage"; import CloudinaryUploadWidget from "@/components/Cloudinary"; import LoadingDots from "@/components/app/loading-dots"; import saveImage from "@/lib/save-image"; +import { HttpMethod } from "@/types"; -import { useState, useEffect } from "react"; +import { useState, useEffect, useRef } from "react"; import { useSession } from "next-auth/react"; +import type { UserSettings } from "@/types"; + export default function AppSettings() { const { data: session } = useSession(); - const [saving, setSaving] = useState(false); + const [saving, setSaving] = useState(false); + const [data, setData] = useState(null); - const [data, setData] = useState(null); + const nameRef = useRef(null); + const emailRef = useRef(null); useEffect(() => { if (session) @@ -22,10 +27,10 @@ export default function AppSettings() { }); }, [session]); - async function saveSettings(data) { + async function saveSettings(data: UserSettings | null) { setSaving(true); const response = await fetch("/api/save-settings", { - method: "POST", + method: HttpMethod.POST, body: JSON.stringify({ ...data, }), @@ -56,9 +61,12 @@ export default function AppSettings() { type="text" name="name" placeholder="Your awesome name" - value={data?.name} + ref={nameRef} onInput={(e) => - setData((data) => ({ ...data, name: e.target.value })) + setData((data) => ({ + ...data, + name: nameRef.current?.value, + })) } /> @@ -71,9 +79,12 @@ export default function AppSettings() { type="text" name="email" placeholder="panic@thedis.co" - value={data?.email} + ref={emailRef} onInput={(e) => - setData((data) => ({ ...data, email: e.target.value })) + setData((data) => ({ + ...data, + email: emailRef.current?.value, + })) } /> diff --git a/pages/app/site/[id]/drafts.js b/pages/app/site/[id]/drafts.tsx similarity index 75% rename from pages/app/site/[id]/drafts.js rename to pages/app/site/[id]/drafts.tsx index aff37fb..9ab552b 100644 --- a/pages/app/site/[id]/drafts.js +++ b/pages/app/site/[id]/drafts.tsx @@ -1,42 +1,50 @@ +import Link from "next/link"; +import useSWR from "swr"; +import { useRouter } from "next/router"; import { useState } from "react"; -import Layout from "@/components/app/Layout"; + import BlurImage from "@/components/BlurImage"; +import Layout from "@/components/app/Layout"; import LoadingDots from "@/components/app/loading-dots"; -import Link from "next/link"; -import { useRouter } from "next/router"; -import useSWR from "swr"; +import { fetcher } from "@/lib/fetcher"; +import { HttpMethod } from "@/types"; -const fetcher = (...args) => fetch(...args).then((res) => res.json()); +import type { Post, Site } from "@prisma/client"; + +interface SitePostData { + posts: Array; + site: Site | null; +} export default function SiteDrafts() { const [creatingPost, setCreatingPost] = useState(false); const router = useRouter(); - const { id } = router.query; - const siteId = id; + const { id: siteId } = router.query; - const { data } = useSWR( + const { data } = useSWR( siteId && `/api/post?siteId=${siteId}&published=false`, fetcher, { - onSuccess: (data) => { - if (!data?.site) { - router.push("/"); - } - }, + onSuccess: (data) => !data?.site && router.push("/"), } ); - async function createPost(siteId) { - const res = await fetch(`/api/post?siteId=${siteId}`, { - method: "POST", - headers: { - "Content-Type": "application/json", - }, - }); - if (res.ok) { - const data = await res.json(); - router.push(`/post/${data.postId}`); + async function createPost(siteId: string) { + try { + const res = await fetch(`/api/post?siteId=${siteId}`, { + method: HttpMethod.POST, + headers: { + "Content-Type": "application/json", + }, + }); + + if (res.ok) { + const data = await res.json(); + router.push(`/post/${data.postId}`); + } + } catch (error) { + console.error(error); } } @@ -51,7 +59,7 @@ export default function SiteDrafts() { { setCreatingPost(true); - createPost(siteId); + createPost(siteId as string); }} className={`${ creatingPost @@ -76,12 +84,18 @@ export default function SiteDrafts() { - + {post.image ? ( + + ) : ( + + ? + + )} @@ -92,11 +106,11 @@ export default function SiteDrafts() { "No description provided. Click to edit."} - {data.site.subdomain}.vercel.pub/{post.slug} ↗ + {data.site?.subdomain}.vercel.pub/{post.slug} ↗ diff --git a/pages/app/site/[id]/index.js b/pages/app/site/[id]/index.tsx similarity index 74% rename from pages/app/site/[id]/index.js rename to pages/app/site/[id]/index.tsx index 575a53f..190a725 100644 --- a/pages/app/site/[id]/index.js +++ b/pages/app/site/[id]/index.tsx @@ -1,42 +1,50 @@ -import { useState, useEffect } from "react"; -import Layout from "@/components/app/Layout"; -import BlurImage from "@/components/BlurImage"; -import LoadingDots from "@/components/app/loading-dots"; -import Link from "next/link"; import { useRouter } from "next/router"; +import { useState } from "react"; +import Link from "next/link"; import useSWR from "swr"; -const fetcher = (...args) => fetch(...args).then((res) => res.json()); +import BlurImage from "@/components/BlurImage"; +import Layout from "@/components/app/Layout"; +import LoadingDots from "@/components/app/loading-dots"; +import { fetcher } from "@/lib/fetcher"; +import { HttpMethod } from "@/types"; + +import type { Post, Site } from "@prisma/client"; + +interface SitePostData { + posts: Array; + site: Site | null; +} export default function SiteIndex() { const [creatingPost, setCreatingPost] = useState(false); const router = useRouter(); - const { id } = router.query; - const siteId = id; + const { id: siteId } = router.query; - const { data } = useSWR( + const { data } = useSWR( siteId && `/api/post?siteId=${siteId}&published=true`, fetcher, { - onSuccess: (data) => { - if (!data?.site) { - router.push("/"); - } - }, + onSuccess: (data) => !data?.site && router.push("/"), } ); - async function createPost(siteId) { - const res = await fetch(`/api/post?siteId=${siteId}`, { - method: "POST", - headers: { - "Content-Type": "application/json", - }, - }); - if (res.ok) { - const data = await res.json(); - router.push(`/post/${data.postId}`); + async function createPost(siteId: string) { + try { + const res = await fetch(`/api/post?siteId=${siteId}`, { + method: HttpMethod.POST, + headers: { + "Content-Type": "application/json", + }, + }); + + if (res.ok) { + const data = await res.json(); + router.push(`/post/${data.postId}`); + } + } catch (error) { + console.error(error); } } @@ -50,7 +58,7 @@ export default function SiteIndex() { { setCreatingPost(true); - createPost(siteId); + createPost(siteId as string); }} className={`${ creatingPost @@ -75,12 +83,18 @@ export default function SiteIndex() { - + {post.image ? ( + + ) : ( + + ? + + )} {post.title} @@ -89,11 +103,11 @@ export default function SiteIndex() { e.stopPropagation()} - href={`https://${data.site.subdomain}.vercel.pub/${post.slug}`} + href={`https://${data.site?.subdomain}.vercel.pub/${post.slug}`} target="_blank" className="font-cal px-3 py-1 tracking-wide rounded bg-gray-200 text-gray-600 absolute bottom-5 left-10 whitespace-nowrap" > - {data.site.subdomain}.vercel.pub/{post.slug} ↗ + {data.site?.subdomain}.vercel.pub/{post.slug} ↗ diff --git a/pages/app/site/[id]/settings.js b/pages/app/site/[id]/settings.tsx similarity index 77% rename from pages/app/site/[id]/settings.js rename to pages/app/site/[id]/settings.tsx index 7ad668d..a47683b 100644 --- a/pages/app/site/[id]/settings.js +++ b/pages/app/site/[id]/settings.tsx @@ -1,43 +1,58 @@ +import { useDebounce } from "use-debounce"; +import { useRouter } from "next/router"; import { useState, useEffect } from "react"; -import Layout from "@/components/app/Layout"; +import toast, { Toaster } from "react-hot-toast"; +import useSWR, { mutate } from "swr"; + import BlurImage from "@/components/BlurImage"; import CloudinaryUploadWidget from "@/components/Cloudinary"; -import LoadingDots from "@/components/app/loading-dots"; -import saveImage from "@/lib/save-image"; -import { useRouter } from "next/router"; -import useSWR, { mutate } from "swr"; import DomainCard from "@/components/app/DomainCard"; +import Layout from "@/components/app/Layout"; +import LoadingDots from "@/components/app/loading-dots"; import Modal from "@/components/Modal"; -import toast, { Toaster } from "react-hot-toast"; -import { useDebounce } from "use-debounce"; +import saveImage from "@/lib/save-image"; + +import { fetcher } from "@/lib/fetcher"; +import { HttpMethod } from "@/types"; + +import type { FormEvent } from "react"; +import type { Site } from "@prisma/client"; -const fetcher = (...args) => fetch(...args).then((res) => res.json()); +interface SettingsData + extends Pick< + Site, + | "id" + | "name" + | "description" + | "subdomain" + | "customDomain" + | "image" + | "imageBlurhash" + > {} export default function SiteSettings() { const router = useRouter(); const { id } = router.query; const siteId = id; - const { data: settings } = useSWR( + const { data: settings } = useSWR( siteId && `/api/site?siteId=${siteId}`, fetcher, { + onError: () => router.push("/"), revalidateOnFocus: false, - onError: () => { - router.push("/"); - }, } ); const [saving, setSaving] = useState(false); const [adding, setAdding] = useState(false); - const [error, setError] = useState(null); + const [error, setError] = useState(null); const [disabled, setDisabled] = useState(true); const [showDeleteModal, setShowDeleteModal] = useState(false); const [deletingSite, setDeletingSite] = useState(false); - const [data, setData] = useState({ - id: null, + const [data, setData] = useState({ + id: "", name: null, description: null, subdomain: null, @@ -63,54 +78,111 @@ export default function SiteSettings() { if (adding) setDisabled(true); }, [adding]); - async function saveSiteSettings(data) { + async function saveSiteSettings(data: SettingsData) { setSaving(true); - const response = await fetch("/api/site", { - method: "PUT", - headers: { - "Content-Type": "application/json", - }, - body: JSON.stringify({ - id: siteId, - currentSubdomain: settings.subdomain, - ...data, - }), - }); - if (response.ok) { + + try { + const response = await fetch("/api/site", { + method: HttpMethod.PUT, + headers: { + "Content-Type": "application/json", + }, + body: JSON.stringify({ + currentSubdomain: settings?.subdomain ?? undefined, + ...data, + id: siteId, + }), + }); + + if (response.ok) { + setSaving(false); + mutate(`/api/get-site-settings?siteId=${siteId}`); + toast.success(`Changes Saved`); + } + } catch (error) { + toast.error("Failed to save settings"); + console.error(error); + } finally { setSaving(false); - mutate(`/api/get-site-settings?siteId=${siteId}`); - toast.success(`Changes Saved`); } } - async function deleteSite(siteId) { + async function deleteSite(siteId: string) { setDeletingSite(true); - const response = await fetch(`/api/site?siteId=${siteId}`, { - method: "DELETE", - }); - if (response.ok) { - router.push("/"); + + try { + const response = await fetch(`/api/site?siteId=${siteId}`, { + method: HttpMethod.DELETE, + }); + + if (response.ok) router.push("/"); + } catch (error) { + console.error(error); + } finally { + setDeletingSite(false); } } const [debouncedSubdomain] = useDebounce(data?.subdomain, 1500); - const [subdomainError, setSubdomainError] = useState(null); + const [subdomainError, setSubdomainError] = useState(null); + + useEffect(() => { + async function checkSubdomain() { + try { + const response = await fetch( + `/api/domain/check?domain=${debouncedSubdomain}&subdomain=1` + ); + + const available = await response.json(); + + setSubdomainError( + available ? null : `${debouncedSubdomain}.vercel.pub` + ); + } catch (error) { + console.error(error); + } + } - useEffect(async () => { if ( - debouncedSubdomain != settings?.subdomain && + debouncedSubdomain !== settings?.subdomain && + debouncedSubdomain && debouncedSubdomain?.length > 0 - ) { + ) + checkSubdomain(); + }, [debouncedSubdomain]); + + async function handleCustomDomain(event: FormEvent) { + const customDomain = event.currentTarget.customDomain.value; + + setAdding(true); + + try { const response = await fetch( - `/api/check-subdomain?subdomain=${debouncedSubdomain}` + `/api/domain?domain=${customDomain}&siteId=${siteId}`, + { + method: HttpMethod.POST, + } ); - const available = await response.json(); - if (available) { - setSubdomainError(null); - } else { - setSubdomainError(`${debouncedSubdomain}.vercel.pub`); - } + + if (!response.ok) + throw { + code: response.status, + domain: customDomain, + }; + + setError(null); + + setData((data) => ({ + ...data, + customDomain: customDomain, + })); + + event.currentTarget.customDomain.value = ""; + } catch (error) { + setError(error); + } finally { + setAdding(false); } - }, [debouncedSubdomain]); + } return ( @@ -128,13 +200,13 @@ export default function SiteSettings() { - setData((data) => ({ ...data, name: e.target.value })) + setData((data) => ({ ...data, name: e.currentTarget.value })) } + placeholder="Untitled Site" + type="text" + value={data.name ?? "Unknown Name"} /> @@ -143,14 +215,16 @@ export default function SiteSettings() { - setData((data) => ({ ...data, description: e.target.value })) + setData((data) => ({ + ...data, + description: e.currentTarget.value, + })) } + placeholder="Lorem ipsum forem dimsum" + rows={3} + value={data?.description ?? "Unknown Description"} /> </div> </div> @@ -159,13 +233,16 @@ export default function SiteSettings() { <div className="border border-gray-700 rounded-lg flex items-center max-w-lg"> <input className="w-1/2 px-5 py-3 font-cal text-gray-700 bg-white border-none focus:outline-none focus:ring-0 rounded-none rounded-l-lg placeholder-gray-400" - type="text" name="subdomain" - placeholder="subdomain" - value={data.subdomain} onInput={(e) => - setData((data) => ({ ...data, subdomain: e.target.value })) + setData((data) => ({ + ...data, + subdomain: e.currentTarget.value, + })) } + placeholder="subdomain" + type="text" + value={data.subdomain ?? "Unknown Subdomain"} /> <div className="w-1/2 h-12 flex justify-center items-center font-cal rounded-r-lg border-l border-gray-600 bg-gray-100"> vercel.pub @@ -184,42 +261,24 @@ export default function SiteSettings() { <form onSubmit={async (e) => { e.preventDefault(); - const customDomain = e.target.customDomain.value; - setAdding(true); - await fetch( - `/api/add-domain?domain=${customDomain}&siteId=${siteId}` - ).then((res) => { - setAdding(false); - if (res.ok) { - setError(null); - setData((data) => ({ - ...data, - customDomain: customDomain, - })); - e.target.customDomain.value = ""; - } else { - setError({ code: res.status, domain: customDomain }); - } - }); + await handleCustomDomain(e.currentTarget.customDomain.value); }} className="flex justify-start items-center space-x-3 max-w-lg" > <div className="border border-gray-700 flex-auto rounded-lg overflow-hidden"> <input + autoComplete="off" className="w-full px-5 py-3 font-cal text-gray-700 bg-white border-none focus:outline-none focus:ring-0 rounded-none placeholder-gray-400" - type="text" name="customDomain" - autoComplete="off" - placeholder="mydomain.com" - pattern="^(?:[a-zA-Z0-9][a-zA-Z0-9-]{1,61}[a-zA-Z0-9]\.)?[a-zA-Z0-9][a-zA-Z0-9-]{1,61}[a-zA-Z0-9]\.[a-zA-Z]{2,}$" onInput={(e) => { - const customDomain = e.target.value; - if (!customDomain || customDomain.length == 0) { - setDisabled(true); - } else { - setDisabled(false); - } + const customDomain = e.currentTarget.value; + setDisabled( + !customDomain || customDomain.length == 0 ? true : false + ); }} + pattern="^(?:[a-zA-Z0-9][a-zA-Z0-9-]{1,61}[a-zA-Z0-9]\.)?[a-zA-Z0-9][a-zA-Z0-9-]{1,61}[a-zA-Z0-9]\.[a-zA-Z]{2,}$" + placeholder="mydomain.com" + type="text" /> </div> <button @@ -318,15 +377,15 @@ export default function SiteSettings() { {data.image && ( <BlurImage - src={data.image} alt="Cover Photo" - width={800} + blurDataURL={data.imageBlurhash ?? undefined} + className="rounded-md" height={500} layout="responsive" objectFit="cover" placeholder="blur" - className="rounded-md" - blurDataURL={data.imageBlurhash} + src={data.image} + width={800} /> )} </div> @@ -354,7 +413,7 @@ export default function SiteSettings() { <form onSubmit={async (event) => { event.preventDefault(); - await deleteSite(siteId); + await deleteSite(siteId as string); }} className="inline-block w-full max-w-md pt-8 overflow-hidden text-center align-middle transition-all bg-white shadow-xl rounded-lg" > @@ -370,8 +429,8 @@ export default function SiteSettings() { className="w-full px-5 py-3 text-gray-700 bg-white border-none focus:outline-none focus:ring-0 rounded-none rounded-r-lg placeholder-gray-400" type="text" name="name" - placeholder={data.name} - pattern={data.name} + placeholder={data.name ?? ""} + pattern={data.name ?? "Site Name"} /> </div> </div> @@ -405,12 +464,12 @@ export default function SiteSettings() { onClick={() => { saveSiteSettings(data); }} - disabled={saving || subdomainError} + disabled={saving || subdomainError !== null} className={`${ saving || subdomainError ? "cursor-not-allowed bg-gray-300 border-gray-300" : "bg-black hover:bg-white hover:text-black border-black" - } mx-2 w-36 h-12 text-lg text-white border-2 focus:outline-none transition-all ease-in-out duration-150`} + } mx-2 rounded-md w-36 h-12 text-lg text-white border-2 focus:outline-none transition-all ease-in-out duration-150`} > {saving ? <LoadingDots /> : "Save Changes"} </button> diff --git a/pages/home/index.js b/pages/home/index.tsx similarity index 100% rename from pages/home/index.js rename to pages/home/index.tsx diff --git a/tsconfig.json b/tsconfig.json new file mode 100644 index 0000000..7e92714 --- /dev/null +++ b/tsconfig.json @@ -0,0 +1,30 @@ +{ + "compilerOptions": { + "target": "esnext", + "module": "commonjs", + "esModuleInterop": true, + "forceConsistentCasingInFileNames": true, + "strict": true, + "skipLibCheck": true, + "baseUrl": ".", + "paths": { + "@/components/*": ["components/*"], + "@/data/*": ["data/*"], + "@/layouts/*": ["layouts/*"], + "@/lib/*": ["lib/*"], + "@/styles/*": ["styles/*"], + "@/types": ["types/index"], + "@/types/*": ["types/*"] + }, + "lib": ["dom", "dom.iterable", "esnext"], + "allowJs": true, + "noEmit": true, + "incremental": true, + "moduleResolution": "node", + "resolveJsonModule": true, + "isolatedModules": true, + "jsx": "preserve" + }, + "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"], + "exclude": ["node_modules"] +} diff --git a/types/_site.ts b/types/_site.ts new file mode 100644 index 0000000..597d20d --- /dev/null +++ b/types/_site.ts @@ -0,0 +1,20 @@ +import type { Post, Site, User } from "@prisma/client"; + +export interface AdjacentPost + extends Pick< + Post, + "createdAt" | "description" | "image" | "imageBlurhash" | "slug" | "title" + > {} + +export interface _SiteData extends Site { + user: User | null; + posts: Array<Post>; +} + +export interface _SiteSlugData extends Post { + site: _SiteSite | null; +} + +interface _SiteSite extends Site { + user: User | null; +} diff --git a/types/cloudinary.ts b/types/cloudinary.ts new file mode 100644 index 0000000..3843e1b --- /dev/null +++ b/types/cloudinary.ts @@ -0,0 +1,90 @@ +declare global { + var cloudinary: { + applyUploadWidget: ( + element: unknown, + options: CloudinaryWidgetOptions, + widgetCallback?: Function + ) => void; + createUploadWidget: ( + options: CloudinaryWidgetOptions, + widgetCallback?: Function + ) => CloudinaryWidget; + openUploadWidget: ( + options: CloudinaryWidgetOptions, + widgetCallback?: Function + ) => void; + setAPIKey: (key: string) => void; + setCloudName: (name: string) => void; + WIDGET_SOURCES: CloudinaryWidgetSource; + WIDGET_VERSION: string; + }; +} + +enum CloudinaryWidgetSource { + CAMERA = "camera", + DROPBOX = "dropbox", + FACEBOOK = "facebook", + GETTY = "getty", + GOOGLE_DRIVE = "google_drive", + IMAGE_SEARCH = "image_search", + INSTAGRAM = "instagram", + ISTOCK = "istock", + LOCAL = "local", + SHUTTERSTOCK = "shutterstock", + UNSPLASH = "unsplash", + URL = "url", +} + +export interface CloudinaryWidget { + close: (t?: unknown) => void; + destroy: (t?: unknown) => void; + hide: () => void; + isDestroyed: () => void; + isMinimized: () => void; + isShowing: () => void; + minimize: () => void; + open: (t?: unknown, e?: unknown) => void; + show: () => void; + update: (t?: unknown) => void; +} + +interface CloudinaryWidgetOptions { + cloudName: string; + cropping: boolean; + uploadPreset: string; +} + +export interface CloudinaryWidgetResult { + data: { + event: string; + info: string; + }; + event: string; + info: CloudinaryCallbackImage; + uw_event: boolean; +} + +export interface CloudinaryCallbackImage { + asset_id: string; + batchId: string; + bytes: number; + created_at: Date; + etag: string; + format: string; + height: number; + id: string; + original_filename: string; + path: string; + placeholder: boolean; + public_id: string; + resource_type: string; + secure_url: string; + signature: string; + tags: Array<string>; + thumbnail_url: string; + type: string; + url: string; + version_id: string; + version: number; + width: number; +} diff --git a/types/common.ts b/types/common.ts new file mode 100644 index 0000000..934308e --- /dev/null +++ b/types/common.ts @@ -0,0 +1,12 @@ +import type { Post, Site } from "@prisma/client"; +import type { PropsWithChildren } from "react"; + +export type WithChildren<T = {}> = T & PropsWithChildren<{}>; + +export type WithClassName<T = {}> = T & { + className?: string; +}; + +export interface WithSitePost extends Post { + site: Site | null; +} diff --git a/types/http.ts b/types/http.ts new file mode 100644 index 0000000..1a53d5e --- /dev/null +++ b/types/http.ts @@ -0,0 +1,11 @@ +export enum HttpMethod { + CONNECT = "CONNECT", + DELETE = "DELETE", + GET = "GET", + HEAD = "HEAD", + OPTIONS = "OPTIONS", + PATCH = "PATCH", + POST = "POST", + PUT = "PUT", + TRACE = "TRACE", +} diff --git a/types/icon.ts b/types/icon.ts new file mode 100644 index 0000000..9579ba9 --- /dev/null +++ b/types/icon.ts @@ -0,0 +1,7 @@ +import type { WithClassName } from "@/types"; + +export interface BaseIconProps extends WithClassName { + color: string; + height: number; + width: number; +} diff --git a/types/index.ts b/types/index.ts new file mode 100644 index 0000000..7fed9dc --- /dev/null +++ b/types/index.ts @@ -0,0 +1,9 @@ +export * from "./_site"; +export * from "./cloudinary"; +export * from "./common"; +export * from "./http"; +export * from "./icon"; +export * from "./mdx"; +export * from "./seo"; +export * from "./settings"; +export * from "./twitter"; diff --git a/types/mdx.ts b/types/mdx.ts new file mode 100644 index 0000000..b4091a5 --- /dev/null +++ b/types/mdx.ts @@ -0,0 +1,7 @@ +import type { Post } from "@prisma/client"; + +export interface MdxCardData + extends Pick<Post, "description" | "image" | "imageBlurhash"> { + name: string | null; + url: string | null; +} diff --git a/types/next-auth.d.ts b/types/next-auth.d.ts new file mode 100644 index 0000000..1d25224 --- /dev/null +++ b/types/next-auth.d.ts @@ -0,0 +1,61 @@ +import NextAuth from "next-auth"; + +declare module "next-auth" { + interface Session { + user: { + /** + * The user's email address + */ + email?: string | null; + + /** + * The user's unique id number + */ + id?: string | null; + + /** + * The users preferred avatar. + * Usually provided by the user's OAuth provider of choice + */ + image?: string | null; + + /** + * The user's full name + */ + name?: string | null; + + /** + * The user's custom & public username viewable to others + */ + username?: string | null; + }; + } + + interface User { + /** + * The user's email address + */ + email?: string | null; + + /** + * The user's unique id number + */ + id: string; + + /** + * The users preferred avatar. + * Usually provided by the user's OAuth provider of choice + */ + image?: string | null; + + /** + * The user's full name + */ + name?: string | null; + + /** + * The user's custom & public username viewable to others + */ + username?: string | null; + } +} diff --git a/types/seo.ts b/types/seo.ts new file mode 100644 index 0000000..f73f8e5 --- /dev/null +++ b/types/seo.ts @@ -0,0 +1,7 @@ +export interface Meta { + description?: string; + logo?: string; + ogImage?: string; + ogUrl?: string; + title?: string; +} diff --git a/types/settings.ts b/types/settings.ts new file mode 100644 index 0000000..e4df607 --- /dev/null +++ b/types/settings.ts @@ -0,0 +1,3 @@ +import type { User as NextAuthUser } from "next-auth"; + +export type UserSettings = Pick<NextAuthUser, "name" | "email" | "image">; diff --git a/types/twitter.ts b/types/twitter.ts new file mode 100644 index 0000000..d6f5327 --- /dev/null +++ b/types/twitter.ts @@ -0,0 +1,198 @@ +export interface TweetData { + attachments?: { media_keys: Array<string> }; + author_id: string; + created_at: Date; + author: TwitterUser; + media: Array<{ + type: string; + media_key: string; + height: number; + width: number; + preview_image_url: string; + url: string; + }>; + video: { + url: string; + }; + polls: Array<{ + total_votes: number; + options: Array<{ + votes: number; + label: string; + position: number; + }>; + voting_status: string; + end_datetime: string; + }>; + url_meta: { + title: string; + description: string; + unwound_url: string; + images: Array<{ + url: string; + }>; + }; + entities?: { + urls?: Array<{ + display_url: string; + end: number; + expanded_url: string; + start: number; + url: string; + }>; + }; + id: string; + public_metrics: { + like_count: number; + quote_count: number; + reply_count: number; + retweet_count: number; + }; + referenced_tweets?: Array<{ + id: string; + type: string; + username: string; + author: TwitterUser; + }>; + text: string; +} + +export interface Tweet { + data: TweetData; + includes: { + media?: Array<{ + height: number; + media_key: string; + type: string; + url: string; + width: number; + }>; + polls?: Array<unknown>; + tweets?: Array<Tweet["data"]>; + users: Array<TwitterUser>; + }; +} + +export interface MediaTweet { + created_at: Date; + id: number; + id_str: string; + full_text: string; + truncated: boolean; + display_text_range: Array<number>; + entities: { + hashtags: Array<unknown>; + symbols: Array<unknown>; + user_mentions: Array<unknown>; + urls: Array<unknown>; + media: Array<unknown>; + }; + extended_entities: { + media: Array<TwitterExtendedEntitiesMedia>; + }; + source: string; + in_reply_to_status_id: null; + in_reply_to_status_id_str: null; + in_reply_to_user_id: null; + in_reply_to_user_id_str: null; + in_reply_to_screen_name: null; + user: { + contributors_enabled: boolean; + created_at: Date; + default_profile_image: boolean; + default_profile: boolean; + description: string; + entities: Array<object>; + favourites_count: number; + follow_request_sent: null; + followers_count: number; + following: null; + friends_count: number; + geo_enabled: boolean; + has_extended_profile: boolean; + id_str: string; + id: number; + is_translation_enabled: boolean; + is_translator: boolean; + lang: null; + listed_count: number; + location: string; + name: string; + notifications: null; + profile_background_color: string; + profile_background_image_url_https: string; + profile_background_image_url: string; + profile_background_tile: boolean; + profile_banner_url: string; + profile_image_url_https: string; + profile_image_url: string; + profile_link_color: string; + profile_sidebar_border_color: string; + profile_sidebar_fill_color: string; + profile_text_color: string; + profile_use_background_image: boolean; + protected: boolean; + screen_name: string; + statuses_count: number; + time_zone: null; + translator_type: string; + url: string; + utc_offset: null; + verified: boolean; + withheld_in_countries: Array<unknown>; + }; + geo: null; + coordinates: null; + place: null; + contributors: null; + is_quote_status: boolean; + retweet_count: number; + favorite_count: number; + favorited: boolean; + retweeted: boolean; + possibly_sensitive: boolean; + possibly_sensitive_appealable: boolean; + lang: string; +} + +interface TwitterExtendedEntitiesMedia { + additional_media_info: { + monetizable: boolean; + }; + display_url: string; + expanded_url: string; + id_str: string; + id: number; + indices: Array<number>; + media_url_https: string; + media_url: string; + sizes: Record< + string, + { + w: number; + h: number; + resize: string; + } + >; + type: string; + url: string; + video_info: { + aspect_ratio: Array<number>; + duration_millis: number; + variants: Array<{ + bitrate: number; + content_type: string; + url: string; + }>; + }; +} + +export interface TwitterUser { + id: string; + name: string; + profile_image_url: string; + protected: boolean; + url: string; + username: string; + verified: boolean; +}