fix bugs

.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 }
 }

config/apollo.config.ts

@@ -4,7 +4,7 @@ import typePolicies from '../graphql/typePolicies'
 
 export default defineApolloClient({
  // will be overridden by plugins/apollo.ts using the runtimeConfig
- httpEndpoint: 'http://localhost:3000/api/graphql',
+ httpEndpoint: 'replace-me',
  inMemoryCacheOptions: {
  typePolicies,
  possibleTypes: introspectionResult.possibleTypes,

config/tailwind.config.ts

@@ -17,7 +17,7 @@ function reverse<T extends object>(value: T) {
 
 const config: Partial<Config> = {
  plugins: [formKitTailwind],
- content: ['formkit.config.ts'],
+ content: ['config/formkit.config.ts'],
  theme: {
  extend: {
  colors: {

nuxt.config.ts

@@ -20,14 +20,12 @@ export default defineNuxtConfig({
  devProxy: {
  '/api': 'http://localhost:8080/api',
  '/auth': 'http://localhost:8080/auth',
- '/dynmap': {
- target: 'http://localhost:8123',
- },
+ '/dynmap': 'http://localhost:8123',
  },
  },
 
  build: {
- transpile: ['graphql'],
+ transpile: ['graphql', 'tslib'],
  },
 
  apollo: {
@@ -67,6 +65,8 @@ export default defineNuxtConfig({
  },
 
  runtimeConfig: {
- apiUrl: 'http://localhost:3000/api',
+ public: {
+ apiUrl: 'http://localhost:3000/api',
+ }
  },
 })

package.json

@@ -1,6 +1,7 @@
 {
  "name": "atlas",
  "version": "1.0.0",
+ "packageManager": "pnpm@8.6.12",
  "private": true,
  "scripts": {
  "build": "nuxt build",
@@ -14,11 +15,11 @@
  "lint:ci": "eslint **/*.{vue,ts}",
  "lint:code": "eslint **/*.{vue,ts,gql}",
  "lint:style": "stylelint **/*.vue",
- "lint": "yarn lint:code && yarn lint:style"
+ "lint": "pnpm lint:code && pnpm lint:style"
  },
  "devDependencies": {
- "@formkit/nuxt": "^0.19.3",
- "@formkit/themes": "^0.19.3",
+ "@formkit/nuxt": "^1.0.0",
+ "@formkit/themes": "^1.0.0",
  "@graphql-codegen/add": "^4.0.1",
  "@graphql-codegen/cli": "^3.3.1",
  "@graphql-codegen/fragment-matcher": "^4.0.1",
@@ -30,7 +31,7 @@
  "@nuxtjs/apollo": "^5.0.0-alpha.6",
  "@nuxtjs/color-mode": "^3.1.8",
  "@nuxtjs/eslint-config-typescript": "^12.0.0",
- "@nuxtjs/i18n": "^8.0.0-beta.11",
+ "@nuxtjs/i18n": "^v8.0.0-rc.4",
  "@nuxtjs/tailwindcss": "^6.8.0",
  "@types/leaflet": "^1.8.0",
  "@types/lodash-es": "^4.17.7",

plugins/apollo.ts

@@ -15,15 +15,12 @@ export default defineNuxtPlugin(nuxtApp => {
  token.value = cookie.value
  })
 
- return;
-
  const config = useRuntimeConfig()
  const apollo = nuxtApp.$apollo as { defaultClient: ApolloClient<unknown> }
 
- const authLink = setContext((_, { headers }) => {
+ const authLink = setContext(async (_, { headers }) => {
  const token = ref<string | null>(null)
- nuxtApp.callHook('apollo:auth', { token, client: 'default' })
- //const token = { value: null }
+ await nuxtApp.callHook('apollo:auth', { token, client: 'default' })
 
  if (!token.value) return { headers }
  return {
@@ -35,13 +32,13 @@ export default defineNuxtPlugin(nuxtApp => {
  })
 
  const httpLink = createHttpLink({
- uri: `${config.apiUrl}/graphql`,
+ uri: `${config.public.apiUrl}/graphql`,
  })
 
  const errorLink = onError(error => {
  nuxtApp.callHook('apollo:error', error)
  })
 
  const link = from([errorLink, authLink, httpLink])
- //apollo.defaultClient.setLink(link)
+ apollo.defaultClient.setLink(link)
 })