How to retrieve page content from Github

In the same way that you can fetch content from pages on other Primo sites, you can also fetch content from other sources - including a Github repository. Storing content in a Github repository enables you to collaborate, version, and manage it more easily. Docs sites like this one typically commit their content to Git especially to easily enable contributions and edits. Instead of having to utilize Github's API, we can easily grab content directly from the Markdown files by fetching their raw URLs.

This approach allows you to build, develop, and manage your site in Primo, while committing some subset of pages to a separate repository where they can be collaborated on and versioned. For instance - on this site, the main pages are stored in a repo and the guides are fully managed from Primo.

Instructions

Here we'll walk through how to store Markdown in a Github repo. These instructions use the Primo Docs as an example, since most of its content is stored in a repo.

1. Set up your pages in Primo.

2. Commit your content to a Github repo (ideally as Markdown files).

3. Fetch the content from a Block using the raw Github url. If it's stored as Markdown, you can parse it using a parsing library like Showdown.

Example

If you've created a repository with your content and a Block with a 'URL' field with the key of github_markdown_file_url, the code below would render the Markdown as HTML. You can download the full Block below the code example.

HTML:

<div>{@html content}</div>

JS:

import showdown from "showdown";
const converter = new showdown.Converter();

let content = '';
async function get_content(url) {
  const markdown = await fetch(url).then(res => res.text());
  const converted = converter.makeHtml(markdown);
  content = converted;
}
$: get_content(github_markdown_file_url);

Download Block