chore: enable static build of landing page (#1724)

Fixes #1603 and fixes
#1725.

.github/workflows/ci.yml

@@ -118,6 +118,8 @@ jobs:
           yarn nuxi generate
           yarn storybook:build
           cp .output/public/_storybook/external-iframe/index.html storybook-static/iframe.html
+          mkdir -p storybook-static/_storybook/external-iframe
+          cp .output/public/_storybook/external-iframe/_payload.js storybook-static/_storybook/external-iframe/_payload.js
           cp -r .output/public/_nuxt storybook-static
 
       - name: Publish and test Storybook

.yarn/patches/@apollo-client-npm-3.7.0-07cf6b7bb6.patch → .yarn/patches/@apollo-client-npm-3.7.3-99f37cd27e.patch

@@ -1,8 +1,8 @@
 diff --git a/package.json b/package.json
-index 67fa7352008b4d34940467ae0d621ca7a9270c0c..7e290a61bc140a00adf3bff5774db6ce74b18adc 100644
+index 0d58f0a7a6bd5186e33ffe0ba86f5a68b6e92477..e6b1970f47d944cfc9cc90df6ba577ee7c6c3821 100644
 --- a/package.json
 +++ b/package.json
-@@ -16,6 +16,19 @@
+@@ -16,6 +16,26 @@
    "main": "./main.cjs",
    "module": "./index.js",
    "types": "./index.d.ts",
@@ -11,12 +11,19 @@ index 67fa7352008b4d34940467ae0d621ca7a9270c0c..7e290a61bc140a00adf3bff5774db6ce
 +      "import": "./core/index.js",
 +      "require": "./core/core.cjs"
 +    },
++    "./core/index.js": {
++      "import": "./core/index.js",
++      "require": "./core/core.cjs"
++    },
 +    "./link/error": {
 +      "import": "./link/error/index.js",
 +      "require": "./link/error/error.cjs"
 +    },
 +    "./utilities/policies/pagination": {
 +      "import": "./utilities/policies/pagination.js"
++    },
++    "./utilities/policies/pagination.js": {
++      "import": "./utilities/policies/pagination.js"
 +    }
 +  },
    "sideEffects": false,

.yarn/patches/@vue-apollo-composable-npm-4.0.0-beta.1-6fc2bfd7ec.patch

@@ -0,0 +1,15 @@
+diff --git a/package.json b/package.json
+index 2cb155979334911508c0647f14fe28fb7ac40295..f9310fdd18a18be20c3c67ebb723b2552de44d4f 100644
+--- a/package.json
++++ b/package.json
+@@ -25,6 +25,10 @@
+   "main": "dist/index.js",
+   "types": "dist/index.d.ts",
+   "module": "dist/index.esm.js",
++  "exports": {
++    "import": "./dist/index.esm.js",
++    "require": "./dist/index.js"
++  },
+   "files": [
+     "dist"
+   ],

.yarn/patches/@vue-apollo-util-npm-4.0.0-beta.4-ab694c9566.patch

@@ -0,0 +1,10 @@
+diff --git a/dist/esm/errorLog.js b/dist/esm/errorLog.js
+index 5965a6704c3e18ef54e4c21564153f0e7a7b1923..002685d42effc1d2ad0ed6612239956b01d47e58 100644
+--- a/dist/esm/errorLog.js
++++ b/dist/esm/errorLog.js
+@@ -1,4 +1,4 @@
+-import { print } from 'graphql/language/printer';
++import { print } from 'graphql/language/printer.mjs';
+ export function getErrorMessages(error) {
+     const messages = [];
+     const { graphQLErrors, networkError } = error;

.yarn/patches/mount-vue-component-npm-0.10.2-4968f76fd9.patch

@@ -0,0 +1,15 @@
+diff --git a/package.json b/package.json
+index 57735c88e8e3ab5e6b9503872b5c39752a8d4c63..a440df371c1e390da3168ab0035b965e2e561b15 100644
+--- a/package.json
++++ b/package.json
+@@ -6,6 +6,10 @@
+   "main": "dist/index.cjs.js",
+   "module": "dist/index.esm.js",
+   "types": "./index.d.ts",
++  "exports": {
++    "import": "./dist/index.esm.js",
++    "require": "./dist/index.cjs.js"
++  },
+   "scripts": {
+     "build": "rollup -c",
+     "preversion": "npm run test && npm run build",

composables/detectOs.ts

@@ -1,4 +1,7 @@
 export function detectOs() {
+  if (!process.client) {
+    return null
+  }
   const platform = window.navigator.platform
   const macosPlatforms = ['Macintosh', 'MacIntel', 'MacPPC', 'Mac68K']
   const windowsPlatforms = ['Win32', 'Win64', 'Windows', 'WinCE']

layouts/content.vue

@@ -170,32 +170,35 @@ import { breakpointsTailwind, useBreakpoints } from '@vueuse/core'
 
 const isSmallDisplay = useBreakpoints(breakpointsTailwind).smallerOrEqual('md')
 
-// Make sure that the content is scrolled and not the unscrollable window
-// (vue-router for example uses window.scrollTo)
-// Taken from https://github.com/vuejs/vue-router/issues/1187#issuecomment-893964727
-const offset = 80
-const contentElementSelector = '.n-layout-scroll-container'
-Object.defineProperty(window, 'pageXOffset', {
-  get() {
-    return document.querySelector(contentElementSelector)?.scrollLeft ?? 0
-  },
-})
-Object.defineProperty(window, 'pageYOffset', {
-  get() {
-    return document.querySelector(contentElementSelector)?.scrollTop ?? 0
-  },
-})
-const windowScrollTo = window.scrollTo
-Object.defineProperty(window, 'scrollTo', {
-  value: (option: { top: number; left: number }) => {
-    const els = document.querySelectorAll(contentElementSelector)
-    const el = els[els.length - 1]
-    if (el && el.scrollHeight > el.clientHeight) {
-      // element can be scrolled
-      el.scrollTo(option.left, el.scrollTop + option.top - offset)
-    } else {
-      windowScrollTo.call(window, option.left, option.top)
-    }
-  },
-})
+// Only on client-side
+if (process.client) {
+  // Make sure that the content is scrolled and not the unscrollable window
+  // (vue-router for example uses window.scrollTo)
+  // Taken from https://github.com/vuejs/vue-router/issues/1187#issuecomment-893964727
+  const offset = 80
+  const contentElementSelector = '.n-layout-scroll-container'
+  Object.defineProperty(window, 'pageXOffset', {
+    get() {
+      return document.querySelector(contentElementSelector)?.scrollLeft ?? 0
+    },
+  })
+  Object.defineProperty(window, 'pageYOffset', {
+    get() {
+      return document.querySelector(contentElementSelector)?.scrollTop ?? 0
+    },
+  })
+  const windowScrollTo = window.scrollTo
+  Object.defineProperty(window, 'scrollTo', {
+    value: (option: { top: number; left: number }) => {
+      const els = document.querySelectorAll(contentElementSelector)
+      const el = els[els.length - 1]
+      if (el && el.scrollHeight > el.clientHeight) {
+        // element can be scrolled
+        el.scrollTo(option.left, el.scrollTop + option.top - offset)
+      } else {
+        windowScrollTo.call(window, option.left, option.top)
+      }
+    },
+  })
+}
 </script>

nuxt.config.ts

@@ -15,18 +15,11 @@ export default defineNuxtConfig({
     // Prevent 'reflect-metadata' from being treeshaked (since we don't explicitly use the import it would otherwise be removed)
     moduleSideEffects: ['reflect-metadata'],
     prerender: {
-      // Needed for storybook support
+      // Needed for storybook support (otherwise the file is not created during nuxi generate)
       routes: ['/_storybook/external-iframe'],
     },
   },
 
-  /*
-   ** Disable server-side rendering for now
-   ** See https://v3.nuxtjs.org/api/configuration/nuxt.config#ssr
-   ** and https://v3.nuxtjs.org/guide/concepts/rendering for a big-picture overview.
-   */
-  ssr: false,
-
   /*
    ** Headers of the page
    ** See https://v3.nuxtjs.org/getting-started/seo-meta
@@ -92,6 +85,7 @@ export default defineNuxtConfig({
     '/gsoc/**': { redirect: '/codeprojects/gsoc' },
     '/bluehat2022': { redirect: '/codeprojects/bluehat2022' },
     '/surveys/': { redirect: '/surveys/2015' },
+    '/': { static: true },
   },
 
   /**

package.json

@@ -160,13 +160,16 @@
     "unist-builder": "^3.0.0",
     "remark-parse": "^10.0.1",
     "express-session@^1.17.3": "patch:express-session@npm%3A1.17.3#./.yarn/patches/express-session-npm-1.17.3-0819dbe06c.patch",
-    "@apollo/client@^3.7.0": "patch:@apollo/client@npm%3A3.7.0#./.yarn/patches/@apollo-client-npm-3.7.0-07cf6b7bb6.patch",
+    "@apollo/client@^3.7.3": "patch:@apollo/client@npm%3A3.7.3#./.yarn/patches/@apollo-client-npm-3.7.3-99f37cd27e.patch",
     "tslib": "^2.4.0",
+    "mount-vue-component@^0.10.2": "patch:mount-vue-component@npm%3A0.10.2#./.yarn/patches/mount-vue-component-npm-0.10.2-4968f76fd9.patch",
+    "@vue/[email protected]": "patch:@vue/apollo-composable@npm%3A4.0.0-beta.1#./.yarn/patches/@vue-apollo-composable-npm-4.0.0-beta.1-6fc2bfd7ec.patch",
     "@nuxt/content": "patch:@nuxt/content@npm%3A2.4.3#./.yarn/patches/@nuxt-content-npm-2.4.3-36a92b2a56.patch",
     "uuid@^8.3.0": "^9.0.0",
     "uuid@^8.3.2": "^9.0.0",
     "eslint-scope@^7.1.1": "patch:eslint-scope@npm%3A7.1.1#./.yarn/patches/eslint-scope-npm-7.1.1-23935eb377.patch",
-    "eslint-scope@^5.1.1": "patch:eslint-scope@npm%3A7.1.1#./.yarn/patches/eslint-scope-npm-7.1.1-23935eb377.patch"
+    "eslint-scope@^5.1.1": "patch:eslint-scope@npm%3A7.1.1#./.yarn/patches/eslint-scope-npm-7.1.1-23935eb377.patch",
+    "@vue/apollo-util@^4.0.0-beta.4": "patch:@vue/apollo-util@npm%3A4.0.0-beta.4#./.yarn/patches/@vue-apollo-util-npm-4.0.0-beta.4-ab694c9566.patch"
   },
   "resolutionsComments": {
     "@types/react": "Otherwise these types interfere with the types from vite: https://github.com/johnsoncodehk/volar/discussions/592#discussioncomment-1580518",

pages/_storybook/external-iframe.vue

@@ -55,14 +55,16 @@ export function renderToCanvas(
 
   mount(element, { element: domElement, app: useNuxtApp().vueApp })
 }
-// @ts-expect-error: storybook typing is inconsistent
-// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
-const api = start(renderToCanvas, { applyDecorators })
-const framework = 'vue3'
+
 definePageMeta({ layout: false, alias: '/iframe.html' })
 
 export default defineComponent({
   setup: () => {
+    if (!process.client) return
+    // @ts-expect-error: storybook typing is inconsistent
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+    const api = start(renderToCanvas, { applyDecorators })
+    const framework = 'vue3'
     // eslint-disable-next-line @typescript-eslint/no-unsafe-call
     api.configure(
       framework,

pages/index.vue

@@ -71,11 +71,13 @@
                 class="mx-auto"
                 style="height: 3.2em"
               >
-                <a
-                  class="text-2xl"
-                  :href="downloadUrl"
-                  >Download JabRef</a
-                >
+                <ClientOnly>
+                  <a
+                    class="text-2xl"
+                    :href="constructDownloadUrl()"
+                    >Download JabRef</a
+                  >
+                </ClientOnly>
               </n-button>
             </div>
           </div>
@@ -116,6 +118,4 @@ const links = [
     href: 'https://blog.jabref.org/',
   },
 ]
-
-const downloadUrl = constructDownloadUrl()
 </script>

server/api.e2e.test.ts

@@ -0,0 +1,78 @@
+import { gql as gqlNotVerified } from 'graphql-tag'
+import { api, root } from '~/test/api-e2e/supertest'
+
+describe('invalid query', () => {
+  it('returns an error', async () => {
+    const { errors, response } = await api()
+      .query(
+        gqlNotVerified`
+          query WrongQueryE2E($id: String) {
+            user(id: $id) {
+              id
+              # eslint-disable-next-line @graphql-eslint/fields-on-correct-type
+              name
+            }
+          }
+        `
+      )
+      .variables({ id: '' })
+
+    expect(response.statusCode).toBe(400)
+    expect(response.get('content-type')).toContain('application/json')
+    expect(errors?.map((error) => error.message)).toMatchInlineSnapshot(`
+      [
+        "Cannot query field \\"name\\" on type \\"User\\".",
+        "Variable \\"$id\\" of type \\"String\\" used in position expecting type \\"ID!\\".",
+      ]
+    `)
+  })
+})
+
+describe('request without query', () => {
+  it('returns an error', async () => {
+    const response = await root()
+      .get('/api')
+      .set('Apollo-Require-Preflight', 'True')
+
+    expect(response.statusCode).toBe(400)
+    expect(response.text).toContain(
+      'GraphQL operations must contain a non-empty `query`'
+    )
+  })
+})
+
+describe('preflight', () => {
+  it('works', async () => {
+    const response = await root()
+      .options('/api')
+      .set('Origin', 'https://studio.apollographql.com')
+      .set('Access-Control-Request-Method', 'POST')
+
+    expect(response.body).toStrictEqual({})
+    expect(response.statusCode).toBe(204)
+    expect(response.get('access-control-allow-methods')).toBe(
+      'GET,POST,OPTIONS'
+    )
+    expect(response.get('access-control-allow-origin')).toBe(
+      'https://studio.apollographql.com'
+    )
+    expect(response.get('access-control-allow-headers')).toBe('Content-Type')
+  })
+
+  it('works on route with slash', async () => {
+    const response = await root()
+      .options('/api/')
+      .set('Origin', 'https://studio.apollographql.com')
+      .set('Access-Control-Request-Method', 'POST')
+
+    expect(response.body).toStrictEqual({})
+    expect(response.statusCode).toBe(204)
+    expect(response.get('access-control-allow-methods')).toBe(
+      'GET,POST,OPTIONS'
+    )
+    expect(response.get('access-control-allow-origin')).toBe(
+      'https://studio.apollographql.com'
+    )
+    expect(response.get('access-control-allow-headers')).toBe('Content-Type')
+  })
+})