feat(webapp): bind local styleguide & fix maintenance page (#8933)

.github/file-filters.yml

@@ -12,6 +12,7 @@ docker: &docker
 webapp: &webapp
   - '.github/workflows/test-webapp.yml'
   - 'webapp/**/*'
+  - 'styleguide/**/*'
   - 'package.json'
 
 docs-check: &docs-check

.github/workflows/docker-push.yml

@@ -24,27 +24,27 @@ jobs:
             file: backend/Dockerfile
             target: production
           - name: webapp-base
-            context: webapp
+            context: .
             file: webapp/Dockerfile
             target: base
           - name: webapp-build
-            context: webapp
+            context: .
             file: webapp/Dockerfile
             target: build
           - name: webapp
-            context: webapp
+            context: .
             file: webapp/Dockerfile
             target: production
           - name: maintenance-base
-            context: webapp
+            context: .
             file: webapp/Dockerfile.maintenance
             target: base
           - name: maintenance-build
-            context: webapp
+            context: .
             file: webapp/Dockerfile.maintenance
             target: build
           - name: maintenance
-            context: webapp
+            context: .
             file: webapp/Dockerfile.maintenance
             target: production
     runs-on: ubuntu-latest

.github/workflows/test-webapp.yml

@@ -46,7 +46,7 @@ jobs:
 
       - name: Webapp | Build 'test' image
         run: |
-          docker build --target test -t "ocelotsocialnetwork/webapp:test" webapp/
+          docker build --target test -f webapp/Dockerfile -t "ocelotsocialnetwork/webapp:test" .
           docker save "ocelotsocialnetwork/webapp:test" > /tmp/webapp.tar
 
       - name: Cache docker image

docker-compose.build.yml

@@ -4,7 +4,7 @@ services:
     image: ghcr.io/ocelot-social-community/ocelot-social/webapp-build:${OCELOT_VERSION:-latest}
     build:
       target: build
-      context: webapp
+      context: .
 
   backend:
     image: ghcr.io/ocelot-social-community/ocelot-social/backend-build:${OCELOT_VERSION:-latest}
@@ -16,5 +16,5 @@ services:
     image: ghcr.io/ocelot-social-community/ocelot-social/maintenance-build:${OCELOT_VERSION:-latest}
     build:
       target: build
-      context: webapp
+      context: .
       dockerfile: ./Dockerfile.maintenance

docker-compose.yml

@@ -7,7 +7,8 @@ services:
   webapp:
     image: ghcr.io/ocelot-social-community/ocelot-social/webapp:${OCELOT_VERSION:-latest}
     build:
-      context: ./webapp
+      context: .
+      dockerfile: ./webapp/Dockerfile
       target: production
     depends_on:
       - backend
@@ -50,8 +51,8 @@ services:
   maintenance:
     image: ghcr.io/ocelot-social-community/ocelot-social/maintenance:${OCELOT_VERSION:-latest}
     build:
-      context: ./webapp
+      context: .
-      dockerfile: Dockerfile.maintenance
+      dockerfile: ./webapp/Dockerfile.maintenance
     ports:
       - 3001:80
 

styleguide/.gitignore

@@ -1,6 +1,7 @@
 .DS_Store
 node_modules
 docs
+dist
 
 # local env files
 .env.local

styleguide/package.json

@@ -4,11 +4,11 @@
   "private": false,
   "scripts": {
     "serve": "http-server ./docs -o -s",
-    "build": "cross-env NODE_OPTIONS=--openssl-legacy-provider yarn theo && vue-cli-service build --no-fix",
+    "build": "cross-env NODE_OPTIONS=--openssl-legacy-provider yarn theo && cross-env NODE_OPTIONS=--openssl-legacy-provider vue-cli-service build --no-fix",
     "lint": "vue-cli-service lint --no-fix-warning",
     "dev": "npm-run-all --parallel theo:onchange theo servedev",
     "servedev": "vue-cli-service serve --open --no-fix",
-    "build:lib": "yarn theo && cross-env BUILD=library vue-cli-service build --target lib --name system ./src/library.js --no-fix",
+    "build:lib": "cross-env NODE_OPTIONS=--openssl-legacy-provider yarn theo && cross-env BUILD=library NODE_OPTIONS=--openssl-legacy-provider vue-cli-service build --target lib --name system ./src/library.js --no-fix",
     "theo": "theo ./src/system/tokens/tokens.yml --transform web --format map.scss,scss,raw.json,json --dest ./src/system/tokens/generated",
     "theo:onchange": "onchange \"./src/system/tokens/*.yml\" -- npm run theo",
     "test": "echo 'TODO: FIX & ADD TESTING!'",

styleguide/src/system/components/layout/Flex/Flex.vue

@@ -9,7 +9,7 @@
 
 <script>
 import { getSpace } from '@@/utils'
-import { mediaQuery } from '@@/mixins'
+import { mediaQuery } from '../../../mixins'
 
 /**
  * Used in combination with the flex item component to create flexible layouts.

styleguide/src/system/components/layout/Flex/FlexItem.vue

@@ -9,7 +9,7 @@
 
 <script>
 import { getSpace } from '@@/utils'
-import { mediaQuery } from '@@/mixins'
+import { mediaQuery } from '../../../mixins'
 
 /**
  * @version 1.0.0

styleguide/src/system/components/layout/Space/Space.vue

@@ -13,7 +13,7 @@
 
 <script>
 import { getSpace } from '@@/utils'
-import { mediaQuery } from '@@/mixins'
+import { mediaQuery } from '../../../mixins'
 
 /**
  * Use this component for grouping and separation.

webapp/.dockerignore

@@ -1,6 +1,5 @@
 .vscode/
 
-styleguide/
 node_modules/
 npm-debug.log
 

webapp/.eslintignore

@@ -1,6 +1,5 @@
 node_modules
 dist
 .nuxt
-styleguide/
 **/*.min.js
 static/sw.js

webapp/.gitignore

@@ -30,7 +30,6 @@ build/Release
 
 # Dependency directories
 node_modules/
-styleguide/
 
 # TypeScript v1 declaration files
 typings/

webapp/Dockerfile

@@ -1,3 +1,11 @@
+FROM node:24.9.0-alpine AS styleguide
+RUN apk --no-cache add git python3 make g++
+RUN mkdir -p /app
+WORKDIR /app
+COPY styleguide .
+RUN yarn install --production=false --frozen-lockfile --non-interactive
+RUN yarn run build:lib
+
 FROM node:20.12.1-alpine AS base
 LABEL org.label-schema.name="ocelot.social:webapp"
 LABEL org.label-schema.description="Web Frontend of the Social Network Software ocelot.social"
@@ -13,14 +21,15 @@ EXPOSE ${PORT}
 RUN apk --no-cache add git python3 make g++ bash jq
 RUN mkdir -p /app
 WORKDIR /app
+COPY --from=styleguide ./app/ /styleguide/
 CMD ["/bin/bash", "-c", "yarn run start"]
 
 FROM base AS development
 CMD ["/bin/bash", "-c", "yarn install && yarn run dev"]
 
 FROM base AS build
-COPY . .
+COPY webapp/ .
-ONBUILD COPY ./branding .
+ONBUILD COPY webapp/branding .
 ONBUILD RUN tools/merge-locales.sh
 ONBUILD RUN yarn install --production=false --frozen-lockfile --non-interactive
 ONBUILD RUN yarn run build
@@ -39,7 +48,7 @@ ONBUILD RUN cd /build && yarn install --production=true --frozen-lockfile --non-
 
 FROM base AS test_build
 ENV NODE_ENV=test
-COPY . .
+COPY webapp/. .
 RUN tools/merge-locales.sh
 RUN yarn install --production=false --frozen-lockfile --non-interactive
 RUN yarn run build

webapp/Dockerfile.maintenance

@@ -1,4 +1,4 @@
-FROM nginx:alpine AS base
+FROM nginx:1.29.1-alpine AS base
 LABEL org.label-schema.name="ocelot.social:maintenance"
 LABEL org.label-schema.description="Maintenance page of the Social Network Software ocelot.social"
 LABEL org.label-schema.usage="https://github.com/Ocelot-Social-Community/Ocelot-Social/blob/master/README.md"
@@ -8,27 +8,24 @@ LABEL org.label-schema.vendor="ocelot.social Community"
 LABEL org.label-schema.schema-version="1.0"
 LABEL maintainer="devops@ocelot.social"
 
+FROM node:24.9.0-alpine AS styleguide
+RUN apk --no-cache add git python3 make g++
+RUN mkdir -p /app
+WORKDIR /app
+COPY styleguide .
+RUN yarn install --production=false --frozen-lockfile --non-interactive
+RUN yarn run build:lib
+
 FROM node:20.12.1-alpine AS build
 ENV NODE_ENV="production"
 RUN apk --no-cache add git python3 make g++ bash jq
+COPY --from=styleguide ./app/ /styleguide/
 RUN mkdir -p /app
 WORKDIR /app
-COPY assets assets
+COPY webapp/ .
-COPY components/LocaleSwitch/ components/LocaleSwitch
+# Delete all Pages
-COPY components/Dropdown.vue components/Dropdown.vue
+RUN rm -rf ./pages
-COPY layouts/blank.vue layouts/blank.vue
+ONBUILD COPY webapp/branding .
-COPY locales locales
-COPY mixins mixins
-COPY plugins/i18n.js plugins/v-tooltip.js plugins/styleguide.js plugins/
-COPY static static
-COPY constants constants
-COPY nuxt.config.js nuxt.config.js
-COPY config/ config/
-COPY tools/ tools/
-COPY maintenance/nginx maintenance/nginx
-COPY maintenance/source maintenance/source
-COPY package.json yarn.lock ./
-ONBUILD COPY ./branding .
 ONBUILD RUN tools/merge-locales.sh
 ONBUILD RUN yarn install --production=false --frozen-lockfile --non-interactive
 ONBUILD RUN cp -r maintenance/source/* ./

webapp/assets/_new/styles/tokens.scss

@@ -354,11 +354,11 @@ $z-index-surface: 1;
  * @tokens Media Query
  */
 
-$media-query-x-small: (min-width: 480px);
+$media-query-x-small: "(min-width: 480px)";
-$media-query-small: (min-width: 600px);
+$media-query-small: "(min-width: 600px)";
-$media-query-medium: (min-width: 768px);
+$media-query-medium: "(min-width: 768px)";
-$media-query-large: (min-width: 1024px);
+$media-query-large: "(min-width: 1024px)";
-$media-query-x-large: (min-width: 1200px);
+$media-query-x-large: "(min-width: 1200px)";
 
 /**
  * @tokens Background Images

webapp/components/ContentMenu/ContentMenu.spec.js

@@ -1,7 +1,7 @@
 import { mount, createLocalVue } from '@vue/test-utils'
 import Vuex from 'vuex'
 import VTooltip from 'v-tooltip'
-import Styleguide from '@human-connection/styleguide'
+import Styleguide from '@@/'
 import ContentMenu from './ContentMenu.vue'
 
 const localVue = createLocalVue()

webapp/components/LoginForm/LoginForm.spec.js

@@ -1,6 +1,6 @@
 import Vue from 'vue'
 import LoginForm from './LoginForm.vue'
-import Styleguide from '@human-connection/styleguide'
+import Styleguide from '@@/'
 import Vuex from 'vuex'
 import { mount, createLocalVue } from '@vue/test-utils'
 

webapp/config/index.js

@@ -11,7 +11,6 @@ const environment = {
   DEBUG: process.env.NODE_ENV !== 'production' || false,
   PRODUCTION: process.env.NODE_ENV === 'production' || false,
   NUXT_BUILD: process.env.NUXT_BUILD || '.nuxt',
-  STYLEGUIDE_DEV: process.env.STYLEGUIDE_DEV || false,
 }
 
 const server = {

webapp/jest.config.js

@@ -34,6 +34,8 @@ module.exports = {
     '@mapbox/mapbox-gl-geocoder': 'identity-obj-proxy',
     'vue2-datepicker/locale/undefined': 'vue2-datepicker/locale/en',
     '^@/(.*)$': '<rootDir>/src/$1',
+    // jest is unable to build the styleguide on its own, as it uses webpack.
+    '^@@/': '<rootDir>/../styleguide/dist/system.umd.min.js',
     '^~/(.*)$': '<rootDir>/$1',
   },
   moduleFileExtensions: ['js', 'json', 'vue'],

webapp/jsconfig.json

@@ -15,7 +15,7 @@
         "*"
       ],
       "@@/*": [
-        "./*"
+        "../styleguide/src/system/*"
       ],
     }
   }

webapp/maintenance/source/nuxt.config.maintenance.js

@@ -1,11 +1,13 @@
 import defaultConfig from './nuxt.config.js'
 
-const { css, styleResources, manifest } = defaultConfig
+const { css, styleResources, manifest, build, mode, buildModules } = defaultConfig
+
+const CONFIG = require('./config').default // we need to use require since this is only evaluated at compile time.
 
 export default {
-  css,
+  mode,
-  styleResources,
+
-  manifest,
+  env: CONFIG,
 
   head: {
     title: manifest.name,
@@ -32,14 +34,16 @@ export default {
     ],
   },
 
+  css,
+  styleResources,
+
   plugins: [
+    { src: '~/plugins/base-components.js', ssr: true },
     { src: `~/plugins/styleguide.js`, ssr: true },
     { src: '~/plugins/i18n.js', ssr: true },
     { src: '~/plugins/v-tooltip.js', ssr: false },
   ],
 
-  modules: ['cookie-universal-nuxt', '@nuxtjs/style-resources'],
-
   router: {
     extendRoutes(routes, resolve) {
       routes.push({
@@ -49,14 +53,15 @@ export default {
       })
     },
   },
-  build: {
+
-    extend(config, ctx) {
+  modules: [
-      config.module.rules.push({
+    ['@nuxtjs/dotenv', { only: Object.keys(CONFIG) }],
-        enforce: 'pre',
+    ['nuxt-env', { keys: Object.keys(CONFIG) }],
-        test: /\.html$/,
+    'cookie-universal-nuxt',
-        loader: 'raw-loader',
+    '@nuxtjs/style-resources',
-        exclude: /(node_modules)/,
+  ],
-      })
+
-    },
+  buildModules,
-  },
+  manifest,
+  build,
 }

webapp/nuxt.config.js

@@ -5,12 +5,10 @@ import metadata from './constants/metadata.js'
 const CONFIG = require('./config').default // we need to use require since this is only evaluated at compile time.
 
 const styleguidePath = '../styleguide'
-const styleguideStyles = CONFIG.STYLEGUIDE_DEV
+const styleguideStyles = [
-  ? [
+  `${styleguidePath}/src/system/styles/main.scss`,
-      `${styleguidePath}/src/system/styles/main.scss`,
+  `${styleguidePath}/src/system/styles/shared.scss`,
-      `${styleguidePath}/src/system/styles/shared.scss`,
+]
-    ]
-  : '@human-connection/styleguide/dist/shared.scss'
 
 export default {
   buildDir: CONFIG.NUXT_BUILD,
@@ -103,7 +101,7 @@ export default {
   styleResources: {
     scss: [
       '~assets/_new/styles/uses.scss',
-      styleguideStyles,
+      ...styleguideStyles,
       '~assets/_new/styles/tokens.scss',
       '~assets/styles/imports/_branding.scss',
       '~assets/_new/styles/export.scss',
@@ -117,7 +115,7 @@ export default {
   plugins: [
     { src: '~/plugins/base-components.js', ssr: true },
     {
-      src: `~/plugins/styleguide${CONFIG.STYLEGUIDE_DEV ? '-dev' : ''}.js`,
+      src: `~/plugins/styleguide.js`,
       ssr: true,
     },
     { src: '~/plugins/i18n.js', ssr: true },
@@ -274,16 +272,11 @@ export default {
         config.devtool = 'source-map'
       }
 
-      config.resolve.alias['~@'] = path.resolve(__dirname, '/')
+      config.resolve.alias['@@'] = path.resolve(__dirname, `${styleguidePath}/src/system`)
-      config.resolve.alias['@@'] = path.resolve(__dirname, '/')
+      config.module.rules.push({
-
+        resourceQuery: /blockType=docs/,
-      if (CONFIG.STYLEGUIDE_DEV) {
+        loader: require.resolve(`${styleguidePath}/src/loader/docs-trim-loader.js`),
-        config.resolve.alias['@@'] = path.resolve(__dirname, `${styleguidePath}/src/system`)
+      })
-        config.module.rules.push({
-          resourceQuery: /blockType=docs/,
-          loader: require.resolve(`${styleguidePath}/src/loader/docs-trim-loader.js`),
-        })
-      }
 
       const svgRule = config.module.rules.find((rule) => rule.test.test('.svg'))
       svgRule.test = /\.(png|jpe?g|gif|webp)$/

webapp/package.json

@@ -8,7 +8,6 @@
   "private": false,
   "scripts": {
     "dev": "cross-env NODE_OPTIONS=--openssl-legacy-provider nuxt",
-    "dev:styleguide": "cross-env STYLEGUIDE_DEV=true yarn run dev",
     "storybook": "cross-env NODE_OPTIONS=--openssl-legacy-provider start-storybook -p 3002  -s ./static -c storybook/",
     "build": "cross-env NODE_OPTIONS=--openssl-legacy-provider nuxt build",
     "start": "cross-env NODE_OPTIONS=--openssl-legacy-provider nuxt start",
@@ -22,7 +21,6 @@
     "test:unit:debug": "node --inspect-brk ./node_modules/jest/bin/jest.js --no-cache --runInBand"
   },
   "dependencies": {
-    "@human-connection/styleguide": "0.5.22",
     "@mapbox/mapbox-gl-geocoder": "^5.0.2",
     "@nuxtjs/apollo": "^4.0.0-rc19",
     "@nuxtjs/axios": "~5.9.7",

webapp/pages/settings/blocked-users.spec.js

@@ -1,6 +1,6 @@
 import { mount, createLocalVue } from '@vue/test-utils'
 import BlockedUsers from './blocked-users.vue'
-import Styleguide from '@human-connection/styleguide'
+import Styleguide from '@@/'
 import Filters from '~/plugins/vue-filters'
 import { unblockUser } from '~/graphql/settings/BlockedUsers'
 

webapp/pages/settings/muted-users.spec.js

@@ -1,6 +1,6 @@
 import { mount, createLocalVue } from '@vue/test-utils'
 import MutedUsers from './muted-users.vue'
-import Styleguide from '@human-connection/styleguide'
+import Styleguide from '@@/'
 import Filters from '~/plugins/vue-filters'
 import { unmuteUser } from '~/graphql/settings/MutedUsers'
 

webapp/plugins/styleguide-dev.js

@@ -1,4 +0,0 @@
-import Vue from 'vue'
-import Styleguide from '@@'
-
-Vue.use(Styleguide)

webapp/plugins/styleguide.js

@@ -1,5 +1,4 @@
 import Vue from 'vue'
-import Styleguide from '@human-connection/styleguide'
+import Styleguide from '@@/'
-import '@human-connection/styleguide/dist/system.css'
 
 Vue.use(Styleguide)

webapp/storybook/helpers.js

@@ -1,7 +1,7 @@
 import Vue from 'vue'
 import Vuex from 'vuex'
 import vuexI18n from 'vuex-i18n/dist/vuex-i18n.umd.js'
-import Styleguide from '@human-connection/styleguide'
+import Styleguide from '@@/'
 import { faker } from '@faker-js/faker'
 import Filters from '~/plugins/vue-filters'
 import Directives from '~/plugins/vue-directives'

webapp/storybook/layout.vue

@@ -5,7 +5,8 @@
 </template>
 
 <style lang="scss">
-@import '../node_modules/@human-connection/styleguide/dist/system.css';
+@import '../styleguide/src/system/styles/main.scss';
+@import '../styleguide/src/system/styles/shared.scss';
 @import '~/assets/styles/main.scss';
 
 .container {

webapp/storybook/webpack.config.js

@@ -21,7 +21,8 @@ module.exports = async ({ config, mode }) => {
           patterns: [
             path.resolve(
               __dirname,
-              '../node_modules/@human-connection/styleguide/dist/shared.scss',
+              '../styleguide/src/system/styles/main.scss',
+              '../styleguide/src/system/styles/shared.scss',
             ),
             path.resolve(__dirname, '../assets/_new/styles/tokens.scss'),
           ],

webapp/test/testSetup.js

@@ -1,7 +1,7 @@
 import { createLocalVue } from '@vue/test-utils'
 import Vuex from 'vuex'
 import VTooltip from 'v-tooltip'
-import Styleguide from '@human-connection/styleguide'
+import Styleguide from '@@/'
 import BaseComponents from '~/plugins/base-components'
 import Filters from '~/plugins/vue-filters'
 import InfiniteLoading from '~/plugins/vue-infinite-loading'

webapp/yarn.lock

@@ -2536,13 +2536,6 @@
   resolved "https://registry.yarnpkg.com/@faker-js/faker/-/faker-9.9.0.tgz#3ad015fbbaaae7af3149555e0f22b4b30134c69d"
   integrity sha512-OEl393iCOoo/z8bMezRlJu+GlRGlsKbUAN7jKB6LhnKoqKve5DXRpalbItIIcwnCjs1k/FOPjFzcA6Qn+H+YbA==
 
-"@human-connection/styleguide@0.5.22":
-  version "0.5.22"
-  resolved "https://registry.yarnpkg.com/@human-connection/styleguide/-/styleguide-0.5.22.tgz#444ec98b8f8d1c438e2e99736dcffe432b302755"
-  integrity sha512-zYDhWWoDIEcUhAJPSrb2azBPxBfcr6igVtTx1Bz/FNMW2bIWfZIRv9U4LaJ9RG/GgjKNcVE+OPdB8zCcwqyQyA==
-  dependencies:
-    vue "^2.6.10"
-
 "@humanwhocodes/config-array@^0.5.0":
   version "0.5.0"
   resolved "https://registry.yarnpkg.com/@humanwhocodes/config-array/-/config-array-0.5.0.tgz#1407967d4c6eecd7388f83acf1eaf4d0c6e58ef9"
@@ -20331,11 +20324,6 @@ vue2-dropzone@3.6.0:
   dependencies:
     dropzone "^5.5.1"
 
-vue@^2.6.10:
-  version "2.6.10"
-  resolved "https://registry.yarnpkg.com/vue/-/vue-2.6.10.tgz#a72b1a42a4d82a721ea438d1b6bf55e66195c637"
-  integrity sha512-ImThpeNU9HbdZL3utgMCq0oiMzAkt1mcgy3/E6zWC/G6AaQoeuFdsl9nDhTDU3X1R6FK7nsIUuRACVcjI+A2GQ==
-
 vue@^2.6.11:
   version "2.6.11"
   resolved "https://registry.yarnpkg.com/vue/-/vue-2.6.11.tgz#76594d877d4b12234406e84e35275c6d514125c5"