Merge pull request #82 from esciencecenter-digital-skills/layout-update

Layout update
esciencecenter-digital-skills · Jan 22, 2025 · aa88606 · aa88606
2 parents 6f63ed1 + d28ae87
commit aa88606
Show file tree

Hide file tree

Showing 23 changed files with 48 additions and 375 deletions.
diff --git a/assets/nlesc-decorations.js b/assets/nlesc-decorations.js
@@ -17,7 +17,7 @@ export default {
 
 function initDecorations (deck) {
   const reveal = deck.getRevealElement()
-  const baseUrl = useRuntimeConfig().public.repoName;
+  const style = useRuntimeConfig().public.style;
   const decorations = document.createElement('div')
   decorations.setAttribute('id', 'decorations')
   decorations.innerHTML = `
@@ -29,22 +29,22 @@ function initDecorations (deck) {
   <div id="yellow-half-strip"></div>
   <div id="touch-pane"><h3> </h3></div>
   <div id="empowering"><h3>“Empowering researchers across all disciplines through innovative research software”</h3></div>
-  <div id="logo-color"><img src="/${baseUrl}/nlesc_style_files/logo-fc.svg"></div>
-  <div id="logo-part-white"><img src="/${baseUrl}/nlesc_style_files/logo-fc-part-white.svg"></div>
-  <div id="logo-white"><img src="/${baseUrl}/nlesc_style_files/logo-fc-white.svg"></div>
-  <div id="yellow-flag"><img class="left-e" src="/${baseUrl}/nlesc_style_files/e-logo.svg"></img></div>
-  <div id="purple-half-circle-logo"><img class="logo" src="/${baseUrl}/nlesc_style_files/logo-fc-part-white.svg"></img></div>
+  <div id="logo-color"><img src="/styles/${style}/logo-fc.svg"></div>
+  <div id="logo-part-white"><img src="/styles/${style}/logo-fc-part-white.svg"></div>
+  <div id="logo-white"><img src="/styles/${style}/logo-fc-white.svg"></div>
+  <div id="yellow-flag"><img class="left-e" src="/styles/${style}/e-logo.svg"></img></div>
+  <div id="purple-half-circle-logo"><img class="logo" src="/styles/${style}/logo-fc-part-white.svg"></img></div>
   <div id="blue-strip"><div id="footer"></div></div>
-  <img id="right-e" src="/${baseUrl}/nlesc_style_files/letter-e.svg"></img>
-  <img id="left-e" src="/${baseUrl}/nlesc_style_files/e-logo.svg"></img>
+  <img id="right-e" src="/styles/${style}/letter-e.svg"></img>
+  <img id="left-e" src="/styles/${style}/e-logo.svg"></img>
   <div id="purple-blob">
     <div class="blob1"></div>
     <div class="blob2"></div>
     <div class="box"></div>
   </div>
-  <div id="globe"><img src="/${baseUrl}/nlesc_style_files/globe.png"></img></div>
-  <div id="mail"><img src="/${baseUrl}/nlesc_style_files/mail.png"></img></div>
-  <div id="phone"><img src="/${baseUrl}/nlesc_style_files/phone.png"></img></div>
+  <div id="globe"><img src="/styles/${style}/globe.png"></img></div>
+  <div id="mail"><img src="/styles/${style}/mail.png"></img></div>
+  <div id="phone"><img src="/styles/${style}/phone.png"></img></div>
   `
   reveal.prepend(decorations)
 }
diff --git a/components/ChapterBar.vue b/components/ChapterBar.vue
@@ -1,14 +1,14 @@
 <template>
     <div class="flex no-wrap text-left ml-20 z-10">
       <div v-for="chapter in chapterList" :key="chapter._path">
-        <nuxt-link :to="chapter._path" role="button" class="flex max-h-20 m-4 rounded-bl-xl rounded-tr-xl active:border-2">
+        <nuxt-link :to="chapter._path" role="button" class="flex h-20 m-4 justify-center rounded-bl-xl rounded-tr-xl active:border-2">
             <div class="text-2xl px-1.5 py-3 content-center flex-none rounded-bl-xl   bg-eScienceYellow">
               <img v-if="chapter.type === `info`" src="/icons/info.svg" width="25"></img>
               <img v-else-if="chapter.type === `exercise`" src="/icons/exercise.svg" width="25"></img>
               <img v-else-if="chapter.type === `reading`" src="/icons/reading.svg" width="25"></img>
               <img v-else-if="chapter.type === 'slides'" src="/icons/presentation.svg" width="25"></img>
             </div>
-            <div class="p-4 flex-initial text-lg font-display font-semibold rounded-tr-xl shadow-xl bg-gentleBlue  text-eSciencePurple hover:bg-eScienceWhite hover:text-eScienceBlue ">
+            <div class="p-4 flex-initial h-20 max-w-40 text-lg font-display line-clamp-2 font-semibold rounded-tr-xl shadow-xl bg-gentleBlue  text-eSciencePurple hover:bg-eScienceWhite hover:text-eScienceBlue ">
               {{ chapter.title }}
             </div>
         </nuxt-link>

diff --git a/components/ModuleCard.vue b/components/ModuleCard.vue
@@ -1,5 +1,5 @@
 <template>
-    <NuxtLink :to="url" @click.native="store.modTitle = title" class="z-10">
+    <NuxtLink :to="url" class="z-10">
       <!-- relative parent needed for absolute positioning of svg badges-->
       <div class="relative z-10">
         <!-- Module card -->
@@ -21,32 +21,10 @@
 </template>
 
 <script setup>
-const store = useMyStore()
 </script>
 
 <script>
 export default {
-  props: {
-    title: {
-      type: String,
-      default: 'Title'
-    },
-    author: {
-      type: String,
-      default: 'Author'
-    },
-    abstract: {
-      type: String,
-      default: 'Description not available'
-    },
-    thumbnail: {
-      type: String,
-      default: './nlesc-logo.svg'
-    },
-    url: {
-      type: String,
-      default: '/'
-    }
-  }
+  props: ["title", "abstract", "thumbnail", "url"]
 }
 </script>
diff --git a/composables/store.ts b/composables/store.ts
diff --git a/nuxt.config.ts b/nuxt.config.ts
@@ -15,14 +15,35 @@ if(!process.env.CONTENT_PATH) {
   `)
 }
 
+console.log("Reading config file from content path...")
 var publicProps = JSON.parse(fs.readFileSync(`${process.env.CONTENT_PATH}/config.json`, 'utf-8')).publicProps
-console.log(`config file title =`, publicProps.title)
+console.log(`title =`, publicProps.title)
 console.log(`baseURL =`, publicProps.baseURL)
+
 if("BASE_URL" in process.env) {
   publicProps.baseURL = process.env.BASE_URL
   console.log(`baseURL updated to =`, publicProps.baseURL)
 }
 
+console.log(`organizationURL =`, publicProps.organizationURL)
+if(!publicProps.organizationURL) {
+  console.log("\"organizationURL\" is not defined, default to nlesc url");
+  publicProps.organizationURL = "https://www.esciencecenter.nl";
+ }
+
+console.log(`organizationLogo =`, publicProps.organizationLogo)
+if(!publicProps.organizationLogo) {
+  console.log("\"organizationLogo\" is not defined, default to nlesc logo");
+  publicProps.organizationLogo = "/styles/nlesc/logo.svg";
+ }
+
+console.log(`style =`, publicProps.style)
+if(!publicProps.style) {
+  console.log("\"style\" is not defined, default to nlesc style");
+  publicProps.style = "nlesc";
+ }
+
+
 export default defineNuxtConfig({
   runtimeConfig: {
     public: publicProps,
@@ -67,7 +88,10 @@ export default defineNuxtConfig({
   },
 
   app: {
-    baseURL: `/${publicProps.baseURL}`
+    baseURL: `/${publicProps.baseURL}` ,
+    head: {
+      link: [{ rel: 'icon', type: 'image', href: `/styles/${publicProps.style}/favicon.png` }]
+    },
   },
 
   generate: {

diff --git a/package.json b/package.json
@@ -13,7 +13,7 @@
     "@nuxt/devtools": "latest",
     "@types/node": "^18.16.19",
     "autoprefixer": "^10.4.17",
-    "nuxt": "^3.9.0",
+    "nuxt": "^3.14.0",
     "nuxt-content-assets": "^1.3.3",
     "postcss": "^8.4.35",
     "sass": "~1.71.1",

diff --git a/pages/index.vue b/pages/index.vue
@@ -8,11 +8,9 @@
             <!-- modules -->
             <ContentList :query="modQuery" v-slot="{ list }" class="z-10">
                 <ModuleCard v-for="modObject in list.filter(modObject => (modObject.category === category))"
-                :key="modObject.id"
                 :title="modObject.title"
-                :author="modObject.author"
                 :abstract="modObject.abstract"
-                :thumbnail="`/${config.baseURL}/${modObject._path}/media/${modObject.thumbnail}`"
+                :thumbnail="`${modObject._path}/media/${modObject.thumbnail}`"
                 :url="`${modObject._path}/info`"
                 class="z-10"/>
             </ContentList>
@@ -32,5 +30,4 @@
         where: [{ visibility: 'visible' }], 
         sort: [{ order:1, $numeric:true }] 
     }
-         
 </script>
diff --git a/pages/modules/[module].vue b/pages/modules/[module].vue
@@ -2,16 +2,15 @@
 
       <div class="flex flex-col h-full w-full p-5">
 
-        <ContentDoc v-slot="{ doc }">
-            <h2 class="prose-2xl font-display mx-16 font-bold text-eSciencePurple w-full pl-2">
-              {{ store.modTitle  }}
-            </h2>
-        </ContentDoc>
+          <h2 class="prose-2xl font-display mx-16 font-bold text-eSciencePurple w-full pl-2">
+            {{ moduleDoc.title }}
+          </h2>
         <ChapterBar/>
         <NuxtPage />  
       </div>
 </template>
 
 <script setup lang="ts">
-const store = useMyStore()
+  const route = useRoute();
+  const moduleDoc = await queryContent('/modules/' + route.params.module + '/').findOne();
 </script>
diff --git a/pages/modules/[module]/[chapter].vue b/pages/modules/[module]/[chapter].vue
@@ -14,10 +14,4 @@
 </template>
 
 <script setup lang="ts">
-  const runtimeConfig = useRuntimeConfig();
-  const route = useRoute();
-  const chapterList = await queryContent('/modules/' + route.params.module + '/')
-    .sort({ order: 1, $numeric: true })
-    .find();
-  const baseUrl = "/" + runtimeConfig.public.baseURL + "/";
 </script>
diff --git a/public/favicon.ico b/public/favicon.ico