Add workloads & stats secs
This commit is contained in:
samaradel
@@ -489,6 +489,20 @@ module.exports = {
|
||||
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',
|
||||
@@ -555,7 +569,9 @@ module.exports = {
|
||||
info: 'Info',
|
||||
dev: 'Dev',
|
||||
conversationsMain: 'ConversationsMain',
|
||||
conversations: 'Conversations'
|
||||
conversations: 'Conversations',
|
||||
workloadsMain: 'WorkloadsMain',
|
||||
workloads: 'Workloads',
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
@@ -250,6 +250,17 @@
|
||||
:cta="$page.markdownPage.cta3"
|
||||
: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 class="container mx-auto">
|
||||
<ConversationSec
|
||||
@@ -953,6 +964,25 @@
|
||||
title
|
||||
content
|
||||
}
|
||||
workloadsMain {
|
||||
id
|
||||
title
|
||||
button
|
||||
link
|
||||
}
|
||||
workloads{
|
||||
id
|
||||
title
|
||||
image
|
||||
content
|
||||
}
|
||||
stats{
|
||||
id
|
||||
title
|
||||
content
|
||||
button
|
||||
link
|
||||
}
|
||||
}
|
||||
allCustomCta {
|
||||
edges {
|
||||
@@ -1000,6 +1030,8 @@ import SplitWithImage from "~/components/custom/SplitWithImage.vue";
|
||||
import ConversationSec from "~/components/custom/ConversationSec.vue";
|
||||
import SplitWithForm from "~/components/custom/SplitWithForm.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 {
|
||||
components: {
|
||||
@@ -1034,6 +1066,8 @@ export default {
|
||||
ConversationSec,
|
||||
SplitWithForm,
|
||||
Blogs,
|
||||
SimpleColumns,
|
||||
Stats,
|
||||
},
|
||||
computed: {
|
||||
getImg() {
|
||||
|
||||
Reference in New Issue
Block a user