Skip to content

Commit

Permalink
fix: Use picocss
Browse files Browse the repository at this point in the history
  • Loading branch information
dadav committed Jul 17, 2024
1 parent 5cdbb8d commit c22543e
Show file tree
Hide file tree
Showing 14 changed files with 229 additions and 84 deletions.
4 changes: 4 additions & 0 deletions internal/v3/ui/assets/pico.min.css

Large diffs are not rendered by default.

34 changes: 2 additions & 32 deletions internal/v3/ui/assets/style.css
Original file line number Diff line number Diff line change
@@ -1,40 +1,10 @@
* {
margin: 0;
padding: 0;
box-sizing: border-box;
text-decoration: none;
list-style-type: none;
outline: none;
}

html {
font-size: 62.5%;
}

body {
background-color: palegoldenrod;
}

.main {
display: flex;
align-items: center;
justify-content: center;
}

.search {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}

input {
width: 100%;
padding: 5px;
}

table {
width: 100%;
font-size: 2rem;
text-align: center;
#query {
max-width: 50%;
}
83 changes: 83 additions & 0 deletions internal/v3/ui/assets/theme-switcher.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,83 @@
/*!
* Minimal theme switcher
*
* Pico.css - https://picocss.com
* Copyright 2019-2024 - Licensed under MIT
*/

const themeSwitcher = {
// Config
_scheme: "auto",
menuTarget: "details.dropdown",
buttonsTarget: "a[data-theme-switcher]",
buttonAttribute: "data-theme-switcher",
rootAttribute: "data-theme",
localStorageKey: "picoPreferredColorScheme",

// Init
init() {
this.scheme = this.schemeFromLocalStorage;
this.initSwitchers();
},

// Get color scheme from local storage
get schemeFromLocalStorage() {
return window.localStorage?.getItem(this.localStorageKey) ?? this._scheme;
},

// Preferred color scheme
get preferredColorScheme() {
return window.matchMedia("(prefers-color-scheme: dark)").matches
? "dark"
: "light";
},

// Init switchers
initSwitchers() {
const buttons = document.querySelectorAll(this.buttonsTarget);
buttons.forEach((button) => {
button.addEventListener(
"click",
(event) => {
event.preventDefault();
// Set scheme
this.scheme = button.getAttribute(this.buttonAttribute);
// Close dropdown
document.querySelector(this.menuTarget)?.removeAttribute("open");
},
false,
);
});
},

// Set scheme
set scheme(scheme) {
if (scheme == "auto") {
this._scheme = this.preferredColorScheme;
} else if (scheme == "dark" || scheme == "light") {
this._scheme = scheme;
}
this.applyScheme();
this.schemeToLocalStorage();
},

// Get scheme
get scheme() {
return this._scheme;
},

// Apply scheme
applyScheme() {
document
.querySelector("html")
?.setAttribute(this.rootAttribute, this.scheme);
},

// Store scheme to local storage
schemeToLocalStorage() {
window.localStorage?.setItem(this.localStorageKey, this.scheme);
},
};

// Init
themeSwitcher.init();
40 changes: 19 additions & 21 deletions internal/v3/ui/components/author.templ
Original file line number Diff line number Diff line change
Expand Up @@ -3,27 +3,25 @@ package components
import gen "github.com/dadav/gorge/pkg/gen/v3/openapi"

templ AuthorView(modules []*gen.Module) {
<div>
<h3>{ modules[0].Owner.Username }</h3>
<table class="table">
<thead>
<h3>{ modules[0].Owner.Username }</h3>
<table>
<thead>
<tr>
<th scope="col">Module</th>
<th scope="col">Version</th>
</tr>
</thead>
<tbody>
for _, module := range modules {
<tr>
<th>Module</th>
<th>Version</th>
<td>
{ module.Name }
</td>
<td>
{ module.CurrentRelease.Version }
</td>
</tr>
</thead>
<tbody>
for _, module := range modules {
<tr>
<td>
{ module.Name }
</td>
<td>
{ module.CurrentRelease.Version }
</td>
</tr>
}
</tbody>
</table>
</div>
}
</tbody>
</table>
}
12 changes: 6 additions & 6 deletions internal/v3/ui/components/author_templ.go

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 2 additions & 0 deletions internal/v3/ui/components/head.templ
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,9 @@ templ Header(title string) {
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<meta name="color-scheme" content="light dark"/>
<title>{ title }</title>
<link rel="stylesheet" href="/assets/pico.min.css"/>
<link rel="stylesheet" href="/assets/style.css"/>
<link rel="icon" type="image/x-icon" href="/assets/favicon.ico"/>
<script src="/assets/htmx.min.js"></script>
Expand Down
6 changes: 3 additions & 3 deletions internal/v3/ui/components/head_templ.go

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

33 changes: 32 additions & 1 deletion internal/v3/ui/components/module.templ
Original file line number Diff line number Diff line change
@@ -1,7 +1,38 @@
package components

import gen "github.com/dadav/gorge/pkg/gen/v3/openapi"
import (
"fmt"
gen "github.com/dadav/gorge/pkg/gen/v3/openapi"
)

templ ModuleView(module *gen.Module) {
<h3>{ module.Name }</h3>
<table>
<tbody>
<tr>
<td>
Name
</td>
<td>
{ module.Name }
</td>
</tr>
<tr>
<td>
Author
</td>
<td>
<a href={ templ.URL(fmt.Sprintf("/authors/%s", module.Owner.Slug)) }>{ module.Owner.Username }</a>
</td>
</tr>
<tr>
<td>
Version
</td>
<td>
{ module.CurrentRelease.Version }
</td>
</tr>
</tbody>
</table>
}
43 changes: 41 additions & 2 deletions internal/v3/ui/components/module_templ.go

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

21 changes: 19 additions & 2 deletions internal/v3/ui/components/page.templ
Original file line number Diff line number Diff line change
Expand Up @@ -5,9 +5,26 @@ templ Page(title string, content templ.Component) {
<html>
@Header(title)
<body>
<div class="main">
<header class="container">
<nav>
<ul>
<li>
<details class="dropdown">
<summary role="button" class="secondary">Theme</summary>
<ul>
<li><a href="#" data-theme-switcher="auto">Auto</a></li>
<li><a href="#" data-theme-switcher="light">Light</a></li>
<li><a href="#" data-theme-switcher="dark">Dark</a></li>
</ul>
</details>
</li>
</ul>
</nav>
</header>
<main class="container">
@content
</div>
</main>
<script src="/assets/theme-switcher.js"></script>
</body>
</html>
}
Loading

0 comments on commit c22543e

Please sign in to comment.