Merge branch 'release/2.0.0' into main

.env.example

@@ -27,6 +27,12 @@ GOOGLE_TAG_MANAGER_ID=GTM-XXXXXXX
 # LeasLink
 LEASLINK_ID=
 
+# Callpage
+CALLPAGE_ID=
+
+# Edrone
+EDRONE_ID=
+
 # Zaufane.pl
 EKOMI_CUSTOMER_ID=
 EKOMI_TOKEN=
@@ -42,6 +48,10 @@ PAGE_ABOUT_PATH=/o-nas
 PAGE_RENT_PATH=/wynajem
 PAGE_STATUTE_PATH=/regulamin
 
+# Font
+# When adding a new font, remember to add it to the $headerFont and $textFont variables in the assets/scss/_variables.scss file
+FONT_FAMILY="Roboto"
+
 # Cache TTL
 AXIOS_CACHE_TTL=0
 

.gitlab-ci.yml

@@ -5,15 +5,16 @@ stages:
   - build
   - deploy
   - postdeploy
+  - trigger
 
 cache:
   key: ${CI_COMMIT_REF_SLUG}
   paths:
     - node_modules/
 
-# ----------------------------
+# --------------------------
 # ? TEST
-# ----------------------------
+# --------------------------
 
 eslint:
   image: node:16-alpine
@@ -36,3 +37,19 @@ vue-tsc:
     - yarn lint:vue
   # Hopefully only for some time, until we have fixed all the errors
   allow_failure: true
+
+trigger-***REMOVED***-repo:
+  stage: trigger
+  rules:
+  - if: $CI_COMMIT_REF_NAME == $***REMOVED***_TRIGGER_BRANCH
+    when: always
+  - if: $CI_COMMIT_TAG
+    when: always
+  script:
+    - if [ "$CI_COMMIT_TAG" != "" ]; then
+        export IMAGE_NAME=$CI_COMMIT_TAG;
+      else
+        export IMAGE_NAME=$***REMOVED***_IMAGE_NAME;
+      fi
+    - apt update -y && apt install -y curl
+    - curl -X POST -F token=$***REMOVED***_TRIGGER_TOKEN -F ref=main -F variables[IMAGE_NAME]=$IMAGE_NAME "***REMOVED***/api/v4/projects/929/trigger/pipeline"

.htaccess

@@ -0,0 +1,10 @@
+Options +FollowSymLinks +ExecCGI
+Options -MultiViews
+RewriteEngine on
+
+RewriteRule sitemap.xml sitemap.xml [L]
+RewriteRule robots.txt robots.txt [L]
+RewriteRule manifest.json manifest.json [L]
+
+RewriteCond %{REQUEST_URI} !(\.svg|\.png|\.jpg|\.gif|\.jpeg|\.bmp|\.ico|\.css|\.js|\.txt|\.mp4|\.map|\.woff2|\.woff|\.ttf|\.eot)$
+RewriteRule (.*) 200.html [QSA]

Dockerfile

@@ -0,0 +1,11 @@
+FROM node:18-alpine as builder
+
+EXPOSE 3000
+
+WORKDIR /app
+COPY / /app
+
+RUN yarn install
+RUN yarn build
+
+CMD ["yarn", "start", "--hostname", "0.0.0.0"]

README.md

@@ -1,6 +1,6 @@
 # Roby Storefront Web template
 
-![Requires Heseya v5.1](https://img.shields.io/badge/Requires_Heseya-v5.1-8f022c)
+![Requires Heseya v6.0](https://img.shields.io/badge/Requires_Heseya-v6.0-8f022c)
 
 ## IDE
 

assets/scss/_variables.scss

@@ -40,8 +40,8 @@ $content-width: 911px;
 $container-padding: 12px;
 
 // Fonts
-$headerFont: 'Roboto', sans-serif;
-$textFont: 'Roboto', sans-serif;
+$headerFont: 'Rubik', 'Roboto', sans-serif;
+$textFont: 'Rubik', 'Roboto', sans-serif;
 
 // Responsivity rules
 $viewport-2: 'min-width: 280px';

assets/scss/components/_html-content.scss

@@ -309,8 +309,8 @@
   h4,
   h5,
   h6 {
-    font-family: $headerFont;
-    font-weight: 500;
+    font-family: var(--header-font-family-family, $headerFont);
+
     font-style: normal;
     font-size: 16px;
     line-height: 1.5;
@@ -320,6 +320,19 @@
     margin-top: 16px;
     margin-bottom: 6px;
   }
+
+  h1,
+  h4,
+  h5,
+  h6 {
+    font-weight: 500;
+  }
+
+  h2,
+  h3 {
+    font-weight: 600;
+  }
+
   h1 a,
   h2 a,
   h3 a,

assets/scss/index.scss

@@ -2,8 +2,21 @@
 @import './variables';
 @import './mixins';
 
+:root {
+  // Fallback colors to SCSS variables, but they should be declared somewhere in root html element
+  --primary-color: #{$primary-color};
+  --primary-color-alt: #{$primary-color-alt};
+  --secondary-color: #{$secondary-color};
+  --highlight-color: #{$highlight-color};
+  --warning-color: #{$warning-color};
+  --error-color: #{$error-color};
+
+  --header-font-family-family: #{$headerFont};
+  --text-font-family: #{$textFont};
+}
+
 html {
-  font-family: $textFont;
+  font-family: var(--text-font-family, $textFont);
   color: $text-color;
   font-size: $base-font-size;
   line-height: rem(19);
@@ -23,23 +36,10 @@ html {
   margin: 0;
 }
 
-:root {
-  // Fallback colors to SCSS variables, but they should be declared somewhere in root html element
-  --primary-color: #{$primary-color};
-  --primary-color-alt: #{$primary-color-alt};
-  --secondary-color: #{$secondary-color};
-  --highlight-color: #{$highlight-color};
-  --warning-color: #{$warning-color};
-  --error-color: #{$error-color};
-
-  --header-font-family-family: #{$headerFont};
-  --text-font-family: #{$textFont};
-}
-
 button,
 input,
 select {
-  font-family: $textFont;
+  font-family: var(--text-font-family, $textFont);
 }
 
 // Callpage plugin
@@ -91,9 +91,20 @@ h2 {
 .green-text {
   color: $green-color-500;
 }
+.warning-text {
+  color: var(--warning-color);
+}
 .error-text {
   color: var(--error-color);
 }
 .gray-600-text {
   color: $gray-color-600;
 }
+
+a {
+  color: var(--primary-color);
+
+  &:hover {
+    color: var(--primary-color-alt);
+  }
+}

components/ColorThemePicker.vue

@@ -7,7 +7,8 @@
     >
       <input :id="colorKey" v-model="colors[colorKey as ColorKeys]" type="color" />
       <label :for="colorKey">
-        {{ t(`colors.${colorKey}`) }}
+        {{ t(`colors.${colorKey}`) }} <br />
+        ({{ colors[colorKey as ColorKeys] }})
       </label>
     </div>
 
@@ -64,9 +65,14 @@
 
 <script setup lang="ts">
 import ChevronIcon from '@/assets/icons/chevron.svg?component'
+import { useConfigStore } from '~/store/config'
 
 const { notify } = useNotify()
 const t = useLocalI18n()
+const config = useConfigStore()
+
+const safeToString = (value: string | number | undefined): undefined | string =>
+  typeof value === 'number' ? value.toString() : value
 
 type ColorKeys =
   | 'primaryColor'
@@ -76,14 +82,14 @@ type ColorKeys =
   | 'errorColor'
   | 'warningColor'
 
-const defaultColors: Record<ColorKeys, string> = {
-  primaryColor: '#ffca2b',
-  primaryColorAlt: '#e1a044',
-  secondaryColor: '#c63225',
-  highlightColor: '#c63225',
-  errorColor: '#f05454',
-  warningColor: '#ffca2b',
-}
+const defaultColors = computed<Record<ColorKeys, string>>(() => ({
+  primaryColor: safeToString(config.env.primary_color) || '#ffca2b',
+  primaryColorAlt: safeToString(config.env.primary_color_alt) || '#e1a044',
+  secondaryColor: safeToString(config.env.secondary_color) || '#c63225',
+  highlightColor: safeToString(config.env.highlight_color) || '#c63225',
+  errorColor: safeToString(config.env.error_color) || '#f05454',
+  warningColor: safeToString(config.env.warning_color) || '#ffca2b',
+}))
 
 const cssVariables: Record<ColorKeys, string> = {
   primaryColor: '--primary-color',
@@ -95,19 +101,21 @@ const cssVariables: Record<ColorKeys, string> = {
 }
 
 const isVisible = ref(false)
-const parentEl = useParentElement()
-const colors = useLocalStorage('colors', { ...defaultColors })
+const colors = useLocalStorage('colors', { ...defaultColors.value })
 
 watchEffect(() => {
   if (process.server) return
 
   Object.entries(cssVariables).forEach(([key, value]) => {
-    parentEl.value?.style.setProperty(value, colors.value[key as ColorKeys])
+    // This is highly invasive as its overrides styles in all DOM elements, but it is debug feature so its okey
+    document.querySelectorAll(`[data-theme-context], [style]`).forEach((el) => {
+      ;(el as HTMLElement).style.setProperty(value, `${colors.value[key as ColorKeys]}`)
+    })
   })
 })
 
 const restoreDefaultColors = () => {
-  colors.value = { ...defaultColors }
+  colors.value = { ...defaultColors.value }
 }
 
 const copy = async () => {
@@ -169,6 +177,7 @@ const copy = async () => {
       text-align: center;
       pointer-events: none;
       font-weight: 500;
+      font-size: rem(12);
     }
   }