setup Tailwind css project in web/styles
This commit is contained in:
Andre Staltz
parent
fe26d62ce1
commit
8401472b8f
6
.gitignore
vendored
6
.gitignore
vendored
@ -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.*
|
||||
@ -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
@ -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
5
web/styles/gen.go
Normal 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
3
web/styles/input.css
Normal file
@ -0,0 +1,3 @@
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
2682
web/styles/package-lock.json
generated
Normal file
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
19
web/styles/package.json
Normal 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"
|
||||
}
|
||||
}
|
||||
9
web/styles/postcss.config.js
Normal file
9
web/styles/postcss.config.js
Normal file
@ -0,0 +1,9 @@
|
||||
module.exports = {
|
||||
plugins: {
|
||||
tailwindcss: {},
|
||||
autoprefixer: {},
|
||||
cssnano: {
|
||||
preset: 'default'
|
||||
}
|
||||
}
|
||||
}
|
||||
11
web/styles/tailwind.config.js
Normal file
11
web/styles/tailwind.config.js
Normal file
@ -0,0 +1,11 @@
|
||||
module.exports = {
|
||||
purge: ['../templates/**/*.tmpl'],
|
||||
darkMode: false,
|
||||
theme: {
|
||||
extend: {},
|
||||
},
|
||||
variants: {
|
||||
extend: {},
|
||||
},
|
||||
plugins: [],
|
||||
};
|
||||
@ -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>
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{{ define "title" }}Landing - About{{ end }}
|
||||
{{ define "content" }}
|
||||
<div class="page-header">
|
||||
<div>
|
||||
<h1>The about page</h1>
|
||||
</div>
|
||||
</div> <!-- /row -->
|
||||
|
||||
@ -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
@ -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 },
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user