From npms to npmjs registry api

.gitignore

@@ -3,3 +3,4 @@
 node_modules
 .vercel
 plugin-images-metadata.json
+.local.env

components/plugin-info/index.js

@@ -14,14 +14,14 @@ export default ({ npmData: plugin, variant }) => {
       action: 'Opened install modal',
       category: 'plugin',
       label: 'open_install_modal',
-      value: plugin.collected.metadata.name,
+      value: plugin.name,
     })
     setModalOpen(true)
   }
 
   return <>
     <InstallModal
-      pluginName={plugin.collected.metadata.name}
+      pluginName={plugin.name}
       open={modalOpen}
       onClose={() => setModalOpen(false)}
     />
@@ -30,22 +30,22 @@ export default ({ npmData: plugin, variant }) => {
         <div className={`${styles.author} ${styles.borderFollowed}`}>
           <Gravatar
             className={styles.avatar}
-            email={plugin.collected.metadata.publisher.email}
+            email={plugin.publisher.email}
           />
-          <span>{plugin.collected.metadata.publisher.username}</span>
+          <span>{plugin.publisher.username}</span>
         </div>
         <span className={`${styles.downloads} ${styles.borderFollowed}`}>
-          {plugin.collected.npm.downloads[2].count > 0 ? (
+          {plugin.downloads > 0 ? (
             <>
-              {plugin.collected.npm.downloads[2].count.toLocaleString()}{' '}
+              {plugin.downloads.toLocaleString()}{' '}
               downloads in the last month
             </>
           ) : (
             <>Brand new!</>
           )}
         </span>
         <a
-          href={plugin.collected.metadata.links.repository}
+          href={plugin.links.repository}
           target="_blank"
           rel="noopener noreferrer"
           className={styles.github}
@@ -56,20 +56,20 @@ export default ({ npmData: plugin, variant }) => {
       {variant === 'description' ? (
         <Link
           href="/store/[name]/source"
-          as={`/store/${plugin.collected.metadata.name}/source`}
+          as={`/store/${plugin.name}/source`}
           className={styles.link}>
           view source code
         </Link>
       ) : (
         <Link
           href="/store/[name]"
-          as={`/store/${plugin.collected.metadata.name}`}
+          as={`/store/${plugin.name}`}
           className={styles.link}>
           view description
         </Link>
       )}
       <span className={styles.version}>
-        Version {plugin.collected.metadata.version}
+        Version {plugin.version}
       </span>
       <a
         className={`${styles.install} ${styles.loaded}`}

pages/api/getPackageMetadata.js

@@ -0,0 +1,30 @@
+const NPM_API_URL = 'https://registry.npmjs.org'
+const NPM_DOWNLOADS_URL = 'https://api.npmjs.org/downloads/point/last-month'
+
+export default async function handler(req, res) {
+  const { name } = req.query
+
+  const packument = await (await fetch(`${NPM_API_URL}/${name}`)).json()
+  const { downloads } = await (
+    await fetch(`${NPM_DOWNLOADS_URL}/${name}`)
+  ).json()
+  const version = packument['dist-tags'].latest
+  const npmUser = packument.versions[version]['_npmUser']
+
+  const npmMetadata = {
+    name: packument.name,
+    publisher: {
+      email: npmUser.email,
+      username: npmUser.name,
+    },
+    downloads,
+    links: {
+      homepage: packument?.homepage ?? `https://npmjs.com/package/${name}`,
+      repository:
+        packument?.repository?.url ?? `https://npmjs.com/package/${name}`,
+    },
+    version,
+  }
+
+  res.status(200).json(npmMetadata)
+}

pages/store/[name]/index.js

@@ -4,6 +4,7 @@ import plugins from 'plugins'
 import styles from 'styles/pages/store/index.module.css'
 import { getPluginPreviewImage } from 'lib/plugin'
 import Image from 'next/image'
+import { WEBSITE_URL } from 'utils/constants'
 
 export default function StoreIndexPage({ plugin, npmData }) {
   return (
@@ -46,7 +47,7 @@ export default function StoreIndexPage({ plugin, npmData }) {
 
 export const getStaticProps = async ({ params }) => {
   const npmData = await (
-    await fetch(`https://api.npms.io/v2/package/${params.name}`)
+    await fetch(`${WEBSITE_URL}/api/getPackageMetadata?name=${params.name}`)
   ).json()
 
   const plugin = {

pages/store/[name]/source.js

@@ -5,6 +5,7 @@ import Page from 'components/page'
 import PluginInfo from 'components/plugin-info'
 import { File, Directory } from 'components/icons'
 import styles from 'styles/pages/store/source.module.css'
+import { WEBSITE_URL } from 'utils/constants'
 
 const formatFileName = (path) => path.replace(/^\/+|\/+$/g, '')
 
@@ -113,7 +114,7 @@ export async function getStaticProps({ params }) {
   }
 
   const npmData = await (
-    await fetch(`https://api.npms.io/v2/package/${plugin.name}`)
+    await fetch(`${WEBSITE_URL}/api/getPackageMetadata?name=${params.name}`)
   ).json()
 
   const pluginMeta = await (

plugins.json

@@ -635,5 +635,39 @@
       "#9272dc"
     ],
     "dateAdded": "1597807892019"
+  },
+  {
+    "name": "hyper-gh-dark-default",
+    "type": "theme",
+    "description": "A port of the GitHub Dark default theme for Hyper.app",
+    "preview": "https://raw.githubusercontent.com/milovangudelj/hyper-gh-dark-default/master/screenshot.png",
+    "colors": [
+      "#0d1117",
+      "#ff7b72",
+      "#3fb950",
+      "#d29922",
+      "#58a6ff",
+      "#bc8cff",
+      "#76e3ea",
+      "#b1bac4",
+      "#161b22",
+      "#ffa198",
+      "#56d364",
+      "#e3b341",
+      "#79c0ff",
+      "#d2a8ff",
+      "#b3f0ff",
+      "#b1bac4",
+      "#b1bac4",
+      "#484f58",
+      "#010409",
+      "#0d1117",
+      "#c9d1d9",
+      "#30363d",
+      "#58A6FF",
+      "#f78166",
+      "rgba(56,139,253,0.15)"
+    ],
+    "dateAdded": "1675163504003"
   }
 ]

utils/constants.js

@@ -0,0 +1,4 @@
+export const WEBSITE_URL =
+  process.env.NODE_ENV === 'development'
+    ? 'http://localhost:3000'
+    : 'https://hyper.milovangudelj.com'