Add effective dates to ToU and HP pages and fix versions panel

src/components/Pages/Components/PolicyNavigationPanel.vue

@@ -144,15 +144,22 @@ export default {
 
       return `${this.basePath}/${activeFrom}`
     },
+    formatActiveFrom (activeFrom) {
+      if (!activeFrom) {
+        return ''
+      }
+
+      return new Date(activeFrom).toLocaleDateString('en-GB', { year: 'numeric', month: 'long', day: 'numeric', timeZone: 'UTC' })
+    },
     titleForPolicy ({ activeFrom, isCurrentPolicy, isUpcomingPolicy }) {
       if (isCurrentPolicy) {
-        return 'Current version'
+        return `${this.formatActiveFrom(activeFrom)} (current)`
       }
       if (isUpcomingPolicy) {
         return 'Upcoming version'
+      } else {
+        return `${this.formatActiveFrom(activeFrom)}`
       }
-
-      return activeFrom
     },
   },
   mounted () {

src/components/Pages/HostingPolicy/HostingPolicyRenderer.vue

@@ -15,7 +15,7 @@
             <router-link class="white--text" to="/hosting-policy">current version here</router-link>.
           </v-alert>
 
-          <component :is="policy" v-if="policy" />
+          <component :is="policy" v-if="policy" :active-from="policyMetadata && policyMetadata.active_from" />
         </v-col>
       </v-row>
     </v-container>

src/components/Pages/HostingPolicy/hosting-policy/version-1.vue

@@ -1,8 +1,12 @@
 <template>
   <v-main>
     <v-container class="fill-height" fluid>
-      <v-col justify="center" class="policy-content text-body-1">
-      <h1 id="hosting-policy-for-wikibase-cloud" class="mb-7">Hosting Policy for Wikibase Cloud</h1>
+      <v-col justify="center">
+        <hgroup>
+          <h1>Hosting Policy for Wikibase Cloud</h1>
+          <p v-if="activeFrom" class="text-subtitle-1 text--secondary mb-2">Effective: {{ formattedActiveFrom }}</p>
+        </hgroup>
+
           <h2 id="purpose-and-scope" class="mb-3">1. Purpose and Scope</h2>
           <p>This policy defines Wikimedia Deutschland’s (WMDE) expectations and criteria for hosting on Wikibase Cloud. It explains what kinds of datasets and use cases are supported by WMDE and how those decisions are made and implemented.</p>
           <p>The policy exists to ensure that Wikibase Cloud technical and financial resources, as well as staff capacity are used responsibly, intentionally, in alignment with WMDE’s mission. Wikibase Cloud is not intended to be a generic free hosting service for any purpose. The policy helps us maintain visibility into how the platform is used and provides a framework to support and encourage use cases aligned with the role we want Wikibase Cloud to play in the Wikibase Ecosystem, and to address cases that clearly fall outside that role.</p>
@@ -237,5 +241,17 @@
 <script>
 export default {
   name: 'HostingPolicy',
+  props: {
+    activeFrom: {
+      type: String,
+      default: null,
+    },
+  },
+  computed: {
+    formattedActiveFrom () {
+      if (!this.activeFrom) return null
+      return new Date(this.activeFrom).toLocaleDateString('en-GB', { year: 'numeric', month: 'long', day: 'numeric', timeZone: 'UTC' })
+    },
+  },
 }
 </script>

src/components/Pages/TermsOfUse/TermsOfUseRenderer.vue

@@ -15,7 +15,7 @@
             <router-link class="white--text" to="/terms-of-use">current version here</router-link>.
           </v-alert>
 
-          <component :is="policy" v-if="policy" />
+          <component :is="policy" v-if="policy" :active-from="policyMetadata && policyMetadata.active_from" />
         </v-col>
       </v-row>
     </v-container>

src/components/Pages/TermsOfUse/terms-of-use/version-1.vue

@@ -1,6 +1,10 @@
 <template>
   <div>
-    <h1>Terms Of Use</h1>
+    <hgroup>
+      <h1>Terms Of Use</h1>
+      <p v-if="activeFrom" class="text-subtitle-1 text--secondary mb-2">Effective: {{ formattedActiveFrom }}</p>
+    </hgroup>
+
     <p>
       PLEASE READ THESE TERMS OF USE CAREFULLY BEFORE USING THE SERVICES.
       BY ACCESSING THIS SITE OR USING ANY PART OF THE SITE OR ANY CONTENT
@@ -1282,8 +1286,19 @@
 
 <script>
 export default {
+  props: {
+    activeFrom: {
+      type: String,
+      default: null,
+    },
+  },
   components: {},
-  computed: {},
+  computed: {
+    formattedActiveFrom () {
+      if (!this.activeFrom) return null
+      return new Date(this.activeFrom).toLocaleDateString('en-GB', { year: 'numeric', month: 'long', day: 'numeric', timeZone: 'UTC' })
+    },
+  },
 }
 </script>
 

src/components/Pages/TermsOfUse/terms-of-use/version-2.vue

@@ -1,6 +1,10 @@
 <template>
   <div>
-    <h1>Terms Of Use</h1>
+    <hgroup>
+      <h1>Terms Of Use</h1>
+      <p v-if="activeFrom" class="text-subtitle-1 text--secondary mb-2">Effective: {{ formattedActiveFrom }}</p>
+    </hgroup>
+
     <v-alert text color="info">
       <div class="light-blue--text text--darken-4">
         <div class="text-h6 mb-3">What changed from
@@ -1119,12 +1123,22 @@
 
 <script>
 export default {
+  props: {
+    activeFrom: {
+      type: String,
+      default: null,
+    },
+  },
   components: {
   },
   computed: {
     isMobile () {
       return this.$vuetify.breakpoint.xs
     },
+    formattedActiveFrom () {
+      if (!this.activeFrom) return null
+      return new Date(this.activeFrom).toLocaleDateString('en-GB', { year: 'numeric', month: 'long', day: 'numeric', timeZone: 'UTC' })
+    },
   },
   data: () => ({
     show: false,