Use a new golang based build strategy to reduce dependency on JS ecosystem

.github/workflows/build-and-deploy.yml

@@ -0,0 +1,103 @@
+name: Build and Deploy
+
+on:
+  push:
+    branches: [ master ]
+    tags:
+      - '*'  # This will trigger the workflow on any tag push
+  pull_request:
+    branches: [ master ]
+
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    continue-on-error: false
+    steps:
+      - name: Checkout Repository
+        uses: actions/checkout@v4
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '20' # Specify your Node.js version here
+
+      - name: Install Dependencies
+        run: npm install
+
+      - name: Build
+        run: npm run build
+
+      - name: Upload Docs Artifact
+        uses: actions/upload-artifact@v3
+        with:
+          name: public
+          path: public/
+
+      - name: Upload Lib Artifact
+        uses: actions/upload-artifact@v3
+        with:
+          name: dist
+          path: dist/
+
+  verify:
+    runs-on: ubuntu-latest
+    continue-on-error: false
+    steps:
+      - name: Checkout Repository
+        uses: actions/checkout@v4
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '20' # Specify your Node.js version here
+
+      - name: Install Dependencies
+        run: npm install
+
+      - name: Lint
+        run: npm run lint
+
+  publish-npm:
+    needs: [build, verify]
+    runs-on: ubuntu-latest
+    continue-on-error: false
+    if: startsWith(github.ref, 'refs/tags/') # This ensures the job only runs for tag pushes
+    steps:
+      - name: Checkout Repository
+        uses: actions/checkout@v4
+
+      - name: Download Artifact
+        uses: actions/download-artifact@v3
+        with:
+          name: dist
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '20' # Specify your Node.js version here
+
+      - name: Publish to NPM
+        run: npm publish
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
+
+  deploy-docs:
+    name: 'Deploy to Netlify'
+    runs-on: ubuntu-latest
+    needs: [build, verify]
+    if: startsWith(github.ref, 'refs/tags/') # This ensures the job only runs for tag pushes
+    steps:
+      - name: Checkout Repository
+        uses: actions/checkout@v4
+
+      - name: Download Artifact
+        uses: actions/download-artifact@v3
+        with:
+          name: public
+
+      - uses: jsmrcaga/action-netlify-deploy@v2.0.0
+        with:
+          NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_TOKEN }}
+          NETLIFY_SITE_ID: ${{ secrets.NETLIFY_SITE_ID }}
+          NETLIFY_DEPLOY_TO_PROD: true

.npmrc

@@ -0,0 +1 @@
+registry=https://registry.npmjs.org

.stylelintrc

@@ -1,3 +1,8 @@
 {
-  "extends": "stylelint-config-standard"
+  "extends": "stylelint-config-standard",
+  "rules": {
+    "value-keyword-case": ["lower", {
+      "ignoreKeywords": ["Menlo", "Monaco", "Console", "Lucida", "Consolas", "Courier", "Liberation Mono", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Vera"]
+    }]
+  }
 }

build.sh

@@ -0,0 +1,37 @@
+#!/bin/bash
+
+# Define the app name and the list of platforms and architectures
+APP_NAME="terminalcss-builder"
+PLATFORMS=("windows" "linux" "darwin") # darwin is for macOS
+ARCHITECTURES=("amd64" "arm64" "386") # 386 is for x86 (32-bit)
+
+# Create a directory for the builds if it doesn't exist
+mkdir -p builds
+
+# Loop through platforms and architectures and build for each
+for PLATFORM in "${PLATFORMS[@]}"; do
+    for ARCH in "${ARCHITECTURES[@]}"; do
+        # If Platform is darwin, then ARCH must be amd64 or arm64
+        if [ "$PLATFORM" == "darwin" ] && [ "$ARCH" != "amd64" ] && [ "$ARCH" != "arm64" ]; then
+            continue
+        fi
+        # Set the output binary name, including .exe suffix for Windows
+        OUTPUT_NAME="./builds/$APP_NAME-$PLATFORM-$ARCH"
+        if [ "$PLATFORM" == "windows" ]; then
+            OUTPUT_NAME+=".exe"
+        fi
+
+        # Set environment variables for cross-compilation
+        GOOS=$PLATFORM GOARCH=$ARCH go build -o $OUTPUT_NAME
+
+        # Verify if build was successful
+        if [ $? -ne 0 ]; then
+            echo "An error has occurred! Aborting the script execution..."
+            exit 1
+        fi
+
+        echo "Built $OUTPUT_NAME"
+    done
+done
+
+echo "Build process completed."

go.mod

@@ -0,0 +1,15 @@
+module github.com/Gioni06/terminalcss
+
+go 1.21
+
+require (
+	github.com/fsnotify/fsnotify v1.7.0
+	github.com/gomarkdown/markdown v0.0.0-20231115200524-a660076da3fd
+	github.com/tdewolff/minify/v2 v2.20.7
+	gopkg.in/yaml.v2 v2.4.0
+)
+
+require (
+	github.com/tdewolff/parse/v2 v2.7.5 // indirect
+	golang.org/x/sys v0.13.0 // indirect
+)

go.sum

@@ -0,0 +1,16 @@
+github.com/fsnotify/fsnotify v1.7.0 h1:8JEhPFa5W2WU7YfeZzPNqzMP6Lwt7L2715Ggo0nosvA=
+github.com/fsnotify/fsnotify v1.7.0/go.mod h1:40Bi/Hjc2AVfZrqy+aj+yEI+/bRxZnMJyTJwOpGvigM=
+github.com/gomarkdown/markdown v0.0.0-20231115200524-a660076da3fd h1:PppHBegd3uPZ3Y/Iax/2mlCFJm1w4Qf/zP1MdW4ju2o=
+github.com/gomarkdown/markdown v0.0.0-20231115200524-a660076da3fd/go.mod h1:JDGcbDT52eL4fju3sZ4TeHGsQwhG9nbDV21aMyhwPoA=
+github.com/tdewolff/minify/v2 v2.20.7 h1:NUkuzJ9dvQUNJjSdmmrfELa/ZpnMdyMR/ZKU2bw7N/E=
+github.com/tdewolff/minify/v2 v2.20.7/go.mod h1:bj2NpP3zoUhsPzE4oM4JYwuUyVCU/uMaCYZ6/riEjIo=
+github.com/tdewolff/parse/v2 v2.7.5 h1:RdcN3Ja6zAMSvnxxO047xRoWexX3RrXKi3H6EQHzXto=
+github.com/tdewolff/parse/v2 v2.7.5/go.mod h1:3FbJWZp3XT9OWVN3Hmfp0p/a08v4h8J9W1aghka0soA=
+github.com/tdewolff/test v1.0.11-0.20231101010635-f1265d231d52 h1:gAQliwn+zJrkjAHVcBEYW/RFvd2St4yYimisvozAYlA=
+github.com/tdewolff/test v1.0.11-0.20231101010635-f1265d231d52/go.mod h1:6DAvZliBAAnD7rhVgwaM7DE5/d9NMOAJ09SqYqeK4QE=
+golang.org/x/sys v0.13.0 h1:Af8nKPmuFypiUBjVoU9V20FiaFXOcuZI21p0ycVYYGE=
+golang.org/x/sys v0.13.0/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
+gopkg.in/check.v1 v0.0.0-20161208181325-20d25e280405 h1:yhCVgyC4o1eVCa2tZl7eS0r+SDo693bJlVdllGtEeKM=
+gopkg.in/check.v1 v0.0.0-20161208181325-20d25e280405/go.mod h1:Co6ibVJAznAaIkqp8huTwlJQCZ016jof/cbN4VW5Yz0=
+gopkg.in/yaml.v2 v2.4.0 h1:D8xgwECY7CYvx+Y2n4sBz93Jn9JRvxdiyyo8CTfuKaY=
+gopkg.in/yaml.v2 v2.4.0/go.mod h1:RDklbk79AGWmwhnvt/jBztapEOGDOx6ZbXqjP6csGnQ=

internal/build/css.go

@@ -0,0 +1,43 @@
+package build
+
+import (
+	"github.com/tdewolff/minify/v2"
+	"github.com/tdewolff/minify/v2/css"
+	"log"
+	"os"
+	"path/filepath"
+)
+
+type Library struct {
+	SourcePath       string
+	DestinationPaths []string
+}
+
+func (receiver Library) Build() {
+	// Read the original Build
+	content, err := os.ReadFile(receiver.SourcePath)
+	if err != nil {
+		log.Fatalf("Error reading file: %v", err)
+	}
+
+	// Create a new minifier
+	m := minify.New()
+	m.AddFunc("text/css", css.Minify)
+
+	// Minify the Build content
+	minifiedContent, err := m.Bytes("text/css", content)
+	if err != nil {
+		log.Fatalf("Error minifying Build: %v", err)
+	}
+
+	for _, path := range receiver.DestinationPaths {
+		ensureDirectoryExists(path)
+		// Write the minified content to the destination
+		err = os.WriteFile(filepath.Join(path, getMinifiedFileName(receiver.SourcePath)), minifiedContent, 0644)
+		// Write the unminified original content to the destination
+		err = os.WriteFile(filepath.Join(path, filepath.Base(receiver.SourcePath)), content, 0644)
+		if err != nil {
+			log.Fatalf("Error writing minified CSS to file: %v", err)
+		}
+	}
+}

internal/build/docs.go

@@ -0,0 +1,168 @@
+package build
+
+import (
+	"bytes"
+	"gopkg.in/yaml.v2"
+	"os"
+	"path/filepath"
+	"strings"
+	"text/template"
+
+	"github.com/gomarkdown/markdown"
+	"github.com/gomarkdown/markdown/html"
+)
+
+type Docs struct {
+	PackageJSONPath  string
+	DestinationPath  string
+	LayoutsPath      string
+	PartialsPath     string
+	PagesPath        string
+	StaticAssetsPath string
+}
+
+type FrontMatter struct {
+	Layout      string `yaml:"layout"`
+	Title       string `yaml:"title"`
+	Description string `yaml:"description"`
+}
+
+func (receiver Docs) Build() error {
+	// Read Markdown files from PagesPath
+	files, err := os.ReadDir(receiver.PagesPath)
+	if err != nil {
+		return err
+	}
+
+	pgkJSON, _ := readPackageJSON(receiver.PackageJSONPath)
+	version := pgkJSON.Version
+
+	for _, file := range files {
+		if strings.HasSuffix(file.Name(), ".md") {
+			content, err := os.ReadFile(filepath.Join(receiver.PagesPath, file.Name()))
+			if err != nil {
+				return err
+			}
+
+			// Parse front matter
+			frontMatter, markdownContent := parseFrontMatter(content)
+
+			// Load and parse the layout template with partials
+			tmpl, err := parseTemplateWithPartials(receiver.LayoutsPath, receiver.PartialsPath, frontMatter.Layout)
+			if err != nil {
+				return err
+			}
+
+			// Convert Markdown to HTML
+			renderer := html.NewRenderer(html.RendererOptions{})
+			htmlContent := markdown.ToHTML([]byte(markdownContent), nil, renderer)
+
+			// Execute the template with the HTML content
+			var buf bytes.Buffer
+			err = tmpl.Execute(&buf, map[string]interface{}{
+				"Content":     string(htmlContent),
+				"FrontMatter": frontMatter,
+				"Version":     version,
+			})
+			if err != nil {
+				return err
+			}
+
+			if file.Name() == "index.md" {
+				err = os.WriteFile(filepath.Join(receiver.DestinationPath, "index.html"), buf.Bytes(), 0644)
+				if err != nil {
+					return err
+				}
+				continue
+			} else {
+				// Create directory for the file
+				err = os.MkdirAll(filepath.Join(receiver.DestinationPath, strings.Replace(file.Name(), ".md", "", -1)), 0755)
+				if err != nil {
+					return err
+				}
+				// Write to the destination path
+				err = os.WriteFile(filepath.Join(receiver.DestinationPath, strings.Replace(file.Name(), ".md", "/index.html", -1)), buf.Bytes(), 0644)
+				if err != nil {
+					return err
+				}
+			}
+		}
+	}
+
+	// Copy static assets
+	err = copyDir(receiver.StaticAssetsPath, filepath.Join(receiver.DestinationPath))
+
+	return nil
+}
+
+func copyDir(sourcePath string, destinationPath string) error {
+
+	ensureDirectoryExists(destinationPath)
+	// Read source directory
+	files, err := os.ReadDir(sourcePath)
+	if err != nil {
+		return err
+	}
+
+	for _, file := range files {
+		if file.IsDir() {
+			// Recursively copy subdirectories
+			err = copyDir(filepath.Join(sourcePath, file.Name()), filepath.Join(destinationPath, file.Name()))
+			if err != nil {
+				return err
+			}
+		} else {
+			// Copy file
+			readFile, err := os.ReadFile(filepath.Join(sourcePath, file.Name()))
+			if err != nil {
+				return err
+			}
+			err = os.WriteFile(filepath.Join(destinationPath, file.Name()), readFile, 0644)
+			if err != nil {
+				return err
+			}
+		}
+	}
+
+	return nil
+}
+
+func parseFrontMatter(content []byte) (FrontMatter, string) {
+	// Split the content by the end of the front matter (assuming it's delineated by '---')
+	parts := strings.SplitN(string(content), "---", 3)
+
+	var frontMatter FrontMatter
+	if len(parts) > 2 {
+		err := yaml.Unmarshal([]byte(parts[1]), &frontMatter)
+		if err != nil {
+			return FrontMatter{}, ""
+		}
+		return frontMatter, parts[2]
+	}
+
+	return frontMatter, string(content)
+}
+
+func parseTemplateWithPartials(layoutsPath, partialsPath, layoutName string) (*template.Template, error) {
+	// Parse main layout
+	mainLayoutPath := filepath.Join(layoutsPath, layoutName+".html")
+	tmpl, err := template.ParseFiles(mainLayoutPath)
+	if err != nil {
+		return nil, err
+	}
+
+	// Parse partials
+	partials, err := os.ReadDir(partialsPath)
+	if err != nil {
+		return nil, err
+	}
+
+	for _, partial := range partials {
+		_, err := tmpl.ParseFiles(filepath.Join(partialsPath, partial.Name()))
+		if err != nil {
+			return nil, err
+		}
+	}
+
+	return tmpl, nil
+}

internal/build/ensureDirectoryExists.go

@@ -0,0 +1,16 @@
+package build
+
+import (
+	"log"
+	"os"
+)
+
+// ensureDirectoryExists ensures that the directory at the given path exists and creates it if it doesn't.
+func ensureDirectoryExists(path string) {
+	if _, err := os.Stat(path); os.IsNotExist(err) {
+		err := os.MkdirAll(path, 0755)
+		if err != nil {
+			log.Fatalf("Error creating directory: %v", err)
+		}
+	}
+}

internal/build/ensureDirectoryExists_test.go

@@ -0,0 +1,24 @@
+package build
+
+import (
+	"os"
+	"path/filepath"
+	"testing"
+)
+
+func TestEnsureDirectoryExists(t *testing.T) {
+	// Create a temporary directory for testing
+	tmpDir := t.TempDir()
+
+	// Define a new directory path inside the temporary directory
+	newDir := filepath.Join(tmpDir, "testdir")
+
+	// 1. Test if the directory does not exist
+	ensureDirectoryExists(newDir)
+	if _, err := os.Stat(newDir); os.IsNotExist(err) {
+		t.Errorf("Directory %s was not created", newDir)
+	}
+
+	// 2. Test if the directory already exists
+	ensureDirectoryExists(newDir) // should not return any error or create a new directory
+}

internal/build/getMinifiedFileName.go

@@ -0,0 +1,26 @@
+package build
+
+import (
+	"fmt"
+	"path/filepath"
+	"strings"
+)
+
+func getMinifiedFileName(path string) string {
+	// Extract the filename without the preceding directories.
+	fileName := filepath.Base(path)
+
+	// Split the filename into name and extension.
+	ext := filepath.Ext(fileName)
+	name := strings.TrimSuffix(fileName, ext)
+
+	// If the filename already ends with ".min", don't add another ".min" to it.
+	if strings.HasSuffix(name, ".min") {
+		return fileName
+	}
+
+	// Append ".min" to the name and concatenate with the extension.
+	minifiedFileName := fmt.Sprintf("%s.min%s", name, ext)
+
+	return minifiedFileName
+}

internal/build/getMinifiedFileName_test.go

@@ -0,0 +1,24 @@
+package build
+
+import "testing"
+
+func TestGetMinifiedFileName(t *testing.T) {
+	tests := []struct {
+		input    string
+		expected string
+	}{
+		{"lib/terminal.css", "terminal.min.css"},
+		{"lib/terminal.min.css", "terminal.min.css"},
+		{"lib/terminal", "terminal.min"},
+		{"lib/app.v2.css", "app.v2.min.css"},
+	}
+
+	for _, tt := range tests {
+		t.Run(tt.input, func(t *testing.T) {
+			output := getMinifiedFileName(tt.input)
+			if output != tt.expected {
+				t.Errorf("got %s, want %s", output, tt.expected)
+			}
+		})
+	}
+}

internal/build/readPackageJsonFile.go

@@ -0,0 +1,34 @@
+package build
+
+import (
+	"encoding/json"
+	"os"
+)
+
+// PackageJSON represents the typical structure of a package.json file.
+// This struct doesn't cover all possible fields but provides a starting point.
+type PackageJSON struct {
+	Name            string            `json:"name"`
+	Version         string            `json:"version"`
+	Description     string            `json:"description"`
+	Main            string            `json:"main"`
+	Scripts         map[string]string `json:"scripts"`
+	Dependencies    map[string]string `json:"dependencies"`
+	DevDependencies map[string]string `json:"devDependencies"`
+}
+
+// ReadPackageJSON reads a package.json file and returns its content as a Go struct.
+func readPackageJSON(path string) (*PackageJSON, error) {
+	file, err := os.ReadFile(path)
+	if err != nil {
+		return nil, err
+	}
+
+	var pkg PackageJSON
+	err = json.Unmarshal(file, &pkg)
+	if err != nil {
+		return nil, err
+	}
+
+	return &pkg, nil
+}

lib/terminal.css

@@ -2,8 +2,8 @@
   --global-font-size: 15px;
   --global-line-height: 1.4em;
   --global-space: 10px;
-  --font-stack: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace, serif;
-  --mono-font-stack: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace, serif;
+  --font-stack: "Menlo", "Monaco", "Lucida Console", "Liberation Mono", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Courier New", serif;
+  --mono-font-stack: "Menlo", "Monaco", "Lucida Console", "Liberation Mono", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Courier New", serif;
   --background-color: #fff;
   --page-width: 60em;
   --font-color: #151515;
@@ -13,19 +13,14 @@
   --error-color: #d20962;
   --progress-bar-background: #727578;
   --progress-bar-fill: #151515;
-  --code-bg-color: #e8eff2;
+  --code-bg-color: var(--background-color);
   --input-style: solid;
   --display-h1-decoration: none;
 }
 
 * {
   box-sizing: border-box;
-  text-rendering: geometricPrecision;
-}
-
-*::-moz-selection {
-  background: var(--primary-color);
-  color: var(--invert-font-color);
+  text-rendering: geometricprecision;
 }
 
 *::selection {
@@ -187,7 +182,6 @@ pre {
   padding: var(--global-space);
   white-space: pre-wrap;
   white-space: -moz-pre-wrap;
-  white-space: -pre-wrap;
   white-space: -o-pre-wrap;
 }
 
@@ -238,7 +232,7 @@ pre code {
   position: relative;
 }
 
-@-webkit-keyframes cursor {
+@keyframes cursor {
   0% {
     opacity: 0;
   }
@@ -247,7 +241,7 @@ pre code {
     opacity: 1;
   }
 
-  to {
+  100% {
     opacity: 0;
   }
 }
@@ -261,7 +255,7 @@ pre code {
     opacity: 1;
   }
 
-  to {
+  100% {
     opacity: 0;
   }
 }
@@ -347,7 +341,7 @@ ul ul {
 
 .terminal-menu li {
   display: flex;
-  margin: 0 0 0.5em 0;
+  margin: 0 0 0.5em;
   padding: 0;
 }
 
@@ -412,7 +406,7 @@ hr {
 
 p {
   margin: 0 0 var(--global-line-height);
-  color: var(--global-font-color);
+  color: var(--font-color);
 }
 
 .container {
@@ -466,7 +460,6 @@ img {
   border: 6px solid transparent;
   top: -38px;
   right: 0;
-  -ms-transform: translateX(50%);
   transform: translateX(50%);
 }
 
@@ -505,7 +498,7 @@ table tfoot tr th {
 
 table caption {
   font-size: 1em;
-  margin: 0 0 1em 0;
+  margin: 0 0 1em;
 }
 
 table tbody td:first-child {
@@ -537,7 +530,7 @@ input[type="search"] {
   padding: 0.7em 0.5em;
   font-size: 1em;
   font-family: var(--font-stack);
-  -webkit-appearance: none;
+  appearance: none;
   border-radius: 0;
 }
 
@@ -552,7 +545,7 @@ input[type="number"]:focus,
 input[type="password"]:focus,
 input[type="search"]:focus {
   outline: none;
-  -webkit-appearance: none;
+  appearance: none;
   border: 1px solid var(--font-color);
 }
 
@@ -584,13 +577,13 @@ textarea {
   padding: 0.5em;
   font-size: 1em;
   font-family: var(--font-stack);
-  -webkit-appearance: none;
+  appearance: none;
   border-radius: 0;
 }
 
 textarea:focus {
   outline: none;
-  -webkit-appearance: none;
+  appearance: none;
   border: 1px solid var(--font-color);
 }
 
@@ -608,7 +601,6 @@ select:-webkit-autofill:focus {
   border: 1px solid var(--font-color);
   -webkit-text-fill-color: var(--font-color);
   box-shadow: 0 0 0 1000px var(--invert-font-color) inset;
-  -webkit-box-shadow: 0 0 0 1000px var(--invert-font-color) inset;
   transition: background-color 5000s ease-in-out 0s;
 }
 
@@ -620,7 +612,6 @@ select:-webkit-autofill:focus {
 .btn {
   border-style: solid;
   border-width: 1px;
-  display: -ms-inline-flexbox;
   display: inline-flex;
   -ms-flex-align: center;
   align-items: center;
@@ -631,9 +622,6 @@ select:-webkit-autofill:focus {
   padding: 0.65em 2em;
   font-size: 1em;
   font-family: inherit;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
   user-select: none;
   position: relative;
   z-index: 1;
@@ -662,7 +650,6 @@ select:-webkit-autofill:focus {
 
 .btn-block {
   width: 100%;
-  display: -ms-flexbox;
   display: flex;
 }
 
@@ -815,7 +802,7 @@ select:-webkit-autofill:focus {
   border-color: var(--primary-color);
 }
 
-@media screen and (max-width: 960px) {
+@media screen and (width <= 960px) {
   label {
     display: block;
     width: 100%;
@@ -826,13 +813,13 @@ select:-webkit-autofill:focus {
   }
 }
 
-@media screen and (max-width: 480px) {
+@media screen and (width <= 480px) {
   form {
     width: 100%;
   }
 }
 
-@media only screen and (min-width: 30em) {
+@media only screen and (width >= 30em) {
   .terminal-nav {
     flex-direction: row;
     align-items: center;
@@ -840,8 +827,7 @@ select:-webkit-autofill:focus {
 
   .terminal-menu ul {
     flex-direction: row;
-    justify-items: flex-end;
-    align-items: center;
+    place-items: center flex-end;
     justify-content: flex-end;
     margin-top: calc(var(--global-space) * 2);
   }
@@ -922,7 +908,7 @@ figure > figcaption {
   display: block;
   overflow-x: auto;
   padding: 0.5em;
-  background: var(--block-background-color);
+  background: var(--code-bg-color);
   color: var(--font-color);
 }
 
@@ -935,11 +921,13 @@ figure > figcaption {
   color: var(--font-color);
 }
 
+/* stylelint-disable */
 .hljs-keyword,
 .hljs-selector-tag,
 .hljs-built_in,
 .hljs-name,
 .hljs-tag {
+/* stylelint-enable */
   color: var(--primary-color);
 }
 

main.go

@@ -0,0 +1,118 @@
+package main
+
+import (
+	"fmt"
+	"github.com/Gioni06/terminalcss/internal/build"
+	"github.com/fsnotify/fsnotify"
+	"log"
+	"net/http"
+	"os"
+	"path/filepath"
+)
+
+func main() {
+
+	// Get the current working directory
+	cwd, err := os.Getwd()
+	if err != nil {
+		log.Fatal("Error getting current working directory:", err)
+	}
+
+	// libPath is the path to the terminal.css library source
+	libPath := filepath.Join(cwd, "lib", "terminal.css")
+
+	// libPublishPath is the path to the terminal.css library publish directory that gets published to npm
+	libPublishPath := filepath.Join(cwd, "dist")
+
+	// docsPath is the path to the destination directory
+	docsPath := filepath.Join(cwd, "public")
+
+	// clear docsPath directory
+	err = os.RemoveAll(docsPath)
+	err = os.RemoveAll(libPublishPath)
+
+	library := build.Library{
+		SourcePath:       libPath,
+		DestinationPaths: []string{libPublishPath, docsPath},
+	}
+
+	library.Build()
+
+	layoutsPath := filepath.Join(cwd, "templates/layouts")
+	partialsPath := filepath.Join(cwd, "templates/partials")
+	pagesPath := filepath.Join(cwd, "pages")
+	staticAssetsPath := filepath.Join(cwd, "static")
+
+	docs := build.Docs{
+		PackageJSONPath:  filepath.Join(cwd, "package.json"),
+		DestinationPath:  docsPath,
+		LayoutsPath:      layoutsPath,
+		PartialsPath:     partialsPath,
+		PagesPath:        pagesPath,
+		StaticAssetsPath: staticAssetsPath,
+	}
+
+	err = docs.Build()
+	if err != nil {
+		panic(err)
+	}
+
+	// Check if program has the --serve flag
+	if len(os.Args) == 2 && os.Args[1] == "--serve" {
+
+		// Setup watchers for libPath and docsPath
+		watcher, err := fsnotify.NewWatcher()
+		if err != nil {
+			log.Fatal(err)
+		}
+		defer watcher.Close()
+
+		// Function to rebuild library and docs
+		rebuild := func() {
+			library.Build()
+			err = docs.Build()
+			if err != nil {
+				log.Println("Error rebuilding docs:", err)
+			}
+		}
+
+		// Watch for changes in libPath and docsPath
+		pathsToWatch := []string{libPath, pagesPath, layoutsPath, partialsPath, staticAssetsPath}
+		for _, path := range pathsToWatch {
+			err = watcher.Add(path)
+			if err != nil {
+				log.Fatal(err)
+			}
+		}
+
+		// Start a goroutine to handle events
+		go func() {
+			for {
+				select {
+				case event, ok := <-watcher.Events:
+					if !ok {
+						return
+					}
+					if event.Op&fsnotify.Write == fsnotify.Write {
+						log.Println("Detected change, rebuilding...")
+						rebuild()
+					}
+				case err, ok := <-watcher.Errors:
+					if !ok {
+						return
+					}
+					log.Println("Watcher error:", err)
+				}
+			}
+		}()
+
+		fmt.Println("Serving dist directory at http://localhost:8080. Press Ctrl+C to stop. Restart the program to rebuild the docs.")
+		// serve dist directory at localhost:8080
+		port := ":8080"
+		handler := http.FileServer(http.Dir(docsPath))
+		err = http.ListenAndServe(port, handler)
+		if err != nil {
+			return
+		}
+	}
+}

package.json

@@ -7,12 +7,9 @@
     "doc": "docs"
   },
   "scripts": {
-    "start": "node ./scripts/start.js",
-    "build": "node ./scripts/build.js && node ./scripts/copyFiles.js",
-    "test": "echo \"Error: no test specified\" && exit 1",
-    "lint": "stylelint lib/terminal.css",
-    "preversion": "npm run lint",
-    "prepublish": "npm run build"
+    "start": "node ./run.js --serve",
+    "build": "node ./run.js",
+    "lint": "stylelint lib/terminal.css"
   },
   "repository": {
     "type": "git",
@@ -32,19 +29,8 @@
   },
   "homepage": "https://terminalcss.xyz",
   "devDependencies": {
-    "autoprefixer": "^9.6.4",
-    "chokidar": "^3.2.1",
-    "clean-css": "^4.2.1",
-    "live-server": "^1.2.1",
-    "mkdirp": "^0.5.1",
-    "postcss": "^7.0.18",
-    "serve": "^11.2.0",
-    "stylelint": "^11.0.0",
-    "stylelint-config-standard": "^19.0.0"
-  },
-  "dependencies": {
-    "cp-file": "^7.0.0",
-    "nanogen": "github:Gioni06/nanogen#master"
+    "stylelint": "^15.11.0",
+    "stylelint-config-standard": "^34.0.0"
   },
   "browserslist": [
     "defaults"

pages/dark.md

@@ -1,5 +1,6 @@
 ---
 title: Terminal CSS - Dark
+description: Terminal CSS is a modern, simple, and accessible CSS framework.
 layout: dark
 ---
 

pages/index.md

@@ -1,5 +1,6 @@
 ---
 title: Terminal CSS
+description: Terminal CSS is a modern, simple, and accessible CSS framework.
 layout: default
 ---
 

pages/sans-serif-dark.md

@@ -1,5 +1,6 @@
 ---
 title: Terminal CSS
+description: Terminal CSS is a modern, simple, and accessible CSS framework.
 layout: sans-dark
 ---
 

pages/sans-serif.md

@@ -1,5 +1,6 @@
 ---
 title: Terminal CSS
+description: Terminal CSS is a modern, simple, and accessible CSS framework.
 layout: sans
 ---
 

run.js

@@ -0,0 +1,58 @@
+const { spawn } = require('child_process');
+const os = require('os');
+
+// Define the base name of your application
+const appName = 'terminalcss-builder';
+
+// Get the OS and architecture
+const platform = os.platform(); // 'darwin', 'linux', 'win32', etc.
+const arch = os.arch(); // 'x64', 'arm64', 'ia32' (for x86), etc.
+
+// Map Node.js architecture and platform strings to your binary naming convention
+const platformMap = {
+    'win32': 'windows',
+    'darwin': 'darwin',
+    'linux': 'linux'
+};
+const archMap = {
+    'x64': 'amd64',
+    'arm64': 'arm64',
+    'ia32': '386' // ia32 represents x86 in Node.js
+};
+
+// Construct the binary name based on the platform and architecture
+let binaryName = `./builds/${appName}-${platformMap[platform]}-${archMap[arch]}`;
+if (platform === 'win32') {
+    binaryName += '.exe';
+}
+
+// Add command line arguments to the binary command
+const args = process.argv.slice(2).join(' '); // Skip the first two elements
+
+// Spawn the binary process
+const binaryProcess = spawn(binaryName, [args]);
+
+// Forward stdout and stderr of the binary to the Node.js process
+binaryProcess.stdout.on('data', (data) => {
+    process.stdout.write(data);
+});
+
+binaryProcess.stderr.on('data', (data) => {
+    process.stderr.write(data);
+});
+
+// Handle binary process exit
+binaryProcess.on('close', (code) => {
+    console.log(`Binary process exited with code ${code || 0}.`);
+    process.exit(code);
+});
+
+// Function to terminate the binary process gracefully
+const terminateBinaryProcess = () => {
+    console.log('Terminating binary process...');
+    binaryProcess.kill(); // Sends SIGTERM to the binary process
+};
+
+// Listen for termination signals
+process.on('SIGINT', terminateBinaryProcess); // Ctrl+C signal
+process.on('SIGTERM', terminateBinaryProcess); // Termination signal

scripts/build.js

@@ -1,14 +0,0 @@
-const build = require('./utils/build-fn')
-const path = require('path')
-const nanogen = require('nanogen')
-const staticSiteOptions = require('../site.config');
-
-const options = {
-    sourceFile: path.resolve(__dirname, '../lib/terminal.css'),
-    distFolder: path.resolve(__dirname, '../dist'),
-    docsFolder: path.resolve(__dirname, '../public'),
-    docsSrcFolder: path.resolve(__dirname, '../src')
-  }
-
-build.run(options);
-nanogen.build({ site: staticSiteOptions.site })

scripts/copyFiles.js

@@ -1,8 +0,0 @@
-const cpFile = require('cp-file');
-const path = require('path');
-
-(async () => {
-    await cpFile(path.resolve(__dirname, '../src/browserconfig.xml'), './public/browserconfig.xml');
-    await cpFile(path.resolve(__dirname, '../src/manifest.json'), './public/manifest.json');
-    console.log('browserconfig and manifest copied');
-})();

scripts/start.js

@@ -1,55 +0,0 @@
-const chokidar = require('chokidar');
-const liveServer = require('live-server');
-const build = require('./utils/build-fn');
-const path = require('path');
-const nanogen = require('nanogen')
-const staticSiteOptions = require('../site.config');
-
-function debounce(func, wait, immediate) {
-	var timeout;
-	return function() {
-		var context = this, args = arguments;
-		var later = function() {
-			timeout = null;
-			if (!immediate) func.apply(context, args);
-		};
-		var callNow = immediate && !timeout;
-		clearTimeout(timeout);
-		timeout = setTimeout(later, wait);
-		if (callNow) func.apply(context, args);
-	};
-};
-
-/**
- * Serve the site in watch mode
- */
-const serve = (flags) => {
-  console.log(`Starting local server at http://localhost:${flags.port}`);
-
-  const options = {
-	sourceFile: path.resolve(__dirname, '../lib/terminal.css'),
-	distFolder: path.resolve(__dirname, '../dist'),
-	docsFolder: path.resolve(__dirname, '../public'),
-	docsSrcFolder: path.resolve(__dirname, '../src')
-  }
-
-  build.run(options);
-  nanogen.build({ site: staticSiteOptions.site })
-  liveServer.start({
-      port: flags.port,
-      root: options.docsFolder,
-      open: true,
-      logLevel: 0
-    });
-
-  chokidar.watch([options.sourceFile, options.docsSrcFolder], { ignoreInitial: true }).on(
-    'all',
-    debounce(() => {
-      build.run(options);
-      nanogen.build({ site: staticSiteOptions.site })
-      console.log('Waiting for changes...');
-    }, 500)
-  );
-};
-
-serve({ port: 3000 })

scripts/utils/build-fn.js

@@ -1,42 +0,0 @@
-const path = require('path')
-const fs = require('fs')
-const mkdirp = require('mkdirp');
-
-function run({
-	sourceFile,
-	distFolder,
-	docsFolder
-}) {
-	const autoprefixer = require('autoprefixer')({});
-	const postcss      = require('postcss');
-	const CleanCSS = require('clean-css');
-		
-
-	const css = fs.readFileSync(sourceFile, 'utf8');
-
-	mkdirp(distFolder, function (err) {
-		if (err) {
-			throw e
-		} else {
-			postcss([ autoprefixer ]).process(css, { from: sourceFile, to: path.resolve(distFolder, 'terminal.css') }).then(function (result) {
-				result.warnings().forEach(function (warn) {
-					console.warn(warn.toString());
-					process.exit(1)
-				});
-
-				const options = {  };
-				const output = new CleanCSS(options).minify(result.css);
-				
-				// copy to docs 
-				fs.writeFileSync(path.resolve(docsFolder, 'terminal.min.css'), output.styles , 'utf8')
-				// copy to dist   
-				fs.writeFileSync(path.resolve(distFolder, 'terminal.min.css'), output.styles , 'utf8')
-				fs.writeFileSync(path.resolve(distFolder, 'terminal.css'), result.css, 'utf8')
-			});
-		}
-	});
-}
-
-module.exports = {
-	run
-}

site.config.js

@@ -1,14 +0,0 @@
-const pkg = require('./package.json')
-
-module.exports = {
-  build: {
-    srcPath: './src',
-    outputPath: './public'
-  },
-  site: {
-    title: 'Terminal CSS',
-    libVersion: pkg.version,
-    description: pkg.description,
-    keywords: pkg.keywords
-  }
-};

src/layouts/dark.ejs

@@ -1,55 +0,0 @@
-<!DOCTYPE html>
-<html lang="en-US">
-  <head>
-    <%- include('partials/head') %>
-    <style>
-      :root {
-        --global-font-size: 15px;
-        --global-line-height: 1.4em;
-        --global-space: 10px;
-        --font-stack: Menlo, Monaco, Lucida Console, Liberation Mono,
-          DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace,
-          serif;
-        --mono-font-stack: Menlo, Monaco, Lucida Console, Liberation Mono,
-          DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace,
-          serif;
-        --background-color: #222225;
-        --page-width: 60em;
-        --font-color: #e8e9ed;
-        --invert-font-color: #222225;
-        --secondary-color: #a3abba;
-        --tertiary-color: #a3abba;
-        --primary-color: #62c4ff;
-        --error-color: #ff3c74;
-        --progress-bar-background: #3f3f44;
-        --progress-bar-fill: #62c4ff;
-        --code-bg-color: #3f3f44;
-        --input-style: solid;
-        --display-h1-decoration: none;
-      }
-    </style>
-  </head>
-  <body class="terminal">
-    <%- include('partials/navigation', { "page": "dark" }) %>
-    <div class="container">
-      <p>
-        <%- site.description %>
-      </p>
-
-      <%- body %>
-      <hr />
-      <div class="components components-grid">
-        <%- include('partials/aside') %>
-        <main>
-          <%- include('partials/components') %> <%-
-          include('partials/documentation') %>
-          <hr />
-          <%- include('partials/footer') %>
-          <hr />
-          <%- include('partials/version') %>
-        </main>
-      </div>
-    </div>
-    <%- include('partials/bottom-scripts') %>
-  </body>
-</html>

src/layouts/default.ejs

@@ -1,29 +0,0 @@
-<!DOCTYPE html>
-<html lang="en-US">
-  <head>
-    <%- include('partials/head') %>
-  </head>
-  <body class="terminal">
-    <%- include('partials/navigation', { "page": "main" }) %>
-    <div class="container">
-      <p>
-        <%- site.description %>
-      </p>
-      
-      <%- body %>
-      <hr />
-      <div class="components components-grid">
-        <%- include('partials/aside') %>
-        <main>
-          <%- include('partials/components') %>
-          <%- include('partials/documentation') %>
-          <hr />
-          <%- include('partials/footer') %>
-          <hr />
-          <%- include('partials/version') %>
-        </main>
-      </div>
-    </div>
-    <%- include('partials/bottom-scripts') %>
-  </body>
-</html>

src/layouts/sans-dark.ejs

@@ -1,48 +0,0 @@
-<!DOCTYPE html>
-<html lang="en-US">
-  <head>
-    <%- include('partials/head') %>
-    <style>
-      :root {
-        --global-font-size: 15px;
-        --global-line-height: 1.4em;
-        --font-stack: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica,
-          Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
-        --background-color: #222225;
-        --page-width: 60em;
-        --font-color: #e8e9ed;
-        --invert-font-color: #222225;
-        --secondary-color: #a3abba;
-        --tertiary-color: #a3abba;
-        --primary-color: #62c4ff;
-        --error-color: #ff3c74;
-        --progress-bar-background: #3f3f44;
-        --progress-bar-fill: #62c4ff;
-        --code-bg-color: #3f3f44;
-        --input-style: solid;
-        --display-h1-decoration: none;
-      }
-    </style>
-  </head>
-  <body>
-    <%- include('partials/navigation', { "page": "sans-dark" }) %>
-    <div class="container">
-      <p><%- site.description %></p>
-
-      <%- body %>
-      <hr />
-      <div class="components components-grid">
-        <%- include('partials/aside') %>
-        <main>
-          <%- include('partials/components') %> <%-
-          include('partials/documentation') %>
-          <hr />
-          <%- include('partials/footer') %>
-          <hr />
-          <%- include('partials/version') %>
-        </main>
-      </div>
-    </div>
-    <%- include('partials/bottom-scripts') %>
-  </body>
-</html>

src/layouts/sans.ejs

@@ -1,37 +0,0 @@
-<!DOCTYPE html>
-<html lang="en-US">
-  <head>
-    <%- include('partials/head') %>
-    <style>
-        :root {
-          --global-font-size: 15px;
-          --global-line-height: 1.4em;
-          --font-stack: -apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;
-		      --input-style: solid;
-    }
-    </style>
-  </head>
-  <body>
-    <%- include('partials/navigation', { "page": "sans" }) %>
-    <div class="container">
-      <p>
-        <%- site.description %>
-      </p>
-      
-      <%- body %>
-      <hr />
-      <div class="components components-grid">
-        <%- include('partials/aside') %>
-        <main>
-          <%- include('partials/components') %>
-          <%- include('partials/documentation') %>
-          <hr />
-          <%- include('partials/footer') %>
-          <hr />
-          <%- include('partials/version') %>
-        </main>
-      </div>
-    </div>
-    <%- include('partials/bottom-scripts') %>
-  </body>
-</html>

src/partials/components.ejs

@@ -1,29 +0,0 @@
-<%- include('components/grid') %>
-<hr />
-<%- include('components/nav') %>
-<hr />
-<%- include('components/nav-list') %>
-<hr />
-<%- include('components/lists') %>
-<hr />
-<%- include('components/typography') %>
-<hr />
-<%- include('components/tables') %>
-<hr />
-<%- include('components/special-elements') %>
-<hr />
-<%- include('components/forms') %>
-<hr />
-<%- include('components/progress') %>
-<hr />
-<%- include('components/buttons') %>
-<hr />
-<%- include('components/card') %>
-<hr />
-<%- include('components/timeline') %>
-<hr />
-<%- include('components/alerts') %>
-<hr />
-<%- include('components/figure') %>
-<hr />
-<%- include('components/highlight-js.ejs') %>

src/partials/documentation.ejs

@@ -1,8 +0,0 @@
-<hr />
-<section>
-	<header><h2>Documentation</h2></header>
-	<p>Most of the documentation is still at an early stage. For more details, please have a look at the source of this website.</p>
-	<%- include('documentation/variables') %>
-	<hr>
-	<%- include('documentation/typography') %>
-</section>

src/partials/documentation/typography.ejs

@@ -1,11 +0,0 @@
-<section>
-	<header>
-		<h2 id="DocTypography">Typography</h2>
-	</header>
-	<p>Terminal CSS uses a single font size for almost all elements. However, there is a way to use browser default font sizes if you wish.</p>
-	<dl class="custom-dl">
-		<dt>Single font size</dt>
-		<dd>Use <code>&lt;body class=&quot;terminal&quot;&gt;</code>. If you leave that option, it will fallback to browser defaults. See <a href="/sans-serif/">here</a>.</dd>
-	</dl>
-</section>
-

src/partials/documentation/variables.ejs

@@ -1,53 +0,0 @@
-<section>
-	<header>
-		<h2 id="DocVariables">Variables</h2>
-	</header>
-	<p>Customizing the style of Terminal CSS with CSS Variables is easy.</p>
-
-	<dl class="custom-dl">
-		<style>
-			.custom-dl dt {
-				font-weight: 600;
-			}
-
-			.custom-dl dd.italic{
-				font-style: italic;
-			}
-		
-		</style>
-		<dt>--global-font-size</dt>
-		<dd>The Base font size</dd>
-		<dt>--global-line-height</dt>
-		<dd>The base line height. Modify this to achieve the best readability.</dd>
-		<dt>--font-stack</dt>
-		<dd>The fonts for the website.</dd>
-		<dd>Use <code>@font-face</code> or any other font provider to include your custom fonts.</dd>
-		<dt>--mono-font-stack</dt>
-		<dd>Same as above but for <code>code</code>.</dd>
-		<dt>--background-color</dt>
-		<dd>The page background color</dd>
-		<dt>--font-color</dt>
-		<dd>The base font color for text, headlines, blockquotes, lists, etc.</dd>
-		<dt>--invert-font-color</dt>
-		<dd>Sometimes text appears on a colored background. Adjust this color to improve readability.</dd>
-		<dt>--primary-color</dt>
-		<dd>The primary color is used for links and buttons.</dd>
-		<dt>--secondary-color</dt>
-		<dd>The secondary color is more subtle then the primary color. It's used for code highlighting and image captions.</dd>
-		<dt>--error-color</dt>
-		<dd>Used for error alerts and form validation.</dd>
-		<dt>--progress-bar-background</dt>
-		<dd>The background color of progress bars.</dd>
-		<dt>--progress-bar-fill</dt>
-		<dd>The fill color, indicating the progress in progress bars.</dd>
-		<dt>--code-bg-color</dt>
-		<dd>The background color of <code>&lt;code&gt;</code> elements.</dd>
-		<dt>--input-style</dt>
-		<dd>The style of input element borders. Possible values are:</dd>
-		<dd class="italic">none, solid, dotted, dashed, double, groove, ridge, inset, outset, hidden, inherit, initial, unset</dd>
-		<dt>--display-h1-decoration</dt>
-		<dd>Show a double dash below <code>h1</code> elements. Possible values are:</dd>
-		<dd class="italic">block, none</dd>
-	</dl>
-</section>
-

src/partials/footer.ejs

@@ -1,10 +0,0 @@
-<footer>
-  <p>
-    This project is inspired by
-    <a href="https://egoist.sh/" target="_blank" rel="noopener noreferer"
-      >@egoist's</a
-    >
-    work -
-    <a href="https://github.com/egoist/hack" rel="noopener noreferer">hack.css</a>
-  </p>
-</footer>

src/partials/git-corner.ejs

@@ -1,21 +0,0 @@
-<a href="https://github.com/Gioni06/terminal.css" class="github-corner">
-  <svg
-    width="80"
-    height="80"
-    viewBox="0 0 250 250"
-    style="fill:#151513; color:#fff; position: absolute; top: 0; border: 0; right: 0;"
-  >
-    <path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path>
-    <path
-      d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2"
-      fill="currentColor"
-      style="transform-origin: 130px 106px;"
-      class="octo-arm"
-    ></path>
-    <path
-      d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z"
-      fill="currentColor"
-      class="octo-body"
-    ></path>
-  </svg>
-</a>

src/partials/navigation.ejs

@@ -1,16 +0,0 @@
-<div class="container">
-  <div class="terminal-nav">
-    <header class="terminal-logo">
-      <div class="logo terminal-prompt"><a href="https://terminalcss.xyz" class="no-style">Terminal CSS</a></div>
-    </header>
-    <nav class="terminal-menu">
-      <ul vocab="https://schema.org/" typeof="BreadcrumbList">
-        <li><a href="https://terminalcss.xyz" class="menu-item<% if(page === "main") { %> active<% } %>"><span>Light</span></a><meta property="position"></li>
-        <li property="itemListElement" typeof="ListItem"><a href="https://terminalcss.xyz/dark/" property="item" typeof="WebPage" class="menu-item<% if(page === "dark") { %> active<% } %>"><span property="name">Dark</span></a><meta property="position" content="1"></li>
-        <li property="itemListElement" typeof="ListItem"><a href="https://terminalcss.xyz/sans-serif/" property="item" typeof="WebPage" class="menu-item<% if(page === "sans") { %> active<% } %>"><span property="name">Sans</span></a><meta property="position" content="2"></li>
-        <li property="itemListElement" typeof="ListItem"><a href="https://terminalcss.xyz/sans-serif-dark/" property="item" typeof="WebPage" class="menu-item<% if(page === "sans-dark") { %> active<% } %>"><span property="name">Sans Dark</span></a><meta property="position" content="3"></li>
-        <li style="height: 28px;"><a class="github-button" href="https://github.com/Gioni06/terminal.css" data-size="large" data-show-count="true" aria-label="Star Gioni06/terminal.css on GitHub">Star</a></li>
-      </ul>
-    </nav>
-  </div>
-</div>

src/partials/version.ejs

@@ -1,4 +0,0 @@
-<section>
-	<header></header>
-	<p>Version: <%- site.libVersion %> <a href="#menu">Top</a></p>
-</section>

templates/layouts/dark.html

@@ -0,0 +1,79 @@
+<!doctype html>
+<html lang="en">
+<head>
+    {{ template "head.html" . }}
+    <style>
+        :root {
+            --global-font-size: 15px;
+            --global-line-height: 1.4em;
+            --global-space: 10px;
+            --font-stack: Menlo, Monaco, Lucida Console, Liberation Mono,
+            DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace,
+            serif;
+            --mono-font-stack: Menlo, Monaco, Lucida Console, Liberation Mono,
+            DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace,
+            serif;
+            --background-color: #222225;
+            --page-width: 60em;
+            --font-color: #e8e9ed;
+            --invert-font-color: #222225;
+            --secondary-color: #a3abba;
+            --tertiary-color: #a3abba;
+            --primary-color: #62c4ff;
+            --error-color: #ff3c74;
+            --progress-bar-background: #3f3f44;
+            --progress-bar-fill: #62c4ff;
+            --code-bg-color: #3f3f44;
+            --input-style: solid;
+            --display-h1-decoration: none;
+        }
+    </style>
+</head>
+<body class="terminal">
+    {{ template "navigation.html" }}
+    <div class="container">
+        {{ .Content }}
+        <div class="components components-grid">
+            {{ template "aside.html" . }}
+            <main>
+                {{ template "grid.html" . }}
+                <hr />
+                {{ template "nav.html" . }}
+                <hr />
+                {{ template "nav-list.html" . }}
+                <hr />
+                {{ template "lists.html" . }}
+                <hr />
+                {{ template "typography.html" . }}
+                <hr />
+                {{ template "tables.html" . }}
+                <hr />
+                {{ template "special-elements.html" . }}
+                <hr />
+                {{ template "forms.html" . }}
+                <hr />
+                {{ template "progress.html" . }}
+                <hr />
+                {{ template "buttons.html" . }}
+                <hr />
+                {{ template "card.html" . }}
+                <hr />
+                {{ template "timeline.html" . }}
+                <hr />
+                {{ template "alerts.html" . }}
+                <hr />
+                {{ template "figure.html" . }}
+                <hr />
+                {{ template "highlight-js.html" . }}
+                <hr />
+                {{ template "documentation.html" . }}
+                <hr />
+                {{ template "footer.html" . }}
+                <hr />
+                {{ template "version.html" . }}
+            </main>
+        </div>
+    </div>
+    {{ template "bottom-scripts.html" . }}
+</body>
+</html>

templates/layouts/default.html

@@ -0,0 +1,53 @@
+<!doctype html>
+<html lang="en">
+<head>
+    {{ template "head.html" . }}
+</head>
+<body class="terminal">
+    {{ template "navigation.html" }}
+    <div class="container">
+        {{ .Content }}
+        <div class="components components-grid">
+            {{ template "aside.html" . }}
+            <main>
+                {{ template "grid.html" . }}
+                <hr />
+                {{ template "nav.html" . }}
+                <hr />
+                {{ template "nav-list.html" . }}
+                <hr />
+                {{ template "lists.html" . }}
+                <hr />
+                {{ template "typography.html" . }}
+                <hr />
+                {{ template "tables.html" . }}
+                <hr />
+                {{ template "special-elements.html" . }}
+                <hr />
+                {{ template "forms.html" . }}
+                <hr />
+                {{ template "progress.html" . }}
+                <hr />
+                {{ template "buttons.html" . }}
+                <hr />
+                {{ template "card.html" . }}
+                <hr />
+                {{ template "timeline.html" . }}
+                <hr />
+                {{ template "alerts.html" . }}
+                <hr />
+                {{ template "figure.html" . }}
+                <hr />
+                {{ template "highlight-js.html" . }}
+                <hr />
+                {{ template "documentation.html" . }}
+                <hr />
+                {{ template "footer.html" . }}
+                <hr />
+                {{ template "version.html" . }}
+            </main>
+        </div>
+    </div>
+    {{ template "bottom-scripts.html" . }}
+</body>
+</html>

templates/layouts/sans-dark.html

@@ -0,0 +1,74 @@
+<!doctype html>
+<html lang="en">
+<head>
+    {{ template "head.html" . }}
+    <style>
+        :root {
+            --global-font-size: 15px;
+            --global-line-height: 1.4em;
+            --font-stack: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica,
+            Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
+            --background-color: #222225;
+            --page-width: 60em;
+            --font-color: #e8e9ed;
+            --invert-font-color: #222225;
+            --secondary-color: #a3abba;
+            --tertiary-color: #a3abba;
+            --primary-color: #62c4ff;
+            --error-color: #ff3c74;
+            --progress-bar-background: #3f3f44;
+            --progress-bar-fill: #62c4ff;
+            --code-bg-color: #3f3f44;
+            --input-style: solid;
+            --display-h1-decoration: none;
+        }
+    </style>
+</head>
+<body class="terminal">
+    {{ template "navigation.html" }}
+    <div class="container">
+        {{ .Content }}
+        <div class="components components-grid">
+            {{ template "aside.html" . }}
+            <main>
+                {{ template "grid.html" . }}
+                <hr />
+                {{ template "nav.html" . }}
+                <hr />
+                {{ template "nav-list.html" . }}
+                <hr />
+                {{ template "lists.html" . }}
+                <hr />
+                {{ template "typography.html" . }}
+                <hr />
+                {{ template "tables.html" . }}
+                <hr />
+                {{ template "special-elements.html" . }}
+                <hr />
+                {{ template "forms.html" . }}
+                <hr />
+                {{ template "progress.html" . }}
+                <hr />
+                {{ template "buttons.html" . }}
+                <hr />
+                {{ template "card.html" . }}
+                <hr />
+                {{ template "timeline.html" . }}
+                <hr />
+                {{ template "alerts.html" . }}
+                <hr />
+                {{ template "figure.html" . }}
+                <hr />
+                {{ template "highlight-js.html" . }}
+                <hr />
+                {{ template "documentation.html" . }}
+                <hr />
+                {{ template "footer.html" . }}
+                <hr />
+                {{ template "version.html" . }}
+            </main>
+        </div>
+    </div>
+    {{ template "bottom-scripts.html" . }}
+</body>
+</html>

templates/layouts/sans.html

@@ -0,0 +1,61 @@
+<!doctype html>
+<html lang="en">
+<head>
+    {{ template "head.html" . }}
+    <style>
+        :root {
+            --global-font-size: 15px;
+            --global-line-height: 1.4em;
+            --font-stack: -apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;
+            --input-style: solid;
+        }
+    </style>
+</head>
+<body class="terminal">
+    {{ template "navigation.html" }}
+    <div class="container">
+        {{ .Content }}
+        <div class="components components-grid">
+            {{ template "aside.html" . }}
+            <main>
+                {{ template "grid.html" . }}
+                <hr />
+                {{ template "nav.html" . }}
+                <hr />
+                {{ template "nav-list.html" . }}
+                <hr />
+                {{ template "lists.html" . }}
+                <hr />
+                {{ template "typography.html" . }}
+                <hr />
+                {{ template "tables.html" . }}
+                <hr />
+                {{ template "special-elements.html" . }}
+                <hr />
+                {{ template "forms.html" . }}
+                <hr />
+                {{ template "progress.html" . }}
+                <hr />
+                {{ template "buttons.html" . }}
+                <hr />
+                {{ template "card.html" . }}
+                <hr />
+                {{ template "timeline.html" . }}
+                <hr />
+                {{ template "alerts.html" . }}
+                <hr />
+                {{ template "figure.html" . }}
+                <hr />
+                {{ template "highlight-js.html" . }}
+                <hr />
+                {{ template "documentation.html" . }}
+                <hr />
+                {{ template "footer.html" . }}
+                <hr />
+                {{ template "version.html" . }}
+            </main>
+        </div>
+    </div>
+    {{ template "bottom-scripts.html" . }}
+</body>
+</html>

templates/partials/bottom-scripts.html

@@ -1,9 +1,9 @@
 <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.13.1/highlight.min.js"></script>
 <script async defer src="https://buttons.github.io/buttons.js"></script>
 <script>
-  document.addEventListener("DOMContentLoaded", function() {
-    document.querySelectorAll("pre code").forEach(block => {
-      window.hljs.highlightBlock(block);
+    document.addEventListener("DOMContentLoaded", function() {
+        document.querySelectorAll("pre code").forEach(block => {
+            window.hljs.highlightBlock(block);
+        });
     });
-  });
 </script>

templates/partials/documentation.html

@@ -0,0 +1,67 @@
+<section>
+    <header><h2>Documentation</h2></header>
+    <p>Most of the documentation is still at an early stage. For more details, please have a look at the source of this website.</p>
+    <section>
+        <header>
+            <h2 id="DocVariables">Variables</h2>
+        </header>
+        <p>Customizing the style of Terminal CSS with CSS Variables is easy.</p>
+
+        <dl class="custom-dl">
+            <style>
+                .custom-dl dt {
+                    font-weight: 600;
+                }
+
+                .custom-dl dd.italic{
+                    font-style: italic;
+                }
+
+            </style>
+            <dt>--global-font-size</dt>
+            <dd>The Base font size</dd>
+            <dt>--global-line-height</dt>
+            <dd>The base line height. Modify this to achieve the best readability.</dd>
+            <dt>--font-stack</dt>
+            <dd>The fonts for the website.</dd>
+            <dd>Use <code>@font-face</code> or any other font provider to include your custom fonts.</dd>
+            <dt>--mono-font-stack</dt>
+            <dd>Same as above but for <code>code</code>.</dd>
+            <dt>--background-color</dt>
+            <dd>The page background color</dd>
+            <dt>--font-color</dt>
+            <dd>The base font color for text, headlines, blockquotes, lists, etc.</dd>
+            <dt>--invert-font-color</dt>
+            <dd>Sometimes text appears on a colored background. Adjust this color to improve readability.</dd>
+            <dt>--primary-color</dt>
+            <dd>The primary color is used for links and buttons.</dd>
+            <dt>--secondary-color</dt>
+            <dd>The secondary color is more subtle then the primary color. It's used for code highlighting and image captions.</dd>
+            <dt>--error-color</dt>
+            <dd>Used for error alerts and form validation.</dd>
+            <dt>--progress-bar-background</dt>
+            <dd>The background color of progress bars.</dd>
+            <dt>--progress-bar-fill</dt>
+            <dd>The fill color, indicating the progress in progress bars.</dd>
+            <dt>--code-bg-color</dt>
+            <dd>The background color of <code>&lt;code&gt;</code> elements.</dd>
+            <dt>--input-style</dt>
+            <dd>The style of input element borders. Possible values are:</dd>
+            <dd class="italic">none, solid, dotted, dashed, double, groove, ridge, inset, outset, hidden, inherit, initial, unset</dd>
+            <dt>--display-h1-decoration</dt>
+            <dd>Show a double dash below <code>h1</code> elements. Possible values are:</dd>
+            <dd class="italic">block, none</dd>
+        </dl>
+    </section>
+    <hr>
+    <section>
+        <header>
+            <h2 id="DocTypography">Typography</h2>
+        </header>
+        <p>Terminal CSS uses a single font size for almost all elements. However, there is a way to use browser default font sizes if you wish.</p>
+        <dl class="custom-dl">
+            <dt>Single font size</dt>
+            <dd>Use <code>&lt;body class=&quot;terminal&quot;&gt;</code>. If you leave that option, it will fallback to browser defaults. See <a href="/sans-serif/">here</a>.</dd>
+        </dl>
+    </section>
+</section>

templates/partials/footer.html

@@ -0,0 +1,10 @@
+<footer>
+    <p>
+        This project is inspired by
+        <a href="https://egoist.sh/" target="_blank" rel="noopener noreferer"
+        >@egoist's</a
+        >
+        work -
+        <a href="https://github.com/egoist/hack" rel="noopener noreferer">hack.css</a>
+    </p>
+</footer>

templates/partials/git-corner.html

@@ -0,0 +1,21 @@
+<a href="https://github.com/Gioni06/terminal.css" class="github-corner">
+    <svg
+            width="80"
+            height="80"
+            viewBox="0 0 250 250"
+            style="fill:#151513; color:#fff; position: absolute; top: 0; border: 0; right: 0;"
+    >
+        <path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path>
+        <path
+                d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2"
+                fill="currentColor"
+                style="transform-origin: 130px 106px;"
+                class="octo-arm"
+        ></path>
+        <path
+                d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z"
+                fill="currentColor"
+                class="octo-body"
+        ></path>
+    </svg>
+</a>

templates/partials/head.html

@@ -4,10 +4,10 @@
 <link rel="manifest" href="/manifest.json" />
 <meta name="msapplication-TileColor" content="#ffffff" />
 <meta name="msapplication-TileImage" content="/favicon/ms-icon-144x144.png" />
-<meta name="theme-color" content="#ffffff" /> <title><%- site.title %></title>
+<meta name="theme-color" content="#ffffff" /> <title>{{ .FrontMatter.Title }}</title>
 <meta
   name="description"
-  content="<%- site.description %>"
+  content="{{ .FrontMatter.Description }}"
 />
 <link rel="stylesheet" href="/css/normalize.css" />
 <link rel="stylesheet" href="/terminal.min.css" />

templates/partials/navigation.html

@@ -0,0 +1,16 @@
+<div class="container">
+  <div class="terminal-nav">
+    <header class="terminal-logo">
+      <div class="logo terminal-prompt"><a href="/" class="no-style">Terminal CSS</a></div>
+    </header>
+    <nav class="terminal-menu">
+      <ul vocab="https://schema.org/" typeof="BreadcrumbList">
+        <li><a href="/" class="menu-item"><span>Light</span></a><meta property="position"></li>
+        <li property="itemListElement" typeof="ListItem"><a href="/dark/" property="item" typeof="WebPage" class="menu-item"><span property="name">Dark</span></a><meta property="position" content="1"></li>
+        <li property="itemListElement" typeof="ListItem"><a href="/sans-serif/" property="item" typeof="WebPage" class="menu-item"><span property="name">Sans</span></a><meta property="position" content="2"></li>
+        <li property="itemListElement" typeof="ListItem"><a href="/sans-serif-dark/" property="item" typeof="WebPage" class="menu-item"><span property="name">Sans Dark</span></a><meta property="position" content="3"></li>
+        <li style="height: 28px;"><a class="github-button" href="https://github.com/Gioni06/terminal.css" data-size="large" data-show-count="true" aria-label="Star Gioni06/terminal.css on GitHub">Star</a></li>
+      </ul>
+    </nav>
+  </div>
+</div>