change projects section philosophy + fix bug with load more btn

content/de/projects.md

@@ -0,0 +1,6 @@
+---
+title: "Projekte"
+slug: "projects"
+---
+
+Hier siehst du einige meiner Projekte (Blogposts, GitHub Repos, Tools & YouTube Videos).

content/en/projects.md

@@ -0,0 +1,6 @@
+---
+title: "Projects"
+slug: "projects"
+---
+
+Here you can find some of my projects (blog posts, GitHub repos, tools & YouTube videos).

layouts/partials/projects.html

@@ -1,6 +1,12 @@
 <div id="projects" class="projects">
-    <h1 class="fade-up">{{ T "projects" }}</h1>
+    {{ with .Site.GetPage "projects" }}
-    <div class="tag-filter fade-up">
+    <div class="projects-intro fade-up">
+        <h1>{{ .Title }}</h1>
+        <p>{{ .Content }}</p>
+    </div>
+    {{ end }}
+
+    <div class="tag-filter fade-up hidden">
         {{ range .Site.Data.tags }}
         <label class="tag" for="tag-{{ .slug }}" >
             <input class="tag-checkbox" id="tag-{{ .slug }}" value="{{ .slug }}" type="checkbox" {{ if .checked }} checked {{ end }}>

static/main.js

@@ -228,15 +228,27 @@ async function loadMoreContent(wrapperSelector, amount, endpoint = "https://api.
     // just for debugging purposes
     //console.log(`children: ${wrapper.childElementCount} limit: ${amount} page: ${page}`);
 
+    const hideLoadMoreButton = () => {
+        document.querySelector(btnSelector).classList.add('hidden');
+    };
+
     // error validation -> only load more content when page num is valid
     if (page % 1 == 0){
         loader.classList.remove('hidden');
-        await showProjects('.project-list', await loadContent(endpoint, amount, page));
+        const content = await loadContent(endpoint, amount, page);
+        if(Array.isArray(content) && content.length === 0){
+            console.log("No more projects available");
+            // hide button if no more content is available
+            hideLoadMoreButton();
+        }
+        else{
+            // show projects
+            await showProjects('.project-list', content);
+        }
         loader.classList.add('hidden');
     }
     else{
         // hide button if no more content is available
-        document.querySelector(btnSelector).classList.add('hidden');
+        hideLoadMoreButton();
     }
-    
 }

static/style.css

@@ -411,8 +411,14 @@ nav.small .nav-links a:last-child:focus{
 
 /* PROJECTS */
 .projects{
+    margin-top: 30px;
     text-align: center;
-    scroll-margin-top: calc(var(--navSmallHeight) + 20px);
+    scroll-margin-top: calc(var(--navSmallHeight) + 10px);
+}
+
+.projects-intro{
+    padding: 0 10px;
+    box-sizing: border-box;
 }
 
 .tag-filter{
@@ -427,6 +433,10 @@ nav.small .nav-links a:last-child:focus{
     
 }
 
+.tag-filter.hidden{
+    display: none;
+}
+
 .tag{
     background: var(--color);
     color: var(--primary);
@@ -457,7 +467,7 @@ nav.small .nav-links a:last-child:focus{
 }
 
 .project-list{
-    padding: 20px 0;
+    padding: 10px 0 20px 0;
     display: flex;
     flex-direction: row;
     flex-wrap: wrap;