feat: option to show archived repos & archived tag (#679)

Author: SunsetTechuila

src/app.tsx

@@ -103,6 +103,7 @@ class App extends React.Component<{
       visual: {
         stars: JSON.parse(getLocalStorageDataFromKey("marketplace:stars", true)),
         tags: JSON.parse(getLocalStorageDataFromKey("marketplace:tags", true)),
+        showArchived: JSON.parse(getLocalStorageDataFromKey("marketplace:showArchived", false)),
         hideInstalled: JSON.parse(getLocalStorageDataFromKey("marketplace:hideInstalled", false)),
         colorShift: JSON.parse(getLocalStorageDataFromKey("marketplace:colorShift", false)),
         themeDevTools: JSON.parse(getLocalStorageDataFromKey("marketplace:themeDevTools", false)),

src/components/Card/Card.tsx

@@ -71,6 +71,7 @@ class Card extends React.Component<CardProps, {
     // Needs to be after Object.assign so an undefined 'tags' field doesn't overwrite the default []
     this.tags = props.item.tags || [];
     if (props.item.include) this.tags.push(t("grid.externalJS"));
+    if (props.item.archived) this.tags.push(t("grid.archived"));
 
     this.state = {
       // Initial value. Used to trigger a re-render.

src/components/Card/TagsDiv.tsx

@@ -12,6 +12,7 @@ const TagsDiv = (props: {
   // Map of english names for tags so that the css can identify them for colouring
   const englishTagMap = {
     [t("grid.externalJS")]: "external JS",
+    [t("grid.archived")]: "archived",
     [t("grid.dark")]: "dark",
     [t("grid.light")]: "light",
   };
@@ -26,8 +27,8 @@ const TagsDiv = (props: {
       "data-tag": string;
     }, HTMLElement>[]>((accum, tag) => {
       const englishTag = englishTagMap[tag] || tag;
-      // Render tags if enabled. Always render external JS tag
-      if (props.showTags || tag === t("grid.externalJS")) {
+      // Render tags if enabled. Always render external JS and archived tags
+      if (props.showTags || tag === t("grid.externalJS") || tag === t("grid.archived")) {
         accum.push(
           React.createElement("li", {
             className: "marketplace-card__tag",
@@ -40,20 +41,25 @@ const TagsDiv = (props: {
     }, []);
   };
 
-  const baseTags = props.tags.slice(0, MAX_TAGS);
+  const baseTags = props.tags
+    // Sort tags so that externalJS and archived tags come first
+    .sort((a) =>
+      a === t("grid.externalJS") || a === t("grid.archived") ? -1 : 1,
+    )
+    .slice(0, MAX_TAGS);
   const extraTags = props.tags.slice(MAX_TAGS);
 
   // Render the tags list and add expand button if there are more tags
   return (
     <div className="marketplace-card__tags-container">
       <ul className="marketplace-card__tags">
-        { generateTags(baseTags) }
-        { extraTags.length && expanded
+        {generateTags(baseTags)}
+        {extraTags.length && expanded
           ? generateTags(extraTags)
           : null
         }
       </ul>
-      { extraTags.length && !expanded
+      {extraTags.length && !expanded
         ? <button
           className="marketplace-card__tags-more-btn"
           onClick={(e) => {

src/components/Grid.tsx

@@ -190,7 +190,12 @@ class Grid extends React.Component<
     const activeTab = this.CONFIG.activeTab;
     switch (activeTab) {
     case "Extensions": {
-      const pageOfRepos = await getTaggedRepos("spicetify-extensions", this.requestPage, this.BLACKLIST);
+      const pageOfRepos = await getTaggedRepos(
+        "spicetify-extensions",
+        this.requestPage,
+        this.BLACKLIST,
+        this.CONFIG.visual.showArchived,
+      );
       const extensions: CardItem[] = [];
       for (const repo of pageOfRepos.items) {
         const repoExtensions = await fetchExtensionManifest(
@@ -208,7 +213,10 @@ class Grid extends React.Component<
 
         if (repoExtensions && repoExtensions.length) {
           extensions.push(...repoExtensions.map((extension) => ({
-            ...extension, lastUpdated: repo.pushed_at, created: repo.created_at,
+            ...extension,
+            archived: repo.archived,
+            lastUpdated: repo.pushed_at,
+            created: repo.created_at,
           })));
         }
       }
@@ -266,7 +274,12 @@ class Grid extends React.Component<
       // Don't need to return a page number because
       // installed extension do them all in one go, since it's local
     } case "Themes": {
-      const pageOfRepos = await getTaggedRepos("spicetify-themes", this.requestPage, this.BLACKLIST);
+      const pageOfRepos = await getTaggedRepos(
+        "spicetify-themes",
+        this.requestPage,
+        this.BLACKLIST,
+        this.CONFIG.visual.showArchived,
+      );
       const themes: CardItem[] = [];
       for (const repo of pageOfRepos.items) {
         const repoThemes = await fetchThemeManifest(
@@ -285,6 +298,7 @@ class Grid extends React.Component<
           themes.push(...repoThemes.map(
             (theme) => ({
               ...theme,
+              archived: repo.archived,
               lastUpdated: repo.pushed_at,
               created: repo.created_at,
             }),
@@ -311,7 +325,12 @@ class Grid extends React.Component<
       break;
     }
     case "Apps": {
-      const pageOfRepos = await getTaggedRepos("spicetify-apps", this.requestPage, this.BLACKLIST);
+      const pageOfRepos = await getTaggedRepos(
+        "spicetify-apps",
+        this.requestPage,
+        this.BLACKLIST,
+        this.CONFIG.visual.showArchived,
+      );
       const apps: CardItem[] = [];
 
       for (const repo of pageOfRepos.items) {
@@ -329,6 +348,7 @@ class Grid extends React.Component<
         if (repoApps && repoApps.length) {
           apps.push(...repoApps.map((app) => ({
             ...app,
+            archived: repo.archived,
             lastUpdated: repo.pushed_at,
             created: repo.created_at,
           })));

src/components/Modals/Settings/index.tsx

@@ -1,13 +1,11 @@
 import React from "react";
 import { t } from "i18next";
-import { Config } from "../../../types/marketplace-types";
 
+import { Config } from "../../../types/marketplace-types";
 import { getLocalStorageDataFromKey, resetMarketplace, sleep } from "../../../logic/Utils";
-
 import ConfigRow from "./ConfigRow";
 import Button from "../../Button";
 import TabRow from "./TabRow";
-
 import { openModal } from "../../../logic/LaunchModals";
 import { LOCALSTORAGE_KEYS, MARKETPLACE_VERSION } from "../../../constants";
 
@@ -60,6 +58,7 @@ const SettingsModal = ({ CONFIG, updateAppConfig } : Props) => {
       <h2 className="settings-heading">{t("settings.optionsHeading")}</h2>
       <ConfigRow name={t("settings.starCountLabel")} storageKey='stars' modalConfig={modalConfig} updateConfig={updateConfig}/>
       <ConfigRow name={t("settings.tagsLabel")} storageKey='tags' modalConfig={modalConfig} updateConfig={updateConfig}/>
+      <ConfigRow name={t("settings.showArchived")} storageKey='showArchived' modalConfig={modalConfig} updateConfig={updateConfig}/>
       <ConfigRow name={t("settings.devToolsLabel")} storageKey='themeDevTools' modalConfig={modalConfig} updateConfig={updateConfig}/>
       <ConfigRow name={t("settings.hideInstalledLabel")} storageKey='hideInstalled' modalConfig={modalConfig} updateConfig={updateConfig}/>
       <ConfigRow name={t("settings.colourShiftLabel")} storageKey='colorShift' modalConfig={modalConfig} updateConfig={updateConfig}/>

src/logic/FetchRemotes.ts

@@ -1,8 +1,8 @@
 import { t } from "i18next";
 
 import { BLACKLIST_URL, ITEMS_PER_REQUEST } from "../constants";
-import { addToSessionStorage, processAuthors } from "./Utils";
 import { RepoTopic, CardItem, Snippet } from "../types/marketplace-types";
+import { addToSessionStorage, processAuthors } from "./Utils";
 import snippetsJSON from "../resources/snippets";
 
 // TODO: add sort type, order, etc?
@@ -15,7 +15,7 @@ import snippetsJSON from "../resources/snippets";
  * @param page The query page number
  * @returns Array of search results (filtered through the blacklist)
  */
-export async function getTaggedRepos(tag: RepoTopic, page = 1, BLACKLIST:string[] = []) {
+export async function getTaggedRepos(tag: RepoTopic, page = 1, BLACKLIST:string[] = [], showArchived = false) {
   // www is needed or it will block with "cross-origin" error.
   let url = `https://api.github.com/search/repositories?q=${encodeURIComponent(`topic:${tag}`)}&per_page=${ITEMS_PER_REQUEST}`;
 
@@ -41,7 +41,7 @@ export async function getTaggedRepos(tag: RepoTopic, page = 1, BLACKLIST:string[
     // Include count of all items on the page, since we're filtering the blacklist below,
     // which can mess up the paging logic
     page_count: allRepos.items.length,
-    items: allRepos.items.filter(item => !BLACKLIST.includes(item.html_url)),
+    items: allRepos.items.filter(item => !BLACKLIST.includes(item.html_url) && (showArchived || !item.archived)),
   };
 
   return filteredResults;
@@ -149,9 +149,14 @@ export async function fetchExtensionManifest(contents_url: string, branch: strin
       if (manifest && manifest.name && manifest.description && manifest.main
       ) {
         // Add to list unless we're hiding installed items and it's installed
-        if (!(hideInstalled
-          && localStorage.getItem("marketplace:installed:" + `${user}/${repo}/${manifest.main}`))
-        ) accum.push(item);
+        if (
+          !(
+            hideInstalled &&
+            localStorage.getItem("marketplace:installed:" + `${user}/${repo}/${manifest.main}`)
+          )
+        ) {
+          accum.push(item);
+        }
       }
       // else {
       //     console.error("Invalid manifest:", manifest);

src/resources/locales/en.json

@@ -5,6 +5,7 @@
       "optionsHeading": "Options",
       "starCountLabel": "Stars count",
       "tagsLabel": "Tags",
+      "showArchived": "Show archived repos",
       "devToolsLabel": "Theme developer tools",
       "hideInstalledLabel": "Hide installed when browsing",
       "colourShiftLabel": "Shift colours every minute",
@@ -91,6 +92,7 @@
       "installed": "Installed",
       "lastUpdated": "Last updated {{val, datetime}}",
       "externalJS": "external JS",
+      "archived": "archived",
       "dark": "dark",
       "light": "light",
       "sort": {

src/resources/locales/ru.json

@@ -5,6 +5,7 @@
       "optionsHeading": "Основные",
       "starCountLabel": "Отображать количество звезд",
       "tagsLabel": "Отображать теги",
+      "showArchived": "Отображать архивные репозитории",
       "devToolsLabel": "Включить инструменты разработчика тем",
       "hideInstalledLabel": "Скрывать установленное в других вкладках",
       "colourShiftLabel": "Менять цвета каждую минуту",
@@ -91,6 +92,7 @@
       "installed": "Установлено",
       "lastUpdated": "Обновлено: {{val, datetime}}",
       "externalJS": "содержит JS",
+      "archived": "архивировано",
       "dark": "темный",
       "light": "светлый",
       "sort": {

src/styles/components/_card.scss

@@ -39,7 +39,7 @@
         border-radius: 4px;
         padding: 0px 9px 2px;
 
-        &[data-tag='external JS'] {
+        &[data-tag='external JS'], &[data-tag=archived] {
           background-color: hsl(0deg 70% 54%);
           color: #fff;
         }

src/types/marketplace-types.d.ts

@@ -58,6 +58,7 @@ export type Snippet = {
   user: undefined;
   repo: undefined;
   branch: undefined;
+  archived: undefined;
   extensionURL: undefined;
   readmeURL: undefined;
   stars: undefined;
@@ -95,6 +96,7 @@ export type CardItem = {
   user: string;
   repo: string;
   branch: string;
+  archived: boolean;
   imageURL: string;
   extensionURL: string;
   readmeURL: string;
@@ -126,6 +128,7 @@ export type CardItem = {
 export type VisualConfig = {
   stars: boolean;
   tags: boolean;
+  showArchived: boolean;
   hideInstalled: boolean;
   colorShift: boolean;
   themeDevTools: boolean;