feat(frontend/blog): ✨ Blog pages

BuildTheEarth · Sep 28, 2024 · 54efcde · 54efcde
1 parent 5d0b974
commit 54efcde
Show file tree

Hide file tree

Showing 8 changed files with 303 additions and 37 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -19,6 +19,7 @@
 		"frontend/teams",
 		"api/claims",
 		"api/core",
-		"frontend/v2"
+		"frontend/v2",
+		"api/blog"
 	]
 }
diff --git a/apps/frontend/src/components/v2/header/index.tsx b/apps/frontend/src/components/v2/header/index.tsx
@@ -1,11 +1,11 @@
 import { Anchor, Avatar, Box, Burger, Button, CSSProperties, Group, Transition } from '@mantine/core';
+import { signIn, useSession } from 'next-auth/react';
 
 import { useScrollPosition } from '@/hooks/useScrollPosition';
 import { useUser } from '@/hooks/useUser';
 import logo from '@/public/logo.gif';
 import classes from '@/styles/components/v2/Header.module.css';
 import { useDisclosure } from '@mantine/hooks';
-import { useSession } from 'next-auth/react';
 import { useTranslation } from 'next-i18next';
 import Image from 'next/image';
 import router from 'next/router';
@@ -53,9 +53,14 @@ const Header = ({ links }: { links: { link: string; translation: string }[] }) =
 				</Group>
 				<Group>
 					{session.status !== 'authenticated' ? (
-						<Button className={classes.button} onClick={() => router.push('/join')}>
-							Join us!
-						</Button>
+						<>
+							<Button className={classes.button} onClick={() => router.push('/join')}>
+								Join us!
+							</Button>
+							<Button onClick={() => signIn('keycloak')} variant="default">
+								Login
+							</Button>
+						</>
 					) : (
 						<HeaderMenu t={t}>
 							<Button

diff --git a/apps/frontend/src/pages/_document.tsx b/apps/frontend/src/pages/_document.tsx
@@ -2,6 +2,7 @@ import { Head, Html, Main, NextScript } from 'next/document';
 
 import { ColorSchemeScript } from '@mantine/core';
 import { createGetInitialProps } from '@mantine/next';
+import Script from 'next/script';
 
 export const getInitialProps = createGetInitialProps();
 
@@ -10,6 +11,8 @@ export default function Document() {
 		<Html lang="en">
 			<Head>
 				<ColorSchemeScript defaultColorScheme="auto" />
+				<Script src="/path/to/highlight.min.js" />
+				<script>hljs.highlightAll();</script>
 			</Head>
 			<body>
 				<Main />

diff --git a/apps/frontend/src/pages/blog/[slug]/index.tsx b/apps/frontend/src/pages/blog/[slug]/index.tsx
@@ -1,36 +1,53 @@
 /* eslint-disable no-undef */
 
 import Page from '@/components/Page';
+import classes from '@/styles/blog.module.css';
+import highlightClasses from '@/styles/highlight.module.css';
 import fetcher from '@/utils/Fetcher';
-import { Title } from '@mantine/core';
+import { Box } from '@mantine/core';
+import hljs from 'highlight.js';
 import { NextPage } from 'next';
 import { serverSideTranslations } from 'next-i18next/serverSideTranslations';
-import { useRouter } from 'next/router';
+import { useEffect } from 'react';
 
-const Newsletter: NextPage = ({ data }: any) => {
-	const router = useRouter();
-	const slug = router.query.slug;
-	// const { data } = useSWR(`/blog/${slug}?slug=true`);
+const Blog: NextPage = ({ data }: any) => {
+	useEffect(() => {
+		hljs.initHighlighting();
+	}, []);
+
+	if (!data)
+		return (
+			<Page
+				head={{
+					title: 'huh',
+					image: '',
+				}}
+			>
+				idk
+				<pre>{JSON.stringify(data, null, 2)}</pre>
+			</Page>
+		);
 
 	return (
 		<Page
 			head={{
-				title: data?.title,
-				image: `https://cdn.buildtheearth.net/uploads/${data?.thumbnail?.name}`,
+				title: data.title,
+				image: data.thumbnail,
 			}}
-			description={`BuildTheEarth Newsletter Issue ${data?.id}, ${new Date(data?.publishedAt).toLocaleDateString()}`}
+			description={`BuildTheEarth Blog: ${data.title}, ${new Date(data.publishedAt).toLocaleDateString()}`}
 		>
-			<Title>{data?.title}</Title>
-			<p>{data?.summary}</p>
-			{data?.content && <div dangerouslySetInnerHTML={{ __html: data.content }} />}
+			<Box
+				dangerouslySetInnerHTML={{ __html: data.content }}
+				className={classes.parent + ' ' + highlightClasses.wrapper}
+			/>
 		</Page>
 	);
 };
 
-export default Newsletter;
+export default Blog;
 
 export async function getStaticProps({ locale, params }: any) {
-	const res = await fetcher(`/blog/${params.slug}?slug=true`);
+	const res = await fetcher(`/blog/${params.slug}`);
 	return {
 		props: {
 			data: res,
@@ -47,6 +64,6 @@ export async function getStaticPaths() {
 				slug: blogPost.slug,
 			},
 		})),
-		fallback: true,
+		fallback: false,
 	};
 }
diff --git a/apps/frontend/src/pages/blog/index.tsx b/apps/frontend/src/pages/blog/index.tsx
@@ -1,6 +1,7 @@
 /* eslint-disable no-undef */
 
 import {
+	Badge,
 	Breadcrumbs,
 	Card,
 	CardSection,
@@ -43,28 +44,29 @@ const NewsletterList: NextPage = ({ data }: any) => {
 				Discussions.
 			</p>
 			<Grid mt="xl">
-				{data?.slice(activePage * 8 - 8, activePage * 8).map((blogPost: any, i: number) => (
-					<GridCol key={blogPost.id} span={4}>
-						<Card onClick={() => router.push(`/blog/${blogPost.slug}`)} withBorder h="100%" w="100%">
+				{data?.slice(activePage * 8 - 8, activePage * 8).map((post: any, i: number) => (
+					<GridCol key={post.id} span={4}>
+						<Card onClick={() => router.push(`/blog/${post.slug}`)} withBorder h="100%" w="100%">
 							<CardSection withBorder>
-								<Image
-									src={`https://cdn.buildtheearth.net/uploads/${blogPost.thumbnail?.name}`}
-									alt={'Thumbnail Image'}
-									height={100}
-								/>
+								<Image src={post.thumbnail} alt={'Thumbnail Image'} height={100} />
 							</CardSection>
 							<Text fz="lg" mt="md" fw={'bold'} lineClamp={2}>
-								{blogPost.title}
-							</Text>
-
-							<Text fz="sm" mt="xs" lineClamp={4} h={'100px'}>
-								{blogPost.summary.slice(0, 150)}
-								{blogPost.summary.length > 150 && '...'}
+								{post.title}
 							</Text>
+							<Group mt="sm" gap="xs">
+								{post.metadata?.tags
+									?.split(', ')
+									.slice(0, 3)
+									.map((tag: string) => (
+										<Badge key={tag} variant="dot" size="sm">
+											{tag}
+										</Badge>
+									))}
+							</Group>
 							<CardSection withBorder p="md" mt="md">
 								<Breadcrumbs separator="·" fz="sm" c="dimmed">
-									{new Date(blogPost.publishedAt).toLocaleDateString()}
-									{blogPost.author?.username}
+									{new Date(post.publishedAt).toLocaleDateString()}
+									{post.author?.name}
 								</Breadcrumbs>
 							</CardSection>
 						</Card>

diff --git a/apps/frontend/src/styles/blog.module.css b/apps/frontend/src/styles/blog.module.css
@@ -0,0 +1,126 @@
+.parent {
+	overflow: hidden;
+	max-width: 100%;
+	width: 100%;
+	word-break: break-word;
+	text-overflow: ellipsis;
+
+	img {
+		max-width: 100%;
+		height: auto;
+		border-radius: var(--mantine-radius-default);
+		display: block;
+	}
+
+	table {
+		--table-vertical-spacing: calc(0.4375rem * var(--mantine-scale));
+
+		@mixin dark {
+			--table-hover-color: var(--mantine-color-dark-5);
+			--table-striped-color: var(--mantine-color-dark-6);
+			--table-border-color: var(--mantine-color-dark-4);
+		}
+
+		@mixin light {
+			--table-hover-color: var(--mantine-color-gray-1);
+			--table-striped-color: var(--mantine-color-gray-0);
+			--table-border-color: var(--mantine-color-gray-3);
+		}
+
+		width: 100%;
+		border-collapse: collapse;
+		line-height: var(--mantine-line-height);
+		font-size: var(--mantine-font-size-sm);
+		table-layout: auto;
+		caption-side: bottom;
+		border: none;
+		display: table;
+		text-indent: initial;
+		border-spacing: 2px;
+
+		thead {
+			tr {
+				border-bottom: calc(0.0625rem * var(--mantine-scale)) solid var(--table-border-color);
+				background: transparent;
+			}
+			th:not(:last-child) {
+				border-inline-end: calc(0.0625rem * var(--mantine-scale)) solid var(--table-border-color);
+			}
+
+			th {
+				padding: var(--table-vertical-spacing) var(--mantine-spacing-xs);
+				text-align: left;
+			}
+		}
+
+		tbody {
+			--tr-hover-bg: var(--table-hover-color);
+			tr:not(:last-child) {
+				border-bottom: calc(0.0625rem * var(--mantine-scale)) solid var(--table-border-color);
+			}
+
+			tr:hover {
+				background-color: var(--tr-hover-bg);
+			}
+
+			td:not(:last-child) {
+				border-inline-end: calc(0.0625rem * var(--mantine-scale)) solid var(--table-border-color);
+			}
+
+			td {
+				padding: var(--table-vertical-spacing) var(--mantine-spacing-xs);
+			}
+		}
+	}
+
+	code:not(pre *) {
+		--code-background: var(--mantine-color-buildtheearth-light);
+
+		@mixin dark {
+			--code-text-color: var(--mantine-color-white);
+		}
+
+		@mixin light {
+			--code-text-color: var(--mantine-color-black);
+		}
+
+		background: var(--code-background);
+		color: var(--code-text-color);
+		line-height: var(--mantine-line-height);
+		padding: 2px calc(var(--mantine-spacing-xs) / 2);
+		border-radius: var(--mantine-radius-sm);
+		font-size: var(--mantine-font-size-xs);
+		margin: 0;
+		overflow: auto;
+		font-weight: normal;
+	}
+
+	blockquote {
+		--bq-bg-light: rgba(78, 83, 183, 0.07);
+		--bq-bg-dark: rgba(78, 83, 183, 0.06);
+		--bq-bd: var(--mantine-color-buildtheearth-filled);
+		--bq-icon-size: calc(3rem * var(--mantine-scale));
+		--bq-radius: var(--mantine-radius-default);
+		--bq-border: 3px solid var(--bq-bd);
+
+		@mixin dark {
+			background: var(--bq-bg-dark);
+		}
+		@mixin light {
+			background: var(--bq-bg-dark);
+		}
+
+		width: fit-content;
+		margin: var(--mantine-spacing-sm) 0;
+		border-inline-start: var(--bq-border);
+		border-start-end-radius: var(--bq-radius);
+		border-end-end-radius: var(--bq-radius);
+		padding: var(--mantine-spacing-sm) calc(1.375rem * var(--mantine-scale));
+	}
+
+	hr {
+		border-color: light-dark(var(--mantine-color-gray-3), var(--mantine-color-dark-4));
+		border-width: calc(0.0625rem * var(--mantine-scale));
+		margin: var(--mantine-spacing-md) 0;
+	}
+}
diff --git a/apps/frontend/src/styles/globals.css b/apps/frontend/src/styles/globals.css
@@ -35,7 +35,7 @@ a {
 	text-decoration: none;
 }
 
-* {
+* & :not(code) {
 	box-sizing: border-box;
 	font-family:
 		var(--font-inter),
@@ -76,6 +76,7 @@ a {
 	font-size: 14px;
 	font-family: 'Inter';
 }
+
 .mapboxgl-popup-tip {
 	border-top-color: light-dark(var(--mantine-color-white), var(--mantine-color-dark-7));
 }
@@ -109,6 +110,7 @@ a {
 	}
 	border-radius: var(--mantine-radius-xs);
 }
+
 .mapboxgl-style-switcher {
 	border-radius: var(--mantine-radius-xs) !important;
 	background-image: url('/icons/layers-subtract.svg') !important;
@@ -125,6 +127,7 @@ a {
 .mapboxgl-ctrl-zoom-out span {
 	background-image: url('/icons/minus.svg') !important;
 }
+
 .mapboxgl-ctrl-compass span {
 	cursor: pointer;
 	background-image: url('/icons/map-north.svg') !important;