voltcitron
/
unakt.cc


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107
							<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>004 Creation log of this place (eng)</title>
    <link rel="stylesheet" href="/bundle.css">
</head>
<body>
    <header class="page-header">
    <a href="/" class="headerlogo" title="Go home">
        <img src="/img/astounddS.png" alt="huh" width="28">
    </a>

    <nav>
        <a href="/">Home</a>
        <a href="/about">About Me</a>
        <a href="/notes">Notes</a>
    </nav>
</header>

    <article>
    <h1>004 Creation log of this place (eng)</h1>
    <p>I'm neither extra proficient in English nor in coding and worst of all i have no knowledge of Javascript but this is a memo of things that didn't seems obvious to me to get this Eleventy.js blog place working at the ultimate barebone form.</p>
<p>In the <strong>.eleventy.js</strong> file :</p>
<pre><code class="language-js">module.exports = function(eleventyConfig) {

// add my css file from the root folder 
eleventyConfig.addPassthroughCopy(&quot;bundle.css&quot;);
// This line was to make sure my post.md weren't processed as Liquid, permitting this post here
eleventyConfig.setTemplateFormats([&quot;md&quot;, &quot;njk&quot;, &quot;html&quot;]);

return {
	// Ok idk this prevent markdown from being processed?
	markdownTemplateEngine: false,
	dir: {
		input: &quot;./&quot;,
		output: &quot;_site&quot;,
		layouts: &quot;layouts&quot;,
		includes: &quot;includes&quot;
		}
	};
};
</code></pre>
<p>The <code>async</code> showed in the doc is unnecessary (is it?), and the return part should be at the end of the function.</p>
<p>For the layout of a blog list in Nunjucks (file named &quot;home.njk&quot;):</p>
<pre><code class="language-js">---
    pagination:
        data: collections.post
        size: 3
        reverse: true
---
// [[PUT YOUR HTML HEADER HERE]]
// A Navbar from my includes folder providing links to single pages
{% include 'topbar.html' %}
// I put a welcome message in this index
{{ content | safe }}
&lt;main&gt;
&lt;ul&gt;
	// listing 3 blog posts, both title and whole content
	{% for post in pagination.items %}
		&lt;li&gt;&lt;h3&gt;{{ post.data.title | safe }}&lt;/h3&gt;&lt;/li&gt;
		{{ post.content | safe }}
	{% endfor %}
&lt;/ul&gt;

// Links to show back 3 older posts or 3 more recent
&lt;p&gt;{% if page.url != pagination.href.last %}&lt;a href=&quot;{{ pagination.href.next }}&quot;&gt;Prev Page&lt;/a&gt;{% endif %} ---

{% if page.url != pagination.href.first %}&lt;a href=&quot;{{ pagination.href.previous }}&quot;&gt;Next Page&lt;/a&gt;{% endif %}&lt;/p&gt;
&lt;/main&gt;
</code></pre>
<p>The <code>data: collections.post</code> will take all files tagged with &quot;post&quot;. And then they will be listed 3 by 3 in reverse order on the blog part (the for loop).</p>
<p>Be aware that if you plan on switching from Liquid to Nunjucks by renaming your file because they seems identical, there actually are minor differences :
<code>{% for post in pagination.items reversed %}</code>
Should become :
<code>{% for post in pagination.items | reverse %}</code>
And if your ever simply rename like me, be aware that Eleventy will tell you an incorrect error line number, missing as many lines as you have metadata lines on top on your file.</p>
<blockquote>
<p>Little anecdote: This was especially aggravating when i renamed since it told my <strong>for loop</strong> wasn't closed exactly where i had <strong>another for loop</strong> that was perfectly correct...</p>
</blockquote>
<p>The said index page that use home.njk to show the post list, along with the &quot; content&quot; part with the welcome message :</p>
<pre><code class="language-md">---
layout: home.njk
title: unakt - hi
---
&gt; Hi, I'm unakt - a living mess from France doing his best to sort things up.
</code></pre>
<p>And here is how the most basic post1.md should look like:</p>
<pre><code class="language-md">---
tags: post
title: The title of the post
---
Lorem Ipsum
sit dolor amen
</code></pre>
<p>And this is the most basic barebone elements needed for a blog...
Now there's more things to look at, like the reverse order thing being a little janky at times, but in the grand scheme of things, this let me make some text based post,</p>
<p>as this one ;)</p>

    </article>

<footer class="page-footer">
        <small>- unakt</small>
    </footer>
</body>
</html>