feat: add local rules page

web/client/src/css/components.css

@@ -1,3 +1,5 @@
+@import 'components/markdown';
+
 .input-control {
   @apply bg-white
     border border-black/60

web/client/src/css/components/markdown.css

@@ -0,0 +1,84 @@
+ /* see also heading styles in base.css */
+
+.markdown {
+  @apply break-words;
+
+  h1 {
+    @apply border-b pb-2;
+    @apply mt-16 mb-4;
+
+    &:first-child {
+      @apply mt-0;
+    }
+  }
+
+  h2 {
+    @apply border-b pb-2;
+    @apply mt-8 mb-4;
+  }
+
+  h3 {
+    @apply mt-8 mb-2;
+  }
+
+  h4,
+  h5,
+  h6 {
+    @apply mt-4;
+  }
+
+  code {
+    font-size: .9em;
+    @apply bg-mobi-purple-safe/20;
+    @apply px-1;
+    @apply rounded;
+  }
+
+  ol, ul {
+    @apply my-3;
+    @apply pl-6;
+  }
+
+  ol > li {
+    @apply list-decimal;
+  }
+
+  ul > li {
+    @apply list-disc;
+  }
+
+  table {
+    @apply my-2;
+  }
+
+  th, td {
+    @apply align-baseline;
+    @apply px-3 py-2;
+    @apply text-left;
+  }
+
+  th {
+    @apply font-bold;
+  }
+
+  thead th {
+    @apply border-b-2;
+  }
+
+  thead tr,
+  tbody tr:nth-child(even) {
+    @apply bg-mobi-dark-blue/5;
+  }
+
+  a[href] {
+    @apply text-mobi-light-blue;
+    @apply no-underline hover:underline;
+  }
+
+  details {
+    @apply bg-mobi-light-gray;
+    @apply my-3;
+    @apply px-4 py-2;
+    @apply rounded shadow;
+  }
+}

web/client/src/routes/+page.svelte

@@ -329,13 +329,7 @@
           class="flex flex-col md:flex-row md:justify-end md:w-auto mt-16 gap-4"
         >
           {#if showDocs}
-            <Button
-              href="https://github.com/MobilityData/gtfs-validator/blob/master/RULES.md"
-              target="_blank"
-            >
-              See Documentation
-              <i class="fa-solid fa-xs fa-arrow-up-right-from-square" />
-            </Button>
+            <Button href="/rules">See Documentation</Button>
           {/if}
 
           <Button type="submit" variant="primary">Validate</Button>

web/client/src/routes/rules/+page.js

@@ -0,0 +1,13 @@
+/** @type {import('./$types').PageLoad} */
+
+export const load = async ({ fetch }) => {
+  // local copy of https://raw.githubusercontent.com/MobilityData/gtfs-validator/master/RULES.md
+  // we could fetch it directly instead, if desired
+  const response = await fetch('/RULES.md');
+  const rulesMd = await response.text();
+  return { rulesMd };
+};
+
+export const prerender = true;
+export const ssr = true;
+export const csr = true;

web/client/src/routes/rules/+page.svelte

@@ -0,0 +1,52 @@
+<script>
+  import { marked } from 'marked';
+  import { page } from '$app/stores';
+  import { onMount } from 'svelte';
+
+  /** @type {string} */
+  let massagedMarkdown = '';
+
+  $: {
+    const md = $page.data.rulesMd;
+
+    // edit markdown to help with parsing
+    // marked does not like some of the formatting in RULES.md
+    let output = md
+      .replace(/<a name=".*"\/>/gm, '') // remove redundant anchors
+      .replace(/\t/gm, '    ') // spaceify tabs
+      .replace(/(\S)$\n<details>/gm, '$1\n\n<details>'); // ensure blank lines before <details>
+
+    massagedMarkdown = output;
+  }
+
+  onMount(() => {
+    // wrap tables in scrollable divs
+    const tableWrapper = document.createElement('div');
+    tableWrapper.classList.add('overflow-x-scroll');
+    document.querySelectorAll('table').forEach((table) => {
+      const wrapper = tableWrapper.cloneNode(false);
+      table.parentNode?.insertBefore(wrapper, table);
+      wrapper.appendChild(table);
+    });
+  });
+</script>
+
+<div class="container">
+  <div class="flex flex-col md:flex-row md:gap-4 items-baseline">
+    <a href="/" class="text-black/50 mr-auto">&larr; Back to validator</a>
+    <a
+      href="https://github.com/MobilityData/gtfs-validator/blob/master/RULES.md"
+      class="text-black/50"
+    >
+      View this document on GitHub
+    </a>
+  </div>
+
+  <div class="markdown mt-8 mb-16">
+    <!--
+      note: marked does not sanitize output
+      @html is unsafe when loading external content
+    -->
+    {@html marked.parse(massagedMarkdown)}
+  </div>
+</div>