Add non-ready links to pkg tabs

These links will go to the old website in the meanwhile
thunderstore-io · Aug 26, 2024 · 5ed2534 · 5ed2534
1 parent d051456
commit 5ed2534
Show file tree

Hide file tree

Showing 5 changed files with 62 additions and 12 deletions.
diff --git a/apps/cyberstorm-remix/app/p/packageListing.tsx b/apps/cyberstorm-remix/app/p/packageListing.tsx
@@ -27,14 +27,16 @@ import {
   faCog,
   faArrowUpRight,
   faUsers,
-  faDonate,
+  faHandHoldingHeart,
   faDownload,
   faThumbsUp,
   // faFlag,
   faBoxes,
   faFileLines,
   faFilePlus,
   faCodeBranch,
+  faBook,
+  faCodeSimple,
 } from "@fortawesome/pro-solid-svg-icons";
 import { WrapperCard } from "@thunderstore/cyberstorm/src/components/WrapperCard/WrapperCard";
 import Meta from "./components/Meta/Meta";
@@ -199,6 +201,10 @@ export default function Community() {
     ? "changelog"
     : location.pathname.endsWith("/versions")
     ? "versions"
+    : location.pathname.endsWith("/wiki")
+    ? "wiki"
+    : location.pathname.endsWith("/source")
+    ? "source"
     : "details";
 
   return (
@@ -308,11 +314,27 @@ export default function Community() {
                   currentTab === "details" ? tabsStyles.active : ""
                 )}
               >
-                <Icon inline wrapperClasses={styles.icon}>
+                <Icon inline wrapperClasses={tabsStyles.icon}>
                   <FontAwesomeIcon icon={faFileLines} />
                 </Icon>
                 <span className={tabsStyles.label}>Details</span>
               </CyberstormLink>
+              <CyberstormLink
+                linkId="PackageWiki"
+                community={listing.community_identifier}
+                namespace={listing.namespace}
+                package={listing.name}
+                aria-current={currentTab === "wiki"}
+                className={classnames(
+                  tabsStyles.button,
+                  currentTab === "wiki" ? tabsStyles.active : ""
+                )}
+              >
+                <Icon inline wrapperClasses={tabsStyles.icon}>
+                  <FontAwesomeIcon icon={faBook} />
+                </Icon>
+                <span className={tabsStyles.label}>Wiki</span>
+              </CyberstormLink>
               {listing.has_changelog ? (
                 <CyberstormLink
                   linkId="PackageChangelog"
@@ -325,7 +347,7 @@ export default function Community() {
                     currentTab === "changelog" ? tabsStyles.active : ""
                   )}
                 >
-                  <Icon inline wrapperClasses={styles.icon}>
+                  <Icon inline wrapperClasses={tabsStyles.icon}>
                     <FontAwesomeIcon icon={faFilePlus} />
                   </Icon>
                   <span className={tabsStyles.label}>Changelog</span>
@@ -342,11 +364,27 @@ export default function Community() {
                   currentTab === "versions" ? tabsStyles.active : ""
                 )}
               >
-                <Icon inline wrapperClasses={styles.icon}>
+                <Icon inline wrapperClasses={tabsStyles.icon}>
                   <FontAwesomeIcon icon={faCodeBranch} />
                 </Icon>
                 <span className={tabsStyles.label}>Versions</span>
               </CyberstormLink>
+              <CyberstormLink
+                linkId="PackageSource"
+                community={listing.community_identifier}
+                namespace={listing.namespace}
+                package={listing.name}
+                aria-current={currentTab === "source"}
+                className={classnames(
+                  tabsStyles.button,
+                  currentTab === "source" ? tabsStyles.active : ""
+                )}
+              >
+                <Icon inline wrapperClasses={tabsStyles.icon}>
+                  <FontAwesomeIcon icon={faCodeSimple} />
+                </Icon>
+                <span className={tabsStyles.label}>Source</span>
+              </CyberstormLink>
             </div>
             <Outlet />
           </div>
@@ -385,11 +423,7 @@ export default function Community() {
                     {mappedPackageTagList}
                   </div>
                 }
-                headerIcon={
-                  <Icon>
-                    <FontAwesomeIcon icon={faBoxes} />
-                  </Icon>
-                }
+                headerIcon={<FontAwesomeIcon icon={faBoxes} />}
               />
             ) : null}
             <TagList listing={listing} />
@@ -410,7 +444,7 @@ const DonateButton = (props: { donationLink: string }) => (
     paddingSize="mediumSquare"
   >
     <Button.ButtonIcon>
-      <FontAwesomeIcon icon={faDonate} />
+      <FontAwesomeIcon icon={faHandHoldingHeart} />
     </Button.ButtonIcon>
   </Button.Root>
 );

diff --git a/apps/cyberstorm-remix/cyberstorm/utils/LinkLibrary.tsx b/apps/cyberstorm-remix/cyberstorm/utils/LinkLibrary.tsx
@@ -46,6 +46,11 @@ const library: LinkLibrary = {
   MarkdownPreview: (p) => Link({ ...p, url: "/developers/markdown-preview/" }),
   Package: (p) =>
     Link({ ...p, url: `/c/${p.community}/p/${p.namespace}/${p.package}/` }),
+  PackageWiki: (p) =>
+    Link({
+      ...p,
+      url: `/c/${p.community}/p/${p.namespace}/${p.package}/wiki`,
+    }),
   PackageChangelog: (p) =>
     Link({
       ...p,
@@ -56,6 +61,11 @@ const library: LinkLibrary = {
       ...p,
       url: `/c/${p.community}/p/${p.namespace}/${p.package}/versions`,
     }),
+  PackageSource: (p) =>
+    Link({
+      ...p,
+      url: `/c/${p.community}/p/${p.namespace}/${p.package}/source`,
+    }),
   PackageDependants: (p) =>
     Link({
       ...p,

diff --git a/packages/cyberstorm/src/components/Links/LinkingProvider.tsx b/packages/cyberstorm/src/components/Links/LinkingProvider.tsx
@@ -78,10 +78,14 @@ export interface LinkLibrary {
   MarkdownPreview: NoRequiredProps;
   /** Package's detail view */
   Package: (props: AnyProps & PackageProps) => RE | null;
+  /** Package's wiki view */
+  PackageWiki: (props: AnyProps & PackageProps) => RE | null;
   /** Package's changelog view */
   PackageChangelog: (props: AnyProps & PackageProps) => RE | null;
   /** Package's versions view */
   PackageVersions: (props: AnyProps & PackageProps) => RE | null;
+  /** Package's source view */
+  PackageSource: (props: AnyProps & PackageProps) => RE | null;
   /** View listing other packages that depend on this package */
   PackageDependants: (props: AnyProps & PackageProps) => RE | null;
   /** Package format docs */
@@ -119,8 +123,10 @@ const library: LinkLibrary = {
   ManifestValidator: noop,
   MarkdownPreview: noop,
   Package: noop,
+  PackageWiki: noop,
   PackageChangelog: noop,
   PackageVersions: noop,
+  PackageSource: noop,
   PackageDependants: noop,
   PackageFormatDocs: noop,
   PackageVersion: noop,

diff --git a/packages/cyberstorm/src/components/Links/Links.tsx b/packages/cyberstorm/src/components/Links/Links.tsx
@@ -52,8 +52,10 @@ export type CyberstormLinkIds =
   | "ManifestValidator"
   | "MarkdownPreview"
   | "Package"
+  | "PackageWiki"
   | "PackageChangelog"
   | "PackageVersions"
+  | "PackageSource"
   | "PackageDependants"
   | "PackageFormatDocs"
   | "PackageVersion"

diff --git a/packages/cyberstorm/src/components/WrapperCard/WrapperCard.module.css b/packages/cyberstorm/src/components/WrapperCard/WrapperCard.module.css
@@ -28,7 +28,5 @@
 }
 
 .icon {
-  width: 1em;
-  height: 1em;
   color: var(--color-text--tertiary);
 }