forked from DigitalHistory/advanced-topics
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
91 lines (74 loc) · 4.03 KB
/
index.html
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
<!DOCTYPE html>
<html>
<head>
<title>Advanced Topics | by Jonathan Kleiman</title>
<meta charset="UTF-8">
<meta name="description" content="a markdown-based mapping exercise." />
<!-- these script tags load important javascript "libraries"
that our own little scripts depend on. These are complex
programs way beyond our capacities to construct; but we can
make use of them nonetheless -->
<!-- jQuery is an important framework used by many web projects -->
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<!-- markdown-it is our markdown parser, which translates markdown into HTML -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/markdown-it.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/markdown-it-attrs.browser.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/markdown-it-footnote.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/markdown-it-emoji.js"></script>
<!-- call all our CSS files: chota, site-wide mods, and page-specific mods -->
<link rel="stylesheet" href="css/chota.css" type="text/css" media="screen" />
<link rel="stylesheet" href="css/site-styles.css" type="text/css" media="screen" />
<!-- doesn't exist yet -->
<link rel="stylesheet" href="css/splash-styles.css" type="text/css" media="screen" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
</head>
<!-- note the 'onload' attribute here.
it calls the function "initialize" (defined below)
when the body has finished loading. That's because the
Javascript will not run properly unless it
waits for the elements inside the body to load. Therefore
we don't run the most important parts of the code until the page has finished loading.
-->
<body onload="initializePage();">
<header id="page-header" class="nav">
<a class="navbar-brand pull-right" href="#">Title Here | by Your Name</a> <!-- title should be descriptive -->
<!-- menu content is set in ./js/static-parts.js and appended here -->
</header>
<main class="main-container">
<!-- will be filled with markdown from index.md -->
<section id="maintext"></section>
</main>
<!-- footer content is set in ./js/static-parts.js -->
<footer id="page-footer">
</footer>
<script>
// we define the main actions of the script as a function which wil lbe run when the
// page resources have been completely loaded.
//window.
const initializePage = function() {
// instantiate the parser object and declare the
// placeholder variable for the rendered content
// while storing the original content so as not to lose it
let md = window.markdownit('commonmark', {
html: true,
linkify: true}),
renderedcontent = "",
introContent = $("#intro").html(),
mainContent = $("#maintext").html();
/* ause footnote and attribute plugins */
md.use(window.markdownItAttrs)
md.use(window.markdownitFootnote)
md.use(window.markdownitEmoji);
//retrieve the markdown files, parse them,
// and use it to replace the contents of #intro and #maintext
$.get("./index.md", function (response2) {
let content = response2,
renderedcontent2 = md.render(content);
$("#maintext").html(mainContent + renderedcontent2);
}, 'text');
};
</script>
<!-- generate header and footer using simple site-wide script -->
<script src="./js/static-parts.js"></script>
</body>
</html>