Add swiping on mobile to open the sidebar (#31)

Author: ScribbleTAS

README.md

@@ -1,25 +1,21 @@
-[![hugo github pages](https://github.com/MinecraftTAS/minecrafttas.com/actions/workflows/gh-pages.yaml/badge.svg)](https://test.minecrafttas.com)  
 The source code for https://minecrafttas.com
 
-Uses a completely custom theme that I would not recommend to copy...
+Uses a custom theme.
 ## Installation
-1. Download [Hugo Extended](https://github.com/gohugoio/hugo/releases) (hugo_extended_\<number\>_windows-amd64)
-2. Extract it and put it in the mctas.com folder
-3. Run `./hugo.exe server` or `./startserver.sh`
-5. Open `http://localhost:1313/`
+Download and install Hugo Extended, either via the [releases page](https://github.com/gohugoio/hugo/releases) or by using
+```
+winget install Hugo.Hugo.Extended
+```
+And that's it! No other dependencies needed! Hugo Extended comes with Sass support for css and we use *raw* JavaScript for our needs, which is kind of a cleansing experience...
 
 ## Contributing
 Want to add new pages and guides? Add a markdown file into the content folder and choose a subdirectory. The html will be automatically generated.  
 
 You may also use the command `hugo new <filename>.md` or `hugo new <directory>/<filename>.md` to let hugo initialize a new file with a template.
 
-### HTML in markdown
-To add html to your markdown simply encase the tags with `{{<rawhtml>}}`
-```html
-{{<rawhtml>}}
-	<p> Your html code here! <p>
-{{</rawhtml>}}
-```
+### Shortcodes
+Our custom template features a bunch of shortcodes
+A list is available on the [Wiki](https://github.com/MinecraftTAS/minecrafttas.com/wiki/Shortcodes)
 
 ## Generating
 Running `hugo` will generate the html files in the `public/` directory

assets/scss/styles.scss

@@ -151,6 +151,7 @@ nav.mainNav {
 		max-height: 60%;
 		max-width: 30%;
 		top: 10rem;
+		left: -1000px;
 
 		@media screen and (max-width: 850px) {
 			top: initial;
@@ -185,7 +186,7 @@ nav.mainNav {
 		}
 
 		.buttonclose {
-			background-color: $bg-color, 20%;
+			background-color: $bg-color;
 			background-image: url(/images/OpenCloseArrow.svg);
 			background-repeat: no-repeat;
 			background-size: cover;
@@ -305,6 +306,7 @@ section {
 			background-color: #272822;
 			border-radius: 10px;
 			padding: 15px;
+			overflow-x: auto;
 
 			code {
 				background-color: initial;

content/downloads/playback/tasmod.md

@@ -9,7 +9,7 @@ prev: false
 ---
 
 {{<rawhtml>}}
-<p align="center"><img src="https://minecrafttas.com/images/TASmodLogo.svg" alt="Logo" width="500"></p>
+<p align="center"><img class="screenshot" src="https://minecrafttas.com/images/TASmodLogo.svg" alt="Logo"></p>
 {{</rawhtml>}}
 
 A [Tool-Assisted Speedrun](https://tasvideos.org/WelcomeToTASVideos) mod for Minecraft.  

layouts/baseof.html

@@ -29,7 +29,7 @@
 		{{ end }}
 		<meta property="og:description" content="{{.Description}}">
 
-		<script src="/js/link-headings.js" defer async></script>
+		<script src="/js/link-headings.js" defer async="false"></script>
 	{{ end }}
 		<meta name="keywords" content="Minecraft, TAS, Tool-Assisted Speedrun, Modification, Playback, Non-Playback">
 		<meta name="viewport" content="width=device-width, initial-scale=1">

startserver.sh

@@ -1,49 +1,90 @@
 let buttonelem = document.getElementsByClassName("buttonclose")[0]
-buttonelem.addEventListener("click", ()=>{
+buttonelem.addEventListener("click", () => {
 	addTransition(true)
 	toggle()
 })
 
 let wrapper = document.getElementsByClassName("toc--wrapper")[0]
 let toc = document.getElementsByClassName("toc")[0]
-wrapper.style.left = -(toc.getBoundingClientRect().width+7)+"px"
+wrapper.style.left = -(toc.getBoundingClientRect().width + 7) + "px"
 
 let isOpen = localStorage.getItem("sidebar") !== null ? true : false
 open(isOpen)
 
 addEventListener('resize', (event) => {
-	if(wrapper.classList.contains("opened")){
-		wrapper.style.transform = "translate("+(toc.getBoundingClientRect().width+7)+"px)"
+	if (wrapper.classList.contains("opened")) {
+		wrapper.style.transform = "translate(" + (toc.getBoundingClientRect().width + 7) + "px)"
 	}
-	wrapper.style.left = -(toc.getBoundingClientRect().width+7)+"px"
+	wrapper.style.left = -(toc.getBoundingClientRect().width + 7) + "px"
 });
 
-function toggle(){
+function toggle() {
 	let wrapper = document.getElementsByClassName("toc--wrapper")[0]
 	open(!wrapper.classList.contains("opened"))
 }
 
-function open(open){
+function open(open) {
 	let wrapper = document.getElementsByClassName("toc--wrapper")[0]
-	if(!open){
+	if (!open) {
 		wrapper.classList.remove("opened")
 		wrapper.style.transform = "initial"
 		localStorage.removeItem("sidebar")
-	}else{
+	} else {
 		wrapper.classList.add("opened")
-		wrapper.style.transform = "translate("+(toc.getBoundingClientRect().width+7)+"px)"
+		wrapper.style.transform = "translate(" + (toc.getBoundingClientRect().width + 7) + "px)"
 		localStorage.setItem("sidebar", "open")
 	}
 }
 
-function addTransition(add){
+function addTransition(add) {
 	let wrapper = document.getElementsByClassName("toc--wrapper")[0]
-	let button =  document.getElementsByClassName("buttonclose")[0]
-	if(add){
+	let button = document.getElementsByClassName("buttonclose")[0]
+	if (add && !wrapper.classList.contains("transitioner")) {
 		wrapper.classList.add("transitioner")
 		button.classList.add("transitioner")
-	}else{
+	} else if(!add && wrapper.classList.contains("transitioner")) {
 		wrapper.classList.remove("transitioner")
 		button.classList.remove("transitioner")
 	}
-}
+}
+
+document.addEventListener('touchstart', handleTouchStart, false);
+document.addEventListener('touchmove', handleTouchMove, false);
+
+var xDown = null;
+var yDown = null;
+
+function getTouches(evt) {
+	return evt.touches ||             // browser API
+		evt.originalEvent.touches; // jQuery
+}
+
+function handleTouchStart(evt) {
+	const firstTouch = getTouches(evt)[0];
+	xDown = firstTouch.clientX;
+	yDown = firstTouch.clientY;
+};
+
+function handleTouchMove(evt) {
+	if (!xDown || !yDown) {
+		return;
+	}
+
+	var xUp = evt.touches[0].clientX;
+	var yUp = evt.touches[0].clientY;
+
+	var xDiff = xDown - xUp;
+	var yDiff = yDown - yUp;
+
+	if (Math.abs(xDiff) > Math.abs(yDiff)) {/*most significant*/
+		if (xDiff > 200) {
+			/* right swipe */
+			addTransition(true)
+			open(false)
+		} else if (xDiff < -100) {
+			/* left swipe */
+			addTransition(true)
+			open(true)
+		}
+	}
+};