choosing router style article

src/main.imba

@@ -46,6 +46,7 @@ tag imba-code < pre
 	prop file
 	prop url
 	css
+		&.no-code code.content p:0
 		code d:block bd:0 rd:0 bgc:gray8
 			&.file bgc:amber3
 			&.content c:gray3
@@ -98,9 +99,25 @@ tag pro-tip
 		<[c:violet7 fw:bold txs:amber4 bdb:1.5px solid violet4]> "PRO TIP: "
 		<slot>
 
+global def Goto(target)
+	R.go(location.href)
+	target.scrollIntoView!
+
+global css
+	.c-list
+		bgc:yellow1 py:30px mb:60px w:fit-content
+		li pr: 35px
+		li@hover cursor:pointer
+		ul fw:bold
+		li li fw:normal c:blue6
+		li li@hover c:blue4
+
+tag content-list < ul
+	<self.c-list><slot>
+
 import './views/home.imba'
 import './views/installation.imba'
 import './views/usage.imba'
-import './views/abstract.imba'
+import './views/choosing-router-style.imba'
 
 imba.mount <App> if import.meta.env.MODE is 'development'

src/views.json

@@ -1 +1 @@
-["home","installation","usage","abstract"]
+["home","installation","usage","choosing-router-style"]

src/views/abstract.imba

@@ -1,2 +0,0 @@
-tag view-abstract
-	<self> 11

src/views/choosing-router-style.imba

@@ -0,0 +1,52 @@
+tag view-choosing-router-style
+	<self>
+		"Few words about different use cases of different routing styles."
+		<br>
+		"In fact all of these can be used together in one application."
+		<br>
+		<content-list>
+			"Routing styles"
+			<li>
+				<li @click.stop=Goto($url)> 'URL based'
+				<li @click.stop=Goto($hash)> 'Hash based'
+				<li @click.stop=Goto($both)> 'URL + Hash'
+				<li @click.stop=Goto($var)> 'URL variables based'
+
+		<h2$url.gradient> "URL based router"
+		<imba-code.no-code url="example.com/with/normal/url">
+		"This is standard way of routing and requires that you have a router on the server side also.
+		Browser while approaching application will always send full URL to the server.
+		This is useful when you want to do SSR (server side rendering). SSR is needed for bots only (like Google, Facebook etc.).
+		So use it for these parts of application which are public and you want them to be crawlable/readable for bots."
+		<h2$hash.gradient> "Hash based router"
+		<imba-code.no-code url="example.com/#/with/hash/url">
+		"Hash is meant for browser only. This way of routing doesn't require server at all.
+		Very good for decreasing unnecessary request.
+		Use it for dashboards and other functionalities which are not meant to be shown for anonymous user."
+		<br>
+		<br>
+		"Another use case is making standalone application which you can access even without internet - receive and
+		copy further. In other words save to disk like 25y ago. Good for making tool applications - processing
+		information which is mostly delivered by the user."
+		<br>
+		<br>
+		"For the same reason it's good for interfaces of distributed applications."
+		<pro-tip>
+			"If you will treat Hash as only store of data for your application your application already is distributed and trully serverless. Just compile it to one html file."
+
+		<h2$both.gradient> "URL and hash together"
+		<imba-code.no-code url="example.com/with/normal/url/#/and/hash/addition">
+		"Good idea is to mix both mentioned approaches together - and attach hash router to your standard application.
+		In hash you can store information which is tighted to the client. For example interface configuration customised by the user."
+		<pro-tip>
+			"There's no conflict between url and hash - so you could use imba router for url and pro-router for hash."
+
+		<h2$var.gradient> "Url variables based router*"
+		<imba-code.no-code url="example.com/?view=with&variabled=url">
+		"URL variables are old standard which is going out of common use - considered ugly to read. Still the good thing is
+		it's widely supported. It's supported by browsers and backends. It's great oportunity. You could use it in many ways.
+		For example copy values from URL to your API requests. This would give easy way (for authorised only) to modify behaviour of your backend.
+		Helpful for testing, debugging or switching feature flags."
+		<br>
+		<br>
+		"* - surely coming soon in pro-router2"

src/views/usage.imba

@@ -1,30 +1,14 @@
-def goto(target)
-	R.go(location.href)
-	target.scrollIntoView!
-
-global css
-	.c-list
-		bgc:yellow1 py:30px mb:60px w:fit-content
-		li pr: 35px
-		li@hover cursor:pointer
-		ul fw:bold
-		li li fw:normal c:blue6
-		li li@hover c:blue4
-
-tag content-list < ul
-	<self.c-list><slot>
-
 tag view-usage
 	<self>
 		<content-list>
-			<li><ul @click.stop=goto($components)> 'Components'
+			<li><ul @click.stop=Goto($components)> 'Components'
-				<li @click.stop=goto($ref)> 'ref'
+				<li @click.stop=Goto($ref)> 'ref'
-				<li @click.stop=goto($toggle)> 'toggle'
+				<li @click.stop=Goto($toggle)> 'toggle'
-				<li @click.stop=goto($router)> 'router'
+				<li @click.stop=Goto($router)> 'router'
-			<li><ul @click.stop=goto($tips)> 'Pro-router tips'
+			<li><ul @click.stop=Goto($tips)> 'Pro-router tips'
-				<li @click.stop=goto($param)> 'R.param'
+				<li @click.stop=Goto($param)> 'R.param'
-				<li @click.stop=goto($write)> 'R.write'
+				<li @click.stop=Goto($write)> 'R.write'
-				<li @click.stop=goto($gsetters)> 'Setters and getters'
+				<li @click.stop=Goto($gsetters)> 'Setters and getters'
 		<h2$components.gradient> "Components"
 		"This integration provides "
 		<b> 3