Restructure components docs

hepek-docs/src/main/scala/files/hepek-components/HepekComponentsDocsPage.scala

@@ -6,12 +6,7 @@ trait HepekComponentsDocsPage extends templates.HepekDocsAbstractPage {
 
   override def categoryPosts: List[BlogPostPage] = List(
     Index,
-    BundleDocs,
-    HtmlPage,
-    Dependencies,
-    GridSupport,
-    CodeHighlighter,
-    MathSupport
+    reference.Index
   )
 
   override def pageCategory = Some(Index.pageSettings.label)

hepek-docs/src/main/scala/files/hepek-components/Index.scala

@@ -13,6 +13,8 @@ object Index extends HepekComponentsDocsPage {
     introSection
   )
 
+  val hepekComponentsV = "0.18.0"
+
   val introSection = Section(
     "Hepek Components",
     frag(
@@ -21,25 +23,23 @@ object Index extends HepekComponentsDocsPage {
           ```scala
           // sbt
           libraryDependencies ++= Seq(
-            "ba.sake" %% "hepek-components" % "0.14.0"
+            "ba.sake" %% "hepek-components" % "${hepekComponentsV}"
           )
 
           // Mill
           def ivyDeps = Agg(
-            ivy"ba.sake::hepek-components:0.14.0"
+            ivy"ba.sake::hepek-components:${hepekComponentsV}"
           )
 
           // scala-cli
-          //> using dep ba.sake::hepek-components:0.14.0
+          //> using dep ba.sake::hepek-components:${hepekComponentsV}
           ```
 
-          Components are mostly *interface-based* so we can compose them easily and replace with minimal effort.  
-          In a nutshell, this means you can **choose CSS/HTML framework implementation**: Bootstrap5/Bootstrap3/Bulma.  
+          Components are mostly *interface-based* so we can compose them and replace with minimal effort.  
+          In a nutshell, this means you can **choose CSS/HTML framework implementation**: Bootstrap5/Bulma etc.  
 
           In order to group components, Hepek has a concept of `Bundle`.  
-          Every framework fills it with its own implementations of components.  
-          Proceed to [next page](${BundleDocs.ref}) for more detailed explanation.
-  
+          Every framework fills it with its own implementations of components.   
         """.md
     )
   )

hepek-docs/src/main/scala/files/hepek-components/Bundle.scala → hepek-docs/src/main/scala/files/hepek-components/reference/BundleReference.scala

@@ -1,9 +1,9 @@
-package files.hepek.components
+package files.hepek.components.reference
 
 import utils.Imports._
 import utils.Imports.Bundle.*, Tags.*
 
-object BundleDocs extends HepekComponentsDocsPage {
+object BundleReference extends HepekComponentsReferencePage {
 
   override def pageSettings =
     super.pageSettings.withTitle("Bundle")
@@ -25,18 +25,16 @@ object BundleDocs extends HepekComponentsDocsPage {
 
         import ba.sake.hepek.bootstrap5.BootstrapBundle
 
-        object Imports {
-          val Bundle = BootstrapBundle()
-        }
+        val Bundle = BootstrapBundle()
       """),
       """
-        Then you `import utils.Imports.Bundle._` in every other page/template you make.  
-        This provides you with flexibility of changing your framework with just one line! Amazing, right!? :D
+        Then you `import utils.Bundle._` in every other page/template you make.  
+        This provides you with flexibility of changing your framework with just one line.
 
-        Every `Bundle` contains traits like `Page`, `Grid`, `Form`, `Classes`, `Tags` etc.  
-        Your code will stay the ~same no matter which framework you use! :)
+        Every `Bundle` contains utilities like `Page`, `Grid`, `Form`, `Classes`, `Tags` etc.  
+        Your code will stay the ~same no matter which framework you use.
 
-        You can **customize** the `Bundle` and its components with corresponding `with*` methods!
+        You can customize the `Bundle` and its components with corresponding `with*` methods!
       """.md
     )
   )

hepek-docs/src/main/scala/files/hepek-components/CodeHighlighter.scala → hepek-docs/src/main/scala/files/hepek-components/reference/CodeHighlighter.scala

@@ -1,10 +1,10 @@
-package files.hepek.components
+package files.hepek.components.reference
 
 import utils.*
 import utils.Imports.*
 import utils.Imports.Bundle.*, Tags.*
 
-object CodeHighlighter extends HepekComponentsDocsPage {
+object CodeHighlighter extends HepekComponentsReferencePage {
 
   override def pageSettings =
     super.pageSettings.withTitle("Code highlighter")

hepek-docs/src/main/scala/files/hepek-components/Dependencies.scala → hepek-docs/src/main/scala/files/hepek-components/reference/Dependencies.scala

@@ -1,10 +1,10 @@
-package files.hepek.components
+package files.hepek.components.reference
 
 import utils._
 import utils.Imports._
 import utils.Imports.Bundle.*, Tags.*
 
-object Dependencies extends HepekComponentsDocsPage {
+object Dependencies extends HepekComponentsReferencePage {
 
   override def pageSettings =
     super.pageSettings.withTitle("JS and CSS deps")

hepek-docs/src/main/scala/files/hepek-components/Grid.scala → hepek-docs/src/main/scala/files/hepek-components/reference/GridReference.scala

@@ -1,10 +1,10 @@
-package files.hepek.components
+package files.hepek.components.reference
 
 import utils._
 import utils.Imports._
 import utils.Imports.Bundle.*, Tags.*
 
-object GridSupport extends HepekComponentsDocsPage {
+object GridReference extends HepekComponentsReferencePage {
 
   override def pageSettings =
     super.pageSettings.withTitle("Grid")
@@ -14,7 +14,7 @@ object GridSupport extends HepekComponentsDocsPage {
 
   def gridSection = Section(
     "Grid support",
-    "Let's see what Hepek has to offer regarding grids.",
+    "Grids are usually a pain to work with. Let's see what Hepek has to offer.",
     List(problemSection, hepekGridSection)
   )
 
@@ -26,8 +26,8 @@ object GridSupport extends HepekComponentsDocsPage {
         What if you just want to position an image to the right? Not so fast!  
         You need to mix in some inline HTML in your beautiful markdown and get a real mess...
         
-        Also, it's easy to forget that sum of columns in a Bootstrap row must be 12.
-        For example:
+        Also, it's easy to forget that sum of columns in a Bootstrap row must be 12, for example.  
+        A buggy example:
       """.md,
       chl.markup("""
         <div class="row">
@@ -43,17 +43,17 @@ object GridSupport extends HepekComponentsDocsPage {
     "Hepek grid",
     frag(
       s"""
-        Hepek has the `row` abstraction, with these overloads:
+        Hepek has the typesafe `row` abstraction, with these overloads:
           - arbitrary HTML (Scalatags `Frag`s)
           - halves, constructed with `half`
           - thirds, constructed with `third`
         
         By default, columns have the same/proportional width, as expected.  
         You just need to import the `Grid` from your favorite `Bundle`.  
-        So, in a nutshell, these will compile/work:
+        So, in a nutshell, these will compile and work as expected:
       """.md,
       chl.scala("""
-        import Imports.Bundle.Grid._
+        import utils.Bundle.*, Grid.*
 
         row(div(), p(), "text"), // normal HTML
         row(
@@ -110,7 +110,7 @@ object GridSupport extends HepekComponentsDocsPage {
       """),
       s"""
         These are pretty self-explanatory. For large screens, halves have 5:7 ratio.  
-        So, first `half` will get `col-lg-5` class, and second `half` will get `col-lg-7` class (when using Bootstrap5).  
+        So, first `half` will get `col-lg-5` class, and second `half` will get `col-lg-7` class (when using BS 5).  
         Same pattern follows for thirds etc.
 
         Ratio for `row`s with arbitrary HTML is specified in `singleRatio`s.  

hepek-docs/src/main/scala/files/hepek-components/reference/HepekComponentsReferencePage.scala

@@ -0,0 +1,16 @@
+package files.hepek.components.reference
+
+trait HepekComponentsReferencePage extends templates.HepekDocsAbstractPage {
+
+  override def categoryPosts = List(
+    Index,
+    BundleReference,
+    HtmlPage,
+    Dependencies,
+    GridReference,
+    CodeHighlighter,
+    MathReference
+  )
+
+  override def pageCategory = Some("hepek-components-reference")
+}

hepek-docs/src/main/scala/files/hepek-components/HtmlPage.scala → hepek-docs/src/main/scala/files/hepek-components/reference/HtmlPage.scala

@@ -1,10 +1,10 @@
-package files.hepek.components
+package files.hepek.components.reference
 
 import utils._
 import utils.Imports._
 import utils.Imports.Bundle.*, Tags.*
 
-object HtmlPage extends HepekComponentsDocsPage {
+object HtmlPage extends HepekComponentsReferencePage {
 
   override def pageSettings =
     super.pageSettings.withTitle("Html page")
@@ -47,11 +47,13 @@ object HtmlPage extends HepekComponentsDocsPage {
       renderClassProps(siteSettingsProps),
       "`SiteSettings` are usually defined in a common trait, for example:".md,
       chl.scala("""
-        trait MyPageTemplate extends HtmlPage {
-          override def siteSettings =
-            super.siteSettings
-              .withName("example.com")
-              .withFaviconNormal("favicon.jpg")
+        package utils
+        import Bundle.*
+
+        trait MyPageTemplate extends Page {
+          override def siteSettings = super.siteSettings
+            .withName("example.com")
+            .withFaviconNormal("favicon.jpg")
         }
       """),
       """
@@ -62,7 +64,8 @@ object HtmlPage extends HepekComponentsDocsPage {
       renderClassProps(pageSettingsProps),
       "Example of page definition:",
       chl.scala("""
-        package site
+        package files
+        import utils.*
         
         object Index extends MyPageTemplate {
           override def pageSettings =

hepek-docs/src/main/scala/files/hepek-components/reference/Index.scala

@@ -0,0 +1,27 @@
+package files.hepek.components.reference
+
+import utils.Imports.Bundle.*, Tags.*
+
+object Index extends HepekComponentsReferencePage {
+
+  override def pageSettings =
+    super.pageSettings
+      .withTitle("Hepek Components reference")
+      .withLabel("Reference")
+      .withDescription("Hepek Components reference")
+
+  override def blogSettings = super.blogSettings.withSections(
+    Section(
+      "Reference guide",
+      frag(
+        s"""
+        Nitty-gritty technical descriptions of how Hepek Components works.  
+        Detailed information about Hepek Components API.
+
+      """.md
+        // TODO dodat next / prev
+      )
+    )
+  )
+
+}

hepek-docs/src/main/scala/files/hepek-components/MathSupport.scala → hepek-docs/src/main/scala/files/hepek-components/reference/MathReference.scala

@@ -1,9 +1,9 @@
-package files.hepek.components
+package files.hepek.components.reference
 
 import ba.sake.hepek.katex.KatexDependencies
 import utils.Imports.Bundle.*, Tags.*
 
-object MathSupport extends HepekComponentsDocsPage with KatexDependencies {
+object MathReference extends HepekComponentsReferencePage with KatexDependencies {
 
   override def pageSettings =
     super.pageSettings.withTitle("Math support")
@@ -19,8 +19,8 @@ object MathSupport extends HepekComponentsDocsPage with KatexDependencies {
         KaTeX is using the LaTeX syntax, so it is good to familiarize yourself with it.  
         You need to extend `KatexDependencies` to import the CSS/JS stuff.
 
-        Since Hepek supports Markdown, it is hard to find an unused delimiter character.  
-        Hepek chose acute accent mark ("forward-tick"), `´` for inline math.  
+        You can embed it inside Markdown snippets.  
+        Hepek is using the "acute accent mark" ("forward-tick"), `´` for inline math.  
         On Windows the shortcut is <kbd>AltGr</kbd>+<kbd>9</kbd>.
 
         For block-level math double-dollar is used, `$$`.

hepek-docs/src/main/scala/files/hepek/reference/BlogPage.scala

@@ -53,6 +53,8 @@ object BlogPage extends HepekReferencePage {
         Code usually looks like this:
       """.md,
       chl.scala("""
+        package files
+
         object ExampleBlogPost extends MyBlogPostPage {
           override def blogSettings = super.blogSettings
             .withCreateDate(LocalDate.of(2018, 9, 5))

hepek-docs/src/main/scala/files/hepek/tutorials/GhPagesDeployment.scala

@@ -20,12 +20,10 @@ object GhPagesDeployment extends HepekTutorialPage {
     """.md,
       chl.yaml("""
         name: Build and Deploy GhPages docs
-
         on:
           push:
             branches:
               - main
-
         jobs:
           build-and-deploy:
             runs-on: ubuntu-latest

hepek-docs/src/main/scala/files/hepek/tutorials/HepekTutorialPage.scala

@@ -11,4 +11,3 @@ trait HepekTutorialPage extends templates.HepekDocsAbstractPage {
 
   override def pageCategory = Some("hepek-tutorial")
 }
-

hepek-docs/src/main/scala/templates/HepekDocsTemplates.scala

@@ -40,9 +40,9 @@ trait HepekDocsStaticPage extends StaticPage with AnchorjsDependencies with FADe
       .withMainPages(files.hepek.components.Index, files.hepek.Index)
 
   override def navbar = Some(Navbar)
-  
+
   // TODO nested tutorijali, howtos itd
-  /* 
+  /*
   override def bodyContent: Frag = frag(
     maybeNavbar,
     div(clsContainerFluid)(pageContent)