content list for easier reading/searching in usage documentation

src/main.imba

@@ -1,6 +1,6 @@
 global css
 	html, body m:0 p:0
-	body ff:mono bgc:gray9
+	body ff:mono bgc:gray9 mt:80px mt@portrait: 0
 	a c:violet6 td:none td@hover:underline
 	.active filter:brightness(130%)
 	.activated bgc:violet3
@@ -19,7 +19,7 @@ global css
 
 tag App
 	css
-		d:bbox mx:auto my:50px bgc:white p:40px rd:5px maw:1024px of:auto
+		d:vcc mx:auto my:50px bgc:white p:40px pb:60px rd:5px maw:1024px of:auto
 		@lt-xs m:0 px:0 rd:0
 
 	<self.night=R.param('night') .zoomed=R.param('zoomed')>
@@ -51,7 +51,7 @@ tag imba-code < pre
 			&.content c:gray3
 			&.url bgc:gray3
 				.url bgc:white c:gray7 rd:full p:4px
-	<self[bgc:gray1 bd:1.1px solid gray3 fs:larger]>
+	<self[bgc:gray1 bd:1.1px solid gray3 fs:larger bxs:md]>
 		<code.file> file if file
 		<code.url><.url> url if url
 		<slot name='live'>
@@ -101,11 +101,6 @@ tag pro-tip
 import './views/home.imba'
 import './views/installation.imba'
 import './views/usage.imba'
-
-tag view-use-cases
-	<self> "Examples:"
-
-tag view-why-to-use-it
-	<self> "Why?"
+import './views/abstract.imba'
 
 imba.mount <App> if import.meta.env.MODE is 'development'

src/views.json

@@ -1 +1 @@
-["home","use-cases","why-to-use-it","installation","usage"]
+["home","installation","usage","abstract"]

src/views/abstract.imba

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

src/views/usage.imba

@@ -1,5 +1,31 @@
+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 @click.stop=goto($ref)> 'ref'
+				<li @click.stop=goto($toggle)> 'toggle'
+				<li @click.stop=goto($router)> 'router'
+			<li><ul @click.stop=goto($tips)> 'Pro-router tips'
+				<li @click.stop=goto($param)> 'R.param'
+				<li @click.stop=goto($write)> 'R.write'
+				<li @click.stop=goto($gsetters)> 'Setters and getters'
+		<h2$components.gradient> "Components"
 		"This integration provides "
 		<b> 3
 		" components:"
@@ -11,7 +37,7 @@ tag view-usage
 		"."
 		<br>
 		<br>
-		<.bordered> "<pro-ref>"
+		<$ref.bordered> "<pro-ref>"
 		" generates a link with a proper address hooked to the router."
 		<br>
 		<br>
@@ -73,7 +99,7 @@ tag view-usage
 			"Pro-router treats underscore prefixed values as local and never pass it further."
 		<br>
 		<br>
-		<.bordered> "<pro-toggle>"
+		<$toggle.bordered> "<pro-toggle>"
 		" generates switch on/off element writing to url flag with a given name."
 		<br>
 		<br>
@@ -93,7 +119,7 @@ tag view-usage
 				<pro-toggle.button param='night' disabled=true> 'Switch disabled'
 		<br>
 		<br>
-		<.bordered> "<pro-router>"
+		<$router.bordered> "<pro-router>"
 		" displays current view."
 		<br>
 		<br>
@@ -129,11 +155,11 @@ tag view-usage
 				<c-tag> "pro-router{<c-el> ' view'}{<c-op> '='}{<c-c> 'R'}{<c-op> '.'}param{<.c-br> '('}{<c-str> 'subview'}{<.c-br> ')'}"
 
 		<br>
-		<h2.gradient> "Pro-router tips"
+		<h2$tips.gradient> "Pro-router tips"
 		"Further reading is not about functionalities provided by this package itself but the ones you will be using straight from pro-router."
 		<br>
 		<br>
-		<.example>
+		<$param.example>
 			<code-inline> "{<c-c> 'R'}{<c-op> '.'}param{<.c-br> '('}{<c-str> 'key'}{<.c-br> ')'}"
 			<p>
 				"Use it to receive param value for given { <i> 'key' }."
@@ -148,7 +174,7 @@ tag view-usage
 				<p> "You can ommit getter by going straight for the parameter."
 		<br>
 		<br>
-		<.example>
+		<$write.example>
 			<code-inline> "{<c-c> 'R'}{<c-op> '.'}write{<.c-br> '('}{<c-str> 'key'}{<c-op> ','} value{<.c-br> ')'}"
 			<p>
 				"Use it to store the { <i> 'value' } under given param { <i> 'key' }."
@@ -162,7 +188,7 @@ tag view-usage
 				<c-tag> "input{<c-c> '$v'} type{<c-op> '='}{<c-str> 'text'} value{<c-op> '='}{<c-c> 'R'}{<c-op> '.'}param{<.c-br> '('}{<c-str> 'user-input'}{<.c-br> ')'} {<c-op> '@keyup='}{<c-c> 'R'}{<c-op> '.'}write{<.c-br> '('}{<c-str> 'user-input'}{<c-op> ', '}{<c-c> '$v'}{<c-op> '.'}value{<.c-br> ')'}"
 				<div[d:vcc h:100px] slot="live">
 					<input$v type='text' value=R.param('user-input') @keyup=R.write('user-input', $v.value)>
-		<h3.gradient> "Using getters and setters"
+		<h3$gsetters.gradient> "Using getters and setters"
 		"This is very simple yet powerful feature which can fullfil many different functions."
 		<br>
 		<br>

vite.config.js

@@ -52,7 +52,6 @@ function proRouterViews() {
 		  missingDeclarations.forEach(function(view){
 			let paths = viewPaths[view] ||= []
 			if(!((paths[0] == id) && (paths.length > 1))){
-			  console.log(2)
 			  paths = without(id, paths)
 			  views = without(view, views)
 			  viewsList = without(view, viewsList)