/community page refactor

thunderstore-io · Nov 8, 2024 · e0b421a · e0b421a
1 parent d7d644f
commit e0b421a
Show file tree

Hide file tree

Showing 80 changed files with 1,261 additions and 859 deletions.
diff --git a/apps/cyberstorm-remix/app/Error.module.css b/apps/cyberstorm-remix/app/Error.module.css
@@ -10,7 +10,7 @@
 }
 
 .description {
-  color: var(--color-text--accent);
+  color: var(--color-text-accent);
   font-weight: var(--font-weight-semibold);
   line-height: 1;
 }

diff --git a/apps/cyberstorm-remix/app/c/Community.css b/apps/cyberstorm-remix/app/c/Community.css
@@ -0,0 +1,38 @@
+@layer project-layout {
+  .project-community__metaitem {
+    display: flex;
+    gap: var(--gap-xs);
+    align-items: center;
+    color: var(--Meta-item-text-color--default, #c6c3ff);
+    font-weight: var(--font-weight-bold);
+    font-size: var(--font-size-body-md);
+    line-height: var(--line-height-lg);
+
+    & > svg {
+      inline-size: var(--space-16);
+    }
+  }
+
+  .project-community__metalink {
+    display: flex;
+    gap: var(--gap-xs);
+    align-items: center;
+    font-weight: var(--font-weight-bold);
+    font-size: var(--font-size-body-md);
+    line-height: var(--line-height-lg);
+
+    & > svg {
+      inline-size: var(--space-16);
+    }
+  }
+
+  @media (width <= 30rem) {
+    .project-community__metaitem {
+      font-size: var(--font-size-body-sm);
+    }
+
+    .project-community__metaitem__text {
+      display: none;
+    }
+  }
+}
diff --git a/apps/cyberstorm-remix/app/c/CommunityCard.module.css b/apps/cyberstorm-remix/app/c/CommunityCard.module.css
@@ -18,12 +18,21 @@
 @media (width <= 30rem) {
   .root {
     gap: var(--space-16);
+    padding: var(--space-8) 0;
+  }
+
+  .info > h1 {
+    --display-font-size: 21px;
+  }
+
+  .image {
+    flex: 0 0 5rem;
   }
 }
 
 .meta {
   display: flex;
-  flex-direction: row;
+  flex-flow: row wrap;
   gap: var(--space-16);
   padding-top: var(--space-16);
 }
@@ -46,7 +55,7 @@
 .backgroundImg {
   --w: 56vw;
 
-  position: absolute;
+  position: fixed;
   top: calc(-1 * (var(--header-height) + var(--content-padding-top-desktop)));
   right: 0;
 

diff --git a/apps/cyberstorm-remix/app/c/community.tsx b/apps/cyberstorm-remix/app/c/community.tsx
@@ -1,14 +1,13 @@
 import type { LoaderFunctionArgs, MetaFunction } from "@remix-run/node";
 import { useLoaderData } from "@remix-run/react";
 import {
-  BreadCrumbs,
-  Button,
-  CollapsibleText,
-  CyberstormLink,
-  ImageWithFallback,
-  MetaItem,
-  Title,
+  Heading,
+  Image,
+  NewBreadCrumbs,
+  NewIcon,
+  NewLink,
 } from "@thunderstore/cyberstorm";
+import "./Community.css";
 import styles from "./CommunityCard.module.css";
 import { formatInteger } from "@thunderstore/cyberstorm/src/utils/utils";
 import { getDapper } from "cyberstorm/dapper/sessionUtils";
@@ -21,6 +20,8 @@ import {
 } from "@fortawesome/free-solid-svg-icons";
 import { faDiscord } from "@fortawesome/free-brands-svg-icons";
 import { ApiError } from "@thunderstore/thunderstore-api";
+import { CollapsibleText } from "~/commonComponents/CollapsibleText/CollapsibleText";
+import { PackageOrderOptions } from "~/commonComponents/PackageSearch/PackageOrder";
 
 export const meta: MetaFunction<typeof loader> = ({ data }) => {
   return [
@@ -34,20 +35,15 @@ export async function loader({ request, params }: LoaderFunctionArgs) {
     try {
       const dapper = await getDapper();
       const searchParams = new URL(request.url).searchParams;
-      const order = searchParams.get("order");
+      const ordering =
+        searchParams.get("ordering") ?? PackageOrderOptions.Updated;
       const page = searchParams.get("page");
       const search = searchParams.get("search");
       const includedCategories = searchParams.get("includedCategories");
       const excludedCategories = searchParams.get("excludedCategories");
       const section = searchParams.get("section");
       const nsfw = searchParams.get("nsfw");
       const deprecated = searchParams.get("deprecated");
-      const created_recent = searchParams.get("created_recent");
-      const updated_recent = searchParams.get("updated_recent");
-      const created_after = searchParams.get("created_after");
-      const created_before = searchParams.get("created_before");
-      const updated_after = searchParams.get("updated_after");
-      const updated_before = searchParams.get("updated_before");
       return {
         community: await dapper.getCommunity(params.communityId),
         filters: await dapper.getCommunityFilters(params.communityId),
@@ -56,20 +52,14 @@ export async function loader({ request, params }: LoaderFunctionArgs) {
             kind: "community",
             communityId: params.communityId,
           },
-          order ?? "",
+          ordering ?? "",
           page === null ? undefined : Number(page),
           search ?? "",
           includedCategories?.split(",") ?? undefined,
           excludedCategories?.split(",") ?? undefined,
           section ?? "",
           nsfw === "true" ? true : false,
-          deprecated === "true" ? true : false,
-          created_recent ?? "",
-          updated_recent ?? "",
-          created_after ?? "",
-          created_before ?? "",
-          updated_after ?? "",
-          updated_before ?? ""
+          deprecated === "true" ? true : false
         ),
       };
     } catch (error) {
@@ -89,20 +79,15 @@ export async function clientLoader({ request, params }: LoaderFunctionArgs) {
     try {
       const dapper = await getDapper(true);
       const searchParams = new URL(request.url).searchParams;
-      const order = searchParams.get("order");
+      const ordering =
+        searchParams.get("ordering") ?? PackageOrderOptions.Updated;
       const page = searchParams.get("page");
       const search = searchParams.get("search");
       const includedCategories = searchParams.get("includedCategories");
       const excludedCategories = searchParams.get("excludedCategories");
       const section = searchParams.get("section");
       const nsfw = searchParams.get("nsfw");
       const deprecated = searchParams.get("deprecated");
-      const created_recent = searchParams.get("created_recent");
-      const updated_recent = searchParams.get("updated_recent");
-      const created_after = searchParams.get("created_after");
-      const created_before = searchParams.get("created_before");
-      const updated_after = searchParams.get("updated_after");
-      const updated_before = searchParams.get("updated_before");
       return {
         community: await dapper.getCommunity(params.communityId),
         filters: await dapper.getCommunityFilters(params.communityId),
@@ -111,20 +96,14 @@ export async function clientLoader({ request, params }: LoaderFunctionArgs) {
             kind: "community",
             communityId: params.communityId,
           },
-          order ?? "",
+          ordering ?? "",
           page === null ? undefined : Number(page),
           search ?? "",
           includedCategories?.split(",") ?? undefined,
           excludedCategories?.split(",") ?? undefined,
           section ?? "",
           nsfw === "true" ? true : false,
-          deprecated === "true" ? true : false,
-          created_recent ?? "",
-          updated_recent ?? "",
-          created_after ?? "",
-          created_before ?? "",
-          updated_after ?? "",
-          updated_before ?? ""
+          deprecated === "true" ? true : false
         ),
       };
     } catch (error) {
@@ -154,59 +133,78 @@ export default function Community() {
           }}
         />
       ) : null}
-      <BreadCrumbs>
-        <CyberstormLink linkId="Communities">Communities</CyberstormLink>
-        <CyberstormLink linkId="Community" community={community.identifier}>
+      <NewBreadCrumbs rootClasses="project-root__breadcrumbs">
+        <NewLink
+          primitiveType="cyberstormLink"
+          linkId="Communities"
+          csVariant="cyber"
+        >
+          Communities
+        </NewLink>
+        <NewLink
+          primitiveType="cyberstormLink"
+          linkId="Community"
+          community={community.identifier}
+        >
           {community.name}
-        </CyberstormLink>
-      </BreadCrumbs>
+        </NewLink>
+      </NewBreadCrumbs>
       <header className="project-root__page-header">
         <div className={styles.root}>
           <div className={styles.image}>
-            <ImageWithFallback
-              src={community.cover_image_url}
-              type="community"
-            />
+            <Image src={community.cover_image_url} cardType="community" />
           </div>
           <div className={styles.info}>
-            <Title text={community.name} />
+            <Heading csLevel="1" csSize="2" csVariant="primary" mode="display">
+              {community.name}
+            </Heading>
             {community.description ? (
               <CollapsibleText text={community.description} maxLength={85} />
             ) : null}
             <div className={styles.meta}>
               {[
-                <MetaItem
+                <div
+                  className="project-community__metaitem"
                   key="meta-packages"
-                  label={`${formatInteger(
-                    community.total_package_count
-                  )} packages`}
-                  icon={<FontAwesomeIcon icon={faBoxOpen} />}
-                  colorScheme="accent"
-                  size="bold_large"
-                />,
-                <MetaItem
+                >
+                  <NewIcon csMode="inline" noWrapper>
+                    <FontAwesomeIcon icon={faBoxOpen} />
+                  </NewIcon>
+                  {formatInteger(community.total_package_count)}
+                  <span className="project-community__metaitem__text">
+                    packages
+                  </span>
+                </div>,
+                <div
+                  className="project-community__metaitem"
                   key="meta-downloads"
-                  label={`${formatInteger(
-                    community.total_download_count
-                  )} downloads`}
-                  icon={<FontAwesomeIcon icon={faDownload} />}
-                  colorScheme="accent"
-                  size="bold_large"
-                />,
+                >
+                  <NewIcon csMode="inline" noWrapper>
+                    <FontAwesomeIcon icon={faDownload} />
+                  </NewIcon>
+                  {formatInteger(community.total_download_count)}
+                  <span className="project-community__metaitem__text">
+                    downloads
+                  </span>
+                </div>,
                 community.discord_url ? (
-                  <a key="meta-link" href="{community.discord_url}">
-                    <Button.Root colorScheme="transparentPrimary">
-                      <Button.ButtonIcon>
-                        <FontAwesomeIcon icon={faDiscord} />
-                      </Button.ButtonIcon>
-                      <Button.ButtonLabel>
-                        Join our community
-                      </Button.ButtonLabel>
-                      <Button.ButtonIcon>
-                        <FontAwesomeIcon icon={faArrowUpRightFromSquare} />
-                      </Button.ButtonIcon>
-                    </Button.Root>
-                  </a>
+                  <NewLink
+                    primitiveType="link"
+                    href={community.discord_url}
+                    key="meta-link"
+                    csVariant="cyber"
+                    rootClasses="project-community__metalink"
+                  >
+                    <NewIcon csMode="inline" noWrapper>
+                      <FontAwesomeIcon icon={faDiscord} />
+                    </NewIcon>
+                    <span className="project-community__metaitem__text">
+                      Join our community
+                    </span>
+                    <NewIcon csMode="inline" noWrapper>
+                      <FontAwesomeIcon icon={faArrowUpRightFromSquare} />
+                    </NewIcon>
+                  </NewLink>
                 ) : null,
               ]}
             </div>

diff --git a/apps/cyberstorm-remix/app/commonComponents/CollapsibleText/CollapsibleText.module.css b/apps/cyberstorm-remix/app/commonComponents/CollapsibleText/CollapsibleText.module.css
@@ -0,0 +1,35 @@
+.root {
+  display: block;
+}
+
+.text {
+  overflow: hidden;
+  color: var(--color-text-tertiary);
+  font-weight: var(--font-weight-regular);
+  font-size: var(--font-size-body-lg);
+  line-height: var(--line-height-md);
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  text-shadow: 0 1px 1px #0d0d21;
+
+  /* white-space: pre-wrap; */
+}
+
+.opened {
+  white-space: normal;
+}
+
+.show {
+  color: var(--color-text-accent);
+  font-weight: var(--font-weight-bold);
+  font-size: var(--font-size-body-md);
+  line-height: normal;
+  background-color: transparent;
+}
+
+@media (width <= 30rem) {
+  .text {
+    font-size: var(--font-size-body-sm);
+    line-height: var(--line-height--s);
+  }
+}
diff --git a/...nents/CollapsibleText/CollapsibleText.tsx → ...nents/CollapsibleText/CollapsibleText.tsx b/...nents/CollapsibleText/CollapsibleText.tsx → ...nents/CollapsibleText/CollapsibleText.tsx
@@ -1,5 +1,5 @@
 "use client";
-import { classnames } from "../../utils/utils";
+import { classnames } from "@thunderstore/cyberstorm/src/utils/utils";
 import styles from "./CollapsibleText.module.css";
 import { ReactElement, useState } from "react";
 
@@ -9,9 +9,6 @@ export interface CollapsibleTextProps {
   meta?: ReactElement[];
 }
 
-/**
- * Cyberstorm CollapsibleText
- */
 export function CollapsibleText(props: CollapsibleTextProps) {
   const { text = "", maxLength = 80 } = props;