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

feat(everything): improvements & additions

Browse Source 
finishes off landing page structure, adds beta page & plans, cleans up flyout menus, finishes about
page, improves footer layout
This commit is contained in:
Dimitrie Stefanescu
2021-02-04 22:27:19 +00:00
parent b394e9aa5e
commit 73c8327ee5
19 changed files with 458 additions and 358 deletions
Download Patch File Download Diff File Expand all files Collapse all files
blog.hbs
+1 -1
View File
@@ -3,7 +3,7 @@
{{#tag}}
<main class="w-default h-screen/3 flex flex-wrap content-center sm:mt-24">
<main class="w-default flex flex-wrap content-center sm:mt-24">
<div class="w-3/3">
<h1 class="text-4xl tracking-tight font-extrabold text-gray-900 dark:text-gray-100 sm:text-5xl md:text-6xl">
The Speckle
custom-post-with-author.hbs
+80
View File
@@ -0,0 +1,80 @@
{{!< default}}
{{#post}}
<article class="relative">
{{!-- Header --}}
{{> extras/patterns}}
<header class="relative px-4 sm:px-6 lg:px-8 mt-10">
<div class="max-w-prose mx-auto object-center">
{{#if feature_image}}
<img class="gh-feature-image mx-auto" 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: 1000px) 1000px, 2000px"
loading="lazy" src="{{img_url feature_image size="xl"}}"
alt="{{title}}" />
{{/if}}
<h1 class="mt-10">
<span class="mt-2 block text-4xl text-center leading-8 font-extrabold tracking-tight text-gray-900 dark:text-gray-100 sm:text-4xl">
{{title}}
</span>
</h1>
{{#if custom_excerpt}}
<p class="mt-8 text-2xl text-gray-500 dark:text-gray-300 leading-8">
{{custom_excerpt}}
</p>
{{/if}}
<div class="mt-4 text-base dark:text-gray-100">
Written by {{#foreach authors}}<a class="text-blue-600"
href="{{url}}">{{name}}</a>{{/foreach}} <span
class="text-gray-500">on <time datetime="{{date format="YYYY-MM-DD"}}">{{date format="D MMM YYYY"}}</time></span>
</div>
</div>
</header>
<div class="post-body mt-10 max-w-prose mx-auto text-gray-700 dark:text-gray-300">
{{content}}
</div>
<div class="post-body mt-10 max-w-prose mx-auto text-gray-700 dark:text-gray-300">
<h3 class="text-base mt-24 text-gray-500 text-center">
Wait - there's more! Read on:
</h3>
</div>
<div class="w-default mt-8 grid gap-5 md:grid-cols-2 mb-10">
{{#get "posts" filter="tags:{{primary_tag.slug}}+id:>{{id}}"
limit="1" order="id asc"}}
{{#foreach posts}}
{{> cardFancySmall}}
{{/foreach}}
{{/get}}
{{#get "posts" filter="tags:{{primary_tag.slug}}+id:<
{{id}}" limit=" 1" order="id desc" }}
{{#foreach posts}} {{> cardFancySmall}}
{{/foreach}} {{/get}} {{> cardTag}} </div>
{{!-- <aside class="my-20 max-w-prose mx-auto text-gray-700 dark:text-gray-300">
<div class="w-full grid gap-5 grid-cols-1 md:grid-cols-2">
{{> cardTag}}
{{> cardCTA}} </div> </aside> --}} </article>
{{/post}}
developers.hbs
+1 -1
View File
@@ -51,7 +51,7 @@
</div>
<div class="w-default my-10">
<h3 class="text-xl my-2 text-blue-600">Key features</h3>
<h3 class="text-xl my-2 text-blue-600">We've got you covered:</h3>
</div>
<div class="w-default grid gap-5 md:grid-cols-2 lg:grid-cols-3">
index.hbs
+2 -15
View File
@@ -14,19 +14,6 @@
{{> landing/developers }}
{{> cardCTA subHeadline="We're working round the clock to get V2 out - be the first to try it out:" }}
{{!-- <h4>Hai index</h4> --}}
{{!-- <div class="gh-page">
<div class="gh-container">
<h3>Hello! </h3>
<div class="gh-postfeed">
{{#foreach posts visibility="all"}}
{{> "card"}}
{{/foreach}}
</div>
</div>
</div> --}}
{{> landing/blogPreview }}
page-about.hbs
+2 -24
View File
@@ -54,31 +54,9 @@
</div>
{{!-- <div class="page-about-content mt-24 lg:pt-24 text-gray-700 dark:text-gray-300 text-2xl md:text-4xl lg:text-6xl">
{{content}}
</div> --}}
{{/post}}
</div>
<div class="w-default mt-20 grid grid-cols-1 sm:grid-cols-2 gap-5 md:gap-20">
{{!-- <div class="relative h-screen/4 rounded-2xl overflow-hidden flex col-span-1 transition hover:shadow-2xl p-5 bg-white dark:bg-gray-900">
<a href="/usecases" class="flex w-full h-full">
<div class="block self-center">
<div class="text-3xl font-semibold text-blue-600">
Use cases →
</div>
<p class="dark:text-gray-300">Interoperability &
more: a few reasons why people use Speckle.</p>
</div>
</a>
</div> --}}
</div>
<div class="w-default mt-20 text-gray-700 dark:text-gray-300 text-center">
<h2 class="text-4xl mb-5 font-bold">Team</h2>
<p class="max-w-prose mx-auto">Meet the full time
@@ -95,7 +73,7 @@
<div class="font-medium text-2xl leading-6 space-y-1 dark:text-gray-300">
<h3>{{name}}</h3>
<h3 class="text-blue-600 text-lg">{{location}}</h3>
<p class="text-gray-500 text-xs">
<p class="font-normal text-gray-500 text-sm max-w-sm">
{{bio}}
</p>
</div>
@@ -136,7 +114,7 @@
</div>
<div class="px-5 mt-20 sm:px-10 md:mx-auto max-w-4xl text-xs dark:text-gray-200 text-center">
<div class="px-5 my-20 sm:px-10 md:mx-auto max-w-4xl text-xs dark:text-gray-200 text-center">
Speckle is a trademark of AEC Systems Ltd., registered
in the UK and in other countries.
</div>
page-beta.hbs
+76 -32
View File
@@ -1,48 +1,92 @@
{{!< default}}
{{#post}}
<article class="relative">
<article class="relative">
{{!-- Header --}}
{{!-- {{> extras/patterns}} --}}
<header class="relative px-4 sm:px-6 lg:px-8 mt-24">
<div class="max-w-prose mx-auto object-center">
{{#if feature_image}}
<img class="gh-feature-image mx-auto" 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: 1000px) 1000px, 2000px"
loading="lazy" src="{{img_url feature_image size="xl"}}"
alt="{{title}}" />
{{/if}}
<header class="mb-10 mt-24 px-4 lg:px-8 relative sm:px-6">
<div class="w-default mx-auto object-center justify-center">
<h1>
<span class="mt-12 block text-4xl text-center leading-8 font-extrabold tracking-tight text-gray-900 dark:text-gray-100 sm:text-4xl">
<span class="font-extrabold leading-8 text-4xl text-center text-gray-900 tracking-tight mt-12 block dark:text-gray-100 sm:text-4xl">
{{title}}
</span>
</h1>
{{#if custom_excerpt}}
<p class="mt-8 text-2xl text-gray-500 dark:text-gray-300 leading-8">
{{custom_excerpt}}
</p>
{{/if}}
<div class="leading-8 mx-auto max-w-prose text-2xl text-gray-500 mt-8 dark:text-gray-300 text-justify">
{{content}}
</div>
</div>
</header>
<div class="post-body mt-10 max-w-prose mx-auto text-gray-700 dark:text-gray-300">
{{content}}
<div class="relative w-default mb-20 gap-4 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5">
{{> pricing }}
</div>
<div class="relative max-w-prose px-5 mx-auto mb-20 grid grid-cols-3 gap-4 bg-white rounded-xl">
<div class="col-span-3 md:col-span-2">
<h2 class="font-bold text-xl mt-5 text-gray-700 dark:text-gray-200">
Self Hosting
</h2>
<p class="mb-5 mt-5 pt-5 border-t dark:border-gray-600 dark:text-gray-200">
Speckle is open source. You can always deploy it on your own.
</p>
</div>
<div class="col-span-3 md:col-span-1 justify-center">
<a href="https://github.com/specklesystems" class="flex w-full h-full">
<div class="block self-center w-full text-center">
<div class="text-xl font-semibold text-blue-600 text-center">
Github →
</div>
</div>
</a>
</div>
</div>
<header class="mb-10 mt-24 px-4 lg:px-8 relative sm:px-6">
<div class="mx-auto max-w-prose object-center justify-center">
<h1>
<span class="font-extrabold leading-8 text-xl text-gray-700 tracking-tight mt-12 dark:text-gray-100 ">
Q&As:
</span>
</h1>
<div class="leading-8 mx-auto max-w-prose mt-8">
<div class="my-5 text-xl text-gray-700 dark:text-gray-200">
<h4 class="text-xl mb-4">
<span class="text-blue-600 font-bold">Q:</span>
Do you provide support for self-hosted
versions?
</h4>
<p class="text-base">Unfortunately we cannot do
so, for more reasons than one. First, it's
difficult to debug a setup without having
access to it. Second, to have access to it
implies we would be seeing very private
details of your infrastructure - which you
don't want us to do without a contract in
place.</p>
</div>
<div class="my-5 text-xl text-gray-700 dark:text-gray-200">
<h4 class="text-xl mb-4">
<span class="text-blue-600 font-bold">Q:</span>
Will the Standard plan always be free?
</h4>
<p class="text-base">As it stands now, yes. We will gradually introduce other plans with extra features that will come at a cost.</p>
</div>
<div class="my-5 text-xl text-gray-700 dark:text-gray-200">
<h4 class="text-xl mb-4">
<span class="text-blue-600 font-bold">Q:</span>
What does "Speckle" stand for?
</h4>
<p class="text-base">
Only few people know this. It's a closely guarded secret, but if you find out - let us know and we'll send you some stickers.
</p>
</div>
</div>
</div>
</header>
</article>
{{/post}}
{{/post}}
partials/cardBlog.hbs
+1 -1
View File
@@ -1,4 +1,4 @@
<div class="flex flex-col rounded-lg transition shadow hover:shadow-2xl overflow-hidden mt-10">
<div class="flex flex-col rounded-lg transition shadow hover:shadow-2xl overflow-hidden">
<div class="flex-shrink-0 ">
{{#if feature_image}}
<img class="h-48 w-full object-cover" srcset="{{img_url feature_image size="s"}} 300w,
partials/cardBlogSm.hbs
+40
View File
@@ -0,0 +1,40 @@
<div class="flex flex-col rounded-lg transition shadow hover:shadow-2xl overflow-hidden">
<div class="flex-shrink-0 ">
{{#if feature_image}}
<img class="h-32 w-full object-cover" 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: 1000px) 400px, 700px" src="{{img_url feature_image size="m"}}"
alt="{{title}}">
{{else}}
<div class="h-32 w-full block bg-blue-500">&nbsp;</div>
{{/if}}
</div>
<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-3 md:line-clamp-4">
{{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">
{{#foreach authors}}
{{name}}
{{/foreach}}
<span aria-hidden="true">
&middot;
</span>
<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/cardFancy.hbs
+2 -2
View File
@@ -1,4 +1,4 @@
<div class="relative h-screen/2 sm:h-screen/2 rounded-xl hover:rounded-2xl shadow hover:shadow-2xl bg-white transition overflow-hidden flex col-span-2 md:col-span-1">
<div class="relative py-20 rounded-xl shadow hover:shadow-2xl bg-white dark:bg-gray-800 transition overflow-hidden flex col-span-2 md:col-span-1">
<a href="{{url}}" class="self-center">
{{#if feature_image}}
<img class="absolute inset-0 h-full w-full object-cover"
@@ -17,7 +17,7 @@
</div>
<blockquote class="mt-8">
<div class="relative text-lg font-medium text-white md:flex-grow">
<p class="relative line-clamp-3 md:line-clamp-4">
<p class="relative line-clamp-3">
{{excerpt}}
</p>
</div>
partials/cardTag.hbs
+1 -1
View File
@@ -1,4 +1,4 @@
<div class="relative h-screen/4 rounded-2xl overflow-hidden flex col-span-2 transition hover:shadow-2xl bg-white dark:bg-gray-900">
<div class="relative py-10 rounded-2xl overflow-hidden flex col-span-2 transition hover:shadow-2xl bg-white dark:bg-gray-900">
<div class="relative block mx-auto self-center text-center">
<a href="{{primary_tag.url}}" class="w-full h-full">
<div class="text-3xl font-semibold text-blue-600">
partials/extras/listItem.hbs
+13
View File
@@ -0,0 +1,13 @@
<li class="items-start flex">
<div class="flex-shrink-0 ">
<svg class="text-green-500 h-6 w-6 " xmlns="http://www.w3.org/2000/svg"
fill="none" viewBox="0 0 24 24" stroke="currentColor"
aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round"
stroke-width="2" d="M5 13l4 4L19 7" />
</svg>
</div>
<p class="text-base dark:text-gray-200 ml-3">
{{ value }}
</p>
</li>
partials/footer.hbs
+47 -41
View File
@@ -1,8 +1,10 @@
<div class="relative bg-white dark:bg-gray-900 dark:text-white py-20 mt-10">
<div class="w-default py-20 flex flex-wrap sm:py-4">
{{!-- <h2 id="footerHeading" class="sr-only">Footer</h2> --}}
<div class="w-1/1 sm:w-1/1 sm:w-1/2 md:w-1/4">
<a href="{{@site.url}}" class="flex">
<div class="relative bg-white dark:bg-gray-900 dark:text-white py-20">
<div class="w-default py-20 sm:py-4 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-10">
{{!-- Logo and social --}}
<div class="pl-3 text-center md:text-left">
<a href="{{@site.url}}" class="flex justify-center md:justify-start">
<img class="h-10 mr-4" src="{{@site.logo}}" alt="logo">
<div class="text-2xl text-blue-600 dark:text-blue-500 title-font font-bold mt-1">
Speckle
@@ -11,9 +13,9 @@
<p class="text-gray-500 text-base my-4">
{{@site.description}}
</p>
<div class="flex space-x-6">
<div class="flex space-x-6 justify-center md:justify-start">
<a href="#" class="text-gray-400 hover:text-gray-500">
<a href="#" class="text-gray-800 dark:text-gray-200 hover:text-gray-500">
<span class="sr-only">Instagram</span>
<svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24"
aria-hidden="true">
@@ -22,7 +24,7 @@
</svg>
</a>
<a href="#" class="text-gray-400 hover:text-gray-500">
<a href="#" class="text-gray-800 dark:text-gray-200 hover:text-gray-500">
<span class="sr-only">Twitter</span>
<svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24"
aria-hidden="true">
@@ -30,7 +32,7 @@
</svg>
</a>
<a href="#" class="text-gray-400 hover:text-gray-500">
<a href="#" class="text-gray-800 dark:text-gray-200 hover:text-gray-500">
<span class="sr-only">GitHub</span>
<svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24"
aria-hidden="true">
@@ -40,19 +42,24 @@
</a>
</div>
<div class="mt-10">
{{> navbarCTA }}
</div>
<p class="text-gray-500 text-xs mt-10">
© Aec Systems
</p>
</div>
<div class="mt-10 md:mt-0 w-full sm:w-1/2 md:w-1/4">
<h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase">
{{!-- Use Cases --}}
<div class="pl-3 text-center md:text-left">
<h3 class="text-sm font-semibold text-gray-800 dark:text-gray-200 tracking-wider uppercase">
Use Cases
</h3>
<ul class="mt-4 space-y-4">
{{#get "posts" filter="tags:usecases" limit="3"}}
{{#get "posts" filter="tags:usecases+featured:true" limit="3"}}
{{#foreach posts}}
<li>
<a href="{{url}}" class="text-base text-gray-500 hover:text-gray-900 dark:hover:text-gray-100">
@@ -64,7 +71,7 @@
{{#get "tags" filter="slug:usecases" as |tag|}}
<li>
<a href="/usecases" class="text-base font-bold text-gray-500 hover:text-gray-900 dark:hover:text-gray-100">
<a href="/usecases" class="text-base font-bold text-gray-900 dark:text-gray-200 hover:text-gray-900 dark:hover:text-gray-100">
See All
</a>
</li>
@@ -72,41 +79,40 @@
</ul>
</div>
<div class="mt-10 md:mt-0 w-full sm:w-1/2 md:w-1/4">
<h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase">
Learn
{{!-- Resources --}}
<div class="pl-3 text-center md:text-left">
<h3 class="text-sm font-semibold text-gray-800 dark:text-gray-200 tracking-wider uppercase">
Developers
</h3>
<ul class="mt-4 space-y-4">
<li>
<a href="#" class="text-base text-gray-500 hover:text-gray-900 dark:hover:text-gray-100">
Installation & First Steps
</a>
</li>
{{#get "posts" filter="tags:developers+featured:true" limit="3"}}
{{#foreach posts}}
<li>
<a href="{{url}}" class="text-base text-gray-500 hover:text-gray-900 dark:hover:text-gray-100">
{{title}}
</a>
</li>
{{/foreach}}
{{/get}}
<li>
<a href="https://discourse.speckle.works" target="_blank" class="text-base text-gray-500 hover:text-gray-900 dark:hover:text-gray-100">
Community Forum
</a>
</li>
<li>
<a href="/developers" class="text-base text-gray-500 hover:text-gray-900 dark:hover:text-gray-100">
Developer Docs
</a>
</li>
<li>
<a href="/blog" class="text-base text-gray-500 hover:text-gray-900 dark:hover:text-gray-100">
Blog
</a>
</li>
{{#get "tags" filter="slug:usecases" as |tag|}}
<li>
<a href="/developers" class="text-base font-bold text-gray-900 dark:text-gray-200 hover:text-gray-900 dark:hover:text-gray-100">
See All
</a>
</li>
{{/get}}
</ul>
</div>
<div class="mt-10 md:mt-0 w-full sm:w-1/2 md:w-1/4">
<h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase">
{{!-- Company Stuff --}}
<div class="pl-3 text-center md:text-left">
<h3 class="text-sm font-semibold text-gray-800 dark:text-gray-200 tracking-wider uppercase">
Company
</h3>
<ul class="mt-4 space-y-4">
partials/landing/blogPreview.hbs
+32
View File
@@ -0,0 +1,32 @@
{{#get "posts" filter="primary_tag:blog" limit="3" include="authors"}}
<div class="">
<div class="relative w-default container mx-auto pb-20 lg:pb-32">
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 text-gray-500 dark:text-gray-600">
{{#foreach posts}}
{{> cardBlogSm }}
{{/foreach}}
<div>
<div class="relative ">
<h2 class="text-2xl pl-5 mb-5 font-bold text-blue-600">Pressroom</h2>
<p class=" pl-5 text-lg text-gray-800 dark:text-gray-400">
Latest news from the Speckle Blog.
</p>
</div>
<div class="relative mt-5 rounded-xl py-5 hover:shadow-2xl transition overflow-hidden flex">
<a href="/blog" class="w-full self-center">
<div class="relative px-5">
<div class="text-lg font-semibold text-blue-600">
Read More →
</div>
</div>
</a>
</div>
</div>
</div>
</div>
</div>
{{/get}}
partials/landing/developers.hbs
+64 -85
View File
@@ -1,4 +1,4 @@
{{#get "posts" filter="primary_tag:developers" limit="3"}}
{{#get "posts" filter="primary_tag:developers+featured:true" limit="3"}}
<div class="w-default mt-36 my-0 grid grid-cols-1 lg:grid-cols-2 gap-10 mb-10 ">
<div class="relative">
@@ -6,36 +6,83 @@
<h2 class="text-4xl pl-5 mb-5 font-bold text-blue-600">Built
for developers</h2>
<p class=" pl-5 text-lg text-gray-800 dark:text-gray-400">
We fine tune the right abstractions so your teams
can be productive in
developing on top of Speckle.
We fine tune the right abstractions so you
can focus on the business logic, rather than
extracting data out of Revit.
</p>
</div>
<div class="relative grid gap-4 grid-cols-1 md:grid-cols-2 mt-10">
{{#foreach posts}}
<div class="rounded-lg transition transition overflow-hidden bg-white dark:bg-gray-900 hover:bg-gray-100 dark:hover:bg-gray-800 dark:text-gray-200">
<div class="flex-1 p-6 flex flex-col justify-between">
<div class="flex-1">
<a href="{{url}}" class="block mt-1">
<p class="text-xl font-semibold text-gray-900 dark:text-gray-200">
{{title}}
</p>
<p class="mt-2 text-sm text-gray-500 line-clamp-2">
{{excerpt}}
</p>
<footer class="mt-2">
<p class="text-base font-semibold text-blue-500">
Read More
</p>
</footer>
</a>
</div>
</div>
</div>
{{/foreach}}
<div class="relative rounded-xl py-5 hover:rounded-2xl hover:shadow-2xl bg-white dark:bg-gray-900 transition overflow-hidden flex">
<a href="/developers" class="w-full self-center">
<div class="relative px-8">
<div class="text-xl font-semibold text-blue-600">
Start Developing →
</div>
</div>
</a>
</div>
</div>
</div>
{{!-- Viewer Demo --}}
<div class="rounded-xl shadow-2xl overflow-hidden">
<pre class="" style="margin:0 !important;">
<p class="text-xl lg:hidden font-semibold text-gray-900 dark:text-gray-200 bg-white dark:bg-gray-900 py-8 px-8">
3d Viewer: Batteries Included
</p>
<pre class="text-xs" style="margin:0 !important; font-size: 0.8em !important;">
<code class="language-javascript">
import Viewer from './modules/Viewer'
// Sample 3d viewer app
import Viewer from './modules/Viewer'
let viewer = new Viewer( )
let viewer = new Viewer( )
// event handlers
viewer.on( 'load-progress', args => handleProgress( args ) )
viewer.on( 'object-clicked', objs => handleObjClick( objs ) )
// event handlers
viewer.on( 'load-progress', args => handleProgress( args ) )
viewer.on( 'object-clicked', objs => handleObjClick( objs ) )
// load a model
async function load( ) {
await viewer.loadObject( revitStreamUrl )
}</code>
// load a model
async function load( ) {
await viewer.loadObject( revitStreamUrl )
}</code>
</pre>
<div class="h-8 w-full bg-gray-300 dark:bg-gray-900">
<div class="w-full bg-gray-300 dark:bg-gray-900 text-gray-500 text-xs py-2 px-8">
$ ▸ superApp.js <span class="ml-3 opacity-50">#
double click an object to focus</span>
</div>
<div class="h-80 w-full flex justify-center bg-gradient-to-br from-transparent via-transparent to-gray-200 dark:to-gray-900"
id="renderer">
<button class="animate-bounce self-center text-sm font-bold bg-blue-600 text-white rounded-full p-3 shadow-2xl transition hover:bg-blue-500"
onclick="loadViewer()" id="loadbutton">
<svg class="inline-flex h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none"
viewBox="0 0 24 24" stroke="currentColor">
<svg class="inline-flex h-6 w-6" xmlns="http://www.w3.org/2000/svg"
fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round"
stroke-width="2" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4" />
</svg>
@@ -45,72 +92,4 @@ async function load( ) {
</div>
</div>
<div x-data="{ activeSlide: '0', slides: [ '0', '1', '2', '3', '4', '5' ] }"
class="w-default my-0 mt-5 mb-20 grid grid-cols-1 lg:grid-cols-2 gap-10">
{{!-- <div class="relative grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-1 gap-4 lg:gap-2 grid-flow-row">
{{#foreach posts}}
<div class="rounded-lg transition transition overflow-hidden bg-white dark:bg-gray-900 hover:bg-gray-100 dark:hover:bg-gray-800 dark:text-gray-200"
@mouseenter="activeSlide='{{@index}}';">
<div class="flex-shrink-0 lg:hidden">
<img class="h-48 w-full object-cover" 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: 1000px) 400px, 700px" src="{{img_url feature_image size="m"}}"
alt="{{title}}">
</div>
<div class="flex-1 p-6 flex flex-col justify-between">
<div class="flex-1">
<a href="{{url}}" class="block mt-1">
<p class="text-xl font-semibold text-gray-900 dark:text-gray-200">
{{title}}
</p>
<p class="mt-2 text-sm text-gray-500 line-clamp-2">
{{excerpt}}
</p>
<footer class="mt-2">
<p class="text-base font-semibold text-blue-500">
Read More
</p>
</footer>
</a>
</div>
</div>
</div>
{{/foreach}}
<div class="relative rounded-xl py-5 hover:rounded-2xl hover:shadow-2xl bg-white dark:bg-gray-900 transition overflow-hidden flex">
<a href="/developerss" class="w-full self-center">
<div class="relative px-8">
<div class="text-xl font-semibold text-blue-600">
Developers →
</div>
</div>
</a>
</div>
</div> --}}
{{!-- <div class="relative hidden lg:flex">
{{#foreach posts}}
<div class="absolute inset-0 h-full w-full flex"
x-show="activeSlide === '{{@index}}'"
x-transition:enter="transition ease-out duration-300"
x-transition:enter-start="opacity-0 -translate-y-1"
x-transition:enter-end="opacity-100 translate-y-0"
x-transition:leave="transition ease-in duration-50"
x-transition:leave-start="opacity-100 translate-y-0"
x-transition:leave-end="opacity-0 -translate-y-1">
<img src="{{feature_image}}" class="object-cover self-center">
</div>
{{/foreach}}
</div> --}}
</div>
{{/get}}
partials/landing/opensource.hbs
+1 -1
View File
@@ -26,7 +26,7 @@
<li class="mt-2">
<b class="text-blue-600">Longevity:</b>
Spekckle has already outlived Flux: open source code keeps thriving when business plans change.
Speckle has already outlived Flux: open source code keeps thriving when business plans change.
</li>
</ul>
partials/menus/learnMenu.hbs
+19 -142
View File
@@ -1,127 +1,3 @@
{{!-- <div>
<h3 class="text-sm font-medium tracking-wide text-gray-500 uppercase">
Get Started With Speckle
</h3>
<ul class="mt-5 space-y-6">
<li class="flow-root">
<a href="#" class="-m-3 p-3 flex items-center rounded-md text-base font-medium text-gray-900 text-gray-900 dark:text-gray-200 dark:hover:text-gray-500 dark:text-gray-200 dark:hover:text-gray-500 hover:bg-gray-50">
<svg class="flex-shrink-0 h-6 w-6 text-gray-400"
x-description="Heroicon name: user-group" xmlns="http://www.w3.org/2000/svg"
fill="none" viewBox="0 0 24 24" stroke="currentColor"
aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round"
stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"></path>
</svg>
<span class="ml-4">Installation & First Steps</span>
</a>
</li>
<li class="flow-root">
<a href="#" class="-m-3 p-3 flex items-center rounded-md text-base font-medium text-gray-900 text-gray-900 dark:text-gray-200 dark:hover:text-gray-500 dark:text-gray-200 dark:hover:text-gray-500 hover:bg-gray-50">
<svg class="flex-shrink-0 h-6 w-6 text-gray-400"
x-description="Heroicon name: globe-alt" xmlns="http://www.w3.org/2000/svg"
fill="none" viewBox="0 0 24 24" stroke="currentColor"
aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round"
stroke-width="2" d="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9m-9 9a9 9 0 019-9"></path>
</svg>
<span class="ml-4">The Speckle Connectors</span>
</a>
</li>
<li class="flow-root">
<a href="#" class="-m-3 p-3 flex items-center rounded-md text-base font-medium text-gray-900 text-gray-900 dark:text-gray-200 dark:hover:text-gray-500 hover:bg-gray-50">
<svg class="flex-shrink-0 h-6 w-6 text-gray-400"
x-description="Heroicon name: bookmark-alt" xmlns="http://www.w3.org/2000/svg"
fill="none" viewBox="0 0 24 24" stroke="currentColor"
aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round"
stroke-width="2" d="M16 4v12l-4-2-4 2V4M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
</svg>
<span class="ml-4">Speckle for Rhino</span>
</a>
</li>
<li class="flow-root">
<a href="#" class="-m-3 p-3 flex items-center rounded-md text-base font-medium text-gray-900 text-gray-900 dark:text-gray-200 dark:hover:text-gray-500 hover:bg-gray-50">
<svg class="flex-shrink-0 h-6 w-6 text-gray-400"
x-description="Heroicon name: desktop-computer"
xmlns="http://www.w3.org/2000/svg" fill="none"
viewBox="0 0 24 24" stroke="currentColor"
aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round"
stroke-width="2" d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path>
</svg>
<span class="ml-4">Speckle for Grasshopper</span>
</a>
</li>
<li class="flow-root">
<a href="#" class="-m-3 p-3 flex items-center rounded-md text-base font-medium text-gray-900 text-gray-900 dark:text-gray-200 dark:hover:text-gray-500 hover:bg-gray-50">
<svg class="flex-shrink-0 h-6 w-6 text-gray-400"
x-description="Heroicon name: desktop-computer"
xmlns="http://www.w3.org/2000/svg" fill="none"
viewBox="0 0 24 24" stroke="currentColor"
aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round"
stroke-width="2" d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path>
</svg>
<span class="ml-4">Speckle for Dynamo</span>
</a>
</li>
</ul>
</div> --}}
{{!-- <div>
<h3 class="text-sm font-medium tracking-wide text-gray-500 uppercase">
Interoperability Guides
</h3>
<ul class="mt-5 space-y-6">
<li class="flow-root">
<a href="#" class="-m-3 p-3 flex items-center rounded-md text-base font-medium text-gray-900 text-gray-900 dark:text-gray-200 dark:hover:text-gray-500 hover:bg-gray-50">
<svg class="flex-shrink-0 h-6 w-6 text-gray-400"
x-description="Heroicon name: user-group" xmlns="http://www.w3.org/2000/svg"
fill="none" viewBox="0 0 24 24" stroke="currentColor"
aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round"
stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"></path>
</svg>
<span class="ml-4">Rhino ↔ Revit</span>
</a>
</li>
<li class="flow-root">
<a href="#" class="-m-3 p-3 flex items-center rounded-md text-base font-medium text-gray-900 text-gray-900 dark:text-gray-200 dark:hover:text-gray-500 hover:bg-gray-50">
<svg class="flex-shrink-0 h-6 w-6 text-gray-400"
x-description="Heroicon name: globe-alt" xmlns="http://www.w3.org/2000/svg"
fill="none" viewBox="0 0 24 24" stroke="currentColor"
aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round"
stroke-width="2" d="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9m-9 9a9 9 0 019-9"></path>
</svg>
<span class="ml-4">Grasshopper ↔ Revit</span>
</a>
</li>
<li class="flow-root">
<a href="#" class="-m-3 p-3 flex items-center rounded-md text-base font-medium text-gray-900 text-gray-900 dark:text-gray-200 dark:hover:text-gray-500 hover:bg-gray-50">
<svg class="flex-shrink-0 h-6 w-6 text-gray-400"
x-description="Heroicon name: bookmark-alt" xmlns="http://www.w3.org/2000/svg"
fill="none" viewBox="0 0 24 24" stroke="currentColor"
aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round"
stroke-width="2" d="M16 4v12l-4-2-4 2V4M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
</svg>
<span class="ml-4">Revit ↔ Others</span>
</a>
</li>
</ul>
</div> --}}
<a href="https://discourse.speckle.works" target="blank"
class="-m-3 p-3 flex flex-col justify-between rounded-lg transition dark:bg-gray-950 hover:bg-blue-100 dark:hover:bg-gray-800">
<div class="flex-shrink-0">
@@ -131,21 +7,23 @@
viewBox="0 0 24 24" stroke="currentColor"
aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round"
stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z" />
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>
</div>
<div class="flex items-center md:h-full lg:flex-col">
<div class="ml-4 md:flex-1 md:flex md:flex-col md:justify-between lg:ml-0 lg:mt-4">
<div>
<p class="text-base font-medium text-gray-900 dark:text-gray-50">
Documentation
<p class="text-base font-bold text-gray-900 dark:text-gray-50">
speckle.guide
</p>
<p class="mt-1 text-sm text-gray-900 dark:text-gray-50">
We're working hard to improve it!
<p class="mt-1 text-sm font-normal text-gray-900 dark:text-gray-50">
Documentation and step-by-step guides on how to
get the best of Speckle.
</p>
</div>
<p class="mt-2 text-sm font-medium text-blue-600 lg:mt-4">Check it out <span aria-hidden="true">→</span></p>
<p class="mt-2 text-sm font-medium text-blue-600 lg:mt-4">Check
it out <span aria-hidden="true">→</span></p>
</div>
</div>
</a>
@@ -167,10 +45,10 @@
<div class="flex items-center md:h-full lg:flex-col">
<div class="ml-4 md:flex-1 md:flex md:flex-col md:justify-between lg:ml-0 lg:mt-4">
<div>
<p class="text-base font-medium text-gray-900 dark:text-gray-50">
Community Forum
<p class="text-base font-bold text-gray-900 dark:text-gray-50">
speckle.community
</p>
<p class="mt-1 text-sm text-gray-900 dark:text-gray-50">
<p class="mt-1 text-sm font-normal text-gray-900 dark:text-gray-50">
Where questions get answered, showcases, and
more!
</p>
@@ -184,9 +62,8 @@
<a href="/blog" class="-m-3 p-3 flex flex-col justify-between rounded-lg transition dark:bg-gray-950 hover:bg-blue-100 dark:hover:bg-gray-800">
<div class="flex-shrink-0">
<span class="inline-flex items-center justify-center h-64 w-64 rounded-md text-gray-500 dark:text-white sm:h-12 sm:w-12">
<svg class="h-6 w-6"
xmlns="http://www.w3.org/2000/svg" fill="none"
viewBox="0 0 24 24" stroke="currentColor"
<svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg"
fill="none" viewBox="0 0 24 24" stroke="currentColor"
aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round"
stroke-width="2" d="M11 5.882V19.24a1.76 1.76 0 01-3.417.592l-2.147-6.15M18 13a3 3 0 100-6M5.436 13.683A4.001 4.001 0 017 6h1.832c4.1 0 7.625-1.234 9.168-3v14c-1.543-1.766-5.067-3-9.168-3H7a3.988 3.988 0 01-1.564-.317z" />
@@ -197,10 +74,10 @@
<div class="ml-4 md:flex-1 md:flex md:flex-col md:justify-between lg:ml-0 lg:mt-4">
<div>
<p class="text-base font-medium text-gray-900 dark:text-gray-50">
Blog
speckle blog
</p>
<p class="mt-1 text-sm text-gray-900 dark:text-gray-50">
News & thoughts from the Speckle Team.
Latest news, thoughts and geeky tech articles from the team.
</p>
</div>
<p class="mt-2 text-sm font-medium text-blue-600 lg:mt-4">Read
@@ -212,9 +89,8 @@
<a href="/blog" class="-m-3 p-3 flex flex-col justify-between rounded-lg transition dark:bg-gray-950 hover:bg-blue-100 dark:hover:bg-gray-800">
<div class="flex-shrink-0">
<span class="inline-flex items-center justify-center h-64 w-64 rounded-md text-gray-500 dark:text-white sm:h-12 sm:w-12">
<svg class="h-6 w-6"
xmlns="http://www.w3.org/2000/svg" fill="none"
viewBox="0 0 24 24" stroke="currentColor"
<svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg"
fill="none" viewBox="0 0 24 24" stroke="currentColor"
aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round"
stroke-width="2" d="M11 5.882V19.24a1.76 1.76 0 01-3.417.592l-2.147-6.15M18 13a3 3 0 100-6M5.436 13.683A4.001 4.001 0 017 6h1.832c4.1 0 7.625-1.234 9.168-3v14c-1.543-1.766-5.067-3-9.168-3H7a3.988 3.988 0 01-1.564-.317z" />
@@ -228,7 +104,8 @@
Github
</p>
<p class="mt-1 text-sm text-gray-900 dark:text-gray-50">
Check out the Speckle source code and give us a star ⭐️
Check out the Speckle source code and give us a
star ⭐️
</p>
</div>
<p class="mt-2 text-sm font-medium text-blue-600 lg:mt-4">Read
partials/menus/tagDropdownMenu.hbs
+1 -6
View File
@@ -44,15 +44,10 @@
{{!-- Cards with posts from tag --}}
{{#get "posts" filter="tags:{{tag}}" limit=maxcards}}
{{#get "posts" filter="tags:{{tag}}+featured:true" limit=maxcards}}
{{#foreach posts}}
<a href="{{url}}" class="-m-3 p-3 flex flex-col justify-between rounded-lg transition dark:bg-gray-900 hover:bg-blue-100 dark:hover:bg-gray-800">
<div class="flex md:h-full lg:flex-col">
<div class="flex-shrink-0">
<span class="inline-flex items-center justify-center h-64 w-64 rounded-md text-white sm:h-12 sm:w-12">
<img src="{{img_url feature_image size="m"}}">
</span>
</div>
<div class="ml-4 md:flex-1 md:flex md:flex-col md:justify-between lg:ml-0 lg:mt-4">
<div>
<p class="text-xl font-medium text-gray-900 dark:text-gray-50">
partials/pricing.hbs
+73
View File
@@ -0,0 +1,73 @@
<div class="bg-white p-10 col-span-1 lg:col-span-3 shadow-xl rounded-xl dark:bg-gray-700 relative ring dark:ring-blue-700">
<div>
<h3 class="bg-blue-100 font-semibold text-base text-blue-600 tracking-wide uppercase px-4 py-1 rounded-full inline-flex">
<span class="hidden md:inline-block">Speckle for</span> Teams & Individuals
</h3>
<h2 class="font-bold text-4xl mt-5 dark:text-gray-200">
Standard
<span class="font-medium text-base text-gray-400 dark:text-gray-600">Free</span>
</h2>
<p class="mb-5 mt-5 pt-5 border-t dark:border-gray-600 dark:text-gray-200">
Our standard plan for individuals & teams.
Enjoy
Speckle without extra hassle.
</p>
<p class="mb-2 dark:text-gray-200">Interoperability:</p>
<ul class="space-y-2 ">
{{> extras/listItem value="Speckle Revit"}}
{{> extras/listItem value="Speckle Rhino"}}
{{> extras/listItem value="Speckle Dynamo"}}
{{> extras/listItem value="Speckle Grasshopper"}}
{{> extras/listItem value="And More "}}
</ul>
<p class="my-4 dark:text-gray-200">Features:</p>
<ul class="space-y-2 ">
{{> extras/listItem value="Unlimited streams"}}
{{> extras/listItem value="Unlimited versions"}}
{{> extras/listItem value="Web 3d viewer"}}
{{> extras/listItem value="API Access"}}
{{> extras/listItem value="App Registration"}}
{{> extras/listItem value="Community support"}}
</ul>
</div>
{{!-- <div class="h-16 absolute bottom-0 inset-x-0"> --}}
<div class="self-end mt-10 ">
<a href="https://forms.gle/oA64wPTjk7FprGf16">
<button class="w-full bg-blue-600 font-medium text-base text-white px-4 py-2 shadow-sm border-transparent rounded-md border hover:bg-blue-700 hover:shadow-xl transition">
Join the waiting list
</button>
</a>
</div>
</div>
<div class="bg-gray-50 dark:bg-gray-800 col-span-1 lg:col-span-2 p-10 flex-wrap rounded-xl flex relative">
<div class="w-full">
<h3 class="bg-blue-100 font-semibold text-base text-blue-600 tracking-wide uppercase px-4 py-1 rounded-full inline-flex">
<span class="hidden md:inline-block">Speckle for</span> Enterprises
</h3>
<h2 class="font-bold text-4xl mt-5 dark:text-gray-200">
Managed
</h2>
<p class="mb-5 mt-5 pt-5 border-t dark:border-gray-600 dark:text-gray-200">
Dedicated solutions for enterprises, large
teams
or projects.
</p>
<ul class="font-bold space-y-2 ">
{{> extras/listItem value="Everyting in Standard"}}
</ul>
<p class="my-4 dark:text-gray-200">Extras:</p>
<ul class="space-y-2 ">
{{> extras/listItem value="Custom subdomain"}}
{{> extras/listItem value="Choice of locations"}}
{{> extras/listItem value="Single sign-on"}}
{{> extras/listItem value="SLA"}}
{{> extras/listItem value="Dedicated Support"}}
</ul>
</div>
<div class="self-end mt-10 w-full">
<button class="w-full bg-blue-600 font-medium text-base text-white px-4 py-2 shadow-sm border-transparent rounded-md border hover:bg-blue-700 hover:shadow-xl transition">
Contact Sales
</button>
</div>
</div>
post.hbs
+2 -6
View File
@@ -31,11 +31,7 @@
</p>
{{/if}}
<div class="mt-4 text-base dark:text-gray-100">
Written by {{#foreach authors}}<a class="text-blue-600"
href="{{url}}">{{name}}</a>{{/foreach}} <span
class="text-gray-500">on <time datetime="{{date format="YYYY-MM-DD"}}">{{date format="D MMM YYYY"}}</time></span>
</div>
</div>
</header>
@@ -55,7 +51,7 @@
</div>
<div class="w-default mt-8 grid gap-5 md:grid-cols-2">
<div class="w-default mt-8 grid gap-5 md:grid-cols-2 mb-10">
{{#get "posts" filter="tags:{{primary_tag.slug}}+id:>{{id}}" limit="1" order="id asc"}}