Skip to content

Commit 136b270

Browse files
bart-krakowskijedrzejchalubek
bart-krakowski
authored and
jedrzejchalubek
committed
feat(): Introduce destinations catalog (#102)
1 parent fada6c0 commit 136b270

File tree

16 files changed

+418
-74
lines changed

16 files changed

+418
-74
lines changed

‎js/dropdown-menu/index.js

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
const COMPONENT_SELECTOR = '[data-dropdown-menu]'
2+
const DROPDOWN_HEAD = '[data-ref="dropdown-menu[head]"]'
3+
const DROPDOWN_HEAD_INNER = '[data-ref="dropdown-menu[head-inner]"]'
4+
const DROPDOWN_BODY = '[data-ref="dropdown-menu[body]"]'
5+
const DROPDOWN_LINK = '[data-ref="dropdown-menu[link]"]'
6+
const ACTIVE_CLASS_ATTR = 'data-active-class'
7+
8+
export default function () {
9+
const components = document.querySelectorAll(COMPONENT_SELECTOR)
10+
11+
components.forEach(component => {
12+
const dropdownHeadInner = component.querySelector(DROPDOWN_HEAD_INNER)
13+
14+
const dropdownHead = component.querySelector(DROPDOWN_HEAD)
15+
const dropdownHeadActive = dropdownHead.getAttribute(ACTIVE_CLASS_ATTR)
16+
17+
const dropdownBody = component.querySelector(DROPDOWN_BODY)
18+
const dropdownBodyActive = dropdownBody.getAttribute(ACTIVE_CLASS_ATTR)
19+
20+
const links = component.querySelectorAll(DROPDOWN_LINK)
21+
22+
dropdownHead.addEventListener('click', () => {
23+
dropdownHead.classList.toggle(dropdownHeadActive)
24+
dropdownBody.classList.toggle(dropdownBodyActive)
25+
})
26+
27+
links.forEach(link => {
28+
link.addEventListener('click', () => {
29+
dropdownHeadInner.innerHTML = link.innerHTML
30+
31+
dropdownHead.classList.remove(dropdownHeadActive)
32+
dropdownBody.classList.remove(dropdownBodyActive)
33+
})
34+
})
35+
})
36+
}

‎js/index.js

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,13 @@
1-
import './track/menu'
1+
// import './track/menu'
22

33
import feedback from './feedback'
44
import accordion from './accordion'
55
import searchNavbar from './search-navbar'
66
import headingsAnchors from './headings-anchors'
7+
import dropdownMenu from './dropdown-menu'
78

89
feedback()
910
accordion()
1011
searchNavbar()
1112
headingsAnchors()
13+
dropdownMenu()

‎src/_includes/sidebar/destinations-menu-mobile.html

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
{% assign destination_categories = site.data.catalog.destinations.destinations | group_by:"categories.primary" | sort: "name" %}
2+
3+
<div class="destination-menu-mobile" data-dropdown-menu>
4+
<div class="destination-menu-mobile__select" data-ref="dropdown-menu[head]" data-active-class="destination-menu-mobile__select--active">
5+
<div class="destination-menu-mobile__select-inner">
6+
<span class="flex flex--middle" data-ref="dropdown-menu[head-inner]">
7+
Choose category
8+
</span>
9+
10+
<svg viewBox="0 0 8 5" xmlns="http://www.w3.org/2000/svg" class="destination-menu-mobile__select-arrow">
11+
<path d="M1 1l3 3 3-3" stroke="#A5B0BA" stroke-width="2" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"/>
12+
</svg>
13+
</div>
14+
</div>
15+
16+
<ul class="destination-menu-mobile__list list list--unstyle" data-ref="dropdown-menu[body]" data-active-class="destination-menu-mobile__list--active">
17+
{% for category in destination_categories %}
18+
{% assign category_name_size = category.name | size %}
19+
{% if category_name_size != 0 %}
20+
{% assign category_icon = category.name | slugify %}
21+
<li class="destination-menu-mobile__item" >
22+
<a class="destination-menu-mobile__link" href="#{{ category.name }}" title="{{ category.name }}" data-ref="dropdown-menu[link]" >
23+
<span class="destination-menu-mobile__icon">
24+
{% include icons/destinations-catalog/{{ category_icon }}.svg %}
25+
</span>
26+
{{ category.name }}
27+
</a>
28+
</li>
29+
30+
{% endif %}
31+
{% endfor %}
32+
</ul>
33+
</div>

‎src/_includes/sidebar/destinations-menu.html

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
{% assign destination_categories = site.data.catalog.destinations.destinations | group_by:"categories.primary" | sort: "name" %}
2+
3+
<div class="destination-menu">
4+
<ul class="destination-menu__list list list--unstyle">
5+
{% for category in destination_categories %}
6+
{% assign category_name_size = category.name | size %}
7+
{% if category_name_size != 0 %}
8+
{% assign category_icon = category.name | slugify %}
9+
<li class="destination-menu__item">
10+
<a class="destination-menu__link" href="#{{ category.name }}" title="{{ category.name }}">
11+
{% include icons/destinations-catalog/{{ category_icon }}.svg %}
12+
{{ category.name }}
13+
</a>
14+
</li>
15+
{% endif %}
16+
{% endfor %}
17+
</ul>
18+
</div>

‎src/_layouts/default.html

Lines changed: 2 additions & 70 deletions
Original file line numberDiff line numberDiff line change
@@ -42,78 +42,10 @@
4242
<meta charset="utf-8">
4343
<meta http-equiv="X-UA-Compatible" content="IE=edge">
4444
<meta name="viewport" content="width=device-width, initial-scale=1">
45-
<link rel="stylesheet" href="{{ "/assets/main.css" | relative_url }}">
45+
<link rel="stylesheet" href="{{ '/assets/main.css' | relative_url }}">
4646

4747
<body>
48-
<div class="docs">
49-
<div class="stage">
50-
<div class="docs__aside stage__aside">
51-
{% include navbar/logo.html %}
52-
53-
{% include menu/menu.html %}
54-
</div>
55-
56-
<main class="docs__body stage__body">
57-
<div>
58-
<div class="search">
59-
{% include navbar/search.html %}
60-
</div>
61-
62-
<nav class="navbar-mobile" data-search-navbar data-active-class="navbar-mobile--active">
63-
<div class="flex flex--middle">
64-
<div class="flex__column">
65-
{% include navbar/logo.html %}
66-
</div>
67-
68-
<div class="flex__column flex__column--shrink">
69-
<div class="flex flex--medium gutter gutter--large">
70-
<div class="flex__column">
71-
<button class="search-button" data-ref="search-navbar[trigger]">
72-
{% include icons/symbols/search.svg %}
73-
</button>
74-
</div>
75-
76-
<div class="flex__column">
77-
<button class="menu-button">
78-
<span class="menu-button__line"></span>
79-
</button>
80-
</div>
81-
</div>
82-
</div>
83-
</div>
84-
85-
<div class="navbar-mobile__search">
86-
{% include navbar/search.html %}
87-
</div>
88-
</nav>
89-
</div>
90-
91-
<div class="stage__content">
92-
{{ content }}
93-
</div>
94-
</main>
95-
96-
<div class="docs__sidebar stage__sidebar">
97-
{% include navbar/nav.html %}
98-
99-
<div class="sidebar sidebar--sticky">
100-
{%- unless page.hide_toc -%}
101-
<div data-menu-side>
102-
{% include sidebar/menu-side.html class="menu-side" anchor_class="menu-side__link" html=content h_min=2 h_max=2 %}
103-
</div>
104-
{%- endunless -%}
105-
106-
{% if page.feedback != false %}
107-
{% include sidebar/feedback.html %}
108-
{% endif %}
109-
</div>
110-
</div>
111-
</div>
112-
113-
<footer>
114-
{% include components/footer.html %}
115-
</footer>
116-
</div>
48+
{{ content }}
11749

11850
<div id="consent-manager"></div>
11951

‎src/_layouts/destinations.html

Lines changed: 81 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,81 @@
1+
---
2+
layout: default
3+
---
4+
5+
<div class="docs">
6+
<div class="stage">
7+
<div class="docs__aside stage__aside">
8+
{% include navbar/logo.html %}
9+
10+
{% include menu/menu.html %}
11+
</div>
12+
13+
<main class="docs__body stage__body">
14+
<div>
15+
<div class="search">
16+
{% include navbar/search.html %}
17+
</div>
18+
19+
<nav class="navbar-mobile" data-search-navbar data-active-class="navbar-mobile--active">
20+
<div class="flex flex--middle">
21+
<div class="flex__column">
22+
{% include navbar/logo.html %}
23+
</div>
24+
25+
<div class="flex__column flex__column--shrink">
26+
<div class="flex flex--medium gutter gutter--large">
27+
<div class="flex__column">
28+
<button class="search-button" data-ref="search-navbar[trigger]">
29+
{% include icons/symbols/search.svg %}
30+
</button>
31+
</div>
32+
33+
<div class="flex__column">
34+
<button class="menu-button">
35+
<span class="menu-button__line"></span>
36+
</button>
37+
</div>
38+
</div>
39+
</div>
40+
</div>
41+
42+
<div class="navbar-mobile__search">
43+
{% include navbar/search.html %}
44+
</div>
45+
</nav>
46+
</div>
47+
48+
49+
<div class="stage__content">
50+
<article class="destinations">
51+
{% include components/breadcrumbs.html %}
52+
53+
{%- if page.title -%}
54+
<h1 id="{{ page.title | downcase }}" class="destinations__heading">
55+
{{ page.title }}
56+
</h1>
57+
{%- endif -%}
58+
59+
{% include sidebar/destinations-menu-mobile.html %}
60+
61+
<div class="destinations__body markdown">
62+
{{ content }}
63+
</div>
64+
</article>
65+
</div>
66+
</main>
67+
68+
<div class="docs__sidebar stage__sidebar">
69+
{% include navbar/nav.html %}
70+
71+
<div class="sidebar sidebar--sticky">
72+
{% include sidebar/destinations-menu.html %}
73+
{% include sidebar/feedback.html %}
74+
</div>
75+
</div>
76+
</div>
77+
78+
<footer>
79+
{% include components/footer.html %}
80+
</footer>
81+
</div>

‎src/_layouts/home.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
---
2-
layout: default
2+
layout: main
33
---
44

55
<article class="home page">

‎src/_layouts/main.html

Lines changed: 73 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
---
2+
layout: default
3+
---
4+
5+
<div class="docs">
6+
<div class="stage">
7+
<div class="docs__aside stage__aside">
8+
{% include navbar/logo.html %}
9+
10+
{% include menu/menu.html %}
11+
</div>
12+
13+
<main class="docs__body stage__body">
14+
<div>
15+
<div class="search">
16+
{% include navbar/search.html %}
17+
</div>
18+
19+
<nav class="navbar-mobile" data-search-navbar data-active-class="navbar-mobile--active">
20+
<div class="flex flex--middle">
21+
<div class="flex__column">
22+
{% include navbar/logo.html %}
23+
</div>
24+
25+
<div class="flex__column flex__column--shrink">
26+
<div class="flex flex--medium gutter gutter--large">
27+
<div class="flex__column">
28+
<button class="search-button" data-ref="search-navbar[trigger]">
29+
{% include icons/symbols/search.svg %}
30+
</button>
31+
</div>
32+
33+
<div class="flex__column">
34+
<button class="menu-button">
35+
<span class="menu-button__line"></span>
36+
</button>
37+
</div>
38+
</div>
39+
</div>
40+
</div>
41+
42+
<div class="navbar-mobile__search">
43+
{% include navbar/search.html %}
44+
</div>
45+
</nav>
46+
</div>
47+
48+
<div class="stage__content">
49+
{{ content }}
50+
</div>
51+
</main>
52+
53+
<div class="docs__sidebar stage__sidebar">
54+
{% include navbar/nav.html %}
55+
56+
<div class="sidebar sidebar--sticky">
57+
{%- unless page.hide_toc -%}
58+
<div data-menu-side>
59+
{% include sidebar/menu-side.html class="menu-side" anchor_class="menu-side__link" html=content h_min=2 h_max=2 %}
60+
</div>
61+
{%- endunless -%}
62+
63+
{% if page.feedback != false %}
64+
{% include sidebar/feedback.html %}
65+
{% endif %}
66+
</div>
67+
</div>
68+
</div>
69+
70+
<footer>
71+
{% include components/footer.html %}
72+
</footer>
73+
</div>

‎src/_layouts/page.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
---
2-
layout: default
2+
layout: main
33
---
44

55
<article class="page">

0 commit comments

Comments
 (0)