diff --git a/README.md b/README.md index c1493c9..3cf16ff 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,6 @@ # Go Web Starter Kit -More instructions coming. This is a fairly complete web development starter kit in Go. It tries to +This is a fairly complete web development starter kit in Go. It tries to be as simple as possible without leaving out modern features like reactive UIs and database migrations. A primary thing that's included is working authentication, since that's the main thing holding people back when they first start, and also the easiest to get wrong. @@ -10,5 +10,5 @@ production yet until I can make it correct. Just use it to learn for now. ## Getting Started - -.... +Programmers hate duplication so if you want the instructions read the [index.md file in +pages](pages/index.md). diff --git a/pages/index.html b/pages/index.html deleted file mode 100644 index 8de9470..0000000 --- a/pages/index.html +++ /dev/null @@ -1,4 +0,0 @@ -

Go Web Dev Starter Kit

- -Instructions coming soon... - diff --git a/pages/index.md b/pages/index.md new file mode 100644 index 0000000..11ba517 --- /dev/null +++ b/pages/index.md @@ -0,0 +1,56 @@ +# Go Web Starter Kit + +This is a fairly complete web development starter kit in Go. It tries to +be as simple as possible without leaving out modern features like reactive UIs and database +migrations. A primary thing that's included is working authentication, since that's the main thing +holding people back when they first start, and also the easiest to get wrong. + +In fact, if you look at how I do it in this first version it is _WRONG_ so do not use this in +production yet until I can make it correct. Just use it to learn for now. + +## Getting Started + +You can get use this project working by doing this: + +```shell +git clone \ + https://git.learnjsthehardway.com/learn-code-the-hard-way/go-web-starter-kit.git my-project +cd my-project +``` + +Then on Linux/OSX you want to delete the `.git` with this: + +```shell +rm -rf .git +``` + +And on Windows you use the ever more clear and totally easier: + +```shell +rm -recurse -force .git +``` + +Once you have that you can make it your own: + +```shell +git init . +go mod tidy +cp config_example.toml config.toml +make dev +``` + +> __Warning__ On Windows you'll probably be asked to give the `webapp.exe` access to +the Public and Private networks to use it. + +You don't have to use the `Makefile` but it's a lot easier than memorizing the various commands. + +You can access the site by visiting https://127.0.0.1:7002/ but keep in mind this is the [Air](https://github.com/air-verse/air) +port, not _your_ site's port. Air is a tool that will rebuild your Go project whenever you change +the code (but _NOT_ HTML/CSS, because that's annoying). + +## Configuration + + +## Tour of Directories + +## More... diff --git a/static/input_style.css b/static/input_style.css index 2eccdc8..6ac287e 100644 --- a/static/input_style.css +++ b/static/input_style.css @@ -118,6 +118,10 @@ button { @apply rounded-sm shadow-sm bg-gray-600 text-gray-50 dark:bg-gray-300 dark:text-gray-950 p-3; } +blockquote { + @apply rounded-sm shadow-sm bg-gray-700 text-gray-50 dark:bg-gray-700 dark:text-white p-2; +} + @utility btn-hover { @apply !bg-gray-900 !text-gray-50; } diff --git a/static/style.css b/static/style.css index e8de8da..d721bef 100644 --- a/static/style.css +++ b/static/style.css @@ -29,6 +29,7 @@ --color-gray-900: oklch(21% 0.0 264.665); --color-gray-950: oklch(13% 0.0 261.692); --color-black: #000; + --color-white: #fff; --spacing: 0.25rem; --container-xs: 20rem; --container-sm: 24rem; @@ -821,6 +822,20 @@ button { color: var(--color-gray-950); } } +blockquote { + border-radius: var(--radius-sm); + background-color: var(--color-gray-700); + padding: calc(var(--spacing) * 2); + color: var(--color-gray-50); + --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)); + box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); + @media (prefers-color-scheme: dark) { + background-color: var(--color-gray-700); + } + @media (prefers-color-scheme: dark) { + color: var(--color-white); + } +} shape { display: flex; aspect-ratio: 1 / 1;