ybbond

My site. The main domain
Log | Files | Refs | README | LICENSE | CC-LICENSE

commit 28dd54a0ee22053191b4f537bfeb26b183280da5
parent 534d781a1cf8b9df49d4711353ec5092246f52ca
Author: Yohanes Bandung <bandungpenting@gmail.com>
Date:   Tue, 28 Apr 2020 14:54:56 +0700

feature: adjustments for the new web

Diffstat:
Dassets/colors.scss | 6------
Massets/content.scss | 29+++++++++++++++++++++++++----
Massets/styles.scss | 119++++++++++++++++++++++++++++++++++++++++++++++++-------------------------------
Aassets/variables.scss | 8++++++++
Mconfig.dev.toml | 3+++
Mconfig.toml | 7+++++--
Mcontent/_index.md | 2+-
Mcontent/posts/2020-04-05-nuphy-nutype-f1-keyboard-review.md | 2+-
Mcontent/posts/April Links.md | 1+
Mcontent/posts/February Links.md | 1+
Mcontent/posts/March Links.md | 1+
Mlayouts/_default/list.html | 12++++++++++--
Mlayouts/_default/single.html | 16++++++----------
Mlayouts/index.html | 10++++++----
Mlayouts/partials/components/tagitem.html | 4++--
Mlayouts/partials/footer/footer.html | 12++++++++----
Mlayouts/partials/head/head.html | 4++++
Alayouts/partials/head/og-metas.html | 7+++++++
Mlayouts/partials/header/header.html | 2+-
Mlayouts/partials/header/menu.html | 10+++++-----
Alayouts/partials/post/pagination.html | 22++++++++++++++++++++++
Alayouts/partials/post/summary.html | 33+++++++++++++++++++++++++++++++++
Astatic/darkToggler.js | 5+++++

23 files changed, 228 insertions(+), 88 deletions(-)

diff --git a/assets/colors.scss b/assets/colors.scss
@@ -1,5 +0,0 @@
-$color-text: #E3E0D7;
-$color-background: #242424;
-$color-red: #F9690E;
-$color-blue: #8DBFFF;
-$color-green: #79D688;-
\ No newline at end of file
diff --git a/assets/content.scss b/assets/content.scss
@@ -1,4 +1,8 @@
+@import "fonts";
+@import "variables";
+
 .content {
+  font-family: $font-text;
   width: 100%;
   pre {
     overflow: auto;
@@ -6,7 +10,7 @@
   }
   code {
     padding: 0.1em;
-    font-family: 'iA Writer Duospace', monospace;
+    font-family: $font-mono;
     font-size: 0.9em;
   }
   table {
@@ -22,13 +26,30 @@
     th {
       padding: 1em 2em;
       background-color: #333;
-      color: white;
+      color: $color-text;
     }
     tr:nth-child(even) {
-      background-color: #F1F1F1;
+      background-color: #333;
     }
     tr:hover {
-      background-color: #ddd;
+      background-color: #303030;
+    }
+  }
+  ul {
+    padding: 0;
+    li {
+      position: relative;
+      list-style: none;
+      padding-left: 20px;
+      margin-bottom: 10px;
+      &:before {
+        display: inline-block;
+        content: "- ";
+        position: absolute;
+        width: 20px;
+        color: $color-red;
+        left: 0;
+      }
     }
   }
 } 
\ No newline at end of file
diff --git a/assets/styles.scss b/assets/styles.scss
@@ -1,30 +1,48 @@
-@import "colors";
+@import "variables";
 @import "fonts";
 @import "content";
 
 html {
   background-color: $color-background;
   color: $color-text;
-  font-family: 'iA Writer Quattro S', Arial, Helvetica, sans-serif;
-  font-size: 1.1rem;
+  font-family: $font-text;
   line-height: 1.6;
 }
 
 body {
-  max-width: 700px;
+  max-width: 600px;
   margin: 0 auto;
 }
 
 h1, h2, h3, h4, h5, h6 {
   color: $color-green;
-  font-family: 'iA Writer Duospace', monospace;
+  font-family: $font-mono;
 }
 
 a {
+  text-decoration: none;
   color: $color-blue;
   &:hover {
     color: $color-red;
   }
+  .link-white {
+    color: $color-text;
+  }
+  &.full-width {
+    width: 100%;
+  }
+  &.button {
+    display: inline-block;     
+    position: relative;    
+    z-index: 1;     
+    padding: 0.3em 0.7em;
+    &:hover {
+      background-color: #303030;
+    }
+    &:first-child:not(.header__menu__list__item) {
+      margin-left: -0.5em;
+    }
+  }
 }
 
 blockquote {
@@ -39,68 +57,77 @@ blockquote {
 
 time {
   color: $color-red;
-}
-
-ul {
-  padding: 0;
-  li {
-    position: relative;
-    list-style: none;
-    padding-left: 20px;
-    margin-bottom: 10px;
-    &:before {
-      display: inline-block;
-      content: "- ";
-      position: absolute;
-      width: 20px;
-      color: $color-red;
-      left: 0;
-    }
-  }
+  font-family: $font-mono;
 }
 
 .header {
   margin-top: 1em;
   &__menu {
-    margin: 0;
-    padding: 0 0 10px;
+    margin: 0 0 10px;
     display: flex;
     overflow: auto;
     justify-content: flex-start;
     &__list {
-      & > *:first-child {
-        padding: 0 1.4em 0 0;
-        &:before {
-          content: "";
-        }
-      }
-      & > *:not(:first-child) {
-        padding-left: 0;
-        &:before {
-          padding-right: 1em;
-          content: " :: ";
-          position: relative;
-          color: $color-text;
-        }
-      }
       padding: 0;
+      margin: 0;
       display: flex;
       flex-grow: 1;
       flex-wrap: nowrap;
-      li {
-        padding: 0 1em;
-        display: inline;
+      &__item {
+        &:first-child {
+          margin-left: 0;
+        }
+        margin: 0 10px;
+        border-style: solid;
+        border-width: 1px;
       }
     }
   }
 }
 
+.main {
+  &__more {
+    padding: 1em 0;
+    text-align: right;
+  }
+}
+
+.summary {
+  &:not(&:first-child)
+  &__links {
+    padding-left: 2em;
+  }
+}
+
+.pagination {
+  border-top: dashed 2px;
+  border-bottom: dashed 2px;
+  margin: 3em auto 2em auto;
+  padding: 1em 0;
+  display: flex;
+  justify-content: space-around;
+  &__item {
+    padding: 0 30px;
+    @media (max-width: 600px) {
+      padding: 0 10px;
+    }
+    &__left {
+      flex: 1;
+      text-align: left;
+    }
+    &__right {
+      flex: 1;
+      text-align: right;
+    }
+  }
+}
+
 .taglist {
   margin: 0;
   padding: 0;
-  li {
-    display: inline;
-  }
+}
+.tagitem {
+  font-family: $font-mono;
 }
 
 .footer {
diff --git a/assets/variables.scss b/assets/variables.scss
@@ -0,0 +1,8 @@
+$color-text: #E3E0D7;
+$color-background: #242424;
+$color-red: #F9690E;
+$color-blue: #8DBFFF;
+$color-green: #79D688;
+
+$font-mono: 'iA Writer Duospace', monospace;
+$font-text: 'iA Writer Quattro S', Arial, Helvetica, sans-serif;
diff --git a/config.dev.toml b/config.dev.toml
@@ -2,6 +2,9 @@ baseURL = "https://ybbond.dev"
 languageCode = "en-us"
 title = "YBBond"
 
+[permalinks]
+  posts = "/:year/:month/:title/"
+
 [params]
   author = "Yohanes Bandung Bondowoso"
   description = "Thoughts, ideas and writings of me, Yohanes Bandung. My other site: https://ybbond.dev/"
diff --git a/config.toml b/config.toml
@@ -2,6 +2,9 @@ baseURL = "https://ybbond.dev"
 languageCode = "en-us"
 title = "YBBond"
 
+[permalinks]
+  posts = "/:year/:month/:title/"
+
 [params]
   author = "Yohanes Bandung Bondowoso"
   description = "Thoughts, ideas and writings of me, Yohanes Bandung. My other site: https://ybbond.dev/"
@@ -18,12 +21,12 @@ title = "YBBond"
 [[menu.main]]
     identifier = "home"
     name = "Home"
-    url = "/"
+    url = "https://ybbond.dev"
     weight = 8
 [[menu.main]]
     identifier = "cv"
     name = "CV"
-    url = "/cv"
+    url = "https://ybbond.dev/cv"
     weight = 9
 [[menu.main]]
     identifier = "author"
diff --git a/content/_index.md b/content/_index.md
@@ -2,7 +2,6 @@
 menu: home
 ---
 Currently work as Frontend Engineer of kumparan.com in Jakarta, Indonesia. Building it with React, React Native for Android and iOS.
-<br />
 
 Eager to learn.
 
@@ -14,3 +13,4 @@ I try to learn from everyone, and everything.
 <br />
 
 ૮ ・ﻌ・ა
+<br />
diff --git a/content/posts/2020-04-05-nuphy-nutype-f1-keyboard-review.md b/content/posts/2020-04-05-nuphy-nutype-f1-keyboard-review.md
@@ -2,7 +2,7 @@
 title: NuPhy NuType F1 Keyboard Review
 author: Yohanes Bandung Bondowoso
 tags:
-  - review #review
+  - Review #review
 date: 2020-04-05T18:23:12
 ---
 
diff --git a/content/posts/April Links.md b/content/posts/April Links.md
@@ -4,6 +4,7 @@ author: Yohanes Bandung Bondowoso
 tags:
   - Bookmarks #bookmarks
 date: 2020-05-01T00:00:01
+type: links
 draft: true
 ---
 
diff --git a/content/posts/February Links.md b/content/posts/February Links.md
@@ -4,6 +4,7 @@ author: Yohanes Bandung Bondowoso
 tags:
   - Bookmarks #bookmarks
 date: 2020-03-01T00:00:01
+type: links
 ---
 
 ## Tech
diff --git a/content/posts/March Links.md b/content/posts/March Links.md
@@ -4,6 +4,7 @@ author: Yohanes Bandung Bondowoso
 tags:
   - Bookmarks #bookmarks
 date: 2020-04-01T00:00:01
+type: links
 ---
 
 ## Tech
diff --git a/layouts/_default/list.html b/layouts/_default/list.html
@@ -1,11 +1,19 @@
 {{ define "main" }}
   {{ if or .Title .Content }}
     <div>
-      {{ with .Title }}<h1>{{ . }}</h1>{{ end }}
+      {{ with .Title }}<h2>{{ . }}</h2>{{ end }}
       {{ with .Content }}<div>{{ . }}</div>{{ end }}
     </div>
   {{ end }}
 
-  {{ range .Paginator.Pages }}
+  {{ if  eq .Type "notes" }}
+    {{ range (where .Site.RegularPages "Type" "notes") }}
+      <p>{{ .Content }}</p>
+    {{ end }}
+  {{ else }}
+    {{ range .Paginator.Pages }}
+      {{ partial "post/summary.html" . }}
+    {{ end }}
+    {{ partial "post/pagination.html" . }}
   {{ end }}
 {{ end }} 
\ No newline at end of file
diff --git a/layouts/_default/single.html b/layouts/_default/single.html
@@ -6,16 +6,12 @@
     {{ with .Params.tags }}
       <br>
       <br>
-      <p>Published on <time>{{ $date }}</time>, for story like this:</p>
-      <div>
-        <ul class="taglist">
-          {{ range . }}
-          <li>
-            {{- partial "components/tagitem.html" . -}}
-          </li>
-          {{ end }}
-        </ul>
-      </div>
+      <p>Published on <time>{{ $date }}</time>, for stories like this:</p>
+      <p class="taglist">
+        {{ range . }}
+          {{- partial "components/tagitem.html" . -}}
+        {{ end }}
+      </p>
     {{ end }}
   </article>
 {{ end }} 
\ No newline at end of file
diff --git a/layouts/index.html b/layouts/index.html
@@ -8,12 +8,14 @@
   <h2>Blog</h2>
   {{ range first 5 (where .Site.RegularPages "Type" "posts") }}
     <p>
-      <time>{{ .Date.Format "02 Jan 2006" }}</time> - 
-      <span>{{ .Title }} <a href={{ .Permalink }}>>></a></span>
+      <a href={{ .Permalink }} class="button full-width">
+        <time>{{ .Date.Format "02 Jan 2006" }}</time> - 
+        <span class="link-white">{{ .Title }}</span> »
+      </a>
     </p>
   {{ end }}
   {{ $postURL := "/posts" | absURL }}
-  <p>More Blogs <a href={{ $postURL }}>>></a></p>
+  <p class="main__more"><a href={{ $postURL }} class="button">More Blogs ⤳</a></p>
 
   <hr>
 
@@ -22,7 +24,7 @@
     <p>{{ .Content }}</p>
   {{ end }}
   {{ $notesURL := "/notes" | absURL }}
-  <p>More Notes <a href={{ $notesURL }}>>></a></p>
+  <p class="main__more"><a href={{ $notesURL }} class="button">More Notes ⤳</a></p>
 
 </article>
 
diff --git a/layouts/partials/components/tagitem.html b/layouts/partials/components/tagitem.html
@@ -1 +1 @@
-<a class="tagitem" href="{{ "/tags/" | relLangURL }}{{ . | urlize }}">#{{ . }}</a>-
\ No newline at end of file
+<a class="tagitem button" href="{{ "/tags/" | relLangURL }}{{ . | urlize }}">#{{ . }}</a>+
\ No newline at end of file
diff --git a/layouts/partials/footer/footer.html b/layouts/partials/footer/footer.html
@@ -1,12 +1,16 @@
 {{ $url := "/index.xml" | absURL }}
 <div class="footer__nav">
   <p class="footer__nav__left">
-    <a href={{ .Site.BaseURL }}> << Back to Home</a>
+    {{ if not .IsHome }}
+      <a class="button" href={{ .Site.BaseURL }}>
+        « Back to Home
+      </a>
+    {{ end }}
   </p>
   <p class="footer__nav__right">
-		<a href="https://github.com/{{ .Site.Params.Github }}">GitHub</a>
-		<a href="https://twitter.com/{{ .Site.Params.Twitter }}">Twitter</a>
-		<a href={{ "index.xml" | absURL }}>RSS</a>
+		<a class="button" href="https://github.com/{{ .Site.Params.Github }}">GitHub</a>
+		<a class="button" href="https://twitter.com/{{ .Site.Params.Twitter }}">Twitter</a>
+		<a class="button" href={{ "index.xml" | absURL }}>RSS</a>
   </p>
 </div>
 <p class="footer__copyright">
diff --git a/layouts/partials/head/head.html b/layouts/partials/head/head.html
@@ -24,5 +24,9 @@
   {{ end }}
 </style>
 
+<script type="application/javascript" src="../darkToggler.js"></script>
+
 <link rel="canonical" href="{{ .Permalink }}" >
 <link rel="sitemap" href="{{ "sitemap.xml" | absURL }}" type="application/xml" />
+
+{{ partial "head/og-metas.html" . }}
diff --git a/layouts/partials/head/og-metas.html b/layouts/partials/head/og-metas.html
@@ -0,0 +1,6 @@
+<meta property="og:title" content="{{ .Params.Ogp.Title | default .Title }}">
+<meta property="og:url" content="{{ .Permalink }}">
+<meta property="og:description" content="{{if .IsHome}}{{ .Site.Params.Description }}{{else}}{{.Params.Ogp.Description | default .Description}}{{end}}">
+<meta property="og:image" content="{{ .Params.Ogp.Image | default .Params.Image.Src | default "logo.png" | absURL}}">
+<meta property="og:type" content="article">
+<meta property="og:site_name" content="{{ .Params.Ogp.Site | default .Page.Params.FacebookSite }}">+
\ No newline at end of file
diff --git a/layouts/partials/header/header.html b/layouts/partials/header/header.html
@@ -1,4 +1,4 @@
-<h1 class="header__title">Yohanes Bandung Bondowoso</h1>
+<h1 class="header__title">Yohanes Bandung Bondowoso <span class="dark-toggler"></span></h1>
 <nav class="header__menu">
   {{ partial "header/menu.html" . }}
 </nav> 
\ No newline at end of file
diff --git a/layouts/partials/header/menu.html b/layouts/partials/header/menu.html
@@ -1,8 +1,7 @@
-<ul class="header__menu__list">
+<div class="header__menu__list">
   {{ $baseURL := .Site.BaseURL }}
   {{ range .Site.Menus.main }}
     {{ $url := trim .URL "/" | absURL }}
-    <li>
       <a
         href={{ $url }}
         {{ with .Page }}
@@ -11,9 +10,10 @@
           target="_blank"
           rel="nofollow noopener noreferrer"
         {{ end }}
+        role="button"
+        class="header__menu__list__item button"
       >
         {{ .Pre }}<span>{{ .Name }}</span>
       </a>
-    </li>
   {{ end }}
-</ul>-
\ No newline at end of file
+</div>+
\ No newline at end of file
diff --git a/layouts/partials/post/pagination.html b/layouts/partials/post/pagination.html
@@ -0,0 +1,21 @@
+<nav class="pagination">
+  {{ if gt .Paginator.TotalPages 1 }}
+    {{ if .Paginator.HasNext }}
+      <a class="button pagination__item__left" role="button" href="{{ trim .Paginator.Next.URL "/" | absLangURL }}" data-rel="prefetch">
+        < Older
+      </a>
+    {{ else }}
+      <span class="pagination__item__left"></span>
+    {{ end }}
+    <span class="pagination__item">*</span>
+    {{ if .Paginator.HasPrev }}
+      <a class="button pagination__item__right" role="button" href="{{ trim .Paginator.Prev.URL "/" | absLangURL }}" data-rel="prefetch">
+        Newer >
+      </a>
+    {{ else }}
+      <span class="pagination__item__right"></span>
+    {{ end }}
+  {{ else }}
+    <span>No More Post</span>
+  {{ end }}
+</nav>+
\ No newline at end of file
diff --git a/layouts/partials/post/summary.html b/layouts/partials/post/summary.html
@@ -0,0 +1,33 @@
+<article class="summary">
+  <a href="{{ .Permalink }}"><h2 class="summary__title">{{ .Title }}</h2></a>
+  <time>{{ .Date.Format "02 Jan 2006" }}</time>
+  <span> - </span>
+  {{ range .Params.tags }}
+    {{- partial "components/tagitem.html" . -}}
+  {{ end }}
+<!--   {{ with .Params.Image.Src }}
+      <amp-img class="summary__image"
+          src="{{ . }}"
+          layout="responsive"
+          width="1280"
+          height="720"
+          object-fit="contain"
+          alt="{{ $.Title }}"></amp-img>
+  {{ end }}
+ -->
+ {{ $hell := .Type }}
+  {{ if .Params.Description }}
+    <p> {{ .Params.Description }} </p>
+      {{ else }}
+    <p>
+      {{ .Summary }}
+      {{ if .Truncated }}
+        <p>
+          <a href="{{ .Permalink }}">
+            Read more ⤳
+          </a>
+        </p>
+      {{ end }}
+    </p>
+  {{ end }}
+</article>
diff --git a/static/darkToggler.js b/static/darkToggler.js
@@ -0,0 +1,4 @@
+(function() {
+  let toggler = document.getElementsByClassName("dark-toggler");
+  toggler.innerHTML = "🌛";
+})()+
\ No newline at end of file