@eox/pages-theme-eox 0.4.8 → 0.4.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eox/pages-theme-eox",
-  "version": "0.4.8",
+  "version": "0.4.10",
   "type": "module",
   "description": "Vitepress Theme with EOX branding",
   "main": "src/index.js",

package/src/Layout.vue

@@ -8,7 +8,7 @@
           <a href="/">
             <img
               :src="withBase(theme.logo)"
-              :alt="`${theme.siteTitle} logo`"
+              :alt="`${site.title} logo`"
               class="logo"
             />
           </a>
@@ -21,7 +21,7 @@
               <a data-ui="#mobile-menu" href="/">
                 <img
                   :src="withBase(theme.logo)"
-                  :alt="`${theme.siteTitle} logo`"
+                  :alt="`${site.title} logo`"
                   class="logo margin"
                 />
               </a>
@@ -76,7 +76,7 @@
           <a href="/">
             <img
               :src="withBase(theme.logo)"
-              :alt="`${theme.siteTitle} logo`"
+              :alt="`${site.title} logo`"
               class="logo"
             />
           </a>
@@ -137,6 +137,11 @@
         </div>
       </header>
     </template>
+    <template #page-bottom>
+      <FeaturesGallery
+        v-if="page.relativePath.startsWith('features/')"
+      ></FeaturesGallery>
+    </template>
     <template #layout-bottom>
       <footer class="surface row center-align">
         <div class="holder">
@@ -144,7 +149,7 @@
             <nav class="padding right-align">
               <img
                 :src="withBase(theme.logo)"
-                :alt="`${theme.siteTitle} logo`"
+                :alt="`${site.title} logo`"
                 class="logo"
               />
               <ul>
@@ -179,7 +184,7 @@
 import DefaultTheme from "vitepress/theme";
 const { Layout } = DefaultTheme;
 import { useData, withBase } from "vitepress";
-const { frontmatter, theme } = useData();
+const { frontmatter, page, site, theme } = useData();
 
 if (!import.meta.env.SSR) {
   const scrollListener = () => {

package/src/components/FeatureSection.vue

@@ -37,7 +37,6 @@
 </template>
 
 <script setup>
-import { defineProps } from "vue";
 import { withBase } from "vitepress";
 const props = defineProps([
   "icon",

package/src/components/FeaturesGallery.vue

@@ -0,0 +1,58 @@
+<script setup>
+import { useData, withBase } from "vitepress";
+import { data as features } from "../features.data.js";
+
+const { page, site } = useData();
+
+const featuresExcerpts = features.map((f) => {
+  const el = document.createElement("html");
+  el.innerHTML = f.html;
+  const featureSection = el.querySelector("featuresection");
+  return featureSection
+    ? {
+        title: featureSection.title,
+        description: featureSection.textContent,
+        image: featureSection.getAttribute("image"),
+        link: f.url,
+        show: page.value.relativePath.includes(f.url.replace("/", "")),
+      }
+    : false;
+});
+</script>
+
+<template>
+  <h2>Read more about these other {{ site.title }} features:</h2>
+  <div class="grid">
+    <a
+      v-for="(feature, index) in features.filter(
+        (f, i) => f.show && featuresExcerpts[i],
+      )"
+      class="feature s12 m3"
+      :href="feature.url"
+    >
+      <article class="no-padding">
+        <img
+          v-if="featuresExcerpts[index].image"
+          class="responsive small"
+          :src="withBase(featuresExcerpts[index].image)"
+        />
+        <div class="padding">
+          <h5 class="small">{{ featuresExcerpts[index].title }}</h5>
+          <p>{{ featuresExcerpts[index].description }}</p>
+          <nav>
+            <a class="button" :href="featuresExcerpts[index].link">
+              <span>Read more</span>
+              <i class="mdi mdi-arrow-right"></i>
+            </a>
+          </nav>
+        </div>
+      </article>
+    </a>
+  </div>
+</template>
+
+<style scoped>
+h2 {
+  margin-top: 8rem;
+}
+</style>

package/src/features.data.js

@@ -0,0 +1,11 @@
+import { createContentLoader } from "vitepress";
+
+export default createContentLoader("features/*.md", {
+  includeSrc: true,
+  render: true,
+  transform(rawData) {
+    return rawData.filter(
+      (d) => d.url !== "/features/" && d.url !== "/features/README",
+    );
+  },
+});

package/src/index.js

@@ -1,5 +1,6 @@
 import DefaultTheme from "vitepress/theme";
 import FeatureSection from "./components/FeatureSection.vue";
+import FeaturesGallery from "./components/FeaturesGallery.vue";
 import Layout from "./Layout.vue";
 import "@eox/ui";
 import "./style.css";
@@ -9,6 +10,7 @@ export default {
   Layout,
   enhanceApp({ app, router, siteData }) {
     app.component("FeatureSection", FeatureSection);
+    app.component("FeaturesGallery", FeaturesGallery);
 
     router.onAfterRouteChanged = () => {
       if (!import.meta.env.SSR) {