Merge branch 'main' into feat/portal-scoped-api

Author: demenech

components/_shared/MarkdownRenderer.tsx

@@ -0,0 +1,61 @@
+import React from "react";
+import ReactMarkdown from "react-markdown";
+
+interface Props {
+  content: string;
+}
+
+const MarkdownRenderer: React.FC<Props> = ({ content }) => {
+  return (
+    <div >
+      <ReactMarkdown
+        components={{
+          h1: ({ node, ...props }) => (
+            <h1 className="text-3xl font-bold mt-4 mb-2" {...props} />
+          ),
+          h2: ({ node, ...props }) => (
+            <h2 className="text-2xl font-semibold mt-3 mb-1" {...props} />
+          ),
+          p: ({ node, ...props }) => (
+            <p className="leading-relaxed mb-4" {...props} />
+          ),
+          a: ({ node, ...props }) => (
+            <a
+              {...props}
+              className="underline text-[#000] hover:text-accent"
+              target="_blank"
+              rel="noopener noreferrer"
+            />
+          ),
+          code: ({ node, inline, ...props }) =>
+            inline ? (
+              <code className="bg-gray-200 px-1 rounded text-sm" {...props} />
+            ) : (
+              <pre className="bg-gray-900 text-white p-3 rounded overflow-x-auto">
+                <code {...props} />
+              </pre>
+            ),
+          ul: ({ node, ...props }) => (
+            <ul className="list-disc pl-6 mb-4" {...props} />
+          ),
+          ol: ({ node, ...props }) => (
+            <ol className="list-decimal pl-6 mb-4" {...props} />
+          ),
+          blockquote: ({ node, ...props }) => (
+            <blockquote
+              className="border-l-4 border-gray-300 pl-4 italic text-gray-600"
+              {...props}
+            />
+          ),
+          hr: ({ node, ...props }) => (
+            <hr className="my-6 border-gray-300" {...props} />
+          ),
+        }}
+      >
+        {content}
+      </ReactMarkdown>
+    </div>
+  );
+};
+
+export default MarkdownRenderer;

components/dataset/individualPage/DatasetInfo.tsx

@@ -1,9 +1,15 @@
 import Link from "next/link";
-import {  Resource, Tag } from "@portaljs/ckan";
-import { ArrowDownTrayIcon } from "@heroicons/react/20/solid";
+import { Resource, Tag } from "@portaljs/ckan";
+import {
+  ArrowDownTrayIcon,
+  ChevronDownIcon,
+  ChevronUpIcon,
+} from "@heroicons/react/20/solid";
 import { getTimeAgo } from "@/lib/utils";
 import { Dataset } from "@/schemas/dataset.interface";
 import { RiExternalLinkLine } from "react-icons/ri";
+import { useEffect, useRef, useState } from "react";
+import MarkdownRenderer from "@/components/_shared/MarkdownRenderer";
 
 function uniqueFormat(resources) {
   const formats = resources.map((item: Resource) => item.format);
@@ -15,12 +21,28 @@ export default function DatasetInfo({
 }: {
   dataset: Dataset;
 }) {
+  const [isTruncated, setIsTruncated] = useState(false);
+  const [showFullDescription, setShowFullDescription] = useState(false);
+  const textRef = useRef<HTMLParagraphElement>(null);
+
+  const description =
+    dataset.notes?.replace(/<\/?[^>]+(>|$)/g, "") || "No description";
+
   const metaFormats = [
     { format: "jsonld", label: "JSON-LD" },
     { format: "rdf", label: "RDF" },
     { format: "ttl", label: "TTL" },
   ];
 
+  useEffect(() => {
+    const el = textRef.current;
+    if (el) {
+      requestAnimationFrame(() => {
+        setIsTruncated(el.scrollHeight > el.clientHeight);
+      });
+    }
+  }, [dataset.notes]);
+
   return (
     <div className="flex flex-col">
       <div className="flex flex-col gap-y-3">
@@ -92,6 +114,43 @@ export default function DatasetInfo({
           Created:{" "}
           {dataset.metadata_created && getTimeAgo(dataset.metadata_created)}
         </span>
+        {dataset.source && dataset.source.length > 0 && (
+          <div className="font-medium text-gray-500">
+            <div className="flex items-start gap-1">
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                fill="none"
+                viewBox="0 0 24 24"
+                strokeWidth={1.5}
+                stroke="currentColor"
+                className="w-5 h-5 text-accent inline-block mt-0.5 flex-shrink-0"
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  d="M13.19 8.688a4.5 4.5 0 011.242 7.244l-4.5 4.5a4.5 4.5 0 01-6.364-6.364l1.757-1.757m13.35-.622l1.757-1.757a4.5 4.5 0 00-6.364-6.364l-4.5 4.5a4.5 4.5 0 001.242 7.244"
+                />
+              </svg>
+              <div className="flex flex-col gap-1">
+                <span>Source{dataset.source.length > 1 ? "s" : ""}:</span>
+                <div className="flex flex-col gap-1.5">
+                  {dataset.source.map((url, index) => (
+                    <a
+                      key={index}
+                      href={url}
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      className="text-accent hover:text-darkaccent flex items-center gap-1 break-all transition"
+                    >
+                      <RiExternalLinkLine className="w-4 h-4 flex-shrink-0" />
+                      <span className="underline">{url}</span>
+                    </a>
+                  ))}
+                </div>
+              </div>
+            </div>
+          </div>
+        )}
         <span className="font-medium text-gray-500 inline">
           <svg
             xmlns="http://www.w3.org/2000/svg"
@@ -112,9 +171,30 @@ export default function DatasetInfo({
         </span>
       </div>
       <div className="py-4 my-4 border-y">
-        <p className="text-sm font-normal text-stone-500 line-clamp-4">
-          {dataset.notes?.replace(/<\/?[^>]+(>|$)/g, "") || "No description"}
-        </p>
+        <div
+          ref={textRef}
+          className={`text-sm font-normal text-stone-500 transition-all ${
+            !showFullDescription ? "line-clamp-4" : ""
+          }`}
+        >
+          <MarkdownRenderer content={description} />
+        </div>
+        {isTruncated && (
+          <button
+            onClick={() => setShowFullDescription(!showFullDescription)}
+            className="mt-2 border-b border-accent text-stone-500 hover:text-accent"
+          >
+            {showFullDescription ? (
+              <span className="flex items-center">
+                Read less <ChevronUpIcon className="text-accent w-4" />
+              </span>
+            ) : (
+              <span className="flex items-center">
+                Read more <ChevronDownIcon className="text-accent w-4" />
+              </span>
+            )}
+          </button>
+        )}
       </div>
       <div className="flex flex-wrap gap-1">
         {dataset.tags?.map((tag: Tag) => (

components/dataset/search/Pagination.tsx

@@ -63,7 +63,7 @@ export default function Pagination({
           {x + 1}
         </button>
       ))}
-      {subsetOfPages !== Math.ceil(count / max) && count > 50 && (
+      {count > max * options.limit && (subsetOfPages + max) * options.limit < count && (
         <button
           className="font-semibold flex items-center gap-2"
           onClick={() => setSubsetOfPages(subsetOfPages + max)}

components/responsiveGrid/Table.tsx

@@ -1,11 +1,21 @@
+import { useEffect, useRef } from "react";
 import { useResourceData } from "./DataProvider";
 import TableColumnValue from "./TableColValue";
 import TableHead from "./TableHead";
 
 export default function TableData() {
-  const { paginatedData, columns } = useResourceData();
+  const { paginatedData, columns, data } = useResourceData();
+  const scrollRef = useRef<HTMLDivElement>(null);
+  useEffect(() => {
+    if (scrollRef.current) {
+      setTimeout(() => {
+        if (scrollRef.current) {
+          scrollRef.current.scrollLeft = 0;
+        } }, 100);
+    }
+  }, [data]);
   return (
-    <div className="overflow-auto max-h-[750px] relative border-y min-h-[500px] w-full">
+    <div ref={scrollRef} className="overflow-auto max-h-[750px] relative border-y min-h-[500px] w-full">
       {/* Table */}
       <table
         className="min-w-full table-auto border-collapse border-0 static"

components/responsiveGrid/TableColValue.tsx

@@ -4,16 +4,18 @@ export default function TableColumnValue({ column, value }) {
   const { visibleColumns, pinnedColumns } = useResourceData();
   const isVisible = visibleColumns.includes(column);
   const isPinned = pinnedColumns.includes(column);
+  const _value = typeof value === "boolean" ? value.toString() : value;
+
   return (
     <td
-      className={` px-3 py-4 text-sm text-gray-500   ${
+      className={`px-3 py-4 text-sm text-gray-500 ${
         !isVisible ? "hidden" : ""
       } ${isPinned ? "sticky left-[-1px] bg-accent-50 z-10 font-medium" : ""}`}
       role="gridcell"
       tabIndex={0}
-      aria-label={value}
+      aria-label={_value}
     >
-      <span className=" block max-w-[400px] w-[max-content] ">{value}</span>
+      <span className="block max-w-[400px] break-words  w-[max-content]">{_value}</span>
       {isPinned && (
         <span className="absolute right-[-1px] h-full w-[1px] bg-gray-100 top-0"></span>
       )}