path: root / src / projects / syndamiadotcom / version2.md


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70

# syndamiadotcom - Version 2
[![🔗](/img/link-tabler.svg)](#syndamiadotcom%20-%20Version%202)

**Article Created: 02 August 2020** || **Last Edited: 24 September 2020**

[`<<`](./introduction.html) || [`< Version 1`](./version1.html)

---

![](./img/welcome-v2.png)

[Version 2](https://github.com/Syndamia/syndamiadotcom/releases/tag/v2.0) is mostly based on a `Markdown` style. Pages are written in `Markdown` and made into the final `HTML` files through [ssg](https://www.romanzolotarev.com/ssg.html) and [lowdown](https://kristaps.bsd.lv/lowdown/).

[Version 2](https://github.com/Syndamia/syndamiadotcom/releases/tag/v2.0) has been used in production ever since **21 July 2020**.

My inspiration and guide was an excellent video from [Wolfgang](https://www.youtube.com/channel/UCsnGwSIHyoYN0kiINAGUKxg) on making a [fast and minimal blog](https://www.youtube.com/watch?v=N_ttw2Dihn8).

## Layout and navigation
[![🔗](/img/link-tabler.svg)](#Layout%20and%20navigation)

This version uses a more **traditional layout** (although similar to the previous one). In the header there are **universal links** to the main pages (*Home*, *About*, *Projects*, etc.)

![](./img/header-v2.png)

All *project/tutorials* have an introduction page which contains contents of the *project/tutorial* (links to all of the pages).

![](./img/introduction-v2.png)

Each *project/tutorial* page has some links, a bit below the title:

* one for the **introduction page** (only if the page isn't directly after the introduction)

  ![](./img/to-introduction-v2.png)

* one for the **previous page** (if there is one)

  ![](./img/prev-page-v2.png) 
  
  *Example taken from [Filters](https://www.syndamia.com/tutorials/how-to-use-jira/filters.html) page in [How to use Jira](https://www.syndamia.com/tutorials/how-to-use-jira/introduction.html)*

* one for the **next page** (if there is one)

  ![](./img/next-page-v2.png)
 
  *Example taken from [Filters](https://www.syndamia.com/tutorials/how-to-use-jira/filters.html) page in [How to use Jira](https://www.syndamia.com/tutorials/how-to-use-jira/introduction.html)*

## Style overview
[![🔗](/img/link-tabler.svg)](#Style%20navigation)

The style resembles standard `Markdown` formatting like in `GitHub`. Text is black on white background with `Open Sans` font.

![](./img/about-v2.png)

Hyperlinks are bold and colored in dark blue (![](./img/00-40-80.png) `#004080`).

![](./img/contents-v2.png)

Code blocks, inline code, blockquotes and tables are taken from [sindresorhus's github-markdown-css repo](https://github.com/sindresorhus/github-markdown-css).

![](./img/code-v2.png)

![](./img/table-v2.png)

## Content management
[![🔗](/img/link-tabler.svg)](#Content%20management)

This version **doesn't** use a full-fledged **content management system**, but managing is a lot more automated.

Pages are written in `Markdown` formatting and making the website is done with `ssg`, that takes care of generating the webpages, sitemap, etc. and `lowdown`, that converts the `Markdown` to `HTML`.