feat: add navigation_numbering option (closes #73)

packages/website/src/app/shared/components/header.component.ts

@@ -66,7 +66,7 @@ import { Link } from '../link';
         align-items: center;
         padding: var(--space-xs) var(--space-md);
         flex-wrap: wrap;
-        
+
         .landing & {
           margin: var(--space-lg) auto;
           padding: 0 var(--space-md);

packages/website/src/app/shared/components/sidebar.component.ts

@@ -12,7 +12,7 @@ import { navigate, getCurrentUrlWithoutHash } from '../../router';
       <ul class="links">
         <li *ngFor="let link of links; let index = index">
           <a [href]="makeUrl(link.url)" (click)="openLink($event, link.url)" [class.active]="link.active"
-            >{{ index + 1 }}. {{ link.text }}</a
+            >{{ getNumber(index) }} {{ link.text }}</a
           >
           <ul *ngIf="link.active && link.children" class="sub-links">
             <li *ngFor="let sublink of link.children" [ngClass]="'level-' + sublink.level">
@@ -121,6 +121,7 @@ export class SidebarComponent {
   open: boolean = false;
 
   @Input() links: MenuLink[] = [];
+  @Input() numbering: boolean | undefined = true;
 
   toggleOpen(open?: boolean) {
     this.open = open ?? !this.open;
@@ -138,4 +139,8 @@ export class SidebarComponent {
     }
     this.toggleOpen(false);
   }
+
+  getNumber(index: number) {
+    return this.numbering === false ? '' : `${index + 1}.`;
+  }
 }

packages/website/src/app/shared/frontmatter.ts

@@ -23,12 +23,12 @@ export type FrontMatterData = Partial<{
   level: string;
 }>;
 
-export interface FrontMatterParseResult {
-  meta: FrontMatterData;
+export interface FrontMatterParseResult<ExtraProperties = {}> {
+  meta: FrontMatterData & Partial<ExtraProperties>;
   markdown: string;
 }
 
-export function parseFrontMatter(text: string): FrontMatterParseResult {
+export function parseFrontMatter<E = {}>(text: string): FrontMatterParseResult<E> {
   const [, yaml, markdown] = text.match(frontMatterRegex) || [];
   if (!yaml) {
     return { meta: {}, markdown: text };

packages/website/src/app/shared/loader.ts

@@ -14,15 +14,15 @@ export interface LoaderOptions {
   vars?: string;
 }
 
-export interface FileContents extends FrontMatterParseResult {
+export interface FileContents<E = {}> extends FrontMatterParseResult<E> {
   githubUrl: string;
 }
 
-export async function loadFile(
+export async function loadFile<E = {}>(
   repoPath: string,
   options?: LoaderOptions,
   redirectWrongType = true
-): Promise<FileContents> {
+): Promise<FileContents<E>> {
   const gitHubFileUrl = getFileUrl(repoPath);
   const response = await fetch(gitHubFileUrl);
 
@@ -34,7 +34,7 @@ export async function loadFile(
 
   let text = await response.text();
   text = replaceVariables(text, options?.vars);
-  let { meta, markdown } = parseFrontMatter(text);
+  let { meta, markdown, ...extraProperties } = parseFrontMatter<E>(text);
 
   const currentRoute = getCurrentRoute();
   if (redirectWrongType && meta.type && meta.type !== currentRoute?.id) {
@@ -51,7 +51,8 @@ export async function loadFile(
   return {
     meta,
     markdown,
-    githubUrl: gitHubFileUrl
+    githubUrl: gitHubFileUrl,
+    ...extraProperties
   };
 }
 

packages/website/src/app/workshop/workshop.component.ts

@@ -31,7 +31,11 @@ import { getRepoPath } from '../shared/loader';
     <div (click)="sidebar.toggleOpen(false)" class="full-viewport">
       <app-header [title]="workshop?.shortTitle || 'Workshop'" [sidebar]="sidebar"></app-header>
       <main class="content">
-        <app-sidebar #sidebar="sidebar" [links]="menuLinks"></app-sidebar>
+        <app-sidebar
+          #sidebar="sidebar"
+          [links]="menuLinks"
+          [numbering]="workshop?.meta?.navigation_numbering"
+        ></app-sidebar>
         <app-loader
           id="workshop"
           [loading]="loading"

packages/website/src/app/workshop/workshop.ts

@@ -10,15 +10,20 @@ export interface WorkshopSection {
   markdown: string;
 }
 
-export interface Workshop extends FileContents {
+export interface WorkshopExtraMetadata {
+  navigation_levels: number;
+  navigation_numbering: boolean;
+}
+
+export interface Workshop extends FileContents<WorkshopExtraMetadata> {
   title: string;
   shortTitle?: string;
   sections: WorkshopSection[];
   step: number;
 }
 
 export async function loadWorkshop(repoPath: string, options?: LoaderOptions): Promise<Workshop> {
-  const fileContents = await loadFile(repoPath, options);
+  const fileContents = await loadFile<WorkshopExtraMetadata>(repoPath, options);
   const sections = fileContents.markdown.split(sectionSeparator).map((markdown, index) => {
     const headings = getHeadings(markdown);
     const title = fileContents.meta.sections_title?.[index] ?? headings[0]?.text ?? '';
@@ -34,7 +39,7 @@ export async function loadWorkshop(repoPath: string, options?: LoaderOptions): P
 }
 
 export function createMenuLinks(workshop: Workshop): MenuLink[] {
-  const navigationLevels = (workshop.meta as any)?.navigation_levels ?? 2;
+  const navigationLevels = workshop.meta?.navigation_levels ?? 2;
   return workshop.sections.map((section, index) => {
     const active = index === workshop.step;
     const baseLevel = section.headings[0].level;

template/workshop/workshop.md

@@ -17,6 +17,7 @@ tags: javascript, api, node.js          # Required. Tags for filtering and searc
 #wt_id: <cxa_tracking_id>                # Optional. Set advocacy tracking code for supported links
 #oc_id: <marketing_tracking_id>          # Optional. Set marketing tracking code for supported links
 #navigation_levels: 2                    # Optional. Number of levels displayed in the side menu (default: 2)
+#navigation_numbering: true             # Optional. Enable numbering in the side menu (default: true)
 #sections_title:                         # Optional. Override titles for each section to be displayed in the side bar
 #   - Section 1 title
 #   - Section 2 title

workshops/create-workshop/workshop.md

@@ -116,6 +116,8 @@ tags: javascript, api, node.js          # Required. Tags for filtering and searc
 #audience: students                      # Optional. Audience of the workshop (students, pro devs, etc.)
 #wt_id: <cxa_tracking_id>                # Optional. Set advocacy tracking code for supported links
 #oc_id: <marketing_tracking_id>          # Optional. Set marketing tracking code for supported links
+#navigation_levels: 2                    # Optional. Number of levels displayed in the side menu (default: 2)
+#navigation_numbering: true              # Optional. Enable numbering in the side menu (default: true)
 #sections_title:                         # Optional. Override titles for each section to be displayed in the side bar
 #  - Section 1 title
 #  - Section 2 title