Merge branch 'develop' into 30-styleguide

.github/pull_request_template.md

@@ -4,5 +4,13 @@ Fix #<gh-issue-id>
 
 Test URLs:
 
-- Before: https://develop--eds-editorial--ifahrentholz.hlx.live/
-- After: https://<branch>--eds-editorial--ifahrentholz.hlx.live/
+- Before: https://develop--eds-editorial--ifahrentholz.hlx.live/ <!-- On dev to main its main -->
+- After: https://<branch>--eds-editorial--ifahrentholz.hlx.page/ <!-- change <branch> to the branch name  -->
+
+**Checklist:**
+- [ ] Tests added/passed
+- [ ] Documentation updated
+- [ ] PSI Checks passed
+- [ ] Test environment works as expected
+- [ ] New Block/Feature/Component works on test environment
+- [ ] Code reviewed 

.github/workflows/cleanup-on-create.yaml

@@ -17,10 +17,12 @@ jobs:
     steps:
       - name: Checkout
         uses: actions/checkout@v4
-      - name: Use Node.js 20
+
+      - name: Use Node version from .nvmrc
         uses: actions/setup-node@v4
         with:
-          node-version: 20
+          node-version-file: '.nvmrc'
+
       - name: Remove Helper Files
         run: | 
           rm -rf \

.github/workflows/main.yaml

@@ -1,34 +1,123 @@
-name: Build
-on: [push]
+name: Continuous Integration
+
+on:
+  push:
+    branches-ignore:
+      - main
 
 jobs:
-  build:
+  install-and-cache-deps:
     runs-on: ubuntu-latest
-    env:
-      CI_COMMIT_MESSAGE: Continuous Integration Build Project
-      CI_COMMIT_AUTHOR: ${{ github.event.repository.name }} Continuous Integration
     steps:
-      - name: Display event name
-        run: echo "github.event_name=${{ github.event_name }}"
       - name: Checkout repository
         uses: actions/checkout@v4
-      - name: Use Node.js 20
+
+      - name: Use Node version from .nvmrc
         uses: actions/setup-node@v4
         with:
-          node-version: 20
-      - run: npm ci && npm run build && npm run lint
+          node-version-file: '.nvmrc'
+
+      - name: Cache NPM dependencies
+        uses: actions/cache@v4
+        with:
+          path: node_modules
+          key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
+          restore-keys: ${{ runner.os }}-node-
+
+      - name: Install dependencies
+        run: npm ci --prefer-offline
+
+  lint:
+    runs-on: ubuntu-latest
+    needs: install-and-cache-deps
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+
+      - name: Cache NPM dependencies
+        uses: actions/cache@v4
+        with:
+          path: node_modules
+          key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
+          restore-keys: ${{ runner.os }}-node-
+
+      - name: Lint project
+        run: npm run lint
+
+  test:
+    runs-on: ubuntu-latest
+    needs: install-and-cache-deps
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+
+      - name: Cache NPM dependencies
+        uses: actions/cache@v4
+        with:
+          path: node_modules
+          key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
+          restore-keys: ${{ runner.os }}-node-
+
       - name: Run unit tests
         run: npm run test:ci
-      - name: Verify Changed files
-        uses: tj-actions/verify-changed-files@v18
-        id: verify-changed-files
+
+  build-doc:
+    runs-on: ubuntu-latest
+    needs: install-and-cache-deps
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+
+      - name: Cache NPM dependencies
+        uses: actions/cache@v4
         with:
-          files: dist
-      - name: Commit dist if changed
-        if: env.CI_COMMIT_AUTHOR != 'auto' && github.event_name != 'pull_request' && contains(steps.verify-changed-files.outputs.changed_files, 'dist')
+          path: node_modules
+          key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
+          restore-keys: ${{ runner.os }}-node-
+
+      - name: Build doc
+        run: npm run build:doc
+
+  build-and-commit-dist:
+    runs-on: ubuntu-latest
+    needs: [lint, test, build-doc]
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+
+      - name: Cache NPM dependencies
+        uses: actions/cache@v4
+        with:
+          path: node_modules
+          key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
+          restore-keys: ${{ runner.os }}-node-
+
+      - name: Build project
+        run: npm run build
+
+      - name: Setup git user
+        run: |
+          git config --global user.name "EDS CI/CD"
+          git config --global user.email "[email protected]"    
+
+      - name: Add dist
+        run: |
+          git add -f ./dist
+          git add -f ./types
+
+      - name: Check if dist directory has changed
+        id: check-dist-changes
+        run: |
+          before_commit="$github.event.before"
+          
+          if git diff --quiet HEAD "$before_commit" -- ./dist; then
+          echo "No changes detected in the dist directory."
+          else
+          echo "dist_changed=true" >> "$GITHUB_ENV"
+          fi
+
+      - name: Commit and push dist
+        if: steps.check-dist-changes.outputs.dist_changed == 'true'
         run: |
-          git config --global user.name "${{ env.CI_COMMIT_AUTHOR }}"
-          git config --global user.email "[email protected]"
-          git add .
-          git commit -m "${{ env.CI_COMMIT_MESSAGE }}"
+          git commit -m "Rebuild dist from CI"
           git push

.gitignore

@@ -2,8 +2,11 @@
 coverage/*
 logs/*
 node_modules/*
+dist/*
+types/*
 
 helix-importer-ui
 .DS_Store
 *.bak
-.idea
+.idea
+

.husky/pre-commit

@@ -0,0 +1 @@
+npm run husky:pre-commit

.stylelintignore

@@ -0,0 +1,4 @@
+src/styles/sass/base/*.scss
+src/styles/sass/components/*.scss
+src/styles/sass/layout/*.scss
+src/styles/sass/libs/*.scss

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>.

__template__/elements.html

@@ -23,7 +23,7 @@
 							<!-- Header -->
 								<header id="header">
 									<a href="index.html" class="logo"><strong>Editorial</strong> by HTML5 UP</a>
-									<ul class="iconOverview">
+									<ul class="icons">
 										<li><a href="#" class="icon brands fa-twitter"><span class="label">Twitter</span></a></li>
 										<li><a href="#" class="icon brands fa-facebook-f"><span class="label">Facebook</span></a></li>
 										<li><a href="#" class="icon brands fa-snapchat-ghost"><span class="label">Snapchat</span></a></li>
@@ -118,7 +118,7 @@ <h4>Ordered</h4>
 															</ol>
 
 															<h4>Icons</h4>
-															<ul class="iconOverview">
+															<ul class="icons">
 																<li><a href="#" class="icon brands fa-twitter"><span class="label">Twitter</span></a></li>
 																<li><a href="#" class="icon brands fa-facebook-f"><span class="label">Facebook</span></a></li>
 																<li><a href="#" class="icon brands fa-instagram"><span class="label">Instagram</span></a></li>

__template__/index.html

@@ -23,7 +23,7 @@
 							<!-- Header -->
 								<header id="header">
 									<a href="index.html" class="logo"><strong>Editorial</strong> by HTML5 UP</a>
-									<ul class="iconOverview">
+									<ul class="icons">
 										<li><a href="#" class="icon brands fa-twitter"><span class="label">Twitter</span></a></li>
 										<li><a href="#" class="icon brands fa-facebook-f"><span class="label">Facebook</span></a></li>
 										<li><a href="#" class="icon brands fa-snapchat-ghost"><span class="label">Snapchat</span></a></li>

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/icons.types.ts',
-  fontsScssPath: 'src/styles/sass/fonts.scss',
-  lazyStylesScssPath: 'src/styles/sass/lazy-styles.scss',
-  sidekickLibraryStylesScssPath: 'src/styles/sass/sidekick-library-styles.scss',
+  iconsTypesPath: './src/types/icons.types.ts',
+  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'],
 };