Add page width customizability

docs/configuration.md

@@ -264,6 +264,7 @@ pages:
 | ---- | ---- | -------- | ------- |
 | title | string | yes | |
 | slug | string | no | |
+| width | string | no | |
 | show-mobile-header | boolean | no | false |
 | columns | array | yes | |
 
@@ -273,6 +274,18 @@ The name of the page which gets shown in the navigation bar.
 #### `slug`
 The URL friendly version of the title which is used to access the page. For example if the title of the page is "RSS Feeds" you can make the page accessible via `localhost:8080/feeds` by setting the slug to `feeds`. If not defined, it will automatically be generated from the title.
 
+#### `width`
+The maximum width of the page on desktop. Possible values are `slim` and `wide`.
+
+* default: `1600px`
+* slim: `1100px`
+* wide: `1920px`
+
+> [!NOTE]
+>
+> When using `slim`, the maximum number of columns allowed for that page is `2`.
+
+
 #### `show-mobile-header`
 Whether to show a header displaying the name of the page on mobile. The header purposefully has a lot of vertical whitespace in order to push the content down and make it easier to reach on tall devices.
 

internal/assets/static/main.css

@@ -428,6 +428,14 @@ kbd:active {
     padding: 0 var(--content-bounds-padding);
 }
 
+.page-width-wide .content-bounds {
+    max-width: 1920px;
+}
+
+.page-width-slim .content-bounds {
+    max-width: 1100px;
+}
+
 .dynamic-columns {
     gap: calc(var(--widget-content-vertical-padding) / 2);
     display: grid;

internal/assets/templates/page.html

@@ -10,7 +10,7 @@
 </script>
 {{ end }}
 
-{{ define "document-root-attrs" }}{{ if .App.Config.Theme.Light }}class="light-scheme"{{ end }}{{ end }}
+{{ define "document-root-attrs" }}class="{{ if .App.Config.Theme.Light }}light-scheme {{ end }}{{ if ne "" .Page.Width }}page-width-{{ .Page.Width }}{{ end }}"{{ end }}
 {{ define "document-head-after" }}
 {{ template "page-style-overrides.gotmpl" . }}
 {{ if ne "" .App.Config.Theme.CustomCSSFile }}

internal/glance/config.go

@@ -60,12 +60,22 @@ func configIsValid(config *Config) error {
 			return fmt.Errorf("Page %d has no title", i+1)
 		}
 
+		if config.Pages[i].Width != "" && (config.Pages[i].Width != "wide" && config.Pages[i].Width != "slim") {
+			return fmt.Errorf("Page %d: width can only be either wide or slim", i+1)
+		}
+
 		if len(config.Pages[i].Columns) == 0 {
 			return fmt.Errorf("Page %d has no columns", i+1)
 		}
 
-		if len(config.Pages[i].Columns) > 3 {
-			return fmt.Errorf("Page %d has more than 3 columns: %d", i+1, len(config.Pages[i].Columns))
+		if config.Pages[i].Width == "slim" {
+			if len(config.Pages[i].Columns) > 2 {
+				return fmt.Errorf("Page %d is slim and cannot have more than 2 columns", i+1)
+			}
+		} else {
+			if len(config.Pages[i].Columns) > 3 {
+				return fmt.Errorf("Page %d has more than 3 columns: %d", i+1, len(config.Pages[i].Columns))
+			}
 		}
 
 		columnSizesCount := make(map[string]int)

internal/glance/glance.go

@@ -60,6 +60,7 @@ type templateData struct {
 type Page struct {
 	Title            string   `yaml:"name"`
 	Slug             string   `yaml:"slug"`
+	Width            string   `yaml:"width"`
 	ShowMobileHeader bool     `yaml:"show-mobile-header"`
 	Columns          []Column `yaml:"columns"`
 	mu               sync.Mutex