Major overhaul of Urchin (#97)

- Added TailwindCSS to Urchin.
- Updated Makefile to download TailwindCSS (currently only Linux is
supported)
- Refactored templates to share similar logic between templates.
- Redesigned UI for Urchin.
- Added layout page shared between all sub pages.
- Added dark mode support.
- Added new `renderHtml` method to reduce duplicate code in go.
- Added self-designed minimalistic 'sea urchin' favicon. :D
- Added missing sites `about` and `services`.
- Added `Not Found` handling if a resource is requested that is not
present, displaying an error message while keeping the layout page.
- Restructured `static` folder to include stylesheets, scripts and
assets.

---------

Co-authored-by: matheusgomes28 <matheusgarcia28@gmail.com>

.air.toml

@@ -14,7 +14,7 @@ tmp_dir = "tmp"
   exclude_unchanged = false
   follow_symlink = false
   include_dir = []
-  include_ext = ["go", "tpl", "tmpl", "templ", "html"]
+  include_ext = ["go", "tpl", "tmpl", "templ", "html", "js"]
   include_file = []
   kill_delay = "0s"
   log = "build-errors.log"

.github/workflows/build.yml

@@ -11,7 +11,7 @@ jobs:
 
     runs-on: ubuntu-latest
     container:
-      image: mattgomes28/urchin-golang:0.2
+      image: mattgomes28/urchin-golang:0.4
       options: --user 1001
 
     steps:

.github/workflows/failfast.yml

@@ -8,7 +8,7 @@ jobs:
 
     runs-on: ubuntu-latest
     container:
-      image: mattgomes28/urchin-golang:0.2
+      image: mattgomes28/urchin-golang:0.4
       options: --user 1001
 
     steps:

.github/workflows/test.yml

@@ -8,7 +8,7 @@ jobs:
 
     runs-on: ubuntu-latest
     container:
-      image: mattgomes28/urchin-golang:0.2
+      image: mattgomes28/urchin-golang:0.4
       options: --user 1001
 
     steps:

.gitignore

@@ -9,3 +9,9 @@ images/
 
 
 tests/helpers/migrations
+
+# The name of the TailwindCSS CLI
+tailwindcss
+
+# Generated TailwindCSS styles
+static/css/style.css

.vscode/launch.json

@@ -11,7 +11,6 @@
             "mode": "auto",
             "program": "${workspaceFolder}/cmd/urchin",
             "cwd": "${workspaceFolder}",
-            "envFile": "${workspaceFolder}/envfile",
             "args": [
                 "--config",
                 "${workspaceFolder}/urchin_config.toml"
@@ -24,7 +23,6 @@
             "mode": "auto",
             "program": "${workspaceFolder}/cmd/urchin-admin",
             "cwd": "${workspaceFolder}",
-            "envFile": "${workspaceFolder}/envfile",
             "args": [
                 "--config",
                 "${workspaceFolder}/urchin_config.toml"

Makefile

@@ -14,10 +14,11 @@ all: build test
 prepare_env:
 	cp -r migrations tests/helpers/
 
-build: prepare_env
+build: prepare_env install-tailwindcss
 	$(TEMPL) generate
 	GIN_MODE=release $(GOCMD) build -ldflags "-s" -v -o $(BUILD_DIR)/$(BINARY_NAME) $(URCHIN_DIR)
 	GIN_MODE=release $(GOCMD) build -ldflags "-s" -v -o $(BUILD_DIR)/$(ADMIN_BINARY_NAME) $(URCHIN_ADMIN_DIR)
+	./tailwindcss -i ./static/css/custom.css -o ./static/css/style.css --minify
 
 test: prepare_env
 	$(GOCMD) test -v ./...
@@ -26,9 +27,18 @@ clean:
 	$(GOCMD) clean
 	rm -rf $(BUILD_DIR)
 
+# TODO: For now we support only the linux version of tailwindcss, has to be updated in the future to support Windows and MacOS as well.
 install-tools:
 	go install github.com/pressly/goose/v3/cmd/goose@v3.18.0
 	go install github.com/a-h/templ/cmd/templ@v0.2.543 
 	go install github.com/cosmtrek/air@v1.49.0 
 
-.PHONY: all build test clean
+install-tailwindcss:
+	if [ ! -f tailwindcss ]; then \
+		wget -q https://github.com/tailwindlabs/tailwindcss/releases/download/v3.4.16/tailwindcss-linux-x64 \
+			&& echo "33f254b54c8754f16efbe2be1de38ca25192630dc36f164595a770d4bbf4d893  tailwindcss-linux-x64" | sha256sum -c \
+			&& chmod +x tailwindcss-linux-x64 \
+			&& mv tailwindcss-linux-x64 tailwindcss; \
+	fi
+
+.PHONY: all build test clean install-tailwindcss

README.md

@@ -4,7 +4,7 @@ Urchin is a headless CMS (Content Management System) written in Golang, designed
 create a website or blog, with any template you like, in only a few
 commands.
 
-![Really no head?](static/nohead.gif "So no head meme?")
+![Really no head?](static/assets/nohead.gif "So no head meme?")
 
 ## Features 🚀
 
@@ -122,7 +122,7 @@ The plan is to have two main applications: the public facing application
 to serve the content through a website, and the admin application that
 can be hidden, where users can modify the settings, add posts, pages, etc.
 
-![diagram of urchin's architecture](static/urchin-architecture.png "Urchin Application Architecture")
+![diagram of urchin's architecture](static/assets/urchin-architecture.png "Urchin Application Architecture")
 
 In the above image, you can see the two applications running alongside,
 and they share a database connection where the data is actually stored.

app/about.go

@@ -0,0 +1,12 @@
+package app
+
+import (
+	"github.com/gin-gonic/gin"
+	"github.com/matheusgomes28/urchin/common"
+	"github.com/matheusgomes28/urchin/database"
+	"github.com/matheusgomes28/urchin/views"
+)
+
+func aboutHandler(c *gin.Context, app_settings common.AppSettings, db database.Database) ([]byte, error) {
+	return renderHtml(c, views.MakeAboutPage(app_settings.AppNavbar.Links))
+}

app/app.go

@@ -25,6 +25,8 @@ func SetupRoutes(app_settings common.AppSettings, database database.Database) *g
 	cache := MakeCache(4, time.Minute*10, &TimeValidator{})
 	addCachableHandler(r, "GET", "/", homeHandler, &cache, app_settings, database)
 	addCachableHandler(r, "GET", "/contact", contactHandler, &cache, app_settings, database)
+	addCachableHandler(r, "GET", "/about", aboutHandler, &cache, app_settings, database)
+	addCachableHandler(r, "GET", "/services", servicesHandler, &cache, app_settings, database)
 	addCachableHandler(r, "GET", "/post/:id", postHandler, &cache, app_settings, database)
 	addCachableHandler(r, "GET", "/images/:name", imageHandler, &cache, app_settings, database)
 	addCachableHandler(r, "GET", "/images", imagesHandler, &cache, app_settings, database)
@@ -45,6 +47,8 @@ func SetupRoutes(app_settings common.AppSettings, database database.Database) *g
 	// Where all the static files (css, js, etc) are served from
 	r.Static("/static", "./static")
 
+	r.NoRoute(notFoundHandler(app_settings))
+
 	return r
 }
 
@@ -127,3 +131,17 @@ func homeHandler(c *gin.Context, settings common.AppSettings, db database.Databa
 
 	return html_buffer.Bytes(), nil
 }
+
+func notFoundHandler(app_settings common.AppSettings) func(*gin.Context) {
+	handler := func(c *gin.Context) {
+		buffer, err := renderHtml(c, views.MakeNotFoundPage(app_settings.AppNavbar.Links))
+		if err != nil {
+			c.JSON(http.StatusInternalServerError, common.ErrorRes("could not render HTML", err))
+			return
+		}
+
+		c.Data(http.StatusOK, "text/html; charset=utf-8", buffer)
+	}
+
+	return handler
+}

app/contact.go

@@ -1,7 +1,6 @@
 package app
 
 import (
-	"bytes"
 	"encoding/json"
 	"fmt"
 	"io"
@@ -137,11 +136,5 @@ func makeContactFormHandler(app_settings common.AppSettings) func(*gin.Context)
 
 // TODO : This is a duplicate of the index handler... abstract
 func contactHandler(c *gin.Context, app_settings common.AppSettings, db database.Database) ([]byte, error) {
-	index_view := views.MakeContactPage(app_settings.AppNavbar.Links, app_settings.RecaptchaSiteKey)
-	html_buffer := bytes.NewBuffer(nil)
-	if err := index_view.Render(c, html_buffer); err != nil {
-		log.Error().Msgf("could not render: %v", err)
-	}
-
-	return html_buffer.Bytes(), nil
+	return renderHtml(c, views.MakeContactPage(app_settings.AppNavbar.Links, app_settings.RecaptchaSiteKey))
 }

app/image.go

@@ -102,14 +102,6 @@ func imageHandler(c *gin.Context, app_settings common.AppSettings, database data
 		Name: filename,
 		Ext:  ext,
 	}
-	index_view := views.MakeImagePage(image, app_settings.AppNavbar.Links)
-	html_buffer := bytes.NewBuffer(nil)
 
-	err := index_view.Render(c, html_buffer)
-	if err != nil {
-		log.Error().Msgf("Could not render index: %v", err)
-		return []byte{}, err
-	}
-
-	return html_buffer.Bytes(), nil
+	return renderHtml(c, views.MakeImagePage(image, app_settings.AppNavbar.Links))
 }

app/page.go

@@ -1,14 +1,12 @@
 package app
 
 import (
-	"bytes"
 	"net/http"
 
 	"github.com/gin-gonic/gin"
 	"github.com/matheusgomes28/urchin/common"
 	"github.com/matheusgomes28/urchin/database"
 	"github.com/matheusgomes28/urchin/views"
-	"github.com/rs/zerolog/log"
 )
 
 func pageHandler(c *gin.Context, app_settings common.AppSettings, database database.Database) ([]byte, error) {
@@ -33,11 +31,6 @@ func pageHandler(c *gin.Context, app_settings common.AppSettings, database datab
 
 	// Generate HTML page
 	page.Content = string(mdToHTML([]byte(page.Content)))
-	post_view := views.MakePage(page.Title, page.Content, app_settings.AppNavbar.Links)
-	html_buffer := bytes.NewBuffer(nil)
-	if err = post_view.Render(c, html_buffer); err != nil {
-		log.Error().Msgf("could not render: %v", err)
-	}
 
-	return html_buffer.Bytes(), nil
+	return renderHtml(c, views.MakePage(page.Title, page.Content, app_settings.AppNavbar.Links))
 }

app/post.go

@@ -1,7 +1,6 @@
 package app
 
 import (
-	"bytes"
 	"net/http"
 
 	"github.com/gin-gonic/gin"
@@ -70,11 +69,6 @@ func postHandler(c *gin.Context, app_settings common.AppSettings, database datab
 
 	// Generate HTML page
 	post.Content = string(mdToHTML([]byte(post.Content)))
-	post_view := views.MakePostPage(post.Title, post.Content, app_settings.AppNavbar.Links)
-	html_buffer := bytes.NewBuffer(nil)
-	if err = post_view.Render(c, html_buffer); err != nil {
-		log.Error().Msgf("could not render: %v", err)
-	}
 
-	return html_buffer.Bytes(), nil
+	return renderHtml(c, views.MakePostPage(post.Title, post.Content, app_settings.AppNavbar.Links))
 }

app/renderer.go

@@ -1,8 +1,11 @@
 package app
 
 import (
+	"bytes"
+
 	"github.com/a-h/templ"
 	"github.com/gin-gonic/gin"
+	"github.com/rs/zerolog/log"
 )
 
 // / This function will render the templ component into
@@ -11,3 +14,15 @@ func render(c *gin.Context, status int, template templ.Component) error {
 	c.Status(status)
 	return template.Render(c.Request.Context(), c.Writer)
 }
+
+func renderHtml(c *gin.Context, template templ.Component) ([]byte, error) {
+	html_buffer := bytes.NewBuffer(nil)
+
+	err := template.Render(c, html_buffer)
+	if err != nil {
+		log.Error().Msgf("Could not render index: %v", err)
+		return []byte{}, err
+	}
+
+	return html_buffer.Bytes(), nil
+}

app/services.go

@@ -0,0 +1,12 @@
+package app
+
+import (
+	"github.com/gin-gonic/gin"
+	"github.com/matheusgomes28/urchin/common"
+	"github.com/matheusgomes28/urchin/database"
+	"github.com/matheusgomes28/urchin/views"
+)
+
+func servicesHandler(c *gin.Context, app_settings common.AppSettings, db database.Database) ([]byte, error) {
+	return renderHtml(c, views.MakeServicesPage(app_settings.AppNavbar.Links))
+}

docker/Dockerfile

@@ -32,7 +32,6 @@ RUN apt-get update \
     && wget https://raw.githubusercontent.com/golangci/golangci-lint/master/install.sh -P golangci-install \ 
     && sh ./golangci-install/install.sh -b /usr/local/bin v1.56.2 \
     && rm -rf ./golangci-install \
-    && apt-get remove -y wget \
     && apt-get clean \  
     && apt-get autoremove -y \
     && apt-get autoremove --purge -y \

docker/docker-compose.yml

@@ -1,6 +1,6 @@
 services:
   urchin_app:
-    image: mattgomes28/urchin-golang:0.3
+    image: mattgomes28/urchin-golang:0.4
     ports:
       - "8080:8080"
     volumes:
@@ -18,7 +18,7 @@ services:
       - common-net
 
   urchin_admin_app:
-    image: mattgomes28/urchin-golang:0.3
+    image: mattgomes28/urchin-golang:0.4
     ports:
       - "8081:8081"
     volumes:

static/css/custom.css

@@ -0,0 +1,9 @@
+/* Loading tailwind builtins. All custom rules have to be added in here. */
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+
+body {
+  background: #E5E5E5;
+}

static/scripts/application.js

@@ -0,0 +1,33 @@
+document.getElementById('menu-toggle').addEventListener('click', function () {
+  const menu = document.getElementById('mobile-menu');
+  menu.classList.toggle('hidden')
+});
+
+const themeToggle = document.getElementById('theme-toggle');
+const lightIcon = document.getElementById('light-icon');
+const darkIcon = document.getElementById('dark-icon');
+
+const html = document.documentElement;
+
+if (localStorage.getItem('color-theme') === 'dark') {
+  html.classList.add('dark');
+} else {
+  html.classList.remove('dark');
+}
+
+themeToggle.addEventListener('click', function () {
+  // Toggle dark class on HTML element
+  html.classList.toggle('dark');
+
+  if (html.classList.contains('dark')) {
+    localStorage.setItem('color-theme', 'dark');
+  } else {
+    localStorage.setItem('color-theme', 'light');
+  }
+});
+
+document.getElementById('demo-form').addEventListener('submit', function() {
+  const event = new Event('verified');
+  const elem = document.querySelector("#demo-form");
+  elem.dispatchEvent(event);
+})

tailwind.config.js

@@ -0,0 +1,33 @@
+/** @type {import('tailwindcss').Config} */
+export const content = [
+  "./views/*.templ",
+]
+
+export const theme = {
+  container: {
+    center: true,
+    padding: {
+      DEFAULT: "1rem",
+      mobile: "1rem",
+      tablet: "1rem",
+      desktop: "1rem",
+    },
+  },
+  extend: {
+    colors: {
+      pastel: {
+        blue: '#AEC6CF',
+        purple: '#CBAACB',
+        pink: '#FFB6C1',
+        orange: '#FFDAB9',
+        green: '#C4E17F',
+        yellow: '#FFDD94',
+        gray: '#E5E5E5'
+      }
+    }
+  }
+}
+
+export const darkMode = 'selector'
+
+export const plugins = [require("@tailwindcss/forms"), require("@tailwindcss/typography")]