Fix indenting

Added transition to the sidebar

See merge request neshura-websites/readyornot!5

.forgejo/workflows/build+release.yml

@@ -0,0 +1,95 @@
+name: 'Build and Release Docker Image'
+author: 'Neshura'
+
+on:
+  push:
+    tags:
+      - '[0-9]+.[0-9]+.[0-9]+'
+      - '[0-9]+.[0-9]+.[0-9]+-rc.[0-9]+'
+jobs:
+  test:
+    runs-on: docker
+    steps:
+      -
+        name: Checking Out Repository Code
+        uses: https://code.forgejo.org/actions/checkout@v3
+      -
+        name: Get Yarn Cache Directory
+        id: yarn-cache-dir-path
+        run: echo "dir=$(yarn cache dir)" >> $GITHUB_OUTPUT
+      -
+        name: Set Up Yarn Cache
+        uses: actions/cache@v3
+        id: yarn-cache # use this to check for `cache-hit` (`steps.yarn-cache.outputs.cache-hit != 'true'`)
+        with:
+          path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
+          key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
+          restore-keys: |
+            ${{ runner.os }}-yarn-
+      -
+        name: Install Dependencies
+        run: yarn install
+      -
+        name: Run Linter
+        run: yarn lint
+      -
+        name: Check if Version in package.json matches Tag
+        run: |
+          VERSION=$(cat package.json | grep "version" | sed 's/.*://' | tr -d , | tr -d \" | tr -d " " )
+          if test $VERSION != "${{  github.ref_name }}"; then 
+            echo "Expected Version is: '${{  github.ref_name }}' actual Version is: '$VERSION'"; 
+            exit 1
+          else 
+            echo "Version is: '$VERSION'"; 
+          fi                                        
+
+  build:
+    needs: test
+    if: success()
+    runs-on: dind
+    steps:
+      -
+        name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v3
+        with:
+          config-inline: |
+            [registry."docker.io"]
+              mirrors = ["https://docker-cache.neshweb.net"]
+      -
+        name: Login to Docker Hub
+        uses: docker/login-action@v3
+        with:
+          registry: forgejo.neshweb.net
+          username: ${{ secrets.FORGEJO_USERNAME }}
+          password: ${{ secrets.FORGEJO_TOKEN }}
+      -
+        name: Determine Docker tags
+        id: tags
+        run: |
+          if echo ${{ github.ref_name }} | grep -qi '\-rc' ; then
+            echo latest=forgejo.neshweb.net/neshweb-sites/${{ github.event.repository.name }}:preview >> $GITHUB_OUTPUT;
+          else
+            echo latest=forgejo.neshweb.net/neshweb-sites/${{ github.event.repository.name }}:latest >> $GITHUB_OUTPUT;
+          fi
+          echo version=forgejo.neshweb.net/neshweb-sites/${{ github.event.repository.name }}:${{ github.ref_name }} >> $GITHUB_OUTPUT;
+      -
+        name: Push to Package Registry
+        uses: docker/build-push-action@v5
+        with:
+          push: true
+          tags: ${{ steps.tags.outputs.version }}, ${{ steps.tags.outputs.latest }}
+
+  release:
+    needs: build
+    if: success()
+    runs-on: docker
+    steps:
+      -
+        name: Release New Version
+        uses: actions/forgejo-release@v1
+        with:
+          direction: upload
+          url: https://forgejo.neshweb.net
+          release-dir: release
+          token: ${{ secrets.FORGEJO_TOKEN }}
+          tag: ${{  github.ref_name }}

.forgejo/workflows/test.yml

@@ -0,0 +1,35 @@
+name: 'Run Tests on Code'
+author: 'Neshura'
+
+on:
+  push:
+    tags-ignore:
+      - '**'
+    branches:
+      - '**'
+jobs:
+  test:
+    runs-on: docker
+    steps:
+      -
+        name: Checking Out Repository Code
+        uses: https://code.forgejo.org/actions/checkout@v3
+      -
+        name: Get Yarn Cache Directory
+        id: yarn-cache-dir-path
+        run: echo "dir=$(yarn cache dir)" >> $GITHUB_OUTPUT
+      -
+        name: Set Up Yarn Cache
+        uses: actions/cache@v3
+        id: yarn-cache # use this to check for `cache-hit` (`steps.yarn-cache.outputs.cache-hit != 'true'`)
+        with:
+          path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
+          key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
+          restore-keys: |
+            ${{ runner.os }}-yarn-
+      -
+        name: Install Dependencies
+        run: yarn install
+      -
+        name: Run Linter
+        run: yarn lint

.gitignore

@@ -1,8 +1,9 @@
 # do not track installed modules
-/node_modules
+node_modules/
 
 # do not track built files
-/.next
+.vscode/
+.next/
 *.tsbuildinfo
 next-env.d.ts
 
@@ -13,6 +14,8 @@ yarn-error.log*
 .pnpm-debug.log*
 
 # production
-/build
-/data
-/confs
+build/
+data/
+confs/
+
+.idea/

.gitlab-ci.yml

@@ -1,65 +0,0 @@
-# avoids unecessary repulling of node modules
-cache:
-  paths:
-    - node_modules/
-
-stages:
-  - lint
-  #- test
-  - build
-  - deploy
-
-variables:
-  IMAGE_TAG: $CI_REGISTRY_IMAGE:$CI_COMMIT_TAG
-  IAMGE_LATES: $CI_REGISTRY_IMAGE:latest
-
-
-.node:
-  image: ${CI_DEPENDENCY_PROXY_GROUP_IMAGE_PREFIX}/node:latest
-
-
-.docker:
-  image: ${CI_DEPENDENCY_PROXY_GROUP_IMAGE_PREFIX}/docker:20
-
-
-linter:
-  image: !reference [.node, image]
-  stage: lint
-  before_script:
-    - yarn install
-  script:
-    - yarn lint
-
-
-build:
-  image: !reference [.docker, image]
-  stage: build
-  before_script:
-    - docker login -u $CI_REGISTRY_USER -p $CI_REGISTRY_PASSWORD $CI_REGISTRY
-  script:
-    - docker build -t $IMAGE_TAG .
-  after_script:
-    - docker save $IMAGE_TAG > docker.tar
-  artifacts:
-    expire_in: 30 mins
-    paths:
-      - docker.tar
-  only: 
-    - tags
-
-
-push:
-  image: !reference [.docker, image]
-  stage: deploy
-  needs: 
-    - job: build
-      artifacts: true
-  before_script:
-    - docker login -u $CI_REGISTRY_USER -p $CI_REGISTRY_PASSWORD $CI_REGISTRY
-    - docker load -i docker.tar
-  script:
-    - docker tag $IMAGE_TAG $IMAGE_LATEST
-    - docker push $IMAGE_TAG
-    - docker push $IMAGE_LATEST
-  only: 
-    - tags

Dockerfile

@@ -1,17 +1,18 @@
 ## INIT STEP
 # Install dependencies only when needed
-FROM node:16-alpine AS deps
+FROM node:18-alpine AS deps
 
 RUN apk add --no-cache libc6-compat
 WORKDIR /app
 
 # Copy the files needed to install deps
 COPY package.json yarn.lock ./
+RUN yarn add sharp
 RUN yarn install --frozen-lockfile
 
 ## BUILD STEP
 # Rebuild the source code only when needed
-FROM node:16-alpine AS builder
+FROM node:18-alpine AS builder
 
 WORKDIR /app
 
@@ -23,10 +24,10 @@ COPY . .
 RUN yarn build
 
 ## RUN STEP
-FROM node:16-alpine AS runner
+FROM node:18-alpine AS runner
 
-LABEL author="neshura@proton.me"
-WORKDIR /usr/src/ap
+LABEL author="neshura@neshweb.net"
+WORKDIR /usr/src/app
 
 ENV NODE_ENV production
 

components/layout.tsx

@@ -11,12 +11,12 @@ const LayoutReadyOrNot = ({ children }: { children: React.ReactNode }) => {
         var _paq = window._paq = window._paq || [];
         /* tracker methods like "setCustomDimension" should be called before "trackPageView" */
         _paq.push(["setDocumentTitle", document.domain + "/" + document.title]);
-        _paq.push(["setCookieDomain", "readyornot.neshura-server.net"]);
+        _paq.push(["setCookieDomain", "readyornot.neshweb.net"]);
         _paq.push(["disableCookies"]);
         _paq.push(['trackPageView']);
         _paq.push(['enableLinkTracking']);
         (function() {
-          var u="//temp.neshura-server.net/";
+          var u="//tracking.neshweb.net/";
           _paq.push(['setTrackerUrl', u+'matomo.php']);
           _paq.push(['setSiteId', '2']);
           var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
@@ -26,7 +26,6 @@ const LayoutReadyOrNot = ({ children }: { children: React.ReactNode }) => {
       </Script>
 
       <Sidebar />
-      <div className={styles.sidebarPlaceholder}></div>
       <main className={styles.main}>
         {children}
       </main>

components/sidebar.tsx

@@ -4,7 +4,8 @@ import { useRouter } from 'next/router'
 import useSWR from 'swr';
 import ReadyOrNotMap from '../interfaces/ReadyOrNot';
 import React, { useState } from 'react';
-import Image from 'next/image'
+import Image from 'next/image';
+import useWindowSize from '../components/windowsize';
 
 const fetcher = (url: string) => fetch(url).then((res) => res.json())
 
@@ -12,37 +13,55 @@ function stopPropagation(e: any) {
   e.stopPropagation();
 }
 
-
 const Sidebar = () => {
+  const isMobile = useWindowSize();
   const router = useRouter();
-  const [active, setActive] = useState(true);
-  const { maps, isLoading, isError } = useNavbar();
+  const [active, setActive] = useState(isMobile);
+  const { maps, isLoading, isError }: { maps: ReadyOrNotMap[], isLoading: boolean, isError: boolean } = useNavbar();
 
-  if (isError) { return (<div><nav><a>Error loading Sidemenu</a></nav></div>) }
+  if (typeof (isMobile) === "boolean" && typeof (active) === "undefined") {
+    setActive(!isMobile);
+  }
+
+  if (isError) {
+    return (
+      <>
+        <div><nav><a>Error loading Sidemenu</a></nav></div>
+        <div className={styles.sidebarPlaceholder}></div>
+      </>
+    )
+  }
   else if (isLoading) {
     return (
-      <div>
-        <nav>
-          <a>Loading...</a>
-        </nav>
-      </div>
+      <>
+        <div>
+          <nav>
+            <a>Loading...</a>
+          </nav>
+        </div>
+        <div className={styles.sidebarPlaceholder}></div>
+      </>
     )
   }
   else {
-    // > is a placeholder
     return (
-      <div className={styles.sidebar} onClick={() => setActive(!active)}>
-        <nav className={[styles.sidebarList, (active ? styles.sl_active : styles.sl_inactive)].join(" ")}>
-          {maps.map((item: ReadyOrNotMap) => (
-            <Link key={item.name} href={item.href}>
-              <a className={[styles.navElem, (router.query.map == item.href ? styles.ne_active: styles.ne_inactive)].join(" ")} onClick={stopPropagation}>{item.name}</a>
-            </Link>
-          ))}
-        </nav>
-        <div className={styles.sidebarArrow}>
-          <Image src="/sidebar_arrow.webp" width={32} height={96} alt=">"/>
+      <>
+        <div className={styles.sidebar} onClick={() => setActive(!active)}>
+          <div className={[styles.sl_wrapper, (active ? styles.sl_active : styles.sl_inactive)].join(" ")}>
+            <nav className={styles.sidebarList}>
+              {maps.map((item) => (
+                <Link key={item.name} href={item.href}>
+                  <a className={[styles.navElem, (router.query.map == item.href ? styles.ne_active : styles.ne_inactive)].join(" ")} onClick={stopPropagation}>{item.name}</a>
+                </Link>
+              ))}
+            </nav>
+          </div>
+          <div className={styles.sidebarArrow}>
+            <Image src={active ? "/sidebar_arrow_flipped.webp" : "/sidebar_arrow.webp"} width={32} height={96} alt={active ? ">" : "<"} />
+          </div>
         </div>
-      </div>
+        <div className={styles.sidebarPlaceholder}></div>
+      </>
     );
   }
 }

components/windowsize.tsx

@@ -0,0 +1,34 @@
+import { useEffect, useState } from "react";
+
+interface ScreenSize {
+  width: number | undefined;
+  height: number | undefined;
+}
+
+export default function useWindowSize(): boolean | undefined {
+  const [windowSize, setWindowSize] = useState<ScreenSize>({
+    width: undefined,
+    height: undefined,
+  });
+
+  useEffect(() => {
+    function handleResize() {
+      setWindowSize({
+        width: window.innerWidth,
+        height: window.innerHeight,
+      });
+    }
+    
+    window.addEventListener("resize", handleResize);
+
+    handleResize();
+
+    return () => window.removeEventListener("resize", handleResize);
+  }, []);
+  if(typeof(windowSize.width) === "number") {
+    return windowSize.width <= 1080;
+  }
+  else {
+    return undefined;
+  }
+}

package.json

@@ -1,31 +1,26 @@
 {
-  "name": "www",
-  "version": "0.2.0",
+  "name": "readyornot",
+  "version": "0.1.8",
   "private": true,
   "scripts": {
-    "dev:debug": "NODE_OPTIONS='--inspect' next dev -p 4042",
-    "dev": "next dev",
+    "dev:debug": "NODE_OPTIONS='--inspect' next dev -H :: -p 8002",
+    "dev": "next dev -H :: -p 8002",
     "build": "next build",
-    "start": "next start",
+    "start": "next start -H :: -p 8002",
     "lint": "next lint"
   },
   "dependencies": {
-    "@types/dockerode": "^3.3.14",
-    "@types/next": "^9.0.0",
-    "dockerode": "^3.3.4",
     "next": "^12.3.0",
-    "node": "^18.9.0",
-    "node-html-parser": "^5.3.3",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "sharp": "^0.31.2",
     "swr": "^1.3.0"
   },
   "devDependencies": {
-    "@types/node": "^18.7.18",
+    "@types/node": "18.14.6",
     "@types/react": "^18.0.14",
     "eslint": "^8.23.1",
     "eslint-config-next": "12.2.0",
-    "typescript": "^4.7.4"
+    "typescript": "4.9.3"
   }
 }

pages/[map].tsx

@@ -6,34 +6,12 @@ import { NextPageWithLayout } from './_app';
 import React from 'react';
 import useSWR, { KeyedMutator, mutate } from 'swr';
 import { useRouter } from 'next/router';
-import Image from 'next/image'
+import Image from 'next/image';
 import ReadyOrNotMap from '../interfaces/ReadyOrNot';
+import useWindowSize from '../components/windowsize';
 
 const fetcher = (url: string) => fetch(url).then((res) => res.json())
 
-function useWindowSize() {
-  const [windowSize, setWindowSize] = useState({
-    width: 0,
-    height: 0,
-  });
-
-  useEffect(() => {
-    function handleResize() {
-      setWindowSize({
-        width: window.innerWidth,
-        height: window.innerHeight,
-      });
-    }
-    
-    window.addEventListener("resize", handleResize);
-
-    handleResize();
-
-    return () => window.removeEventListener("resize", handleResize);
-  }, []);
-  return windowSize.width <= 1080;
-}
-
 const ReadyOrNotMaps: NextPageWithLayout = () => {
   const [floor, setFloor] = useState(0);
   const { mapInfo, isLoadingInfo, isErrorInfo } = useMap(useRouter().query.map?.toString() || "a_lethal_obsession")

pages/api/navbar.tsx

@@ -3,7 +3,7 @@ import fsPromises from 'fs/promises'
 import path from 'path'
 import ReadyOrNotMap from '../../interfaces/ReadyOrNot'
 
-export default async function TobarApi(req: any, res: any) {
+export default async function SidebarAPI(req: any, res: any) {
   try {
     // get list of all folders(maps) in the readyornot folder - maybe there is a cleaner way to do this?
     var fs = require('fs')

resources/sidebar_arrow.svg

@@ -28,8 +28,8 @@
      inkscape:document-units="px"
      showgrid="true"
      inkscape:zoom="11.313709"
-     inkscape:cx="-3.1819805"
-     inkscape:cy="35.974057"
+     inkscape:cx="-3.1819804"
+     inkscape:cy="36.062444"
      inkscape:window-width="2560"
      inkscape:window-height="1391"
      inkscape:window-x="0"
@@ -52,7 +52,7 @@
      id="layer1">
     <path
        id="path1211"
-       style="fill:#000000;fill-opacity:1;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       style="fill:#999999;fill-opacity:1;stroke:#999999;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
        d="M 8,3.9708715 V 19.970872 c 3.449498,11.952732 9.599609,28.000391 9.599609,28.000391 L 8,75.970872 v 16 L 24,47.971263 C 18.666759,33.304433 13.333375,18.637654 8,3.9708715 Z"
        sodipodi:nodetypes="ccccccc" />
   </g>

styles/ReadyOrNot.module.css

@@ -174,15 +174,16 @@
 
 .sidebarList {
   overflow-y: scroll;
+  overflow-x: hidden;
   scrollbar-width: none;
   height: 100%;
   display: flex;
   flex-direction: column;
-  padding: 2rem;
   flex-wrap: nowrap;
   justify-content: flex-start;
   align-items: flex-start;
   background-color: var(--background_grey_opaque);
+  padding: 2rem;
 }
 
 .sidebar::-webkit-scrollbar {
@@ -190,15 +191,28 @@
   background: transparent;
 }
 
+.sl_wrapper {
+  height: 100%;
+  overflow: hidden;
+  transition-property: width, visibility;
+  transition-timing-function: ease-in-out, linear;
+  transition-duration: 0.3s, 0s;
+}
+
 .sl_active  {
-  display: flex;
+  visibility: visible;
+  width: 97%;
+  transition-delay: 0s, 0s;
 }
 
 .sl_inactive {
-  display: none;
+  visibility: hidden;
+  width: 0;
+  transition-delay: 0s, 0.3s;
 }
 
 .navElem {
+  white-space:nowrap;
   font-size: 14pt;
   width: auto;
   border-radius: 5px;