Make home page sections dynamic and configurable (#14)

* Make home page sections dynamic and configurable * Fix navbar issue when no section is configured + fix next-prev navigator * Update exampleSite * Fix next-prev navigator * Make navbar brand URL context aware
2020-06-30 01:54:28 +06:00 · 2020-06-30 01:54:28 +06:00 · e2d376215a
commit e2d376215a
parent 8f99f05a98
32 changed files with 455 additions and 363 deletions
--- a/layouts/_default/list.html
+++ b/layouts/_default/list.html
@ -3,7 +3,7 @@
 {{ end }}

 {{ define "navbar" }}
-    {{ partial "navbar-2.html" (dict "baseURL" .Site.BaseURL "title" .Site.Title "hasToggleButton" true) }}
+    {{ partial "navbar-2.html" (dict "baseURL" .Site.BaseURL "title" .Site.Title "hasToggleButton" true "navBrandURL"  .Site.BaseURL ) }}
 {{ end }}

 {{ define "content" }}
--- a/layouts/_default/single.html
+++ b/layouts/_default/single.html
@ -7,7 +7,7 @@
 {{ end }}

 {{ define "navbar" }}
-    {{ partial "navbar-2.html" (dict "baseURL" .Site.BaseURL "title" .Site.Title "hasToggleButton" false) }}
+    {{ partial "navbar-2.html" (dict "baseURL" .Site.BaseURL "title" .Site.Title "hasToggleButton" false "navBrandURL"  "/posts") }}
 {{ end }}

 {{ define "content" }}
@ -44,31 +44,7 @@

    <!---Next and Previous Navigator -->
  <hr />
-  <div class="row next-prev-navigator">
-    {{ $currentPage := . }}
-    {{ range .Site.RegularPages.ByDate }}
-      {{ if eq .RelPermalink  $currentPage.RelPermalink }}
-        {{ if .Next }}
-        <div class="col-md-6 previous-article">
-          <a href="{{.Next.RelPermalink}}" class="btn btn-outline-info">
-            <span><i class="fas fa-chevron-circle-left"></i> Prev</span>
-            <br />
-            <span>{{ .Next.Title }}</span>
-          </a>
-        </div>
-        {{ end }}
-        {{ if .Prev }}
-        <div class="{{ if .Next }}col-md-6{{ else }}col-md-12{{ end }} next-article">
-          <a href="{{ .Prev.RelPermalink }}" class="btn btn-outline-info">
-            <span>Next <i class="fas fa-chevron-circle-right"></i></span>
-            <br />
-            <span>{{ .Prev.Title }}</span>
-          </a>
-        </div>
-        {{ end }}
-      {{ end }}
-    {{ end }}
-  </div>
+    {{ partial "next-prev-navigator.html" . }}
  <hr />
  <!-- Add Disqus forum  -->
  {{ if .Site.DisqusShortname }}
--- a/layouts/index.html
+++ b/layouts/index.html
@ -19,30 +19,31 @@
        {{ template "_internal/google_analytics_async.html" . }}
    {{ end }}
  </head>
-  <body data-spy="scroll" data-target="#top-navbar" data-offset="50">
+  <body data-spy="scroll" data-target="#top-navbar" data-offset="100">
+
    <!--- NAVBAR ------------------------->
    {{- partial "navbar.html" . -}}

    <!--- ADD HOME SECTION ---------------->
    {{- partial "home.html" . -}}

-    <!--- ADD ABOUT SECTION --------------->
-    {{- partial "about.html" . -}}
-
-    <!--- ADD SKILLS SECTION -------------->
-    {{- partial "skills.html" . -}}
-
-    <!--- ADD EXPERIENCE SECTION ----------->
-    {{- partial "experiences.html" . -}}
-
-    <!--- ADD PROJECT SECTION -------------->
-    {{- partial "projects.html" . -}}
-
-    <!--- ADD RECENT-POSTS SECTION --------->
-    {{- partial "recent-posts.html" . -}}
-
-    <!--- ADD ACHIEVEMENT SECTION ---------->
-    {{- partial "achievements.html" . -}}
+    <!--- ADD OPTIONAL SECTIONS ----------->
+    {{ if .Site.Data.sections }}
+      {{ $background:= "bg-white"}}
+      {{ range sort .Site.Data.sections "section.weight" }}
+        {{ if .section.enable }}
+          <div class="container-fluid section-holder d-flex {{ $background }}">
+            {{- partial (printf "%s.html" (replace (lower .section.name) " " "-")) . -}}
+          </div>
+          <!--- alter background color for next section --->
+          {{ if eq $background "bg-white" }}
+            {{ $background = "bg-dimmed" }}
+          {{ else }}
+            {{ $background = "bg-white" }}
+          {{end}}
+        {{ end }}
+      {{ end }}
+    {{ end }}

    <!--- ADD FOOTER ----------------------->
    {{- partial "footer.html" . -}}
--- a/layouts/partials/about.html
+++ b/layouts/partials/about.html
@ -1,49 +1,45 @@
-<div class="container-fluid about bg-white anchor p-md-5 d-flex" id="about">
-  <div class="container">
-    <div class="row pt-sm-2 pt-md-4 align-self-center">
-      {{ if .Site.Data.about }}
-        <!-- summery -->
-        <div class="col-md-6">
-          <h3 class="p-1">{{ .Site.Data.site.author.name }}</h3>
-          {{ if .Site.Data.about.designation }}
-          <h5 class="p-1">
-            {{ .Site.Data.about.designation }}
-            {{ if .Site.Data.about.company }}
-              at <a href="{{ .Site.Data.about.company.url }}">{{ .Site.Data.about.company.name }}</a>
-            {{ end }}
-          </h5>
-          {{ end }}
-          <p class="p-1 text-justify">
-            {{ .Site.Data.about.summary | markdownify }}
-          </p>
-          <div class="text-container ml-auto">
-            <ul class="social-link d-flex">
-              {{ range .Site.Data.about.socialLinks }}
-              <li>
-                {{ if eq .name "Email" }}
-                  <a href="mailto:{{ .url }}" target="/"><i class="{{ .icon }}"></i></a>
-                {{ else }}
-                  <a href="{{ .url }}" target="/"><i class="{{ .icon }}"></i></a>
-                {{ end }}
-              </li>
-              {{ end }}
-            </ul>
-          </div>
-          {{ if .Site.Data.about.resume }}
-          <a href="{{ .Site.Data.about.resume }}" target="#"
-            ><button class="btn btn-dark">My Resume</button></a
-          >
-          {{ end }}
-        </div>
-        <!-- soft skills circular-progressbar -->
-        <div class="col-md-6 pt-5 pl-md-4 pl-sm-3 pt-md-0">
-          <div class="row">
-            {{ range .Site.Data.about.softSkills }}
-              {{ partial "progress/soft-skills" . }}
-            {{ end }}
-          </div>
-        </div>
+<div class="container anchor p-md-5" id="about">
+  <div class="row pt-sm-2 pt-md-4 align-self-center">
+    <!-- summery -->
+    <div class="col-md-6">
+      <h3 class="p-1">{{ site.Params.author.name }}</h3>
+      {{ if .designation }}
+      <h5 class="p-1">
+        {{ .designation }}
+        {{ if .company }}
+          at <a href="{{ .company.url }}">{{ .company.name }}</a>
+        {{ end }}
+      </h5>
      {{ end }}
+      <p class="p-1 text-justify">
+        {{ .summary | markdownify }}
+      </p>
+      <div class="text-container ml-auto">
+        <ul class="social-link d-flex">
+          {{ range .socialLinks }}
+          <li>
+            {{ if eq .name "Email" }}
+              <a href="mailto:{{ .url }}" target="/"><i class="{{ .icon }}"></i></a>
+            {{ else }}
+              <a href="{{ .url }}" target="/"><i class="{{ .icon }}"></i></a>
+            {{ end }}
+          </li>
+          {{ end }}
+        </ul>
+      </div>
+      {{ if .resume }}
+      <a href="{{ .resume }}" target="#"
+        ><button class="btn btn-dark">My Resume</button></a
+      >
+      {{ end }}
+    </div>
+    <!-- soft skills circular-progressbar -->
+    <div class="col-md-6 pt-5 pl-md-4 pl-sm-3 pt-md-0">
+      <div class="row">
+        {{ range .softSkills }}
+          {{ partial "progress/soft-skills" . }}
+        {{ end }}
+      </div>
    </div>
  </div>
 </div>
--- a/layouts/partials/achievements.html
+++ b/layouts/partials/achievements.html
@ -1,16 +1,13 @@
-<div class="container-fluid achievements bg-dimmed anchor pb-5" id="achievements">
-  {{ if .Site.Data.achievements }}
-    <h1 class="text-center">Achievements</h1>
-
-    <div class="container">
-      <div class="row" id="gallery">
-      </div>
+<div class="container-fluid anchor pb-5" id="achievements">
+  <h1 class="text-center">{{ .section.name }}</h1>
+  <div class="container">
+    <div class="row" id="gallery">
    </div>
-    <!-- achievements-holder holds achievement-entry -->
-    <div class="d-none" id="achievements-holder">
-      {{ range .Site.Data.achievements.achievements }}
-        {{ partial "misc/achievement.html" . }}
-      {{ end }}
-    </div>
-  {{ end }}
+  </div>
+  <!-- achievements-holder holds achievement-entry -->
+  <div class="d-none" id="achievements-holder">
+    {{ range .achievements }}
+      {{ partial "misc/achievement.html" . }}
+    {{ end }}
+  </div>
 </div>
--- a/layouts/partials/experiences.html
+++ b/layouts/partials/experiences.html
@ -1,25 +1,23 @@
-<div class="container-fluid experiences bg-white anchor" id="experiences">
-  {{ if .Site.Data.experiences }}
-    <h1 class="text-center">Experiences</h1>
+<div class="container-fluid anchor" id="experiences">
+  <h1 class="text-center">{{ .section.name }}</h1>

-    <div class="container timeline text-justify">
-      {{ $totalExperiences:= len .Site.Data.experiences.experiences }}
-      {{ range $index,$experience:= .Site.Data.experiences.experiences }}
-        {{ if eq (mod $index 2) 0 }}
-          <div class="row align-items-center  d-flex">
-            {{ partial "experiences/vertical-line.html" $index }}
-            {{ partial "experiences/experience-info.html" $experience }}
-          </div>
-        {{else}}
-          <div class="row align-items-center justify-content-end d-flex">
-            {{ partial "experiences/experience-info.html" $experience }}
-            {{ partial "experiences/vertical-line.html" $index }}
-          </div>
-        {{ end }}
-        {{ if lt $index (sub $totalExperiences 1) }}
-          {{ partial "experiences/horizontal-line.html" $index }}
-        {{ end }}
+  <div class="container timeline text-justify">
+    {{ $totalExperiences:= len .experiences }}
+    {{ range $index,$experience:= .experiences }}
+      {{ if eq (mod $index 2) 0 }}
+        <div class="row align-items-center  d-flex">
+          {{ partial "experiences/vertical-line.html" $index }}
+          {{ partial "experiences/experience-info.html" $experience }}
+        </div>
+      {{else}}
+        <div class="row align-items-center justify-content-end d-flex">
+          {{ partial "experiences/experience-info.html" $experience }}
+          {{ partial "experiences/vertical-line.html" $index }}
+        </div>
      {{ end }}
-    </div>
-  {{ end }}
+      {{ if lt $index (sub $totalExperiences 1) }}
+        {{ partial "experiences/horizontal-line.html" $index }}
+      {{ end }}
+    {{ end }}
+  </div>
 </div>
--- a/layouts/partials/footer.html
+++ b/layouts/partials/footer.html
@ -3,20 +3,23 @@
    <div class="row text-left">
      <div class="col-md-4 col-sm-12">
        <h5>Navigation</h5>
-        {{ if .Site.Data.site }}
-          <ul>
-            {{ range .Site.Data.site.menus }}
+        {{ if .Site.Data.sections }}
+        <ul>
+          {{- range sort .Site.Data.sections "section.weight" }}
+            {{ if .section.enable }}
            <li class="nav-item">
-              <a class="smooth-scroll" href="{{ .url }}">{{ .name }}</a>
+              <a class="smooth-scroll" href="#{{ replace (lower .section.name) " " "-" }}">{{ .section.name }}</a>
            </li>
            {{ end }}
-          </ul>
+          {{- end }}
+        </ul>
        {{ end }}
+
      </div>
      <div class="col-md-4 col-sm-12">
        <h5>Contact Me</h5>
        <ul>
-          {{ range $key,$value:=.Site.Data.site.author.contactInfo }}
+          {{ range $key,$value:=.Site.Params.author.contactInfo }}
          <li><span>{{ title $key }}: </span> <span>{{ $value }}</span></li>
          {{ end }}
        </ul>
--- a/layouts/partials/home.html
+++ b/layouts/partials/home.html
@ -1,20 +1,20 @@
 <div class="container-fluid home" id="home">
  <div
    class="background container-fluid"
-    style="background-image: url('{{ if .Site.Data.site.background }}{{ .Site.Data.site.background }}{{ else }}/assets/images/default-background.jpg{{ end }}');"
+    style="background-image: url('{{ if .Site.Params.background }}{{ .Site.Params.background }}{{ else }}/assets/images/default-background.jpg{{ end }}');"
  ></div>
  <div class="container content text-center">
-    <img src="{{ if .Site.Data.site.author.image }}{{ .Site.Data.site.author.image }}{{ else }}/assets/images/default-avatar.png{{ end }}"
+    <img src="{{ if .Site.Params.author.image }}{{ .Site.Params.author.image }}{{ else }}/assets/images/default-avatar.png{{ end }}"
      class="rounded-circle mx-auto d-block img-fluid"
    />
-    <h1 class="greeting">Hi, I am {{ if .Site.Data.site.author.name }}{{ .Site.Data.site.author.name }}{{ else }}Jane Doe{{ end }}
+    <h1 class="greeting">Hi, I am {{ if .Site.Params.author.name }}{{ .Site.Params.author.name }}{{ else }}Jane Doe{{ end }}
    </h1>
    <div class="typing-carousel">
      <span id="ityped" class="ityped"></span>
      <span class="ityped-cursor"></span>
    </div>
    <ul id="typing-carousel-data">
-      {{ range .Site.Data.site.author.summary }}
+      {{ range .Site.Params.author.summary }}
      <li>{{ . }}</li>
      {{ end }}
    </ul>
--- a/layouts/partials/navbar-2.html
+++ b/layouts/partials/navbar-2.html
@ -1,6 +1,6 @@
 <nav class="navbar navbar-expand-lg top-navbar final-navbar shadow">
    <div class="container">
-      <a class="navbar-brand" href="{{ .baseURL }}">
+      <a class="navbar-brand" href="{{ .navBrandURL }}">
        <img src="/assets/images/logo.png">
        {{- .title -}}
      </a>
@ -11,7 +11,6 @@
      <div class="collapse navbar-collapse" id="top-nav-items">
        <ul class="navbar-nav ml-auto">
        </ul>
-        </ul>
      </div>
    </div>
 </nav>
--- a/layouts/partials/navbar.html
+++ b/layouts/partials/navbar.html
@ -16,15 +16,37 @@

    <div class="collapse navbar-collapse" id="top-nav-items">
      <ul class="navbar-nav ml-auto">
-        {{ range .Site.Data.site.menus }}
        <li class="nav-item">
-          <a class="nav-link smooth-scroll" href="{{ .url }}">{{ .name }}</a>
+          <a class="nav-link smooth-scroll" href="#home">Home</a>
        </li>
+        {{- if .Site.Data.sections }}
+          {{- range sort .Site.Data.sections "section.weight" }}
+            {{ if .section.showOnNavbar }}
+              <li class="nav-item">
+                <a class="nav-link smooth-scroll" href="#{{ replace (lower .section.name) " " "-" }}">{{ .section.name }}</a>
+              </li>
+            {{ end }}
+          {{- end }}
+        {{- end }}
+        {{ $hasCustomMenus:= false }}
+        {{ if and site.Params.customMenus }}
+          {{ if gt (len site.Params.customMenus) 0 }}
+            {{ $hasCustomMenus = true }}
+          {{ end }}
+        {{ end }}
+        {{ if (or site.Params.enableBlogPost $hasCustomMenus) }}
+          <div class="dropdown-divider" id="top-navbar-divider"></div>
+        {{ end }}
+        {{ if site.Params.enableBlogPost }}
+          <li class="nav-item">
+            <a class="nav-link" id="blog-link" href="/posts">Posts</a>
+          </li>
+        {{ end }}
+        {{ range site.Params.customMenus }}
+          <li class="nav-item">
+            <a class="nav-link" href="{{ .url }}" target="/">{{ .name }}</a>
+          </li>
        {{ end }}
-        <div class="dropdown-divider" id="top-navbar-divider"></div>
-        <li class="nav-item">
-          <a class="nav-link" id="blog-link" href="/posts">Blog</a>
-        </li>
      </ul>
    </div>
  </div>
--- a/layouts/partials/next-prev-navigator.html
+++ b/layouts/partials/next-prev-navigator.html
@ -0,0 +1,35 @@
+<div class="row next-prev-navigator">
+{{ $currentPage := . }}
+{{ range (where site.RegularPages.ByDate "Type" "in" site.Params.mainSections )}}
+  {{ if eq .RelPermalink  $currentPage.RelPermalink }}
+    {{ if .Next }}
+      {{ if (in site.Params.mainSections .Next.Type) }}
+      <div class="col-md-6 previous-article">
+        <a href="{{.Next.RelPermalink}}" class="btn btn-outline-info">
+          <span><i class="fas fa-chevron-circle-left"></i> Prev</span>
+          <br />
+          <span>{{ .Next.Title }}</span>
+        </a>
+      </div>
+      {{ end }}
+    {{ end }}
+    {{ if .Prev }}
+      {{ if (in site.Params.mainSections .Prev.Type)  }}
+        {{ $columnWidth:="col-md-12" }}
+        {{ if .Next }}
+          {{ if (in site.Params.mainSections .Next.Type) }}
+              {{ $columnWidth = "col-md-6" }}
+          {{ end }}
+        {{ end}}
+        <div class="{{ $columnWidth }} next-article">
+          <a href="{{ .Prev.RelPermalink }}" class="btn btn-outline-info">
+            <span>Next <i class="fas fa-chevron-circle-right"></i></span>
+            <br />
+            <span>{{ .Prev.Title }}</span>
+          </a>
+        </div>
+      {{ end }}
+    {{ end }}
+  {{ end }}
+{{ end }}
+</div>
--- a/layouts/partials/projects.html
+++ b/layouts/partials/projects.html
@ -1,21 +1,19 @@
-<div class="container-fluid projects bg-dimmed anchor pb-5" id="projects">
-  {{ if .Site.Data.projects }}
-    <h1 class="text-center">Projects</h1>
-    <div class="container ml-auto text-center">
-      <div class="btn-group flex-wrap" role="group" id="project-filter-buttons">
-        {{ range .Site.Data.projects.buttons }}
-        <button type="button" class="btn btn-dark" data-filter="{{ .filter }}">
-          {{ .name }}
-        </button>
-        {{ end }}
-      </div>
+<div class="container-fluid anchor pb-5" id="projects">
+  <h1 class="text-center">{{ .section.name }}</h1>
+  <div class="container ml-auto text-center">
+    <div class="btn-group flex-wrap" role="group" id="project-filter-buttons">
+      {{ range .buttons }}
+      <button type="button" class="btn btn-dark" data-filter="{{ .filter }}">
+        {{ .name }}
+      </button>
+      {{ end }}
    </div>
-    <div class="container filtr-projects">
-      <div class="row" id="project-card-holder">
-        {{ range .Site.Data.projects.projects }}
-          {{ partial "cards/project" . }}
-        {{ end }}
-      </div>
+  </div>
+  <div class="container filtr-projects">
+    <div class="row" id="project-card-holder">
+      {{ range .projects }}
+        {{ partial "cards/project" . }}
+      {{ end }}
    </div>
-  {{ end }}
+  </div>
 </div>
--- a/layouts/partials/recent-posts.html
+++ b/layouts/partials/recent-posts.html
@ -1,8 +1,8 @@
-<div class="container-fluid recent-posts bg-white anchor pb-5" id="recent-posts">
-  <h1 class="text-center">Recent Posts</h1>
+<div class="container-fluid anchor pb-5" id="recent-posts">
+  <h1 class="text-center">{{ .section.name }}</h1>
  <div class="container">
    <div class="row" id="recent-post-cards">
-      {{ range first 3 (where .Site.RegularPages.ByDate.Reverse "Type" "in" site.Params.mainSections )}}
+      {{ range first 3 (where site.RegularPages.ByDate.Reverse "Type" "in" site.Params.mainSections )}}
        {{ partial "cards/recent-post.html" . }}
      {{ end }}
    </div>
--- a/layouts/partials/skills.html
+++ b/layouts/partials/skills.html
@ -1,13 +1,11 @@
-<div class="container-fluid skills bg-dimmed anchor pb-5" id="skills">
-  {{ if .Site.Data.skills }}
-    <h1 class="text-center">Skills</h1>
+<div class="container-fluid anchor pb-5" id="skills">
+  <h1 class="text-center">{{ .section.name }}</h1>

-    <div class="container d-flex-block">
-      <div class="row" id="primary-skills">
-        {{ range .Site.Data.skills.skills }}
-          {{ partial "cards/skill.html" . }}
-        {{ end }}
-      </div>
+  <div class="container d-flex-block">
+    <div class="row" id="primary-skills">
+      {{ range .skills }}
+        {{ partial "cards/skill.html" . }}
+      {{ end }}
    </div>
-  {{ end }}
+  </div>
 </div>