add releases page

isp-site/src/index.js

@@ -9,6 +9,7 @@ import { InstUISettingsProvider, canvas, View } from "@instructure/ui";
 import Links from "routes/links";
 import MDUI from "routes/mdui";
 import Markdown from "routes/markdown";
+import Releases from "routes/releases";
 import ErrorPage from "routes/error";
 import { ParentBrands } from "variables/brands";
 import RedirectTo from "routes/redirectTo";
@@ -78,6 +79,18 @@ routes.push({
 	],
 });
 
+// Release notes page
+routes.push({
+	path: "/releases",
+	element: <Releases />,
+	children: [
+		{
+			path: ":language",
+			element: <Releases />,
+		},
+	],
+});
+
 // All others
 routes.push({
 	path: "*",

isp-site/src/routes/markdown.jsx

@@ -18,7 +18,6 @@ import {
 	Img,
 	Table,
 	Checkbox,
-	IconCloudDownloadLine,
 } from "@instructure/ui";
 import RenderTopNavBar from "components/RenderTopNavBar";
 import RenderFooter from "components/RenderFooter";
@@ -85,15 +84,15 @@ export default function Markdown({ readme }) {
 				margin="0 auto"
 			>
 				<style>{css}</style>
-				<div className="markdown">
+				<View as="div" className="markdown">
 					<ReactMarkdown
 						children={content}
 						remarkPlugins={[remarkGfm, remarkGemoji]}
 						rehypePlugins={[rehypeRaw]}
 						allowedElements={allowedElements}
 						components={mdtoui}
 					/>
-				</div>
+				</View>
 			</View>
 			<RenderFooter language={l} />
 		</>

isp-site/src/routes/releases.jsx

@@ -0,0 +1,79 @@
+import React, { useState, useEffect } from "react";
+import ReactMarkdown from "react-markdown";
+import remarkGfm from "remark-gfm";
+import remarkGemoji from "remark-gemoji";
+import rehypeRaw from "rehype-raw";
+import global from "variables/globals";
+import {
+	View,
+	Link,
+	Text,
+	List,
+	Heading,
+	SourceCodeEditor,
+	Byline,
+	Avatar,
+	ToggleGroup,
+	Img,
+	Table,
+	Checkbox,
+} from "@instructure/ui";
+import { IconRssLine } from "@instructure/ui-icons";
+import allowedElements from "variables/allowedElements";
+import mdtoui from "components/mdtoui";
+import { useParams } from "react-router-dom";
+import strings from "strings/releases";
+import { getStrings, getLang } from "utils/langs";
+import RenderFooter from "components/RenderFooter";
+import RenderTopNavBar from "components/RenderTopNavBar";
+import { printReleases } from "utils/releases";
+
+export default function Releases() {
+	const l = getLang(useParams().language);
+	const s = getStrings(strings, l);
+
+	const atom = `https://github.com/${global.owner}/${global.repo}/releases.atom`;
+
+	const css = "hr {border: 1px solid currentColor;}";
+
+	const [content, setContent] = useState(`${s.loading}`);
+	useEffect(() => {
+		printReleases()
+			.then((text) => {
+				setContent(text);
+			})
+			.catch((error) => console.error(error));
+	});
+
+	return (
+		<>
+			<RenderTopNavBar language={l} />
+			<View
+				id="main"
+				as="div"
+				padding="medium medium xx-large"
+				minWidth="20rem"
+				maxWidth="59.25rem"
+				margin="0 auto"
+			>
+				<Heading level="h1">
+					<Link href={atom}>
+						<IconRssLine size="small" color="warning" title={s.subscribe} />
+					</Link>{" "}
+					{s.releases}
+				</Heading>
+				<style>{css}</style>
+				<View as="div" className="markdown">
+					<ReactMarkdown
+						children={content}
+						remarkPlugins={[remarkGfm, remarkGemoji]}
+						rehypePlugins={[rehypeRaw]}
+						allowedElements={allowedElements}
+						components={mdtoui}
+					/>
+				</View>
+			</View>
+			<RenderFooter language={l} />,
+		</>
+	);
+}

isp-site/src/strings/releases.js

@@ -0,0 +1,21 @@
+const strings = {
+	releases: {
+		EN: "Releases",
+		ES_LA: "Versiones",
+		PT_BR: "Lançamentos",
+		DE: "Veröffentlichungen",
+	},
+	loading: {
+		EN: "Loading...",
+		ES_LA: "Cargando...",
+		PT_BR: "Carregando...",
+		DE: "Wird geladen...",
+	},
+	subscribe: {
+		EN: "Subscribe",
+		ES_LA: "Suscríbete",
+		PT_BR: "Inscreva-se",
+		DE: "Abonnieren Sie",
+	},
+};
+export default strings;

isp-site/src/utils/releases.js

@@ -0,0 +1,35 @@
+import global from "variables/globals";
+
+async function getGithubReleases(owner, repo) {
+	const apiUrl = `${global.api}/repos/${owner}/${repo}/releases`;
+	try {
+		const response = await fetch(apiUrl, {
+			method: "GET",
+			headers: {
+				Accept: "application/vnd.github.v3+json",
+				Authorization: process.env.REACT_APP_GITHUB_TOKEN
+					? `token ${process.env.REACT_APP_GITHUB_TOKEN}`
+					: "",
+			},
+		});
+		const data = await response.json();
+
+		return data.map(buildRelease).join("\r\n\r\n").slice(0, -3);
+	} catch (error) {
+		console.error(`Error: ${error.message}`);
+		return null;
+	}
+}
+
+function buildRelease(release) {
+	return `
+## ${release.name}\r\n
+${release.body}\r\n
+---`;
+}
+
+export async function printReleases() {
+	const owner = global.owner;
+	const repo = global.repo;
+	return getGithubReleases(owner, repo);
+}