Skip to content

Create a Post on "Projects" Page

wolfishLamb edited this page Jun 27, 2024 · 4 revisions

Each post you see under the "Projects" page is a markdown (.md) file in content/projects folder.

Markdown is a language that allows you to format plain text documents for readability on the web. It's a simple way to add formatting like headings, bold text, italics, lists, and more without needing to know complex HTML code.

This example file describes the markdown syntax.

The TIA tech committee members are called upon to collaborate with non-tech members, helping them get comfortable with markdown for writing project reports.

Important Note: Before pushing your project report to GitHub, please double-check for typos and ensure all links and images function properly on your local machine.

Front Matter

The front matter at the top of each content file is metadata that:

  • Describes the content
  • Augments the content
  • Controls the published structure of your site

Source: Hugo - Front Matter (edited)

Below is the example metadata that should be specified in every post file:

---
date: YYYY-MM-DD
title: A Good Title
subtitle: Briefly explain what this post is in a simple sentence.
coverImage: filename-of-the-cover.png
coverCaption: Describe the cover image in a sentence.
author: John Doe, Jane Smith
pinned: true
---

Start writing your content here...

The default value of each field is specified in archtypes/default.md.

File Naming Convention

The filename should be the title of the post in kebab case, which means:

  • All words are in lowercase; and
  • Words are separated by hyphens ('-').

An example: welcome-to-tia.md.

If the title field is not specified, the filename will serve as the title of the post, in title case.

Handling Images and Links

Create a dedicated subfolder in static/ folder to store the images for each post. It is suggested that you use a short and concise folder name, without spaces.

Then, refer to the image in the markdown file by writing:

![Image caption goes here.]({{ absURL "folder-name/image-name.jpg" }})

Incorrect examples:

  • ![]("https://tutors-in-action.org/folder-name/image-name.jpg")
  • ![]("folder-name/image-name.jpg")
  • ![]({{ absURL "static/folder-name/image-name.jpg" }})
  • ![]({{ absURL "/folder-name/image-name.jpg" }})

This also applies to links. If you are to refer to a page or a file in TIA website, you have to wrap the URI (without preceding '/') in {{ absURL "..." }}.

  • [This is a link.]({{ absURL "privacy-policy" }}) ✔️
  • [Back to homepage.]({{ absURL "" }}) ✔️
  • [Check out example.com](https://example.com) ✔️

Also, make sure that content authors are aware of this.

Implement an Extended Feature

What a shortcode is

Hugo loves Markdown because of its simple content format, but there are times when Markdown falls short. Often, content authors are forced to add raw HTML (e.g., video <iframe>’s) to Markdown content. We think this contradicts the beautiful simplicity of Markdown’s syntax.

Hugo created shortcodes to circumvent these limitations.

A shortcode is a simple snippet inside a content file that Hugo will render using a predefined template.

Source: Hugo - Shortcodes

If there is a demand for this, please open an issue. Read also Wiki - Contribution Guidelines.