Ditch bootstrap from docs in favor of pico.css

Author: sake92

hepek-components/shared/src/main/scala/ba/sake/hepek/bootstrap5/BootstrapPage.scala

@@ -2,30 +2,4 @@ package ba.sake.hepek.bootstrap5
 
 import ba.sake.hepek.html.*
 
-trait BootstrapPage extends HtmlPage with BootstrapDependencies {
-
-  override def stylesInline = List(
-    """
-    nav#tocScrollspy {
-      display: none;
-    }
-
-    .affix {
-      width: 100%;
-    }
-
-    @media (min-width: 991px) {
-      .affix {
-        position: fixed;
-        width: 15%;
-        height: 80vh;
-        overflow: auto;
-      }
-
-      nav#tocScrollspy {
-        display: block;
-      }
-    }
-    """
-  )
-}
+trait BootstrapPage extends HtmlPage with BootstrapDependencies

hepek-components/shared/src/main/scala/ba/sake/hepek/html/HtmlPage.scala

@@ -140,5 +140,9 @@ trait HtmlPage extends PageDependencies {
     )
   }
 
-  def pageContent: Frag = frag()
+  def pageContent: Frag = tag("main")(
+    mainContent
+  )
+
+  def mainContent: Frag = frag()
 }

hepek-components/shared/src/main/scala/ba/sake/hepek/plain/PlainDependencies.scala

@@ -1,9 +1,9 @@
 package ba.sake.hepek.plain
 
-import ba.sake.hepek.jquery.JQueryDependencies
+import ba.sake.hepek.html.PageDependencies
 
 // stolen from https://hacks.mozilla.org/2017/04/replace-bootstrap-layouts-with-css-grid/
-trait PlainDependencies extends JQueryDependencies {
+trait PlainDependencies extends PageDependencies {
 
   private val gridStyles = {
     val Total = 12

hepek-docs/src/main/resources/public/scripts/main.js

@@ -1,6 +1,5 @@
 
-var parent = "section";
 for (i = 1; i <= 6; i++) {
-    // CSS selectors "section h1", "section h2" ...
-    anchors.add(parent + ' h' + i);
+    // CSS selectors "h1", "h2" ...
+    anchors.add('h' + i);
 }

hepek-docs/src/main/resources/public/styles/main.css

@@ -1,16 +1,9 @@
 
-body {
-  font-size: 16px;
-  padding-bottom: 33px;
-  padding-top: 4.5rem; /* fixed top navbar */
-}
-
-.navbar-brand {
-  padding: 10px 15px;
-}
-.navbar-brand img {
-  width: 24px;
-  height: auto;
+.flex-centered {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: 1rem;
 }
 
 /* default SVG maximum height */
@@ -19,24 +12,18 @@ object[type="image/svg+xml"] {
   width: 100%;
 }
 
-.pages-toc ul { 
-  list-style: none;
-}
-
-.pages-toc > ul > li > a {
-  font-weight: bold;
-  font-size: 17px;
-}
-
-/* prismjs sets 0.3em and then we get unnecessary horizontal slider. This fixes it. */
-pre[class*="language-"] {
-  border-width: 0.3rem !important;
-}
 
-/* anchor offset when clicking it :) https://stackoverflow.com/a/22655654/4496364 */
-:target:before {
-  content: "";
-  display: block;
-  height: 50px;
-  margin: -50px 0 0;
+@media (min-width: 768px) {
+    .blog-post {
+        display: grid;
+        grid-template-areas: "left-menu main-content";
+    }
+    .left-menu {
+        grid-area: left-menu;
+        padding: 1rem;
+    }
+    .main-content {
+        grid-area: main-content;
+        padding: 1rem;
+    }
 }

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

@@ -1,64 +1,37 @@
 package files
 
-import utils.Imports.Bundle.*
-import Tags.*
-import Grid.*
-
 object Index extends templates.HepekDocsStaticPage {
 
   override def pageSettings =
     super.pageSettings
       .withTitle("Welcome!")
       .withDescription("Hepek docs")
 
-  override def pageContent =
-    div(cls := "container")(
-      Navbar.nav(
-        brandUrl = staticSiteSettings.indexPage.map(_.ref).getOrElse("#"),
-        brandName = siteSettings.name.map(" " + _),
-        brandIconUrl = siteSettings.faviconInverted,
-        // TODO add to other pages too
-        left = form(action := SearchResults.ref, method := "GET", cls := "form-inline")(
-          input(
-            name        := "q",
-            tpe         := "search",
-            cls         := "form-control",
-            placeholder := "Search"
-          )
-        ),
-        right = for
-          page <- staticSiteSettings.mainPages
-          labela = page.pageCategory.getOrElse(page.pageSettings.label)
-        yield Navbar.link(page.ref, labela)
-      ),
-      row(
-        s"""
-          Hepek is a collection of useful projects for making websites in Scala:
-          - [Components](${hepek.components.Index.ref}) (JVM and ScalaJS)
-          - [Static Site Generator](${hepek.Index.ref})
-          - [Framework Integrations](${integrations.Index.ref})
-
-          ## Hepek Components
-          Components is a standalone library with minimal dependencies.  
-          They provide utilites for grid, form inputs, panels, navbars, markdown, code highlighting, maths rendering and lots more.  
-          Components support frameworks like Bootstrap 5, Bulma, HTMX etc.  
-          You can switch to a different framework with minimal effort and override parts you don't like.
-
-          ## Hepek SSG
-          SSG has support for automatic relative links, PDF rendering and lots more.
-
-          ## Hepek Frameworks Integrations
-          Integrations provide Hepek Components support for various frameworks:
-            [Sharaf](https://github.com/sake92/sharaf), 
-            [Play](https://www.playframework.com/),
-            [Http4s](https://http4s.org),
-            [ZIO Http](https://zio.dev/zio-http/).
-          
-          For any questions/bugs/features please make an issue in the [GitHub](https://github.com/sake92/hepek/issues) repo,
-          and you can also join our [Discord chat](https://discord.gg/R2FtxDKyRE)
-        """.md
-      ),
-      super.pageContent
-    )
+  override def mainContent =
+    s"""
+    Hepek is a collection of useful projects for making websites in Scala:
+    - [Components](${hepek.components.Index.ref}) (JVM and ScalaJS)
+    - [Static Site Generator](${hepek.Index.ref})
+    - [Framework Integrations](${integrations.Index.ref})
+
+    ## Hepek Components
+    Components is a standalone library with minimal dependencies.  
+    They provide utilites for grid, form inputs, panels, navbars, markdown, code highlighting, maths rendering and lots more.  
+    Components support frameworks like Bootstrap 5, Bulma, HTMX etc.  
+    You can switch to a different framework with minimal effort and override parts you don't like.
+
+    ## Hepek SSG
+    SSG has support for automatic relative links, PDF rendering and lots more.
+
+    ## Hepek Frameworks Integrations
+    Integrations provide Hepek Components support for various frameworks:
+      [Sharaf](https://github.com/sake92/sharaf), 
+      [Play](https://www.playframework.com/),
+      [Http4s](https://http4s.org),
+      [ZIO Http](https://zio.dev/zio-http/).
+    
+    For any questions/bugs/features please make an issue in the [GitHub](https://github.com/sake92/hepek/issues) repo,
+    and you can also join our [Discord chat](https://discord.gg/R2FtxDKyRE)
+    """.md
 
 }

hepek-docs/src/main/scala/files/NotFound404.scala

@@ -1,8 +1,6 @@
 package files
 
 import ba.sake.hepek.core.RelativePath
-import ba.sake.hepek.scalatags.all.*
-import utils.Imports.Bundle.*
 import utils.Site
 
 object NotFound extends templates.HepekDocsAbstractPage {
@@ -15,11 +13,10 @@ object NotFound extends templates.HepekDocsAbstractPage {
   override def relTo(other: RelativePath) =
     Site.url + "/" + super.relTo(other)
 
-  override def pageContent =
-    div(Classes.txtAlignCenter)(
-      s"""
-      This page does not exist... :///  
-      Click [here](${Site.url}) to go back
-      """.md
-    )
+  override def mainContent =
+    s"""
+    This page does not exist... :///  
+    Click [here](${Site.url}) to go back
+    """.md
+
 }

hepek-docs/src/main/scala/files/SearchIndex.scala

@@ -2,12 +2,11 @@ package files
 
 import ba.sake.hepek.fusejs.FusejsIndex
 import ba.sake.hepek.html.statik.StaticPage
+import utils.Site
 
 object SearchIndex extends FusejsIndex {
 
-  override def indexedPages: Seq[StaticPage] = Seq(Index) ++
-    files.hepek.components.Index.categoryPosts ++
-    files.hepek.Index.categoryPosts ++
-    files.integrations.Index.categoryPosts
+  override def indexedPages: Seq[StaticPage] =
+    Site.allSearchIndexedPages
 
 }

hepek-docs/src/main/scala/files/SearchResults.scala

@@ -1,23 +1,18 @@
 package files
 
 import ba.sake.tupson.toJson
-import utils.Imports.Bundle.*
-import Tags.*
-import Grid.*
+import scalatags.Text.all.*
 
 object SearchResults extends templates.HepekDocsStaticPage {
 
-  override def pageContent =
-    div(cls := "container")(
-      div(
-        h1("Search results"),
-        div(id := "search-results-content")(
-          p("Loading...")
-        )
-      )
+  override def mainContent = div(
+    h1("Search results"),
+    div(id := "search-results-content")(
+      p("Loading...")
     )
+  )
 
-  private val fuseList = SearchIndex.fusejsIndexedPagesData.toJson
+  private lazy val fuseList = SearchIndex.fusejsIndexedPagesData.toJson
 
   override def scriptsInline: List[String] = super.scriptsInline ++ List(s"""
     import Fuse from 'https://cdn.jsdelivr.net/npm/[email protected]/dist/fuse.mjs'

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

@@ -1,7 +1,6 @@
 package files.hepek.components
 
 import ba.sake.hepek.html.statik.BlogPostPage
-import utils.Imports.Bundle.Navbar
 
 trait HepekComponentsDocsPage extends templates.HepekDocsAbstractPage {
 
@@ -12,5 +11,5 @@ trait HepekComponentsDocsPage extends templates.HepekDocsAbstractPage {
 
   override def pageCategory = Some(Index.pageSettings.label)
 
-  override def navbar = Some(Navbar.withActiveUrl(Index.ref))
+  override def currentCategoryPage = Some(Index)
 }