Merge branch 'develop' into 60-issue-dist-folder

README.md

@@ -1,26 +1,66 @@
-# Your Project's Title...
-Your project's description...
+# Boilerplate for AEM Edge Delivery Services
+This is our Edge Delivery Services boilerplate.
+
+## Table of Contents
+- [Environments](#environments)
+- [Getting started](#getting-started)
+  - [Prerequisites](#prerequisites)
+  - [Installation](#installation)
+- [Linting](#linting)
+- [Documentation](#documentation)
 
 ## Environments
 - Preview: [https://main--eds-editorial--ifahrentholz.hlx.page/](https://main--eds-editorial--ifahrentholz.hlx.page/)
 - Live: [https://main--eds-editorial--ifahrentholz.hlx.live/](https://main--eds-editorial--ifahrentholz.hlx.live/)
 
-## Installation
+### Prerequisites
 
-```sh
-npm i
-```
+- GitHub account
+- Google or Microsoft account
+- npm
+  ```sh
+  npm i
+  ```
+
+### Installation
+
+1. Create your repository using the Boilerplate GitHub repository as a template:
+    https://github.com/divae/boilerplate
+
+2. Add the AEM Code Sync GitHub App to the repository: 
+    https://github.com/apps/aem-code-sync/installations/new
+
+    - Select `Only select Repositories` (not `All Repositories`).
+
+3. Link content source (Google Drive or Microsoft Sharepoint)
+    - Create a folder in Google Drive/Sharepoint and share the folder with the Adobe Experience Manager user (`[email protected]`).
+    - Change the reference in `fstab.yaml` in your GitHub repo to the Google Drive/Sharepoint folder URL and commit the changes.
+
+4. Install the Sidekick Chrome extension:
+    https://chromewebstore.google.com/detail/aem-sidekick/ccfggkjabjahcjoljmgmklhpaccedipo?pli=1
+
+    - Go to the Google Drive/Sharepoint folder, click on the extension icon in the browser toolbar and select `Add this project`.
+    - To preview and publish content, select a file in Google Drive/Sharepoint, click on the extension icon to open the new Sidekick Toolbar and click `preview` or `publish`.
+
+5. Start development
+    - Install the AEM Command Line Interface (CLI) and clone your repo locally.
+    ```
+      npm install -g @adobe/aem-cli
+      git clone https://github.com/<owner>/<repo>
+    ```
+    - Change into project folder and start your local dev environment. `npm start` initializes a build as well as runs the `aem up` command.
+    ```
+      cd <repo>
+      npm start
+    ```
+    - Use Git to push code changes to your preview (https://<branch>--<repo>--<owner>.hlx.page/) and production (https://<branch>--<repo>--<owner>.hlx.live/) sites.
 
 ## Linting
 
 ```sh
 npm run lint
 ```
 
-## Local development
+## Documentation
 
-1. Create a new repository based on the `aem-boilerplate` template and add a mountpoint in the `fstab.yaml`
-1. Add the [AEM Code Sync GitHub App](https://github.com/apps/aem-code-sync) to the repository
-1. Install the [AEM CLI](https://github.com/adobe/aem-cli): `npm install -g @adobe/aem-cli`
-1. Start AEM Proxy: `aem up` (opens your browser at `http://localhost:3000`)
-1. Open the `{repo}` directory in your favorite IDE and start coding :)
+For more information, please refer to the <a href="https://github.com/ifahrentholz/eds-editorial/wiki">documentation</a>.

config.ts

@@ -4,16 +4,24 @@ export interface Config {
   iconsDirPath: string;
   iconsTypesPath: string;
   fontsScssPath?: string;
+  fontsCssPath?: string;
   lazyStylesScssPath?: string;
+  lazyStylesCssPath?: string;
   sidekickLibraryStylesScssPath?: string;
+  sidekickLibraryStylesCssPath?: string;
+  lcpBlocks?: string[];
 }
 
 export const config: Config = {
-  mainTsPath: 'src/main.ts',
-  mainScssPath: 'src/styles/sass/main.scss',
+  mainTsPath: './src/main.ts',
+  mainScssPath: './src/styles/sass/main.scss',
   iconsDirPath: './public/icons',
   iconsTypesPath: './src/types/icons.types.ts',
-  fontsScssPath: 'src/styles/sass/fonts.scss',
-  lazyStylesScssPath: 'src/styles/sass/lazy-styles.scss',
-  sidekickLibraryStylesScssPath: 'src/styles/sass/sidekick-library-styles.scss',
+  fontsScssPath: './src/styles/sass/fonts.scss',
+  fontsCssPath: './dist/fonts/fonts.css',
+  lazyStylesScssPath: './src/styles/sass/lazy-styles.scss',
+  lazyStylesCssPath: './dist/lazyStyles/lazyStyles.css',
+  sidekickLibraryStylesScssPath: './src/styles/sass/sidekick-library-styles.scss',
+  sidekickLibraryStylesCssPath: './dist/sidekickLibraryStyles/sidekickLibraryStyles.css',
+  lcpBlocks: ['banner'],
 };