diff options
24 files changed, 193 insertions, 113 deletions
diff --git a/apps/website/src/components/shared/BaseHead.astro b/apps/website/src/components/shared/BaseHead.astro index bfe8f78..39e98a7 100644 --- a/apps/website/src/components/shared/BaseHead.astro +++ b/apps/website/src/components/shared/BaseHead.astro @@ -1,12 +1,57 @@ --- +import smartypants from 'smartypants'; +import siteInfo from '../../data/site-info'; +import SEO from './SEO.astro'; +import Favicon from '/media/polyfrost/minimal_bg.svg?url'; + export type Props = { - siteName: string; title?: string; - description: string; - image: { src: string; alt: string }; + description?: string; + image?: { src: string; alt: string }; canonicalURL?: URL | null; pageType?: 'website' | 'article'; }; const twitterHandle = 'polyfrost'; + +const { + description = siteInfo.description, + image = siteInfo.image, + canonicalURL = new URL(Astro.request.url, Astro.site), + pageType = 'website', +} = Astro.props; + +const title = [Astro.props.title, siteInfo.name].filter(Boolean).join(' | '); +const resolvedImage = { + src: new URL(image.src, Astro.site).toString(), + alt: image.alt, +}; --- + +<!-- High Priority Global Metadata --> +<meta charset="utf-8" /> +<meta name="viewport" content="width=device-width" /> +<title set:html={smartypants(title, 1)} /> +<meta name="generator" content={Astro.generator} /> + +<!-- Font Preloads --> +<link rel="preconnect" href="https://fonts.googleapis.com"/> +<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin/> +<link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet"/> +<link href="https://fonts.googleapis.com/css2?family=Roboto+Mono:ital@0;1&display=swap" rel="stylesheet"/> + +<!-- Low Priority Global Metadata --> +<link rel="icon" type="image/svg+xml" href={Favicon}/> +<link rel="sitemap" href="/sitemap-index.xml" /> +<link rel="mask-icon" href="/media/polyfrost/minimal_bg.svg" /> +<link rel="alternate" type="application/rss+xml" href="/rss.xml" title="RSS" /> + +<SEO + name={siteInfo.name} + title={title} + description={description} + image={resolvedImage} + twitter={{ handle: twitterHandle }} + og={{ type: pageType }} + canonicalURL={canonicalURL} +/> diff --git a/apps/website/src/components/shared/SEO.astro b/apps/website/src/components/shared/SEO.astro index c3b8c52..cd44da4 100644 --- a/apps/website/src/components/shared/SEO.astro +++ b/apps/website/src/components/shared/SEO.astro @@ -1,20 +1,23 @@ --- -import smartypants from 'smartypants'; +export type Image = { + src: string; + alt: string; +}; -type SEOMetadata = { - name?: string; +export type SEOMetadata = { + name: string; title: string; description: string; - image?: { src: string; alt: string }; - canonicalURL?: URL | null; + image: Image; + canonicalURL?: URL | string | null; locale?: string; }; -type OpenGraph = Partial<SEOMetadata> & { +export type OpenGraph = Partial<SEOMetadata> & { type?: string; }; -type Twitter = Partial<SEOMetadata> & { +export type Twitter = Partial<SEOMetadata> & { handle?: string; card?: 'summary' | 'summary_large_image'; }; @@ -26,64 +29,62 @@ export type Props = SEOMetadata & { const { name, + title, description, image, locale = 'en', canonicalURL = new URL(Astro.url.pathname, Astro.site), - og: _og = {}, - twitter: _twitter = {}, } = Astro.props; -const title = [Astro.props.title, name].filter(Boolean).join(' | '); -const og: OpenGraph = { name, title, description, canonicalURL, image, locale, type: 'website', ..._og }; -const twitter: Twitter = { name, title, description, canonicalURL, image, locale, card: 'summary_large_image', ..._twitter }; -const ensureSlash = (url: string | URL) => `${url.toString().replace(/\/$/, '')}/`; ---- +const og = { + name, + title, + description, + canonicalURL, + image, + locale, + type: 'website', + ...Astro.props.og, +} satisfies OpenGraph; -<!-- Global Metadata --> -<meta charset="utf-8" /> -<meta name="generator" content={Astro.generator} /> -<meta name="viewport" content="width=device-width" /> -<meta name="theme-color" content="#d2e1f9" /> -<link rel="icon" type="image/svg+xml" href="/favicon.svg" /> -<link rel="mask-icon" href="/favicon.svg" color="#d2e1f9" /> -<link rel="sitemap" href="/sitemap-index.xml" /> -<link rel="alternate" type="application/rss+xml" href="/rss.xml" title="RSS" /> +const twitter = { + name, + title, + description, + canonicalURL, + image, + locale, + card: 'summary_large_image', + ...Astro.props.twitter, +} satisfies Twitter; -<title set:html={smartypants(title, 1)} /> +function formatCanonicalURL(url: string | URL) { + const path = url.toString(); + const hasQueryParams = path.includes('?'); + if (hasQueryParams) + path.replace(/\/?$/, ''); + return path.replace(/\/?$/, hasQueryParams ? '' : ''); +} +--- <!-- Page Metadata --> -<meta name="generator" content={Astro.generator} /> -{canonicalURL && <link rel="canonical" href={ensureSlash(canonicalURL)} />} -<title>{title}</title> +{canonicalURL && <link rel="canonical" href={formatCanonicalURL(canonicalURL)} />} <meta name="description" content={description} /> <!-- OpenGraph Tags --> <meta property="og:title" content={og.title} /> <meta property="og:type" content={og.type} /> -{og.canonicalURL && <meta property="og:url" content={ensureSlash(og.canonicalURL)} />} +{og.canonicalURL && <meta property="og:url" content={formatCanonicalURL(og.canonicalURL)} />} <meta property="og:locale" content={og.locale} /> <meta property="og:description" content={og.description} /> <meta property="og:site_name" content={og.name} /> -{ - og.image && ( - <> - <meta property="og:image" content={og.image.src} /> - <meta property="og:image:alt" content={og.image.alt} /> - </> - ) -} +{og.image && <meta property="og:image" content={og.image.src} />} +{og.image && <meta property="og:image:alt" content={og.image.alt} />} <!-- Twitter Tags --> {twitter.card && <meta name="twitter:card" content={twitter.card} />} -{twitter.handle && <meta name="twitter:site" content={twitter.handle} />} +{twitter.handle && <meta name="twitte:site" content={twitter.handle} />} <meta name="twitter:title" content={twitter.title} /> <meta name="twitter:description" content={twitter.description} /> -{ - twitter.image && ( - <> - <meta name="twitter:image" content={twitter.image.src} /> - <meta name="twitter:image:alt" content={twitter.image.alt} /> - </> - ) -} +{twitter.image && <meta name="twitter:image" content={twitter.image.src} />} +{twitter.image && <meta name="twitter:image:alt" content={twitter.image.alt} />} diff --git a/apps/website/src/content/blog/first.md b/apps/website/src/content/blog/first.md index 3066715..2b5f64a 100644 --- a/apps/website/src/content/blog/first.md +++ b/apps/website/src/content/blog/first.md @@ -1,7 +1,7 @@ --- title: 'First post' description: 'Lorem ipsum dolor sit amet' -pubDate: 'Jul 08 2022' +publishDate: 'Jul 08 2022' heroImage: '/blog-placeholder-3.jpg' --- diff --git a/apps/website/src/content/config.ts b/apps/website/src/content/config.ts index 8d68c0e..6f6cde9 100644 --- a/apps/website/src/content/config.ts +++ b/apps/website/src/content/config.ts @@ -1,12 +1,15 @@ -import { defineCollection, z } from 'astro:content'; +import { defineCollection } from 'astro:content'; +import { z } from 'zod'; const blog = defineCollection({ schema: z.object({ title: z.string(), description: z.string(), - pubDate: z.coerce.date(), - updatedDate: z.coerce.date().optional(), - heroImage: z.string().optional(), + publishDate: z.string().or(z.date()).transform(val => new Date(val)), + updatedDate: z.string().or(z.date()).transform(val => new Date(val)).optional(), + socialImage: z.string().optional(), + coverImage: z.string().optional(), + lang: z.enum(['en']).default('en'), }), }); diff --git a/apps/website/src/data/site-info.ts b/apps/website/src/data/site-info.ts new file mode 100644 index 0000000..cb7784f --- /dev/null +++ b/apps/website/src/data/site-info.ts @@ -0,0 +1,22 @@ +export interface SiteInfo { + name: string; + title: string; + description: string; + image: { + src: string; + alt: string; + }; +}; + +// TODO: move config.ts to here so we can use astro components inside config +const siteInfo: SiteInfo = { + name: 'Polyfrost', + title: 'Polyfrost', + description: 'Building beautiful mods and tools, byte by byte', + image: { + src: '/media/polyfrost/minimal.svg', + alt: 'Polyfrost Logo', + }, +}; + +export default siteInfo; diff --git a/apps/website/src/layouts/BlogPost.astro b/apps/website/src/layouts/BlogPost.astro index 188aae1..17ff74d 100644 --- a/apps/website/src/layouts/BlogPost.astro +++ b/apps/website/src/layouts/BlogPost.astro @@ -6,18 +6,18 @@ import Layout from './Layout.astro'; type Props = CollectionEntry<'blog'>['data']; -const { title, description, pubDate, updatedDate, heroImage } = Astro.props; +const { title, description, publishDate, updatedDate, coverImage } = Astro.props; --- <Layout title={title} description={description}> <article> <div class="hero-image"> - {heroImage && <img width={1020} height={510} src={heroImage} alt="Hero Image"/>} + {coverImage && <img width={1020} height={510} src={coverImage} alt="Hero Image"/>} </div> <div class="prose"> <div class="title"> <div class="date"> - <FormattedDate date={pubDate}/> + <FormattedDate date={publishDate}/> { updatedDate && ( <div class="last-updated-on"> diff --git a/apps/website/src/layouts/Layout.astro b/apps/website/src/layouts/Layout.astro index f916ee1..b1cde5c 100644 --- a/apps/website/src/layouts/Layout.astro +++ b/apps/website/src/layouts/Layout.astro @@ -1,37 +1,18 @@ --- import Footer from '@components/base/Footer.astro'; -import Favicon from '/media/polyfrost/minimal_bg.svg?url'; import Navbar from '../components/base/navbar/Navbar.astro'; +import BaseHead, { type Props as HeadProps } from '../components/shared/BaseHead.astro'; import '../styles/global.css'; -interface Props { - title?: string; - description?: string; - favicon?: string; -} +export type Props = HeadProps; -const { - title = 'Polyfrost', - description = 'Official website for Polyfrost.', - favicon = Favicon, -} = Astro.props; +const { ...head } = Astro.props; --- <!doctype html> <html lang="en"> <head> - <meta charset="UTF-8"/> - <meta name="description" content={description}/> - <meta name="viewport" content="width=device-width"/> - <link rel="icon" type="image/svg+xml" href={favicon}/> - <meta name="generator" content={Astro.generator}/> - - <link rel="preconnect" href="https://fonts.googleapis.com"/> - <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin/> - <link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet"/> - <link href="https://fonts.googleapis.com/css2?family=Roboto+Mono:ital@0;1&display=swap" rel="stylesheet"/> - - <title>{title}</title> + <BaseHead {...head} /> </head> <body class="bg-gray-50 overflow-x-hidden"> diff --git a/apps/website/src/pages/about.astro b/apps/website/src/pages/about.astro index ac51204..5f85a7d 100644 --- a/apps/website/src/pages/about.astro +++ b/apps/website/src/pages/about.astro @@ -7,7 +7,7 @@ import Layout from '@layouts/Layout.astro'; --- -<Layout> +<Layout title="About us" description="Learn about the team!"> <Section class="flex-col justify-center items-center h-screen max-h-4/5-screen md:max-h-[600px] md:min-h-[400px]"> <div class="max-w-[600px] flex flex-col text-center justify-center items-center gap-y-2"> <Header align="center" size="xxl" class="text-navy-peony">Our journey</Header> diff --git a/apps/website/src/pages/blog/index.astro b/apps/website/src/pages/blog/index.astro index 4bccad4..8603764 100644 --- a/apps/website/src/pages/blog/index.astro +++ b/apps/website/src/pages/blog/index.astro @@ -4,9 +4,7 @@ import { getCollection } from 'astro:content'; import FormattedDate from '../../components/base/FormattedDate.astro'; import Layout from '../../layouts/Layout.astro'; -const posts = (await getCollection('blog')).sort( - (a, b) => a.data.pubDate.valueOf() - b.data.pubDate.valueOf(), -); +const posts = await getCollection('blog'); --- <Layout title="Polyfrost Blog" description="Recieve Polyfrost updates here"> @@ -16,10 +14,10 @@ const posts = (await getCollection('blog')).sort( posts.map(post => ( <li> <a href={`blog/${post.slug}/`}> - <img width={720} height={360} src={post.data.heroImage} alt=""/> + <img width={720} height={360} src={post.data.coverImage} alt=""/> <h4 class="title">{post.data.title}</h4> <p class="date"> - <FormattedDate date={post.data.pubDate}/> + <FormattedDate date={post.data.publishDate}/> </p> </a> </li> diff --git a/apps/website/src/pages/branding.astro b/apps/website/src/pages/branding.astro index e367f3b..4b41edd 100644 --- a/apps/website/src/pages/branding.astro +++ b/apps/website/src/pages/branding.astro @@ -12,7 +12,7 @@ function formatModName(name: string): string { } --- -<Layout> +<Layout title="Polyfrost Branding" description="Read about our branding policy"> <Section class="justify-center items-start pt-32"> <div class="flex flex-col justify-start items-start w-full text-navy-peony"> <Header> diff --git a/apps/website/src/pages/contact.astro b/apps/website/src/pages/contact.astro index aac214d..53a6a81 100644 --- a/apps/website/src/pages/contact.astro +++ b/apps/website/src/pages/contact.astro @@ -8,7 +8,7 @@ import Layout from '@layouts/Layout.astro'; --- -<Layout> +<Layout title="Contact us" description="Learn how to reach out to the Polyfrost team and community"> <Section wrapperClass="min-h-screen" class="my-40 md:my-40 xl:my-20 2xl:my-20 justify-center items-center flex-col"> <Header size="xl" class="text-navy-peony text-center">Feeling social? Come chat with us</Header> diff --git a/apps/website/src/pages/index.astro b/apps/website/src/pages/index.astro index 14e59de..c2835ac 100644 --- a/apps/website/src/pages/index.astro +++ b/apps/website/src/pages/index.astro @@ -8,7 +8,7 @@ import Icon from '@components/icons/Icon.astro'; import configConst from '@config'; import Layout from '@layouts/Layout.astro'; --- -<Layout> +<Layout title="Main Page"> <Section wrapperClass="min-h-screen" class="relative isolate px-6 lg:px-8"> <div class="absolute inset-x-0 -top-40 -z-10 transform-gpu overflow-hidden blur-3xl sm:-top-80 opacity-50"> <svg diff --git a/apps/website/src/pages/legal/ip.astro b/apps/website/src/pages/legal/ip.astro index 13cfda5..f0192d1 100644 --- a/apps/website/src/pages/legal/ip.astro +++ b/apps/website/src/pages/legal/ip.astro @@ -10,7 +10,7 @@ This will be updated in the future, if necessary. `.trim(); --- -<Layout> +<Layout title="Intellectual Property Policy"> <Section hFull class="justify-center items-start pt-32"> <div class="flex flex-col justify-start items-start w-full text-navy-peony"> <Header> diff --git a/apps/website/src/pages/legal/privacy.astro b/apps/website/src/pages/legal/privacy.astro index d3940f2..61fbdff 100644 --- a/apps/website/src/pages/legal/privacy.astro +++ b/apps/website/src/pages/legal/privacy.astro @@ -10,7 +10,7 @@ This will be updated in the future, if necessary. `.trim(); --- -<Layout> +<Layout title="Privacy Policy"> <Section hFull class="justify-center items-start pt-32"> <div class="flex flex-col justify-start items-start w-full text-navy-peony"> <Header> diff --git a/apps/website/src/pages/legal/security.astro b/apps/website/src/pages/legal/security.astro index a80d3f9..0bbf50e 100644 --- a/apps/website/src/pages/legal/security.astro +++ b/apps/website/src/pages/legal/security.astro @@ -10,7 +10,7 @@ This will be updated in the future, if necessary. `.trim(); --- -<Layout> +<Layout title="Security Notice"> <Section hFull class="justify-center items-start pt-32"> <div class="flex flex-col justify-start items-start w-full text-navy-peony"> <Header> diff --git a/apps/website/src/pages/legal/terms.astro b/apps/website/src/pages/legal/terms.astro index 6ed2009..e894d76 100644 --- a/apps/website/src/pages/legal/terms.astro +++ b/apps/website/src/pages/legal/terms.astro @@ -10,7 +10,7 @@ This will be updated in the future, if necessary. `.trim(); --- -<Layout> +<Layout title="Terms of Service"> <Section hFull class="justify-center items-start pt-32"> <div class="flex flex-col justify-start items-start w-full text-navy-peony"> <Header> diff --git a/apps/website/src/pages/mods.astro b/apps/website/src/pages/mods.astro index ae1002c..adde3d7 100644 --- a/apps/website/src/pages/mods.astro +++ b/apps/website/src/pages/mods.astro @@ -14,7 +14,7 @@ const modrinthType = configConst.socials.modrinth.type; const modrinthUrl = `https://modrinth.com/${modrinthType}/${modrinthId}`; --- -<Layout> +<Layout title="Mods" description="Learn about our collection of over 16 mods!" > <Section maxWidth="1920px" wFull={true} wrapperClass="h-3/5" class="h-full mt-32 md:mt-28 flex flex-col justify-center items-center max-xl:px-0"> <div class="flex flex-col justify-center items-center max-w-full overflow-hidden"> <div class="flex flex-col justify-between items-center overflow-hidden h-auto lg:h-[290px] max-w-[1920px] relative"> diff --git a/apps/website/src/pages/oss.astro b/apps/website/src/pages/oss.astro index a54d929..b7b2715 100644 --- a/apps/website/src/pages/oss.astro +++ b/apps/website/src/pages/oss.astro @@ -39,7 +39,7 @@ const rightCodeBlock = leftCodeBlock; --- -<Layout> +<Layout title="Open Source" description="Our unwavering commitment to open source"> <Section maxWidth="1920px" wFull class="flex-row justify-center items-center h-screen md:min-h-[600px] relative"> <div class="codeblock_container -left-12"> <Code lang="java" theme="github-light" code={leftCodeBlock}></Code> diff --git a/apps/website/src/pages/projects/oneconfig/download.astro b/apps/website/src/pages/projects/oneconfig/download.astro index b8aee51..07279ba 100644 --- a/apps/website/src/pages/projects/oneconfig/download.astro +++ b/apps/website/src/pages/projects/oneconfig/download.astro @@ -7,7 +7,7 @@ import configConst from '@config'; import Layout from '@layouts/Layout.astro'; --- -<Layout> +<Layout title="Download OneConfig" description="Download OneConfig, our configuration library for Minecraft"> <Section wrapperClass="mt-36 -mb-28"> <div class="text-navy-peony flex flex-col gap-y-2"> diff --git a/apps/website/src/pages/projects/oneconfig/index.astro b/apps/website/src/pages/projects/oneconfig/index.astro index e8283f3..ed018cd 100644 --- a/apps/website/src/pages/projects/oneconfig/index.astro +++ b/apps/website/src/pages/projects/oneconfig/index.astro @@ -13,7 +13,7 @@ import { Code } from 'astro:components'; --- -<Layout> +<Layout title="OneConfig" description="Simple universal Minecraft modding configuration."> <Section class="flex-col justify-center items-center h-screen md:min-h-[600px]"> <div class="flex flex-col justify-center items-center gap-y-4"> <Logo size={56} logo="oneconfig.minimal"/> diff --git a/apps/website/src/pages/rss.xml.js b/apps/website/src/pages/rss.xml.js deleted file mode 100644 index fe05755..0000000 --- a/apps/website/src/pages/rss.xml.js +++ /dev/null @@ -1,16 +0,0 @@ -import rss from '@astrojs/rss'; -import { getCollection } from 'astro:content'; - -export async function GET(context) { - const posts = await getCollection('blog'); - - return rss({ - title: 'Polyfrost Blog', - description: 'Recieve Polyfrost updates here', - site: context.site, - items: posts.map(post => ({ - ...post.data, - link: `/blog/${post.slug}/`, - })), - }); -} diff --git a/apps/website/src/pages/rss.xml.ts b/apps/website/src/pages/rss.xml.ts new file mode 100644 index 0000000..db8cfff --- /dev/null +++ b/apps/website/src/pages/rss.xml.ts @@ -0,0 +1,30 @@ +import rss from '@astrojs/rss'; +import { getCollection } from 'astro:content'; +import type { APIRoute } from 'astro'; + +function sortPosts(a: { data: { publishDate: Date } }, b: { data: { publishDate: Date } }) { + return Number(b.data.publishDate) - Number(a.data.publishDate); +} + +function formatDate(date: Date) { + date.setUTCHours(0); + return date; +} + +export const GET: APIRoute = async (context) => { + const unsortedPosts = [...(await getCollection('blog'))]; + const posts = unsortedPosts.sort((a, b) => sortPosts(a, b)); + + return rss({ + title: 'Polyfrost Blog', + description: 'Recieve Polyfrost updates here', + site: context.site!.href, + items: posts.map(post => ({ + ...post.data, + title: post.data.title, + description: post.data.description, + pubDate: formatDate(post.data.publishDate), + link: `/blog/${post.slug}/`, + })), + }); +}; diff --git a/apps/website/src/process-env.ts b/apps/website/src/process-env.ts new file mode 100644 index 0000000..5106c6c --- /dev/null +++ b/apps/website/src/process-env.ts @@ -0,0 +1,14 @@ +import process from 'node:process'; +import { z } from 'zod'; + +const schema = z.object({}); + +export function env() { + const result = schema.safeParse(process.env); + if (!result.success) { + throw new Error(`Missing environment variables: ${result.error.issues + .map(issue => issue.path.join('.')).join(', ')}`); + } + + return result.data; +} diff --git a/apps/website/tsconfig.json b/apps/website/tsconfig.json index 139b7e0..1f976ee 100644 --- a/apps/website/tsconfig.json +++ b/apps/website/tsconfig.json @@ -2,6 +2,7 @@ "extends": "astro/tsconfigs/strict", "compilerOptions": { "composite": false, + "jsx": "preserve", "baseUrl": ".", "paths": { "@components/*": ["src/components/*"], @@ -12,5 +13,6 @@ "@config": ["config.ts"], "@styles/*": ["src/styles/*"] } - } + }, + "exclude": ["node_modules", "dist", ".vercel", "public"] } |