setup Tailwind css project in web/styles

This commit is contained in:
Andre Staltz 2021-02-11 18:24:53 +02:00
parent fe26d62ce1
commit 8401472b8f
No known key found for this signature in database
GPG Key ID: 9EDE23EA7E8A4890
15 changed files with 2848 additions and 45 deletions

6
.gitignore vendored
View File

@ -6,4 +6,8 @@ cmd/insert-user/insert-user
test/go/testrun
test/nodejs/testrun
web/handlers/testrun
admindb/sqlite/testrun
admindb/sqlite/testrun
# build artifacts from node.js project web/styles
node_modules
web/assets/styles/compiled.*

View File

@ -21,11 +21,11 @@ var Migrations = func() http.FileSystem {
fs := vfsgen۰FS{
"/": &vfsgen۰DirInfo{
name: "/",
modTime: time.Date(2021, 2, 9, 15, 7, 28, 781106037, time.UTC),
modTime: time.Date(2021, 2, 10, 11, 51, 35, 779485760, time.UTC),
},
"/create-auth-fallback.sql": &vfsgen۰CompressedFileInfo{
name: "create-auth-fallback.sql",
modTime: time.Date(2021, 2, 9, 15, 13, 52, 278658510, time.UTC),
modTime: time.Date(2021, 2, 10, 11, 51, 35, 779485760, time.UTC),
uncompressedSize: 189,
compressedContent: []byte("\x1f\x8b\x08\x00\x00\x00\x00\x00\x02\xff\x6c\xce\xb1\x0e\x82\x30\x14\x85\xe1\xfd\x3e\xc5\x19\x35\xca\x13\x30\xa1\x74\x20\x22\x60\x43\x07\x26\x72\x11\x14\x62\x69\x09\x2d\xc1\xc7\x37\x9a\x98\x38\x78\xd6\xf3\x0f\x5f\x10\x60\x37\x0e\xf7\x99\x7d\x07\x35\xd1\x51\x8a\xa8\x14\x28\xa3\x43\x2a\xc0\x8b\xef\xeb\x1b\x6b\xdd\xf0\xf5\x81\x0d\x01\x43\x0b\x60\x30\x1e\x85\x4c\xce\x91\xac\x70\x12\x15\xb2\xbc\x44\xa6\xd2\x74\x4f\x80\xe1\xb1\x83\xef\x9e\x1e\x9f\x7d\x2f\xa8\x2c\xb9\x28\xf1\x2e\x26\x76\x6e\xb5\x73\x5b\xf7\xec\x7a\x34\xda\x36\x30\xd6\xc3\x2c\x5a\x03\xb4\x0d\x89\x7e\x49\xb1\x5d\x0d\xc5\x32\x2f\xfe\x91\xc2\x57\x00\x00\x00\xff\xff\x23\xca\x06\xae\xbd\x00\x00\x00"),

File diff suppressed because one or more lines are too long

View File

@ -21,12 +21,12 @@ var Defaults = func() http.FileSystem {
fs := vfsgen۰FS{
"/": &vfsgen۰DirInfo{
name: "/",
modTime: time.Date(2021, 2, 10, 16, 34, 42, 221227039, time.UTC),
modTime: time.Date(2021, 2, 11, 13, 14, 21, 93350678, time.UTC),
},
"/active.en.toml": &vfsgen۰CompressedFileInfo{
name: "active.en.toml",
modTime: time.Date(2021, 2, 10, 18, 40, 14, 673088856, time.UTC),
uncompressedSize: 636,
modTime: time.Date(2021, 2, 11, 13, 14, 21, 93350678, time.UTC),
uncompressedSize: 345,
compressedContent: []byte("\x1f\x8b\x08\x00\x00\x00\x00\x00\x02\xff\x5c\x92\xdf\xaa\xdb\x30\x0c\xc6\xef\xf3\x14\x1f\xb9\xe9\x06\x5b\xde\xa0\x17\x63\x65\x30\x28\x2d\x74\x85\x31\xc6\x2e\x9c\x44\x8b\xcd\x71\xac\x60\xcb\x0d\xa1\xf4\xdd\x0f\xce\xbf\xa6\xe7\x4e\xfa\xf4\x93\xf4\xc9\xf8\xa8\x5c\x6d\x5c\x73\x35\x62\x09\x7b\xe4\xac\x95\x41\x3b\xc0\x33\xb7\x79\x36\x57\x7f\x93\xad\xb8\x1d\xeb\xb3\x82\x7e\x96\x34\x79\xca\xb3\x13\xf5\x61\x03\x05\xfe\x82\x5e\x2b\x81\x56\x5d\x47\xae\xc6\x27\x4f\x15\x39\xb1\xc3\xe7\x89\x5d\xd7\xa5\x64\x92\xce\x37\xf2\x37\x43\xfd\xa2\xe2\x2b\x16\x29\xcf\xbe\x45\xd1\x3f\x94\xb5\xa5\xaa\xde\x36\x7b\xfe\x70\x84\x27\x65\xed\x80\xa0\x39\xda\xda\xed\x04\xe5\x64\xaa\x28\x8a\x02\x47\x92\x5d\x40\x43\x82\x81\x23\x44\x7b\x8e\x8d\x86\x68\x13\x8a\xd7\xa1\xab\xa1\xab\x26\x74\x56\x55\x04\xfe\x0f\xab\x82\xc0\x53\x60\x2f\x13\xfe\xcb\x34\xee\xa7\x4b\x5c\x8a\x60\xdc\x53\x3e\x47\x59\x75\x8e\x89\xaf\x5b\xe3\x0e\x2a\xe8\x92\x95\xaf\x37\xae\x97\x50\x38\xb9\xf2\xa8\x17\xe6\x63\xcf\x6a\xea\xc2\xdc\x62\xac\xe1\xf0\x84\xb3\x93\xba\xbd\x36\x24\x76\xc5\x16\x2a\xfb\x3b\x4a\x69\xc6\x77\x8e\x4e\xfe\x65\x35\x85\xca\x9b\x4e\x0c\xbb\xe5\x64\x17\xdb\x92\x7c\xba\xb9\x23\xee\x2c\xc1\x38\xa8\xf9\x13\xb0\x5b\x5e\xc6\xc3\x04\xa4\xb4\x23\x1f\x38\xdd\x0f\xd1\x84\xcb\x84\x49\x02\xf6\x98\x48\x82\xf2\x84\xfb\xbd\x18\x77\x3e\x1e\x9b\xb9\x6b\xcb\x7b\x00\x00\x00\xff\xff\x4b\x47\xdc\x45\x7c\x02\x00\x00"),
},

5
web/styles/gen.go Normal file
View File

@ -0,0 +1,5 @@
package styles
//go:generate npm ci
//go:generate npm run compile-dev
//go:generate npm run compile-prod

3
web/styles/input.css Normal file
View File

@ -0,0 +1,3 @@
@tailwind base;
@tailwind components;
@tailwind utilities;

2682
web/styles/package-lock.json generated Normal file

File diff suppressed because it is too large Load Diff

19
web/styles/package.json Normal file
View File

@ -0,0 +1,19 @@
{
"name": "css-go-ssb-room",
"version": "1.0.0",
"scripts": {
"compile-dev": "postcss input.css -o ../assets/styles/compiled.dev.css",
"compile-prod": "NODE_ENV=production postcss input.css -o ../assets/styles/compiled.prod.css"
},
"engines": {
"node": ">=12"
},
"license": "MIT",
"dependencies": {
"autoprefixer": "~10.2.4",
"cssnano": "^4.1.10",
"postcss": "~8.2.6",
"postcss-cli": "~8.3.1",
"tailwindcss": "~2.0.3"
}
}

View File

@ -0,0 +1,9 @@
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
cssnano: {
preset: 'default'
}
}
}

View File

@ -0,0 +1,11 @@
module.exports = {
purge: ['../templates/**/*.tmpl'],
darkMode: false,
theme: {
extend: {},
},
variants: {
extend: {},
},
plugins: [],
};

View File

@ -3,32 +3,38 @@
<head>
<!-- complete base template -->
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
{{if is_production}}
<link href="/assets/styles/compiled.prod.css" rel="stylesheet">
{{else}}
<link href="/assets/styles/compiled.dev.css" rel="stylesheet">
{{end}}
<title>{{block "title" .}}Go-SSB Room Server{{end}}</title>
</head>
<body>
{{block "extra" .}}{{end}}
<div id="silly-nav">
<div>
{{$user := is_logged_in}}
{{if $user}}
<p>
Hello {{$user.Name}}!
</p>
<ul id="nav">
<ul>
<li><a href="{{urlTo "news:overview"}}">{{i18n "NewsTitle"}}</a></li>
<li><a href="{{urlTo "admin:dashboard"}}">{{i18n "NavAdminDashboard"}}</a></li>
<li><a href="{{urlTo "auth:fallback:logout"}}">{{i18n "AuthSignOut"}}</a></li>
</ul>
{{else}}
<ul id="nav">
<ul>
<li><a href="{{urlTo "news:overview"}}">{{i18n "NewsTitle"}}</a></li>
<li><a href="{{urlTo "auth:fallback:signin:form"}}">{{i18n "AuthSignIn"}}</a></li>
</ul>
{{end}}
</div>
<div class="container">
<div>
{{ block "content" . }}{{end}}
</div>
</body>
</html>
</html>

View File

@ -1,6 +1,6 @@
{{ define "title" }}Landing - About{{ end }}
{{ define "content" }}
<div class="page-header">
<div>
<h1>The about page</h1>
</div>
</div> <!-- /row -->

View File

@ -1,15 +1,44 @@
{{ define "title" }}{{i18n "LandingTitle"}}{{ end }}
{{ define "content" }}
<div class="page-header">
<h1 id="welcome">{{i18n "LandingWelcome"}}</h1>
<div class="container mx-auto">
<h1>{{i18n "LandingWelcome"}}</h1>
<img id="logo" src="/assets/img/test-hermie.png">
<img src="/assets/img/test-hermie.png">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Sed faucibus turpis in eu mi bibendum. A arcu cursus vitae congue mauris rhoncus aenean vel elit. Aliquet bibendum enim facilisis gravida neque convallis. Tempor orci eu lobortis elementum nibh tellus molestie. Sit amet est placerat in egestas erat imperdiet. Amet consectetur adipiscing elit duis tristique sollicitudin nibh sit amet. Ultrices in iaculis nunc sed. Odio facilisis mauris sit amet massa. Sed vulputate mi sit amet mauris commodo quis imperdiet. Hendrerit dolor magna eget est lorem ipsum dolor sit amet. Neque vitae tempus quam pellentesque nec nam. Quis risus sed vulputate odio ut. Tincidunt lobortis feugiat vivamus at augue.</p>
<p>Sem nulla pharetra diam sit amet nisl. Sed odio morbi quis commodo odio aenean sed adipiscing. In ornare quam viverra orci sagittis. Elit eget gravida cum sociis natoque. Auctor neque vitae tempus quam. Porttitor massa id neque aliquam vestibulum morbi blandit cursus risus. Ornare lectus sit amet est placerat in egestas erat. Ut enim blandit volutpat maecenas. Fermentum odio eu feugiat pretium nibh. At risus viverra adipiscing at. Et egestas quis ipsum suspendisse. Mollis nunc sed id semper risus in hendrerit. Semper feugiat nibh sed pulvinar.</p>
<p>Nunc sed augue lacus viverra vitae. Urna id volutpat lacus laoreet non curabitur gravida arcu ac. At lectus urna duis convallis convallis tellus id interdum. Hac habitasse platea dictumst quisque. In ornare quam viverra orci sagittis eu volutpat odio facilisis. Ac felis donec et odio pellentesque diam volutpat commodo sed. Elementum integer enim neque volutpat ac tincidunt vitae semper quis. Nec nam aliquam sem et tortor consequat id porta nibh. Massa vitae tortor condimentum lacinia quis vel. Neque egestas congue quisque egestas diam in arcu cursus. Rhoncus mattis rhoncus urna neque viverra justo. Quam quisque id diam vel quam elementum pulvinar. At volutpat diam ut venenatis tellus in metus vulputate eu. Dui id ornare arcu odio ut sem nulla pharetra. Ut eu sem integer vitae justo eget magna fermentum iaculis. Risus sed vulputate odio ut. Eu volutpat odio facilisis mauris sit. Vel fringilla est ullamcorper eget nulla facilisi etiam. Nullam ac tortor vitae purus faucibus.</p>
<p>Enim sit amet venenatis urna cursus eget nunc scelerisque viverra. Rhoncus est pellentesque elit ullamcorper dignissim. In aliquam sem fringilla ut morbi tincidunt augue interdum. Sit amet consectetur adipiscing elit. Id volutpat lacus laoreet non curabitur gravida arcu. Nunc aliquet bibendum enim facilisis gravida neque convallis. Eros donec ac odio tempor orci dapibus ultrices in iaculis. Interdum consectetur libero id faucibus nisl. Est velit egestas dui id ornare arcu odio ut. Scelerisque felis imperdiet proin fermentum leo vel orci porta non. Nisi vitae suscipit tellus mauris a diam maecenas. Nisl pretium fusce id velit ut tortor pretium viverra.</p>
<p>Varius morbi enim nunc faucibus. At auctor urna nunc id cursus. Vitae purus faucibus ornare suspendisse. Ut ornare lectus sit amet est placerat. Libero justo laoreet sit amet. Scelerisque viverra mauris in aliquam sem fringilla ut. In est ante in nibh. Turpis egestas integer eget aliquet. Nibh cras pulvinar mattis nunc sed blandit. Fringilla ut morbi tincidunt augue interdum velit euismod in. Malesuada fames ac turpis egestas sed tempus urna et pharetra. Eu feugiat pretium nibh ipsum. Mauris ultrices eros in cursus turpis massa. Eu sem integer vitae justo eget. Dignissim suspendisse in est ante in. Imperdiet nulla malesuada pellentesque elit. Ut faucibus pulvinar elementum integer enim neque. Consequat semper viverra nam libero justo laoreet.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Sed faucibus turpis in eu mi bibendum. A arcu cursus vitae congue mauris rhoncus aenean vel elit. Aliquet
bibendum enim facilisis gravida neque convallis. Tempor orci eu lobortis elementum nibh tellus molestie. Sit amet
est placerat in egestas erat imperdiet. Amet consectetur adipiscing elit duis tristique sollicitudin nibh sit amet.
Ultrices in iaculis nunc sed. Odio facilisis mauris sit amet massa. Sed vulputate mi sit amet mauris commodo quis
imperdiet. Hendrerit dolor magna eget est lorem ipsum dolor sit amet. Neque vitae tempus quam pellentesque nec nam.
Quis risus sed vulputate odio ut. Tincidunt lobortis feugiat vivamus at augue.</p>
<p>Sem nulla pharetra diam sit amet nisl. Sed odio morbi quis commodo odio aenean sed adipiscing. In ornare quam
viverra orci sagittis. Elit eget gravida cum sociis natoque. Auctor neque vitae tempus quam. Porttitor massa id
neque aliquam vestibulum morbi blandit cursus risus. Ornare lectus sit amet est placerat in egestas erat. Ut enim
blandit volutpat maecenas. Fermentum odio eu feugiat pretium nibh. At risus viverra adipiscing at. Et egestas quis
ipsum suspendisse. Mollis nunc sed id semper risus in hendrerit. Semper feugiat nibh sed pulvinar.</p>
<p>Nunc sed augue lacus viverra vitae. Urna id volutpat lacus laoreet non curabitur gravida arcu ac. At lectus urna
duis convallis convallis tellus id interdum. Hac habitasse platea dictumst quisque. In ornare quam viverra orci
sagittis eu volutpat odio facilisis. Ac felis donec et odio pellentesque diam volutpat commodo sed. Elementum
integer enim neque volutpat ac tincidunt vitae semper quis. Nec nam aliquam sem et tortor consequat id porta nibh.
Massa vitae tortor condimentum lacinia quis vel. Neque egestas congue quisque egestas diam in arcu cursus. Rhoncus
mattis rhoncus urna neque viverra justo. Quam quisque id diam vel quam elementum pulvinar. At volutpat diam ut
venenatis tellus in metus vulputate eu. Dui id ornare arcu odio ut sem nulla pharetra. Ut eu sem integer vitae justo
eget magna fermentum iaculis. Risus sed vulputate odio ut. Eu volutpat odio facilisis mauris sit. Vel fringilla est
ullamcorper eget nulla facilisi etiam. Nullam ac tortor vitae purus faucibus.</p>
<p>Enim sit amet venenatis urna cursus eget nunc scelerisque viverra. Rhoncus est pellentesque elit ullamcorper
dignissim. In aliquam sem fringilla ut morbi tincidunt augue interdum. Sit amet consectetur adipiscing elit. Id
volutpat lacus laoreet non curabitur gravida arcu. Nunc aliquet bibendum enim facilisis gravida neque convallis.
Eros donec ac odio tempor orci dapibus ultrices in iaculis. Interdum consectetur libero id faucibus nisl. Est velit
egestas dui id ornare arcu odio ut. Scelerisque felis imperdiet proin fermentum leo vel orci porta non. Nisi vitae
suscipit tellus mauris a diam maecenas. Nisl pretium fusce id velit ut tortor pretium viverra.</p>
<p>Varius morbi enim nunc faucibus. At auctor urna nunc id cursus. Vitae purus faucibus ornare suspendisse. Ut ornare
lectus sit amet est placerat. Libero justo laoreet sit amet. Scelerisque viverra mauris in aliquam sem fringilla ut.
In est ante in nibh. Turpis egestas integer eget aliquet. Nibh cras pulvinar mattis nunc sed blandit. Fringilla ut
morbi tincidunt augue interdum velit euismod in. Malesuada fames ac turpis egestas sed tempus urna et pharetra. Eu
feugiat pretium nibh ipsum. Mauris ultrices eros in cursus turpis massa. Eu sem integer vitae justo eget. Dignissim
suspendisse in est ante in. Imperdiet nulla malesuada pellentesque elit. Ut faucibus pulvinar elementum integer enim
neque. Consequat semper viverra nam libero justo laoreet.</p>
</div>
</div> <!-- /row -->
{{end}}

File diff suppressed because one or more lines are too long

View File

@ -24,8 +24,9 @@ import (
func TemplateFuncs(m *mux.Router) template.FuncMap {
return template.FuncMap{
"urlTo": NewURLTo(m),
"inc": func(i int) int { return i + 1 },
"urlTo": NewURLTo(m),
"inc": func(i int) int { return i + 1 },
"is_production": func() bool { return Production },
}
}