-
-
Notifications
You must be signed in to change notification settings - Fork 708
Expand file tree
/
Copy pathheader.njk
More file actions
113 lines (102 loc) · 6.67 KB
/
header.njk
File metadata and controls
113 lines (102 loc) · 6.67 KB
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
<header class="elv-header{% if headerClass %} {{ headerClass }}{% endif %}">
<div class="announcement"><a href="{{ config.kickstarterUrl }}">{% include "components/ba-balloon.svg" %}<span>Back the Build Awesome Kickstarter!</span></a></div>
<div class="elv-menu">
<active-background>
<ul class="elv-nav-menu list-bare fl fl-inline fl-nowrap">
<li><a href="/" class="elv-nav-menu-logo"><i class="fa-brands fa-eleventy"></i><span class="sr-only">11ty</span></a></li>
<li><a href="/docs/">Get Started</a></li>
<li><a href="/blog/">Blog</a></li>
<li><a href="/docs/community/">Community</a></li>
{# <li><a href="/firehose/">Firehose</a></li> #}
{# <li><a href="https://conf.11ty.dev/" class= elv-externalexempt">Conference</a></li> #}
{# <li><a href="https://merch.11ty.dev/products/11ty-merch-bundle-2024-limited-edition" class="elv-externalexempt">Merch</a></li> #}
<li>
<details-utils close-click-outside close-esc>
<details class="elv-popover">
<summary>Versions</summary>
<div>
<ul class="list-bare">
<li><a href="/docs/" class="elv-externalexempt"><code>v3</code> <small>Stable</small></a></li>
<li><a href="https://v2.11ty.dev/docs/" class="elv-externalexempt"><code>v2</code></a></li>
<li><a href="https://v1.11ty.dev/docs/" class="elv-externalexempt"><code>v1</code></a></li>
<li><a href="https://v0.11ty.dev/docs/" class="elv-externalexempt"><code>v0</code></a></li>
<li><a href="/docs/versions/" class="elv-externalexempt">History</a></li>
<li><a href="/firehose/" class="elv-externalexempt">Firehose</a></li>
</dl>
</div>
</details>
</details-utils>
</li>
<li class="util-grow">
<disabled-form>
<form action="/docs/search/" class="util-stack">
<label>
<span class="sr-only">Search</span>
<input type="search" name="q" placeholder="Search…" value="" disabled>
</label>
<button type="submit" disabled><i class="fa-solid fa-magnifying-glass"></i><span class="sr-only">Search</span></button>
</form>
</disabled-form>
</li>
{# <li class="spacer" aria-hidden="true"></li> #}
{# <li><a href="/blog/feed.xml" class="nound elv-externalexempt elv-nav-sociallink"><i class="fa-solid fa-square-rss"></i><span class="elv-nav-sociallink-text">Feed</span></a></li> #}
<li><a href="https://github.com/11ty/eleventy/" class="elv-skipicon"><i class="fa-brands fa-github" style="font-size: .9em"></i>GitHub</a></li>
{# <li><a href="https://www.npmjs.com/org/11ty" class="nound elv-externalexempt elv-nav-sociallink"><i class="fa-brands fa-npm fa11ty-npm"></i><span class="sr-only">npm</span></a></li> #}
<li data-active-background="rgba(255,0,51,.35)"><a href="https://www.youtube.com/c/EleventyVideo" class="nound elv-externalexempt elv-nav-sociallink"><i class="fa-brands fa-youtube"></i><span class="sr-only">YouTube</span></a></li>
<li data-active-background="rgba(123,104,218,.35)"><a href="https://neighborhood.11ty.dev/@11ty" class="nound elv-nav-sociallink"><i class="fa-brands fa-mastodon"></i><span class="sr-only">Mastodon</span></a></li>
<li data-active-background="rgba(18,133,254,.35)"><a href="https://bsky.app/profile/11ty.dev" class="nound elv-nav-sociallink"><i class="fa-brands fa-bluesky"></i><span class="sr-only">Bluesky</span></a></li>
<li data-active-background="rgba(88,101,242,.35)"><a href="/blog/discord/" class="nound elv-nav-sociallink"><i class="fa-brands fa-discord"></i><span class="sr-only">Discord</span></a></li>
<li data-active-background="rgba(83,140,215,.35)"><a href="https://fontawesome.com/" class="nound elv-nav-sociallink"><i class="fa-brands fa-font-awesome"></i><span class="sr-only">Font Awesome</span></a></li>
</ul>
</active-background>
</div>
<div class="elv-nav-header">
{%- if not isDocs %}
<wa-comparison position="5">
<a class="elv-hero elv-externalexempt" style="--stripe-color-1: #00A776;--stripe-color-2: #00A776;" slot="before" href="{{ config.kickstarterUrl }}">
<div class="elv-hero-ba">
{% include "components/ba-balloon.svg" %}
{% include "components/build-awesome.svg" %}
<span class="sr-only">Build Awesome</span>
<img src="/img/mascots/ba-didelphis-awesomenicus.svg" alt="A cartoon possum wearing a green tshirt with a balloon logo on front" class="elv-mascot-image">
</div>
</a>
<a class="elv-hero" slot="after" href="{% if page.url === '/' %}/docs/{% else %}/{% endif %}">
<i class="elv-hero-11ty fa-brands fa-eleventy"></i><span class="sr-only">Eleventy</span>
</a>
<i class="fa-solid fa-grip-vertical" slot="handle"></i>
</wa-comparison>
{%- endif %}
<is-land class="elv-possum-island" on:visible on:idle on:load on:save-data="false" on:media="(prefers-reduced-motion: no-preference)">
<template data-island>
<a href="{{ config.kickstarterUrl }}" class="elv-possum-anchor elv-externalexempt">
<div class="elv-possum-pic">
<img src="/img/mascots/awesome-possum-balloon-smile-sm.svg" alt="The possum is Eleventy’s mascot" {% if isDocs %}eleventy:widths="222"{% else %}eleventy:widths="222,350" sizes="20vh"{% endif %} class="elv-possum" loading="eager">
</div>
</a>
</template>
</is-land>
</div>
<wa-dialog id="promo-dialog" class="promo-dialog" light-dismiss>
<iframe class="video-player" src="https://player.vimeo.com/video/1168551192?h=6ba669b3ff&badge=0&autopause=0&player_id=0&app_id=58479" frameborder="0" allow="autoplay; fullscreen; picture-in-picture; clipboard-write; encrypted-media; web-share" referrerpolicy="strict-origin-when-cross-origin" title="Now on Kickstarter: Build Awesome — Collaborate on Web Sites That Last"></iframe>
<p class=""><strong>The same static site generator you know and love, now with endless Pro 'possum-bilities. But just like other parts of the Awesomeverse, Build Awesome will continue to be free and open source.</strong></p>
<wa-button slot="footer" variant="brand" href="{{ config.kickstarterUrl }}">Support the Kickstarter!</wa-button>
</wa-dialog>
<button id="reset-promo-dialog" onclick="localStorage.removeItem('ba-promo-dialog'); location.reload();">Reset Promo Dialog</button>
</header>
<script type="module">
if (!localStorage.getItem('ba-promo-dialog')) {
// Wait for Web Awesome kit to load and register components
try {
await customElements.whenDefined('wa-dialog');
const dialog = document.querySelector('#promo-dialog');
dialog.open = true;
// Save to localStorage when dialog is closed
dialog.addEventListener('wa-hide', () => {
localStorage.setItem('ba-promo-dialog', 'closed');
}, { once: true });
} catch (error) {
console.error('Error loading dialog:', error);
}
}
</script>