feat: print mode for syslog, renamed with redirects

- we moved year digits in front of the slug names for better organizing, also did redirects for them to avoid broken links
- added print friendly mode for syslog, figured out it was more work to implement for the whole site

Author: ahnl

app/syslog/[slug]/global.css

@@ -0,0 +1,38 @@
+
+/* Print styles */
+@media print {
+    html {
+      background-color: white;
+      color: black;
+    }
+  
+    body {
+      color: black;
+    }
+  
+    p, ul, ol, table {
+      color: black;
+    }
+  
+    a {
+      color: black;
+      text-decoration: underline;
+    }
+  
+    table td, table th {
+      border: 1px solid black;
+    }
+  
+    small, figcaption {
+      color: black !important;
+    }
+  
+    a::after{
+      content: " (" attr(href) ") ";
+    }
+  
+    .print-hide {
+      display: none !important;
+    }
+  }
+  

app/syslog/[slug]/page.tsx

@@ -28,6 +28,7 @@ import { userAgent } from 'next/server';
 import { headers } from 'next/headers';
 import { usePlausible } from 'next-plausible';
 import EditButton from './_components/EditPost';
+import './global.css';
 
 export const dynamicParams = false;
 export const dynamic = 'force-static';
@@ -132,13 +133,15 @@ export default async function Page({ params }: { params: { slug: string } }) {
                     <AvatarRow members={postDetails.authorsResolved || []} />
                     <span className={styles.middle}>
                         <span className={styles.authorsName}>
-                            {(postDetails.authorsResolved || []).map(member => member.name).join("; ")}
+                            {postDetails.authorsResolved && postDetails.authorsResolved.length > 4 
+                                ? `${postDetails.authorsResolved[0].name || "?"} et al.` 
+                                : (postDetails.authorsResolved || []).map(member => member.name).join("; ")}
                         </span>
                         <span>
                             {TimeUtil.formatDateInRelationToCurrent(new Date(postDetails.datetime))} — {postDetails.readingTime} min luku
                         </span>
                     </span>
-                    <div className={styles.editButton}>
+                    <div className={styles.editButton + " print-hide"}>
                         <EditButton small slug={postDetails.slug} />
                     </div>
                 </div>
@@ -175,12 +178,14 @@ export default async function Page({ params }: { params: { slug: string } }) {
                     <Separator>Loppu</Separator>
                 </div>
 
-                <Link href="/syslog">
-                    <CapsuleButton style={{marginRight: ".75em", marginTop: ".75em"}}>
-                        Kaikki postaukset 
-                    </CapsuleButton>
-                </Link>
-                <EditButton slug={postDetails.slug} />
+                <div className="print-hide">
+                    <Link href="/syslog">
+                        <CapsuleButton style={{marginRight: ".75em", marginTop: ".75em"}}>
+                            Kaikki postaukset 
+                        </CapsuleButton>
+                    </Link>
+                    <EditButton slug={postDetails.slug} />
+                </div>
                 {/*
                 <div style={{marginTop: "2rem"}}>
                     <Breadcrumbs
@@ -192,11 +197,13 @@ export default async function Page({ params }: { params: { slug: string } }) {
                 </div>
                 */}
             </Content>
-            <Content wider>
-                <div style={{marginTop: "3.5rem"}}>
-                    <PostsGrid posts={recentPosts}/>
-                </div>
-            </Content>
+            <div className='print-hide'>
+                <Content wider>
+                    <div style={{marginTop: "3.5rem"}}>
+                        <PostsGrid posts={recentPosts}/>
+                    </div>
+                </Content>
+            </div>
             <Footer />
         </FadeBackground>
     );

app/syslog/[slug]/style.module.scss

@@ -8,6 +8,9 @@
     height: 350px;
     border-radius: 0.5rem;
     margin: 1rem 0;
+    @media print {
+        margin: -1rem 0 1rem 0
+    }
     img {
         object-fit:cover;
         border-radius: 0.5rem;
@@ -31,12 +34,18 @@
         display: flex;
         flex-direction: column;
         font-size: .9em;
-        color: rgba(255,255,255,.5);
+        
         display: flex;
         gap: 4px;
+        span {
+            opacity: 0.6;
+            @media print {
+                opacity:1;
+            }
+        }
         .authorsName {
             font-weight: bold;
-            color: rgba(255,255,255,.8);
+            opacity: 1;
         }
     }
     .middle { flex: 1; }

components/FadeBackground/FadeBackground.module.css

@@ -28,4 +28,13 @@
     background: linear-gradient(180deg, rgba(13, 13, 13, 0) 0%, rgba(0,0,0,0.7) 40.67%, #0D0D0D 96.87%);
     backdrop-filter: blur(5px);
     top: 0px;
-}  
+}  
+
+@media print {
+    .fadeBackground:before  {
+        display: none;
+    }
+    .fadeBackground:after  {
+        display: none;
+    }
+}

components/Footer/Footer.tsx

@@ -62,7 +62,7 @@ function FooterRow({ children }: PropsWithChildren) {
 
 export function Footer() {
     return (
-        <div className={styles.footer}>
+        <div className={styles.footer + " print-hide"}>
             <Content noMargin wider>
                 <FooterRow>
                     <div>

components/Header/Header.tsx

@@ -64,7 +64,7 @@ export function Header({ pages, authenticated = {} }: HeaderProps) {
     const experimentEnabled = useMesiExperiment()   
     console.log(process.env.LOGIN_URL)
     return (
-        <div className={`${styles.header} ${open ? styles.open : ""}`}>
+        <div className={`${styles.header} ${open ? styles.open : ""} print-hide`}>
             <Logo className={styles.logo} link />
             <Navigation className={styles.navigation} pages={pages} open={open} setOpen={setOpen} />
             <div className={styles.navButtons}>

components/NavigateLink/NavigateLink.module.css

@@ -1,7 +1,6 @@
 .navigatelink {
-    color: white;
     font-family: 'Poppins';
-    color: rgba(255,255,255, 0.9);
+    opacity: 0.9;
     display: block;
     margin-bottom: 1em;
 }

components/Navigation/Navigation.tsx

@@ -46,7 +46,7 @@ export function Navigation({ className, pages, open, setOpen }: NavigationProps)
 
     const openClassName = open ? styles.open : ""
     return (
-        <div className={className ? `${className} ${openClassName}` : openClassName}>
+        <div className={openClassName + ' ' + className}>
 
             <div className={styles.mobileHeader}>
                 {open ?

components/Separator/Separator.module.css

@@ -18,4 +18,15 @@
 
 .separator:not(:empty)::after {
     margin-left: 1em;
-}
+}
+
+@media print {
+    .separator {
+        color: #000;
+    }
+
+    .separator::before,
+    .separator::after {
+        border-bottom: 1px solid #000;
+    }
+}

next.config.js

@@ -7,7 +7,7 @@ import withPlaiceholder from "@plaiceholder/next";
 const config = {
   reactStrictMode: true,
   images: {
-    domains: ['localhost', 'api.testausserveri.fi', 'avatars.githubusercontent.com', 'testausauto.fi'],
+    domains: ['localhost', 'api.testausserveri.fi', 'avatars.githubusercontent.com', 'testausauto.fi', 'cdn.discordapp.com'],
   },
   async rewrites() {
 		return [
@@ -25,7 +25,27 @@ const config = {
     styledComponents: true
   },
   async redirects() {
+    // syslog slug changes april 2025
+    const syslogSlugChanges = {
+      "stipendit-2023": "2023-stipendit",
+      "disobey-collab-2025": "2025-disobey-collab",
+      "ngh-challenge-2025": "2025-ngh-challenge",
+      "team-finland-2024": "2024-team-finland",
+      "testausmokki-2024": "2024-testausmokki",
+      "testausserveri-disobey-2025": "2025-testausserveri-disobey",
+      "testitapahtuma-1": "2025-testitapahtuma",
+      "vectorama-ctf": "2025-vectorama-ctf"
+    };
+
+    const syslogSlugChangesRules = Object.entries(syslogSlugChanges).map(([oldSlug, newSlug]) => ({
+      source: `/syslog/${oldSlug}`,
+      destination: `/syslog/${newSlug}`,
+      permanent: true
+    }));
+
+    // all rules
     return [
+      ...syslogSlugChangesRules,
       { "source": "/.well-known/webfinger", "destination": "https://mastodon.testausserveri.fi/.well-known/webfinger", permanent: true },
       { "source": "/github", "destination": "https://api.testausserveri.fi/v1/github/authorize", permanent: true },
       { "source": "/jasenhakemus", "destination": "/apply", permanent: false },