Skip to content

Commit 3141185

Browse files
udayvunnamudayvunnam
committed
update meta
1 parent 4447446 commit 3141185

22 files changed

Lines changed: 576 additions & 254 deletions

‎.github/workflows/ci-e2e.yml‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -31,8 +31,8 @@ jobs:
3131
# Cache node_modules
3232
- uses: actions/setup-node@v4
3333
with:
34-
node-version: 22
35-
cache: 'pnpm'
34+
node-version: 24
35+
cache: "pnpm"
3636

3737
- run: pnpm install --frozen-lockfile
3838
- run: pnpm exec playwright install --with-deps

‎.github/workflows/new-contributors.yml‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -8,15 +8,15 @@ jobs:
88
with:
99
GITHUB_TOKEN: ${{ secrets.RELEASE_PLEASE_TOKEN }}
1010

11-
FIRST_ISSUE_REACTIONS: '+1, hooray, rocket, heart'
11+
FIRST_ISSUE_REACTIONS: "+1, hooray, rocket, heart"
1212
FIRST_ISSUE: |
1313
👋 Hey @{{ author }}
1414
<br>
1515
Thanks for flagging your first issue! We're on it! Please provide all the details you can
1616
<br>
1717
Got a fix? Send a PR! 🚀 Check out our [local dev guide](https://github.com/udayvunnam/xng-breadcrumb/blob/main/docs/local-development-guide.md)
1818
19-
FIRST_PR_REACTIONS: '+1, hooray, rocket, heart'
19+
FIRST_PR_REACTIONS: "+1, hooray, rocket, heart"
2020
FIRST_PR_COMMENT: |
2121
👋 Hey @{{ author }}!
2222
<br>
@@ -29,5 +29,3 @@ jobs:
2929
Congrats on merging your first PR! Your changes will be included in the next xng-breadcrumb release
3030
3131
STAR_MESSAGE: If you like this project, please ⭐star⭐ our repo.
32-
33-

‎.github/workflows/stale.yml‎

Lines changed: 14 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -2,27 +2,26 @@
22
name: stale issues and PRs
33
on:
44
schedule:
5-
- cron: '30 1 * * *'
5+
- cron: "30 1 * * *"
66

77
jobs:
88
stale:
9-
109
runs-on: ubuntu-latest
1110
permissions:
1211
issues: write
1312
pull-requests: write
1413

1514
steps:
16-
- uses: actions/stale@v5
17-
with:
18-
days-before-stale: 120
19-
days-before-pr-stale: 120
20-
repo-token: ${{ secrets.RELEASE_PLEASE_TOKEN }}
21-
stale-issue-message: 'This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.'
22-
stale-pr-message: 'This PR has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.'
23-
close-issue-message: 'This issue has been automatically closed because it has not had recent activity. Thank you for your contributions.'
24-
close-pr-message: 'This PR has been automatically closed because it has not had recent activity. Thank you for your contributions.'
25-
stale-issue-label: 'no-activity,stale'
26-
stale-pr-label: 'no-activity,stale'
27-
exempt-pr-labels: 'pinned,security'
28-
exempt-issue-labels: 'pinned,security'
15+
- uses: actions/stale@v5
16+
with:
17+
days-before-stale: 120
18+
days-before-pr-stale: 120
19+
repo-token: ${{ secrets.RELEASE_PLEASE_TOKEN }}
20+
stale-issue-message: "This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions."
21+
stale-pr-message: "This PR has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions."
22+
close-issue-message: "This issue has been automatically closed because it has not had recent activity. Thank you for your contributions."
23+
close-pr-message: "This PR has been automatically closed because it has not had recent activity. Thank you for your contributions."
24+
stale-issue-label: "no-activity,stale"
25+
stale-pr-label: "no-activity,stale"
26+
exempt-pr-labels: "pinned,security"
27+
exempt-issue-labels: "pinned,security"

‎README.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22

33
<div align="center">
44

5-
> A lightweight, declarative, and dynamic breadcrumb solution for Angular 6+. [🌐 View on npm](https://www.npmjs.com/package/xng-breadcrumb)
5+
> A lightweight, declarative, and dynamic breadcrumb solution for Angular. [🌐 View on npm](https://www.npmjs.com/package/xng-breadcrumb)
66
77
[![CI](https://github.com/udayvunnam/xng-breadcrumb/actions/workflows/ci-e2e.yml/badge.svg)](https://github.com/udayvunnam/xng-breadcrumb/actions/workflows/ci-e2e.yml)
88
[![npm version](https://img.shields.io/npm/v/xng-breadcrumb.svg)](https://www.npmjs.com/package/xng-breadcrumb)
@@ -54,7 +54,7 @@ Experience it firsthand in the [Demo App](https://xng-breadcrumb.vercel.app/)
5454

5555
- ✅ **Customization**: Customize breadcrumb template to display **icons with label**, **apply text formatting using pipes**, **integrate i18n with ngx-translate**, and more.
5656

57-
- ✅ **Styling and Seperators**: Easily customize breadcrumb separators and styles to match your application's design
57+
- ✅ **Styling and Separators**: Easily customize breadcrumb separators and styles to match your application's design
5858

5959
- ✅ **QueryParams and Fragment**: Preserves params/fragments across navigation.
6060

‎apps/material-ui/src/app/app.component.html‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
1-
<div [ngClass]="{ 'xng-dark-theme': darkMode }">
1+
<div class="app-shell" [ngClass]="{ 'xng-dark-theme': darkMode }">
22
<app-navbar (themeChanged)="updateTheme($event)"></app-navbar>
3-
<app-breadcrumb-view />
43

5-
<router-outlet></router-outlet>
4+
<main class="app-content" id="demo-content">
5+
<app-breadcrumb-view />
6+
<router-outlet></router-outlet>
7+
</main>
68
</div>

‎apps/material-ui/src/app/app.component.ts‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -5,14 +5,14 @@ import { BreadcrumbViewComponent } from './core/breadcrumb-view/breadcrumb-view.
55
import { NavbarComponent } from './core/navbar/navbar.component';
66

77
@Component({
8-
imports: [RouterModule, BreadcrumbViewComponent, NavbarComponent, CommonModule],
9-
selector: 'app-root',
10-
templateUrl: './app.component.html'
8+
imports: [RouterModule, BreadcrumbViewComponent, NavbarComponent, CommonModule],
9+
selector: 'app-root',
10+
templateUrl: './app.component.html',
1111
})
1212
export class AppComponent {
1313
darkMode = false;
1414

15-
updateTheme(theme) {
15+
updateTheme(theme: string) {
1616
this.darkMode = theme === 'dark';
1717
}
1818
}

‎apps/material-ui/src/app/core/breadcrumb-view/breadcrumb-view.component.css‎

Lines changed: 77 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -1,72 +1,105 @@
1-
ol,
2-
ul {
3-
list-style: none;
4-
margin: 0;
5-
padding: 0;
1+
.pattern-showcase {
2+
background: var(--surface-card);
3+
border: 1px solid var(--surface-border);
4+
border-radius: 1.25rem;
5+
margin: 1rem auto;
6+
padding: clamp(1rem, 2vw, 1.6rem);
7+
box-shadow: 0 16px 45px rgba(4, 38, 57, 0.06);
68
}
79

8-
.breadcrumb-type {
9-
padding: 0.5rem 0;
10-
gap: 1.5rem;
11-
justify-content: space-between;
12-
display: flex;
10+
.showcase-header h2 {
11+
margin: 0.3rem 0 0.55rem;
12+
color: var(--text-primary);
13+
font-size: clamp(1.2rem, 2.3vw, 1.7rem);
1314
}
1415

15-
.breadcrumb-type .title {
16-
color: rgb(17 24 39);
17-
line-height: 1.5rem;
18-
font-weight: 600;
19-
font-size: 0.875rem;
16+
.showcase-header p {
17+
color: var(--text-muted);
18+
margin: 0;
2019
}
2120

22-
.breadcrumb-type .subtitle {
23-
color: rgb(107 114 128);
24-
line-height: 1.25rem;
25-
font-size: 0.75rem;
26-
margin-top: 0.25rem;
21+
.kicker {
22+
margin: 0;
23+
color: var(--accent-strong);
24+
font-family: 'IBM Plex Mono', monospace;
25+
font-size: 0.73rem;
26+
letter-spacing: 0.08em;
27+
text-transform: uppercase;
2728
}
2829

29-
p {
30-
margin-block-start: 0;
31-
margin-block-end: 0;
30+
.pattern-list {
31+
list-style: none;
32+
margin: 1rem 0 0;
33+
padding: 0;
34+
display: grid;
35+
gap: 0.7rem;
3236
}
3337

34-
.divide > :not([hidden]) ~ :not([hidden]) {
35-
border-color: rgb(243 244 246);
36-
border-width: 1px 0 0 0;
37-
border-style: solid;
38+
.pattern-card {
39+
display: flex;
40+
align-items: center;
41+
justify-content: space-between;
42+
gap: 1rem;
43+
border: 1px solid color-mix(in srgb, var(--surface-border) 70%, white 30%);
44+
border-radius: 0.95rem;
45+
background: color-mix(in srgb, var(--surface-soft) 80%, white 20%);
46+
padding: 0.85rem;
3847
}
3948

40-
.list {
41-
margin-bottom: 32px;
49+
.pattern-card .title {
50+
margin: 0;
51+
color: var(--text-primary);
52+
font-size: 0.9rem;
53+
font-weight: 600;
4254
}
4355

44-
.container {
45-
padding: 8px;
56+
.pattern-card .subtitle {
57+
color: var(--text-muted);
58+
margin: 0.25rem 0 0;
59+
font-size: 0.78rem;
4660
}
4761

48-
/* breadcrumb styles customization */
49-
5062
.xng-breadcrumb-root {
51-
padding: 8px 16px;
63+
padding: 0.35rem 0.55rem;
5264
display: inline-block;
53-
border-radius: 4px;
65+
border-radius: 999px;
66+
background: color-mix(in srgb, var(--surface-card) 88%, white 12%);
67+
border: 1px solid var(--surface-border);
5468
}
5569

56-
.myapp-breadcrumb .xng-breadcrumb-trail {
57-
color: teal;
70+
.myapp-breadcrumb .xng-breadcrumb-trail,
71+
.advanced1 .xng-breadcrumb-trail,
72+
.advanced2 .xng-breadcrumb-trail {
73+
color: var(--accent-strong);
5874
}
5975

6076
.custom-breadcrumb.xng-breadcrumb-root .xng-breadcrumb-item {
61-
border-radius: 16px;
62-
background-color: #f5f5f5;
63-
padding: 4px 8px;
77+
border-radius: 999px;
78+
background-color: color-mix(in srgb, var(--accent) 11%, white 89%);
79+
padding: 0.2rem 0.45rem;
6480
}
6581

66-
.advanced1.xng-breadcrumb-root {
67-
background-color: #e7f1f1;
82+
.separator-icon {
83+
font-size: 15px;
84+
height: 15px;
85+
width: 15px;
86+
color: var(--accent-strong);
6887
}
6988

70-
.separator-icon {
71-
color: teal;
89+
.mat-icon-size {
90+
font-size: 17px;
91+
height: 17px;
92+
width: 17px;
93+
margin-right: 2px;
94+
}
95+
96+
@media (max-width: 860px) {
97+
.pattern-card {
98+
flex-direction: column;
99+
align-items: flex-start;
100+
}
101+
102+
.xng-breadcrumb-root {
103+
width: 100%;
104+
}
72105
}

‎apps/material-ui/src/app/core/breadcrumb-view/breadcrumb-view.component.html‎

Lines changed: 31 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,25 @@
1-
<div class="max-w-sm container">
2-
<ul role="list" class="flex-col gap-4 divide max-w-sm list">
3-
<li class="breadcrumb-type flex-row items-center">
1+
<section class="pattern-showcase">
2+
<header class="showcase-header">
3+
<p class="kicker">Live Breadcrumb Gallery</p>
4+
<h2>Reference patterns for every xng-breadcrumb capability</h2>
5+
<p>
6+
Each row below is fully functional and bound to your current route. Use it as a visual regression surface while developing breadcrumb behavior.
7+
</p>
8+
</header>
9+
10+
<ul role="list" class="pattern-list">
11+
<li class="pattern-card">
412
<div>
5-
<p class="title">Default breadcrumbs</p>
6-
<p class="subtitle">Just drop <b>&lt;xng-breadcrumb/&gt;</b> anywhere</p>
13+
<p class="title">Default</p>
14+
<p class="subtitle">Auto-generated route labels with zero custom template setup.</p>
715
</div>
816
<xng-breadcrumb class="default"></xng-breadcrumb>
917
</li>
1018

11-
<li class="breadcrumb-type flex-row items-center">
19+
<li class="pattern-card">
1220
<div>
13-
<p class="title">Title case and custom separator</p>
14-
<p class="subtitle">Use pipe on breadcrumb for title case and custom text on separator</p>
21+
<p class="title">Custom text transform + separator</p>
22+
<p class="subtitle">Title case via template and a custom separator character.</p>
1523
</div>
1624
<xng-breadcrumb separator="~" class="title-case">
1725
<ng-container *xngBreadcrumbItem="let breadcrumb">
@@ -20,25 +28,24 @@
2028
</xng-breadcrumb>
2129
</li>
2230

23-
<li class="breadcrumb-type flex-row items-center">
31+
<li class="pattern-card">
2432
<div>
25-
<p class="title">Material Icon as separator</p>
26-
<p class="subtitle">Custom template for icon, background color on each item</p>
33+
<p class="title">Template separator</p>
34+
<p class="subtitle">Material icon separator and pill styling for each crumb.</p>
2735
</div>
2836
<xng-breadcrumb [separator]="separatorTemplate" class="custom-breadcrumb"></xng-breadcrumb>
29-
3037
<ng-template #separatorTemplate>
31-
<mat-icon class="separator-icon">arrow_right</mat-icon>
38+
<mat-icon class="separator-icon">arrow_forward_ios</mat-icon>
3239
</ng-template>
3340
</li>
3441

35-
<li class="breadcrumb-type flex-row items-center">
42+
<li class="pattern-card">
3643
<div>
37-
<p class="title">Advanced usage 1</p>
38-
<p class="subtitle">Custom background, preserveQueryParams(false), use info from breadcrumb to show icons</p>
44+
<p class="title">Info-driven labels + preserveQueryParams false</p>
45+
<p class="subtitle">Read `info` from route metadata and customize labels with icons.</p>
3946
</div>
40-
<xng-breadcrumb separator="→" class="myapp-breadcrumb" [preserveQueryParams]="false" class="advanced1">
41-
<ng-container *xngBreadcrumbItem="let breadcrumb; let info = info; let first = first">
47+
<xng-breadcrumb separator="→" class="advanced1" [preserveQueryParams]="false">
48+
<ng-container *xngBreadcrumbItem="let breadcrumb; let info = info">
4249
@if (info) {
4350
<mat-icon class="mat-icon-size" inline="true">{{ info }}</mat-icon>
4451
}
@@ -47,12 +54,12 @@
4754
</xng-breadcrumb>
4855
</li>
4956

50-
<li class="breadcrumb-type flex-row items-center">
57+
<li class="pattern-card">
5158
<div>
52-
<p class="title">Advanced usage 2</p>
53-
<p class="subtitle">Open breadcrumb link in new tab, different style on tail, preserveFragment(false) etc</p>
59+
<p class="title">Open in new tab + preserveFragment false</p>
60+
<p class="subtitle">Demonstrates link target and fragment behavior customization.</p>
5461
</div>
55-
<xng-breadcrumb separator="→" class="myapp-breadcrumb" [preserveFragment]="false" anchorTarget="_blank" class="advanced2">
62+
<xng-breadcrumb separator="→" class="advanced2" [preserveFragment]="false" anchorTarget="_blank">
5663
<ng-container *xngBreadcrumbItem="let breadcrumb; let info = info; let first = first">
5764
@if (info) {
5865
<mat-icon class="mat-icon-size" inline="true">{{ info }}</mat-icon>
@@ -64,6 +71,6 @@
6471
</xng-breadcrumb>
6572
</li>
6673
</ul>
74+
</section>
6775

68-
<router-outlet></router-outlet>
69-
</div>
76+
<router-outlet></router-outlet>

0 commit comments

Comments
 (0)