feat: add contributor page, new universal footer

daveschumaker · Oct 23, 2023 · 4e2b5bf · 4e2b5bf
1 parent ffe518f
commit 4e2b5bf
Show file tree

Hide file tree

Showing 11 changed files with 358 additions and 89 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,8 @@
+# 2023.10.23
+
+- Some behind the scenes cleanup. (Creating some React providers that can better handle input and manage various error states).
+- Added a [privacy policy](/privacy).
+
 # 2023.10.17
 
 - Fix some annoying behavior with custom aspect ratios and the image orientation dropdown.

diff --git a/app/(default-route-group)/contributors/page.tsx b/app/(default-route-group)/contributors/page.tsx
@@ -0,0 +1,18 @@
+import { baseHost, basePath } from 'BASE_PATH'
+import ContributorsPage from 'app/_pages/ContributorsPage'
+import { Metadata } from 'next'
+
+export const metadata: Metadata = {
+  title: 'Contributors - ArtBot for Stable Diffusion',
+  openGraph: {
+    title: 'ArtBot - Awesome Contributors',
+    images: [`${baseHost}${basePath}/robots_coding.jpg`]
+  },
+  twitter: {
+    images: `${baseHost}${basePath}/robots_coding.jpg`
+  }
+}
+
+export default function Page() {
+  return <ContributorsPage />
+}
diff --git a/app/_components/Footer/component.module.css b/app/_components/Footer/component.module.css
diff --git a/app/_components/Footer/index.tsx b/app/_components/Footer/index.tsx
diff --git a/app/_components/FooterV2/footer.module.css b/app/_components/FooterV2/footer.module.css
@@ -0,0 +1,62 @@
+.Footer {
+  background-color: grey;
+  color: white;
+  display: flex;
+  flex-direction: column;
+  padding: 16px;
+  padding-bottom: 66px;
+  width: 100%;
+}
+
+.SectionsWrapper {
+  column-gap: 32px;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  row-gap: 32px;
+}
+
+.Section {
+  display: flex;
+  flex-direction: column;
+  font-size: 14px;
+  gap: 4px;
+  margin-right: 8px;
+  overflow-wrap: break-word;
+  width: 160px;
+}
+
+.SectionTitle {
+  font-weight: 700;
+}
+
+.AboutWrapper {
+  margin-top: 32px;
+  padding-bottom: 16px;
+  text-align: center;
+}
+
+@media (min-width: 640px) {
+  .AboutWrapper {
+    padding-bottom: 0;
+  }
+
+  .Footer {
+    justify-content: center;
+    padding-bottom: 16px;
+  }
+
+  .SectionsWrapper {
+    flex-direction: row;
+  }
+}
+
+@media (min-width: 800px) {
+  .Footer {
+    padding-left: 236px;
+  }
+
+  .NoPadding {
+    padding-left: 16px;
+  }
+}
diff --git a/app/_components/FooterV2/index.tsx b/app/_components/FooterV2/index.tsx
@@ -0,0 +1,146 @@
+'use client'
+import Link from 'next/link'
+import styles from './footer.module.css'
+import Linker from '../Linker'
+import { usePathname } from 'next/navigation'
+import clsx from 'clsx'
+
+export default function FooterV2() {
+  const pathname = usePathname()
+
+  const isHomePage = pathname === '/'
+
+  return (
+    <div className={clsx(styles.Footer, isHomePage && styles.NoPadding)}>
+      <div className={styles.SectionsWrapper}>
+        <div className={styles.Section}>
+          <div className={styles.SectionTitle}>Creation Tools</div>
+          <div>
+            <Link href="/create">Create new image</Link>
+          </div>
+          <div>
+            <Link href="/controlnet">ControlNet</Link>
+          </div>
+          <div>
+            <Link href="/draw">Draw</Link>
+          </div>
+          <div>
+            <Link href="/create?panel=img2img">Image-to-image</Link>
+          </div>
+          <div>
+            <Link href="/create?panel=inpainting">Inpainting</Link>
+          </div>
+          <div>
+            <Link href="/live-paint">Live paint</Link>
+          </div>
+        </div>
+        <div className={styles.Section}>
+          <div className={styles.SectionTitle}>Image gallery</div>
+          <div>
+            <Link href="/pending">Pending image requests</Link>
+          </div>
+          <div>
+            <Link href="/images">View image gallery</Link>
+          </div>
+        </div>
+        <div className={styles.Section}>
+          <div className={styles.SectionTitle}>General info</div>
+          <div>
+            <Link href="/info/models">Model details</Link>
+          </div>
+          <div>
+            <Link href="/info/models/updates">Model updates</Link>
+          </div>
+          <div>
+            <Link href="/info/workers">Worker details</Link>
+          </div>
+        </div>
+        <div className={styles.Section}>
+          <div className={styles.SectionTitle}>Utilities</div>
+          <div>
+            <Link href="/settings?panel=import-export">Export images</Link>
+          </div>
+          <div>
+            <Link href="/interrogate">Interrogate image</Link>
+          </div>
+          <div>
+            <Link href="/settings?panel=worker">Manage workers</Link>
+          </div>
+          <div>
+            <Link href="/rate">Rate images</Link>
+          </div>
+          <div>
+            <Link href="/profile">User profile</Link>
+          </div>
+        </div>
+        <div className={styles.Section}>
+          <div className={styles.SectionTitle}>Community</div>
+          <div>
+            <Link href="/showcase">Image showcase</Link>
+          </div>
+        </div>
+        <div className={styles.Section}>
+          <div className={styles.SectionTitle}>Contact</div>
+          <div>
+            <Link href="https://discord.com/channels/781145214752129095/1107628882783391744">
+              Discord
+            </Link>
+          </div>
+          <div>
+            <Link href="https://github.com/daveschumaker/artbot-for-stable-diffusion/issues">
+              Github issues
+            </Link>
+          </div>
+          <div>
+            <Link href="https://mastodon.world/@davely">Mastodon</Link>
+          </div>
+          <div>
+            <Link href="/contact">Send message</Link>
+          </div>
+        </div>
+        <div className={styles.Section}>
+          <div className={styles.SectionTitle}>ArtBot</div>
+          <div>
+            <Link href="/about">About</Link>
+          </div>
+          <div>
+            <Link href="/changelog">Changelog</Link>
+          </div>
+          <div>
+            <Link href="/contributors">Contributors</Link>
+          </div>
+          <div>
+            <Link href="/faq">FAQ</Link>
+          </div>
+          <div>
+            <Link href="https://github.com/daveschumaker/artbot-for-stable-diffusion">
+              Github
+            </Link>
+          </div>
+          <div>
+            <Link href="'/settings?panel=prefs">Preferences</Link>
+          </div>
+          <div>
+            <Link href="/privacy">Privacy policy</Link>
+          </div>
+          <div>
+            <Link href="'/settings">Settings</Link>
+          </div>
+        </div>
+      </div>
+      <div className={styles.AboutWrapper}>
+        <div>
+          ArtBot is created with ❤️ , ☕️ and ☀️ by{' '}
+          <Linker
+            href="https://mastodon.world/@davely"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            @davely
+          </Linker>{' '}
+          in California.
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/app/_modules/FixedMenu/fixedMenu.module.css b/app/_modules/FixedMenu/fixedMenu.module.css
@@ -1,4 +1,5 @@
 .FixedMenu {
+  background-color: var(--body-color);
   border-right: 1px solid black;
   bottom: 0;
   display: none;
@@ -44,4 +45,4 @@
     width: 219px;
     position: fixed;
   }
-}
+}
diff --git a/app/_pages/ContributorsPage/index.tsx b/app/_pages/ContributorsPage/index.tsx
@@ -0,0 +1,69 @@
+'use client'
+
+/* eslint-disable @next/next/no-img-element */
+import Head from 'next/head'
+import PageTitle from 'app/_components/PageTitle'
+import { baseHost, basePath } from 'BASE_PATH'
+import Linker from 'app/_components/Linker'
+
+const ContributorsPage = () => {
+  return (
+    <>
+      <Head>
+        <title>Awesome Contributors - ArtBot for Stable Diffusion</title>
+        <meta name="twitter:title" content="ArtBot - Awesome Contributors" />
+        <meta
+          name="twitter:image"
+          content={`${baseHost}${basePath}/robots_coding.jpg`}
+        />
+      </Head>
+      <PageTitle>Awesome Contributors</PageTitle>
+      <div className="pb-2">
+        <img
+          src={`${basePath}/robots_coding.jpg`}
+          alt="painting of a robot painting robots"
+        />
+      </div>
+      <div className="pb-2">
+        ArtBot is a passion project originally created by{' '}
+        <Linker
+          href="https://daveschumaker.net/"
+          target="_blank"
+          rel="noreferrer"
+        >
+          Dave Schumaker
+        </Linker>{' '}
+        and first launched in October 2022.
+      </div>
+      <div className="pb-2">
+        Since then, a number of people have contributed their knowledge and
+        coding abilities to help improve ArtBot. I am immensely grateful.
+        Special thanks and shout outs to:
+      </div>
+      <div className="pb-2">
+        <ul>
+          <li>- aurror</li>
+          <li>- brimstone</li>
+          <li>- Cubox</li>
+          <li>- Efreak</li>
+          <li>- FredHappyface</li>
+          <li>- Litnine</li>
+          <li>- tijszwinkels</li>
+          <li>- voodoocode</li>
+          <li>- WuKaiYi</li>
+        </ul>
+      </div>
+      <div className="pb-2">
+        Are you interested in helping improve ArtBot? Feel free to open a
+        feature request or start slinging some code. Contributions are always
+        welcome. Check out{' '}
+        <Linker href="https://aihorde.net/" target="_blank" rel="noreferrer">
+          ArtBot on Github
+        </Linker>
+        .
+      </div>
+    </>
+  )
+}
+
+export default ContributorsPage