Add details pages for developer page

content/page/developer/dev/automation/index.md

@@ -0,0 +1,8 @@
+---
+id: automation
+title: automation
+image: ./automation.png
+button : Explore other tech components
+link : /developer
+---
+  Lorem ipsum dolor sit amet consectetur adipisicing elit. Odio iure quaerat sunt dolorem ducimus. Provident, quos qui dicta consequuntur omnis perferendis aliquam impedit? Pariatur itaque vitae non earum, facilis aliquam?

content/page/developer/dev/blockchain/index.md

@@ -0,0 +1,8 @@
+---
+id: blockchain
+title: blockchain
+image: ./blockchain.png
+button : Explore other tech components
+link : /developer
+---
+  Lorem ipsum dolor sit amet consectetur adipisicing elit. Odio iure quaerat sunt dolorem ducimus. Provident, quos qui dicta consequuntur omnis perferendis aliquam impedit? Pariatur itaque vitae non earum, facilis aliquam?

content/page/developer/dev/operating-system/index.md

@@ -0,0 +1,8 @@
+---
+id: operating-system
+title: operating system
+image: ./operating_system.png
+button : Explore other tech components
+link : /developer
+---
+  Lorem ipsum dolor sit amet consectetur adipisicing elit. Odio iure quaerat sunt dolorem ducimus. Provident, quos qui dicta consequuntur omnis perferendis aliquam impedit? Pariatur itaque vitae non earum, facilis aliquam?

content/page/developer/dev/planetary-network/index.md

@@ -0,0 +1,8 @@
+---
+id: planetary-network
+title: planetary network
+image: ./planetary_network.jpg
+button : Explore other tech components
+link : /developer
+---
+  Lorem ipsum dolor sit amet consectetur adipisicing elit. Odio iure quaerat sunt dolorem ducimus. Provident, quos qui dicta consequuntur omnis perferendis aliquam impedit? Pariatur itaque vitae non earum, facilis aliquam?

content/page/developer/dev/qsfs/index.md

@@ -0,0 +1,8 @@
+---
+id: qsfs
+title: qsfs
+image: ./qsfs.png
+button : Explore other tech components
+link : /developer
+---
+  Lorem ipsum dolor sit amet consectetur adipisicing elit. Odio iure quaerat sunt dolorem ducimus. Provident, quos qui dicta consequuntur omnis perferendis aliquam impedit? Pariatur itaque vitae non earum, facilis aliquam?

content/page/developer/dev/tooling/index.md

@@ -0,0 +1,8 @@
+---
+id: tooling
+title: tooling
+image: ./tooling.png
+button : Explore other tech components
+link : /developer
+---
+  Lorem ipsum dolor sit amet consectetur adipisicing elit. Odio iure quaerat sunt dolorem ducimus. Provident, quos qui dicta consequuntur omnis perferendis aliquam impedit? Pariatur itaque vitae non earum, facilis aliquam?

content/page/developer/productData/product1/index.md

@@ -2,5 +2,5 @@
 id: developer1
 title: Operating System
 image: ./operating_system.png
-link: https://github.com/threefoldtech/zos
+link: /developer/operating-system
 ---

content/page/developer/productData/product2/index.md

@@ -2,5 +2,5 @@
 id: developer2
 title: Automation Components
 image: ./automation.png
-link: https://github.com/threefoldtech/js-ng
+link: /developer/automation
 ---

content/page/developer/productData/product3/index.md

@@ -2,5 +2,5 @@
 id: developer3
 title: Developer Tooling
 image: ./tooling.png
-link: https://github.com/threefoldtech/terraform-provider-grid
+link: /developer/tooling
 ---

content/page/developer/productData/product4/index.md

@@ -2,5 +2,5 @@
 id: developer4
 title: Quantum-Safe Storage
 image: ./qsfs.png
-link: https://github.com/threefoldtech/quantum-storage
+link: /developer/qsfs
 ---

content/page/developer/productData/product5/index.md

@@ -2,5 +2,5 @@
 id: developer5
 title: ThreeFold Bloackchain
 image: ./blockchain.png
-link: https://github.com/threefoldtech/tfchain
+link: /developer/blockchain
 ---

content/page/developer/productData/product6/index.md

@@ -2,5 +2,5 @@
 id: developer6
 title: Planetary Network
 image: ./planetary_network.jpg
-link: https://github.com/threefoldtech/js-sdk
+link: /developer/planetary-network
 ---

gridsome.config.js

@@ -289,6 +289,14 @@ module.exports = {
             }
         },
 
+        {
+            use: '@gridsome/source-filesystem',
+            options: {
+                typeName: 'Dev',
+                path: './content/page/developer/dev/**/*.md',
+            }
+        },
+
         {
             use: '@gridsome/source-filesystem',
             options: {
@@ -528,7 +536,8 @@ module.exports = {
                     network: 'Network',
                     subscribe: 'Subscribe',
                     team: 'Team',
-                    info:'Info'
+                    info: 'Info',
+                    dev: 'Dev'
                 }
             }
         },
@@ -722,6 +731,10 @@ module.exports = {
             path: '/tech/:id',
             component: '~/templates/Info.vue'
         }],
+        Dev: [{
+            path: '/developer/:id',
+            component: '~/templates/Dev.vue'
+        }],
     },
 
     transformers: {

src/components/marketing/sections/cta-sections/ShowcaseProducts.vue

@@ -120,7 +120,7 @@
     <!-- Tech -->
     <div
       class="grid sm:grid-cols-1 gap-4 lg:grid-cols-2 text-center lg:px-40"
-      v-else-if="id == 'tech'"
+      v-else-if="id == 'tech' || id == 'developer'"
     >
       <div
         v-for="(product, idx) in products"
@@ -146,35 +146,6 @@
       </div>
     </div>
 
-    <!-- developer -->
-    <div
-      class="grid sm:grid-cols-1 gap-4 lg:grid-cols-2 text-center lg:px-40"
-      v-else-if="id == 'developer'"
-    >
-      <div
-        v-for="(product, idx) in products"
-        
-        :key="idx"
-        :href="product.link"
-        class="
-          mx-auto
-          my-3
-          rounded
-          overflow-hidden
-          transition
-          duration-500
-          bg-gray-100
-        "
-      >
-        <a :href="product.link" target="_blank">
-          <g-image :src="img(product.image)" />
-          <div class="font-bold text-xl py-5 mx-4">
-            {{ product.title }}
-          </div>
-        </a>
-      </div>
-    </div>
-
     <!-- why -->
     <div
       class="

src/templates/Dev.vue

@@ -0,0 +1,181 @@
+<template>
+  <Layout :hideHeader="true" :disableScroll="true">
+    <div
+      class="container sm:pxi-0 mx-auto overflow-x-hidden pt-6 px-4 text-center"
+    >
+      <div class="py-12">
+        <section
+          class="
+            post-content
+            container
+            mx-auto
+            relative
+            font-serif
+            text-gray-900 text-center
+          "
+        >
+          <g-image class="mx-auto w-full" :src="$page.dev.image"></g-image>
+
+          <div
+            class="post-content-text text-xl text-center mx-auto"
+            v-html="$page.dev.content"
+          ></div>
+        </section>
+
+        <a
+          class="
+            inline-block
+            bg-white
+            text-lg
+            learn-button
+            hover:bg-gray-400
+            px-12
+            py-1
+            mr-5
+            my-8
+            border-2
+            shadow
+            border-black
+          "
+          :href="$page.dev.link"
+          >{{ $page.dev.button }}</a
+        >
+
+        <!-- <section class="post-tags container mx-auto relative py-10">
+          <g-link
+            v-for="tag in $page.dev.tags"
+            :key="tag.id"
+            :to="tag.path"
+            class="
+              text-xs
+              bg-transparent
+              hover:text-blue-700
+              py-2
+              px-4
+              mr-2
+              border
+              hover:border-blue-500
+              border-gray-600
+              text-gray-700
+              rounded-full
+            "
+            >{{ tag.title }}</g-link
+          >
+        </section> -->
+      </div>
+    </div>
+  </Layout>
+</template>
+
+<page-query>
+  query($id: ID!) {
+    dev(id: $id) {
+      id
+      title
+      content
+      image
+      button
+      link
+    }
+    metadata {
+      siteUrl
+    }
+  }
+</page-query>
+
+<script>
+import PostListItem from "~/components/custom/Cards/PostListItem.vue";
+import Alert from "~/components/custom/Alert.vue";
+export default {
+  components: {
+    PostListItem,
+    Alert,
+  },
+  data() {
+    return {
+      showAlert: false,
+    };
+  },
+  methods: {
+    copyLink() {
+      const el = document.createElement("input");
+      el.value = window.location.href;
+      document.body.appendChild(el);
+      el.select();
+      document.execCommand("copy");
+      document.body.removeChild(el);
+      this.showAlert = true;
+    },
+    linkCopied(val) {
+      this.showAlert = val;
+    },
+    img(image) {
+      if (!image) return "";
+      if (image.src) return image.src;
+      return image;
+    },
+  },
+  computed: {
+    getCoverImage() {
+      let coverImage = "";
+      const cover = this.$page.dev.image;
+      if (cover != null) {
+        coverImage = `${this.getBaseUrl}${this.$page.dev.image.src}`;
+      }
+      return coverImage;
+    },
+    getBaseUrl() {
+      return this.$page.metadata.siteUrl;
+    },
+  },
+  metaInfo() {
+    return {
+      title: "",
+      titleTemplate: `ThreeFold | ${this.$page.dev.id}`,
+      meta: [
+        {
+          key: "description",
+          name: "description",
+          content: this.$page.dev.excerpt,
+        },
+        {
+          key: "og:title",
+          property: "og:title",
+          content: this.$page.dev.title,
+        },
+        {
+          key: "og:description",
+          property: "og:description",
+          content: this.$page.dev.excerpt,
+        },
+        {
+          key: "og:image",
+          property: "og:image",
+          content: this.getCoverImage,
+        },
+        {
+          name: "twitter:description",
+          property: "twitter:description",
+          content: this.$page.dev.excerpt,
+        },
+        {
+          name: "twitter:image",
+          property: "twitter:image",
+          content: this.getCoverImage,
+        },
+        {
+          name: "twitter:title",
+          property: "twitter:title",
+          content: this.$page.dev.title,
+        },
+        {
+          name: "twitter:card",
+          property: "twitter:card",
+          content: "summary_large_image",
+        },
+      ],
+    };
+  },
+};
+</script>
+