Files
www_threefold_io/src/templates/MarkdownPage.vue
samaradel eb7e933090 Fix build
2022-06-12 11:07:27 +02:00

1224 lines
30 KiB
Vue

<template>
<Layout :hideHeader="true" :disableScroll="true">
<div class="container-fluid sm:pxi-0 mx-auto overflow-x-hidden">
<Header
v-if="
$page.markdownPage.header_title &&
$page.markdownPage.header_title != '' &&
$page.markdownPage.id !== 'oldsupport'
"
:id="$page.markdownPage.id"
:title="$page.markdownPage.header_title"
:title2="$page.markdownPage.header_title2"
: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"
:link2="$page.markdownPage.link2"
:buttonImg="$page.markdownPage.buttonImg"
:buttonImg2="$page.markdownPage.buttonImg2"
:text1="$page.markdownPage.header_link1_txt"
:link1="$page.markdownPage.header_link1"
:text2="$page.markdownPage.header_link2_txt"
:linkheader2="$page.markdownPage.header_link2"
/>
<Blogs
v-if="$page.markdownPage.blogs && $page.markdownPage.id == 'cloud'"
:id="$page.markdownPage.id"
:blogs="$page.markdownPage.blogs"
/>
<BrandPanel
:id="$page.markdownPage.id"
v-if="
$page.markdownPage.brandPanel &&
$page.markdownPage.id !== 'tft' &&
$page.markdownPage.brandPanel &&
$page.markdownPage.id !== 'farm' &&
$page.markdownPage.id !== 'developer' &&
$page.markdownPage.id !== 'cloud'
"
:brand="$page.markdownPage.brandPanel"
/>
<BrandPanel
:id="$page.markdownPage.id"
:brand="$page.markdownPage.brandPanel2"
v-if="
$page.markdownPage.brandPanel2 &&
$page.markdownPage.id !== 'tft' &&
$page.markdownPage.brandPanel2 &&
$page.markdownPage.id !== 'farm' &&
$page.markdownPage.id !== 'developer' &&
$page.markdownPage.id !== 'community' &&
$page.markdownPage.id !== 'cloud'
"
:brandPanel2="true"
/>
<BrandPanel
:id="$page.markdownPage.id"
:brand="$page.markdownPage.brandPanel3"
v-if="
$page.markdownPage.brandPanel3 &&
$page.markdownPage.id !== 'tft' &&
$page.markdownPage.brandPanel3 &&
$page.markdownPage.id !== 'farm' &&
$page.markdownPage.id !== 'developer' &&
$page.markdownPage.id !== 'community' &&
$page.markdownPage.id !== 'cloud'
"
:brandPanel3="true"
/>
<CustomCTA
:header="true"
v-if="$page.markdownPage.pageHeader"
:image="$page.markdownPage.pageHeader.image"
:title="$page.markdownPage.pageHeader.title"
/>
<Header
v-if="
$page.markdownPage.id !== 'contact' &&
$page.markdownPage.header_title &&
$page.markdownPage.header_title != '' &&
$page.markdownPage.id !== 'mission' &&
$page.markdownPage.id !== 'farm' &&
$page.markdownPage.id !== 'grid' &&
$page.markdownPage.id !== 'developer' &&
$page.markdownPage.id !== 'tft' &&
$page.markdownPage.id !== 'community' &&
$page.markdownPage.id !== 'conversations' &&
$page.markdownPage.id !== 'cloud'
"
: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="
$page.markdownPage.cta &&
$page.markdownPage.id !== 'grid' &&
$page.markdownPage.id !== 'tft' &&
$page.markdownPage.id !== 'farm' &&
$page.markdownPage.id !== 'conversations'
"
:cta="$page.markdownPage.cta"
/>
<CallToAction
:id="$page.markdownPage.id"
v-if="
$page.markdownPage.cta2 &&
$page.markdownPage.id !== 'tft' &&
$page.markdownPage.id !== 'farm' &&
$page.markdownPage.id !== 'community' &&
$page.markdownPage.id !== 'conversations' &&
$page.markdownPage.id !== 'cloud'
"
:cta="$page.markdownPage.cta2"
:textOnly="true"
/>
<MarketInfo
v-if="$page.markdownPage.marketInfo.length > 0"
:main="$page.markdownPage.marketInfoMain"
:mainItem="$page.markdownPage.mainItem"
:marketInfo="$page.markdownPage.marketInfo"
/>
<!-- <SignUp
v-if="$page.markdownPage.signup"
:signup="$page.markdownPage.signup"
/> -->
<!-- <Comparison
v-if="
$page.markdownPage.comparisonSecs &&
$page.markdownPage.comparisonSecs.length > 0
"
:main="$page.markdownPage.comparisonMain"
:sections="$page.markdownPage.comparisonSecs"
/> -->
<!-- <TFTFuel
v-if="
$page.markdownPage.comparisonSecs &&
$page.markdownPage.comparisonSecs.length > 0
"
:main="$page.markdownPage.comparisonMain"
:sections="$page.markdownPage.comparisonSecs"
/> -->
<CallToAction
:id="$page.markdownPage.id"
v-if="
($page.markdownPage.cta && $page.markdownPage.id == 'grid') ||
$page.markdownPage.id == 'tft'
"
:cta="$page.markdownPage.cta"
/>
<BrandPanel
:id="$page.markdownPage.id"
:brand="$page.markdownPage.brandPanel4"
v-if="$page.markdownPage.brandPanel4 && $page.markdownPage.id !== 'tft'"
:brandPanel4="true"
/>
<SplitWithImage
v-if="$page.markdownPage.tft"
:id="$page.markdownPage.id"
:tft="$page.markdownPage.tft"
/>
<Features
class="lg:my-20"
:id="$page.markdownPage.id"
v-if="$page.markdownPage.network.length > 0"
:main="$page.markdownPage.networkMain"
:features="$page.markdownPage.network"
/>
</div>
<!-- <div class="container sm:pxi-0 mx-auto overflow-x-hidden"> -->
<LogoShowcase
v-if="
$page.markdownPage.logos.length > 0 && $page.markdownPage.id == 'cloud'
"
:id="$page.markdownPage.id"
:logos="$page.markdownPage.logos"
/>
<!-- </div> -->
<div class="container-fluid sm:pxi-0 mx-auto overflow-x-hidden">
<BrandPanel
:id="$page.markdownPage.id"
:brand="$page.markdownPage.brandPanel"
v-if="
$page.markdownPage.brandPanel &&
$page.markdownPage.id == 'tft' &&
$page.markdownPage.id !== 'cloud'
"
:lastBrand="false"
/>
<BrandPanel
:id="$page.markdownPage.id"
:brand="$page.markdownPage.brandPanel2"
v-if="$page.markdownPage.brandPanel2 && $page.markdownPage.id == 'tft'"
:brandPanel2="true"
/>
<BrandPanel
:id="$page.markdownPage.id"
:brand="$page.markdownPage.brandPanel3"
v-if="$page.markdownPage.brandPanel3 && $page.markdownPage.id == 'tft'"
:brandPanel3="true"
/>
<RoadMap
:id="$page.markdownPage.id"
v-if="$page.markdownPage.roadmap"
:roadmap="$page.markdownPage.roadmap"
/>
<CallToAction
:id="$page.markdownPage.id"
v-if="$page.markdownPage.cta2 && $page.markdownPage.id == 'tft'"
:cta="$page.markdownPage.cta2"
:lastCta="true"
/>
<BrandPanel
:id="$page.markdownPage.id"
:brand="$page.markdownPage.brandPanel"
:lastBrand="false"
v-if="$page.markdownPage.brandPanel && $page.markdownPage.id == 'cloud'"
/>
<CallToAction
:id="$page.markdownPage.id"
v-if="
$page.markdownPage.cta3 &&
$page.markdownPage.id !== 'developer' &&
$page.markdownPage.id !== 'community' &&
$page.markdownPage.id !== 'support'
"
: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"
/>
<CallToAction
v-if="$page.markdownPage.cta2 && $page.markdownPage.id == 'cloud'"
:id="$page.markdownPage.id"
:cta="$page.markdownPage.cta2"
:textOnly="true"
/>
<!-- <BrandPanel
class="my-20"
:brand="$page.markdownPage.brandPanel2"
:id="$page.markdownPage.id"
v-if="
$page.markdownPage.brandPanel2 && $page.markdownPage.id == 'cloud'
"
:lastBrand="true"
/> -->
</div>
<div class="container sm:pxi-0 mx-auto overflow-x-hidden">
<ConversationSec
v-if="
$page.markdownPage.conversations &&
$page.markdownPage.conversations.length > 0
"
:main="$page.markdownPage.conversationsMain"
:conversations="$page.markdownPage.conversations"
/>
<CallToAction
:id="$page.markdownPage.id"
v-if="
$page.markdownPage.cta && $page.markdownPage.id == 'conversations'
"
:cta="$page.markdownPage.cta"
/>
<CallToAction
:id="$page.markdownPage.id"
v-if="
$page.markdownPage.cta2 && $page.markdownPage.id == 'conversations'
"
:cta="$page.markdownPage.cta2"
/>
<SplitTwoTone
v-if="$page.markdownPage.contacts && $page.markdownPage.id == 'tfLabs'"
:id="$page.markdownPage.id"
:map="$page.markdownPage.map"
:contacts="$page.markdownPage.contacts"
/>
</div>
<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-fluid sm:pxi-0 mx-auto py-5 overflow-visible">
<SplitWithForm
v-if="$page.markdownPage.subscribe"
:id="$page.markdownPage.id"
:subscribe="$page.markdownPage.subscribe"
/>
<ShowcaseProducts
v-if="
$page.markdownPage.productData.length > 0 &&
$page.markdownPage.productData &&
$page.markdownPage.id !== 'developer'
"
:id="$page.markdownPage.id"
:main="$page.markdownPage.productsMain"
:products="$page.markdownPage.productData"
/>
<CallToAction
:id="$page.markdownPage.id"
v-if="$page.markdownPage.cta && $page.markdownPage.id == 'farm'"
:cta="$page.markdownPage.cta"
/>
<BrandPanel
:id="$page.markdownPage.id"
:brand="$page.markdownPage.brandPanel"
:lastBrand="false"
v-if="
$page.markdownPage.brandPanel &&
$page.markdownPage.id == 'farm' &&
$page.markdownPage.id !== 'cloud'
"
/>
<BrandPanel
:id="$page.markdownPage.id"
:brand="$page.markdownPage.brandPanel3"
v-if="$page.markdownPage.brandPanel3 && $page.markdownPage.id == 'farm'"
:brandPanel3="true"
/>
<TFTFuel
v-if="$page.markdownPage.farmingProcess.length > 0"
:id="$page.markdownPage.id"
:main="$page.markdownPage.farmingMain"
:sections="$page.markdownPage.farmingProcess"
:farmingProcess="true"
/>
<TFTFuel
v-if="$page.markdownPage.cultivationProcess.length > 0"
:id="$page.markdownPage.id"
:main="$page.markdownPage.cultivationMain"
:sections="$page.markdownPage.cultivationProcess"
:cultivationProcess="true"
/>
<CallToAction
:id="$page.markdownPage.id"
v-if="$page.markdownPage.cta2 && $page.markdownPage.id == 'farm'"
:cta="$page.markdownPage.cta2"
:lastCta="true"
/>
<BrandPanel
:id="$page.markdownPage.id"
:brand="$page.markdownPage.brandPanel2"
v-if="$page.markdownPage.brandPanel2 && $page.markdownPage.id == 'farm'"
:brandPanel2="true"
/>
<!-- developer page -->
<BrandPanel
:id="$page.markdownPage.id"
:brand="$page.markdownPage.brandPanel3"
v-if="
$page.markdownPage.brandPanel3 && $page.markdownPage.id == 'developer'
"
:brandPanel3="true"
/>
<ShowcaseProducts
v-if="
$page.markdownPage.productData.length > 0 &&
$page.markdownPage.productData &&
$page.markdownPage.id == 'developer'
"
:id="$page.markdownPage.id"
:main="$page.markdownPage.productsMain"
:products="$page.markdownPage.productData"
/>
<!-- <ShowcaseProducts
class="my-20"
v-if="
$page.markdownPage.productData &&
$page.markdownPage.productData.length > 0
"
:id="$page.markdownPage.id"
:main="$page.markdownPage.productsMain"
:products="$page.markdownPage.productData"
/> -->
<CallToAction
:id="$page.markdownPage.id"
v-if="$page.markdownPage.cta3 && $page.markdownPage.id == 'developer'"
:cta="$page.markdownPage.cta3"
:lastCta="true"
/>
<BrandPanel
:id="$page.markdownPage.id"
:brand="$page.markdownPage.brandPanel2"
v-if="
$page.markdownPage.brandPanel2 && $page.markdownPage.id == 'developer'
"
:brandPanel2="true"
/>
<LinkTable
v-if="$page.markdownPage.footers"
:id="$page.markdownPage.id"
:record="$page.markdownPage.footers"
:main="$page.markdownPage.footersMain"
/>
<AppListItem
v-if="
$page.markdownPage.appData && $page.markdownPage.appData.length > 0
"
:products="$page.markdownPage.appData"
:main="$page.markdownPage.appsMain"
/>
<!-- community page -->
<InTheNews
:id="$page.markdownPage.id"
v-if="$page.markdownPage.inTheNews"
:news="$page.markdownPage.inTheNews"
/>
<CallToAction
:id="$page.markdownPage.id"
v-if="$page.markdownPage.cta3 && $page.markdownPage.id == 'support'"
:cta="$page.markdownPage.cta3"
:textOnly="true"
/>
<CallToAction
:id="$page.markdownPage.id"
v-if="$page.markdownPage.cta2 && $page.markdownPage.id == 'community'"
:cta="$page.markdownPage.cta2"
/>
<BrandPanel
:id="$page.markdownPage.id"
:brand="$page.markdownPage.brandPanel3"
v-if="
$page.markdownPage.brandPanel3 && $page.markdownPage.id == 'community'
"
:brandPanel3="true"
/>
<BrandPanel
:id="$page.markdownPage.id"
:brand="$page.markdownPage.brandPanel2"
v-if="
$page.markdownPage.brandPanel2 && $page.markdownPage.id == 'community'
"
:brandPanel2="true"
/>
<CallToAction
:id="$page.markdownPage.id"
v-if="$page.markdownPage.cta3 && $page.markdownPage.id == 'community'"
:cta="$page.markdownPage.cta3"
:textOnly="true"
/>
<Partenerships
v-if="
$page.markdownPage.partnerships &&
$page.markdownPage.partnerships.length > 0
"
:id="$page.markdownPage.id"
:main="$page.markdownPage.partenershipsMain"
:partnerships="$page.markdownPage.partnerships"
/>
<CenteredAccordion
v-if="
($page.markdownPage.faqContent && $page.markdownPage.id == 'faq') ||
$page.markdownPage.id == 'farmfaq' ||
$page.markdownPage.id == 'tftfaq'
"
:main="$page.markdownPage.faqMain"
:faqs="$page.markdownPage.faqContent"
/>
<!-- <ShowcaseProducts
class="my-20"
v-if="
$page.markdownPage.productData &&
$page.markdownPage.productData.length > 0
"
:id="$page.markdownPage.id"
:main="$page.markdownPage.productsMain"
:products="$page.markdownPage.productData"
/> -->
<SolutionsHeader
class="mt-0"
v-if="$page.markdownPage.header"
:header="$page.markdownPage.header"
/>
<g-image
class="w-3/4 mx-auto"
v-if="$page.markdownPage.solution_image2"
:src="$page.markdownPage.solution_image2.src"
/>
<SolutionsHeader
v-if="$page.markdownPage.header2"
:header="$page.markdownPage.header2"
/>
<SolutionsHeader
v-if="$page.markdownPage.header3"
:header="$page.markdownPage.header3"
/>
<LogoShowcase
v-if="
$page.markdownPage.logos.length > 0 &&
$page.markdownPage.id !== 'cloud'
"
:id="$page.markdownPage.id"
:logos="$page.markdownPage.logos"
:main="$page.markdownPage.logosMain"
/>
<FourTiersWithToggle
v-if="$page.markdownPage.jobs.length > 0"
:pricingPlans="$page.markdownPage.jobs"
:main="$page.markdownPage.jobsMain"
/>
<SolutionsHeader
class="mt-0"
v-if="$page.markdownPage.header4"
:header="$page.markdownPage.header4"
/>
<GetInTouch
v-if="
$page.markdownPage.contactData &&
$page.markdownPage.contactData.length > 0
"
:contacts="$page.markdownPage.contactData"
/>
<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>
<page-query>
query($id: ID!) {
markdownPage(id: $id) {
id
path
excerpt
metaTitle
metaDesc
metaImg
header_excerpt
header_altImg
header_title
header_title2
header_image
header_slogan
button
buttonImg
link
buttonImg2
link2
solution_image
solution_image2
header_link1_txt
header_link1
header_link2_txt
header_link2
header{
title
subtitle
content
btn1
link1
btn2
link2
}
header2{
title
subtitle
content
btn1
link1
btn2
link2
}
header4{
title
subtitle
content
btn1
link1
btn2
link2
}
productsMain{
id
title
subtitle
content
button
link
# image
}
productData{
id
title
content
image
button
link
}
comparisonMain{
id
title
description
button
link
button2
link2
}
comparisonSecs{
id
svg
title
content
}
logosMain {
id
title
title2
subtitle
image
button
link
}
logos{
id
image
url
}
footersMain {
id
title1
title2
}
footers{
id
items{
title
links{
name
link
}
}
}
inTheNews {
id
title
content
partners {
path
logo
}
}
cta{
title
title2
content
image
button
link
button2
link2
}
cta2{
title
subtitle
image
button
link
button2
link2
link4
link5
content
image2
image3
image4
image5
}
cta3{
title
subtitle
content
button
link
button2
link2
image
faqbutton
faqlink
faqbutton2
faqlink2
faqbutton3
faqlink3
smalltitle
smalltitle2
button2
link2
}
cta4{
title1
title2
slogan
content
button
link
}
brandPanel{
id
title
btnTxt
sourceUrl
content
image
}
brandPanel2{
id
title
subtitle
btnTxt
sourceUrl
btnTxt2
sourceUrl2
content
image
button
link
button2
link2
}
brandPanel3{
id
title
btnTxt
subtitle
sourceUrl
sourceUrl2
content
image
}
brandPanel4{
id
title
btnTxt
sourceUrl
btnTxt2
sourceUrl2
content
image
}
partenershipsMain{
id
title
slogan
content
link
link2
button
button2
}
partnerships {
id
title
img
content
}
faqMain{
id
title
}
faqContent{
id
question
content
}
jobsMain{
id
# title
# button1
# button2
excerpt
}
jobs{
id
title
excerpt
price
duration
button
link
includeTitle
options
}
contactData{
id
title
mail
phone
}
pageHeader {
id
title
image
}
carousel {
id
img
}
sliderMain {
id
title
subtitle
content
}
card{
id
img
title
content
button
link
}
useTftMain {
id
image
}
tftUses{
id
title
content
}
farmingMain {
id
title
subtitle
title2
subtitle2
subtext
}
farmingProcess{
id
image
content
}
cultivationMain {
id
title
subtitle
}
cultivationProcess{
id
image
content
}
roadmap {
image
content
}
marketInfoMain{
id
title
content
}
mainItem{
id
image
content
}
marketInfo {
id
image
content
}
tft {
id
image
title
subtitle
content
button
link
}
networkMain{
id
title
}
network{
id
title
image
content
}
conversationsMain {
id
title
}
conversations {
id
day
month
time
title
hosts
speakers
button
link
content
}
subscribe {
id
title
content
button
link
image
}
blogs{
id
image
title
content
btnTxt
sourceUrl
}
workloadsMain {
id
title
button
link
}
workloads{
id
title
image
content
}
stats{
id
title
content
button
link
}
contacts {
id
title
subtitle
emailTxt
email
content
}
map {
id
map
}
}
allCustomCta {
edges {
node {
id
title
link
image
}
}
}
}
</page-query>
<script>
import NewCard from "~/components/marketing/sections/cta-sections/NewCard.vue";
import Header from "~/components/marketing/sections/cta-sections/Header.vue";
import VerticalNav from "~/components/custom/Navbar/VerticalNav.vue";
import GetInTouch from "~/components/custom/Navbar/Getintouch.vue";
import ShowcaseProducts from "~/components/marketing/sections/cta-sections/ShowcaseProducts.vue";
import SolutionsHeader from "~/components/custom/sections/header/HeaderSection.vue";
import HowItWorks from "~/components/custom/sections/HowItWorks.vue";
import Features from "~/components/custom/sections/Features.vue";
import InTheNews from "~/components/marketing/sections/logo-clouds/off_white_grid.vue";
import LogoShowcase from "~/components/marketing/sections/cta-sections/logoShowcase.vue";
import CallToAction from "~/components/custom/sections/CallToAction.vue";
import CallToActionbg1 from "~/components/custom/sections/CallToActionbg1.vue";
import SignUp from "~/components/custom/sections/SignUp.vue";
import Comparison from "~/components/custom/sections/Comparison.vue";
import TFTFuel from "~/components/marketing/sections/team-sections/with_large_images.vue";
import Roadmap from "~/components/custom/sections/Roadmap.vue";
import FourTiersWithToggle from "~/components/marketing/sections/pricing/four_tiers_with_toggle.vue";
import WithComparisonTable from "~/components/marketing/sections/pricing/with_comparison_table.vue";
import BrandPanel from "~/components/marketing/sections/cta-sections/BrandPanel.vue";
import AppListItem from "~/components/AppListItem.vue";
import Partenerships from "~/components/marketing/sections/team-sections/grid_with_large_round_images.vue";
import CenteredAccordion from "~/components/marketing/sections/faq-sections/CenteredAccordion.vue";
import CustomCTA from "~/components/custom/sections/CustomCTA.vue";
import Slider from "~/components/custom/Slider.vue";
import RoadMap from "~/components/custom/Roadmap.vue";
import MarketInfo from "~/components/custom/MarketInfo.vue";
import LinkTable from "~/components/marketing/sections/cta-sections/Link_Table.vue";
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";
import SplitTwoTone from "~/components/marketing/sections/contact-sections/split_two_tone.vue";
export default {
components: {
NewCard,
Header,
LinkTable,
VerticalNav,
GetInTouch,
SolutionsHeader,
ShowcaseProducts,
HowItWorks,
Features,
InTheNews,
LogoShowcase,
CallToAction,
CallToActionbg1,
SignUp,
Comparison,
TFTFuel,
Roadmap,
FourTiersWithToggle,
WithComparisonTable,
BrandPanel,
AppListItem,
Partenerships,
CenteredAccordion,
CustomCTA,
Slider,
RoadMap,
MarketInfo,
SplitWithImage,
ConversationSec,
SplitWithForm,
Blogs,
SimpleColumns,
Stats,
SplitTwoTone,
},
computed: {
getImg() {
let img = "";
if (process.isClient) {
img = `${window.location.origin}${this.$page.markdownPage.metaImg.src}`;
}
return img;
},
pageName() {
let path = this.$route.path.substring(1);
let name = path[0].toUpperCase() + path.slice(1);
return name;
},
},
metaInfo() {
return {
title: "",
titleTemplate: this.$page.markdownPage.metaTitle,
meta: [
{
key: "description",
name: "description",
content: this.$page.markdownPage.metaDesc,
},
{
key: "og:title",
property: "og:title",
content: this.$page.markdownPage.metaTitle,
},
{
key: "og:description",
property: "og:description",
content: this.$page.markdownPage.metaDesc,
},
{
key: "og:image",
property: "og:image",
content: this.getImg,
},
{
key: "twitter:description",
name: "twitter:description",
content: this.$page.markdownPage.metaDesc,
},
{
key: "twitter:image",
property: "twitter:image",
content: this.getImg,
},
{
key: "twitter:title",
property: "twitter:title",
content: this.$page.markdownPage.metaTitle,
},
],
};
},
};
</script>
<style scoped>
/**
* Add back the container background-color, border-radius, padding, margin
* and overflow that we removed from <pre>.
*/
.gridsome-highlight {
background-color: #fdf6e3;
border-radius: 0.3em;
margin: 0.5em 0;
padding: 1em;
overflow: auto;
}
.gridsome-highlight-code-line {
background-color: #feb;
display: block;
margin-right: -1em;
margin-left: -1em;
padding-right: 1em;
padding-left: 0.75em;
border-left: 0.25em solid #f99;
}
/**
* Remove the default PrismJS theme background-color, border-radius, margin,
* padding and overflow.
* 1. Make the element just wide enough to fit its content.
* 2. Always fill the visible space in .gatsby-highlight.
* 3. Adjust the position of the line numbers
*/
.gridsome-highlight pre[class*="language-"] {
background-color: transparent;
margin: 0;
padding: 0;
overflow: initial;
float: left; /* 1 */
min-width: 100%; /* 2 */
}
/* Adjust the position of the line numbers */
.gridsome-highlight pre[class*="language-"].line-numbers {
padding-left: 2.8em;
}
</style>