Skip to content

Commit 4b95969

Browse files
committed
adding products-based nav to Docs header
1 parent 38a8130 commit 4b95969

18 files changed

+303
-125
lines changed
Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,19 @@
11
{% raw %}
22
{%- if req.stripe.discount.active and not currentUser.hasPro -%}
3-
<div slot="banner" class="banner-wa-launch wa-dark">
4-
<div class="banner-content wa-split">
5-
<div class="wa-cluster wa-gap-s">
6-
<wa-icon name="badge-percent" class="banner-icon"></wa-icon>
3+
<div slot="banner" class="wrapper-banner">
4+
<wa-callout appearance="accent" variant="neutral" class="banner banner-wa-launch">
5+
<wa-icon slot="icon" family="duotone" name="badge-percent" class="banner-icon"></wa-icon>
6+
<div class="wa-split">
77
<p class="wa-body-s">
88
<strong style="margin-inline-end: var(--wa-space-2xs)">Web Awesome is here!</strong>
99
Celebrate with <span class="appearance-underlined variant-drawn">20% off</span> on a Web Awesome Pro plan&hellip; <span class="appearance-underlined variant-drawn">for life</span>!
1010
</p>
11+
<wa-button appearance="accent" variant="brand" size="small" href="/purchase" class="brand-font">
12+
<wa-icon slot="start" variant="regular" name="rocket-launch"></wa-icon>
13+
Get Pro + Save 20%
14+
</wa-button>
1115
</div>
12-
<wa-button appearance="outlined" variant="brand" size="small" href="/purchase" class="brand-font">
13-
<wa-icon slot="start" variant="regular" name="rocket-launch"></wa-icon>
14-
Get Pro + Save 20%
15-
</wa-button>
16-
</div>
16+
</wa-callout>
1717
</div>
1818
{%- endif -%}
1919
{% endraw %}

packages/webawesome/docs/_includes/base.njk

Lines changed: 24 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
{% if hasSiteDialog == undefined %}{% set hasSiteDialog = true %}{% endif %}
55
{% if hasGeneratedTitle == undefined %}{% set hasGeneratedTitle = true %}{% endif %}
66
<html lang="en" data-fa-kit-code="38c11e3f20" data-version="{{ package.version }}" class="wa-cloak" {% if
7-
hasAnchors==false %} data-no-anchor{% endif %}>
7+
hasAnchors == false %} data-no-anchor{% endif %}>
88
<head>
99
{% include 'head.njk' %}
1010
<meta name="theme-color" content="#f36944">
@@ -38,7 +38,7 @@
3838
'mobile-breakpoint': 1180, 'disable-sticky': 'banner' } %}
3939
{% set waPageAttributes = waPageAttributes or {} %}
4040
{% set mergedWaPageAttributes = defaultWaPageAttributes | merge(waPageAttributes) %}
41-
<wa-page {% for key, value in mergedWaPageAttributes %} {% if value !=null and value !=false %} {{ key
41+
<wa-page {% for key, value in mergedWaPageAttributes %} {% if value != null and value != false %} {{ key
4242
}}="{{ value }}" {% endif %} {% endfor %}>
4343
{# wa-page-based Skip to Content #}
4444
{% block pageSkipToContent %}{% endblock %}
@@ -53,28 +53,28 @@
5353

5454
{# wa-page-based Header #}
5555
{% block pageHeader %}
56-
<header slot="header" class="wa-split">
57-
{# Nav toggle #}
58-
<wa-button appearance="plain" size="small" data-toggle-nav>
59-
<wa-icon name="bars" label="Toggle navigation" class="icon-default icon-embiggen"></wa-icon>
60-
<wa-icon name="burger" aria-hidden="true" class="icon-hover icon-embiggen"></wa-icon>
61-
</wa-button>
56+
<header slot="header">
57+
{% include 'nav-products.njk' %}
6258

63-
{# Logo - Desktop #}
64-
<a href="/" class="brand-logo wa-desktop-only" aria-label="Web Awesome">{% include "logo.njk" %}</a>
59+
<div id="docs-header" class="wa-split">
60+
{% include "nav-docs.njk" %}
6561

66-
{# Logo - Mobile #}
67-
<a href="/" class="brand-logo wa-mobile-only" aria-label="Web Awesome">{% include "logo-simple.njk" %}</a>
62+
{# Nav toggle #}
63+
{% include "nav-toggle.njk" %}
6864

69-
<div id="docs-toolbar" class="wa-cluster gap-s">
70-
<div class="wa-desktop-only wa-cluster wa-gap-2xs">
71-
{% include "theme-selector.njk" %}
72-
{% include "color-scheme-selector.njk" %}
73-
{% include "github-icon-buttons.njk" %}
74-
</div>
65+
{# Logo - Mobile #}
66+
{% include "header-logo-simple.njk" %}
7567

76-
{#- Login -#}
77-
{% include "login-or-avatar.njk" ignore missing %}
68+
<div id="docs-toolbar" class="wa-cluster gap-s">
69+
<div class="header-toolbar wa-cluster wa-gap-2xs">
70+
{% include "theme-selector.njk" %}
71+
{% include "color-scheme-selector.njk" %}
72+
{% include "github-icon-buttons.njk" %}
73+
</div>
74+
75+
{#- Login -#}
76+
{% include "login-or-avatar.njk" ignore missing %}
77+
</div>
7878
</div>
7979
</header>
8080
{% endblock %}
@@ -87,11 +87,10 @@
8787
{# Sidebar - Mobile Selectors #}
8888
{% if hasSidebar %}
8989
<div class="wa-mobile-only" slot="navigation-header">
90-
<div class="wa-cluster wa-gap-s">
91-
<a href="/" class="logo-app" aria-label="Web Awesome">
92-
<wa-icon name="web-awesome" family="brands"></wa-icon>
93-
</a>
94-
<div class="wa-cluster wa-gap-2xs" style="flex-wrap: nowrap;">
90+
<div class="wa-split">
91+
{% include "nav-products-drawer.njk" %}
92+
93+
<div class="wa-cluster wa-gap-0 wa-flex-nowrap">
9594
{% include "theme-selector.njk" %}
9695
{% include "color-scheme-selector.njk" %}
9796
{% include "github-icon-buttons.njk" %}
Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
<a href="/" class="header-logo-simple" aria-label="Web Awesome" data-track-event="navigation:header_link_click" data-track-destination="home" data-track-context="mobile_header">
2+
<wa-icon name="web-awesome" family="brands" class="logo-web-awesome"></wa-icon>
3+
</a>
Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
<svg class="logo-svg awesome-logo logo-eleventy" width="72" height="16" viewBox="0 0 72 16" fill="none" xmlns="http://www.w3.org/2000/svg">
2+
<path class="logo-icon" fill="var(--logo-icon-fill, #00A776)" d="M6.30273 0C9.7837 0 12.6063 2.8218 12.6064 6.30273C12.6062 9.15809 10.3801 12.2213 7.92676 13.2305L8.6582 14.875C8.70355 14.9772 8.72754 15.0884 8.72754 15.2002C8.72722 15.6416 8.36915 15.9998 7.92773 16H4.67871C4.23712 16 3.87922 15.6417 3.87891 15.2002C3.87891 15.0884 3.90193 14.9772 3.94727 14.875L4.67773 13.2305C2.22488 12.2207 0.000235314 9.15757 0 6.30273C0.000159813 2.8219 2.8219 0.000163693 6.30273 0ZM5.42773 2.02734C3.52937 2.41446 2.07945 4.03288 1.94922 6.01367C1.9234 6.41404 2.22652 6.76072 2.62695 6.78711C3.02744 6.81331 3.37372 6.5088 3.40039 6.1084C3.48718 4.7909 4.45353 3.71115 5.71777 3.45312C6.11103 3.37285 6.36498 2.98801 6.28516 2.59473C6.20482 2.20144 5.82108 1.94736 5.42773 2.02734Z"/>
3+
<path class="logo-text" fill-rule="evenodd" clip-rule="evenodd" fill="var(--logo-text-fill, #183153)" d="M71.8825 6.33534C71.8825 6.50201 71.8389 6.65113 71.7341 6.8178L70.2233 9.32656V10.8616C70.2233 11.3002 69.9001 11.6248 69.4722 11.6248C69.0443 11.6248 68.7212 11.3002 68.7212 10.8616V9.32656L67.2104 6.8178C67.1056 6.65113 67.062 6.50201 67.062 6.33534C67.062 5.93183 67.3763 5.62482 67.7868 5.62482C68.1012 5.62482 68.3282 5.76517 68.4854 6.06341L69.4722 7.85288L70.4591 6.06341C70.6162 5.77394 70.8433 5.62482 71.1577 5.62482C71.5681 5.62482 71.8825 5.93183 71.8825 6.33534Z M62.7576 11.6248C62.3297 11.6248 62.0066 11.3003 62.0066 10.8617V7.08975H60.88C60.487 7.08975 60.1901 6.80027 60.1901 6.40554C60.1901 6.01958 60.487 5.7301 60.88 5.7301H64.6352C65.0369 5.7301 65.3251 6.01958 65.3251 6.40554C65.3251 6.80027 65.0282 7.08975 64.6352 7.08975H63.5086V10.8617C63.5086 11.3003 63.1855 11.6248 62.7576 11.6248Z M57.4755 5.62482C57.9034 5.62482 58.2266 5.94938 58.2266 6.38797V10.8616C58.2266 11.2915 57.9122 11.6248 57.493 11.6248C57.0825 11.6248 56.9166 11.388 56.7158 11.1423L54.6199 8.53709V10.8616C54.6199 11.3002 54.2967 11.6248 53.8688 11.6248C53.4409 11.6248 53.1178 11.3002 53.1178 10.8616V6.38797C53.1178 5.95815 53.4322 5.62482 53.8514 5.62482C54.2618 5.62482 54.4277 5.86166 54.6286 6.10727L56.7245 8.70376V6.38797C56.7245 5.94938 57.0476 5.62482 57.4755 5.62482Z M47.4486 11.5196C47.012 11.5196 46.6889 11.195 46.6889 10.7564V6.49326C46.6889 6.05466 47.012 5.7301 47.4486 5.7301H50.086C50.4877 5.7301 50.7759 6.01958 50.7759 6.40554C50.7759 6.80027 50.479 7.08975 50.086 7.08975H48.1909V7.88799H49.3961C49.7629 7.88799 50.0336 8.15992 50.0336 8.51957C50.0336 8.87922 49.7629 9.15114 49.3961 9.15114H48.1909V10.1599H50.1908C50.5925 10.1599 50.8807 10.4494 50.8807 10.8354C50.8807 11.2301 50.5838 11.5196 50.1908 11.5196H47.4486Z M43.7008 5.62482C44.1288 5.62482 44.4431 5.93183 44.4431 6.34411C44.4431 6.47569 44.4169 6.61604 44.3645 6.71253L42.5568 11.1248C42.4171 11.4581 42.1813 11.6248 41.8407 11.6248C41.5002 11.6248 41.2644 11.4581 41.1246 11.1248L39.3169 6.71253C39.2645 6.61604 39.2383 6.47569 39.2383 6.34411C39.2383 5.93183 39.5527 5.62482 39.9806 5.62482C40.3037 5.62482 40.5483 5.80903 40.688 6.16868L41.8407 9.05463L42.9935 6.16868C43.1332 5.80903 43.3777 5.62482 43.7008 5.62482Z M33.8574 11.5196C33.4207 11.5196 33.0976 11.195 33.0976 10.7564V6.49326C33.0976 6.05466 33.4207 5.7301 33.8574 5.7301H36.4947C36.8964 5.7301 37.1846 6.01958 37.1846 6.40554C37.1846 6.80027 36.8877 7.08975 36.4947 7.08975H34.5997V7.88799H35.8048C36.1716 7.88799 36.4423 8.15992 36.4423 8.51957C36.4423 8.87922 36.1716 9.15114 35.8048 9.15114H34.5997V10.1599H36.5995C37.0012 10.1599 37.2894 10.4494 37.2894 10.8354C37.2894 11.2301 36.9925 11.5196 36.5995 11.5196H33.8574Z M27.7951 11.5195C27.3585 11.5195 27.0354 11.195 27.0354 10.7564V6.38797C27.0354 5.99324 27.3498 5.62482 27.7864 5.62482C28.223 5.62482 28.5374 5.94938 28.5374 6.38797V10.1599H30.3277C30.7207 10.1599 31.0088 10.4494 31.0088 10.8441C31.0088 11.2388 30.7207 11.5195 30.3277 11.5195H27.7951Z M21.3662 11.5196C20.9295 11.5196 20.6064 11.195 20.6064 10.7564V6.49326C20.6064 6.05466 20.9295 5.7301 21.3662 5.7301H24.0035C24.4052 5.7301 24.6934 6.01958 24.6934 6.40554C24.6934 6.80027 24.3965 7.08975 24.0035 7.08975H22.1085V7.88799H23.3136C23.6804 7.88799 23.9511 8.15992 23.9511 8.51957C23.9511 8.87922 23.6804 9.15114 23.3136 9.15114H22.1085V10.1599H24.1083C24.51 10.1599 24.7982 10.4494 24.7982 10.8354C24.7982 11.2301 24.5013 11.5196 24.1083 11.5196H21.3662Z"/>
4+
</svg>
Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
<svg class="logo-svg awesome-logo logo-font-awesome" fill="none" height="16" viewBox="0 0 105 16" width="105" xmlns="http://www.w3.org/2000/svg"><path class="logo-text" fill-rule="evenodd" clip-rule="evenodd" fill="var(--logo-text-fill, #183153)" d="m78.0517 10.8597c.4123.3859 1.1755.6403 1.8158.6403 1.193 0 2.1228-.6667 2.1228-1.80699 0-.85086-.5176-1.34208-1.4825-1.74558l-.6666-.28069c-.3597-.14912-.5-.25439-.5-.47368 0-.26315.2193-.36841.5175-.36841.3103 0 .4789.13042.6334.24993.0376.02912.0744.05762.1122.08339.1316.09649.2632.13158.386.13158.3333 0 .6754-.28947.6754-.67542 0-.14035-.0438-.29824-.1754-.44736-.1404-.16667-.6316-.67543-1.6491-.66666-1.1491 0-2.0263.67543-2.0263 1.71049 0 .81578.5439 1.34208 1.4649 1.74558l.5965.26316c.4035.17543.5877.26315.5877.53507 0 .28069-.193.42109-.5965.42109-.5033 0-.8428-.27906-1.0186-.42349-.0356-.02926-.0645-.053-.0866-.06777-.1053-.07017-.2281-.10526-.3421-.10526-.3421 0-.6667.26315-.6755.66662 0 .2281.1141.4298.307.6141z M97.9115 6.2808c0-.44736-.3158-.78068-.7543-.78069-.307 0-.5176.14913-.7632.55263l-1.4298 2.2982-1.4298-2.2982c-.2456-.40351-.4561-.55263-.7631-.55263-.4386 0-.7544.33333-.7544.78069v4.4561c0 .4385.3246.7631.7544.7631s.7544-.3246.7544-.7631v-2.02632l.7543 1.20173c.2106.33329.4035.46489.6842.46489s.4737-.1316.6842-.46489l.7544-1.20173v2.02632c0 .4385.3245.7631.7544.7631.4298 0 .7543-.3246.7543-.7631z M100.516 10.6316c0 .4386.324.7631.763.7631h2.754c.395 0 .693-.2894.693-.6842 0-.3859-.289-.6754-.693-.6754h-2.009v-1.00873h1.211c.368 0 .64-.27192.64-.63157 0-.35964-.272-.63156-.64-.63156h-1.211v-.79823h1.904c.395 0 .693-.28947.693-.6842 0-.38596-.29-.67542-.693-.67542l-2.649-.00001c-.439 0-.763.32456-.763.76315z M86.8778 5.50011c1.7544 0 3.1316 1.32454 3.1316 2.99995 0 1.68414-1.3772 2.99994-3.1316 2.99994-1.7543 0-3.1139-1.3158-3.1139-2.99994 0-1.68418 1.3684-2.99995 3.1139-2.99995zm.0088 1.38594c-.9386 0-1.5789.65788-1.5789 1.61401 0 .96489.6316 1.61404 1.5789 1.61404.9298 0 1.5789-.66669 1.5789-1.61404 0-.93858-.6579-1.61401-1.5789-1.61401z M72.1721 11.3947c-.4386 0-.7632-.3245-.7632-.7631v-4.26308c0-.43859.3246-.76314.7632-.76314h2.649c.4035 0 .693.28947.693.67542 0 .39473-.2982.6842-.693.6842h-1.9034v.79823h1.2105c.3684 0 .6403.27192.6403.63157 0 .35964-.2719.63156-.6403.63156h-1.2105v1.00874h2.0087c.4035 0 .693.2895.693.6754 0 .3948-.2983.6842-.693.6842z M69.4429 6.23694c.0001-.4035-.342-.73682-.7543-.73682-.3246 0-.5877.1842-.7018.49999l-1.0438 2.85959-.9649-2.78942c-.1316-.36841-.3947-.57017-.7456-.57017s-.614.20176-.7456.57017l-.9649 2.78942-1.0526-2.88591c-.1053-.29824-.3684-.47368-.693-.47368-.4122 0-.7543.33333-.7543.73683 0 .10526.0175.20175.0789.3421l1.7105 4.41216c.1228.3334.3684.5088.7017.5088.3246 0 .5702-.1754.693-.5088l1.0263-2.78061 1.0263 2.78061c.1228.3334.3684.5088.693.5088.3333 0 .5789-.1754.7017-.5088l1.7105-4.41216c.0526-.13157.0789-.22806.0789-.3421z M60.0269 10.4123c.0526.1316.0789.2632.0789.3684 0 .4123-.3157.7193-.7456.7193-.3245 0-.5701-.1842-.7105-.5439l-.1228-.307h-2.0701l-.1228.307c-.1404.3597-.386.5439-.7105.5439-.4299 0-.7456-.307-.7456-.7193 0-.1052.0263-.2368.0789-.3684l1.8158-4.4122c.1315-.32455.3772-.49999.7193-.49999s.5877.17544.7192.5zm-2.535-2.66662-.5878 1.69295h1.1755z M35.9373 8.50006c0-1.67541-1.3771-2.99995-3.1315-2.99995-1.7456 0-3.114 1.31577-3.114 2.99995 0 1.68414 1.3597 2.99994 3.114 2.99994 1.7544 0 3.1315-1.3158 3.1315-2.99994zm-4.7016 0c0-.95613.6403-1.61401 1.5789-1.61401.921 0 1.5789.67543 1.5789 1.61401 0 .94735-.6491 1.61404-1.5789 1.61404-.9474 0-1.5789-.64915-1.5789-1.61404z M42.322 5.50011c.4298 0 .7544.32456.7544.76315v4.47364c0 .4298-.3158.7631-.7369.7631-.3875 0-.558-.2093-.7447-.4385l-.0359-.0439-2.1053-2.60526v2.32456c0 .4385-.3245.7631-.7543.7631-.4299 0-.7544-.3246-.7544-.7631v-4.47364c0-.42982.3158-.76315.7368-.76315.3876 0 .5581.20932.7448.43846l.0359.04399 2.1052 2.59644v-2.31574c0-.43859.3246-.76315.7544-.76315z M47.6275 11.5c-.4298 0-.7543-.3246-.7543-.7631v-3.7719h-1.1316c-.3947 0-.693-.28947-.693-.6842 0-.38595.2983-.67542.693-.67542h3.7719c.4035 0 .6929.28947.6929.67542 0 .39473-.2982.6842-.6929.6842h-1.1316v3.7719c0 .4385-.3245.7631-.7544.7631z M24.7544 11.5c-.4386 0-.7544-.3246-.7544-.7632v-4.36829c0-.43859.3246-.76314.7631-.76314h2.5614c.4035 0 .693.28947.693.67543 0 .39472-.2983.68419-.693.68419h-1.8158v1.10524h1.3597c.4035 0 .6929.28947.6929.67543 0 .39473-.2982.6842-.6929.6842h-1.3597v1.30694c0 .4386-.3157.7632-.7543.7632z"/><path class="logo-icon" d="m2.86642 3c.45582-.28783.75858-.79606.75858-1.375 0-.897463-.72754-1.625-1.625-1.625s-1.625.727537-1.625 1.625c0 .52033.244558.98354.625 1.28096v13.09404h2v-2h11.6751c.4556 0 .8249-.3693.8249-.8249 0-.1155-.0242-.2296-.0711-.3351l-1.9289-4.34 1.9289-4.34002c.0469-.10548.0711-.21962.0711-.33504 0-.4556-.3693-.82494-.8249-.82494z" fill="var(--logo-icon-fill, #418fde)"/></svg>

0 commit comments

Comments
 (0)