Make about page dynamic

content/about/slide1/slide1.md

@@ -0,0 +1,12 @@
+---
+id: our_philosophy
+title: our philosophy
+img: ./valuesheader2.png
+rank: 6
+---
+
+We are sparking a movement to bring the world a truly peer-to-peer internet.
+
+We acknowledge and support the many people and organizations around the world.
+
+who bring crucial support to the growth and adoption of the ThreeFold Grid.

content/about/slide2/slide2.md

@@ -0,0 +1,22 @@
+---
+id: if_not_us_who
+title: if not us, who? if not now, when?
+rank: 5
+---
+
+While to date we have maintained more of a focal role in terms of funding, development, and promotion, for example, this has been more out of necessity than out of desire.
+<br />
+<br />
+We know that the success of the mission depends on a distributed and decentralized ecosystem all working towards the same vision.
+<br />
+<br />
+We agree that the world needs healing and that raising consciousness is the way forward. This happens on 3 levels:
+<br />
+
+- Physical (climate, pollution)
+- Personal (spirituality)
+- Digital
+<br />
+<br />
+
+Our current internet is seriously broken, and it needs to be fixed.

content/about/slide3/slide3.md

@@ -0,0 +1,15 @@
+---
+id: what_we_stand_for
+title: what we stand for
+rank: 4
+---
+
+**EQUALITY** is the foundation for a fair world where everyone is given the opportunity to be empowered and to achieve their full potential.
+<br />
+<br />
+
+**AUTONOMY** Being empowered to learn, partake, dream and succeed is fundamental to achieve peace and fulfillment of humankind's potential.
+<br />
+<br />
+
+**SUSTAINABILITY** ensures the future of life on earth. It is about adopting the behavior and mindset to minimize our footprint.

content/about/slide4/slide4.md

@@ -0,0 +1,15 @@
+---
+id: internet_access_a_human_right
+title: internet access | a human right
+rank: 3
+---
+
+In 2016, the United Nations officially declared Internet access to be a human right. The right to internet access aims to protect people’s freedom of expression and opinion, as well as other fundamentals such as access to knowledge and information.
+<br />
+<br />
+
+Yet as of today, about 48% of humanity remains unconnected to the Internet, creating huge inequalities in the access to information and knowledge. It is important that the right steps are taken to improve the relationship between governments and citizens and to uphold all human rights.
+<br />
+<br />
+
+To make the new internet accessible and equal to all, ThreeFold built an infrastructure that is affordable to all and collectively owned by the network peers. To ensure a fair and equal distribution of the internet to everyone, fully sponsored capacity will be deployed in remote regions of our world.

content/about/slide5/slide5.md

@@ -0,0 +1,15 @@
+---
+id: digital_sovereignty_for_everyone
+title: digital sovereignty | for everyone
+rank: 2
+---
+
+The Internet evolved to become the world's largest database of information and knowledge, opening up exponential growth on personal, organizational and economic levels. Yet it is owned by large international companies that exploit users data.
+<br />
+<br />
+
+The current approach of many governments and countries is to cut the Internet into pieces by limiting its accessibility and enforcing regulations. We need an internet that protects our digital freedom and fair access to global information for everyone, everywhere.
+<br />
+<br />
+
+The ThreeFold Grid is a peer-to-peer Internet - owned by its users. All the technology of this new Internet is open-source and the whole experience is built around the fundamentals of a peer-to-peer network. On the ThreeFold Grid, everyone owns their data and experiences - they are autonomous.

content/about/slide6/slide6.md

@@ -0,0 +1,15 @@
+---
+id: a_new_internet_for_our_planet
+title: a new internet | for our planet
+rank: 1
+---
+
+The current internet consumes about 10% of global energy production. With the imminent boom of emerging technologies such as Blockchain, Internet of Things, Virtual Reality, Artificial Intelligence and 5G, the Internet’s energy consumption is expected to increase exponentially.
+<br />
+<br />
+
+The current industry solutions focus on increasing the use of renewable energies to power data centers. However this is not a viable solution as data centers consume enormous amounts of energy. Therefore, a new solution that can drastically reduce the global internet’s energy consumption is needed.
+<br />
+<br />
+
+The ThreeFold Grid is the first true peer-to-peer Internet. It uses pioneering technologies that removes the need for centralized and power-hungry data centers, consumes 90% less energy, and uses 90% less international fiber network capacity.

gridsome.config.js

@@ -8,33 +8,31 @@ module.exports = {
     siteName: 'ThreeFold Partners',
     siteDescription: 'ThreeFold Partners',
     siteUrl: 'http://localhost:8080',
-    plugins: [
+    plugins: [{
-      {
+            use: 'gridsome-plugin-flexsearch',
-        use: 'gridsome-plugin-flexsearch',
+            options: {
-        options: {
+                searchFields: ['name', 'title', 'excerpt', 'author', 'content'],
-          searchFields: ['name', 'title','excerpt', 'author', 'content'],
+                collections: [{
-          collections: [
+                        typeName: 'Blog',
-            {
+                        indexName: 'Blog',
-              typeName: 'Blog',
+                        fields: ['path']
-              indexName: 'Blog',
+                    },
-              fields: ['path']
+
-            },
+                    {
-  
+                        typeName: 'Project',
-            {
+                        indexName: 'Project',
-              typeName: 'Project',
+                        fields: ['path']
-              indexName: 'Project',
+                    },
-              fields: ['path']
+
-            },
+                    {
-            
+                        typeName: 'Person',
-            {
+                        indexName: 'Person',
-              typeName: 'Person',
+                        fields: ['path']
-              indexName: 'Person',
+                    },
-              fields: ['path']
+                ]
-            },
+            }
-          ]
+        },
-        }
+        {
-      },
-      {
             use: 'gridsome-plugin-tailwindcss',
             options: {
                 tailwindConfig: './tailwind.config.js',
@@ -115,8 +113,6 @@ module.exports = {
                 }
             }
         },
-
-
         {
             use: '@gridsome/source-filesystem',
             options: {
@@ -135,6 +131,13 @@ module.exports = {
                     }
                 }
             }
+        },
+        {
+            use: '@gridsome/source-filesystem',
+            options: {
+                typeName: 'Slides',
+                path: './content/about/**/*.md'
+            }
         }
     ],
     transformers: {
@@ -161,7 +164,7 @@ module.exports = {
             path: '/people/:id',
             component: '~/templates/Person.vue'
         }],
-        
+
         BlogTag: [{
             path: '/tags/blog/:id',
             component: '~/templates/Tag.vue'
@@ -179,7 +182,7 @@ module.exports = {
             path: '/projects/tags/:id',
             component: '~/templates/Tag.vue'
         }],
-        
+
         Membership: [{
             path: '/memberships/:id',
             component: '~/templates/Membership.vue'

src/components/FilterHeader.vue

@@ -9,38 +9,13 @@
     >
       <div class="flex items-center justify-between px-4 sm:p-0">
         <div class="inline-flex items-center flex-shrink-0">
-          <span
+          <span class="flex text-xl p-3 capitalize tracking-tight"
-            class="flex hidden md:block text-xl p-3 capitalize tracking-tight"
             >filter:</span
           >
         </div>
-
-        <div class="sm:hidden ml-auto">
-          <button
-            @click="isOpen = !isOpen"
-            type="button"
-            class="block text-gray-500 hover:text-white focus:text-white focus:outline-none p-3"
-          >
-            <svg class="h-6 w-6 fill-current" viewBox="0 0 24 24">
-              <path
-                v-if="isOpen"
-                fill-rule="evenodd"
-                d="M18.278 16.864a1 1 0 0 1-1.414 1.414l-4.829-4.828-4.828 4.828a1 1 0 0 1-1.414-1.414l4.828-4.829-4.828-4.828a1 1 0 0 1 1.414-1.414l4.829 4.828 4.828-4.828a1 1 0 1 1 1.414 1.414l-4.828 4.829 4.828 4.828z"
-              />
-              <path
-                v-if="!isOpen"
-                fill-rule="evenodd"
-                d="M4 5h16a1 1 0 0 1 0 2H4a1 1 0 1 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2z"
-              />
-            </svg>
-          </button>
-        </div>
       </div>
 
-      <nav
+      <nav class="inline-flex md:order-2 px-2 pt-2 pb-4 sm:flex sm:p-0 bg-transparent">
-        :class="isOpen ? 'block' : 'hidden'"
-        class="md:order-2 px-2 pt-2 pb-4 sm:flex sm:p-0 bg-transparent"
-      >
         <ul
           class="list-none sm:flex justify-left uppercase transition-all transition-500"
         >

src/components/VerticalNav.vue

@@ -0,0 +1,49 @@
+<template>
+  <div class="my-12">
+    <nav class="inline-block w-1/4 border-r-2 border-gray-200">
+      <a
+        v-for="(slide, index) in slides"
+        :key="index"
+        :href="`#${index}`"
+        class="mt-1 capitalize group flex items-center px-3 py-2 text-sm leading-5 font-medium text-gray-600 hover:text-gray-900 hover:bg-gray-50 focus:outline-none focus:text-gray-900 focus:bg-gray-50 transition ease-in-out duration-150"
+        :class="{
+          'text-gray-900 border-r-3 border-blue-500 hover:bg-gray-100':
+            activeIndex === index,
+        }"
+        @click="setActive(index)"
+      >
+        <span class="truncate"> {{ slide.title }} </span>
+      </a>
+    </nav>
+
+    <div
+      class="content inline-block h-full w-3/4 align-top p-5 transition ease-in-out duration-150"
+    >
+      <div :id="slides[activeIndex]" class="hidden" style="display: block">
+        <img
+          v-if="slides[activeIndex].img"
+          :src="slides[activeIndex].img.src"
+          :alt="slides[activeIndex].title"
+        />
+        <p v-html="slides[activeIndex].content"></p>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: ["slides"],
+  data() {
+    return {
+      activeIndex: 0,
+    };
+  },
+  methods: {
+    setActive(index) {
+      this.activeIndex = index;
+    },
+  },
+};
+</script>
+

src/pages/About.vue

@@ -4,201 +4,51 @@
       class="container sm:pxi-0 mx-auto overflow-x-hidden"
       :style="{ 'min-height': contentHeight + 'px' }"
     >
-      <div class="max-w-xl mx-auto py-10">
+      <VerticalNav :slides="getNode" />
-        <!-- <img class="" src="/img/valuesheader2.png" alt="" />  -->
-      </div>
-      <div class="my-4">
-        <nav class="inline-block w-1/4 border-r-2 border-gray-200">
-          <a
-            v-for="(header, index) in headers"
-            :key="index"
-            :href="`#${index}`"
-            class="mt-1 capitalize group flex items-center px-3 py-2 text-sm leading-5 font-medium hover:text-gray-900 hover:bg-gray-400 focus:outline-none transition ease-in-out duration-150"
-            :class="{
-              'border-r-3 border-blue-500 hover:bg-gray-100':
-                activeIndex === index,
-            }"
-            @click="setActive(index)"
-          >
-            <span> {{ header }} </span>
-          </a>
-        </nav>
-
-        <div
-          class="content inline-block h-full w-3/4 align-top p-5 transition ease-in-out duration-150"
-        >
-          <div :class="{ block: activeIndex == 0, hidden: activeIndex != 0 }">
-            <img class="" src="/img/valuesheader2.png" alt="" />
-            <p>
-              We are sparking a movement to bring the world a truly peer-to-peer
-              internet. <br />
-              We acknowledge and support the many people and organizations
-              around the world <br />
-              who bring crucial support to the growth and adoption of the
-              ThreeFold Grid.
-            </p>
-          </div>
-
-          <div :class="{ block: activeIndex == 1, hidden: activeIndex != 1 }">
-            <p>
-              While to date we have maintained more of a focal role in terms of
-              funding, development, and promotion, for example, this has been
-              more out of necessity than out of desire. We know that the success
-              of the mission depends on a distributed and decentralized
-              ecosystem all working towards the same vision.
-              <br />
-              <br />
-              We agree that the world needs healing and that raising
-              consciousness is the way forward. This happens on 3 levels:
-              physical (climate, pollution), personal (spirituality) and
-              digital. Our current internet is seriously broken, and it needs to
-              be fixed.
-            </p>
-          </div>
-
-          <div :class="{ block: activeIndex == 2, hidden: activeIndex != 2 }">
-            <p>
-              <b>EQUALITY</b> is the foundation for a fair world where everyone
-              is given the opportunity to be empowered and to achieve their full
-              potential.
-            </p>
-            <br />
-            <p>
-              <b>AUTONOMY</b>. Being empowered to learn, partake, dream and
-              succeed is fundamental to achieve peace and fulfillment of
-              humankind's potential
-            </p>
-            <br />
-            <p>
-              <b>SUSTAINABILITY</b> ensures the future of life on earth. It is
-              about adopting the behavior and mindset to minimize our footprint.
-            </p>
-          </div>
-
-          <div :class="{ block: activeIndex == 3, hidden: activeIndex != 3 }">
-            <p>
-              In 2016, the United Nations officially declared Internet access to
-              be a human right. The right to internet access aims to protect
-              people’s freedom of expression and opinion, as well as other
-              fundamentals such as access to knowledge and information.
-              <br />
-              <br />
-              Yet as of today, about 48% of humanity remains unconnected to the
-              Internet, creating huge inequalities in the access to information
-              and knowledge. It is important that the right steps are taken to
-              improve the relationship between governments and citizens and to
-              uphold all human rights.
-              <br />
-              <br />
-              To make the new internet accessible and equal to all, ThreeFold
-              built an infrastructure that is affordable to all and collectively
-              owned by the network peers. To ensure a fair and equal
-              distribution of the internet to everyone, fully sponsored capacity
-              will be deployed in remote regions of our world.
-            </p>
-          </div>
-
-          <div :class="{ block: activeIndex == 4, hidden: activeIndex != 4 }">
-            <p>
-              The Internet evolved to become the world's largest database of
-              information and knowledge, opening up exponential growth on
-              personal, organizational and economic levels. Yet it is owned by
-              large international companies that exploit users data.
-              <br />
-              <br />
-              The current approach of many governments and countries is to cut
-              the Internet into pieces by limiting its accessibility and
-              enforcing regulations. We need an internet that protects our
-              digital freedom and fair access to global information for
-              everyone, everywhere.
-              <br />
-              <br />
-              The ThreeFold Grid is a peer-to-peer Internet - owned by its
-              users. All the technology of this new Internet is open-source and
-              the whole experience is built around the fundamentals of a
-              peer-to-peer network. On the ThreeFold Grid, everyone owns their
-              data and experiences - they are autonomous
-              <br />
-              <br />
-            </p>
-          </div>
-
-          <div :class="{ block: activeIndex == 5, hidden: activeIndex != 5 }">
-            <p>
-              The current internet consumes about 10% of global energy
-              production. With the imminent boom of emerging technologies such
-              as Blockchain, Internet of Things, Virtual Reality, Artificial
-              Intelligence and 5G, the Internet’s energy consumption is expected
-              to increase exponentially.
-              <br />
-              <br />
-              The current industry solutions focus on increasing the use of
-              renewable energies to power data centers. However this is not a
-              viable solution as data centers consume enormous amounts of
-              energy. Therefore, a new solution that can drastically reduce the
-              global internet’s energy consumption is needed.
-              <br />
-              <br />
-              The ThreeFold Grid is the first true peer-to-peer Internet. It
-              uses pioneering technologies that removes the need for centralized
-              and power-hungry data centers, consumes 90% less energy, and uses
-              90% less international fiber network capacity.
-            </p>
-          </div>
-        </div>
-        <br />
-        <br />
-        <br />
-        <br />
-        <br />
-        <br />
-        <br />
-        <br />
-        <br />
-        <br />
-      </div>
-
-      <vue-markdown> </vue-markdown>
     </div>
   </Layout>
 </template>
 
 <script>
-import VueMarkdown from "vue-markdown";
+import VerticalNav from "~/components/VerticalNav.vue";
 export default {
   metaInfo: {
     title: "About us",
   },
-  data() {
-    return {
-      headers: [
-        "OUR PHILOSOPHY",
-        "IF NOT US, WHO? IF NOT NOW, WHEN?",
-        "WHAT WE STAND FOR",
-        "INTERNET ACCESS | A HUMAN RIGHT",
-        "DIGITAL SOVEREIGNTY | FOR EVERYONE",
-        "A NEW INTERNET | FOR OUR PLANET",
-      ],
-      activeIndex: 0,
-    };
-  },
-  methods: {
-    setActive(index) {
-      this.activeIndex = index;
-    },
-  },
   computed: {
     contentHeight() {
       if (process.isClient) {
         return window.innerHeight - 130;
       }
     },
+    getNode() {
+      let result = [];
+      for (const edge of this.$page.entries.edges) {
+        result.push(edge.node);
+      }
+      return result;
+    },
   },
   components: {
-    VueMarkdown,
+    VerticalNav,
   },
 };
 </script>
+<page-query>
+query {
+  entries: allSlides ( sortBy: "rank"){
+    edges {
+      node {
+        rank
+        id
+        title
+        img
+        content 
+      }
+    }
+  }
+}
+</page-query>
 <style scoped>
 .hand {
   width: 70%;