ELIXIR-NO · yasinmiran · Feb 26, 2025 · Feb 28, 2025 · Feb 28, 2025
diff --git a/package.json b/package.json
@@ -26,6 +26,7 @@
     "@tailwindcss/forms": "^0.5.7",
     "animate.css": "^4.1.1",
     "astro": "^4.7.0",
+    "astro-seo": "^0.8.4",
     "dayjs": "^1.11.12",
     "dompurify": "^3.1.7",
     "leaflet": "^1.9.4",
@@ -43,10 +44,10 @@
   "devDependencies": {
     "@tailwindcss/typography": "^0.5.14",
     "@types/dompurify": "^3.0.5",
-    "npm-run-all": "^4.1.5",
-    "pagefind": "^1.1.1",
     "@types/lodash": "^4.17.12",
     "@types/react": "^18.2.37",
-    "@types/react-dom": "^18.2.15"
+    "@types/react-dom": "^18.2.15",
+    "npm-run-all": "^4.1.5",
+    "pagefind": "^1.1.1"
   }
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/components/navigation-list.astro b/src/components/navigation-list.astro
@@ -4,15 +4,15 @@ import React from "react";
 const { links } = Astro.props;
 ---
 
-<div class="overflow-hidden bg-slate-50 dark:bg-dark-surface shadow sm:rounded-md">
+<div class="overflow-hidden bg-slate-50/25 dark:bg-dark-surface shadow sm:rounded-md">
     <ul role="list" class="divide-y divide-gray-200 dark:divide-gray-700">
         {links?.map((link) => {
             const pathname = new URL(Astro.request.url).pathname;
             const isActive = pathname === link.href;
             return (
                     <li>
                         <a href={link.href}
-                           class={`text-base block w-full h-full py-2 px-6 hover:bg-gray-50 dark:hover:bg-gray-800/50 transition duration-150 ease-in-out ${isActive ? 'bg-blue-100 text-blue-700' : ''}`}>{link.text}</a>
+                           class={`text-base block w-full h-full text-brand-primary py-2 px-6 hover:text-brand-primary hover:bg-gray-50/50 dark:hover:bg-gray-800/50 transition duration-150 ease-in-out ${isActive ? 'bg-blue-100 text-blue-700' : ''}`}>{link.text}</a>
                     </li>
             )
         })}

diff --git a/src/layouts/complex.astro b/src/layouts/complex.astro
@@ -9,12 +9,12 @@ const props = Astro.props;
             {Astro.slots.has("left") && (
                     <aside class={`sticky top-8 hidden ${
                         props.sidebar === "equal" ? "w-60" :
-                            props.sidebar === "left-prominent" ? "w-72" : "w-44"
+                            props.sidebar === "left-prominent" ? "w-80" : "w-44"
                     } shrink-0 lg:block`}>
                         <slot name="left"/>
                     </aside>
             )}
-            <main class=`mx-auto ${
+            <main class=` ${
                 (Astro.slots.has("right") &&
                     Astro.slots.has("left")) ?
                     "max-w-full flex-1" :

diff --git a/src/layouts/default.astro b/src/layouts/default.astro
@@ -3,8 +3,11 @@ import Navigation from "../components/navigation";
 import Footer from "../components/footer";
 import Banner from "../components/banner.astro";
 import BannerPrimaryContent from "../content/banner/primary.mdx";
-import { components } from "../components/elements";
+import {components} from "../components/elements";
+import {SEO} from "astro-seo";
 import "../styles/global.scss";
+
+const {seo} = Astro.props;
 ---
 
 <html lang="en" class="bg-white dark:bg-dark-background">
@@ -18,7 +21,7 @@ import "../styles/global.scss";
             try {
                 window.pagefind = await import('/pagefind/pagefind.js');
                 await window.pagefind.options({
-                    ranking: { pageLength: .35 }
+                    ranking: {pageLength: .35}
                 });
                 window.pagefind.init();
             } catch (error) {
@@ -36,6 +39,45 @@ import "../styles/global.scss";
             document.documentElement.classList.add('dark');
         }
     </script>
+    <SEO
+            title="A Very Descriptive Title"
+            titleTemplate="%s — ELIXIR Norway"
+            titleDefault="ELIXIR NO"
+            description="A heavily optimized description full of well-researched keywords."
+            canonical=""
+            noindex={false}
+            nofollow={false}
+            charset="UTF-8"
+            openGraph={{
+                optional: {
+                    locale: "en_GB",
+                    description: "",
+                    localeAlternate: ["nb_NO"]
+                },
+                basic: {
+                    title: "A Very Descriptive Title",
+                    type: "image",
+                    image: "https://user-images.githubusercontent.com/5182256/131216951-8f74f425-f775-463d-a11b-0e01ad9fce8d.png",
+                },
+            }}
+            twitter={{
+                creator: "@jonasmerlins1"
+            }}
+            extend={{
+
+                link: [{rel: "icon", href: "/favicon.ico"}],
+                // extending the default meta tags
+
+                meta: [
+                    {
+                        name: "twitter:image",
+                        content: "https://user-images.githubusercontent.com/5182256/131216951-8f74f425-f775-463d-a11b-0e01ad9fce8d.png",
+                    },
+                    {name: "twitter:title", content: "Tinker Tailor Soldier Spy"},
+                    {name: "twitter:description", content: "Agent"},
+                ],
+            }}
+    />
 </head>
 <body class="relative min-h-full">
 <Banner>

diff --git a/src/layouts/narrow.astro b/src/layouts/narrow.astro
@@ -1,6 +1,5 @@
 ---
 import DefaultLayout from "./default.astro";
-
 const { frontmatter } = Astro.props;
 ---
 
@@ -24,4 +23,4 @@ const { frontmatter } = Astro.props;
             <slot/>
         </div>
     </main>
-</DefaultLayout>
+</DefaultLayout>
diff --git a/src/pages/news/index.astro b/src/pages/news/index.astro
@@ -1,5 +1,5 @@
 ---
-import { getCollection } from 'astro:content';
+import {getCollection} from 'astro:content';
 import FullWidthLayout from "../../layouts/full-width.astro";
 
 // Function to normalize the date
@@ -27,17 +27,21 @@ news.sort((a, b) => parseDate(b.data.date) - parseDate(a.data.date));
     <ol class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-y-12 gap-x-12">
         {news.map((entry) => {
             return (
-                    <li class="shadow-xl bg-light-surface dark:bg-dark-surface rounded-lg overflow-clip">
-                        <div class="h-48 bg-white overflow-clip flex items-center justify-center">
-                            <img src={entry.data?.cover?.source ?? "/assets/og/default.jpg"}
-                                 alt="Article Cover"
-                                 class="w-auto h-auto"/>
-                        </div>
-                        <a href={`/news/${entry.slug}`} class="flex px-6 pt-4 pb-6 flex-col gap-y-2">
-                            <time class="block font-light text-orange-600">{entry.data.date}</time>
-                            <span class="block text-xl font-bold">{entry.data.title}</span>
-                            {entry.data.summary &&
-                                    <span class="block text-sm font-light">{truncateStringToLength(entry.data.summary, 120)}</span>}
+                    <li class="shadow bg-light-surface dark:bg-dark-surface rounded-lg overflow-clip hover:outline outline-1 duration-300 transition-all outline-brand-primary">
+                        <a href={`/news/${entry.slug}`}>
+                            <div class="h-48 bg-white overflow-clip flex items-center justify-center">
+                                <img src={entry.data?.cover?.source ?? "/assets/og/default.jpg"}
+                                     alt="Article Cover"
+                                     class="w-auto h-auto"/>
+                            </div>
+                            <div class="flex px-6 pt-4 pb-6 flex-col gap-y-2">
+                                <time class="block font-light text-orange-600">{entry.data.date}</time>
+                                <span class="block text-xl font-bold">{entry.data.title}</span>
+                                {entry.data.summary &&
+                                        <span class="block text-sm font-light">
+                                            {truncateStringToLength(entry.data.summary, 120)}
+                                        </span>}
+                            </div>
                         </a>
                     </li>
             )

diff --git a/src/pages/services/index.astro b/src/pages/services/index.astro
@@ -27,7 +27,7 @@ const _services = services.map(
 );
 ---
 
-<ComplexLayout title="Services" sidebar="equal">
+<ComplexLayout title="Services" sidebar="left-prominent">
 
     <div slot="left">
         <div>

diff --git a/src/pages/training/index.astro b/src/pages/training/index.astro
@@ -2,12 +2,10 @@
 import MainContent from "../../content/training/index.mdx";
 import { components } from "../../components/elements";
 import Projects from "../../layouts/complex.astro";
-import LinkWithFigure from "../../components/link-with-figure";
-import Card from "../../components/card";
 import NavigationList from "../../components/navigation-list.astro";
 ---
 
-<Projects title="Training" sidebar="equal">
+<Projects title="Training" sidebar="left-prominent">
 
     <div slot="left">
         <NavigationList
@@ -21,23 +19,4 @@ import NavigationList from "../../components/navigation-list.astro";
 
     <MainContent components={components} class="content"/>
 
-    <div slot="right">
-        <Card title="Useful links" margin={false}>
-            <div class="flex flex-col gap-2">
-                <LinkWithFigure
-                        href="https://tess.elixir-europe.org/"
-                        logoSrc="/assets/logos/elixir-tess.png"
-                        linkText="ELIXIR TeSS"
-                        altText="ELIXIR TeSS"
-                />
-                <LinkWithFigure
-                        href="https://elixir.mf.uni-lj.si/"
-                        logoSrc="/assets/logos/elixir-training-platform.png"
-                        linkText="ELIXIR EeLP"
-                        altText="ELIXIR TeSS"
-                />
-            </div>
-        </Card>
-    </div>
-
 </Projects>
-Original file line number
+Diff line change
@@ Expand Up / @@ -27,7 +27,7 @@ const _services = services.map( @@
     );
     ---
-    <ComplexLayout title="Services" sidebar="equal">
+    <ComplexLayout title="Services" sidebar="left-prominent">
         <div slot="left">
             <div>
@@ Expand Down @@