From cd4cadf23fd4d18cc5dc85d7654cd4173e076eb4 Mon Sep 17 00:00:00 2001
From: bd_ <bd_@nadena.dev>
Date: Sun, 29 Sep 2024 12:40:28 -0700
Subject: [PATCH] docs: add discord link

---
 docs~/src/css/custom.css  | 20 ++++++++++++++++++++
 docs~/src/pages/index.tsx | 29 ++++++++++++++++++-----------
 2 files changed, 38 insertions(+), 11 deletions(-)

diff --git a/docs~/src/css/custom.css b/docs~/src/css/custom.css
index c7fa3eb1..4ce92276 100644
--- a/docs~/src/css/custom.css
+++ b/docs~/src/css/custom.css
@@ -64,4 +64,24 @@
 img {
   aspect-ratio: auto;
   height: auto;
+}
+
+.discordLink {
+  display: block;
+  height: 2em;
+  object-fit: cover;
+  padding: 0.1em;
+}
+
+img.button {
+  /*aspect-ratio: auto;*/
+
+  height: 100%;
+  object-fit: cover;
+  padding: 0;
+  margin: 0;
+}
+
+.button-group + .button-group {
+  margin-top: 1em;
 }
\ No newline at end of file
diff --git a/docs~/src/pages/index.tsx b/docs~/src/pages/index.tsx
index 50dd02de..88796298 100644
--- a/docs~/src/pages/index.tsx
+++ b/docs~/src/pages/index.tsx
@@ -29,7 +29,7 @@ function HomepageHeader() {
         <p className="hero__subtitle">
             <Translate>Drag-and-Drop Avatar Assembly</Translate>
         </p>
-        <div className={styles.buttons}>
+        <div className={`button-group ${styles.buttons}`}>
           <InstallButton/>
           <Link
             className={`button button--secondary button--lg ${styles.button}`}
@@ -43,21 +43,28 @@ function HomepageHeader() {
             <Translate>Tutorials</Translate>
           </Link>
         </div>
+        <div className={`button-group ${styles.buttons}`}>
+            <a href={"https://discord.gg/dV4cVpewmM"} className={`discordLink`}>
+                <img className={`button button--lg ${styles.button}`}
+                     alt="Discord"
+                     src="https://img.shields.io/discord/1201675918956056627?style=flat-square&logo=Discord&logoColor=ffffff&logoSize=auto&label=Discord&color=%235865F2&cacheSeconds=60"/>
+            </a>
+        </div>
       </div>
     </header>
   );
 }
 
 export default function Home(): JSX.Element {
-  const {siteConfig} = useDocusaurusContext();
-  return (
-    <Layout
-      title={translate({message: 'Modular Avatar'})}
-      description={translate({message: "Drag-and-Drop Avatar Assembly"})}>
-      <HomepageHeader />
-      <main>
-          <HomepageFeatures />
-      </main>
-    </Layout>
+    const {siteConfig} = useDocusaurusContext();
+    return (
+        <Layout
+            title={translate({message: 'Modular Avatar'})}
+            description={translate({message: "Drag-and-Drop Avatar Assembly"})}>
+            <HomepageHeader/>
+            <main>
+                <HomepageFeatures/>
+            </main>
+        </Layout>
   );
 }