chore(sdk): Create Astro Example for UVE

core-web/libs/sdk/angular/package.json

@@ -1,32 +1,32 @@
 {
-    "name": "@dotcms/angular",
-    "version": "0.0.1-alpha.33",
-    "peerDependencies": {
-        "@angular/common": "^17.1.0",
-        "@angular/core": "^17.1.0",
-        "@angular/router": "^17.1.0",
-        "@dotcms/client": "0.0.1-alpha.33",
-        "@tinymce/tinymce-angular": "^8.0.0",
-        "rxjs": "^7.8.0"
-    },
-    "description": "Official Angular Components library to render a dotCMS page.",
-    "repository": {
-        "type": "git",
-        "url": "git+https://github.com/dotCMS/core.git#master"
-    },
-    "keywords": [
-        "dotCMS",
-        "CMS",
-        "Content Management",
-        "API Client",
-        "REST API",
-        "Angular",
-        "Components"
-    ],
-    "author": "dotcms <[email protected]>",
-    "license": "MIT",
-    "bugs": {
-        "url": "https://github.com/dotCMS/core/issues"
-    },
-    "homepage": "https://github.com/dotCMS/core/tree/master/core-web/libs/sdk/angular/README.md"
+  "name": "@dotcms/angular",
+  "version": "0.0.1-alpha.34",
+  "peerDependencies": {
+    "@angular/common": "^17.1.0",
+    "@angular/core": "^17.1.0",
+    "@angular/router": "^17.1.0",
+    "@dotcms/client": "0.0.1-alpha.34",
+    "@tinymce/tinymce-angular": "^8.0.0",
+    "rxjs": "^7.8.0"
+  },
+  "description": "Official Angular Components library to render a dotCMS page.",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/dotCMS/core.git#master"
+  },
+  "keywords": [
+    "dotCMS",
+    "CMS",
+    "Content Management",
+    "API Client",
+    "REST API",
+    "Angular",
+    "Components"
+  ],
+  "author": "dotcms <[email protected]>",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/dotCMS/core/issues"
+  },
+  "homepage": "https://github.com/dotCMS/core/tree/master/core-web/libs/sdk/angular/README.md"
 }

core-web/libs/sdk/client/package.json

@@ -1,25 +1,25 @@
 {
-    "name": "@dotcms/client",
-    "version": "0.0.1-alpha.33",
-    "description": "Official JavaScript library for interacting with DotCMS REST APIs.",
-    "repository": {
-        "type": "git",
-        "url": "git+https://github.com/dotCMS/core.git#master"
-    },
-    "scripts": {
-        "build": "nx run sdk-client:build:js; cd ../../../../dotCMS/src/main/webapp/html/js/editor-js; rm -rf src package.json *.esm.d.ts"
-    },
-    "keywords": [
-        "dotCMS",
-        "CMS",
-        "Content Management",
-        "API Client",
-        "REST API"
-    ],
-    "author": "dotcms <[email protected]>",
-    "license": "MIT",
-    "bugs": {
-        "url": "https://github.com/dotCMS/core/issues"
-    },
-    "homepage": "https://github.com/dotCMS/core/tree/master/core-web/libs/sdk/client/README.md"
+  "name": "@dotcms/client",
+  "version": "0.0.1-alpha.34",
+  "description": "Official JavaScript library for interacting with DotCMS REST APIs.",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/dotCMS/core.git#master"
+  },
+  "scripts": {
+    "build": "nx run sdk-client:build:js; cd ../../../../dotCMS/src/main/webapp/html/js/editor-js; rm -rf src package.json *.esm.d.ts"
+  },
+  "keywords": [
+    "dotCMS",
+    "CMS",
+    "Content Management",
+    "API Client",
+    "REST API"
+  ],
+  "author": "dotcms <[email protected]>",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/dotCMS/core/issues"
+  },
+  "homepage": "https://github.com/dotCMS/core/tree/master/core-web/libs/sdk/client/README.md"
 }

core-web/libs/sdk/client/src/lib/utils/page/common-utils.ts

@@ -1,27 +1,36 @@
 interface PageRequestParamsProps {
     path: string;
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    params: { [key: string]: any } | undefined; // QueryParams are typed as `any` in frameworks
+    params: { [key: string]: any } | undefined | URLSearchParams; // QueryParams are typed as `any` in frameworks
 }
 
-export const getPageRequestParams = ({ path = '', params = {} }: PageRequestParamsProps) => {
+export const getPageRequestParams = ({
+    path = '',
+    params = {}
+}: PageRequestParamsProps): {
+    path: string;
+    [key: string]: string | number;
+} => {
+    const copiedParams: PageRequestParamsProps['params'] =
+        params instanceof URLSearchParams ? Object.fromEntries(params.entries()) : { ...params };
+
     const finalParams: Record<string, unknown> = {};
-    const dotMarketingPersonaId = params['com.dotmarketing.persona.id'] || '';
+    const dotMarketingPersonaId = copiedParams['com.dotmarketing.persona.id'] || '';
 
-    if (params['mode']) {
-        finalParams['mode'] = params['mode'];
+    if (copiedParams['mode']) {
+        finalParams['mode'] = copiedParams['mode'];
     }
 
-    if (params['language_id']) {
-        finalParams['language_id'] = params['language_id'];
+    if (copiedParams['language_id']) {
+        finalParams['language_id'] = copiedParams['language_id'];
     }
 
-    if (params['variantName']) {
-        finalParams['variantName'] = params['variantName'];
+    if (copiedParams['variantName']) {
+        finalParams['variantName'] = copiedParams['variantName'];
     }
 
-    if (params['personaId'] || dotMarketingPersonaId) {
-        finalParams['personaId'] = params['personaId'] || dotMarketingPersonaId;
+    if (copiedParams['personaId'] || dotMarketingPersonaId) {
+        finalParams['personaId'] = copiedParams['personaId'] || dotMarketingPersonaId;
     }
 
     return {

core-web/libs/sdk/experiments/package.json

@@ -1,30 +1,30 @@
 {
-    "name": "@dotcms/experiments",
-    "version": "0.0.1-alpha.33",
-    "description": "Official JavaScript library to use Experiments with DotCMS.",
-    "repository": {
-        "type": "git",
-        "url": "git+https://github.com/dotCMS/core.git#master"
-    },
-    "keywords": [
-        "dotCMS",
-        "CMS",
-        "Content Management",
-        "A/B testing",
-        "Experiments"
-    ],
-    "author": "dotcms <[email protected]>",
-    "license": "MIT",
-    "bugs": {
-        "url": "https://github.com/dotCMS/core/issues"
-    },
-    "homepage": "https://github.com/dotCMS/core/tree/master/core-web/libs/sdk/experiments/README.md",
-    "dependencies": {
-        "@jitsu/sdk-js": "^3.1.5"
-    },
-    "peerDependencies": {
-        "react": ">=18",
-        "react-dom": ">=18",
-        "@dotcms/client": "0.0.1-alpha.33"
-    }
+  "name": "@dotcms/experiments",
+  "version": "0.0.1-alpha.34",
+  "description": "Official JavaScript library to use Experiments with DotCMS.",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/dotCMS/core.git#master"
+  },
+  "keywords": [
+    "dotCMS",
+    "CMS",
+    "Content Management",
+    "A/B testing",
+    "Experiments"
+  ],
+  "author": "dotcms <[email protected]>",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/dotCMS/core/issues"
+  },
+  "homepage": "https://github.com/dotCMS/core/tree/master/core-web/libs/sdk/experiments/README.md",
+  "dependencies": {
+    "@jitsu/sdk-js": "^3.1.5"
+  },
+  "peerDependencies": {
+    "react": ">=18",
+    "react-dom": ">=18",
+    "@dotcms/client": "0.0.1-alpha.34"
+  }
 }

core-web/libs/sdk/react/package.json

@@ -1,30 +1,30 @@
 {
-    "name": "@dotcms/react",
-    "version": "0.0.1-alpha.33",
-    "peerDependencies": {
-        "react": ">=18",
-        "react-dom": ">=18",
-        "@dotcms/client": "0.0.1-alpha.33",
-        "@tinymce/tinymce-react": "^5.1.1"
-    },
-    "description": "Official React Components library to render a dotCMS page.",
-    "repository": {
-        "type": "git",
-        "url": "git+https://github.com/dotCMS/core.git#master"
-    },
-    "keywords": [
-        "dotCMS",
-        "CMS",
-        "Content Management",
-        "API Client",
-        "REST API",
-        "React",
-        "Components"
-    ],
-    "author": "dotcms <[email protected]>",
-    "license": "MIT",
-    "bugs": {
-        "url": "https://github.com/dotCMS/core/issues"
-    },
-    "homepage": "https://github.com/dotCMS/core/tree/master/core-web/libs/sdk/react/README.md"
+  "name": "@dotcms/react",
+  "version": "0.0.1-alpha.34",
+  "peerDependencies": {
+    "react": ">=18",
+    "react-dom": ">=18",
+    "@dotcms/client": "0.0.1-alpha.34",
+    "@tinymce/tinymce-react": "^5.1.1"
+  },
+  "description": "Official React Components library to render a dotCMS page.",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/dotCMS/core.git#master"
+  },
+  "keywords": [
+    "dotCMS",
+    "CMS",
+    "Content Management",
+    "API Client",
+    "REST API",
+    "React",
+    "Components"
+  ],
+  "author": "dotcms <[email protected]>",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/dotCMS/core/issues"
+  },
+  "homepage": "https://github.com/dotCMS/core/tree/master/core-web/libs/sdk/react/README.md"
 }

examples/angular/package.json

@@ -18,8 +18,8 @@
     "@angular/platform-browser": "^17.1.0",
     "@angular/platform-browser-dynamic": "^17.1.0",
     "@angular/router": "^17.1.0",
-    "@dotcms/angular": "0.0.1-alpha.33",
-    "@dotcms/client": "0.0.1-alpha.33",
+    "@dotcms/angular": "0.0.1-alpha.34",
+    "@dotcms/client": "0.0.1-alpha.34",
     "rxjs": "~7.8.0",
     "tslib": "^2.3.0",
     "zone.js": "~0.14.2"

examples/astro/.env.local.example

@@ -0,0 +1,11 @@
+PUBLIC_DOTCMS_AUTH_TOKEN=YOUR_API_TOKEN
+PUBLIC_DOTCMS_HOST=http://localhost:8080
+PUBLIC_DOTCMS_SITE_ID=your-dotcms-site-id
+PUBLIC_EXPERIMENTS_API_KEY=analytic-api-key-from-dotcms-portlet
+PUBLIC_EXPERIMENTS_DEBUG=true
+# If your local dotcms instance is running in https, this setting allows Node.js to connect to servers with invalid SSL certificates.
+# For testing purposes only.
+NODE_TLS_REJECT_UNAUTHORIZED=0
+
+
+

examples/astro/.gitignore

@@ -0,0 +1,25 @@
+# build output
+dist/
+
+# generated types
+.astro/
+
+# dependencies
+node_modules/
+
+# logs
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+
+# environment variables
+.env
+.env.production
+.env.local
+
+# macOS-specific files
+.DS_Store
+
+# jetbrains setting folder
+.idea/

examples/astro/.prettierrc.mjs

@@ -0,0 +1,12 @@
+/** @type {import("prettier").Config} */
+export default {
+  plugins: ["prettier-plugin-astro"],
+  overrides: [
+    {
+      files: "*.astro",
+      options: {
+        parser: "astro",
+      },
+    },
+  ],
+};

examples/astro/README.md

@@ -0,0 +1,50 @@
+# dotCMS Astro Example
+
+DotCMS provides a Astro example that shows how to build dotCMS pages heedlessly with Astro JavaScript framework.
+
+## What do you need?
+
+1. A dotCMS instance or you can use https://demo.dotcms.com
+2. A valid AUTH token for the target instance (see: https://auth.dotcms.com/docs/latest/rest-api-authentication#creating-an-api-token-in-the-ui)
+3. A valid Site Identifier where your page is located (see: https://www.dotcms.com/docs/latest/multi-site-management#multi-site-management)
+4. Node js 18+ and npm installed
+5. Terminal
+6. And a code editor.
+
+### Create the new Astro application
+
+Open your terminal and let’s create the Astro app by running the following:
+
+```bash
+npm create astro@latest -- --template dotcms/core/examples/astro
+```
+
+Follow the Astro setup steps after it pulls the example.
+
+## Add the dotCMS configuration
+
+Now we need to tell the Next.js app what dotCMS instance is going to use to get the data to build its pages.
+
+1. Open the folder where you created the project in your code editor
+2. In the root, find the file .env.local.example and rename to .env.local
+3. Open the .env.local file and update the environment variable:
+
+   - `PUBLIC_DOTCMS_AUTH_TOKEN` this is the auth token for dotCMS, you can use the dotCMS UI to create one.
+   - `PUBLIC_DOTCMS_HOST` this is the instance of dotCMS where your pages and content lives (license needed) if you don’t have one, you can use [https://demo.dotcms.com](https://demo.dotcms.com) (be careful it restarts every 24h).
+   - `PUBLIC_DOTCMS_SITE_ID` this is the identifier of the Site you are going to use for your website you can find it by going to Settings > Sites. Once there follow the next steps:
+
+     1. Select the desired Site (A modal should be opened)
+     2. Go to the History Tab
+     3. Copy the `Identifier` that appears in the top of the tab
+
+## Run the app
+
+Once all the configuration is in place, it is time to run the web app.
+
+1. Go back to your terminal and from the folder you created the project
+2. Run `npm run dev`
+3. Open http://localhost:4321 in your browser (Verify the port Astro is using, 4321 is the default but it can change)
+
+🎉 And that’s it.
+
+Consider that if you go to `localhost:4321/about`, the page `/about` needs to exist in your dotCMS instance.