Ratstail91/mechaimmensewarfare.com
Archived
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Hid TOC on desktops & tablets, read more

Browse Source 
* I switched the markdown engine to markdown-it.
* I used a plugin from the new engine called markdown-it-container to generate a div tag around the TOC
* Configured the plugin to generate the classname mobileOnly
* Recreated semantic's mobile only option using CSS.
This commit is contained in:
Kayne Ruse
2017-03-22 20:07:55 +11:00
parent 74f41ac28e
commit 06bb8b8ed0
5 changed files with 36 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public_html/index.html
+3 -2
View File
@@ -1,9 +1,10 @@
<html> <html>
<head> <head>
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<script src="node_modules/markdown/lib/markdown.js"></script> <script src="node_modules/markdown-it/dist/markdown-it.js"></script>
<script src="utilities.js"></script> <script src="node_modules/markdown-it-container/dist/markdown-it-container.js"></script>
<script src="tsorter.min.js"></script> <script src="tsorter.min.js"></script>
<script src="utilities.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/semantic-ui/2.2.8/semantic.min.css"> <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/semantic-ui/2.2.8/semantic.min.css">
<link rel="stylesheet" type="text/css" href="styles/shared.css" /> <link rel="stylesheet" type="text/css" href="styles/shared.css" />
</head> </head>
public_html/package.json
+2 -1
View File
@@ -9,7 +9,8 @@
"author": "", "author": "",
"license": "ISC", "license": "ISC",
"dependencies": { "dependencies": {
"markdown": "^0.5.0", "markdown-it": "^8.3.1",
"markdown-it-container": "^2.0.0",
"markdown-toc": "^1.1.0" "markdown-toc": "^1.1.0"
} }
} }
public_html/rules.md
+4
View File
@@ -1,5 +1,7 @@
Fight your way across vast expanses, conquer enemy batallions, and survive in this world of immense mechas - wild combat machines commanded by the best pilots this side of the catastrophe. Fight your way across vast expanses, conquer enemy batallions, and survive in this world of immense mechas - wild combat machines commanded by the best pilots this side of the catastrophe.
::: mobileOnly
- [Basic Rules](#basic-rules) - [Basic Rules](#basic-rules)
* [Phases of a Turn](#phases-of-a-turn) * [Phases of a Turn](#phases-of-a-turn)
- [Types of Cards](#types-of-cards) - [Types of Cards](#types-of-cards)
@@ -25,6 +27,8 @@ Fight your way across vast expanses, conquer enemy batallions, and survive in th
* [Maximum Hand Size](#maximum-hand-size) * [Maximum Hand Size](#maximum-hand-size)
* [Pilot Idiocy](#pilot-idiocy) * [Pilot Idiocy](#pilot-idiocy)
:::
Basic Rules Basic Rules
=== ===
public_html/styles/shared.css
+7
View File
@@ -58,3 +58,10 @@ footer {
.ascend:after{ .ascend:after{
content: "\25BC"; content: "\25BC";
} }
/* device only features */
@media screen and (min-width: 480px) {
.mobileOnly {
display: none;
}
}
public_html/utilities.js
+20 -2
View File
@@ -1,4 +1,22 @@
//PARAM: fname = file to load with an ajax request //global markdown object and configuration
var markdown = window.markdownit()
//configure for semantic-style visibility controls
.use(window.markdownitContainer, 'mobileOnly', {
validate: function(params) {
return params.trim().match(/^mobileOnly$/);
},
render: function (tokens, idx) {
if (tokens[idx].nesting === 1) {
//opening tag
return '<div class="mobileOnly">';
} else {
// closing tag
return '</div>';
}
}
});
//PARAM: fname = file to load with an ajax requesti
//PARAM: node = DOM node to store the resulting data //PARAM: node = DOM node to store the resulting data
function printHTML(fname, node) { function printHTML(fname, node) {
var request = new XMLHttpRequest(); var request = new XMLHttpRequest();
@@ -30,7 +48,7 @@ function printMarkdown(fname, node) {
} }
if (request.status === 200) { if (request.status === 200) {
node.innerHTML = markdown.toHTML(request.responseText); node.innerHTML = markdown.render(request.responseText);
} }
else { else {
console.log("printMarkdown status:", request.status); console.log("printMarkdown status:", request.status);