add: contributor guidelines

CONTRIBUTING.md

@@ -0,0 +1,46 @@
+# NotEssential Contributions Guidelines
+
+Thank you for contributing to our website! It really helps in maintaining our website and keeping it up-to-date.
+We recommend [joining our Discord server](https://discord.gg/wncdz7e8jy) so you can interact with NotEssential maintainers and ask for help in the NE chats.
+
+## Easily solvable using issues
+
+To request the inclusion of a mod, report a bug or request a change in documentation, please open an issue on the Issues tab, using the appropriate template.
+
+## Translate NotEssential
+
+To help translate NotEssential, please visit [our Crowdin page](https://crowdin.com/project/notessential)
+If your language is not listed, join our Discord server and request your language to be added in the #ne-general chat.
+
+General guidelines for translations:
+
+- Unless they have an official name in your language, do NOT translate a mod's name into that language.
+- Similarly, do NOT translate 'Essential'(the mod), 'Spark Universe', 'Mojang', or 'Microsoft' if there isn't an official name in that language.
+- If there is an issue, please make a comment on the side panel and tick the `Issues` box. Then, select the related flag.
+- When an area is in ALL CAPS, also write in ALL CAPS if you can with your language.
+
+If you have any more questions, please join our Discord and ask there.
+
+## Help code NotEssential
+
+To assist in developing NotEssential, fork this repository and create a new branch to start off with.
+Then, checkout your branch locally and start coding.
+
+General guidelines for developing:
+
+- Make sure you look at the Pull Requests page to see if your idea has already been listed. If so, we recommend opening pull requests to the head branch/repository (the head branch is the branch merging to the repository).
+- Make your commit names helpful so we can understand what you have changed.
+- Install Prettier. You can run `pnpm add prettier` or install Prettier as a VS Code extension (this should have been recommended to you automatically!). If you use the extension, ensure `Format on Save` is set in VS Code settings.
+- Make sure you use one of our pull request templates when making a pull request.
+
+If you need help or have identified an issue that you cannot solve by yourself, open an issue in the Issues tab.
+
+## Adding a mod to the alternatives page
+
+Similar to above, fork this repository and create a new branch based off `main`.
+Then, checkout your branch locally and start coding.
+
+General guidelines when adding a mod are available in the pull request template provided.
+Please also follow the guidelines in [Help code NotEssential](#help-code-notessential) when making your changes.
+
+For more help, please join our Discord server.

components/contributingSection.vue

@@ -0,0 +1,22 @@
+<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">
+      {{ title + 1 }}. {{ info }}
+    </div>
+  </div>
+</template>
+
+<script setup>
+const props = defineProps({
+  data: Object,
+  title: String,
+  subtitle: String,
+})
+</script>

components/internalLink.vue

@@ -0,0 +1,14 @@
+<template>
+  <NuxtLink
+    :to="to"
+    class="inline-flex flex-row items-center gap-1 font-bold text-[var(--brand-blue)]"
+  >
+    <slot />
+  </NuxtLink>
+</template>
+
+<script setup>
+const props = defineProps({
+  to: String,
+})
+</script>

components/reactiveHero.vue

@@ -0,0 +1,17 @@
+<template>
+  <span class="text-[4rem] flex flex-col flex-wrap">
+    <span
+      class="text-[1.5rem] text-pretty sm:text-[2rem] md:text-[3rem] lg:text-[4rem] internalFont"
+    >
+      {{ hero }}
+    </span>
+    <span class="text-lg">{{ subtext }}</span>
+  </span>
+</template>
+
+<script setup>
+const props = defineProps({
+  hero: String,
+  subtext: String,
+})
+</script>

i18n/lang/en-US.json

@@ -10,7 +10,8 @@
       "about": "About",
       "credit_creator": "Originally created by",
       "credit_designed": "Designed by",
-      "interact": "Interact"
+      "interact": "Interact",
+      "contributing": "Contributing"
     }
   },
   "landing": {
@@ -20,6 +21,43 @@
       "alternatives": "ALTERNATIVES"
     }
   },
+  "contributing": {
+    "hero": "CONTRIBUTING",
+    "subhero": "To the NotEssential website",
+    "welcome": "Want to contribute to NotEssential? Here are some guidelines.",
+    "end": "If you have any more questions, please join our Discord and ask there.",
+    "titles": {
+      "translating": "Translating",
+      "coding": "Developing",
+      "alternatives": "Submitting Alternatives"
+    },
+    "subtitles": {
+      "translating": "To help translate NotEssential, please visit our Crowdin page. If your language is not listed, join our Discord server and request your language to be added in the #ne-general chat.",
+      "coding": "To assist in developing NotEssential, fork this repository and create a new branch to start off with. Then, checkout your branch locally and start coding.",
+      "alternatives": "Similar to above, fork this repository and create a new branch based off `main`. Then, checkout your branch locally and start coding."
+    },
+    "guidelines": {
+      "translating": [
+        "Unless they have an official name in your language, do NOT translate a mod's name into that language.",
+        "Similarly, do NOT translate 'Essential' (the mod), 'Spark Universe', 'Mojang', or 'Microsoft' if there isn't an official name in that language.",
+        "If there is an issue, please make a comment on the side panel and tick the 'Issues' box. Then, select the related flag.",
+        "When an area is in ALL CAPS, also write in ALL CAPS if you can with your language."
+      ],
+      "coding": [
+        "Make sure you look at the Pull Requests page to see if your idea has already been listed. If so, we recommend opening pull requests to the head branch/repository (the head branch is the branch merging to the repository).",
+        "Make your commit names helpful so we can understand what you have changed.",
+        "Install Prettier. You can run 'pnpm add prettier' or install Prettier as a VS Code extension (this should have been recommended to you automatically!). If you use the extension, ensure 'Format on Save' is set in VS Code settings.",
+        "Make sure you use one of our pull request templates when making a pull request."
+      ],
+      "alternatives": [
+        "Make sure your project replaces a feature of Essential.",
+        "Please detail why your project should be added to the page.",
+        "Also submit a short description of your project, though this is optional.",
+        "This should be obvious, but please don't submit a Trojan or other form of malware.",
+        "Please don't just use this site as 'free advertising' for your project."
+      ]
+    }
+  },
   "alternatives": {
     "hero": "ALTERNATIVES",
     "reason": "Essential has many issues. This page provides alternatives.",

layouts/default.vue

@@ -70,6 +70,11 @@
               <span class="font-bold text-base">{{
                 $t("layout.footer.interact")
               }}</span>
+              <InternalLink to="/contributing"
+                ><LucidePenBox class="h-5" />{{
+                  $t("layout.footer.contributing")
+                }}
+              </InternalLink>
               <ExternalLink to="https://crowdin.com/project/notessential"
                 ><LucideGlobe class="h-5" />Crowdin
               </ExternalLink>

pages/alternatives.vue

@@ -1,7 +1,7 @@
 <template>
-  <PageHero
-    :title="$t('alternatives.hero')"
-    :sub-title="$t('alternatives.reason')"
+  <ReactiveHero
+    :hero="$t('alternatives.hero')"
+    :subtext="$t('alternatives.reason')"
   />
 
   <!-- Need to add a project? It's now data driven (and localised!). Go to the English lang file (~/i18n/lang/en-US.json) -->

pages/contributing.vue

@@ -0,0 +1,75 @@
+<template>
+  <div class="flex flex-col gap-8">
+    <ReactiveHero
+      :hero="$t('contributing.hero')"
+      :subtext="$t('contributing.subhero')"
+    />
+    <span class="text-4xl">{{ $t("contributing.welcome") }}</span>
+    <ContributingSection
+      v-if="showGuidelines"
+      v-for="section in guidelines"
+      :data="section.data"
+      :title="section.title"
+      :subtitle="section.subtitle"
+    />
+    <span class="text-xl flex flex-row gap-2 items-center flex-wrap"
+      >{{ $t("contributing.end") }} <LucideHeart stroke="var(--brand-red)" />
+    </span>
+  </div>
+</template>
+<script setup lang="ts">
+const showGuidelines = ref(false)
+if (process.client) {
+  onMounted(() => {
+    showGuidelines.value = true
+  })
+}
+
+const locale = useI18n().locale.value
+const messages = JSON.parse(
+  JSON.stringify(useI18n().messages.value[locale].contributing),
+)
+const titles = messages.titles
+const descs = messages.subtitles
+const guidelineTexts = messages.guidelines
+
+const guidelines = {
+  Translating: {
+    title: titles.translating,
+    subtitle: descs.translating,
+    data: [
+      guidelineTexts.translating[0],
+      guidelineTexts.translating[1],
+      guidelineTexts.translating[2],
+      guidelineTexts.translating[3],
+    ],
+  },
+  Developing: {
+    title: titles.coding,
+    subtitle: descs.coding,
+    data: [
+      guidelineTexts.coding[0],
+      guidelineTexts.coding[1],
+      guidelineTexts.coding[2],
+      guidelineTexts.coding[3],
+    ],
+  },
+  Alternatives: {
+    title: titles.alternatives,
+    subtitle: descs.alternatives,
+    data: [
+      guidelineTexts.alternatives[0],
+      guidelineTexts.alternatives[1],
+      guidelineTexts.alternatives[2],
+      guidelineTexts.alternatives[3],
+      guidelineTexts.alternatives[4],
+    ],
+  },
+}
+
+useSeoMeta({
+  title: "Contributing",
+  description: "Information on how to contribute to NotEssential.",
+  ogImage: "/img/icon512.png",
+})
+</script>