1. 1
2. 2
3. 3
4. 4
5. 5
6. 6
7. 7
8. 8
9. 9
10. 10
11. 11
12. 12
13. 13
14. 14
15. 15
16. 16
17. 17
18. 18
19. 19
20. 20
21. 21
22. 22
23. 23
24. 24
25. 25
26. 26
27. 27
28. 28
29. 29
30. 30
31. 31
32. 32
33. 33
34. 34
35. 35
36. 36
37. 37
38. 38
39. 39
40. 40
41. 41
42. 42
43. 43
44. 44
45. 45
46. 46
47. 47
48. 48
49. 49

/** @jsx h */
import { Fragment, h, Helmet, withStyles } from "../deps/nano_jsx.ts";

import { Markdown } from "../components/Markdown.tsx";
import { Title } from "../components/Title.tsx";
import { Toc } from "../components/Toc.tsx";
import { parseMarkdownFile } from "../markdown.ts";

const { toc, main } = await parseMarkdownFile({
  path: new URL("../../examples.md", import.meta.url),
});

function cx(className: string): string {
  return `pages_examples__${className}`;
}

export const ExamplesToc = () => {
  return <Toc html={toc} />;
};

export const Examples = () => {
  return withStyles(css)(
    <Fragment>
      <Helmet>
        <Title>Examples</Title>
      </Helmet>
      <div>
        <noscript>
          <div class={cx("alert")}>
            This page does not work with JavaScript disabled.
          </div>
        </noscript>
        <Markdown html={main} />
      </div>
    </Fragment>,
  );
};

const css = `
  .${cx("alert")} {
    padding: var(--gutter-md);
    border: var(--border-width) solid hsl(var(--color-danger));
    margin-bottom: 1em;

    background-color: hsla(var(--color-danger), 0.3);
    border-radius: var(--radius);
    color: hsl(var(--color-on-neutral));
  }
`;