Attributions v1

components/TitledSection.vue

@@ -0,0 +1,37 @@
+<template>
+  <div class="flex flex-col flex-wrap gap-6 pb-8">
+    <span
+      class="text-[var(--big-text-color)] italic font-['Geist Mono'] text-[4rem]"
+    >
+      <span class="font-[250] tracking wider">{{ title }}</span>
+    </span>
+    <span class="text-2xl">{{ subtitle }} </span>
+
+    <div v-for="(info, title) in data" class="text-xl indent-4">
+      <span v-if="numbered"> {{ title + 1 }}. </span>
+      <span v-else class="font-bold select-none"> &bull;&nbsp; </span>
+      <span v-if="!URLRegex.test(info)">
+        {{ info }}
+      </span>
+      <span v-else v-html="info.replace(URLRegex, getLinksFromText)" />
+    </div>
+  </div>
+</template>
+
+<script setup>
+const URLRegex = new RegExp(
+  /(http|ftp|https):\/\/([\w_-]+(?:(?:\.[\w_-]+)+))([\w.,@?^=%&:\/~+#-]*[\w@?^=%&\/~+#-])/,
+)
+
+const getLinksFromText = function (text) {
+  const newText = `<a class="text-[var(--brand-blue)]" href="${text}">${text}</a>`
+  return newText
+}
+
+const props = defineProps({
+  data: Object,
+  title: String,
+  subtitle: String,
+  numbered: Boolean,
+})
+</script>

i18n/i18n.config.ts

@@ -1,40 +1,47 @@
-import enUS from "./lang/en-US.json"
+//If you take this out of alphabetical order I will eat you
+
+import arSA from "./lang/ar-SA.json"
+import deDE from "./lang/de-DE.json"
 import enPT from "./lang/en-PT.json"
-import lolUS from "./lang/lol-US.json"
 import enUD from "./lang/en-UD.json"
-import ruRU from "./lang/ru-RU.json"
-import deDE from "./lang/de-DE.json"
+import enUS from "./lang/en-US.json"
 import esES from "./lang/es-ES.json"
-import plPL from "./lang/pl-PL.json"
+import huHU from "./lang/hu-HU.json"
+import jaJP from "./lang/ja-JP.json"
+import lolUS from "./lang/lol-US.json"
 import noNO from "./lang/no-NO.json"
-import ptPT from "./lang/pt-PT.json"
+import plPL from "./lang/pl-PL.json"
 import ptBR from "./lang/pt-BR.json"
+import ptPT from "./lang/pt-PT.json"
+import ruRU from "./lang/ru-RU.json"
 import ukUA from "./lang/uk-UA.json"
-import huHU from "./lang/hu-HU.json"
 import viVN from "./lang/vi-VN.json"
-import zhTW from "./lang/zh-TW.json"
 import zhCN from "./lang/zh-CN.json"
+import zhTW from "./lang/zh-TW.json"
 
 export default defineI18nConfig(() => ({
   legacy: false,
   fallbackLocale: "en-US",
   locale: "en-US",
   messages: {
-    "en-US": enUS,
+    //If you take this out of alphabetical order I will eat you again
+    "ar-SA": arSA,
+    "de-DE": deDE,
     "en-PT": enPT,
     "en-UD": enUD,
-    "en-LOL": lolUS,
-    "ru-RU": ruRU,
-    "de-DE": deDE,
+    "en-US": enUS,
     "es-ES": esES,
-    "pl-PL": plPL,
+    "hu-HU": huHU,
+    "ja-JP": jaJP,
+    "en-LOL": lolUS,
     "no-NO": noNO,
-    "pt-PT": ptPT,
+    "pl-PL": plPL,
     "pt-BR": ptBR,
+    "pt-PT": ptPT,
+    "ru-RU": ruRU,
     "uk-UA": ukUA,
-    "hu-HU": huHU,
     "vi-VN": viVN,
-    "zh-TW": zhTW,
     "zh-CN": zhCN,
+    "zh-TW": zhTW,
   },
 }))

i18n/lang/en-US.json

@@ -7,12 +7,11 @@
       "disclaimer": "NOT AN OFFICIAL MINECRAFT PRODUCT. NOT APPROVED BY OR ASSOCIATED WITH MOJANG, MICROSOFT OR SPARK UNIVERSE.",
       "open_source": "This page is open source.",
       "about": "About",
-      "credit_creator": "Originally created by",
-      "credit_designed": "Designed by",
       "interact": "Interact",
       "resources": "Resources",
       "contributing": "Contributing",
-      "experiments": "Experiments"
+      "experiments": "Experiments",
+      "attributions": "Attributions"
     }
   },
   "landing": {
@@ -26,6 +25,22 @@
     "hero": "EXPERIMENTAL FEATURES",
     "subtitle": "Configure experimental flags for development purposes!"
   },
+  "attributions": {
+    "hero": "ATTRIBUTIONS",
+    "subtitle": "We give our thanks to the following. This page wouldn't be possible without them.",
+    "end": "These people have helped improve this site exponentially.",
+    "help": "See a problem? Report it on our Discord.",
+    "titles": {
+      "translators": "Translators",
+      "information_writers": "'Why not Essential' sources",
+      "core": "Core team"
+    },
+    "subtitles": {
+      "translators": "Thank you to the translators on our Crowdin for helping to internationalise this page. In no specific order, here are some translators who have significantly helped.",
+      "information_writers": "These people helped create, fact-check and proofread our 'Why not Essential?' section.",
+      "core": "The core team behind the Notessential webpage."
+    }
+  },
   "contributing": {
     "hero": "CONTRIBUTING",
     "subhero": "To the NotEssential website",

layouts/default.vue

@@ -67,18 +67,11 @@
               <span class="font-bold text-base">{{
                 $t("layout.footer.about")
               }}</span>
-              <span
-                >{{ $t("layout.footer.credit_creator") }}
-                <NELink to="https://blurryface.xyz" external
-                  >Blurryface</NELink
-                ></span
-              >
-              <span
-                >{{ $t("layout.footer.credit_designed") }}
-                <NELink to="https://worldwidepixel.ca" external
-                  >WorldWidePixel</NELink
-                ></span
-              >
+              <NELink to="/attributions"
+                ><LucideHeart class="h-5" />{{
+                  $t("layout.footer.attributions")
+                }}
+              </NELink>
             </div>
             <div
               class="flex flex-col gap-2 font-[500] text-[var(--text-colour)] text-sm"

nuxt.config.ts

@@ -27,74 +27,79 @@ export default defineNuxtConfig({
     strategy: "no_prefix",
     defaultLocale: "en-US",
     locales: [
+      //If you take this out of alphabetical order I will eat you a third time
       {
-        code: "en-US",
-        name: "English (US)",
+        code: "ar-SA",
+        name: "Arabic (Saudi Arabia)",
       },
       {
-        code: "en-PT",
-        name: "English (Pirate Speak)",
+        code: "de-DE",
+        name: "Deutsch (Germany)",
       },
       {
-        code: "en-LOL",
-        name: "LOLCAT (Kingdom of Cats)",
+        code: "en-PT",
+        name: "English (Pirate Speak)",
       },
       {
         code: "en-UD",
         name: "English (Upside-down)",
       },
       {
-        code: "ru-RU",
-        name: "Русский (Russia)",
-      },
-      {
-        code: "de-DE",
-        name: "Deutsch (Germany)",
+        code: "en-US",
+        name: "English (US)",
       },
       {
         code: "es-ES",
         name: "Español (Spain)",
       },
       {
-        code: "pl-PL",
-        name: "Polski (Poland)",
+        code: "hu-HU",
+        name: "magyar (Hungary)",
+      },
+      {
+        code: "ja-JP",
+        name: "日本語 (Japan)",
+      },
+      {
+        code: "en-LOL",
+        name: "LOLCAT (Kingdom of Cats)",
       },
       {
         code: "no-NO",
         name: "norsk (Norway)",
       },
       {
-        code: "pt-PT",
-        name: "Português (Portugal)",
+        code: "pl-PL",
+        name: "Polski (Poland)",
       },
       {
         code: "pt-BR",
         name: "Português (Brazil)",
       },
       {
-        code: "uk-UA",
-        name: "Українська (Ukraine)",
+        code: "pt-PT",
+        name: "Português (Portugal)",
       },
       {
-        code: "hu-HU",
-        name: "magyar (Hungary)",
+        code: "ru-RU",
+        name: "Русский (Russia)",
+      },
+      {
+        code: "uk-UA",
+        name: "Українська (Ukraine)",
       },
       {
         code: "vi-VN",
         name: "Tiếng Việt (Vietnam)",
       },
       {
-        code: "ja-JA",
-        name: "日本語 (Japan)",
+        code: "zh-CN",
+        name: "中文简体 (Simplified Chinese)",
       },
       {
         code: "zh-TW",
         name: "繁體中文 (Traditional Chinese)",
       },
-      {
-        code: "zh-CN",
-        name: "中文简体 (Simplified Chinese)",
-      },
     ],
     /*detectBrowserLanguage: {
       useCookie: true,

pages/attributions.vue

@@ -0,0 +1,85 @@
+<template>
+  <div class="flex flex-col gap-8">
+    <PageHero
+      :title="$t('attributions.hero')"
+      :sub-title="$t('attributions.subtitle')"
+    />
+    <TitledSection
+      v-if="showAttributions"
+      v-for="section in sections"
+      :data="section.data"
+      :title="section.title"
+      :subtitle="section.subtitle"
+    />
+    <span class="text-xl flex flex-row gap-2 items-center flex-wrap"
+      >{{ $t("attributions.end") }} <LucideHeart stroke="var(--brand-red)" />
+    </span>
+    <span class="text-xl flex flex-row gap-2 items-center flex-wrap"
+      >{{ $t("attributions.help") }}
+    </span>
+  </div>
+</template>
+<script setup lang="ts">
+const showAttributions = ref(false)
+if (process.client) {
+  onMounted(() => {
+    showAttributions.value = true
+  })
+}
+
+const locale = useI18n().locale.value
+const messages = JSON.parse(
+  JSON.stringify(useI18n().messages.value[locale].attributions),
+)
+const titles = messages.titles
+const descs = messages.subtitles
+
+const sections = {
+  Translators: {
+    title: titles.translators,
+    subtitle: descs.translators,
+    data: [
+      "cutiegin",
+      "ThinkSeal",
+      "WaffleIBOT",
+      "Andre_601",
+      "Nitrrine",
+      "X-Cloudy-X",
+      "Felix14-v2",
+      "FlyMode",
+      "notlin4",
+      "TheClashFruit",
+      "Lupancham",
+      "X1l0b3n",
+      "egorro",
+      "TheUran",
+      "KTrain5369",
+      "Blryface",
+    ],
+  },
+  Information: {
+    title: titles.information_writers,
+    subtitle: descs.information_writers,
+    data: [
+      "Microcontrollers' Alternatives - https://alternatives.microcontrollers.dev/",
+      "Essential's Privacy Policy - https://essential.gg/privacy-policy",
+    ],
+  },
+  "Core Team": {
+    title: titles.core,
+    subtitle: descs.core,
+    data: [
+      "Blryface (https://blurry.gay)",
+      "WorldWidePixel (https://worldwidepixel.ca)",
+      "KTrain (https://github.com/ktrain5369)",
+      "Nitrrine (https://github.com/nitrrine)",
+    ],
+  },
+}
+
+useSeoMeta({
+  title: "Attributions",
+  description: "The people who made Notessential possible.",
+  ogImage: "/img/icon512.png",
+})
+</script>

pages/contributing.vue

@@ -5,12 +5,13 @@
       :sub-title="$t('contributing.subhero')"
     />
     <span class="text-4xl">{{ $t("contributing.welcome") }}</span>
-    <ContributingSection
+    <TitledSection
       v-if="showGuidelines"
       v-for="section in guidelines"
       :data="section.data"
       :title="section.title"
       :subtitle="section.subtitle"
+      :numbered="true"
     />
     <span class="text-xl flex flex-row gap-2 items-center flex-wrap"
       >{{ $t("contributing.end") }} <LucideHeart stroke="var(--brand-red)" />