clickable headers wip

src/jsMain/kotlin/StarfieldEye.kt

@@ -92,7 +92,13 @@ fun doRouting(windowHash: String) {
     keyPressedHook = {}
     when {
         windowHash.startsWith("#about") -> {
-            aboutView()
+            val parts = windowHash.split("/")
+            println(parts)
+            if (parts.size == 2) {
+                aboutView(parts.last())
+            } else {
+                aboutView()
+            }
         }
 
         windowHash.startsWith("#manual") -> {

src/jsMain/kotlin/components/Misc.kt

@@ -1,11 +1,28 @@
 package components
 
+import kotlinx.browser.window
 import kotlinx.html.TagConsumer
+import kotlinx.html.id
 import kotlinx.html.js.a
+import kotlinx.html.js.h2
 import org.w3c.dom.HTMLElement
+import kotlin.math.max
 
 fun TagConsumer<HTMLElement>.wikiLink(page: String) {
     a("https://starfieldwiki.net/wiki/Starfield:$page", target = "_blank", classes = "a-button") {
         +"Wiki"
     }
+}
+
+fun TagConsumer<HTMLElement>.linkableH2(text: String) {
+    val page = window.location.href.let {url ->
+        val start = url.indexOf("#") + 1
+        val end = url.indexOf( "/", start).takeIf { it > 0 } ?: url.length
+        url.substring(start, end)
+    }
+    h2 {
+        val idText = text.replace(" ", "_").lowercase()
+        id = idText
+        a("#$page/$idText") { +text }
+    }
 }

src/jsMain/kotlin/views/AboutView.kt

@@ -1,11 +1,15 @@
 package views
 
+import components.linkableH2
+import el
 import kotlinx.html.*
+import org.w3c.dom.HTMLElement
 import replaceElement
 import updateUrl
 
-fun aboutView() {
-    updateUrl("about")
+fun aboutView(section: String? = null) {
+    val url = "about" + (section?.let { "/$it" } ?: "")
+    updateUrl(url)
     replaceElement {
         div {
             id = "about-view"
@@ -14,7 +18,7 @@ fun aboutView() {
                 id = "sections"
                 div("section-view-box") {
                     id = "how-to-use"
-                    h2 { +"About" }
+                    linkableH2("About")
                     div("accent-line") { +"The winks and the nods" }
 
                     p { +"Starfield Eye is an Ad Free Companion App for Starfield." }
@@ -34,8 +38,7 @@ fun aboutView() {
                 }
 
                 div("section-view-box") {
-                    id = "features"
-                    h2 { +"Instant Features" }
+                    linkableH2("Instant Features")
                     div("accent-line") { +"" }
                     p { +"These features work right now without any setup required. Try them out today!" }
 
@@ -84,8 +87,7 @@ fun aboutView() {
                     }
                 }
                 div("section-view-box") {
-                    id = "features"
-                    h2 { +"Advanced Features" }
+                    linkableH2("Advanced Features" )
                     div("accent-line") { +"" }
                     //TODO - links to pages
                     p { +"These features require you to Dock to work. You'll need to go through the setup on the Dock page, which requires that you have SFSE installed." }
@@ -115,8 +117,7 @@ fun aboutView() {
                 }
 
                 div("section-view-box") {
-                    id = "features"
-                    h2 { +"Planned Features" }
+                    linkableH2("Planned Features")
                     div("accent-line") { +"" }
                     p { +"While there are no guarantees, these are the features I'm hoping to build out once we have proper modding tools" }
 
@@ -130,4 +131,5 @@ fun aboutView() {
             }
         }
     }
+    section?.let { el<HTMLElement?>(it)?.scrollIntoView() }
 }

src/jsMain/kotlin/views/DockView.kt

@@ -1,5 +1,6 @@
 package views
 
+import components.linkableH2
 import components.toggle
 import deleteUserData
 import docking.healthCheck
@@ -109,10 +110,10 @@ private fun DIV.connectToGame() {
     }
 }
 
-private fun DIV.manageData() {
+private fun TagConsumer<HTMLElement>.manageData() {
     div("section-view-box") {
         id = "manage-data"
-        h2 { +"Manage Data" }
+        linkableH2("Manage Data")
         div("accent-line") { +"The mind's long con: forgetfulness" }
 
         p { +"User data is only stored on the browser. (I don't track anything you do)." }
@@ -159,7 +160,7 @@ private fun DIV.manageData() {
 private fun TagConsumer<HTMLElement>.settings() {
     div("section-view-box") {
         id = "settings"
-        h2 { +"Change Settings" }
+        linkableH2("Change Settings")
         div("accent-line") { +"Do my ears play a false tune?" }
 
         p { +"Manage site wide settings." }
@@ -186,10 +187,10 @@ private fun TagConsumer<HTMLElement>.settings() {
     }
 }
 
-private fun DIV.prepareToDock() {
+private fun TagConsumer<HTMLElement>.prepareToDock() {
     div("section-view-box") {
         id = "docking-install"
-        h2 { +"Preparing to Dock" }
+        linkableH2("Preparing to Dock")
         div("accent-line") { +"Burning helium out there" }
 
         h3 { +"Installing Mods" }

src/jsMain/kotlin/views/ManualView.kt

@@ -1,5 +1,6 @@
 package views
 
+import components.linkableH2
 import kotlinx.html.*
 import replaceElement
 import updateUrl
@@ -14,39 +15,42 @@ fun manualView() {
                 id = "sections"
                 div("section-view-box") {
                     id = "how-to-use"
-                    h2 { +"Overview" }
+                    linkableH2("Overview")
                     div("accent-line") { +"The winks and the nods" }
 
                     p { +"The Eye has a ton of features. If you're wondering how to use a specific page, read through its relevant section below." }
 
                     p {
                         +"Please report any issues as "
-                        a(href = "https://github.com/ManApart/starfield-eye/issues", target = "_blank") { +"github issues." }
+                        a(
+                            href = "https://github.com/ManApart/starfield-eye/issues",
+                            target = "_blank"
+                        ) { +"github issues." }
                     }
 
                 }
                 div("section-view-box") {
-                    h2 { +"Galaxy View" }
+                    linkableH2("Galaxy View")
                     div("accent-line") { +"Blinks in the blackest sea" }
 
                     p { +"Search the galaxy by name of the star or planets to see the system on the map." }
                     p { +"Click a system to view that system's star, planets, and resources" }
                     p { +"User data is stored on your browser. Use Export to save any user data you've added (outposts, labels, notes etc). Use Import to load your data back into the site (or onto another browser)." }
                 }
                 div("section-view-box") {
-                    h2 { +"Catalogue View" }
+                    linkableH2("Catalogue View")
                     div("accent-line") { +"Time dances its years forward" }
                     p { +"The catalogue gives you access to a powerful search. Here you can search for systems and planets using a large number of criteria." }
                     p { +"Comma separated, you can search for things like planet names, available resources (by symbol or name), planet outposts, and more. Comma separated terms are considered an \"AND\", so you can filter for planets with a warm temperature that include iron." }
                     p { +"Search results display the system and any matching planets. By hovering/tapping a result, you'll see a detailed view of that star or planet. You can then view it's system to see more information about that system" }
                 }
                 div("section-view-box") {
-                    h2 { +"Life Signs View" }
+                    linkableH2("Life Signs View")
                     div("accent-line") { +"" }
                     p { +"" }
                 }
                 div("section-view-box") {
-                    h2 { +"System View" }
+                    linkableH2("System View")
                     div("accent-line") { +"Do the meet and greets later" }
                     p { +"Clicking on a system sends you to the system view. This view includes an interactive orrery that lets you browse the various bodies of the system." }
                     p { +"Navigate by clicking the star, planets, or moons, or use the arrow keys." }
@@ -55,22 +59,22 @@ fun manualView() {
                     p { +"Fast travel is in super alpha, but I'm releasing it in it's wip state. If you're connected to the game and have your in game starmap open, you can use this view and click the \"travel\" button. If everything works, your ship will set course to the planet you picked." }
                 }
                 div("section-view-box") {
-                    h2 { +"Outposts View" }
+                    linkableH2("Outposts View")
                     div("accent-line") { +"" }
                     p { +"" }
                 }
                 div("section-view-box") {
-                    h2 { +"Quests View" }
+                    linkableH2("Quests View")
                     div("accent-line") { +"" }
                     p { +"" }
                 }
                 div("section-view-box") {
-                    h2 { +"Stats View" }
+                    linkableH2("Stats View")
                     div("accent-line") { +"" }
                     p { +"" }
                 }
                 div("section-view-box") {
-                    h2 { +"Connecting to your Game" }
+                    linkableH2("Connecting to your Game")
                     div("accent-line") { +"And the darkness gets lit, just a candle more" }
                     p { +"Thanks to the incredible work of Stonegdi, The Eye can connect to your game and grab all sorts of data. This transforms the site from an interactive map into (hopefully) a full fledged companion app." }
                     p { +"I want to favor speed over stability, so things may break as we go. I have a long personal wishlist of things to add as I figure things out or functionality is added to tooling. In the near term I hope to make a stats page and make the map interactively. Ideally you'll be able to search the site for a planet, and then click it to chart the course in the in game map." }