policies: add outdated version info banners and fix banner rendering

src/components/Pages/HostingPolicy/HostingPolicyRenderer.vue

@@ -10,10 +10,21 @@
         </v-col>
 
         <v-col cols="11" md="8">
-          <v-alert type="info" v-if="isUpcomingRoute">
+          <hgroup>
+            <h1>Hosting Policy</h1>
+            <p v-if="policyMetadata && policyMetadata.active_from" class="text-subtitle-1 text--secondary mb-2">
+              Effective: {{ formattedActiveFrom }}
+            </p>
+          </hgroup>
+
+          <v-alert class="mt-2" type="info" v-if="isUpcomingRoute">
             This is an upcoming version. You can find the
             <router-link class="white--text" to="/hosting-policy">current version here</router-link>.
           </v-alert>
+          <v-alert class="mt-2" type="info" v-if="!isUpcomingRoute && !isCurrentRoute">
+            This is an outdated version. You can find the
+            <router-link class="white--text" to="/hosting-policy">current version here</router-link>.
+          </v-alert>
 
           <component :is="policy" v-if="policy" :active-from="policyMetadata && policyMetadata.active_from" />
         </v-col>
@@ -45,6 +56,10 @@ export default {
     isCurrentRoute: function () {
       return this.policyActiveFrom === undefined
     },
+    formattedActiveFrom: function () {
+      if (!this.policyMetadata || !this.policyMetadata.active_from) return null
+      return new Date(this.policyMetadata.active_from).toLocaleDateString('en-GB', { year: 'numeric', month: 'long', day: 'numeric', timeZone: 'UTC' })
+    },
   },
   data () {
     return {

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

@@ -2,11 +2,6 @@
   <v-main>
     <v-container class="fill-height" fluid>
       <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>

src/components/Pages/TermsOfUse/TermsOfUseRenderer.vue

@@ -10,10 +10,21 @@
         </v-col>
 
         <v-col cols="11" md="8">
-          <v-alert type="info" v-if="isUpcomingRoute">
+          <hgroup>
+            <h1>Terms of Use</h1>
+            <p v-if="policyMetadata && policyMetadata.active_from" class="text-subtitle-1 text--secondary mb-2">
+              Effective: {{ formattedActiveFrom }}
+            </p>
+          </hgroup>
+
+          <v-alert class="mt-2" type="info" v-if="isUpcomingRoute">
             This is an upcoming version. You can find the
             <router-link class="white--text" to="/terms-of-use">current version here</router-link>.
           </v-alert>
+          <v-alert class="mt-2" type="info" v-if="!isUpcomingRoute && !isCurrentRoute">
+            This is an outdated version. You can find the
+            <router-link class="white--text" to="/terms-of-use">current version here</router-link>.
+          </v-alert>
 
           <component :is="policy" v-if="policy" :active-from="policyMetadata && policyMetadata.active_from" />
         </v-col>
@@ -45,6 +56,10 @@ export default {
     isCurrentRoute: function () {
       return this.policyActiveFrom === undefined
     },
+    formattedActiveFrom: function () {
+      if (!this.policyMetadata || !this.policyMetadata.active_from) return null
+      return new Date(this.policyMetadata.active_from).toLocaleDateString('en-GB', { year: 'numeric', month: 'long', day: 'numeric', timeZone: 'UTC' })
+    },
   },
   data () {
     return {

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

@@ -1,10 +1,5 @@
 <template>
   <div>
-    <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
@@ -1286,19 +1281,7 @@
 
 <script>
 export default {
-  props: {
-    activeFrom: {
-      type: String,
-      default: null,
-    },
-  },
   components: {},
-  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,10 +1,5 @@
 <template>
   <div>
-    <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 the
@@ -1123,22 +1118,12 @@
 
 <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,