Add what's new page

Author: MartinBraquet

common/src/constants.ts

@@ -1,10 +1,11 @@
 export const MIN_INT = Number.MIN_SAFE_INTEGER
 export const MAX_INT = Number.MAX_SAFE_INTEGER
 
-export const supportEmail = '[email protected]';
-// export const marketingEmail = '[email protected]';
+export const supportEmail = '[email protected]'
+// export const marketingEmail = '[email protected]'
 
-export const githubRepo = "https://github.com/CompassConnections/Compass";
+export const githubRepoSlug = "CompassConnections/Compass"
+export const githubRepo = `https://github.com/${githubRepoSlug}`
 export const githubIssues = `${githubRepo}/issues`
 
 export const paypalLink = "https://www.paypal.com/paypalme/CompassConnections"
@@ -16,9 +17,9 @@ export const redditLink = "https://www.reddit.com/r/CompassConnect"
 export const xLink = "https://x.com/compassmeet"
 export const formLink = "https://forms.gle/tKnXUMAbEreMK6FC6"
 
-export const pStyle = "mt-1 text-gray-800 dark:text-white whitespace-pre-line";
+export const pStyle = "mt-1 text-gray-800 dark:text-white whitespace-pre-line"
 
-export const IS_MAINTENANCE = false; // set to true to enable maintenance mode banner
+export const IS_MAINTENANCE = false // set to true to enable the maintenance mode banner
 
-export const MIN_BIO_LENGTH = 250;
+export const MIN_BIO_LENGTH = 250
 

web/components/page-base.tsx

@@ -1,4 +1,4 @@
-import {HomeIcon, QuestionMarkCircleIcon} from '@heroicons/react/outline'
+import {HomeIcon, NewspaperIcon, QuestionMarkCircleIcon} from '@heroicons/react/outline'
 import {
   GlobeAltIcon,
   HomeIcon as SolidHomeIcon,
@@ -117,11 +117,13 @@ const Social = {name: 'Social', href: '/social', icon: LinkIcon};
 const Organization = {name: 'Organization', href: '/organization', icon: GlobeAltIcon};
 const Vote = {name: 'Vote', href: '/vote', icon: MdThumbUp};
 const Contact = {name: 'Contact', href: '/contact', icon: FaEnvelope};
+const News = {name: "What's new", href: '/news', icon: NewspaperIcon};
 
 const base = [
   About,
   faq,
   Vote,
+  News,
   Social,
   Organization,
   Contact,

web/pages/news.tsx

@@ -0,0 +1,78 @@
+import React, {useEffect, useState} from "react"
+import axios from "axios"
+import ReactMarkdown from "react-markdown"
+import {PageBase} from "web/components/page-base"
+import {SEO} from "web/components/SEO"
+import {Col} from "web/components/layout/col"
+import {Title} from "web/components/widgets/title"
+import Link from "next/link"
+import {CompassLoadingIndicator} from "web/components/widgets/loading-indicator"
+import {githubRepoSlug} from "common/constants";
+
+type Release = {
+  id: number
+  name: string
+  tag_name: string
+  body: string
+  published_at: string
+  html_url: string
+}
+
+export default function WhatsNew() {
+  const [releases, setReleases] = useState([])
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState<string | null>(null)
+
+  useEffect(() => {
+    async function fetchReleases() {
+      try {
+        const response = await axios.get(
+          `https://api.github.com/repos/${githubRepoSlug}/releases`,
+          {
+            headers: {
+              // Optional: if hitting rate limits, use a GitHub token
+              // Authorization: `token ${process.env.REACT_APP_GITHUB_TOKEN}`
+            },
+          }
+        )
+        setReleases(response.data)
+      } catch (err) {
+        setError("Failed to fetch releases")
+      } finally {
+        setLoading(false)
+      }
+    }
+
+    fetchReleases()
+  }, [])
+
+  return (
+    <PageBase trackPageView={'news'} className={'mx-4'}>
+      <SEO
+        title={"What's new"}
+        description={'All news and code updates'}
+        url={`/news`}
+      />
+      <Title className="text-3xl">What's New</Title>
+      {loading ? <CompassLoadingIndicator/> :
+        error ? <p>{error}</p> :
+          <Col className="max-w-3xl mx-auto py-10 px-4 custom-link">
+            {releases.map((release: Release) => (
+              <div key={release.id} className="mb-10 border-b pb-6">
+                <div className="flex justify-between items-center">
+                  <h2 className="text-xl font-semibold">{release.name || release.tag_name}</h2>
+                  <span className="text-sm text-gray-500">
+                    {new Date(release.published_at).toLocaleDateString()}
+                  </span>
+                </div>
+                <div className="mt-4 prose text-ink-1000">
+                  <ReactMarkdown>{release.body || "_No release notes provided._"}</ReactMarkdown>
+                </div>
+                <Link href={release.html_url}>View on GitHub</Link>
+              </div>
+            ))}
+          </Col>
+      }
+    </PageBase>
+  )
+}