Commiting to switch to a different orm

.dockerignore

@@ -0,0 +1,38 @@
+# flyctl launch added from .gitignore
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+node_modules
+.pnp
+**/.pnp.js
+**/.yarn/install-state.gz
+
+# testing
+coverage
+
+# next.js
+.next
+out
+
+# production
+build
+
+# misc
+**/.DS_Store
+**/*.pem
+
+# debug
+**/npm-debug.log*
+**/yarn-debug.log*
+**/yarn-error.log*
+
+# local env files
+**/.env*.local
+
+# vercel
+**/.vercel
+
+# typescript
+**/*.tsbuildinfo
+**/next-env.d.ts
+fly.toml

.gitea/workflows/deploy.yaml

@@ -2,35 +2,50 @@ name: Build and deploy
 run-name: Build and deploy
 on:
   push:
-    # branches:
-    #   - main
+    branches:
+      - main
 
 jobs:
   deploy:
     runs-on: ubuntu-latest
     steps:
-      -
-        name: Checkout 
+      - name: Checkout 
         uses: actions/checkout@v4
         with:
           github-server-url: 'https://gitea.home.joemonk.co.uk'
-      -
-        name: Set up docker
+
+      - name: Set up docker
         run: 'curl -fsSL https://get.docker.com | sh'
-      -
-        name: Set up Docker Buildx
+
+      - name: Set up Docker Buildx
         uses: docker/setup-buildx-action@v3
-      - 
-        name: Login to private registry
+
+      - name: Login to gitea registry
         uses: docker/login-action@v3
         with:
           registry: 'gitea.home.joemonk.co.uk/${{ github.repository }}'
           username: ${{ secrets.REGISTRY_USERNAME }}
           password: ${{ secrets.REGISTRY_PASSWORD }}
-      -
-        name: Build and push
+
+      - name: Login to flyio registry
+        uses: docker/login-action@v3
+        with:
+          registry: 'registry.fly.io'
+          username: x
+          password: ${{ secrets.FLY_API_TOKEN }}
+
+      - name: Build and push
         uses: docker/build-push-action@v6
         with:
           context: .
           push: true
-          tags: 'gitea.home.joemonk.co.uk/${{ gitea.repository }}:latest'
+          tags: |
+            'gitea.home.joemonk.co.uk/${{ gitea.repository }}:latest'
+            'gitea.home.joemonk.co.uk/${{ gitea.repository }}:${{ gitea.sha }}'
+            'registry.fly.io/${{ gitea.repository }}:${{ gitea.sha }}'
+
+      - uses: superfly/flyctl-actions/setup-flyctl@master
+
+      - run: flyctl deploy --remote-only -i registry.fly.io/${{ gitea.repository }}:${{ gitea.sha }}
+        env:
+          FLY_API_TOKEN: ${{ secrets.FLY_API_TOKEN }}

Dockerfile

@@ -39,6 +39,7 @@ RUN chown nextjs:nodejs .next
 # https://nextjs.org/docs/advanced-features/output-file-tracing
 COPY --from=builder --chown=nextjs:nodejs /app/.next/standalone ./
 COPY --from=builder --chown=nextjs:nodejs /app/.next/static ./.next/static
+COPY --from=builder /app/db.sql ./db.sql
 
 USER nextjs
 

fly.toml

@@ -0,0 +1,30 @@
+# fly.toml app configuration file generated for joemonk on 2024-11-13T18:49:43Z
+#
+# See https://fly.io/docs/reference/configuration/ for information about how to use this file.
+#
+
+app = 'joemonk'
+primary_region = 'lhr'
+
+[build]
+
+[http_service]
+  internal_port = 3000
+  force_https = true
+  auto_stop_machines = 'stop'
+  auto_start_machines = true
+  min_machines_running = 0
+  processes = ['app']
+  [[http_service.checks]]
+    grace_period = "15s"
+    interval = "120s"
+    method = "GET"
+    timeout = "5s"
+    path = "/api/status"
+    protocol = "http"
+
+
+[[vm]]
+  memory = '1gb'
+  cpu_kind = 'shared'
+  cpus = 1

next.config.mjs

@@ -6,19 +6,26 @@ const nextConfig = {
   pageExtensions: ["js", "jsx", "md", "mdx", "ts", "tsx"],
   experimental: {
     reactCompiler: true,
-    ppr: true,
+    ppr: "incremental",
   },
-  serverExternalPackages: ["typeorm"],
+  serverExternalPackages: ["typeorm", "better-sqlite3"],
   reactStrictMode: true,
   output: "standalone",
   images: {
     remotePatterns: [
       {
         protocol: "https",
-        hostname: "fly.storage.tigris.dev"
+        hostname: "fly.storage.tigris.dev",
       },
     ],
   },
+  typescript: {
+    // !! WARN !!
+    // Dangerously allow production builds to successfully complete even if
+    // your project has type errors.
+    // !! WARN !!
+    ignoreBuildErrors: true,
+  },
 };
 
 const millionConfig = {
@@ -30,4 +37,5 @@ const withMDX = createMDX({
   // Add markdown plugins here, as desired
 });
 
-export default withMDX(million.next(nextConfig, millionConfig));
+// export default withMDX(million.next(nextConfig, millionConfig));
+export default withMDX(nextConfig);

package.json

@@ -8,7 +8,7 @@
     "build:analyse": "ANALYZE=true npm run build",
     "start": "next start",
     "lint": "next lint",
-    "lint:fix": "next lint -- --fix"
+    "lint:fix": "next lint --fix"
   },
   "dependencies": {
     "@aws-sdk/client-s3": "^3.663.0",
@@ -32,12 +32,12 @@
     "framer-motion": "^11.5.6",
     "glob": "^11.0.0",
     "million": "^3.1.11",
-    "next": "^15.0.0-rc.0",
-    "next-auth": "^5.0.0-beta",
+    "next": "15.0.4-canary.2",
+    "next-auth": "beta",
     "postcss": "^8.4.47",
     "radash": "^12.1.0",
-    "react": "^19.0.0-rc-04bd67a4-20240924",
-    "react-dom": "^19.0.0-rc-04bd67a4-20240924",
+    "react": "19.0.0-rc-5c56b873-20241107",
+    "react-dom": "19.0.0-rc-5c56b873-20241107",
     "react-zoom-pan-pinch": "^3.6.1",
     "reflect-metadata": "^0.2.2",
     "server-only": "^0.0.1",

src/app/(root)/auth/page.tsx

@@ -1,23 +1,24 @@
-import { signIn } from "@/lib/auth"
+import { signIn } from "@/lib/auth";
+import type React from "react";
  
 export default function Auth(props: {
-  searchParams: { callbackUrl: string | undefined }
-}) {
+  searchParams: Promise<{ callbackUrl: string | undefined }>
+}): React.JSX.Element {
   return (
     <form
       className="w-40 mx-auto"
       action={async () => {
-        "use server"
+        "use server";
         await signIn("authelia", {
-          redirectTo: props.searchParams?.callbackUrl ?? "",
-        })
+          redirectTo: (await props.searchParams)?.callbackUrl ?? "",
+        });
       }}
-      >
+    >
       <button type="submit"
         className={`rounded-lg dark:bg-dracula-bg-light transition-colors duration-100 dark:text-white px-2 py-2 font-normal border-transparent`}
       >
         <span>Sign in with Authelia</span>
       </button>
     </form>
-  )
+  );
 }

src/app/(root)/layout.tsx

@@ -1,8 +1,5 @@
-import { SessionProvider } from "next-auth/react";
-
 import NavBar from '@/components/navbar';
 import Footer from '@/components/footer';
-import LogIn from "@/components/auth/login";
 
 import "../globals.css";
 

src/app/(root)/photos/page.tsx

@@ -11,21 +11,23 @@ export default async function Photos(): Promise<React.JSX.Element> {
   const {data: imageData} = await getImageData();
   
   return (
-    <Lightbox imageData={imageData.images}>
-      {imageData.images.map((image) => (
-        <Image
-          key={image.src}
-          alt={image.src}
-          src={image.src}
-          className="object-contain h-60 w-80"
-          sizes="100vw"
-          loading="lazy"
-          width={image.width}
-          height={image.height}
-          blurDataURL={image.blur}
-          placeholder="blur"
-        />
-      ))}
-    </Lightbox>
+    <div className="mx-auto">
+      <Lightbox imageData={imageData.images}>
+        {imageData.images.map((image) => (
+          <Image
+            key={image.src}
+            alt={image.src}
+            src={image.src}
+            className="object-contain h-60 w-80"
+            sizes="100vw"
+            loading="lazy"
+            width={image.width}
+            height={image.height}
+            blurDataURL={image.blur}
+            placeholder="blur"
+          />
+        ))}
+      </Lightbox>
+    </div>
   );
 }

src/app/(root)/posts/[...slug]/page.tsx

@@ -15,9 +15,12 @@ export async function generateStaticParams(): Promise<{slug: string[]}[]> {
   return slugs;
 }
 
-export default async function Post({params}: {params: { slug: string[] }}): Promise<React.JSX.Element> {
-  const mdxFile = await import(`../../../../markdown/posts/[...slug]/${params.slug.join('/')}.mdx`)
-  const Post = dynamic(async () => mdxFile);
+export default async function Post({params}: {params: Promise<{ slug: string[] }>}): Promise<React.JSX.Element> {
+  // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+  const mdxFile = await import(`../../../../markdown/posts/[...slug]/${(await params).slug.join('/')}.mdx`);
+  // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-return
+  const Post = dynamic(() => mdxFile);
+  // eslint-disable-next-line @typescript-eslint/no-unsafe-return
   return (
     <Post/>
   );

src/app/(root)/posts/page.tsx

@@ -21,12 +21,15 @@ async function loadPostDetails(): Promise<postDetails[]> {
   });
 
   const loadPostData = posts.map(async (post) => {
-    const slug = [post.split('/').at(-1)!.slice(0, -4)]
-    const mdxFile = await import(`../../../../src/markdown/posts/[...slug]/${slug.join('/')}.mdx`)
+    const slug = [post.split('/').at(-1)!.slice(0, -4)];
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+    const mdxFile = await import(`../../../../src/markdown/posts/[...slug]/${slug.join('/')}.mdx`);
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
     return {
+      link: getCurrentUrl() + '/posts/' + slug.join('/'),
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-assignment
       metadata: mdxFile.metadata,
-      link: getCurrentUrl() + '/posts/' + slug.join('/')
-    }
+    };
   });
 
   const postData = await Promise.all(loadPostData);
@@ -39,7 +42,7 @@ const getPosts = unstable_cache(
   {
     revalidate: false
   }
-)
+);
 
 export default async function Posts(): Promise<React.JSX.Element> {
   const postDetails = await getPosts();
@@ -58,7 +61,7 @@ export default async function Posts(): Promise<React.JSX.Element> {
                     <div key={`${post.link}_${tag}`}>
                       <span className="select-none text-sm me-2 px-2.5 py-1 rounded border border-dracula-pink dark:bg-dracula-bg-darker dark:text-dracula-pink">{tag}</span>
                     </div>
-                  )
+                  );
                 })}
               </div>
               <p>
@@ -66,7 +69,7 @@ export default async function Posts(): Promise<React.JSX.Element> {
               </p>
             </div>
           </div>
-        )
+        );
       })}
     </div>
   );

src/app/api/auth/[...nextauth]/route.ts

@@ -2,21 +2,21 @@ import { NextRequest } from "next/server";
 import { handlers } from "@/lib/auth";
 
 const reqWithTrustedOrigin = (req: NextRequest): NextRequest => {
-  const proto = req.headers.get('x-forwarded-proto')
-  const host = req.headers.get('x-forwarded-host')
+  const proto = req.headers.get('x-forwarded-proto');
+  const host = req.headers.get('x-forwarded-host');
   if (!proto || !host) {
-    console.warn("Missing x-forwarded-proto or x-forwarded-host headers.")
-    return req
+    console.warn("Missing x-forwarded-proto or x-forwarded-host headers.");
+    return req;
   }
-  const envOrigin = `${proto}://${host}`
-  const { href, origin } = req.nextUrl
-  return new NextRequest(href.replace(origin, envOrigin), req)
-}
+  const envOrigin = `${proto}://${host}`;
+  const { href, origin } = req.nextUrl;
+  return new NextRequest(href.replace(origin, envOrigin), req);
+};
 
-export const GET = (req: NextRequest) => {
-  return handlers.GET(reqWithTrustedOrigin(req))
-}
+export const GET = (req: NextRequest): Promise<Response> => {
+  return handlers.GET(reqWithTrustedOrigin(req));
+};
 
-export const POST = (req: NextRequest) => {
-  return handlers.POST(reqWithTrustedOrigin(req))
-}
+export const POST = (req: NextRequest): Promise<Response> => {
+  return handlers.POST(reqWithTrustedOrigin(req));
+};

src/app/api/photos/route.ts

@@ -49,8 +49,8 @@ export async function GET(): Promise<Response> {
       }),
       title: photo.title ?? undefined,
       description: photo.description ?? undefined
-    }
-  })
+    };
+  });
 
   return NextResponse.json<GetPhotos>({ status: 200, data: { images } });
 }

src/app/api/photos/update/route.ts

@@ -15,7 +15,7 @@ export type GetPhotosUpdate = {
 
 export const GET = auth(async function GET(req): Promise<Response> {
   if (!req.auth) {
-    return NextResponse.json({ message: "Not authenticated" }, { status: 401 })
+    return NextResponse.json({ message: "Not authenticated" }, { status: 401 });
   }
 
   const dataSource = await PhotoDataSource.dataSource;
@@ -35,7 +35,7 @@ export const GET = auth(async function GET(req): Promise<Response> {
   const s3Res = await s3Client.send(listObjCmd);
 
   if (!s3Res.Contents) {
-    return NextResponse.json({ status: 500 })
+    return NextResponse.json({ status: 500 });
   }
   const s3Photos = sift(s3Res.Contents.map((obj) => {
     if (!obj.Key?.endsWith('/')) {
@@ -51,7 +51,7 @@ export const GET = auth(async function GET(req): Promise<Response> {
     const getImageCmd = new GetObjectCommand({
       Bucket: "joemonk-photos",
       Key: fileName.replace("https://fly.storage.tigris.dev/joemonk-photos/", "")
-    })
+    });
     const imgRes = await s3Client.send(getImageCmd);
     const image = await imgRes.Body?.transformToByteArray();
 

src/components/auth/login.tsx

@@ -8,13 +8,13 @@ export default async function LogIn(): Promise<React.JSX.Element | undefined> {
   return (
     <form
       action={async () => {
-        "use server"
+        "use server";
         if (session?.user) {
           await signOut({
             redirectTo: `${getCurrentUrl()}/`
-          })
+          });
         } else {
-          await signIn("authelia")
+          await signIn("authelia");
         }
       }}
     >

src/components/lightbox.tsx

@@ -63,21 +63,23 @@ function NextJsImage({ slide, offset, rect, unoptimized = false }: {slide: Image
   );
 }
 
-export default function MyLightbox({imageData, children}: {imageData: ImageData[], children: React.JSX.Element[]}): React.JSX.Element {
+export function MyLightbox({imageData, children}: {imageData: ImageData[], children: React.JSX.Element[]}): React.JSX.Element {
   const [active, setActive] = useState<number | null>(null);
 
   return (
     <div className="mx-auto">
       <div className="flex flex-row flex-wrap justify-center">
-        {children.map((image, index) => (
-          <button key={`lightbox_img_${index}`} onClick={(() => {
-            setActive(index);
-          })}>
-            <div className="relative">
-              {image}
-            </div>
-          </button>
-        ))}
+        {children.map((image, index) => {
+          return (
+            <button key={`lightbox_img_${index}`} onClick={(() => {
+              setActive(index);
+            })}>
+              <div className="relative">
+                {image}
+              </div>
+            </button>
+          ); }
+        )}
       </div>
       <YARL
         open={typeof active === 'number'}
@@ -90,4 +92,41 @@ export default function MyLightbox({imageData, children}: {imageData: ImageData[
       />
     </div>
   );
+}
+
+
+interface FormElements extends HTMLFormControlsCollection {
+  src: HTMLInputElement
+}
+interface UsernameFormElement extends HTMLFormElement {
+  readonly elements: FormElements
+}
+
+export default function Test(props: {imageData: ImageData[], children: React.JSX.Element[]}): React.JSX.Element {
+  const [imageData, setImageData] = useState(props.imageData);
+
+  function handleSubmit(event: React.FormEvent<UsernameFormElement>): void {
+    event.preventDefault();
+    const imageData = props.imageData;
+    setImageData(imageData.filter((data) => data.src === event.currentTarget.elements.src.value));
+  }
+
+  const children = imageData.map((data) => props.children.find((child) => {
+    return data.src === child.key ? child : null;
+  })).filter(((data) => !!data));
+
+  return (
+    <>
+      <form onSubmit={handleSubmit}>
+        <div>
+          <label htmlFor="src">Src:</label>
+          <input id="src" type="text" />
+        </div>
+        <button type="submit">Submit</button>
+      </form>
+      <MyLightbox imageData={imageData}>
+        {...children}
+      </MyLightbox>
+    </>
+  );
 }

src/components/navbar-client.tsx

@@ -27,7 +27,7 @@ export default function NavBarClient({LogIn, navigation}: NavBarClientProps): Re
       current.current = true;
     }
     return nav;
-  }, [pathname]);
+  }, [pathname, navigation]);
 
   return (
     <nav className="dark:bg-dracula-bg-darker border-b-2 dark:border-dracula-purple">

src/components/navbar.tsx

@@ -12,7 +12,7 @@ const defaultNavigation = [
 
 const authedNavigation = [
   { name: 'Manage', href: '/manage', current: false },
-]
+];
 
 export default async function NavBar(): Promise<React.JSX.Element> {
   const session = await auth();

src/components/post-header.tsx

@@ -22,7 +22,7 @@ export default function PostHeader({metadata}: PostHeaderProps): React.JSX.Eleme
             <>
               <span className="select-none text-sm me-2 px-2.5 py-1 rounded border border-dracula-pink dark:bg-dracula-bg-darker dark:text-dracula-pink">{tag}</span>
             </>
-          )
+          );
         })}
       </div>
     </>

src/data-source.ts

@@ -3,10 +3,10 @@ import { Photo } from "./entity/photo";
 
 const dataSource = new DataSource({
   type: "better-sqlite3",
-  database: "db.sql",
+  database: `${process.cwd()}/db.sql`,
   entities: [Photo],
   migrations: ["./migrations"],
-})
+});
 
 export default class PhotoDataSource {
   private static _dataSource: DataSource | null = null;
@@ -22,11 +22,11 @@ export default class PhotoDataSource {
   static async initDataSource(): Promise<DataSource> {
     if (!PhotoDataSource._dataSource || !PhotoDataSource._dataSource.isInitialized) {
       const ds = await dataSource.initialize();
-      console.log('Photo data source initialized')
+      console.log('Photo data source initialized');
       PhotoDataSource._dataSource = ds;
     }
     return PhotoDataSource._dataSource;
   }
 }
 
-PhotoDataSource.initDataSource();
+await PhotoDataSource.initDataSource();

src/entity/photo.ts

@@ -1,48 +1,48 @@
-import { Column, Entity, PrimaryGeneratedColumn } from "typeorm"
+import { Column, Entity, PrimaryGeneratedColumn } from "typeorm";
 
 @Entity()
 export class Photo {
   @PrimaryGeneratedColumn()
-  id!: number
+    id!: number;
 
   @Column("text", { unique: true })
-  src!: string;
+    src!: string;
 
   @Column()
-  width!: number
+    width!: number;
 
   @Column()
-  height!: number
+    height!: number;
 
   @Column("blob")
-  blur!: string
+    blur!: string;
 
   @Column("text", { nullable: true })
-  camera: string | null = null;
+    camera: string | null = null;
 
   // Manually input data
   @Column("text", { nullable: true })
-  title: string | null = null;
+    title: string | null = null;
 
   @Column("text", { nullable: true })
-  description: string | null = null;
+    description: string | null = null;
 
   // Exif data
   @Column("int", { nullable: true })
-  exposureBiasValue: number | null = null
+    exposureBiasValue: number | null = null;
 
   @Column("float", { nullable: true })
-  fNumber: number | null = null
+    fNumber: number | null = null;
 
   @Column("int", { nullable: true })
-  isoSpeedRatings: number | null = null
+    isoSpeedRatings: number | null = null;
 
   @Column("int", { nullable: true })
-  focalLength: number | null = null
+    focalLength: number | null = null;
 
   @Column("date", { nullable: true })
-  dateTimeOriginal: Date | null = null
+    dateTimeOriginal: Date | null = null;
 
   @Column("text", { nullable: true })
-  lensModel: string | null = null
+    lensModel: string | null = null;
 }

src/lib/auth.ts

@@ -13,4 +13,4 @@ export const { handlers, signIn, signOut, auth } = NextAuth({
   }],
   trustHost: true,
   redirectProxyUrl: `${getCurrentUrl()}/api/auth`,
-})
+});