m2s2-cli 0.1.9

CLI for scaffolding M²S² design system projects
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68

import { Component } from '@angular/core';
import { RouterOutlet } from '@angular/router';
import {
  NavbarComponent,
  FooterComponent,
  PageHeaderComponent,
  FeatureCardComponent,
  CtaSectionComponent,
} from '@m2s2/ng-lib';
import { NgNavbarConfig, FooterConfig, PageHeaderConfig, FeatureCardConfig, CtaConfig } from '@m2s2/ng-lib';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrl: './app.component.scss',
  standalone: true,
  imports: [RouterOutlet, NavbarComponent, FooterComponent, PageHeaderComponent, FeatureCardComponent, CtaSectionComponent],
})
export class AppComponent {
  readonly navbarConfig: NgNavbarConfig = {
    brand: '{{name}}',
    brandRouterOutlet: '/',
    isFixed: true,
    buttons: [
      { id: 'home',    title: 'Home',    routerLink: '/' },
      { id: 'about',   title: 'About',   routerLink: '/about' },
      { id: 'contact', title: 'Contact', routerLink: '/contact' },
    ],
  };

  readonly hero: PageHeaderConfig = {
    title: 'Welcome to {{name}}',
    subtitle: 'Built with the M²S² design system — start building something great.',
  };

  readonly features: FeatureCardConfig[] = [
    {
      icon: '🎨',
      title: 'Design Tokens',
      body: 'Consistent colours, spacing, and typography powered by @m2s2/tokens.',
    },
    {
      icon: '⚡',
      title: 'Ready-made Components',
      body: 'Production-quality UI components wired up and ready to use out of the box.',
      featured: true,
    },
    {
      icon: '🚀',
      title: 'Fast by Default',
      body: 'Angular build tooling with optimised production bundles out of the box.',
    },
  ];

  readonly cta: CtaConfig = {
    title: 'Ready to build?',
    body: 'Open src/app/app.component.ts and start replacing this content with your own.',
    label: 'View the docs',
    route: 'https://github.com/M2S2-Engineering-Group',
  };

  readonly footerConfig: FooterConfig = {
    brandName: '{{name}}',
    links: [
      { type: 'github', href: 'https://github.com/M2S2-Engineering-Group' },
    ],
  };
}