fix(examples) adding some detail to readmes and text to the headers o…

…f each example (#29740)

ref: #29739

examples/angular/README.md

@@ -1,20 +1,35 @@
-DotCMS provides an Angular example that shows how to build dotCMS pages heedlessly with Angular JavaScript framework.
+# dotCMS Angular Example 
+
+DotCMS provides an Angular example that shows how to build manageable dotCMS pages headlessly with the Angular JavaScript framework.
 
 ## What do you need?
 
 1. A dotCMS instance or you can use https://demo.dotcms.com
-2. [Node.js](https://nodejs.org) and npm installed
-3. Terminal
-4. And a code editor.
+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. Node js 18+ and npm installed
+4. Terminal
+5. And a code editor.
 
 ### Get the Angular example code
 
-Get the code from the next directory
+Get the code from the Angular example directory
 
 ```bash
 https://github.com/dotCMS/core/tree/master/examples/angular
 ```
 
+Or just checkout the directory
+
+```bash 
+git clone -n --depth=1 --filter=tree:0 https://github.com/dotCMS/core
+cd core
+git sparse-checkout set --no-cone examples/angular
+git checkout
+```
+The files will be found under the `examples/angular` folder
+
+
+
 ## Add the dotCMS configuration
 
 Now we need to tell the Angular app what dotCMS instance is going to use to get the data to build its pages.
@@ -32,7 +47,7 @@ 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 YOUR_NAME
 2. Run `ng serve`
-3. Open http://localhost:3000 in your browser
+3. Open http://localhost:4200 in your browser
 
 🎉 And that’s it.
 

examples/angular/src/app/pages/components/header/header.component.ts

@@ -6,7 +6,7 @@ import { ChangeDetectionStrategy, Component } from '@angular/core';
     <header class="flex items-center justify-between p-4 bg-red-400">
       <div class="flex items-center">
         <h2 class="text-3xl font-bold text-white">
-          <a routerLink="/">TravelLux</a>
+          <a routerLink="/">TravelLux with NG</a>
         </h2>
       </div>
       <ng-content></ng-content>

examples/nextjs/README.md

@@ -1,10 +1,13 @@
+# dotCMS Next.js Example
+
 DotCMS provides a Next.js example that shows how to build dotCMS pages heedlessly with Next.js JavaScript framework.
 
 ## What do you need?
 1. A dotCMS instance or you can use https://demo.dotcms.com
-2. [Node.js](https://nodejs.org) and npm installed
-3. Terminal
-4. And a code editor.
+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. Node js 18+ and npm installed
+4. Terminal
+5. And a code editor.
 
 ### Create the new Next.js application
 Open your terminal and let’s create the Next.js app by running the following:

examples/nextjs/src/components/layout/header.js

@@ -5,7 +5,7 @@ function Header({ children }) {
         <header className="flex items-center justify-between p-4 bg-purple-500">
             <div className="flex items-center">
                 <h2 className="text-3xl font-bold text-white">
-                    <Link href="/">TravelLux</Link>
+                    <Link href="/">TravelLux in NextJS</Link>
                 </h2>
             </div>
             {children}

examples/vuejs/README.md

@@ -1,10 +1,25 @@
-# vuejs
+# dotCMS Vue JS Example
 
 This template should help get you started developing with Vue 3 in Vite.
 
-## Recommended IDE Setup
+## 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. Node js 18+ and npm installed
+4. Terminal
+5. And a code editor.
 
-[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin).
+
+## Get the Vue Example code
+
+You can get the vue example by checking out the project repo
+```bash 
+git clone -n --depth=1 --filter=tree:0 https://github.com/dotCMS/core
+cd core
+git sparse-checkout set --no-cone examples/vuejs
+git checkout
+```
+The files will be found under the `examples/angular` folder
 
 ## Customize configuration
 

examples/vuejs/src/components/MyHeader.vue

@@ -2,7 +2,7 @@
   <header class="flex items-center justify-between p-4 bg-purple-500">
     <div class="flex items-center">
       <h2 class="text-3xl font-bold text-white">
-        <router-link to="/">TravelLux</router-link>
+        <router-link to="/">TravelLux in Vue</router-link>
       </h2>
     </div>
     <slot></slot>