* Add showSegmentation state. Update this state on completion of segmentation. * feat(fe2): swaps h-screen to h-[100dvh] to ensure onboarding slideshow comments are not below the bottom of the screen when on mobile (and browser bar gets in the way) * feat(fe2): shows selection info/comments on mobile if we're past the onboarding tour * feat(fe2): displays a smaller message in onboarding on mobile rather than the full checklist * feat(fe2): moves isSmallerOrEqualSm to a composable, and removes duplicated code --------- Co-authored-by: andrewwallacespeckle <139135120+andrewwallacespeckle@users.noreply.github.com>
frontend-2 🏬
The replacement for our old Vue 2 Vue CLI frontend SPA app. This one's built with Vue 3, Nuxt 3, Tailwind and is server side rendered. Should be a faster and nicer experience both for our devs and our users!
Look at the nuxt 3 documentation to learn more.
Setup
Make sure to install the dependencies:
yarn install
And create an .env file from .env.example.
Development
Start the development server on http://localhost:8081
yarn dev
Typed GraphQL
Type your queries & fragments using the graphql() helper from ~~/lib/common/generated/gql and then run yarn gqlgen (or yarn gqlgen:watch to run it in watch mode) to generated TS typing information for these GQL documents.
More info: https://the-guild.dev/blog/unleash-the-power-of-fragments-with-graphql-codegen
Troubleshooting
ESLint results doesn't update after GQL type regeneration
Restart the ESLint plugin through VSCode's command palette, this is a bug with the ESLint plugin
GraphQL codegen throws an error like "Unknown fragment XXX" or something else that doesn't make sense
Sometimes the codegen throws misleading errors and the issue is actually something completely different so I suggest removing the new graphql fragments/operations you've added one by one until the generation works again, to isolate the problematic graphql code. And then thoroughly investigate the fragments/operations you've added, because you might have a syntax error somewhere.
Production
Build the application for production:
yarn build
You can serve the production build locally by running yarn preview afterwards.
Checkout the deployment documentation for more information.