Refactor changes from Site UI

.gitignore

@@ -11,6 +11,7 @@ coverage
 
 # Transpiled files
 build/
+dist/
 main/
 out/
 .next/

package.json

@@ -90,7 +90,7 @@
     "vitest": "^1.6.0"
   },
   "dependencies": {
-    "@studiorack/core": "^2.0.15",
+    "@studiorack/core": "^2.0.16",
     "electron-is-dev": "^2.0.0",
     "electron-next": "^3.1.5",
     "fix-path": "^3.0.0",
@@ -99,7 +99,8 @@
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "remark": "^15.0.1",
-    "remark-html": "^16.0.1"
+    "remark-html": "^16.0.1",
+    "slugify": "^1.6.6"
   },
   "overrides": {
     "path-to-regexp": "^8.1.0"

renderer/components/audio.tsx

@@ -0,0 +1,50 @@
+import { useState } from 'react';
+import { getBasePath } from '../lib/path';
+import styles from '../styles/components/audio.module.css';
+import { PluginFile } from '@studiorack/core';
+
+type AudioProps = {
+  file: PluginFile;
+};
+
+const Audio = ({ file }: AudioProps) => {
+  const [isPlaying, setIsPlaying] = useState(false);
+
+  const play = () => {
+    const el = document.getElementById('audio') as HTMLAudioElement;
+    if (el.paused) {
+      el.removeEventListener('ended', ended);
+      el.addEventListener('ended', ended);
+      el.currentTime = 0;
+      el.play();
+      setIsPlaying(true);
+    }
+  };
+
+  const pause = () => {
+    const el = document.getElementById('audio') as HTMLAudioElement;
+    if (!el.paused) {
+      el.pause();
+      setIsPlaying(false);
+    }
+  };
+
+  const ended = () => {
+    setIsPlaying(false);
+  };
+
+  return (
+    <div>
+      {isPlaying ? (
+        <img className={styles.audio} src={`${getBasePath()}/images/icon-pause.svg`} alt="Pause" onClick={pause} />
+      ) : (
+        <img className={styles.audio} src={`${getBasePath()}/images/icon-play.svg`} alt="Play" onClick={play} />
+      )}
+      <audio src={file.url} id="audio">
+        Your browser does not support the audio element.
+      </audio>
+    </div>
+  );
+};
+
+export default Audio;

renderer/components/card.tsx

@@ -0,0 +1,55 @@
+import styles from '../styles/components/card.module.css';
+import Link from 'next/link';
+import { getBasePath } from '../lib/path';
+import { imageError } from '../lib/image';
+import { pluginFileUrl } from '@studiorack/core';
+
+type CardProps = {
+  section: string;
+  plugin: any;
+  pluginIndex: number;
+};
+
+const Card = ({ section, plugin, pluginIndex }: CardProps) => (
+  <Link href={`/${section}/[userId]/[pluginId]`} as={`/${section}/${plugin.id}`} className={styles.cardLink}>
+    <div className={styles.card}>
+      <div className={styles.cardDetails}>
+        <div className={styles.cardHead}>
+          <h4 className={styles.cardTitle}>
+            {plugin.name} <span className={styles.cardVersion}>v{plugin.version}</span>
+          </h4>
+          <span className={styles.cardButton}>
+            <img
+              className={styles.cardButtonIcon}
+              src={`${getBasePath()}/images/icon-download.svg`}
+              alt="Download"
+              loading="lazy"
+            />
+          </span>
+        </div>
+        <ul className={styles.cardTags}>
+          <img className={styles.cardIcon} src={`${getBasePath()}/images/icon-tag.svg`} alt="Tags" loading="lazy" />
+          {plugin.tags.map((tag: string, tagIndex: number) => (
+            <li className={styles.cardTag} key={`${tag}-${tagIndex}-${pluginIndex}`}>
+              {tag}
+              {tagIndex !== plugin.tags.length - 1 ? ',' : ''}
+            </li>
+          ))}
+        </ul>
+      </div>
+      {plugin.files.image ? (
+        <img
+          className={styles.cardImage}
+          src={pluginFileUrl(plugin, 'image')}
+          alt={plugin.name}
+          onError={imageError}
+          loading="lazy"
+        />
+      ) : (
+        ''
+      )}
+    </div>
+  </Link>
+);
+
+export default Card;

renderer/components/code.tsx

@@ -0,0 +1,32 @@
+import styles from '../styles/components/code.module.css';
+import { PluginVersion } from '@studiorack/core';
+
+type CodeProps = {
+  plugin: PluginVersion;
+};
+
+const Code = ({ plugin }: CodeProps) => (
+  <div className={`${styles.code}`}>
+    <p>
+      Install via{' '}
+      <a href="https://www.npmjs.com/package/@studiorack/cli" target="_blank">
+        StudioRack CLI
+      </a>
+    </p>
+    {plugin.tags.includes('sfz') ? (
+      <span>
+        <pre className={styles.codeLine}>studiorack plugin install sfztools/sfizz</pre>
+        <pre className={styles.codeLine}>studiorack plugin install {plugin.id}</pre>
+      </span>
+    ) : plugin.tags.includes('sf2') ? (
+      <span>
+        <pre className={styles.codeLine}>studiorack plugin install studiorack/juicysf</pre>
+        <pre className={styles.codeLine}>studiorack plugin install {plugin.id}</pre>
+      </span>
+    ) : (
+      <pre className={styles.codeLine}>studiorack plugin install {plugin.id}</pre>
+    )}
+  </div>
+);
+
+export default Code;

renderer/components/dependency.tsx

@@ -1,43 +1,33 @@
-import styles from '../styles/plugin.module.css';
 import { getBasePath } from '../lib/path';
 import { PluginVersion } from '@studiorack/core';
 
 type DependencyProps = {
   plugin: PluginVersion;
-  message?: boolean;
 };
 
-const Dependency = ({ plugin, message = false }: DependencyProps) => {
+const Dependency = ({ plugin }: DependencyProps) => {
   if (plugin.tags.includes('sfz')) {
-    if (message) {
-      return (
-        <span>
-          {' '}
-          (This instrument needs to be loaded into a{' '}
-          <a href={`${getBasePath()}/instruments/studiorack/sfizz`} target="_blank">
-            SFZ player
-          </a>
-          )
-        </span>
-      );
-    } else {
-      return <pre className={styles.codeBox}>studiorack plugin install studiorack/sfizz</pre>;
-    }
+    return (
+      <span>
+        {' '}
+        (This instrument needs to be loaded into a{' '}
+        <a href={`${getBasePath()}/instruments/sfztools/sfizz`} target="_blank">
+          SFZ player
+        </a>
+        )
+      </span>
+    );
   } else if (plugin.tags.includes('sf2')) {
-    if (message) {
-      return (
-        <span>
-          {' '}
-          (This instrument needs to be loaded into a{' '}
-          <a href={`${getBasePath()}/instruments/studiorack/juicysf`} target="_blank">
-            SoundFont 2 player
-          </a>
-          )
-        </span>
-      );
-    } else {
-      return <pre className={styles.codeBox}>studiorack plugin install studiorack/juicysf</pre>;
-    }
+    return (
+      <span>
+        {' '}
+        (This instrument needs to be loaded into a{' '}
+        <a href={`${getBasePath()}/instruments/studiorack/juicysf`} target="_blank">
+          SoundFont 2 player
+        </a>
+        )
+      </span>
+    );
   } else {
     return <span />;
   }

renderer/components/details.tsx

@@ -0,0 +1,106 @@
+import styles from '../styles/components/details.module.css';
+import { getBasePath } from '../lib/path';
+import Crumb from './crumb';
+import { pluginGetOrgId, pluginGetPluginId, timeSince } from '../lib/utils';
+import { pluginFileUrl, PluginVersion, PluginVersionLocal } from '@studiorack/core';
+import Audio from './audio';
+import Player from './player';
+import Dependency from './dependency';
+import Downloads from './download';
+import Code from './code';
+import { pluginLicense } from '../lib/plugin';
+
+type DetailsProps = {
+  plugin: PluginVersion | PluginVersionLocal;
+  type: string;
+};
+
+const Details = ({ plugin, type }: DetailsProps) => (
+  <article>
+    <div className={styles.header}>
+      <div className={styles.headerInner2}>
+        <Crumb items={[type, pluginGetOrgId(plugin), pluginGetPluginId(plugin)]}></Crumb>
+      </div>
+      <div className={styles.headerInner}>
+        <div className={styles.media}>
+          <div className={styles.imageContainer}>
+            {plugin.files.audio ? <Audio file={plugin.files.audio} /> : ''}
+            {plugin.tags.includes('sfz') ? <Player plugin={plugin} /> : ''}
+            {plugin.files.image ? (
+              <img className={styles.image} src={pluginFileUrl(plugin, 'image')} alt={plugin.name || ''} />
+            ) : (
+              ''
+            )}
+          </div>
+        </div>
+        <div className={styles.details}>
+          <h3 className={styles.title}>
+            {plugin.name || ''} <span className={styles.version}>v{plugin.version}</span>
+          </h3>
+          <p className={styles.author}>
+            By{' '}
+            <a href={plugin.homepage} target="_blank">
+              {plugin.author}
+            </a>
+          </p>
+          <p>
+            {plugin.description}
+            <Dependency plugin={plugin} />
+          </p>
+          <div className={styles.metadataList}>
+            {/* <div className={styles.metadata}><img className={styles.icon} src={`${getBasePath()}/images/icon-filesize.svg`} alt="Filesize" loading="lazy" /> {formatBytes(plugin.files.linux.size)}</div> */}
+            <div className={styles.metadata}>
+              <img
+                className={styles.icon}
+                src={`${getBasePath()}/images/icon-date.svg`}
+                alt="Date updated"
+                loading="lazy"
+              />{' '}
+              {timeSince(plugin.date)} ago
+            </div>
+            <div className={styles.metadata}>
+              <img
+                className={styles.icon}
+                src={`${getBasePath()}/images/icon-license.svg`}
+                alt="License"
+                loading="lazy"
+              />{' '}
+              {plugin.license ? (
+                <a href={pluginLicense(plugin.license).url} target="_blank">
+                  {pluginLicense(plugin.license).name}
+                </a>
+              ) : (
+                'none'
+              )}
+            </div>
+            <div className={styles.metadata}>
+              <img className={styles.icon} src={`${getBasePath()}/images/icon-tag.svg`} alt="Tags" loading="lazy" />
+              <ul className={styles.tags}>
+                {plugin.tags.map((tag: string, tagIndex: number) => (
+                  <li className={styles.tag} key={`${tag}-${tagIndex}`}>
+                    {tag}
+                    {tagIndex !== plugin.tags.length - 1 ? ',' : ''}
+                  </li>
+                ))}
+              </ul>
+            </div>
+            <div className={styles.metadataFooter}>
+              <a href={plugin.homepage} target="_blank">
+                <button className="button button-clear">View source</button>
+              </a>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div id="sfzPlayer"></div>
+    <div className={styles.options}>
+      <div className={styles.row}>
+        <Downloads plugin={plugin} />
+        <Code plugin={plugin} />
+      </div>
+    </div>
+  </article>
+);
+
+export default Details;