Wiki2site

README.md

@@ -14,7 +14,7 @@ A starter site for building a [mind garden](https://www.mentalnodes.com/a-garden
 - [mathieudutour/gatsby-digital-garden](https://github.com/mathieudutour/gatsby-digital-garden/)
 - Find more at [maggieappleton/digital-gardeners](https://github.com/maggieappleton/digital-gardeners)
 ## :rocket: Usage
-If you're new here, see the _Getting Started_ page in [the wiki](https://github.com/binyamin/eleventy-garden/wiki). Otherwise, check out the wiki guides (coming soon) or FAQ.
+If you're new here, see the _Getting Started_ page in [the wiki](https://eleventy-garden.netlify.app/notes/). Otherwise, check out the wiki guides (coming soon) or FAQ.
 
 ## :heart: Contribute
 Feel free to dive in!

notes/adding-pages.md

@@ -0,0 +1,99 @@
+# Adding pages
+
+## Adding simple top level pages
+
+The template comes with only Home, About Me and Notes pages. Although this structure is nice and simple you might want to add a few more simple static pages. To do this just copy and rename the about.md file and edit it to have the content you want. Usually markdown is used but 11ty supports plain html and more by default.
+
+Assuming you thus creted a new portfolio.md file you should be able to start 11ty, navigate to http://localhost:8080/portfolio/ and review the results. To allow ease of access now just edit the default template (layouts/default.html) and just below <a href="/about">About Me</a> add another entry of <a href="/portfolio">Portfolio</a>.
+
+## Adding a blog
+
+Adding a blog is a bit more involved but nothing too hard - just follow along:
+
+* First add another folder named "blog" right beside the current "notes" folder.
+* Add one or more posts - just simple markdown files with content similar to about.md or any of these notes.
+* Add a blog.11tydata.js file to the blog folder to be able to set meta-data and behavoiur for all posts at a time. The contents depend on what you want in your blog but a good starting point could be something like this:
+
+```js
+const {titleCase} = require("title-case");
+
+module.exports = {
+    layout: "default.html",
+    type: "blogpost",
+    eleventyComputed: {
+        title: function(data) {
+            const itm = this.getCollectionItem(data.collections.blogpost, {...data.page});
+            const content = itm?.template.frontMatter.content;
+
+            function getTitle(content) {
+                if(!content) return null;
+                const firstLine = content.substring(0, content.indexOf('\n'));
+                return firstLine.startsWith("#") ? firstLine.replace(/#\s*/, '').replace(/\r/, '') : null;
+            }
+
+            return getTitle(content) || titleCase(data.title || data.page.fileSlug)
+        }
+    }
+}
+```
+
+This sets the title to either frontmatter or the first line if it's a typical markdown header.
+
+* Now add an index.njk file with the following content to display all posts with pagination:
+
+```njk
+---
+layout: default.html
+pagination:
+  data: collections.blogpost
+  size: 10
+  alias: blog
+---
+
+<ul>
+  {%- for post in collections.blogpost | reverse -%}
+    <li>
+      <h3><a href="{{ post.url | url }}">{{ post.data.title }}</a></h3>
+    </li>
+  {%- endfor -%}
+</ul>
+```
+
+* Go and edit the main .eleventy.js. Below the ```eleventyConfig.addCollection...``` section add a similar section but for blogposts like this:
+```js
+eleventyConfig.addCollection("blogpost", function (collection) {
+        return collection.getFilteredByGlob(["blog/**/*.md", "index.njk"]);
+    });
+```
+* Finally add a link to the navigation bar with another <a href="/blog">Blog</a> line in the default.html. Go view it and see if it works!
+
+## Extending the above basic blog
+
+A few easy tweaks can be used to give the blog a more personal style.
+
+* Create a dedicated layout file for the blog. Just add it to layouts folder, call it e.g. blog.html and link it instead of default.html from the blog.11tydata.js. Consider using layout: default like in the note.html to keep the navigation bar on blog pages.
+* Create a better front page for your blog by altering index.njk. Again consider changing the layout to another but also consider adding more metadata via either front-matter or the blog.11tydata.js file. This can then be referred in the index.njk like e.g. date or resume:
+```
+---
+layout: blogindex.njk
+pagination:
+  data: collections.blog
+  size: 10
+  alias: blog
+---
+
+<h1>Check out my most recent posts below:</h1>
+
+<ul>
+  {%- for post in collections.blogpost | reverse -%}
+    <li>
+      <h3>{{ post.date }}: <a href="{{ post.url | url }}">{{ post.data.title }}</a></h3>
+      {% if post.data.resume %}
+        <p>{{ post.data.resume }}</p>
+      {% endif %} 
+    </li>
+  {%- endfor -%}
+</ul>
+```
+
+* For even further insight into modding your overall site, look into [[files-of-note|files of note]].

notes/faq.md

@@ -1,8 +1,3 @@
----
-title: FAQ
-desc: Frequently-asked questions
----
-
 # FAQ
 
 **Q**: Can I have subfolders in my notes?\

notes/files-of-note.md

@@ -0,0 +1,43 @@
+# Files of note
+
+Below is some info on some individual files and how they work together to determine the workings of eleventy-garden.
+
+## .eleventyignore
+
+Anything in the `.eleventyignore` file is not seen by eleventy when building the site. On top of `.eleventyignore` node_modules is also ignored and so it the output directory and anything in the .gitignore file (under current eleventy settings).
+
+## package.json (and package-lock.json)
+
+package.json specifies direct dependencies for the project. Updating versions or adding dependencies can be done by modifying the file and then invoking:
+
+````shell
+npm prune
+npm install
+````
+
+from the terminal.
+
+Note also how terminal shortcuts can be specified as is the case with:
+
+````json
+"start": "eleventy --serve --quiet"
+````
+
+which lets the command `npm start` in the terminal run `eleventy --serve --quiet` under the hood.
+
+`package-lock.json` manifests all underlying dependencies - best practice is to keep it in source control.
+
+## .eleventy.js
+
+Configures how eleventy builds and serves the site. Specifies directory mapping, template formats, collections, passthrough and everything else configurable in eleventy.
+
+## Files in /layouts and /includes
+
+* `/layouts/default.html` is the default layout for every piece of content in eleventy-garden. It lets you handle stuff like the navigation bar in just one place and then use it everywhere.
+* `/layouts/note.html` is the specific layout for notes. It references the default layout so the navigation bar is intact.
+* `/includes/head.html` holds metadata for each page. Here you can handle title of the page, linked css and even stuff like google analytics. Referenced from `default.html` so shown on every page
+* `/includes/backlinks.html` configures how backlinks are handled for note pages.
+
+## /notes/notes.11tydata.js
+
+When a filename matches the directory and has the `.11tydata.js` extension 11ty sees it as a Directory Data File and all files in the directory will have it available. See more at [11ty docs](https://www.11ty.dev/docs/data-template-dir/). So in practice this defines the layout and the title of each note in the notes folder and also generates backlinks for each of them.

notes/getting-started.md

@@ -1,18 +1,25 @@
 # Getting Started
 
-[![deploy to netlify](https://www.netlify.com/img/deploy/button.svg)](https://app.netlify.com/start/deploy?repository=https://github.com/b3u/eleventy-garden)
+## First Steps
 
-**First Steps**
 - [Generate a repository from this template](https://github.com/binyamin/eleventy-garden/generate)
 - Clone the repository locally ([how to clone a git repository](https://docs.github.com/en/free-pro-team@latest/github/creating-cloning-and-archiving-repositories/cloning-a-repository))
-- Run `npm install` in a terminal.
+- Run `npm install` in a terminal at the folder that holds the  `.eleventy.js` file.
+
+## Make your changes
 
-**Make your changes**
 - Styling: The css file is in `/assets/style.css`
 - Branding: Add your logo or avatar in `/assets/avatar.png`
 - Content: `/_data/site.json` contains vital information to make the site your own
   - Drop your notes in the `/notes` folder
 - Testing: To view it locally, open a terminal and type `npm start`
 
-**Publish it**
-- You can use Netlify, Vercel, or whatever else works.
+## Publish it
+
+- You can use Netlify, Vercel, or whatever else works.
+
+[![deploy to netlify](https://www.netlify.com/img/deploy/button.svg)](https://app.netlify.com/start/deploy?repository=https://github.com/b3u/eleventy-garden)
+
+## Advanced use
+
+See [[adding-pages|adding pages]] for guides on extending the site or see [[files-of-note|files of note]] for more technical input on how to configure this 11ty template.

notes/index.md

@@ -2,4 +2,4 @@
 
 Welcome to the eleventy-garden wiki!
 
-Take a look at the [[faq|FAQ]], or read [[getting-started|Getting Started]]. Also, [Eleventy has official docs](https://11ty.dev/docs).
+Take a look at the [[faq|FAQ]], or read [[getting-started|Getting Started]]. Also, [Eleventy has official docs](https://11ty.dev/docs).

notes/notes.11tydata.js

@@ -18,7 +18,7 @@ module.exports = {
             function getTitle(content) {
                 if(!content) return null;
                 const firstLine = content.substring(0, content.indexOf('\n'));
-                return firstLine.startsWith("#") ? firstLine.replace(/#\s*/, '') : null;
+                return firstLine.startsWith("#") ? firstLine.replace(/#\s*/, '').replace(/\r/, '') : null;
             }
 
             return getTitle(content) || titleCase(data.title || data.page.fileSlug)
@@ -49,9 +49,11 @@ module.exports = {
                     // Construct preview for hovercards
                     let preview = noteContent.slice(0, 240);
 
+                    const altTitle = noteContent?.substring(0, noteContent.indexOf('\n')).replace(/#\s*/, '').replace(/\r/, '');
+
                     backlinks.push({
                         url: otherNote.url,
-                        title: otherNote.data.title,
+                        title: otherNote.data.title ? otherNote.data.title : altTitle,
                         preview
                     })
                 }

notes/sync.md

@@ -1,8 +1,5 @@
----
-title: Syncing your Template
----
-
 # Syncing your template
+
 If you need to update your version of eleventy-garden, run the following git commands
 
 ```shell
@@ -19,4 +16,5 @@ $ git merge upstream/main -m "Update from template"
 # Recreate any uncommited changes
 $ git stash apply
 ```
-You may see merge conflicts (ie. lines of code which changed in both your version and the original). VS Code can help you resolve them.
+
+You may see merge conflicts (ie. lines of code which changed in both your version and the original). VS Code can help you resolve them.