Skip to content

Commit 4356a3e

Browse files
BanegasnBanegasn
committed
SEO Links
1 parent 71fa24f commit 4356a3e

File tree

3 files changed

+40
-32
lines changed

3 files changed

+40
-32
lines changed

‎apps/angular-app/src/app/app.component.html‎

Lines changed: 19 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -5,13 +5,15 @@
55

66
<m3-navigation-rail-item label="Home"
77
[active]="currentRoute() === '/home'"
8-
(item-click)="navigate('/home')">
8+
href="/home"
9+
(click)="$event.preventDefault(); navigate('/home')">
910
<span slot="icon" class="material-symbols-outlined">home</span>
1011
</m3-navigation-rail-item>
1112

1213
<m3-navigation-rail-item label="Quick Start"
1314
[active]="currentRoute() === '/quick-start'"
14-
(item-click)="navigate('/quick-start')">
15+
href="/quick-start"
16+
(click)="$event.preventDefault(); navigate('/quick-start')">
1517
<span slot="icon" class="material-symbols-outlined">rocket_launch</span>
1618
</m3-navigation-rail-item>
1719

@@ -21,7 +23,8 @@
2123
(menu-item-select)="onComponentsMenuItemSelect($event)">
2224
<m3-navigation-rail-item label="Components"
2325
[active]="isComponentsRoute()"
24-
(item-click)="navigate('/components')">
26+
href="/components"
27+
(click)="$event.preventDefault(); navigate('/components')">
2528
<span slot="icon" class="material-symbols-outlined">browse</span>
2629
</m3-navigation-rail-item>
2730

@@ -35,7 +38,7 @@
3538
style="--md-menu-max-height: calc(100vh - 200px);"
3639
>
3740
@for (item of componentMenuItems; track item.path) {
38-
<m3-menu-item [value]="item.path">
41+
<m3-menu-item [value]="item.path" [attr.href]="item.path">
3942
<span slot="leading-icon" class="material-symbols-outlined">{{ item.icon }}</span>
4043
{{ item.label }}
4144
</m3-menu-item>
@@ -45,7 +48,8 @@
4548

4649
<m3-navigation-rail-item label="Contact"
4750
[active]="currentRoute() === '/contact'"
48-
(item-click)="navigate('/contact')">
51+
href="/contact"
52+
(click)="$event.preventDefault(); navigate('/contact')">
4953
<span slot="icon" class="material-symbols-outlined">person</span>
5054
</m3-navigation-rail-item>
5155

@@ -86,7 +90,7 @@
8690
style="--md-menu-max-height: calc(100dvh - 120px);"
8791
>
8892
@for (item of componentMenuItems; track item.path) {
89-
<m3-menu-item [value]="item.path">
93+
<m3-menu-item [value]="item.path" [attr.href]="item.path">
9094
<span slot="leading-icon" class="material-symbols-outlined">{{ item.icon }}</span>
9195
{{ item.label }}
9296
</m3-menu-item>
@@ -98,33 +102,37 @@
98102
<m3-navigation-bar-item
99103
label="Home"
100104
[active]="currentRoute() === '/home'"
101-
(item-click)="navigate('/home')">
105+
href="/home"
106+
(click)="$event.preventDefault(); navigate('/home')">
102107
<span slot="icon" class="material-symbols-outlined">home</span>
103108
</m3-navigation-bar-item>
104109

105110
<m3-navigation-bar-item
106111
label="Quick Start"
107112
[active]="currentRoute() === '/quick-start'"
108-
(item-click)="navigate('/quick-start')">
113+
href="/quick-start"
114+
(click)="$event.preventDefault(); navigate('/quick-start')">
109115
<span slot="icon" class="material-symbols-outlined">rocket_launch</span>
110116
</m3-navigation-bar-item>
111117

112118
<m3-navigation-bar-item
113119
id="mobile-components-trigger"
114120
label="Components"
115121
[active]="isComponentsRoute()"
122+
href="/components"
123+
(click)="$event.preventDefault(); onMobileComponentsItemClick($event)"
116124
(pointerdown)="onMobileComponentsPointerDown($event)"
117125
(pointerup)="onMobileComponentsPointerUp($event)"
118126
(pointercancel)="onMobileComponentsPointerCancel($event)"
119-
(contextmenu)="onMobileComponentsContextMenu($event)"
120-
(item-click)="onMobileComponentsItemClick($event)">
127+
(contextmenu)="onMobileComponentsContextMenu($event)">
121128
<span slot="icon" class="material-symbols-outlined">browse</span>
122129
</m3-navigation-bar-item>
123130

124131
<m3-navigation-bar-item
125132
label="Contact"
126133
[active]="currentRoute() === '/contact'"
127-
(item-click)="navigate('/contact')">
134+
href="/contact"
135+
(click)="$event.preventDefault(); navigate('/contact')">
128136
<span slot="icon" class="material-symbols-outlined">person</span>
129137
</m3-navigation-bar-item>
130138

‎apps/angular-app/src/pages/components/components.component.html‎

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,7 @@ <h3>Sizes & States</h3>
3838
</div>
3939

4040
<div slot="actions" class="actions">
41-
<m3-button variant="elevated" size="medium" (button-click)="navigateToButtons()">View Full
41+
<m3-button variant="elevated" size="medium" href="/buttons" (click)="$event.preventDefault(); navigateToButtons()">View Full
4242
Documentation</m3-button>
4343
</div>
4444
</m3-card>
@@ -63,7 +63,7 @@ <h2>🎴 Cards</h2>
6363
</div>
6464

6565
<div slot="actions" class="actions">
66-
<m3-button variant="elevated" size="medium" (button-click)="navigateToCards()">View Full
66+
<m3-button variant="elevated" size="medium" href="/cards" (click)="$event.preventDefault(); navigateToCards()">View Full
6767
Documentation</m3-button>
6868
</div>
6969
</m3-card>
@@ -93,7 +93,7 @@ <h2>🧭 Navigation Rail</h2>
9393
</p>
9494

9595
<div slot="actions" class="actions">
96-
<m3-button variant="elevated" size="medium" (button-click)="navigateToNavigationRail()">View Full
96+
<m3-button variant="elevated" size="medium" href="/navigation-rail" (click)="$event.preventDefault(); navigateToNavigationRail()">View Full
9797
Documentation</m3-button>
9898
</div>
9999
</m3-card>
@@ -123,7 +123,7 @@ <h2>📱 Navigation Bar</h2>
123123
</p>
124124

125125
<div slot="actions" class="actions">
126-
<m3-button variant="elevated" size="medium" (button-click)="navigateToNavigationBar()">View Full
126+
<m3-button variant="elevated" size="medium" href="/navigation-bar" (click)="$event.preventDefault(); navigateToNavigationBar()">View Full
127127
Documentation</m3-button>
128128
</div>
129129
</m3-card>
@@ -161,7 +161,7 @@ <h3>Switch States</h3>
161161
</div>
162162

163163
<div slot="actions" class="actions">
164-
<m3-button variant="elevated" size="medium" (button-click)="navigateToSwitches()">View Full
164+
<m3-button variant="elevated" size="medium" href="/switches" (click)="$event.preventDefault(); navigateToSwitches()">View Full
165165
Documentation</m3-button>
166166
</div>
167167
</m3-card>
@@ -200,7 +200,7 @@ <h3>Radio Button States</h3>
200200
</div>
201201

202202
<div slot="actions" class="actions">
203-
<m3-button variant="elevated" size="medium" (button-click)="navigateToRadioButtons()">View Full
203+
<m3-button variant="elevated" size="medium" href="/radio-buttons" (click)="$event.preventDefault(); navigateToRadioButtons()">View Full
204204
Documentation</m3-button>
205205
</div>
206206
</m3-card>
@@ -225,7 +225,7 @@ <h2>🔍 Search Bar</h2>
225225
</div>
226226

227227
<div slot="actions" class="actions">
228-
<m3-button variant="elevated" size="medium" (button-click)="navigateToSearchBar()">View Full
228+
<m3-button variant="elevated" size="medium" href="/search-bar" (click)="$event.preventDefault(); navigateToSearchBar()">View Full
229229
Documentation</m3-button>
230230
</div>
231231
</m3-card>
@@ -249,7 +249,7 @@ <h2>✂️ Split Button</h2>
249249
</div>
250250

251251
<div slot="actions" class="actions">
252-
<m3-button variant="elevated" size="medium" (button-click)="navigateToSplitButton()">View Full
252+
<m3-button variant="elevated" size="medium" href="/split-button" (click)="$event.preventDefault(); navigateToSplitButton()">View Full
253253
Documentation</m3-button>
254254
</div>
255255
</m3-card>
@@ -272,7 +272,7 @@ <h2>☰ Menu</h2>
272272
</div>
273273

274274
<div slot="actions" class="actions">
275-
<m3-button variant="elevated" size="medium" (button-click)="navigateToMenu()">View Full
275+
<m3-button variant="elevated" size="medium" href="/menu" (click)="$event.preventDefault(); navigateToMenu()">View Full
276276
Documentation</m3-button>
277277
</div>
278278
</m3-card>
@@ -295,7 +295,7 @@ <h2>⏳ Loading Indicator</h2>
295295
</div>
296296

297297
<div slot="actions" class="actions">
298-
<m3-button variant="elevated" size="medium" (button-click)="navigateToLoadingIndicator()">View Full
298+
<m3-button variant="elevated" size="medium" href="/loading-indicator" (click)="$event.preventDefault(); navigateToLoadingIndicator()">View Full
299299
Documentation</m3-button>
300300
</div>
301301
</m3-card>
@@ -319,7 +319,7 @@ <h2>🍔 FAB Menu</h2>
319319
</div>
320320

321321
<div slot="actions" class="actions">
322-
<m3-button variant="elevated" size="medium" (button-click)="navigateToFabMenu()">View Full
322+
<m3-button variant="elevated" size="medium" href="/fab-menu" (click)="$event.preventDefault(); navigateToFabMenu()">View Full
323323
Documentation</m3-button>
324324
</div>
325325
</m3-card>

‎apps/angular-app/src/pages/home/home.component.html‎

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -5,11 +5,11 @@ <h1>Material 3 Web Components Library</h1>
55
Works seamlessly with Angular, React, Vue, Svelte, or vanilla JavaScript.
66
</p>
77
<div class="button-group">
8-
<m3-button variant="filled" size="large" (button-click)="navigateToQuickStart()">
8+
<m3-button variant="filled" size="large" href="/quick-start" (click)="$event.preventDefault(); navigateToQuickStart()">
99
<span slot="icon" class="material-symbols-outlined">rocket_launch</span>
1010
Quick Start
1111
</m3-button>
12-
<m3-button variant="outlined" size="large" (button-click)="navigateToComponents()">
12+
<m3-button variant="outlined" size="large" href="/components" (click)="$event.preventDefault(); navigateToComponents()">
1313
<span slot="icon" class="material-symbols-outlined">browse</span>
1414
Browse Components
1515
</m3-button>
@@ -102,7 +102,7 @@ <h3 style="margin: 0; flex: 1;">&#64;banegasn/m3-button</h3>
102102
<span slot="icon" class="material-symbols-outlined">package</span>
103103
npm
104104
</m3-button>
105-
<m3-button variant="text" (button-click)="navigateToButtons()">
105+
<m3-button variant="text" href="/buttons" (click)="$event.preventDefault(); navigateToButtons()">
106106
<span slot="icon" class="material-symbols-outlined">arrow_forward</span>
107107
View Details
108108
</m3-button>
@@ -127,7 +127,7 @@ <h3 style="margin: 0; flex: 1;">&#64;banegasn/m3-card</h3>
127127
<span slot="icon" class="material-symbols-outlined">package</span>
128128
npm
129129
</m3-button>
130-
<m3-button variant="text" (button-click)="navigateToCards()">
130+
<m3-button variant="text" href="/cards" (click)="$event.preventDefault(); navigateToCards()">
131131
<span slot="icon" class="material-symbols-outlined">arrow_forward</span>
132132
View Details
133133
</m3-button>
@@ -153,7 +153,7 @@ <h3 style="margin: 0; flex: 1;">&#64;banegasn/m3-navigation-rail</h3>
153153
<span slot="icon" class="material-symbols-outlined">package</span>
154154
npm
155155
</m3-button>
156-
<m3-button variant="text" (button-click)="navigateToNavigationRail()">
156+
<m3-button variant="text" href="/navigation-rail" (click)="$event.preventDefault(); navigateToNavigationRail()">
157157
<span slot="icon" class="material-symbols-outlined">arrow_forward</span>
158158
View Details
159159
</m3-button>
@@ -178,7 +178,7 @@ <h3 style="margin: 0; flex: 1;">&#64;banegasn/m3-navigation-bar</h3>
178178
<span slot="icon" class="material-symbols-outlined">package</span>
179179
npm
180180
</m3-button>
181-
<m3-button variant="text" (button-click)="navigateToNavigationBar()">
181+
<m3-button variant="text" href="/navigation-bar" (click)="$event.preventDefault(); navigateToNavigationBar()">
182182
<span slot="icon" class="material-symbols-outlined">arrow_forward</span>
183183
View Details
184184
</m3-button>
@@ -217,7 +217,7 @@ <h3 style="margin: 0; flex: 1;">&#64;banegasn/m3-switch</h3>
217217
<span slot="icon" class="material-symbols-outlined">package</span>
218218
npm
219219
</m3-button>
220-
<m3-button variant="text" (button-click)="navigateToSwitches()">
220+
<m3-button variant="text" href="/switches" (click)="$event.preventDefault(); navigateToSwitches()">
221221
<span slot="icon" class="material-symbols-outlined">arrow_forward</span>
222222
View Details
223223
</m3-button>
@@ -256,7 +256,7 @@ <h3 style="margin: 0; flex: 1;">&#64;banegasn/m3-radio-button</h3>
256256
<span slot="icon" class="material-symbols-outlined">package</span>
257257
npm
258258
</m3-button>
259-
<m3-button variant="text" (button-click)="navigateToRadioButtons()">
259+
<m3-button variant="text" href="/radio-buttons" (click)="$event.preventDefault(); navigateToRadioButtons()">
260260
<span slot="icon" class="material-symbols-outlined">arrow_forward</span>
261261
View Details
262262
</m3-button>
@@ -281,7 +281,7 @@ <h3 style="margin: 0; flex: 1;">&#64;banegasn/m3-search-bar</h3>
281281
<span slot="icon" class="material-symbols-outlined">package</span>
282282
npm
283283
</m3-button>
284-
<m3-button variant="text" (button-click)="navigateToSearchBar()">
284+
<m3-button variant="text" href="/search-bar" (click)="$event.preventDefault(); navigateToSearchBar()">
285285
<span slot="icon" class="material-symbols-outlined">arrow_forward</span>
286286
View Details
287287
</m3-button>
@@ -424,7 +424,7 @@ <h2>Quick Start</h2>
424424
<p>Get up and running with Material 3 Web Components in minutes. Use them directly via CDN or install them via npm for your framework of choice.</p>
425425
</div>
426426
<div style="display: flex; justify-content: center; gap: 16px; margin-bottom: 32px; flex-wrap: wrap;">
427-
<m3-button variant="filled" size="large" (button-click)="navigateToQuickStart()">
427+
<m3-button variant="filled" size="large" href="/quick-start" (click)="$event.preventDefault(); navigateToQuickStart()">
428428
<span slot="icon" class="material-symbols-outlined">rocket_launch</span>
429429
View Quick Start Guide
430430
</m3-button>

0 commit comments

Comments
 (0)