ourworld_web/www_threefold_io
23
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Make about page dynamic

Browse Source
This commit is contained in:
samaradel
2020-12-02 16:56:10 +02:00
parent d9ec21e0fd
commit 8eff8bfad5
11 changed files with 204 additions and 233 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
content/about/slide1/slide1.md Normal file
View File

@@ -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.

0
static/img/valuesheader2.png → content/about/slide1/valuesheader2.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 807 KiB

After

Width:  |  Height:  |  Size: 807 KiB

22
content/about/slide2/slide2.md Normal file
View File

@@ -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.

15
content/about/slide3/slide3.md Normal file
View File

@@ -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.

15
content/about/slide4/slide4.md Normal file
View File

@@ -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.

15
content/about/slide5/slide5.md Normal file
View File

@@ -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.

15
content/about/slide6/slide6.md Normal file
View File

@@ -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.

57
gridsome.config.js
View File

@@ -8,33 +8,31 @@ module.exports = {
siteName: 'ThreeFold Partners',
siteDescription: 'ThreeFold Partners',
siteUrl: 'http://localhost:8080',
plugins: [
{
use: 'gridsome-plugin-flexsearch',
options: {
searchFields: ['name', 'title','excerpt', 'author', 'content'],
collections: [
{
typeName: 'Blog',
indexName: 'Blog',
fields: ['path']
},
plugins: [{
use: 'gridsome-plugin-flexsearch',
options: {
searchFields: ['name', 'title', 'excerpt', 'author', 'content'],
collections: [{
typeName: 'Blog',
indexName: 'Blog',
fields: ['path']
},
{
typeName: 'Project',
indexName: 'Project',
fields: ['path']
},
{
typeName: 'Project',
indexName: 'Project',
fields: ['path']
},
{
typeName: 'Person',
indexName: 'Person',
fields: ['path']
},
]
}
},
{
{
typeName: 'Person',
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: {

29
src/components/FilterHeader.vue
View File

@@ -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
class="flex hidden md:block text-xl p-3 capitalize tracking-tight"
<span class="flex 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
:class="isOpen ? 'block' : 'hidden'"
class="md:order-2 px-2 pt-2 pb-4 sm:flex sm:p-0 bg-transparent"
>
<nav class="inline-flex 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"
>

49
src/components/VerticalNav.vue Normal file
View File

@@ -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>

200
src/pages/About.vue
View File

@@ -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">
<!-- <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>
<VerticalNav :slides="getNode" />
</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%;