Move styles to file and compress

.gitignore

@@ -4,3 +4,5 @@
 !/build/.keep
 /data/*
 !/data/.keep
+.*.makefile
+assets.sh

Makefile

@@ -10,13 +10,18 @@ include .makefile/minimal.makefile
 include .makefile/build.makefile
 include .makefile/docker.makefile
 
+.assets.makefile:
+	curl -fsSL -o $@ https://raw.githubusercontent.com/vladimirok5959/assets/main/assets.makefile
+
+include .assets.makefile
+
 test:
 	go test `go list ./... \
 		| grep -v cmd/ip2location \
 		| grep -v internal/consts \
 		| grep -v internal/server/web`
 
-debug:
+debug: assets
 	@-rm ./bin/ip2location
 	make all
 	./bin/ip2location \

internal/server/server.go

@@ -11,6 +11,7 @@ import (
 	"github.com/vladimirok5959/golang-ip2location/internal/server/handler/api/v1/v1_ip2location"
 	"github.com/vladimirok5959/golang-ip2location/internal/server/handler/base"
 	"github.com/vladimirok5959/golang-ip2location/internal/server/handler/page/page_index"
+	"github.com/vladimirok5959/golang-ip2location/internal/server/web"
 	"github.com/vladimirok5959/golang-utils/utils/http/apiserv"
 	"github.com/vladimirok5959/golang-utils/utils/http/helpers"
 )
@@ -31,6 +32,9 @@ func NewMux(ctx context.Context, shutdown context.CancelFunc, client *client.Cli
 	mux.Get("/api/v1/app/status", helpers.HandleAppStatus())
 	mux.Get("/api/v1/ip2location/{s}", v1_ip2location.Handler{Handler: handler})
 
+	// Assets
+	mux.Get("/styles.css", helpers.HandleTextCss(web.StylesCss))
+
 	return mux
 }
 

internal/server/server_test.go

@@ -42,6 +42,9 @@ var _ = Describe("Server", func() {
 						"/api/v1/app/health",
 						"/api/v1/app/status",
 						"/api/v1/ip2location/127.0.0.1",
+
+						// Assets
+						"/styles.css",
 					}
 
 					for _, route := range routes {

internal/server/web/index.html

@@ -4,190 +4,7 @@
 		<meta charset="utf-8" />
 		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
 		<title>ip2location</title>
-		<style>
-			*,
-			::after,
-			::before {
-				box-sizing: border-box;
-			}
-
-			html {
-				height: 100%;
-				line-height: 1.5;
-			}
-
-			body {
-				color: #212529;
-				font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
-				font-size: 16px;
-				font-weight: 400;
-				margin: 0;
-				padding: 0;
-			}
-
-			.clear::after {
-				clear: both;
-				content: '';
-				display: block;
-				height: 0;
-				line-height: 0;
-				margin: 0;
-				padding: 0;
-			}
-
-			html {
-				min-height: 100%;
-				height: 100%;
-				position: relative;
-			}
-
-			body {
-				margin: 0;
-				padding: 0;
-				position: relative;
-				width: 100%;
-				min-height: 100%;
-				height: 100%;
-				height: auto;
-				display: table;
-			}
-
-			a {
-				color: #0d6efd;
-				text-decoration: none;
-			}
-
-			a:hover {
-				text-decoration: underline;
-			}
-
-			.wrapper {
-				padding: 15px;
-				text-align: center;
-				display: table-cell;
-				vertical-align: middle;
-			}
-
-			h1, h2 {
-				font-weight: 400;
-				font-size: 34px;
-				line-height: 36px;
-				margin: 10px 0;
-			}
-
-			h2 {
-				font-weight: 350;
-				font-size: 14px;
-				line-height: 18px;
-				margin-bottom: 0;
-			}
-
-			.form-control {
-				background-clip: padding-box;
-				background-color: #fff;
-				border-radius: 4px;
-				border: 1px solid #ced4da;
-				color: #495057;
-				display: inline-block;
-				font-family: inherit;
-				font-size: 16px;
-				height: 38px;
-				line-height: 1.5;
-				margin: 0;
-				overflow: visible;
-				padding: 6px 12px;
-				transition: box-shadow .15s ease-in-out;
-				vertical-align: middle;
-			}
-
-			.form-control:focus {
-				background-color: #fff;
-				border-color: #80bdff;
-				box-shadow: 0 0 0 0.2rem rgb(0 123 255 / 25%);
-				color: #495057;
-				outline: 0;
-			}
-
-			.btn {
-				border-radius: 4px;
-				border: 1px solid transparent;
-				color: #fff;
-				display: inline-block;
-				font-size: 16px;
-				font-weight: 400;
-				height: 38px;
-				line-height: 1.5;
-				padding: 6px 12px;
-				text-align: center;
-				text-decoration: none;
-				transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
-				user-select: none;
-				vertical-align: middle;
-				white-space: nowrap;
-			}
-
-			.btn:focus,
-			.btn:hover {
-				text-decoration: none;
-			}
-
-			.btn:focus {
-				box-shadow: 0 0 0 0.25rem rgb(13 110 253 / 25%);
-				outline: 0;
-			}
-
-			.btn:not(:disabled):not(.disabled) {
-				cursor: pointer;
-			}
-
-			.btn.blue {
-				background-color: #0d6efd;
-				border-color: #0d6efd;
-			}
-
-			.btn.blue:hover {
-				background-color: #0b5ed7;
-				border-color: #0a58ca;
-			}
-
-			.btn.blue:focus {
-				box-shadow: 0 0 0 0.25rem rgb(49 132 253 / 50%);
-			}
-
-			form {
-				margin-top: 15px;
-			}
-
-			button {
-				margin-left: 15px;
-			}
-
-			@media only screen and (max-width:800px) {
-				.wrapper {
-					padding: 15px 0;
-				}
-
-				h1, h2 {
-					padding: 0 15px;
-				}
-
-				form {
-					display: block;
-					padding: 0px 15px;
-				}
-
-				form .form-control,
-				form .btn {
-					display: block;
-					width: 100%;
-				}
-
-				form button {
-					margin-left: 0;
-					margin-top: 15px;
-				}
-			}
-		</style>
+		<link rel="stylesheet" href="/styles.css?v=1" />
 	</head>
 	<body>
 		<div class="wrapper">

internal/server/web/styles.dev.css

@@ -0,0 +1,182 @@
+*,
+::after,
+::before {
+	box-sizing: border-box;
+}
+
+html {
+	height: 100%;
+	line-height: 1.5;
+}
+
+body {
+	color: #212529;
+	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+	font-size: 16px;
+	font-weight: 400;
+	margin: 0;
+	padding: 0;
+}
+
+.clear::after {
+	clear: both;
+	content: '';
+	display: block;
+	height: 0;
+	line-height: 0;
+	margin: 0;
+	padding: 0;
+}
+
+html {
+	min-height: 100%;
+	height: 100%;
+	position: relative;
+}
+
+body {
+	margin: 0;
+	padding: 0;
+	position: relative;
+	width: 100%;
+	min-height: 100%;
+	height: 100%;
+	height: auto;
+	display: table;
+}
+
+a {
+	color: #0d6efd;
+	text-decoration: none;
+}
+
+a:hover {
+	text-decoration: underline;
+}
+
+.wrapper {
+	padding: 15px;
+	text-align: center;
+	display: table-cell;
+	vertical-align: middle;
+}
+
+h1, h2 {
+	font-weight: 400;
+	font-size: 34px;
+	line-height: 36px;
+	margin: 10px 0;
+}
+
+h2 {
+	font-weight: 350;
+	font-size: 14px;
+	line-height: 18px;
+	margin-bottom: 0;
+}
+
+.form-control {
+	background-clip: padding-box;
+	background-color: #fff;
+	border-radius: 4px;
+	border: 1px solid #ced4da;
+	color: #495057;
+	display: inline-block;
+	font-family: inherit;
+	font-size: 16px;
+	height: 38px;
+	line-height: 1.5;
+	margin: 0;
+	overflow: visible;
+	padding: 6px 12px;
+	transition: box-shadow .15s ease-in-out;
+	vertical-align: middle;
+}
+
+.form-control:focus {
+	background-color: #fff;
+	border-color: #80bdff;
+	box-shadow: 0 0 0 0.2rem rgb(0 123 255 / 25%);
+	color: #495057;
+	outline: 0;
+}
+
+.btn {
+	border-radius: 4px;
+	border: 1px solid transparent;
+	color: #fff;
+	display: inline-block;
+	font-size: 16px;
+	font-weight: 400;
+	height: 38px;
+	line-height: 1.5;
+	padding: 6px 12px;
+	text-align: center;
+	text-decoration: none;
+	transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
+	user-select: none;
+	vertical-align: middle;
+	white-space: nowrap;
+}
+
+.btn:focus,
+.btn:hover {
+	text-decoration: none;
+}
+
+.btn:focus {
+	box-shadow: 0 0 0 0.25rem rgb(13 110 253 / 25%);
+	outline: 0;
+}
+
+.btn:not(:disabled):not(.disabled) {
+	cursor: pointer;
+}
+
+.btn.blue {
+	background-color: #0d6efd;
+	border-color: #0d6efd;
+}
+
+.btn.blue:hover {
+	background-color: #0b5ed7;
+	border-color: #0a58ca;
+}
+
+.btn.blue:focus {
+	box-shadow: 0 0 0 0.25rem rgb(49 132 253 / 50%);
+}
+
+form {
+	margin-top: 15px;
+}
+
+button {
+	margin-left: 15px;
+}
+
+@media only screen and (max-width:800px) {
+	.wrapper {
+		padding: 15px 0;
+	}
+
+	h1, h2 {
+		padding: 0 15px;
+	}
+
+	form {
+		display: block;
+		padding: 0px 15px;
+	}
+
+	form .form-control,
+	form .btn {
+		display: block;
+		width: 100%;
+	}
+
+	form button {
+		margin-left: 0;
+		margin-top: 15px;
+	}
+}

internal/server/web/web.go

@@ -7,4 +7,7 @@ import (
 var (
 	//go:embed index.html
 	IndexHtml string
+
+	//go:embed styles.css
+	StylesCss string
 )