default dark and show links

appInfo.json

@@ -1,5 +1,7 @@
 {
   "copyright": "ELSOUL LABO B.V.",
   "twitterId": "@SkeetDev",
-  "domain": "skeet-v3-next-edge-rc.pages.dev"
+  "domain": "app.skeeter.dev",
+  "githubRepo": "elsoul/skeet-v3-next-edge-rc",
+  "discordInviteURL": "https://discord.gg/H2HeqRq54J"
 }

package.json

@@ -35,6 +35,10 @@
   "dependencies": {
     "@ai-sdk/openai": "0.0.24",
     "@auth/prisma-adapter": "2.1.0",
+    "@fortawesome/fontawesome-svg-core": "6.5.2",
+    "@fortawesome/free-brands-svg-icons": "6.5.2",
+    "@fortawesome/free-solid-svg-icons": "6.5.2",
+    "@fortawesome/react-fontawesome": "0.2.2",
     "@hookform/resolvers": "3.4.2",
     "@neondatabase/serverless": "0.9.3",
     "@prisma/adapter-d1": "5.14.0",

src/app/[locale]/(default)/layout.tsx

@@ -4,6 +4,11 @@ import { LanguageToggle } from '@/components/config/LanguageToggle'
 import { ModeToggle } from '@/components/config/ModeToggle'
 import { redirect } from '@/navigation'
 import { USER_PATHS } from '../user/userNavs'
+import {
+  DiscordIconLink,
+  GithubIconLink,
+  TwitterIconLink,
+} from '@/components/common/icons'
 
 type Props = {
   children: React.ReactNode
@@ -32,6 +37,11 @@ export default async function DefaultLayout({ children }: Props) {
             © {new Date().getFullYear()} {appInfo.copyright}
           </p>
           <div className="flex flex-grow" />
+          <div className="flex flex-row items-center gap-4">
+            <GithubIconLink />
+            <TwitterIconLink />
+            <DiscordIconLink />
+          </div>
         </footer>
       </div>
     </>

src/app/[locale]/layout.tsx

@@ -46,8 +46,8 @@ export default async function LocaleLayout({
       >
         <ThemeProvider
           attribute="class"
-          defaultTheme="system"
-          enableSystem
+          defaultTheme="dark"
+          enableSystem={false}
           disableTransitionOnChange
         >
           <NextIntlClientProvider messages={messages}>

src/app/config.ts

@@ -1,5 +1,4 @@
-export const logoUrl =
-  'https://pub-f5c1b877dd3a4b63aacd87ee9a480be9.r2.dev/SkeetLogoHorizontal.png'
+export const logoUrl = 'https://storage.skeet.dev/SkeetLogoHorizontal.png'
 
 export const locales = ['en', 'ja'] as const
 export const defaultLocale = 'en'

src/components/common/icons.tsx

@@ -0,0 +1,56 @@
+import appInfo from '@appInfo'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+
+import {
+  faDiscord,
+  faGithub,
+  faXTwitter,
+} from '@fortawesome/free-brands-svg-icons'
+
+export function GithubIconLink() {
+  return (
+    <a
+      href={`https://github.com/${appInfo.githubRepo}`}
+      className="hover:opacity-80"
+      rel="noopener noreferrer"
+      target="_blank"
+    >
+      <FontAwesomeIcon
+        icon={faGithub}
+        className="h-5 w-5 text-zinc-500 dark:text-zinc-300"
+      />
+    </a>
+  )
+}
+
+export function TwitterIconLink() {
+  return (
+    <a
+      href={`https://x.com/${appInfo.twitterId}`}
+      className="hover:opacity-80"
+      rel="noopener noreferrer"
+      target="_blank"
+    >
+      <FontAwesomeIcon
+        icon={faXTwitter}
+        className="h-5 w-5 text-zinc-500 dark:text-zinc-300"
+      />
+    </a>
+  )
+}
+
+export function DiscordIconLink() {
+  return (
+    <a
+      href={`${appInfo.discordInviteURL}`}
+      className="hover:opacity-80"
+      rel="noopener noreferrer"
+      target="_blank"
+    >
+      <FontAwesomeIcon
+        icon={faDiscord}
+        className="h-5 w-5 text-zinc-500 dark:text-zinc-300"
+      />
+    </a>
+  )
+}

src/components/config/ModeToggle.tsx

@@ -36,9 +36,9 @@ export function ModeToggle() {
         <DropdownMenuItem onClick={() => setTheme('dark')}>
           {t('common.darkMode')}
         </DropdownMenuItem>
-        <DropdownMenuItem onClick={() => setTheme('system')}>
+        {/* <DropdownMenuItem onClick={() => setTheme('system')}>
           {t('common.systemMode')}
-        </DropdownMenuItem>
+        </DropdownMenuItem> */}
       </DropdownMenuContent>
     </DropdownMenu>
   )