add production workflow

.github/workflows/production.yml

@@ -0,0 +1,53 @@
+name: Production Deploy
+
+on:
+  push:
+    branches: [main]
+
+env:
+  REGISTRY: ghcr.io
+  GH_USER: therealowenrees
+  IMAGE_NAME: therealowenrees/chess-scribe:latest
+
+jobs:
+  publish:
+    name: publish image
+    runs-on: ubuntu-24.04
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v6
+
+      - name: Login to Github Container Registry
+        run: echo "${{ secrets.GHCR_SECRET }}" | docker login ghcr.io -u ${{ env.GH_USER }} --password-stdin
+
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v3
+
+      - name: Build image and publish with Cache
+        uses: docker/build-push-action@v5
+        with:
+          context: .
+          push: true
+          tags: ${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}
+          cache-from: type=gha
+          cache-to: type=gha,mode=max
+
+  deploy:
+    needs: publish
+    name: deploy image
+    runs-on: ubuntu-24.04
+
+    steps:
+      - name: Connect and pull image from GHCR
+        uses: appleboy/ssh-action@v1.2.5
+        with:
+          host: ${{ secrets.HOST }}
+          username: ${{ secrets.USERNAME }}
+          key: ${{ secrets.SSH_KEY }}
+          port: ${{ secrets.PORT }}
+          script: |
+            cd /home/${{ secrets.USERNAME }}
+            echo "${{ secrets.GHCR_SECRET }}" | docker login ghcr.io -u ${{ env.GH_USER }} --password-stdin
+            docker pull ${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}
+            docker compose up -d

TODO

@@ -10,6 +10,4 @@
 - react query on for study and chapter load, to allow caching
 - https://specification.website/checklist/
 
-- Custom headers do not work - the subtitle is appearing above every thing on first page, and the game starts 2nd page
-
 - react query to cache the study and chapters

src/components/LichessStudyLinkInput.tsx

@@ -28,6 +28,8 @@ const LichessStudyLinkInput = ({ setSelectedStudyId }: IProps) => {
 			return;
 		}
 
+		console.log(result.data);
+
 		setSelectedStudyId(result.data);
 		toast.success("Study loaded — pick a chapter");
 	};

src/components/SelectStudyChapter.tsx

@@ -2,11 +2,11 @@ import {
 	type Dispatch,
 	useActionState,
 	useEffect,
-	useRef,
+	// useRef,
 	useState,
 } from "react";
 import { toast } from "react-toastify";
-import { useClickOutside } from "#/hooks/useClickOutside.ts";
+// import { useClickOutside } from "#/hooks/useClickOutside.ts";
 import { useLichess } from "#/hooks/useLichess.ts";
 import type { IUserStudyChapter } from "#/interfaces.ts";
 import type { GameAction } from "#/reducers/gameReducer.ts";
@@ -31,7 +31,7 @@ const initialChapterState: ChapterState = {
 const SelectStudyChapter = ({ selectedStudyId, gameDispatch }: IProps) => {
 	const [isOpen, setIsOpen] = useState(false);
 	const [search, setSearch] = useState("");
-	const dropdownRef = useRef<HTMLDivElement>(null);
+	// const dropdownRef = useRef<HTMLDivElement>(null);
 
 	const { getLichessStudyChapters, loadLichessStudyChapter } = useLichess();
 
@@ -47,6 +47,9 @@ const SelectStudyChapter = ({ selectedStudyId, gameDispatch }: IProps) => {
 			const result = await getLichessStudyChapters({
 				studyId: selectedStudyId,
 			});
+
+			console.log(result);
+
 			if (result.ok) {
 				return {
 					status: "success",
@@ -54,6 +57,7 @@ const SelectStudyChapter = ({ selectedStudyId, gameDispatch }: IProps) => {
 					error: null,
 				} satisfies ChapterState;
 			}
+
 			return {
 				status: "error",
 				chapters: [],
@@ -67,7 +71,7 @@ const SelectStudyChapter = ({ selectedStudyId, gameDispatch }: IProps) => {
 		chapter.name.toLowerCase().includes(search.toLowerCase()),
 	);
 
-	useClickOutside({ isOpen, setIsOpen, setSearch, ref: dropdownRef });
+	// useClickOutside({ isOpen, setIsOpen, setSearch, ref: dropdownRef });
 
 	useEffect(() => {
 		if (isPending || chapterState.status === "success") {

src/pages/Chessboard.tsx

@@ -65,7 +65,10 @@ const Chessboard = () => {
 					/>
 				) : null}
 				{user ? (
+					<div className="flex flex-col">
+						<p className="text-center">or</p>
 						<LichessStudyLinkInput setSelectedStudyId={setSelectedStudyId} />
+					</div>
 				) : null}
 			</Section>