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

development_new changes

Browse Source
This commit is contained in:
samaradel
2021-09-28 18:25:13 +02:00
parent 71be9fa1f8
commit fef00e8e77
110 changed files with 1033 additions and 468 deletions
Download Patch File Download Diff File Expand all files Collapse all files

268
src/templates/Info.vue Normal file
View File

@@ -0,0 +1,268 @@
<template>
<Layout :hideHeader="true" :disableScroll="true">
<div
class="container sm:pxi-0 mx-auto overflow-x-hidden pt-6 px-4 text-center"
>
<!-- <div class="pt-8">
<Alert v-if="showAlert" @clicked="linkCopied" />
<section class="post-header container mx-auto px-0 mb-4 border-b">
<h1 class="text-5xl font-medium leading-none mt-0">
{{ $page.info.title }}
</h1>
<div
class="text-2xl pt-4 pb-10 text-gray-700"
v-html="$page.info.excerpt"
></div>
</section>
<section class="post-author-list mb-10 mx-0">
<div class="flex items-center">
<div class="flex justify-between items-center">
<ul class="list-none flex author-list m-0">
<li
v-for="author in $page.info.authors"
:key="author.id"
class="author-list-item"
>
<g-link :to="author.path" v-tooltip="author.name">
<g-image
:src="author.image"
:alt="author.name"
class="
h-8
w-8
sm:h-10
sm:w-10
rounded-full
bg-gray-200
border-2 border-white
"
/>
</g-link>
</li>
</ul>
</div>
<div class="pl-3 flex flex-col text-xs leading-none uppercase">
<p>
<span
v-for="(author, index) in $page.info.authors"
:key="author.id"
>
<g-link
:to="author.path"
v-tooltip="author.name"
class="hover:underline"
>{{ author.name }}</g-link
>
<span v-if="index < $page.info.authors.length - 1">,</span>
</span>
</p>
<p class="text-gray-700">
<g-link :to="$page.info.path">
<time :datetime="$page.info.datetime">{{
$page.info.humanTime
}}</time>
</g-link>
&nbsp;&middot;&nbsp; {{ $page.info.timeToRead }} min read
&nbsp;&middot;&nbsp;
<g-link :to="$page.info.path">
<time :datetime="$page.info.datetime">{{
$page.info.startDate
}}</time>
</g-link>
</p>
</div>
<share-it
icons
:targets="['twitter', 'linkedin', 'facebook']"
class="ml-auto"
/>
<font-awesome
:icon="['fas', 'link']"
class="cursor-pointer"
@click="copyLink"
/>
</div>
</section>
</div> -->
<!-- <section class="post-image mx-auto w-full">
<g-image :src="$page.info.image"></g-image>
</section> -->
<div class="py-12">
<section
class="
post-content
container
mx-auto
relative
font-serif
text-gray-900 text-center
"
>
<g-image class="mx-auto w-full" :src="$page.info.image"></g-image>
<div
class="post-content-text text-xl text-center mx-auto"
v-html="$page.info.content"
></div>
</section>
<a
class="
inline-block
bg-white
text-lg
learn-button
hover:bg-gray-400
px-12
py-1
mr-5
my-8
border-2
shadow
border-black
"
:href="$page.info.link"
>{{ $page.info.button }}</a
>
<!-- <section class="post-tags container mx-auto relative py-10">
<g-link
v-for="tag in $page.info.tags"
:key="tag.id"
:to="tag.path"
class="
text-xs
bg-transparent
hover:text-blue-700
py-2
px-4
mr-2
border
hover:border-blue-500
border-gray-600
text-gray-700
rounded-full
"
>{{ tag.title }}</g-link
>
</section> -->
</div>
</div>
</Layout>
</template>
<page-query>
query($id: ID!) {
info(id: $id) {
id
content
image
button
link
}
metadata {
siteUrl
}
}
</page-query>
<script>
import PostListItem from "~/components/custom/Cards/PostListItem.vue";
import Alert from "~/components/custom/Alert.vue";
export default {
components: {
PostListItem,
Alert,
},
data() {
return {
showAlert: false,
};
},
methods: {
copyLink() {
const el = document.createElement("input");
el.value = window.location.href;
document.body.appendChild(el);
el.select();
document.execCommand("copy");
document.body.removeChild(el);
this.showAlert = true;
},
linkCopied(val) {
this.showAlert = val;
},
img(image) {
if (!image) return "";
if (image.src) return image.src;
return image;
},
},
computed: {
getCoverImage() {
let coverImage = "";
const cover = this.$page.info.image;
if (cover != null) {
coverImage = `${this.getBaseUrl}${this.$page.info.image.src}`;
}
return coverImage;
},
getBaseUrl() {
return this.$page.metadata.siteUrl;
},
},
metaInfo() {
return {
title: "",
titleTemplate: `ThreeFold | ${this.$page.info.title}`,
meta: [
{
key: "description",
name: "description",
content: this.$page.info.excerpt,
},
{
key: "og:title",
property: "og:title",
content: this.$page.info.title,
},
{
key: "og:description",
property: "og:description",
content: this.$page.info.excerpt,
},
{
key: "og:image",
property: "og:image",
content: this.getCoverImage,
},
{
name: "twitter:description",
property: "twitter:description",
content: this.$page.info.excerpt,
},
{
name: "twitter:image",
property: "twitter:image",
content: this.getCoverImage,
},
{
name: "twitter:title",
property: "twitter:title",
content: this.$page.info.title,
},
{
name: "twitter:card",
property: "twitter:card",
content: "summary_large_image",
},
],
};
},
};
</script>

145
src/templates/MarkdownPage.vue
View File

@@ -4,7 +4,8 @@
<Header
v-if="
$page.markdownPage.header_title &&
$page.markdownPage.header_title != ''
$page.markdownPage.header_title != '' &&
$page.markdownPage.id !== 'support'
"
:id="$page.markdownPage.id"
:title="$page.markdownPage.header_title"
@@ -32,6 +33,7 @@
"
:brandPanel2="true"
/>
<BrandPanel
:id="$page.markdownPage.id"
:brand="$page.markdownPage.brandPanel3"
@@ -40,8 +42,37 @@
"
:brandPanel3="true"
/>
<CustomCTA
:header="true"
v-if="$page.markdownPage.pageHeader"
:image="$page.markdownPage.pageHeader.image"
:title="$page.markdownPage.pageHeader.title"
/>
</div>
<div class="container sm:pxi-0 mx-auto overflow-x-hidden py-5">
<div class="container_tft sm:pxi-0 mx-auto overflow-x-hidden py-5">
<Header
v-if="
$page.markdownPage.id !== 'contact' &&
$page.markdownPage.header_title &&
$page.markdownPage.header_title != '' &&
$page.markdownPage.id !== 'about-us' &&
$page.markdownPage.id !== 'grid' &&
$page.markdownPage.id !== 'token'
"
:id="$page.markdownPage.id"
:title="$page.markdownPage.header_title"
:slogan="$page.markdownPage.header_slogan"
:image="$page.markdownPage.header_image"
:altImg="$page.markdownPage.header_altImg"
:excerpt="$page.markdownPage.header_excerpt"
:button="$page.markdownPage.button"
:link="$page.markdownPage.link"
/>
<CallToAction
:id="$page.markdownPage.id"
v-if="
@@ -98,6 +129,15 @@
"
:cta="$page.markdownPage.cta"
/>
<BrandPanel
:id="$page.markdownPage.id"
:brand="$page.markdownPage.brandPanel4"
v-if="
$page.markdownPage.brandPanel4 && $page.markdownPage.id !== 'token'
"
:brandPanel4="true"
/>
<SplitWithImage
v-if="$page.markdownPage.tft"
:id="$page.markdownPage.id"
@@ -152,28 +192,15 @@
:lastCta="true"
/>
</div>
<!-- <g-image
<g-image
v-if="
$page.markdownPage.id !== 'careers' && $page.markdownPage.solution_image
"
class="mx-auto mt-10"
:src="$page.markdownPage.solution_image.src"
/> -->
/>
<div class="container sm:pxi-0 mx-auto py-5 overflow-visible">
<logoShowcase
v-if="$page.markdownPage.logos.length > 0"
:id="$page.markdownPage.id"
:logos="$page.markdownPage.logos"
:main="$page.markdownPage.logosMain"
/>
<!-- <AppListItem
v-if="
$page.markdownPage.appData && $page.markdownPage.appData.length > 0
"
:products="$page.markdownPage.appData"
:main="$page.markdownPage.appsMain"
/> -->
<div class="container_tft sm:pxi-0 mx-auto py-5 overflow-visible">
<ShowcaseProducts
v-if="
$page.markdownPage.productData &&
@@ -183,8 +210,15 @@
:main="$page.markdownPage.productsMain"
:products="$page.markdownPage.productData"
/>
<AppListItem
v-if="
$page.markdownPage.appData && $page.markdownPage.appData.length > 0
"
:products="$page.markdownPage.appData"
:main="$page.markdownPage.appsMain"
/>
<!-- <Partenerships
<Partenerships
v-if="
$page.markdownPage.partnerships &&
$page.markdownPage.partnerships.length > 0
@@ -192,13 +226,13 @@
:id="$page.markdownPage.id"
:main="$page.markdownPage.partenershipsMain"
:partnerships="$page.markdownPage.partnerships"
/> -->
/>
<!-- <CenteredAccordion
<CenteredAccordion
v-if="$page.markdownPage.faqContent && $page.markdownPage.id == 'faq'"
:main="$page.markdownPage.faqMain"
:faqs="$page.markdownPage.faqContent"
/> -->
/>
<!-- <ShowcaseProducts
class="my-20"
@@ -210,59 +244,68 @@
:main="$page.markdownPage.productsMain"
:products="$page.markdownPage.productData"
/> -->
<!-- <SolutionsHeader
<SolutionsHeader
class="mt-0"
v-if="$page.markdownPage.header"
:header="$page.markdownPage.header"
/> -->
<!-- <g-image
/>
<g-image
v-if="$page.markdownPage.solution_image2"
:src="$page.markdownPage.solution_image2.src"
/> -->
<!-- <SolutionsHeader
/>
<SolutionsHeader
v-if="$page.markdownPage.header2"
:header="$page.markdownPage.header2"
/> -->
/>
<!-- <SolutionsHeader
<SolutionsHeader
v-if="$page.markdownPage.header3"
:header="$page.markdownPage.header3"
/> -->
/>
<!-- <logoShowcase
<logoShowcase
v-if="$page.markdownPage.logos.length > 0"
:id="$page.markdownPage.id"
:logos="$page.markdownPage.logos"
:main="$page.markdownPage.logosMain"
/> -->
/>
<!-- <FourTiersWithToggle
<FourTiersWithToggle
v-if="$page.markdownPage.jobs.length > 0"
:pricingPlans="$page.markdownPage.jobs"
:main="$page.markdownPage.jobsMain"
/> -->
/>
<!-- <SolutionsHeader
<SolutionsHeader
class="mt-0"
v-if="$page.markdownPage.header4"
:header="$page.markdownPage.header4"
/> -->
/>
<!-- <GetInTouch
<GetInTouch
v-if="
$page.markdownPage.contactData &&
$page.markdownPage.contactData.length > 0
"
:contacts="$page.markdownPage.contactData"
/> -->
/>
<!-- <SignUp
<SignUp
v-if="$page.markdownPage.signup"
:signup="$page.markdownPage.signup"
/> -->
/>
</div>
<div
class="container-fluid mx-auto"
v-for="edge in $page.allCustomCta.edges"
:key="edge.node.id"
>
<CustomCTA
v-if="edge.node.id == $page.markdownPage.id"
:title="edge.node.title"
:link="edge.node.link"
:image="edge.node.image"
/>
</div>
</Layout>
</template>
@@ -347,6 +390,8 @@
logosMain {
id
title
button
link
}
logos{
id
@@ -406,9 +451,21 @@
title
btnTxt
sourceUrl
btnTxt2
sourceUrl2
content
image
}
}
brandPanel4{
id
title
btnTxt
sourceUrl
btnTxt2
sourceUrl2
content
image
}
partenershipsMain{
id
title