Skip to content

Commit

Permalink
New/blog section (#25)
Browse files Browse the repository at this point in the history
* Add blog theme files

* Readability improvements

* Display posts list as summary

* Adding defaults

* Sample conent

* List styling

* Header improvement

* Adding new tags

* Update theme info

* Styling improvement

* Better styling

* Homepage sample

* Update README.md
  • Loading branch information
zetxek authored Jun 24, 2024
1 parent 0b5bdf2 commit 4cde46a
Show file tree
Hide file tree
Showing 11 changed files with 274 additions and 11 deletions.
26 changes: 21 additions & 5 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ You can see the source code for [my website](https://www.adrianmoreno.info) [in
## Download

- Clone the repo: `git clone https://github.com/zetxek/adritian-free-hugo-theme.git`.
- [Download from Github](https://github.com/zetxek/adritian-free-hugo-theme/archive/main.zip).
[Download from ](https://github.com/zetxek/adritian-free-hugo-theme/archive/main.zip)GitHub.

## Installation

Expand All @@ -35,10 +35,9 @@ You can see the source code for [my website](https://www.adrianmoreno.info) [in
To use `adritian-free-hugo-theme` you need to install Hugo by following https://gohugo.io/getting-started/installing/.

#### Setting up
As a pre-requirement, you will need Hugo set up and running. You can follow [the official guide for it](https://gohugo.io/categories/installation/).

As a pre-requirement you will need Hugo set up and running. You can follow [the official guide for it](https://gohugo.io/categories/installation/).

Note: the theme has **not** been migrated to Hugo Modules yet. To install it, you need to set it up by copying the theme files (either as a sub-module, or by copying the files). You can follow these [older instructions](https://gohugobrasil.netlify.app/themes/installing-and-using-themes/), or the next ones as help:
Note: the theme has **not** been migrated to Hugo Modules yet. To install it, you need to set it up by copying the theme files (either as a sub-module or by copying the files). You can follow these [older instructions](https://gohugobrasil.netlify.app/themes/installing-and-using-themes/) or the next ones as help:

- Create a new Hugo site (this will create a new folder): `hugo new site <your website's name>`
- Enter the newly created folder: `cd <your website's name>/`
Expand Down Expand Up @@ -81,8 +80,25 @@ Press Ctrl+C to stop

#### Additional configuration

- _(optional, if you want to use the contact form)_ edit the line 212 in your `homepage.yml` file, to customize your mail address. Sign up in [formspree](https://formspree.io) to redirect mails to your own.
##### Contact form
_(optional, if you want to use the contact form)_ edit line 212 in your `homepage.yml` file, to customize your mail address. Sign up in [formspree](https://formspree.io) to redirect mails to your own.

##### Blog

<img width="1449" alt="SCR-20240624-uajc" src="https://github.com/zetxek/adritian-free-hugo-theme/assets/240085/7540f5f0-f753-48f8-bc69-1aa9c715a6d7">


To use the blog, you can use the content type "blog", and render it in the URL `/blog`.
You can add a menu link to it in `hugo.toml`.

The posts will be markdown files stored in the `content/blog` folder.

##### Experience

<img width="1444" alt="SCR-20240624-uaoi" src="https://github.com/zetxek/adritian-free-hugo-theme/assets/240085/9ea86d6a-62c6-4c4f-96ba-8450fa24dd68">


It can be used to render job experience of projects. Each experience/project has a duration, job title, company name, location and description/excerpt as well as a longer text.

## Troubleshooting

Expand Down
55 changes: 55 additions & 0 deletions assets/css/custom.css
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,9 @@
.header .navbar-brand span:first-child{
color: #478079;
}
.header .container{
padding-left: 10px;
}

html body ::selection{
background-color:#488079;color:#fff
Expand Down Expand Up @@ -171,6 +174,58 @@ body.home div.experience{
color: white;
}

.posts-list{
padding-left: 0;
}
.posts-list article.summary{
margin-bottom: 20px;
}

article.post.summary h2{
font-size: 32px
}

#blog-single #meta{
margin-bottom: 20px;
padding-bottom: 10px;
}

.light-border-bottom::after{
content: "";
width: 80%;
height: 1px;
max-width: 1170px;
background-color: #adb5bd;
display: block;
margin-bottom: 20px;
}

#blog-single #meta section{
font-weight: lighter;
}
#blog-single #meta h4{
font-size: 16px;
font-weight: light;
display: inline;
}
#blog-single #meta h5{
font-size: 14px;
font-weight: light;
display: inline;
}
aside.content-browser{
margin-top: 20px;
padding-top: 10px;
}
.light-border-top::before{
content: "";
width: 80%;
height: 1px;
max-width: 1170px;
background-color: #adb5bd;
display: block;
margin-top: 20px;
}
@media only screen and (max-width : 768px) {
.header .navbar-brand{
margin-top: 10px;
Expand Down
8 changes: 4 additions & 4 deletions data/homepage.yml
Original file line number Diff line number Diff line change
Expand Up @@ -167,8 +167,8 @@ client_and_work:
btnText: "Case Study"
URL: "#"
image:
x: "images/works/swissfintech.jpg"
_2x: "images/works/swissfintech@2x.jpg"
x: "images/works/robo-advisor.jpg"
_2x: "images/works/robo-advisor@2x.jpg"
is_even: false

- title: "Robo Advisor"
Expand All @@ -178,8 +178,8 @@ client_and_work:
btnText: "Case Study"
URL: "#"
image:
x: "images/works/robo-advisor.jpg"
_2x: "images/works/robo-advisor@2x.jpg"
x: "images/works/radity-finance.jpg"
_2x: "images/works/radity-finance@2x.jpg"
is_even: true

# testimonial
Expand Down
14 changes: 14 additions & 0 deletions exampleSite/content/blog/sample.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
+++
title = 'Sample blog content 1'
date = 2024-06-23T14:38:33+02:00
draft = false
type = 'blog'
+++

Sample blog content. Like a lorem ipsum but saying something more interesting.

Welcome to the world of "Content Ipsum," the fresh alternative to the classic lorem ipsum. It's the perfect blend for designers and writers who crave a dash of creativity and meaning in their placeholder text. Imagine a text that not only fills the space but also sparks the imagination, a text that weaves tales of innovation, inspiration, and the endless possibilities that creativity brings.

In the realm of "Content Ipsum," every paragraph is a journey through the wonders of the human mind, a celebration of the achievements that have shaped our world, and a look into the future that awaits us. From the depths of the ocean to the farthest reaches of the universe, "Content Ipsum" takes you on an adventure that captivates and informs.

So, the next time you're crafting a design or drafting a document, let "Content Ipsum" infuse your work with the spirit of discovery and the joy of creation. It's more than just text; it's a narrative that connects, engages, and inspires. Welcome to the evolution of placeholder text – where every word is a story waiting to be told.
28 changes: 28 additions & 0 deletions layouts/_default/list.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
<!-- inject:../components/baseHead/baseHeadStart.html -->
<!DOCTYPE html>
<html lang="en">

<head>
{{ partial "head.html" . }} {{ partial "head_custom.html" . }}
</head>

<body>
{{ partial "header.html" . }}

<main class="list">
<section class="container section">
<h1>{{ .Title }}</h1>
<ul>
<!-- Renders the li.html content view for each content/posts/*.md -->
{{ range .Pages }}
{{ .Render "li" }}
{{ end }}
</ul>
</section>
</main>

{{ partial "footer.html" . }} {{ partial "base-foot.html" . }}
</body>

</html>
<!-- endinject -->
40 changes: 40 additions & 0 deletions layouts/_default/single.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,40 @@
{{ define "main" }}
<section id="main">
<h1 id="title">{{ .Title }}</h1>
<div>
<article id="content">
{{ .Content }}
</article>
</div>
</section>
<aside id="meta" class="light-border-botton">
<div>
<section>
Published on <h4 id="date"> {{ .Date.Format "Mon Jan 2, 2006" }} </h4> ·
<h4 id="wordcount"> {{ .WordCount }} Words</h4>
</section>
{{ with .GetTerms "topics" }}
<ul id="topics">
{{ range . }}
<li><a href="{{ .RelPermalink }}">{{ .LinkTitle }}</a></li>
{{ end }}
</ul>
{{ end }}
{{ with .GetTerms "tags" }}
<ul id="tags">
{{ range . }}
<li><a href="{{ .RelPermalink }}">{{ .LinkTitle }}</a></li>
{{ end }}
</ul>
{{ end }}
</div>
<div>
{{ with .PrevInSection }}
<a class="previous" href="{{ .RelPermalink }}"> {{ .LinkTitle }}</a>
{{ end }}
{{ with .NextInSection }}
<a class="next" href="{{ .RelPermalink }}"> {{ .LinkTitle }}</a>
{{ end }}
</div>
</aside>
{{ end }}
4 changes: 4 additions & 0 deletions layouts/blog/li.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
<li class="post">
<a href="{{ .RelPermalink }}">{{ .LinkTitle }}</a>
<div class="meta">{{ .Date.Format "Mon, Jan 2, 2006" }}</div>
</li>
30 changes: 30 additions & 0 deletions layouts/blog/list.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
<!-- inject:../components/baseHead/baseHeadStart.html -->
<!DOCTYPE html>
<html lang="en">

<head>
{{ partial "head.html" . }} {{ partial "head_custom.html" . }}
</head>

<body>
{{ partial "header.html" . }}

<main class="blog">
<section class="container section">
<h1 class="rad-fade-down rad-waiting rad-animate">{{ .Title }}</h1>
<div class="posts-list container">
<!-- Renders the li.html content view for each content/posts/*.md -->
{{ range .Pages }}
<div class="row row--padded rad-animation-group rad-fade-down rad-waiting rad-animate section--border-bottom">
{{ .Render "summary" }}
</div>
{{ end }}
</div>
</section>
</main>

{{ partial "footer.html" . }} {{ partial "base-foot.html" . }}
</body>

</html>
<!-- endinject -->
64 changes: 64 additions & 0 deletions layouts/blog/single.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,64 @@
<!-- inject:../components/baseHead/baseHeadStart.html -->
<!DOCTYPE html>
<html lang="en">
<head>
{{ partial "head.html" . }} {{ partial "head_custom.html" . }}
</head>

<body>
{{ partial "header.html" . }}

<section
id="blog-single"
class="section section--border-bottom rad-animation-group"
>
<div class="container">
<h1><a href="{{ .RelPermalink }}">{{ .Title }}</a></h1>

<aside id="meta" class="light-border-bottom">
<div>
<section>
Published on
<h4 id="date">{{ .Date.Format "Mon Jan 2, 2006" }}</h4>
·
<h4 id="wordcount">{{ .WordCount }} Words</h4>
</section>
{{ with .GetTerms "topics" }}
<ul id="topics">
{{ range . }}
<li><a href="{{ .RelPermalink }}">{{ .LinkTitle }}</a></li>
{{ end }}
</ul>
{{ end }} {{ with .GetTerms "tags" }}
<ul id="tags">
{{ range . }}
<li><a href="{{ .RelPermalink }}">{{ .LinkTitle }}</a></li>
{{ end }}
</ul>
{{ end }}
</div>
</aside>

<div class="row flex-column-reverse flex-md-row rad-fade-down">
<div class="col-12">{{ .Content | safeHTML }}</div>
</div>

<aside class="content-browser light-border-top">
Continue reading
<div>
{{ with .PrevInSection }}
<a class="previous" href="{{ .RelPermalink }}">↩ {{ .LinkTitle }}</a>
{{ end }}
{{ with .NextInSection }}
<a class="next" href="{{ .RelPermalink }}"> {{ .LinkTitle }} ↪</a>
{{ end }}
</div>
</aside>
</div>
</section>

{{ partial "footer.html" . }} {{ partial "base-foot.html" . }}
</body>
</html>
<!-- endinject -->
12 changes: 12 additions & 0 deletions layouts/blog/summary.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
<article class="post summary col-12">
<header>
<h2><a href="{{ .RelPermalink }}">{{ .Title }}</a></h2>
<div class="post-meta">{{ .Date.Format "Mon, Jan 2, 2006" }} - {{ .FuzzyWordCount }} Words </div>
</header>

{{ .Summary }}

<footer>
<a href='{{ .RelPermalink }}'>Read&nbsp;more&nbsp;&raquo;</a>
</footer>
</article>
4 changes: 2 additions & 2 deletions theme.toml
Original file line number Diff line number Diff line change
Expand Up @@ -4,11 +4,11 @@
name = "Adritian-Free-Hugo-Theme"
license = "MIT"
licenselink = "https://github.com/zetxek/adritian-free-hugo-theme/blob/main/LICENSE"
description = "Minimalistic and clean theme for Hugo, great for Single Page personal websites"
description = "Minimalistic and clean theme for Hugo, great for Single Page personal websites. Can be easily extended to custom content types and has a simple blog."
homepage = "https://github.com/zetxek/adritian-free-hugo-theme"
demosite = "https://zetxek.github.io/adritian-demo/"

tags = ["responsive", "clean", "light", "personal"]
tags = ["responsive", "clean", "light", "personal", "bootstrap", "blog"]

features = [
"widgets"
Expand Down

0 comments on commit 4cde46a

Please sign in to comment.