list products

Signed-off-by: seven <zilisheng1996@gmail.com>

Author: Blankll

docs/.vitepress/theme/components/product.vue

@@ -0,0 +1,73 @@
+<script setup>
+const props = defineProps({
+  product: {
+    type: Object,
+    required: true
+  }
+})
+</script>
+<template>
+  <div class="product-container">
+    <div class="product-header">
+      <img :src="props.product.logo" alt="product-image">
+      <h3 class="card-title">{{ props.product.name }}</h3>
+    </div>
+    <img class="product-preview-img" :src="props.product.preview" alt="preview-image">
+    <p>{{ props.product.description }}</p>
+    <div class="refer-container">
+      <a :href="props.product.url" target="_blank" rel="noopener noreferrer">Learn More</a>
+    </div>
+  </div>
+</template>
+<style scoped lang="scss">
+.product-container {
+  margin: 10px;
+  width: 45%;
+  min-width: 500px;
+  height: 500px;
+  padding: 15px;
+  border-radius: 8px;
+  box-shadow: 0 0 1px 1px rgba(236, 240, 241, 0.5);
+
+  .product-header {
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    margin-bottom: 10px;
+
+    img {
+      width: 50px;
+      height: 50px;
+      margin-right: 10px;
+    }
+
+    h3 {
+      margin: 0;
+    }
+  }
+
+  .product-preview-img {
+    margin: 0 auto;
+    width: 100%;
+    height: 300px;
+   overflow: hidden;
+    border-radius: 8px;
+  }
+
+  .refer-container {
+    display: flex;
+    justify-content: flex-end;
+    margin-top: 10px;
+
+    a {
+      color: #3498db;
+      text-decoration: none;
+
+      &:hover {
+        text-decoration: underline;
+        cursor: pointer;
+      }
+    }
+  }
+}
+</style>

docs/.vitepress/theme/index.ts

@@ -2,7 +2,7 @@ import DefaultTheme from 'vitepress/theme';
 import {inBrowser, useData} from "vitepress";
 import {watchEffect} from "vue";
 import TeamMembers from './components/team-members.vue';
-
+import Product from "./components/product.vue";
 export default {
     ...DefaultTheme,
     setup() {
@@ -16,6 +16,7 @@ export default {
     enhanceApp({app}) {
         // register your custom global components
         app.component('TeamMembers', TeamMembers);
+        app.component('Product', Product);
     }
 }
 

docs/index.md

@@ -27,6 +27,14 @@ features:
   - title: Multi engines support
     details: Support Elasticsearch, OpenSearch, and more to come
 ---
+## Products
+
+<div style="display: flex;flex-wrap: wrap; justify-content: space-evenly;">
+<Product :product='{name: "DocKit", logo: "/dockit.png",preview: "/dockit-client-ui.png", description: "A better NoSQL GUI client for Mac, Windows and Linux", url: "https://dockit.geekfun.club/"}'></Product>
+<Product :product='{name: "AnyTerm", logo: "/anyterm.png",preview: "/anyterm-client-ui.png", description: "Supper lightweight SSH client and terminal for Mac, Windows and Linux", url: "https://github.com/geek-fun/AnyTerm"}'></Product>
+<Product :product='{name: "ServerlessInsight", logo: "/serverlessinsight.png",preview: "/serverlessinsight-preview.png", description: "Full life cycle cross providers serverless application management for your fast-growing business.", url: "https://github.com/geek-fun/hostsless"}'></Product>
+<Product :product='{name: "jest-search", logo: "/jest-search.png",preview: "/jest-search-preview.png", description: "Jest preset for running tests with local ElasticSearch, OpenSearch and ZincSearch.", url: "https://github.com/geek-fun/jest-search"}'></Product>
+</div>
 
 ## Team Members
 <TeamMembers></TeamMembers>