feat: initial commit

src/app/(pages)/about/page.tsx

@@ -0,0 +1,12 @@
+import { siteConfig } from '@/site.config';
+
+const Home = async () => {
+    return (
+        <div className='flex flex-col items-center justify-center'>
+            <h1 className='mb-4 text-4xl font-bold'>About</h1>
+            <p className='text-lg'>Welcome {siteConfig.name}!</p>
+        </div>
+    );
+};
+
+export default Home;

src/app/(pages)/admin/page.tsx

@@ -0,0 +1,12 @@
+import { siteConfig } from '@/site.config';
+
+const Home = async () => {
+    return (
+        <div className='flex flex-col items-center justify-center'>
+            <h1 className='mb-4 text-4xl font-bold'>Admin</h1>
+            <p className='text-lg'>Welcome {siteConfig.name}!</p>
+        </div>
+    );
+};
+
+export default Home;

src/app/(pages)/home/page.tsx

@@ -0,0 +1,12 @@
+import { siteConfig } from '@/site.config';
+
+const Home = async () => {
+    return (
+        <div className='flex flex-col items-center justify-center'>
+            <h1 className='mb-4 text-4xl font-bold'>Home</h1>
+            <p className='text-lg'>Welcome {siteConfig.name}!</p>
+        </div>
+    );
+};
+
+export default Home;

src/app/api/user/sync/route.ts

@@ -0,0 +1,22 @@
+import { SessionClaims } from '@/lib/feature/user/clerk.model';
+import { syncUser } from '@/lib/feature/user/user.service';
+import { setSessionData } from '@/lib/session/session-storage.internal';
+import { auth } from '@clerk/nextjs/server';
+import { redirect } from 'next/navigation';
+
+export async function GET() {
+    const { sessionClaims } = await auth();
+
+    let parsedClaims: SessionClaims;
+    try {
+        parsedClaims = SessionClaims.parse(sessionClaims);
+    } catch (error) {
+        console.error(error);
+        redirect('/');
+    }
+
+    const syncedUser = await syncUser(parsedClaims);
+
+    await setSessionData('user', syncedUser);
+    redirect('/');
+}

src/app/api/user/unload/route.ts

@@ -0,0 +1,7 @@
+import { clearSessionData } from '@/lib/session/session-storage';
+import { redirect } from 'next/navigation';
+
+export async function GET() {
+    await clearSessionData();
+    redirect('/');
+}

src/app/fonts.ts

@@ -0,0 +1,15 @@
+import { Montserrat, Source_Code_Pro } from 'next/font/google';
+
+export const montserrat = Montserrat({
+    display: 'swap',
+    variable: '--font-montserrat',
+    weight: ['400', '500', '600', '700'],
+    subsets: ['latin'],
+});
+
+export const sourceCodePro = Source_Code_Pro({
+    display: 'swap',
+    variable: '--font-source-code-pro',
+    weight: ['200', '300', '400', '500', '600'],
+    subsets: ['latin'],
+});

src/app/globals.css

@@ -0,0 +1,159 @@
+@import 'tailwindcss';
+@import 'tw-animate-css';
+@import 'shadcn/tailwind.css';
+
+html {
+    font-family: var(--font-source-code-pro), sans-serif;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+    @apply font-bold;
+    font-family: var(--font-montserrat), sans-serif;
+}
+
+@custom-variant dark (&:is(.dark *));
+
+@theme inline {
+    --color-background: var(--background);
+    --color-foreground: var(--foreground);
+    --font-sans: var(--font-sans);
+    --font-mono: var(--font-geist-mono);
+    --font-heading: var(--font-sans);
+    --color-sidebar-ring: var(--sidebar-ring);
+    --color-sidebar-border: var(--sidebar-border);
+    --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+    --color-sidebar-accent: var(--sidebar-accent);
+    --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+    --color-sidebar-primary: var(--sidebar-primary);
+    --color-sidebar-foreground: var(--sidebar-foreground);
+    --color-sidebar: var(--sidebar);
+    --color-chart-5: var(--chart-5);
+    --color-chart-4: var(--chart-4);
+    --color-chart-3: var(--chart-3);
+    --color-chart-2: var(--chart-2);
+    --color-chart-1: var(--chart-1);
+    --color-ring: var(--ring);
+    --color-input: var(--input);
+    --color-border: var(--border);
+    --color-destructive: var(--destructive);
+    --color-accent-foreground: var(--accent-foreground);
+    --color-accent: var(--accent);
+    --color-muted-foreground: var(--muted-foreground);
+    --color-muted: var(--muted);
+    --color-secondary-foreground: var(--secondary-foreground);
+    --color-secondary: var(--secondary);
+    --color-primary-foreground: var(--primary-foreground);
+    --color-primary: var(--primary);
+    --color-popover-foreground: var(--popover-foreground);
+    --color-popover: var(--popover);
+    --color-card-foreground: var(--card-foreground);
+    --color-card: var(--card);
+    --radius-sm: calc(var(--radius) * 0.6);
+    --radius-md: calc(var(--radius) * 0.8);
+    --radius-lg: var(--radius);
+    --radius-xl: calc(var(--radius) * 1.4);
+    --radius-2xl: calc(var(--radius) * 1.8);
+    --radius-3xl: calc(var(--radius) * 2.2);
+    --radius-4xl: calc(var(--radius) * 2.6);
+}
+
+:root {
+    --background: oklch(1 0 0);
+    --foreground: oklch(0.145 0 0);
+    --card: oklch(1 0 0);
+    --card-foreground: oklch(0.145 0 0);
+    --popover: oklch(1 0 0);
+    --popover-foreground: oklch(0.145 0 0);
+    --primary: oklch(0.205 0 0);
+    --primary-foreground: oklch(0.985 0 0);
+    --secondary: oklch(0.97 0 0);
+    --secondary-foreground: oklch(0.205 0 0);
+    --muted: oklch(0.97 0 0);
+    --muted-foreground: oklch(0.556 0 0);
+    --accent: oklch(0.97 0 0);
+    --accent-foreground: oklch(0.205 0 0);
+    --destructive: oklch(0.577 0.245 27.325);
+    --border: oklch(0.922 0 0);
+    --input: oklch(0.922 0 0);
+    --ring: oklch(0.708 0 0);
+    --chart-1: oklch(0.87 0 0);
+    --chart-2: oklch(0.556 0 0);
+    --chart-3: oklch(0.439 0 0);
+    --chart-4: oklch(0.371 0 0);
+    --chart-5: oklch(0.269 0 0);
+    --radius: 0.625rem;
+    --sidebar: oklch(0.985 0 0);
+    --sidebar-foreground: oklch(0.145 0 0);
+    --sidebar-primary: oklch(0.205 0 0);
+    --sidebar-primary-foreground: oklch(0.985 0 0);
+    --sidebar-accent: oklch(0.97 0 0);
+    --sidebar-accent-foreground: oklch(0.205 0 0);
+    --sidebar-border: oklch(0.922 0 0);
+    --sidebar-ring: oklch(0.708 0 0);
+}
+
+.dark {
+    --background: oklch(0.145 0 0);
+    --foreground: oklch(0.985 0 0);
+    --card: oklch(0.205 0 0);
+    --card-foreground: oklch(0.985 0 0);
+    --popover: oklch(0.205 0 0);
+    --popover-foreground: oklch(0.985 0 0);
+    --primary: oklch(0.922 0 0);
+    --primary-foreground: oklch(0.205 0 0);
+    --secondary: oklch(0.269 0 0);
+    --secondary-foreground: oklch(0.985 0 0);
+    --muted: oklch(0.269 0 0);
+    --muted-foreground: oklch(0.708 0 0);
+    --accent: oklch(0.269 0 0);
+    --accent-foreground: oklch(0.985 0 0);
+    --destructive: oklch(0.704 0.191 22.216);
+    --border: oklch(1 0 0 / 10%);
+    --input: oklch(1 0 0 / 15%);
+    --ring: oklch(0.556 0 0);
+    --chart-1: oklch(0.87 0 0);
+    --chart-2: oklch(0.556 0 0);
+    --chart-3: oklch(0.439 0 0);
+    --chart-4: oklch(0.371 0 0);
+    --chart-5: oklch(0.269 0 0);
+    --sidebar: oklch(0.205 0 0);
+    --sidebar-foreground: oklch(0.985 0 0);
+    --sidebar-primary: oklch(0.488 0.243 264.376);
+    --sidebar-primary-foreground: oklch(0.985 0 0);
+    --sidebar-accent: oklch(0.269 0 0);
+    --sidebar-accent-foreground: oklch(0.985 0 0);
+    --sidebar-border: oklch(1 0 0 / 10%);
+    --sidebar-ring: oklch(0.556 0 0);
+}
+
+@layer base {
+    * {
+        @apply border-border outline-ring/50;
+    }
+    body {
+        @apply bg-background text-foreground;
+    }
+    html {
+        @apply font-sans;
+    }
+}
+
+@layer components {
+    .header-height {
+        @apply h-[8dvh] md:min-h-[60px];
+    }
+    .footer-height {
+        @apply md:h-24;
+    }
+    .page-height {
+        @apply min-h-[calc(100dvh-8dvh)];
+    }
+    .content-height {
+        @apply min-h-[calc(100dvh-8dvh-6rem)];
+    }
+}

src/app/layout.tsx

@@ -0,0 +1,66 @@
+import './globals.css';
+import { montserrat, sourceCodePro } from '@/app/fonts';
+import { siteConfig } from '@/site.config';
+import { SiteHeader } from '@/ui/components/internal/header/site-header';
+import { SiteFooter } from '@/ui/components/internal/site-footer';
+import { Toaster } from '@/ui/components/shadcn/sonner';
+import { Provider } from '@/ui/providers/providers';
+import { Analytics } from '@vercel/analytics/next';
+import type { Metadata, Viewport } from 'next';
+
+export const metadata: Metadata = {
+    title: siteConfig.name,
+    description: siteConfig.description,
+    openGraph: {
+        title: siteConfig.name,
+        description: siteConfig.description,
+        url: siteConfig.url,
+        siteName: siteConfig.name,
+        images: [
+            {
+                url: `${siteConfig.url}/${siteConfig.icon.lightPaths.x512}`,
+                width: 512,
+                height: 512,
+                alt: siteConfig.name,
+            },
+        ],
+    },
+};
+
+export const viewport: Viewport = {
+    themeColor: [
+        { media: '(prefers-color-scheme: light)', color: 'white' },
+        { media: '(prefers-color-scheme: dark)', color: 'black' },
+    ],
+};
+
+export default async function RootLayout({
+    children,
+}: Readonly<{ children: React.ReactNode }>) {
+    return (
+        <html
+            lang='en'
+            className={`${montserrat.className} ${sourceCodePro.className}`}
+            suppressHydrationWarning
+        >
+            <body className={'relative h-screen bg-background antialiased'}>
+                <Provider
+                    attribute='class'
+                    defaultTheme='system'
+                    enableSystem
+                    disableTransitionOnChange
+                >
+                    <div className='h-full flex flex-col bg-background'>
+                        <SiteHeader />
+                        <div className='content-height flex flex-col items-center justify-center'>
+                            {children}
+                        </div>
+                        <SiteFooter />
+                        <Toaster />
+                        <Analytics />
+                    </div>
+                </Provider>
+            </body>
+        </html>
+    );
+}