docs/_includes/doc.tsx at c7f6e796c9859abbd26790f151d05e3223921ccd · denoland/docs · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
import renderCommand from "./renderCommand.tsx";

export const layout = "layout.tsx";

export const ogImage = (data: Lume.Data) => {
  return data.url + "/index.png";
};

export default function Doc(data: Lume.Data, helpers: Lume.Helpers) {
  let file = data.page.sourcePath;
  const sidebar = data.sidebar;
  let renderedCommand = null;

  if (data.command) {
    const { rendered, toc } = renderCommand(data.command, helpers);
    renderedCommand = rendered;
    data.toc = toc.concat(...data.toc);
  }

  const isReference = data.url.startsWith("/api/");
  const isExamples = data.url.startsWith("/examples/");
  const isExampleScript = (data.page.data.content as { type?: string })?.type;
  const isLintRule = data.url.startsWith("/lint/rules/");
  const isHome = data.url === "/";

  const hasBreadcrumbs = !isExamples && !isHome && !isReference;

  if (isLintRule) {
    file = `/lint/rules/${encodeURIComponent(data.title ?? "")}.md`;
  }

  return (
    <main
      id="content"
      class={`content ${isExampleScript ? "examples-content" : ""}`}
    >
      <div class="w-full">
        <article class="mx-auto">
          {hasBreadcrumbs && (
            <div data-pagefind-ignore>
              <data.comp.Breadcrumbs
                title={data.title!}
                sidebar={sidebar}
                url={data.url}
              />
            </div>
          )}

          <div data-pagefind-ignore>
            <data.comp.TableOfContentsMobile toc={data.toc} data={data} />
          </div>

          <div
            data-color-mode="auto"
            data-light-theme="light"
            data-dark-theme="dark"
            class="markdown-body mt-4 sm:mt-6"
            data-pagefind-meta="title[content]"
          >
            {!isReference && (
              <h1
                dangerouslySetInnerHTML={{
                  __html: helpers.md(data.title!, true),
                }}
              >
              </h1>
            )}
            {data.available_since && (
              <div class="bg-gray-200 rounded-md text-sm py-3 px-4 mb-4 font-semibold">
                Available since {data.available_since}
              </div>
            )}
            {renderedCommand}
            {data.children}
          </div>
        </article>
        {!isReference && (
          <div data-pagefind-ignore>
            <data.comp.Feedback file={file} />
          </div>
        )}
      </div>

      {(isReference && data.children.props.data.toc_ctx) && (
        <div data-pagefind-ignore>
          <data.comp.RefToc
            documentNavigation={data.children.props.data.toc_ctx
              .document_navigation}
            documentNavigationStr={data.children.props.data.toc_ctx
              .document_navigation_str}
          />
        </div>
      )}
    </main>
  );
}