Updates and new RSS feature (#3)

* Updates and new RSS feature * Update Navbar and constants Remove commented out code in Navbar.astro and update ROADMAP_URL constant in constants.ts to point to the new GitHub roadmap project.
withstudiocms · Nov 25, 2024 · c23fe5f · c23fe5f
1 parent 294b51a
commit c23fe5f
Show file tree

Hide file tree

Showing 11 changed files with 273 additions and 22 deletions.
diff --git a/package.json b/package.json
@@ -16,21 +16,22 @@
   "dependencies": {
     "@astrojs/check": "^0.9.4",
     "@astrojs/tailwind": "^5.1.2",
-    "astro": "^4.16.14",
-    "sharp": "^0.33.5",
-    "typescript": "^5.6.3",
+    "@astrojs/rss": "^4.0.9",
+    "@biomejs/biome": "^1.9.4",
     "@fontsource-variable/onest": "^5.1.0",
     "@iconify-json/heroicons": "^1.2.1",
-    "@biomejs/biome": "^1.9.4",
+    "@resvg/resvg-js": "^2.6.2",
     "@tailwindcss/typography": "^0.5.15",
+    "astro": "^4.16.14",
     "astro-icon": "^1.1.2",
+    "html-entities": "^2.5.2",
     "motion": "^11.11.17",
+    "satori": "^0.12.0",
+    "satori-html": "^0.3.2",
+    "sharp": "^0.33.5",
+    "tailwindcss": "^3.4.15",
     "tailwind-merge": "^2.5.4",
     "tailwind-scrollbar": "^3.1.0",
-    "tailwindcss": "^3.4.15",
-    "@resvg/resvg-js": "^2.6.2",
-    "html-entities": "^2.5.2",
-    "satori": "^0.12.0",
-    "satori-html": "^0.3.2"
+    "typescript": "^5.6.3"
   }
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/public/styles/rss.xsl b/public/styles/rss.xsl
diff --git a/src/components/Footer.astro b/src/components/Footer.astro
@@ -1,6 +1,6 @@
 ---
 import { Icon } from 'astro-icon/components';
-import { DISCORD_URL, GITHUB_URL } from '../constants';
+import { DISCORD_URL, GITHUB_URL, SPONSOR_URL } from '../constants';
 ---
 
 <footer
@@ -33,6 +33,17 @@ import { DISCORD_URL, GITHUB_URL } from '../constants';
           class='h-8 w-8 transition duration-200 ease-in-out hover:scale-110'
         />
       </a>
+      <a
+        class='hover:underline'
+        href={SPONSOR_URL}
+        rel='external nofollow'
+        aria-label='Patreon link'
+      >
+        <Icon
+          name='patreon'
+          class='h-6 w-6 transition duration-200 ease-in-out hover:scale-110'
+        />
+      </a>
     </nav>
   </div>
 </footer>
diff --git a/src/components/Head.astro b/src/components/Head.astro
@@ -2,44 +2,58 @@
 import ThemeManager from './ThemeManager.astro';
 import '@fontsource-variable/onest';
 import onestWoff2 from '@fontsource-variable/onest/files/onest-latin-wght-normal.woff2?url';
-
-const OgBanner = new URL('/og.jpg', Astro.url);
 interface Props {
 	title?: string;
 	desc?: string;
 	ogImage?: URL | undefined;
 }
 
+const OgBanner = new URL('/og.jpg', Astro.url);
+
+const RSSFeed = new URL('rss.xml', Astro.site);
+
 const { title, desc = 'A dedicated CMS for Astro DB.', ogImage = OgBanner } = Astro.props;
 
 const studioTitle = `StudioCMS${title ? ` - ${title}` : ''}`;
 ---
 
 <head>
   <meta charset='utf-8' />
-  <link rel='shortcut icon' type='image/svg+xml' href='/favicon.svg' />
   <meta name='viewport' content='width=device-width, initial-scale=1' />
   <meta name='generator' content={Astro.generator} />
+
   <title>{studioTitle}</title>
   <meta name='description' content={desc} />
-  <link rel="canonical" href={Astro.url} />
+
   <meta property='og:title' content={studioTitle} />
   <meta property='og:description' content={desc} />
   <meta property='og:image' content={ogImage} />
   <meta property='og:url' content={Astro.url} />
   <meta property='og:type' content='website' />
+
   <meta name='twitter:card' content='summary_large_image' />
   <meta name="twitter:url" content={Astro.url} />
   <meta name='twitter:title' content={studioTitle} />
   <meta name='twitter:description' content={desc} />
   <meta name='twitter:image' content={ogImage} />
+  <meta name='twitter:creator' content='withstudiocms' />
+  <meta name='twitter:site' content='withstudiocms' />
+
+  <link rel="canonical" href={Astro.url} />
+  <link rel='shortcut icon' type='image/svg+xml' href='/favicon.svg' />
   <link rel="preload" as="font" type="font/woff2" crossorigin="anonymous" href={onestWoff2} />
+  <link rel="alternate" type="application/rss+xml" title={studioTitle} href={RSSFeed} />
 
   <ThemeManager defaultTheme="dark" />
+
+  <!-- 
+  
+  Disabled until new Analytics provider is available
+
   <script 
     is:inline 
     defer 
     src="https://analytics.studiocms.xyz/script.js" 
     data-website-id="e3a84c8d-d45a-49d9-932b-00eeb63f8c48">
-  </script>
+  </script> -->
 </head>
diff --git a/src/components/Navbar.astro b/src/components/Navbar.astro
@@ -1,6 +1,6 @@
 ---
 import { Icon } from 'astro-icon/components';
-import { DISCORD_URL, DOCS_URL, GITHUB_URL } from '../constants';
+import { DISCORD_URL, DOCS_URL, GITHUB_URL, SPONSOR_URL } from '../constants';
 import ThemeSelect from './ThemeSelect.astro';
 ---
 
@@ -74,6 +74,20 @@ import ThemeSelect from './ThemeSelect.astro';
             />
           </a>
         </li>
+        <li>
+          <a
+            class="navbar-icon"
+            href={SPONSOR_URL}
+            rel='external nofollow'
+            aria-label='GitHub link'
+            title="Patreon"
+            >
+            <Icon
+              name='patreon'
+              class='h-6 w-6 transition duration-200 ease-in-out hover:scale-110'
+            />
+          </a>
+        </li>
         <li>
           <ThemeSelect />
         </li>

diff --git a/src/constants.ts b/src/constants.ts
@@ -1,7 +1,7 @@
 // Keywords for the marquee
 export const marqueeKeywords = [
 	'#CMS',
-	'#Astrolicious',
+	'#withstudiocms',
 	'#Astro',
 	'#AstroDB',
 	'#libSQL',
@@ -12,10 +12,9 @@ export const marqueeKeywords = [
 
 // Links
 export const GITHUB_URL = 'https://github.com/withstudiocms/studiocms';
-export const SPONSOR_URL = 'https://github.com/withstudiocms';
+export const SPONSOR_URL = 'https://patreon.com/StudioCMS';
 export const DISCORD_URL = 'https://chat.studiocms.dev/';
 export const DOCS_URL = 'https://docs.studiocms.dev/';
-export const ROADMAP_URL =
-	'https://roadmap.studiocms.xyz/spaces/issues/e0f1c24900e44954ba3d93e46d8d8b9d/?board=kanban';
+export const ROADMAP_URL = 'https://github.com/orgs/withstudiocms/projects/1';
 
 // Testimonials and Features have been moved to content collections
diff --git a/src/icons/patreon.svg b/src/icons/patreon.svg
diff --git a/src/pages/blog/index.astro b/src/pages/blog/index.astro
@@ -1,5 +1,6 @@
 ---
 import { getCollection } from 'astro:content';
+import { Icon } from 'astro-icon/components';
 import BlogCard from '../../components/BlogCard.astro';
 import BaseLayout from '../../layouts/BaseLayout.astro';
 
@@ -12,7 +13,7 @@ blogPosts.sort(({ data: { publishDate: a } }, { data: { publishDate: b } }) => {
 
 <BaseLayout title='Blog'>
     <section class='studiocms-container mx-auto py-12 px-8 md:px-0 min-h-[calc(100vh_-_70px)]'>
-        <h1 class="text-5xl font-bold mb-8">The StudioCMS Blog</h1>
+        <h1 class="text-5xl font-bold mb-8">The StudioCMS Blog <a href="/rss.xml" title="RSS Feed"><Icon name='heroicons:rss' class='inline' /></a></h1>
         <p class="mb-12 text-lg">Get the latest news from StudioCMS</p>
         <div class="grid md:grid-cols-3 gap-8 md:gap-4">
             {

diff --git a/src/pages/index.astro b/src/pages/index.astro
@@ -77,7 +77,7 @@ const features = (await getCollection('features')).sort(
         href={SPONSOR_URL}
       >
         <h3 class='text-center text-2xl'>Sponsor it</h3>
-        <Icon name='sponsor' class='text-4xl' />
+        <Icon name='patreon' class='text-3xl' />
       </a>
     </div>
   </section>

diff --git a/src/pages/rss.xml.ts b/src/pages/rss.xml.ts
@@ -0,0 +1,38 @@
+import { getCollection, getEntry } from 'astro:content';
+import rss from '@astrojs/rss';
+import type { APIContext, APIRoute } from 'astro';
+
+import { experimental_AstroContainer as AstroContainer } from 'astro/container';
+
+export const GET: APIRoute = async ({ site }: APIContext) => {
+	// Get the blog collection
+	const blog = await getCollection('blog');
+
+	// Create an Astro container to render the blog post content
+	const container = await AstroContainer.create();
+
+	return rss({
+		title: 'StudioCMS',
+		description:
+			'A dedicated CMS for Astro and Astro DB. Built from the ground up by the Astro community.',
+		site: site,
+		trailingSlash: false,
+		stylesheet: '/styles/rss.xsl',
+		items: await Promise.all(
+			blog
+				.sort(
+					// Sort the blog posts by publish date from newest to oldest
+					({ data: { publishDate: a } }, { data: { publishDate: b } }) => b.getTime() - a.getTime()
+				)
+				.map(async ({ render, slug, data: { title, description, tags, publishDate, author } }) => ({
+					title: title,
+					description: description,
+					pubDate: publishDate,
+					categories: tags,
+					author: (await getEntry(author.collection, author.id)).data.link,
+					link: `${site}blog/${slug}`,
+					content: await container.renderToString((await render()).Content),
+				}))
+		),
+	});
+};