Merge pull request #16 from GTIF-Austria/update-pages-template

feat: update to pages theme package

Author: triebnigg

.gitignore

@@ -1,5 +1,4 @@
 node_modules
 dist
 .vitepress/cache
-narratives
 .DS_Store

.vitepress/components/Disclaimer.vue

@@ -1,77 +1,85 @@
 <script setup>
-import { data as narratives } from "../narratives.data.js";
+import { ref, onMounted } from "vue";
+import { withBase, useRouter } from "vitepress";
+// import { trackEvent } from "@eox/pages-theme-eox/src/helpers.js";
 
-const narrativesExcerpts = narratives.map((n) => {
-  if (!import.meta.env.SSR) {
-    const el = document.createElement("html");
-    el.innerHTML = n.html;
-    return (
-      el.querySelector("h1")?.textContent ||
-      n.url.replace("/narratives/", "").replace(".html", "")
+const router = useRouter();
+const items = ref([]);
+
+const filterProps = [
+  {
+    keys: ["title", "subtitle", "domain", "tags"],
+    title: "By keyword",
+    type: "text",
+    placeholder: "Search in title or tags",
+    expanded: true,
+  },
+  {
+    key: "domain",
+    title: "By domain",
+    expanded: true,
+  },
+];
+
+onMounted(async () => {
+  try {
+    const response = await fetch(
+      "https://gtif-austria.github.io/public-narratives/narratives.json",
     );
+    const results = await response.json();
+    results.forEach((res) => {
+      res.image =
+        "https://gtif-austria.github.io/public-narratives/" + res.image;
+    });
+    items.value = results;
+  } catch (error) {
+    console.error("Error fetching JSON:", error);
   }
 });
+
+// Click event handler
+const handleResultClick = (evt) => {
+  const sections = evt.detail.file.split("/");
+  const filename = sections[sections.length - 1].split(".")[0];
+  // trackEvent(['narratives', 'select', filename]);
+  router.go(withBase(`/narratives/${filename}`));
+};
 </script>
 
 <template>
-  <div class="gallery">
-    <a
-      v-for="(narrative, index) in narratives"
-      class="narrative"
-      :href="narrative.url"
+  <client-only>
+    <eox-itemfilter
+      :items="items"
+      titleProperty="title"
+      imageProperty="cover-image"
+      :filterProperties="filterProps"
+      resultType="cards"
+      @select="handleResultClick"
+      style="--select-filter-max-items: 10"
+      class="large-margin bottom-margin"
     >
-      <img
-        v-if="narrative?.frontmatter?.['cover-image']"
-        :src="narrative.frontmatter['cover-image']"
-        clas="background"
-      />
-      <p>{{ narrativesExcerpts[index] }}</p>
-    </a>
-  </div>
+      <h6 slot="filterstitle" class="small vertical-margin">
+        Filter Narratives:
+      </h6>
+      <h6
+        slot="resultstitle"
+        class="large bottom-padding top-margin small-margin"
+      >
+        Narrative Gallery
+      </h6>
+    </eox-itemfilter>
+  </client-only>
+
+  <div class="large-space"></div>
 </template>
 
-<style scoped>
-.gallery {
-  --columns: 1;
-}
-@media screen and (min-width: 480px) {
-  .gallery {
-    --columns: 2;
-  }
+<style>
+eox-itemfilter {
+  --form-flex-direction: row;
 }
-@media screen and (min-width: 768px) {
-  .gallery {
-    --columns: 3;
+@media (max-width: 768px) {
+  eox-itemfilter {
+    --form-flex-direction: column;
   }
 }
-.gallery {
-  display: grid;
-  grid-template-columns: repeat(var(--columns), 1fr);
-  gap: 8px;
-  margin: 64px 0;
-}
-.narrative {
-  border-radius: 8px;
-  border: 1px solid var(--vp-c-brand);
-  text-decoration: none;
-  text-align: center;
-  transition: all 0.3s ease-in-out;
-  overflow: hidden;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-}
-.narrative:hover {
-  background: var(--vp-c-brand);
-  color: white;
-}
-img {
-  width: 100%;
-  height: 200px;
-  object-fit: cover;
-}
-p {
-  padding: 8px 16px;
-}
 </style>

.vitepress/components/NarrativeGallery.vue

@@ -1,54 +1,38 @@
 import { defineConfig } from "vitepress";
-// Import config from centralized repo
-import { config } from "https://hub-brands.eox.at/gtif-austria/config.mjs";
+import baseConfig from "@eox/pages-theme-eox/config";
 
 export default defineConfig({
-  appearance: false,
-  // lastUpdated: true,
-  cleanUrls: true,
-  sitemap: {
-    hostname: "https://gtif-austria.info",
-  },
+  extends: baseConfig("gtif-austria"),
+  // Change the page config here
   themeConfig: {
-    siteTitle: false,
-    primaryColor: config.theme.primary_color,
-    logo: config.logo,
-    externalLinkIcon: true,
     nav: [
       { text: "Home", link: "/" },
       { text: "Narratives", link: "/narratives", activeMatch: "/narratives/" },
       { text: "Explore data", link: "/explore/" },
-      { text: "Log in", link: "https://dashboard.gtif-austria.gtif.eox.at" },
+      {
+        text: "Log in",
+        link: "https://dashboard.gtif-austria.gtif.eox.at",
+        action: "alt",
+      },
     ],
-    footer: {
-      message: `Powered by <img src="https://cockpit.hub.eox.at/storage/uploads/eoxhub/eoxhub_icon.svg" style="display: inline; height: 20px; transform: translateY(5px)" />`,
-      copyright:
-        'Copyright © 2014-present <a href="https://eox.at" target="_blank">EOX IT Services GmbH</a>',
-    },
+    newsBanner: `
+      <i class="small">
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+          <path
+            d="M13,2.03V2.05L13,4.05C17.39,4.59 20.5,8.58 19.96,12.97C19.5,16.61 16.64,19.5 13,19.93V21.93C18.5,21.38 22.5,16.5 21.95,11C21.5,6.25 17.73,2.5 13,2.03M11,2.06C9.05,2.25 7.19,3 5.67,4.26L7.1,5.74C8.22,4.84 9.57,4.26 11,4.06V2.06M4.26,5.67C3,7.19 2.25,9.04 2.05,11H4.05C4.24,9.58 4.8,8.23 5.69,7.1L4.26,5.67M2.06,13C2.26,14.96 3.03,16.81 4.27,18.33L5.69,16.9C4.81,15.77 4.24,14.42 4.06,13H2.06M7.1,18.37L5.67,19.74C7.18,21 9.04,21.79 11,22V20C9.58,19.82 8.23,19.25 7.1,18.37M16.82,15.19L12.71,11.08C13.12,10.04 12.89,8.82 12.03,7.97C11.13,7.06 9.78,6.88 8.69,7.38L10.63,9.32L9.28,10.68L7.29,8.73C6.75,9.82 7,11.17 7.88,12.08C8.74,12.94 9.96,13.16 11,12.76L15.11,16.86C15.29,17.05 15.56,17.05 15.74,16.86L16.78,15.83C17,15.65 17,15.33 16.82,15.19Z"
+          />
+        </svg>
+      </i>
+      <span>This site is currently under development.</span>
+    `,
   },
-  transformPageData(pageData, { siteConfig }) {
-    /**
-     * Inject dashboard link
-     */
-    const dashboardLink = pageData.frontmatter?.hero?.actions?.find(
-      (a) => a.id === "dashboard",
-    );
-    if (dashboardLink) {
-      dashboardLink.link = config.userArea.root;
-    }
-    /**
-     * Inject brand logo
-     */
-    const brandLogo =
-      pageData.frontmatter?.hero?.image?.id === "logo" &&
-      pageData.frontmatter.hero.image;
-    if (brandLogo) {
-      brandLogo.src = config.logo;
+  async transformPageData(pageData) {
+    // If page has no explicit title but has params.title set,
+    // use that instead (e.g. for dynamic fetched routes)
+    if (!pageData.title && pageData.params?.title) {
+      pageData.title = pageData.params?.title;
     }
   },
-  title: config.meta.title,
-  description: config.meta.description,
-  head: [["link", { rel: "icon", href: config.meta.favicon }]],
   vue: {
     template: {
       compilerOptions: {

.vitepress/config.js

@@ -1,17 +1,36 @@
 @import "/fonts/poppins/poppins.css";
 
-body {
-  opacity: 0;
-  transition: opacity 0.3s ease-in-out;
-  font-family: Poppins, sans-serif;
+* {
+  font-family: Poppins, sans-serif !important;
 }
 
-@media (min-width: 960px) {
-  .main h1.name,
-  .main p.text {
-    font-size: 52px;
-  }
-  .main p.tagline {
-    font-size: 21px;
+.top-nav {
+  height: 60px;
+}
+.top-nav .logo {
+  height: 24px;
+}
+.top-nav nav .button {
+  color: var(--on-surface);
+}
+.top-nav .actions .button {
+  display: inline-flex !important;
+}
+:root,
+:root:has(.top-nav.at-top) {
+  --vp-nav-height: 60px !important;
+}
+
+header {
+  height: auto;
+}
+
+@media (max-width: 1024px) {
+  header {
+    padding: 3rem 1.5rem !important;
   }
 }
+
+.news-banner {
+  top: calc(100dvh - 40px) !important;
+}