imporve repository

Author: DerGoogler

docs/.vitepress/config/en.ts

@@ -1,9 +1,8 @@
 import { createRequire } from "module";
 import { defineConfig } from "vitepress";
 import request from "sync-request";
-import { repositories } from "../../data/repositories";
+import { repositories, Repository } from "../../data/repositories";
 import { changelog } from "../../data/changelog";
-import { generateRepoId } from "../../helper/generateRepoId";
 
 const require = createRequire(import.meta.url);
 const pkg = require("vitepress/package.json");
@@ -146,19 +145,20 @@ function sidebarLegal() {
 
 function repos() {
   return repositories.map((repo) => {
+    const r = new Repository(repo.url);
+
     const response = request("GET", `${repo.url}json/modules.json`);
     const rep = JSON.parse(response.getBody("utf8"));
-    const repoId = generateRepoId(repo.url);
     const modules = rep.modules.map((module) => {
       return {
         text: module.name,
-        link: `/repository/${repoId}/${module.id}`,
+        link: `/repository/${r.id}/${module.id}`,
       };
     });
 
     return {
       text: repo.name,
-      link: `/repository/${repoId}`,
+      link: `/repository/${r.id}`,
       collapsed: true,
       items: modules,
     };

docs/.vitepress/config/shared.ts

@@ -3,12 +3,12 @@ import ViteYaml from "@modyfi/vite-plugin-yaml";
 import { pagefindPlugin } from "vitepress-plugin-pagefind";
 // Imports
 import { defineConfig, SiteConfig } from "vitepress";
-import { writeFile } from "fs/promises";
+import { writeFile, copyFile } from "fs/promises";
 import { resolve } from "path";
-import { repositoriesJSONstringify } from "../../data/repositories";
 import { blacklistJSONstringify } from "../../data/blacklist";
 import { changelogJSONstringify } from "../../data/changelog";
 
+
 export const shared = defineConfig({
   vite: {
     plugins: [ViteYaml(), pagefindPlugin()],
@@ -54,7 +54,7 @@ export const shared = defineConfig({
     const publicBlackList = resolve(publicApi, "blacklist.json");
     const publicChangelogList = resolve(publicApi, "changelog.json");
 
-    await writeFile(publicRepoList, repositoriesJSONstringify);
+    await copyFile(resolve(__dirname, "../../../meta/repositories.json"), publicRepoList);
     await writeFile(publicBlackList, blacklistJSONstringify);
     await writeFile(publicChangelogList, changelogJSONstringify);
   },

docs/components/repository/ModuleItem.vue

@@ -1,33 +1,36 @@
 <script setup>
+import { computed } from "vue";
 import { toFormattedFileSize } from "../../helper/toFormattedFileSize";
+import { Repository } from "../../data/repositories";
 import { useData } from "vitepress";
 
 import { VPLink } from "vitepress/theme";
 
-const props = defineProps(["module", "params"]);
+const { lang, params } = useData();
 
-const { lang } = useData();
+const props = defineProps(["module"]);
+const repo = computed(() => new Repository(params.value.url));
 
-const timestamp = props.module.timestamp;
-const params = props.params;
-const module = props.module;
+
+const timestamp = computed(() => props.module.timestamp);
+const module = computed(() => props.module);
 
 const getLastUpdated = () => {
-  if (!timestamp) {
+  if (!timestamp.value) {
     return "Invalid date";
   }
 
   return Intl.DateTimeFormat(lang, {
     year: "numeric",
     day: "2-digit",
-    month: "short",
+    month: "long",
     hour12: true,
-  }).format(new Date(timestamp * 1000));
+  }).format(new Date(timestamp.value * 1000));
 };
 </script>
 
 <template>
-  <VPLink decoration="none" :href="'repository/' + params.name + '/' + module.id">
+  <VPLink decoration="none" :href="'repository/' + repo.id + '/' + module.id">
     <div :class="$style.feature">
       <article>
         <img v-if="module.cover" :class="$style.moduleCover" :src="module.cover" />

docs/components/repository/RepoHeader.vue

@@ -1,9 +1,13 @@
 <script setup>
-import { ref } from "vue";
+import { ref, computed } from "vue";
 import Dialog from "../Dialog.vue";
 import { VPTeamMembers, VPButton } from "vitepress/theme";
+import { Repository } from "../../data/repositories";
 
-defineProps(["repo", "internalRepo"]);
+const props = defineProps(["repo"]);
+const internalRepo = computed(() => new Repository(props.repo.url));
+
+console.log(internalRepo.value.members);
 
 const showModal = ref(false);
 
@@ -20,17 +24,33 @@ const closeModal = () => {
 
 <template>
   <div :class="$style.repoMetaContainer">
-    <img v-if="repo.cover" :class="$style.repoCover" :src="repo.cover" />
-    <span :class="$style.repoTitle">{{ repo.name }}</span>
-    <span v-if="repo.description" :class="$style.repoDetails">{{ repo.description }}</span>
-    <div v-if="repo.submission || repo.support || repo.donate" :class="$style.repoActions">
-      <VPButton tag="a" v-if="repo.submission" text="Submit Module" size="medium" theme="brand" :href="repo.submission" />
-      <VPButton tag="a" v-if="repo.support" text="Support" size="medium" theme="alt" :href="repo.support" />
-      <VPButton v-if="internalRepo.members" text="Team" size="medium" theme="alt" @click="openModal" />
-      <VPButton tag="a" v-if="repo.donate" text="Donate" size="medium" theme="sponsor" :href="repo.donate" />
+    <img v-if="props.repo.cover" :class="$style.repoCover" :src="props.repo.cover" />
+    <span :class="$style.repoTitle">{{ props.repo.name }}</span>
+    <span v-if="props.repo.description" :class="$style.repoDetails">{{ props.repo.description }}</span>
+    <div v-if="props.repo.submission || props.repo.support || props.repo.donate || props.repo.memebers" :class="$style.repoActions">
+      <VPButton tag="a" v-if="props.repo.submission" text="Submit Module" size="medium" theme="brand" :href="props.repo.submission" />
+      <VPButton tag="a" v-if="props.repo.support" text="Support" size="medium" theme="alt" :href="props.repo.support" />
+      <VPButton v-if="internalRepo.members.length !== 0" text="Team" size="medium" theme="alt" @click="openModal" />
+      <VPButton tag="a" v-if="props.repo.donate" text="Donate" size="medium" theme="sponsor" :href="props.repo.donate" />
     </div>
+    <details class="details custom-block">
+      <summary>Repository URL to add it to MMRL</summary>
+
+      <div class="language-text vp-adaptive-theme line-numbers-mode">
+        <button title="Copy Code" class="copy"></button>
+        <span class="lang">ts</span>
+        <pre
+          class="shiki shiki-themes github-light github-dark vp-code"
+          tabindex="0"
+        ><code><span class="line">{{ internalRepo.mmrlUrl }}</span></code></pre>
+        <div class="line-numbers-wrapper" aria-hidden="true">
+          <span class="line-number">1</span>
+          <br />
+        </div>
+      </div>
+    </details>
   </div>
-  <Dialog :open="showModal" :onClose="closeModal" :onOpen="openModal" :contentStyle="{ padding: '16px 26px' }" title="Repository Member">
+  <Dialog :open="showModal" :onClose="closeModal" :onOpen="openModal" :contentStyle="{ padding: '16px 26px' }" title="Repository Members">
     <VPTeamMembers size="small" :members="internalRepo.members" />
   </Dialog>
 </template>

docs/data/repositories.ts

@@ -1,12 +1,88 @@
-import { readFileSync } from "fs";
-import { join } from "path";
-import { parse } from "yaml";
-
-export const fileName = join(__dirname, "../../meta/repositories.yaml");
-
-export const repositories: any = parse(readFileSync(fileName, "utf8"));
-export const repositoriesJSONstringify: string = JSON.stringify(
-  repositories,
-  null,
-  4
-);
+import repositories from "../../meta/repositories.json";
+
+export { repositories };
+
+interface RepositoryMember {
+  avatar: string;
+  name: string;
+  title?: string;
+  org?: string;
+  orgLink?: string;
+  desc?: string;
+  links?: SocialLink[];
+  sponsor?: string;
+  actionText?: string;
+}
+
+interface SocialLink {
+  icon: SocialLinkIcon;
+  link: string;
+  ariaLabel?: string;
+}
+
+type SocialLinkIcon =
+  | "discord"
+  | "facebook"
+  | "github"
+  | "instagram"
+  | "linkedin"
+  | "mastodon"
+  | "npm"
+  | "slack"
+  | "twitter"
+  | "x"
+  | "youtube"
+  | { svg: string }
+  | string;
+
+export interface RawRepository {
+  name: string;
+  url: string;
+  members?: RepositoryMember[];
+}
+
+export class Repository {
+  public repository: RawRepository;
+
+  public constructor(public url: string) {
+    const repo = repositories.find((repo) => repo.url === url);
+    if (!repo) throw new Error(`Repository with URL ${url} not found`);
+    this.repository = repo;
+  }
+
+  public get id() {
+    const url = new URL(this.url);
+    let cleanedText = url.hostname + url.pathname;
+    cleanedText = cleanedText.replace(/[.:\/\-_]/g, "");
+
+    const length = cleanedText.length;
+    const middleStart = Math.floor((length - 3) / 2);
+    const middleEnd = middleStart + 3;
+
+    const firstThree = cleanedText.substring(0, 3);
+    const middleThree = cleanedText.substring(middleStart, middleEnd);
+    const lastThree = cleanedText.substring(length - 3);
+
+    return firstThree + middleThree + lastThree;
+  }
+
+  public get name(): string {
+    return this.repository.name;
+  }
+
+  public get members(): RepositoryMember[] {
+    return this.repository.members;
+  }
+
+  public get modules(): string {
+    return `${this.url}json/modules.json`;
+  }
+
+  public get config(): string {
+    return `${this.url}json/config.json`;
+  }
+
+  public get mmrlUrl(): string {
+    return this.url.replace(/^\w+:\/\/([^\/]+\/?.*?)\/?$/g, "$1");
+  }
+}

docs/en/repository/[name].md

@@ -5,43 +5,44 @@ next: false
 ---
 
 <script setup>
-import { ref, onMounted } from "vue";
+import { ref, onMounted, computed } from "vue";
 import { useData } from 'vitepress'
-import repositories from '../../../meta/repositories.yaml'
+import { repositories, Repository } from '../../data/repositories'
 
 import ModuleItem from '../../components/repository/ModuleItem.vue'
 import RepoHeader from '../../components/repository/RepoHeader.vue'
 
 const { params } = useData()
-
-const name = params.value.name
-const url = params.value.url
-const repository = repositories.find((repo) => repo.url === url)
+const repository = computed(()=> new Repository(params.value.url))
 
 const data = ref(null);
 
 onMounted(async () => {
   const response = await fetch(
-    `${repository.url}json/modules.json`
+    repository.value.modules
   );
   data.value = await response.json();
 });
 
+const repoHeader = computed(()=> {
+  const { modules, ...rest } = data.value;
+  return { url: repository.value.url, ...rest };
+})
+
 const openUrl = (url) => {
   window.open(url);
 };
 </script>
 
 <div v-if="data">
-    <RepoHeader :repo="data" :internalRepo="repository" />
+    <RepoHeader :repo="repoHeader" />
     <div :class="$style.items" v-for="module in data.modules">
         <div :class="$style.item">
-            <ModuleItem :module="module" :params="$params" />
+            <ModuleItem :module="module" />
         </div>
     </div>
 </div>
 
-
 <style scoped>
 a {
     color: inherit !important;

docs/en/repository/[name].paths.ts

@@ -1,12 +1,13 @@
-import { repositories } from "../../data/repositories";
-import { generateRepoId } from "../../helper/generateRepoId";
+import { repositories, Repository } from "../../data/repositories";
 
 const parsedRepos = repositories.map((repo) => {
+  const myRepo = new Repository(repo.url);
+
   return {
     params: {
-      title: repo.name,
-      name: generateRepoId(repo.url),
-      url: repo.url,
+      title: myRepo.name,
+      name: myRepo.id,
+      url: myRepo.url,
     },
   };
 });