[guide/index.md][xs]: headings adjstmts

markdownbased repo

site/content/guide/index.md

@@ -1,13 +1,15 @@
 ---
 showToc: false
 showSidebar: false
-title: "Markdown-based Websites Guide"
+title: 'Markdown-based Websites Guide'
 disableTitle: true
 ---
 
 <Hero title="Markdown-based Websites" subtitle="Create markdown-based website, update it, add collaborators and discover markdown superpowers" />
 
-# Tutorial 1: Create a website from scratch using markdown and PortalJS
+## Tutorials
+
+### Tutorial 1: Create a website from scratch using markdown and PortalJS
 
 In this tutorial we will walk you through creating an elegant, fully functional website written in simple markdown and published with PortalJS.
 
@@ -19,7 +21,7 @@ By the end of this tutorial you will:
 Below is a screenshot of how the final website will look like:
 ![[tutorial-1-result.png]]
 
-### Setup a sandbox website including live publishing
+#### Setup a sandbox website including live publishing
 
 - Prerequisites: sign up for GitHub and Vercel
 - Navigate to [datopian/flowershow repository](https://github.com/datopian/flowershow)
@@ -27,14 +29,14 @@ Below is a screenshot of how the final website will look like:
 - Let the site build on Vercel
 - Visit the site! Yay! Your site is working! 🎉
 
-### Now, let's edit the front page
+#### Now, let's edit the front page
 
 - Navigate to `content/index.md` file in the site repository
 - Add some text to it
 - Save and watch the site redeploy
 - Visit the site! Yay! Your changes are live! 🎉
 
-### Let's add a page: e.g. about page
+#### Let's add a page: e.g. about page
 
 - Navigate to the `content` folder in the site repository
 - Add `about.md` file with some text
@@ -44,7 +46,7 @@ Below is a screenshot of how the final website will look like:
 > [!tip]
 > Read full tutorial [[create-a-website-from-scratch|here!]]
 
-# Tutorial 2: Editing your site locally on your computer
+### Tutorial 2: Editing your site locally on your computer
 
 In this tutorial, we will walk you through the process of editing your Flowershow website locally on your computer.
 
@@ -60,20 +62,20 @@ Below is a screenshot of how the final website will look like:
 
 ![[tutorial-2-result.png]]
 
-### Clone the repository to your computer
+#### Clone the repository to your computer
 
 - Setup GitHub Desktop app with your GitHub account
 - Grab your site's repository URL
 - Open GitHub Desktop app and clone the repository
 - Yay! You have a copy of your website's repository on your computer! 🎉
 
-### Now, let's edit in Obsidian
+#### Now, let's edit in Obsidian
 
 - Open the `/content` folder of the cloned repository in Obsidian
 - Edit the home page and the about page
 - Create a folder with the reviews of books you've read
 
-### Commit your changes
+#### Commit your changes
 
 - Commit the changes in GitHub Desktop app
 - Push the changes to the remote repository
@@ -82,3 +84,13 @@ Below is a screenshot of how the final website will look like:
 
 > [!tip]
 > Read full tutorial [[edit-a-website-locally|here!]]
+
+## Howtos
+
+- [[quickly-create-a-sandbox-website|How to quickly create a sandbox website]]
+- [[edit-text-on-a-single-md-page|How to quickly edit text on a single Markdown-based page]]
+- [[add-a-simple-md-page|How to add a simple Markdown page]]
+- [[edit-or-add-md-pages-locally|How to edit or add Markdown-based pages locally on your computer]]
+- [[how-to-add-images-to-a-md-page|How to add images to a Markdown-based page]]
+- [[publish-obsidian-vault-to-github|How to push an Obsidian vault to a GitHub repository]]
+- [[create-a-simple-catalog-of-anything|How to create a simple catalog of anything in Obsidian]]

site/content/howtos/add-a-simple-md-page.md

@@ -1,13 +1,16 @@
 ---
 title: How to quickly add a simple Markdown-based page
+date: 2023-07-27
+authors: ['Lauren Wigmore', 'Ola Rubaj']
+filetype: 'blog'
 ---
 
-Welcome to this tutorial on how to quickly add a simple Markdown-based page to your website.  The steps here are designed for non-technical contributors. There's no need to know how to code!
+Welcome to this howto on how to quickly add a simple Markdown-based page to your website. The steps here are designed for non-technical contributors. There's no need to know how to code!
 
 > [!important]
-> This "How to" is only recommended for very simple Markdown pages, e.g. those without images, links to other pages, diagrams, or other elements that can't be previewed in GitHub preview mode. 
+> This "How to" is only recommended for very simple Markdown pages, e.g. those without images, links to other pages, diagrams, or other elements that can't be previewed in GitHub preview mode.
 
->[!tip]
+> [!tip]
 > If you are unfamiliar with Markdown (and its different flavours and extra elements supported by Flowershow based websites), check out [this short guide](https://flowershow.app/docs/syntax) on available syntax elements.
 
 ## Steps
@@ -20,15 +23,15 @@ Welcome to this tutorial on how to quickly add a simple Markdown-based page to y
 > [!tip]
 > If you want to add your page to a new subfolder, in the "Name your file..." field, first type the name of the new subfolder, followed by a forward slash, .e.g., `blog/`. After you hit the slash, you'll see the name field gets cleared, but the path before it has been extended with your subfolder name. You can repeat this process if you want to put your file into further nested subfolders. Then, simply type the name of the file with ".md" extension.
 
-5. Paste or write the contents of the file in Markdown format. 
+5. Paste or write the contents of the file in Markdown format.
 6. (Optionally) Switch to the "Preview" mode, by toggling from "Edit" -> "Preview" at the top of the file content, to see a rough visualisation of your changes. Keep in mind though, that the actual website may have different styling and may support additional Markdown elements that GitHub doesn't render on the preview.
-5. When you're happy with the content, click on the “Commit changes...” button. In the "Commit message" field, provide a concise summary of your changes. If necessary, you can add further explanation in the "Extended description" text field. Then select “Commit directly to the main branch”, and hit "Commit changes."
+7. When you're happy with the content, click on the “Commit changes...” button. In the "Commit message" field, provide a concise summary of your changes. If necessary, you can add further explanation in the "Extended description" text field. Then select “Commit directly to the main branch”, and hit "Commit changes."
-6. The site is now going to be rebuilt to reflect the changes saved to the `main` branch. This can take up to a few minutes. After this time you should see your page live.
+8. The site is now going to be rebuilt to reflect the changes saved to the `main` branch. This can take up to a few minutes. After this time you should see your page live.
 
 ## Summary
 
-Congratulations, you've now learned how to create a new Markdown page on your Flowershow-based website. 
+Congratulations, you've now learned how to create a new Markdown page on your Flowershow-based website.
 
-If anything is not clear to you, or you have suggestions on how we can make this 'How to' better, please don't hesitate to let us know. 
+If anything is not clear to you, or you have suggestions on how we can make this 'How to' better, please don't hesitate to let us know.
 
 Happy editing!

site/content/howtos/add-or-edit-content-on-life-itself-ecosystem.md

@@ -3,13 +3,6 @@ title: How to add or edit content on the Life Itself ecosystem page
 isDraft: true
 ---
 
-## Contents
-
-1. [Introduction](#introduction)
-2. [How to edit and add to the site](#how-to-edit-and-add-to-the-site)
-3. [Glossary](#glossary)
-4. [Contact](#contact)
-
 ## Introduction
 
 From the outset, we have argued that any successful mapping effort must be collaborative and participatory. To make it as simple as possible to contribute, we have opened up the site, giving it a wiki-like structure, meaning people can contribute and add items directly - no coding required. We hope this can support the ongoing growth of our contributor community, and empower users to continue in collective efforts to make the map ever more useful and informative.

site/content/howtos/edit-a-page-with-code-editor-or-obsidian.md

@@ -1,5 +1,8 @@
 ---
-title: "How to edit a page with a code editor or Obsidian"
+title: 'How to edit a page with a code editor or Obsidian'
+date: 2023-07-27
+authors: ['Jake Hirsch', 'Ola Rubaj']
+filetype: 'blog'
 isDraft: true
 ---
 

site/content/howtos/edit-or-add-md-pages-locally.md

@@ -1,5 +1,8 @@
 ---
 title: How to edit or add Markdown-based pages locally on your computer
+date: 2023-07-27
+authors: ['Jake Hirsch', 'Ola Rubaj']
+filetype: 'blog'
 ---
 
 ## Intro

site/content/howtos/edit-text-on-a-single-md-page.md

@@ -1,13 +1,16 @@
 ---
-title: How to quickly edit text content on a single Markdown-based page
+title: How to quickly edit text on a single Markdown-based page
+date: 2023-07-27
+authors: ['Ola Rubaj']
+filetype: 'blog'
 ---
 
-Welcome to this tutorial on how to quickly edit text content on a single Markdown-based page.  The steps here are designed for non-technical contributors. There's no need to know how to code!
+Welcome to this tutorial on how to quickly edit text content on a single Markdown-based page. The steps here are designed for non-technical contributors. There's no need to know how to code!
 
 > [!important]
-> This "How to" is only recommended for text changes only, e.g. those that don't include adding images, links to other pages, diagrams, or other elements that can't be previewed in GitHub preview mode. 
+> This "How to" is only recommended for text changes only, e.g. those that don't include adding images, links to other pages, diagrams, or other elements that can't be previewed in GitHub preview mode.
 
->[!tip]
+> [!tip]
 > If you are unfamiliar with Markdown (and its different flavours and extra elements supported by Flowershow based websites), check out [this short guide](https://flowershow.app/docs/syntax) on available syntax elements.
 
 ## Steps

site/content/howtos/how-to-add-images-to-a-md-page.md

@@ -0,0 +1,45 @@
+---
+title: How to add images to a Markdown-based page
+date: 2023-07-27
+authors: ['Jake Hirsch', 'Ola Rubaj']
+filetype: 'blog'
+---
+
+## Intro
+
+Here, you will learn how to add images to a Markdown-based page. These instructions show how to add these images locally, on your computer, so first you need to know how to work locally with GitHub Desktop app and Obsidian. If you're new to these tools, we recommend reading this howto first:
+
+- [[blog/edit-or-add-md-pages-locally|How to edit or add Markdown pages locally]]
+
+Or you can follow these two tutorials to start from scratch:
+
+- [[create-a-website-from-scratch|Tutorial 1: Create a Markdown based website from scratch]]
+- [[edit-a-website-locally|Tutorial 2: Edit your website locally on your computer]]
+
+## Prerequisites
+
+- A GitHub account
+- A GitHub Desktop app
+- Obsidian
+
+## Steps
+
+### Step 1: Set the assets folder as an attachment folder
+
+In Obsidian, in the root of your vault, create a new folder called 'assets'. Then, right click on and select "set as attachment folder". By doing so, all the images you paste into your note will automatically be saved to this folder (instead of being saved to the root, next to all your notes). This is necessary for your website to display embedded images.
+
+### Step 2: Copy and paste your image
+
+Copy whichever image you would like to add and paste it directly into your Obsidian note. You can check that it has been saved to the "assets" folder.
+
+### Step 3: Commit and push
+
+To learn more about this step, see the howto or the tutorials listed in the intro section.
+
+## Summary
+
+Congratulations, you've now learned how to add an image to your Markdown page!
+
+If anything is not clear to you, or you have suggestions on how we can make this 'How to' better, please don't hesitate to let us know.
+
+Happy editing!

site/content/howtos/how-to-format-a-perfect-markdown-based-page.md

@@ -0,0 +1,33 @@
+---
+title: How to format a perfect Markdown-based page
+date: 2023-07-27
+authors: ['Lauren Wigmore', 'Ola Rubaj']
+filetype: 'blog'
+isDraft: true
+---
+
+Welcome to this information guide to help you understand how to format the perfect Markdown-based page for your website. The information here is designed to give you an overview.
+
+## Types of Markdown Styles
+
+There are three types of Markdown options that are supported by Flowershow.
+
+- CommonMark
+- GitHub Flavored Markdown (GFM) - a superset of CommonMark
+- Obsidian Flavored Markdown - a superset of CommonMark with most GFM functionalities plus its own syntax elements, such as wikilinks, callouts, LaTeX, mermaid diagrams, and more.
+
+Each one has extra functionalities building on top of the previous Markdown option.
+
+Flowershow aims to be fully Obsidian compatible since it supports most Obsidian Flavored Markdown syntax elements and therefore, it is the best to use as an editor.
+
+## Useful Links
+
+It would be too complicated (and long) to explain all of the formatting aspects here, so we have included the links below to provide you with this information and more!
+[Flowershow Documents Page](https://flowershow.app/docs/syntax) - Use this page to see all of the useful key elements that are frequently required on Flowershow pages.
+[Obsidian help pages](https://help.obsidian.md/Editing+and+formatting/Obsidian+Flavored+Markdown) - Use this to get more information on Obsidian's supported syntax
+[GFM cheatsheet](https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet) - Use this as a quick guide to using Markdown for Github
+
+## Other useful pages
+
+[How to quickly add a simple Markdown-based page](https://guide.portaljs.org/guides/add-a-simple-md-page)
+[How to quickly edit text content on a single Markdown-based page](https://guide.portaljs.org/guides/edit-text-on-a-single-md-page)

site/content/howtos/publish-obsidian-vault-to-github.md

@@ -1,5 +1,8 @@
 ---
 title: How to push an Obsidian vault to a GitHub repository
+date: 2023-07-27
+authors: ['Jake Hirsch', 'Ola Rubaj']
+filetype: 'blog'
 ---
 
 This howto walks you through the process of setting up your Obsidian vault as a GitHub repository. Here are some of the benefits of doing so:
@@ -34,7 +37,7 @@ In this howto, we will use the GitHub Desktop application, an easy-to-use interf
 
 2.6. Add an optional description.
 
-2.7. Make sure the checkbox "Initialize this repository with a README" is unchecked, and "Git Ignore" and "License" are set to "None".
+2.7. Make sure the checkbox "Initialise this repository with a README" is unchecked, and "Git Ignore" and "License" are set to "None".
 
 2.8. Click on "Create Repository".
 

site/content/howtos/quickly-create-a-sandbox-website.md

@@ -1,5 +1,8 @@
 ---
 title: How to quickly create a sandbox website
+date: 2023-07-27
+authors: ['Lauren Wigmore', 'Ola Rubaj']
+filetype: 'blog'
 ---
 
 By the end of this guide you will have a working markdown site you can edit, which gets published automatically online 🎉
@@ -22,13 +25,8 @@ The website will then be deployed. This takes approximately 1 minute.
 
 Once you are on the Congratulations screen, click on the preview of your sandbox website to see the live/published version.
 
-For instructions on how to add and edit pages, we recommend these tutorials:
+For instructions on how to add and edit pages, we recommend these howtos:
 
-- [[edit-a-page-with-code-editor-or-obsidian|How to edit text content on a single Markdown-based page]]
+- [[howtos/add-a-simple-md-page|How to add a simple markdown page]]
-- [[add-a-simple-md-page|How to add a simple Markdown-based page]]
+- [[howtos/edit-text-on-a-single-md-page|How to edit text on a single markdown-based page]]
-
+- [[howtos/edit-or-add-md-pages-locally|How to edit or add a markdown page locally on your computer]]
-Here are some other links Vercel links that might be useful for you:
-
-- [Dashboard Features Overview](https://vercel.com/docs/concepts/dashboard-features/overview)
-- [Dashboard Features](https://vercel.com/docs/concepts/dashboard-features)
-- [Projects](https://vercel.com/docs/concepts/projects/project-dashboard)

site/content/howtos/why-use-these-tools-to-create-a-catalog.md

@@ -1,5 +1,6 @@
 ---
 title: "Why use these tools to create a catalog?"
+isDraft: true
 ---
 
 On this site, we offer a “recipe” which uses a combination of free tools to easily create a directory of information that can be used for multiple purposes. With this method, you can start capturing information quickly and intuitively in a format that is flexible and usable later for various needs. Why does this help us? Because to map information – to collect, organise, structure, and classify it – and present it clearly is a way to make more sense of it and therefore of the world around us.