Add Privacy page

.eslintrc.js

@@ -172,6 +172,7 @@ module.exports = {
           'Flickr',
           'Openverse',
           'WordPress',
+          'openverse@wordpress.org',
         ],
       },
     ],

src/composables/use-pages.ts

@@ -28,7 +28,7 @@ export default function usePages(isNew = false) {
         {
           id: 'privacy',
           name: 'navigation.privacy',
-          link: 'https://wordpress.org/privacy',
+          link: app.localePath('/privacy'),
         },
         {
           id: 'feedback',
@@ -74,8 +74,8 @@ export default function usePages(isNew = false) {
         },
         {
           id: 'privacy',
-          name: 'header.privacy-nav-item',
-          link: 'https://wordpress.org/privacy',
+          name: 'navigation.privacy',
+          link: app.localePath('/privacy'),
         },
       ]
 

src/locales/scripts/en.json5

@@ -157,6 +157,23 @@
     relationships: 'This functionality also allows us to start conversations and build relationships with sources that may like to be included in {openverse} in the future. Finally, we can also offer external sources of media types we do not include in {openverse} yet, but plan to.',
     explanation: 'You can find links to external sources at the bottom of every {openverse} search results page; on pages for searches which return no results; and on pages for media types we do not yet support but intend to.',
   },
+  privacy: {
+    title: 'Privacy',
+    intro: {
+      content: 'The {openverse} project seeks to make the privacy and safety of our users a priority. {openverse} adheres to the {link}. Please see that document for a full description of how {openverse} uses and protects any information that you give us.',
+      link: 'privacy policy of all WordPress.org websites',
+    },
+    cookies: {
+      title: 'Cookies',
+      content: '{openverse} uses cookies to store information about visitor\'s preferences and information about their web browsers. We use this information to improve the user experience of the site. These are considered "Necessary" or "Strictly necessary cookies" and you may disable these by changing your browser settings, but this may affect how {openverse} functions.',
+    },
+    contact: {
+      title: 'Contact Us',
+      content: 'Any questions about {openverse} and privacy can be sent to {email}, shared as a {issue}, or discussed with our community in the #openverse channel of the {chat}.',
+      issue: 'GitHub issue',
+      chat: 'Making WordPress Chat',
+    },
+  },
   'search-guide': {
     title: '{openverse} Syntax Guide',
     intro: 'When you search, you can enter special symbols or words to your search term to make your search results more precise.',

src/pages/privacy.vue

@@ -0,0 +1,74 @@
+<template>
+  <VContentPage>
+    <h1>
+      {{ $t('privacy.title', { openverse: 'Openverse' }) }}
+    </h1>
+    <i18n path="privacy.intro.content" tag="p">
+      <template #link>
+        <VLink href="https://wordpress.org/about/privacy/">{{
+          $t('privacy.intro.link')
+        }}</VLink>
+      </template>
+      <template #openverse>Openverse</template>
+    </i18n>
+
+    <h2>
+      {{ $t('privacy.cookies.title') }}
+    </h2>
+    <i18n path="privacy.cookies.content" tag="p">
+      <template #openverse>Openverse</template>
+    </i18n>
+
+    <h2>
+      {{ $t('privacy.contact.title') }}
+    </h2>
+
+    <i18n path="privacy.contact.content" tag="p">
+      <template #openverse>Openverse</template>
+      <template #email>
+        <VLink href="mailto:openverse@wordpress.org"
+          >openverse@wordpress.org</VLink
+        >
+      </template>
+      <template #issue>
+        <VLink href="https://github.com/WordPress/openverse/issues/new/choose">
+          {{ $t('privacy.contact.issue') }}</VLink
+        >
+      </template>
+      <template #chat>
+        <VLink href="https://make.wordpress.org/chat/">
+          {{ $t('privacy.contact.chat') }}</VLink
+        >
+      </template>
+    </i18n>
+  </VContentPage>
+</template>
+
+<script lang="ts">
+import { defineComponent, useMeta } from '@nuxtjs/composition-api'
+
+import { useFeatureFlagStore } from '~/stores/feature-flag'
+import { useI18n } from '~/composables/use-i18n'
+
+import VLink from '~/components/VLink.vue'
+import VContentPage from '~/components/VContentPage.vue'
+
+export default defineComponent({
+  name: 'VPrivacyPage',
+  components: { VLink, VContentPage },
+  setup() {
+    const i18n = useI18n()
+    const featureFlagStore = useFeatureFlagStore()
+
+    useMeta({
+      title: `${i18n.t('privacy.title', {
+        openverse: 'Openverse',
+      })} | Openverse`,
+      meta: featureFlagStore.isOn('new_header')
+        ? [{ hid: 'robots', name: 'robots', content: 'all' }]
+        : undefined,
+    })
+  },
+  head: {},
+})
+</script>

test/locales/ar.json

@@ -457,6 +457,23 @@
       "report": "الإبلاغ عن نموذج خطأ"
     }
   },
+  "privacy": {
+    "title": "خصوصية",
+    "intro": {
+      "content": "يسعى مشروع {openverse} إلى جعل خصوصية مستخدمينا وأمانهم أولوية. {openverse} تلتزم بـ {link}. يرجى الاطلاع على هذا المستند للحصول على وصف كامل لكيفية استخدام {openverse} وحمايته لأي معلومات تزودنا بها.",
+      "link": "سياسة الخصوصية لجميع مواقع WordPress.org"
+    },
+    "cookies": {
+      "title": "ملفات تعريف الارتباط",
+      "content": "يستخدم {openverse} ملفات تعريف الارتباط لتخزين معلومات حول تفضيلات الزوار ومعلومات حول متصفحات الويب الخاصة بهم. نحن نستخدم هذه المعلومات لتحسين تجربة المستخدم للموقع. تعتبر هذه ملفات تعريف الارتباط \"ضرورية\" أو \"ملفات تعريف الارتباط الضرورية للغاية\" ويمكنك تعطيلها عن طريق تغيير إعدادات المستعرض الخاص بك ، ولكن هذا قد يؤثر على كيفية عمل {openverse}."
+    },
+    "contact": {
+      "title": "اتصل بنا",
+      "content": "يمكن إرسال أي أسئلة حول {openverse} والخصوصية إلى {email} ، أو مشاركتها على أنها {issue} ، أو مناقشتها مع مجتمعنا في #openverse قناة {chat}.",
+      "issue": "مشكلة GitHub",
+      "chat": "جعل WordPress دردشة"
+    }
+  },
   "search-guide": {
     "title": "{openverse} دليل البنية",
     "intro": "عند البحث ، يمكنك إدخال رموز أو كلمات خاصة لمصطلح البحث الخاص بك لجعل نتائج البحث أكثر دقة.",

test/playwright/visual-regression/pages/pages.spec.ts

@@ -11,7 +11,13 @@ import {
 
 test.describe.configure({ mode: 'parallel' })
 
-const contentPages = ['about', 'search-help', 'non-existent', 'sources']
+const contentPages = [
+  'about',
+  'privacy',
+  'search-help',
+  'non-existent',
+  'sources',
+]
 for (const contentPage of contentPages) {
   for (const dir of languageDirections) {
     test.describe(`${contentPage} ${dir} page snapshots`, () => {