Convert WebC components to Nunjucks templates
This commit is contained in:
Helen Chong
parent
7f90fac6f2
commit
20009097b1
|
|
@ -27,12 +27,8 @@
|
|||
<title>{{ title }} | {{ sitemeta.siteName }}</title>
|
||||
</head>
|
||||
<body>
|
||||
{% renderTemplate "webc" %}
|
||||
<header-main></header-main>
|
||||
{% endrenderTemplate %}
|
||||
{% renderTemplate "webc" %}
|
||||
<navbar></navbar>
|
||||
{% endrenderTemplate %}
|
||||
{% include "main/header.njk" %}
|
||||
{% include "main/navbar.njk" %}
|
||||
<main>
|
||||
<!-- <aside class="left-sidebar">
|
||||
Left sidebar content here
|
||||
|
|
@ -43,8 +39,6 @@
|
|||
</aside> -->
|
||||
</main>
|
||||
{% include "main/footer.njk" %}
|
||||
{% renderTemplate "webc" %}
|
||||
<top-btn></top-btn>
|
||||
{% endrenderTemplate %}
|
||||
{% include "main/top-btn.njk" %}
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,17 +1,13 @@
|
|||
<nav webc:root="override" class="navbar">
|
||||
<nav class="navbar">
|
||||
<ul class="nav__menu">
|
||||
<li><a href="/home">Home</a></li>
|
||||
<li><a href="/about/">About</a></li>
|
||||
<li><a href="/articles/">Articles</a></li>
|
||||
<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>
|
||||
{% for page in collections.pages %}
|
||||
<li><a href="{{ page.url }}">{{ page.data.title }}</a></li>
|
||||
{%- endfor %}
|
||||
<li><a href="https://leilukin.123guestbook.com/">Guestbook</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<style webc:keep webc:bucket="defer">
|
||||
<style>
|
||||
.navbar {
|
||||
background: var(--clr-navbar-bg);
|
||||
padding: 0 0.6rem;
|
||||
|
|
@ -58,9 +54,8 @@
|
|||
}
|
||||
</style>
|
||||
|
||||
<script webc:keep webc:bucket="defer">
|
||||
<script defer>
|
||||
// Make the navigation bar sticky
|
||||
|
||||
// const header = document.querySelector(".main-header");
|
||||
const navbar = document.querySelector(".navbar");
|
||||
window.addEventListener("scroll", e => {
|
||||
|
|
@ -1,4 +1,4 @@
|
|||
<div webc:root="override" class="site-btn__container">
|
||||
<div class="site-btn__container">
|
||||
<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>
|
||||
</div>
|
||||
|
|
@ -6,7 +6,7 @@
|
|||
<button class="copy-txt-btn">Copy HTML</button>
|
||||
</div>
|
||||
|
||||
<style webc:keep webc:bucket="defer">
|
||||
<style>
|
||||
.site-btn__container {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
|
|
@ -37,7 +37,7 @@
|
|||
}
|
||||
</style>
|
||||
|
||||
<script webc:keep webc:bucket="defer">
|
||||
<script defer>
|
||||
document.querySelector(".copy-txt-btn").onclick = () => {
|
||||
document.querySelector(".textarea-for-copy").select();
|
||||
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>
|
||||
</div>
|
||||
|
||||
<style webc:keep webc:bucket="defer">
|
||||
<style>
|
||||
.support-me {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
|
@ -1,8 +1,8 @@
|
|||
<button webc:root="override" class="top-btn hidden" aria-label="Scroll to top">
|
||||
<img src="/assets/images/elements/top.svg" alt="">
|
||||
<button class="top-btn hidden">
|
||||
<img src="/assets/images/elements/top.svg" alt="Scroll to top">
|
||||
</button>
|
||||
|
||||
<style webc:keep webc:bucket="defer">
|
||||
<style>
|
||||
:root {
|
||||
--clr-top-btn: #FFD05A;
|
||||
}
|
||||
|
|
@ -28,7 +28,7 @@
|
|||
}
|
||||
</style>
|
||||
|
||||
<script webc:keep webc:bucket="defer">
|
||||
<script defer>
|
||||
const topButton = document.querySelector(".top-btn");
|
||||
|
||||
window.onscroll = () => {
|
||||
|
|
@ -24,9 +24,7 @@ metadata:
|
|||
|
||||
<p>You can link to my website with this button:</p>
|
||||
|
||||
{% renderTemplate "webc" %}
|
||||
<site-btn></site-btn>
|
||||
{% endrenderTemplate %}
|
||||
{% include "main/site-btn.njk" %}
|
||||
|
||||
<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>
|
||||
|
|
@ -62,8 +60,6 @@ metadata:
|
|||
|
||||
<p>You can contact me via email: <a href="mailto:leilukin@outlook.com">leilukin@outlook.com</a>.</p>
|
||||
|
||||
{% renderTemplate "webc" %}
|
||||
<support-me></support-me>
|
||||
{% endrenderTemplate %}
|
||||
{% include "main/support-me.njk" %}
|
||||
</sectioin>
|
||||
</article>
|
||||
|
|
@ -18,9 +18,7 @@ metadata:
|
|||
<h2>Link to My Website</h2>
|
||||
|
||||
<p>You can link to my website with this button:</p>
|
||||
{% renderTemplate "webc" %}
|
||||
<site-btn></site-btn>
|
||||
{% endrenderTemplate %}
|
||||
{% include "main/site-btn.njk" %}
|
||||
|
||||
<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>
|
||||
|
|
@ -63,8 +61,6 @@ metadata:
|
|||
|
||||
<section class="content-section">
|
||||
<h2>Support Me</h2>
|
||||
{% renderTemplate "webc" %}
|
||||
<support-me></support-me>
|
||||
{% endrenderTemplate %}
|
||||
{% include "main/support-me.njk" %}
|
||||
</section>
|
||||
</div>
|
||||
Loading…
Reference in New Issue