///
This commit is contained in:
parent
28807cd014
commit
2383ec7640
2619
AI/fasthtml.md
Normal file
2619
AI/fasthtml.md
Normal file
File diff suppressed because it is too large
Load Diff
15
examples/heroweb_example_base/README.md
Normal file
15
examples/heroweb_example_base/README.md
Normal file
@ -0,0 +1,15 @@
|
|||||||
|
|
||||||
|
# minimalistic example for website
|
||||||
|
|
||||||
|
```bash
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
just open index.html
|
||||||
|
|
||||||
|
|
||||||
|
it shows
|
||||||
|
|
||||||
|
- how less is more
|
||||||
|
- the css is very easy to maintain, this allows for consistent look and feel
|
||||||
|
- picocss is used, which is incredible so small and so powerful compared to e.g. tailwindcss
|
192
examples/heroweb_example_base/css/heroweb.css
Normal file
192
examples/heroweb_example_base/css/heroweb.css
Normal file
@ -0,0 +1,192 @@
|
|||||||
|
/* Custom styles to enhance the nav bar */
|
||||||
|
body > main {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 1rem;
|
||||||
|
height: 100vh;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
nav {
|
||||||
|
background-color: #f1f3f5;
|
||||||
|
padding: 0rem 1rem;
|
||||||
|
}
|
||||||
|
nav ul {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
list-style: none;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
nav ul li {
|
||||||
|
margin: 0 0.5rem;
|
||||||
|
}
|
||||||
|
nav ul li a {
|
||||||
|
text-decoration: none;
|
||||||
|
color: #495057;
|
||||||
|
font-weight: 500;
|
||||||
|
transition: color 0.3s ease;
|
||||||
|
}
|
||||||
|
nav ul li a:hover {
|
||||||
|
color: #1971c2;
|
||||||
|
}
|
||||||
|
.brand {
|
||||||
|
font-size: 1rem;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
navbar-right {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
margin-left: 30%;
|
||||||
|
}
|
||||||
|
navbar-right a {
|
||||||
|
margin-left: 1rem;
|
||||||
|
}
|
||||||
|
navbar-right input[type="search"] {
|
||||||
|
padding: 0.2rem 0.5rem;
|
||||||
|
border: 1px solid #ced4da;
|
||||||
|
border-radius: 1rem;
|
||||||
|
background-color: #f8f9fa;
|
||||||
|
font-size: 0.8rem;
|
||||||
|
line-height: 1;
|
||||||
|
height: 2rem;
|
||||||
|
width: 300px;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
/* New styles for theme icons */
|
||||||
|
.theme-icons {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
.theme-icon {
|
||||||
|
cursor: pointer;
|
||||||
|
padding: 5px;
|
||||||
|
border-radius: 50%;
|
||||||
|
margin-left: 0.5rem;
|
||||||
|
}
|
||||||
|
.theme-icon svg {
|
||||||
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
fill: currentColor;
|
||||||
|
}
|
||||||
|
.theme-icon:hover {
|
||||||
|
background-color: #e9ecef;
|
||||||
|
}
|
||||||
|
|
||||||
|
mynav,
|
||||||
|
docnav {
|
||||||
|
flex: 1;
|
||||||
|
min-width: 200px;
|
||||||
|
max-width: 250px;
|
||||||
|
overflow-y: auto; /* Enable scrolling for nav and docnav */
|
||||||
|
}
|
||||||
|
mynav ul {
|
||||||
|
list-style-type: none;
|
||||||
|
padding-left: 0;
|
||||||
|
}
|
||||||
|
mynav ul ul {
|
||||||
|
list-style-type: none; /* Remove bullets */
|
||||||
|
padding-left: 0;
|
||||||
|
margin-left: 0.2rem;
|
||||||
|
display: none; /* Hide nested lists by default */
|
||||||
|
}
|
||||||
|
mynav ul li {
|
||||||
|
margin-left: 0.5rem;
|
||||||
|
padding-left: 0.3rem;
|
||||||
|
cursor: pointer; /* Indicate that items are clickable */
|
||||||
|
list-style-type: none; /* Remove bullets */
|
||||||
|
}
|
||||||
|
mynav ul li a {
|
||||||
|
text-decoration: none;
|
||||||
|
color: inherit;
|
||||||
|
}
|
||||||
|
mynav ul li.open > ul {
|
||||||
|
display: block; /* Show nested lists when parent is open */
|
||||||
|
}
|
||||||
|
.arrow {
|
||||||
|
font-size: 0.8rem; /* Reduce the font size of the arrows */
|
||||||
|
margin-right: 0.2rem; /* Adjust the space between the arrow and the text */
|
||||||
|
}
|
||||||
|
|
||||||
|
article {
|
||||||
|
flex: 4;
|
||||||
|
min-width: 200px;
|
||||||
|
max-width: 1200px;
|
||||||
|
overflow-y: auto; /* Enable scrolling for article */
|
||||||
|
height: 100%;
|
||||||
|
scrollbar-width: none;
|
||||||
|
-ms-overflow-style: none;
|
||||||
|
}
|
||||||
|
article textarea {
|
||||||
|
line-height: 1.2;
|
||||||
|
}
|
||||||
|
article md {
|
||||||
|
line-height: 1.2;
|
||||||
|
}
|
||||||
|
docnav {
|
||||||
|
flex: 1;
|
||||||
|
min-width: 200px;
|
||||||
|
font-size: 0.9rem;
|
||||||
|
}
|
||||||
|
docnav ul {
|
||||||
|
list-style-type: none;
|
||||||
|
padding-left: 0;
|
||||||
|
}
|
||||||
|
docnav ul li {
|
||||||
|
margin-left: 0.4rem;
|
||||||
|
padding-left: 0rem;
|
||||||
|
cursor: pointer; /* Indicate that items are clickable */
|
||||||
|
white-space: nowrap; /* Prevent text from wrapping */
|
||||||
|
overflow: hidden; /* Hide overflow text */
|
||||||
|
text-overflow: ellipsis; /* Add ellipses for overflow text */
|
||||||
|
max-width: 40ch; /* Limit length of item to 40 characters */
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
nav {
|
||||||
|
margin-top: 0rem;
|
||||||
|
}
|
||||||
|
nav ul {
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: flex-start;
|
||||||
|
}
|
||||||
|
nav ul li {
|
||||||
|
margin: 0 rem 0;
|
||||||
|
}
|
||||||
|
navbar-right {
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: flex-start;
|
||||||
|
margin-left: 0;
|
||||||
|
}
|
||||||
|
navbar-right a {
|
||||||
|
margin-left: 0;
|
||||||
|
}
|
||||||
|
navbar-right input[type="search"] {
|
||||||
|
width: 100%;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
.theme-icons {
|
||||||
|
margin-top: 0.5rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* [data-theme="dark"] {
|
||||||
|
--background-color: #333;
|
||||||
|
--text-color: #fff;
|
||||||
|
}
|
||||||
|
[data-theme="dark"] body {
|
||||||
|
background-color: var(--background-color);
|
||||||
|
color: var(--text-color);
|
||||||
|
}
|
||||||
|
[data-theme="dark"] nav {
|
||||||
|
background-color: #444;
|
||||||
|
}
|
||||||
|
[data-theme="dark"] nav ul li a {
|
||||||
|
color: #ddd;
|
||||||
|
}
|
||||||
|
[data-theme="dark"] nav ul li a:hover {
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
[data-theme="dark"] .theme-icon:hover {
|
||||||
|
background-color: #555;
|
||||||
|
} */
|
Binary file not shown.
After Width: | Height: | Size: 484 KiB |
93
examples/heroweb_example_base/index.html
Normal file
93
examples/heroweb_example_base/index.html
Normal file
@ -0,0 +1,93 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<title>PicoCSS Three-Column Layout</title>
|
||||||
|
<link
|
||||||
|
rel="stylesheet"
|
||||||
|
href="https://cdn.jsdelivr.net/npm/@picocss/pico@2.0.6/css/pico.classless.min.css"
|
||||||
|
/>
|
||||||
|
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
|
||||||
|
<link rel="stylesheet" href="css/heroweb.css" />
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<textarea id="markdown-nav" style="display: none">
|
||||||
|
|
||||||
|
- [intro](#intro)
|
||||||
|
- [products](#products)
|
||||||
|
- [car](#car)
|
||||||
|
- [plane](#plane)
|
||||||
|
- [features](#features)
|
||||||
|
- [know more](#know-more)
|
||||||
|
- [documentation](#documentation)
|
||||||
|
|
||||||
|
</textarea>
|
||||||
|
|
||||||
|
<textarea id="markdown-input" style="display: none">
|
||||||
|
# Welcome to the Example
|
||||||
|
|
||||||
|
This is a **Markdown** example.
|
||||||
|
|
||||||
|
# Section 1
|
||||||
|
Content for section 1.
|
||||||
|
|
||||||
|
## Section 2
|
||||||
|
Content for section 2.
|
||||||
|
|
||||||
|
### Section 3
|
||||||
|
|
||||||
|
Content for section 3.
|
||||||
|
|
||||||
|
- something
|
||||||
|
- yes
|
||||||
|
- incredible
|
||||||
|
|
||||||
|
> This is a blockquote.
|
||||||
|
|
||||||
|
| Name | Email | Description |
|
||||||
|
|------------|-------------------|-------------------|
|
||||||
|
| John Doe | john@example.com | Developer |
|
||||||
|
| Jane Smith | jane@example.com | Designer |
|
||||||
|
| Bob Brown | bob@example.com | Manager |
|
||||||
|
| Alice Blue | alice@example.com | Engineer |
|
||||||
|
| Eve White | eve@example.com | Analyst |
|
||||||
|
| Tom Black | tom@example.com | Consultant |
|
||||||
|
|
||||||
|
### Section 4
|
||||||
|
|
||||||
|
Content for section 4.
|
||||||
|
|
||||||
|
- something
|
||||||
|
- yes
|
||||||
|
- incredible
|
||||||
|
|
||||||
|
> This is a blockquote.
|
||||||
|
|
||||||
|
</textarea>
|
||||||
|
<nav>
|
||||||
|
<ul>
|
||||||
|
<li><a href="#" class="brand">MyWebsite</a></li>
|
||||||
|
<li><a href="#home">Home</a></li>
|
||||||
|
<li><a href="#about">About</a></li>
|
||||||
|
<li><a href="#services">Services</a></li>
|
||||||
|
<li><a href="#contact">Contact</a></li>
|
||||||
|
<navbar-right>
|
||||||
|
<input type="search" name="search" placeholder="Search..." />
|
||||||
|
<a href="#login">Login</a>
|
||||||
|
<div id="theme-switcher-icons"></div>
|
||||||
|
</navbar-right>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
<main class="container">
|
||||||
|
<mynav id="mynav"> </mynav>
|
||||||
|
<article id="markdown-output"></article>
|
||||||
|
<docnav>
|
||||||
|
<br />
|
||||||
|
<h5>Doc</h5>
|
||||||
|
<ul id="content-pointers"></ul>
|
||||||
|
</docnav>
|
||||||
|
</main>
|
||||||
|
<script src="js/heroweb.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
159
examples/heroweb_example_base/js/heroweb.js
Normal file
159
examples/heroweb_example_base/js/heroweb.js
Normal file
@ -0,0 +1,159 @@
|
|||||||
|
function convertMarkdown(inputId, outputId, pointersListId = "") {
|
||||||
|
const markdownInputElement = document.getElementById(inputId);
|
||||||
|
if (!markdownInputElement) return;
|
||||||
|
const markdownInput = markdownInputElement.value;
|
||||||
|
const htmlOutput = marked.parse(markdownInput);
|
||||||
|
|
||||||
|
const htmlOutputElement = document.getElementById(outputId);
|
||||||
|
if (!htmlOutputElement) return;
|
||||||
|
htmlOutputElement.innerHTML = htmlOutput;
|
||||||
|
|
||||||
|
// Add IDs to headers if they don't have one
|
||||||
|
const headers = htmlOutputElement.querySelectorAll("h1, h2");
|
||||||
|
headers.forEach((header, index) => {
|
||||||
|
if (!header.id) {
|
||||||
|
header.id = `header-${index}`;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// Generate content pointers if pointersListId is provided
|
||||||
|
if (pointersListId) {
|
||||||
|
const pointersList = document.getElementById(pointersListId);
|
||||||
|
if (!pointersList) return;
|
||||||
|
pointersList.innerHTML = "";
|
||||||
|
headers.forEach((header) => {
|
||||||
|
const li = document.createElement("li");
|
||||||
|
const a = document.createElement("a");
|
||||||
|
a.href = `#${header.id}`;
|
||||||
|
a.textContent = header.textContent;
|
||||||
|
li.appendChild(a);
|
||||||
|
pointersList.appendChild(li);
|
||||||
|
});
|
||||||
|
|
||||||
|
// Add event listener to scroll to the section
|
||||||
|
pointersList.querySelectorAll("a").forEach((anchor) => {
|
||||||
|
anchor.addEventListener("click", (event) => {
|
||||||
|
event.preventDefault();
|
||||||
|
const targetId = anchor.getAttribute("href").substring(1);
|
||||||
|
const targetElement = document.getElementById(targetId);
|
||||||
|
if (targetElement) {
|
||||||
|
targetElement.scrollIntoView({ behavior: "smooth" });
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function initializeMarkdownConverter(inputId, outputId, pointersListId) {
|
||||||
|
// Convert markdown immediately on page load
|
||||||
|
convertMarkdown(inputId, outputId, pointersListId);
|
||||||
|
|
||||||
|
// Add event listener to input for real-time conversion
|
||||||
|
const inputElement = document.getElementById(inputId);
|
||||||
|
if (inputElement) {
|
||||||
|
inputElement.addEventListener("input", () => {
|
||||||
|
convertMarkdown(inputId, outputId, pointersListId);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function addNavEventListeners() {
|
||||||
|
const navItems = document.querySelectorAll("mynav ul li");
|
||||||
|
|
||||||
|
navItems.forEach((item) => {
|
||||||
|
const nestedList = item.querySelector("ul");
|
||||||
|
if (nestedList) {
|
||||||
|
// Add a visual cue for items with children
|
||||||
|
const arrow = document.createElement("span");
|
||||||
|
arrow.textContent = "▶"; // You can use any symbol or icon here
|
||||||
|
arrow.classList.add("arrow");
|
||||||
|
item.insertBefore(arrow, item.firstChild);
|
||||||
|
|
||||||
|
// Add click event listener to toggle the nested list
|
||||||
|
item.addEventListener("click", (event) => {
|
||||||
|
event.stopPropagation(); // Prevent event from bubbling up
|
||||||
|
item.classList.toggle("open");
|
||||||
|
arrow.textContent = item.classList.contains("open") ? "▼" : "▶"; // Change the arrow direction
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// function settypes() {
|
||||||
|
// const navInputs = document.querySelectorAll("search-inpu");
|
||||||
|
// navInputs.forEach((input) => {
|
||||||
|
// input.setAttribute("type", "text");
|
||||||
|
// });
|
||||||
|
// }
|
||||||
|
|
||||||
|
// Call the initialization function when the DOM is loaded
|
||||||
|
document.addEventListener("DOMContentLoaded", () => {
|
||||||
|
createThemeIcons();
|
||||||
|
initializeMarkdownConverter("markdown-input", "markdown-output", "content-pointers");
|
||||||
|
initializeMarkdownConverter("markdown-nav", "mynav");
|
||||||
|
addNavEventListeners();
|
||||||
|
//settypes();
|
||||||
|
});
|
||||||
|
|
||||||
|
function setTheme(theme) {
|
||||||
|
document.documentElement.setAttribute("data-theme", theme);
|
||||||
|
localStorage.setItem("theme", theme);
|
||||||
|
console.log(`Theme set to: ${theme}`);
|
||||||
|
}
|
||||||
|
|
||||||
|
function getSystemTheme() {
|
||||||
|
return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
|
||||||
|
}
|
||||||
|
|
||||||
|
document.querySelectorAll(".theme-icon").forEach((icon) => {
|
||||||
|
icon.addEventListener("click", () => {
|
||||||
|
const theme = icon.getAttribute("data-theme-switcher");
|
||||||
|
setTheme(theme);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
// Check for saved theme preference or use system theme
|
||||||
|
const savedTheme = localStorage.getItem("theme");
|
||||||
|
if (savedTheme) {
|
||||||
|
setTheme(savedTheme);
|
||||||
|
} else {
|
||||||
|
setTheme(getSystemTheme());
|
||||||
|
}
|
||||||
|
|
||||||
|
// Listen for system theme changes
|
||||||
|
window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", (e) => {
|
||||||
|
setTheme(e.matches ? "dark" : "light");
|
||||||
|
});
|
||||||
|
|
||||||
|
function createThemeIcons() {
|
||||||
|
const themeIconsHTML = `
|
||||||
|
<div class="theme-icons">
|
||||||
|
<span class="theme-icon" data-theme-switcher="light" title="Light theme">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
|
||||||
|
<path
|
||||||
|
d="M12 7c-2.76 0-5 2.24-5 5s2.24 5 5 5 5-2.24 5-5-2.24-5-5-5zM2 13h2c.55 0 1-.45 1-1s-.45-1-1-1H2c-.55 0-1 .45-1 1s.45 1 1 1zm18 0h2c.55 0 1-.45 1-1s-.45-1-1-1h-2c-.55 0-1 .45-1 1s.45 1 1 1zM11 2v2c0 .55.45 1 1 1s1-.45 1-1V2c0-.55-.45-1-1-1s-1 .45-1 1zm0 18v2c0 .55.45 1 1 1s1-.45 1-1v-2c0-.55-.45-1-1-1s-1 .45-1 1zM5.99 4.58c-.39-.39-1.03-.39-1.41 0-.39.39-.39 1.03 0 1.41l1.06 1.06c.39.39 1.03.39 1.41 0s.39-1.03 0-1.41L5.99 4.58zm12.37 12.37c-.39-.39-1.03-.39-1.41 0-.39.39-.39 1.03 0 1.41l1.06 1.06c.39.39 1.03.39 1.41 0 .39-.39.39-1.03 0-1.41l-1.06-1.06zm1.06-10.96c.39-.39.39-1.03 0-1.41-.39-.39-1.03-.39-1.41 0l-1.06 1.06c-.39.39-.39 1.03 0 1.41s1.03.39 1.41 0l1.06-1.06zM7.05 18.36c.39-.39.39-1.03 0-1.41-.39-.39-1.03-.39-1.41 0l-1.06 1.06c-.39.39-.39 1.03 0 1.41s1.03.39 1.41 0l1.06-1.06z"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</span>
|
||||||
|
<span class="theme-icon" data-theme-switcher="dark" title="Dark theme">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
|
||||||
|
<path
|
||||||
|
d="M12 3c-4.97 0-9 4.03-9 9s4.03 9 9 9 9-4.03 9-9c0-.46-.04-.92-.1-1.36-.98 1.37-2.58 2.26-4.4 2.26-2.98 0-5.4-2.42-5.4-5.4 0-1.81.89-3.42 2.26-4.4-.44-.06-.9-.1-1.36-.1z"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
|
||||||
|
const placeholder = document.getElementById("theme-switcher-icons");
|
||||||
|
if (placeholder) {
|
||||||
|
placeholder.innerHTML = themeIconsHTML;
|
||||||
|
}
|
||||||
|
// Add event listeners for theme switching
|
||||||
|
document.querySelectorAll(".theme-icon").forEach((icon) => {
|
||||||
|
icon.addEventListener("click", () => {
|
||||||
|
const theme = icon.getAttribute("data-theme-switcher");
|
||||||
|
setTheme(theme);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
79
examples/heroweb_example_base/js/not_used.js
Normal file
79
examples/heroweb_example_base/js/not_used.js
Normal file
@ -0,0 +1,79 @@
|
|||||||
|
/*!
|
||||||
|
* 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();
|
21
svelte/auth/.gitignore
vendored
Normal file
21
svelte/auth/.gitignore
vendored
Normal file
@ -0,0 +1,21 @@
|
|||||||
|
node_modules
|
||||||
|
|
||||||
|
# Output
|
||||||
|
.output
|
||||||
|
.vercel
|
||||||
|
/.svelte-kit
|
||||||
|
/build
|
||||||
|
|
||||||
|
# OS
|
||||||
|
.DS_Store
|
||||||
|
Thumbs.db
|
||||||
|
|
||||||
|
# Env
|
||||||
|
.env
|
||||||
|
.env.*
|
||||||
|
!.env.example
|
||||||
|
!.env.test
|
||||||
|
|
||||||
|
# Vite
|
||||||
|
vite.config.js.timestamp-*
|
||||||
|
vite.config.ts.timestamp-*
|
1
svelte/auth/.npmrc
Normal file
1
svelte/auth/.npmrc
Normal file
@ -0,0 +1 @@
|
|||||||
|
engine-strict=true
|
23
svelte/auth/install.sh
Executable file
23
svelte/auth/install.sh
Executable file
@ -0,0 +1,23 @@
|
|||||||
|
#!/bin/bash
|
||||||
|
set -ex
|
||||||
|
|
||||||
|
BASE_DIR="$( cd "$( dirname "${BASH_SOURCE[0]}" )" &> /dev/null && pwd )"
|
||||||
|
|
||||||
|
cd ${BASE_DIR}
|
||||||
|
|
||||||
|
# Define the project directory
|
||||||
|
# PROJECT_DIR="myfiles"
|
||||||
|
|
||||||
|
# pushd ${BASE_DIR}/${PROJECT_DIR}
|
||||||
|
|
||||||
|
# if dir doesn't exit yet
|
||||||
|
# npm create vite@latest $PROJECT_DIR -- --template svelte --yes
|
||||||
|
|
||||||
|
|
||||||
|
# Check if node_modules exists, if not, install the package
|
||||||
|
if [ ! -d "node_modules" ]; then
|
||||||
|
npx svelte-add@latest tailwindcss -y
|
||||||
|
n
|
||||||
|
fi
|
||||||
|
|
||||||
|
popd &> /dev/null
|
3052
svelte/auth/package-lock.json
generated
Normal file
3052
svelte/auth/package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
25
svelte/auth/package.json
Normal file
25
svelte/auth/package.json
Normal file
@ -0,0 +1,25 @@
|
|||||||
|
{
|
||||||
|
"name": "auth",
|
||||||
|
"version": "0.0.1",
|
||||||
|
"private": true,
|
||||||
|
"scripts": {
|
||||||
|
"dev": "vite dev",
|
||||||
|
"build": "vite build",
|
||||||
|
"preview": "vite preview",
|
||||||
|
"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
|
||||||
|
"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@sveltejs/adapter-auto": "^3.0.0",
|
||||||
|
"@sveltejs/kit": "^2.0.0",
|
||||||
|
"@sveltejs/vite-plugin-svelte": "^3.0.0",
|
||||||
|
"@tailwindcss/typography": "^0.5.14",
|
||||||
|
"autoprefixer": "^10.4.20",
|
||||||
|
"svelte": "^4.2.7",
|
||||||
|
"svelte-check": "^4.0.0",
|
||||||
|
"tailwindcss": "^3.4.9",
|
||||||
|
"typescript": "^5.0.0",
|
||||||
|
"vite": "^5.0.3"
|
||||||
|
},
|
||||||
|
"type": "module"
|
||||||
|
}
|
6
svelte/auth/postcss.config.js
Normal file
6
svelte/auth/postcss.config.js
Normal file
@ -0,0 +1,6 @@
|
|||||||
|
export default {
|
||||||
|
plugins: {
|
||||||
|
tailwindcss: {},
|
||||||
|
autoprefixer: {}
|
||||||
|
}
|
||||||
|
};
|
38
svelte/auth/readme.md
Normal file
38
svelte/auth/readme.md
Normal file
@ -0,0 +1,38 @@
|
|||||||
|
# create-svelte
|
||||||
|
|
||||||
|
Everything you need to build a Svelte project, powered by [`create-svelte`](https://github.com/sveltejs/kit/tree/main/packages/create-svelte).
|
||||||
|
|
||||||
|
## Creating a project
|
||||||
|
|
||||||
|
If you're seeing this, you've probably already done this step. Congrats!
|
||||||
|
|
||||||
|
```bash
|
||||||
|
# create a new project in the current directory
|
||||||
|
npm create svelte@latest
|
||||||
|
|
||||||
|
# create a new project in my-app
|
||||||
|
npm create svelte@latest my-app
|
||||||
|
```
|
||||||
|
|
||||||
|
## Developing
|
||||||
|
|
||||||
|
Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
npm run dev
|
||||||
|
|
||||||
|
# or start the server and open the app in a new browser tab
|
||||||
|
npm run dev -- --open
|
||||||
|
```
|
||||||
|
|
||||||
|
## Building
|
||||||
|
|
||||||
|
To create a production version of your app:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
npm run build
|
||||||
|
```
|
||||||
|
|
||||||
|
You can preview the production build with `npm run preview`.
|
||||||
|
|
||||||
|
> To deploy your app, you may need to install an [adapter](https://kit.svelte.dev/docs/adapters) for your target environment.
|
3
svelte/auth/src/app.css
Normal file
3
svelte/auth/src/app.css
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
@import "tailwindcss/base";
|
||||||
|
@import "tailwindcss/components";
|
||||||
|
@import "tailwindcss/utilities";
|
13
svelte/auth/src/app.d.ts
vendored
Normal file
13
svelte/auth/src/app.d.ts
vendored
Normal file
@ -0,0 +1,13 @@
|
|||||||
|
// See https://kit.svelte.dev/docs/types#app
|
||||||
|
// for information about these interfaces
|
||||||
|
declare global {
|
||||||
|
namespace App {
|
||||||
|
// interface Error {}
|
||||||
|
// interface Locals {}
|
||||||
|
// interface PageData {}
|
||||||
|
// interface PageState {}
|
||||||
|
// interface Platform {}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export {};
|
12
svelte/auth/src/app.html
Normal file
12
svelte/auth/src/app.html
Normal file
@ -0,0 +1,12 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8" />
|
||||||
|
<link rel="icon" href="%sveltekit.assets%/favicon.png" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||||
|
%sveltekit.head%
|
||||||
|
</head>
|
||||||
|
<body data-sveltekit-preload-data="hover">
|
||||||
|
<div style="display: contents">%sveltekit.body%</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
1
svelte/auth/src/lib/index.ts
Normal file
1
svelte/auth/src/lib/index.ts
Normal file
@ -0,0 +1 @@
|
|||||||
|
// place files you want to import through the `$lib` alias in this folder.
|
1
svelte/auth/src/routes/+layout.svelte
Normal file
1
svelte/auth/src/routes/+layout.svelte
Normal file
@ -0,0 +1 @@
|
|||||||
|
<script>import "../app.css";</script><slot></slot>
|
2
svelte/auth/src/routes/+page.svelte
Normal file
2
svelte/auth/src/routes/+page.svelte
Normal file
@ -0,0 +1,2 @@
|
|||||||
|
<h1>Welcome to SvelteKit</h1>
|
||||||
|
<p>Visit <a href="https://kit.svelte.dev">kit.svelte.dev</a> to read the documentation</p>
|
BIN
svelte/auth/static/favicon.png
Normal file
BIN
svelte/auth/static/favicon.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 1.5 KiB |
18
svelte/auth/svelte.config.js
Normal file
18
svelte/auth/svelte.config.js
Normal file
@ -0,0 +1,18 @@
|
|||||||
|
import adapter from '@sveltejs/adapter-auto';
|
||||||
|
import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
|
||||||
|
|
||||||
|
/** @type {import('@sveltejs/kit').Config} */
|
||||||
|
const config = {
|
||||||
|
// Consult https://kit.svelte.dev/docs/integrations#preprocessors
|
||||||
|
// for more information about preprocessors
|
||||||
|
preprocess: vitePreprocess(),
|
||||||
|
|
||||||
|
kit: {
|
||||||
|
// adapter-auto only supports some environments, see https://kit.svelte.dev/docs/adapter-auto for a list.
|
||||||
|
// If your environment is not supported, or you settled on a specific environment, switch out the adapter.
|
||||||
|
// See https://kit.svelte.dev/docs/adapters for more information about adapters.
|
||||||
|
adapter: adapter()
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
export default config;
|
11
svelte/auth/tailwind.config.ts
Normal file
11
svelte/auth/tailwind.config.ts
Normal file
@ -0,0 +1,11 @@
|
|||||||
|
import type { Config } from "tailwindcss";
|
||||||
|
|
||||||
|
export default {
|
||||||
|
content: ["./src/**/*.{html,js,svelte,ts}"],
|
||||||
|
|
||||||
|
theme: {
|
||||||
|
extend: {}
|
||||||
|
},
|
||||||
|
|
||||||
|
plugins: [require("@tailwindcss/typography")]
|
||||||
|
} as Config;
|
19
svelte/auth/tsconfig.json
Normal file
19
svelte/auth/tsconfig.json
Normal file
@ -0,0 +1,19 @@
|
|||||||
|
{
|
||||||
|
"extends": "./.svelte-kit/tsconfig.json",
|
||||||
|
"compilerOptions": {
|
||||||
|
"allowJs": true,
|
||||||
|
"checkJs": true,
|
||||||
|
"esModuleInterop": true,
|
||||||
|
"forceConsistentCasingInFileNames": true,
|
||||||
|
"resolveJsonModule": true,
|
||||||
|
"skipLibCheck": true,
|
||||||
|
"sourceMap": true,
|
||||||
|
"strict": true,
|
||||||
|
"moduleResolution": "bundler"
|
||||||
|
}
|
||||||
|
// Path aliases are handled by https://kit.svelte.dev/docs/configuration#alias
|
||||||
|
// except $lib which is handled by https://kit.svelte.dev/docs/configuration#files
|
||||||
|
//
|
||||||
|
// If you want to overwrite includes/excludes, make sure to copy over the relevant includes/excludes
|
||||||
|
// from the referenced tsconfig.json - TypeScript does not merge them in
|
||||||
|
}
|
6
svelte/auth/vite.config.ts
Normal file
6
svelte/auth/vite.config.ts
Normal file
@ -0,0 +1,6 @@
|
|||||||
|
import { sveltekit } from '@sveltejs/kit/vite';
|
||||||
|
import { defineConfig } from 'vite';
|
||||||
|
|
||||||
|
export default defineConfig({
|
||||||
|
plugins: [sveltekit()]
|
||||||
|
});
|
@ -1,12 +1,14 @@
|
|||||||
#!/bin/bash
|
#!/bin/bash
|
||||||
|
set -ex
|
||||||
|
|
||||||
|
BASE_DIR="$( cd "$( dirname "${BASH_SOURCE[0]}" )" &> /dev/null && pwd )"
|
||||||
|
source ${BASE_DIR}/myenv.sh
|
||||||
|
|
||||||
# Define the project directory
|
# Define the project directory
|
||||||
PROJECT_DIR="myfiles"
|
PROJECT_DIR="myfiles"
|
||||||
|
|
||||||
|
|
||||||
pushd ${BASE_DIR}/${PROJECT_DIR}
|
pushd ${BASE_DIR}/${PROJECT_DIR}
|
||||||
|
|
||||||
|
|
||||||
# if dir doesn't exit yet
|
# if dir doesn't exit yet
|
||||||
# npm create vite@latest $PROJECT_DIR -- --template svelte --yes
|
# npm create vite@latest $PROJECT_DIR -- --template svelte --yes
|
||||||
|
|
||||||
@ -15,7 +17,6 @@ pushd ${BASE_DIR}/${PROJECT_DIR}
|
|||||||
if [ ! -d "node_modules" ]; then
|
if [ ! -d "node_modules" ]; then
|
||||||
npm config set @wx:registry https://npm.svar.dev
|
npm config set @wx:registry https://npm.svar.dev
|
||||||
npm install
|
npm install
|
||||||
npm config set @wx:registry https://npm.svar.dev
|
|
||||||
npm install @wx/trial-svelte-filemanager
|
npm install @wx/trial-svelte-filemanager
|
||||||
npm install @wx/trial-svelte-gantt
|
npm install @wx/trial-svelte-gantt
|
||||||
npm install @wx/trial-svelte-grid
|
npm install @wx/trial-svelte-grid
|
Before Width: | Height: | Size: 1.5 KiB After Width: | Height: | Size: 1.5 KiB |
Before Width: | Height: | Size: 1.9 KiB After Width: | Height: | Size: 1.9 KiB |
48
svelte/filemanager/run.sh
Executable file
48
svelte/filemanager/run.sh
Executable file
@ -0,0 +1,48 @@
|
|||||||
|
#!/bin/bash
|
||||||
|
set -e
|
||||||
|
|
||||||
|
BASE_DIR="$( cd "$( dirname "${BASH_SOURCE[0]}" )" &> /dev/null && pwd )"
|
||||||
|
cd ${BASE_DIR}
|
||||||
|
|
||||||
|
#install hero if not done yet
|
||||||
|
if ! command -v hero &> /dev/null; then
|
||||||
|
curl https://raw.githubusercontent.com/freeflowuniverse/crystallib/development/scripts/install_hero.sh > /tmp/hero_install.sh
|
||||||
|
bash /tmp/hero_install.sh
|
||||||
|
fi
|
||||||
|
|
||||||
|
hero git clone -u https://github.com/svar-widgets/filemanager-backend-go
|
||||||
|
|
||||||
|
pushd ${HOME}/code/github/svar-widgets/filemanager-backend-go
|
||||||
|
|
||||||
|
# Check if filemanager-go exists, if not, build it
|
||||||
|
if [ ! -f "filemanager-go" ]; then
|
||||||
|
go build
|
||||||
|
fi
|
||||||
|
|
||||||
|
function manage_filemanager {
|
||||||
|
|
||||||
|
set +ex
|
||||||
|
pkill -f filemanager-go &> /dev/null
|
||||||
|
screen -S filemanager -X quit &> /dev/null
|
||||||
|
set -e
|
||||||
|
|
||||||
|
#${HOME}/code/github/svar-widgets/filemanager-backend-go/filemanager-go ${HOME}/code
|
||||||
|
|
||||||
|
screen -S filemanager -dm bash -c "${HOME}/code/github/svar-widgets/filemanager-backend-go/filemanager-go ${HOME}/code"
|
||||||
|
sleep 0.5
|
||||||
|
nc -zv localhost 3200
|
||||||
|
if [ $? -eq 0 ]; then
|
||||||
|
echo "Filemanager on port 3200 is running."
|
||||||
|
else
|
||||||
|
echo "Error: Filemanager port 3200 is not accessible."
|
||||||
|
fi
|
||||||
|
|
||||||
|
#screen -r filemanager
|
||||||
|
}
|
||||||
|
|
||||||
|
manage_filemanager
|
||||||
|
|
||||||
|
popd &> /dev/null
|
||||||
|
|
||||||
|
pushd ${BASE_DIR}/myfiles
|
||||||
|
|
Loading…
Reference in New Issue
Block a user