From ba4ecf5072caffa3ec0288adaf2798eff01e4b2d Mon Sep 17 00:00:00 2001 From: Will Ezell Date: Fri, 23 Aug 2024 14:29:59 -0400 Subject: [PATCH] fix(examples) adding some detail to readmes and text to the headers of each example (#29740) ref: #29739 --- examples/angular/README.md | 27 ++++++++++++++----- .../components/header/header.component.ts | 2 +- examples/nextjs/README.md | 9 ++++--- .../nextjs/src/components/layout/header.js | 2 +- examples/vuejs/README.md | 21 ++++++++++++--- examples/vuejs/src/components/MyHeader.vue | 2 +- 6 files changed, 48 insertions(+), 15 deletions(-) diff --git a/examples/angular/README.md b/examples/angular/README.md index 4aa3713dfaf9..5bc85127d6c1 100644 --- a/examples/angular/README.md +++ b/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. diff --git a/examples/angular/src/app/pages/components/header/header.component.ts b/examples/angular/src/app/pages/components/header/header.component.ts index 3743c4533ee2..a3c73a7f75a2 100644 --- a/examples/angular/src/app/pages/components/header/header.component.ts +++ b/examples/angular/src/app/pages/components/header/header.component.ts @@ -6,7 +6,7 @@ import { ChangeDetectionStrategy, Component } from '@angular/core';

- TravelLux + TravelLux with NG

diff --git a/examples/nextjs/README.md b/examples/nextjs/README.md index 806cfc02feb3..020d52d941e3 100644 --- a/examples/nextjs/README.md +++ b/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: diff --git a/examples/nextjs/src/components/layout/header.js b/examples/nextjs/src/components/layout/header.js index cc03d5ca292d..988f9619e3d1 100644 --- a/examples/nextjs/src/components/layout/header.js +++ b/examples/nextjs/src/components/layout/header.js @@ -5,7 +5,7 @@ function Header({ children }) {

- TravelLux + TravelLux in NextJS

{children} diff --git a/examples/vuejs/README.md b/examples/vuejs/README.md index f8025dc9c797..633e4d07713c 100644 --- a/examples/vuejs/README.md +++ b/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 diff --git a/examples/vuejs/src/components/MyHeader.vue b/examples/vuejs/src/components/MyHeader.vue index 5be05d5e3ec0..1225816c4b44 100644 --- a/examples/vuejs/src/components/MyHeader.vue +++ b/examples/vuejs/src/components/MyHeader.vue @@ -2,7 +2,7 @@

- TravelLux + TravelLux in Vue