Outline docs site (#11)

* add src_path to template metadata

* tweak init files

* add docs site with initial layout

* add some tweaks to make default layouts more consistent

* index tweaks

* more layout

* stub tutorial entries

* add output in docs index

* fix footer padding

* change listening for serving

* simplify submenu

* remove inline styles

README.md

@@ -49,7 +49,7 @@ wrote target/blog/hello-org.html
 wrote target/blog/index.html
 wrote target/index.html
 wrote target/blog/tags.html
-server listening at http://localhost:4001
+serving at http://localhost:4001
 ```
 
 The site is renders the files found at `src/` in the `target/` directory.

commands/commands.go

@@ -143,7 +143,7 @@ func Post(root string, title string) error {
 	if err := os.WriteFile(path, []byte(content), FILE_RW_MODE); err != nil {
 		return err
 	}
-	fmt.Println("added draft", path)
+	fmt.Println("added", path)
 	return nil
 }
 

commands/initfiles/includes/nav.html

@@ -0,0 +1,11 @@
+<nav>
+    <a href="/">{{ site.config.name }}</a>
+    <a href="/blog/">blog</a>
+
+    <div class="nav-right hidden-mobile">
+        {% assign sections = page.submenu %}
+        {% for section in sections %}
+        <a href="{{section[1]}}">{{section[0]}}</a>
+        {% endfor %}
+    </div>
+</nav>

commands/initfiles/includes/post_preview.html

@@ -1,7 +1,7 @@
 <article class="post">
     <span class="date">{{ post.date | date: "%Y-%m-%d" }}</span>
     <div>
-        <a class="title" href="{{ post.external | default:post.url }}">{{ post.title }}</a>
+        <a class="title" href="{{ post.url }}">{{ post.title }}</a>
         <small>
             {% if post.favorite %} <a href="/blog/tags#⭐" style="text-decoration:none">⭐</a> {% endif %}
             <span class="tags hidden-mobile">

commands/initfiles/layouts/default.html

@@ -1,17 +1,7 @@
 ---
 layout: base
 ---
-<nav>
+{% include nav.html %}
-    <a href="/">{{ site.config.name }}</a>
-    <a href="/blog/">/blog</a>
-
-    <div class="nav-right hidden-mobile">
-        {% assign sections = page.submenu %}
-        {% for section in sections %}
-        <a href="{{section[1]}}">{{section[0]}}</a>
-        {% endfor %}
-    </div>
-</nav>
 
 <div class="content layout-{{ page.layout }}">
     {% if page.title %}<h2>{{page.title}}</h2>{% endif %}

commands/initfiles/layouts/post.html

@@ -1,10 +1,6 @@
 ---
 layout: base
 ---
-<nav>
-    <a href="/">{{ site.config.name }}</a>
-    <a href="/blog">/blog</a>
-</nav>
 
 <div class="content layout-{{ page.layout }}" lang="{{ page.lang | default:site.config.lang | default:'en' }}">
     <header {% if page.cover-img %}class="with-cover"{% endif %}>

commands/initfiles/src/assets/css/main.css

@@ -17,7 +17,7 @@ body {
 }
 
 .footer {
-    padding-top: 2rem;
+    padding: 2rem 0 1rem;
     margin-top: auto;
 }
 
@@ -86,7 +86,7 @@ article.post {
 
 hr {
     border: 0;
-    border-top:1px solid;
+    border-top:1px solid lightgray;
 }
 
 /* tweaks for post content style */
@@ -103,10 +103,6 @@ img.cover-img {
     margin-bottom: -2rem;
 }
 
-.layout-post hr {
-    border: 1px solid silver;
-}
-
 .layout-post {
     hyphens: auto;
     text-align: justify;

commands/serve.go

@@ -42,7 +42,7 @@ func Serve(rootDir string) error {
 	}
 
 	addr := fmt.Sprintf("%s:%d", config.ServerHost, config.ServerPort)
-	fmt.Printf("server listening at http://%s\n", addr)
+	fmt.Printf("serving at http://%s\n", addr)
 	return http.ListenAndServe(addr, nil)
 }
 
@@ -112,7 +112,7 @@ func setupWatcher(config *config.Config) (*fsnotify.Watcher, *EventBroker, error
 				}
 				broker.publish("rebuild")
 
-				fmt.Println("done\nserver listening at", config.SiteUrl)
+				fmt.Println("done\nserving at", config.SiteUrl)
 
 			case err, ok := <-watcher.Errors:
 				if !ok {

docs/.gitignore

@@ -0,0 +1,3 @@
+target
+.DS_Store
+

docs/README.md

@@ -0,0 +1,4 @@
+
+# jorge
+
+A jorge blog by Facundo Olano.

docs/config.yml

@@ -0,0 +1,3 @@
+name: "jorge"
+author: "Facundo Olano"
+url: "https://jorge.olano.dev"

docs/includes/nav.html

@@ -0,0 +1,12 @@
+<nav>
+    <a href="/">{{ site.config.name }}</a>
+    <a href="/tutorial/">tutorial</a>
+    <a href="/blog/">devlog</a>
+    <a href="/docs/">docs</a>
+
+    <div class="nav-right hidden-mobile">
+        <a href="/feed.xml">feed</a>
+        <a href="/blog/tags">tags</a>
+        <a href="https://github.com/facundoolano/jorge">source</a>
+    </div>
+</nav>

docs/includes/post_preview.html

@@ -0,0 +1,14 @@
+<article class="post">
+    {% if post.date %}<span class="date">{{ post.date | date: "%Y-%m-%d" }}</span>{% endif %}
+    <div>
+        <a class="title" href="{{ post.url }}">{{ post.title }}</a>
+        <small>
+            {% if post.favorite %} <a href="/blog/tags#⭐" style="text-decoration:none">⭐</a> {% endif %}
+            <span class="tags hidden-mobile">
+                {% for tag in post.tags %}
+                <a href="/blog/tags#{{tag}}">#{{tag}}</a>
+                {% endfor %}
+            </span>
+        </small>
+    </div>
+</article>

docs/layouts/base.html

@@ -0,0 +1,64 @@
+---
+---
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta name="viewport" content="width=device-width, initial-scale=1">
+        <meta charset="utf-8">
+        {% if page.title %}
+        <title>{{page.head_title|default: page.title }} | {{ site.config.name }}</title>
+        {% else %}
+        <title>{{ site.config.name }}</title>
+        {% endif %}
+        <link type="application/atom+xml" rel="alternate" href="/feed.xml" title="{{ site.config.name }}"/>
+        <link rel="stylesheet" href="/assets/css/main.css">
+
+        <meta name="author" content="{{site.config.author}}">
+        <meta property="og:article:author" content="{{ site.config.author }}">
+        <meta property="og:site_name" content="{{ site.config.title }}">
+
+        {% if page.title %}
+        <meta property="og:title" content="{{ page.title|default: site.config.title }}">
+        <meta name="twitter:title" content="{{ page.title|default: site.config.title }}">
+        {% endif %}
+
+        {% if page.excerpt %}
+        <meta name="description" content="{{ page.excerpt | strip_html | xml_escape }}">
+        <meta name="og:description" content="{{ page.excerpt | strip_html | xml_escape }}">
+        <meta name="twitter:description" content="{{ page.excerpt | strip_html | xml_escape }}">
+        {% endif %}
+
+        {% if page.layout == "post" %}
+        <meta property="og:type" content="article">
+        <meta property="og:article:published_time" content="{{ page.date | date_to_xmlschema }}">
+        <meta property="og:url" content="{{ page.url | absolute_url }}">
+        <link rel="canonical" href="{{ page.url | absolute_url }}">
+        {% else %}
+        <meta property="og:type" content="website">
+        <meta property="og:url" content="{{ page.url | absolute_url }}">
+        <link rel="canonical" href="{{ page.url | absolute_url  }}">
+        {% endif %}
+
+        {% if page.image != "" %}
+        <meta property="og:image" content="{{ page.image | absolute_url }}">
+        <meta name="twitter:image" content="{{ page.image | absolute_url }}">
+        {% endif %}
+
+    </head>
+    <body>
+        {{ content }}
+        <p class="center-block footer">
+            {% if page.date or page.tags %}
+            <span class="date">{{ page.date | date: "%d/%m/%Y" }}</span>
+            <span class="tags">
+                {% for tag in page.tags %}
+                <a href="/blog/tags#{{tag}}">#{{tag}}</a>
+                {% endfor %}
+            </span>
+            <br/>
+            {% endif %}
+            powered by <a href="https://jorge.olano.dev">jorge</a> | <a href="https://github.com/facundoolano/jorge/tree/main/{{page.src_path}}">source</a>
+        </p>
+
+    </body>
+</html>

docs/layouts/default.html

@@ -0,0 +1,9 @@
+---
+layout: base
+---
+{% include nav.html %}
+<div class="content layout-{{ page.layout }}">
+    {% if page.title %}<h2>{{page.title}}</h2>{% endif %}
+    {{ content }}
+    <br/>
+</div>

docs/layouts/post.html

@@ -0,0 +1,15 @@
+---
+layout: base
+---
+{% include nav.html %}
+
+<div class="content layout-{{ page.layout }}" lang="{{ page.lang | default:site.config.lang | default:'en' }}">
+    <header {% if page.cover-img %}class="with-cover"{% endif %}>
+        <h1 class="title">{{ page.title }}</h1>
+        {% if page.subtitle %}<h3 class="subtitle">{{ page.subtitle }}</h3>{% endif  %}
+        {% if page.cover-img %}
+        <img class="cover-img" src="{{ page.cover-img | absolute_url }}">
+        {% endif %}
+    </header>
+    {{ content }}
+</div>

docs/src/assets/css/main.css

@@ -0,0 +1,246 @@
+html {
+    color-scheme: light dark;
+    overflow-y: scroll;
+}
+
+body {
+    max-width: 45em;
+    margin: 0 auto;
+    padding: 0 1rem;
+    width: auto;
+    font-family: Tahoma, Verdana, Arial, sans-serif;
+    line-height: 1.5;
+
+    height: 100vh;
+    display: flex;
+    flex-direction: column;
+}
+
+.footer {
+    padding: 2rem 0 1rem;
+    margin-top: auto;
+}
+
+@media screen and (max-width: 480px) {
+    .hidden-mobile {
+        display: none
+    }
+}
+
+nav {
+    margin: 1rem 0;
+    line-height: 1.8;
+    border-bottom: 1px solid;
+    display: flex;
+}
+.nav-right {
+    margin-left: auto;
+}
+nav a:not(:last-child) {
+    margin-right: 1rem
+}
+nav a:hover {
+    text-decoration: none;
+}
+
+li {
+    line-height: 1.6;
+}
+
+li:not(:last-child) {
+    padding-bottom: .75rem;
+}
+
+a, a:visited {
+    color: LinkText;
+    text-decoration: none;
+}
+a:hover {
+    text-decoration: underline
+}
+
+a.title {
+    color: unset!important;
+    padding-right: .25rem;
+}
+
+.footer, .footer a, .date, .tags, .tags a {
+    color: silver;
+}
+.date {
+    padding-right: .5rem;
+    white-space: nowrap;
+}
+.tags {
+    display: inline-block;
+}
+
+article.post {
+    display: flex;
+    padding-bottom: .5rem;
+}
+
+.center-block {
+    text-align: center;
+}
+
+hr {
+    border: 0;
+    border-top:1px solid lightgray;
+}
+
+/* tweaks for post content style */
+.layout-post img {
+    max-width: 75%;
+    max-height: 400px;
+}
+
+img.cover-img {
+    width: 100%;
+    max-width: 100%;
+    max-height: 200px;
+    object-fit: cover;
+    margin-bottom: -2rem;
+}
+
+.layout-post {
+    hyphens: auto;
+    text-align: justify;
+    font-size: 1.15rem;
+    line-height: 1.6;
+
+    -moz-osx-font-smoothing: grayscale;
+    -webkit-font-smoothing: antialiased !important;
+    -moz-font-smoothing: antialiased !important;
+    text-rendering: optimizelegibility !important;
+    letter-spacing: .03em;
+}
+
+.layout-post .title {
+    hyphens:none;
+}
+
+.layout-post header {
+    margin: 3rem 0 5rem;
+    text-align: left;
+}
+
+.layout-post header.with-cover {
+    margin-top: -0.5rem;
+}
+
+.src pre {
+    font-size: 1rem;
+    overflow-x: auto;
+    line-height: 1.5;
+    padding-left: 1rem
+}
+
+blockquote {
+    border-left: 2px solid whitesmoke;
+    padding-left: 1rem;
+}
+
+.layout-post p.verse {
+    text-align: right;
+}
+
+.layout-post p {
+    line-height: 1.8;
+    margin-bottom: 1.5rem;
+}
+
+.layout-post p + h2 {
+    padding-top: 1.5rem;
+}
+
+.layout-post .center-block {
+    margin: 2rem 0;
+}
+
+/* override in mobile devices for more compact text */
+@media screen and (max-width: 768px) {
+    .layout-post {
+        font-size: 1rem;
+        line-height: 1.2;
+        letter-spacing: unset;
+        hyphens: none;
+        text-align: left;
+    }
+
+    .layout-post p {
+        margin: 0 0 1rem 0;
+        line-height: 1.7;
+    }
+
+    .layout-post p + p {
+        text-indent: 0;
+    }
+
+    .layout-post img {
+        max-width: 100%;
+    }
+}
+
+table {
+    width: 100%;
+    border-collapse: collapse;
+
+}
+
+table tr {
+    border-bottom: 1px solid #ddd;
+}
+
+td, th {
+    padding: .5rem;
+}
+
+
+hr.footnotes-separatator {
+    display:none;
+}
+
+/* makes footnote number and text display in the same line  */
+.footnote-definition {
+    display: block;
+    vertical-align: top;
+    margin-bottom: .4rem;
+}
+.footnote-body, .footnote-body p {
+    display: inline;
+}
+
+/* These control the expand/collapse behavior of the tags page */
+details summary {
+    list-style: none;
+    cursor: pointer;
+}
+
+details summary h3::after {
+    content: "[+]";
+    font-size: small;
+    font-weight: normal;
+    font-family: monospace;
+    vertical-align: middle;
+}
+
+details[open] summary h3::after {
+    content: "[-]"
+}
+
+details > summary::-webkit-details-marker {
+    display: none;
+}
+
+.silver {
+    color: silver;
+}
+
+code.index-sample {
+    display: inline-block;
+}
+
+code.index-sample pre {
+    text-align: left;
+}

docs/src/blog/goodbye-markdown.md

@@ -0,0 +1,13 @@
+---
+title: Goodbye Markdown...
+tags: [blog]
+date: 2024-02-16
+layout: post
+---
+
+## For the record
+
+For the record, even though it has *org* in the name, jorge can also render markdown,
+thanks to [goldmark](https://github.com/yuin/goldmark/).
+
+[Next time](./hello-org), I'll talk about org-mode posts.

docs/src/blog/hello-org.org

@@ -0,0 +1,22 @@
+---
+title: Hello Org!
+subtitle: Writing posts with org-mode syntax
+tags: [blog, emacs]
+date: 2024-02-17
+layout: post
+---
+#+OPTIONS: toc:nil num:nil
+
+** Indeed
+
+This post was originally written with org-mode syntax, instead of [[file:goodbye-markdown][markdown]].
+
+As you can see, /italics/ and *bold* render as expected, and you can even use footnotes[fn:1].
+
+All of this is powered by [[https://github.com/niklasfasching/go-org][go-org]], btw[fn:2].
+
+** Notes
+
+[fn:1] See?
+
+[fn:2] And another one footnote, to stay on the safe side.

docs/src/blog/index.html

@@ -0,0 +1,14 @@
+---
+layout: default
+title: Devlog
+---
+
+{% assign posts_by_year = site.posts | group_by_exp:"post", "post.date | date: '%Y'" %}
+{% for year in posts_by_year %}
+  {% unless forloop.first%}
+  <br/>
+  {% endunless %}
+  {% for post in year.items %}
+    {% include post_preview.html %}
+  {% endfor %}
+{% endfor %}

docs/src/blog/tags.html

@@ -0,0 +1,16 @@
+---
+layout: default
+title: Tags
+---
+
+{% for tag in site.tags %}
+<details>
+    <summary>
+        <h3><a href="#{{tag[0]}}" class="title" id="{{tag[0]}}">#{{tag[0]}}</a></h3>
+    </summary>
+
+    {% for post in tag[1] %}
+    {% include post_preview.html %}
+    {% endfor %}
+</details>
+{% endfor %}

docs/src/docs/index.html

@@ -0,0 +1,15 @@
+---
+layout: default
+title: Devlog
+---
+
+Comming soon!
+
+<ul>
+    {% for page in site.pages|where:"dir", "/docs"|sort:"index" %}
+    <li>
+        <a class="title" href="{{ page.url }}">{{ page.title }}</a>
+    </li>
+    {% endfor %}
+</ul>
+</div>

docs/src/feed.xml

@@ -0,0 +1,35 @@
+---
+---
+<?xml version="1.0" encoding="utf-8"?>
+<feed xmlns="http://www.w3.org/2005/Atom" {% if site.config.lang %}xml:lang="{{ site.lang }}"{% endif %}>
+    <generator uri="https://jorge.olano.dev/" version="0.0.1">jorge</generator>
+    <link href="{{ page.url | absolute_url}}" rel="self" type="application/atom+xml"/>
+    <link href="{{ site.config.url }}" rel="alternate" type="text/html"/>
+    <updated>{{ "now" | date: "%Y-%m-%d %H:%M" }}</updated>
+    <id>{{ page.url | absolute_url}}</id>
+    <title type="html">{{ site.config.name }}</title>
+    <author>
+        <name>{{ site.config.author }}</name>
+    </author>
+    {% for post in site.posts limit:10 %}
+        <entry {% if post.lang %}xml:lang="{{post.lang}}"{% endif %}>
+            {% assign post_title = post.title | strip_html | normalize_whitespace | xml_escape %}
+            <title type="html">{{ post.title }}</title>
+            <link href="{{ post.url | absolute_url }}" rel="alternate" type="text/html" title="{{ post.title }}"/>
+            <published>{{ post.date | date: "%Y-%m-%d %H:%M" }}</published>
+            <updated>{{ post.date | date: "%Y-%m-%d %H:%M" }}</updated>
+            <id>{{ post.url | absolute_url }}</id>
+            <author>
+                <name>{{ post.author | default:site.config.author }}</name>
+            </author>
+            {% for tag in post.tags %}
+            <category term="{{ tag }}"/>
+            {% endfor %}
+            <summary type="html"><![CDATA[{{ post.excerpt | strip_html | normalize_whitespace }}]]></summary>
+            {% if post.image %}
+            <media:thumbnail xmlns:media="http://search.yahoo.com/mrss/" url="{{ post.image | absolute_url }}"/>
+            <media:content medium="image" url="{{ post.image | absolute_url }}"  xmlns:media="http://search.yahoo.com/mrss/"/>
+            {% endif %}
+        </entry>
+    {% endfor %}
+</feed>

docs/src/index.html

@@ -0,0 +1,63 @@
+---
+layout: base
+---
+
+<div class="content">
+<br/>
+<br/>
+<center>
+    <p><big><b>jorge</b> is a personal (small + opinionated) site generator</big></p>
+    <br/>
+    <code class="index-sample src">
+        <pre>
+$ jorge init .
+> site name: My Blog
+> site url: https://myblog.olano.dev
+> author: Facundo
+  <span class="silver">added layouts/base.html
+  added layouts/post.html
+  added src/assets/css/main.css
+  added src/blog/hello-org.org
+  added src/blog/index.html
+  added src/blog/tags.html
+  added src/feed.xml
+  added src/index.html</span>
+$ jorge post "Hello World!"
+  <span class="silver">added src/blog/my-first-post.org</span>
+$ jorge serve
+  <span class="silver">serving at http://localhost:4001</span>
+        </pre>
+    </code>
+    <p><a href="https://github.com/facundoolano/jorge">Open source</a>, Inspired by <a href="https://jekyllrb.com/">Jekyll</a>, with <a href="https://orgmode.org">org-mode</a> and <a href="https://daringfireball.net/projects/markdown/">Markdown</a> support.</p>
+</center>
+<br/>
+
+<br/>
+<hr/>
+<h2><a href="/tutorial" class="title" id="tutorial">Tutorial</a></h2>
+<ol>
+{% for page in site.pages|where:"dir", "/tutorial"|sort:"index" %}
+    <li>
+        <a class="title" href="{{ page.url }}">{{ page.title }}</a>
+    </li>
+{% endfor %}
+</ol>
+
+<h2><a href="/blog" class="title" id="devlog">Devlog</a></h2>
+
+{% for post in site.posts limit:3 %}
+{% include post_preview.html %}
+{% endfor %}
+
+<p>See the full <a href="/blog">blog archive</a> or subscribe to the <a href="/feed.xml">feed</a>.</p>
+
+<h2><a href="/docs" class="title" id="docs">Docs</a></h2>
+Coming soon!
+<ul>
+    {% for page in site.pages|where:"dir", "/docs"|sort:"index" %}
+    <li>
+        <a class="title" href="{{ page.url }}">{{ page.title }}</a>
+    </li>
+    {% endfor %}
+</ul>
+</div>

docs/src/tutorial/building-and-deploying.org

@@ -0,0 +1,11 @@
+---
+title: Building and deploying
+layout: post
+lang: en
+tags: [tutorial]
+index: 4
+---
+#+OPTIONS: toc:nil num:nil
+#+LANGUAGE: en
+
+Coming soon!

docs/src/tutorial/creating-a-site.org

@@ -0,0 +1,11 @@
+---
+title: Creating a new site
+layout: post
+lang: en
+tags: [tutorial]
+index: 2
+---
+#+OPTIONS: toc:nil num:nil
+#+LANGUAGE: en
+
+Coming soon!

docs/src/tutorial/getting-started.org

@@ -0,0 +1,11 @@
+---
+title: Getting started
+layout: post
+lang: en
+tags: [tutorial]
+index: 1
+---
+#+OPTIONS: toc:nil num:nil
+#+LANGUAGE: en
+
+Coming soon!

docs/src/tutorial/index.html

@@ -0,0 +1,12 @@
+---
+layout: default
+title: Tutorial
+---
+
+<ol>
+    {% for page in site.pages|where:"dir", "/tutorial"|sort:"index" %}
+    <li>
+        <a class="title" href="{{ page.url }}">{{ page.title }}</a>
+    </li>
+    {% endfor %}
+</ol>

docs/src/tutorial/posts-and-pages.org

@@ -0,0 +1,11 @@
+---
+title: Posts and pages
+layout: post
+lang: en
+tags: [tutorial]
+index: 3
+---
+#+OPTIONS: toc:nil num:nil
+#+LANGUAGE: en
+
+Coming soon!

site/site.go

@@ -137,7 +137,9 @@ func (site *Site) loadTemplates() error {
 
 			// set site related (?) metadata. Not sure if this should go elsewhere
 			relPath, _ := filepath.Rel(site.Config.SrcDir, path)
+			srcPath, _ := filepath.Rel(site.Config.RootDir, path)
 			relPath = strings.TrimSuffix(relPath, filepath.Ext(relPath)) + templ.Ext()
+			templ.Metadata["src_path"] = srcPath
 			templ.Metadata["path"] = relPath
 			templ.Metadata["url"] = "/" + strings.TrimSuffix(strings.TrimSuffix(relPath, "index.html"), ".html")
 			templ.Metadata["dir"] = "/" + filepath.Dir(relPath)