Convert WebC components to Nunjucks templates
This commit is contained in:
parent
7f90fac6f2
commit
20009097b1
|
@ -27,12 +27,8 @@
|
||||||
<title>{{ title }} | {{ sitemeta.siteName }}</title>
|
<title>{{ title }} | {{ sitemeta.siteName }}</title>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
{% renderTemplate "webc" %}
|
{% include "main/header.njk" %}
|
||||||
<header-main></header-main>
|
{% include "main/navbar.njk" %}
|
||||||
{% endrenderTemplate %}
|
|
||||||
{% renderTemplate "webc" %}
|
|
||||||
<navbar></navbar>
|
|
||||||
{% endrenderTemplate %}
|
|
||||||
<main>
|
<main>
|
||||||
<!-- <aside class="left-sidebar">
|
<!-- <aside class="left-sidebar">
|
||||||
Left sidebar content here
|
Left sidebar content here
|
||||||
|
@ -43,8 +39,6 @@
|
||||||
</aside> -->
|
</aside> -->
|
||||||
</main>
|
</main>
|
||||||
{% include "main/footer.njk" %}
|
{% include "main/footer.njk" %}
|
||||||
{% renderTemplate "webc" %}
|
{% include "main/top-btn.njk" %}
|
||||||
<top-btn></top-btn>
|
|
||||||
{% endrenderTemplate %}
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
|
@ -1,17 +1,13 @@
|
||||||
<nav webc:root="override" class="navbar">
|
<nav class="navbar">
|
||||||
<ul class="nav__menu">
|
<ul class="nav__menu">
|
||||||
<li><a href="/home">Home</a></li>
|
{% for page in collections.pages %}
|
||||||
<li><a href="/about/">About</a></li>
|
<li><a href="{{ page.url }}">{{ page.data.title }}</a></li>
|
||||||
<li><a href="/articles/">Articles</a></li>
|
{%- endfor %}
|
||||||
<li><a href="/blog/">Blog</a></li>
|
|
||||||
<li><a href="/mycreations/">My Creations</a></li>
|
|
||||||
<li><a href="/shrines/">Shrines</a></li>
|
|
||||||
<li><a href="/links/">Links</a></li>
|
|
||||||
<li><a href="https://leilukin.123guestbook.com/">Guestbook</a></li>
|
<li><a href="https://leilukin.123guestbook.com/">Guestbook</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
</nav>
|
</nav>
|
||||||
|
|
||||||
<style webc:keep webc:bucket="defer">
|
<style>
|
||||||
.navbar {
|
.navbar {
|
||||||
background: var(--clr-navbar-bg);
|
background: var(--clr-navbar-bg);
|
||||||
padding: 0 0.6rem;
|
padding: 0 0.6rem;
|
||||||
|
@ -58,9 +54,8 @@
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
<script webc:keep webc:bucket="defer">
|
<script defer>
|
||||||
// Make the navigation bar sticky
|
// Make the navigation bar sticky
|
||||||
|
|
||||||
// const header = document.querySelector(".main-header");
|
// const header = document.querySelector(".main-header");
|
||||||
const navbar = document.querySelector(".navbar");
|
const navbar = document.querySelector(".navbar");
|
||||||
window.addEventListener("scroll", e => {
|
window.addEventListener("scroll", e => {
|
|
@ -1,4 +1,4 @@
|
||||||
<div webc:root="override" class="site-btn__container">
|
<div class="site-btn__container">
|
||||||
<div>
|
<div>
|
||||||
<a href="https://leilukin.neocities.org/" target="_blank"><img src="/assets/leilukin/Leilukins-Hub-button.png" alt="Button of Leilukin's Hub" title="Leilukin's Hub"></a>
|
<a href="https://leilukin.neocities.org/" target="_blank"><img src="/assets/leilukin/Leilukins-Hub-button.png" alt="Button of Leilukin's Hub" title="Leilukin's Hub"></a>
|
||||||
</div>
|
</div>
|
||||||
|
@ -6,7 +6,7 @@
|
||||||
<button class="copy-txt-btn">Copy HTML</button>
|
<button class="copy-txt-btn">Copy HTML</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<style webc:keep webc:bucket="defer">
|
<style>
|
||||||
.site-btn__container {
|
.site-btn__container {
|
||||||
display: flex;
|
display: flex;
|
||||||
gap: 1rem;
|
gap: 1rem;
|
||||||
|
@ -37,7 +37,7 @@
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
<script webc:keep webc:bucket="defer">
|
<script defer>
|
||||||
document.querySelector(".copy-txt-btn").onclick = () => {
|
document.querySelector(".copy-txt-btn").onclick = () => {
|
||||||
document.querySelector(".textarea-for-copy").select();
|
document.querySelector(".textarea-for-copy").select();
|
||||||
document.execCommand('copy');
|
document.execCommand('copy');
|
|
@ -7,7 +7,7 @@
|
||||||
<script webc:keep type="text/javascript" src="https://cdnjs.buymeacoffee.com/1.0.0/button.prod.min.js" data-name="bmc-button" data-slug="leilukin" data-color="#7a37a3" data-emoji="" data-font="Cookie" data-text="Buy me a coffee" data-outline-color="#ffffff" data-font-color="#ffffff" data-coffee-color="#FFDD00" ></script>
|
<script webc:keep type="text/javascript" src="https://cdnjs.buymeacoffee.com/1.0.0/button.prod.min.js" data-name="bmc-button" data-slug="leilukin" data-color="#7a37a3" data-emoji="" data-font="Cookie" data-text="Buy me a coffee" data-outline-color="#ffffff" data-font-color="#ffffff" data-coffee-color="#FFDD00" ></script>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<style webc:keep webc:bucket="defer">
|
<style>
|
||||||
.support-me {
|
.support-me {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
|
@ -1,8 +1,8 @@
|
||||||
<button webc:root="override" class="top-btn hidden" aria-label="Scroll to top">
|
<button class="top-btn hidden">
|
||||||
<img src="/assets/images/elements/top.svg" alt="">
|
<img src="/assets/images/elements/top.svg" alt="Scroll to top">
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
<style webc:keep webc:bucket="defer">
|
<style>
|
||||||
:root {
|
:root {
|
||||||
--clr-top-btn: #FFD05A;
|
--clr-top-btn: #FFD05A;
|
||||||
}
|
}
|
||||||
|
@ -28,7 +28,7 @@
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
<script webc:keep webc:bucket="defer">
|
<script defer>
|
||||||
const topButton = document.querySelector(".top-btn");
|
const topButton = document.querySelector(".top-btn");
|
||||||
|
|
||||||
window.onscroll = () => {
|
window.onscroll = () => {
|
|
@ -24,9 +24,7 @@ metadata:
|
||||||
|
|
||||||
<p>You can link to my website with this button:</p>
|
<p>You can link to my website with this button:</p>
|
||||||
|
|
||||||
{% renderTemplate "webc" %}
|
{% include "main/site-btn.njk" %}
|
||||||
<site-btn></site-btn>
|
|
||||||
{% endrenderTemplate %}
|
|
||||||
|
|
||||||
<p>If you also have a Neocities account, you can follow this site through its <a href="https://neocities.org/site/leilukin" target="_blank">Neocities profile</a>.</p>
|
<p>If you also have a Neocities account, you can follow this site through its <a href="https://neocities.org/site/leilukin" target="_blank">Neocities profile</a>.</p>
|
||||||
<a href="https://neocities.org/site/leilukin" target="_blank"><img src="/assets/banners/hosted-by-neocities.png" alt="a website button with Penelope the cat, the mascot of Neocities, and the text 'hosted by neocities'" title="Hosted by Neocities"></a>
|
<a href="https://neocities.org/site/leilukin" target="_blank"><img src="/assets/banners/hosted-by-neocities.png" alt="a website button with Penelope the cat, the mascot of Neocities, and the text 'hosted by neocities'" title="Hosted by Neocities"></a>
|
||||||
|
@ -62,8 +60,6 @@ metadata:
|
||||||
|
|
||||||
<p>You can contact me via email: <a href="mailto:leilukin@outlook.com">leilukin@outlook.com</a>.</p>
|
<p>You can contact me via email: <a href="mailto:leilukin@outlook.com">leilukin@outlook.com</a>.</p>
|
||||||
|
|
||||||
{% renderTemplate "webc" %}
|
{% include "main/support-me.njk" %}
|
||||||
<support-me></support-me>
|
|
||||||
{% endrenderTemplate %}
|
|
||||||
</sectioin>
|
</sectioin>
|
||||||
</article>
|
</article>
|
|
@ -18,9 +18,7 @@ metadata:
|
||||||
<h2>Link to My Website</h2>
|
<h2>Link to My Website</h2>
|
||||||
|
|
||||||
<p>You can link to my website with this button:</p>
|
<p>You can link to my website with this button:</p>
|
||||||
{% renderTemplate "webc" %}
|
{% include "main/site-btn.njk" %}
|
||||||
<site-btn></site-btn>
|
|
||||||
{% endrenderTemplate %}
|
|
||||||
|
|
||||||
<p>Credit to <a href="https://github.com/hekate2" target="_blank">hekate2</a> for their <a href="https://hekate2.github.io/buttonmaker/" target="_blank">88x31 Web Button Maker</a>!</p>
|
<p>Credit to <a href="https://github.com/hekate2" target="_blank">hekate2</a> for their <a href="https://hekate2.github.io/buttonmaker/" target="_blank">88x31 Web Button Maker</a>!</p>
|
||||||
</section>
|
</section>
|
||||||
|
@ -63,8 +61,6 @@ metadata:
|
||||||
|
|
||||||
<section class="content-section">
|
<section class="content-section">
|
||||||
<h2>Support Me</h2>
|
<h2>Support Me</h2>
|
||||||
{% renderTemplate "webc" %}
|
{% include "main/support-me.njk" %}
|
||||||
<support-me></support-me>
|
|
||||||
{% endrenderTemplate %}
|
|
||||||
</section>
|
</section>
|
||||||
</div>
|
</div>
|
Loading…
Reference in New Issue