124 lines
4.8 KiB
Handlebars
124 lines
4.8 KiB
Handlebars
<!DOCTYPE html>
|
|
<html lang="{{@site.lang}}">
|
|
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<link rel="stylesheet" type="text/css" href="{{asset "built/screen.css"}}" />
|
|
<title>{{meta_title}}</title>
|
|
|
|
{{!-- Outputs important meta data and settings, should always be in <head> --}}
|
|
{{ghost_head}}
|
|
|
|
{{!-- Fonts --}}
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" />
|
|
<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&display=swap"
|
|
rel="stylesheet">
|
|
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" />
|
|
</head>
|
|
|
|
<body class="{{body_class}} bg-gray-100 dark:bg-gray-800">
|
|
|
|
{{> navbar }}
|
|
|
|
{{{ body }}}
|
|
|
|
{{> footer }}
|
|
|
|
{{#is "post, page"}}
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/tocbot/4.10.0/tocbot.min.js"></script>
|
|
<script>
|
|
tocbot.init({
|
|
tocSelector: '.toc',
|
|
contentSelector: '.post-content',
|
|
hasInnerContainers: true
|
|
});
|
|
</script>
|
|
{{/is}}
|
|
|
|
|
|
{{!-- swiper for connectors (homepage only) --}}
|
|
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
|
|
|
|
{{!-- Simple little js lib --}}
|
|
<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.8.0/dist/alpine.min.js"></script>
|
|
|
|
{{!-- Search Lib --}}
|
|
<script src="https://cdn.jsdelivr.net/npm/searchinghost@1.6.0/dist/searchinghost.min.js"></script>
|
|
<script>
|
|
|
|
</script>
|
|
|
|
{{#is "post, page"}}
|
|
{{!-- Zoomable images --}}
|
|
<script src="https://cdn.jsdelivr.net/npm/medium-zoom@1.0.6/dist/medium-zoom.min.js"></script>
|
|
<script>
|
|
let margin = 150;
|
|
if(window.innerWidth < 1024) margin = 75
|
|
if(window.innerWidth < 768) margin = 20
|
|
if(window.innerWidth < 600) margin = 10
|
|
|
|
mediumZoom('.kg-image, .kg-gallery-image img',
|
|
{
|
|
margin: margin,
|
|
background: '',
|
|
scrollOffset: 0
|
|
})
|
|
|
|
</script>
|
|
{{/is}}
|
|
{{ghost_foot}}
|
|
<script>
|
|
let postContent = Array.from(document.getElementsByClassName('post-content'))[0].innerHTML
|
|
|
|
let tips = postContent.match(/<p>::: tip(.*?):::<\/\p>/g)
|
|
let warnings = postContent.match(/<p>::: warning(.*?):::<\/\p>/g)
|
|
let dangers = postContent.match(/<p>::: danger(.*?):::<\/\p>/g)
|
|
|
|
let details = postContent.match(/<p>::: details([\s\S]+?):::<\/\p>/g)
|
|
|
|
if (tips)
|
|
tips.forEach(tip => {
|
|
let result = tip.match(/::: tip(.*?)</)
|
|
let tipTitle = result[1] && result[1] !== "" ? result[1] : 'Tip'
|
|
let newTip = `<div class="mb-4 border-l-4 border-blue-500 bg-white dark:bg-gray-900 px-4 py-2 rounded-lg transition-shadow shadow-sm hover:shadow-xl">` + tip.replace(`::: tip${result[1]}`, `<div class="font-bold text-blue-500 mb-2">${tipTitle}</div>`) + `</div>`
|
|
newTip = newTip.replace(":::", "")
|
|
newTip = newTip.replace("<br>", "")
|
|
postContent = postContent.replace(tip, newTip)
|
|
})
|
|
|
|
if (warnings)
|
|
warnings.forEach(tip => {
|
|
let result = tip.match(/::: warning(.*?)</)
|
|
let tipTitle = result[1] && result[1] !== "" ? result[1] : 'Warning'
|
|
let newTip = `<div class="mb-4 border-l-4 border-yellow-500 bg-white dark:bg-gray-900 px-4 py-2 rounded-lg transition-shadow shadow-sm hover:shadow-xl">` + tip.replace(`::: warning${result[1]}`, `<div class="font-bold text-yellow-500 mb-2">${tipTitle}</div>`) + `</div>`
|
|
newTip = newTip.replace(":::", "")
|
|
newTip = newTip.replace("<br>", "")
|
|
postContent = postContent.replace(tip, newTip)
|
|
})
|
|
|
|
if (dangers)
|
|
dangers.forEach(tip => {
|
|
let result = tip.match(/::: danger(.*?)</)
|
|
let tipTitle = result[1] && result[1] !== "" ? result[1] : 'Danger'
|
|
let newTip = `<div class="mb-4 border-l-4 border-red-500 bg-white dark:bg-gray-900 px-4 py-2 rounded-lg transition-shadow shadow-sm hover:shadow-xl">` + tip.replace(`::: danger${result[1]}`, `<div class="font-bold text-red-500 mb-2">${tipTitle}</div>`) + `</div>`
|
|
newTip = newTip.replace(":::", "")
|
|
newTip = newTip.replace("<br>", "")
|
|
postContent = postContent.replace(tip, newTip)
|
|
})
|
|
|
|
if (details)
|
|
details.forEach(detail => {
|
|
let result = detail.match(/::: details(.*?)</)
|
|
let detailTitle = result[1] && result[1] !== "" ? result[1] : 'Details'
|
|
let newDetails = `<details class="mb-4 w-full max-w-full bg-white dark:bg-gray-900 px-4 py-2 rounded-lg transition-shadow shadow-sm hover:shadow-xl">` + detail.replace(`::: details${result[1]}`, `<summary class="font-bold text-blue-500 my-2">${detailTitle}</summary>`) + `</details>`
|
|
newDetails = newDetails.replace(":::", "")
|
|
postContent = postContent.replace(detail, newDetails)
|
|
})
|
|
|
|
Array.from(document.getElementsByClassName('post-content'))[0].innerHTML = postContent
|
|
</script>
|
|
</body>
|
|
|
|
</html> |