- Are you sure you want to print this page? Only print if absolutely necessary! The less we print, the
- less paper we need, the better it is for our environment!
-
-
-
-
-
-
-
-
-
-
-
-
- `,
+
+
+
+
+
+
Print this page
+
+ Are you sure you want to print this page? Only print if absolutely necessary! The less we print, the
+ less paper we need, the better it is for our environment!
+
+
+
+
+
+
+
+
+
+
+
+
+ `,
})
export class DialogContextMenuPreviewComponent {}
diff --git a/apps/app/src/app/pages/(components)/components/(dialog)/dialog.page.ts b/apps/app/src/app/pages/(components)/components/(dialog)/dialog.page.ts
index eccf1d32e..886a240ba 100644
--- a/apps/app/src/app/pages/(components)/components/(dialog)/dialog.page.ts
+++ b/apps/app/src/app/pages/(components)/components/(dialog)/dialog.page.ts
@@ -1,126 +1,128 @@
-import { Component } from '@angular/core';
import { RouteMeta } from '@analogjs/router';
-import { metaWith } from '~/app/shared/meta/meta.util';
-import { CodeComponent } from '~/app/shared/code/code.component';
+import { Component } from '@angular/core';
+import { provideIcons } from '@ng-icons/core';
+import { radixExclamationTriangle } from '@ng-icons/radix-icons';
+import {
+ HlmAlertDescriptionDirective,
+ HlmAlertDirective,
+ HlmAlertIconDirective,
+ HlmAlertTitleDirective,
+} from '@spartan-ng/ui-alert-helm';
+import { HlmIconComponent } from '@spartan-ng/ui-icon-helm';
+import { hlmCode, hlmP } from '@spartan-ng/ui-typography-helm';
+import { InstallationCsComponent } from '~/app/pages/(components)/components/installation-cs.component';
import { CodePreviewDirective } from '~/app/shared/code/code-preview.directive';
+import { CodeComponent } from '~/app/shared/code/code.component';
import { MainSectionDirective } from '~/app/shared/layout/main-section.directive';
-import { PageBottomNavComponent } from '~/app/shared/layout/page-bottom-nav/page-bottom-nav.component';
import { PageBottomNavLinkComponent } from '~/app/shared/layout/page-bottom-nav/page-bottom-nav-link.component';
-import { PageNavComponent } from '~/app/shared/layout/page-nav/page-nav.component';
+import { PageBottomNavComponent } from '~/app/shared/layout/page-bottom-nav/page-bottom-nav.component';
import { PageNavLinkComponent } from '~/app/shared/layout/page-nav/page-nav-link.component';
+import { PageNavComponent } from '~/app/shared/layout/page-nav/page-nav.component';
import { SectionIntroComponent } from '~/app/shared/layout/section-intro.component';
import { SectionSubHeadingComponent } from '~/app/shared/layout/section-sub-heading.component';
import { TabsComponent } from '~/app/shared/layout/tabs.component';
-import { defaultCode, defaultImports, defaultSkeleton, DialogPreviewComponent } from './dialog.preview';
-import { contextMenuCode, DialogContextMenuPreviewComponent } from './dialog-context-menu.preview';
-import { hlmCode, hlmP } from '@spartan-ng/ui-typography-helm';
-import {
- HlmAlertDescriptionDirective,
- HlmAlertDirective,
- HlmAlertIconDirective,
- HlmAlertTitleDirective,
-} from '@spartan-ng/ui-alert-helm';
-import { HlmIconComponent } from '@spartan-ng/ui-icon-helm';
-import { provideIcons } from '@ng-icons/core';
-import { radixExclamationTriangle } from '@ng-icons/radix-icons';
-import { InstallationCsComponent } from '~/app/pages/(components)/components/installation-cs.component';
+import { metaWith } from '~/app/shared/meta/meta.util';
+import { DialogContextMenuPreviewComponent, contextMenuCode } from './dialog-context-menu.preview';
+import { DialogPreviewComponent, defaultCode, defaultImports, defaultSkeleton } from './dialog.preview';
export const routeMeta: RouteMeta = {
- data: { breadcrumb: 'Dialog' },
- meta: metaWith(
- 'spartan/ui - Dialog',
- 'A window overlaid on either the primary window or another dialog window, rendering the content underneath inert.'
- ),
- title: 'spartan/ui - Dialog',
+ data: { breadcrumb: 'Dialog' },
+ meta: metaWith(
+ 'spartan/ui - Dialog',
+ 'A window overlaid on either the primary window or another dialog window, rendering the content underneath inert.',
+ ),
+ title: 'spartan/ui - Dialog',
};
@Component({
- selector: 'spartan-dialog',
- standalone: true,
- imports: [
- MainSectionDirective,
- CodeComponent,
- SectionIntroComponent,
- SectionSubHeadingComponent,
- TabsComponent,
- CodePreviewDirective,
- PageNavLinkComponent,
- PageNavComponent,
- PageBottomNavComponent,
- PageBottomNavLinkComponent,
- DialogPreviewComponent,
- DialogPreviewComponent,
- DialogContextMenuPreviewComponent,
- HlmAlertDirective,
- HlmAlertDescriptionDirective,
- HlmIconComponent,
- HlmAlertIconDirective,
- HlmAlertTitleDirective,
- InstallationCsComponent,
- ],
- providers: [provideIcons({ radixExclamationTriangle })],
- template: `
-
-
+ selector: 'spartan-dialog',
+ standalone: true,
+ imports: [
+ MainSectionDirective,
+ CodeComponent,
+ SectionIntroComponent,
+ SectionSubHeadingComponent,
+ TabsComponent,
+ CodePreviewDirective,
+ PageNavLinkComponent,
+ PageNavComponent,
+ PageBottomNavComponent,
+ PageBottomNavLinkComponent,
+ DialogPreviewComponent,
+ DialogPreviewComponent,
+ DialogContextMenuPreviewComponent,
+ HlmAlertDirective,
+ HlmAlertDescriptionDirective,
+ HlmIconComponent,
+ HlmAlertIconDirective,
+ HlmAlertTitleDirective,
+ InstallationCsComponent,
+ ],
+ providers: [provideIcons({ radixExclamationTriangle })],
+ template: `
+
+
-
-
- You can nest dialogs inside context or dropdown menus. Make sure to wrap the menu-item inside the
- brn-dialog component and apply the
- BrnDialogTrigger directive. Another option is to use the
- brnDialogTriggerFor alternative, which takes in a reference to the brn-dialog.
- That way you can avoid nesting the template.
-
-
-
-
Note
-
- Using brnDialogTriggerFor outside of the current menu seems to close the menu when dismissing the dialog.
-
-
-
-
-
-
-
-
+ Inside Menu
+
+ You can nest dialogs inside context or dropdown menus. Make sure to wrap the menu-item inside the
+ brn-dialog
+ component and apply the
+ BrnDialogTrigger
+ directive. Another option is to use the
+ brnDialogTriggerFor
+ alternative, which takes in a reference to the brn-dialog. That way you can avoid nesting the template.
+
+
+
+
Note
+
+ Using brnDialogTriggerFor outside of the current menu seems to close the menu when dismissing the dialog.
+
- Once upon a time, in a far-off land, there was a very lazy king who spent all day lounging on his throne. One day,
- his advisors came to him with a problem: the kingdom was running out of money.
-
-
The King's Plan
-
- The king thought long and hard, and finally came up with a brilliant plan : he would tax the jokes in the kingdom.
-
-
- "After all," he said, "everyone enjoys a good joke, so it's only fair that they should pay for the privilege."
-
-
The Joke Tax
-
The king's subjects were not amused. They grumbled and complained, but the king was firm:
-
-
1st level of puns: 5 gold coins
-
2nd level of jokes: 10 gold coins
-
3rd level of one-liners : 20 gold coins
-
-
- As a result, people stopped telling jokes, and the kingdom fell into a gloom. But there was one person who refused
- to let the king's foolishness get him down: a court jester named Jokester.
-
-
Jokester's Revolt
-
- Jokester began sneaking into the castle in the middle of the night and leaving jokes all over the place: under the
- king's pillow, in his soup, even in the royal toilet. The king was furious, but he couldn't seem to stop Jokester.
-
-
- And then, one day, the people of the kingdom discovered that the jokes left by Jokester were so funny that they
- couldn't help but laugh. And once they started laughing, they couldn't stop.
-
-
The People's Rebellion
-
- The people of the kingdom, feeling uplifted by the laughter, started to tell jokes and puns again, and soon the
- entire kingdom was in on the joke.
-
-
- The king, seeing how much happier his subjects were, realized the error of his ways and repealed the joke tax.
- Jokester was declared a hero, and the kingdom lived happily ever after.
-
-
- The moral of the story is: never underestimate the power of a good laugh and always be careful of bad ideas.
-
+ Once upon a time, in a far-off land, there was a very lazy king who spent all day lounging on his throne. One day,
+ his advisors came to him with a problem: the kingdom was running out of money.
+
+
The King's Plan
+
+ The king thought long and hard, and finally came up with a brilliant plan : he would tax the jokes in the kingdom.
+
+
+ "After all," he said, "everyone enjoys a good joke, so it's only fair that they should pay for the privilege."
+
+
The Joke Tax
+
The king's subjects were not amused. They grumbled and complained, but the king was firm:
+
+
1st level of puns: 5 gold coins
+
2nd level of jokes: 10 gold coins
+
3rd level of one-liners : 20 gold coins
+
+
+ As a result, people stopped telling jokes, and the kingdom fell into a gloom. But there was one person who refused
+ to let the king's foolishness get him down: a court jester named Jokester.
+
+
Jokester's Revolt
+
+ Jokester began sneaking into the castle in the middle of the night and leaving jokes all over the place: under the
+ king's pillow, in his soup, even in the royal toilet. The king was furious, but he couldn't seem to stop Jokester.
+
+
+ And then, one day, the people of the kingdom discovered that the jokes left by Jokester were so funny that they
+ couldn't help but laugh. And once they started laughing, they couldn't stop.
+
+
The People's Rebellion
+
+ The people of the kingdom, feeling uplifted by the laughter, started to tell jokes and puns again, and soon the
+ entire kingdom was in on the joke.
+
+
+ The king, seeing how much happier his subjects were, realized the error of his ways and repealed the joke tax.
+ Jokester was declared a hero, and the kingdom lived happily ever after.
+
+
+ The moral of the story is: never underestimate the power of a good laugh and always be careful of bad ideas.
+
+ `,
})
export default class TypographyPreviewComponent {}
diff --git a/apps/app/src/app/pages/(documentation)/documentation/(ui)/dark-mode.page.ts b/apps/app/src/app/pages/(documentation)/documentation/(ui)/dark-mode.page.ts
index 918ccf7be..c9ae12bdf 100644
--- a/apps/app/src/app/pages/(documentation)/documentation/(ui)/dark-mode.page.ts
+++ b/apps/app/src/app/pages/(documentation)/documentation/(ui)/dark-mode.page.ts
@@ -1,57 +1,59 @@
import { RouteMeta } from '@analogjs/router';
-import { metaWith } from '~/app/shared/meta/meta.util';
import { Component } from '@angular/core';
+import { hlmCode, hlmP } from '@spartan-ng/ui-typography-helm';
+import { CodeComponent } from '~/app/shared/code/code.component';
import { MainSectionDirective } from '~/app/shared/layout/main-section.directive';
-import { SectionIntroComponent } from '~/app/shared/layout/section-intro.component';
-import { PageNavComponent } from '~/app/shared/layout/page-nav/page-nav.component';
import { PageBottomNavLinkComponent } from '~/app/shared/layout/page-bottom-nav/page-bottom-nav-link.component';
import { PageBottomNavComponent } from '~/app/shared/layout/page-bottom-nav/page-bottom-nav.component';
+import { PageNavComponent } from '~/app/shared/layout/page-nav/page-nav.component';
+import { SectionIntroComponent } from '~/app/shared/layout/section-intro.component';
import { SectionSubHeadingComponent } from '~/app/shared/layout/section-sub-heading.component';
-import { hlmCode, hlmP } from '@spartan-ng/ui-typography-helm';
-import { CodeComponent } from '~/app/shared/code/code.component';
+import { metaWith } from '~/app/shared/meta/meta.util';
export const routeMeta: RouteMeta = {
- data: { breadcrumb: 'Dark Mode' },
- meta: metaWith('spartan - Dark Mode', 'Adding dark mode to your site.'),
- title: 'spartan - Dark Mode',
+ data: { breadcrumb: 'Dark Mode' },
+ meta: metaWith('spartan - Dark Mode', 'Adding dark mode to your site.'),
+ title: 'spartan - Dark Mode',
};
@Component({
- selector: 'spartan-dark-mode',
- standalone: true,
- imports: [
- MainSectionDirective,
- SectionIntroComponent,
- PageBottomNavComponent,
- PageBottomNavLinkComponent,
- PageNavComponent,
- SectionSubHeadingComponent,
- CodeComponent,
- ],
- template: `
-
-
-
-
- spartan/ui is built on TailwindCSS with custom CSS variables. These variables
- change based on whether or not a dark class is applied to the root element of
- your page.
-
+ spartan/ui
+ is built on TailwindCSS with custom CSS variables. These variables change based on whether or not a
+ dark
+ class is applied to the root element of your page.
+
+
+
+
+
+
+
+ `,
})
export default class DarkModePageComponent {}
diff --git a/apps/app/src/app/pages/(documentation)/documentation/(ui)/figma.page.ts b/apps/app/src/app/pages/(documentation)/documentation/(ui)/figma.page.ts
index 14d152b36..b3a4a0226 100644
--- a/apps/app/src/app/pages/(documentation)/documentation/(ui)/figma.page.ts
+++ b/apps/app/src/app/pages/(documentation)/documentation/(ui)/figma.page.ts
@@ -1,81 +1,85 @@
import { RouteMeta } from '@analogjs/router';
-import { metaWith } from '~/app/shared/meta/meta.util';
import { Component } from '@angular/core';
+import { HlmAspectRatioDirective } from '@spartan-ng/ui-aspectratio-helm';
+import { hlmCode, hlmP } from '@spartan-ng/ui-typography-helm';
+import { CodeComponent } from '~/app/shared/code/code.component';
import { MainSectionDirective } from '~/app/shared/layout/main-section.directive';
-import { SectionIntroComponent } from '~/app/shared/layout/section-intro.component';
-import { PageNavComponent } from '~/app/shared/layout/page-nav/page-nav.component';
import { PageBottomNavLinkComponent } from '~/app/shared/layout/page-bottom-nav/page-bottom-nav-link.component';
import { PageBottomNavComponent } from '~/app/shared/layout/page-bottom-nav/page-bottom-nav.component';
-import { SectionSubHeadingComponent } from '~/app/shared/layout/section-sub-heading.component';
-import { hlmCode, hlmP } from '@spartan-ng/ui-typography-helm';
-import { CodeComponent } from '~/app/shared/code/code.component';
-import { HlmAspectRatioDirective } from '@spartan-ng/ui-aspectratio-helm';
import { PageNavLinkComponent } from '~/app/shared/layout/page-nav/page-nav-link.component';
+import { PageNavComponent } from '~/app/shared/layout/page-nav/page-nav.component';
+import { SectionIntroComponent } from '~/app/shared/layout/section-intro.component';
+import { SectionSubHeadingComponent } from '~/app/shared/layout/section-sub-heading.component';
+import { metaWith } from '~/app/shared/meta/meta.util';
export const routeMeta: RouteMeta = {
- data: { breadcrumb: 'Figma' },
- meta: metaWith(
- 'spartan - Figma',
- 'Every component recreated in Figma. With customizable props, typography and icons.'
- ),
- title: 'spartan - Figma',
+ data: { breadcrumb: 'Figma' },
+ meta: metaWith(
+ 'spartan - Figma',
+ 'Every component recreated in Figma. With customizable props, typography and icons.',
+ ),
+ title: 'spartan - Figma',
};
@Component({
- selector: 'spartan-figma',
- standalone: true,
- imports: [
- MainSectionDirective,
- SectionIntroComponent,
- PageBottomNavComponent,
- PageBottomNavLinkComponent,
- PageNavComponent,
- SectionSubHeadingComponent,
- CodeComponent,
- HlmAspectRatioDirective,
- PageNavLinkComponent,
- ],
- template: `
-
-
-
-
- Since spartan/ui proudly & shamelessly piggy backs on top of the incredible
- work by shadcn, it can leverage their (non Angular specific) ecosystem.
-
-
- That means we get access to incredibly work like
- Pietro Schirano's
- Figma UI Kit!
-
+ Since
+ spartan/ui
+ proudly & shamelessly piggy backs on top of the incredible work by
+ shadcn,
+ it can leverage their (non Angular specific) ecosystem.
+
+
+ That means we get access to incredibly work like
+
+ Pietro Schirano's
+
+ Figma UI Kit!
+
+
+
+
+
+ Grab a copy
+
+ https://www.figma.com/community/file/1203061493325953101
+
+
+
+
+
+
-
-
-
- `,
+
+
+
+ `,
})
export default class FigmaPageComponent {}
diff --git a/apps/app/src/app/pages/(documentation)/documentation/(ui)/installation.page.ts b/apps/app/src/app/pages/(documentation)/documentation/(ui)/installation.page.ts
index 6f9cec7a1..56c00f95d 100644
--- a/apps/app/src/app/pages/(documentation)/documentation/(ui)/installation.page.ts
+++ b/apps/app/src/app/pages/(documentation)/documentation/(ui)/installation.page.ts
@@ -1,46 +1,46 @@
import { RouteMeta } from '@analogjs/router';
-import { metaWith } from '~/app/shared/meta/meta.util';
import { Component } from '@angular/core';
+import { RouterLink } from '@angular/router';
+import { radixChevronRight, radixExclamationTriangle } from '@ng-icons/radix-icons';
+import { HlmAlertModule } from '@spartan-ng/ui-alert-helm';
+import { HlmButtonDirective } from '@spartan-ng/ui-button-helm';
+import { HlmIconComponent, provideIcons } from '@spartan-ng/ui-icon-helm';
+import { hlmCode, hlmP } from '@spartan-ng/ui-typography-helm';
+import { CodeComponent } from '~/app/shared/code/code.component';
import { MainSectionDirective } from '~/app/shared/layout/main-section.directive';
-import { SectionIntroComponent } from '~/app/shared/layout/section-intro.component';
-import { PageNavComponent } from '~/app/shared/layout/page-nav/page-nav.component';
import { PageBottomNavLinkComponent } from '~/app/shared/layout/page-bottom-nav/page-bottom-nav-link.component';
import { PageBottomNavComponent } from '~/app/shared/layout/page-bottom-nav/page-bottom-nav.component';
-import { SectionSubHeadingComponent } from '~/app/shared/layout/section-sub-heading.component';
-import { hlmCode, hlmP } from '@spartan-ng/ui-typography-helm';
-import { CodeComponent } from '~/app/shared/code/code.component';
-import { HlmButtonDirective } from '@spartan-ng/ui-button-helm';
-import { HlmIconComponent, provideIcons } from '@spartan-ng/ui-icon-helm';
-import { RouterLink } from '@angular/router';
-import { radixChevronRight, radixExclamationTriangle } from '@ng-icons/radix-icons';
import { PageNavLinkComponent } from '~/app/shared/layout/page-nav/page-nav-link.component';
-import { HlmAlertModule } from '@spartan-ng/ui-alert-helm';
+import { PageNavComponent } from '~/app/shared/layout/page-nav/page-nav.component';
+import { SectionIntroComponent } from '~/app/shared/layout/section-intro.component';
+import { SectionSubHeadingComponent } from '~/app/shared/layout/section-sub-heading.component';
+import { metaWith } from '~/app/shared/meta/meta.util';
export const routeMeta: RouteMeta = {
- data: { breadcrumb: 'Installation' },
- meta: metaWith('spartan - Installation', 'Getting up and running with spartan'),
- title: 'spartan - Installation',
+ data: { breadcrumb: 'Installation' },
+ meta: metaWith('spartan - Installation', 'Getting up and running with spartan'),
+ title: 'spartan - Installation',
};
@Component({
- selector: 'spartan-installation',
- standalone: true,
- imports: [
- MainSectionDirective,
- SectionIntroComponent,
- PageBottomNavComponent,
- PageBottomNavLinkComponent,
- PageNavComponent,
- SectionSubHeadingComponent,
- CodeComponent,
- HlmButtonDirective,
- HlmIconComponent,
- RouterLink,
- PageNavLinkComponent,
- HlmAlertModule,
- ],
- providers: [provideIcons({ radixChevronRight, radixExclamationTriangle })],
- template: `
+ selector: 'spartan-installation',
+ standalone: true,
+ imports: [
+ MainSectionDirective,
+ SectionIntroComponent,
+ PageBottomNavComponent,
+ PageBottomNavLinkComponent,
+ PageNavComponent,
+ SectionSubHeadingComponent,
+ CodeComponent,
+ HlmButtonDirective,
+ HlmIconComponent,
+ RouterLink,
+ PageNavLinkComponent,
+ HlmAlertModule,
+ ],
+ providers: [provideIcons({ radixChevronRight, radixExclamationTriangle })],
+ template: `
diff --git a/apps/app/src/app/pages/(documentation)/documentation/(ui)/theming.page.ts b/apps/app/src/app/pages/(documentation)/documentation/(ui)/theming.page.ts
index 9d317fef0..49ad18e3e 100644
--- a/apps/app/src/app/pages/(documentation)/documentation/(ui)/theming.page.ts
+++ b/apps/app/src/app/pages/(documentation)/documentation/(ui)/theming.page.ts
@@ -1,236 +1,250 @@
import { RouteMeta } from '@analogjs/router';
-import { metaWith } from '~/app/shared/meta/meta.util';
import { Component } from '@angular/core';
+import { HlmAlertDirective } from '@spartan-ng/ui-alert-helm';
+import { hlmCode, hlmH4, hlmP, hlmSmall } from '@spartan-ng/ui-typography-helm';
+import { CodeComponent } from '~/app/shared/code/code.component';
import { MainSectionDirective } from '~/app/shared/layout/main-section.directive';
-import { SectionIntroComponent } from '~/app/shared/layout/section-intro.component';
-import { PageNavComponent } from '~/app/shared/layout/page-nav/page-nav.component';
import { PageBottomNavLinkComponent } from '~/app/shared/layout/page-bottom-nav/page-bottom-nav-link.component';
import { PageBottomNavComponent } from '~/app/shared/layout/page-bottom-nav/page-bottom-nav.component';
-import { SectionSubHeadingComponent } from '~/app/shared/layout/section-sub-heading.component';
-import { hlmCode, hlmH4, hlmP, hlmSmall } from '@spartan-ng/ui-typography-helm';
-import { CodeComponent } from '~/app/shared/code/code.component';
-import { HlmAlertDirective } from '@spartan-ng/ui-alert-helm';
import { PageNavLinkComponent } from '~/app/shared/layout/page-nav/page-nav-link.component';
+import { PageNavComponent } from '~/app/shared/layout/page-nav/page-nav.component';
+import { SectionIntroComponent } from '~/app/shared/layout/section-intro.component';
+import { SectionSubHeadingComponent } from '~/app/shared/layout/section-sub-heading.component';
+import { metaWith } from '~/app/shared/meta/meta.util';
export const routeMeta: RouteMeta = {
- data: { breadcrumb: 'Theming' },
- meta: metaWith('spartan - Theming', 'Using CSS Variables for theming.'),
- title: 'spartan - Theming',
+ data: { breadcrumb: 'Theming' },
+ meta: metaWith('spartan - Theming', 'Using CSS Variables for theming.'),
+ title: 'spartan - Theming',
};
@Component({
- selector: 'spartan-theming',
- standalone: true,
- imports: [
- MainSectionDirective,
- SectionIntroComponent,
- PageBottomNavComponent,
- PageBottomNavLinkComponent,
- PageNavComponent,
- SectionSubHeadingComponent,
- CodeComponent,
- HlmAlertDirective,
- PageNavLinkComponent,
- ],
- template: `
-
-
-
-
- spartan/ui is built on TailwindCSS with custom CSS variables:
-
-
-
- Convention
-
-
- As shadcn, we use a simple background and
- foreground convention for colors. The
- background variable is used for the background color of the component and the
- foreground variable is used for the text color.
-
-
- The background suffix is omitted when the variable is used for the background
- color of the component.
-
-
Given the following CSS variables:
-
+
+
+ spartan/ui
+ is built on TailwindCSS with custom CSS variables:
+
+
+
+ Convention
+
+
+ As shadcn, we use a simple
+ background
+ and
+ foreground
+ convention for colors. The
+ background
+ variable is used for the background color of the component and the
+ foreground
+ variable is used for the text color.
+
+
+ The
+ background
+ suffix is omitted when the variable is used for the background color of the component.
+
+
Given the following CSS variables:
+
-
- The background color of the following component will be
- hsl(var(--primary)) and the foreground color
- will be hsl(var(--primary-foreground)).
-
-
-
-
- CSS variables must be defined without color space function.
- See the
-
- Tailwind CSS documentation
-
- for more information.
-
-
-
+ />
+
+ The
+ background
+ color of the following component will be
+ hsl(var(--primary))
+ and the
+ foreground
+ color will be
+ hsl(var(--primary-foreground))
+ .
+
+
+
+
+ CSS variables must be defined without color space function.
+ See the
+
+ Tailwind CSS documentation
+
+ for more information.
+
+
+
- List of variables
-
-
Here's the list of variables available for customization:
-
-
-
-
- Default background color of <body>,... etc.
- List of variables
+
+
Here's the list of variables available for customization:
+
+
+
+
+ Default background color of <body>,... etc.
+
-
+ />
+
-
- Muted backgrounds such as <hlm-sekleton/>
-
+ Muted backgrounds such as <hlm-sekleton/>
+
-
+ />
+
-
- Background color for <div hlmCard>...</>
-
+ Background color for <div hlmCard>...</>
+
-
+ />
+
-
- Background color for popovers such as <brn-popover>...</>
-
+ Background color for popovers such as <brn-popover>...</>
+
-
+ />
+
-
- Default border color
-
+ Default border color
+
-
+ />
+
-
- Border color for inputs such as <input hlmInput />, <textarea hlmInput >...</>
-
+ Border color for inputs such as <input hlmInput />, <textarea hlmInput >...</>
+
-
+ />
+
-
- Primary colors for <button hlmBtn />
-
+ Primary colors for <button hlmBtn />
+
-
+ />
+
-
- Secondary colors for <button hlmBtn />
-
+ Secondary colors for <button hlmBtn />
+
-
+ />
+
-
- Used for accents such as hover effects on <brnMenuItem hlm/>
-
+ Used for accents such as hover effects on <brnMenuItem hlm/>
+
-
+ />
+
-
- Used for destructive actions such as <button hlmBtn variant="destructive" />
-
+ Used for destructive actions such as <button hlmBtn variant="destructive" />
+
-
+ />
+
-
- Used for focus ring
-
+ Used for focus ring
+
-
+ />
+
-
- Border radius for card, input and buttons
-
+ Border radius for card, input and buttons
+
-
-
-
-
- Adding new colors
-
-
- To add new colors, you need to add them to your CSS file and to your
- tailwind.config.js file.
-
-
app/src/styles.css
- Adding new colors
+
+
+ To add new colors, you need to add them to your CSS file and to your
+ tailwind.config.js
+ file.
+
+
app/src/styles.css
+
-
tailwind.config.js
-
-
- You can now use the
- warning utility class in your components.
-
- Warning
'
- />
-
+ />
+
- Other color formats
-
-
- We recommend using
- HSL colors
- for theming but you can also use other color formats if you prefer.
-
- spartan allows you to build next-level, full-stack applications with AnalogJs.
-
-
It provides an opinionated stack with a single command and a set of accessible UI primitives.
- spartan/stack
-
- The spartan/stack is a collection of technologies that provide you with a
- typesafe developer experience from the template all the way to the database.
-
-
- While we keep updating the stack to provide the best available technologies,
- spartan/stack is currently made up of the following:
- Supabase, Angular,
- tRPC, Tailwind,
- AnalogJs, Nx, and
- Drizzle
-
- spartan/ui is built on the
- spartan/ui/brain library that provides accessible, but unstyled primitives that
- build the foundation of an inclusive user interface.
-
-
- On top we put spartan/ui/helm library that gives our primitives a beautifully
- designed shadcn look.
-
+ spartan
+ allows you to build next-level, full-stack applications with AnalogJs.
+
+
It provides an opinionated stack with a single command and a set of accessible UI primitives.
+ spartan/stack
+
+ The
+ spartan/stack
+ is a collection of technologies that provide you with a typesafe developer experience from the template all the
+ way to the database.
+
+
+ While we keep updating the stack to provide the best available technologies,
+ spartan/stack
+ is currently made up of the following:
+ Supabase
+ ,
+ Angular
+ ,
+ tRPC
+ ,
+ Tailwind
+ ,
+ AnalogJs
+ ,
+ Nx
+ , and
+ Drizzle
+
+ spartan/ui
+ is built on the
+ spartan/ui/brain
+ library that provides accessible, but unstyled primitives that build the foundation of an inclusive user
+ interface.
+
+
+ On top we put
+ spartan/ui/helm
+ library that gives our primitives a beautifully designed
+ shadcn
+ look.
+
+ FAQ
+
+
+
+ What is spartan/stack
+
+
+
+ It is a collection of full-stack technologies that power end-to-end type-safe Angular development.
+
+
-
-
- What is spartan/ui
-
-
-
- A collection of Angular UI primitives that are both beautiful and accessible.
-
-
+
+
+ What is spartan/ui
+
+
+
+ A collection of Angular UI primitives that are both beautiful and accessible.
+
+
-
-
- What is spartan/ui/brain
-
-
-
- A collection of unstyled UI primitives that provide accessibility out of the box.
-
-
+
+
+ What is spartan/ui/brain
+
+
+
+ A collection of unstyled UI primitives that provide accessibility out of the box.
+
+
-
-
- What is spartan/ui/helm
-
-
-
- Directives, sometimes additional components, that give spartan/brain a shadcn look.
-
-
-
+
+
+ What is spartan/ui/helm
+
+
+
+ Directives, sometimes additional components, that give spartan/brain a shadcn look.
+
+
+
-
-
-
-
-
+
+
+
+
+
-
-
-
-
-
- `,
+
+
+
+
+
+ `,
})
export default class DocsIntroPageComponent {}
diff --git a/apps/app/src/app/pages/(examples)/examples.page.ts b/apps/app/src/app/pages/(examples)/examples.page.ts
index c9c1bf577..befc9feec 100644
--- a/apps/app/src/app/pages/(examples)/examples.page.ts
+++ b/apps/app/src/app/pages/(examples)/examples.page.ts
@@ -1,41 +1,41 @@
import { RouteMeta } from '@analogjs/router';
-import { metaWith } from '~/app/shared/meta/meta.util';
import { Component } from '@angular/core';
import { RouterLink, RouterOutlet } from '@angular/router';
-import { hlmH1, hlmLead } from '@spartan-ng/ui-typography-helm';
import { HlmButtonDirective } from '@spartan-ng/ui-button-helm';
+import { hlmH1, hlmLead } from '@spartan-ng/ui-typography-helm';
+import { metaWith } from '~/app/shared/meta/meta.util';
import { NavLinkDirective } from '~/app/shared/spartan-nav-link.directive';
export const routeMeta: RouteMeta = {
- meta: metaWith('Examples - SPARTAN', 'Examples built with the SPARTAN stack and its UI primitives'),
+ meta: metaWith('Examples - SPARTAN', 'Examples built with the SPARTAN stack and its UI primitives'),
};
@Component({
- selector: 'spartan-examples',
- standalone: true,
- imports: [RouterOutlet, HlmButtonDirective, RouterLink, NavLinkDirective],
- host: {
- class: 'block p-4 pt-6 sm:pb-16 sm:pt-12',
- },
- template: `
-
Check out some examples.
-
- Dashboard, cards, authentication. Some examples built using the components. Use this as a guide to build your own.
-
+ `,
})
export class NotesEmptyComponent {}
diff --git a/apps/app/src/app/pages/(examples)/examples/typography/(typography).page.ts b/apps/app/src/app/pages/(examples)/examples/typography/(typography).page.ts
index 20e7a925b..8c268da17 100644
--- a/apps/app/src/app/pages/(examples)/examples/typography/(typography).page.ts
+++ b/apps/app/src/app/pages/(examples)/examples/typography/(typography).page.ts
@@ -1,128 +1,128 @@
-import { Component } from '@angular/core';
import { RouteMeta } from '@analogjs/router';
-import { metaWith } from '~/app/shared/meta/meta.util';
-import { hlmBlockquote, hlmH1, hlmH2, hlmH3, hlmLead, hlmP, hlmUl } from '@spartan-ng/ui-typography-helm';
+import { Component } from '@angular/core';
import { HlmButtonDirective } from '@spartan-ng/ui-button-helm';
+import { hlmBlockquote, hlmH1, hlmH2, hlmH3, hlmLead, hlmP, hlmUl } from '@spartan-ng/ui-typography-helm';
+import { metaWith } from '~/app/shared/meta/meta.util';
export const routeMeta: RouteMeta = {
- meta: metaWith(
- 'spartan/examples - Typography',
- "SPARTAN comes with helpful directives that enforce consistent styling across your application's typography."
- ),
- title: 'spartan/examples - Typography',
+ meta: metaWith(
+ 'spartan/examples - Typography',
+ "SPARTAN comes with helpful directives that enforce consistent styling across your application's typography.",
+ ),
+ title: 'spartan/examples - Typography',
};
@Component({
- selector: 'spartan-typography',
- standalone: true,
- imports: [HlmButtonDirective],
- host: {
- class: 'block p-2 sm:p-4 pb-16',
- },
- template: `
-
The Joke Tax Chronicles
-
- Once upon a time, in a far-off land, there was a very lazy king who spent all day lounging on his throne. One day,
- his advisors came to him with a problem: the kingdom was running out of money.
-
-
The King's Plan
-
- The king thought long and hard, and finally came up with
- a brilliant plan
- : he would tax the jokes in the kingdom.
-
-
- "After all," he said, "everyone enjoys a good joke, so it's only fair that they should pay for the privilege."
-
-
The Joke Tax
-
The king's subjects were not amused. They grumbled and complained, but the king was firm:
-
-
1st level of puns: 5 gold coins
-
2nd level of jokes: 10 gold coins
-
3rd level of one-liners : 20 gold coins
-
-
- As a result, people stopped telling jokes, and the kingdom fell into a gloom. But there was one person who refused
- to let the king's foolishness get him down: a court jester named Jokester.
-
-
Jokester's Revolt
-
- Jokester began sneaking into the castle in the middle of the night and leaving jokes all over the place: under the
- king's pillow, in his soup, even in the royal toilet. The king was furious, but he couldn't seem to stop Jokester.
-
-
- And then, one day, the people of the kingdom discovered that the jokes left by Jokester were so funny that they
- couldn't help but laugh. And once they started laughing, they couldn't stop.
-
-
The People's Rebellion
-
- The people of the kingdom, feeling uplifted by the laughter, started to tell jokes and puns again, and soon the
- entire kingdom was in on the joke.
-
-
-
-
-
-
-
- King's Treasury
-
-
- People's happiness
-
-
-
-
-
-
- Empty
-
-
- Overflowing
-
-
-
-
- Modest
-
-
- Satisfied
-
-
-
-
- Full
-
-
- Ecstatic
-
-
-
-
-
-
- The king, seeing how much happier his subjects were, realized the error of his ways and repealed the joke tax.
- Jokester was declared a hero, and the kingdom lived happily ever after.
-
-
- The moral of the story is: never underestimate the power of a good laugh and always be careful of bad ideas.
-
+ Once upon a time, in a far-off land, there was a very lazy king who spent all day lounging on his throne. One day,
+ his advisors came to him with a problem: the kingdom was running out of money.
+
+
The King's Plan
+
+ The king thought long and hard, and finally came up with
+ a brilliant plan
+ : he would tax the jokes in the kingdom.
+
+
+ "After all," he said, "everyone enjoys a good joke, so it's only fair that they should pay for the privilege."
+
+
The Joke Tax
+
The king's subjects were not amused. They grumbled and complained, but the king was firm:
+
+
1st level of puns: 5 gold coins
+
2nd level of jokes: 10 gold coins
+
3rd level of one-liners : 20 gold coins
+
+
+ As a result, people stopped telling jokes, and the kingdom fell into a gloom. But there was one person who refused
+ to let the king's foolishness get him down: a court jester named Jokester.
+
+
Jokester's Revolt
+
+ Jokester began sneaking into the castle in the middle of the night and leaving jokes all over the place: under the
+ king's pillow, in his soup, even in the royal toilet. The king was furious, but he couldn't seem to stop Jokester.
+
+
+ And then, one day, the people of the kingdom discovered that the jokes left by Jokester were so funny that they
+ couldn't help but laugh. And once they started laughing, they couldn't stop.
+
+
The People's Rebellion
+
+ The people of the kingdom, feeling uplifted by the laughter, started to tell jokes and puns again, and soon the
+ entire kingdom was in on the joke.
+
+
+
+
+
+
+
+ King's Treasury
+
+
+ People's happiness
+
+
+
+
+
+
+ Empty
+
+
+ Overflowing
+
+
+
+
+ Modest
+
+
+ Satisfied
+
+
+
+
+ Full
+
+
+ Ecstatic
+
+
+
+
+
+
+ The king, seeing how much happier his subjects were, realized the error of his ways and repealed the joke tax.
+ Jokester was declared a hero, and the kingdom lived happily ever after.
+
+
+ The moral of the story is: never underestimate the power of a good laugh and always be careful of bad ideas.
+
+ `,
})
export default class TypographyPageComponent {}
diff --git a/apps/app/src/app/pages/(home).page.ts b/apps/app/src/app/pages/(home).page.ts
index d28ec5370..87c255f6e 100644
--- a/apps/app/src/app/pages/(home).page.ts
+++ b/apps/app/src/app/pages/(home).page.ts
@@ -1,27 +1,27 @@
import { RouteMeta } from '@analogjs/router';
-import { metaWith } from '~/app/shared/meta/meta.util';
import { Component } from '@angular/core';
-import { HlmButtonDirective } from '@spartan-ng/ui-button-helm';
import { RouterLink } from '@angular/router';
+import { provideIcons } from '@ng-icons/core';
+import { radixLayers, radixMix, radixStar } from '@ng-icons/radix-icons';
import { HlmBadgeDirective } from '@spartan-ng/ui-badge-helm';
+import { HlmButtonDirective } from '@spartan-ng/ui-button-helm';
import {
- HlmCardContentDirective,
- HlmCardDescriptionDirective,
- HlmCardDirective,
- HlmCardHeaderDirective,
- HlmCardTitleDirective,
+ HlmCardContentDirective,
+ HlmCardDescriptionDirective,
+ HlmCardDirective,
+ HlmCardHeaderDirective,
+ HlmCardTitleDirective,
} from '@spartan-ng/ui-card-helm';
import { HlmIconComponent } from '@spartan-ng/ui-icon-helm';
-import { provideIcons } from '@ng-icons/core';
-import { radixLayers, radixMix, radixStar } from '@ng-icons/radix-icons';
+import { metaWith } from '~/app/shared/meta/meta.util';
import { ThreeHundredComponent } from './(home)/components/three-hundred.component';
export const routeMeta: RouteMeta = {
- meta: metaWith(
- 'spartan - Cutting-edge tools powering Angular full-stack development',
- 'Build next-level, full-stack applications with AnalogJs and the spartan/stack. Make them accessible and look incredible with spartan/ui.'
- ),
- title: 'spartan - Cutting-edge tools powering Angular full-stack development',
+ meta: metaWith(
+ 'spartan - Cutting-edge tools powering Angular full-stack development',
+ 'Build next-level, full-stack applications with AnalogJs and the spartan/stack. Make them accessible and look incredible with spartan/ui.',
+ ),
+ title: 'spartan - Cutting-edge tools powering Angular full-stack development',
};
const container = 'mx-auto flex flex-col items-center gap-4 text-center';
@@ -29,104 +29,106 @@ const subHeading = 'font-heading text-3xl leading-[1.1] sm:text-3xl md:text-6xl'
const lead = 'leading-normal text-muted-foreground sm:text-xl sm:leading-8';
@Component({
- selector: 'spartan-home',
- standalone: true,
- imports: [
- HlmButtonDirective,
- RouterLink,
- HlmBadgeDirective,
- HlmCardDirective,
- HlmCardHeaderDirective,
- HlmCardTitleDirective,
- HlmCardDescriptionDirective,
- HlmCardContentDirective,
- HlmIconComponent,
- ThreeHundredComponent,
- ],
- host: {
- class: 'block p-4 pb-12 pt-6 sm:pb-24 sm:pt-12',
- },
- providers: [provideIcons({ radixLayers, radixMix, radixStar })],
- template: `
-
-
- The spartan/stack streamlines the setup of end-to-end typesafe Angular
- full-stack applications. It is opinionated and based on insights from working with Angular and Typescript within
- a full-stack environment for a long time. The spartan/stack helps you build your
- applications faster and better.
-
+ Motivation
+
+ The
+ spartan/stack
+ streamlines the setup of end-to-end typesafe Angular full-stack applications. It is opinionated and based on
+ insights from working with Angular and Typescript within a full-stack environment for a long time. The
+ spartan/stack
+ helps you build your applications faster and better.
+
- The Stack
-
The stack to provides the best available cutting-edge technologies. These are currently:
-
-
- Supabase
- - Hosted, scalable database solution. Opensource and super easy to set up.
-
- Let's start with the workspace. The location where your code will reside and the features that meet the needs of
- your users will be implemented.
-
-
- Nx is a next-generation build system that offers first-class monorepo support and strong integrations for all
- well-known JavaScript frameworks. It enables you to use frontend frameworks like Angular or backend frameworks
- like NestJs to architect, test, and build your project at any size.
-
+ Nx
+
+
+ Let's start with the workspace. The location where your code will reside and the features that meet the needs of
+ your users will be implemented.
+
+
+ Nx is a next-generation build system that offers first-class monorepo support and strong integrations for all
+ well-known JavaScript frameworks. It enables you to use frontend frameworks like Angular or backend frameworks
+ like NestJs to architect, test, and build your project at any size.
+
- AnalogJs
-
-
- AnalogJs is a meta-framework for Angular. It provides you with all the benefits of Angular but extends its
- capabilities with even more:
-
+ AnalogJs
+
+
+ AnalogJs is a meta-framework for Angular. It provides you with all the benefits of Angular but extends its
+ capabilities with even more:
+
-
- AnalogJs uses Vite for serving and building as well as Vitest for testing. Vite is a next-generation JavaScript
- bundler that is super fast. It also gives us access to the Vite ecosystem with hundreds of very powerful
- plugins.
-
+
+ AnalogJs uses Vite for serving and building as well as Vitest for testing. Vite is a next-generation JavaScript
+ bundler that is super fast. It also gives us access to the Vite ecosystem with hundreds of very powerful
+ plugins.
+
-
- Another incredible advantage of AnalogJs is that it comes equipped to handle both Server-Side Rendering (SSR)
- and Static Site Generation (SSG) for Angular applications. With AnalogJs, Angular can easily power marketing
- websites, blog pages, and more! As AnalogJs is SSR by default, no further configuration is necessary.
-
-
- Last but not least, AnalogJs supports API (server) routes and file-based routing for Angular apps. In an
- AnalogJs application, the folder hierarchy and filenames determine the routing. You won't ever need to declare a
- route array again.
-
+
+ Another incredible advantage of AnalogJs is that it comes equipped to handle both Server-Side Rendering (SSR)
+ and Static Site Generation (SSG) for Angular applications. With AnalogJs, Angular can easily power marketing
+ websites, blog pages, and more! As AnalogJs is SSR by default, no further configuration is necessary.
+
+
+ Last but not least, AnalogJs supports API (server) routes and file-based routing for Angular apps. In an
+ AnalogJs application, the folder hierarchy and filenames determine the routing. You won't ever need to declare a
+ route array again.
+
- Angular
-
-
- Angular has opinionated routing solutions, a strong HttpClient for making asynchronous web queries, and, my
- personal favorite, an outstanding dependency injection system. Angular provides programmers with all the
- resources they need to create outstanding applications right out of the box.
-
+ Angular
+
+
+ Angular has opinionated routing solutions, a strong HttpClient for making asynchronous web queries, and, my
+ personal favorite, an outstanding dependency injection system. Angular provides programmers with all the
+ resources they need to create outstanding applications right out of the box.
+
- tRPC
-
-
- tRPC stands for TypeScript Remote Procedure Call, and is a lightweight library for remotely calling backend
- functions on the client side. It makes communication between the backend and frontend incredibly easy, taking
- advantage of TypeScript inference to automatically warn you of errors on your client before you even save the
- change on your server file! Using tRPC will feel like using an SDK for your API's server code, giving you
- confidence in your endpoints.
-
+ tRPC
+
+
+ tRPC stands for TypeScript Remote Procedure Call, and is a lightweight library for remotely calling backend
+ functions on the client side. It makes communication between the backend and frontend incredibly easy, taking
+ advantage of TypeScript inference to automatically warn you of errors on your client before you even save the
+ change on your server file! Using tRPC will feel like using an SDK for your API's server code, giving you
+ confidence in your endpoints.
+
- Drizzle
-
-
- We're just a few steps away from having complete type safety from our database to the template generating the
- DOM. Drizzle is the tool that will bring us there. Drizzle is a Node.js and TypeScript ORM. It allows you to
- create performant SQL queries with autocompletion powered by TypeScript. They also have incredible memes!
-
+ Drizzle
+
+
+ We're just a few steps away from having complete type safety from our database to the template generating the
+ DOM. Drizzle is the tool that will bring us there. Drizzle is a Node.js and TypeScript ORM. It allows you to
+ create performant SQL queries with autocompletion powered by TypeScript. They also have incredible memes!
+
- Supabase
-
-
- PostgreSQL is one of the world's most scalable databases. It is a sophisticated object-relational system
- applying SQL. Postgres allows you to securely store vast quantities of complex data. It enables developers to
- build the most sophisticated programs, carry out administrative operations, and establish integral environments.
- It is an open-source technology trusted by millions of developers.
-
-
- It turns out that every Supabase project is powered by a dedicated PostgreSQL database. Supabase is a fantastic
- open-source Firebase replacement powered by the aforementioned Postgres database. It also provides a lot more
- features as your project expands and becomes more involved.
-
+ Supabase
+
+
+ PostgreSQL is one of the world's most scalable databases. It is a sophisticated object-relational system
+ applying SQL. Postgres allows you to securely store vast quantities of complex data. It enables developers to
+ build the most sophisticated programs, carry out administrative operations, and establish integral environments.
+ It is an open-source technology trusted by millions of developers.
+
+
+ It turns out that every Supabase project is powered by a dedicated PostgreSQL database. Supabase is a fantastic
+ open-source Firebase replacement powered by the aforementioned Postgres database. It also provides a lot more
+ features as your project expands and becomes more involved.
+
- TailwindCSS
-
- Finally, every good application needs a great UI. Although it's easier said than done, there are tools that help
- us do our best work. Tailwind is one of those essential tools for me. Tailwind is "a utility-first CSS framework
- packed with classes like flex, pt-4,
- text-center and rotate-90."
-
-
- These utility classes let you modify the layout, color, spacing, font, shadows, and more to create a distinctive
- component design without leaving your HTML or adding any additional CSS code.
-
+ TailwindCSS
+
+ Finally, every good application needs a great UI. Although it's easier said than done, there are tools that help
+ us do our best work. Tailwind is one of those essential tools for me. Tailwind is "a utility-first CSS framework
+ packed with classes like
+ flex
+ ,
+ pt-4
+ ,
+ text-center
+ and
+ rotate-90
+ ."
+
+
+ These utility classes let you modify the layout, color, spacing, font, shadows, and more to create a distinctive
+ component design without leaving your HTML or adding any additional CSS code.
+
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- `,
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ `,
})
export default class AccordionPageComponent {}
diff --git a/apps/app/src/app/pages/(stack)/stack/[...not-found].page.ts b/apps/app/src/app/pages/(stack)/stack/[...not-found].page.ts
index 511e522dc..e1575bd36 100644
--- a/apps/app/src/app/pages/(stack)/stack/[...not-found].page.ts
+++ b/apps/app/src/app/pages/(stack)/stack/[...not-found].page.ts
@@ -1,25 +1,25 @@
import { RouteMeta } from '@analogjs/router';
-import { metaWith } from '~/app/shared/meta/meta.util';
import { Component } from '@angular/core';
import { hlmMuted } from '@spartan-ng/ui-typography-helm';
import { MainSectionDirective } from '~/app/shared/layout/main-section.directive';
+import { metaWith } from '~/app/shared/meta/meta.util';
export const routeMeta: RouteMeta = {
- data: { breadcrumb: 'Not Found' },
- meta: metaWith('spartan/stack - Page not found', 'Seems like you got lost browsing the spartan/stack.'),
- title: 'spartan/stack - Page not found',
+ data: { breadcrumb: 'Not Found' },
+ meta: metaWith('spartan/stack - Page not found', 'Seems like you got lost browsing the spartan/stack.'),
+ title: 'spartan/stack - Page not found',
};
@Component({
- selector: 'spartan-stack-not-found',
- standalone: true,
- imports: [MainSectionDirective],
- template: `
-
-
+
+ `,
})
export default class ComponentsNotFoundPageComponent {}
diff --git a/apps/app/src/app/pages/(stack)/stack/index.page.ts b/apps/app/src/app/pages/(stack)/stack/index.page.ts
index cba4a94a0..bebace707 100644
--- a/apps/app/src/app/pages/(stack)/stack/index.page.ts
+++ b/apps/app/src/app/pages/(stack)/stack/index.page.ts
@@ -1,6 +1,6 @@
import { RouteMeta } from '@analogjs/router';
export const routeMeta: RouteMeta = {
- redirectTo: '/stack/overview',
- pathMatch: 'full',
+ redirectTo: '/stack/overview',
+ pathMatch: 'full',
};
diff --git a/apps/app/src/app/pages/(stack)/stack/installation.page.ts b/apps/app/src/app/pages/(stack)/stack/installation.page.ts
index d5721ce1e..0bd2fb0dd 100644
--- a/apps/app/src/app/pages/(stack)/stack/installation.page.ts
+++ b/apps/app/src/app/pages/(stack)/stack/installation.page.ts
@@ -1,135 +1,143 @@
import { RouteMeta } from '@analogjs/router';
-import { metaWith } from '~/app/shared/meta/meta.util';
import { Component } from '@angular/core';
-import { MainSectionDirective } from '~/app/shared/layout/main-section.directive';
-import { SectionIntroComponent } from '~/app/shared/layout/section-intro.component';
-import { SectionSubHeadingComponent } from '~/app/shared/layout/section-sub-heading.component';
-import { PageBottomNavComponent } from '~/app/shared/layout/page-bottom-nav/page-bottom-nav.component';
-import { PageBottomNavLinkComponent } from '~/app/shared/layout/page-bottom-nav/page-bottom-nav-link.component';
-import { hlmCode, hlmH4, hlmP } from '@spartan-ng/ui-typography-helm';
-import { PageNavComponent } from '~/app/shared/layout/page-nav/page-nav.component';
-import { PageNavLinkComponent } from '~/app/shared/layout/page-nav/page-nav-link.component';
-import { CodeComponent } from '~/app/shared/code/code.component';
-import { TabsComponent } from '~/app/shared/layout/tabs.component';
-import { HlmAlertModule } from '@spartan-ng/ui-alert-helm';
-import { HlmIconComponent } from '@spartan-ng/ui-icon-helm';
+import { RouterLink } from '@angular/router';
import { provideIcons } from '@ng-icons/core';
import { radixChevronRight, radixExclamationTriangle } from '@ng-icons/radix-icons';
+import { HlmAlertModule } from '@spartan-ng/ui-alert-helm';
import { HlmButtonDirective } from '@spartan-ng/ui-button-helm';
+import { HlmIconComponent } from '@spartan-ng/ui-icon-helm';
+import { hlmCode, hlmH4, hlmP } from '@spartan-ng/ui-typography-helm';
import { AccordionPreviewComponent } from '~/app/pages/(components)/components/(accordion)/accordion.preview';
import { CodePreviewDirective } from '~/app/shared/code/code-preview.directive';
-import { RouterLink } from '@angular/router';
+import { CodeComponent } from '~/app/shared/code/code.component';
+import { MainSectionDirective } from '~/app/shared/layout/main-section.directive';
+import { PageBottomNavLinkComponent } from '~/app/shared/layout/page-bottom-nav/page-bottom-nav-link.component';
+import { PageBottomNavComponent } from '~/app/shared/layout/page-bottom-nav/page-bottom-nav.component';
+import { PageNavLinkComponent } from '~/app/shared/layout/page-nav/page-nav-link.component';
+import { PageNavComponent } from '~/app/shared/layout/page-nav/page-nav.component';
+import { SectionIntroComponent } from '~/app/shared/layout/section-intro.component';
+import { SectionSubHeadingComponent } from '~/app/shared/layout/section-sub-heading.component';
+import { TabsComponent } from '~/app/shared/layout/tabs.component';
+import { metaWith } from '~/app/shared/meta/meta.util';
export const routeMeta: RouteMeta = {
- data: { breadcrumb: 'Installation' },
- meta: metaWith('spartan/stack - Installation', 'Get up and running with the spartan/stack.'),
- title: 'spartan/stack - Installation',
+ data: { breadcrumb: 'Installation' },
+ meta: metaWith('spartan/stack - Installation', 'Get up and running with the spartan/stack.'),
+ title: 'spartan/stack - Installation',
};
@Component({
- selector: 'spartan-stack-installation',
- standalone: true,
- imports: [
- MainSectionDirective,
- SectionIntroComponent,
- SectionSubHeadingComponent,
- PageBottomNavComponent,
- PageBottomNavLinkComponent,
- PageNavComponent,
- PageNavLinkComponent,
- CodeComponent,
- TabsComponent,
- HlmAlertModule,
- HlmIconComponent,
- HlmButtonDirective,
- AccordionPreviewComponent,
- CodePreviewDirective,
- RouterLink,
- ],
- providers: [provideIcons({ radixExclamationTriangle, radixChevronRight })],
- template: `
-
-
-
- Setting up your Nx workspace
-
-
- The spartan/stack starts with an Nx workspace. Even better, AnalogJs comes with
- first-class Nx support and a preset, which will set up our favorite meta-framework for you out of the box!
-
-
-
Enter the following command:
-
-
-
-
You will be asked to choose a folder name for your workspace:
-
-
Pick whichever fits your project the best!
-
-
Then, you will be prompted to answer the following questions:
-
-
- Give your application a meaningful name (we will refer to this as
- [YOUR_APP_NAME] in this guide) and press y/Y to
- answer both questions about adding TailwindCSS and tRPC to your application.
-
-
- AnalogJs, Angular, TailwindCSS, and tRPC
-
-
- With this simple command, you will have a working Nx workspace that includes an example AnalogJs application,
- with TailwindCSS and tRPC already set up!
-
-
-
Watch the video below to become more familiar with the AnalogJs setup.
-
-
-
-
-
-
-
- Drizzle
-
- Currently, we use an in-memory array to store the notes of our example application. Let's persist our data in an
- actual database. To interact with our DB, we will use the Drizzle ORM. Let's first install the necessary
- dependencies:
-
-
-
-
-
-
Dealing with postgres & CommonJs
-
- postgres is a CommonJs package, which directly exposes an augmented function.
- Therefore, we need to adjust our [YOUR_APP_NAME]/tsconfig.json file to tell
- the TS compiler how to deal with it properly. Add the following line to
- compilerOptions:
-
-
-
-
-
- Finally, we need to set up our DB connection and create a typescript schema that matches our database structure.
- We will add a [YOUR_APP_NAME]/src/db.ts file with the following content:
-
-
-
+
+ Setting up your Nx workspace
+
+
+ The
+ spartan/stack
+ starts with an Nx workspace. Even better, AnalogJs comes with first-class Nx support and a preset, which will
+ set up our favorite meta-framework for you out of the box!
+
+
+
Enter the following command:
+
+
+
+
You will be asked to choose a folder name for your workspace:
+
+
Pick whichever fits your project the best!
+
+
Then, you will be prompted to answer the following questions:
+
+
+ Give your application a meaningful name (we will refer to this as
+ [YOUR_APP_NAME]
+ in this guide) and press
+ y/Y
+ to answer both questions about adding TailwindCSS and tRPC to your application.
+
+
+ AnalogJs, Angular, TailwindCSS, and tRPC
+
+
+ With this simple command, you will have a working Nx workspace that includes an example AnalogJs application,
+ with TailwindCSS and tRPC already set up!
+
+
+
Watch the video below to become more familiar with the AnalogJs setup.
+
+
+
+
+
+
+
+ Drizzle
+
+ Currently, we use an in-memory array to store the notes of our example application. Let's persist our data in an
+ actual database. To interact with our DB, we will use the Drizzle ORM. Let's first install the necessary
+ dependencies:
+
+
+
+
+
+
Dealing with postgres & CommonJs
+
+ postgres
+ is a CommonJs package, which directly exposes an augmented function. Therefore, we need to adjust our
+ [YOUR_APP_NAME]/tsconfig.json
+ file to tell the TS compiler how to deal with it properly. Add the following line to
+ compilerOptions
+ :
+
+
+
+
+
+ Finally, we need to set up our DB connection and create a typescript schema that matches our database structure.
+ We will add a
+ [YOUR_APP_NAME]/src/db.ts
+ file with the following content:
+
+
+
-
-
- We first declare our notes table and make Drizzle aware of all its columns and their respective types. We then
- declare some helper types we will use when retrieving and creating our Notes. Finally, we initialize our
- Postgres client and pass it to Drizzle
-
-
-
- This is where the spartan/stack starts to flex its muscles. We can now use this
- schema in our component. Go to
- [YOUR_APP_NAME]/src/app/pages/analog-welcome.component.ts and replace the
- following line:
-
-
-
-
-
with:
-
-
-
-
- Excellent! We are only a few steps away from end-to-end type-safety for our Angular application. We take this
- opportunity and delete the boilerplate file:[YOUR_APP_NAME]/src/note.ts.
-
-
Our types now come directly from our database!
-
- We continue and set up our backend to use Drizzle to read, create, and delete our notes. Adjust the
- [YOUR_APP_NAME]/src/server/trpc/routers/notes.ts file to get the below output:
-
-
+ We first declare our notes table and make Drizzle aware of all its columns and their respective types. We then
+ declare some helper types we will use when retrieving and creating our Notes. Finally, we initialize our
+ Postgres client and pass it to Drizzle
+
+
+
+ This is where the
+ spartan/stack
+ starts to flex its muscles. We can now use this schema in our component. Go to
+ [YOUR_APP_NAME]/src/app/pages/analog-welcome.component.ts
+ and replace the following line:
+
+
+
+
+
with:
+
+
+
+
+ Excellent! We are only a few steps away from end-to-end type-safety for our Angular application. We take this
+ opportunity and delete the boilerplate file:
+ [YOUR_APP_NAME]/src/note.ts
+ .
+
+
Our types now come directly from our database!
+
+ We continue and set up our backend to use Drizzle to read, create, and delete our notes. Adjust the
+ [YOUR_APP_NAME]/src/server/trpc/routers/notes.ts
+ file to get the below output:
+
+
-
-
- Awesome! This is all we need to persist our data. Now that we are using type-safe database interactions and also
- leverage Drizzle's generated schemas in your components only one thing is missing:
- A database!
-
-
- Supabase
-
- We will use Supabase as our database infrastructure provider. There are two ways to get up and running with
- Supabase:
-
-
-
-
Connecting directly to your managed instance on supabase.com
-
Locally using Docker
-
-
-
-
-
Option 1: Connecting to supabase.com instance
-
- This way is super easy! Simply by creating your account, you will also have set up your first project. This
- means that you are ready to connect to your projects database already!
-
-
- Let's connect our application to our Supabase Postgres instance: Add a
- .env file at the root of your Nx workspace and add the following code
- snippet:
-
-
-
-
-
-
-
Make sure to add .env to your .gitignore file.
-
- You do not want to accidentally commit your secrets to GitHub. To exclude the file from git add a new line
- to the
- .gitignore-file and add .env on a new
- line.
-
-
-
-
-
-
Option 2: Connecting to local Supabase instance
-
- Supabase also allows you to run a version of their system locally! To get up and running you can follow this
- guide! They do a great job explaining how to get started and there is plenty of resources to help you if you
- get stuck. If you want the quick and dirty way and are on a Mac. Here is what I did to get up and running:
-
-
+ Awesome! This is all we need to persist our data. Now that we are using type-safe database interactions and also
+ leverage Drizzle's generated schemas in your components only one thing is missing:
+ A database!
+
+
+ Supabase
+
+ We will use Supabase as our database infrastructure provider. There are two ways to get up and running with
+ Supabase:
+
+
+
+
Connecting directly to your managed instance on supabase.com
+
Locally using Docker
+
+
+
+
+
Option 1: Connecting to supabase.com instance
+
+ This way is super easy! Simply by creating your account, you will also have set up your first project. This
+ means that you are ready to connect to your projects database already!
+
+
+ Let's connect our application to our Supabase Postgres instance: Add a
+ .env
+ file at the root of your Nx workspace and add the following code snippet:
+
+
+
+
+
+
+
Make sure to add .env to your .gitignore file.
+
+ You do not want to accidentally commit your secrets to GitHub. To exclude the file from git add a new line
+ to the
+ .gitignore
+ -file and add
+ .env
+ on a new line.
+
+
+
+
+
+
Option 2: Connecting to local Supabase instance
+
+ Supabase also allows you to run a version of their system locally! To get up and running you can follow this
+ guide! They do a great job explaining how to get started and there is plenty of resources to help you if you
+ get stuck. If you want the quick and dirty way and are on a Mac. Here is what I did to get up and running:
+
- Make sure Docker is running and configured correctly! I had Docker already installed and running. However,
- my setup is not compatible with the config Supabase expects by default.
-
-
-
-
To get it to work for now I ran:
-
-
- The previous step can take a while as all the docker images have to be downloaded first. However, once
- everything completes you will see a console output that looks like this:
-
-
- Start Supabase services
+
+
+
+
+
+
Important: Make sure Docker is running
+
+ Make sure Docker is running and configured correctly! I had Docker already installed and running. However,
+ my setup is not compatible with the config Supabase expects by default.
+
+
+
+
To get it to work for now I ran:
+
+
+ The previous step can take a while as all the docker images have to be downloaded first. However, once
+ everything completes you will see a console output that looks like this:
+
+
+
-
- Take your cyber-security hat off for a minute (we are working locally after all) and copy the connection
- string:
-
-
-
-
-
- Add a .env file at the root of your Nx workspace and add the connection
- string like so:
-
-
-
-
Perfect! You should be able to connect to your local Supabase Postgres instance now!
-
-
-
- Setting up the Schema
-
- While Drizzle is adding support for automatic database migrations, I like to keep them explicit and run the
- commands directly against the DB. Until spartan/stack comes with an automated solution like liquibase, let's
- manually run the following command in the SQL-Editor to create our notes table:
-
-
+ Take your cyber-security hat off for a minute (we are working locally after all) and copy the connection
+ string:
+
+
+
+
+
+ Add a
+ .env
+ file at the root of your Nx workspace and add the connection string like so:
+
+
+
+
Perfect! You should be able to connect to your local Supabase Postgres instance now!
+
+
+
+ Setting up the Schema
+
+ While Drizzle is adding support for automatic database migrations, I like to keep them explicit and run the
+ commands directly against the DB. Until spartan/stack comes with an automated solution like liquibase, let's
+ manually run the following command in the SQL-Editor to create our notes table:
+
+
-
- Local Development
-
-
You can now serve the local development server by running the above command.
-
- Build for Production
-
-
- Finally, let's build a production bundle of our application. Run the command above. By default, AnalogJs will
- build a NodeJs-compatible output, which you can run with the following command:
-
-
-
- AnalogJs also supports multiple build presets, which makes it easy to deploy your application to most of the
- major cloud providers. This includes Vercel, Cloudflare, Azure, AWS, and more.
-
- Now that you know how to develop and build your application for production, you are ready to take it to the next
- level. Why don't you make it beautiful and accessible for everyone with spartan/ui?
-
You can now serve the local development server by running the above command.
+
+ Build for Production
+
+
+ Finally, let's build a production bundle of our application. Run the command above. By default, AnalogJs will
+ build a NodeJs-compatible output, which you can run with the following command:
+
+
+
+ AnalogJs also supports multiple build presets, which makes it easy to deploy your application to most of the
+ major cloud providers. This includes Vercel, Cloudflare, Azure, AWS, and more.
+
+ Now that you know how to develop and build your application for production, you are ready to take it to the next
+ level. Why don't you make it beautiful and accessible for everyone with spartan/ui?
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ `,
})
export default class InstallationPageComponent {}
diff --git a/apps/app/src/app/pages/[...not-found].page.ts b/apps/app/src/app/pages/[...not-found].page.ts
index 05d3bbe79..290efaccb 100644
--- a/apps/app/src/app/pages/[...not-found].page.ts
+++ b/apps/app/src/app/pages/[...not-found].page.ts
@@ -1,31 +1,31 @@
import { RouteMeta } from '@analogjs/router';
-import { metaWith } from '~/app/shared/meta/meta.util';
import { Component } from '@angular/core';
-import { hlmH3, hlmMuted } from '@spartan-ng/ui-typography-helm';
-import { HlmSeparatorDirective } from '@spartan-ng/ui-separator-helm';
-import { HlmButtonDirective } from '@spartan-ng/ui-button-helm';
import { RouterLink } from '@angular/router';
+import { HlmButtonDirective } from '@spartan-ng/ui-button-helm';
+import { HlmSeparatorDirective } from '@spartan-ng/ui-separator-helm';
+import { hlmH3, hlmMuted } from '@spartan-ng/ui-typography-helm';
+import { metaWith } from '~/app/shared/meta/meta.util';
export const routeMeta: RouteMeta = {
- data: { breadcrumb: 'Not Found' },
- meta: metaWith('spartan - Page not found', 'Seems like you got lost browsing spartan.'),
- title: 'spartan - Page not found',
+ data: { breadcrumb: 'Not Found' },
+ meta: metaWith('spartan - Page not found', 'Seems like you got lost browsing spartan.'),
+ title: 'spartan - Page not found',
};
@Component({
- selector: 'spartan-not-found',
- standalone: true,
- imports: [HlmSeparatorDirective, HlmButtonDirective, RouterLink],
- host: {
- class: 'h-full flex flex-col items-center justify-center',
- },
- template: `
-
- 
- RG
- 
- 
@@ -33,5 +33,5 @@ export const Default: Story = {
- AN
-