ourworld_web/www_ourverse
21
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases 1 Wiki Activity

easier example

Browse Source
This commit is contained in:
despiegk
2022-07-23 10:09:10 +02:00
parent 1202f807ef
commit 5ee6f8e0ff
92 changed files with 4469 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

65
templates/shortcodes/admonition.html Normal file
View File

@@ -0,0 +1,65 @@
<!-- admonition shortcode for adding admonition in md-->
{% set classes = "" %}
{% set first_line = body | split(pat="\n") | first %}
{% set parsed_first_line = first_line | split(pat=" ") %}
{% set admonition = parsed_first_line | first %}
{% set style = "" %}
{% set content = body | split(pat="\n") | slice(start=2) | join(sep="\n") %}
<!-- sets admonition type depending on qualifiers and modifiers
hides content if doesn't adhere to admonition formatting -->
{% if admonition == "!!!" %}
{% set classes = "admonition" %}
{% elif admonition == "???" %}
{% set style = "collapsible closed" %}
{% set classes = "admonition" %}
{% elif admonition == "???+" %}
{% set style = "collapsible open" %}
{% set classes = "admonition" %}
{% else %}
{% set classes = "hidden" %}
{% endif %}
{% if "inline end" in first_line %}
{% set classes = classes ~ " inline end" %}
{% set parsed_first_line = parsed_first_line | slice(end=-2)%}
{% elif "inline" in first_line %}
{% set classes = classes ~ " inline" %}
{% set parsed_first_line = parsed_first_line | slice(end=-1)%}
{% endif %}
{% if classes != "hidden"%}
{% if parsed_first_line[1] %}
{% set classes = classes ~ " " ~ parsed_first_line[1] %}
{% endif %}
{% if parsed_first_line[2] %}
{% if not parsed_first_line[2] == '""' %}
{% set title = parsed_first_line | slice(start=2) | join(sep=" ") %}
{% endif %}
{% else %}
{% if parsed_first_line[1] %}
{% set title = parsed_first_line[1] | title %}
{% endif %}
{% endif %}
{% endif %}
{% if "collapsible" in style %}
<details class="{{classes}}"
{% if "open" in style %} {{ "open='open'" }} {% endif %}>
{% if title %}
<summary class="admonition-title">{{ title | trim_start_matches(pat='"') | trim_end_matches(pat='"') }}</summary>
<p>{{ content }}</p>
{% endif %}
</details>
{% else %}
<div class="{{classes}}">
{% if title %}
<div class="admonition-title">{{ title | trim_start_matches(pat='"') | trim_end_matches(pat='"') }}</div>
{% endif %}
<p>{{ content }}</p>
</div>
{% endif %}

5
templates/shortcodes/button.html Normal file
View File

@@ -0,0 +1,5 @@
{% set path = body | split(pat="href=") | slice(start=1) | first | split(pat=">") | first | trim_start_matches(pat='"') | trim_end_matches(pat='"') %}
<button onclick="window.location='{{path}}'" class="border-transparent flex flex-col border-2 w-full items-start rounded h-16 md:h-24 transition hover:first:text-gray-500 hover:border-stone-200 hover:bg-stone-100 p-2 text-left">
{{ body | trim_start_matches(pat="<p>") | safe}}
</button>

87
templates/shortcodes/grid_stats.html Normal file
View File

@@ -0,0 +1,87 @@
{% set styles = "background-image: url('images/grid_map.png');" %}
{% set data = load_data(url="https://explorer.threefold.io/api/stats", required=false, format="json") %}
{% set capacity = data.hru + data.sru / 1000 %}
{% set nodes = data.onlinenodes %}
{% set countries = data.countries %}
{% set cores = data.cru %}
<section class="px-2 h-auto bg-center bg-cover bg-no-repeat" style="{{styles}}">
<div class="flex flex-wrap lg:p-12 text-center -mx-auto">
<div class="text-center rounded lg:px-6 mt-10 lg:mt-0 mx-auto">
{{body | markdown | safe }}
<div class="my-10 grid lg:grid-cols-3 lg:gap-8">
<div class="..."></div>
<!-- capacity -->
<div class="leading-none font-extrabold text-5xl">
{{ capacity / 1000000 | round(precision=2) }}PB
<span class="block text-3xl uppercase">capacity</span>
</div>
<div class="..."></div>
<!-- Nodes -->
<div class="
mx-auto
rounded-full
h-32
w-32
lg:h-60 lg:w-60
inline-flex
items-center
justify-center
bg-green
my-4
">
<div class="leading-none font-extrabold md:text-6xl">
{{ nodes }}
<span class="block md:text-2xl uppercase">nodes</span>
</div>
</div>
<div class="hidden md:block"></div>
<!-- countries -->
<div class="
mx-auto
rounded-full
h-32
w-32
lg:h-60 lg:w-60
inline-flex
items-center
justify-center
bg-pink
">
<div class="leading-none font-extrabold md:text-6xl">
{{ countries }}
<span class="block md:text-2xl uppercase">countries</span>
</div>
</div>
</div>
<div class="..."></div>
<!-- cores -->
<div class="leading-none font-extrabold text-5xl">
{{ cores | num_format }}
<span class="block text-2xl uppercase">cores</span>
</div>
</div>
</div>
</section>
<style>
dd {
display: inline-block;
margin: auto;
border-radius: 50%;
line-height: 100px;
}
.bg-green {
background-color: #70dfc9;
}
.bg-pink {
background-color: #ea1ff7;
}
</style>

44
templates/shortcodes/menu.html Normal file
View File

@@ -0,0 +1,44 @@
<!-- row shortcode
Shortcode used in markdown for the creation of mobile compatible vertical rows
Divides markdown into columns by splitting content using column identifier "|||"
Creates equal width blocks in a flex row.
Parameters:
- style:
- lean: if style is lean, the row doesn't have outer margins
- bgPath: if bgPath is passed, the row has a full width background
-->
{% set columns = body | safe | markdown | split(pat="|||") %}
<!-- aligns columns depending on col number-->
{% set classes = "relative flex flex-col lg:flex-row items-baseline -mx-8 sm:-mx-12 lg:-mx-12 xl:-mx-8" %}
{% set column_classes = "flex-1 m-2 lg:m-4" %}
<!-- makes row full screen width and adds background img -->
<div class="{{classes}}">
{% for column in columns%}
<!-- Hides empty columns if displayed vertically in small screen -->
{% if column | as_str | length < 10 %}
<div class="hidden md:block flex-1 md:mb-0 md:mx-8 sm:flex-1">
{{column | split(pat="{% button() %}") | slice(end=1)}}
{% for button in column | split(pat="{% button() %}") | slice(start=1) | join(sep="") | split(pat="{%% end %%}") | slice(end=-1) %}
{% set body = button %}
{% include "shortcodes/button.html" %}
{% endfor %}
</div>
{% else %}
<div class="{{column_classes}}">
{{column | split(pat="{% button() %}") | slice(end=1) | first | safe}}
<hr class="border-t-2 mt-2">
<br/>
{% for button in column | split(pat="{% button() %}") | slice(start=1) | join(sep="") | split(pat="{%% end %%}") | slice(end=-1) %}
{% set body = button %}
{% include "shortcodes/button.html" %}
{% endfor %}
</div>
{% endif %}
{% endfor %}
</div>

3
templates/shortcodes/mermaid.html Normal file
View File

@@ -0,0 +1,3 @@
<div class="mermaid">
{{ body }}
</div>

111
templates/shortcodes/row.html Normal file
View File

@@ -0,0 +1,111 @@
<!-- row shortcode
Shortcode used in markdown for the creation of mobile compatible vertical rows
Divides markdown into columns by splitting content using column identifier "|||"
Creates equal width blocks in a flex row.
Parameters:
- style:
- lean: if style is lean, the row doesn't have outer margins
- bgPath: if bgPath is passed, the row has a full width background
-->
{% set columns = body | safe | markdown | split(pat="|||") %}
{% set row_class = "relative pt-12 flex flex-col sm:grid sm:grid-cols-2 sm:gap-10 md:flex md:flex-row md:py-4 lg:py-8"%}
<!-- aligns columns depending on col number-->
{% if 2 < columns | length %}
{% set row_class = row_class ~ " lg:items-start" %}
{% else %}
{% set row_class = row_class ~ " lg:items-center" %}
{% endif %}
{% set col_class = "flex-1 mb-20 lg:mb-0 " %}
{% if style %}
{% if "center" in style %}
{% set row_class = row_class ~ " text-center items-center mx-auto justify-center " %}
{% set col_class = col_class ~ " flex-1 " %}
{% endif %}
<!-- makes row full screen width, strips margins -->
{% if "lean" in style %}
{% if "lean-left" in style %}
{% set col_class = col_class ~ "flex-1 lg:m-0 " %}
{% set row_class = row_class ~ " lg:mr-20 " %}
{% elif "lean-right" in style %}
{% set col_class = col_class ~ "flex-1 lg:m-0 " %}
{% set row_class = row_class ~ " lg:ml-20 " %}
{% else %}
{% set col_class = col_class ~ "flex-1 lg:m-0 " %}
{% endif %}
{% else %}
{% set row_class = row_class ~ " mx-8 " %}
{% set col_class = col_class ~ " lg:mx-8 " %}
{% endif %}
<!-- makes row semi-full screen width, strips margins -->
{% if "between" in style %}
{% set row_class = row_class ~ " lg:max-w-6xl " %}
{% elif "moderate" in style %}
{% set row_class = row_class ~ " lg:m-20 " %}
{% endif %}
<!-- makes row full screen width, strips margins -->
{% if "narrow" in style %}
{% set row_class = row_class ~ " lg:max-w-3xl " %}
{% elif "tight" in style %}
{% set row_class = row_class ~ " lg:max-w-sm " %}
{% elif "moderate" in style %}
{% set row_class = row_class ~ " lg:m-20 " %}
{% endif %}
{% if "invert-color" in style %}
{% set row_class = row_class ~ " text-white " %}
{% endif %}
{% else %}
{% set row_class = row_class ~ " mx-12 " %}
{% endif %}
{% set anchor_link = ""%}
{% if anchor %}
{% set anchor_link = anchor %}
{% endif %}
<!-- makes row full screen width and adds background img -->
{% set styles = "" %}
{% if bgPath %}
{% set styles = "background: url('" ~ bgPath ~ "'); background-size: cover" %}
{% endif %}
{% if bgColor %}
{% set styles = "background-color: " ~ bgColor ~ "; background-size: cover" %}
{% endif %}
<div id="{{anchor_link}}" class="w-screen -mx-8 sm:-mx-12 md:-mx-16 lg:-mx-20 justify-center flex" style="{{styles}}">
<div class="{{row_class}}">
{% for column in columns%}
<!-- Hides empty columns if displayed vertically in small screen -->
{% if column | as_str | length < 10 %}
<div class="hidden md:block flex-1 md:mb-0 md:mx-8 sm:flex-1">
{{ column | safe }}
</div>
{% else %}
<div class="{{col_class}}">
<!-- handles mermaid markdown content display -->
{% if "{% mermaid() %}" in column %}
{% set mermaid_section = column | safe | markdown | split(pat="{% mermaid() %}") %}
{% set mermaid_content = mermaid_section[1] | striptags | replace(from="–", to="--")%}
<div class="mermaid">
{{mermaid_content | safe }}
</div>
{% else %}
{{ column | safe }}
{% endif %}
</div>
{% endif %}
{% endfor %}
</div>
</div>

1
templates/shortcodes/space.html Normal file
View File

@@ -0,0 +1 @@
<div class="h-20 lg:h-60"></div>

79
templates/shortcodes/team_sec.html Normal file
View File

@@ -0,0 +1,79 @@
<div class="lg:my-32 flex flex-col mt-5 p-auto lg:px-40">
<h2 class="flex py-2 mx-auto uppercase font-bold lg:text-6xl">
THE TEAM
</h2>
<div class="lg:max-w-4xl text-xl text-center mb-8 mx-auto leading-relaxed">Spread across the world, our team has
built some of the world’s best Internet storage and cloud automation technologies since the ‘90s. With a strong
vision for the future, we’re now on a mission to create a peer-to-peer Internet that can host all of humanity’s
digital workloads via smart contract, removing all forms of centralization from global IT systems.</div>
<div class="flex overflow-x-scroll pb-10 scrollable">
<div class="flex flex-nowrap ml-10 mt-10">
<div class="inline-block px-3">
<div class="
box
max-w-xs
overflow-hidden
rounded-full
shadow-md
hover:shadow-xl
transition-shadow
duration-300
ease-in-out
">
<a href="https://threefold.io/people/adnan_fatayerji/" title="Adnan Fatayerji">
<img src="https://threefold.io/assets/static/adnan_fatayerji.a68c322.7ba2b95e75c9fab15be532f16ac0d644.jpg"
class="rounded-full mx-auto mt-3" alt="Adnan Fatayerji" />
</a>
</div>
</div>
</div>
</div>
</div>
<style>
.scrollable::-webkit-scrollbar {
width: 8px;
}
.scrollable::-webkit-scrollbar-track {
background: #f1f1f1;
border-radius: 20px;
}
.scrollable::-webkit-scrollbar-thumb {
background: linear-gradient(45deg, #70dfc9, #ee7bf7);
border-radius: 20px;
}
/* #70dfc9, #ee7bf7 */
.box {
position: relative;
height: 150px;
width: 150px;
}
.box::before {
content: "";
position: absolute;
top: 5px;
left: 0;
right: 0;
bottom: 0;
border-radius: 50%;
padding: 10px;
background: linear-gradient(45deg, #70dfc9, #ee7bf7);
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: destination-out;
mask-composite: exclude;
}
.box img {
filter: grayscale(100%);
height: 130px;
width: 130px;
}
.box img:hover {
filter: grayscale(0);
}
</style>