[docs] Major overhaul

Added Contributors section Added Edit Link at bottom Added Line Numbers to code blocks Updated some themeing to fit more content in a single page
BEComTweaks · Oct 26, 2024 · 8b1bf02 · 8b1bf02
1 parent 5245f17
commit 8b1bf02
Show file tree

Hide file tree

Showing 11 changed files with 178 additions and 20 deletions.
diff --git a/docs/.vitepress/config.mts b/docs/.vitepress/config.mts
@@ -10,6 +10,10 @@ export default defineConfig({
   base: '/docs/',
   head: [['link', { rel: 'icon', href: 'https://raw.githubusercontent.com/BEComTweaks/becomtweaks.github.io/refs/heads/main/icon.png' }]],
   themeConfig: {
+    editLink: {
+      pattern: "https://github.com/BEComTweaks/docs/tree/main/docs/:path",
+      text: "Edit this page"
+    },
     // https://vitepress.dev/reference/default-theme-config
     nav: [
       { text: 'Home', link: 'https://becomtweaks.github.io' },
@@ -57,6 +61,7 @@ export default defineConfig({
     config: (md) => {
       md.use(footnote);
       md.use(taskLists);
-    }
+    },
+    lineNumbers: true
   }
 })
diff --git a/docs/.vitepress/theme/components/Contributors.vue b/docs/.vitepress/theme/components/Contributors.vue
@@ -0,0 +1,53 @@
+<template>
+    <div class="contributors-wrapper" @mouseover="hover = true" @mouseleave="hover = false">
+      <hr class="footnotes-sep">
+      <p class="h2">Contributors</p>
+      <div class="contributors-section">
+        <div
+          v-for="(avatar, index) in avatars"
+          :key="avatar.username"
+          class="contributor-avatar"
+          :style="{
+            zIndex: avatars.length - index,
+            transform: hover ? `translateX(${index * 50}px)` : `translateX(${index * 20}px)`,
+          }"
+        >
+          <a class="avatar-img-hitbox"  :href="avatar.profileUrl" target="_blank" :title="avatar.username">
+            <img
+              :src="avatar.url"
+              :alt="avatar.username"
+              class="avatar-img"
+            />
+          </a>
+        </div>
+      </div>
+    </div>
+  </template>
+
+  <script setup lang="ts">
+  import { ref, onMounted } from 'vue';
+  import { useData } from 'vitepress';
+  
+  interface Contributor {
+    username: string;
+    url: string;
+    profileUrl: string;
+  }
+  
+  const { frontmatter } = useData();
+  const hover = ref(false);
+  const contributors = ref<string[]>(frontmatter.value.mentions || []);
+  const avatars = ref<Contributor[]>([]);
+  
+  onMounted(async () => {
+    for (const username of contributors.value) {
+      const response = await fetch(`https://api.github.com/users/${username}`);
+      const data = await response.json();
+      avatars.value.push({
+        username,
+        url: `https://avatars.githubusercontent.com/u/${data.id}?v=1`,
+        profileUrl: data.html_url,
+      });
+    }
+  });
+  </script>
diff --git a/docs/.vitepress/theme/index.ts b/docs/.vitepress/theme/index.ts
@@ -3,6 +3,7 @@ import { h } from 'vue'
 import type { Theme } from 'vitepress'
 import DefaultTheme from 'vitepress/theme'
 import './style.css'
+import Contributors from './components/Contributors.vue';
 
 export default {
   extends: DefaultTheme,
@@ -12,6 +13,6 @@ export default {
     })
   },
   enhanceApp({ app, router, siteData }) {
-    // ...
+    app.component('Contributors', Contributors);
   }
 } satisfies Theme
diff --git a/docs/.vitepress/theme/style.css b/docs/.vitepress/theme/style.css
@@ -137,3 +137,83 @@
   --docsearch-primary-color: var(--vp-c-brand-1) !important;
 }
 
+/**
+ * Component: Footer
+ * -------------------------------------------------------------------------- */
+
+.VPDocFooter {
+  margin-top: 0 !important;
+}
+
+/**
+ * Component: Contributors
+ * -------------------------------------------------------------------------- */
+.contributors-wrapper {
+  padding-top: 37.5px;
+  text-align: left;
+  padding-bottom: 20px;
+  width: 100%;
+}
+.contributors-wrapper hr {
+  margin-top: -1.5rem;
+  margin-bottom: 1.5rem;
+}
+.contributors-section {
+  position: relative;
+  overflow: visible;
+  display: flex;
+  align-items: center;
+  justify-content: start;
+  height: 37.5px;
+  width: 100%;
+}
+.h2 {
+  font-size: 1.75rem;
+  font-weight: 600;
+  margin-bottom: 0.5rem;
+}
+.contributors-section::after {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: -1;
+}
+.contributor-avatar {
+  position: absolute;
+  transition: transform 0.5s ease;
+}
+
+.avatar-img {
+  width: 37.5px;
+  height: 37.5px;
+  border-radius: 50%;
+  transition: transform 0.25s ease, box-shadow 0.25s ease;
+}
+.avatar-img-hitbox:hover .avatar-img {
+  transform: translateY(-10px);
+  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
+}
+@media (prefers-reduced-motion: reduce) {
+  .contributor-avatar {
+    transition: transform 0.25s ease-out !important;
+  }
+  .avatar-img {
+    transition:
+      transform 0.15s ease-out,
+      box-shadow 0.15s ease-out !important;
+  }
+}
+
+/* idk */
+.content[data-v-10119189] {
+  padding: 0 0 50px !important;
+}
+.VPDoc[data-v-10119189] {
+  padding: 36px 24px !important;
+}
+.VPSidebar {
+  padding-bottom: 16px !important;
+}
diff --git a/docs/getting-started/setting-up.md b/docs/getting-started/setting-up.md
@@ -5,6 +5,8 @@ prev:
 next:
     text: Creating a new Pack
     link: getting-started/new-pack
+mentions:
+  - NSPC911
 ---
 # Setting up the local respository
 
@@ -58,3 +60,5 @@ You will need
 
 ---
 That's it!
+
+<Contributors />
diff --git a/docs/jsons/other-jsons.md b/docs/jsons/other-jsons.md
@@ -5,6 +5,8 @@ prev:
 next:
   text: 'Pack JSONs'
   link: 'jsons/pack-jsons'
+mentions:
+  - NSPC911
 ---
 
 # Other JSON Files
@@ -40,4 +42,6 @@ aesthetic.json
 - Exists for the server to dump and parse.
 
 ## [template.json](https://github.com/BEComTweaks/resource-packs/blob/main/jsons/others/template.json)
-- Template on creating a new category and the features available.
+- Template on creating a new category and the features available.
+
+<Contributors />
diff --git a/docs/jsons/pack-jsons.md b/docs/jsons/pack-jsons.md
@@ -3,6 +3,8 @@ prev:
   text: 'Other JSONs'
   link: 'jsons/other-jsons'
 next: false
+mentions:
+  - NSPC911
 ---
 # Pack JSON Files
 
@@ -38,7 +40,7 @@ Topic: Basically names your category.
 ```
 ---
 Subcategory of: The parent category. Exists for subcategories to mark that they are subcategories of a certain category.
-```json
+```json:line-numbers=2
   "topic": "Category",
   "subcategory_of": "Parent Category", // [!code focus]
   "packs": [
@@ -48,7 +50,7 @@ Subcategory of: The parent category. Exists for subcategories to mark that they
 > If the category is not defined as a subcategory, this will be skipped.
 ---
 Pack ID: Your Pack's ID.
-```json
+```json:line-numbers=4
     {
       "pack_id": "pack_name with no space", // [!code focus]
       "pack_name": "name of pack",
@@ -58,14 +60,14 @@ Pack ID: Your Pack's ID.
 > Most Pack IDs are simply Pack Names with no Special Characters and Spaces. You can keep to it or name it based on the Sub-Category.
 ---
 Pack Name: Your Pack's Name.
-```json
+```json:line-numbers=5
       "pack_id": "pack_name with no space",
       "pack_name": "name of pack", // [!code focus]
       "pack_description": "description of pack",
 ```
 ---
 Pack Description: Your Pack's Description.
-```json
+```json:line-numbers=6
       "pack_name": "name of pack",
       "pack_description": "description of pack", // [!code focus]
       "message": ["warn (red)/error (orange)/info (cyan)", "message for it"],
@@ -76,7 +78,7 @@ Pack Description: Your Pack's Description.
 > The following are not compulsory.
 ---
 Message: Provide extra info on a pack.
-```json
+```json:line-numbers=7
       "pack_description": "description of pack",
       "message": ["warn (red)/error (orange)/info (cyan)", "message for it"], // [!code focus]
       "icon": "gif/apng/*",
@@ -87,7 +89,7 @@ Message: Provide extra info on a pack.
 > You also need to provide a message for it.
 ---
 Icon: Allows you to set a pack icon extension. Default is `png`, so you can set it to `apng`, `gif` or `jpeg` if you want.
-```json
+```json:line-numbers=8
       "message": ["warn (red)/error (orange)/info (cyan)", "message for it"],
       "icon": "gif/apng/*", // [!code focus]
       "priority": true,
@@ -98,28 +100,30 @@ Icon: Allows you to set a pack icon extension. Default is `png`, so you can set
 > However, make sure you do not add the period <kbd>.</kbd>
 ---
 Priority: Sets the pack as the higher priority and overwrites conflicting textures.
-```json
+```json:line-numbers=9
       "icon": "gif/apng/*",
-      "priority": true,
+      "priority": true, // [!code focus]
       "conflict": ["packid of conflicting pack"],
 ```
 > [!TIP]
 >
 > Default is `false`, so you don't have to specify it.
 ---
 Conflict: List of PackIDs of packs that conflict with the current one.
-```json
+```json:line-numbers=10
       "priority": true,
       "conflict": ["packid of conflicting pack"], // [!code focus]
       "compatibility": ["packid of compatible pack"]
 ```
 ---
 Compatibility: List of PackIDs of packs that have custom compatibilities made for them
-```json
+```json:line-numbers=11
       "conflict": ["packid of conflicting pack"],
       "compatibility": ["packid of compatible pack"] // [!code focus]
     }
 ```
 > [!TIP]
 >
 > After creating a compatibility, make sure to run [./pys/folder_creator.py](https://github.com/BEComTweaks/resource-packs/blob/main/pys/folder_creator.py) to create a respective folder for it.
+
+<Contributors />
diff --git a/docs/misc/faq.md b/docs/misc/faq.md
@@ -3,6 +3,8 @@ prev:
   text: 'Impossible Packs'
   link: 'misc/impossible-packs'
 next: false
+mentions:
+  - NSPC911
 ---
 # FAQ
 
@@ -17,4 +19,6 @@ next: false
 
 The list will continue to expand as more questions are asked.
 
-[^1]: It is on the sidebar and the previous page. I can't set the proper link to it as it is taken as a dead link for some reason.
+[^1]: It is on the sidebar and the previous page. I can't set the proper link to it as it is taken as a dead link for some reason.
+
+<Contributors />
diff --git a/docs/misc/impossible-packs.md b/docs/misc/impossible-packs.md
@@ -151,16 +151,13 @@ None at the moment.
   Whilst yes there is a HTTP library as part of the @minecraft Scripting API (not to be confused with Legacy Scripting), we cannot save the result of the call to the file system the server is running on, even with Bedrock Dedicated Server Software (the only place that currently is even allowed to use the HTTP library). So we cannot generate the "player head" blocks in runtime, which is ideally how and when it should be done so our pack remains small in size and compatible with everyone's systems.
   :::
   There is hope and a possible solution, but its ugly. If someone was willing to put the effort into making a "Player Head Generator" we could ask players to upload their skins, then the system would generate a pack including all the skins they wanted (like Hermit Heads + our ugly mugs on the dev team) and their own, they could then use the generated pack. However this would require significant resources that DrAv cannot spare.
-  > [SquatchHunter](https://github.com/SquatchHunter), **Official Moderator of Drav.dev Discord**.
 
 #### 2. Off-Hand
 
-  Let's go technical![^2]
-
   It became impossible after 1.20 when Mojang updated the Beta API system to prevent any changes to the player on the gametick that an event happens. FoxyNoTail's [Offhand Addon](https://foxynotail.com/add-ons/off-hand/) heavily relied on this, as it needed the event to change objects from mainhand to offhand on the same gametick that you are placing the block.
 
-[^1]: Shaders are available in Minecraft: Bedrock Edition, but they require third-party software like [ddf816/BetterRenderDragon](https://github.com/ddf8196/BetterRenderDragon) or Minecraft Preview for Deferred Rendering[^3], which changes every update
+[^1]: Shaders are available in Minecraft: Bedrock Edition, but they require third-party software like [ddf816/BetterRenderDragon](https://github.com/ddf8196/BetterRenderDragon) or Minecraft Preview for Deferred Rendering[^2], which changes every update.
 
-[^2]: You don't have a choice.
+[^2]: It was never a shader!
 
-[^3]: Never call it a shader.
+<Contributors />
diff --git a/docs/scripts/py-files.md b/docs/scripts/py-files.md
@@ -5,6 +5,8 @@ prev:
 next:
   text: 'Other JSONS'
   link: 'jsons/other-jsons'
+mentions:
+  - NSPC911
 ---
 
 # Python Files
@@ -81,3 +83,5 @@ Does 3 processes
 
 If you want a better explanation, there are comments in each script and have a more detailed explanation on what is
 going on.
+
+<Contributors />
diff --git a/docs/to-do.md b/docs/to-do.md
@@ -2,6 +2,7 @@
 prev: false
 next: false
 ---
+
 # To-Do Tracker
 Stuff to do or in progress.<br>Feel free to help me with these!
 ## Incomplete
@@ -60,4 +61,5 @@ Stuff to do or in progress.<br>Feel free to help me with these!
 - server-backend
 	- Make priority a thing
 		- Probably like if `"priority": true` then replace any already-existing files [`@e03e28`](https://github.com/BEComTweaks/server-backend/commit/e03e282ad75fa4cd8f3de1b3dc6d972d506faabf)
+
 <sub>Yes, I am using docs as a to-do tracker. Any issues?</sub>