From 538d8593c9515427eb8da9cfaf6486bbc7ada118 Mon Sep 17 00:00:00 2001
From: Sacha Weatherstone <sachaw100@hotmail.com>
Date: Fri, 24 Dec 2021 13:17:40 +1100
Subject: [PATCH] Showcase Placeholder & Clean Footer

---
 docusaurus.config.js                       |  42 ---
 src/pages/showcase/_components/Card.tsx    |  21 +-
 src/pages/showcase/_components/Network.tsx | 331 +++++++++++++++++----
 3 files changed, 283 insertions(+), 111 deletions(-)

diff --git a/docusaurus.config.js b/docusaurus.config.js
index 7cdb75dd..a61b1e1e 100644
--- a/docusaurus.config.js
+++ b/docusaurus.config.js
@@ -63,48 +63,6 @@ const config = {
       ],
     },
     footer: {
-      style: "dark",
-      links: [
-        {
-          title: "Docs",
-          items: [
-            {
-              label: "Get Started",
-              to: "docs/getting-started",
-            },
-            {
-              label: "Showcase",
-              to: "showcase",
-            },
-          ],
-        },
-        {
-          title: "Community",
-          items: [
-            {
-              label: "Forum",
-              href: "https://meshtastic.discourse.group",
-            },
-            {
-              label: "Discord",
-              href: "https://discord.gg/UQJ5QuM7vq",
-            },
-          ],
-        },
-        {
-          title: "More",
-          items: [
-            {
-              label: "GitHub",
-              href: "https://github.com/meshtastic/meshtastic",
-            },
-            {
-              label: "Legal",
-              to: "docs/legal",
-            },
-          ],
-        },
-      ],
       copyright: `<a href="https://vercel.com/?utm_source=meshtastic&utm_campaign=oss" style="color: white">Powered by ▲ Vercel</a> | Meshtastic® trademark is a registered trademark belonging to Geeksville Industries LLC`,
     },
     algolia: {
diff --git a/src/pages/showcase/_components/Card.tsx b/src/pages/showcase/_components/Card.tsx
index e910f94f..c7396790 100644
--- a/src/pages/showcase/_components/Card.tsx
+++ b/src/pages/showcase/_components/Card.tsx
@@ -13,7 +13,9 @@ export interface CardProps {
 export const Card = React.memo(({ network }: CardProps) => (
   <div className="card">
     <div className="card__image">
-      <Image img={mapUrl(network.nodes ?? [])} alt={network.title} />
+      <div style={{ height: "140px" }}>
+        <Image img={mapUrl(network.nodes ?? [])} alt={network.title} />
+      </div>
     </div>
     <div className="card__body">
       <h4>{network.title}</h4>
@@ -43,7 +45,7 @@ export const PlaceholderCard = (): JSX.Element => (
     <div className="card__image">
       <div
         style={{
-          height: "150px",
+          height: "140px",
         }}
       />
     </div>
@@ -82,7 +84,20 @@ export const PlaceholderCard = (): JSX.Element => (
       >
         &nbsp;
       </a>
-      <div>
+      <div
+        style={{
+          display: "flex",
+          gap: "0.5rem",
+        }}
+      >
+        <div
+          style={{
+            width: "4rem",
+            height: "1.5rem",
+            borderRadius: "0.4rem",
+            backgroundColor: "gray",
+          }}
+        />
         <div
           style={{
             width: "4rem",
diff --git a/src/pages/showcase/_components/Network.tsx b/src/pages/showcase/_components/Network.tsx
index f7c02af0..d40f8013 100644
--- a/src/pages/showcase/_components/Network.tsx
+++ b/src/pages/showcase/_components/Network.tsx
@@ -25,99 +25,298 @@ export const Network = ({ id }: NetworkProps): JSX.Element => {
     fetcher
   ).data;
 
-  return data && !error ? (
-    <div className="container">
-      <h1>{data.title}</h1>
-      <p>{data.summary}</p>
-      {githubData && (
-        <div className="avatar">
-          <img
-            src={githubData.avatar_url}
-            alt={githubData.name}
-            className="avatar__photo"
-          />
-          <div className="avatar__intro">
-            <div className="avatar__name">{githubData.name}</div>
-            <div className="avatar__subtitle">{githubData.bio}</div>
+  return true ? (
+    <PlaceholderNetwork />
+  ) : (
+    <div>
+      <a className="button button--outline button--secondary" href="/showcase">
+        Back
+      </a>
+
+      {data && !error ? (
+        <div className="container">
+          <h1>{data.title}</h1>
+          <p>{data.summary}</p>
+          {githubData && (
+            <div className="avatar">
+              <img
+                src={githubData.avatar_url}
+                alt={githubData.name}
+                className="avatar__photo"
+              />
+              <div className="avatar__intro">
+                <div className="avatar__name">{githubData.name}</div>
+                <div className="avatar__subtitle">{githubData.bio}</div>
+              </div>
+            </div>
+          )}
+          <div className="markdown">{data.body}</div>
+
+          <div
+            className="card"
+            style={{
+              marginLeft: "auto",
+              marginRight: "auto",
+              maxWidth: "900px",
+            }}
+          >
+            <div
+              className="card__header"
+              style={{
+                margin: "8px",
+              }}
+            >
+              <h2>Bill of Materials</h2>
+            </div>
+            <div className="card__body">
+              {data.materials?.map((material, index) => (
+                <div
+                  key={index}
+                  style={{
+                    borderTop: "2px solid gray",
+                    display: "flex",
+                  }}
+                >
+                  <div
+                    style={{
+                      width: "4rem",
+                      display: "flex",
+                    }}
+                  >
+                    <img
+                      src={material.image}
+                      height="auto"
+                      width="100%"
+                      style={{
+                        margin: "auto",
+                        padding: "4px",
+                        display: "block",
+                        maxWidth: "60px",
+                        maxHeight: "60px",
+                        width: "auto",
+                        height: "auto",
+                      }}
+                    />
+                  </div>
+                  <div className="avatar__intro">
+                    <div className="avatar__name">{material.name}</div>
+                    <small className="avatar__subtitle">
+                      {material.details}
+                    </small>
+                  </div>
+                  <a
+                    target="_blank"
+                    href={material.url}
+                    className="button button--outline button--secondary"
+                    style={{
+                      marginTop: "auto",
+                      marginBottom: "auto",
+                    }}
+                  >
+                    View
+                  </a>
+                </div>
+              ))}
+            </div>
           </div>
         </div>
+      ) : (
+        <div>
+          {error && (
+            <div>
+              <JSONPretty data={error} />
+            </div>
+          )}
+          {!data && <div>Loading...</div>}
+        </div>
       )}
-      <div className="markdown">{data.body}</div>
+    </div>
+  );
+};
 
+export const PlaceholderNetwork = (): JSX.Element => {
+  return (
+    <div className="container" style={{ display: "flex", gap: "2rem" }}>
       <div
-        className="card"
         style={{
-          marginLeft: "auto",
-          marginRight: "auto",
-          maxWidth: "900px",
+          width: "60%",
         }}
       >
         <div
-          className="card__header"
+          className="card"
           style={{
-            margin: "8px",
+            width: "100%",
+            animation: "pulse 2s infinite",
+            transform: "scale(1)",
+            display: "flex",
+            flexDirection: "column",
+            gap: "2rem",
+            padding: "2rem",
           }}
         >
-          <h2>Bill of Materials</h2>
-        </div>
-        <div className="card__body">
-          {data.materials?.map((material, index) => (
+          <div
+            style={{
+              borderRadius: "0.4rem",
+              backgroundColor: "gray",
+              height: "4rem",
+            }}
+          />
+          <div
+            style={{
+              borderRadius: "0.4rem",
+              backgroundColor: "gray",
+              height: "12rem",
+            }}
+          />
+          <div style={{ display: "flex", gap: "1rem" }}>
+            <div
+              style={{
+                borderRadius: "999px",
+                backgroundColor: "gray",
+                height: "4rem",
+                width: "4rem",
+                minWidth: "4rem",
+              }}
+            />
             <div
-              key={index}
               style={{
-                borderTop: "2px solid gray",
                 display: "flex",
+                flexDirection: "column",
+                gap: "1rem",
+                width: "100%",
               }}
             >
               <div
                 style={{
-                  width: "4rem",
-                  display: "flex",
+                  width: "100%",
+                  borderRadius: "0.4rem",
+                  backgroundColor: "gray",
+                  height: "1rem",
                 }}
-              >
-                <img
-                  src={material.image}
-                  height="auto"
-                  width="100%"
-                  style={{
-                    margin: "auto",
-                    padding: "4px",
-                    display: "block",
-                    maxWidth: "60px",
-                    maxHeight: "60px",
-                    width: "auto",
-                    height: "auto",
-                  }}
-                />
-              </div>
-              <div className="avatar__intro">
-                <div className="avatar__name">{material.name}</div>
-                <small className="avatar__subtitle">{material.details}</small>
-              </div>
-              <a
-                target="_blank"
-                href={material.url}
-                className="button button--outline button--secondary"
+              />
+              <div
                 style={{
-                  marginTop: "auto",
-                  marginBottom: "auto",
+                  width: "100%",
+                  borderRadius: "0.4rem",
+                  backgroundColor: "gray",
+                  height: "2rem",
                 }}
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        style={{
+          width: "40%",
+        }}
+      >
+        <div
+          className="card"
+          style={{
+            width: "100%",
+            animation: "pulse 2s infinite",
+            transform: "scale(1)",
+            display: "flex",
+            flexDirection: "column",
+            gap: "2rem",
+            padding: "2rem",
+          }}
+        >
+          <div
+            style={{
+              borderRadius: "0.4rem",
+              backgroundColor: "gray",
+              height: "12rem",
+            }}
+          />
+          <div
+            style={{
+              borderRadius: "0.4rem",
+              backgroundColor: "gray",
+              height: "2rem",
+            }}
+          />
+          <div style={{ display: "flex", gap: "0.5rem" }}>
+            <div
+              style={{
+                width: "7rem",
+                height: "1.8rem",
+                borderRadius: "0.4rem",
+                backgroundColor: "gray",
+              }}
+            />
+            <div
+              style={{
+                width: "7rem",
+                height: "1.8rem",
+                borderRadius: "0.4rem",
+                backgroundColor: "gray",
+              }}
+            />
+            <div
+              style={{
+                width: "7rem",
+                height: "1.8rem",
+                borderRadius: "0.4rem",
+                backgroundColor: "gray",
+              }}
+            />
+          </div>
+          <div
+            style={{ display: "flex", flexDirection: "column", gap: "1rem" }}
+          >
+            <div style={{ display: "flex", gap: "1rem" }}>
+              <div
+                style={{
+                  borderRadius: "0.4rem",
+                  backgroundColor: "gray",
+                  height: "2.5rem",
+                  width: "20%",
+                }}
+              />
+              <div
+                style={{
+                  borderRadius: "0.4rem",
+                  backgroundColor: "gray",
+                  height: "2.5rem",
+                  width: "60%",
+                }}
+              />
+              <a
+                className="button disabled button--primary button--block"
+                style={{ width: "20%" }}
               >
-                View
+                &nbsp;
               </a>
             </div>
-          ))}
+            <div style={{ display: "flex", gap: "1rem" }}>
+              <div
+                style={{
+                  borderRadius: "0.4rem",
+                  backgroundColor: "gray",
+                  height: "2.5rem",
+                  width: "20%",
+                }}
+              />
+              <div
+                style={{
+                  borderRadius: "0.4rem",
+                  backgroundColor: "gray",
+                  height: "2.5rem",
+                  width: "60%",
+                }}
+              />
+              <a
+                className="button disabled button--primary button--block"
+                style={{ width: "20%" }}
+              >
+                &nbsp;
+              </a>
+            </div>
+          </div>
         </div>
       </div>
     </div>
-  ) : (
-    <div>
-      {error && (
-        <div>
-          <JSONPretty data={error} />
-        </div>
-      )}
-      {!data && <div>Loading...</div>}
-    </div>
   );
 };