waggeling.net/bookmark-manager
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

initial upload

Browse source
This commit is contained in:
Kai Waggeling 2025-05-17 16:20:29 +02:00
parent 987c99d00b
commit bb6c0147db
44 changed files with 1884 additions and 131 deletions
Download patch file Download diff file Expand all files Collapse all files

153
ui/components/editor.njk Normal file
View file

@ -0,0 +1,153 @@
<!-- drawer component -->
<div id="drawer-form"
class="fixed top-0 left-0 z-40 h-screen p-4 overflow-y-auto transition-transform -translate-x-full bg-white w-80 dark:bg-gray-800"
tabindex="-1" aria-labelledby="drawer-form-label">
<h5 id="drawer-label"
class="inline-flex items-center mb-6 text-base font-semibold text-gray-500 uppercase dark:text-gray-400"><svg
class="w-3.5 h-3.5 me-2.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor"
viewBox="0 0 20 20">
<path
d="M0 18a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V8H0v10Zm14-7.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1Zm0 4a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1Zm-5-4a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1Zm0 4a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1Zm-5-4a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1Zm0 4a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1ZM20 4a2 2 0 0 0-2-2h-2V1a1 1 0 0 0-2 0v1h-3V1a1 1 0 0 0-2 0v1H6V1a1 1 0 0 0-2 0v1H2a2 2 0 0 0-2 2v2h20V4Z" />
</svg>New event</h5>
<button type="button" data-drawer-hide="drawer-form" aria-controls="drawer-form"
class="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm w-8 h-8 absolute top-2.5 end-2.5 inline-flex items-center justify-center dark:hover:bg-gray-600 dark:hover:text-white">
<svg class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6" />
</svg>
<span class="sr-only">Close menu</span>
</button>
<form class="mb-6">
<div class="mb-6">
<label for="title" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Title</label>
<input type="text" id="title"
class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
placeholder="Apple Keynote" required />
</div>
<div class="mb-6">
<label for="description"
class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Description</label>
<textarea id="description" rows="4"
class="block p-2.5 w-full text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
placeholder="Write event description..."></textarea>
</div>
<div class="relative mb-6">
<div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
<svg class="w-4 h-4 text-gray-500 dark:text-gray-400" aria-hidden="true"
xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
<path
d="M20 4a2 2 0 0 0-2-2h-2V1a1 1 0 0 0-2 0v1h-3V1a1 1 0 0 0-2 0v1H6V1a1 1 0 0 0-2 0v1H2a2 2 0 0 0-2 2v2h20V4ZM0 18a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V8H0v10Zm5-8h10a1 1 0 0 1 0 2H5a1 1 0 0 1 0-2Z" />
</svg>
</div>
<input datepicker="" datepicker-autohide datepicker-buttons="" type="text"
class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full pl-10 p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500 datepicker-input"
placeholder="Select date">
</div>
<div class="mb-4">
<label for="guests" class="mb-2 text-sm font-medium text-gray-900 sr-only dark:text-white">Invite
guests</label>
<div class="relative">
<input type="search" id="guests"
class="block p-2.5 w-full text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
placeholder="Add guest email" required />
<button type="button"
class="absolute inline-flex items-center px-3 py-1 text-sm font-medium text-white bg-blue-700 rounded-lg end-2 bottom-2 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"><svg
class="w-3 h-3 me-1.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor"
viewBox="0 0 20 18">
<path
d="M6.5 9a4.5 4.5 0 1 0 0-9 4.5 4.5 0 0 0 0 9ZM8 10H5a5.006 5.006 0 0 0-5 5v2a1 1 0 0 0 1 1h11a1 1 0 0 0 1-1v-2a5.006 5.006 0 0 0-5-5Zm11-3h-2V5a1 1 0 0 0-2 0v2h-2a1 1 0 1 0 0 2h2v2a1 1 0 0 0 2 0V9h2a1 1 0 1 0 0-2Z" />
</svg>Add</button>
</div>
</div>
<div class="flex mb-4 -space-x-4 rtl:space-x-reverse">
<img class="w-8 h-8 border-2 border-white rounded-full dark:border-gray-800"
src="/docs/images/people/profile-picture-5.jpg" alt="">
<img class="w-8 h-8 border-2 border-white rounded-full dark:border-gray-800"
src="/docs/images/people/profile-picture-2.jpg" alt="">
<img class="w-8 h-8 border-2 border-white rounded-full dark:border-gray-800"
src="/docs/images/people/profile-picture-3.jpg" alt="">
<img class="w-8 h-8 border-2 border-white rounded-full dark:border-gray-800"
src="/docs/images/people/profile-picture-4.jpg" alt="">
</div>
<button type="submit"
class="text-white justify-center flex items-center bg-blue-700 hover:bg-blue-800 w-full focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 mb-2 dark:bg-blue-600 dark:hover:bg-blue-700 focus:outline-none dark:focus:ring-blue-800"><svg
class="w-3.5 h-3.5 me-2.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor"
viewBox="0 0 20 20">
<path
d="M18 2h-2V1a1 1 0 0 0-2 0v1h-3V1a1 1 0 0 0-2 0v1H6V1a1 1 0 0 0-2 0v1H2a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2ZM2 18V7h6.7l.4-.409A4.309 4.309 0 0 1 15.753 7H18v11H2Z" />
<path
d="M8.139 10.411 5.289 13.3A1 1 0 0 0 5 14v2a1 1 0 0 0 1 1h2a1 1 0 0 0 .7-.288l2.886-2.851-3.447-3.45ZM14 8a2.463 2.463 0 0 0-3.484 0l-.971.983 3.468 3.468.987-.971A2.463 2.463 0 0 0 14 8Z" />
</svg> Create event</button>
</form>
</div>
<!-- speed dial -->
<div data-dial-init class="fixed end-6 bottom-6 group">
<div id="editor-actions" class="flex flex-col items-center hidden mb-4 space-y-2">
<button type="button" data-tooltip-target="tooltip-share" data-tooltip-placement="left"
class="flex justify-center items-center w-[52px] h-[52px] text-gray-500 hover:text-gray-900 bg-white rounded-lg border border-gray-200 dark:border-gray-600 shadow-sm dark:hover:text-white dark:text-gray-400 hover:bg-gray-50 dark:bg-gray-700 dark:hover:bg-gray-600 focus:ring-4 focus:ring-gray-300 focus:outline-none dark:focus:ring-gray-400">
<svg class="w-5 h-5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor"
viewBox="0 0 18 18">
<path
d="M14.419 10.581a3.564 3.564 0 0 0-2.574 1.1l-4.756-2.49a3.54 3.54 0 0 0 .072-.71 3.55 3.55 0 0 0-.043-.428L11.67 6.1a3.56 3.56 0 1 0-.831-2.265c.006.143.02.286.043.428L6.33 6.218a3.573 3.573 0 1 0-.175 4.743l4.756 2.491a3.58 3.58 0 1 0 3.508-2.871Z" />
</svg>
<span class="sr-only">Share</span>
</button>
<div id="tooltip-share" role="tooltip"
class="absolute z-10 invisible inline-block w-auto px-3 py-2 text-sm font-medium text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip dark:bg-gray-700">
Share
<div class="tooltip-arrow" data-popper-arrow></div>
</div>
<button type="button" data-tooltip-target="tooltip-print" data-tooltip-placement="left"
class="flex justify-center items-center w-[52px] h-[52px] text-gray-500 hover:text-gray-900 bg-white rounded-lg border border-gray-200 dark:border-gray-600 shadow-sm dark:hover:text-white dark:text-gray-400 hover:bg-gray-50 dark:bg-gray-700 dark:hover:bg-gray-600 focus:ring-4 focus:ring-gray-300 focus:outline-none dark:focus:ring-gray-400">
<svg class="w-5 h-5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor"
viewBox="0 0 20 20">
<path d="M5 20h10a1 1 0 0 0 1-1v-5H4v5a1 1 0 0 0 1 1Z" />
<path
d="M18 7H2a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2v-3a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v3a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2Zm-1-2V2a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v3h14Z" />
</svg>
<span class="sr-only">Print</span>
</button>
<div id="tooltip-print" role="tooltip"
class="absolute z-10 invisible inline-block w-auto px-3 py-2 text-sm font-medium text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip dark:bg-gray-700">
Print
<div class="tooltip-arrow" data-popper-arrow></div>
</div>
<button type="button" data-tooltip-target="tooltip-download" data-tooltip-placement="left"
class="flex justify-center items-center w-[52px] h-[52px] text-gray-500 hover:text-gray-900 bg-white rounded-lg border border-gray-200 dark:border-gray-600 shadow-sm dark:hover:text-white dark:text-gray-400 hover:bg-gray-50 dark:bg-gray-700 dark:hover:bg-gray-600 focus:ring-4 focus:ring-gray-300 focus:outline-none dark:focus:ring-gray-400">
<svg class="w-5 h-5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor"
viewBox="0 0 20 20">
<path
d="M14.707 7.793a1 1 0 0 0-1.414 0L11 10.086V1.5a1 1 0 0 0-2 0v8.586L6.707 7.793a1 1 0 1 0-1.414 1.414l4 4a1 1 0 0 0 1.416 0l4-4a1 1 0 0 0-.002-1.414Z" />
<path
d="M18 12h-2.55l-2.975 2.975a3.5 3.5 0 0 1-4.95 0L4.55 12H2a2 2 0 0 0-2 2v4a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-4a2 2 0 0 0-2-2Zm-3 5a1 1 0 1 1 0-2 1 1 0 0 1 0 2Z" />
</svg>
<span class="sr-only">Download</span>
</button>
<div id="tooltip-download" role="tooltip"
class="absolute z-10 invisible inline-block w-auto px-3 py-2 text-sm font-medium text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip dark:bg-gray-700">
Download
<div class="tooltip-arrow" data-popper-arrow></div>
</div>
<button type="button" data-tooltip-target="tooltip-copy" data-tooltip-placement="left"
class="flex justify-center items-center w-[52px] h-[52px] text-gray-500 hover:text-gray-900 bg-white rounded-lg border border-gray-200 dark:border-gray-600 dark:hover:text-white shadow-sm dark:text-gray-400 hover:bg-gray-50 dark:bg-gray-700 dark:hover:bg-gray-600 focus:ring-4 focus:ring-gray-300 focus:outline-none dark:focus:ring-gray-400">
<svg class="w-5 h-5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor"
viewBox="0 0 18 20">
<path
d="M5 9V4.13a2.96 2.96 0 0 0-1.293.749L.879 7.707A2.96 2.96 0 0 0 .13 9H5Zm11.066-9H9.829a2.98 2.98 0 0 0-2.122.879L7 1.584A.987.987 0 0 0 6.766 2h4.3A3.972 3.972 0 0 1 15 6v10h1.066A1.97 1.97 0 0 0 18 14V2a1.97 1.97 0 0 0-1.934-2Z" />
<path
d="M11.066 4H7v5a2 2 0 0 1-2 2H0v7a1.969 1.969 0 0 0 1.933 2h9.133A1.97 1.97 0 0 0 13 18V6a1.97 1.97 0 0 0-1.934-2Z" />
</svg>
<span class="sr-only">Copy</span>
</button>
<div id="tooltip-copy" role="tooltip"
class="absolute z-10 invisible inline-block w-auto px-3 py-2 text-sm font-medium text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip dark:bg-gray-700">
Copy
<div class="tooltip-arrow" data-popper-arrow></div>
</div>
</div>
<button type="button" data-dial-toggle="editor-actions" aria-controls="editor-actions" aria-expanded="false"
class="flex items-center justify-center text-white bg-blue-700 rounded-lg w-14 h-14 hover:bg-blue-800 dark:bg-blue-600 dark:hover:bg-blue-700 focus:ring-4 focus:ring-blue-300 focus:outline-none dark:focus:ring-blue-800">
<i class="ti ti-plus text-3xl transition-transform group-hover:rotate-45"></i>
<span class="sr-only">Open actions menu</span>
</button>
</div>

24
ui/components/meta.njk Normal file
View file

@ -0,0 +1,24 @@
<link rel="icon" type="image/x-icon" href="/img/AppLogo.svg">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://cdn.jsdelivr.net/npm/flowbite@2.5.1/dist/flowbite.min.css" rel="stylesheet" />
<!-- <link rel="stylesheet" href="/css/bootstrap.min.css"> -->
<link rel="stylesheet" href="/css/tabler-icons.min.css">
<!-- <script src="/js/jquery-3.6.4.min.js"></script>
<script src="/js/bootstrap.bundle.min.js"></script>-->
<!-- <script src="/js/vue.global.prod.js"></script> -->
<script src="https://unpkg.com/vue@latest"></script>
<script src="https://cdn.jsdelivr.net/npm/vue3-sfc-loader"></script>
<style>
body,
html {
/* width: 100svw; */
min-height: 100svh;
user-select: none;
background: var(--bs-body-bg);
}
</style>

50
ui/components/modals.njk Normal file
View file

@ -0,0 +1,50 @@
{% macro insertCreateDirectoryModal() %}
<!-- Modal -->
<div class="modal fade" id="createDirectoryModal" tabindex="-1" data-bs-backdrop="static">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h1 class="modal-title fs-5" id="exampleModalLabel">Create New Directory</h1>
</div>
<div class="modal-body">
<form id="createDirectoryForm">
<div class="flex-fill">
<label class="form-label">Directory Name:</label>
<input type="text" class="form-control" name="name" placeholder="New Directory">
</div>
</form>
</div>
<div class="modal-footer">
<button id="buttonCancelCreateDirectory" class="btn btn-sm btn-outline-warning px-2" title="save directory" data-bs-toggle="modal" data-bs-target="#createDirectoryModal">
<i class="ti ti-x me-2"></i>Cancel
</button>
<button id="buttonSaveCreateDirectory" class="btn btn-sm btn-outline-primary px-2" title="save directory">
<i class="ti ti-device-floppy me-2"></i>Save
</button>
</div>
</div>
</div>
</div>
<script>
$('#buttonSaveCreateDirectory').on('click', async () => {
console.log("click");
var Response = await fetch(window.location.pathname,
{
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify(
Object.fromEntries(
new FormData(document.querySelector('#createDirectoryForm'))
)
),
}).then(() => {
$('#createDirectoryModal').modal('hide');
});
console.log(Response);
})
</script>
{% endmacro %}

110
ui/components/navbar.njk Normal file
View file

@ -0,0 +1,110 @@
<header class="bg-white dark:bg-gray-900 shadow-md sticky top-0 z-50 w-full divide-y divide-gray-300 dark:divide-gray-700 flex flex-col">
<nav class="container flex justify-between items-center py-4 mx-auto relative">
<!-- Application Logo -->
<a href="https://flowbite.com/" class="flex items-center space-x-3 rtl:space-x-reverse z-10">
<img src="https://flowbite.com/docs/images/logo.svg" class="h-6" alt="Flowbite Logo" />
<span class="self-center text-xl font-semibold whitespace-nowrap">Bookmark Manager</span>
</a>
<!-- Quick Search -->
<div class="flex absolute w-full z-0">
<form class="flex items-stretch w-1/4 max-w-sm mx-auto gap-2">
<input type="text" id="simple-search"
class="bg-gray-50 border border-gray-300 text-sm rounded-md focus:border-blue-500 block w-full px-4 py-2 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400"
placeholder="search bookmarks..." required />
<button type="submit" class="py-1 px-4 text-white bg-blue-700 rounded-md border border-blue-700 hover:bg-blue-800 outline-none dark:bg-blue-600 dark:hover:bg-blue-700">
<i class="ti ti-search"></i>
</button>
</form>
</div>
<!-- User Menu -->
<div class="flex flex-row gap-2 z-10">
<a href="#" class="flex items-center px-4 rounded-md hover:bg-gray-100 dark:hover:bg-gray-800" @click="toggleEditor()">
<i :class="['ti','ti-edit',modeEdit ? 'text-blue-700 dark:text-blue-600' : '']"></i>
</a>
<div class="flex items-center relative md:order-2">
<button type="button" data-dropdown-toggle="user-dropdown"
class="font-medium text-sm px-4 py-2 cursor-pointer rounded-md hover:bg-gray-100 dark:hover:bg-gray-800 dark:hover:text-white">
Kai Waggeling
</button>
<div id="user-dropdown" class="w-48 hidden my-4 text-base bg-white divide-y divide-gray-100 rounded-lg shadow dark:bg-gray-700 dark:divide-gray-600 overflow-hidden absolute right-0">
<a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white">
Settings
</a>
<a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white">
Sign out
</a>
</div>
</div>
</div>
</nav>
<nav class="container flex justify-between items-center py-4 mx-auto relative">
<div class="flex flex-row align-stretch gap-8">
<a href="#" class="block py-1 text-blue-700 dark:text-blue-500">
Start
</a>
<a href="#" class="block py-1 text-gray-900 dark:text-white hover:text-blue-700 dark:hover:text-blue-500">
Bookmarks
</a>
</div>
</nav>
</header>
<!-- <nav class="bg-white border-gray-200 dark:bg-gray-900">
<div class="container flex flex-wrap items-center justify-between mx-auto p-4">
<a href="https://flowbite.com/" class="flex items-center space-x-3 rtl:space-x-reverse">
<img src="https://flowbite.com/docs/images/logo.svg" class="h-8" alt="Flowbite Logo" />
<span class="self-center text-2xl font-semibold whitespace-nowrap dark:text-white">Bookmark Manager</span>
</a>
<div class="flex items-center md:order-2 space-x-1 md:space-x-0 rtl:space-x-reverse">
<button type="button" data-dropdown-toggle="user-dropdown"
class="inline-flex items-center font-medium justify-center px-4 py-2 text-sm text-gray-900 dark:text-white rounded-lg cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-700 dark:hover:text-white">
Kai Waggeling
</button>
<div class="z-50 hidden my-4 text-base list-none bg-white divide-y divide-gray-100 rounded-lg shadow dark:bg-gray-700 dark:divide-gray-600"
id="user-dropdown">
<ul class="py-2" aria-labelledby="user-menu-button">
<li>
<a href="#"
class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white">
Settings
</a>
</li>
<li>
<a href="#"
class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white">
Sign out
</a>
</li>
</ul>
</div>
<button data-collapse-toggle="navbar-language" type="button"
class="inline-flex items-center p-2 w-10 h-10 justify-center text-sm text-gray-500 rounded-lg md:hidden hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600"
aria-controls="navbar-language" aria-expanded="false">
<span class="sr-only">Open main menu</span>
<svg class="w-5 h-5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none"
viewBox="0 0 17 14">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M1 1h15M1 7h15M1 13h15" />
</svg>
</button>
</div>
<div class="justify-between hidden w-full md:flex md:w-auto md:order-1" id="navbar-language">
<ul
class="flex flex-col font-medium p-4 md:p-0 mt-4 border border-gray-100 rounded-lg bg-gray-50 md:space-x-8 rtl:space-x-reverse md:flex-row md:mt-0 md:border-0 md:bg-white dark:bg-gray-800 md:dark:bg-gray-900 dark:border-gray-700">
<li>
<a href="#"
class="block py-2 px-3 text-white bg-blue-700 rounded md:bg-transparent md:text-blue-700 md:p-0 md:dark:text-blue-500"
aria-current="page">
Start
</a>
</li>
<li>
<a href="#"
class="block py-2 px-3 md:p-0 text-gray-900 rounded hover:bg-gray-100 md:hover:bg-transparent md:hover:text-blue-700 dark:text-white md:dark:hover:text-blue-500 dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-gray-700">
Bookmarks
</a>
</li>
</ul>
</div>
</div>
</nav> -->

37
ui/components/widgets copy.njk Normal file
View file

@ -0,0 +1,37 @@
{% macro jumbotron(id='', title='', text='') %}
<section class="w-full">
<div class="py-4 px-4 mx-auto max-w-screen-xl text-center">
<h1 class="my-4 font-extrabold tracking-tight leading-none text-gray-900 text-4xl md:text-5xl lg:text-6xl">
{{ title }}
</h1>
<p class="my-4 text-lg font-normal text-gray-500 lg:text-xl sm:px-16 lg:px-48">
{{ text }}
</p>
{{ caller() }}
</div>
</section>
{% endmacro %}
{% macro container(id='', width='w-full', flow='row', vAlign='center', hAlign='center') %}
<div class="container mx-auto {{width}} pt-24 pb-32 flex flex-{{flow}} justify-{{hAlign}} items-{{vAlign}}">
{{ caller() }}
</div>
{% endmacro %}
{% macro grid(id='', title='', columns=3) %}
<div class="my-4 grid grid-cols-1 md:grid-cols-{{2 if columns > 2 else columns}} lg:grid-cols-{{columns}} gap-6">
{{ caller() }}
</div>
{% endmacro %}
{% macro link(id='', link='#', title='New Link', description='Description') %}
<a href="{{ link }}" target="_blank" class="p-8 bg-gray-50 rounded-md border border-gray-200 hover:border-purple-400">
<h4 class="font-medium text-gray-700 text-lg mb-4">
{{ title }}
</h4>
<p class="font-normal text-gray-500 text-md">
{{ description }}
</p>
</a>
{% endmacro %}

14
ui/components/widgets.njk Normal file
View file

@ -0,0 +1,14 @@
{% raw %}
<template id="template-jumbotron">
<section class="w-full">
<div class="py-4 px-4 mx-auto max-w-screen-xl text-center">
<h1 class="my-4 font-extrabold tracking-tight leading-none text-gray-900 text-4xl md:text-5xl lg:text-6xl">
{{ title }}
</h1>
<p class="my-4 text-lg font-normal text-gray-500 lg:text-xl sm:px-16 lg:px-48">
{{ text }}
</p>
</div>
</section>
</template>
{% endraw %}