update webstack

This commit is contained in:
2021-02-08 17:06:59 +02:00
parent b78623ec1c
commit 098fa4e260
313 changed files with 6370 additions and 915 deletions

View File

@@ -1,58 +0,0 @@
<template>
<Layout :hiddenHeader="true" :disableScroll="true">
<div
class="container sm:pxi-0 mx-auto overflow-x-hidden"
:style="{ 'min-height': contentHeight + 'px' }"
>
<VerticalNav :slides="getNode" />
</div>
</Layout>
</template>
<script>
import VerticalNav from "~/components/VerticalNav.vue";
export default {
metaInfo: {
title: "About us",
},
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: {
VerticalNav,
},
};
</script>
<page-query>
query {
entries: allSlides ( sortBy: "rank"){
edges {
node {
rank
id
title
img
content
}
}
}
}
</page-query>
<style scoped>
.hand {
width: 70%;
}
</style>

View File

@@ -1,33 +1,42 @@
<template>
<Layout>
<div
class="container sm:pxi-0 mx-auto"
<NewsFilterHeader
@selectedTopic="setTopic"
@selectedYear="setYear"
@selectedMonth="setMonth"
@resetAll="resetAll"
:topics="topics"
:years="years"
:months="months"
/>
<div
class="container sm:pxi-0 mx-auto mt-8"
:style="{ 'min-height': contentHeight + 'px' }"
>
<div class="flex flex-wrap with-large pt-8 pb-8 mx-4 sm:-mx-4">
<div class="flex flex-wrap news pt-12 mt-8 pb-8 mx-4 sm:-mx-4">
<PostListItem
v-for="edge in $page.entries.edges"
:key="edge.node.id"
:record="edge.node"
v-for="post in blogs.edges"
:key="post.node.id"
:record="post.node"
/>
</div>
</div>
<div class="pagination flex justify-center mb-8">
<div class="pagination flex justify-center mb-8">
<Pagination
:baseUrl="baseurl"
:currentPage="$page.entries.pageInfo.currentPage"
:totalPages="$page.entries.pageInfo.totalPages"
baseUrl=""
:currentPage="blogs.pageInfo.currentPage"
:totalPages="blogs.pageInfo.totalPages"
:maxVisibleButtons="5"
v-if="$page.entries.pageInfo.totalPages > 1"
v-if="blogs.pageInfo.totalPages > 1"
/>
</div>
</div>
</Layout>
</template>
<page-query>
query{
entries: allBlog(sortBy: "created", order: DESC) {
totalCount
pageInfo {
@@ -37,12 +46,17 @@ query{
edges {
node {
title
tags{
id
title
path
}
excerpt
image(width:800)
path
humanTime : created(format:"DD MMM YYYY")
datetime : created
author {
authors {
id
name
image(width:64, height:64, fit:inside)
@@ -51,31 +65,172 @@ query{
}
}
}
topics: allBlogTag{
edges{
node{
title
}
}
}
}
</page-query>
<script>
import PostListItem from "~/components/PostListItem.vue";
import Pagination from "~/components/Pagination.vue";
import PostListItem from "~/components/custom/Cards/PostListItem.vue";
import Pagination from "~/components/custom/Pagination.vue";
import NewsFilterHeader from "~/components/custom/NewsFilterHeader.vue";
export default {
data() {
const allMonths = [
"All",
"January",
"February",
"March",
"April",
"May",
"June",
"July",
"August",
"September",
"October",
"November",
"December",
];
const currYear = new Date().getFullYear();
var years = ["All"]
var r = this.range(2019, currYear)
r.forEach((year) => years.push(String(year)));
return {
selectedTopic: "All",
selectedYear: "All",
selectedMonth: "All",
months: allMonths,
years: years,
listArchive: false,
archiveButtonText : "Archive"
};
},
metaInfo: {
title: "Home",
title: "Newsroom",
},
components: {
PostListItem,
Pagination,
NewsFilterHeader,
},
methods: {
setTopic: function (topic) {
this.selectedTopic = topic;
},
setYear(year) {
this.selectedYear = year;
},
setMonth(month) {
this.selectedMonth = month;
},
resetAll() {
this.selectedTopic = "All";
this.selectedYear = "All";
this.selectedMonth = "All";
},
range(start, end, step) {
var range = [];
var typeofStart = typeof start;
var typeofEnd = typeof end;
if (step === 0) {
throw TypeError("Step cannot be zero.");
}
if (typeofStart == "undefined" || typeofEnd == "undefined") {
throw TypeError("Must pass start and end arguments.");
} else if (typeofStart != typeofEnd) {
throw TypeError("Start and end arguments must be of same type.");
}
typeof step == "undefined" && (step = 1);
if (end < start) {
step = -step;
}
if (typeofStart == "number") {
while (step > 0 ? end >= start : end <= start) {
range.push(start);
start += step;
}
} else if (typeofStart == "string") {
if (start.length != 1 || end.length != 1) {
throw TypeError("Only strings with one character are supported.");
}
start = start.charCodeAt(0);
end = end.charCodeAt(0);
while (step > 0 ? end >= start : end <= start) {
range.push(String.fromCharCode(start));
start += step;
}
} else {
throw TypeError("Only string and number types are supported");
}
return range;
}
},
computed: {
baseurl: function () {
return "";
},
topics: function () {
var res = ["All"];
this.$page.topics.edges.forEach((edge) => res.push(edge.node.title));
return res;
},
contentHeight() {
if (process.isClient) {
return window.innerHeight - 100;
}
},
},
blogs() {
var res = {};
var old = this.$page.entries;
res.totalCount = old.totalCount;
res.pageInfo = old.pageInfo;
res.edges = [];
for (var i = 0; i < old.edges.length; i++) {
var node = old.edges[i].node;
// Now check topic
var topics = ["All"];
node.tags.forEach((tag) => topics.push(tag.title));
var nodeDate = new Date(node.datetime);
if (!topics.includes(this.selectedTopic)) continue;
// Check year
var years = ["All", String(nodeDate.getFullYear())];
if (!years.includes(this.selectedYear)) continue;
// Check Month
var months = ["All", this.months[nodeDate.getMonth() + 1]];
if (!months.includes(this.selectedMonth)) continue;
res.edges.push({ node: node, id: node.id });
}
return res;
},
},
};
</script>

View File

@@ -1,143 +1,59 @@
<template>
<Layout :hideHeader="true" :disableScroll="true">
<div class="container sm:pxi-0 mx-auto overflow-hidden">
<!-- <VacationCard img="" imgAlt="" eyebrow="" title="" pricing="" url="" /> -->
<Header
v-for="header in headers"
:key="header.title"
:header="header"
<div class="container sm:pxi-0 mx-auto overflow-x-hidden py-5">
<Header
:title="$page.markdownPage.header_title"
:image="$page.markdownPage.header_image"
:altImg="$page.markdownPage.header_altImg"
:excerpt="$page.markdownPage.header_excerpt"
:button="$page.markdownPage.button"
:link="$page.markdownPage.link"
/>
<!-- <div class="py-10 flex flex-col">
<section class="py-10">
<div class="flex flex-wrap items-center -mx-8">
<div class="md:ml-auto md:w-1/2 md:pl-20 px-10">
<h2 class="text-4xl font-bold font-tf-secondary">
Welcome to the growing ecosystem of ThreeFold
</h2>
<p class="text-gray-600 leading-relaxed">Welcome to the growing ecosystem of ThreeFold</p>
</div>
<div class="md:ml-auto md:w-1/2 pl-8">
<img class="object-cover" src="img/equality.png" alt="imgAlt" />
</div>
</div>
</section>
</div> -->
<!-- <section class="py-5 m-5 px-0 shadow-xl border border-gray-300">
<div class="flex flex-wrap items-center -mx-8">
<div class="md:ml-auto md:w-1/3 pl-8">
<img
src="img/projects_card.png"
alt="imgAlt"
class="object-cover"
/>
</div>
<div class="md:ml-auto md:w-2/3 md:pl-10 px-20 text-left">
<h2 class="text-4xl font-semibold font-tf-secondary uppercase">
Projects
</h2>
<p class="mt-6 mb-8 leading-relaxed">
Organisations that take action now to shape a conscious digital
world.
</p>
<div
class="flex ml-52 duration-500 ease-in-out transform hover:-translate-y-1 hover:scale-105"
>
<a href="/projects"
><svg
data-name="Layer 1"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 430.04 315.72"
class="inline-block fill-current text-green-600 h-5 w-5 mt-3"
>
<title>Arrows</title>
<path
d="M46.17,96.56l84.05,0a18.74,18.74,0,0,1,19.7,9.16L274.84,244.54a14.64,14.64,0,0,1,3.74,11,14.24,14.24,0,0,1-3.74,8.19L149.26,402.36a17.41,17.41,0,0,1-19.78,9.14l-83.7.5c-.48-.14-8.05-2.47-10.24-10.14a15.37,15.37,0,0,1,2.22-12.61L159,254.1,36.28,116.58c-.28-.65-3-7.18.79-13.43A14.9,14.9,0,0,1,46.17,96.56Z"
transform="translate(-35 -96.28)"
class="cls-1"
></path>
<path
d="M232.57,96.56l84.05,0a18.74,18.74,0,0,1,19.7,9.16L461.24,244.54a14.69,14.69,0,0,1,3.73,11,14.25,14.25,0,0,1-3.73,8.19L335.65,402.36a17.39,17.39,0,0,1-19.77,9.14l-83.71.5c-.47-.14-8-2.47-10.23-10.14a15.37,15.37,0,0,1,2.22-12.61L345.39,254.1,222.68,116.58c-.28-.65-3-7.18.79-13.43A14.9,14.9,0,0,1,232.57,96.56Z"
transform="translate(-35 -96.28)"
class="cls-1"
></path></svg
></a>
<a
href="/projects"
class="inline-block text-green-600 hover:underline py-2 ml-2 uppercase text-right font-bold"
>LEARN MORE</a
>
</div>
</div>
</div>
</section> -->
<!-- <vue-markdown> </vue-markdown> -->
<NewCard v-for="card in cards" :key="card.title" :card="card" />
<InTheNews
v-if="$page.markdownPage.inTheNews"
:news="$page.markdownPage.inTheNews"
/>
</div>
</Layout>
</template>
<script>
import VueMarkdown from "vue-markdown";
import NewCard from "~/components/NewCard.vue";
import Header from "~/components/Header.vue";
<page-query>
query {
markdownPage(id: "home") {
id
path
header_title
header_image
header_excerpt
header_altImg
button
link
inTheNews {
id
excerpt
partners {
path
logo
}
}
}
}
</page-query>
<script>
import Header from "~/components/marketing/sections/cta-sections/Header.vue";
import InTheNews from "~/components/marketing/sections/logo-clouds/off_white_grid.vue";
export default {
metaInfo: {
title: "Home",
components: {
Header,
InTheNews,
},
data() {
metaInfo() {
return {
cards: [
{
title: "PROJECTS",
content:
"Organisations that take action now to shape a conscious digital world.",
img: "background-image:url('https://fakeimg.pl/640x360')",
button: "Learn More",
link: "/projects",
},
{
title: "PEOPLE",
content:
"Independent of location, race, gender, religion we leave no one behind.",
img: "background-image:url('https://fakeimg.pl/640x360')",
button: "Learn More",
link: "/people",
},
{
title: "BLOG",
content:
"We collaborate to improve our solutions, efficiency, reach, visibility and service.",
img: "background-image:url('https://fakeimg.pl/640x360')",
button: "Learn More",
link: "/blog",
},
],
headers: [
{
title: "THANK YOU THREEFOLD MEMBERS",
img: "img/equality.png",
altImg :"home",
content:"Welcome to the growing ecosystem of ThreeFold.",
},
],
title: this.$page.markdownPage.title,
};
},
computed: {
contentHeight() {
if (process.isClient) {
return window.innerHeight - 50;
}
},
},
components: {
VueMarkdown,
NewCard,
Header,
},
};
</script>
</script>

View File

@@ -1,8 +1,20 @@
<template>
<Layout>
<FilterHeader />
<div class="container sm:pxi-0 mx-auto overflow-hidden">
<div class="flex flex-wrap with-large pt-12 mt-8 pb-8 mx-4 sm:-mx-4">
<NewsFilterHeader
@selectedTopic="setTopic"
@selectedYear="setYear"
@selectedMonth="setMonth"
@resetAll="resetAll"
:topics="topics"
:years="years"
:months="months"
/>
<div
class="container sm:pxi-0 mx-auto overflow-hidden"
:style="{ 'min-height': contentHeight + 'px' }"
>
<div class="flex flex-wrap news pt-12 mt-8 pb-8 mx-4 sm:-mx-4">
<PostListItem
:showtags="true"
v-for="edge in news.edges"
@@ -10,6 +22,9 @@
:record="edge.node"
/>
</div>
<div class="text-center" v-if="news.edges.length == 0">
<h2 class="inlibe-flex mx-auto text-gray-700 w-3/4">No results</h2>
</div>
</div>
<div class="pagination flex justify-center mb-8">
<Pagination
@@ -24,9 +39,7 @@
</template>
<page-query>
query{
entries: allNews(sortBy: "created", order: DESC) {
totalCount
pageInfo {
@@ -49,25 +62,147 @@ query{
}
}
}
topics: allNewsTag{
edges{
node{
title
}
}
}
}
</page-query>
<script>
import FilterHeader from "~/components/FilterHeader.vue";
import PostListItem from "~/components/PostListItem.vue";
import Pagination from "~/components/Pagination.vue";
import NewsFilterHeader from "~/components/custom/NewsFilterHeader.vue";
import PostListItem from "~/components/custom/Cards/PostListItem.vue";
import Pagination from "~/components/custom/Pagination.vue";
export default {
data() {
const allMonths = [
"All",
"January",
"February",
"March",
"April",
"May",
"June",
"July",
"August",
"September",
"October",
"November",
"December",
];
const currYear = new Date().getFullYear();
var years = ["All"];
var r = this.range(2019, currYear);
r.forEach((year) => years.push(String(year)));
return {
selectedTopic: "All",
selectedYear: "All",
selectedMonth: "All",
months: allMonths,
years: years,
listArchive: false,
archiveButtonText: "Archive",
};
},
metaInfo: {
title: "Home",
title: "Newsroom",
},
components: {
PostListItem,
Pagination,
FilterHeader,
NewsFilterHeader,
},
methods: {
setTopic: function (topic) {
this.selectedTopic = topic;
},
setYear(year) {
this.selectedYear = year;
},
setMonth(month) {
this.selectedMonth = month;
},
resetAll() {
this.selectedTopic = "All";
this.selectedYear = "All";
this.selectedMonth = "All";
},
toggleListArchive() {
if (this.listArchive) {
this.listArchive = false;
} else {
this.listArchive = true;
}
},
// toggleArchiveButtonText() {
// if (this.archiveButtonText == "Archive") {
// this.archiveButtonText = "News";
// this.resetAll()
// } else {
// this.archiveButtonText = "Archive"
// }
// },
range(start, end, step) {
var range = [];
var typeofStart = typeof start;
var typeofEnd = typeof end;
if (step === 0) {
throw TypeError("Step cannot be zero.");
}
if (typeofStart == "undefined" || typeofEnd == "undefined") {
throw TypeError("Must pass start and end arguments.");
} else if (typeofStart != typeofEnd) {
throw TypeError("Start and end arguments must be of same type.");
}
typeof step == "undefined" && (step = 1);
if (end < start) {
step = -step;
}
if (typeofStart == "number") {
while (step > 0 ? end >= start : end <= start) {
range.push(start);
start += step;
}
} else if (typeofStart == "string") {
if (start.length != 1 || end.length != 1) {
throw TypeError("Only strings with one character are supported.");
}
start = start.charCodeAt(0);
end = end.charCodeAt(0);
while (step > 0 ? end >= start : end <= start) {
range.push(String.fromCharCode(start));
start += step;
}
} else {
throw TypeError("Only string and number types are supported");
}
return range;
},
},
computed: {
topics: function () {
var res = ["All"];
this.$page.topics.edges.forEach((edge) => res.push(edge.node.title));
return res;
},
baseurl: function () {
return "";
},
@@ -81,14 +216,43 @@ export default {
for (var i = 0; i < old.edges.length; i++) {
var node = old.edges[i].node;
const diff = Math.abs(new Date() - new Date(node.datetime));
var nodeDate = new Date(node.datetime);
const diff = Math.abs(new Date() - nodeDate);
const diffDays = Math.ceil(diff / (1000 * 60 * 60 * 24));
if (diffDays <= 30) {
res.edges.push({ node: node, id: node.id });
var selected = false;
if (!this.listArchive && diffDays <= 30) {
selected = true;
} else if (this.listArchive && diffDays > 30) {
selected = true;
}
if (!selected) continue;
// Now check topic
var topics = ["All"];
node.tags.forEach((tag) => topics.push(tag.title));
if (!topics.includes(this.selectedTopic)) continue;
// Check year
var years = ["All", String(nodeDate.getFullYear())];
if (!years.includes(this.selectedYear)) continue;
// Check Month
var months = ["All", this.months[nodeDate.getMonth() + 1]];
if (!months.includes(this.selectedMonth)) continue;
res.edges.push({ node: node, id: node.id });
}
return res;
},
contentHeight() {
if (process.isClient) {
return window.innerHeight - 570;
}
},
},
};
</script>

5
src/pages/README.md Normal file
View File

@@ -0,0 +1,5 @@
Pages are usually used for normal pages or for listing items from a GraphQL collection.
Add .vue files here to create pages. For example **About.vue** will be **site.com/about**.
Learn more about pages: https://gridsome.org/docs/pages/
You can delete this file.