Merge pull request #4 from itk-dev/feature/fix-mock-banner-layout-and-readme

feat: mock banner layout, clickable cards, and browser feedback improvements

Author: yepzdk

CHANGELOG.md

@@ -9,7 +9,14 @@ and this project adheres to [Semantic Versioning](https://semver.org/).
 
 ### Added
 
-- Mockup banner displayed on all pages to distinguish from the real application
+- Navigable story chapters with 5 tabs of mock content on the storytelling page
+- Prev/next navigation between story chapters with dynamic step names
+- "6 datasets referenced" link in the story hero pointing to the dataset page
+- "3 comments" link in the dataset header that smooth-scrolls to the discussion section
+- OpenStreetMap iframe embed replacing the map placeholder on the dataset page
+- Lucide icons on onboarding step cards (Globe, Database, LayoutDashboard, Lightbulb)
+- Mockup disclaimer in README
+- Mockup banner displayed as a fixed bar above the header on all pages
 - `robots.txt` and `noindex` meta tag to prevent search engine indexing
 - GitHub Actions workflow to auto-deploy to GitHub Pages on push to `main`
 - Registration page (`/register`) with standalone auth layout (no sidebar/nav shell)
@@ -18,5 +25,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/).
 
 ### Changed
 
+- Updated onboarding subtitle to reference user interests instead of "quick tour"
+- Fixed StoryProgress sticky offset to account for the mockup banner height
 - Set Vite `base` to `/biped-mocks/` for GitHub Pages subdirectory deployment
 - Switch Vue Router from history mode to hash mode for GitHub Pages compatibility

README.md

@@ -1,5 +1,7 @@
 # BIPED Scaffold
 
+> **This repository is for mockup purposes only.** It contains a static UI prototype and is not the real BIPED application. Do not use it as a reference for production functionality or data.
+
 A Vue 3 single-page application for showcasing data about Positive Energy Districts in Aarhus, Denmark. Built with Vite.
 
 ## Prerequisites

src/assets/styles/variables.css

@@ -33,6 +33,7 @@
   --font-primary: 'Sofia Sans', 'Inter', sans-serif;
 
   /* Layout */
+  --banner-height: 28px;
   --header-height: 72px;
   --sidebar-width: 72px;
 

src/components/MockBanner.vue

@@ -6,16 +6,19 @@
 
 <style scoped>
 .mock-banner {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: var(--banner-height);
   background-color: var(--color-accent-orange-bg);
   color: var(--color-accent-orange);
   text-align: center;
-  padding: var(--space-xs) var(--space-md);
   font-family: var(--font-primary);
   font-size: 0.85rem;
   font-weight: 600;
   letter-spacing: 0.02em;
-  line-height: 1.4;
+  line-height: var(--banner-height);
   z-index: 1000;
-  position: relative;
 }
 </style>

src/components/dataset/CommentsSection.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="comments-section">
+  <div id="discussion" class="comments-section">
     <div class="comments-card">
       <div class="new-badge">NEW FEATURE</div>
 

src/components/dataset/DatasetDetails.vue

@@ -9,7 +9,14 @@
     <!-- Map -->
     <div class="card">
       <h3><Map :size="18" :stroke-width="1.5" /> Spatial Coverage</h3>
-      <div class="map-preview"><MapPin :size="14" :stroke-width="1.5" /> Brabrand, Aarhus</div>
+      <div class="map-container">
+        <iframe
+          class="map-iframe"
+          src="https://www.openstreetmap.org/export/embed.html?bbox=10.09%2C56.14%2C10.17%2C56.17&layer=mapnik&marker=56.155%2C10.13"
+          loading="lazy"
+          title="Map showing Brabrand, Aarhus"
+        ></iframe>
+      </div>
     </div>
 
     <!-- Distributions -->
@@ -38,7 +45,7 @@
 </template>
 
 <script setup>
-import { FileText, Map, MapPin, Package, ArrowDown } from 'lucide-vue-next'
+import { FileText, Map, Package, ArrowDown } from 'lucide-vue-next'
 
 const distributions = [
   { name: 'brabrand-solar-3d-model.zip', format: 'ZIP', formatClass: 'zip', size: '245 MB' },
@@ -59,26 +66,16 @@ h3 {
   gap: 8px;
 }
 
-.map-preview {
-  background: linear-gradient(135deg, #d4e8d0, #c8dce8, #e8dcc8);
+.map-container {
   border-radius: var(--radius-md);
-  height: 180px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: var(--color-text-light);
-  font-size: 14px;
-  position: relative;
   overflow: hidden;
+  height: 180px;
 }
 
-.map-preview::after {
-  content: '';
-  position: absolute;
-  inset: 0;
-  background:
-    repeating-linear-gradient(0deg, transparent, transparent 20px, rgba(255, 255, 255, 0.3) 20px, rgba(255, 255, 255, 0.3) 21px),
-    repeating-linear-gradient(90deg, transparent, transparent 20px, rgba(255, 255, 255, 0.3) 20px, rgba(255, 255, 255, 0.3) 21px);
+.map-iframe {
+  width: 100%;
+  height: 100%;
+  border: none;
 }
 
 .dist-table {

src/components/dataset/DatasetHeader.vue

@@ -12,7 +12,7 @@
       <span><Calendar :size="14" :stroke-width="1.5" /> Updated: {{ updated }}</span>
       <span><Download :size="14" :stroke-width="1.5" /> {{ downloads }} downloads</span>
       <span><Eye :size="14" :stroke-width="1.5" /> {{ views }} views</span>
-      <span><MessageCircle :size="14" :stroke-width="1.5" /> {{ commentCount }} comments</span>
+      <a href="#discussion" class="comments-link" @click.prevent="scrollToDiscussion"><MessageCircle :size="14" :stroke-width="1.5" /> {{ commentCount }} comments</a>
     </div>
   </div>
 </template>
@@ -29,6 +29,10 @@ defineProps({
   views: [String, Number],
   commentCount: [String, Number],
 })
+
+function scrollToDiscussion() {
+  document.getElementById('discussion')?.scrollIntoView({ behavior: 'smooth' })
+}
 </script>
 
 <style scoped>
@@ -86,6 +90,17 @@ h1 {
   gap: 4px;
 }
 
+.comments-link {
+  color: var(--color-teal);
+  cursor: pointer;
+  text-decoration: none;
+  transition: color 0.15s;
+}
+
+.comments-link:hover {
+  text-decoration: underline;
+}
+
 @media (max-width: 767px) {
   h1 {
     font-size: 22px;

src/components/home/FeatureTeasers.vue

@@ -1,17 +1,17 @@
 <template>
   <section class="teasers">
-    <div class="teaser-card">
+    <router-link to="/storytelling" class="teaser-card">
       <div class="teaser-preview storytelling-preview">
         <div class="preview-label"><BookOpen :size="14" :stroke-width="1.5" /> Data Story</div>
         <div class="preview-title">Aarhus on the Road to Positive Energy</div>
       </div>
       <div class="teaser-body">
         <h3>Data Storytelling</h3>
         <p>Explore how Brabrand is transforming its energy profile through smart building design, solar optimization, and community engagement — told through data.</p>
-        <router-link to="/storytelling" class="teaser-link">Read the story →</router-link>
+        <span class="teaser-link">Read the story →</span>
       </div>
-    </div>
-    <div class="teaser-card">
+    </router-link>
+    <router-link to="/dataset/brabrand-solar" class="teaser-card">
       <div class="teaser-preview dataset-preview">
         <div class="preview-tags">
           <span class="mini-tag">Energy</span>
@@ -23,9 +23,9 @@
       <div class="teaser-body">
         <h3>Dataset Commenting</h3>
         <p>Join the discussion on datasets. Ask questions, share insights, and collaborate with researchers and city planners directly on data pages.</p>
-        <router-link to="/dataset/brabrand-solar" class="teaser-link">View dataset →</router-link>
+        <span class="teaser-link">View dataset →</span>
       </div>
-    </div>
+    </router-link>
   </section>
 </template>
 
@@ -42,11 +42,14 @@ import { BookOpen } from 'lucide-vue-next'
 }
 
 .teaser-card {
+  display: block;
   background: var(--color-white);
   border-radius: var(--radius-lg);
   box-shadow: var(--shadow-card);
   overflow: hidden;
   transition: box-shadow 0.2s, transform 0.2s;
+  color: inherit;
+  text-decoration: none;
 }
 
 .teaser-card:hover {

src/components/home/OnboardingSteps.vue

@@ -3,53 +3,59 @@
     <div class="onboarding-header">
       <div class="onboarding-icon"><Hand :size="28" :stroke-width="1.5" /></div>
       <h2>Welcome to BIPED Civora</h2>
-      <p class="subtitle">Let us show you around! This quick tour will help you discover the platform's key features in just a few steps.</p>
+      <p class="subtitle">Let us show you around! Based on your interests, these steps will help you discover the platform's key features.</p>
     </div>
     <div class="steps">
-      <div v-for="(step, i) in steps" :key="i" class="step-card">
-        <div class="step-number" :class="{ active: i === 0 }">{{ i + 1 }}</div>
+      <component
+        v-for="(step, i) in steps"
+        :key="i"
+        :is="step.to ? 'router-link' : 'a'"
+        :to="step.to || undefined"
+        :href="step.to ? undefined : step.href"
+        class="step-card"
+      >
+        <div class="step-number">
+          <component :is="step.icon" :size="18" :stroke-width="1.5" />
+        </div>
         <h4>{{ step.title }}</h4>
         <p>{{ step.description }}</p>
-        <component
-          :is="step.to ? 'router-link' : 'a'"
-          :to="step.to || undefined"
-          :href="step.to ? undefined : step.href"
-          class="step-link"
-        >
-          {{ step.linkText }} →
-        </component>
-      </div>
+        <span class="step-link">{{ step.linkText }} →</span>
+      </component>
     </div>
   </section>
 </template>
 
 <script setup>
-import { Hand } from 'lucide-vue-next'
+import { Hand, Globe, Database, LayoutDashboard, Lightbulb } from 'lucide-vue-next'
 
 const steps = [
   {
     title: 'Explore the Digital Twin',
     description: 'Navigate the 3D virtual model of Aarhus and discover solar energy data across the city.',
     linkText: 'View Solar in the Twin',
     href: '#',
+    icon: Globe,
   },
   {
     title: 'Browse the Data Catalog',
     description: 'Search and access open datasets, including solar irradiance and photovoltaic performance data.',
     linkText: 'Explore Solar Data',
     to: '/dataset/brabrand-solar',
+    icon: Database,
   },
   {
     title: 'View Dashboards',
     description: 'Interactive overviews of key solar energy metrics and district performance indicators.',
     linkText: 'See Dashboards',
     to: '/storytelling',
+    icon: LayoutDashboard,
   },
   {
     title: 'Find your use case',
     description: 'Discover how BIPED solar data supports research, planning, and community energy projects.',
     linkText: 'Get Started',
     href: '#',
+    icon: Lightbulb,
   },
 ]
 </script>
@@ -98,11 +104,15 @@ const steps = [
 }
 
 .step-card {
+  display: block;
   text-align: center;
   padding: 24px 16px;
   border: 1px solid var(--color-border-lighter);
   border-radius: var(--radius-lg);
   transition: border-color 0.15s, box-shadow 0.15s;
+  color: inherit;
+  text-decoration: none;
+  cursor: pointer;
 }
 
 .step-card:hover {
@@ -120,11 +130,6 @@ const steps = [
   font-size: 14px;
   font-weight: 700;
   margin: 0 auto 12px;
-  background: var(--color-border-faintest);
-  color: var(--color-text-muted);
-}
-
-.step-number.active {
   background: var(--color-teal);
   color: var(--color-white);
 }

src/components/layout/AppHeader.vue

@@ -42,7 +42,7 @@ defineEmits(['toggle-sidebar'])
   padding: 0 32px;
   border-bottom: 1px solid var(--color-border);
   position: fixed;
-  top: 0;
+  top: var(--banner-height);
   left: 0;
   right: 0;
   z-index: 20;