h/projectreshoot
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Made navbar responsive

Browse Source
This commit is contained in:
Haelnorr
2025-02-06 10:47:36 +11:00
parent b6feed7c0c
commit 1c30007af4
10 changed files with 308 additions and 1633 deletions
Download Patch File Download Diff File Expand all files Collapse all files

52
.air.toml Normal file
View File

@@ -0,0 +1,52 @@
root = "."
testdata_dir = "testdata"
tmp_dir = "tmp"
[build]
args_bin = []
bin = "./tmp/main"
cmd = "go build -o ./tmp/main ."
delay = 1000
exclude_dir = []
exclude_file = []
exclude_regex = ["_test.go"]
exclude_unchanged = false
follow_symlink = false
full_bin = ""
include_dir = []
include_ext = ["go", "templ"]
include_file = []
kill_delay = "0s"
log = "build-errors.log"
poll = false
poll_interval = 0
post_cmd = []
pre_cmd = []
rerun = false
rerun_delay = 500
send_interrupt = false
stop_on_error = false
[color]
app = ""
build = "yellow"
main = "magenta"
runner = "green"
watcher = "cyan"
[log]
main_only = false
silent = false
time = false
[misc]
clean_on_exit = false
[proxy]
app_port = 3333
enabled = true
proxy_port = 3000
[screen]
clear_on_rebuild = false
keep_scroll = true

9
Makefile
View File

@@ -3,19 +3,16 @@
BINARY_NAME=projectreshoot
# build builds the tailwind css sheet, and compiles the binary into a usable thing.
build:
go mod tidy && \
templ generate && \
go generate && \
go build -ldflags="-w -s" -o ${BINARY_NAME}
# dev runs the development server where it builds the tailwind css sheet,
# and compiles the project whenever a file is changed.
dev:
npx tailwindcss -i ./static/css/input.css -o ./static/css/output.css --watch &\
templ generate --watch --cmd="go generate" &\
templ generate --watch --cmd="go run ."
templ generate --watch &\
air &\
tailwindcss -i ./static/css/input.css -o ./static/css/output.css --watch
clean:
go clean

1448
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

9
package.json
View File

@@ -1,9 +0,0 @@
{
"devDependencies": {
"tailwindcss": "^3.4.17"
},
"dependencies": {
"franken-ui": "^1.1.0",
"postcss": "^8.5.1"
}
}

11
postcss.config.cjs
View File

@@ -1,11 +0,0 @@
module.exports = {
plugins: [
require('tailwindcss'),
require('franken-ui/postcss/sort-media-queries')({
sort: 'mobile-first'
}),
require('franken-ui/postcss/combine-duplicated-selectors')({
removeDuplicatedProperties: true
})
]
};

166
static/css/input.css
View File

@@ -1,67 +1,111 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
@import url("https://fonts.googleapis.com/css2?family=Ubuntu+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap");
@import "tailwindcss";
@theme inline {
--color-rosewater: var(--rosewater);
--color-flamingo: var(--flamingo);
--color-pink: var(--pink);
--color-mauve: var(--mauve);
--color-red: var(--red);
--color-maroon: var(--maroon);
--color-peach: var(--peach);
--color-yellow: var(--yellow);
--color-green: var(--green);
--color-teal: var(--teal);
--color-sky: var(--sky);
--color-sapphire: var(--sapphire);
--color-blue: var(--blue);
--color-lavender: var(--lavender);
--color-text: var(--text);
--color-subtext1: var(--subtext1);
--color-subtext0: var(--subtext0);
--color-overlay2: var(--overlay2);
--color-overlay1: var(--overlay1);
--color-overlay0: var(--overlay0);
--color-surface2: var(--surface2);
--color-surface1: var(--surface1);
--color-surface0: var(--surface0);
--color-base: var(--base);
--color-mantle: var(--mantle);
--color-crust: var(--crust);
}
:root {
--warning: 34.95 76.98% 49.41%;
--warning-foreground: 240 22.73% 8.63%;
--success: 109.23 57.64% 39.8%;
--success-foreground: 240 22.73% 8.63%;
--chart-green: 109.23 57.64% 39.8%;
--chart-blue: 197.07 96.57% 45.69%;
--chart-yellow: 34.95 76.98% 49.41%;
--chart-orange: 21.98 99.18% 51.96%;
--chart-red: 347.08 86.67% 44.12%;
--background: 220 23.08% 94.9%;
--foreground: 233.79 16.02% 35.49%;
--card: 220 21.95% 91.96%;
--card-foreground: 233.79 16.02% 35.49%;
--popover: 220 20.69% 88.63%;
--popover-foreground: 233.79 16.02% 35.49%;
--primary: 219.91 91.49% 53.92%;
--primary-foreground: 0 0% 96.08%;
--secondary: 226.67 12.16% 70.98%;
--secondary-foreground: 240 22.73% 8.63%;
--muted: 225 13.56% 76.86%;
--muted-foreground: 240 21.05% 14.9%;
--accent: 230.94 97.2% 71.96%;
--accent-foreground: 240 22.73% 8.63%;
--destructive: 0 84.2% 60.2%;
--destructive-foreground: 210 40% 98%;
--border: 233.79 16.02% 35.49%;
--input: 226.67 12.16% 70.98%;
--ring: 197.07 96.57% 45.69%;
--radius: 0.5rem;
--rosewater: hsl(11, 59%, 67%);
--flamingo: hsl(0, 60%, 67%);
--pink: hsl(316, 73%, 69%);
--mauve: hsl(266, 85%, 58%);
--red: hsl(347, 87%, 44%);
--maroon: hsl(355, 76%, 59%);
--peach: hsl(22, 99%, 52%);
--yellow: hsl(35, 77%, 49%);
--green: hsl(109, 58%, 40%);
--teal: hsl(183, 74%, 35%);
--sky: hsl(197, 97%, 46%);
--sapphire: hsl(189, 70%, 42%);
--blue: hsl(220, 91%, 54%);
--lavender: hsl(231, 97%, 72%);
--text: hsl(234, 16%, 35%);
--subtext1: hsl(233, 13%, 41%);
--subtext0: hsl(233, 10%, 47%);
--overlay2: hsl(232, 10%, 53%);
--overlay1: hsl(231, 10%, 59%);
--overlay0: hsl(228, 11%, 65%);
--surface2: hsl(227, 12%, 71%);
--surface1: hsl(225, 14%, 77%);
--surface0: hsl(223, 16%, 83%);
--base: hsl(220, 23%, 95%);
--mantle: hsl(220, 22%, 92%);
--crust: hsl(220, 21%, 89%);
}
.dark {
--background: 240 21.05% 14.9%;
--foreground: 226.15 63.93% 88.04%;
--card: 0 0% 7.84%;
--card-foreground: 226.15 63.93% 88.04%;
--popover: 240 22.73% 8.63%;
--popover-foreground: 226.15 63.93% 88.04%;
--primary: 217.17 91.87% 75.88%;
--primary-foreground: 240 22.73% 8.63%;
--secondary: 232.5 12% 39.22%;
--secondary-foreground: 226.15 63.93% 88.04%;
--muted: 236.84 16.24% 22.94%;
--muted-foreground: 226.15 63.93% 88.04%;
--accent: 115.45 54.1% 76.08%;
--accent-foreground: 240 22.73% 8.63%;
--destructive: 343 81.2% 74.9%;
--destructive-foreground: 240 22.73% 8.63%;
--border: 236.84 16.24% 22.94%;
--input: 232.5 12% 39.22%;
--ring: 189.18 71.01% 72.94%;
--radius: 0.5rem;
--warning: 223.64 89.19% 92.75%;
--warning-foreground: 0 0% 0%;
--success: 223.73 91.09% 51.57%;
--success-foreground: 221.74 92% 95.1%;
--chart-green: 115.45 54.1% 76.08%;
--chart-blue: 198.5 75.95% 69.02%;
--chart-yellow: 41.35 86.05% 83.14%;
--chart-orange: 22.96 92% 75.49%;
--chart-red: 343.27 81.25% 74.9%;
--rosewater: hsl(10, 56%, 91%);
--flamingo: hsl(0, 59%, 88%);
--pink: hsl(316, 72%, 86%);
--mauve: hsl(267, 84%, 81%);
--red: hsl(343, 81%, 75%);
--maroon: hsl(350, 65%, 77%);
--peach: hsl(23, 92%, 75%);
--yellow: hsl(41, 86%, 83%);
--green: hsl(115, 54%, 76%);
--teal: hsl(170, 57%, 73%);
--sky: hsl(189, 71%, 73%);
--sapphire: hsl(199, 76%, 69%);
--blue: hsl(217, 92%, 76%);
--lavender: hsl(232, 97%, 85%);
--text: hsl(226, 64%, 88%);
--subtext1: hsl(227, 35%, 80%);
--subtext0: hsl(228, 24%, 72%);
--overlay2: hsl(228, 17%, 64%);
--overlay1: hsl(230, 13%, 55%);
--overlay0: hsl(231, 11%, 47%);
--surface2: hsl(233, 12%, 39%);
--surface1: hsl(234, 13%, 31%);
--surface0: hsl(237, 16%, 23%);
--base: hsl(240, 21%, 15%);
--mantle: hsl(240, 21%, 12%);
--crust: hsl(240, 23%, 9%);
}
.ubuntu-mono-regular {
font-family: "Ubuntu Mono", serif;
font-weight: 400;
font-style: normal;
}
.ubuntu-mono-bold {
font-family: "Ubuntu Mono", serif;
font-weight: 700;
font-style: normal;
}
.ubuntu-mono-regular-italic {
font-family: "Ubuntu Mono", serif;
font-weight: 400;
font-style: italic;
}
.ubuntu-mono-bold-italic {
font-family: "Ubuntu Mono", serif;
font-weight: 700;
font-style: italic;
}

78
tailwind.config.js
View File

@@ -1,78 +0,0 @@
import franken from "franken-ui/shadcn-ui/preset-quick";
/** @type {import('tailwindcss').Config} */
export default {
presets: [
franken({
customPalette: {
".ux-theme-catppuccin": {
"--background": "220 23.08% 94.9%",
"--foreground": "233.79 16.02% 35.49%",
"--card": "220 21.95% 91.96%",
"--card-foreground": "233.79 16.02% 35.49%",
"--popover": "220 20.69% 88.63%",
"--popover-foreground": "233.79 16.02% 35.49%",
"--primary": "219.91 91.49% 53.92%",
"--primary-foreground": "0 0% 96.08%",
"--secondary": "226.67 12.16% 70.98%",
"--secondary-foreground": "240 22.73% 8.63%",
"--muted": "225 13.56% 76.86%",
"--muted-foreground": "240 21.05% 14.9%",
"--accent": "230.94 97.2% 71.96%",
"--accent-foreground": "240 22.73% 8.63%",
"--destructive": "0 84.2% 60.2%",
"--destructive-foreground": "210 40% 98%",
"--border": "233.79 16.02% 35.49%",
"--input": "226.67 12.16% 70.98%",
"--ring": "197.07 96.57% 45.69%",
},
".dark.ux-theme-catppuccin": {
"--background": "240 21.05% 14.9%",
"--foreground": "226.15 63.93% 88.04%",
"--card": "0 0% 7.84%",
"--card-foreground": "226.15 63.93% 88.04%",
"--popover": "240 22.73% 8.63%",
"--popover-foreground": "226.15 63.93% 88.04%",
"--primary": "217.17 91.87% 75.88%",
"--primary-foreground": "240 22.73% 8.63%",
"--secondary": "232.5 12% 39.22%",
"--secondary-foreground": "226.15 63.93% 88.04%",
"--muted": "236.84 16.24% 22.94%",
"--muted-foreground": "226.15 63.93% 88.04%",
"--accent": "115.45 54.1% 76.08%",
"--accent-foreground": "240 22.73% 8.63%",
"--destructive": "343 81.2% 74.9%",
"--destructive-foreground": "240 22.73% 8.63%",
"--border": "236.84 16.24% 22.94%",
"--input": "232.5 12% 39.22%",
"--ring": "189.18 71.01% 72.94%",
},
},
}),
],
content: ["./view/**/*.templ"],
safelist: [
{
pattern: /^uk-/,
},
"ProseMirror",
"ProseMirror-focused",
"tiptap",
],
theme: {
extend: {
colors: {
warning: "hsl(var(--warning))",
"warning-foreground": "hsl(var(--warning-foreground))",
success: "hsl(var(--success))",
"success-foreground": "hsl(var(--success-foreground))",
"chart-green": "hsl(var(--chart-green)",
"chart-blue": "hsl(var(--chart-blue)",
"chart-yellow": "hsl(var(--chart-yellow)",
"chart-orange": "hsl(var(--chart-orange)",
"chart-red": "hsl(var(--chart-red)",
},
},
},
plugins: [],
};

89
view/component/navbar.templ
View File

@@ -1,5 +1,90 @@
package component
templ Navbar() {
<nav>Test</nav>
type NavItem struct {
name string
href string
}
func getNavItems() []NavItem {
return []NavItem{
{
name: "Movies",
href: "/movies",
},
}
}
templ Navbar() {
<div x-data="{ open: false }">
<header class="bg-crust">
<div
class="mx-auto flex h-16 max-w-screen-xl items-center gap-8
px-4 sm:px-6 lg:px-8"
>
<a class="block" href="#">
<span class="text-3xl font-bold transition hover:text-green">
<span class="hidden sm:inline">Project</span> Reshoot
</span>
<!-- logo here -->
</a>
<div class="flex flex-1 items-center justify-end sm:justify-between">
<nav aria-label="Global" class="hidden sm:block">
<ul class="flex items-center gap-6 text-xl">
for _, item := range getNavItems() {
<li>
<a
class="text-subtext1 hover:text-green
transition"
href={ templ.SafeURL(item.href) }
>
{ item.name }
</a>
</li>
}
</ul>
</nav>
<div class="flex items-center gap-2">
<div class="sm:flex sm:gap-2">
<a
class="hidden rounded-lg px-4 py-2 sm:block
bg-green hover:bg-green/75 text-mantle transition"
href="/login"
>
Login
</a>
<a
class="hidden rounded-lg px-4 py-2 sm:block
bg-blue text-mantle hover:bg-blue/75 transition"
href="/register"
>
Register
</a>
</div>
<button
@click="open = !open"
class="block rounded-lg p-2.5 sm:hidden transition
bg-surface0 text-subtext0 hover:text-overlay2/75"
>
<span class="sr-only">Toggle menu</span>
<svg
xmlns="http://www.w3.org/2000/svg"
class="size-5"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
stroke-width="2"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M4 6h16M4 12h16M4 18h16"
></path>
</svg>
</button>
</div>
</div>
</div>
</header>
@sideNav(getNavItems())
</div>
}

47
view/component/sidenav.templ Normal file
View File

@@ -0,0 +1,47 @@
package component
templ sideNav(navItems []NavItem) {
<div
x-show="open"
x-transition
class="absolute w-full bg-mantle sm:hidden"
>
<div class="px-4 py-6">
<ul class="space-y-1">
for _, item := range navItems {
<li>
<a
href={ templ.SafeURL(item.href) }
class="block rounded-lg px-4 py-2 text-lg
bg-surface0 text-text transition hover:bg-surface2"
>
{ item.name }
</a>
</li>
}
</ul>
</div>
<div class="px-4 pb-6">
<ul class="space-y-1">
<li class="flex justify-center items-center gap-2">
<a
class="w-26 px-4 py-2 rounded-lg
bg-green text-mantle transition hover:bg-green/75
text-center"
href="/login"
>
Login
</a>
<a
class="w-26 px-4 py-2 rounded-lg
bg-blue text-mantle transition hover:bg-blue/75
text-center"
href="/register"
>
Register
</a>
</li>
</ul>
</div>
</div>
}

32
view/layout/global.templ
View File

@@ -11,33 +11,29 @@ templ Global() {
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Project Reshoot</title>
<link href="/static/css/output.css" rel="stylesheet" />
<script src="https://unpkg.com/franken-ui@1.1.0/dist/js/core.iife.js" type="module"></script>
<script src="https://unpkg.com/franken-ui@1.1.0/dist/js/icon.iife.js" type="module"></script>
<script src="https://unpkg.com/htmx.org@2.0.4"
integrity="sha384-HGfztofotfshcF7+8n44JQL2oJmowVChPTg48S+jvZoztPfvwD79OC/LTtG6dMp+"
crossorigin="anonymous"></script>
<script src="https://unpkg.com/alpinejs" defer></script>
<script>
const htmlElement = document.documentElement;
if (
localStorage.getItem("mode") === "dark" ||
(!("mode" in localStorage) &&
window.matchMedia("(prefers-color-scheme: dark)").matches)
) {
htmlElement.classList.add("dark");
} else {
htmlElement.classList.remove("dark");
}
htmlElement.classList.add(
localStorage.getItem("theme") || "uk-theme-catppuccin",
document.documentElement.classList.toggle(
"dark",
localStorage.currentTheme === "dark" ||
(
!("theme" in localStorage) &&
window.matchMedia("(prefers-color-scheme: dark)").matches
),
);
//localStorage.currentTheme = "light";
//localStorage.currentTheme = "dark";
//localStorage.removeItem("theme");
</script>
</head>
<body class="bg-background text-foreground">
<body class="bg-base text-text ubuntu-mono-regular">
@component.Navbar()
<h1 class="text-3xl text-foreground font-bold underline">Hello world! </h1>
<h1 class="text-3xl font-bold underline">Hello world! </h1>
{ children... }
</body>