Add placeholder content to showcase usage of app

Author: idelsink

docs/getting-started.md

@@ -0,0 +1,25 @@
+<!-- Simple getting started guide -- Used as a placeholder page -->
+
+Compare GitHub release notes. Supports URL parameters for direct linking to comparisons.
+
+**Available Parameters**
+
+- `repo` - GitHub Repository in `owner/name` format
+- `from` - Starting release tag
+- `to` - Ending release tag
+- `prereleases` - Include Pre-releases (`true` or `false`)
+
+**Notes**
+
+- All three main parameters (`repo`, `from` and `to`) are required for the comparison to work.
+- Make sure to [URL encode](https://en.wikipedia.org/wiki/Percent-encoding) special characters in parameter values if needed
+
+**Examples**
+
+Basic comparison
+
+<https://example.com/?repo=picocss/pico&from=v1.5.10&to=v2.0.0>
+
+Basic comparison including Pre-release
+
+<https://example.com/?repo=picocss/pico&from=v1.5.10&to=v2.0.0&prereleases=true>

src/modules/github-compare.mjs

@@ -6,6 +6,7 @@ import {
   releaseArticle,
   alertArticle,
   compareHeader,
+  placeholderArticle,
 } from "./html-templates.mjs";
 
 const octokit = new Octokit({});
@@ -28,6 +29,7 @@ function init(settings_ = {}) {
   Object.assign(settings, settings_);
   setupEventListeners();
   initUrlSearchParams();
+  results.innerHTML = placeholderArticle();
 }
 
 function updateUrl() {

src/modules/html-templates.mjs

@@ -1,6 +1,7 @@
 import emojis from "./emojis.mjs";
 import { markdownParse } from "./markdown.mjs";
 import "@github/relative-time-element";
+import placeholderMarkdown from "./../../docs/getting-started.md?raw";
 
 function compareHeader({ releases, from, to, repo }) {
   const header = `
@@ -92,4 +93,21 @@ function alertArticle(content, level = "info") {
   return article;
 }
 
-export { releaseArticle, alertArticle, compareHeader };
+function placeholderArticle() {
+  const body = markdownParse(placeholderMarkdown);
+
+  // Make sure to use links relevant to this page
+  body.replaceAll(
+    "https://example.com/",
+    window.location.origin + window.location.pathname
+  );
+
+  const article = `
+    <article>
+      ${body}
+    </article>
+  `;
+  return article;
+}
+
+export { releaseArticle, alertArticle, compareHeader, placeholderArticle };