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

Add workloads & stats secs

Browse Source
This commit is contained in:
samaradel
2022-01-20 17:11:45 +02:00
parent fcb3735130
commit 89a2450227
4 changed files with 438 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
gridsome.config.js
View File

@@ -489,6 +489,20 @@ module.exports = {
path: './content/page/**/upTalks/**/*.md', path: './content/page/**/upTalks/**/*.md',
} }
}, },
{
use: '@gridsome/source-filesystem',
options: {
typeName: 'WorkloadsMain',
path: './content/page/**/workloads/main/*.md',
}
},
{
use: '@gridsome/source-filesystem',
options: {
typeName: 'Workloads',
path: './content/page/**/workloads/**/*.md',
}
},
{ {
use: '@gridsome/source-filesystem', use: '@gridsome/source-filesystem',
@@ -555,7 +569,9 @@ module.exports = {
info: 'Info', info: 'Info',
dev: 'Dev', dev: 'Dev',
conversationsMain: 'ConversationsMain', conversationsMain: 'ConversationsMain',
conversations: 'Conversations' conversations: 'Conversations',
workloadsMain: 'WorkloadsMain',
workloads: 'Workloads',
} }
} }
}, },

119
src/components/marketing/sections/feature-sections/SimpleColumns.vue Normal file
View File

@@ -0,0 +1,119 @@
<template>
<div class="py-20 bg-white">
<div class="max-w-4xl mx-auto px-4 sm:px-6 lg:max-w-screen-2xl lg:px-8">
<div v-if="main" class="mx-auto mb-24 lg:text-center">
<h2
class="
lg:text-5xl
max-w-3xl
uppercase
mb-6
leading-none
font-black font-heading
mx-auto
"
>
{{ main.title }}
</h2>
<div
class="mt-2 lg:text-2xl text-xl leading-normal text-gray-900"
v-html="main.content"
></div>
</div>
<div
class="lg:grid lg:gap-8"
:class="{
'lg:grid-cols-3': id == 'storage',
'lg:grid-cols-4': id == 'cloud',
}"
>
<div
class="my-10 text-center lg:mt-0"
v-for="section in sections"
:key="section.id"
>
<div class="flex items-center justify-center rounded-md text-white">
<g-image
:src="section.image"
class="w-3/4 mx-auto"
:class="{
'w-full mx-auto': id == 'storage',
'w-3/4 mx-auto': id == 'cloud',
}"
/>
</div>
<div class="mt-5">
<h2
class="
text-3xl
uppercase
mb-6
leading-none
font-black font-heading
py-8
"
>
{{ section.title }}
</h2>
<div
class="mt-2 lg:text-2xl text-xl leading-normal text-gray-900 pb-6"
v-html="section.content"
></div>
</div>
</div>
</div>
<div class="block text-center mt-10">
<a
v-if="main.link.includes('http')"
target="_blank"
:href="main.link"
class="
green
bg-green-300
lg:text-2xl
text-lg
font-extrabold
px-12
hover:bg-green-200
rounded-lg
py-4
mb-4
shadow
"
>{{ main.button }}</a
>
<a
v-else
:href="main.link"
class="
green
bg-green-300
lg:text-2xl
text-lg
font-extrabold
px-12
hover:bg-green-200
rounded-lg
py-4
mb-4
shadow
"
>{{ main.button }}</a
>
</div>
</div>
</div>
</template>
<script>
export default {
props: ["id", "main", "sections"],
};
</script>
<style scoped>
.green {
/* background-color: #70dfc9; */
font-family: "Orbitron", sans-serif !important;
}
</style>

268
src/components/marketing/sections/stats-sections/SimpleInCard.vue Normal file
View File

@@ -0,0 +1,268 @@
<template>
<div class="lg:py-20 py-10 sm:pt-16">
<div class="mx-auto px-4 sm:px-6 lg:px-8">
<div class="lg:max-w-xl mx-auto text-center">
<h2
class="
lg:text-5xl
uppercase
mb-6
leading-none
font-black font-heading
mx-auto
"
>
{{ info.title }}
</h2>
<div
class="py-10 lg:text-2xl text-xl leading-normal text-gray-900 sm:mt-4"
v-html="info.content"
></div>
</div>
</div>
<div class="mt-10 pb-12 sm:pb-16">
<div class="relative">
<div class="absolute inset-0 h-1/2"></div>
<div class="relative mx-auto px-4 sm:px-6 lg:px-8">
<div class="max-w-8xl mx-auto">
<dl class="rounded-lg bg-white sm:grid sm:grid-cols-4">
<div
class="
flex flex-col
border-b border-gray-400
p-6
text-center
sm:border-0 sm:border-r
"
>
<dt
class="
order-2
mt-2
text-2xl
leading-6
font-medium
text-gray-900
uppercase
"
id="item-1"
>
Nodes
</dt>
<dd
class="
order-1
text-5xl
leading-none
font-extrabold
text-black
mb-4
"
aria-describedby="item-1"
>
{{ stats[1] }}
</dd>
</div>
<div
class="
flex flex-col
border-t border-b border-gray-400
p-6
text-center
sm:border-0 sm:border-l sm:border-r
"
>
<dt
class="
order-2
mt-2
text-2xl
leading-6
font-medium
text-gray-900
uppercase
"
>
Capacity
</dt>
<dd
class="
order-1
text-5xl
leading-none
font-extrabold
text-black
mb-4
"
>
{{ stats[0] }}PB
</dd>
</div>
<div
class="
flex flex-col
border-t border-gray-400
p-6
text-center
sm:border-0 sm:border-l
"
>
<dt
class="
order-2
mt-2
text-2xl
leading-6
font-medium
text-gray-900
uppercase
"
>
Cores
</dt>
<dd
class="
order-1
text-5xl
leading-none
font-extrabold
text-black
mb-4
"
>
{{ stats[2] }}
</dd>
</div>
<div
class="
flex flex-col
border-t border-gray-400
p-6
text-center
sm:border-0 sm:border-l
"
>
<dt
class="
order-2
mt-2
text-2xl
leading-6
font-medium
text-gray-900
uppercase
"
>
Countries
</dt>
<dd
class="
order-1
text-5xl
leading-none
font-extrabold
text-black
mb-4
"
>
{{ stats[3] }}
</dd>
</div>
</dl>
</div>
</div>
</div>
</div>
<div class="block text-center mt-5">
<a
v-if="info.link.includes('http')"
target="_blank"
:href="info.link"
class="
green
bg-green-300
lg:text-2xl
text-lg
font-extrabold
px-12
hover:bg-green-200
rounded-lg
py-4
mb-4
shadow
"
>{{ info.button }}</a
>
<a
v-else
:href="info.link"
class="
green
bg-green-300
lg:text-2xl
text-lg
font-extrabold
px-12
hover:bg-green-200
rounded-lg
py-4
mb-4
shadow
"
>{{ info.button }}</a
>
</div>
</div>
</template>
<script>
import axios from "axios";
export default {
props: ["id", "info"],
data() {
return {
stats: [],
};
},
async mounted() {
try {
// const getFarms = await axios.get(
// "https://explorer.threefold.io/api/farms?network=all"
// );
const results = await axios.get(
"https://explorer.threefold.io/api/stats"
);
// let farms = getFarms.data.length;
let nodes = results.data.onlinenodes;
let hru = parseInt(results.data.hru);
let sru = parseInt(results.data.sru) / 1000; // To TB
let capacity = (hru + sru)
.toFixed()
.slice(0, 4)
.toString()
.replace(/\B(?=(\d{2})+(?!\d))/g, ",");
let cores = results.data.cru
.toFixed()
.toString()
.replace(/\B(?=(\d{3})+(?!\d))/g, ",");
let countries = results.data.countries;
this.stats.push(capacity, nodes, cores, countries);
} catch (error) {
console.log(error);
}
},
};
</script>
<style scoped>
.green {
/* background-color: #70dfc9; */
font-family: "Orbitron", sans-serif !important;
}
dd {
font-family: "Orbitron", sans-serif !important;
}
</style>

34
src/templates/MarkdownPage.vue
View File

@@ -250,6 +250,17 @@
:cta="$page.markdownPage.cta3" :cta="$page.markdownPage.cta3"
:lastCta="true" :lastCta="true"
/> />
<SimpleColumns
v-if="$page.markdownPage.workloads.length > 0"
:id="$page.markdownPage.id"
:main="$page.markdownPage.workloadsMain"
:sections="$page.markdownPage.workloads"
/>
<Stats
:id="$page.markdownPage.id"
v-if="$page.markdownPage.stats"
:info="$page.markdownPage.stats"
/>
</div> </div>
<div class="container mx-auto"> <div class="container mx-auto">
<ConversationSec <ConversationSec
@@ -953,6 +964,25 @@
title title
content content
} }
workloadsMain {
id
title
button
link
}
workloads{
id
title
image
content
}
stats{
id
title
content
button
link
}
} }
allCustomCta { allCustomCta {
edges { edges {
@@ -1000,6 +1030,8 @@ import SplitWithImage from "~/components/custom/SplitWithImage.vue";
import ConversationSec from "~/components/custom/ConversationSec.vue"; import ConversationSec from "~/components/custom/ConversationSec.vue";
import SplitWithForm from "~/components/custom/SplitWithForm.vue"; import SplitWithForm from "~/components/custom/SplitWithForm.vue";
import Blogs from "~/components/marketing/sections/blog-sections/3_column_cards.vue"; import Blogs from "~/components/marketing/sections/blog-sections/3_column_cards.vue";
import SimpleColumns from "~/components/marketing/sections/feature-sections/SimpleColumns.vue";
import Stats from "~/components/marketing/sections/stats-sections/SimpleInCard.vue";
export default { export default {
components: { components: {
@@ -1034,6 +1066,8 @@ export default {
ConversationSec, ConversationSec,
SplitWithForm, SplitWithForm,
Blogs, Blogs,
SimpleColumns,
Stats,
}, },
computed: { computed: {
getImg() { getImg() {