ghost-theme/custom-tutorial-post.hbs

{{!< 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 rounded-xl overflow-hidden mt-10">
      {{#if feature_image}}
      <img class="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: 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 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 space-y-1 space-x-1">
        {{#foreach tags}}
        <a class="rounded-full py-1 px-3 bg-blue-500 text-white inline-block hover:ring-4 transition"
          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 text-sm">{{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 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 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"
                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="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-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 class="space-y-1 space-x-1">
              {{#foreach tags}}
              <a class="rounded-full py-1 px-3 bg-blue-500 text-white inline-block hover:ring-4 transition"
                href="{{url}}">
                {{name}}
              </a>
              {{/foreach}}
            </div>
          </div>
        </div>
      </div>
    </aside>

    {{!-- Body --}}

    <div
      class="block post-content prose dark:prose-dark lg:prose-xl prose-blue mx-auto col-span-7 md:col-span-5 mt-4 w-full max-w-prose">
      {{content}}
      <br>
      <div id='discourse-comments' class="mt-4"></div>
    </div>


    <script type="text/javascript">
      DiscourseEmbed = { discourseUrl: 'https://speckle.community/',
                        discourseEmbedUrl: '{{url absolute="true"}}' };
      (function() {
        var d = document.createElement('script'); d.type = 'text/javascript'; d.async = true;
        d.src = DiscourseEmbed.discourseUrl + 'javascripts/embed.js';
        (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(d);
      })();
    </script>

  </div>
  </article>

  <div class="shadow-xl sm:px-2 px-5 pt-8 pb-10 rounded-lg mt-10 bg-white dark:bg-gray-900">
    <div class="w-default flex content-center space-x-2 flex-wrap justify-around  mx-auto ">
      <div class="mt-2 text-center sm:text-left dark:text-gray-200">
        <h3 class="text-2xl">Have a question you need answered?</h3>
        <p>Submit your question on the forum and get help from the community.</p>
      </div>

      <a href="https://speckle.community/new-topic?title=Question:%20How%20can%20I%20...&category=help&tags=v2"
        target="_blank"
        class="mt-2 border-2 rounded-lg border-blue-500 bg-blue-500 hover:ring-4 transition p-4 flex text-white text-center justify-center">
        <span class="self-center">Ask a question</span>
      </a>
    </div>
  </div>

  <aside class="w-default mx-auto mb-10 px-3" x-data="{}">

    {{#if primary_tag}}
    {{#get "posts" filter="tags:{{primary_tag.slug}}+id:-{{id}}" include="authors" limit="6" 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">
          {{> cardTutorialSm }}
        </div>
        {{/foreach}}
      </div>
    </article>
    {{/if}}
    {{/get}}
    {{/if}}

  </aside>



  {{/post}}