update site footer

.env.example

@@ -6,6 +6,8 @@
 NEXT_PUBLIC_APP_NAME=Proselog
 NEXT_PUBLIC_OUR_DOMAIN=localhost:3000
 NEXT_PUBLIC_R2_URL=https://r2.egoist.workers.dev
+NEXT_PUBLIC_DISCORD_LINK="https://discord.gg/ucBPN7brXf"
+NEXT_PUBLIC_GITHUB_LINK="https://github.com/proselog/proselog"
 
 #############################################################
 #### Followings are runtime secrets set via Fly CLI

package.json

@@ -65,7 +65,9 @@
     "use-onclickoutside": "^0.4.0",
     "uuid": "^8.3.2",
     "zod": "^3.15.1",
-    "zustand": "4.0.0-rc.1"
+    "zustand": "4.0.0-rc.1",
+    "@iconify/icons-mdi": "^1.2.15",
+    "@iconify/react": "^3.2.1"
   },
   "devDependencies": {
     "@playwright/test": "^1.22.1",

pnpm-lock.yaml

@@ -8,6 +8,8 @@ specifiers:
   '@codemirror/view': ^0.20.3
   '@hapi/iron': ^6.0.0
   '@headlessui/react': ^1.6.0
+  '@iconify/icons-mdi': ^1.2.15
+  '@iconify/react': ^3.2.1
   '@playwright/test': ^1.22.1
   '@prisma/client': ^3.14.0
   '@proselog/jwt': ^0.1.1
@@ -86,6 +88,8 @@ dependencies:
   '@codemirror/view': 0.20.4
   '@hapi/iron': 6.0.0
   '@headlessui/react': 1.6.1_ef5jwxihqo6n7gxfmzogljlgcm
+  '@iconify/icons-mdi': 1.2.15
+  '@iconify/react': 3.2.1
   '@prisma/client': 3.14.0_prisma@3.14.0
   '@proselog/jwt': 0.1.1
   '@trpc/client': 9.23.2_@trpc+server@9.23.2
@@ -514,6 +518,19 @@ packages:
     resolution: {integrity: sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA==}
     dev: true
 
+  /@iconify/icons-mdi/1.2.15:
+    resolution: {integrity: sha512-cpmRpW3AOou6+WN16QQwSAlv1seD1m7iqoO8JP+igHeZbUsx9e1FJbfPPUixhsdBBJtEYAnVAauMH+3VyXLFRw==}
+    dependencies:
+      '@iconify/types': 1.1.0
+    dev: false
+
+  /@iconify/react/3.2.1:
+    resolution: {integrity: sha512-yKzixjC9ct9RC/aSGo1OGxkG2rpfhlr/urRz6k2YZlIBzn92PBTlqtSx8o8dFYEorr3eUFSCBZFzBy1yw5jsAA==}
+    dev: false
+
+  /@iconify/types/1.1.0:
+    resolution: {integrity: sha512-Jh0llaK2LRXQoYsorIH8maClebsnzTcve+7U3rQUSnC11X4jtPnFuyatqFLvMxZ8MLG8dB4zfHsbPfuvxluONw==}
+
   /@jridgewell/gen-mapping/0.1.1:
     resolution: {integrity: sha512-sQXCasFk+U8lWYEe66WxRDOE9PjVz4vSM51fTu3Hw+ClTpUSQb718772vH3pyS5pShp6lvQM7SxgIDXXXmOX7w==}
     engines: {node: '>=6.0.0'}

src/components/main/MainLayout.tsx

@@ -1,23 +1,30 @@
-import Link from "next/link"
+import { Icon } from "@iconify/react"
+import discordIcon from "@iconify/icons-mdi/discord"
+import githubIcon from "@iconify/icons-mdi/github"
 import { logout } from "~/lib/auth.client"
-import { APP_DESCRIPTION, APP_NAME } from "~/lib/env"
+import { APP_DESCRIPTION, APP_NAME, GITHUB_LINK, OUR_DOMAIN } from "~/lib/env"
 import { useStore } from "~/lib/store"
-import { truthy } from "~/lib/utils"
 import { SEOHead } from "../common/SEOHead"
 import { UniLink } from "../ui/UniLink"
 
 export function MainLayout({
   isLoggedIn,
   children,
-  region,
   title,
 }: {
   isLoggedIn: boolean
   children?: React.ReactNode
-  region: string | null
   title?: string
 }) {
   const setLoginModalOpened = useStore((store) => store.setLoginModalOpened)
+  const docsDomain = `docs.${OUR_DOMAIN}`
+  const discordLink = `https://${OUR_DOMAIN}/discord`
+  const companyLinks = [
+    { text: "Blog", href: `https://blog.${OUR_DOMAIN}` },
+    { text: "Changelog", href: `https://changelog.${OUR_DOMAIN}` },
+    { text: "Privacy", href: `https://${docsDomain}/privacy.html` },
+    { text: "Terms", href: `https://${docsDomain}/terms.html` },
+  ]
 
   return (
     <>
@@ -64,12 +71,37 @@ export function MainLayout({
       </header>
       {children}
       <footer className="mt-10 text-sm font-medium text-zinc-500">
-        <div className="max-w-screen-md px-5 mx-auto">
-          <span>&copy; {APP_NAME}</span>
-          <span className="mx-3">·</span>
-          <span>
-            Region: <span className="uppercase">{region}</span>
-          </span>
+        <div className="max-w-screen-md px-5 mx-auto flex justify-between">
+          <div>
+            <span>&copy; {APP_NAME}</span>
+            <div className="text-zinc-400 mt-2 flex items-center space-x-1">
+              <UniLink href={discordLink}>
+                <Icon
+                  icon={discordIcon}
+                  className="w-5 h-5 hover:text-indigo-500"
+                />
+              </UniLink>
+              {GITHUB_LINK && (
+                <UniLink href={GITHUB_LINK}>
+                  <Icon
+                    icon={githubIcon}
+                    className="w-5 h-5 hover:text-zinc-900"
+                  />
+                </UniLink>
+              )}
+            </div>
+          </div>
+          <ul className="text-right text-zinc-400 transition-colors">
+            {companyLinks.map((link) => {
+              return (
+                <li key={link.text}>
+                  <UniLink href={link.href} className="hover:text-indigo-500">
+                    {link.text}
+                  </UniLink>
+                </li>
+              )
+            })}
+          </ul>
         </div>
       </footer>
     </>

src/lib/env.ts

@@ -5,3 +5,5 @@ export const OUR_DOMAIN = process.env.NEXT_PUBLIC_OUR_DOMAIN
 export const SITE_URL = `${IS_PROD ? "https" : "http"}://${OUR_DOMAIN}`
 export const R2_URL = process.env.NEXT_PUBLIC_R2_URL
 export const APP_DESCRIPTION = process.env.APP_DESCRIPTION
+export const DISCORD_LINK = process.env.NEXT_PUBLIC_DISCORD_LINK
+export const GITHUB_LINK = process.env.NEXT_PUBLIC_GITHUB_LINK

src/pages/_middleware.ts

@@ -1,5 +1,6 @@
 import { NextRequest, NextResponse } from "next/server"
 import { IS_PROD } from "~/lib/constants"
+import { DISCORD_LINK } from "~/lib/env"
 import { FLY_REGION, IS_PRIMARY_REGION, PRIMARY_REGION } from "~/lib/env.server"
 import { getTenant } from "~/lib/tenant.server"
 
@@ -39,5 +40,9 @@ export default function middleware(req: NextRequest) {
     return NextResponse.rewrite(url)
   }
 
+  if (DISCORD_LINK && pathname === "/discord") {
+    return NextResponse.redirect(DISCORD_LINK)
+  }
+
   return NextResponse.next()
 }

src/pages/index.tsx

@@ -1,4 +1,5 @@
 import { GetServerSideProps } from "next"
+import { useEffect } from "react"
 import { DashboardIcon } from "~/components/icons/DashboardIcon"
 import { MainLayout } from "~/components/main/MainLayout"
 import { UniLink } from "~/components/ui/UniLink"
@@ -27,8 +28,12 @@ export default function Home({
 }) {
   const setLoginModalOpened = useStore((store) => store.setLoginModalOpened)
 
+  useEffect(() => {
+    console.log("-> region", region)
+  }, [region])
+
   return (
-    <MainLayout isLoggedIn={isLoggedIn} region={region}>
+    <MainLayout isLoggedIn={isLoggedIn}>
       <section>
         <div className="max-w-screen-md px-5 mx-auto">
           <div className="bg-zinc-50 rounded-xl p-10">