Merge pull request #597 from MerginMaps/fix-badges-visual

Fix badges visual

Author: MarcelGeo

src/.vitepress/components/MigrationType.vue

@@ -1,12 +1,13 @@
 <template>
-  <div>
-    <div class="type-badge ce" v-if="type === 'CE'" >Community Edition</div>
-    <div class="type-badge ee" v-else-if="type === 'EE'">Enterprise Edition</div>
-  </div>
+  <span>
+    <VPBadge v-if="type === 'CE'" text="Community Edition" type="warning"/>
+    <VPBadge v-else-if="type === 'EE'" text="Enterprise Edition" type="warning"/>
+  </span>
 </template>
 
-
 <script>
+import { VPBadge } from "vitepress/theme";
+
 export default {
   name: "migration-type",
   props: {
@@ -17,23 +18,4 @@ export default {
 
 <style scoped>
 
-.type-badge {
-  display: inline-block;
-  height: 18px;
-  line-height: 18px;
-  white-space: nowrap;
-  border-radius: 3px;
-  padding: 0 6px;
-  color: white;
-}
-
-.ce {
-  background-color: var(--mm-badge-ce-bg);;
-}
-
-.ee {
-  background-color: var(--mm-badge-ee-bg);;
-}
-
 </style>
-

src/.vitepress/components/ServerType.vue

@@ -1,12 +1,14 @@
 <template>
   <span>
-  <span class="servertype servertype-ce" v-if="type === 'CE'" >Community Edition only</span>
-  <span class="servertype servertype-ee" v-else-if="type === 'EE'">Enterprise Edition only</span>
+    <VPBadge v-if="type === 'CE'" text="Community Edition only" type="warning"/>
+    <VPBadge v-else-if="type === 'EE'" text="Enterprise Edition only" type="warning"/>
   </span>
 </template>
 
 
 <script>
+import { VPBadge } from "vitepress/theme";
+
 export default {
   name: "servertype",
   props: {
@@ -16,22 +18,5 @@ export default {
 </script>
 
 <style scoped>
-.servertype {
-  display: inline-block;
-  line-height: 18px;
-  white-space: nowrap;
-  border-radius: 6px;
-  padding: 0.25em 1em;
-  color: white;
-  margin-left: 5px;
-}
-
-.servertype-ce {
-  background-color: var(--mm-badge-ce-bg);
-}
 
-.servertype-ee {
-  background-color: var(--mm-badge-ee-bg);
-}
 </style>
-

src/.vitepress/components/SinceBadge.vue

@@ -1,13 +1,15 @@
 <template>
   <span>
-  <span class="sincebadge" v-if="type === 'App'" >since Mobile app {{ version }}</span>
-  <span class="sincebadge" v-else-if="type === 'Plugin'">since QGIS plugin {{ version }}</span>
-  <span class="sincebadge" v-else-if="type === 'Server'">since Server {{ version }}</span>
+    <VPBadge v-if="type === 'App'" :text="`Since Mobile app ${version}`" type="tip"/>
+    <VPBadge v-else-if="type === 'Plugin'" :text="`Since QGIS plugin ${version}`" type="tip"/>
+    <VPBadge v-else-if="type === 'Server'" :text="`Since Server ${version}`" type="tip"/>
   </span>
 </template>
 
 
 <script>
+import { VPBadge } from "vitepress/theme";
+
 export default {
   name: "sincebadge",
   props: {
@@ -18,15 +20,5 @@ export default {
 </script>
 
 <style scoped>
-.sincebadge {
-  display: inline-block;
-  line-height: 1;
-  white-space: nowrap; 
-  border-radius: 6px;
-  padding: 0.25em 1em;
-  color: var(--mm-badge-since-text-color);
-  background-color: var(--mm-badge-since-bg);
-  margin-left: 5px;
-}
-</style>
 
+</style>

src/.vitepress/theme/index.ts

@@ -1,7 +1,7 @@
 // https://vitepress.dev/guide/custom-theme
 import { h } from "vue";
 import type { Theme } from "vitepress";
-import DefaultTheme from "vitepress/theme";
+import DefaultTheme, { VPBadge } from "vitepress/theme";
 import "./style.css";
 import imageViewer from "vitepress-plugin-image-viewer";
 import vImageViewer from "vitepress-plugin-image-viewer/lib/vImageViewer.vue";
@@ -31,6 +31,7 @@ export default {
   enhanceApp({ app, router, siteData }) {
     DefaultTheme.enhanceApp({ app, router, siteData });
     app.component("vImageViewer", vImageViewer);
+    app.component('VPBadge', VPBadge);
     app.use(
       createGtm({
         id: "GTM-NW7ZGNB", // Your GTM single container ID or array of container ids ['GTM-xxxxxx', 'GTM-yyyyyy'] or array of objects [{id: 'GTM-xxxxxx', queryPararms: { gtm_auth: 'abc123', gtm_preview: 'env-4', gtm_cookies_win: 'x'}}, {id: 'GTM-yyyyyy', queryParams: {gtm_auth: 'abc234', gtm_preview: 'env-5', gtm_cookies_win: 'x'}}]

src/.vitepress/theme/style.css

@@ -157,15 +157,3 @@ img {
   align-items: center;
   gap: 0.25em;
 }
-
-/** Component: ServerType */
-:root {
-  --mm-badge-ee-bg: #FFA6A6;
-  --mm-badge-ce-bg: #FFB673;
-}
-
-/** Component: Since badge */
-:root {
-  --mm-badge-since-bg: var(--vp-c-indigo-soft);
-  --mm-badge-since-text-color: var(--vp-c-text-1);
-}

src/misc/write-docs/index.md

@@ -319,9 +319,9 @@ You can use any of supported <GitHubRepo id="markdown-it/markdown-it-emoji/blob/
 
 :tada: :grinning: :rofl: :scream: :heart: :pray: :white_check_mark: :no_entry_sign:
 
-   ```
-   :tada: :grinning: :rofl: :scream: :heart: :pray: :white_check_mark: :no_entry_sign:
-   ```
+```
+:tada: :grinning: :rofl: :scream: :heart: :pray: :white_check_mark: :no_entry_sign:
+```
 
 
 ### Labels/badges
@@ -330,39 +330,55 @@ Markdown supports using badges, such as:
 <Badge text="tip badge" type="tip"/>
 
 
-   ```<Badge text="tip badge" type="tip"/>```
+```markdown
+<Badge text="tip badge" type="tip"/>
+```
 
 ---
 
 <Badge text="warning badge" type="warning"/>
 
 
-   ```<Badge text="warning badge" type="warning"/>```
+```markdown
+<Badge text="warning badge" type="warning"/>
+```
 
 ---
 
 <Badge text="error badge" type="danger"/>
 
 
-   ```<Badge text="error badge" type="danger"/>```
+```markdown
+<Badge text="error badge" type="danger"/>
+```
 
 For mentioning that some feature is available from specific version, use `<SinceBadge />`
 
-   ```<SinceBadge type="App" version="2022.1.1" />```
+```markdown
+<SinceBadge type="App" version="2022.1.1" />
+```
 <SinceBadge version="2022.1.1" type="App" />
 
-   ```<SinceBadge type="Plugin" version="2023.2" />```
+```markdown
+<SinceBadge type="Plugin" version="2023.2" />
+```
 <SinceBadge version="2023.2" type="Plugin" />
 
-   ```<SinceBadge type="Server" version="2024.3" />```
+```markdown
+<SinceBadge type="Server" version="2024.3" />
+```
 <SinceBadge version="2024.3" type="Server" />
 
 To refer to <EnterprisePlatformName /> or <CommunityPlatformName /> edition, use `<ServerType />`
 
-   ```<ServerType type="CE" />```
+```markdown
+<ServerType type="CE" />
+```
 <ServerType type="CE" />
 
-   ```<ServerType type="EE" />```
+```markdown
+<ServerType type="EE" />
+```
 <ServerType type="EE" />
 
 

src/server/security/index.md

@@ -13,11 +13,11 @@ We provide a template configuration file <GitHubRepo id="MerginMaps/server/blob/
 Let's have a quick look at the main sections:
 
 ``` shell
-    server {
-        listen                  443 ssl;
-        server_name             merginmaps.company.com; # FIXME
-        client_max_body_size    4G;
-        ...
+server {
+    listen                  443 ssl;
+    server_name             merginmaps.company.com; # FIXME
+    client_max_body_size    4G;
+    ...
 ```
 
 Here we enable SSL via the default `443` port and configure name-based HTTPS server via `server_name`. Here you should change this according to your target server name.
@@ -27,39 +27,39 @@ We don't recommend setting a `client_max_body_size` higher than specified, becau
 Next, you need to point your certificate files to NGINX configuration. This is done on the next lines on the secured configuration:
 
 ``` shell
-    ...
-    ssl_certificate_key /etc/letsencrypt/live/merginmaps.company.com/privkey.pem; # FIXME
-    ssl_certificate     /etc/letsencrypt/live/merginmaps.company.com/fullchain.pem; # FIXME
-    ...
+...
+ssl_certificate_key /etc/letsencrypt/live/merginmaps.company.com/privkey.pem; # FIXME
+ssl_certificate     /etc/letsencrypt/live/merginmaps.company.com/fullchain.pem; # FIXME
+...
 ```
 
 The above example uses automated keys generated by CertBot. For more information, visit [CertBot](https://certbot.eff.org/instructions) website and check how you can generate your own keys.
 
 Some extra security settings for HTTP headers are provided. Please review them and update in accordance to your requirements.
 
 ```shell
-        # Prevent crawlers from indexing and following links for all content served from the mergin app
-        add_header X-Robots-Tag "none";
-
-        # Protect against clickjacking iframe
-        add_header Content-Security-Policy "frame-ancestors 'self';" always;
-
-        # Add a HSTS policy to prevent plain http from browser
-        add_header Strict-Transport-Security "max-age=31536000; includeSubDomains" always;
-
-        # Set cookies security flags
-        proxy_cookie_flags ~ secure httponly samesite=strict;
-
-        location / {
-            root /var/www/html;
-
-            # The lines below were copied from application proxy
-            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
-            proxy_set_header X-Forwarded-Proto $scheme;
-            proxy_set_header Host $http_host;
-            # we don't want nginx trying to do something clever with
-            # redirects, we set the Host: header above already.
-            proxy_redirect off;
-            proxy_pass http://app_server;
-        }
+# Prevent crawlers from indexing and following links for all content served from the mergin app
+add_header X-Robots-Tag "none";
+
+# Protect against clickjacking iframe
+add_header Content-Security-Policy "frame-ancestors 'self';" always;
+
+# Add a HSTS policy to prevent plain http from browser
+add_header Strict-Transport-Security "max-age=31536000; includeSubDomains" always;
+
+# Set cookies security flags
+proxy_cookie_flags ~ secure httponly samesite=strict;
+
+location / {
+    root /var/www/html;
+
+    # The lines below were copied from application proxy
+    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+    proxy_set_header X-Forwarded-Proto $scheme;
+    proxy_set_header Host $http_host;
+    # we don't want nginx trying to do something clever with
+    # redirects, we set the Host: header above already.
+    proxy_redirect off;
+    proxy_pass http://app_server;
+}
 ```