[SiteGen] Rewrite to use sidebar, add repos

src/index.js

@@ -33,6 +33,9 @@ global.distDir = distDir;
 
 const modulesDir = `${distDir}/module`;
 
+await SiteGen();
+process.exit();
+
 const resetDir = (dir) => {
   rmSync(dir, { recursive: true, force: true });
   mkdirSync(dir, { recursive: true });

src/siteGen/index.js

@@ -45,7 +45,22 @@ return `<div class="gm-store-card ${m.tags.join(' ')}" data-last-updated=${m.las
     <div class="colorStandard-2KCXvj size14-e6ZScH default-3nhoK- formText-3fs7AJ description-3_Ncsb formText-3fs7AJ modeDefault-3a2Ph1">${m.version === '0' || m.version.toLowerCase().includes('auto') ? '' : `v${m.version}`}</div>
   </div>
 </div>`;
-}
+};
+
+const makeRepo = (r) => {
+  return `<a href="${r.filename}" class="repo">
+  <div>
+    <div class="title-31JmR4">${r.name}</div>
+    <div class="colorStandard-2KCXvj size14-e6ZScH default-3nhoK- formText-3fs7AJ description-3_Ncsb formText-3fs7AJ modeDefault-3a2Ph1">${r.description}</div>
+  </div>
+
+  <div class="colorStandard-2KCXvj size14-e6ZScH default-3nhoK- formText-3fs7AJ description-3_Ncsb formText-3fs7AJ modeDefault-3a2Ph1">
+    <div><strong>${r.themes}</strong> themes</div>
+    <div><strong>${r.plugins}</strong> plugins</div>
+    <div><strong>${r.developers}</strong> developers</div>
+  </div>
+</a>`;
+};
 
 export default () => {
   let template = readFileSync(join(__dirname, 'template.html'), 'utf8');
@@ -53,6 +68,7 @@ export default () => {
   const repos = glob.sync(join(global.distDir, '*.json'));
 
   let cards = [];
+  let metas = [];
 
   let name = 'GooseMod Store';
   let description = '';
@@ -68,6 +84,17 @@ export default () => {
     }
 
     cards = cards.concat(json.modules);
+
+    metas.push({
+      ...json.meta,
+
+      themes: json.modules.filter((x) => x.tags.includes('theme')).length,
+      plugins: json.modules.filter((x) => !x.tags.includes('theme')).length,
+
+      developers: Object.keys(json.modules.reduce((acc, x) => { (!Array.isArray(x.authors) ? [ x.authors ] : x.authors).forEach((a) => acc[typeof a === 'object' ? a.i : a] = true); return acc; }, {})).length,
+
+      filename: repo.split('/').pop()
+    });
   }
 
   description += `Browse ${cards.filter((x) => x.tags.includes('theme')).length} themes and ${cards.filter((x) => !x.tags.includes('theme')).length} plugins from ${Object.keys(cards.reduce((acc, x) => { (!Array.isArray(x.authors) ? [ x.authors ] : x.authors).forEach((a) => acc[typeof a === 'object' ? a.i : a] = true); return acc; }, {})).length} developers.`;
@@ -76,6 +103,7 @@ export default () => {
 
   template = template
               .replace('ALL_CARDS', cards.join('\n'))
+              .replace('REPOS', metas.map((x) => makeRepo(x)).join('\n'))
               .replaceAll('NAME', name)
               .replaceAll('DESCRIPTION', description);
 

src/siteGen/template.html

@@ -44,23 +44,64 @@
         width: 100%;
 
         background-color: #101418;
+
+        overflow: hidden;
       }
 
-      body {
-        box-sizing: border-box;
-        display: flex;
-        justify-content: center;
+      .sidebar {
+        display: inline-block;
+        width: 180px;
+        height: 100vh;
+        vertical-align: top;
 
-        padding: 22px;
+        box-sizing: border-box;
+
+        background-color: var(--background-secondary);
+      }
+
+      .sidebar > div {
+        width: 100%;
+
+        padding: 12px 16px;
+
+        color: var(--text-normal);
+        background-color: var(--background-tertiary);
+
+        box-sizing: border-box;
+
+        cursor: pointer;
+      }
+
+      .sidebar > .sidebar-header {
+        cursor: default;
+
+        color: var(--header-primary);
+        background-color: transparent;
+      }
+
+      .sidebar > div.active {
+        background-color: #7289da;
+      }
+
+      .sidebar-button:hover {
+        background-color: #14181C;
       }
 
       .container {
-        width: 85vw;
+        padding: 22px;
 
-        display: flex;
+        width: calc(100vw - 185px);
+        height: 100vh;
+
+        overflow-y: auto;
+
+        display: inline-flex;
         flex-flow: row wrap;
+
         align-items: center;
         justify-content: center;
+
+        box-sizing: border-box;
       }
 
       @media (max-width: 1300px) {
@@ -77,6 +118,54 @@
         flex-basis: 100%;
       }
 
+      body.themes .gm-store-card:not(.theme) {
+        display: none;
+      }
+
+      body.plugins .gm-store-card.theme {
+        display: none;
+      }
+
+      .container.repos {
+        display: none;
+      }
+
+      body.repos .container.cards {
+        display: none;
+      }
+
+      body.repos .container.repos {
+        display: inline-flex;
+      }
+
+      .container.repos {
+        align-content: flex-start;
+      }
+
+      .container .repo {
+        width: 300px;
+        height: 200px;
+
+        justify-content: space-between;
+        display: flex;
+        flex-flow: column;
+
+        text-decoration: none;
+      }
+      
+      .repo * {
+        cursor: pointer;
+      }
+
+      .repo > :last-child {
+        display: flex;
+        justify-content: space-around;
+      }
+
+      .repo > strong {
+        color: var(--text-normal);
+      }
+
 .gm-inline-dropdown {
   display: flex;
   align-items: center;
@@ -105,7 +194,7 @@
   margin-right: 12px;
 }
 
-.gm-store-card {
+.gm-store-card, .repo {
   box-shadow: var(--elevation-medium);
   background-color: var(--background-secondary);
 
@@ -340,8 +429,15 @@
     </style>
   </head>
 
-  <body>
-    <div class="container">
+  <body class="themes">
+    <div class="sidebar">
+      <div class="sidebar-header">NAME</div>
+      <div class="sidebar-button active">Themes</div>
+      <div class="sidebar-button">Plugins</div>
+      <div class="sidebar-button">Repos</div>
+    </div>
+
+    <div class="container cards">
       <div class="gm-store-search container-cMG81i medium-1LLV3p"><div class="inner-2P4tQO"><input id="search-input" class="input-3Xdcic" placeholder="Search" value=""></div></div>
 
       <div class="gm-inline-dropdown">
@@ -358,6 +454,10 @@
       ALL_CARDS
     </div>
 
+    <div class="container repos">
+      REPOS
+    </div>
+
     <script>
       const cards = [...document.getElementsByClassName('gm-store-card')];
 
@@ -392,6 +492,16 @@
 
         cards.forEach((x) => { x.style.display = fuzzyReg.test(x.children[2].textContent) || fuzzyReg.test(x.children[3].textContent) ? '' : 'none'; });
       };
+
+      
+      const sidebarButtons = [...document.getElementsByClassName('sidebar-button')];
+
+      sidebarButtons.forEach((x) => x.onclick = () => {
+        sidebarButtons.forEach((y) => y.classList.remove('active'));
+        x.classList.add('active');
+
+        document.body.className = x.textContent.toLowerCase();
+      });
     </script>
   </body>
 </html>