1. Top
  2. macana
  3. Files
  4. page_builder
  5. default_theme
  6. components
  7. html.tsx
macana

Static site generator for Obsidian Vault

  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
  50. 50
  51. 51
  52. 52
  53. 53
  54. 54
  55. 55
  56. 56
  57. 57
  58. 58
  59. 59
  60. 60
  61. 61
  62. 62
  63. 63
  64. 64
  65. 65
  66. 66
  67. 67
  68. 68
  69. 69
  70. 70
  71. 71
  72. 72
  73. 73
  74. 74
  75. 75
  76. 76
  77. 77
  78. 78
  79. 79
  80. 80
  81. 81
  82. 82
  83. 83
  84. 84
  85. 85
  86. 86
  87. 87
  88. 88
  89. 89
  90. 90
  91. 91
  92. 92
  93. 93
  94. 94
  95. 95
  96. 96
  97. 97
  98. 98
  99. 99
  100. 100
  101. 101
  102. 102
  103. 103
  104. 104
  105. 105
  106. 106
  107. 107
  108. 108
  109. 109
  110. 110
  111. 111
  112. 112
  113. 113
  114. 114
  115. 115
  116. 116
  117. 117
  118. 118 
// SPDX-FileCopyrightText: 2024 Shota FUJI <pockawoooh@gmail.com>
//
// SPDX-License-Identifier: Apache-2.0

/** @jsx h */

import { h } from "../../../deps/deno.land/x/nano_jsx/mod.ts";
import {
	Fragment,
	jsx,
	jsxs,
} from "../../../deps/deno.land/x/nano_jsx/jsx-runtime/index.ts";
import type * as Mdast from "../../../deps/esm.sh/mdast/types.ts";
import { toHast } from "../../../deps/esm.sh/mdast-util-to-hast/mod.ts";
import { toJsxRuntime } from "../../../deps/esm.sh/hast-util-to-jsx-runtime/mod.ts";

import type {
	Document,
	DocumentTree,
} from "../../../tree_builder/interface.ts";

import { usePathResolver } from "../contexts/path_resolver.tsx";
import * as css from "../css.ts";

import { globalStyles } from "./global_styles.ts";
import { mapTocItem, tocMut } from "../hast/hast_util_toc_mut.ts";

import * as DocumentTreeUI from "./organisms/document_tree.tsx";
import * as Footer from "./organisms/footer.tsx";
import * as Toc from "./organisms/toc.tsx";
import * as SiteLayout from "./templates/site_layout.tsx";

function toNode(hast: ReturnType<typeof toHast>) {
	return toJsxRuntime(hast, {
		Fragment,
		// @ts-ignore: library type being unnecessary narrow
		jsx,
		// @ts-ignore: library type being unnecessary narrow
		jsxs,
	});
}

export const styles = css.join(
	globalStyles,
	DocumentTreeUI.styles,
	Footer.styles,
	SiteLayout.styles,
	Toc.styles,
);

export interface ViewProps {
	document: Document;

	/**
	 * Root document tree, for navigations and links.
	 */
	tree: DocumentTree;

	/**
	 * The document's content HTML.
	 */
	content: Mdast.Root;

	locale: string;

	copyright: string;
}

export function View(
	{ document, locale, content, tree, copyright }: ViewProps,
) {
	const path = usePathResolver();

	const topLevelDocs = tree.locales.get(locale);
	if (!topLevelDocs) {
		const locales = Array.from(tree.locales.keys());
		throw new Error(
			`Unknown locale: "${locale}" (available locales = ${locales.join(", ")})`,
		);
	}

	const hast = toHast(content);

	const toc = tocMut(hast).map((item) =>
		mapTocItem(item, (item) => toNode({ type: "root", children: item }))
	);

	const contentNodes = toNode(hast);

	return (
		<html lang={locale}>
			<head>
				<meta charset="utf-8" />
				<meta name="viewport" content="width=device-width, initial-scale=1" />
				<title>{document.metadata.title}</title>
				<link
					rel="stylesheet"
					href={path.resolve(["assets", "global.css"])}
				/>
			</head>
			<body>
				<SiteLayout.View
					aside={toc.length > 0 && <Toc.View toc={toc} />}
					nav={
						<DocumentTreeUI.View
							tree={topLevelDocs}
							currentPath={document.file.path}
						/>
					}
					footer={<Footer.View copyright={copyright} />}
				>
					<h1>{document.metadata.title}</h1>
					{contentNodes}
				</SiteLayout.View>
			</body>
		</html>
	);
}