huanld/ghost-theme
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: loads

Browse Source
This commit is contained in:
Dimitrie Stefanescu
2021-06-27 17:24:47 +01:00
parent 67730a6b2b
commit 9a796e4ef6
6 changed files with 97 additions and 93 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/built/screen.css
+2 -8
View File
@@ -48627,14 +48627,8 @@ a.no-underline:hover{
text-decoration: none;
}
@media (prefers-color-scheme: dark) {
pre {
--tw-bg-opacity: 1;
background-color: rgba(209, 213, 219, var(--tw-bg-opacity));
}
}
pre {
pre{
max-width: 100%;
--tw-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
assets/css/screen.css
+1 -1
View File
@@ -20,7 +20,7 @@ a.no-underline:hover{
}
pre{
@apply shadow-inner dark:bg-gray-300;
@apply shadow-inner max-w-full;
}
.text-gradient {
custom-tutorial-post.hbs
+60 -43
View File
@@ -25,7 +25,8 @@
</div>
<div class="max-w-prose mx-auto my-4">
{{#foreach tags}}
<a class="rounded-full py-1 px-3 bg-blue-500 text-white mr-2 inline-block transform scale-90 hover:scale-100 transition-transform"
<a x-cloak x-show="'{{slug}}'!=='tutorials'"
class="rounded-full py-1 px-3 bg-blue-500 text-white mr-2 inline-block transform scale-90 hover:scale-100 transition-transform"
href="{{url}}">
{{name}}
</a>
@@ -46,7 +47,7 @@
{{else}}
<div class="h-8 w-8 mr-2">{{> "icons/avatar"}}</div>
{{/if}}
<span class="ml-2 text-gray-800 dark:text-gray-200">{{name}}</span>
<span class="ml-2 text-gray-800 dark:text-gray-200 text-sm">{{name}}</span>
</div>
{{/foreach}}
</div>
@@ -55,11 +56,11 @@
{{!-- TOC --}}
<aside
class="toc-wrapper col-span-7 md:col-span-2 shadow-xl md:shadow-none rounded-lg p-3 md:p-1 bg-gray-50 md:bg-transparent sticky top-16 md:relative md:top-0 z-20">
class="toc-wrapper col-span-7 md:col-span-2 shadow-xl md:shadow-none rounded-lg p-3 md:p-1 bg-gray-50 dark:bg-gray-900 md:bg-transparent sticky top-16 md:relative md:top-0 z-20">
<div class="md:sticky md:top-20">
<div class="">
<div class="font-medium">
<button class="flex font-medium" @click="openToc = !openToc;">
<button class="flex font-medium text-blue-500" @click="openToc = !openToc;">
{{!-- <span class="self-center text-blue-500">{{title}}</span> --}}
<span class="text-blue-500">In this page</span>
<svg xmlns="http://www.w3.org/2000/svg"
@@ -81,15 +82,25 @@
x-transition:leave-start="opacity-100 transform scale-y-100"
x-transition:leave-end="opacity-0 transform scale-y-0">
<div class="toc"></div>
<div class="mt-2 pt-2 border-t md:border-t-0">
<div class="pt-2 border-t dark:border-gray-800 md:border-t-0">
<a href="" onclick="event.preventDefault(); window.scrollTo({ top: 0, behavior: 'smooth' });"
class="inline-flex -ml-2 pl-2 pr-4 py-1 items-center no-underline text-sm font-medium text-blue-500 transition-shadow shadow-none hover:shadow-lg w-full md:w-auto rounded-xl">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24"
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24"
stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 11l5-5m0 0l5 5m-5-5v12" />
</svg>
Top
</a>
<p class="border-t dark:border-gray-800 mt-2 pt-2"></p>
<div>
{{#foreach tags}}
<a x-cloak x-show="'{{slug}}'!=='tutorials'"
class="rounded-full py-1 px-3 bg-blue-500 text-white mr-2 inline-block transform scale-90 hover:scale-100 transition-transform"
href="{{url}}">
{{name}}
</a>
{{/foreach}}
</div>
</div>
</div>
</div>
@@ -97,14 +108,18 @@
{{!-- Body --}}
<div class="post-content prose dark:prose-dark lg:prose-xl prose-blue mx-auto col-span-7 md:col-span-5 mt-4">
<div class="post-content prose dark:prose-dark lg:prose-xl prose-blue mx-auto col-span-7 md:col-span-5 mt-4 max-w-prose">
{{content}}
</div>
<div class="post-content mx-auto col-span-7 md:col-span-5 mt-4">
</div>
</div>
</article>
<aside class="w-default mx-auto mb-10 px-3">
<aside class="w-default mx-auto mb-10 px-3" x-data="{}">
{{#if primary_tag}}
{{#get "posts" filter="tags:{{primary_tag.slug}}+id:-{{id}}" limit="3" as |related_posts|}}
{{#if related_posts}}
@@ -132,51 +147,53 @@
<script>
// let pTags = Array.from(document.getElementsByTagName('p')) //.filter( t => t.innerHTML.includes(':::'))
let postContent = Array.from(document.getElementsByClassName('post-content'))[0].innerHTML
let tips = postContent.match(/<p>::: tip(.*?):::<\/\p>/g)
let warnings = postContent.match(/<p>::: warning(.*?):::<\/\p>/g)
let dangers = postContent.match(/<p>::: danger(.*?):::<\/\p>/g)
let details = postContent.match(/<p>::: details([\s\S]+?):::<\/\p>/g)
console.log( details )
tips.forEach( tip => {
let result = tip.match(/::: tip(.*?)</)
let tipTitle = result[1] && result[1] !== "" ? result[1] : 'Tip'
let newTip = `<div class="mb-4 border-l-4 border-blue-500 bg-white dark:bg-gray-900 px-4 py-2 rounded-lg transition-shadow shadow-sm hover:shadow-xl">` + tip.replace( `::: tip${result[1]}`, `<div class="font-bold text-blue-500 mb-2">${tipTitle}</div>`) + `</div>`
newTip = newTip.replace(":::", "")
newTip = newTip.replace("<br>", "")
postContent = postContent.replace(tip, newTip)
})
if (tips)
tips.forEach(tip => {
let result = tip.match(/::: tip(.*?)</)
let tipTitle = result[1] && result[1] !== "" ? result[1] : 'Tip'
let newTip = `<div class="mb-4 border-l-4 border-blue-500 bg-white dark:bg-gray-900 px-4 py-2 rounded-lg transition-shadow shadow-sm hover:shadow-xl">` + tip.replace(`::: tip${result[1]}`, `<div class="font-bold text-blue-500 mb-2">${tipTitle}</div>`) + `</div>`
newTip = newTip.replace(":::", "")
newTip = newTip.replace("<br>", "")
postContent = postContent.replace(tip, newTip)
})
warnings.forEach( tip => {
let result = tip.match(/::: warning(.*?)</)
let tipTitle = result[1] && result[1] !== "" ? result[1] : 'Warning'
let newTip = `<div class="mb-4 border-l-4 border-yellow-500 bg-white dark:bg-gray-900 px-4 py-2 rounded-lg transition-shadow shadow-sm hover:shadow-xl">` + tip.replace( `::: warning${result[1]}`, `<div class="font-bold text-yellow-500 mb-2">${tipTitle}</div>`) + `</div>`
newTip = newTip.replace(":::", "")
newTip = newTip.replace("<br>", "")
postContent = postContent.replace(tip, newTip)
})
if (warnings)
warnings.forEach(tip => {
let result = tip.match(/::: warning(.*?)</)
let tipTitle = result[1] && result[1] !== "" ? result[1] : 'Warning'
let newTip = `<div class="mb-4 border-l-4 border-yellow-500 bg-white dark:bg-gray-900 px-4 py-2 rounded-lg transition-shadow shadow-sm hover:shadow-xl">` + tip.replace(`::: warning${result[1]}`, `<div class="font-bold text-yellow-500 mb-2">${tipTitle}</div>`) + `</div>`
newTip = newTip.replace(":::", "")
newTip = newTip.replace("<br>", "")
postContent = postContent.replace(tip, newTip)
})
dangers.forEach( tip => {
let result = tip.match(/::: danger(.*?)</)
let tipTitle = result[1] && result[1] !== "" ? result[1] : 'Danger'
let newTip = `<div class="mb-4 border-l-4 border-red-500 bg-white dark:bg-gray-900 px-4 py-2 rounded-lg transition-shadow shadow-sm hover:shadow-xl">` + tip.replace( `::: danger${result[1]}`, `<div class="font-bold text-red-500 mb-2">${tipTitle}</div>`) + `</div>`
newTip = newTip.replace(":::", "")
newTip = newTip.replace("<br>", "")
postContent = postContent.replace(tip, newTip)
})
if (dangers)
dangers.forEach(tip => {
let result = tip.match(/::: danger(.*?)</)
let tipTitle = result[1] && result[1] !== "" ? result[1] : 'Danger'
let newTip = `<div class="mb-4 border-l-4 border-red-500 bg-white dark:bg-gray-900 px-4 py-2 rounded-lg transition-shadow shadow-sm hover:shadow-xl">` + tip.replace(`::: danger${result[1]}`, `<div class="font-bold text-red-500 mb-2">${tipTitle}</div>`) + `</div>`
newTip = newTip.replace(":::", "")
newTip = newTip.replace("<br>", "")
postContent = postContent.replace(tip, newTip)
})
details.forEach( detail => {
let result = detail.match(/::: details(.*?)</)
let detailTitle = result[1] && result[1] !== "" ? result[1] : 'Details'
let newDetails = `<details class="mb-4 bg-white dark:bg-gray-900 px-4 py-2 rounded-lg transition-shadow shadow-sm hover:shadow-xl">` + detail.replace(`::: details${result[1]}`, `<summary class="font-bold text-blue-500 my-2 hover:cursor-pointer">${detailTitle}</summary>`) + `</details>`
newDetails = newDetails.replace(":::", "")
postContent = postContent.replace(detail, newDetails)
})
if (details)
details.forEach(detail => {
let result = detail.match(/::: details(.*?)</)
let detailTitle = result[1] && result[1] !== "" ? result[1] : 'Details'
let newDetails = `<details class="mb-4 w-full max-w-full bg-white dark:bg-gray-900 px-4 py-2 rounded-lg transition-shadow shadow-sm hover:shadow-xl">` + detail.replace(`::: details${result[1]}`, `<summary class="font-bold text-blue-500 my-2">${detailTitle}</summary>`) + `</details>`
newDetails = newDetails.replace(":::", "")
postContent = postContent.replace(detail, newDetails)
})
Array.from(document.getElementsByClassName('post-content'))[0].innerHTML = postContent
partials/interop/connectorTagCards.hbs
+9 -9
View File
@@ -1,8 +1,8 @@
<div class="block lg:sticky w-default transform z-40 top-20 mt-5">
<div class="hidden sm:block lg:sticky w-default transform z-40 top-20 mt-5">
<div
class="bg-gradient-to-r from-blue-500 to-blue-700 px-5 pt-2 pb-3 flex flex-wrap items-center justify-center md:justify-start rounded-lg w-full text-white">
class="bg-gradient-to-r from-blue-500 to-blue-700 px-5 pt-2 pb-3 flex flex-wrap items-center justify-start rounded-lg w-full text-white">
Send
<select id="from" name="from" class="block w-full sm:inline-block sm:w-auto mt-1 pl-3 mx-3 pr-10 py-2 text-base font-extrabold shadow-lg text-white bg-blue-500 dark:bg-blue-900 border-gray-300 foc
<select id="from" name="from" class="block inline-block sm:w-auto mt-1 pl-3 mx-3 pr-10 py-2 text-base font-extrabold shadow-lg text-white bg-blue-500 dark:bg-blue-900 border-gray-300 foc
us:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm rounded-md">
<option value="Select a connector">From</option>
{{#get "tags" limit="all" include='count.posts' order='count.posts desc'
@@ -14,7 +14,7 @@
</select>
to
<select id="to" name="to"
class="block w-full sm:inline-block sm:w-auto mt-1 pl-3 mx-3 pr-10 py-2 text-base font-extrabold shadow-lg text-white bg-blue-500 dark:bg-blue-900 border-gray-300 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm rounded-md">
class="block inline-block sm:w-auto mt-1 pl-3 mx-3 pr-10 py-2 text-base font-extrabold shadow-lg text-white bg-blue-500 dark:bg-blue-900 border-gray-300 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm rounded-md">
<option value="Select a connector">To </option>
{{#get "tags" limit="all" include='count.posts' order='count.posts desc'
filter="slug:-[features,developers,careers,blog,tutorials]"}}
@@ -32,19 +32,19 @@
</div>
<div class="relative flex items-center w-default mt-4 text-white"></div>
<div class="w-default pt-10 grid grid-cols-1 md:grid-cols-2 gap-6">
<div class="w-default pt-10 grid grid-cols-1 md:grid-cols-2 gap-0 gap-y-2 md:gap-6">
{{#get "tags" limit="all" include='count.posts' order='count.posts desc'
filter="slug:-[features,developers,careers,blog,tutorials]"}}
{{#foreach tags }}
<a href="{{url}}" class="group p-2 py-5 flex flex-col sm:flex-row max-w-none
<a href="{{url}}" class="group p-2 py-5 flex flex-row
shadow-sm hover:shadow-xl transition-shadow hover:ring dark:bg-gray-900 bg-white rounded-xl col-span-1 connector-card connector-{{name}}
">
<div class="flex flex-shrink-0 items-center justify-center mx-6">
<img class="mx-auto h-32 w-32 transition-transform transform group-hover:scale-110 object-contain"
src="{{feature_image}}">
</div>
<div class="flex-grow flex flex-col justify-center text-center sm:text-left">
<h2 class="w-full text-xl dark:text-gray-50 text-gray-900 font-bold flex items-center group-hover:text-blue-500">
<div class="flex flex-grow flex-col justify-center">
<h2 class="text-xl dark:text-gray-50 text-gray-900 font-bold flex items-center group-hover:text-blue-500">
{{name}}
<svg xmlns="http://www.w3.org/2000/svg"
class="ml-2 h-6 w-6 transition-opacity opacity-0 group-hover:opacity-100" fill="none" viewBox="0 0 24 24"
@@ -62,7 +62,7 @@
class="group dark:text-gray-200 text-gray-600 p-2 col-span-2 tip-card flex flex-col justify-center items-center my-10 dark:bg-gray-900 bg-white rounded-xl shadow-xl py-10"
id='tipcontainer' style="display: none;">
<div class="prose-blue prose prose-sm dark:prose-dark max-w-none">
<h3 id="tip-text"></h3>
<h3 id="tip-text" class="text-center"></h3>
</div>
<div class="my-4">
{{> ctaButton}}
partials/landing/connectorsPreview.hbs
+22 -29
View File
@@ -2,12 +2,14 @@
<div
class="perspective-transform w-full md:w-2/3 lg:w-1/2 mx-auto dark:bg-gray-900 bg-gray-200 prose lg:prose-lg dark:prose-dark max-w-none text-center rounded-t-3xl pt-10 pb-6 mt-10 -mb-12">
<div class="px-4">
<h1><span class='text-blue-500'>Speckle</span> Connectors</h1>
{{#get "posts" filter="primary_tag:features+featured:true+title:'Speckle Connectors'" limit="1"}}
{{#foreach posts}}
<p class="pb-4">{{excerpt}}</p>
{{/foreach}}
{{/get}}
<a href="/features/connectors" class="no-underline">
<h1><span class='text-blue-500'>Speckle</span> Connectors</h1>
{{#get "posts" filter="primary_tag:features+featured:true+title:'Speckle Connectors'" limit="1"}}
{{#foreach posts}}
<p class="pb-4">{{excerpt}}</p>
{{/foreach}}
{{/get}}
</a>
{{!-- <h1>Why <span class='text-blue-500'>Speckle?</span></h1> --}}
{{!-- <p>Speckle goes beyond point-to-point interoperability: it's data infrastructure for the built environment.
</p> --}}
@@ -38,6 +40,15 @@
</p>
</div>
{{!-- unccomment in stage 2 --}}
<div
class="swiper-slide group p-2 rounded-xl text-center content-center flex flex-wrap justify-center h-auto transform opacity-90 hover:opacity-100 scale-90 hover:scale-100 transition bg-blue-500 text-white">
<a href="/features/connectors"
class="flex flex-col text-center w-full h-full text-xl items-center justify-center">
All <span class="hidden md:inline-block">Connectors</span>
</a>
</div>
<div
class="swiper-slide group dark:text-gray-200 text-gray-600 p-2 text-center content-center flex flex-wrap justify-center"
@@ -49,19 +60,6 @@
</p>
</div>
{{!-- unccomment in stage 2 --}}
<div
class="swiper-slide group p-2 rounded-xl text-center content-center flex flex-wrap justify-center h-auto transform scale-90 hover:scale-100 transition bg-blue-500 text-white">
<a href="/features/connectors"
class="flex flex-col text-center w-full h-full text-xl items-center justify-center">
All Connectors
<svg xmlns="http://www.w3.org/2000/svg"
class="ml-2 h-6 w-6 transition-opacity opacity-50 group-hover:opacity-100" fill="none" viewBox="0 0 24 24"
stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
</svg>
</a>
</div>
<div
class="swiper-slide group dark:text-gray-200 text-gray-600 p-2 text-center content-center flex flex-wrap justify-center">
@@ -159,7 +157,7 @@
<script>
var swiper = new Swiper(".connector-swiper", {
slidesPerView: 3,
slidesPerView: 5,
spaceBetween: 20,
loop: true,
grabCursor: true,
@@ -168,14 +166,6 @@
clickable: true
},
breakpoints: {
640: {
slidesPerView: 3,
spaceBetween: 20,
},
768: {
slidesPerView: 4,
spaceBetween: 40,
},
1024: {
slidesPerView: 5,
spaceBetween: 50,
@@ -185,5 +175,8 @@
spaceBetween: 50,
}
}
});
})
if(window.innerWidth>=1280)
swiper.slideTo(6, false, false)
</script>
tag.hbs
+3 -3
View File
@@ -4,10 +4,10 @@
<main class="w-default lg:my-10 space-x-6 space-y-6 flex flex-col md:flex-row items-center">
<main class="w-default lg:my-10 space-x-0 md:space-x-6 space-y-6 flex flex-col md:flex-row items-center">
<div class="w-full md:w-1/2">
<div class="prose lg:prose-xl dark:prose-dark prose-blue max-w-none mb-4">
<h1 class="flex items-center">
<div class="prose lg:prose-xl dark:prose-dark prose-blue max-w-none w-full mb-4">
<h1 class="flex overflow-ellipsis overflow-hidden w-full max-w-full">
<a class="flex items-center justify-center no-underline" href="/features/connectors" x-cloak x-show="connectorTag">
Connectors
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">