Projects

This section goes over how to add or update a project to the site.

Creating the Project's Space

To add a new project, you need to create a new folder in the public/catalog/creators/{creator-identifier} folder.

The folder name should be the project's identifier. This identifier is used to generate the URL of the project's page, and should be written in kebab-case (lowercase with hyphens).

public/catalog/creators/{creator-identifier}
├── {project-identifier}

Project Image

You can add an image to the project's folder to use as the project's image.

The image should be a png or jpg file, should be named image.png or image.jpg, and should have a resolution of 630px500px (or have a similar aspect ratio).

public/catalog/creators/{creator-identifier}/{project-identifier}
├── image.png|jpg

Project Content

You can add a index.md file to the project's folder to add the content of the project. This file is written in Markdown and will be converted to HTML by the site's Markdown parser.

The Fari Community's site uses Markdown to generate the content of the site. If you are not familiar with Markdown, it is a simple markup language that allows you to add formatting to your text using simple symbols.

You can learn more about the basic syntax here.

The way that the Fari Community's site parses your markdown content is by splitting each main heading (#) into a new page. So adding a # to your markdown will create a new page, and all the subheadings (##) and content below it will be added to that page.

# Page 1

Some text

## Section 1

Some more text

# Page 2

Some text

Categories

On top of normal heading, the Fari Community's site allows you to group your pages into categories.

To add a category to one of your project's page, you need to add a | My Category suffix to your page headings.

# Page 1 | My Category

Some text

## Section 1

Some more text

# Page 2 | My Category

Some text

# Page 3 | Another Category

Some text

This allows you to group pages in the sidebar navigation, which is quite useful if you have a lot of pages.

For a preview of that this looks like, look on the left side of this page inside the sidebar. You will see a "Getting Started" category with a "Site Management" category.

Custom Markdown Syntax

The Fari Community's site uses a custom Markdown parser that adds some extra features to the standard Markdown syntax.

Categories

You can add a category to one of your project's page

Project Config (Optional)

You can add a index.ts file to the project's folder to add some metadata about the project.

This file is written in TypeScript and should export a default function that returns an object with the project's data.

Use the syntax below as a template.

import { IProjectData } from "public/catalog/loader";

export default function getData(): IProjectData {
  return {
    name: "Charge",
    description:
      "A generic and fiction first RPG system to power your action packed adventures.",
    links: {
      "itch.io": "https://fari-rpgs.itch.io/charge-rpg",
    },
  };
}

Project Config Properties

The following properties are available for you to use:

Field		Default value
name	The project's name.	The project's identifier converted to title case
description	A short description of the project.	""
links	A dictionary of links to the project's website's social media.	{}
license	The project's license.	"Unknown"
css	Inline CSS to inject in the project's page.	undefined
headingFont	The font to use for the project's heading.	"Inter"
textFont	The font to use for the project's body.	"Inter"