OceanSlim/GoStart
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

CDNs included for development

Browse Source
This commit is contained in:
0ceanSlim 2024-05-29 14:53:02 -04:00
parent e867a7a9d3
commit dd43d8bb50
6 changed files with 30 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
readme.md
View File

@ -1,6 +1,6 @@
# GoStart # GoStart
This is a basic starter project for building web applications using Go, Tailwind CSS, and htmx. It provides a foundation for creating interactive and responsive web applications without relying on any third-party dependencies, utilizing only the packages included with the Go language by default. This module includes a minified version of HTMX and a Custom Tailwind css, so it does not depend on having ANY external programs or CDNs. If you would like to change the default styling of the app beyond the default tailwind components, you will need the standalone Tailwind Executable to rebuild the CSS to your liking. This is a basic starter project for building web applications using Go, Tailwind CSS, and htmx. It provides a foundation for creating interactive and responsive web applications without relying on any third-party dependencies, utilizing only the packages included with the Go language by default. This module includes a minified version of HTMX and a Custom Tailwind CSS for that add a Dark/Light themeing capability out of the box. If you would like to change the default styling of the app beyond the default tailwind components, you will need the standalone Tailwind Executable to rebuild the CSS to your liking.
-_More information on custom styling can be found in the [Style readme](web/style/readme.md)_ -_More information on custom styling can be found in the [Style readme](web/style/readme.md)_
## Features ## Features

2
web/static/tailwind.min.css → web/static/custom.min.css vendored
View File

File diff suppressed because one or more lines are too long

1
web/static/htmx.min.js vendored
View File

File diff suppressed because one or more lines are too long

6
web/style/readme.md
View File

@ -1,13 +1,13 @@
# Information # Information
This repository INCLUDES a minified version of the css used to style the web views. If you want to change anything about the configuration or the input, you will need to rebuild the minified tailwindcss by using the [Tailwind standalone CLI Tool](https://github.com/tailwindlabs/tailwindcss/releases). This repository INCLUDES a minified version of the custom css used to style the web views with themes defined in the input.css. If you want to change anything about the configuration or the input, you will need to rebuild the custom minified css by using the [Tailwind standalone CLI Tool](https://github.com/tailwindlabs/tailwindcss/releases).
For Tailwind to Rebuild the CSS, Tailwind must be run to compile the new styling. For Tailwind to Rebuild the CSS, Tailwind must be run to compile the new styling.
To do this run: To do this run:
```bash ```bash
tailwindcss -i /web/style/input.css -o /web/static/tailwind.min.css --minify tailwindcss -i web/style/input.css -o web/static/custom.min.css --minify
``` ```
## Development ## Development
@ -17,7 +17,7 @@ You can run a watcher while in development to automatically rebuild the `tailwin
To do this run: To do this run:
```bash ```bash
tailwindcss -i /web/style/input.css -o /web/static/tailwind.min.css --watch --minify tailwindcss -i web/style/input.css -o web/static/custom.min.css --watch --minify
``` ```
### Dark Mode ### Dark Mode

5
web/views/index.html
View File

@ -1,7 +1,10 @@
{{define "view"}} {{define "view"}}
<main> <main>
<section> <section>
<button hx-get="/api/example" class="p-2 text-white bg-blue-400 rounded-md"> <button
hx-get="/api/example"
class="p-2 text-white rounded-md bg-amber-400"
>
Click Me! Click Me!
</button> </button>
<h1 class="font-bold">API Example</h1> <h1 class="font-bold">API Example</h1>

24
web/views/templates/#layout.html
View File

@ -4,10 +4,28 @@
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>GO Web App - {{.Title}}</title> <!--
<link rel="icon" href="/static/img/favicon.ico" type="image/x-icon" /> CDNs are used for ease of development. In a Production enviornment,
build a proper minified custom CSS using the Tailwind CLI tool and serve
the latest available minified htmx and custom css directly from your server.
To download a copy of htmx: https://htmx.org/docs/#download-a-copy
<link href="/static/tailwind.min.css" rel="stylesheet" /> <link href="/static/tailwind.min.css" rel="stylesheet" />
<script src="/static/htmx.min.js"></script> <link href="/static/htmx.min.js">
-->
<script src="https://cdn.tailwindcss.com"></script>
<script
src="https://unpkg.com/htmx.org@1.9.12"
integrity="sha384-ujb1lZYygJmzgSwoxRggbCHcjc0rB2XoQrxeTUQyRjrOnlCoYta87iKBWq3EsdM2"
crossorigin="anonymous"
></script>
<!--
link the custom minified styling included in this repo, built from the configuration
in the /web/style directory
-->
<link href="/static/custom.min.css" rel="stylesheet" />
<link rel="icon" href="/static/img/favicon.ico" type="image/x-icon" />
<title>GO Web App - {{.Title}}</title>
</head> </head>
<body class="font-mono text-center text-textPrimary bg-bgPrimary"> <body class="font-mono text-center text-textPrimary bg-bgPrimary">
{{template "header" .}} {{template "view" .}} {{template "footer" .}} {{template "header" .}} {{template "view" .}} {{template "footer" .}}