replace the themed with a full example

AccentDesign · Jun 5, 2024 · 671326f · 671326f
1 parent c9f1441
commit 671326f
Show file tree

Hide file tree

Showing 12 changed files with 302 additions and 267 deletions.
diff --git a/README.md b/README.md
@@ -225,11 +225,10 @@ Hopefully this will get you going. The rest is up to you.
 
 For example usage see the [examples](./examples) directory that include:
 
+* [Full example](./examples/full) - A full example including base and themed styles with a `sync.Mutex` for caching the css in a `http.HandleFunc`.
 * [CSS resets](./examples/css-resets) - A simple example collection of css resets.
 * [Templ integration](./examples/integration-templ) - An example of how to load styles from gcss with the [templ](https://templ.guide) package.
 * [Media queries](./examples/media-queries) - An example of how to use media queries.
-* [Themed CSS using multiple HTTP handlers](./examples/themed-multiple-http-handlers) - An example of how to use multiple http handlers to serve different themes.
-* [Themed CSS using a single HTTP handler](./examples/themed-single-http-handler) - An example of how to use a single http handler to serve different themes using media queries.
 * [Write to a file](./examples/to-file) - An example of how to write to a file.
 * [Write to an HTTP handler](./examples/to-http-handler) - An example of how to write to an http handler.
 * [Write to stdout](./examples/to-stdout) - An example of how to write to stdout.

diff --git a/examples/full/README.md b/examples/full/README.md
@@ -0,0 +1,72 @@
+# Full example with mutex
+
+This example hase the following:
+
+* A `StyleSheet` that generates global resets, base styles and includes themes.
+* The `Stylesheet` has a `Mutex` that generates the CSS only once to avoid multiple builds.
+* Both `body` and `buttons` have styles attached to the `StyleSheet` as well as the `Theme` to ensure the css is loaded in the most appropriate places.
+
+## Example output
+
+```css
+*, ::after, ::before, ::backdrop, ::file-selector-button {
+    border: 0 solid;
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+}
+
+html, :host {
+    font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+    line-height: 1.5;
+    -webkit-text-size-adjust: 100%;
+    tab-size: 4;
+}
+
+body {
+    line-height: inherit;
+}
+
+body {
+    min-height: 100vh;
+}
+
+.button {
+    align-items: center;
+    border-radius: 0.375rem;
+    display: inline-flex;
+    font-size: 0.875rem;
+    font-weight: 500;
+    height: 2.500rem;
+    justify-content: center;
+    line-height: 1.250rem;
+    padding-bottom: 0.500rem;
+    padding-left: 1.000rem;
+    padding-right: 1.000rem;
+    padding-top: 0.500rem;
+}
+
+@media (prefers-color-scheme: light) {
+    body {
+        background-color: rgba(255, 255, 255, 1.00);
+        color: rgba(23, 23, 23, 1.00);
+    }
+
+    .button-primary {
+        background-color: rgba(23, 23, 23, 1.00);
+        color: rgba(255, 255, 255, 1.00);
+    }
+}
+
+@media (prefers-color-scheme: dark) {
+    body {
+        background-color: rgba(23, 23, 23, 1.00);
+        color: rgba(245, 245, 245, 1.00);
+    }
+
+    .button-primary {
+        background-color: rgba(255, 255, 255, 1.00);
+        color: rgba(23, 23, 23, 1.00);
+    }
+}
+```
diff --git a/examples/themed-single-http-handler/main.go → examples/full/main.go b/examples/themed-single-http-handler/main.go → examples/full/main.go
@@ -2,36 +2,21 @@ package main
 
 import (
 	"fmt"
-	"github.com/AccentDesign/gcss/variables"
+	"github.com/AccentDesign/gcss/examples/full/styles"
 	"net/http"
 )
 
 var (
-	stylesheet = &Stylesheet{
-		Dark: &Theme{
-			MediaQuery:        "@media (prefers-color-scheme: dark)",
-			Background:        variables.Zinc800,
-			Foreground:        variables.White,
-			Primary:           variables.White,
-			PrimaryForeground: variables.Zinc800,
-		},
-		Light: &Theme{
-			MediaQuery:        "@media (prefers-color-scheme: light)",
-			Background:        variables.White,
-			Foreground:        variables.Zinc800,
-			Primary:           variables.Zinc800,
-			PrimaryForeground: variables.White,
-		},
-	}
-	html = `
+	stylesheet = styles.NewStyleSheet()
+	html       = `
 		<!DOCTYPE html>
 		<html>
 		<head>
 			<link rel="stylesheet" href="/stylesheet.css">
 		</head>
 		<body>
 			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
-			<button class="button-primary">Click me</button>
+			<button class="button button-primary">Click me</button>
 		</body>
 		</html>
 	`
@@ -46,7 +31,7 @@ func main() {
 
 	http.HandleFunc("/stylesheet.css", func(w http.ResponseWriter, r *http.Request) {
 		w.Header().Set("Content-Type", "text/css")
-		if err := stylesheet.WriteCSS(w); err != nil {
+		if err := stylesheet.CSS(w); err != nil {
 			http.Error(w, err.Error(), http.StatusInternalServerError)
 		}
 	})

diff --git a/examples/full/styles/base.go b/examples/full/styles/base.go
@@ -0,0 +1,31 @@
+package styles
+
+import (
+	"github.com/AccentDesign/gcss"
+	"github.com/AccentDesign/gcss/variables"
+)
+
+// Base returns the base styles for the stylesheet.
+func (ss *StyleSheet) Base() Styles {
+	return Styles{
+		{
+			Selector: "body",
+			Props: gcss.Props{
+				MinHeight: variables.FullScreenHeight,
+			},
+		},
+	}
+}
+
+// Base returns the base styles for the theme.
+func (t *Theme) Base() Styles {
+	return Styles{
+		{
+			Selector: "body",
+			Props: gcss.Props{
+				BackgroundColor: t.Background,
+				Color:           t.Foreground,
+			},
+		},
+	}
+}
diff --git a/examples/full/styles/button.go b/examples/full/styles/button.go
@@ -0,0 +1,43 @@
+package styles
+
+import (
+	"github.com/AccentDesign/gcss"
+	"github.com/AccentDesign/gcss/props"
+	"github.com/AccentDesign/gcss/variables"
+)
+
+// Buttons returns the buttons styles for the stylesheet.
+func (ss *StyleSheet) Buttons() Styles {
+	return Styles{
+		{
+			Selector: ".button",
+			Props: gcss.Props{
+				AlignItems:     props.AlignItemsCenter,
+				BorderRadius:   variables.Size1H,
+				Display:        props.DisplayInlineFlex,
+				FontSize:       variables.Size3H,
+				FontWeight:     props.FontWeightMedium,
+				Height:         variables.Size10,
+				JustifyContent: props.JustifyContentCenter,
+				LineHeight:     variables.Size5,
+				PaddingTop:     variables.Size2,
+				PaddingRight:   variables.Size4,
+				PaddingBottom:  variables.Size2,
+				PaddingLeft:    variables.Size4,
+			},
+		},
+	}
+}
+
+// Buttons returns the buttons styles for the theme.
+func (t *Theme) Buttons() Styles {
+	return Styles{
+		{
+			Selector: ".button-primary",
+			Props: gcss.Props{
+				BackgroundColor: t.Primary,
+				Color:           t.PrimaryForeground,
+			},
+		},
+	}
+}
diff --git a/examples/full/styles/resets.go b/examples/full/styles/resets.go
@@ -0,0 +1,43 @@
+package styles
+
+import (
+	"github.com/AccentDesign/gcss"
+	"github.com/AccentDesign/gcss/props"
+	"github.com/AccentDesign/gcss/variables"
+)
+
+// Resets returns the resets styles for the stylesheet.
+func (ss *StyleSheet) Resets() Styles {
+	return Styles{
+		{
+			Selector: "*,::after,::before,::backdrop,::file-selector-button",
+			Props: gcss.Props{
+				Border: props.Border{
+					Width: variables.Size0,
+					Style: props.BorderStyleSolid,
+				},
+				BoxSizing: props.BoxSizingBorderBox,
+				Margin:    variables.Size0,
+				Padding:   variables.Size0,
+			},
+		},
+		{
+			Selector: "html,:host",
+			Props: gcss.Props{
+				FontFamily: props.FontFamilySans,
+				LineHeight: props.UnitRaw(1.5),
+			},
+			CustomProps: []gcss.CustomProp{
+				{Attr: "-webkit-text-size-adjust", Value: "100%"},
+				{Attr: "tab-size", Value: "4"},
+			},
+		},
+		{
+			Selector: "body",
+			Props: gcss.Props{
+				LineHeight: props.UnitInherit(),
+			},
+		},
+		// more resets
+	}
+}
diff --git a/examples/full/styles/stylesheet.go b/examples/full/styles/stylesheet.go
@@ -0,0 +1,73 @@
+package styles
+
+import (
+	"bytes"
+	"github.com/AccentDesign/gcss"
+	"github.com/AccentDesign/gcss/variables"
+	"io"
+	"slices"
+	"sync"
+)
+
+type (
+	Styles     []gcss.Style
+	StyleSheet struct {
+		Themes []*Theme
+		css    bytes.Buffer
+		mutex  sync.Mutex
+	}
+)
+
+// CSS writes the stylesheet to the writer.
+// It will generate the CSS for the stylesheet if it has not been generated yet.
+func (ss *StyleSheet) CSS(w io.Writer) error {
+	ss.mutex.Lock()
+	defer ss.mutex.Unlock()
+
+	if ss.css.Len() > 0 {
+		_, err := w.Write(ss.css.Bytes())
+		return err
+	}
+
+	// Generate the CSS for the global styles.
+	for _, style := range slices.Concat(
+		ss.Resets(),
+		ss.Base(),
+		ss.Buttons(),
+	) {
+		if err := style.CSS(&ss.css); err != nil {
+			return err
+		}
+	}
+	// Generate the CSS for the themes.
+	for _, theme := range ss.Themes {
+		if err := theme.CSS(&ss.css); err != nil {
+			return err
+		}
+	}
+	// Write the CSS to the writer.
+	_, err := w.Write(ss.css.Bytes())
+	return err
+}
+
+// NewStyleSheet returns a new stylesheet.
+func NewStyleSheet() *StyleSheet {
+	return &StyleSheet{
+		Themes: []*Theme{
+			{
+				MediaQuery:        "@media (prefers-color-scheme: light)",
+				Background:        variables.White,
+				Foreground:        variables.Neutral900,
+				Primary:           variables.Neutral900,
+				PrimaryForeground: variables.White,
+			},
+			{
+				MediaQuery:        "@media (prefers-color-scheme: dark)",
+				Background:        variables.Neutral900,
+				Foreground:        variables.Neutral100,
+				Primary:           variables.White,
+				PrimaryForeground: variables.Neutral900,
+			},
+		},
+	}
+}
diff --git a/examples/full/styles/theme.go b/examples/full/styles/theme.go
@@ -0,0 +1,34 @@
+package styles
+
+import (
+	"fmt"
+	"github.com/AccentDesign/gcss/props"
+	"io"
+	"slices"
+)
+
+type Theme struct {
+	MediaQuery        string
+	Background        props.Color
+	Foreground        props.Color
+	Primary           props.Color
+	PrimaryForeground props.Color
+}
+
+func (t *Theme) CSS(w io.Writer) error {
+	if _, err := fmt.Fprintf(w, "%s{", t.MediaQuery); err != nil {
+		return err
+	}
+	for _, style := range slices.Concat(
+		t.Base(),
+		t.Buttons(),
+	) {
+		if err := style.CSS(w); err != nil {
+			return err
+		}
+	}
+	if _, err := fmt.Fprint(w, "}"); err != nil {
+		return err
+	}
+	return nil
+}