ghost-theme/default.hbs at master · beevk/ghost-theme · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
<!DOCTYPE html>
<html lang="{{@site.locale}}"{{#match @custom.color_scheme "Dark"}} class="dark"{{/match}}>
<head>
    {{!-- Document Settings --}}
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />

    {{!-- Page Meta --}}
    <title>{{meta_title}}</title>

    {{!-- Mobile Meta --}}
    <meta name="HandheldFriendly" content="True" />
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <script>
    {{#match @custom.color_scheme "Auto"}}
        if (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
			document.querySelector('html').classList.add('dark');
			localStorage.theme = 'dark';
		} else {
			document.querySelector('html').classList.remove('dark');
			localStorage.theme = '';
		}

		window.matchMedia('(prefers-color-scheme: dark)')
		.addEventListener(
			'change',
			function (e) {
				if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
					document.querySelector('html').classList.add('dark');
					localStorage.theme = 'dark';
				} else {
					document.querySelector('html').classList.remove('dark');
					localStorage.theme = '';
				}
			}
		)

    {{else}}
        if (localStorage.theme === 'dark') {
            document.querySelector('html').classList.add('dark');
        } else if (localStorage.theme === 'light') {
            document.querySelector('html').classList.remove('dark');
        }
    {{/match}}
    </script>

    {{!-- Fonts -> Inter=400,500,600,700 PT Serift=400,700 --}}
    <link rel="preload" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=PT+Serif:ital,wght@0,400;0,700;1,400&display=swap" as="style" onload="this.onload=null;this.rel='stylesheet'"/>
    <noscript><link rel="preconnect" href="https://fonts.gstatic.com"><link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=PT+Serif:ital,wght@0,400;0,700;1,400&display=swap" rel="stylesheet"></noscript>
    {{!-- <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=PT+Serif:ital,wght@0,400;0,700;1,400&display=swap" rel="stylesheet"> --}}

    {{!-- Styles --}}
    <link rel="stylesheet" type="text/css" href="{{asset "styles/main.css"}}"/>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tocbot/4.18.2/tocbot.css" />
    {{!-- <style>{{> "main-styles"}}</style> --}}

    {{!-- Ghost outputs important style and meta data with this tag --}}
    {{ghost_head}}

    {{!-- Block for Headers --}}
    {{{block "header"}}}

    <!-- Google Tag Manager -->
    <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
    new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
    j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
    'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
    })(window,document,'script','dataLayer','GTM-TR8NBZC3');</script>
    <!-- End Google Tag Manager -->
</head>
<body class="{{block "special_body_class"}}">
    <div class="simply-viewport flex flex-col justify-start">
        {{!-- Header Content with User Account ./partials/layout/header-user-account.hbs --}}
        {{#match @custom.header "Default"}}{{> "layout/header"}}{{/match}}

        {{!-- Header With Drop Down --}}
        {{#match @custom.header "Drop Down Menu"}}{{> "layout/header" hasDropDown=true}}{{/match}}

        {{!-- All the main content gets inserted here, index.hbs, post.hbs, etc --}}
        <main class="simply-main relative min-h-lg">{{{body}}}</main>

        {{!-- Footer Default ./partials/layout/footer.hbs --}}
        {{#match @custom.footer "Default"}}{{>"layout/footer"}}{{/match}}

        {{!-- Footer - Dark ./partials/layout/footer-dark.hbs --}}
        {{#match @custom.footer "Dark"}}{{>"layout/footer-dark"}}{{/match}}

        {{!-- Footer Not Menu ./partials/layout/footer-not-menu.hbs --}}
        {{#match @custom.footer "No Secondary Navigation"}}{{>"layout/footer-not-menu"}}{{/match}}
    </div>

    {{!-- Loandig Bar --}}
    <div class="loadingBar top-0 fixed right-0 left-0 hidden"></div>

    {{!-- Icons --}}
    {{> "icons/icons-symbol-defs"}}

    {{!-- Scripts URL --}}
    <script>
        var prismJs = '{{asset "scripts/prismjs.js"}}';
        var prismJsComponents = 'https://cdnjs.cloudflare.com/ajax/libs/prism/1.28.0/components/';
    </script>

    {{!-- Ghost outputs important scripts and data with this tag --}}
    {{ghost_foot}}

    {{!-- script --}}
    {{{block "scripts"}}}

    {{!-- Main scripts --}}
    <script src="{{#is "post, page"}}{{asset "scripts/post.js"}}{{else}}{{asset "scripts/main.js"}}{{/is}}"></script>
    {{!-- <script src="{{#is "post, page"}}{{asset "scripts/toc.js"}}{{/is}}"></script> --}}

    {{!-- Pagination Infinite Scroll --}}
    {{#match @custom.pagination "Infinite Scroll"}}{{#if pagination.next}}<script src="{{asset "scripts/pagination.js"}}" defer async></script>{{/if}}{{/match}}

    <!-- Google Tag Manager (noscript) -->
    <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-TR8NBZC3"
    height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
    <!-- End Google Tag Manager (noscript) -->
</body>
</html>