Koddemos

Varför

Min tanke är att kunna använda den här sidan för att hosta kodexempel som jag använder i mina kurser. För närvarande är materialet på ett antal olika sidor:

• Exempel för webbutveckling
• Webbserverprogrammering
• Webbutveckling

En del av materialet är i behov av uppdatering så när jag började titta på det och arbetade med en uppdaterad version av exempel för webbutveckling så kändes det som en rimlig ambition att flytta koden hit.

Hur

Det är inte första eller sista gången jag vänder mig till Eleventy-communityn för att hitta kod, exempel och ideer. Basen till koden för mina demos kommer från 11ty.rocks en sida skapad av Stephanie Eckles.

Det första exemplet som jag arbetade med är kopierat från den sidan. Jag har dock bytt ut <details> elementet för att skapa tabbar. Jag ville kunna använda tabbar för koden eftersom jag vill kunna visa html, css och javascript.

# CSS Centering

<div class="demo-centering">
    <span>Feeling Centered</span>
</div>

.demo-centering {
    display: grid;
    place-content: center;
    min-height: 30vh;
}
.demo-centering span {
    padding: .5em;
    outline: 2px solid;
}

Lösningen kombinerar en massa olika delar, på den här sidan laddas exemplet med följande kod.

{% set demo = collections.orderedDemos | getDemo("CSS Centering") %}
<article>
  <h2 id="{{ demo.data.title | slugify }}">{{ demo.data.title }}</h2>
  {{ demo.templateContent | safe }}
</article>

Vi väljer önskad demo och laddar den från collections. Det mesta har dock skett innan detta då demosar sparas som njk poster på sidan som i sin tur använder en partial för att formateras. Denna funktionalitet kommer från 5t3phs kod.

---
title: "CSS Centering"
order: 1
date: 2021-03-31
templateEngineOverride: njk, md
---

{% set description %}

**Put down the CSS centering jokes**! This modern update is often the solution you're looking for to solve your centering woes.

{% endset %}

{% set css %}
.centering {
    display: grid;
    place-content: center;
    min-height: 30vh;
}
.centering span {
    padding: .5em;
    outline: 2px solid;
}
{% endset %}

{% set javascript = false %}

{% set html %}
<div class="centering">
    <span>Feeling Centered</span>
</div>
{% endset %}

{% include "partials/components/demo/template.njk" %}

Den utökning jag har gjort ses i javascript/html delarna och formatteringen och för att se det behöver vi titta på templaten. Den här templaten är uppmärkt med en brappiljard raw taggar för att den faktiska koden ska synas, oklart om allt är rätt men här är den i alla fall. Jag är tveksam till att den går att kopiera eller att använda eftersom den är otroligt petig med whitespace, så om du är intresserad av att faktiskt använda det, kolla på demo template.

<div class="demo">

{%- if not hideDemo -%}
<style>{{- css | safe }}</style>
{%- endif -%}

{% if javascript %}
<script>{{- javascript | safe }}</script>
{%- endif -%}

{% if not hideDescription %}
{{ description | safe }}
{% endif %}

<div class="demo__code">
{% if html %}
<div id="html-{{ title | slugify }}" class="tab">

{% highlight "html" %}
{{- html | safe }}
{% endhighlight %}
</div>
{% endif %}
{% if css %}
<div id="css-{{ title | slugify }}" class="tab">

{% highlight "css" %}
{{- css | safe }}
{% endhighlight %}
</div>
{% endif %}
{% if javascript %}
<div id="js-{{ title | slugify }}" class="tab">

{% highlight "javascript" %}
{{- javascript | safe }}
{% endhighlight %}
</div>
{% endif %}

<ul class="tabs group">
{% if html %}
<li>
    <a href="#html-{{ title | slugify }}">HTML</a>
</li>
{% endif %}
{% if css %}
<li>
    <a href="#css-{{ title | slugify }}">CSS</a>
</li>
{% endif %}
{% if javascript %}
<li>
    <a href="#js-{{ title | slugify }}">Javascript</a>
</li>
{% endif %}

</div>
{%- if not hideDemo -%}
<div class="demo__playground">
{{- html | safe }}
</div>
{%- endif -%}
</div>

<style>
#html-{{ title | slugify }}:target ~ .tabs li > a[href="#html-{{ title | slugify }}"],
#css-{{ title | slugify }}:target ~ .tabs li > a[href="#css-{{ title | slugify }}"],
#js-{{ title | slugify }}:target ~ .tabs li > a[href="#js-{{ title | slugify }}"] {
    background: var(--color-dark);
    color: var(--color-light);
    border-color: var(--color-dark);
}
</style>

Ganska så rörigt, tack och lov så behöver en kanske inte vara och peta i filen. Den sista delen är kopplat till tabbarna och krävs för att styla den aktiva tabben. Tabbarna är gjorda helt med css och förlitar sig på target selectorn genom fragment länkar (#id). Detta gör även att om jag vill länka till en bit av koden så använder jag helt enkelt en fragment länk.

.tab {
    display: none;
}

.tab:target {
    display: block;
}

.tab:not(:target) {
    display: none;
}

Slutsats

Jag är hyffsat nöjd och det fungerar. Nu är det good enough och fokuset ligger på innehåll.