add projects section

zapatran · Mar 16, 2019 · 8954532 · 8954532
1 parent f5268e7
commit 8954532
Show file tree

Hide file tree

Showing 8 changed files with 139 additions and 3 deletions.
diff --git a/README.md b/README.md
@@ -50,6 +50,21 @@ In order to generate new entry
 $ hugo new  post/<new-entry>.md
 ```
 
+## Projects
+
+You can add your own projects creating a file `projects.json` with the following structure:
+```json
+[
+  {
+    "name": "name of your project",
+    "emoji": "🖍",
+    "description": "Description of your project",
+    "project": "https://zapatran.dev",
+    "source": "https://github.com/zapatran/hugo-oblate-theme"
+  }
+]
+```
+
 ## Disqus
 
 This theme features a comment system powered by Disqus too. Just add your Disqus-shortname to the [`config.toml`](//github.com/zapatran/hugo-oblate-theme/blob/dev/exampleSite/config.toml) and let readers respond to your blog posts.

diff --git a/assets/sass/components/_layout.scss b/assets/sass/components/_layout.scss
@@ -129,6 +129,85 @@ a.post-title:hover {
   display: none;
 }
 
+.project {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: .75rem;
+  border-radius: 4px;
+  border-bottom: 2px solid $light;
+
+  .button {
+    margin-bottom: 0;
+  }
+
+  &-content {
+    display: block;
+    flex: 2;
+    font-weight: 500;
+    color: #333;
+  }
+
+  // &:hover {
+  //   background: $light;
+  //   text-decoration: none !important;
+  // }
+
+  &:hover .project-title {
+    color: #111;
+  }
+
+  &:last-of-type {
+    border-bottom: none;
+  }
+}
+
+.project-thumbnail {
+  width: 30px;
+  margin-right: 1.3rem;
+
+  img {
+    display: block;
+  }
+}
+
+.project-description {
+  font-size: .9rem;
+  color: #888;
+  margin: 0 2rem 0 0;
+  flex: 8;
+  display: none;
+}
+
+@include small-breakpoint {
+  .project-description {
+    display: block;
+    font-size: 1.1rem;
+  }
+}
+
+.project-title {
+  display: block;
+  flex: 2;
+  font-weight: 500;
+  color: #333;
+}
+
+a.project-title {
+  display: block;
+}
+
+a.project-title:hover {
+  text-decoration: underline;
+  color: $heading-font-color;
+}
+
+.project-date {
+  color: #888;
+  font-size: .9rem;
+  display: none;
+}
+
 .view-all {
   background: $light;
   border-radius: 4px;
@@ -155,6 +234,15 @@ a.post-title:hover {
     margin-right: 2rem;
   }
 
+  .project-date,
+  .project-description {
+    display: block;
+  }
+
+  .project-title {
+    margin-right: 2rem;
+  }
+
   .view-all {
     margin-left: 2rem;
   }
@@ -609,6 +697,7 @@ blockquote {
 }
 
 .posts-links,
+.projects-links,
 .comment-links {
   display: flex;
   justify-content: space-between;

diff --git a/exampleSite/config.toml b/exampleSite/config.toml
@@ -25,6 +25,7 @@ disqusShortname = ""
   # default titles
   articles = ""
   latestPosts = ""
+  projects = ""
   copyright = false
 
 # Add additional social link entries underneath

diff --git a/exampleSite/data/projects.json b/exampleSite/data/projects.json
@@ -0,0 +1,9 @@
+[
+  {
+    "name": "Hugo-Oblate-Theme",
+    "emoji": "🖍",
+    "description": "Description",
+    "project": "https://zapatran.dev",
+    "source": "https://github.com/zapatran/hugo-oblate-theme"
+  }
+]
diff --git a/...leSite/resources/_gen/assets/scss/sass/main.scss_48b060fe05b0a273d182ef83c0605941.content b/...leSite/resources/_gen/assets/scss/sass/main.scss_48b060fe05b0a273d182ef83c0605941.content
diff --git a/exampleSite/resources/_gen/assets/scss/sass/main.scss_48b060fe05b0a273d182ef83c0605941.json b/exampleSite/resources/_gen/assets/scss/sass/main.scss_48b060fe05b0a273d182ef83c0605941.json
@@ -1 +1 @@
-{"Target":"sass/main.min.bda4f91ee63feb6ada7e62e7486216f53cd043669378af111924d7eafb92b4f7.css","MediaType":"text/css","Data":{"Integrity":"sha256-vaT5HuY/62rafmLnSGIW9TzQQ2aTeK8RGSTX6vuStPc="}}
+{"Target":"sass/main.min.f90c74636398832f92d86ef2814328b1345144f357ea6ad8096f850157472519.css","MediaType":"text/css","Data":{"Integrity":"sha256-+Qx0Y2OYgy+S2G7ygUMosTRRRPNX6mrYCW+FAVdHJRk="}}
diff --git a/layouts/index.html b/layouts/index.html
@@ -1,9 +1,14 @@
-
 {{ define "main" }}  
   <div id="front-page" class="container">
     <section class="section">
       {{ .Content }}
     </section>
+    {{ if .Site.Data.projects }}
+    <section class="section">
+      <h2>{{ .Site.Params.projects | default "Projects" }}</h2>
+      {{ partial "projects-list.html"  . }}
+    </section>
+    {{ end }}
     <section class="section">
       <h2>{{ .Site.Params.latestPosts | default "Latest Posts" }}</h2>
       {{ partial "post-list.html"  . }}

diff --git a/layouts/partials/projects-list.html b/layouts/partials/projects-list.html
@@ -0,0 +1,17 @@
+{{ range $.Site.Data.projects }}
+  <div class="project" id="post-3398">
+    <div class="project-thumbnail">
+      <span class="project-icon">{{ .emoji }}</span>
+    </div>
+    <div class="project-content">
+      <div class="project-title">{{ .name }}</div>
+      <div class="project-description">{{ .description }}</div>
+    </div>
+    <div class="buttons">
+      {{ if .project }}
+        <a class="button" href="{{ .project }}" target="_blank" rel="noopener noreferrer">Project</a>
+      {{ end }}
+      <a class="muted-button button" href="{{ .source }}" rel="noopener noreferrer">Source</a>
+    </div>
+  </div>
+{{ end }}