diff --git a/README.md b/README.md
index 41bededf0d..69a8e4976e 100644
--- a/README.md
+++ b/README.md
@@ -16,10 +16,10 @@
- [Angular and Ecommerce](#angularecompackages)
- [Better Frontend UX](#frontendpackages)
- [Less Re-Platforming](#replatformpackages)
- - [Table of Packages](#packages)
+ - [Table of Packages](#packages)
## What is Daffodil?
-In general, Daffodil is a frontend Ecommerce framework that allows developers to build complex Ecommerce stores.
+In general, Daffodil is a frontend Ecommerce framework that allows developers to build complex Ecommerce stores.
Specifically, Daffodil is a frontend toolkit that accomplishes three things:
@@ -56,15 +56,15 @@ Daffodil's features include the following:
## What do I need before I start using Daffodil?
Daffodil was developed so you can get started without connecting to a platform. Because of its driver-like nature, all you need is the following:
-1. [Node.js v14+](https://nodejs.org/en/)
+1. [Node.js v18+](https://nodejs.org/en/)
2. [npm](https://www.npmjs.com/)
-3. An Angular project
+3. [An Angular 17 project](https://angular.dev)
## How do I start using Daffodil?
-After installing the [prerequisites](#prereqs), you can choose the packages that you want and get started using Daffodil with your new or existing Ecommerce store.
+After installing the [prerequisites](#prereqs), you can choose the packages that you want and get started using Daffodil with your new or existing Ecommerce store.
-- To use Daffodil to build your own Ecommerce store, follow the steps in the [Installation instructions](./docs/INSTALLATION.md).
-- To view our progress of an example store or contribute one of your own, see the [Developer documentation](https://github.com/graycoreio/daffodil/blob/develop/docs/DEVELOPER.md#running-the-example-demo).
+- To use Daffodil to build your own Ecommerce store, follow the steps in the [Installation instructions](/docs/guides/introduction/getting-started.md).
+- To view our progress of an example store or contribute one of your own, see the [Developer documentation](/docs/internal/DEVELOPER.md#running-the-example-demo).
## Who uses Daffodil and why?
The target devopers for Daffodil include, but are not limited to, the following:
@@ -72,17 +72,17 @@ The target devopers for Daffodil include, but are not limited to, the following:
1. Developers who want to explore and experiment with Progressive Web Apps (PWAs).
2. Developers who are comfortable with Angular and are interested in job opportunities in Ecommerce.
3. Developers who work with businesses that have existing websites but want a better user interface and experience.
-4. Developers who are forward-thinking, have gone through a re-platforming, and want to deflect future re-platforming.
+4. Developers who are forward-thinking, have gone through a re-platforming, and want to deflect future re-platforming.
## What packages do I use?
For a basic Ecommerce site, you need all of the most commonly used packages (common packages), which are the following:
-- [@daffodil/cart](./libs/cart/README.md)
-- [@daffodil/category](./libs/category/README.md)
-- [@daffodil/geography](./libs/geography/README.md)
-- [@daffodil/navigation](./libs/navigation/README.md)
-- [@daffodil/product](./libs/product/README.md)
-- [@daffodil/core](./libs/order/README.md)
-- [@daffodil/driver](./libs/driver/README.md)
+- [@daffodil/cart](/libs/cart/README.md)
+- [@daffodil/category](/libs/category/README.md)
+- [@daffodil/geography](/libs/geography/README.md)
+- [@daffodil/navigation](/libs/navigation/README.md)
+- [@daffodil/product](/libs/product/README.md)
+- [@daffodil/core](/libs/order/README.md)
+- [@daffodil/driver](/libs/driver/README.md)
**Note:** Both the `core` and `driver` packages are dependencies for most other packages. Developers do not interact with these packages directly.
@@ -91,53 +91,53 @@ Referring to the aforementioned [use cases](#whowhydaff), here are some lists an
### **1. To explore and experiment with PWAs**
If you don't have a project in mind and want to see something in Daffodil working, then use:
-- [@daffodil/core](./libs/order/README.md)
-- [@daffodil/driver](./libs/driver/README.md)
-- [@daffodil/product](./libs/product/README.md)
+- [@daffodil/core](/libs/order/README.md)
+- [@daffodil/driver](/libs/driver/README.md)
+- [@daffodil/product](/libs/product/README.md)
### **2. To expand Ecommerce opportunities**
If you want to expand your portfolio for more Ecommerce opportunities, then use the [common packages](#whatpackages) and optionally include:
-- [@daffodil/design](./libs/design/README.md) (optional)
+- [@daffodil/design](/libs/design/README.md) (optional)
You won't need to use more than the aforementioned common packages(#pwapackages) until you have a specific business use or requirement. However, if you are design-focused, then you can either use your own design framework or use the `design` package.
### **3. To improve the user experience for existing business sites**
If you have an existing site, either your own or backed by a business, then there are a few working assumptions about the site: it has SEO and specific URLs, and the product pages need to show lists of related products.
So, in addition to the [common packages](#whatpackages), you may need the following packages:
-- [@daffodil/external-router](./libs/external-router/README.md)
-- [@daffodil/seo](./libs/seo/README.md)
-- [@daffodil/related-products](./libs/related-products/README.md)****
-- [@daffodil/upsell-products](./libs/upsell-products/README.md)
-- [@daffodil/design](./libs/design/README.md)
-- [@daffodil/contact](./libs/contact/README.md)
+- [@daffodil/external-router](/libs/external-router/README.md)
+- [@daffodil/seo](/libs/seo/README.md)
+- [@daffodil/related-products](/libs/related-products/README.md)****
+- [@daffodil/upsell-products](/libs/upsell-products/README.md)
+- [@daffodil/design](/libs/design/README.md)
+- [@daffodil/contact](/libs/contact/README.md)
### **4. To prevent future re-platforming**
If you want to prevent future re-platforming of your Ecommerce site, there are a few assumed advanced requirements. For example, the business has complex product configurations and has marketing email campaigns. So, in addition to the [common packages](#whatpackages) and the packages for [improving user experiences](#frontendpackages), you may also need the following packages:
-- [@daffodil/newsletter](./libs/newsletter/README.md)
-- [@daffodil/product-composite](./libs/product-composite/README.md)
-- [@daffodil/product-configurable](./libs/product-configurable/README.md)
+- [@daffodil/newsletter](/libs/newsletter/README.md)
+- [@daffodil/product-composite](/libs/product-composite/README.md)
+- [@daffodil/product-configurable](/libs/product-configurable/README.md)
## Packages
Below is a table of currently available Daffodil packages.
| Project | Package | Version | Stability |
|---|---|---|---|
-| Authorize.net | [@daffodil/authorizenet](./libs/authorizenet/README.md) | [](https://npmjs.com/package/@daffodil/authorizenet) | [](https://www.github.com/graycoreio/daffodil)
-| Cart | [@daffodil/cart](./libs/cart/README.md) | [](https://npmjs.com/package/@daffodil/cart) | [](https://www.github.com/graycoreio/daffodil) |
-| Category | [@daffodil/category](./libs/category/README.md) | [](https://npmjs.com/package/@daffodil/category) | [](https://www.github.com/graycoreio/daffodil) |
-| Checkout | [@daffodil/checkout](./libs/checkout/README.md) | [](https://npmjs.com/package/@daffodil/checkout) | [](https://www.github.com/graycoreio/daffodil) |
-| Contact | [@daffodil/contact](./libs/contact/README.md) | [](https://npmjs.com/package/@daffodil/contact) | [](https://www.github.com/graycoreio/daffodil)
-| Core | [@daffodil/core](./libs/core/README.md) | [](https://npmjs.com/package/@daffodil/core) | [](https://www.github.com/graycoreio/daffodil)
-| Design | [@daffodil/design](./libs/design/README.md) | [](https://npmjs.com/package/@daffodil/design) | [](https://www.github.com/graycoreio/daffodil) |
-| Driver | [@daffodil/driver](./libs/driver/README.md) | [](https://npmjs.com/package/@daffodil/driver) | [](https://www.github.com/graycoreio/daffodil) |
-| External Router | [@daffodil/external-router](./libs/external-router/README.md) | [](https://npmjs.com/package/@daffodil/external-router) | [](https://www.github.com/graycoreio/daffodil) |
-| Geography | [@daffodil/geography](./libs/geography/README.md) | [](https://npmjs.com/package/@daffodil/geography) | [](https://www.github.com/graycoreio/daffodil) |
-| Newsletter | [@daffodil/newsletter](./libs/newsletter/README.md) | [](https://npmjs.com/package/@daffodil/newsletter) | [](https://www.github.com/graycoreio/daffodil) |
-| Paypal | [@daffodil/paypal](./libs/paypal/README.md) | [](https://npmjs.com/package/@daffodil/paypal) | [](https://www.github.com/graycoreio/daffodil) |
-| Product | [@daffodil/product](./libs/product/README.md) | [](https://npmjs.com/package/@daffodil/product) | [](https://www.github.com/graycoreio/daffodil) |
-| Composite Product | [@daffodil/product-composite](./libs/product-composite/README.md) | [](https://npmjs.com/package/@daffodil/product-composite) | [](https://www.github.com/graycoreio/daffodil) |
-| Configurable Product | [@daffodil/product-configurable](./libs/product-configurable/README.md) | [](https://npmjs.com/package/@daffodil/product-configurable) | [](https://www.github.com/graycoreio/daffodil) |
-| SEO | [@daffodil/seo](./libs/seo/README.md) | [](https://npmjs.com/package/@daffodil/seo) | [](https://www.github.com/graycoreio/daffodil) |
+| Authorize.net | [@daffodil/authorizenet](/libs/authorizenet/README.md) | [](https://npmjs.com/package/@daffodil/authorizenet) | [](https://www.github.com/graycoreio/daffodil)
+| Cart | [@daffodil/cart](/libs/cart/README.md) | [](https://npmjs.com/package/@daffodil/cart) | [](https://www.github.com/graycoreio/daffodil) |
+| Category | [@daffodil/category](/libs/category/README.md) | [](https://npmjs.com/package/@daffodil/category) | [](https://www.github.com/graycoreio/daffodil) |
+| Checkout | [@daffodil/checkout](/libs/checkout/README.md) | [](https://npmjs.com/package/@daffodil/checkout) | [](https://www.github.com/graycoreio/daffodil) |
+| Contact | [@daffodil/contact](/libs/contact/README.md) | [](https://npmjs.com/package/@daffodil/contact) | [](https://www.github.com/graycoreio/daffodil)
+| Core | [@daffodil/core](/libs/core/README.md) | [](https://npmjs.com/package/@daffodil/core) | [](https://www.github.com/graycoreio/daffodil)
+| Design | [@daffodil/design](/libs/design/README.md) | [](https://npmjs.com/package/@daffodil/design) | [](https://www.github.com/graycoreio/daffodil) |
+| Driver | [@daffodil/driver](/libs/driver/README.md) | [](https://npmjs.com/package/@daffodil/driver) | [](https://www.github.com/graycoreio/daffodil) |
+| External Router | [@daffodil/external-router](/libs/external-router/README.md) | [](https://npmjs.com/package/@daffodil/external-router) | [](https://www.github.com/graycoreio/daffodil) |
+| Geography | [@daffodil/geography](/libs/geography/README.md) | [](https://npmjs.com/package/@daffodil/geography) | [](https://www.github.com/graycoreio/daffodil) |
+| Newsletter | [@daffodil/newsletter](/libs/newsletter/README.md) | [](https://npmjs.com/package/@daffodil/newsletter) | [](https://www.github.com/graycoreio/daffodil) |
+| Paypal | [@daffodil/paypal](/libs/paypal/README.md) | [](https://npmjs.com/package/@daffodil/paypal) | [](https://www.github.com/graycoreio/daffodil) |
+| Product | [@daffodil/product](/libs/product/README.md) | [](https://npmjs.com/package/@daffodil/product) | [](https://www.github.com/graycoreio/daffodil) |
+| Composite Product | [@daffodil/product-composite](/libs/product-composite/README.md) | [](https://npmjs.com/package/@daffodil/product-composite) | [](https://www.github.com/graycoreio/daffodil) |
+| Configurable Product | [@daffodil/product-configurable](/libs/product-configurable/README.md) | [](https://npmjs.com/package/@daffodil/product-configurable) | [](https://www.github.com/graycoreio/daffodil) |
+| SEO | [@daffodil/seo](/libs/seo/README.md) | [](https://npmjs.com/package/@daffodil/seo) | [](https://www.github.com/graycoreio/daffodil) |
**Note:** About the `checkout` package, it is currently a legacy package; there is no reason to use it. However, the `checkout` package eventually may be filled with extracts from the `cart` and `order` packages.
diff --git a/libs/analytics/README.md b/libs/analytics/README.md
index 68022b396b..de41c2c800 100644
--- a/libs/analytics/README.md
+++ b/libs/analytics/README.md
@@ -5,11 +5,11 @@
The Daffodil Analytics Module is a lightweight Angular package that helps integrate analytics providers into your Angular applications, supporting multiple analytics services. It simplifies event tracking and provides configuration options, such as defining analyzable actions. Notably, this module focuses on handling state-related events and operates specifically on [`Actions`](https://ngrx.io/api/store/Action) from [`@ngrx/store`](https://ngrx.io/guide/store), rather than browser events. Additionally, the package includes testing utilities tailored for analytics event tracking in Angular applications.
## Features
-- ["Opt-in" action tracking](./docs/configuration.md#configuring-analyzeableactions)
+- ["Opt-in" action tracking](/libs/analytics/guides/configuration.md#configuring-analyzeableactions)
## Usage
-In this example, `MyAnalyticsService` implements the `DaffAnalyticsTrackerClass` interface, providing a track method. Inside the track method, you can define your custom logic for tracking analytics events based on the provided action. The service returns an observable, indicating the success of the tracking operation. Replace the logic inside the track method with your actual analytics tracking implementation.
+In this example, `MyAnalyticsService` implements the [`DaffAnalyticsTrackerClass`](/libs/analytics/DaffAnalyticsTrackerClass.ts) interface, providing a track method. Inside the track method, you can define your custom logic for tracking analytics events based on the provided action. The service returns an observable, indicating the success of the tracking operation. Replace the logic inside the track method with your actual analytics tracking implementation.
### Define a tracking service
diff --git a/libs/cart/guides/getting-started.md b/libs/cart/guides/getting-started.md
index 57b1bd1cf3..bf39633118 100644
--- a/libs/cart/guides/getting-started.md
+++ b/libs/cart/guides/getting-started.md
@@ -1,9 +1,9 @@
# Getting Started
-This overview assumes that an Angular project has already been set up and [cart installation](./installation.md) has been completed. If not, we recommend that be done first.
+This overview assumes that an Angular project has already been set up and [cart installation](/libs/cart/guides/installation.md) has been completed. If not, we recommend that be done first.
Daffodil includes multiple layers of functionality that build on each other. The models can be used on their own. The driver layers can be used with the models but also allow custom extensions to those models to be passed as generics. A state layer sits on top of the driver layer. Individual drivers can be overridden through driver injection tokens and custom extensions to models can be passed into the state layer's generics.
The recommended way to use Daffodil is with the state layer.
-See [the driver](./drivers.md) and [state](./state.md) guides for information about those layers. See [the extension guide](./extension.md) for information about extending Daffodil. See [the usage guide](./usage.md) for general information about the other parts of `@daffodil/cart`.
+See [the driver](/libs/cart/guides/drivers.md) and [state](/libs/cart/guides/state.md) guides for information about those layers. See [the extension guide](/libs/cart/guides/extension.md) for information about extending Daffodil. See [the usage guide](/libs/cart/guides/usage.md) for general information about the other parts of `@daffodil/cart`.
diff --git a/libs/cart/guides/installation.md b/libs/cart/guides/installation.md
index 96b267676f..615fcd42d7 100644
--- a/libs/cart/guides/installation.md
+++ b/libs/cart/guides/installation.md
@@ -18,4 +18,4 @@ yarn add @daffodil/cart @daffodil/core @ngrx/store @ngrx/effects
## Post-Install
-Refer to [the getting started guide](./getting-started.md) for next steps.
+Refer to [the getting started guide](/libs/cart/guides/getting-started.md) for next steps.
diff --git a/libs/cart/guides/state.md b/libs/cart/guides/state.md
index 38678f1663..b648758d57 100644
--- a/libs/cart/guides/state.md
+++ b/libs/cart/guides/state.md
@@ -135,11 +135,9 @@ This tutorial will walk you through Daffodil's Cart Resolution process which is
### Supported Scenarios
-At the moment, the following scenarios are handled by the `DaffResolvedCartGuard` **for guest users only**.
+At the moment, the following scenarios are handled by the `DaffResolvedCartGuard`.
-> Note that currently, carts for authenticated users are not supported.
-
-[//]: # "TODO(griest024): remove note when authenticated carts are supported."
+> For customer cart support, use the [`@daffodil/cart-customer`](/libs/cart-customer/README.md) package.
- Generating a new cart when a user visits the application for the very first time.
- Retrieving a previously existing cart for a user upon page reload.
@@ -149,7 +147,7 @@ At the moment, the following scenarios are handled by the `DaffResolvedCartGuard
### Usage
-Assuming that you're already using the `DaffCartStateModule` and have previously selected a [driver](../../drivers.md) for `@daffodil/cart`, you can simply add the guard to your route's `canActivate` and the guard will handle the rest.
+Assuming that you're already using the `DaffCartStateModule` and have previously selected a [driver](/libs/cart/guides/drivers.md) for `@daffodil/cart`, you can simply add the guard to your route's `canActivate` and the guard will handle the rest.
```typescript
import { Routes, RouterModule } from '@angular/router';
@@ -179,7 +177,7 @@ Upon adding the code, load up the route and take a look at the Network Requests
### Configuration
-You can configure the route to which the `DaffResolvedCartGuard` navigates when an error occurs during resolution. See the [configuration guide](./configuration.md) and the `resolution` key of `DaffCartStateConfiguration` for more information.
+You can configure the route to which the `DaffResolvedCartGuard` navigates when an error occurs during resolution. See the [configuration guide](/libs/cart/guides/configuration.md) and the `resolution` key of `DaffCartStateConfiguration` for more information.
### Gotchas
diff --git a/libs/cart/guides/usage.md b/libs/cart/guides/usage.md
index 351c41c2d0..2dfd69bd12 100644
--- a/libs/cart/guides/usage.md
+++ b/libs/cart/guides/usage.md
@@ -2,9 +2,9 @@
## Interacting with Platforms
-Interacting with platforms through the Daffodil facade is the recommended method. See [using the facade](./state.md#using-the-facade).
+Interacting with platforms through the Daffodil facade is the recommended method. See [using the facade](/libs/cart/guides/state.md#using-the-facade).
-It is possible to interact with platforms by directly calling the drivers. While this requires more work to integrate into components, it offers greater flexibility. See [the drivers guide](./drivers.md) for more information.
+It is possible to interact with platforms by directly calling the drivers. While this requires more work to integrate into components, it offers greater flexibility. See [the drivers guide](/libs/cart/guides/drivers.md) for more information.
## Using Routing Guards
diff --git a/libs/category/guides/filtering.md b/libs/category/guides/filtering.md
index dc2c772b91..4157dbb31c 100644
--- a/libs/category/guides/filtering.md
+++ b/libs/category/guides/filtering.md
@@ -3,11 +3,11 @@
## Use Cases
As a user, I would like to be able to apply filters to a collection of items of a category.
-As a user, I would like to know what filters are currently applied to the category.
+As a user, I would like to know what filters are currently applied to the category.
As a user, I would like to see the filters applied IMMEDIATELY, without waiting for a [response from a backend platform (input-delay).](https://web.dev/fid/)
## Features
-- [Idempotence](./filtering/idempotence.md)
+- [Idempotence](#idempotence)
## Implementation Details
@@ -16,13 +16,13 @@ When an action is dispatched that would modify the applied filter state of the a
1. An action modifying the applied filter state is dispatched
2. Reducers add/remove the filters modified by the action in state. The modification assumes that the associated filters will be applied/removed successfully by the backing platform (optimistic).
3. A driver call will be made to get the resulting category (and its items) by computing a `DaffCategoryRequest` from the current category state including the applied filter modification from (2).
-4. Processing the response from the [associated driver](./#driver-specific-mechanisms) into a `DaffGetCategoryResponse`.
+4. Processing the response from the [associated driver](#driver-specific-mechanisms) into a `DaffGetCategoryResponse`.
### Driver Specific Mechanisms
-It is important to note that not all platforms guarantee a response with enough information to determine whether or not a filter state was modified successfully. As a result, drivers targeting such platforms **must** internally process their responses to return appropriately applied filter states, otherwise the applied filter state will be lost when the next state is computed from the response. Such drivers can do so by using the [behaviors](../../src/filters/behaviors) of the `@daffodil/category` package.
+It is important to note that not all platforms guarantee a response with enough information to determine whether or not a filter state was modified successfully. As a result, drivers targeting such platforms **must** internally process their responses to return appropriately applied filter states, otherwise the applied filter state will be lost when the next state is computed from the response. Such drivers can do so by using the [behaviors](https://github.com/graycoreio/daffodil/tree/develop/libs/core/src/filters/behaviors) of the `@daffodil/category` package.
## Idempotence
-Daffodil applies filters "idempotently". That is to say, when a filter operation is applied multiple times, the returned result is guaranteed to be the same.
+Daffodil applies filters "idempotently". That is to say, when a filter operation is applied multiple times, the returned result is guaranteed to be the same.
The only exception to this rule is a toggle action, as it is strictly impossible for such an action to be idempotent since it intentionally oscillates a state property from one value to another.
diff --git a/libs/contact/README.md b/libs/contact/README.md
index ccbb0d984b..0026cc4361 100644
--- a/libs/contact/README.md
+++ b/libs/contact/README.md
@@ -4,7 +4,7 @@ The `@daffodil/contact` library allows you quickly to scaffold a contact form UI
## Getting Started
-This overview assumes that you have already set up an Angular project and have gone through the [contact installation guide](./installation.md). If you have not, we recommend you do that first.
+This overview assumes that you have already set up an Angular project and have gone through the [contact installation guide](/libs/contact/guides/installation.md). If you have not, we recommend you do that first.
### Setting up your AppModule
diff --git a/libs/design/README.md b/libs/design/README.md
index 8572bae27e..b5daf99d1f 100644
--- a/libs/design/README.md
+++ b/libs/design/README.md
@@ -2,58 +2,58 @@
`@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](./guides/theming.md)
-* [Typography](./guides/typography.md)
-* [Accessibility](./guides/accessibility.md)
-* [Color](./guides/accessibility/color.md)
+* [Theming](/libs/design/guides/theming.md)
+* [Typography](/libs/design/guides/typography.md)
+* [Accessibility](/libs/design/guides/accessibility.md)
+* [Color](/libs/design/guides/accessibility/color.md)
## Packages
| Package | Version | Stability |
|---|---|---|
-| [@daffodil/design](./libs/design/README.md) | [](https://npmjs.com/package/@daffodil/design) | [](https://www.github.com/graycoreio/daffodil) |
+| [@daffodil/design](/libs/design/README.md) | [](https://npmjs.com/package/@daffodil/design) | [](https://www.github.com/graycoreio/daffodil) |
The source for this package is in the [Daffodil repository](https://github.com/graycoreio/daffodil).
## Getting Started
-Refer to the [Getting Started Guide](./guides/getting-started.md).
+Refer to the [Getting Started Guide](/libs/design/guides/getting-started.md).
## Upgrading
-Refer to the [Upgrade Guide](./guides/upgrading.md).
+Refer to the [Upgrade Guide](/libs/design/guides/upgrading.md).
## Components
### Atoms
-* [Button](./src/atoms/button/README.md)
-* [Container](./src/atoms/container/README.md)
-* [Form](./src/atoms/form/README.md)
- * [Checkbox](./src/atoms/form/checkbox/README.md)
- * [Checkbox Set](./src/atoms/form/checkbox-set/README.md)
- * [Error Message](./src/atoms/form/error-message/README.md)
- * [Form Field](./src/atoms/form/form-field/README.md)
- * [Form Label](./src/atoms/form/form-label/README.md)
- * [Input](./src/atoms/form/input/README.md)
- * [Radio](./src/atoms/form/radio/README.md)
- * [Radio Set](./src/atoms/form/radio-set/README.md)
- * [Select](./src/atoms/form/select/README.md)
- * [Quantity Field](./src/atoms/form/quantity-field/README.md)
-* [Image](./src/atoms/image/README.md)
-* [Loading Icon](./src/atoms/loading-icon/README.md)
+* [Button](/libs/design/src/atoms/button/README.md)
+* [Container](/libs/design/src/atoms/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)
+ * [Error Message](/libs/design/src/atoms/form/error-message/README.md)
+ * [Form Field](/libs/design/src/atoms/form/form-field/README.md)
+ * [Form Label](/libs/design/src/atoms/form/form-label/README.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)
+ * [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)
### Molecules
-* [Accordion](./src/molecules/accordion/README.md)
-* [Article](./src/molecules/article/README.md)
-* [Backdrop](./src/molecules/backdrop/README.md)
-* [Callout](./src/molecules/callout/README.md)
-* [Card](./src/molecules/card/README.md)
-* [Hero](./src/molecules/hero/README.md)
-* [Image List](./src/molecules/image-list/README.md)
-* [Link Set](./src/molecules/link-set/README.md)
-* [List](./src/molecules/list/README.md)
-* [Media Gallery](./src/molecules/media-gallery/README.md)
-* [Modal](./src/molecules/modal/README.md)
-* [Navbar](./src/molecules/navbar/README.md)
-* [Paginator](./src/molecules/paginator/README.md)
-* [Sidebar](./src/molecules/sidebar/README.md)
+* [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)
## Behind the Scenes
* [The Team](https://github.com/graycoreio/daffodil/graphs/contributors)
\ No newline at end of file
diff --git a/libs/design/guides/accessibility.md b/libs/design/guides/accessibility.md
index 6c36ed3d5e..a11fd47b9b 100644
--- a/libs/design/guides/accessibility.md
+++ b/libs/design/guides/accessibility.md
@@ -8,5 +8,5 @@ Accessible design is imperative to letting people of all abilities navigate and
Outlined below are core accessibility concepts that are encoded, either by hand or strictly enforced code, into the codebase. Further discussions of accessibility are also included in various other guides as appropriate.
-* [Color](./color#accessibility.md)
-* [Keyboard Navigation](./accessibility/keyboard-navigation.md)
+* [Color](/libs/design/guides/color.md#accessibility)
+* [Keyboard Navigation](/libs/design/guides/accessibility/keyboard-navigation.md)
diff --git a/libs/design/guides/color.md b/libs/design/guides/color.md
index ae63d60c43..9582b3c18b 100644
--- a/libs/design/guides/color.md
+++ b/libs/design/guides/color.md
@@ -13,7 +13,7 @@ We have encoded many of the WCAG requirements into our SASS mixins and functions
To verify contrast ratios, we recommend using this [contrast ratio calculator](https://contrast-ratio.com/).
### Daffodil Guarantees
-As a result of our [accessibility considerations](./accessibility#color-and-contrast), we've ensured that the following are **guaranteed** and **strictly enforced (via development time errors)** in the `@daffodil/design` codebase:
+As a result of our [accessibility considerations](/libs/design/guides/accessibility.md#color-and-contrast), we've ensured that the following are **guaranteed** and **strictly enforced (via development time errors)** in the `@daffodil/design` codebase:
* Palette steps "70" (e.g. 80 - 10) apart guarantee at least a 7:1 ratio.
* Palette steps "60" (e.g. 70 - 10) apart guarantee at least a 4.5:1 ratio.
diff --git a/libs/design/guides/getting-started.md b/libs/design/guides/getting-started.md
index 5144942e6b..cf04d85ad2 100644
--- a/libs/design/guides/getting-started.md
+++ b/libs/design/guides/getting-started.md
@@ -1,5 +1,5 @@
# Introduction
-Get started with `@daffodil/design`, an Angular component library built for ecommerce with accessibility in-mind. With these first steps, we warmly welcome you to a library that will help you build elegant and accessible user interfaces without having to do everything by hand.
+Get started with `@daffodil/design`, an Angular component library built for ecommerce with accessibility in-mind. With these first steps, we warmly welcome you to a library that will help you build elegant and accessible user interfaces without having to do everything by hand.
## First Steps
This tutorial is designed to touch upon the very basics of the `@daffodil/design` library. First things first, you will need to [create a new Angular project](https://angular.io/cli) and [install the library](#installation). By the end of this tutorial, you will have created a basic Angular app that renders a simple `DaffHeroComponent` with a title and subtitle.
@@ -55,7 +55,7 @@ There is a minimal required global style for `@daffodil/design` to operate effec
@forward '@daffodil/design/scss/global';
```
-> For more information on our approach to these kinds of styles, see the ["Global Styles" guide.](./global-styles.md)
+> For more information on our approach to these kinds of styles, see the ["Global Styles" guide.](/libs/design/guides/global-styles.md)
### Add a Theme
`@daffodil/design` is a themable component library. The components in the design library can be configured with customized colors in addition to a dark AND light mode for those same colors.
diff --git a/libs/newsletter/README.md b/libs/newsletter/README.md
index f71388ff4b..ea00d17980 100644
--- a/libs/newsletter/README.md
+++ b/libs/newsletter/README.md
@@ -4,7 +4,7 @@ The `@daffodil/newsletter` library allows you to quickly scaffold a "newsletter"
## Getting Started
-This overview assumes that you have already set up an Angular project and have gone through the [Newsletter installation guide](./installation.md). If you have not, we recommend you do that first.
+This overview assumes that you have already set up an Angular project and have gone through the [Newsletter installation guide](/libs/newsletter/guides/installation.md). If you have not, we recommend you do that first.
## Setting up your AppModule
@@ -48,7 +48,7 @@ export interface DaffNewsletterSubmission {
}
```
-The `DaffNewsletterSubmission` is the default object and only contains a value of `email`. To learn how to customize your submission, read the [customizing submission data guide](./advanced/customizing-submission-data.md).
+The `DaffNewsletterSubmission` is the default object and only contains a value of `email`. To learn how to customize your submission, read the [customizing submission data guide](/libs/newsletter/guides/advanced/customizing-submission-data.md).
## Using the facade
diff --git a/tools/dgeni/src/processors/markdown.ts b/tools/dgeni/src/processors/markdown.ts
index 15bf3949a5..e2adff59ee 100644
--- a/tools/dgeni/src/processors/markdown.ts
+++ b/tools/dgeni/src/processors/markdown.ts
@@ -19,6 +19,44 @@ hljs.registerLanguage('bash', bash);
hljs.registerLanguage('graphql', graphql);
hljs.registerLanguage('gql', graphql);
+enum DocKind {
+ GUIDE = 'GUIDE',
+ EXPLANATION = 'EXPLANATION',
+ PACKAGE = 'PACKAGE',
+ API = 'API',
+}
+const DOC_KIND_REGEX = {
+ [DocKind.GUIDE]: /\/docs\/guides\/(?.+)\.md/,
+ [DocKind.EXPLANATION]: /\/docs\/explanations\/(?.+)\.md/,
+ [DocKind.PACKAGE]: /\/libs\/(?.+)\/guides\/(?.+)\.md/,
+ [DocKind.API]: /\/libs\/(?.+)\/(?.+)\.ts/,
+};
+const getLinkUrl = (path: string): string => {
+ const kind = (>Object.keys(DOC_KIND_REGEX)).find((k) => DOC_KIND_REGEX[k].test(path));
+ const match = DOC_KIND_REGEX[kind]?.exec(path);
+
+ if (!match) {
+ return path;
+ }
+
+ switch (kind) {
+ case DocKind.GUIDE:
+ return `/docs/guides/${match.groups.path}`;
+
+ case DocKind.EXPLANATION:
+ return `/docs/explanations/${match.groups.path}`;
+
+ case DocKind.PACKAGE:
+ return `/docs/packages/${match.groups.package}/${match.groups.path}`;
+
+ case DocKind.API:
+ return `/docs/api/${match.groups.package}/${match.groups.path}`;
+
+ default:
+ return path;
+ }
+};
+
// marked.use(markedMermaid);
marked.use(
markedHighlight({
@@ -30,6 +68,14 @@ marked.use(
}),
);
+marked.use({
+ walkTokens: (token) => {
+ if (token.type === 'link') {
+ token.href = getLinkUrl(token.href);
+ }
+ },
+});
+
export class MarkdownCodeProcessor implements Processor {
name = 'markdown';
$runAfter = ['paths-computed'];