feat(content): add slug to metadata based on filename (#248)

Closes #247
analogjs · Feb 9, 2023 · bf8581a · bf8581a
1 parent 9d5e244
commit bf8581a
Show file tree

Hide file tree

Showing 8 changed files with 39 additions and 2 deletions.
diff --git a/apps/blog-app/src/app/routes/blog.ts b/apps/blog-app/src/app/routes/blog.ts
@@ -15,7 +15,7 @@ export const routeMeta: RouteMeta = {
   imports: [RouterOutlet, RouterLink, NgFor],
   template: `
     <ng-container *ngFor="let post of posts">
-      <a [routerLink]="post.attributes.slug"> {{ post.attributes.title }}</a> |
+      <a [routerLink]="post.slug"> {{ post.attributes.title }}</a> |
     </ng-container>
     <a routerLink="/about">About</a> |
     <a routerLink="/contact">Contact</a>

diff --git a/apps/docs-app/docs/features/routing/content.md b/apps/docs-app/docs/features/routing/content.md
@@ -146,7 +146,7 @@ export interface PostAttributes {
   template: `
     <ul *ngFor="let post of posts">
       <li>
-        <a [routerLink]="['/blog', 'posts', post.attributes.slug]">
+        <a [routerLink]="['/blog', 'posts', post.slug]">
           {{ post.attributes.title }}</a
         >
       </li>

diff --git a/packages/content/src/lib/content-file.ts b/packages/content/src/lib/content-file.ts
@@ -2,6 +2,7 @@ export interface ContentFile<
   Attributes extends Record<string, any> = Record<string, any>
 > {
   filename: string;
+  slug: string;
   content?: string;
   attributes: Attributes;
 }
diff --git a/packages/content/src/lib/content-files-list-token.spec.ts b/packages/content/src/lib/content-files-list-token.spec.ts
@@ -5,6 +5,9 @@ vi.mock('./get-content-files', () => {
   return {
     getContentFilesList: () => ({
       '/test.md': { title: 'Test' },
+      '/path/to/test.md': { title: 'Test' },
+      '\\path\\to\\test.md': { title: 'Test' },
+      '/path/to/test with spaces.md': { title: 'Test' },
     }),
   };
 });
@@ -14,9 +17,31 @@ describe('CONTENT_FILES_LIST_TOKEN', () => {
     const firstParsedFile = CONTENT_FILES_LIST_TOKEN[0];
     expect(CONTENT_FILES_LIST_TOKEN).toBeTruthy();
     expect(firstParsedFile.filename).toEqual('/test.md');
+    expect(firstParsedFile.slug).toEqual('test');
     expect(firstParsedFile.attributes['title']).toEqual('Test');
   });
 
+  it('should extract the slug from nested path', () => {
+    const { CONTENT_FILES_LIST_TOKEN } = setup();
+    const firstParsedFile = CONTENT_FILES_LIST_TOKEN[1];
+    expect(CONTENT_FILES_LIST_TOKEN).toBeTruthy();
+    expect(firstParsedFile.slug).toEqual('test');
+  });
+
+  it('should extract the slug from nested path (windows)', () => {
+    const { CONTENT_FILES_LIST_TOKEN } = setup();
+    const firstParsedFile = CONTENT_FILES_LIST_TOKEN[2];
+    expect(CONTENT_FILES_LIST_TOKEN).toBeTruthy();
+    expect(firstParsedFile.slug).toEqual('test');
+  });
+
+  it('should extract the slug without spaces', () => {
+    const { CONTENT_FILES_LIST_TOKEN } = setup();
+    const firstParsedFile = CONTENT_FILES_LIST_TOKEN[3];
+    expect(CONTENT_FILES_LIST_TOKEN).toBeTruthy();
+    expect(firstParsedFile.slug).toEqual('test%20with%20spaces');
+  });
+
   function setup() {
     TestBed.configureTestingModule({});
     return {

diff --git a/packages/content/src/lib/content-files-list-token.ts b/packages/content/src/lib/content-files-list-token.ts
@@ -3,6 +3,11 @@ import { InjectionToken } from '@angular/core';
 import { ContentFile } from './content-file';
 import { getContentFilesList } from './get-content-files';
 
+function getSlug(filename: string) {
+  const parts = filename.match(/^(\\|\/)(.+(\\|\/))*(.+)\.(.+)$/);
+  return parts?.length ? parts[4] : '';
+}
+
 export const CONTENT_FILES_LIST_TOKEN = new InjectionToken<ContentFile[]>(
   '@analogjs/content Content Files List',
   {
@@ -16,6 +21,7 @@ export const CONTENT_FILES_LIST_TOKEN = new InjectionToken<ContentFile[]>(
         return {
           filename,
           attributes,
+          slug: encodeURI(getSlug(filename)),
         };
       });
     },

diff --git a/packages/content/src/lib/content.spec.ts b/packages/content/src/lib/content.spec.ts
@@ -62,6 +62,7 @@ Test Content`),
       expect(c.content).toMatch('Test Content');
       expect(c.attributes).toEqual({ slug: 'test' });
       expect(c.filename).toEqual('/src/content/test.md');
+      expect(c.slug).toEqual('test');
     });
     flushMicrotasks();
   }));
@@ -90,6 +91,7 @@ Test Content`),
       expect(c.content).toMatch('Test Content');
       expect(c.attributes).toEqual({ slug: 'custom-slug-test' });
       expect(c.filename).toEqual('/src/content/custom-slug-test.md');
+      expect(c.slug).toEqual('custom-slug-test');
     });
     flushMicrotasks();
   }));

diff --git a/packages/content/src/lib/content.ts b/packages/content/src/lib/content.ts
@@ -34,6 +34,7 @@ export function injectContent<
         return of({
           attributes: {},
           filename,
+          slug: slug || '',
           content: fallback,
         });
       }
@@ -56,6 +57,7 @@ export function injectContent<
 
         return {
           filename,
+          slug: slug || '',
           attributes,
           content,
         };

diff --git a/packages/content/src/lib/inject-content-files.spec.ts b/packages/content/src/lib/inject-content-files.spec.ts
@@ -15,6 +15,7 @@ describe('injectContentFiles', () => {
     const contentFiles: ContentFile<TestAttributes>[] = [
       {
         filename: '/src/content/test.md',
+        slug: 'test',
         attributes: {
           testAttribute1: 'hello world',
           testAttribute2: 2,