Skip to content

Commit

Permalink
KISS
Browse files Browse the repository at this point in the history
  • Loading branch information
@davesavic
davesavic committed Jan 13, 2024
1 parent d2a813c commit c0fdb1a
Show file tree
Hide file tree
Showing 14 changed files with 515 additions and 541 deletions.
Binary file modified bin/aio
View file
Binary file not shown.
6 changes: 3 additions & 3 deletions services/serve/serve.go
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ package serve

import (
templEngine "github.com/davesavic/aio/services/templ"
view "github.com/davesavic/aio/view"
"github.com/davesavic/aio/view"
"github.com/gin-gonic/gin"
"net/http"
)
Expand All @@ -13,8 +13,8 @@ func Run() error {
r.Use(gin.Recovery())
r.Use(gin.Logger())

r.GET("/", func(c *gin.Context) {
c.HTML(http.StatusOK, "landing", view.LandingPage())
r.GET("/", func(ctx *gin.Context) {
ctx.HTML(http.StatusOK, "index", view.AuthorisedLayout())
})

return r.Run()
Expand Down
7 changes: 0 additions & 7 deletions view/button.templ
View file

This file was deleted.

53 changes: 0 additions & 53 deletions view/button_templ.go
View file

This file was deleted.

7 changes: 0 additions & 7 deletions view/landing.templ
View file

This file was deleted.

50 changes: 0 additions & 50 deletions view/landing_templ.go
View file

This file was deleted.

157 changes: 157 additions & 0 deletions view/layout.templ
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,157 @@
package view

templ AuthorisedLayout() {
<!DOCTYPE html>
<html class="h-full">
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="https://cdn.tailwindcss.com"></script>
<script>
document.addEventListener('DOMContentLoaded', () => {
const menu = document.querySelector('#user-menu-menu')
const menuButton = document.querySelector('#user-menu-button')
menuButton.addEventListener('click', () => {
if (menu.classList.contains('hidden')) {
// Show menu
menu.classList.remove('hidden');
menu.classList.remove('transition', 'ease-in', 'duration-75', 'opacity-0', 'scale-95');
menu.classList.add('transition', 'ease-out', 'duration-200', 'opacity-100', 'scale-100');
return;
}

// Hide menu
menu.classList.remove('transition', 'ease-out', 'duration-200', 'opacity-100', 'scale-100');
menu.classList.add('transition', 'ease-in', 'duration-75', 'opacity-0', 'scale-95');
setTimeout(() => {
menu.classList.add('hidden');
}, 75);
})

document.addEventListener('click', (event) => {
if (!menu.classList.contains('hidden') && !menuButton.contains(event.target)) {
// Hide menu
menu.classList.remove('transition', 'ease-out', 'duration-200', 'opacity-100', 'scale-100');
menu.classList.add('transition', 'ease-in', 'duration-75', 'opacity-0', 'scale-95');
setTimeout(() => {
menu.classList.add('hidden');
}, 75);
}
})
})
</script>
</head>
<body class="h-full">
<div class="min-h-full">
<nav class="border-b border-gray-200 bg-white">
<div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
<div class="flex h-16 justify-between">
<div class="flex">
<div class="flex flex-shrink-0 items-center">
<img class="block h-8 w-auto lg:hidden" src="https://tailwindui.com/img/logos/mark.svg?color=indigo&shade=600" alt="Your Company" />
<img class="hidden h-8 w-auto lg:block" src="https://tailwindui.com/img/logos/mark.svg?color=indigo&shade=600" alt="Your Company" />
</div>
<div class="hidden sm:-my-px sm:ml-6 sm:flex sm:space-x-8">
<!-- Current: "border-indigo-500 text-gray-900", Default: "border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700" -->
<a href="#" class="border-indigo-500 text-gray-900 inline-flex items-center border-b-2 px-1 pt-1 text-sm font-medium" aria-current="page">Dashboard</a>
<a href="#" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center border-b-2 px-1 pt-1 text-sm font-medium">Team</a>
<a href="#" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center border-b-2 px-1 pt-1 text-sm font-medium">Projects</a>
<a href="#" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center border-b-2 px-1 pt-1 text-sm font-medium">Calendar</a>
</div>
</div>
<div class="hidden sm:ml-6 sm:flex sm:items-center">
<button type="button" class="relative rounded-full bg-white p-1 text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2">
<span class="absolute -inset-1.5"></span>
<span class="sr-only">View notifications</span>
<svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M14.857 17.082a23.848 23.848 0 005.454-1.31A8.967 8.967 0 0118 9.75v-.7V9A6 6 0 006 9v.75a8.967 8.967 0 01-2.312 6.022c1.733.64 3.56 1.085 5.455 1.31m5.714 0a24.255 24.255 0 01-5.714 0m5.714 0a3 3 0 11-5.714 0" />
</svg>
</button>

<!-- Profile dropdown -->
<div class="relative ml-3">
<div>
<button type="button" class="relative flex max-w-xs items-center rounded-full bg-white text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2" id="user-menu-button" aria-expanded="false" aria-haspopup="true">
<span class="absolute -inset-1.5"></span>
<span class="sr-only">Open user menu</span>
<img class="h-8 w-8 rounded-full" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="" />
</button>
</div>

<div id="user-menu-menu" class="hidden absolute right-0 z-10 mt-2 w-48 origin-top-right rounded-md bg-white py-1 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none" role="menu" aria-orientation="vertical" aria-labelledby="user-menu-button" tabindex="-1">
<!-- Active: "bg-gray-100", Not Active: "" -->
<a href="#" class="block px-4 py-2 text-sm text-gray-700" role="menuitem" tabindex="-1" id="user-menu-item-0">Your Profile</a>
<a href="#" class="block px-4 py-2 text-sm text-gray-700" role="menuitem" tabindex="-1" id="user-menu-item-1">Settings</a>
<a href="#" class="block px-4 py-2 text-sm text-gray-700" role="menuitem" tabindex="-1" id="user-menu-item-2">Sign out</a>
</div>
</div>
</div>
<div class="-mr-2 flex items-center sm:hidden">
<!-- Mobile menu button -->
<button type="button" class="relative inline-flex items-center justify-center rounded-md bg-white p-2 text-gray-400 hover:bg-gray-100 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2" aria-controls="mobile-menu" aria-expanded="false">
<span class="absolute -inset-0.5"></span>
<span class="sr-only">Open main menu</span>
<!-- Menu open: "hidden", Menu closed: "block" -->
<svg class="block h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
</svg>
<!-- Menu open: "block", Menu closed: "hidden" -->
<svg class="hidden h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
</div>
</div>
</div>

<!-- Mobile menu, show/hide based on menu state. -->
<div class="sm:hidden" id="mobile-menu">
<div class="space-y-1 pb-3 pt-2">
<!-- Current: "border-indigo-500 bg-indigo-50 text-indigo-700", Default: "border-transparent text-gray-600 hover:border-gray-300 hover:bg-gray-50 hover:text-gray-800" -->
<a href="#" class="border-indigo-500 bg-indigo-50 text-indigo-700 block border-l-4 py-2 pl-3 pr-4 text-base font-medium" aria-current="page">Dashboard</a>
<a href="#" class="border-transparent text-gray-600 hover:border-gray-300 hover:bg-gray-50 hover:text-gray-800 block border-l-4 py-2 pl-3 pr-4 text-base font-medium">Team</a>
<a href="#" class="border-transparent text-gray-600 hover:border-gray-300 hover:bg-gray-50 hover:text-gray-800 block border-l-4 py-2 pl-3 pr-4 text-base font-medium">Projects</a>
<a href="#" class="border-transparent text-gray-600 hover:border-gray-300 hover:bg-gray-50 hover:text-gray-800 block border-l-4 py-2 pl-3 pr-4 text-base font-medium">Calendar</a>
</div>
<div class="border-t border-gray-200 pb-3 pt-4">
<div class="flex items-center px-4">
<div class="flex-shrink-0">
<img class="h-10 w-10 rounded-full" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt=""/>
</div>
<div class="ml-3">
<div class="text-base font-medium text-gray-800">Tom Cook</div>
<div class="text-sm font-medium text-gray-500">[email protected]</div>
</div>
<button type="button" class="relative ml-auto flex-shrink-0 rounded-full bg-white p-1 text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2">
<span class="absolute -inset-1.5"></span>
<span class="sr-only">View notifications</span>
<svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M14.857 17.082a23.848 23.848 0 005.454-1.31A8.967 8.967 0 0118 9.75v-.7V9A6 6 0 006 9v.75a8.967 8.967 0 01-2.312 6.022c1.733.64 3.56 1.085 5.455 1.31m5.714 0a24.255 24.255 0 01-5.714 0m5.714 0a3 3 0 11-5.714 0" />
</svg>
</button>
</div>
<div class="mt-3 space-y-1">
<a href="#" class="block px-4 py-2 text-base font-medium text-gray-500 hover:bg-gray-100 hover:text-gray-800">Your Profile</a>
<a href="#" class="block px-4 py-2 text-base font-medium text-gray-500 hover:bg-gray-100 hover:text-gray-800">Settings</a>
<a href="#" class="block px-4 py-2 text-base font-medium text-gray-500 hover:bg-gray-100 hover:text-gray-800">Sign out</a>
</div>
</div>
</div>
</nav>

<div class="py-10">
<header>
<div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
<h1 class="text-3xl font-bold leading-tight tracking-tight text-gray-900">Dashboard</h1>
</div>
</header>
<main>
<div class="mx-auto max-w-7xl sm:px-6 lg:px-8">
<!-- Your content -->
</div>
</main>
</div>
</div>
</body>
</html>
}
Loading

0 comments on commit c0fdb1a

Please sign in to comment.