extern/egroupware_official
1
0
Fork 0
mirror of https://github.com/EGroupware/egroupware.git synced 2024-11-23 00:13:35 +01:00
Code Issues Packages Projects Releases Wiki Activity
26b1431c31
egroupware_official/doc/etemplate2/_includes/default.njk

151 lines
6.0 KiB
Plaintext
Raw Normal View History

Initial attempt at a nice dev reference. Many thanks to all the other developers who made this possible, especially Shoelace
2023-09-22 21:50:55 +02:00
<!DOCTYPE html>
<html
lang="en"
data-layout="{{ layout }}"
data-egroupware-version="{{ meta.version }}"
Docs: Get the Shoelace widgets working on docs site Using their CDN with our Shoelace version
2023-10-27 17:21:27 +02:00
data-shoelace-version="{{ meta.shoelaceVersion }}"
Initial attempt at a nice dev reference. Many thanks to all the other developers who made this possible, especially Shoelace
2023-09-22 21:50:55 +02:00
>
<head>
{# Metadata #}
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="{{ meta.description }}" />
<title>{{ meta.title }}</title>
{# Opt out of Turbo caching #}
<meta name="turbo-cache-control">
{# Stylesheets #}
<!-- <link rel="stylesheet" href="{{ assetUrl('styles/monochrome.css') }}" /> -->
<link rel="stylesheet" href="{{ assetUrl('styles/docs.css') }}" />
<link rel="stylesheet" href="{{ assetUrl('styles/code-previews.css') }}" />
<link rel="stylesheet" href="{{ assetUrl('styles/search.css') }}" />
{# Favicons #}
<link rel="icon" href="{{ assetUrl('images/logo.svg') }}" type="image/x-icon" />
{# OpenGraph #}
<meta property="og:url" content="{{ rootUrl(page.url, true) }}" />
<meta property="og:title" content="{{ meta.title }}" />
<meta property="og:description" content="{{ meta.description }}" />
<meta property="og:image" content="{{ assetUrl(meta.image, true) }}" />
Some more styling & docs
2023-09-22 23:03:37 +02:00
{# API Viewer Element #}
<script type="module" src="https://jspm.dev/api-viewer-element"></script>
Docs: Get the Shoelace widgets working on docs site Using their CDN with our Shoelace version
2023-10-27 17:21:27 +02:00
{# Shoelace #}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@{{ meta.shoelaceVersion }}/cdn/themes/light.css" />
Docs: Get the ETemplate2 webComponent widets working on doc site Sort of. This breaks shoelace images due to them not being imported / copied, and not using the CDN
2023-10-27 19:50:51 +02:00
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@{{ meta.shoelaceVersion }}/cdn/themes/dark.css" />
Docs: Get the Shoelace widgets working on docs site Using their CDN with our Shoelace version
2023-10-27 17:21:27 +02:00
<script type="module" src="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@{{ meta.shoelaceVersion }}/cdn/shoelace-autoloader.js"></script>
Initial attempt at a nice dev reference. Many thanks to all the other developers who made this possible, especially Shoelace
2023-09-22 21:50:55 +02:00
{# EGroupware #}
- Add custom button color example to docs Copied from Shoelace https://shoelace.style/getting-started/customizing#css-parts - Add fixed width label example to docs - Get etemplate2.css included in docs to make sure styles are consistent
2024-04-04 22:27:11 +02:00
<link rel="stylesheet" href="{{ assetUrl('styles/etemplate2.css') }}" />
<!-- Breaks page scrolling <link rel="stylesheet" href="{{ assetUrl('styles/monochrome.css') }}" /> -->
Docs: Get the ETemplate2 webComponent widets working on doc site Sort of. This breaks shoelace images due to them not being imported / copied, and not using the CDN
2023-10-27 19:50:51 +02:00
<script src="{{ assetUrl('scripts/sub/dir/etemplate/etemplate2.js') }}" type="module" id="egw_script_id"></script>
Initial attempt at a nice dev reference. Many thanks to all the other developers who made this possible, especially Shoelace
2023-09-22 21:50:55 +02:00
{# Set the initial theme and menu states here to prevent flashing #}
<script>
(() => {
const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
const theme = localStorage.getItem('theme') || 'auto';
document.documentElement.classList.toggle('sl-theme-dark', theme === 'dark' || (theme === 'auto' && prefersDark));
})();
</script>
{# Turbo + Scroll positioning #}
<script src="{{ assetUrl('scripts/turbo.js') }}" type="module"></script>
<script src="{{ assetUrl('scripts/docs.js') }}" defer></script>
<script src="{{ assetUrl('scripts/code-previews.js') }}" defer></script>
<script src="{{ assetUrl('scripts/lunr.js') }}" defer></script>
<script src="{{ assetUrl('scripts/search.js') }}" defer></script>
</head>
<body>
<a id="skip-to-main" class="visually-hidden" href="#main-content" data-smooth-link="false">
Skip to main content
</a>
{# Menu toggle #}
<button id="menu-toggle" type="button" aria-label="Menu">
<svg width="148" height="148" viewBox="0 0 148 148" xmlns="http://www.w3.org/2000/svg">
<g stroke="currentColor" stroke-width="18" fill="none" fill-rule="evenodd" stroke-linecap="round">
<path d="M9.5 125.5h129M9.5 74.5h129M9.5 23.5h129"></path>
</g>
</svg>
</button>
{# Icon toolbar #}
<div id="icon-toolbar">
{# GitHub #}
<a href="https://github.com/EGroupware/egroupware" title="View EGroupware on GitHub">
<sl-icon name="github"></sl-icon>
</a>
{# Theme selector #}
<sl-dropdown id="theme-selector" placement="bottom-end" distance="3">
<sl-button slot="trigger" size="small" variant="text" caret title="Press \ to toggle">
<sl-icon class="only-light" name="sun-fill"></sl-icon>
<sl-icon class="only-dark" name="moon-fill"></sl-icon>
</sl-button>
<sl-menu>
<sl-menu-item type="checkbox" value="light">Light</sl-menu-item>
<sl-menu-item type="checkbox" value="dark">Dark</sl-menu-item>
<sl-divider></sl-divider>
<sl-menu-item type="checkbox" value="auto">System</sl-menu-item>
</sl-menu>
</sl-dropdown>
</div>
<aside id="sidebar" data-preserve-scroll>
<header>
<a href="/">
<img src="{{ assetUrl('images/logo.svg') }}" alt="EGroupware" />
</a>
<div class="sidebar-version">
{{ meta.version }}
</div>
</header>
<div class="sidebar-buttons">
<sl-button size="small" class="repo-button repo-button--github" href="https://github.com/EGroupware/egroupware" target="_blank">
<sl-icon slot="prefix" name="github"></sl-icon> Code
</sl-button>
<sl-button size="small" class="repo-button repo-button--star" href="https://github.com/EGroupware/egroupware/stargazers" target="_blank">
<sl-icon slot="prefix" name="star-fill"></sl-icon> Star
</sl-button>
Docs: Get the Shoelace widgets working on docs site Using their CDN with our Shoelace version
2023-10-27 17:21:27 +02:00
<sl-button size="small" class="repo-button" href="https://egroupware.org" target="_blank">
Initial attempt at a nice dev reference. Many thanks to all the other developers who made this possible, especially Shoelace
2023-09-22 21:50:55 +02:00
<sl-icon slot="prefix" name="box-arrow-up-right"></sl-icon> EGroupware
</sl-button>
</div>
<button class="search-box" type="button" title="Press / to search" aria-label="Search" data-plugin="search">
<sl-icon name="search"></sl-icon>
<span>Search</span>
</button>
<nav>
{% include 'sidebar.njk' %}
</nav>
</aside>
{# Content #}
<main>
<a id="main-content"></a>
<article id="content" class="content{% if toc %} content--with-toc{% endif %}">
{% if toc %}
<div class="content__toc">
<ul>
<li class="top"><a href="#">{{ meta.title }}</a></li>
</ul>
</div>
{% endif %}
<div class="content__body">
{% block content %}
{{ content | safe }}
{% endblock %}
</div>
</article>
</main>
</body>
</html>
Reference in New Issue Copy Permalink