add infobox

Gemfile.lock

@@ -73,6 +73,7 @@ DEPENDENCIES
   jekyll-mastodon_webfinger (~> 1.0)
   jekyll-paginate
   jekyll-sitemap
+  kramdown-parser-gfm
   webrick
 
 BUNDLED WITH

_data/social-media.yml

@@ -6,16 +6,16 @@ mastodon:
   rel: "me"
   footer: true
   logo: "Mastodon_logo.png"
-pixelfed:
+instagram:
   id: "nyansen"
-  href: "https://pixel.elbmatsch.de/"
+  href: "https://instagram.com/nyansen"
-  link: "Pixelfed"
+  link: "Instagram"
-  title: "Mein Pixelfed Account"
+  title: "Mein Instagram Account"
-  rel: "me"
+  rel: "nofollow"
   footer: true
-  logo: "Pixelfed_logo.png"
+  logo: "Instagram_logo.png"
 threema:
-  id: PMUWTKDP
+  id: "PMUWTKDP"
   href: "https://threema.id/PMUWTKDP"
   link: "Threema"
   title: "Threema ID: PMUWTKDP"
@@ -23,7 +23,7 @@ threema:
   footer: false
   logo: "threema_logo.png"
 telegram:
-  id: nyansen
+  id: "nyansen"
   href: "https://t.me/nyansen"
   link: "Telegram"
   title: "Telegram link"
@@ -46,14 +46,6 @@ github:
   rel: "nofollow"
   footer: true
   logo: "GitHub_logo.png"
-instagram:
-  id: "nyansen"
-  href: "https://instagram.com/"
-  link: "Instagram"
-  title: "Mein Instagram Account"
-  rel: "nofollow"
-  footer: true
-  logo: "Instagram_logo.png"
 steam:
   id: "nyansen"
   href: "https://steamcommunity.com/id/nyansen/"
@@ -62,3 +54,11 @@ steam:
   rel: "nofollow"
   footer: false
   logo: "Steam_logo.png"
+linkedIn:
+  id: "Linkedin"
+  href: "https://linkedin.com/in/nicojensen"
+  link: "Linkedin"
+  title: "Mein Linkedin Account"
+  rel: "nofollow"
+  footer: true
+  logo: "linkedin_logo.png"

_includes/blogposts.html

@@ -0,0 +1,54 @@
+<div id="post-container">
+    {% for post in paginator.posts %}
+        <article class="post">
+            <header class="post-header wrapper">
+                <div class="post-title">
+                    <h2 class="post-title">
+                        {% if post.external-url %}
+                            <a href="{{post.external-url}}">{{post.title}}</a>
+                        {% else %}
+                            <a href="{{post.url}}" rel="bookmark">{{post.title}}</a>
+                        {% endif %}
+                    </h2>
+                    <p class="public-date">vom <time class="post-date" datetime="{{post.date | date: "%Y-%m-%d"}}">
+                            {% assign m = post.date | date: "%-m" %}
+                            {{ post.date | date: "%d" }}
+                            {% case m %}
+                                {% when '1' %}Januar
+                                {% when '2' %}Februar
+                                {% when '3' %}M&auml;rz
+                                {% when '4' %}April
+                                {% when '5' %}Mai
+                                {% when '6' %}Juni
+                                {% when '7' %}Juli
+                                {% when '8' %}August
+                                {% when '9' %}September
+                                {% when '10' %}Oktober
+                                {% when '11' %}November
+                                {% when '12' %}Dezember
+                            {% endcase %}
+                            {{ post.date | date: "%Y" }}</time>
+                        {% if post.external-url %}
+                            &nbsp;|&nbsp;<a href="{{post.url}}">Post Link</a>
+                        {% endif %}
+                    </p>
+                </div>
+            </header>
+            <div class="post-content wrapper">
+                {{post.content}}
+            </div>
+            {% if post.layout == 'review' %}
+                <div class="reviewRating wrapper">
+                    {% for counter in (1..5) %} 
+                        {% if counter <= post.rating %}
+                            <span class="ratingSet">&#9733;</span>
+                        {% else %}
+                            <span class="ratingUnset">&#9733;</span>
+                        {% endif %}
+                    {% endfor %}
+                </div>
+            {% endif %}
+        </article>
+    {% endfor %}
+</div>
+{% include pagination.html %}

_includes/htmlheader.html

@@ -0,0 +1,47 @@
+{% capture title %}
+  {% if page.title and page.title != "Home" %}
+    {{ page.title }} · {{ site.title }}
+  {% else %}
+    {{ site.title }}
+  {% endif %}
+{% endcapture %}
+
+{% capture description %}
+  {% if page.date %}
+    {{ page.date | date: "%d.%m.%Y" }}
+  {% endif %}
+  {% if page.location %}
+     / {{ page.location }}
+  {% endif %}
+{% endcapture %}
+{% if description == "" %}
+  {% assign description = site.description %}
+{% endif %}
+
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="referrer" content="no-referrer">
+
+  <title>{{ title }}</title>
+  <meta name="description" content="{{ description }}">
+
+  <link rel="stylesheet" href="{{ "/assets/css/styles.css" | prepend: site.baseurl }}">
+  <link rel="canonical" href="{{ page.url | replace:'index.html','' | prepend: site.baseurl | prepend: site.url }}">
+
+  <meta property="og:title" content="{{ title }}">
+  {% if description %}<meta property="og:description" content="{{ description }}">{% endif %}
+  <meta property="og:url" content="{{ page.url | replace:'index.html','' | prepend: site.baseurl | prepend: site.url }}">
+  <meta property="og:type" content="webseite">
+
+  <meta name="twitter:card" content="summary">
+  <meta name="twitter:site" content="@_nyansen">
+  <meta name="twitter:domain" content="nicojensen.de">
+  <meta name="twitter:creator" content="@_mnyansen">
+  <meta name="twitter:title" content="{{title}}">
+  <meta name="twitter:card" content="summary_large_image">
+
+  <link rel="home" type="application/rss+xml" href="/feed.xml" />
+  <link rel="shortcut icon" type="image/png" href="/assets/images/logo.png"/>
+</head>

_includes/note.html

@@ -0,0 +1,12 @@
+{% if include.type == "note" or include.type == "info" or include.type == "danger" or include.type == "warning" %}
+<div class="alert alert-{{ include.type }}">
+    {% if include.type == "note" %}<span class="material-icons alert-note-icon">info</span><b>Info:&nbsp;</b>
+    {% elsif include.type == "info" %}<span class="material-icons alert-note-icon">check_box</span><b>Tip:&nbsp;</b>
+    {% elsif include.type == "danger" %}<span class="material-icons alert-note-icon">warning</span><b>Warnung:&nbsp;</b>
+    {% elsif include.type == "warning" %}<span class="material-icons alert-note-icon">error</span><b>Wichtig:&nbsp;</b>
+    {% endif %}
+    {{ include.content }}
+</div>
+{% else %}
+<div class="alert alert-info"><span class="material-icons alert-note-icon">info</span><b>Info:&nbsp;</b>{{ include.content }}</div>
+{% endif %}

_posts/2024-02-15-app-defaults.md

@@ -8,7 +8,7 @@ featured-image: mobile_device.jpg
 featured-image-alt: a picture of an old iphone.
 ---
 
-**This is followed by the English version.**
+{% include note.html content="This is followed by the English version." type="note" %}
 
 Da will ich mir Inspiration holen und stoße über den Blog von [Jens Comiotto-Mayer](https://coma.photography/blog/) darauf, dass es ein _Duel of the Defaults!_ gibt, was die Frage nach unseren Standardapps stellt. Geile Idee! Ich liebe es zu sehen, was andere so für Apps nutzen. So stoße ich immer wieder auf tolle neue Apps. Da mache ich sofort mit!
 

_sass/fonts.scss

@@ -78,6 +78,40 @@
             url('../fonts/open-sans-v15-latin-800.svg#OpenSans') format('svg'); /* Legacy iOS */
 }
 
+@font-face {
+      font-family: 'Material Icons';
+      font-style: normal;
+      font-weight: 400;
+      src: local('Material Icons'),
+            local('MaterialIcons-Regular'),
+            url(../fonts/MaterialIconsOutlined-Regular.otf) format('truetype');
+      }
+
+      .material-icons {
+            font-family: 'Material Icons';
+            font-weight: normal;
+            font-style: normal;
+            font-size: 24px;  /* Preferred icon size */
+            display: inline-block;
+            line-height: 1;
+            text-transform: none;
+            letter-spacing: normal;
+            word-wrap: normal;
+            white-space: nowrap;
+            direction: ltr;
+            
+            /* Support for all WebKit browsers. */
+            -webkit-font-smoothing: antialiased;
+            /* Support for Safari and Chrome. */
+            text-rendering: optimizeLegibility;
+            
+            /* Support for Firefox. */
+            -moz-osx-font-smoothing: grayscale;
+            
+            /* Support for IE. */
+            font-feature-settings: 'liga';
+      }
+
 .entypo { font-family: entypo; }
 
 h1, h2, h3, h4, h5, h6 {

_sass/main.scss

@@ -83,6 +83,10 @@ a:hover {
   background: url(/assets/images/background/moeve.jpg) no-repeat -1300px -550px;
 }
 
+.content {
+  padding-top: 10rem;
+}
+
 .post:not(:first-child) {
   margin-top: 3.6rem;
 }
@@ -141,6 +145,57 @@ blockquote {
   border-left: #FFC0CB 0.4rem solid;
 }
 
+.alert {
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  margin: 1.75rem 0.4rem 1.75rem 0.4rem;
+  padding: 1.25rem 0 1.25rem 1.25rem;
+}
+
+.alert-note {
+  color: #3c763d;
+  background-color: #dff0d8;
+  border-left-width: 0.3125rem;
+  border-radius: 0.3125rem 0.1875rem 0.1875rem 0.3125rem;
+  border-color: #d6e9c6;
+  border-left: #d6e9c6 0.4rem solid;
+}
+
+.alert-note-icon {
+  display: block;
+  float: left;
+  padding-top: 0.20rem;
+  padding-right: 1rem;
+  font-family: 'Material Icons';
+}
+
+.alert-info {
+  color: #31708f;
+  background-color: #d9edf7;
+  border-left-width: 0.3125rem;
+  border-radius: 0.3125rem 0.1875rem 0.1875rem 0.3125rem;
+  border-color: #bce8f1;
+  border-left: #bce8f1 0.4rem solid;
+}
+
+.alert-danger {
+  color: #a94442;
+  background-color: #f2dede;
+  border-left-width: 0.3125rem;
+  border-radius: 0.3125rem 0.1875rem 0.1875rem 0.3125rem;
+  border-color: #ebccd1;
+  border-left: #ebccd1 0.4rem solid;
+}
+
+.alert-warning {
+  color: #3A4145;
+  background-color: #fcf8e3;
+  border-left-width: 0.3125rem;
+  border-radius: 0.3125rem 0.1875rem 0.1875rem 0.3125rem;
+  border-color: #faebcc;
+  border-left: #faebcc 0.4rem solid;
+}
+
 .post .post-content {
   padding-bottom: 0.1rem;
 }

blog/index.html

@@ -0,0 +1,6 @@
+---
+layout: default
+title: Blog
+---
+
+<main id="posts">{% include blogposts.html %}</main>

kontakt.html

@@ -2,27 +2,38 @@
 layout: default
 title: Kontakt
 ---
+
 <main id="post-container" class="single-post">
-    <article class="post" id="contact">
+  <article class="post" id="contact">
-        <header class="post-header wrapper">
+    <header class="post-header wrapper">
-            <h2 class="post-title">Kontakt</h2>
+      <h2 class="post-title">Kontakt</h2>
-            <p>Wenn Du Anregungen und / oder Kritiken zu mir oder meinen Betr&auml;gen hast oder einfach nur etwas Lob loswerden willst, kannst Du dies am besten auf eins meiner Social-Media Accounts machen:</p>
+      <p>
-        </header>
+        Wenn Du Anregungen und / oder Kritiken zu mir oder meinen Betr&auml;gen
-        <div class="post-content wrapper">
+        hast oder einfach nur etwas Lob loswerden willst, kannst Du dies am
-            {% if site.data.social-media %}
+        besten auf eins meiner Social-Media Accounts machen:
-                <div id="social-media-block ">
+      </p>
-                    {% assign sm = site.data.social-media %}
+    </header>
-                    {% for entry in sm%}
+    <div class="post-content wrapper">
-                        {% assign key = entry | first %}         
+      {% if site.data.social-media %}
-                        {% if sm[key].id %}
+      <div id="social-media-block ">
-                            <div class="smbtn">
+        {% assign sm = site.data.social-media %} {% for entry in sm%} {% assign
-                                <a href="{{sm[key].href}}" title="{{sm[key].title}}" target="_blank" rel="noopener {{sm[key].rel}}">{{sm[key].link}}</a>
+        key = entry | first %} {% if sm[key].id %}
-                                {% if sm[key].logo != "" %}<img src="/assets/images/sm_logos/{{sm[key].logo}}" alt="{{sm[key].title}} Logo">{% endif %}
+        <div class="smbtn">
-                            </div>
+          <a
-                        {% endif %}
+            href="{{sm[key].href}}"
-                    {% endfor %}
+            title="{{sm[key].title}}"
-                </div>
+            target="_blank"
-            {% endif %}
+            rel="noopener {{sm[key].rel}}"
+            >{{sm[key].link}}</a
+          >
+          {% if sm[key].logo != "" %}<img
+            src="/assets/images/sm_logos/{{sm[key].logo}}"
+            alt="{{sm[key].title}} Logo"
+          />{% endif %}
         </div>
-    </article>
+        {% endif %} {% endfor %}
-</main>
+      </div>
+      {% endif %}
+    </div>
+  </article>
+</main>