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

feat: many improvements

Browse Source
This commit is contained in:
Dimitrie Stefanescu
2021-06-27 15:19:04 +01:00
parent 24edec9b37
commit 67730a6b2b
12 changed files with 947 additions and 161 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/built/screen.css
+609 -51
View File
@@ -2135,6 +2135,7 @@ video {
.prose-dark code {
background-color: #1f2937;
color: #e5e7eb;
}
.prose-dark hr {
@@ -3526,6 +3527,7 @@ video {
.dark\:prose-dark code {
background-color: #1f2937;
color: #e5e7eb;
}
.dark\:prose-dark hr {
@@ -9161,6 +9163,90 @@ video {
display: none;
}
.group:hover .group-hover\:block {
display: block;
}
.group:hover .group-hover\:inline-block {
display: inline-block;
}
.group:hover .group-hover\:inline {
display: inline;
}
.group:hover .group-hover\:flex {
display: flex;
}
.group:hover .group-hover\:inline-flex {
display: inline-flex;
}
.group:hover .group-hover\:table {
display: table;
}
.group:hover .group-hover\:inline-table {
display: inline-table;
}
.group:hover .group-hover\:table-caption {
display: table-caption;
}
.group:hover .group-hover\:table-cell {
display: table-cell;
}
.group:hover .group-hover\:table-column {
display: table-column;
}
.group:hover .group-hover\:table-column-group {
display: table-column-group;
}
.group:hover .group-hover\:table-footer-group {
display: table-footer-group;
}
.group:hover .group-hover\:table-header-group {
display: table-header-group;
}
.group:hover .group-hover\:table-row-group {
display: table-row-group;
}
.group:hover .group-hover\:table-row {
display: table-row;
}
.group:hover .group-hover\:flow-root {
display: flow-root;
}
.group:hover .group-hover\:grid {
display: grid;
}
.group:hover .group-hover\:inline-grid {
display: inline-grid;
}
.group:hover .group-hover\:contents {
display: contents;
}
.group:hover .group-hover\:list-item {
display: list-item;
}
.group:hover .group-hover\:hidden {
display: none;
}
.h-0 {
height: 0px;
}
@@ -48529,7 +48615,28 @@ button.swiper-pagination-bullet {
/* Main
/* ---------------------------------------------------------- */
[x-cloak] { display: none !important;
[x-cloak] {
display: none !important;
}
a.no-underline{
text-decoration: none !important;
}
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 {
--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);
}
.text-gradient {
@@ -48570,16 +48677,17 @@ button.swiper-pagination-bullet {
height: auto !important;
}
.perspective-700{
.perspective-700 {
perspective: 750px;
}
.perspective-transform {
transform: rotateX(30deg) rotateY(0deg); transform-style: preserve-3d;
transform: rotateX(30deg) rotateY(0deg);
transform-style: preserve-3d;
transition: 1s ease all;
}
.perspective-transform:hover{
.perspective-transform:hover {
transform: rotateX(15deg) rotateY(0deg);
}
@@ -48587,57 +48695,88 @@ button.swiper-pagination-bullet {
text-decoration: none !important;
}
/*
.post-body h2 {
@apply text-4xl my-4 px-4 sm:px-2 md:px-0;
}
.post-body h3 {
@apply text-2xl my-4 px-4 sm:px-2 md:px-0;
}
.post-body p{
@apply my-3 mx-auto text-lg max-w-prose mx-auto px-4 sm:px-2 md:px-0;
}
.post-body blockquote {
@apply my-4 pl-2 text-lg border-l-2 mx-auto max-w-prose border-l-4 border-blue-600 pl-5;
}
.post-body figure {
@apply my-10;
}
.post-body hr{
@apply my-10;
}
.post-body ul{
@apply text-lg my-4 list-inside list-disc my-3 mx-auto text-lg max-w-prose mx-auto px-4 sm:px-2 md:px-0;
}
.post-body li{
@apply text-lg;
}
.post-body a {
@apply text-blue-500 font-normal;
}
.post-body a:hover {
@apply font-bold;
}
.post-body pre {
@apply p-4 px-8 my-10 rounded-xl bg-gray-200 dark:bg-gray-700 shadow-xl;
}*/
figcaption{
figcaption {
text-align: center;
font-size: 0.875rem;
line-height: 1.25rem;
}
.prose > h1::before,
.prose > h2::before,
.prose > h3::before,
.prose > h4::before,
.prose > h5::before,
.prose > h6::before {
display: block;
content: " ";
height: 80px;
margin-top: -80px;
visibility: hidden;
pointer-events: none;
}
.is-active-link {
--tw-bg-opacity: 1;
background-color: rgba(219, 234, 254, var(--tw-bg-opacity));
}
@media (prefers-color-scheme: dark) {
.is-active-link {
--tw-bg-opacity: 1;
background-color: rgba(30, 58, 138, var(--tw-bg-opacity));
}
}
.is-active-link {
--tw-text-opacity: 1;
color: rgba(17, 24, 39, var(--tw-text-opacity));
}
@media (prefers-color-scheme: dark) {
.is-active-link {
--tw-text-opacity: 1;
color: rgba(243, 244, 246, var(--tw-text-opacity));
}
}
.is-active-link {
transition-property: background-color, border-color, color, fill, stroke;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
}
.toc-list-item a {
font-size: 0.875rem;
line-height: 1.25rem;
--tw-text-opacity: 1;
color: rgba(75, 85, 99, var(--tw-text-opacity));
}
@media (prefers-color-scheme: dark) {
.toc-list-item a {
--tw-text-opacity: 1;
color: rgba(156, 163, 175, var(--tw-text-opacity));
}
}
.toc-list-item a {
transition-property: background-color, border-color, color, fill, stroke;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
}
@media (prefers-color-scheme: dark) {
.toc-list-item a:hover {
--tw-text-opacity: 1;
color: rgba(59, 130, 246, var(--tw-text-opacity));
}
}
.toc-list-item {
margin-top: 0.25rem;
margin-bottom: 0.25rem;
}
@media (min-width: 640px) {
.sm\:container {
width: 100%;
@@ -54463,6 +54602,90 @@ figcaption{
display: none;
}
.group:hover .sm\:group-hover\:block {
display: block;
}
.group:hover .sm\:group-hover\:inline-block {
display: inline-block;
}
.group:hover .sm\:group-hover\:inline {
display: inline;
}
.group:hover .sm\:group-hover\:flex {
display: flex;
}
.group:hover .sm\:group-hover\:inline-flex {
display: inline-flex;
}
.group:hover .sm\:group-hover\:table {
display: table;
}
.group:hover .sm\:group-hover\:inline-table {
display: inline-table;
}
.group:hover .sm\:group-hover\:table-caption {
display: table-caption;
}
.group:hover .sm\:group-hover\:table-cell {
display: table-cell;
}
.group:hover .sm\:group-hover\:table-column {
display: table-column;
}
.group:hover .sm\:group-hover\:table-column-group {
display: table-column-group;
}
.group:hover .sm\:group-hover\:table-footer-group {
display: table-footer-group;
}
.group:hover .sm\:group-hover\:table-header-group {
display: table-header-group;
}
.group:hover .sm\:group-hover\:table-row-group {
display: table-row-group;
}
.group:hover .sm\:group-hover\:table-row {
display: table-row;
}
.group:hover .sm\:group-hover\:flow-root {
display: flow-root;
}
.group:hover .sm\:group-hover\:grid {
display: grid;
}
.group:hover .sm\:group-hover\:inline-grid {
display: inline-grid;
}
.group:hover .sm\:group-hover\:contents {
display: contents;
}
.group:hover .sm\:group-hover\:list-item {
display: list-item;
}
.group:hover .sm\:group-hover\:hidden {
display: none;
}
.sm\:h-0 {
height: 0px;
}
@@ -98891,6 +99114,90 @@ figcaption{
display: none;
}
.group:hover .md\:group-hover\:block {
display: block;
}
.group:hover .md\:group-hover\:inline-block {
display: inline-block;
}
.group:hover .md\:group-hover\:inline {
display: inline;
}
.group:hover .md\:group-hover\:flex {
display: flex;
}
.group:hover .md\:group-hover\:inline-flex {
display: inline-flex;
}
.group:hover .md\:group-hover\:table {
display: table;
}
.group:hover .md\:group-hover\:inline-table {
display: inline-table;
}
.group:hover .md\:group-hover\:table-caption {
display: table-caption;
}
.group:hover .md\:group-hover\:table-cell {
display: table-cell;
}
.group:hover .md\:group-hover\:table-column {
display: table-column;
}
.group:hover .md\:group-hover\:table-column-group {
display: table-column-group;
}
.group:hover .md\:group-hover\:table-footer-group {
display: table-footer-group;
}
.group:hover .md\:group-hover\:table-header-group {
display: table-header-group;
}
.group:hover .md\:group-hover\:table-row-group {
display: table-row-group;
}
.group:hover .md\:group-hover\:table-row {
display: table-row;
}
.group:hover .md\:group-hover\:flow-root {
display: flow-root;
}
.group:hover .md\:group-hover\:grid {
display: grid;
}
.group:hover .md\:group-hover\:inline-grid {
display: inline-grid;
}
.group:hover .md\:group-hover\:contents {
display: contents;
}
.group:hover .md\:group-hover\:list-item {
display: list-item;
}
.group:hover .md\:group-hover\:hidden {
display: none;
}
.md\:h-0 {
height: 0px;
}
@@ -143319,6 +143626,90 @@ figcaption{
display: none;
}
.group:hover .lg\:group-hover\:block {
display: block;
}
.group:hover .lg\:group-hover\:inline-block {
display: inline-block;
}
.group:hover .lg\:group-hover\:inline {
display: inline;
}
.group:hover .lg\:group-hover\:flex {
display: flex;
}
.group:hover .lg\:group-hover\:inline-flex {
display: inline-flex;
}
.group:hover .lg\:group-hover\:table {
display: table;
}
.group:hover .lg\:group-hover\:inline-table {
display: inline-table;
}
.group:hover .lg\:group-hover\:table-caption {
display: table-caption;
}
.group:hover .lg\:group-hover\:table-cell {
display: table-cell;
}
.group:hover .lg\:group-hover\:table-column {
display: table-column;
}
.group:hover .lg\:group-hover\:table-column-group {
display: table-column-group;
}
.group:hover .lg\:group-hover\:table-footer-group {
display: table-footer-group;
}
.group:hover .lg\:group-hover\:table-header-group {
display: table-header-group;
}
.group:hover .lg\:group-hover\:table-row-group {
display: table-row-group;
}
.group:hover .lg\:group-hover\:table-row {
display: table-row;
}
.group:hover .lg\:group-hover\:flow-root {
display: flow-root;
}
.group:hover .lg\:group-hover\:grid {
display: grid;
}
.group:hover .lg\:group-hover\:inline-grid {
display: inline-grid;
}
.group:hover .lg\:group-hover\:contents {
display: contents;
}
.group:hover .lg\:group-hover\:list-item {
display: list-item;
}
.group:hover .lg\:group-hover\:hidden {
display: none;
}
.lg\:h-0 {
height: 0px;
}
@@ -187747,6 +188138,90 @@ figcaption{
display: none;
}
.group:hover .xl\:group-hover\:block {
display: block;
}
.group:hover .xl\:group-hover\:inline-block {
display: inline-block;
}
.group:hover .xl\:group-hover\:inline {
display: inline;
}
.group:hover .xl\:group-hover\:flex {
display: flex;
}
.group:hover .xl\:group-hover\:inline-flex {
display: inline-flex;
}
.group:hover .xl\:group-hover\:table {
display: table;
}
.group:hover .xl\:group-hover\:inline-table {
display: inline-table;
}
.group:hover .xl\:group-hover\:table-caption {
display: table-caption;
}
.group:hover .xl\:group-hover\:table-cell {
display: table-cell;
}
.group:hover .xl\:group-hover\:table-column {
display: table-column;
}
.group:hover .xl\:group-hover\:table-column-group {
display: table-column-group;
}
.group:hover .xl\:group-hover\:table-footer-group {
display: table-footer-group;
}
.group:hover .xl\:group-hover\:table-header-group {
display: table-header-group;
}
.group:hover .xl\:group-hover\:table-row-group {
display: table-row-group;
}
.group:hover .xl\:group-hover\:table-row {
display: table-row;
}
.group:hover .xl\:group-hover\:flow-root {
display: flow-root;
}
.group:hover .xl\:group-hover\:grid {
display: grid;
}
.group:hover .xl\:group-hover\:inline-grid {
display: inline-grid;
}
.group:hover .xl\:group-hover\:contents {
display: contents;
}
.group:hover .xl\:group-hover\:list-item {
display: list-item;
}
.group:hover .xl\:group-hover\:hidden {
display: none;
}
.xl\:h-0 {
height: 0px;
}
@@ -232175,6 +232650,90 @@ figcaption{
display: none;
}
.group:hover .\32xl\:group-hover\:block {
display: block;
}
.group:hover .\32xl\:group-hover\:inline-block {
display: inline-block;
}
.group:hover .\32xl\:group-hover\:inline {
display: inline;
}
.group:hover .\32xl\:group-hover\:flex {
display: flex;
}
.group:hover .\32xl\:group-hover\:inline-flex {
display: inline-flex;
}
.group:hover .\32xl\:group-hover\:table {
display: table;
}
.group:hover .\32xl\:group-hover\:inline-table {
display: inline-table;
}
.group:hover .\32xl\:group-hover\:table-caption {
display: table-caption;
}
.group:hover .\32xl\:group-hover\:table-cell {
display: table-cell;
}
.group:hover .\32xl\:group-hover\:table-column {
display: table-column;
}
.group:hover .\32xl\:group-hover\:table-column-group {
display: table-column-group;
}
.group:hover .\32xl\:group-hover\:table-footer-group {
display: table-footer-group;
}
.group:hover .\32xl\:group-hover\:table-header-group {
display: table-header-group;
}
.group:hover .\32xl\:group-hover\:table-row-group {
display: table-row-group;
}
.group:hover .\32xl\:group-hover\:table-row {
display: table-row;
}
.group:hover .\32xl\:group-hover\:flow-root {
display: flow-root;
}
.group:hover .\32xl\:group-hover\:grid {
display: grid;
}
.group:hover .\32xl\:group-hover\:inline-grid {
display: inline-grid;
}
.group:hover .\32xl\:group-hover\:contents {
display: contents;
}
.group:hover .\32xl\:group-hover\:list-item {
display: list-item;
}
.group:hover .\32xl\:group-hover\:hidden {
display: none;
}
.\32xl\:h-0 {
height: 0px;
}
@@ -270777,4 +271336,3 @@ figcaption{
-webkit-line-clamp: unset;
}
}
assets/css/screen.css
+51 -52
View File
@@ -8,7 +8,20 @@
/* Main
/* ---------------------------------------------------------- */
[x-cloak] { display: none !important; }
[x-cloak] {
display: none !important;
}
a.no-underline{
text-decoration: none !important;
}
a.no-underline:hover{
text-decoration: none;
}
pre{
@apply shadow-inner dark:bg-gray-300;
}
.text-gradient {
background-clip: text;
@@ -21,7 +34,8 @@
@apply max-w-7xl mx-auto px-4 sm:px-6 lg:px-8;
}
.page-about-content h2, .page-about-content h3 {
.page-about-content h2,
.page-about-content h3 {
@apply my-10;
}
@@ -29,69 +43,54 @@
height: auto !important;
}
.perspective-700{
.perspective-700 {
perspective: 750px;
}
.perspective-transform {
transform: rotateX(30deg) rotateY(0deg); transform-style: preserve-3d;
transform: rotateX(30deg) rotateY(0deg);
transform-style: preserve-3d;
transition: 1s ease all;
}
.perspective-transform:hover{
transform: rotateX(15deg) rotateY(0deg);
.perspective-transform:hover {
transform: rotateX(15deg) rotateY(0deg);
}
.no-underline {
text-decoration: none !important;
}
/*
.post-body h2 {
@apply text-4xl my-4 px-4 sm:px-2 md:px-0;
}
.post-body h3 {
@apply text-2xl my-4 px-4 sm:px-2 md:px-0;
}
.post-body p{
@apply my-3 mx-auto text-lg max-w-prose mx-auto px-4 sm:px-2 md:px-0;
}
.post-body blockquote {
@apply my-4 pl-2 text-lg border-l-2 mx-auto max-w-prose border-l-4 border-blue-600 pl-5;
}
.post-body figure {
@apply my-10;
}
.post-body hr{
@apply my-10;
}
.post-body ul{
@apply text-lg my-4 list-inside list-disc my-3 mx-auto text-lg max-w-prose mx-auto px-4 sm:px-2 md:px-0;
}
.post-body li{
@apply text-lg;
}
.post-body a {
@apply text-blue-500 font-normal;
}
.post-body a:hover {
@apply font-bold;
}
.post-body pre {
@apply p-4 px-8 my-10 rounded-xl bg-gray-200 dark:bg-gray-700 shadow-xl;
}*/
figcaption{
figcaption {
@apply text-sm text-center;
}
.prose > h1::before,
.prose > h2::before,
.prose > h3::before,
.prose > h4::before,
.prose > h5::before,
.prose > h6::before {
display: block;
content: " ";
height: 80px;
margin-top: -80px;
visibility: hidden;
pointer-events: none;
}
.is-active-link {
@apply transition-colors text-gray-900 dark:text-gray-100 bg-blue-100 dark:bg-blue-900;
}
.toc-list-item a {
@apply text-sm transition-colors text-gray-600 dark:text-gray-400;
}
.toc-list-item a:hover {
@apply dark:text-blue-500;
}
.toc-list-item {
@apply my-1;
}
custom-interop-post.hbs
-2
View File
@@ -16,8 +16,6 @@
</main>
{{> interop/connectorTagCards}}
{{!-- {{> interop/connectorSlider}} --}}
<div class="prose prose-blue lg:prose-xl mx-auto dark:prose-dark my-10 px-4 md:px-0">
custom-tutorial-post.hbs
+184
View File
@@ -0,0 +1,184 @@
{{!< default}} {{#post}} <article id="top" class="w-default mx-auto mb-10">
<div class="w-full p-0 mx-auto grid gap-0 md:gap-4 grid-cols-7"
x-data="{ collapseToc: window.innerWidth < 768, isMobile: false, openToc: false }"
@load.window="isMobile = window.innerWidth < 768; collapseToc = isMobile;"
@resize.window="isMobile = window.innerWidth < 768; collapseToc = isMobile;">
{{!-- Header --}}
<figure class="col-span-7 md:col-span-2 flex items-center justify-center">
{{#if feature_image}}
<img srcset="{{img_url feature_image size=" s"}} 300w, {{img_url feature_image size="m" }} 600w, {{img_url
feature_image size="l" }} 1000w, {{img_url feature_image size="xl" }} 2000w" sizes="(max-width: 800px) 400px,
(max-width: 1170px) 1170px,
2000px" src="{{img_url feature_image size=" xl"}}" alt="{{title}}" />
{{/if}}
</figure>
<header x-ref="header" class="title-wrapper my-10 col-span-7 md:col-span-5 col-span-7 max-w-full">
<div class="prose dark:prose-dark lg:prose-xl mx-auto">
<span class="gh-post-meta text-sm"><time datetime="{{date format=" YYYY-MM-DD"}}">{{date format="D MMM
YYYY"}}</time>
<span class="bull">&bull;</span>
{{reading_time}}
</span>
<h1 class="gh-title">{{title}}</h1>
</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"
href="{{url}}">
{{name}}
</a>
{{/foreach}}
</div>
<div class="prose dark:prose-dark lg:prose-xl mx-auto">
{{#if custom_excerpt}}
<p class="italic">{{custom_excerpt}}</p>
{{/if}}
</div>
<div class="authors mt-4 max-w-prose mx-auto grid grid-cols-3 gap-2">
{{#foreach authors}}
<div class="author flex items-center col-span-1">
{{#if profile_image}}
<div class="inline-block rounded-full overflow-hidden">
<img class="h-8 w-8" src="{{img_url profile_image size=" xs"}}" alt="{{name}}" />
</div>
{{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>
</div>
{{/foreach}}
</div>
</header>
{{!-- 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">
<div class="md:sticky md:top-20">
<div class="">
<div class="font-medium">
<button class="flex font-medium" @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"
class="transition transform self-center block md:hidden t-1 h-5 w-5"
:class="{'rotate-180' : (!collapseToc || !isMobile || openToc) }" viewBox="0 0 20 20"
fill="currentColor">
<path fill-rule="evenodd"
d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
clip-rule="evenodd" />
</svg>
</button>
</div>
</div>
<div x-ref="toc" class="origin-top pb-0 md:pb-3 max-h-full" x-show="!collapseToc || !isMobile || openToc"
@click="openToc=false" x-transition:enter="transition ease-out duration-100"
x-transition:enter-start="opacity-0 transform scale-y-0"
x-transition:enter-end="opacity-100 transform scale-y-100"
x-transition:leave="transition ease-in duration-100"
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">
<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"
stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 11l5-5m0 0l5 5m-5-5v12" />
</svg>
Top
</a>
</div>
</div>
</div>
</aside>
{{!-- 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">
{{content}}
</div>
</div>
</article>
<aside class="w-default mx-auto mb-10 px-3">
{{#if primary_tag}}
{{#get "posts" filter="tags:{{primary_tag.slug}}+id:-{{id}}" limit="3" as |related_posts|}}
{{#if related_posts}}
<article class="read-next-card">
<header class="read-next-card-header">
{{#../primary_tag}}
<h3 class="text-xl dark:text-gray-100 mt-12 mb-4">Get to know Speckle more:</h3>
{{/../primary_tag}}
</header>
<div class="read-next-card-content grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6">
{{#foreach related_posts}}
<div class="grid-cols-1">
{{> cardSm }}
</div>
{{/foreach}}
</div>
</article>
{{/if}}
{{/get}}
{{/if}}
</aside>
{{/post}}
<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)
})
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)
})
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)
})
Array.from(document.getElementsByClassName('post-content'))[0].innerHTML = postContent
</script>
default.hbs
+11 -7
View File
@@ -31,15 +31,19 @@
{{> footer }}
{{#is "post, page"}}
<script src="https://cdnjs.cloudflare.com/ajax/libs/tocbot/4.10.0/tocbot.min.js"></script>
<script>
tocbot.init({
tocSelector: '.toc',
contentSelector: '.post-content',
hasInnerContainers: true
});
</script>
{{/is}}
{{ghost_foot}}
{{#is "home"}}
{{/is}}
</body>
</html>
partials/cardSm.hbs
+21
View File
@@ -0,0 +1,21 @@
<div class="flex flex-col rounded-lg transition shadow hover:shadow-2xl overflow-hidden w-full">
<div class="flex-1 bg-white dark:bg-gray-900 dark:text-gray-200 p-6 flex flex-col justify-between">
<div class="flex-1">
<a href="{{url}}" class="block mt-2">
<p class="text-xl font-semibold text-gray-900 dark:text-gray-200">
{{title}}
</p>
<p class="mt-3 text-sm text-gray-500 line-clamp-2">
{{excerpt}}
</p>
</a>
</div>
<div class="mt-6 flex items-center">
<div class="">
<p class="text-sm font-medium text-gray-900 dark:text-gray-200">
<span class="text-gray-500"> <time datetime="{{date format="YYYY-MM-DD"}}">{{date format="D MMM YYYY"}}</time></span>
</p>
</div>
</div>
</div>
</div>
partials/cardTutorial.hbs
+1 -1
View File
@@ -19,7 +19,7 @@
<p class="text-xl font-semibold text-gray-900 dark:text-gray-200">
{{title}}
</p>
<p class="mt-3 text-base text-gray-500 line-clamp-3 md:line-clamp-4">
<p class="mt-3 text-base text-gray-500 line-clamp-3">
{{excerpt}}
</p>
</a>
partials/ctaButton.hbs
+1 -1
View File
@@ -1,3 +1,3 @@
<a href="/getstarted" class="inline-block items-center justify-center px-8 py-3 border-4 border-blue-600 transition text-base font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 hover:shadow-3xl md:py-4 md:text-lg">
<a href="/getstarted" class="inline-block items-center justify-center px-8 py-3 border-4 border-blue-600 transition text-base font-medium rounded-md text-white bg-blue-500 hover:bg-blue-700 hover:shadow-3xl md:py-4 md:text-lg">
<span class="text-white no-underline">Get Started</span>
</a>
partials/interop/connectorTagCards.hbs
+19 -23
View File
@@ -1,8 +1,9 @@
<div class="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">
<div class="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">
Send
<select id="from" name="from"
class="block w-full md:inline-block md: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">
<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
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'
filter="slug:-[features,developers,careers,blog,tutorials]"}}
@@ -13,7 +14,7 @@
</select>
to
<select id="to" name="to"
class="block w-full md:inline-block md: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 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">
<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]"}}
@@ -35,30 +36,25 @@
{{#get "tags" limit="all" include='count.posts' order='count.posts desc'
filter="slug:-[features,developers,careers,blog,tutorials]"}}
{{#foreach tags }}
<div class="group dark:text-gray-200 text-gray-600 p-2 flex flex-col sm:flex-row prose-blue prose-nounderline prose prose-sm dark:prose-dark max-w-none
shadow-sm hover:shadow-xl transition-shadow dark:bg-gray-900 bg-white rounded-xl col-span-1 connector-card connector-{{name}}
<a href="{{url}}" class="group p-2 py-5 flex flex-col sm:flex-row max-w-none
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-between text-center sm:text-left p-4">
<h2 class="w-full mt-4">
<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">
{{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"
stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3" />
</svg>
</h2>
<p>{{description}}</p>
<h3>
<a href="{{url}}" class="no-underline flex items-center justify-center sm:justify-start">
<span class="no-underline">Tutorials</span>
<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"
stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3" />
</svg>
</a>
</h3>
<p class="text-sm dark:text-gray-400 text-gray-600 line-clamp-3">{{description}}</p>
</div>
</div>
</a>
{{/foreach}}
{{/get}}
@@ -66,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">Speckle allow you to send data from Rhino to Revit, and basically sketch shit in one.</h3>
<h3 id="tip-text"></h3>
</div>
<div class="my-4">
{{> ctaButton}}
@@ -125,7 +121,7 @@
if (tips[selection[0] + selection[1]]) {
document.getElementById('tip-text').innerHTML = tips[selection[0] + selection[1]]
} else {
document.getElementById('tip-text').innerHTML = 'Do you use this workflow? Let us know on the <a href="https://speckle.community">community forum</a>!'
document.getElementById('tip-text').innerHTML = 'Let us know how you use this workflow on the <a href="https://speckle.community">community forum</a>!'
}
document.getElementById('tipcontainer').style.display = 'flex'
}
partials/landing/connectorsPreview.hbs
+15 -8
View File
@@ -48,15 +48,21 @@
Revit
</p>
</div>
{{!-- unccomment in stage 2 --}}
<div
class="swiper-slide group p-2 bg-white dark:bg-gray-800 rounded-xl text-center content-center flex flex-wrap justify-center h-auto">
<p class="w-full mt-4 opacity-0 group-hover:opacity-100 transition-opacity">
<a href="/features/connectors">Check out all our connectors!</a>
</p>
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">
<img class="mx-auto w-32 transition-transform transform group-hover:scale-110"
@@ -113,10 +119,11 @@
<div
class="group w-full mx-auto prose lg:prose-lg dark:prose-dark max-w-none text-center p-10 bg-gradient-to-b from-gray-200 dark:from-gray-900">
<div class="w-default px-4">
Go beyond interoperability and leverage all the potential behind a fully fledged BIM data platform
Go beyond interoperability and leverage all the potential behind a fully fledged BIM data platform
</div>
<div class="flex flex-wrap content-center justify-center">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-gray-500" fill="none" viewBox="0 0 24 24"
stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
</svg>
</div>
tag.hbs
+33 -16
View File
@@ -1,43 +1,60 @@
{{!< default}} {{#tag}} <div x-data="{ docsLink: null, sourceLink: null, videoLink:null }"
x-init="
docsLink = window.docsLink; sourceLink = window.sourceLink; videoLink = window.videoLink;
{{!< default}} {{#tag}} <div x-data="{ docsLink: null, sourceLink: null, videoLink:null, showInstallLink: false, connectorTag:false }" x-init="
docsLink = window.docsLink; sourceLink = window.sourceLink; videoLink = window.videoLink; showInstallLink = window.showInstallLink; connectorTag = window.connectorTag;
if( videoLink ) document.getElementById('tagvideo').src = videoLink;">
<main class="w-default my-10 space-x-6 space-y-6 flex flex-col md:flex-row items-center">
<div class="w-1/2">
<div class="prose lg:prose-xl dark:prose-dark max-w-none mb-4">
<h1>{{name}}</h1>
<main class="w-default lg:my-10 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">
<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">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
</svg>
</a>
{{name}}
</h1>
<p>{{description}}</p>
</div>
<a class="py-2 px-4 rounded inline-flex items-center text-white bg-blue-500 dark:bg-blue-800 transition-shadow hover:shadow-xl"
x-show="docsLink" href="#" x-cloak x-bind:href="docsLink">
<a class="py-2 px-4 rounded inline-flex items-center text-white bg-purple-500 dark:bg-purple-800 transition-shadow hover:shadow-xl hover:ring mr-2"
href="/getstarted" x-show="showInstallLink">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 mr-3" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd"
d="M3 17a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zm3.293-7.707a1 1 0 011.414 0L9 10.586V3a1 1 0 112 0v7.586l1.293-1.293a1 1 0 111.414 1.414l-3 3a1 1 0 01-1.414 0l-3-3a1 1 0 010-1.414z"
clip-rule="evenodd" />
</svg>
<span>Install</span>
</a>
<a class="py-2 px-4 rounded inline-flex items-center text-white bg-blue-500 dark:bg-blue-800 transition-shadow hover:shadow-xl hover:ring mr-2"
x-show="docsLink" href="#" target="_blank" x-cloak x-bind:href="docsLink">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 mr-3" fill="none" viewBox="0 0 24 24"
stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253" />
</svg>
<span>Reference Documentation</span>
<span>Docs</span>
</a>
<a class="py-2 px-4 rounded inline-flex items-center text-gray-700 dark:text-gray-300 transition-shadow hover:shadow-xl"
x-show="sourceLink" href="#" x-cloak x-bind:href="sourceLink">
<a class="py-2 px-4 rounded inline-flex items-center text-gray-700 dark:text-gray-300 transition-shadow hover:shadow-xl hover:ring mr-2"
x-show="sourceLink" href="#" target="_blank" x-cloak x-bind:href="sourceLink">
<svg class="h-6 w-6 mr-3" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path fill-rule="evenodd"
d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z"
clip-rule="evenodd"></path>
</svg>
<span>Source Code</span>
<span>Source</span>
</a>
</div>
<div class="w-1/2" x-show="!videoLink">
<div class="w-full md:w-1/2" x-show="!videoLink">
<img class="mx-auto h-48 w-48 transition-transform transform group-hover:scale-110 object-contain"
src="{{feature_image}}">
</div>
<div class="w-1/2" x-show="videoLink">
<div class="w-full md:w-1/2" x-show="videoLink">
<div class="overflow-hidden shadow-2xl rounded-2xl mx-auto max-w-xl lg:w-full aspect-w-16 aspect-h-9">
<div class="h-full">
<iframe id='tagvideo' width="100%" height="100%" v-bind:src="videoLink" title="YouTube video player" frameborder="0"
<iframe id='tagvideo' width="100%" height="100%" v-bind:src="videoLink" title="YouTube video player"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen></iframe>
</div>
tailwind.config.js
+2
View File
@@ -50,6 +50,7 @@ module.exports = {
},
code: {
backgroundColor: theme("colors.gray.800"),
color: theme("colors.gray.200"),
},
hr: { borderColor: theme("colors.gray.700") },
"ol li:before": {
@@ -88,6 +89,7 @@ module.exports = {
visibility: ["hover", "dark"],
ringWidth: ["hover", "active"],
scale: ["group-hover"],
display: ["group-hover"],
},
},
plugins: [