docs/reference: fix duplicate footer, invalid HTML (#6759)

* docs: fix duplicate footer on reference pages * docs: move reference css+js to separate files * lint docs/docs/js files * docs: update RELEASE steps
Leaflet · Aug 14, 2019 · 9a43cf7 · 9a43cf7
1 parent 01ba334
commit 9a43cf7
Show file tree

Hide file tree

Showing 17 changed files with 226 additions and 2,059 deletions.
diff --git a/RELEASE.md b/RELEASE.md
@@ -12,8 +12,8 @@ Documentation for the release process of Leaflet.
   - [ ] files on [Leaflet unpkg page](https://unpkg.com/leaflet@latest/)
 - [ ] Update API docs:
   - [ ] run `npm run docs`
-  - [ ] Copy the built docs from `dist/reference-X.Y.Z.html` to `docs/reference-X.Y.Z.html`
-  - [ ] Update the built docs header to use Jekyll style; see commit [11d716f0964d8bc0d058ca09e9ba8003451b4b8d](https://github.com/Leaflet/Leaflet/commit/11d716f0964d8bc0d058ca09e9ba8003451b4b8d) as reference for the needed changes
+  - [ ] Copy the built docs from `dist/reference-X.Y.Z.html` to `docs/reference-X.Y.Z.html`, remove content before first and after second "CUT HERE" comment
+  - [ ] Insert YAML front matter, see old `docs/reference-X.Y.Z.html` for reference
   - [ ] Commit the new docs to the release branch
 - [ ] Update `docs/reference.html` to redirect to the new version and commit the change to the release branch
 - [ ] Update integrity hashes:

diff --git a/build/leafdoc-templates/html.hbs b/build/leafdoc-templates/html.hbs
@@ -6,6 +6,7 @@
 
 	<link rel="stylesheet" href="../docs/docs/css/normalize.css" />
 	<link rel="stylesheet" href="../docs/docs/css/main.css" />
+	<link rel="stylesheet" href="../docs/docs/css/reference.css" />
 	<script src="../docs/docs/highlight/highlight.pack.js"></script>
 	<link rel="stylesheet" href="../docs/docs/highlight/styles/github-gist.css" />
 	<link rel="stylesheet" href="leaflet.css" />
@@ -14,6 +15,8 @@
 <body class='api-page'>
 	<div class='container'>
 
+	<!-- CUT HERE FOR docs/reference-*.html -->
+
 	<h2>Leaflet API reference</h2>
 	<div id="toc" class="clearfix">
 		<div class="toc-col map-col">
@@ -140,184 +143,11 @@
 
 	{{{ body }}}
 
+	<!-- CUT HERE FOR docs/reference-*.html -->
 
-
-	<div class="footer">
-		<p>
-			© 2010–2019 <a href="http://agafonkin.com/en">Vladimir Agafonkin</a>.
-			Maps © <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors.
-		</p>
 	</div>
 
-	</div>
-
-	<script src="https://leafletjs.com/docs/js/docs.js"></script>
-	<script>
-	hljs.configure({tabReplace: '    '});
-	hljs.initHighlightingOnLoad();
-
-	var elems = document.querySelectorAll('h2, h3, h4, tr');
-
-	for (var i = 0, len = elems.length; i < len; i++) {
-		var el = elems[i];
-
-		if (el.id) {
-			var anchor = document.createElement('a');
-			anchor.setAttribute('anchor', el.id);
-			if (!el.children.length) {
-				// For headers, insert the anchor before.
-				el.parentNode.insertBefore(anchor, el);
-			} else {
-				// For table rows, insert the anchor inside the first <td>
-				el.querySelector('td').appendChild(anchor);
-
-				// Clicking on the row (meaning "the link icon on the ::before)
-				// jumps to the item
-				el.parentNode.onclick = function(hash){
-					return function(ev) {
-						if (ev.offsetX < 0) {
-							window.location.hash = '#' + ev.target.parentNode.id;
-						}
-					};
-				}(el.id);
-			}
-		}
-	}
-
-	elems = document.querySelectorAll('div.accordion');
-	for (var i = 0, len = elems.length; i < len; i++) {
-		var el = elems[i];
-
-		el.querySelector('label').addEventListener('click', function(c){
-			return function() {
-				if (c.className === 'accordion expanded') {
-					c.className = 'accordion collapsed';
-				} else {
-					c.className = 'accordion expanded';
-				}
-			};
-		}(el));
-
-// 		el.className = 'accordion collapsed';
-// 		el.querySelector('.accordion-content').style.display = 'none';
-	}
-
-</script>
-<style>
-
-	h2 {
-		margin-top: 2em;
-	}
-
-	h3 {
-		margin-top: 1em;
-		margin-bottom: .5em;
-	}
-
-	div.accordion {
-		width: 100%;
-/* 		overflow: hidden; */
-	}
-
-	div.accordion-overflow {
-		width: 100%;
-		overflow: hidden;
-	}
-
-	label,
-	section > h4 {
-		display: block;
-		font-weight: 500;
-		margin: 1em 0 0.25em;
-	}
-
-	label {
-		cursor: pointer;
-	}
-
-	div.accordion > div.accordion-overflow > div.accordion-content {
-		max-height: 0;
-		display: none;
-	}
-
-	div.accordion.collapsed > div.accordion-overflow > div.accordion-content {
-		animation-duration: 0.4s;
-		animation-name: collapse;
-/* 		height: 0; */
-		max-height: 0;
-		display: block;
-		overflow: hidden;
-	}
-
-	div.accordion.expanded > div.accordion-overflow > div.accordion-content {
-		animation-duration: 0.4s;
-		animation-name: expand;
-/* 		height: auto; */
-		max-height: none;
-		display: block;
-	}
-
-	@keyframes collapse {
-		0% { max-height: 100vh; }
-		100% { max-height: 0; }
-	}
-
-	@keyframes expand {
-		0% { max-height: 0; }
-		100% { max-height: 100vh; }
-	}
-
-/*	div.accordion > div.accordion-content {
-		transition: max-height 0.4s ease-out 0s;
-	}*/
-
-	div.accordion.expanded > label > span.expander {
-		transform: rotate(90deg);
-	}
-
-	div.accordion > label > span.expander {
-		transition: transform 0.4s ease-out 0s;
-		display: inline-block;
-		font-size: 12px;
-	}
-
-
-	table {
-		margin-bottom: 0;
-	}
-
-/* 	Markdown renders some spurious <p>s inside the table cells */
-	td > p {
-		margin:0;
-	}
-
-/* 	This just looks bad (with the current grey headers for sections which Vlad doesn't really like, so might have to change this) */
-	section.collapsable > div.section-comments > p {
-		margin:0;
-	}
-
-	div.section-comments {
-		margin-bottom: 0.25em;
-	}
-
-/*	section.collapsable div.section-comments {
-		margin: 1em;
-		font-size: 12px;
-	}*/
-
-	section.collapsable pre {
-		margin:0;
-	}
-
-	section {
-		margin-left: 0.5em;
-	}
-
-	section h4, section.collapsable h4 {
-		margin-left: -0.5em;
-	}
-
-
+	<script src="../docs/docs/js/docs.js"></script>
+	<script src="../docs/docs/js/reference.js"></script>
 
-</style>
 </body></html>
diff --git a/docs/_layouts/v2.html b/docs/_layouts/v2.html
@@ -27,6 +27,9 @@
 
 	<link rel="stylesheet" href="{{ root }}docs/css/normalize.css" />
 	<link rel="stylesheet" href="{{ root }}docs/css/main.css" />
+	{% if page.title == 'Documentation' %}
+	<link rel="stylesheet" href="{{ root }}docs/css/reference.css" />
+	{% endif %}
 
 	<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,400italic,700,300' rel='stylesheet' type='text/css'>
 
@@ -116,27 +119,6 @@ <h3 class="tagline">an open-source JavaScript library<br> for mobile-friendly in
   <a class="ext-link forum" href="https://stackoverflow.com/questions/tagged/leaflet" title="Ask for help on Stack Overflow"><img alt="Leaflet questions on Stack Overflow" src="{{root}}docs/images/forum-round.png" width="46" /></a>
 </nav>
 
-<script>
-	hljs.configure({tabReplace: '    '});
-	hljs.initHighlighting();
-
-	(function () {
-		if (document.body.className.indexOf('api-page') !== -1) {
-			var headers = document.getElementsByTagName('h2');
-
-			for (var i = 0, len = headers.length; i < len; i++) {
-				if (headers[i].id) {
-					headers[i].onclick = function(e) {
-						if (e.offsetX < 0) {
-							window.location.hash = '#' + this.id;
-						}
-					};
-				}
-			}
-		}
-	})();
-</script>
-
 <script>
 	var _gaq = _gaq || [];
 	_gaq.push([ '_setAccount', 'UA-4147697-4' ]);
@@ -155,5 +137,8 @@ <h3 class="tagline">an open-source JavaScript library<br> for mobile-friendly in
 </script>
 
 <script src="{{ root }}docs/js/docs.js"></script>
+{% if page.title == 'Documentation' %}
+<script src="{{ root }}docs/js/docs.js"></script>
+{% endif %}
 </body>
 </html>
diff --git a/docs/docs/css/reference.css b/docs/docs/css/reference.css
@@ -0,0 +1,111 @@
+h2 {
+    margin-top: 2em;
+}
+
+h3 {
+    margin-top: 1em;
+    margin-bottom: .5em;
+}
+
+div.accordion {
+    width: 100%;
+/* 		overflow: hidden; */
+}
+
+div.accordion-overflow {
+    width: 100%;
+    overflow: hidden;
+}
+
+label,
+section > h4 {
+    display: block;
+    font-weight: 500;
+    margin: 1em 0 0.25em;
+}
+
+label {
+    cursor: pointer;
+}
+
+div.accordion > div.accordion-overflow > div.accordion-content {
+    max-height: 0;
+    display: none;
+}
+
+div.accordion.collapsed > div.accordion-overflow > div.accordion-content {
+    animation-duration: 0.4s;
+    animation-name: collapse;
+/* 		height: 0; */
+    max-height: 0;
+    display: block;
+    overflow: hidden;
+}
+
+div.accordion.expanded > div.accordion-overflow > div.accordion-content {
+    animation-duration: 0.4s;
+    animation-name: expand;
+/* 		height: auto; */
+    max-height: none;
+    display: block;
+}
+
+@keyframes collapse {
+    0% { max-height: 100vh; }
+    100% { max-height: 0; }
+}
+
+@keyframes expand {
+    0% { max-height: 0; }
+    100% { max-height: 100vh; }
+}
+
+/*	div.accordion > div.accordion-content {
+    transition: max-height 0.4s ease-out 0s;
+}*/
+
+div.accordion.expanded > label > span.expander {
+    transform: rotate(90deg);
+}
+
+div.accordion > label > span.expander {
+    transition: transform 0.4s ease-out 0s;
+    display: inline-block;
+    font-size: 12px;
+}
+
+
+table {
+    margin-bottom: 0;
+}
+
+/* 	Markdown renders some spurious <p>s inside the table cells */
+td > p {
+    margin:0;
+}
+
+/* 	This just looks bad (with the current grey headers for sections which Vlad doesn't really like, so might have to change this) */
+section.collapsable > div.section-comments > p {
+    margin:0;
+}
+
+div.section-comments {
+    margin-bottom: 0.25em;
+}
+
+/*	section.collapsable div.section-comments {
+    margin: 1em;
+    font-size: 12px;
+}*/
+
+section.collapsable pre {
+    margin:0;
+}
+
+section {
+    margin-left: 0.5em;
+}
+
+section h4, section.collapsable h4 {
+    margin-left: -0.5em;
+}