Updated to hextra theme for adding page index

Author: akclace

README.md

@@ -8,6 +8,6 @@ Clace is an open-source Apache-2.0 licensed project building a platform to easil
 
 Documentation is hosted at [Clace](https://clace.io) using GitHub Pages.
 
-The docs are generated using [Hugo](https://gohugo.io/) with the [Congo](https://jpanther.github.io/congo/) theme.
+The docs are generated using [Hugo](https://gohugo.io/) with the [Hextra](https://github.com/imfing/hextra) theme.
 
 The icons are from [Tabler Icons](https://tabler-icons.io/).

assets/clace_icon.png

@@ -4,72 +4,8 @@ html {
   font-family: 'Open Sans', sans-serif;
 }
 
-body {
-    padding-left: 10px;
-    padding-right: 10px;
-}
-
-h1 {
-    color: #007700 !important;
-}
-
-h2, h3, h4, h5, h6 {
+h1, h2, h3, h4, h5, h6 {
     color: #00C200 !important;
 }
 
-.index-container {
-    display: flex;
-    flex-direction: column;
-}
-
-/* Media query for larger screens */
-@media (min-width: 600px) {
-    .index-container {
-        flex-direction: row;
-        flex-wrap: wrap;
-    }
-
-    .index-item {
-        width: 50%; /* Each item takes up 50% of the container width */
-        margin-bottom: 0; /* Adjust as needed */
-
-        padding:1px 15px;
-        text-align: justify;
-    }
-}
-
-.index-pre {
-    max-width: 95%;    /* Ensures the pre tag fits in its container */
-    overflow-x: auto;   /* Adds horizontal scrolling for overflow */
-    white-space: pre-wrap; /* Allows long lines to wrap */
-    word-wrap: break-word; /* Breaks long words if necessary */
-    padding: 5px;
-}
-
-@media (max-width: 600px) {
-    .index-pre {
-        font-size: smaller; /* Smaller font for small screens */
-    }
-}
-
-.index-code {
-    border-radius: 5px;       /* Rounded corners */
-    font-family: 'Courier New', monospace; /* Monospaced font */
-}
-
-.index-no-copy {
-    user-select: none; /* Prevents text from being selected */
-    color: #00C200;
-}
-
-
-/* Avoid backticks from showing for inline code https://github.com/jpanther/congo/discussions/798 */
-.prose :where(code):not(:where([class~="not-prose"], [class~="not-prose"] *))::before {
-    content: "";
-}
-
-.prose :where(code):not(:where([class~="not-prose"], [class~="not-prose"] *))::after {
-    content: "";
-}
 
-.max-w-prose { max-width:80ch !important; }

assets/css/custom.css

@@ -6,15 +6,6 @@ cascade:
   invertPagination: true
 ---
 
-<div class="index-container">
-<div class="index-item"><span style="font-size:250%;"> {{< icon "brand-github" >}} </span><b>GitOps Workflow</b> - Staged deployments, versioning and preview environments with no infra to manage</div>
-<div class="index-item"><span style="font-size:250%"> {{< icon "binary-off" >}} </span><b>No build step</b> - Backend and frontend development with no build step, the source repo is the deployment artifact</div>
-<div class="index-item"><span style="font-size:250%"> {{< icon "brand-html5" >}} </span><b>Hypermedia web apps</b> - Fast and lightweight backend driven apps, minimal frontend complexity</div>
-<div class="index-item"><span style="font-size:250%"> {{< icon "brand-golang" >}} </span><b>Go binary, Starlark config</b> - Performance and stability of Go, easy Python like backend config with no dependencies</div>
-<div class="index-item"><span style="font-size:250%"> {{< icon "shield-lock" >}} </span><b>Secure app sandboxing</b> - Apps runs in security sandbox, apply app code updates confidently</div>
-<div class="index-item"><span style="font-size:250%"> {{< icon "database" >}} </span><b>SQLite data persistence</b> - Easy access to SQLite based app data persistence, with auto-schema management</div>
-</div>
-
 <h2>What is Clace?</h2>
 
 Clace is an Apache-2.0 licensed project building a platform to develop and deploy web apps for internal tools. For running multiple web applications on a single machine, Clace provides functionality which usually requires stitching together multiple services: reverse proxy like nginx/caddy (for domain/path based routing, TLS certs, static file serving), application server like uwsgi/gunicorn with micro-framework like flask (for API handling) and deployment infrastructure like containers/VMs/k8s (for isolation across apps, versioning and staged deployments). For internal tool deployment, Clace provides similar functionality in a single lightweight binary, with gitops workflow out of the box.

config/_default/config.toml

@@ -50,9 +50,9 @@ The fragments array in the html page definition defines the API interactions wit
 | handler  |   True   | function | Inherited from page |              The handler function to use for the route               |
 |  method  |   True   |  string  |         GET         | The HTTP method type: GET,POST,PUT,DELETE etc, for example `ace.GET` |
 
-{{< alert >}}
+{{<callout type="info" >}}
 **Note:** `partial` and `handler` are inherited from the page level, unless overridden for the fragment.
-{{< /alert >}}
+{{</callout>}}
 
 For example, in this page definition
 
@@ -136,9 +136,9 @@ The plugin is authorized to allow proxying to `https://www.google.com`. Any requ
 
 If proxying is enabled for `/` route, then `/static` file serving is disabled for the app since requests to static path are also forwarded to the upstream service. `/static_root` serving is available and overrides the proxy config.
 
-{{< alert >}}
+{{<callout type="info" >}}
 **Note:** If the upstream service service uses relative paths, then all requests are automatically proxied. If the service uses absolute paths, then it better that the app is installed at the root path, like `example.com:` instead of `example.com:/test`. If the service uses absolute path including the domain name, then the client will see the absolute path and those requests will not come through the proxy. The HTML body is not rewritten by Clace to rewrite path references. The upstream service needs to use relative paths to ensure that all requests come through Clace.
-{{< /alert >}}
+{{</callout>}}
 
 ## Request Flow
 

config/_default/languages.en.toml

@@ -36,9 +36,9 @@ For example
 
 checks if the "css/style.css" file is present and not empty. If so, it is linked using the `static` function, which returns a hashed file name which can be cached aggressively.
 
-{{< alert >}}
+{{<callout type="info" >}}
 **Note:** The path passed to `static` and `fileNonEmpty` functions should not include static, it is automatically added. So use `{{ static "css/style.css" }}`, not `{{ static "static/css/style.css" }}`
-{{< /alert >}}
+{{</callout>}}
 
 ## Template File Location
 

config/_default/markup.toml

@@ -121,8 +121,8 @@ By default, apps are created with the system authentication type. System auth us
 
 To change app to be un-authenticated, add `--auth-type none` to the `app create` command. After an app is created, the auth type can be changed by running `app update auth-type /myapp none`. OAuth based authentication is also supported, see [authentication]({{< ref "docs/configuration/authentication" >}}) for details.
 
-{{< alert >}}
+{{<callout type="info" >}}
 **Note:** Changes done to the app settings using the `app update` command are not staged or versioned, they apply immediately to the stage/prod/preview apps. App settings are fundamental properties of the app, like what authentication type to use, what git auth key to use etc.
 
 All other changes done to app metadata (like account linking, permission approval and code reload) are staged before deployment. Use the `--promote` option to promote the change after applying it on the staging app. When a promotion is done, all previously staged changes for that app are promoted, not just the most recent change.
-{{< /alert >}}
+{{</callout>}}

config/_default/menus.en.toml

@@ -74,8 +74,8 @@ The config details depend on the provider type. The `key` is generally the Clien
 
 For all the providers, an optional `scopes` property is also supported. This is the list of scopes to configure for the OAuth account.
 
-{{< alert >}}
+{{<callout type="info" >}}
 **Note:** The first time a new provider is added, it is important to manually verify an app, to verify if the required authentication restrictions are in place. For example, with google, any valid google user can login, including gmail.com accounts. The `hosted_domain` config has to be used to restrict this.
-{{< /alert >}}
+{{</callout>}}
 
 The OAuth integration internally uses the [goth](https://github.com/markbates/goth) library, see [examples](https://github.com/markbates/goth/blob/master/examples/main.go) for a sample implementation.

config/_default/module.toml

@@ -36,9 +36,9 @@ storage_location = "$CL_HOME/run/certmagic" # where to cache dynamically created
 
 Port 0 means bind to any available port. Port -1 means disable HTTPS access.
 
-{{< alert >}}
+{{<callout type="info" >}}
 Using the HTTPS port is recommended even for the local environment. HTTP/2 works with HTTPS only. Server Sent Events (SSE) are used by Clace for live reload of dev apps, [SSE works best with HTTP/2](https://developer.mozilla.org/en-US/docs/Web/API/Server-sent_events/Using_server-sent_events#listening_for_custom_events). Without HTTP/2, there can be connection limit issues with HTTP causing connections from browser to Clace server to hang.
-{{< /alert >}}
+{{</callout>}}
 
 ## TLS Certificates
 

config/_default/params.toml

@@ -82,9 +82,9 @@ The response for the API (`value` within `plugin_response`) is of type list of s
        # Process lines
 ```
 
-{{< alert >}}
+{{<callout type="info" >}}
 **Note:** Only first 100MB of the command stdout output is scanned currently, the rest is discarded.
-{{< /alert >}}
+{{</callout>}}
 
 ## FS Plugin
 

content/_index.md

@@ -149,9 +149,9 @@ if not error:
     return ace.response(ret, "error.go.html")
 ```
 
-{{< alert >}}
+{{<callout type="info" >}}
 **Note:** The automatic error handling is very useful, but is needs to be enabled manually. When developing a new app, first define the `error_handler` and test it for the partial and full page scenarios. After that, all the subsequent handler code does not have to handle errors unless specific handling is required.
-{{< /alert >}}
+{{</callout>}}
 
 ## Plugin Accounts