DevSculptor 1.0.0

data/_includes/home/post_card.html

@@ -0,0 +1,56 @@
+{%- assign post = include.post -%}
+<div class="card">
+
+    {%- if post.featured -%}
+        <div class="card-header">
+            Featured
+        </div>
+    {%- endif -%}
+
+    <div class="card-body">
+        <h3 itemprop="name" class="card-title">
+            <a itemprop="url" class="post-link" href="{{ post.url | prepend: site.url }}">
+                {{ post.title }}
+            </a>
+        </h3>
+        <hr>
+        <meta itemprop="keywords" content="{{ post.tags | join: ',' }}"/>
+        <h6 class="card-subtitle mb-2 text-body-secondary">
+            <span class="post-meta"><i class="bi bi-archive"
+                                       title="{{ locales[site.default_locale].Categories }}"></i></span>
+            {%- for cat in post.categories -%}
+                <a href="{{ site.baseurl }}/categories/#{{ cat }}"
+                   title="{{ cat }}">{{ cat }}</a>{%- unless post.categories.last == cat -%}, {%- endunless -%}
+            {%- endfor -%}
+            {%- if post.tags != empty -%}
+                <span class="post-meta"><i class="bi bi-tags" title="{{ locales[site.default_locale].Tags }}"></i></span>
+                {%- for tag in post.tags -%}
+                    <a href="{{ site.baseurl }}/tags/#{{ tag }}"
+                       title="{{ tag }}">{{ tag }}</a>{%- unless post.tags.last == tag -%}, {%- endunless -%}
+                {%- endfor -%}
+            {%- endif -%}
+            <time itemprop="datePublished" datetime="{{ post.date | date: '%Y-%m-%d' }}">
+                <span class="post-meta"><i class="bi bi-calendar-event"
+                                           title="{{ locales[site.default_locale].PostDate }}"></i></span>{{ post.date | date: "%b %-d, %Y" }}
+            </time>
+            {%- if post.last_modified_at -%}
+                <time itemprop="dateModified" datetime="{{ post.last_modified_at }}">
+                    <span class="post-meta">
+                        <i class="bi bi-pencil-square" title="{{ locales[site.default_locale].EditDate }}"></i>
+                    </span> {{ post.last_modified_at | date: "%b %-d, %Y" }}
+                </time>
+            {%- endif -%}
+        </h6>
+        <article itemprop="articleBody">
+            {%- if post.summary -%}
+                <p class="card-text">{{ post.summary }}</p>
+                <div style="text-align: right"><a href="{{ post.url | prepend: site.url }}">Read more</a></div>
+            {%- elsif post.content contains site.excerpt_separator -%}
+                <p class="card-text">{{ post.summary }}</p>
+                <div style="text-align: right"><a href="{{ post.url | prepend: site.url }}">Read more</a></div>
+            {%- else -%}
+                <p class="card-text">{{ post.content }}</p>
+            {%- endif -%}
+        </article>
+    </div>
+</div>

data/_includes/home.html

@@ -0,0 +1,28 @@
+<div class="home row">
+    <div class="post col-md-8 mx-auto" itemscope itemtype="https://schema.org/BlogPosting">
+
+        {%- assign locales = site.data.locales -%}
+        {%- assign featuredPosts = paginator.posts | where: "featured", true -%}
+        {% if featuredPosts %}
+            {%- assign featuredPosts = featuredPosts | sort: "order" -%}
+        {% endif %}
+        {%- assign otherPosts = paginator.posts | where: "featured", false -%}
+
+        {%- for fPost in featuredPosts -%}
+            {%- include home/post_card.html post=fPost -%}
+        {%- endfor -%}
+
+        <hr>
+
+        {%- for oPost in otherPosts -%}
+            {%- include home/post_card.html post=oPost -%}
+            <br>
+        {%- endfor -%}
+
+    </div>
+    <div class="vr d-none d-md-block" style="padding: 0;"></div>
+    <hr class="d-block d-md-none">
+    <div class="col-md-3 mx-auto">
+        {% include sidebar.html %}
+    </div>
+</div>

data/_includes/navigation/color-theme-switcher.html

@@ -0,0 +1,50 @@
+<div class="nav-item dropdown mx-auto">
+    <button
+      class="btn btn-link nav-link py-2 px-0 px-lg-2 dropdown-toggle d-flex align-items-center"
+      id="bd-theme"
+      type="button"
+      aria-expanded="false"
+      data-bs-toggle="dropdown"
+      data-bs-display="static"
+      aria-label="Toggle Theme (dark)"
+      title="Toggle Theme"
+    >
+      <svg class="bi my-1 theme-icon-active">
+        <use href="#moon-stars-fill"></use>
+      </svg>
+      <span class="d-lg-none ms-2" id="bd-theme-text">Toggle theme</span>
+    </button>
+    <ul
+      class="dropdown-menu dropdown-menu-end"
+      aria-labelledby="bd-theme-text"
+    >
+      <li>
+        <button
+          type="button"
+          class="dropdown-item d-flex align-items-center"
+          data-bs-theme-value="light"
+          aria-pressed="false"
+        >
+          <svg class="bi me-2 opacity-50 theme-icon">
+            <use href="#sun-fill"></use>
+          </svg>
+          Light
+          <svg class="bi ms-auto d-none"><use href="#check2"></use></svg>
+        </button>
+      </li>
+      <li>
+        <button
+          type="button"
+          class="dropdown-item d-flex align-items-center active"
+          data-bs-theme-value="dark"
+          aria-pressed="true"
+        >
+          <svg class="bi me-2 opacity-50 theme-icon">
+            <use href="#moon-stars-fill"></use>
+          </svg>
+          Dark
+          <svg class="bi ms-auto d-none"><use href="#check2"></use></svg>
+        </button>
+      </li>
+    </ul>
+  </div>

data/_includes/navigation/svg.html

@@ -0,0 +1,20 @@
+<svg xmlns="http://www.w3.org/2000/svg" style="display: none">
+  <symbol id="check2" viewBox="0 0 16 16">
+    <path
+      d="M13.854 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6.5 10.293l6.646-6.647a.5.5 0 0 1 .708 0z"
+    />
+  </symbol>
+  <symbol id="moon-stars-fill" viewBox="0 0 16 16">
+    <path
+      d="M6 .278a.768.768 0 0 1 .08.858 7.208 7.208 0 0 0-.878 3.46c0 4.021 3.278 7.277 7.318 7.277.527 0 1.04-.055 1.533-.16a.787.787 0 0 1 .81.316.733.733 0 0 1-.031.893A8.349 8.349 0 0 1 8.344 16C3.734 16 0 12.286 0 7.71 0 4.266 2.114 1.312 5.124.06A.752.752 0 0 1 6 .278z"
+    />
+    <path
+      d="M10.794 3.148a.217.217 0 0 1 .412 0l.387 1.162c.173.518.579.924 1.097 1.097l1.162.387a.217.217 0 0 1 0 .412l-1.162.387a1.734 1.734 0 0 0-1.097 1.097l-.387 1.162a.217.217 0 0 1-.412 0l-.387-1.162A1.734 1.734 0 0 0 9.31 6.593l-1.162-.387a.217.217 0 0 1 0-.412l1.162-.387a1.734 1.734 0 0 0 1.097-1.097l.387-1.162zM13.863.099a.145.145 0 0 1 .274 0l.258.774c.115.346.386.617.732.732l.774.258a.145.145 0 0 1 0 .274l-.774.258a1.156 1.156 0 0 0-.732.732l-.258.774a.145.145 0 0 1-.274 0l-.258-.774a1.156 1.156 0 0 0-.732-.732l-.774-.258a.145.145 0 0 1 0-.274l.774-.258c.346-.115.617-.386.732-.732L13.863.1z"
+    />
+  </symbol>
+  <symbol id="sun-fill" viewBox="0 0 16 16">
+    <path
+      d="M8 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8zM8 0a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 0zm0 13a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 13zm8-5a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2a.5.5 0 0 1 .5.5zM3 8a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2A.5.5 0 0 1 3 8zm10.657-5.657a.5.5 0 0 1 0 .707l-1.414 1.415a.5.5 0 1 1-.707-.708l1.414-1.414a.5.5 0 0 1 .707 0zm-9.193 9.193a.5.5 0 0 1 0 .707L3.05 13.657a.5.5 0 0 1-.707-.707l1.414-1.414a.5.5 0 0 1 .707 0zm9.193 2.121a.5.5 0 0 1-.707 0l-1.414-1.414a.5.5 0 0 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .707zM4.464 4.465a.5.5 0 0 1-.707 0L2.343 3.05a.5.5 0 1 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .708z"
+    />
+  </symbol>
+</svg>

data/_includes/navigation.html

@@ -0,0 +1,48 @@
+{%- include navigation/svg.html -%}
+{%- assign siteLogoLight = site.logo_light | prepend: site.url -%}
+{%- assign siteLogoDark = site.logo_dark | prepend: site.url -%}
+
+<nav id="navbar" class="navbar navbar-expand-lg bg-body">
+  <div class="container">
+    <a class="navbar-brand" href="#">
+      <img
+        id="site-logo"
+        src="{{ site.logo_light | prepend: site.url }}"
+        alt="DevSculptor"
+        width="200"
+      />
+    </a>
+    <button
+      class="navbar-toggler"
+      type="button"
+      data-bs-toggle="collapse"
+      data-bs-target="#navbarToggler"
+      aria-controls="navbarToggler"
+      aria-expanded="false"
+      aria-label="Toggle navigation"
+    >
+      <span class="navbar-toggler-icon"></span>
+    </button>
+    <div class="nav collapse navbar-collapse justify-content-center" id="navbarToggler">
+      <ul class="navbar-nav">
+      {%- for page in site.data.page-list.pages -%}
+      {%- if page.title != "" && page.url != "" -%}
+      <li class="nav-item">
+        <a
+          class="nav-link link-body-emphasis"
+          aria-current="page"
+          href="{{ page.url | prepend: site.url }}"
+          {%- if page.new-tab == true -%}
+          target="_blank" rel="noopener noreferrer"
+          {%- endif -%}
+          >
+          {{ page.title | replace: page.title, site.data.locales[site.default_locale].[page.title] }}
+        </a>
+      </li>
+      {%- endif -%}
+      {%- endfor -%}
+      </ul>
+    </div>
+    {%- include navigation/color-theme-switcher.html -%}
+  </div>
+</nav>

data/_includes/page_pagination.html

@@ -0,0 +1,29 @@
+<section class="pager">
+  <ul>
+    {%- if page.previous -%}
+    <li class="previous">
+      <a
+        href="{{ site.baseurl }}{{ page.previous.url }}"
+        title="{{ page.previous.title }}"
+        >&larr; {{ site.data.locales[site.default_locale].Previous }}</a
+      >
+    </li>
+    {%- else -%}
+    <li class="disabled">
+      <a>&larr; {{ site.data.locales[site.default_locale].Previous }}</a>
+    </li>
+    {%- endif -%} {%- if page.next -%}
+    <li class="next">
+      <a
+        href="{{ site.baseurl }}{{ page.next.url }}"
+        title="{{ page.next.title }}"
+        >{{ site.data.locales[site.default_locale].Next }} &rarr;</a
+      >
+    </li>
+    {%- else -%}
+    <li class="disabled">
+      <a>{{ site.data.locales[site.default_locale].Next }} &rarr;</a>
+    </li>
+    {%- endif -%}
+  </ul>
+</section>

data/_includes/projects/project-card.html

@@ -0,0 +1,73 @@
+<div id="project-{{ proj.name }}" class="card h-100 d-block">
+    <div class="card-body">
+        <h2 class="card-title">{{ proj.name }}</h2>
+        <div class="card-text">
+            {%- if proj.start-year and proj.start-year != "" -%}
+                <p><b>Project Started</b>: {{ proj.start-year }}</p>
+            {%- endif -%}
+            {%- if proj.end-year and proj.end-year != "" and proj.ongoing == false -%}
+                <p><b>Project Ended</b>: {{ proj.end-year }}</p>
+            {%- endif -%}
+            {%- if proj.ongoing and proj.ongoing == true -%}
+                <p><b>Project Ended</b>: Ongoing</p>
+            {%- endif -%}
+            {%- if proj.website != "" -%}
+                <p>
+                    <b>Project Website</b>:
+                    <a
+                            href="{{ proj.website }}"
+                            target="_blank"
+                            rel="noopener noreferrer"
+                            title="{{ proj.website }}"
+                    >
+                        {{ proj.website }}
+                    </a>
+                </p>
+            {%- endif -%}
+            {%- if proj.client and proj.client.name != '' -%}
+                <p>
+                    <b>Client</b>:
+                    {%- if proj.client.website != '' -%}
+                        <a
+                                href="{{ proj.client.website }}"
+                                target="_blank"
+                                rel="noopener noreferrer"
+                                title="{{ proj.client.website }}"
+                        >
+                            {{ proj.client.name }}
+                        </a>
+                    {%- else -%}
+                        {{ proj.client.name }}
+                    {%- endif -%}
+                </p>
+            {%- endif -%}
+            {% if proj.tags %}
+                <p>
+                    <b>Tags</b>: {{ proj.tags | array_to_sentence_string }}
+                </p>
+            {% endif %}
+            {% if proj.skills %}
+                <p><b>Skills</b>: {{ proj.skills | array_to_sentence_string }}</p>
+            {% endif %}
+            {% if proj.description %}
+                <p>
+                    <b>Description</b>: <br>
+                </p>
+                    <p>{{ proj.description }}</p>
+            {% endif %}
+            <p><b>Project Images</b>:<br></p>
+            <div class="container row">
+                {%- for image in proj.images -%}
+                    <div class="col-sm-12 col-md-6">
+                        <figure>
+                            <img alt="{{ image.title }}" src="{{ image.path | prepend: site.url }}" loading="lazy" title="{{ image.title }}">
+                            <figcaption>
+                                {{ image.caption }}
+                            </figcaption>
+                        </figure>
+                    </div>
+                {%- endfor -%}
+            </div>
+        </div>
+    </div>
+</div>

data/_includes/projects.html

@@ -0,0 +1,8 @@
+{%- assign projects = site.data.projects | where_exp: "item", "item.display == true" -%}
+{%- for proj in projects -%}
+    <div class="row gy-5">
+        <div class="col-sm-12">
+            {%- include projects/project-card.html -%}
+        </div>
+    </div>
+{%- endfor -%}

data/_includes/search/algolia.html

@@ -0,0 +1,165 @@
+<script src="https://cdn.jsdelivr.net/npm/instantsearch.js@2.6.0/dist/instantsearch.min.js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.20.1/moment.min.js"></script>
+<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/instantsearch.js@2.6.0/dist/instantsearch.min.css">
+<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/instantsearch.js@2.6.0/dist/instantsearch-theme-algolia.min.css">
+
+<script>
+    const search = instantsearch({
+        appId: '{{ site.algolia.application_id }}',
+        apiKey: '{{ site.algolia.search_only_api_key }}',
+        indexName: '{{ site.algolia.index_name }}'
+    });
+
+    function checkForContent(hit) {
+        let content = '';
+        let chipContent = '';
+        if (hit.hasOwnProperty('_snippetResult')){
+            const snippetResult = hit._snippetResult;
+            if (typeof snippetResult === 'object'){
+                for (const key of Object.keys(snippetResult)) {
+                    if (snippetResult[key].hasOwnProperty('matchLevel') && snippetResult[key].matchLevel !== 'none'){
+                        content = content.length > 0 ? content.concat('<br>', snippetResult[key].value) : snippetResult[key].value;
+                    }
+                }
+            }
+        }
+        if (hit.hasOwnProperty('_highlightResult')){
+
+            if (typeof hit._highlightResult === 'object'){
+                const highlightResult = hit._highlightResult;
+                for (const key of Object.keys(highlightResult)) {
+                    if (key === 'html'){continue}
+                    if (key === 'title'){continue}
+                    if (typeof highlightResult[key] === 'object'){
+                        if (Array.isArray(highlightResult[key])){
+                            for (const item of highlightResult[key]){
+                                if (typeof item === 'object') {
+                                    if (item.hasOwnProperty('matchLevel') && item.matchLevel !== 'none') {
+                                        chipContent = chipContent.length > 0 ? chipContent.concat(' ', `<span class="chip-item">${item.value}</span>`) : `<span><b>${key}:</b> </span><span class="chip-item">${item.value}</span>`;
+                                    }
+                                }
+                            }
+                        } else if (highlightResult[key].hasOwnProperty('matchLevel') && highlightResult[key].matchLevel !== 'none'){
+                            content = content.length > 0 ? content.concat('<br>', highlightResult[key].value) : highlightResult[key].value;
+                        }
+                    }
+                }
+            }
+        }
+        return content.length > 0 ? chipContent.length > 0 ? content.concat('<br>', chipContent) : content : '';
+    }
+
+    const hitTemplate = function(hit) {
+        // Don't show anything until the user types in the box
+        const searchBox = document.getElementById('search-searchbar').getElementsByClassName('ais-search-box--input')[0];
+        if (searchBox?.value.length <= 0){return '';}
+
+        // Only show hits if they are posts; Don't show pages.
+        if (hit.hasOwnProperty('type') && hit.type !== 'post'){return '';}
+
+        const date = hit.date ? moment.unix(hit.date).format('MMM D, YYYY') : '';
+
+        let url = `{{ site.baseurl }}${hit.url}`;
+
+        const title = hit._highlightResult.title.value;
+
+        // TODO: Add breadcrumbs once I have more content
+        // let breadcrumbs = '';
+        // if (hit._highlightResult.headings) {
+        //     breadcrumbs = hit._highlightResult.headings.map(match => {
+        //         return `<span class="post-breadcrumb">${match.value}</span>`
+        //     }).join(' > ')
+        // }
+
+        const postSummary = hit.hasOwnProperty('summary') ? hit.summary : '';
+
+        const content = checkForContent(hit);
+
+        let postTemplate = `
+            <span class="post-meta">${date}</span>
+            <h2><a class="post-link" href="${url}">${title}</a></h2>
+        `
+
+        if (postSummary.length > 0){
+            postTemplate = postTemplate.concat(' ', `<div class="post-snippet">${postSummary}</div>`)
+        }
+        if (content.length > 0){
+            postTemplate = postTemplate.concat(' ',
+                    `
+                        <h4 class="relevant-matches">Relevent matches within post:</h4>
+                        <div class="post-snippet">${content}</div>
+                    `
+            );
+        }
+
+        return `
+            <div class="post-item">
+              ${postTemplate}
+            </div>
+        `;
+    }
+
+
+    search.addWidget(
+            instantsearch.widgets.searchBox({
+                container: '#search-searchbar',
+                placeholder: 'Search through posts. Press ENTER to submit.',
+                searchAsYouType: false,
+                showReset: true,
+                showSubmit: true,
+                searchOnEnterKeyPressOnly: true,
+                showLoadingIndicator: true,
+                poweredBy: true, // This is required if you're on the free Community plan
+                cssClasses: {
+                    input: 'bg-body'
+                }
+            })
+    );
+
+    search.addWidget(
+            instantsearch.widgets.hits({
+                container: '#search-hits',
+                templates: {
+                    item: hitTemplate,
+                    empty: '<p class="info">No results were found... Try changing your query or checking out the "Categories" or "Tags" pages.</p>'
+                }
+            })
+    );
+
+    search.start();
+</script>
+
+<style>
+    .ais-search-box {
+        max-width: 100%;
+        margin-bottom: 15px;
+    }
+    .post-item {
+        margin-bottom: 30px;
+    }
+    .post-link .ais-Highlight {
+        color: #111;
+        font-style: normal;
+        text-decoration: underline;
+    }
+    .post-breadcrumbs {
+        color: #424242;
+        display: block;
+    }
+    .post-breadcrumb {
+        font-size: 18px;
+        color: #424242;
+    }
+    .post-breadcrumb .ais-Highlight {
+        font-weight: bold;
+        font-style: normal;
+    }
+    .post-snippet .ais-Highlight {
+        color: #2a7ae2;
+        font-style: normal;
+        font-weight: bold;
+    }
+    .post-snippet img {
+        display: none;
+    }
+</style>

data/_includes/sidebar/aboutme.html

@@ -0,0 +1,61 @@
+<div class="sidebar-module about container">
+    <h4>{{ site.data.locales[site.default_locale].Aboutme }}</h4>
+    {%- assign abmPhoto = site.aboutme.photo -%}
+    {%- if abmPhoto.use_github_avatar -%}
+        {%- avatar{{ site.data.social.github.username }}size = 300 -%}
+    {%- elsif abmPhoto.asset_path -%}
+        <img
+                title="{{ site.author.name }}"
+                src="{{ abmPhoto.asset_path }}"
+                alt="{{ site.author.name }}"
+        />
+    {%- elsif abmPhoto.hosted_aboutme_photo -%}
+        <img
+                title="{{ site.author.name }}"
+                src="{{ abmPhoto.hosted_aboutme_photo }}"
+                alt="{{ site.author.name }}"
+        />
+    {%- endif -%}
+    <br>
+    <p>{{ site.aboutme.text }}</p>
+    <br>
+
+    {%- if site.show_contact_info == true -%}
+
+    <section id="contact-me">
+        <p>You can contact me via the <a href="/about/#contact-me">Contact Me</a> form or any of the below options:</p>
+        <div class="row">
+            {%- if site.email != empty -%}
+                <div class="col-1 mx-3">
+                    <a href="mailto:{{ site.email }}" title="mailto: {{ site.email }}"
+                    ><i class="bi bi-envelope" style="font-size: 2rem;"></i
+                        ></a>
+                </div>
+            {%- endif -%}
+            {%- assign socials = site.data.social | where: "show_in_contact_me", "true" -%}
+            {%- if socials -%}
+                {%- for social in socials -%}
+                    <div class="col-1 mx-3">
+                        <a href="{{ social.url }}"
+                           target="_blank"
+                           rel="noopener noreferrer"
+                           title="{{ social.name | capitalize }}: {{ social.username }}"
+                        ><i class="{{ social.icon }}" style="font-size: 2rem;"></i>
+                        </a>
+                    </div>
+                {%- endfor -%}
+            {%- endif -%}
+        </div>
+        {%- endif -%}
+    </section>
+
+    <div
+            class="fb-like"
+            data-href="{{ site.url }}"
+            data-width=""
+            data-layout="button"
+            data-action="like"
+            data-size="large"
+            data-share="true"
+    ></div>
+</div>

data/_includes/sidebar/blogroll.html

@@ -0,0 +1,7 @@
+<div class="sidebar-module container">
+    <h4>{{ site.data.locales[site.default_locale].Blogroll }} <span><i class="bi bi-info-circle" title="Hover over the links below for extra details"></i></span></h4>
+    {%- for friend in site.data.blogroll -%}
+        <li><a href="{{ friend.href }}" target="_blank" rel="noopener noreferrer"
+               title="{{ friend.title }}">{{ friend.name }}</a></li>
+    {%- endfor -%}
+</div>

data/_includes/sidebar.html

@@ -0,0 +1,6 @@
+{%- if site.aboutme.include == true -%}
+    {%- include sidebar/aboutme.html -%}
+{%- endif -%}
+{%- if site.include_blogroll ==true -%}
+    {%- include sidebar/blogroll.html -%}
+{%- endif -%}

data/_includes/tags.html

@@ -0,0 +1,21 @@
+<ul class="tags-box">
+{%- if site.posts != empty -%}
+{%- for tag in site.tags -%}
+<span class="badge bg-info">
+    <a href="#{{ tag[0] }}" title="{{ tag[0] }}" rel="{{ tag[1].size }}">{{ tag[0] }}<span class="size"> {{ tag[1].size }}</span></a>
+</span>
+{%- endfor -%}
+</ul>
+
+<ul class="tags-box">
+{%- for tag in site.tags -%}
+<li  id="{{ tag[0] }}">{{ tag[0] }}</li>
+{%- for post in tag[1] -%}
+<time datetime="{{ post.date | date:"%Y-%m-%d" }}">{{ post.date | date:"%Y-%m-%d" }}</time> &raquo;
+<a href="{{ site.baseurl }}{{ post.url }}" title="{{ post.title }}">{{ post.title }}</a><br />
+{%- endfor -%}
+{%- endfor -%}
+{%- else -%}
+<span>No posts</span>
+{%- endif -%}
+</ul>

data/_includes/toc.html

@@ -0,0 +1,7 @@
+<div id="toc-sidebar" class="nav flex-column" style="width: 175px">
+    <div class="toc-header">Contents</div>
+    <div id="toc-contents"></div>
+</div>
+<span aria-expanded="false" id="tocOpenBtn" class="badge text-bg-secondary" aria-label="mobile navigation"
+      onclick="toggleTOC()">TOC<br/><span id="chevron"
+                                          style="transform: rotate(-180deg)">&raquo;</span></span>

data/_layouts/default.html

@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html data-bs-theme="dark" lang="{{ site.default_locale }}">
+
+  {%- include head.html -%}
+
+  <body>
+    <div class="container-fluid min-vh-100 d-flex flex-column justify-content-between">
+      <div class="page-content container-fluid">
+
+        {%- include navigation.html -%}
+        
+            <div class="page-content container mt-5">
+                {{ content }}
+            </div>
+        </div>
+
+        {%- include footer.html -%}
+
+    </div>
+  </body>
+</html>

data/_layouts/home.html

@@ -0,0 +1,2 @@
+
+{%- include home -%}

data/_layouts/page.html

@@ -0,0 +1,11 @@
+---
+layout: default
+---
+
+<article class="post">
+  <header class="post-header">
+    <h1 class="post-title">{{ page.title | escape }}</h1>
+  </header>
+  <br>
+  <div class="post-content">{{ content }}</div>
+</article>

data/_layouts/plain.html

@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html>
+
+{%- include head.html -%}
+
+<body>
+
+{{content}}
+
+{%- include footer.html -%}
+
+</body>
+
+</html>