Add icon to view corresponding online page

openzim · Nov 27, 2024 · 32720d5 · 32720d5
1 parent dc1ec88
commit 32720d5
Show file tree

Hide file tree

Showing 7 changed files with 48 additions and 10 deletions.
diff --git a/scraper/src/mindtouch2zim/processor.py b/scraper/src/mindtouch2zim/processor.py
@@ -364,6 +364,7 @@ def run_with_creator(self, creator: Creator):
             content=SharedModel(
                 logo_path="content/logo.png",
                 root_page_path=selected_pages[0].path,  # root is always first
+                library_online_url=CONTEXT.library_url,
                 pages=[
                     PageModel(id=page.id, title=page.title, path=page.path)
                     for page in selected_pages

diff --git a/scraper/src/mindtouch2zim/ui.py b/scraper/src/mindtouch2zim/ui.py
@@ -21,6 +21,7 @@ class PageContentModel(CamelModel):
 class SharedModel(CamelModel):
     logo_path: str
     root_page_path: str
+    library_online_url: str
     pages: list[PageModel]
 
 

diff --git a/zimui/cypress/fixtures/shared.json b/zimui/cypress/fixtures/shared.json
@@ -1,6 +1,7 @@
 {
   "logoPath": "content/logo.png",
   "rootPagePath": "a_folder/a_page",
+  "libraryOnlineUrl": "http://www.acme.com",
   "pages": [
     {
       "id": "123",

diff --git a/zimui/src/assets/globe.svg b/zimui/src/assets/globe.svg
diff --git a/zimui/src/components/HeaderBar.vue b/zimui/src/components/HeaderBar.vue
@@ -5,6 +5,8 @@ import { useMainStore } from '@/stores/main'
 
 import logoPlaceholder from '@/assets/logo-placeholder.png'
 
+import globeImage from '@/assets/globe.svg'
+
 // Fetch the home data
 const main = useMainStore()
 onMounted(async () => {
@@ -18,22 +20,43 @@ onMounted(async () => {
 
 <template>
   <div class="header-bar">
-    <router-link to="/">
-      <v-img
-        :lazy-src="logoPlaceholder"
-        :src="main.shared?.logoPath"
-        alt="LibreTexts logo"
-        class="logo"
-        width="auto"
-        height="70"
-      />
-    </router-link>
+    <div id="logo">
+      <router-link to="/">
+        <v-img
+          id="logo"
+          :lazy-src="logoPlaceholder"
+          :src="main.shared?.logoPath"
+          alt="LibreTexts logo"
+          class="logo"
+          width="auto"
+          height="70"
+        />
+      </router-link>
+    </div>
+    <a :href="main.onlinePageUrl" target="_blank" title="View online"
+      ><img id="online" :src="globeImage" alt="View online"
+    /></a>
   </div>
 </template>
 
 <style scoped>
 .header-bar {
   padding: 0.25rem;
+  display: flex;
+  flex-direction: row;
+}
+
+#logo {
+  flex-grow: 1;
+}
+
+a:after {
+  content: none;
+}
+
+img#online {
+  height: 20px;
+  padding-right: 10px;
 }
 
 @media print {

diff --git a/zimui/src/stores/main.ts b/zimui/src/stores/main.ts
@@ -9,6 +9,7 @@ export type RootState = {
   shared: Shared | null
   pagesByPath: { [key: string]: SharedPage }
   pageContent: PageContent | null
+  onlinePageUrl: string
   isLoading: boolean
   errorMessage: string
   errorDetails: string
@@ -20,6 +21,7 @@ export const useMainStore = defineStore('main', {
       shared: null,
       pagesByPath: {},
       pageContent: null,
+      onlinePageUrl: '#',
       isLoading: false,
       errorMessage: '',
       errorDetails: ''
@@ -61,6 +63,7 @@ export const useMainStore = defineStore('main', {
           (response) => {
             this.isLoading = false
             this.pageContent = response.data as PageContent
+            this.onlinePageUrl = `${this.shared?.libraryOnlineUrl}/${page.path}`
             mathjaxService.removeMathJax()
             mathjaxService.addMathJax(mathjaxService.frontFromTitle(page.title))
           },

diff --git a/zimui/src/types/shared.ts b/zimui/src/types/shared.ts
@@ -6,6 +6,7 @@ export interface SharedPage {
 export interface Shared {
   logoPath: string
   rootPagePath: string
+  libraryOnlineUrl: string
   pages: SharedPage[]
 }