datopian · mpolidori · Jan 23, 2026 · Jan 22, 2026 · Jan 22, 2026 · Jan 22, 2026
diff --git a/content/banner/en.md b/content/banner/en.md
@@ -0,0 +1 @@
+Tempor enim non proident amet aliqua et ipsum [fugiat](https://github.com/remarkjs/react-markdown?tab=readme-ov-file) laborum in nostrud. Quis cupidatat commodo non irure. Cupidatat culpa mollit duis officia pariatur elit ullamco proident ad aliqua esse nulla enim amet.
diff --git a/content/banner/sv.md b/content/banner/sv.md
@@ -0,0 +1 @@
+**[sv]** Tempor enim non proident amet aliqua et ipsum [fugiat](https://github.com/remarkjs/react-markdown?tab=readme-ov-file) laborum in nostrud. Quis cupidatat commodo non irure. Cupidatat culpa mollit duis officia pariatur elit ullamco proident ad aliqua esse nulla enim amet.
diff --git a/docs/banner/README.md b/docs/banner/README.md
@@ -0,0 +1,20 @@
+# Disclaimer banner
+
+Adding a dismissable banner on top of all pages, with translatable markdown content.
+
+### How to manage the content
+
+To **enable** the disclaimer banner:
+
+* Navigate to `/content/banner` in your repository
+* Add the English content to `en.md`
+* Add the Swedish content to `sv.md`
+* Commit your changes to `main` (production) or `staging` (staging environment)
+
+Note that markdown is supported.
+
+To **disable** the banner, simply clear the contents of the files.
+
+Screenshot:
+![alt text](disclaimer-banner.png)
+
diff --git a/docs/banner/disclaimer-banner.png b/docs/banner/disclaimer-banner.png
diff --git a/next.config.ts b/next.config.ts
@@ -14,6 +14,10 @@ const nextConfig: NextConfig = {
   images: {
     remotePatterns: imagesUrl,
   },
+
+  outputFileTracingIncludes: {
+    "/*": ["content/**/*"],
+  },
 };
 
 export default withNextIntl(nextConfig);
diff --git a/package.json b/package.json
@@ -48,14 +48,14 @@
     "@types/papaparse": "^5.5.0",
     "@types/react": "^19.1.13",
     "@types/react-dom": "^19",
+    "axe-core": "^4.11.1",
+    "cypress": "^15.9.0",
+    "cypress-axe": "^1.7.0",
+    "dotenv": "^17.2.3",
     "eslint": "^9",
     "eslint-config-next": "15.2.4",
     "lightningcss": "^1.28.1",
     "tailwindcss": "^4.1.3",
-    "typescript": "^5",
-    "axe-core": "^4.11.1",
-    "cypress": "^15.9.0",
-    "cypress-axe": "^1.7.0",
-    "dotenv": "^17.2.3"
+    "typescript": "^5"
   }
 }
diff --git a/src/app/[locale]/layout.tsx b/src/app/[locale]/layout.tsx
@@ -13,6 +13,8 @@ import { Metadata } from "next";
 import { buildLocalizedMetadata } from "@/lib/seo";
 import MatomoTracker from "@/components/analytics/matomo";
 import SkipToContent from "@/components/layout/SkipToContent";
+import DisclaimerBanner from "@/components/layout/DisclaimerBanner";
+import { getMarkdownContent } from "@/lib/markdown";
 
 const mainFont = Open_Sans({
   weight: ["300", "400", "500", "600", "700"],
@@ -45,18 +47,27 @@ export default async function RootLayout({
 
   const messages = await getMessages();
 
+  const bannerContent: string | null = await getMarkdownContent(
+    `banner/${locale}.md`,
+  );
+
   return (
     <html lang={locale}>
       <body
         className={`${mainFont.className} antialiased min-h-screen flex flex-col`}
       >
         <Suspense>
-          <MatomoTracker />
+
+
           <NextIntlClientProvider locale={locale} messages={messages}>
+            <MatomoTracker />
             <SkipToContent />
+            <DisclaimerBanner content={bannerContent} />
             <Header />
             <QueryProvider>
-              <main className="flex-grow" id="main-content">{children}</main>
+              <main className="flex-grow" id="main-content">
+                {children}
+              </main>
             </QueryProvider>
             <Footer />
           </NextIntlClientProvider>

diff --git a/src/components/layout/DisclaimerBanner.tsx b/src/components/layout/DisclaimerBanner.tsx
@@ -0,0 +1,50 @@
+"use client";
+
+import { X } from "lucide-react";
+import { useState } from "react";
+import Container from "../ui/container";
+import MarkdownRender from "../ui/markdown";
+
+
+export default function DisclaimerBanner({
+  content = "",
+}: {
+  content: string | null;
+}) {
+  const [show, setShow] = useState<boolean | null>(true);
+
+  const handleDismiss = () => {
+    setShow(false);
+  };
+
+  if (!show) return null;
+
+  return (
+    content && (
+      <div className="bg-gray-900 py-2.5 ">
+        <Container>
+          <div className="flex gap-x-6 bg-gray-900 ">
+            <div className="block">
+              <div
+                className="text-white text-sm/6"
+              >
+                <MarkdownRender content={content} />
+              </div>
+            </div>
+
+            <div className="flex flex-1 h-fit w-fit  justify-end">
+              <button
+                type="button"
+                className=" p-3 focus-visible:-outline-offset-4 text-white cursor-pointer"
+                onClick={handleDismiss}
+              >
+                <span className="sr-only">Dismiss</span>
+                <X />
+              </button>
+            </div>
+          </div>
+        </Container>
+      </div>
+    )
+  );
+}
diff --git a/src/components/layout/PageHero.tsx b/src/components/layout/PageHero.tsx
@@ -15,8 +15,8 @@ import { useTranslations } from "next-intl";
 import Image from "next/image";
 import homeGraphic from "@/assets/hero-home-bg.svg";
 import navGraphic from "@/assets/hero-nav-bg.svg";
-import useIsClamped from "@/hooks/clamped";
 import { Button } from "../ui/button";
+import { useIsClamped } from "@/hooks/element";
 
 export type BreadcrumbItemProps = {
   title: string;

diff --git a/src/components/package/dataset/DatasetResource.tsx b/src/components/package/dataset/DatasetResource.tsx
@@ -1,15 +1,18 @@
+"use client";
+
 import { Resource } from "@/schemas/ckan";
 import MarkdownRender from "@/components/ui/markdown";
 import { formatFileSize } from "@/lib/utils";
 import { Link } from "@/i18n/navigation";
 import React from "react";
 import { RESOURCE_COLORS, supportsPreview } from "@/lib/resource";
-import { getTranslations } from "next-intl/server";
+
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import { EyeIcon } from "lucide-react";
+import { useTranslations } from "next-intl";
 
-export default async function DatasetResources({
+export default function DatasetResources({
   resources,
   dataset,
   organization,
@@ -18,7 +21,7 @@ export default async function DatasetResources({
   dataset: string;
   organization: string;
 }) {
-  const t = await getTranslations();
+  const t = useTranslations();
 
   return (
     <div className="space-y-5">

diff --git a/src/components/ui/markdown.tsx b/src/components/ui/markdown.tsx
@@ -100,7 +100,7 @@ export default function MarkdownRender({
             props.children
           ) : (
             <pre
-              className="bg-gray-100 rounded p-2 overflow-x-auto"
+              className="bg-gray-100 text-foreground rounded p-2 overflow-x-auto"
               {...props}
             />
           ),

diff --git a/src/hooks/clamped.ts b/src/hooks/clamped.ts
diff --git a/src/hooks/element.ts b/src/hooks/element.ts
@@ -1,4 +1,6 @@
-import { useCallback, useEffect, useRef, useState } from "react";
+"use client"
+
+import { useCallback, useEffect, useLayoutEffect, useRef, useState } from "react";
 
 export function useElementWidth() {
   const [width, setWidth] = useState(0);
@@ -27,3 +29,35 @@ export function useElementWidth() {
 
   return { ref, width };
 }
+
+export function useIsClamped(deps: unknown[] = []) {
+  const ref = useRef<HTMLDivElement | null>(null);
+  const [isClamped, setIsClamped] = useState(false);
+
+  const measure = () => {
+    const el = ref.current;
+    if (!el) return;
+    const clamped = el.scrollHeight > el.clientHeight + 1;
+    setIsClamped(clamped);
+  };
+
+  useLayoutEffect(() => {
+    measure();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, deps);
+
+  useEffect(() => {
+    const el = ref.current;
+    if (!el) return;
+
+    // Re-measure on resize + font load/layout changes
+    const ro = new ResizeObserver(() => measure());
+    ro.observe(el);
+
+    return () => ro.disconnect();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, deps);
+
+  return { ref, isClamped };
+}
+
diff --git a/src/lib/markdown.ts b/src/lib/markdown.ts
@@ -0,0 +1,19 @@
+import fs from "fs";
+import path from "path";
+
+export async function getMarkdownContent(fileName: string): Promise<string> {
+  try {
+    const filePath = path.join(process.cwd(), "content", fileName);
+    const content = fs.readFileSync(filePath, "utf8");
+    return content;
+  } catch (error) {
+    console.error(`Error reading Markdown file ${fileName}:`, error);
+    return "";
+  }
+}
+
+export const extractTitle = (content:string) => {
+  const match = content?.match(/^#+\s*(.*?)(?=\r?\n|$)/);
+  const firstHeading = match ? match[1] : null;
+  return firstHeading;
+};
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		Tempor enim non proident amet aliqua et ipsum [fugiat](https://github.com/remarkjs/react-markdown?tab=readme-ov-file) laborum in nostrud. Quis cupidatat commodo non irure. Cupidatat culpa mollit duis officia pariatur elit ullamco proident ad aliqua esse nulla enim amet.
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		[sv] Tempor enim non proident amet aliqua et ipsum [fugiat](https://github.com/remarkjs/react-markdown?tab=readme-ov-file) laborum in nostrud. Quis cupidatat commodo non irure. Cupidatat culpa mollit duis officia pariatur elit ullamco proident ad aliqua esse nulla enim amet.