feat(changelog)/changelog site for logged in users

CHANGELOG.md

@@ -11,6 +11,7 @@
 ### 🎨 - Designendringer
 
 ## Neste versjon
+-- ✨ **Endringslogg**. La til en ny side for å se endringsloggene til Kvark og Lepton
 
 ## Versjon 2024.04.07
 - 🎨 **Design**. MUI er fjernet fra prosjektet, og TailwindCSS og Shadcn/ui er implementert.

src/AppRoutes.tsx

@@ -8,6 +8,7 @@ import { useSetRedirectUrl } from 'hooks/Misc';
 import { useHavePermission, useIsAuthenticated } from 'hooks/User';
 import { useAnalytics } from 'hooks/Utils';
 
+import Changelog from 'pages/Changelog';
 import Companies from 'pages/Companies';
 import EventDetails from 'pages/EventDetails';
 import Events from 'pages/Events';
@@ -169,6 +170,8 @@ const AppRoutes = () => {
         <Route element={<ForgotPassword />} path={URLS.forgotPassword} />
         <Route element={<SignUp />} path={URLS.signup} />
 
+        <Route element={<Changelog />} path={URLS.changelog} />
+
         <Route element={<Http404 />} path='*' />
       </Routes>
     </Suspense>

src/URLS.tsx

@@ -66,6 +66,7 @@ const URLS = {
   github: 'https://github.com/TIHLDE',
   pythons: 'https://pythons.tihlde.org/',
   pythonsLadies: 'https://pythons-damer.tihlde.org/',
+  changelog: '/endringslogg',
 };
 
 export default URLS;

src/components/miscellaneous/MarkdownRenderer.tsx

@@ -100,9 +100,10 @@ const components: any = {
 
 export type MarkdownRendererProps = {
   value?: string;
+  className?: string;
 };
 
-const MarkdownRenderer = ({ value }: MarkdownRendererProps) => {
+const MarkdownRenderer = ({ value, className }: MarkdownRendererProps) => {
   const skeletonWidthArray = useMemo(() => Array.from({ length: (value?.length || 100) / 90 + 1 }).map(() => 50 + 40 * Math.random()), [value]);
 
   return (
@@ -115,6 +116,7 @@ const MarkdownRenderer = ({ value }: MarkdownRendererProps) => {
         </div>
       }>
       <ReactMarkdown
+        className={className}
         components={components}
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         rehypePlugins={[rehypeRaw] as any}>

src/components/navigation/Navigation.tsx

@@ -73,6 +73,7 @@ const NavigationContent = ({ children }: NavigationProps) => {
               { title: 'Badges ledertavler', text: 'Se hvem som har flest badges', to: URLS.badges.index },
               { title: 'Galleri', text: 'Se alle bilder fra TIHLDE sine arrangementer', to: URLS.gallery },
               { title: 'Kontres', text: 'Reserver kontoret eller tilhørende utstyr', to: URLS.kontRes, external: true },
+              { title: 'Endringslogg', text: 'Se changeloggen til denne nettsiden', to: URLS.changelog },
             ],
             text: 'For medlemmer',
             type: 'dropdown',

src/components/navigation/Topbar.tsx

@@ -43,7 +43,7 @@ const TopBarItem = (props: NavigationItem) => {
     <NavigationMenuItem>
       <NavigationMenuTrigger>{props.text}</NavigationMenuTrigger>
       <NavigationMenuContent>
-        <ul className='grid gap-3 p-6 grid-cols-2 md:w-[400px] lg:w-[500px]'>
+        <ul className='grid gap-3 p-6 grid-cols-2 lg:grid-cols-3 md:w-[400px] lg:w-[600px]'>
           {props.items.map((item, index) => (
             <NavigationMenuListItem href={item.to} key={index} title={item.title}>
               {item.text}

src/pages/Changelog/index.tsx

@@ -0,0 +1,32 @@
+import { BACKEND_URL, FRONTEND_URL } from 'pages/Wiki/specials/Index';
+import ChangelogCard from 'pages/Wiki/specials/Index/ChangelogCard';
+
+import InfoCard from 'components/layout/InfoCard';
+import Page from 'components/navigation/Page';
+
+const Changelog = () => {
+  return (
+    <Page>
+      <div className='space-y-4 md:space-y-0 md:flex md:items-center md:justify-between mb-4'>
+        <div className='space-y-2'>
+          <h1 className='text-4xl md:text-5xl font-bold'>Endringslogg</h1>
+          <p className='md:text-lg text-muted-foreground'>Changelog på backend og frontend til TIHLDE-siden</p>
+        </div>
+        <InfoCard header='Tegnforklaring'>
+          <div>
+            <p>✨ Ny funksjonalitet</p>
+            <p>⚡ Forbedret funksjonalitet</p>
+            <p>🦟 Fikset en bug</p>
+            <p>🎨 Designendringer</p>
+          </div>
+        </InfoCard>
+      </div>
+      <div className='gap-4 flex flex-col'>
+        <ChangelogCard changelogURL={FRONTEND_URL} title='Hva har vi gjort i frontend?' />
+        <ChangelogCard changelogURL={BACKEND_URL} title='Hva har vi gjort i backend?' />
+      </div>
+    </Page>
+  );
+};
+
+export default Changelog;

src/pages/Wiki/specials/Index/ChangelogCard.tsx

@@ -8,9 +8,10 @@ import Expandable from 'components/ui/expandable';
 const LATEST_VERSION_INDEX = 3;
 const MARKDOWN_HEADER_DELIMITER = /(?=\n##\s *)/g;
 
-export type WorkDoneCardProps = {
+export type ChangelogCardProps = {
   changelogURL: string;
   title: string;
+  className?: string;
 };
 
 const getReleaseAsStringArray = async (changelogURL: string) => {
@@ -25,15 +26,15 @@ const getReleaseTitle = (changelog: string) => paragraphToArray(changelog)[0].su
 
 const getReleaseBody = (changelog: string) => paragraphToArray(changelog).slice(1).join('\n');
 
-const ChangelogCard = ({ title, changelogURL }: WorkDoneCardProps) => {
+const ChangelogCard = ({ title, changelogURL, className }: ChangelogCardProps) => {
   const { data = [] } = useQuery(['changelog', changelogURL], () => getReleaseAsStringArray(changelogURL));
   return (
-    <Card>
+    <Card className={className}>
       <CardHeader>
         <CardTitle>{title}</CardTitle>
       </CardHeader>
       <CardContent>
-        <MarkdownRenderer value={data[LATEST_VERSION_INDEX]} />
+        <MarkdownRenderer className='mb-4' value={data[LATEST_VERSION_INDEX]} />
         <Expandable icon={<Code className='h-4 w-4 stroke-[1.5px]' />} title='Tidligere endringer'>
           {data.slice(LATEST_VERSION_INDEX + 1).map((field, i) => (
             <Expandable icon={<Code className='h-4 w-4 stroke-[1.5px]' />} key={i} title={getReleaseTitle(field)}>

src/pages/Wiki/specials/Index/index.tsx

@@ -3,8 +3,8 @@ import ErrorCard from 'pages/Wiki/specials/Index/ErrorCard';
 
 import InfoCard from 'components/layout/InfoCard';
 
-const FRONTEND_URL = 'https://raw.githubusercontent.com/TIHLDE/Kvark/master/CHANGELOG.md';
-const BACKEND_URL = 'https://raw.githubusercontent.com/TIHLDE/Lepton/master/CHANGELOG.md';
+export const FRONTEND_URL = 'https://raw.githubusercontent.com/TIHLDE/Kvark/master/CHANGELOG.md';
+export const BACKEND_URL = 'https://raw.githubusercontent.com/TIHLDE/Lepton/master/CHANGELOG.md';
 
 const AboutIndex = () => (
   <>