fix(design): update links in design package markdowns to absolute pat…

…hs (#2893)

Co-authored-by: Peter Lauck <griest024@gmail.com>

apps/daffio/src/app/docs/resolvers/docs-resolver.service.spec.ts

@@ -66,7 +66,7 @@ describe('DocsResolver', () => {
 
     it('should redirect to the 404 page', () => {
       resolver.resolve(null, <RouterStateSnapshot>{ url: 'my/path' }).subscribe();
-      expect(router.navigate).toHaveBeenCalledWith(['/404']);
+      expect(router.navigate).toHaveBeenCalledWith(['/404'], { skipLocationChange: true });
     });
   });
 });

apps/daffio/src/app/docs/resolvers/docs-resolver.service.ts

@@ -36,7 +36,7 @@ export class DocsResolver<T extends DaffioDoc, V extends DaffioDocList = DaffioD
       .pipe(
         take(1),
         catchError(() => {
-          this.router.navigate(['/404']);
+          this.router.navigate(['/404'], { skipLocationChange: true });
           return EMPTY;
         }),
       );

libs/design/README.md

@@ -2,10 +2,10 @@
 `@daffodil/design` is an Angular component library built to support ecommerce use-cases. The library provides turn-key support for various features like:
 
 * [Pre-Built Components](#components)
-* [Theming](/libs/design/guides/theming.md)
-* [Typography](/libs/design/guides/typography.md)
+* [Theming](/libs/design/scss/theming/README.md)
+* [Typography](/libs/design/scss/typography/README.md)
 * [Accessibility](/libs/design/guides/accessibility.md)
-* [Color](/libs/design/guides/accessibility/color.md)
+* [Color](/libs/design/guides/color.md)
 
 ## Packages
 | Package | Version | Stability |
@@ -23,8 +23,8 @@ Refer to the [Upgrade Guide](/libs/design/guides/upgrading.md).
 ## Components
 
 ### Atoms
-* [Button](/libs/design/src/atoms/button/README.md)
-* [Container](/libs/design/src/atoms/container/README.md)
+* [Button](/libs/design/button/README.md)
+* [Container](/libs/design/container/README.md)
 * [Form](/libs/design/src/atoms/form/README.md)
   * [Checkbox](/libs/design/src/atoms/form/checkbox/README.md)
   * [Checkbox Set](/libs/design/src/atoms/form/checkbox-set/README.md)
@@ -34,26 +34,24 @@ Refer to the [Upgrade Guide](/libs/design/guides/upgrading.md).
   * [Input](/libs/design/src/atoms/form/input/README.md)
   * [Radio](/libs/design/src/atoms/form/radio/README.md)
   * [Radio Set](/libs/design/src/atoms/form/radio-set/README.md)
-  * [Select](/libs/design/src/atoms/form/select/README.md)
+  * [Native Select](/libs/design/src/atoms/form/native-select/README.md)
   * [Quantity Field](/libs/design/src/atoms/form/quantity-field/README.md)
-* [Image](/libs/design/src/atoms/image/README.md)
-* [Loading Icon](/libs/design/src/atoms/loading-icon/README.md)
+* [Image](/libs/design/image/README.md)
+* [Loading Icon](/libs/design/loading-icon/README.md)
 
 ### Molecules
-* [Accordion](/libs/design/src/molecules/accordion/README.md)
-* [Article](/libs/design/src/molecules/article/README.md)
-* [Backdrop](/libs/design/src/molecules/backdrop/README.md)
-* [Callout](/libs/design/src/molecules/callout/README.md)
-* [Card](/libs/design/src/molecules/card/README.md)
-* [Hero](/libs/design/src/molecules/hero/README.md)
-* [Image List](/libs/design/src/molecules/image-list/README.md)
-* [Link Set](/libs/design/src/molecules/link-set/README.md)
-* [List](/libs/design/src/molecules/list/README.md)
-* [Media Gallery](/libs/design/src/molecules/media-gallery/README.md)
-* [Modal](/libs/design/src/molecules/modal/README.md)
-* [Navbar](/libs/design/src/molecules/navbar/README.md)
-* [Paginator](/libs/design/src/molecules/paginator/README.md)
-* [Sidebar](/libs/design/src/molecules/sidebar/README.md)
+* [Accordion](/libs/design/accordion/README.md)
+* [Article](/libs/design/article/README.md)
+* [Callout](/libs/design/callout/README.md)
+* [Card](/libs/design/card/README.md)
+* [Hero](/libs/design/hero/README.md)
+* [Link Set](/libs/design/link-set/README.md)
+* [List](/libs/design/list/README.md)
+* [Media Gallery](/libs/design/media-gallery/README.md)
+* [Modal](/libs/design/modal/README.md)
+* [Navbar](/libs/design/navbar/README.md)
+* [Paginator](/libs/design/paginator/README.md)
+* [Sidebar](/libs/design/sidebar/README.md)
 
 ## Behind the Scenes
 * [The Team](https://github.com/graycoreio/daffodil/graphs/contributors)

libs/design/guides/getting-started.md

@@ -62,7 +62,7 @@ There is a minimal required global style for `@daffodil/design` to operate effec
 
 > Are you excited by themes? So are we.
 
-See the [Theming Docs](../scss/theming/README.md)
+See the [Theming Docs](/libs/design/scss/theming/README.md)
 
 ### Use a Component
 In the `AppModule` of your Angular app, import the `DaffHeroModule` into the `NgModule`'s `imports` array.

libs/design/loading-icon/README.md

@@ -2,7 +2,7 @@
 Loading icons are used as an indicator of an event in progress.
 
 ## Overview
-Loading icons are used to indicate to users that an event is ocurring and is still in progress. They should only be used for short loading processes. For events that can take a considerable amount of time, use the [Progress Bar](../progress-bar/README.md) component instead.
+Loading icons are used to indicate to users that an event is ocurring and is still in progress. They should only be used for short loading processes. For events that can take a considerable amount of time, use the [Progress Bar](/libs/design/progress-bar/README.md) component instead.
 
 ## Diameter
 The diameter of a loading icon can be defined by using the `diameter` property. By default, the diameter is set to `60`.

libs/design/scss/theming/README.md

@@ -2,7 +2,7 @@
 Daffodil's theming capabilities enables you to customize `@daffodil/design` components to reflect your brand. A theme consists of custom color configurations that will work in dark and light themes.
 
 ## Custom Colors
-:stop: Before you begin, read the [accessibility guide on color in `@daffodil/design`](../../guides/color.md#accessibility).
+:stop: Before you begin, read the [accessibility guide on color in `@daffodil/design`](/libs/design/guides/color.md#accessibility).
 
 ## Themes
 Dark and light modes are supported in all `@daffodil/design` components. When a theme is not specified, Daffodil defaults to the `light` mode.

libs/design/sidebar/README.md

@@ -54,7 +54,7 @@ A viewport navigation can either be:
 The `BrowserAnimationsModule` or `NoopAnimationsModule` must be imported in the particular Angular `@NgModule` the sidebar is used in for the sidebar to render and work properly.
 
 ### Header and footer
-The `<daff-sidebar-header>` includes optional title (`[daffSidebarHeaderTitle]`) and action (`[daffSidebarHeaderAction]`) selectors, and a slot to render custom content. The action selector should be used along with the `<daff-icon-button>` (view [Button Documentation](../../atoms//button//README.md)) to make sure that the action is positioned correctly and it passes WCAG guidelines.
+The `<daff-sidebar-header>` includes optional title (`[daffSidebarHeaderTitle]`) and action (`[daffSidebarHeaderAction]`) selectors, and a slot to render custom content. The action selector should be used along with the `<daff-icon-button>` (view [Button Documentation](/libs/design/button/README.md)) to make sure that the action is positioned correctly and it passes WCAG guidelines.
 
 The `<daff-sidebar-footer>` is a "holder" component with minimal default styling. Its main purpose is to position the footer at the bottom of the sidebar, allowing the sidebar's content to overflow and scroll while ensuring that the footer remains constantly visible.
 

libs/design/toast/README.md

@@ -2,7 +2,7 @@
 Toasts are small messages designed to mimic push notifications. They are used to provide users with application level information.
 
 ## Overview
-Toasts should be used to display temporary messages about actions or events that occured or in need of attention, with no relation to content on a page. For messaging that provide context in close promixity to a piece of content within a page, use the [Notification](../notification/README.md) component.
+Toasts should be used to display temporary messages about actions or events that occured or in need of attention, with no relation to content on a page. For messaging that provide context in close promixity to a piece of content within a page, use the [Notification](/libs/design/notification/README.md) component.
 
 ### Basic Toast
 <design-land-article-encapsulated>
@@ -53,7 +53,7 @@ The following configurations are available in the `DaffToastService`:
 | dismissible  | boolean | Allows a toast to be dismissible via a close button | true |
 | duration  | number | The duration in milliseconds that a toast is visible before it's dismissed | 5000 |
 
-The `actions` configurations are based on the properties of the `DaffButtonComponent` (view [Button Documentation](../src/atoms/button/README.md)) with the addition of `data` and `eventEmitter`.
+The `actions` configurations are based on the properties of the `DaffButtonComponent` (view [Button Documentation](/libs/design/button/README.md)) with the addition of `data` and `eventEmitter`.
 
 ### Dismissal
 A toast can be dismissed via a timed duration, a close button, or the `ESC` key.

tools/dgeni/src/processors/markdown.ts

@@ -28,8 +28,8 @@ enum DocKind {
 const DOC_KIND_REGEX = {
   [DocKind.GUIDE]: /\/docs\/guides\/(?<path>.+)\.md/,
   [DocKind.EXPLANATION]: /\/docs\/explanations\/(?<path>.+)\.md/,
-  [DocKind.PACKAGE]: /\/libs\/(?<package>.+)\/guides\/(?<path>.+)\.md/,
-  [DocKind.API]: /\/libs\/(?<package>.+)\/(?<path>.+)\.ts/,
+  [DocKind.PACKAGE]: /\/libs\/(?<path>.+)\.md/,
+  [DocKind.API]: /\/libs\/(?<path>.+)\.ts/,
 };
 const getLinkUrl = (path: string): string => {
   const kind = (<Array<keyof typeof DOC_KIND_REGEX>>Object.keys(DOC_KIND_REGEX)).find((k) => DOC_KIND_REGEX[k].test(path));
@@ -47,10 +47,10 @@ const getLinkUrl = (path: string): string => {
       return `/docs/explanations/${match.groups.path}`;
 
     case DocKind.PACKAGE:
-      return `/docs/packages/${match.groups.package}/${match.groups.path}`;
+      return `/docs/packages/${match.groups.path}`.replaceAll(/\/(?:readme|src|guides)/gi, '');
 
     case DocKind.API:
-      return `/docs/api/${match.groups.package}/${match.groups.path}`;
+      return `/docs/api/${match.groups.path}`;
 
     default:
       return path;

tools/dgeni/src/transforms/daffodil-guides-package/index.ts

@@ -17,8 +17,6 @@ const excludedPackages = <const>[
   'theme-switch',
 ];
 const excludedPackagesRegex = '!(' + excludedPackages.join('|') + ')';
-const excludedDocs = <const>['internal'];
-const excludedDocsRegex = '!(' + excludedDocs.join('|') + ')';
 
 const base = new Package('daffodil-guides-base', [daffodilBasePackage])
   .factory('guideFileReader', guideFileReaderFactory)
@@ -55,7 +53,7 @@ export const packageDocsPackage = new Package('daffodil-package-docs', [base])
   .config((readFilesProcessor) => {
     readFilesProcessor.basePath = API_SOURCE_PATH;
     readFilesProcessor.sourceFiles = [
-      { include: [excludedPackagesRegex + '/README.md', excludedPackagesRegex + '/guides/**/*.md']},
+      { include: [excludedPackagesRegex + '*/**/README.md', excludedPackagesRegex + '/guides/**/*.md']},
     ];
   })
   .config((computePathsProcessor) => {

tools/dgeni/src/transforms/daffodil-guides-package/reader/guide-file.reader.ts

@@ -12,12 +12,12 @@ export function guideFileReaderFactory() {
   return {
     name: 'guideFileReader',
     defaultPattern: /\.md$/,
-    getDocs: (fileInfo) => [{
+    getDocs: (fileInfo) => fileInfo.content ? [{
       docType: 'guide',
       title: extractTitle(fileInfo),
       tableOfContents: toc(fileInfo.content),
       content: fileInfo.content,
-    }],
+    }] : [],
   };
 }