docs: update ecosystem

Author: kazupon

docs/.vitepress/config.js

@@ -78,9 +78,13 @@ const config = {
               text: 'Official Tooling',
               link: '/ecosystem/official'
             },
+            {
+              text: '3rd Party Integrations',
+              link: '/ecosystem/integrations'
+            },
             {
               text: '3rd Party Tooling',
-              link: '/ecosystem/third'
+              link: '/ecosystem/tools'
             },
           ],
           '/api/': [
@@ -257,9 +261,13 @@ const config = {
               text: 'Official Tooling',
               link: '/ja/ecosystem/official'
             },
+            {
+              text: '3rd Party Integrations',
+              link: '/ja/ecosystem/integrations'
+            },
             {
               text: '3rd Party Tooling',
-              link: '/ja/ecosystem/third'
+              link: '/ja/ecosystem/tools'
             },
           ],
           '/ja/api/': [

docs/.vitepress/theme/components/Service.vue

@@ -0,0 +1,52 @@
+<script lang="ts">
+import { defineComponent } from 'vue'
+
+export default defineComponent({
+  name: 'service',
+
+  props: {
+    title: {
+      type: String,
+      requried: true
+    },
+
+    link: {
+      type: String
+    },
+
+    source: {
+      type: String,
+      required: true
+    },
+
+    description: {
+      type: String,
+      required: true
+    }
+  }
+})
+</script>
+
+<template>
+  <h2>{{ title }}</h2>
+  <a :href="link" class="base" target="_blank" rel="noopener">
+    <img class="banner" :alt="title" :src="source" />
+  </a>
+  <p>{{ description }}</p>
+  <br />
+  <a class="become-a-sponsor" href="https://github.com/sponsors/kazupon" target="_blank" rel="noopener">Become a sponsor on GitHub</a>
+</template>
+
+<style scoped>
+.base {
+  margin: 1rem 1rem 0 1rem;
+  height: auto;
+  display: inline-block;
+  vertical-align: middle;
+  width: 15rem;
+}
+.banner {
+  max-width: 100%;
+  vertical-align: midele;
+}
+</style>

docs/.vitepress/theme/index.ts

@@ -2,7 +2,9 @@ import { h } from 'vue'
 import DefaultTheme from 'vitepress/dist/client/theme-default'
 import Layout from './Layout.vue'
 import Sponsor from './components/Sponsor.vue'
+import Service from './components/Service.vue'
 import { sponsors } from './sponsor'
+import { integrations } from './integrations'
 
 export default {
   ...DefaultTheme,
@@ -13,6 +15,7 @@ export default {
     app.component('GoldSponsors', () => sponsors.golds.map(prop => h(Sponsor, prop)))
     app.component('SilverSponsors', () => sponsors.silvers.map(prop => h(Sponsor, prop)))
     app.component('BronzeSponsors', () => sponsors.bronzes.map(prop => h(Sponsor, prop)))
+    app.component('IntegrationServices', () => integrations.map(prop => h(Service, prop)))
     // test
     // app is the Vue 3 app instance from createApp()
     // router is VitePress' custom router (see `lib/app/router.js`)

docs/.vitepress/theme/integrations.json

@@ -0,0 +1,8 @@
+[
+  {
+    "title": "Localazy ®",
+    "source": "/localazy.svg",
+    "link": "https://localazy.com/blog/how-to-localize-vuejs-app-with-vue-i18n-and-localazy?utm_source=kazupon&utm_medium=banner&utm_campaign=sponsorships_kazupon&utm_content=logo",
+    "description": "Software internationalization and content localization platform with dedicated support for Vue-i18n library and over 50 other integrations to cover your tech stack for the whole team."
+  }
+]

docs/.vitepress/theme/integrations.ts

@@ -0,0 +1,10 @@
+import data from './integrations.json'
+
+export interface Service {
+  title: string
+  link: string
+  source: string
+  description: string
+}
+
+export const integrations = data

docs/ecosystem/integrations.md

@@ -0,0 +1,3 @@
+# Third-party integrations
+
+<IntegrationServices />

docs/ecosystem/third.md renamed to docs/ecosystem/tools.md

@@ -0,0 +1,3 @@
+# Third-party integrations
+
+<IntegrationServices />

docs/ja/ecosystem/integrations.md

@@ -1,6 +1,5 @@
 # Third-party tooling
 
-
 ## Nuxt Module
 
 [nuxt-i18n](https://github.com/nuxt-community/nuxt-i18n/) is corresponding Nuxt.js module.