Skip to content

Commit 0d1e693

Browse files
markostanimirovicmarkostanimirovic
authored
docs(www): add NgRx workshops for spring 2026 (#5113)
1 parent 97ccfda commit 0d1e693

8 files changed

Lines changed: 752 additions & 146 deletions

File tree

‎projects/www/public/images/bios/marko.jpg‎

125 KB
Loading

‎projects/www/public/images/marketing/workshops/header.jpg‎

-281 KB
Binary file not shown.

‎projects/www/src/app/app.component.ts‎

Lines changed: 68 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,11 @@
1-
import { Component, Injector, PLATFORM_ID, inject } from '@angular/core';
1+
import {
2+
Component,
3+
Injector,
4+
PLATFORM_ID,
5+
inject,
6+
signal,
7+
effect,
8+
} from '@angular/core';
29
import { RouterOutlet } from '@angular/router';
310
import { isPlatformBrowser } from '@angular/common';
411
import { MenuComponent } from './components/menu.component';
@@ -8,79 +15,121 @@ import { CodeExampleComponent } from './components/docs/code-example.component';
815
import { CodeTabsComponent } from './components/docs/code-tabs.component';
916
import { StackblitzComponent } from './components/docs/stackblitz.component';
1017
import { FooterComponent } from './components/footer.component';
18+
import {
19+
TOP_BANNER_DISMISSED_STORAGE_KEY,
20+
TopBannerComponent,
21+
} from './components/top-banner.component';
1122

1223
@Component({
1324
selector: 'ngrx-root',
1425
imports: [
1526
RouterOutlet,
1627
MenuComponent,
28+
TopBannerComponent,
1729
MarkdownSymbolLinkComponent,
1830
AlertComponent,
1931
CodeExampleComponent,
2032
StackblitzComponent,
2133
FooterComponent,
2234
],
2335
template: `
24-
<ngrx-menu></ngrx-menu>
25-
<router-outlet></router-outlet>
26-
<ngrx-footer></ngrx-footer>
36+
@if (isTopBannerVisible()) {
37+
<ngrx-top-banner (dismiss)="isTopBannerVisible.set(false)" />
38+
}
39+
<ngrx-menu />
40+
<div class="content">
41+
<router-outlet />
42+
<ngrx-footer />
43+
</div>
2744
`,
2845
styles: [
2946
`
3047
:host {
3148
display: block;
32-
position: relative;
33-
width: calc(100% - 270px);
34-
left: 270px;
49+
}
50+
51+
:host.top-banner-visible {
52+
--top-banner-height: 44px;
53+
3554
@media only screen and (max-width: 1280px) {
36-
width: 100%;
37-
left: 0;
55+
--top-banner-height: 70px;
3856
}
3957
}
4058
4159
ngrx-menu {
4260
position: fixed;
43-
top: 0;
4461
left: 0;
62+
top: 0;
63+
}
64+
65+
.content {
66+
position: relative;
67+
width: calc(100% - 270px);
68+
left: 270px;
69+
70+
@media only screen and (max-width: 1280px) {
71+
width: 100%;
72+
left: 0;
73+
padding-top: var(--top-banner-height, 0px);
74+
}
4575
}
4676
`,
4777
],
78+
host: {
79+
'[class.top-banner-visible]': 'isTopBannerVisible()',
80+
},
4881
})
4982
export class AppComponent {
50-
injector = inject(Injector);
51-
platformId = inject(PLATFORM_ID);
83+
readonly #injector = inject(Injector);
84+
readonly #platformId = inject(PLATFORM_ID);
85+
86+
readonly isTopBannerVisible = signal(false);
5287

5388
constructor() {
54-
if (isPlatformBrowser(this.platformId)) {
89+
if (isPlatformBrowser(this.#platformId)) {
90+
this.initTopBanner();
5591
this.installCustomElements();
5692
}
5793
}
5894

59-
async installCustomElements() {
95+
initTopBanner(): void {
96+
if (localStorage.getItem(TOP_BANNER_DISMISSED_STORAGE_KEY) !== 'true') {
97+
this.isTopBannerVisible.set(true);
98+
}
99+
100+
effect(() => {
101+
localStorage.setItem(
102+
TOP_BANNER_DISMISSED_STORAGE_KEY,
103+
`${!this.isTopBannerVisible()}`
104+
);
105+
});
106+
}
107+
108+
async installCustomElements(): Promise<void> {
60109
const { createCustomElement } = await import('@angular/elements');
61110

62111
const symbolLinkElement = createCustomElement(MarkdownSymbolLinkComponent, {
63-
injector: this.injector,
112+
injector: this.#injector,
64113
});
65114
customElements.define('ngrx-docs-symbol-link', symbolLinkElement);
66115

67116
const alertElement = createCustomElement(AlertComponent, {
68-
injector: this.injector,
117+
injector: this.#injector,
69118
});
70119
customElements.define('ngrx-docs-alert', alertElement);
71120

72121
const codeExampleElement = createCustomElement(CodeExampleComponent, {
73-
injector: this.injector,
122+
injector: this.#injector,
74123
});
75124
customElements.define('ngrx-code-example', codeExampleElement);
76125

77126
const codeTabsElement = createCustomElement(CodeTabsComponent, {
78-
injector: this.injector,
127+
injector: this.#injector,
79128
});
80129
customElements.define('ngrx-code-tabs', codeTabsElement);
81130

82131
const stackblitzElement = createCustomElement(StackblitzComponent, {
83-
injector: this.injector,
132+
injector: this.#injector,
84133
});
85134
customElements.define('ngrx-docs-stackblitz', stackblitzElement);
86135
}

‎projects/www/src/app/components/docs/markdown-article.component.ts‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -65,15 +65,16 @@ type Heading = { level: number; text: string; id: string; url: string };
6565
flex-direction: column;
6666
gap: 6px;
6767
position: fixed;
68-
top: 24px;
68+
top: calc(var(--top-banner-height, 0px) + 24px);
6969
right: 24px;
7070
margin: 0;
7171
padding: 0;
7272
border-left: 1px solid var(--ngrx-border-color);
7373
@media only screen and (max-width: 1280px) {
7474
position: relative;
75+
top: 0;
7576
width: 100%;
76-
padding: 24px;
77+
padding: 24px 24px 0;
7778
right: 0px;
7879
}
7980
}

‎projects/www/src/app/components/menu.component.ts‎

Lines changed: 23 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -46,15 +46,6 @@ import { ThemeToggleComponent } from './theme-toggle.component';
4646
</div>
4747
<ngrx-version-navigation />
4848
<hr />
49-
<!-- <a-->
50-
<!-- routerLink="/workshops"-->
51-
<!-- routerLinkActive="active"-->
52-
<!-- class="menu-link"-->
53-
<!-- (click)="closeMenu()"-->
54-
<!-- >-->
55-
<!-- <mat-icon>co_present</mat-icon>-->
56-
<!-- Workshops-->
57-
<!-- </a>-->
5849
<a
5950
routerLink="/api"
6051
routerLinkActive="active"
@@ -64,6 +55,15 @@ import { ThemeToggleComponent } from './theme-toggle.component';
6455
<mat-icon>description</mat-icon>
6556
API Reference
6657
</a>
58+
<a
59+
routerLink="/workshops"
60+
routerLinkActive="active"
61+
class="menu-link"
62+
(click)="closeMenu()"
63+
>
64+
<mat-icon>co_present</mat-icon>
65+
Workshops
66+
</a>
6767
<a
6868
href="https://github.com/sponsors/ngrx"
6969
target="_blank"
@@ -92,26 +92,30 @@ import { ThemeToggleComponent } from './theme-toggle.component';
9292
`
9393
.mobile-nav-bar {
9494
position: fixed;
95-
top: 0;
95+
top: var(--top-banner-height, 0px);
9696
display: none;
9797
background-color: var(--ngrx-bg-surface);
9898
width: 100%;
9999
padding: 15px 20px;
100+
100101
.menu-toggle {
101102
display: flex;
102103
align-items: center;
103104
background-color: transparent;
104105
border: none;
105106
cursor: pointer;
107+
106108
img {
107109
width: 30px;
108110
margin-right: 8px;
109111
}
110112
}
113+
111114
@media only screen and (max-width: 1280px) {
112115
display: block;
113116
}
114117
}
118+
115119
.sidebar {
116120
display: flex;
117121
flex-direction: column;
@@ -128,12 +132,14 @@ import { ThemeToggleComponent } from './theme-toggle.component';
128132
height: 100lvh;
129133
overflow-y: scroll;
130134
}
135+
131136
&.open {
132137
@media only screen and (max-width: 1280px) {
133138
display: flex;
134139
left: 0;
135140
}
136141
}
142+
137143
.close-menu {
138144
display: none;
139145
background-color: transparent;
@@ -143,11 +149,13 @@ import { ThemeToggleComponent } from './theme-toggle.component';
143149
@media only screen and (max-width: 1280px) {
144150
display: block;
145151
}
152+
146153
.close-menu-icon {
147154
cursor: pointer;
148155
}
149156
}
150157
}
158+
151159
.logoLink {
152160
font-family: 'Oxanium', sans-serif;
153161
font-weight: 600;
@@ -172,6 +180,11 @@ import { ThemeToggleComponent } from './theme-toggle.component';
172180
173181
:host {
174182
z-index: 2;
183+
184+
@media only screen and (max-width: 1280px) {
185+
z-index: 4;
186+
}
187+
175188
width: 270px;
176189
height: 100lvh;
177190
background-color: var(--ngrx-bg-surface);

0 commit comments

Comments
 (0)