fix bugs

Author: PssbleTrngle

.github/workflows/test.yml

@@ -2,34 +2,45 @@ name: Test
 
 on:
    push:
-   merge_group:
+     branches: [main]
+   pull_request:
+     types: [opened, synchronize]
 
 jobs:
    lint:
       runs-on: ubuntu-20.04
       steps:
          - uses: actions/checkout@v3
 
-         - uses: actions/setup-node@v3
+         - name: Install Node.js
+           uses: actions/setup-node@v3
            with:
-              node-version: 16
+             node-version: 16
 
-         - name: Get yarn cache directory path
-           id: yarn
-           run: echo "::set-output name=dir::$(yarn cache dir)"
+         - name: Install pnpm
+           uses: pnpm/action-setup@v2
+           with:
+             version: 8
+             run_install: false
+
+         - name: Get pnpm store directory
+           shell: bash
+           run: |
+             echo "STORE_PATH=$(pnpm store path --silent)" >> $GITHUB_ENV
 
          - uses: actions/cache@v3
+           name: Setup pnpm cache
            with:
-              path: ${{ steps.yarn.outputs.dir }}
-              key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
-              restore-keys: |
-                 ${{ runner.os }}-yarn-
+             path: ${{ env.STORE_PATH }}
+             key: ${{ runner.os }}-pnpm-store-${{ hashFiles('web/**/pnpm-lock.yaml') }}
+             restore-keys: |
+               ${{ runner.os }}-pnpm-store-
 
-         - name: Install Dependencies
-           run: yarn
+         - name: Install dependencies
+           run: pnpm install --frozen-lockfile --strict-peer-dependencies
+           working-directory: web
            env:
-              GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+             GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
 
-         - run: yarn run lint:ci
-           env:
-              GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+         - name: Lint
+           run: pnpm run lint:ci

.npmrc

@@ -1,2 +1,4 @@
 @pssbletrngle:registry=https://npm.pkg.github.com
-//npm.pkg.github.com/:_authToken=${GITHUB_TOKEN}
+//npm.pkg.github.com/:_authToken=${GITHUB_TOKEN}
+
+shamefully-hoist=true

Dockerfile

@@ -1,4 +1,10 @@
-FROM node:16 as builder
+FROM node:18-alpine AS base
+ENV PNPM_HOME="/pnpm"
+ENV PATH="$PNPM_HOME:$PATH"
+RUN corepack enable
+ENV CI=true
+
+FROM base AS builder
 
 WORKDIR /app
 
@@ -7,27 +13,11 @@ COPY . .
 ARG github_token
 ENV GITHUB_TOKEN=$github_token
 
-# Required packages for headless-gl to work, which is used to render the icon assets
-# RUN wget -O /usr/local/bin/dumb-init https://github.com/Yelp/dumb-init/releases/download/v1.2.5/dumb-init_1.2.5_x86_64
-# RUN chmod +x /usr/local/bin/dumb-init
-RUN apt-get update && apt-get install -y --no-install-recommends -y \
-  mesa-utils \
-  xvfb \
-  xauth \
-  libgl1-mesa-dri \
-  libglapi-mesa \
-  libosmesa6
-
-RUN yarn install \
-  --prefer-offline \
-  --frozen-lockfile \
-  --non-interactive \
-  --production=false
-
-RUN xvfb-run yarn icongen
-RUN yarn build
-
-FROM node:18
+RUN --mount=type=cache,id=pnpm,target=/pnpm/store pnpm install --frozen-lockfile
+
+RUN pnpm run build
+
+FROM base AS runner
 
 WORKDIR /app
 

components/Nav.vue

@@ -6,7 +6,7 @@
       </NuxtLink>
       <section class="flex gap-4 ml-auto">
          <ThemeButton />
-         <ProfileIcon v-if="loggedIn" />
+         <ProfileIcon v-if="account" :account="account" />
          <NuxtLink v-else to="/login" class="px-2"> Login </NuxtLink>
       </section>
    </nav>
@@ -26,7 +26,7 @@ const links = ref([
 
 const active = computed(() => [...links.value].reverse().find(it => route.path.startsWith(it.to))?.to)
 
-const { loggedIn } = useSession()
+const { account } = useSession()
 </script>
 
 <style lang="scss" scoped>

components/ProfileIcon.vue

@@ -1,11 +1,13 @@
 <template>
    <NuxtLink to="/me" class="w-12 h-12 justify-self-end">
-      <img v-if="result?.me" alt="your avatar" :src="result.me.avatar!!" class="rounded-full" />
+      <img v-if="account" alt="your avatar" :src="account.avatar!!" class="rounded-full" />
    </NuxtLink>
 </template>
 
 <script lang="ts" setup>
-import { MeDocument } from '~/graphql/generated'
+import { SelfFragment } from "~/graphql/generated";
 
-const { result } = useQuery(MeDocument)
-</script>
+defineProps<{
+  account: SelfFragment
+}>()
+</script>

components/map/Leaflet.vue

@@ -5,11 +5,10 @@
       zoom-animation
       fade-animation
       :crs="crs"
-      :min-zoom="context?.minZoom"
-      :max-zoom="context?.maxZoom"
+      :min-zoom="context?.minZoom!"
+      :max-zoom="context?.maxZoom!"
       :max-native-zoom="context?.maxNativeZoom"
-      @contextmenu="emitWithPos('contextmenu', $event)"
-      @click="emitWithPos('click', $event)"
+      @ready="ready"
    >
       <MapTiles />
       <MapLocations />
@@ -18,14 +17,19 @@
 
 <script lang="ts" setup>
 import { LMap } from '@vue-leaflet/vue-leaflet'
-import { CRS, LeafletMouseEvent } from 'leaflet'
+import { CRS, LeafletMouseEvent, Map } from 'leaflet'
 import { PosFragment } from '~/graphql/generated'
 
 const emit = defineEmits<{
    (e: 'click', pos: PosFragment, event: LeafletMouseEvent): void
    (e: 'contextmenu', pos: PosFragment, event: LeafletMouseEvent): void
 }>()
 
+function ready(map: Map) {
+   map.on('contextmenu', e => emitWithPos('contextmenu', e))
+   map.on('click', e => emitWithPos('click', e))
+}
+
 function emitWithPos(e: 'click' | 'contextmenu', event: LeafletMouseEvent | PointerEvent) {
    if ('latlng' in event) {
       emit(e as any, toWorldPos(context.value!.map, event.latlng), event)
@@ -51,4 +55,4 @@ const background = computed(() => {
 img.leaflet-tile {
    image-rendering: pixelated;
 }
-</style>
+</style>

components/map/View.vue

@@ -20,10 +20,7 @@ interface DynmapOptions {
 }
 
 const { data: options, refresh } = await useFetch<DynmapOptions>('/dynmap/up/configuration', {
-   transform: r => {
-     console.log(r)
-     return JSON.parse(r as unknown as string)
-   },
+   transform: r => JSON.parse(r as unknown as string),
 })
 
 const context = useMap()

components/paginated/Filter.vue

@@ -1,9 +1,15 @@
 <template>
-   <FormKit :id="filterId" :classes="{ form: 'grid grid-flow-col gap-2 w-max mx-auto items-end' }" type="form"
-      :actions="false" :value="rawValue" @input="update">
+   <FormKit
+      :id="filterId"
+      :classes="{ form: 'grid grid-flow-col gap-2 w-max mx-auto items-end' }"
+      type="form"
+      :actions="false"
+      :value="rawValue"
+      @input="update"
+   >
       <span class="bg-solid-900 p-3 rounded mb-2 border-2 border-transparent"> Filter by </span>
       <slot />
-      <FormKit type="button" suffix-icon="trash" @click="reset(filterId)"> Reset </FormKit>
+      <FormKit type="button" suffix-icon="trash" @click="reset(filterId)"> Reset</FormKit>
    </FormKit>
 </template>
 

composables/deferred.ts

@@ -0,0 +1,9 @@
+import { Ref } from 'vue'
+
+export default function useDeferred<T>(changing: Ref<T>) {
+   const deferred = ref(changing.value) as Ref<T>
+   watch(changing, it => {
+      if (notNull(it)) deferred.value = it
+   })
+   return deferred
+}

composables/pagination.ts

@@ -2,6 +2,7 @@ import { TypedDocumentNode } from '@graphql-typed-document-node/core'
 import type { OperationDefinitionNode } from 'graphql'
 import type { Ref } from 'vue'
 import { Exact, PageInfo, Pagination } from '~/graphql/generated'
+import useDeferred from '~/composables/deferred'
 
 export interface Connection<T> {
    nodes: T[]
@@ -60,5 +61,7 @@ export function usePagination<T, Q extends ConnectionQuery<T>, F>(
       }
    }
 
-   return { next, previous, result, error }
+   const deferredResult = useDeferred(result)
+
+   return { next, previous, result: deferredResult, error }
 }