Leilukin
/
leilukin-site
mirror of https://github.com/helenclx/leilukin-site.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Convert WebC components to Nunjucks templates

This commit is contained in:
Helen Chong 2024-04-14 16:52:52 +08:00
parent 7f90fac6f2
commit 20009097b1
8 changed files with 21 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
src/_includes/main/base.njk
View File

@ -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>

0
src/_includes/main/header-main.webc → src/_includes/main/header.njk
View File

17
src/_includes/main/navbar.webc → src/_includes/main/navbar.njk
View File

@ -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 => {

6
src/_includes/main/site-btn.webc → src/_includes/main/site-btn.njk
View File

@ -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');

2
src/_includes/main/support-me.webc → src/_includes/main/support-me.njk
View File

@ -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;

8
src/_includes/main/top-btn.webc → src/_includes/main/top-btn.njk
View File

@ -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 = () => {

8
src/pages/about.njk
View File

@ -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>

8
src/pages/home.njk
View File

@ -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>