tinyrabbit
/
wobbly


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141
							<html>
	<head>
		<title>Wobbly, the Web-based Gemini Browser</title>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1">
		<link rel='icon' href='data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>♊️</text></svg>'>
		<style>
			body { margin: 0; padding: 0 0 5em}
			#wobbly-toolbar { background-color: #cccccc; width: 100%; position: fixed; top: 0; }
			#wobbly-tools { display: flex; max-width: 60em; padding: 0.2em; margin: auto; }
			#wobbly-tools input { flex-basis: 100%; }
			#wobbly-help { display: none; background-color: #ffffcc; }
			#wobbly-help-text { max-width: 45em; margin: auto; padding: 1.5em 1em 0.5em; }
			#wobbly-window { max-width: 45em; margin: auto; padding: 2em 1em 5em; }
		</style>
		<script>
			var geminiHistory = []
			var geminiPresent = 0
			function geminiInit(){
				document.getElementById("wobbly-window").innerHTML = ""

				var startpage = "gemini://warmedal.se/~wobbly/"
				query_string = window.location.href.split('?')
				if (query_string.length > 1){
					startpage = query_string[1]
				}

				document.getElementById("wobbly-addressbar").value = startpage
				geminiHistory.push({url:startpage})
				geminiGo()
			}
			function geminiHelpToggle(){
				if (document.getElementById("wobbly-help-button").innerHTML === 'Help') {
					document.getElementById("wobbly-help").style.display = 'block'
					document.getElementById("wobbly-help-button").innerHTML = "Unhelp"
				} else {
					document.getElementById("wobbly-help").style.display = 'none'
					document.getElementById("wobbly-help-button").innerHTML = "Help"
				}
			}
			function geminiGo(){
				url = document.getElementById("wobbly-addressbar").value.trim().split("?")[0]
				if (url.length == 0) {
					return
				}
				if (! url.startsWith("gemini://")) {
					url = "gemini://" + url
				}
				if (! (url === geminiHistory[geminiPresent].url)) {
					geminiPresent++
					geminiHistory[geminiPresent] = {url:url}
					while (geminiHistory.length > geminiPresent +1) {
						geminiHistory.pop()
					}
				}
				var xmlHttp = new XMLHttpRequest()
				xmlHttp.open( "GET", "browser.cgi?" + url )
				xmlHttp.onload = function (e) {
					var body = xmlHttp.responseText
					document.getElementById("wobbly-window").innerHTML = body
					geminiHistory[geminiPresent].body = body
				}
				xmlHttp.send(null)
			}
			function geminiBack(){
				if (geminiPresent > 0) {
					geminiPresent--
					document.getElementById("wobbly-addressbar").value = geminiHistory[geminiPresent].url
					document.getElementById("wobbly-window").innerHTML = geminiHistory[geminiPresent].body
				}
			}
			// Big thanks to idiomdrottning for fixing my geminiUp function <3
			function geminiUp(){
				var components = geminiHistory[geminiPresent].url.match(/\/[^/]*/g)
				if ("/" == components.pop()) components.pop()
				if (components.length == 1) return
				document.getElementById("wobbly-addressbar").value = "gemini:" + components.join("") + "/"
				geminiGo()
			}
			function geminiForward(){
				if (geminiPresent < geminiHistory.length - 1) {
					geminiPresent++
					document.getElementById("wobbly-addressbar").value = geminiHistory[geminiPresent].url
					document.getElementById("wobbly-window").innerHTML = geminiHistory[geminiPresent].body
				}
			}
			function geminiEnterListener(e) {
				if(e.keyCode === 13) {
					e.preventDefault()
					geminiGo()
				}
			}
			function geminiLinkClickListener(e) {
				var e = window.e || e;
				if (e.target.tagName === 'A' && e.target.href.startsWith("gemini://")) {
					// We only care about clicked gemini:// links
					e.preventDefault()
					document.getElementById("wobbly-addressbar").value = e.target.href
					geminiGo()
				} else {
					return;
				}
			
			}
			if (document.addEventListener) {
				document.addEventListener('click', geminiLinkClickListener, false);
			} else {
				document.attachEvent('onclick', geminiLinkClickListener);
			}
		</script>
	</head>
	<body onload="geminiInit()">
		<div id="wobbly-toolbar">
			<div id="wobbly-tools">
				<button onclick="geminiHelpToggle()" id="wobbly-help-button">Help</button>
				<button onclick="geminiBack()" id="wobbly-back">⬅️</button>
				<button onclick="geminiUp()" id="wobbly-up">⬆️</button>
				<button onclick="geminiForward()" id="wobbly-forward">➡️</button>
				<input id="wobbly-addressbar" onkeypress="geminiEnterListener(event)"/>
				<button onclick="geminiGo()" id="wobbly-go">Go!</button>
			</div>
		</div>
		<div id="wobbly-help">
			<div id="wobbly-help-text">
				<h1>Wobbly Help Section</h1>
				<ul>
					<li>This browser is for casual reading. It only supports text documents, and only cares about any sort of layout in gemtext ones.</li>
					<li>Javascript has no notion of sockets that aren't http/https. Therefore all traffic from here goes through a web server that fetches and serves the gemini pages translated to html. Input and client certificates are not supported, because they would be unsafe under these circumstances.</li>
					<li>'Back' and 'Forward' buttons take you to cached versions of those pages. Pressing 'Go!' without typing in a new URL is a refresh.</li>
					<li>'Up' means to go one level higher in the path on the current domain. If you are on 'gemini://warmedal.se/~antenna/' and press 'Up' you will visit 'gemini://warmedal.se/'.</li>
					<li>Non-gemini links will open in a new tab in your browser as usual!</li>
				</ul>
			</div>
		</div>
		<div id="wobbly-window">
			<h1>This Browser Requires Javascript</h1>
			<p>Sorry, there's no meaningful way around that. It's not terribly much, however. Feel free to check the source code.</p>
		</div>
	</body>
</html>