Grafische overhoal & Post sort

modified:   components/BlogList.js
	modified:   components/Header.js
	modified:   components/Layout.js
	deleted:    data/info.md
	new file:   data/over.md
	renamed:    pages/info.js -> pages/over.js
	renamed:    posts/24Jun-zabbix-prom.md -> posts/23-06-24-zabbix-prom.md
	renamed:    posts/1Jul-SELinuxMetZabbix.md -> posts/23-07-01-SELinuxMetZabbix.md
	renamed:    posts/9Jul-zabbix-ha-cluster.md -> posts/23-07-09-Zabbix-ha-cluster.md
	renamed:    posts/16Jul-rebranding-zabbix.md -> posts/23-07-16-Rebranding-zabbix.md
	renamed:    posts/21Jul-OpenSSH.md -> posts/23-07-21-OpenSSH.md
	renamed:    posts/22Jul-Permissions.md -> posts/23-07-22-Permissions.md
	renamed:    posts/24Jul-SyncRepo.md -> posts/23-07-24-SyncRepo.md
	renamed:    posts/28Jul-SystemdApps.md -> posts/23-07-28-SystemdApps.md
	renamed:    posts/31Jul-SELinux.md -> posts/23-07-31-SELinux.md
	renamed:    posts/1Aug-Documentatie.md -> posts/23-08-01-Documentatie.md
	renamed:    posts/10Aug-AWK_basis.md -> posts/23-08-10-AWK_basis.md
	renamed:    posts/16Aug-GetAGrep.md -> posts/23-08-16-GetAGrep.md
	renamed:    posts/23Aug-Git_masterclass.md -> posts/23-08-23-Git_masterclass.md
	renamed:    posts/30Aug-ZabbixBackup.md -> posts/23-08-30-ZabbixBackup.md
	renamed:    posts/6Sept-Kickstart.md -> posts/23-09-06-Kickstart.md
	renamed:    posts/27Sept-GitlabUpgrade.md -> posts/23-09-27-GitlabUpgrade.md
	renamed:    posts/4Okt-HashicorpVault.md -> posts/23-10-04-HashicorpVault.md
	renamed:    posts/8Okt-Certbot.md -> posts/23-10-08-Certbot.md
	renamed:    posts/11Okt-HashicorpVault.md -> posts/23-10-11-HashicorpVault.md
	renamed:    posts/12Okt_ACL.md -> posts/23-10-12-ACL.md
	renamed:    posts/18Okt-InABind.md -> posts/23-10-18-InABind.md
	renamed:    posts/23Okt-Autofs.md -> posts/23-10-23-Autofs.md
	renamed:    posts/25Okt-RPM.md -> posts/23-10-25-RPM.md
	renamed:    posts/26Okt-Journald.md -> posts/23-10-26-Journald.md
	modified:   styles/Info.module.css

components/BlogList.js

@@ -17,7 +17,13 @@ const BlogList = ({ allBlogs }) => {
         <ul>
             {
                 allBlogs && allBlogs.length > 1 &&
-                allBlogs.map(post => (
+                allBlogs
+                .sort((post1,post2) => {
+                    if(post1.slug < post2.slug) return 1
+                    if(post1.slug > post2.slug) return -1
+                    return 0
+                })
+                .map(post => (
                     <li key={post.slug}>
                         <Link href={{ pathname: `/blog/${post.slug}` }} className={styles.blog__link}>
                             <div className={styles.hero_image}>

components/Header.js

@@ -2,7 +2,7 @@ import Link from "next/link"
 import styles from "../styles/Header.module.css"
 
 export default function Header(props) {
-    const isInfoPage = typeof window !== "undefined" && window.location.pathname === "/info"
+    const isInfoPage = typeof window !== "undefined" && window.location.pathname === "/over"
 
     return (
         <header className={styles.header}>
@@ -15,8 +15,8 @@ export default function Header(props) {
                     <h1>{props.siteTitle}</h1>
                 </Link>
                 <div>
-                    <Link href={isInfoPage ? "/" : "/info"}>
+                    <Link href={isInfoPage ? "/" : "/over"}>
-                        <h1>{isInfoPage ? "close" : "info"}</h1>
+                        <h1>{isInfoPage ? "sluiten" : "over deze blog"}</h1>
                     </Link>
                 </div>
             </nav>

components/Layout.js

@@ -8,7 +8,7 @@ export default function Layout(props) {
           className={styles.layout}
           style={{
             backgroundColor: `${props.bgColor && props.bgColor}`,
-            color: props.pathname === "info" ? "white" : undefined
+            color: props.pathname === "over" ? "white" : undefined
           }}
       >
         <Meta

data/info.md

@@ -1,17 +0,0 @@
----
-title: info page
-background_color: '#d5d3c5'
----
-## Welkom op deze blog
-
-Bedankt voor je bezoek. Hopelijk heb je iets aan deze blog. Je kan steeds contact opnemen met mij via onderstaande platformen. Aarzel niet en neem gerust contact op!
-
-- [Github](https://github.com/winderickxeli)
-- [Gitlab](https://gitlab.com/eliwinderickx)
-- [LinkedIn](https://www.linkedin.com/in/eli-winderickx-507944223)
-
-Vriendelijke groet
-
-Eli
-
-![](/eli.jpg)

data/over.md

@@ -0,0 +1,18 @@
+---
+title: Over page
+background_color: '#d5d3c5'
+---
+## Welkom op deze blog
+
+Hier probeer ik interessante weetjes te verzamelen over de producten waarmee ik werk. Dit varieert van Red Hat producten, Zabbix en andere Linux gerelateerde producten. Met jouw vragen kan je steeds terecht op onderstaande platformen.
+
+Aarzel dus niet en neem gerust contact op!
+
+- [Gitlab](https://gitlab.com/eliwinderickx)
+- [Github](https://github.com/winderickxeli)
+- [LinkedIn](https://www.linkedin.com/in/eli-winderickx-507944223)
+
+![](/eli.jpg)
+
+Eli
+

pages/over.js

@@ -18,7 +18,7 @@ export default function Info({ frontmatter, markdownBody, title }) {
 }
 
 export async function getStaticProps() {
-  const content = await import(`../data/info.md`)
+  const content = await import(`../data/over.md`)
   const config = await import(`../data/config.json`)
 
   const data = matter(content.default)

styles/Info.module.css

@@ -13,4 +13,22 @@
     .info_blurb {
       padding: 3rem;
     }
+  }
+
+  .info_blurb img {
+    width: 75px;
+    border-radius: 50%;
+    border: solid 1px #ebebeb;
+    transition: all 0.4s;
+  }
+
+  .info_blurb img:hover {
+    border-radius: 10%;
+    border: solid 1px #ebebeb;
+    transition: all 0.4s;
+  }
+
+  .info_blurb ul {
+    list-style-type: "@ ";
+    list-style-position: inside;
   }