Merge pull request #65 from websitesieutoc/big-fixes

Big fixes

.env.example

@@ -2,20 +2,16 @@ NEXTAUTH_SECRET=topsecret
 ARGON_SECRET=topsecret
 
 # Mandatory next-auth URL for localhost
-NEXTAUTH_URL=http://app.localhost:3000
+NEXTAUTH_URL=http://localhost:3000
 
-NEXT_PUBLIC_ROOT_DOMAIN=localhost:3000
-
 # For Docker
 POSTGRES_PORT=5433
 POSTGRES_DB=postgres
 POSTGRES_USER=postgres
 POSTGRES_PASSWORD=password
 
 # PostgreSQL database URL – get one here: https://vercel.com/docs/storage/vercel-postgres/quickstart
-POSTGRES_URL="postgres://${POSTGRES_USER}:${POSTGRES_PASSWORD}@localhost:${POSTGRES_PORT}/${POSTGRES_DB}?schema=public"
-POSTGRES_PRISMA_URL="${POSTGRES_URL}?pgbouncer=true&connect_timeout=15"
-POSTGRES_URL_NON_POOLING="${POSTGRES_URL}"
+DATABASE_URL="postgres://${POSTGRES_USER}:${POSTGRES_PASSWORD}@localhost:${POSTGRES_PORT}/${POSTGRES_DB}?schema=public"
 
 # Vercel Blob Storage for image uploads – currently in beta, please fill out this form for access: https://tally.so/r/nPDMNd. Setup instructions: https://vercel.com/docs/storage/vercel-blob/quickstart
 BLOB_READ_WRITE_TOKEN=asfdasdf

.github/workflows/code-checking.yaml

@@ -33,7 +33,7 @@ jobs:
         run: pnpm i --frozen-lockfile
 
       - name: Linting
-        run: pnpm run lint
+        run: pnpm lint
 
       - name: Checking TypeScript
-        run: pnpm run typecheck
+        run: pnpm typecheck

.github/workflows/prisma-production.yaml

@@ -38,7 +38,6 @@ jobs:
         run: pnpm i --frozen-lockfile
 
       - name: Deploy Migrations
-        run: pnpm run prisma:deploy
+        run: pnpm prisma migrate deploy
         env:
-          POSTGRES_PRISMA_URL: ${{ secrets.POSTGRES_PRISMA_URL }}
-          POSTGRES_URL_NON_POOLING: ${{ secrets.POSTGRES_URL_NON_POOLING }}
+          DATABASE_URL: ${{ secrets.DATABASE_URL }}

app/app/(auth)/layout.tsx → app/(auth)/layout.tsx

@@ -3,7 +3,7 @@ import type { Metadata } from 'next';
 import type { ReactNode } from 'react';
 
 export const metadata: Metadata = {
-  title: 'Login | Website Sieutoc',
+  title: 'Login | Sieutoc Platform',
 };
 
 export default function AuthLayout({ children }: { children: ReactNode }) {

app/app/(auth)/login/login-button.tsx → app/(auth)/login/login-button.tsx

@@ -34,6 +34,7 @@ export default function LoginButton() {
       isLoading={isLoading}
       leftIcon={<GithubIcon />}
       size="lg"
+      colorScheme="yellow"
       loadingText="Login with GitHub"
       onClick={() => {
         setLoading(true);

app/(dashboard)/components/Navbar/index.tsx

@@ -0,0 +1,90 @@
+'use client';
+
+import { Box, Button, Flex, Stack, useColorModeValue } from '@/components/chakra';
+import { useParams, useSelectedLayoutSegments } from 'next/navigation';
+import { ReactNode, useMemo } from 'react';
+import { ArrowBackIcon, BarChartIcon, DashboardIcon, GlobeIcon } from '@/icons';
+
+import { ColorModeSwitcher, NextLink, NextImage } from '@/components/client';
+
+export const Navbar = ({ children }: { children: ReactNode }) => {
+  const segments = useSelectedLayoutSegments();
+  const { id } = useParams() as { id?: string };
+
+  const tabs = useMemo(() => {
+    if (segments[0] === 'sites' && id) {
+      return [
+        {
+          name: 'Back to All Sites',
+          href: '/sites',
+          icon: <ArrowBackIcon boxSize={4} />,
+        },
+        {
+          name: 'General',
+          href: `/sites/${id}`,
+          icon: <DashboardIcon boxSize={4} />,
+          isActive: !segments[2],
+        },
+      ];
+    }
+
+    return [
+      {
+        name: 'Overview',
+        href: '/',
+        isActive: segments.length === 0,
+        icon: <BarChartIcon boxSize={4} />,
+      },
+      {
+        name: 'Sites',
+        href: '/sites',
+        isActive: segments[0] === 'sites',
+        icon: <GlobeIcon boxSize={4} />,
+      },
+    ];
+  }, [segments, id]);
+
+  const backgroundColor = useColorModeValue('white', 'black');
+  const logoPath = useColorModeValue('/light.png', '/dark.png');
+
+  return (
+    <Flex
+      direction="column"
+      width={{ sm: '240px', lg: '420px' }}
+      height="100vh"
+      justify="space-between"
+      background={backgroundColor}
+      padding={4}
+    >
+      <Box>
+        <Flex direction="row" justify="space-between" align="end">
+          <NextLink href="/">
+            <NextImage priority src={logoPath} width={128} height={37} alt="Logo" />
+          </NextLink>
+
+          <ColorModeSwitcher size="sm" />
+        </Flex>
+
+        <Stack marginTop={6} spacing={1}>
+          {tabs.map(({ name, href, icon, isActive }) => (
+            <Button
+              key={name}
+              colorScheme={isActive ? 'green' : 'gray'}
+              variant={isActive ? 'solid' : 'ghost'}
+              justifyContent="start"
+              leftIcon={icon}
+              width="100%"
+              as={NextLink}
+              href={href}
+              size="sm"
+            >
+              {name}
+            </Button>
+          ))}
+        </Stack>
+      </Box>
+
+      <Box>{children}</Box>
+    </Flex>
+  );
+};

components/server/Profile/index.tsx → app/(dashboard)/components/Profile/index.tsx

@@ -15,17 +15,15 @@ export const Profile = async () => {
 
   const { name, image, email } = session.user;
 
+  const displayName = name ?? email ?? '';
+
   return (
     <Flex direction="row" align="center" justify="space-between">
       <NextLink href="/profile">
         <Stack direction="row">
-          <Avatar
-            size="xs"
-            name={name ?? 'User avatar'}
-            src={image ?? `https://avatar.vercel.sh/${email}`}
-          />
+          <Avatar size="xs" name={displayName} src={image ?? ''} />
 
-          <Text>{name ?? 'Unnamed'}</Text>
+          <Text>{displayName}</Text>
         </Stack>
       </NextLink>
 

app/(dashboard)/components/index.ts

@@ -0,0 +1,2 @@
+export * from './Navbar';
+export * from './Profile';

app/app/(dashboard)/layout.tsx → app/(dashboard)/layout.tsx

@@ -1,8 +1,7 @@
 import { ReactNode, Suspense } from 'react';
-import { Box, Flex, Skeleton } from '@/components/chakra';
 
-import { Profile } from '@/components/server';
-import { Navbar } from '@/components/client';
+import { Box, Flex, Skeleton } from '@/components/chakra';
+import { Navbar, Profile } from './components';
 
 export default function DashboardLayout({ children }: { children: ReactNode }) {
   return (

app/(dashboard)/page.tsx

@@ -0,0 +1,29 @@
+import { Flex, Heading } from '@/components/chakra';
+import { NextImage } from '@/components/client';
+
+export default function Overview() {
+  return (
+    <Flex width="100%" direction="column" gap={6}>
+      <Flex
+        width="100%"
+        height="48px"
+        direction="row"
+        justify="space-between"
+        align="center"
+        gap={6}
+      >
+        <Heading as="h1" size="lg">
+          Overview
+        </Heading>
+      </Flex>
+
+      <Flex direction="column" alignItems="center">
+        <Heading as="h1" size="3xl" color="gray">
+          Under Construction
+        </Heading>
+
+        <NextImage alt="missing site" src="/web-design.svg" width={400} height={400} />
+      </Flex>
+    </Flex>
+  );
+}

app/app/(dashboard)/sites/[id]/page.tsx → app/(dashboard)/sites/[id]/page.tsx

@@ -1,7 +1,8 @@
 import {
+  SiteCustomDomainForm,
   SiteDeleteForm,
   SiteGeneralSettingsForm,
-  SiteGitInfo,
+  SiteQuickLinks,
 } from '@/components/client';
 import { Stack } from '@/components/chakra';
 
@@ -11,13 +12,13 @@ import { getSession } from '@/lib/auth';
 import { prisma } from '@/lib/prisma';
 import { UserRole } from '@prisma/client';
 
-type SiteSettingsProps = {
+type SingleSitePageProps = {
   params: {
     id: string;
   };
 };
 
-export default async function SiteSettingsIndex({ params }: SiteSettingsProps) {
+export default async function SingleSitePage({ params }: SingleSitePageProps) {
   const session = await getSession();
 
   if (!session) {
@@ -36,10 +37,12 @@ export default async function SiteSettingsIndex({ params }: SiteSettingsProps) {
 
   return (
     <Stack width="100%" spacing={6}>
-      {repo && site && <SiteGitInfo repo={repo} site={site} />}
+      {site && <SiteQuickLinks repo={repo} site={site} />}
 
       {site && <SiteGeneralSettingsForm site={site} />}
 
+      {site && <SiteCustomDomainForm site={site} />}
+
       {site && <SiteDeleteForm site={site} />}
     </Stack>
   );

components/server/Sites/index.tsx → app/(dashboard)/sites/components/Sites/index.tsx

@@ -6,7 +6,7 @@ import { getSession } from '@/lib/auth';
 import { prisma } from '@/lib/prisma';
 import { UserRole } from '@/types';
 
-import { SiteCard } from '../SiteCard';
+import { SiteCard } from './SiteCard';
 
 export const Sites = async ({ limit }: { limit?: number }) => {
   const session = await getSession();
@@ -35,12 +35,7 @@ export const Sites = async ({ limit }: { limit?: number }) => {
         No Sites Yet
       </Heading>
 
-      <NextImage
-        alt="missing site"
-        src="https://illustrations.popsy.co/gray/web-design.svg"
-        width={400}
-        height={400}
-      />
+      <NextImage alt="missing site" src="/web-design.svg" width={400} height={400} />
 
       <Text className="text-lg text-stone-500">
         You do not have any sites yet. Create one to get started.

app/(dashboard)/sites/components/index.ts

@@ -0,0 +1 @@
+export * from './Sites';

app/app/(dashboard)/sites/page.tsx → app/(dashboard)/sites/page.tsx

@@ -1,8 +1,9 @@
 import { Flex, Heading, Skeleton, Wrap, WrapItem } from '@/components/chakra';
 import { CreateSiteButton } from '@/components/client';
-import { Sites } from '@/components/server';
 import { Suspense } from 'react';
 
+import { Sites } from './components';
+
 export default function AllSites() {
   return (
     <Flex width="100%" direction="column" gap={6}>
@@ -23,7 +24,7 @@ export default function AllSites() {
       <Suspense
         fallback={
           <Wrap spacing={6}>
-            {Array.from({ length: 6 }).map((_, i) => (
+            {Array.from({ length: 3 }).map((_, i) => (
               <WrapItem key={i}>
                 <Skeleton height="40px" />
               </WrapItem>