Merge pull request #812 from karthik2804/suh/title

fix title and some small issues in the hub preview modal
fermyon · Aug 23, 2023 · 8314c5d · 8314c5d
2 parents e7e3636 + 60bd7d3
commit 8314c5d
Show file tree

Hide file tree

Showing 7 changed files with 37 additions and 20 deletions.
diff --git a/spin-up-hub/dist/assets/index-f58b6619.css → spin-up-hub/dist/assets/index-802cada8.css b/spin-up-hub/dist/assets/index-f58b6619.css → spin-up-hub/dist/assets/index-802cada8.css
diff --git a/spin-up-hub/dist/assets/index-a79025e6.js → spin-up-hub/dist/assets/index-a826cce4.js b/spin-up-hub/dist/assets/index-a79025e6.js → spin-up-hub/dist/assets/index-a826cce4.js
diff --git a/spin-up-hub/dist/index.html b/spin-up-hub/dist/index.html
@@ -15,10 +15,9 @@
     <link
       rel="alternate"
       type="application/rss+xml"
-      title="{{site.info.title}}"
-      href="{{site.info.base_url}}/atom.xml"
+      title="Spin Up Hub"
+      href="/atom.xml"
     />
-    <link rel="canonical" href="{{site.info.base_url}}{{env.PATH_INFO}}" />
 
     <link
       rel="stylesheet"
@@ -40,6 +39,8 @@
       rel="stylesheet"
     />
 
+    <title>Spin Up Hub</title>
+
     <!-- Google Tag Manager -->
     <script>
       ;(function (w, d, s, l, i) {
@@ -107,8 +108,8 @@
     window.heap=window.heap||[],heap.load=function(e,t){window.heap.appid=e,window.heap.config=t=t||{};var r=document.createElement("script");r.type="text/javascript",r.async=!0,r.src="https://cdn.heapanalytics.com/js/heap-"+e+".js";var a=document.getElementsByTagName("script")[0];a.parentNode.insertBefore(r,a);for(var n=function(e){return function(){heap.push([e].concat(Array.prototype.slice.call(arguments,0)))}},p=["addEventProperties","addUserProperties","clearEventProperties","identify","resetIdentity","removeEventProperty","setEventProperties","track","unsetEventProperty"],o=0;o<p.length;o++)heap[p[o]]=n(p[o])};
   heap.load("3221611804");
     </script> -->
-    <script type="module" crossorigin src="/hub/assets/index-a79025e6.js"></script>
-    <link rel="stylesheet" href="/hub/assets/index-f58b6619.css">
+    <script type="module" crossorigin src="/hub/assets/index-a826cce4.js"></script>
+    <link rel="stylesheet" href="/hub/assets/index-802cada8.css">
   </head>
 
   <body class="documentation hub">

diff --git a/spin-up-hub/index.html b/spin-up-hub/index.html
@@ -15,10 +15,9 @@
     <link
       rel="alternate"
       type="application/rss+xml"
-      title="{{site.info.title}}"
-      href="{{site.info.base_url}}/atom.xml"
+      title="Spin Up Hub"
+      href="/atom.xml"
     />
-    <link rel="canonical" href="{{site.info.base_url}}{{env.PATH_INFO}}" />
 
     <link
       rel="stylesheet"
@@ -40,6 +39,8 @@
       rel="stylesheet"
     />
 
+    <title>Spin Up Hub</title>
+
     <!-- Google Tag Manager -->
     <script>
       ;(function (w, d, s, l, i) {

diff --git a/spin-up-hub/src/components/PreviewModal.vue b/spin-up-hub/src/components/PreviewModal.vue
@@ -62,11 +62,11 @@ export default {
                             </a>
                             <div class="metadata">
                                 <div class="name">Url</div>
-                                <div class="value">{{ modalData.url }}</div>
+                                <div class="value"><a href="{{ modalData.url }}">{{ modalData.url }}</a></div>
                             </div>
                             <div class="metadata">
                                 <div class="name">Submitted by</div>
-                                <div class="value">@{{ modalData.author }}
+                                <div class="value"><a href="https://github.com/{{ modalData.author }}">@{{ modalData.author }}</a>
                                     <svg v-if="verified" version="1.1" viewBox="0 0 1200 1200" xmlns="http://www.w3.org/2000/svg">
                                         <g>
                                             <path
@@ -302,6 +302,13 @@ export default {
                             margin-top: 0.5rem;
                         }
 
+                        a {
+                            text-decoration: none !important;
+                            margin: 0;
+                            &::after {
+                                display: none;
+                            }
+                        }
                         &.badge {
                             min-width: 50px;
                             display: inline-flex;

diff --git a/spin-up-hub/src/store.js b/spin-up-hub/src/store.js
@@ -29,15 +29,15 @@ const store = createStore({
       let data = state.contentItems.find(k => k.id == payload)
       if (data) {
         state.modalData = data
-        console.log(state.testData)
+        state.modalData.createdAt = formatTimestamp(data.createdAt)
+        state.modalData.lastUpdated = formatTimestamp(data.lastUpdated)
         state.modalData.description = ""
         state.modalData.isloaded = false
         document.body.classList.add("modal-open")
-
+        document.title = `Spin Up Hub | ${state.modalData.title} `
       }
     },
     openPreview(state, payload) {
-      console.log(payload)
       state.openPreviewId = payload
       state.isModalOpen = true
       router.push("/hub/preview/" + payload)
@@ -46,6 +46,7 @@ const store = createStore({
       state.isModalOpen = false
       document.body.classList.remove("modal-open")
       router.push("/hub")
+      document.title = "Spin Up Hub"
     },
     updateModalDescription(state, payload) {
       state.modalData.description = payload.description
@@ -124,4 +125,9 @@ const unescapeHTML = str =>
     }[tag] || tag)
   );
 
+function formatTimestamp(timestamp) {
+  const options = { year: 'numeric', month: 'long', day: 'numeric'};
+  return new Date(timestamp).toLocaleDateString('en-US', options);
+}
+
 export { store, unescapeHTML }
diff --git a/templates/home.hbs b/templates/home.hbs
@@ -20,6 +20,8 @@
                             class="is-active" {{/if}}>Fermyon Cloud</a></li>
                     <li><a href="/bartholomew/index" {{#if (active_project request.spin-path-info "/cloud/" )}}
                             class="is-active" {{/if}}>Bartholomew</a></li>
+                    <li><a href="/hub" {{#if (active_project request.spin-path-info "/cloud/" )}}
+                            class="is-active" {{/if}}>Spin Up Hub</a></li>
                 </ul>
 
                 <a class="navbar-item button is-primary is-rounded is-small" href="https://cloud.fermyon.com/"