diff options
| author | Vikas Kushwaha <dev@vikas.rocks> | 2025-02-11 16:31:08 +0530 |
|---|---|---|
| committer | Vikas Kushwaha <dev@vikas.rocks> | 2025-02-11 16:31:08 +0530 |
| commit | 57eb8f6712361a3bf75983ce153fac4846dc0273 (patch) | |
| tree | 269a168d59c917c4e313c819e2b4c3ff8175f912 /cmd/web/templates/layouts/app.tmpl | |
Initial commit
Diffstat (limited to 'cmd/web/templates/layouts/app.tmpl')
| -rw-r--r-- | cmd/web/templates/layouts/app.tmpl | 93 |
1 files changed, 93 insertions, 0 deletions
diff --git a/cmd/web/templates/layouts/app.tmpl b/cmd/web/templates/layouts/app.tmpl new file mode 100644 index 0000000..986f458 --- /dev/null +++ b/cmd/web/templates/layouts/app.tmpl @@ -0,0 +1,93 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>{{ .PageTitle }}</title> + <link rel="stylesheet" href="/static/css/style.css"> + <link rel="stylesheet" href="/static/css/tagify.css"> + + <style> + .tagify--outside{ + border: 0; + } + + .tagify--outside .tagify__input{ + order: -1; + flex: 100%; + border: 1px solid var(--tags-border-color); + margin-bottom: 1em; + transition: .1s; + } + + .tagify--outside .tagify__input:hover{ border-color:var(--tags-hover-border-color); } + .tagify--outside.tagify--focus .tagify__input{ + transition:0s; + border-color: var(--tags-focus-border-color); + } + + .tagify__input { border-radius: 4px; margin: 0; padding: 10px 12px; } + </style> + + <link href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet" type="text/css"> + <link href="https://fonts.googleapis.com/css?family=Titillium+Web:700|Source+Serif+Pro:400,700|Merriweather+Sans:400,700|Source+Sans+Pro:400,300,600,700,300italic,400italic,600italic,700italic" rel="stylesheet" type="text/css"> + </head> + <body hx-ext="head-support"> + <nav class="navbar navbar-light"> + <div class="container"> + <a class="navbar-brand" + href="/" + hx-push-url="/" + hx-get="/htmx/home" + hx-target="#app-body">Projecty</a> + + {{ template "components/navbar" . }} + </div> + </nav> + + <div id="app-body"> + {{ embed }} + </div> + + <footer> + <div class="container"> + <a href="/" class="logo-font">Projecty</a> + <span class="attribution"> + An interactive personal project development and sharing website. + </span> + </div> + </footer> + + <div id="htmx-redirect"></div> + + <script src="/static/js/tagify.js"></script> + <script src="/static/js/htmx.js"></script> + <script src="/static/js/htmx-head-support.js"></script> + + <script> + var isTagify = null; + + window.addEventListener('DOMContentLoaded', function() { + renderTagify(); + }); + + document.body.addEventListener("htmx:afterSwap", function(evt) { + renderTagify(); + }); + + function renderTagify() { + const input = document.querySelector('input[name=tags]'); + const tagify = document.querySelector('tags[class="tagify form-control tagify--outside"]'); + + if (input && !tagify) { + new Tagify(input, { + whitelist: [], + dropdown: { + position: "input", + enabled : 0 // always opens dropdown when input gets focus + } + }) + } + } + </script> + </body> +</html> |