UPDATE: production-ize next.js version

VectorLogoZone · Jul 30, 2024 · 0be5960 · 0be5960
1 parent 47a1efe
commit 0be5960
Show file tree

Hide file tree

Showing 12 changed files with 95 additions and 27 deletions.
diff --git a/.github/workflows/gcr-deploy.yaml b/.github/workflows/gcr-deploy.yaml
@@ -0,0 +1,64 @@
+name: deploy
+
+on:
+  push:
+    branches:
+    - main
+
+  workflow_dispatch:
+
+# Environment variables available to all jobs and steps in this workflow
+# NOTE: these aren't really secret, but there aren't non-secret settings
+env:
+  RUN_PROJECT: ${{ secrets.RUN_PROJECT }}
+  RUN_REGION: ${{ secrets.RUN_REGION }}
+  RUN_SERVICE: ${{ secrets.RUN_SERVICE }}
+
+jobs:
+  deploy:
+    name: Deploy to CloudRun
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v1
+
+      - name: gcloud auth
+        id: 'auth'
+        uses: 'google-github-actions/auth@v0'
+        with:
+          credentials_json: '${{ secrets.GCP_SA_KEY }}'
+
+      # Setup gcloud CLI
+      - name: gcloud setup
+        uses: google-github-actions/setup-gcloud@v0
+
+      - name: gcloud docker-auth
+        run: gcloud auth configure-docker
+
+      # Build and push image to Google Container Registry
+      - name: Build
+        run: |
+          docker build \
+            --build-arg COMMIT=${GITHUB_SHA:0:7} \
+            --build-arg LASTMOD=$(date -u +%Y-%m-%dT%H:%M:%SZ) \
+            --tag gcr.io/${RUN_PROJECT}/${RUN_SERVICE}:$GITHUB_SHA \
+            .
+
+      - name: GCloud auth to docker
+        run: |
+          gcloud auth configure-docker
+
+      - name: Push to registry
+        run: |
+          docker push gcr.io/${RUN_PROJECT}/${RUN_SERVICE}:$GITHUB_SHA
+
+      # Deploy image to Cloud Run
+      - name: Deploy
+        run: |
+          gcloud run deploy ${RUN_SERVICE} \
+            --allow-unauthenticated \
+            --image gcr.io/${RUN_PROJECT}/${RUN_SERVICE}:$GITHUB_SHA \
+            --platform managed \
+            --project ${RUN_PROJECT} \
+            --region ${RUN_REGION}
diff --git a/README.md b/README.md
@@ -22,6 +22,7 @@ You can use this as a viewer from any website by passing the correct query strin
 ## Credits
 
 [![Chakra UI](https://www.vectorlogo.zone/logos/chakra-ui/chakra-ui-ar21.svg)](https://v2.chakra-ui.com/ "UI Framework")
+[![Google CloudRun](https://www.vectorlogo.zone/logos/google_cloud_run/google_cloud_run-ar21.svg)](https://cloud.google.com/run/ "Hosting")
 [![Git](https://www.vectorlogo.zone/logos/git-scm/git-scm-ar21.svg)](https://git-scm.com/ "Version control")
 [![Github](https://www.vectorlogo.zone/logos/github/github-ar21.svg)](https://github.com/ "Code hosting")
 [![golang](https://www.vectorlogo.zone/logos/golang/golang-ar21.svg)](https://golang.org/ "Programming language")
@@ -30,11 +31,9 @@ You can use this as a viewer from any website by passing the correct query strin
 [![npm](https://www.vectorlogo.zone/logos/npmjs/npmjs-ar21.svg)](https://www.npmjs.com/ "JS Package Management")
 [![Phosphor Icons](https://www.vectorlogo.zone/logos/phosphoricons/phosphoricons-ar21.svg)](https://phosphoricons.com/ "Toolbar icons")
 [![react.js](https://www.vectorlogo.zone/logos/reactjs/reactjs-ar21.svg)](https://reactjs.org/ "UI Framework")
-[![React Router](https://www.vectorlogo.zone/logos/reactrouter/reactrouter-ar21.svg)](https://reactrouter.com/ "Client-side routing")
+[![Next.js](https://www.vectorlogo.zone/logos/nextjs/nextjs-ar21.svg)](https://nextjs.org/ "React Framework")
 [![TopTal](https://www.vectorlogo.zone/logos/toptal/toptal-ar21.svg)](https://www.toptal.com/designers/subtlepatterns/ "Background pattern")
 [![TypeScript](https://www.vectorlogo.zone/logos/typescriptlang/typescriptlang-ar21.svg)](https://www.typescriptlang.org/ "Programming Language")
 [![VectorLogoZone](https://www.vectorlogo.zone/logos/vectorlogozone/vectorlogozone-ar21.svg)](https://www.vectorlogo.zone/ "Logos")
 [![Vite](https://www.vectorlogo.zone/logos/vitejsdev/vitejsdev-ar21.svg)](https://vitejs.dev/ "Bundler")
 
-* [bartstc/vite-ts-react-template](https://github.com/bartstc/vite-ts-react-template)
-* [jaredLunde/react-hook](https://github.com/jaredLunde/react-hook)
diff --git a/TODO.md b/TODO.md
@@ -3,27 +3,25 @@
 ## General
 
 - [ ] clean mobile layout for non-view pages
-- [ ] double loads on random
 - [ ] 404 handler
 - [ ] noscript: display hyperlinked image at max size
 - [ ] /info.html - info about the current SVG
 	- url
 	- dimensions
 	- colors
-	- contains [ text | transforms | rasters | ... ]
+	- contains [ text | transforms | rasters | foreignObjects | namespaces | ... ]
 	- size (KB)
 	- metadata
-- [ ] sitemap.xml
 - [ ] privacy policy, terms of service, etc
 - [ ] convert to PNG
 - [ ] convert to PDF
 - [ ] support for multiple images with next/prev buttons, thumbnail view (see [qimgv](https://github.com/easymodo/qimgv))
 - [ ] post endpoint (loads into temporary server url then redirects)
 - [ ] shell script for post endpoint
-- [ ] more links beside back (specifically: source and website/collection, for use by logosearch)
 
 ## Preview
 - [ ] `icon` zoom mode (PiChartBarFill) that shows multiple fixes sizes (16, 32...)
+- [ ] `%` zoom mode (no toolbar button: only for incoming links)
 - [ ] support a second exit parameter (`src`?) that goes to the hosting webpage (PiCircuitryBold, PiCubeFocus, PiLinkBold, PiOrangeBold, PiSignPostBold)
 - [ ] `info` parameter (and toolbar button) with markdown (instead of `src` param?)
 - [ ] rotate

diff --git a/src/app/(other)/open/page.tsx b/src/app/(other)/open/page.tsx
@@ -12,6 +12,7 @@ import {
 import { Link as NextLink } from "@chakra-ui/next-js";
 
 import { t } from "../../utils/i18n";
+import { suffix } from "../../utils/pathfix";
 
 export default function OpenPage() {
   const defaultImage = "https://view.svg.zone/favicon.svg";
@@ -30,7 +31,7 @@ export default function OpenPage() {
         boxShadow="lg"
         p={{ base: 6, md: 8 }}
       >
-        <VStack action="/view.html" as="form" method="get" spacing={4}>
+        <VStack action={`/view${suffix}`} as="form" method="get" spacing={4}>
           <Input id="url" defaultValue={defaultImage} name="url" />
 
           <Button type="submit" colorScheme="blue" w="100%">

diff --git a/src/app/(other)/page.tsx b/src/app/(other)/page.tsx
@@ -12,6 +12,7 @@ import {
 } from "@chakra-ui/react";
 
 import { t } from "../utils/i18n";
+import { suffix } from "../utils/pathfix";
 
 import { Link as NextLink } from "@chakra-ui/next-js";
 
@@ -25,19 +26,19 @@ export default function HomePage() {
       >
         <VStack as="form" align="left" spacing={4}>
           <HStack>
-            <Button as={NextLink} href={"/open.html"}>
+            <Button as={NextLink} href={`/open${suffix}`}>
               {t("Open")}
             </Button>
             <Text>{t("view an SVG image from another website")}</Text>
           </HStack>
           <HStack>
-            <Button as={NextLink} href="/random.html?src=logosear.ch">
+          <Button as={NextLink} href={`/random${suffix}?src=logosear.ch`}>
               {t("Random Logo")}
             </Button>
             <Text>{t("view a random logo from LogoSear.ch")}</Text>
           </HStack>
           <HStack>
-            <Button as={NextLink} href="/random.html?src=iconsear.ch">
+          <Button as={NextLink} href={`/random${suffix}?src=iconsear.ch`}>
               {t("Random Icon")}
             </Button>
             <Text>{t("view a random icon from IconSear.ch")}</Text>

diff --git a/src/app/(other)/random/page.tsx b/src/app/(other)/random/page.tsx
@@ -5,6 +5,7 @@ import { Suspense, useEffect } from "react";
 import { Center, Flex, Spinner, Text, VStack } from "@chakra-ui/react";
 
 import { t } from "../../utils/i18n";
+import { suffix } from "../../utils/pathfix";
 
 import { useRouter, useSearchParams } from "next/navigation";
 
@@ -41,15 +42,15 @@ function RandomImage() {
         setTimeout(() => {
           console.log(`random image: ${data.results[0].url}`);
           router.replace(
-            `/view.html?url=${encodeURIComponent(
+            `/view${suffix}?url=${encodeURIComponent(
               data.results[0].url
             )}&zoom=max`
           );
         }, 1000);
       } catch (err) {
         console.error(err);
         if (err instanceof Error && err.name !== "AbortError") {
-          router.replace(`/open.html?error=${encodeURIComponent(err.name)}`);
+          router.replace(`/open${suffix}?error=${encodeURIComponent(err.name)}`);
         }
       }
     })();

diff --git a/src/app/utils/pathfix.ts b/src/app/utils/pathfix.ts
@@ -0,0 +1,3 @@
+
+// WTF is this?  A hack to workaround next.js static export bizarre behavior
+export const suffix = process.env.NODE_ENV === 'production' ? '.html' : '';
diff --git a/src/app/view/BackgroundButtons.tsx b/src/app/view/BackgroundButtons.tsx
@@ -13,6 +13,7 @@ import { setQueryStringParam } from "../utils/querystring";
 
 import { ToolbarButton } from "../components/ToolbarButton";
 import { useSearchParams } from "next/navigation";
+import { suffix } from "../utils/pathfix";
 
 interface IProps {
   boxSize: string;
@@ -28,7 +29,7 @@ export const BackgroundButtons = ({ size, boxSize }: IProps) => {
       <ToolbarButton
         ariaLabel={t("Squiggles background")}
         size={size}
-        href={`/view.html?${setQueryStringParam(
+        href={`?${setQueryStringParam(
           searchParams,
           "bg",
           "memphis-mini"
@@ -40,7 +41,7 @@ export const BackgroundButtons = ({ size, boxSize }: IProps) => {
       <ToolbarButton
         ariaLabel="Checkboard background"
         boxSize={boxSize}
-        href={`/view.html?${setQueryStringParam(
+        href={`?${setQueryStringParam(
           searchParams,
           "bg",
           "checkerboard"
@@ -52,7 +53,7 @@ export const BackgroundButtons = ({ size, boxSize }: IProps) => {
       <ToolbarButton
         ariaLabel="Light background"
         boxSize={boxSize}
-        href={`/view.html?${setQueryStringParam(
+        href={`?${setQueryStringParam(
           searchParams,
           "bg",
           "#eeeeee"
@@ -64,7 +65,7 @@ export const BackgroundButtons = ({ size, boxSize }: IProps) => {
       <ToolbarButton
         ariaLabel="Dark background"
         boxSize={boxSize}
-        href={`/view.html?${setQueryStringParam(
+        href={`?${setQueryStringParam(
           searchParams,
           "bg",
           "#111111"

diff --git a/src/app/view/BorderButtons.tsx b/src/app/view/BorderButtons.tsx
@@ -27,7 +27,7 @@ export const BorderButtons = ({ size, boxSize }: IProps) => {
       <ToolbarButton
         ariaLabel="No border"
         boxSize={boxSize}
-        href={`/view.html?${setQueryStringParam(
+        href={`?${setQueryStringParam(
           searchParams,
           "border",
           "none"
@@ -39,7 +39,7 @@ export const BorderButtons = ({ size, boxSize }: IProps) => {
       <ToolbarButton
         ariaLabel="Dash border"
         boxSize={boxSize}
-        href={`/view.html?${setQueryStringParam(
+        href={`?${setQueryStringParam(
           searchParams,
           "border",
           "dash"
@@ -51,7 +51,7 @@ export const BorderButtons = ({ size, boxSize }: IProps) => {
       <ToolbarButton
         ariaLabel="Thin border"
         boxSize={boxSize}
-        href={`/view.html?${setQueryStringParam(
+        href={`?${setQueryStringParam(
           searchParams,
           "border",
           "thin"
@@ -63,7 +63,7 @@ export const BorderButtons = ({ size, boxSize }: IProps) => {
       <ToolbarButton
         ariaLabel="Thick border"
         boxSize={boxSize}
-        href={`/view.html?${setQueryStringParam(
+        href={`?${setQueryStringParam(
           searchParams,
           "border",
           "thick"

diff --git a/src/app/view/DesktopToolbar.tsx b/src/app/view/DesktopToolbar.tsx
@@ -64,7 +64,7 @@ export const DesktopToolbar = ({ currentZoom, setZoom }: IProps) => {
         <ToolbarButton
           ariaLabel={"Show debug info"}
           boxSize="1.75em"
-          href={`/view.html?${setQueryStringParam(searchParams,
+          href={`?${setQueryStringParam(searchParams,
             "debug",
             isDebug ? "0" : "1"
           )}`}

diff --git a/src/app/view/MobileToolbar.tsx b/src/app/view/MobileToolbar.tsx
@@ -127,7 +127,7 @@ export const MobileToolbar = ({ currentZoom, setZoom }: IProps) => {
               <Switch
                 as={NextLink}
                 isChecked={isDebug}
-                href={`/view.html?${setQueryStringParam(searchParams, 
+                href={`?${setQueryStringParam(searchParams, 
                   "debug",
                   isDebug ? "0" : "1"
                 )}`}

diff --git a/src/app/view/ZoomButtons.tsx b/src/app/view/ZoomButtons.tsx
@@ -32,7 +32,7 @@ export const ZoomButtons = ({ currentZoom, size, boxSize }: IProps) => {
       <ToolbarButton
         ariaLabel="Zoom out"
         boxSize={boxSize}
-        href={`/view.html?${setQueryStringParam(
+        href={`?${setQueryStringParam(
           searchParams,
           "zoom",
           String(zoomOut)
@@ -45,14 +45,14 @@ export const ZoomButtons = ({ currentZoom, size, boxSize }: IProps) => {
         ariaLabel="Original size"
         size={size}
         boxSize={boxSize}
-        href={`/view.html?${setQueryStringParam(searchParams, "zoom", "1")}`}
+        href={`?${setQueryStringParam(searchParams, "zoom", "1")}`}
         isActive={currentZoom === 1}
         icon={PiArrowsCounterClockwiseBold}
       />
       <ToolbarButton
         ariaLabel="Zoom In"
         boxSize={boxSize}
-        href={`/view.html?${setQueryStringParam(
+        href={`?${setQueryStringParam(
           searchParams,
           "zoom",
           String(currentZoom + 1)
@@ -64,7 +64,7 @@ export const ZoomButtons = ({ currentZoom, size, boxSize }: IProps) => {
       <ToolbarButton
         ariaLabel="Max zoom"
         boxSize={boxSize}
-        href={`/view.html?${setQueryStringParam(searchParams, "zoom", "max")}`}
+        href={`?${setQueryStringParam(searchParams, "zoom", "max")}`}
         isActive={searchParams.get("zoom") === "max"}
         size={size}
         icon={PiArrowsOutCardinalBold}
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@

		// WTF is this? A hack to workaround next.js static export bizarre behavior
		export const suffix = process.env.NODE_ENV === 'production' ? '.html' : '';