cleaned shortcodes, automized header creation

This commit is contained in:
timurgordon
2022-02-16 05:46:55 +03:00
parent 5117bc1b70
commit 10eefa2753
18 changed files with 356 additions and 311 deletions

BIN
templates/.DS_Store vendored Normal file

Binary file not shown.

View File

@@ -1,8 +1,11 @@
<!DOCTYPE html>
<html lang="en" charset="utf-8">
{% include "partials/head.html" %}
{%- set section = get_section(path="header/_index.md") %}
{% include "partials/header.html" %}
{%- set section = get_section(path="_index.md") %}
<body>
<div id="content">

31
templates/index copy.html Normal file
View File

@@ -0,0 +1,31 @@
{% extends "_default/base.html" %}
{% block content %}
<!-- Landing page template, has a banner and rows of page summaries -->
<main class="pt-16">
<!-- Landing page banner -->
{% include "partials/splitRow.html" %}
<!-- Landing page full width vertical image -->
<img src="/images/threefold_img2.png" alt="">
<br/>
{%- set section = get_section(path="about/community/_index.md") %}
{% include "partials/splitRow.html" %}
<br/>
<!-- Summary row of sustainability page -->
{%- set section = get_section(path="about/sustainability/_index.md") %}
{% include "partials/splitRow.html" %}
<br/>
<!-- Summary row of creators page -->
{%- set section = get_section(path="about/creators/_index.md") %}
{% include "partials/splitRow.html" %}
</main>
{% endblock content %}

View File

@@ -4,6 +4,8 @@
<!-- Landing page template, has a banner and rows of page summaries -->
<main class="pt-16">
{{section.content | safe}}
<!-- Landing page banner -->
{% include "partials/splitRow.html" %}
@@ -24,8 +26,5 @@
{%- set section = get_section(path="about/creators/_index.md") %}
{% include "partials/splitRow.html" %}
</main>
{% endblock content %}

View File

@@ -8,7 +8,7 @@
<article class="article lg:w-7/12 mx-auto">
<h1 class="tracking-tight pt-12 lg:pt-12 2xl:pt-32 text-5xl text-left
text-5xl fw-500 leading-snug font-normal mb-10">
{{ page.title }}
{{ page.title }}
</h1>
<h4 class="text-sm not-italic font-light leading-6 text-gray-600">
</h4>

View File

@@ -0,0 +1,7 @@
{% extends "_default/base.html" %}
{% block content %}
<main class="pt-16">
{{section.content | safe}}
</main> {% endblock content %}

View File

@@ -30,6 +30,10 @@
</script>
{% set header_items = section.content | safe | split(pat="<li>") %}
<body>
<div class="z-10 bg-white fixed w-screen">
<div class="relative z-10 shadow">
@@ -49,10 +53,15 @@
</div>
<div class="hidden md:flex-1 md:flex md:items-center md:justify-between md:space-x-12">
<nav class="flex space-x-10">
{% for header_item in header_items %}
{% if not loop.first %}
{% set header_arr = header_item | split(pat="</li>") %}
{% set header_label = header_arr[0] %}
<div class="relative">
<!-- Item active: "text-gray-900", Item inactive: "text-gray-500" -->
<button type="button" id="learn-btn" class="text-gray-500 group inline-flex items-center space-x-2 text-sm leading-6 font-normal hover:text-gray-900 focus:outline-none focus:text-gray-900 transition ease-in-out duration-150">
<span>Learn</span>
<span>{{ header_label }}</span>
<!--
Heroicon name: chevron-down
@@ -60,287 +69,46 @@
-->
</button>
</div>
<a href="#" class="text-sm leading-6 font-normal text-gray-500 hover:text-gray-900 focus:outline-none focus:text-gray-900 transition ease-in-out duration-150">
Developers
</a>
<a href="/blog" class="text-sm leading-6 font-normal text-gray-500 hover:text-gray-900 focus:outline-none focus:text-gray-900 transition ease-in-out duration-150">
Founders & Creators
</a>
<a href="/blog" class="text-sm leading-6 font-normal text-gray-500 hover:text-gray-900 focus:outline-none focus:text-gray-900 transition ease-in-out duration-150">
Community
</a>
<a href="/blog" class="text-sm leading-6 font-normal text-gray-500 hover:text-gray-900 focus:outline-none focus:text-gray-900 transition ease-in-out duration-150">
Career
</a>
<a href="/blog" class="text-sm leading-6 font-normal text-gray-500 hover:text-gray-900 focus:outline-none focus:text-gray-900 transition ease-in-out duration-150 mt-0">
Blog
</a>
</nav>
{% endif %}
{% endfor %}
</nav>
<div class="flex items-center space-x-8">
<a href="#" class="text-sm leading-6 font-normal text-gray-500 hover:text-gray-900 focus:outline-none focus:text-gray-900 transition ease-in-out duration-150">
Sign in
</a>
<span class="inline-flex rounded-md shadow-sm">
<a href="#" class="inline-flex items-center justify-center px-4 py-2 border border-transparent text-sm leading-6 font-normal rounded-md text-white bg-indigo-600 hover:bg-indigo-500 focus:outline-none focus:border-indigo-700 focus:shadow-outline-indigo active:bg-indigo-700 transition ease-in-out duration-150">
Sign up
</a>
</span>
</div>
<span class="inline-flex rounded-md shadow-sm">
<a href="#" class="inline-flex items-center justify-center px-4 py-2 border border-transparent text-sm leading-6 font-normal rounded-md text-white bg-indigo-600 hover:bg-indigo-500 focus:outline-none focus:border-indigo-700 focus:shadow-outline-indigo active:bg-indigo-700 transition ease-in-out duration-150">
English
</a>
</span>
</div>
</div>
</div>
</div>
<!-- learn menu -->
<!--
'learn' flyout menu, show/hide based on flyout menu state.
Entering: "transition ease-out duration-200"
From: "opacity-0 -translate-y-1"
To: "opacity-100 translate-y-0"
Leaving: "transition ease-in duration-150"
From: "opacity-100 translate-y-0"
To: "opacity-0 -translate-y-1"
md:block or hidden
-->
<div id="learn" class="hidden opacity-0 -translate-y-1 absolute inset-x-0 transform shadow-lg backdrop-blur">
{% for header_item in header_items %}
{% if not loop.first %}
{% set header_arr = header_item | split(pat="</li>") %}
{% set header_label = header_arr[0] %}
{% set header_menu = header_arr[1] %}
<div>
<div id="learn" class="hidden opacity-0 -translate-y-1 absolute inset-x-0 transform shadow-lg backdrop-blur">
<div class="bg-semi-white">
<div class="max-w-7xl mx-auto grid gap-y-6 px-4 py-6 sm:grid-cols-2 sm:gap-8 sm:px-6 sm:py-8 lg:grid-cols-4 lg:px-8 lg:py-12 xl:py-16">
<div href="#" class="-m-3 p-3 flex flex-col justify-between space-y-6 rounded-lg transition ease-in-out duration-150">
<div class="space-x-4 flex md:h-full lg:flex-col lg:space-x-0 lg:space-y-4">
<div class="flex-shrink-0">
<span class="inline-flex items-center justify-center h-10 w-10 rounded-md bg-indigo-500 text-white sm:h-12 sm:w-12">
<!-- Heroicon name: chart-bar -->
<svg class="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="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
</svg>
</span>
</div>
<div class="space-y-2 md:flex-1 md:flex md:flex-col md:justify-between lg:space-y-4">
<a href="" class="space-y-1 border-transparent">
<p class="text-sm leading-6 font-normal text-gray-900">
Analytics
</p>
<p class="text-sm leading-5 text-gray-500">
Get a better understanding of where your traffic is coming from.
</p>
</a>
</div>
<div class="space-y-2 md:flex-1 md:flex md:flex-col md:justify-between lg:space-y-4">
<a href="" class="space-y-1 border-transparent">
<p class="text-sm leading-6 font-normal text-gray-900">
Analytics
</p>
<p class="text-sm leading-5 text-gray-500">
Get a better understanding of where your traffic is coming from.
</p>
</a>
</div>
</div>
</div>
<a href="#" class="-m-3 p-3 flex flex-col justify-between space-y-6 rounded-lg transition ease-in-out duration-150">
<div class="space-x-4 flex md:h-full lg:flex-col lg:space-x-0 lg:space-y-4">
<div class="flex-shrink-0">
<span class="inline-flex items-center justify-center h-10 w-10 rounded-md bg-indigo-500 text-white sm:h-12 sm:w-12">
<!-- Heroicon name: cursor-click -->
<svg class="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="M15 15l-2 5L9 9l11 4-5 2zm0 0l5 5M7.188 2.239l.777 2.897M5.136 7.965l-2.898-.777M13.95 4.05l-2.122 2.122m-5.657 5.656l-2.12 2.122" />
</svg>
</span>
</div>
<div class="space-y-2 md:flex-1 md:flex md:flex-col md:justify-between lg:space-y-4">
<div class="space-y-1">
<p class="text-sm leading-6 font-normal text-gray-900">
Engagement
</p>
<p class="text-sm leading-5 text-gray-500">
Speak directly to your customers in a more meaningful way.
</p>
</div>
</div>
</div>
</a>
<a href="#" class="-m-3 p-3 flex flex-col justify-between space-y-6 rounded-lg transition ease-in-out duration-150">
<div class="space-x-4 flex md:h-full lg:flex-col lg:space-x-0 lg:space-y-4">
<div class="flex-shrink-0">
<span class="inline-flex items-center justify-center h-10 w-10 rounded-md bg-indigo-500 text-white sm:h-12 sm:w-12">
<!-- Heroicon name: shield-check -->
<svg class="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="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
</svg>
</span>
</div>
<div class="space-y-2 md:flex-1 md:flex md:flex-col md:justify-between lg:space-y-4">
<div class="space-y-1">
<p class="text-sm leading-6 font-normal text-gray-900">
Security
</p>
<p class="text-sm leading-5 text-gray-500">
Your customer data will be safe and secure.
</p>
</div>
</div>
</div>
</a>
<a href="#" class="-m-3 p-3 flex flex-col justify-between space-y-6 rounded-lg transition ease-in-out duration-150">
<div class="space-x-4 flex md:h-full lg:flex-col lg:space-x-0 lg:space-y-4">
<div class="flex-shrink-0">
<span class="inline-flex items-center justify-center h-10 w-10 rounded-md bg-indigo-500 text-white sm:h-12 sm:w-12">
<!-- Heroicon name: view-grid -->
<svg class="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="M4 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zM14 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zM14 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z" />
</svg>
</span>
</div>
<div class="space-y-2 md:flex-1 md:flex md:flex-col md:justify-between lg:space-y-4">
<div class="space-y-1">
<p class="text-sm leading-6 font-normal text-gray-900">
Integrations
</p>
<p class="text-sm leading-5 text-gray-500">
Connect with third-party tools that you&apos;re already using.
</p>
</div>
</div>
</div>
</a>
<div class="mx-8 px-4 py-4 sm:px-6 sm:py-6 lg:px-8 lg:py-8 xl:py-12">
{{header_menu | safe}}
</div>
</div>
</div>
<!-- More menu -->
<!--
'More' flyout menu, show/hide based on flyout menu state.
Entering: "transition ease-out duration-200"
From: "opacity-0 -translate-y-1"
To: "opacity-100 translate-y-0"
Leaving: "transition ease-in duration-150"
From: "opacity-100 translate-y-0"
To: "opacity-0 -translate-y-1"
-->
<!--
Tailwind UI components require Tailwind CSS v1.8 and the @tailwindcss/ui plugin.
Read the documentation to get started: https://tailwindui.com/documentation
--><!-- This example requires Tailwind CSS v1.4.0+ -->
<!--
Flyout menu, show/hide based on flyout menu state.
Entering: "transition ease-out duration-200"
From: "opacity-0 -translate-y-1"
To: "opacity-100 translate-y-0"
Leaving: "transition ease-in duration-150"
From: "opacity-100 translate-y-0"
To: "opacity-0 -translate-y-1"
-->
<div id="menu" class="hidden absolute inset-x-0 transform shadow-lg">
<div class="bg-semi-white">
<div class="max-w-7xl mx-auto grid gap-y-6 px-4 py-6 sm:grid-cols-2 sm:gap-8 sm:px-6 sm:py-8 lg:grid-cols-4 lg:px-8 lg:py-12 xl:py-16">
<a href="#" class="-m-3 p-3 flex flex-col justify-between space-y-6 rounded-lg transition ease-in-out duration-150">
<div class="space-x-4 flex md:h-full lg:flex-col lg:space-x-0 lg:space-y-4">
<div class="flex-shrink-0">
<h3>BASICS</h3>
</div>
<div class="space-y-2 md:flex-1 md:flex md:flex-col md:justify-between lg:space-y-4">
<div class="space-y-1">
<p class="text-sm leading-6 font-normal text-gray-900">
Analytics
</p>
<p class="text-sm leading-5 text-gray-500">
Get a better understanding of where your traffic is coming from.
</p>
</div>
<p class="text-sm leading-5 font-normal text-indigo-600">
learn more &#x2192;
</p>
</div>
</div>
</a>
<a href="#" class="-m-3 p-3 flex flex-col justify-between space-y-6 rounded-lg transition ease-in-out duration-150">
<div class="space-x-4 flex md:h-full lg:flex-col lg:space-x-0 lg:space-y-4">
<div class="flex-shrink-0">
<span class="inline-flex items-center justify-center h-10 w-10 rounded-md bg-indigo-500 text-white sm:h-12 sm:w-12">
<!-- Heroicon name: cursor-click -->
<svg class="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="M15 15l-2 5L9 9l11 4-5 2zm0 0l5 5M7.188 2.239l.777 2.897M5.136 7.965l-2.898-.777M13.95 4.05l-2.122 2.122m-5.657 5.656l-2.12 2.122" />
</svg>
</span>
</div>
<div class="space-y-2 md:flex-1 md:flex md:flex-col md:justify-between lg:space-y-4">
<div class="space-y-1">
<p class="text-sm leading-6 font-normal text-gray-900">
Engagement
</p>
<p class="text-sm leading-5 text-gray-500">
Speak directly to your customers in a more meaningful way.
</p>
</div>
<p class="text-sm leading-5 font-normal text-indigo-600">
learn more &#x2192;
</p>
</div>
</div>
</a>
<a href="#" class="-m-3 p-3 flex flex-col justify-between space-y-6 rounded-lg transition ease-in-out duration-150">
<div class="space-x-4 flex md:h-full lg:flex-col lg:space-x-0 lg:space-y-4">
<div class="flex-shrink-0">
<span class="inline-flex items-center justify-center h-10 w-10 rounded-md bg-indigo-500 text-white sm:h-12 sm:w-12">
<!-- Heroicon name: shield-check -->
<svg class="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="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
</svg>
</span>
</div>
<div class="space-y-2 md:flex-1 md:flex md:flex-col md:justify-between lg:space-y-4">
<div class="space-y-1">
<p class="text-sm leading-6 font-normal text-gray-900">
Security
</p>
<p class="text-sm leading-5 text-gray-500">
Your customer data will be safe and secure.
</p>
</div>
<p class="text-sm leading-5 font-normal text-indigo-600">
learn more &#x2192;
</p>
</div>
</div>
</a>
<a href="#" class="-m-3 p-3 flex flex-col justify-between space-y-6 rounded-lg hover:bg-gray-50 transition ease-in-out duration-150">
<div class="space-x-4 flex md:h-full lg:flex-col lg:space-x-0 lg:space-y-4">
<div class="flex-shrink-0">
<span class="inline-flex items-center justify-center h-10 w-10 rounded-md bg-indigo-500 text-white sm:h-12 sm:w-12">
<!-- Heroicon name: view-grid -->
<svg class="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="M4 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zM14 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zM14 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z" />
</svg>
</span>
</div>
<div class="space-y-2 md:flex-1 md:flex md:flex-col md:justify-between lg:space-y-4">
<div class="space-y-1">
<p class="text-sm leading-6 font-normal text-gray-900">
Integrations
</p>
<p class="text-sm leading-5 text-gray-500">
Connect with third-party tools that you&apos;re already using.
</p>
</div>
<p class="text-sm leading-5 font-normal text-indigo-600">
learn more &#x2192;
</p>
</div>
</div>
</a>
</div>
</div>
</div>
</div>
{% endif %}
{% endfor %}
<!--
Mobile menu, show/hide based on mobile menu state.

View File

@@ -1,23 +0,0 @@
{%- set respSizes = [600, 900, 1200, 1500] -%}
{%- set initSrc = resize_image(path=path, width=600, op='fit_width') -%}
<div class="img bg-black dark:bg-blue-800">
<img
class="lazy"
aspect-ratio="{{ width }} / {{ height }}"
sizes="(min-width: 1024px) 100vw, 50vw"
src="{{ initSrc.url }}"
srcset="
{% for size in respSizes -%}
{%- if size <= width -%}
{%- set imgSrcset = resize_image(path=path, width=size, op='fit_width') -%}
{{ imgSrcset.url }} {{ size }}w
{%- if not loop.last -%}, {% endif -%}
{%- endif -%}
{%- endfor -%}
"
alt="{{ alt }}"
width="{{ width }}"
height="{{ height }}"
loading="lazy"
/>
</div>

View File

@@ -0,0 +1,14 @@
{% set columns = body | split(pat="|||") %}
{% set classes = "relative mt-12 lg:mt-24 flex flex-col lg:flex-row m-8 sm:m-12 md:m-16 lg:m-20 items-center" %}
{% if isLean %}
{% set classes = "relative flex flex-col lg:flex-row items-baseline" %}
{% endif %}
<div class="{{classes}}">
{% for column in columns%}
<div class="flex-1 lg:mx-8">
{{ column }}
{% endfor %}
</div>
</div>