@eox/pages-theme-eox 2.0.0-alpha.7 → 2.0.0-alpha.9

package/src/components/TextSection.vue

@@ -0,0 +1,384 @@
+<template>
+  <section
+    class="text-section full-width"
+    :class="{
+      'is-reverse': reverse,
+      'no-image': !image && !$slots.media,
+      'is-compact': compact,
+    }"
+  >
+    <div class="holder">
+      <div
+        class="text-section-grid"
+        :class="{
+          'grid-reverse': reverse,
+          'grid-single': !image && !$slots.media,
+        }"
+      >
+        <!-- Text Column -->
+        <div class="text-column">
+          <span v-if="tagline" class="tagline">{{ tagline }}</span>
+          <h2 v-if="title" class="section-title">{{ title }}</h2>
+          <div class="section-content">
+            <slot></slot>
+          </div>
+          <!-- Prop-based button -->
+          <div v-if="buttonText && buttonLink" class="section-actions">
+            <a
+              :href="resolvedButtonLink"
+              :target="resolvedButtonTarget"
+              class="button"
+              @click="
+                trackEvent([
+                  'TextSection',
+                  'Click',
+                  title || buttonText,
+                  buttonText,
+                ])
+              "
+            >
+              <span>{{ buttonText }}</span>
+              <i v-if="buttonIcon" :class="buttonIcon" class="btn-icon"></i>
+            </a>
+          </div>
+          <slot name="actions"></slot>
+        </div>
+
+        <!-- Media Column -->
+        <div v-if="image || $slots.media" class="media-column">
+          <slot name="media">
+            <img
+              v-if="image"
+              :src="resolvedImage"
+              :alt="imageAlt || title || ''"
+              class="section-image"
+              loading="lazy"
+            />
+          </slot>
+        </div>
+      </div>
+    </div>
+  </section>
+</template>
+
+<script setup>
+import { withBase } from "vitepress";
+import { computed } from "vue";
+import { trackEvent } from "../helpers.js";
+
+const props = defineProps({
+  title: {
+    type: String,
+    default: "",
+  },
+  tagline: {
+    type: String,
+    default: "",
+  },
+  image: {
+    type: String,
+    default: "",
+  },
+  imageAlt: {
+    type: String,
+    default: "",
+  },
+  reverse: {
+    type: Boolean,
+    default: false,
+  },
+  buttonText: {
+    type: String,
+    default: "",
+  },
+  buttonLink: {
+    type: String,
+    default: "",
+  },
+  buttonTarget: {
+    type: String,
+    default: "",
+  },
+  buttonIcon: {
+    type: String,
+    default: "",
+  },
+  compact: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+function resolveUrl(url) {
+  if (!url) return "";
+  if (
+    url.startsWith("http://") ||
+    url.startsWith("https://") ||
+    url.startsWith("//") ||
+    url.startsWith("#")
+  ) {
+    return url;
+  }
+  return withBase(url);
+}
+
+const resolvedImage = computed(() => resolveUrl(props.image));
+const resolvedButtonLink = computed(() => resolveUrl(props.buttonLink));
+const resolvedButtonTarget = computed(() => {
+  if (props.buttonTarget) return props.buttonTarget;
+  if (
+    props.buttonLink &&
+    (props.buttonLink.startsWith("http://") ||
+      props.buttonLink.startsWith("https://") ||
+      props.buttonLink.startsWith("//"))
+  ) {
+    return "_blank";
+  }
+  return "_self";
+});
+</script>
+
+<style scoped>
+.full-width {
+  width: 100svw;
+  position: relative;
+  left: 50%;
+  right: 50%;
+  margin-left: -50svw;
+  margin-right: -50svw;
+  max-inline-size: unset !important;
+}
+
+.text-section {
+  padding-block: 56px;
+  display: flex;
+  justify-content: center;
+  background: transparent;
+  color: var(--on-surface, #020617);
+}
+
+.text-section.is-compact {
+  padding-block: 28px;
+}
+
+/* When two text-sections are placed consecutively, tighten the spacing */
+:deep(.text-section + .text-section),
+.text-section + .text-section {
+  padding-block-start: 16px;
+}
+
+.text-section .holder {
+  width: 100%;
+  max-width: 1200px;
+  margin-left: auto;
+  margin-right: auto;
+  padding-inline: 24px;
+}
+
+.text-section-grid {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 2rem;
+  align-items: center;
+}
+
+/* On mobile (< 1024px), the media/image column is always at the start before the text */
+.text-section-grid .media-column {
+  order: 1;
+}
+
+.text-section-grid .text-column {
+  order: 2;
+}
+
+@media (min-width: 1024px) {
+  .text-section-grid {
+    grid-template-columns: 1fr 1fr;
+    gap: 4rem;
+  }
+
+  /* Default on desktop: Text on left (1), Media on right (2) */
+  .text-section-grid .text-column {
+    order: 1;
+  }
+
+  .text-section-grid .media-column {
+    order: 2;
+  }
+
+  /* Reverse on desktop: Media on left (1), Text on right (2) */
+  .text-section-grid.grid-reverse .text-column {
+    order: 2;
+  }
+
+  .text-section-grid.grid-reverse .media-column {
+    order: 1;
+  }
+
+  .text-section-grid.grid-single {
+    grid-template-columns: 1fr;
+    max-width: 680px;
+  }
+}
+
+.text-column {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+}
+
+.tagline {
+  display: inline-block;
+  font-size: 0.875rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: var(--primary, #004170);
+  margin-bottom: 0.5rem;
+}
+
+.section-title {
+  font-family: inherit;
+  font-weight: 700;
+  font-size: 2rem;
+  line-height: 1.25;
+  color: #020617;
+  margin-top: 0;
+  margin-bottom: 1.25rem;
+  border-top: none;
+}
+
+/* Markdown Content Styling */
+.section-content :deep(h2) {
+  font-family: inherit;
+  font-weight: 700;
+  font-size: 2rem;
+  line-height: 1.25;
+  color: #020617;
+  margin-top: 0;
+  margin-bottom: 1.25rem;
+  border-top: none;
+}
+
+.section-content :deep(h3) {
+  font-family: inherit;
+  font-weight: 700;
+  font-size: 1.5rem;
+  line-height: 1.35;
+  color: #020617;
+  margin-top: 1.5rem;
+  margin-bottom: 0.75rem;
+  border-top: none;
+}
+
+.section-content :deep(h4),
+.section-content :deep(h5) {
+  font-family: inherit;
+  font-weight: 600;
+  font-size: 1.125rem;
+  line-height: 1.4;
+  color: #020617;
+  margin-top: 1.25rem;
+  margin-bottom: 0.5rem;
+}
+
+.section-content :deep(p) {
+  font-size: 1rem;
+  line-height: 1.65;
+  color: #334155;
+  margin-top: 0;
+  margin-bottom: 1rem;
+}
+
+.section-content :deep(ul) {
+  margin-top: 0.75rem;
+  margin-bottom: 1.25rem;
+  padding-left: 1.25rem;
+  list-style-type: disc;
+}
+
+.section-content :deep(li) {
+  font-size: 0.95rem;
+  line-height: 1.6;
+  color: #334155;
+  margin-bottom: 0.5rem;
+}
+
+.section-content :deep(li strong) {
+  color: #020617;
+  font-weight: 700;
+}
+
+.section-content :deep(a:not(.button)) {
+  color: #0284c7;
+  text-decoration: none;
+  font-weight: 500;
+  transition: color 0.15s ease-in-out;
+}
+
+.section-content :deep(a:not(.button):hover) {
+  text-decoration: underline;
+  color: #0369a1;
+}
+
+/* Pill Button Styling - for both prop and markdown links with .button */
+.section-actions {
+  margin-top: 0.75rem;
+  margin-bottom: 0.5rem;
+}
+
+.button,
+.section-content :deep(a.button),
+.section-content :deep(.button) {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  padding: 0.5rem 1.5rem;
+  border-radius: 9999px;
+  border: 1px solid #020617;
+  background-color: #ffffff;
+  color: #020617 !important;
+  font-weight: 600;
+  font-size: 0.9375rem;
+  line-height: 1.5;
+  text-decoration: none !important;
+  transition: all 0.2s ease-in-out;
+  cursor: pointer;
+  width: fit-content;
+}
+
+.button:hover,
+.section-content :deep(a.button:hover),
+.section-content :deep(.button:hover) {
+  background-color: #f1f5f9;
+  border-color: #020617;
+  color: #020617 !important;
+}
+
+.btn-icon {
+  font-size: 1.1em;
+  display: inline-flex;
+}
+
+/* Media Column & Image Styling */
+.media-column {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+}
+
+.section-image {
+  width: 100%;
+  max-width: 100%;
+  height: auto;
+  border-radius: 16px;
+  border: 1px solid rgba(15, 23, 42, 0.08);
+  box-shadow:
+    0 4px 16px -2px rgba(15, 23, 42, 0.06),
+    0 2px 6px -2px rgba(15, 23, 42, 0.04);
+  background-color: #ffffff;
+  display: block;
+}
+</style>

package/src/components/Tutorial.vue

@@ -98,8 +98,9 @@ defineProps({
 :deep(samp),
 :deep(var),
 :deep(.monospace) {
-  font-family: "SFMono-Regular", "Menlo", "Monaco", "Consolas",
-    "Liberation Mono", "Ubuntu Mono", "Courier New", monospace !important;
+  font-family:
+    "SFMono-Regular", "Menlo", "Monaco", "Consolas", "Liberation Mono",
+    "Ubuntu Mono", "Courier New", monospace !important;
 }
 
 /* Inline code */

package/src/helpers.js

@@ -283,6 +283,8 @@ export const getFlatList = (items) => {
  * @returns {boolean}
  */
 export const isActive = (item, path) => {
+  if (!item || !path) return false;
+
   if (item.activeMatch) {
     try {
       return new RegExp(item.activeMatch).test(path);
@@ -292,20 +294,26 @@ export const isActive = (item, path) => {
     }
   }
 
-  if (item.items) {
-    return item.items.some((sub) => isActive(sub, path));
+  if (item.items && item.items.some((sub) => isActive(sub, path))) {
+    return true;
   }
 
   if (item.link) {
-    const linkPath = item.link.replace(/\.html$/, "").replace(/\/$/, "");
-    const currentPath = path.replace(/\.html$/, "").replace(/\/$/, "");
+    const normalize = (p) =>
+      decodeURI(p)
+        .replace(/[?#].*$/, "")
+        .replace(/\.html$/, "")
+        .replace(/\/$/, "");
+
+    const linkPath = normalize(item.link);
+    const currentPath = normalize(path);
 
     if (linkPath === currentPath) return true;
 
     // Special case for home page to avoid matching everything
     if (linkPath === "") return currentPath === "";
 
-    return currentPath.startsWith(linkPath);
+    return currentPath === linkPath || currentPath.startsWith(linkPath + "/");
   }
 
   return false;

package/src/helpers.test.js

@@ -144,10 +144,38 @@ describe("existing helpers", () => {
       t("nav.unknown", { nav: { home: "Home Page" } }),
       "nav.unknown",
     );
+    assert.equal(t("Imprint", { Imprint: "Impressum" }), "Impressum");
+    assert.equal(t("Imprint", {}), "Imprint");
   });
 
   it("checks isActive links correctly", () => {
     assert.equal(isActive({ link: "/explore/" }, "/explore"), true);
     assert.equal(isActive({ link: "/explore" }, "/explore/"), true);
+    assert.equal(isActive({ link: "/explore" }, "/explore/subpage"), true);
+    assert.equal(isActive({ link: "/explore" }, "/explore-other"), false);
+    assert.equal(isActive({ link: "/explore" }, "/explore?tab=1#sec"), true);
+    assert.equal(isActive({ link: "/" }, "/"), true);
+    assert.equal(isActive({ link: "/" }, "/explore"), false);
+
+    // Parent dropdown with items
+    const parentDropdown = {
+      text: "Expertise",
+      items: [
+        { text: "Data Management", link: "/expertise/data-management" },
+        { text: "Data Visualization", link: "/expertise/data-visualization" },
+      ],
+    };
+    assert.equal(isActive(parentDropdown, "/expertise/data-management"), true);
+    assert.equal(isActive(parentDropdown, "/expertise/data-management/"), true);
+    assert.equal(isActive(parentDropdown, "/solutions"), false);
+
+    // Parent with both link and items
+    const parentWithLinkAndItems = {
+      text: "Products",
+      link: "/products",
+      items: [{ text: "Product A", link: "/products/a" }],
+    };
+    assert.equal(isActive(parentWithLinkAndItems, "/products/a"), true);
+    assert.equal(isActive(parentWithLinkAndItems, "/products"), true);
   });
 });

package/src/index.js

@@ -23,6 +23,7 @@ import BlogList from "./components/BlogList.vue";
 import TeamPage from "./components/TeamPage.vue";
 import SectionHeader from "./components/SectionHeader.vue";
 import TestimonialsSection from "./components/TestimonialsSection.vue";
+import TextSection from "./components/TextSection.vue";
 import Layout from "./Layout.vue";
 import "./style.css";
 
@@ -55,6 +56,7 @@ export default {
     app.component("TeamPage", TeamPage);
     app.component("SectionHeader", SectionHeader);
     app.component("TestimonialsSection", TestimonialsSection);
+    app.component("TextSection", TextSection);
 
     router.onAfterRouteChanged = () => {
       if (!import.meta.env.SSR) {

package/src/pages/author/[author].md

@@ -1,4 +1,5 @@
 ---
 layout: blog
 title: Author posts
+hero: true
 ---

package/src/pages/blog.md

@@ -1,4 +1,5 @@
 ---
 layout: blog
 title: Blog
+hero: true
 ---

package/src/pages/tag/[tag].md

@@ -1,4 +1,5 @@
 ---
 layout: blog
 title: Tag list
+hero: true
 ---

package/src/pages/tag.md

@@ -1,4 +1,5 @@
 ---
 layout: tags
 title: Tags
+hero: true
 ---

package/src/pages/team.md

@@ -1,4 +1,5 @@
 ---
 layout: team
 title: Team
+hero: true
 ---

package/src/style.css

@@ -224,7 +224,8 @@ footer {
   margin-top: 0 !important;
   position: relative;
   z-index: var(--vp-z-index-footer);
-  background: var(--surface-container-low);
+  background: var(--surface-container-lowest);
+  border-top: 1px solid var(--vp-c-divider, rgba(0, 0, 0, 0.08));
 }
 
 /**/
@@ -249,14 +250,24 @@ button.text:hover,
   }
 }
 
-.primary-gradient-bg {
+.hero-gradient-bg {
   /*Fallback*/
-  background: var(--primary);
-  background: radial-gradient(
-    74.48% 130.95% at 50% -12.27%,
-    hsl(from var(--primary) h s calc(l + 7)) 0%,
-    var(--primary) 45%,
-    hsl(from var(--primary) h s calc(l - 20)) 100%
+  background: #000c14;
+  background: linear-gradient(
+    180deg,
+    #000c14 0%,
+    var(--primary, #004170) 100%
+  ) !important;
+}
+
+.primary-gradient-bg,
+.dark-section-gradient-bg {
+  /*Fallback*/
+  background: #000c14;
+  background: linear-gradient(
+    180deg,
+    var(--primary, #004170) 0%,
+    #000c14 100%
   ) !important;
 }
 

package/src/vitepressConfig.mjs

@@ -1,6 +1,5 @@
 import fs from "node:fs";
 import path from "node:path";
-import { resolveLlms } from "./llms/index.js";
 
 function copyThemePages() {
   try {
@@ -94,7 +93,6 @@ function getBlogRewrites() {
  */
 export const generate = (brandConfig) => {
   copyThemePages();
-  const llmsResult = resolveLlms(brandConfig.llms, brandConfig);
   const config = {
     appearance: false,
     cleanUrls: true,
@@ -193,9 +191,6 @@ export const generate = (brandConfig) => {
     themeConfig: {
       outline: "deep",
       siteTitle: false,
-      llms: {
-        copyButtons: llmsResult.copyButtons,
-      },
       theme: {
         primaryColor: brandConfig.theme?.primary_color,
         secondaryColor:
@@ -228,7 +223,6 @@ export const generate = (brandConfig) => {
       optimizeDeps: {
         exclude: ["@eox/pages-theme-eox"],
       },
-      plugins: [...llmsResult.plugins],
     },
     vue: {
       template: {

package/src/llms/index.js

@@ -1,64 +0,0 @@
-import llmstxt from "vitepress-plugin-llms";
-import { createStoriesPlugin } from "./storiesPlugin.js";
-
-const LLMS_DEFAULTS = {};
-
-/**
- * Normalizes a URL by stripping trailing slashes.
- * @param {string | undefined | null} url
- * @returns {string | null}
- */
-export const normalizeDomain = (url) => {
-  if (!url || typeof url !== "string") return null;
-  return url.replace(/\/+$/, "");
-};
-
-/**
- * Resolve the llms option into Vite plugins and package-owned flags.
- * @param {boolean | Record<string, any>} [option] The `llms` option
- * @param {Record<string, any>} [brandConfig] Brand configuration object
- * @returns {{ plugins: any[], copyButtons: boolean, stories: any, domain: string | null }}
- */
-export const resolveLlms = (option, brandConfig = {}) => {
-  if (option === false) {
-    return {
-      plugins: [],
-      copyButtons: false,
-      stories: null,
-      domain: null,
-    };
-  }
-
-  const {
-    copyButtons = false,
-    stories = null,
-    ...settings
-  } = option === true || option === undefined ? {} : option;
-
-  const rawDomain = settings.domain;
-  const domain = normalizeDomain(rawDomain);
-
-  const upstreamPlugins = llmstxt({
-    ...LLMS_DEFAULTS,
-    ...settings,
-    ...(domain ? { domain } : {}),
-  });
-
-  const plugins = [...upstreamPlugins];
-  if (stories !== false) {
-    plugins.push(
-      createStoriesPlugin({
-        storiesOption: stories,
-        brandConfig,
-        domain,
-      }),
-    );
-  }
-
-  return {
-    plugins,
-    copyButtons: Boolean(copyButtons),
-    stories,
-    domain,
-  };
-};