efim
/
Learning-HTMX
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: initialized tailwind 

basic conig targetting templ
templ html page with import
Makefile job that generates for the run
This commit is contained in:
efim 2024-03-11 10:45:47 +00:00
parent de2fd2bdc0
commit 9c19bd7b6b
7 changed files with 49 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.gitignore vendored
View File

@ -2,3 +2,4 @@
/.go/
*~
*_templ.go
static/output.css

12
Makefile
View File

@ -8,8 +8,16 @@ GENERATED_FILES := $(TEMPL_FILES:.templ=_templ.go)
$(GENERATED_FILES): $(TEMPL_FILES)
templ generate
# Run task depends on the generated files
run: $(GENERATED_FILES)
TAILWIND_CONFIG := tailwind.config.js
INPUT_CSS := input.css
OUTPUT_CSS := static/output.css
# generate tailwindcss output
$(OUTPUT_CSS): $(TEMPL_FILES) $(TAILWIND_CONFIG) $(INPUT_CSS)
tailwindcss -i $(INPUT_CSS) -o $(OUTPUT_CSS)
# Run the server, with dependencies on templ and tailwind generation
run: $(GENERATED_FILES) $(OUTPUT_CSS)
go run .
# this uses wgo to re-execute 'make run'

14
flake.nix
View File

@ -8,12 +8,20 @@ rec {
outputs = { self, nixpkgs, flake-utils, templ }:
flake-utils.lib.eachDefaultSystem (system:
let pkgs = nixpkgs.legacyPackages.${system};
let
pkgs = nixpkgs.legacyPackages.${system};
templPkg = templ.packages.${system}.templ;
in {
devShells.default = pkgs.mkShell {
buildInputs =
[ pkgs.go pkgs.wgo pkgs.semgrep pkgs.gopls pkgs.gnumake templPkg ];
buildInputs = [
pkgs.go
pkgs.wgo
pkgs.semgrep
pkgs.gopls
pkgs.gnumake
templPkg
pkgs.tailwindcss
];
shellHook = ''
export GOPATH=$PWD/.go
export PATH=$GOPATH/bin:$PATH

12
hello.templ
View File

@ -4,7 +4,13 @@ var myVar string = "some string, changed. and more"
var anotherVar string = "hoho, cool"
templ hello(name string) {
<div>Hello, {name}. referencing var: {myVar}</div>
<html>
<head>
<title>This is the title of the webpage!</title>
<link href="./static/output.css" rel="stylesheet"/>
</head>
<body class="bg-blue-200">
<p class="text-purple-500">This is an example paragraph. Anything in the <strong>body</strong> tag will appear on the page, just like this <strong>p</strong> tag and its contents.</p>
</body>
</html>
}

3
input.css Normal file
View File

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

3
main.go
View File

@ -11,6 +11,9 @@ func main() {
http.Handle("/", templ.Handler(component))
staticFs := http.FileServer(http.Dir("./static"))
http.Handle("/static/", http.StripPrefix("/static/", staticFs))
fmt.Println("starting to serve on :3000")
http.ListenAndServe(":3000", nil)
}

9
tailwind.config.js Normal file
View File

@ -0,0 +1,9 @@
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ["./**/*.templ"],
theme: {
extend: {},
},
plugins: [],
}