web2019/templates/_base.html
Egor Savkin 3ccbd41ef2 Fix and optimize shop styles and remove jquery
Reduce bootstrap bundle, replace jquery dependant code and remove jquery. Optimize style loading.
Overall the lighthouse metrics are far better now.

Signed-off-by: Egor Savkin <es@m-labs.hk>
2025-01-23 16:04:31 +08:00

212 lines
8.3 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<title>{% if page and page.title %}{{ page.title }} |{% endif %} {% block title%}{{ config.title }}{% endblock %}</title>
<meta name="description" content="{% block description%}{{ config.description }}{% endblock %}">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta property="og:type" content="website">
{% block ogtitle %}
<meta property="og:title" content="{% block og_title%}{{ config.title }}{% endblock %}">
{% endblock %}
{% block ogdescription %}
<meta property="og:description" content="{% block og_description%}{{ config.description }}{% endblock %}">
{% endblock %}
<meta property="og:site_name" content="{{ config.extra.author }}">
<meta property="og:url" content="{{ config.base_url }}">
<meta property="og:image" content={{ get_url(path='images/logo@2x.png', cachebust=true) }}>
{% block meta %}{% endblock meta %}
<meta name="theme-color" content="#715ec7">
<link rel="manifest" href="/manifest.json" />
<link rel="apple-touch-icon" href="{{ get_url(path='/apple-icon-114x114.png') }}" sizes="114x114">
<link rel="apple-touch-icon" href="{{ get_url(path='/apple-icon-120x120.png') }}" sizes="120x120">
<link rel="apple-touch-icon" href="{{ get_url(path='/apple-icon-144x144.png') }}" sizes="144x144">
<link rel="apple-touch-icon" href="{{ get_url(path='/apple-icon-152x152.png') }}" sizes="152x152">
<link rel="apple-touch-icon" href="{{ get_url(path='/apple-icon-180x180.png') }}" sizes="180x180">
<link rel="apple-touch-icon" href="{{ get_url(path='/apple-icon-57x57.png') }}" sizes="57x57">
<link rel="apple-touch-icon" href="{{ get_url(path='/apple-icon-60x60.png') }}" sizes="60x60">
<link rel="apple-touch-icon" href="{{ get_url(path='/apple-icon-72x72.png') }}" sizes="72x72">
<link rel="apple-touch-icon" href="{{ get_url(path='/apple-icon-76x76.png') }}" sizes="76x76">
<link rel="apple-touch-icon" href="{{ get_url(path='/apple-icon.png') }}">
<link rel="icon" href="{{ get_url(path='/favicon-16x16.png') }}" sizes="16x16">
<link rel="icon" href="{{ get_url(path='/favicon-32x32.png') }}" sizes="32x32">
<link rel="icon" href="{{ get_url(path='/favicon-96x96.png') }}" sizes="96x96">
<link href="{{ get_url(path='favicon.ico', cachebust=true) }}" rel="shortcut icon" type="image/x-icon">
<link href="{{ get_url(path='favicon.ico', cachebust=true) }}" rel="icon" type="image/x-icon">
{% block links %}{% endblock %}
{% block styles %}
<link rel="stylesheet" href="{{ get_url(path='css/bootstrap-5.3.0.opt.css', cachebust=true) }}">
<link rel="stylesheet" href="{{ get_url(path='css/styles.css', cachebust=true) }}">
{% endblock %}
</head>
<body>
<!-- HEADER -->
<div class="container-fluid container-header shadow th sticky-top">
<header class="container">
<nav class="navbar navbar-expand-lg navbar-light bg-th-1 justify-content-center justify-content-between pt-md-3 pb-md-3" role="navigation">
<a class="navbar-brand logo me-0" href="/">
<img src="{{ get_url(path='images/logo@2x.png') }}" height="40" alt="logo">
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ms-0 ms-md-auto text-start text-lg-start pt-2 pb-2 pt-md-0 pb-md-0">
{% set section = get_section(path='_index.md') %}
{% for section in section.subsections %}
{% set subsection = get_section(path=section) %}
{% set root_current_path = current_path | trim_start_matches(pat='/') | split(pat='/') | first %}
{% set root_section_path = subsection.path | trim_start_matches(pat='/') | split(pat='/') | first %}
{% if subsection.pages|length > 0 and subsection.title != 'Other' %}
<li class="nav-item ms-0 ms-md-4 dropdown {% if root_current_path == root_section_path %}active{% endif %}">
<a class="nav-link dropdown-toggle {% if current_path == subsection.path %}active{% endif %}" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
{{ subsection.title }}
</a>
<div class="dropdown-menu shadow-none shadow-lg text-start text-lg-start" aria-labelledby="navbarDropdown">
{% for tmp_page in subsection.pages %}
{% if tmp_page.extra.menu_item and tmp_page.extra.menu_item == "th1" %}
<a class="dropdown-item pt-2 pb-2 mx-4 mt-2 mb-2 mt-sm-3 mb-sm-3 w-auto btn btn-primary btn-inversed {% if current_path == tmp_page.path %}active{% endif %} rounded-1" href="{{ tmp_page.permalink }}">
<center>{{ tmp_page.title }}</center>
</a>
{% else %}
<a class="dropdown-item pt-2 pb-2 {% if current_path == tmp_page.path %}active{% endif %}" href="{{ tmp_page.permalink }}">{{ tmp_page.title }}</a>
{% endif %}
{% endfor %}
</div>
</li>
{% elif subsection.title != 'Other' %}
<li class="nav-item ms-0 ms-md-4 {% if current_path == subsection.path %}active{% endif %}">
<a class="nav-link" href="{{ subsection.permalink }}">{{ subsection.title }}</a>
</li>
{% endif %}
{% endfor %}
</ul>
</div>
</nav>
</header>
</div>
<!-- ./HEADER -->
<!-- HERO -->
{% block hero %}
{% endblock %}
<!-- ./HERO -->
<!-- MAIN CONTENT -->
{% block main %}
{% endblock %}
<!-- ./MAIN CONTENT -->
<!-- FOOTER -->
{% block footer %}
<footer class="container text-center text-md-start">
{% block footer_contact %}
{% include "includes/footer_contact_direction.html" %}
{% endblock %}
<p class="pt-4 pb-2 text-center">
<small>Copyright &copy; <span id="copyright_year"></span>, M-Labs. All rights reserved. ARTIQ, the ARTIQ logo, Migen and nMigen are registered or unregistered trademarks.</small>
</p>
{% block fcopyright %}
{% endblock %}
</footer>
{% endblock footer %}
<!-- ./FOOTER -->
<!-- MODAL for enlarged picture -->
<div class="modal" id="modalEnlarged" tabindex="-1" role="dialog">
<div class="modal-dialog mx-auto modal-lg" role="document">
<div class="modal-content">
<div class="modal-body mx-auto">
<img src="" id="enlarged" class="img-fluid">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- <script src="{{ get_url(path='js/as.js', cachebust=true) }}"></script> -->
<script src="{{ get_url(path='js/bootstrap-5.3.0.bundle.min.js', cachebust=true) }}" defer></script>
<script>
(function () {
var cy = document.getElementById('copyright_year');
if (cy) {
cy.textContent = (new Date()).getFullYear();
}
})();
</script>
<script>
document.addEventListener('DOMContentLoaded', function() {
const modal = document.getElementById('modalEnlarged');
const enlargedImg = document.getElementById('enlarged');
modal.addEventListener('hidden.bs.modal', function() {
enlargedImg.src = '';
});
document.querySelectorAll('[data-popup]').forEach(function(element) {
element.addEventListener('click', function() {
const imgSrc = this.dataset.nsrc;
enlargedImg.src = imgSrc;
const bsModal = new bootstrap.Modal(modal);
bsModal.show();
});
});
});
</script>
{% block js %}
{% endblock %}
</body>
</html>