Create the page for sensitive content explanation

frontend/src/locales/scripts/en.json5

@@ -255,6 +255,56 @@
       report: "report a bug form",
     },
   },
+  // translation keys used on the /sensitive-content page
+  sensitive: {
+    title: "Sensitive content",
+    description: {
+      content: "{openverse} operates along a “safe-by-default” approach in all aspects of its operation and development, with the intention of being as inclusive and accessible as possible. Therefore, {openverse} only includes results with sensitive content when users have explicitly opted in to the “include sensitive results” features on {openverse}.org and in the {openverse} API. In adherence to {wpCoc} and its {deiStatement}, {openverse} holds contributors to high expectations regarding conduct towards other contributors, the accessibility of contribution and the services, and, therefore, being an inclusive project. Similarly, {openverse} holds the expectation that the results returned from the API or displayed on the {openverse}.org website should be accessible by default. Everyone, regardless of background, should feel safe and included in {openverse}, whether they are a contributor to the technical aspects of the {openverse} services, a creator whose works are included in {openverse}, or an {openverse} user. {openverse} recognises its responsibility as a tool used by people of a wide variety of ages, including young people in educational settings, and pays particular attention to minimizing accidental interaction with or exposure to sensitive content.",
+      wpCoc: "WordPress’s Community Code of Conduct",
+      deiStatement: "diversity, equity, and inclusion statement",
+    },
+    sensitivity: {
+      what: '{openverse} uses the term "sensitive" rather than "mature", "NSFW" (not safe for work), or other terms in order to indicate that our designation of content as sensitive is broad, with a focus on accessibility and inclusion. This means that some content is designated "sensitive" that would not fall into a category of what is generally understood to be "mature" content (in other words, content specifically for an adult audience). The designation does not, however, imply that {openverse} or its maintainers view the content as inappropriate for the platform in general and is likewise not an implication of moral or ethical judgement. We consider "sensitive" content to be content that is offensive, disturbing, graphic, or otherwise inappropriate, with particular attention paid to young people.',
+      how: "This definition of sensitivity has a tremendous degree of flexibility and is intentionally imprecise. {openverse} relies on a variety of tools to discover potentially sensitive content, including moderated user reports on individual work and scanning the textual content related to a work for sensitive terms. These are described in more detail below.",
+    },
+    onOff: {
+      title: "Turning sensitive content on and off",
+      description: "",
+    },
+    designations: {
+      title: "Sensitive content designations",
+      description: "{openverse} designates sensitive content in the API and on the {openverse}.org website using two methods: reports from {openverse} users and automated sensitive textual content detection. These designations are not exclusive of each other and a single work may have one or both applied to it.",
+      userReported: {
+        title: "User reported sensitivity",
+        description: "{openverse} users are invited to report sensitive content via the {openverse}.org website and the {openverse} API. Some tools and apps that integrate with the {openverse} API, like the {gutenbergMediaInserter}, also allow their users to report sensitive content. An individual work’s page includes the ability to report content as sensitive (or to report rights violations). {openverse} moderators check these reports and make decisions about whether to add a sensitivity designation to the work or, in certain cases as described above, delist the work from {openverse}’s services.",
+        gutenbergMediaInserter: "Gutenberg editor’s {openverse} media inserter",
+      },
+      sensitiveText: {
+        title: "Sensitive textual content",
+        description: "{openverse} scans some of the textual metadata related to works as provided by our sources for sensitive terms. {openverse}’s {sensitiveTermsList} is open source and contributions and input from the community are welcome and invited. Examples of potentially sensitive text include but are not limited to text of a sexual, biological, violent, racist, or otherwise derogatory nature. The project recognises that this approach is imperfect and that some works may inadvertently receive a sensitivity designation without necessarily being sensitive. For more context on why we’ve chosen this approach despite that, refer to the {imperfect} of our project planning document related to this feature.",
+        sensitiveTermsList: "sensitive terms list",
+        imperfect: '"{sectionName}" section',
+        metadata: "It is important to note that some textual metadata for a work is {notAvailable} through the {openverse} API or the {openverse}.org website. However, such metadata is still scanned for sensitive terms and is not treated as a special case. If {openverse}’s text scanning finds sensitive terms in those metadata fields for a work, the work will still receive a sensitivity designation based on sensitive text even though the sensitive text itself is not available through {openverse}. {openverse} takes the approach that sensitive textual content in a description is a relatively high correlative indicator of potentially sensitive works. As above, {openverse} understands that this is not perfect.",
+        notAvailable: "not available",
+      },
+    },
+    faq: {
+      title: "Frequently asked questions",
+      one: {
+        question: "I’ve found content I think is sensitive that does not have a sensitivity designation. What should I do?",
+        answer: "Please report sensitive content by visiting the individual work’s page on the {openverse}.org website and using the “report this content” button below the attribution information and above the tags. {openverse} moderates reports individually and reserves the right to respectfully decline the request to add a sensitivity designation to a given work.",
+      },
+      two: {
+        question: "I disagree with the sensitivity designation on a work. Can you please remove it?",
+        answerPt1: "For text-based designations, {openverse} does not at the moment have a method for removing the designation. This is a feature that will be built eventually, but is not part of the baseline sensitive content detection feature.",
+        answerPt2: "For user reported designations, please file a new report on the work’s page following the instructions in the previous question. In the notes, describe why you believe the work should not have a sensitivity designation. As when adding a new designation, {openverse} reserves the right to respectfully decline the request to remove a confirmed user sensitivity designation.",
+      },
+      three: {
+        question: "I’ve found content on {openverse} that may be illegal. Besides reporting it to {openverse}, are there any other steps I can take?",
+        answer: "For user reported designations, please file a new report on the work’s page following the instructions in the previous question. In the notes, describe why you believe the work should not have a sensitivity designation. As when adding a new designation, {openverse} reserves the right to respectfully decline the request to remove a confirmed user sensitivity designation.",
+      },
+    },
+  },
   error: {
     occurred: "An error occurred",
     imageNotFound: "Couldn't find image with id {id}",

frontend/src/pages/sensitive-content.vue

@@ -0,0 +1,140 @@
+<template>
+  <VContentPage>
+    <h1>
+      {{ $t("sensitive.title") }}
+    </h1>
+
+    <i18n path="sensitive.description.content" tag="p">
+      <template #openverse>Openverse</template>
+      <template #wpCoc
+        ><VLink
+          href="https://make.wordpress.org/handbook/community-code-of-conduct/"
+          >{{ $t("sensitive.description.wpCoc") }}</VLink
+        ></template
+      >
+      <template #deiStatement
+        ><VLink
+          href="https://make.wordpress.org/handbook/diversity-equity-and-inclusion-in-wordpress/"
+          >{{ $t("sensitive.description.deiStatement") }}</VLink
+        ></template
+      >
+    </i18n>
+
+    <p>{{ $t("sensitive.sensitivity.what", { openverse: "Openverse" }) }}</p>
+    <p>{{ $t("sensitive.sensitivity.how", { openverse: "Openverse" }) }}</p>
+
+    <!-- TODO
+    <h2 id="on-off">{{ $t("sensitive.onOff.title") }}</h2>
+    <p>{{ $t("sensitive.onOff.description", { openverse: "Openverse" }) }}</p>
+    -->
+
+    <h2 id="designations">
+      {{ $t("sensitive.designations.title") }}
+    </h2>
+
+    <p>
+      {{ $t("sensitive.designations.description", { openverse: "Openverse" }) }}
+    </p>
+
+    <h3 id="user-reported-sensitivity">
+      {{ $t("sensitive.designations.userReported.title") }}
+    </h3>
+
+    <i18n path="sensitive.designations.userReported.description" tag="p">
+      <template #openverse>Openverse</template>
+      <template #gutenbergMediaInserter>
+        <VLink
+          href="https://learn.wordpress.org/tutorial/add-media-and-openverse-images-to-your-content-directly-from-the-inserter/"
+          >{{
+            $t("sensitive.designations.userReported.gutenbergMediaInserter", {
+              openverse: "Openverse",
+            })
+          }}</VLink
+        >
+      </template>
+    </i18n>
+
+    <h3 id="sensitive-textual-content">
+      {{ $t("sensitive.designations.sensitiveText.title") }}
+    </h3>
+
+    <i18n path="sensitive.designations.sensitiveText.description" tag="p">
+      <template #openverse>Openverse</template>
+      <template #sensitiveTermsList>
+        <VLink href="https://github.com/wordpress/openverse-sensitive-terms">{{
+          $t("sensitive.designations.sensitiveText.sensitiveTermsList")
+        }}</VLink>
+      </template>
+      <template #imperfect>
+        <VLink
+          href="https://docs.openverse.org/projects/proposals/trust_and_safety/detecting_sensitive_textual_content/20230309-implementation_plan_sensitive_terms_list.html#this-will-not-be-perfect"
+          >{{
+            $t("sensitive.designations.sensitiveText.imperfect", {
+              sectionName: "This will not be perfect",
+            })
+          }}</VLink
+        >
+      </template>
+    </i18n>
+
+    <i18n path="sensitive.designations.sensitiveText.metadata" tag="p">
+      <template #openverse>Openverse</template>
+      <template #notAvailable>
+        <VLink href="https://github.com/WordPress/openverse/issues/2594">{{
+          $t("sensitive.designations.sensitiveText.notAvailable")
+        }}</VLink>
+      </template>
+    </i18n>
+
+    <h2>
+      {{ $t("sensitive.faq.title") }}
+    </h2>
+
+    <p>
+      <strong>{{ $t("sensitive.faq.one.question") }}</strong
+      ><br />
+      {{ $t("sensitive.faq.one.answer", { openverse: "Openverse" }) }}
+    </p>
+
+    <p>
+      <strong>{{ $t("sensitive.faq.two.question") }}</strong
+      ><br />
+      {{ $t("sensitive.faq.two.answerPt1", { openverse: "Openverse" }) }}
+    </p>
+    <p>{{ $t("sensitive.faq.two.answerPt2", { openverse: "Openverse" }) }}</p>
+
+    <p>
+      <strong>{{
+        $t("sensitive.faq.three.question", { openverse: "Openverse" })
+      }}</strong
+      ><br />
+      {{ $t("sensitive.faq.three.answer", { openverse: "Openverse" }) }}
+    </p>
+  </VContentPage>
+</template>
+
+<script lang="ts">
+import { defineComponent, useMeta } from "@nuxtjs/composition-api"
+
+import { useI18n } from "~/composables/use-i18n"
+
+import VLink from "~/components/VLink.vue"
+import VContentPage from "~/components/VContentPage.vue"
+
+export default defineComponent({
+  name: "AboutPage",
+  components: { VLink, VContentPage },
+  layout: "content-layout",
+  setup() {
+    const i18n = useI18n()
+
+    useMeta({
+      title: `${i18n.t("about.title", {
+        openverse: "Openverse",
+      })} | Openverse`,
+      meta: [{ hid: "robots", name: "robots", content: "all" }],
+    })
+  },
+  head: {},
+})
+</script>