Skip to content

Create Developer Onboarding Guide for Next.js with UVE #33941

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
fmontes wants to merge 49 commits into
base: main
Choose a base branch
from
Draft

Create Developer Onboarding Guide for Next.js with UVE #33941

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
49 commits
Select commit Hold shift + click to select a range
4575b65
refactor(dot-starter): overhaul onboarding component and remove legac…
fmontes Nov 14, 2025
3f5c778
fix(dot-starter): reorder MarkdownModule imports for consistency
fmontes Nov 14, 2025
5d728ac
feat(dot-starter): enhance onboarding progress tracking and UI
fmontes Nov 14, 2025
77e922d
refactor(dot-starter): restructure onboarding component layout and st…
fmontes Nov 14, 2025
37e1802
refactor(dot-starter): update progress tracking display and styles
fmontes Nov 14, 2025
58b5649
refactor(dot-starter): enhance onboarding component layout and styles
fmontes Nov 14, 2025
c91b0df
chore(dot-starter): update dependencies and enhance component styles
fmontes Nov 14, 2025
11ae6a4
feat(dot-starter): add clipboard functionality and enhance UI components
fmontes Nov 15, 2025
26e86e7
refactor(dot-starter): streamline onboarding component and enhance UI
fmontes Nov 27, 2025
b06a381
chore(dotcms-ui): update project configurations and enhance build and…
fmontes Nov 27, 2025
85849a4
refactor(dot-starter): enhance onboarding component structure and styles
fmontes Nov 27, 2025
9000f46
style(dot-starter): update SCSS styles for headings and command descr…
fmontes Nov 27, 2025
622aa43
style(dot-starter): update SCSS styles for headings and command descr…
fmontes Nov 27, 2025
215ee2f
style(dot-starter): add padding to list elements in SCSS for improved…
fmontes Nov 27, 2025
6aacdbe
refactor(dot-starter): enhance onboarding content descriptions for cl…
fmontes Nov 27, 2025
c7cd51f
refactor(dot-starter): simplify onboarding content descriptions for c…
fmontes Nov 27, 2025
c9eb95d
refactor(dot-starter): rename commands to substeps for improved clari…
fmontes Nov 27, 2025
b236aca
refactor(dot-starter): enhance onboarding substeps with file path dis…
fmontes Nov 27, 2025
8397fec
style(dot-starter): refine SCSS styles for accordion and headings ali…
fmontes Nov 27, 2025
392d5fb
refactor(dot-starter): update onboarding component HTML structure and…
fmontes Nov 27, 2025
79e8665
fix(dot-starter): conditionally render horizontal rule based on subst…
fmontes Nov 27, 2025
76ffcd3
refactor(dot-starter): update onboarding title and description for cl…
fmontes Nov 27, 2025
c892564
feat(dot-starter): implement step completion functionality with smoot…
fmontes Nov 27, 2025
1ad7e5e
style(dot-starter): add h2 styles for consistent heading formatting
fmontes Nov 27, 2025
d0ca0f0
feat(dot-starter): expand onboarding steps with new component creatio…
fmontes Dec 9, 2025
1991a97
feat(dot-starter): enhance step completion functionality with undo op…
fmontes Dec 9, 2025
3fd2097
feat(dot-starter): implement dynamic accordion step management with a…
fmontes Dec 9, 2025
b70aec4
chore(dot-starter): remove commented-out reset progress button from o…
fmontes Dec 9, 2025
b4a5a24
feat(dot-starter): add framework selection with logos to onboarding c…
fmontes Dec 9, 2025
89994c5
feat(dot-starter): add framework info overlay and update onboarding c…
fmontes Dec 9, 2025
90c94a8
feat(dot-starter): integrate state management for progress tracking i…
fmontes Dec 9, 2025
48966d2
feat(dot-starter): refactor accordion state management to use reactiv…
fmontes Dec 9, 2025
4c37f54
refactor(dot-starter): streamline step management by removing step ID…
fmontes Dec 10, 2025
59ac3c5
showFrameworkInfo
fmontes Dec 10, 2025
b12cac8
refactor(dot-starter): enhance onboarding framework management by int…
fmontes Dec 10, 2025
e9b7e47
clean up
fmontes Dec 10, 2025
ed51740
feat(dot-starter): implement comprehensive onboarding content structu…
fmontes Dec 10, 2025
609192c
refactor(dot-starter): migrate to route-based component loading and c…
fmontes Dec 10, 2025
c79f296
refactor(dot-starter): adjust accordion header layout for improved vi…
fmontes Dec 10, 2025
e168a1d
fix(dot-starter): correct progress calculation by adjusting for 0-bas…
fmontes Dec 10, 2025
38df12a
fix(main-legacy): adjust grid-template-columns for better layout resp…
fmontes Dec 10, 2025
8533bf3
refactor(dot-nav-item): update styling for improved layout and spacin…
fmontes Dec 10, 2025
d76d805
refactor(dot-starter): enhance unit tests for DotStarterComponent by …
fmontes Dec 10, 2025
e06fed5
refactor(dot-starter): enhance unit tests for DotStarterComponent by …
fmontes Dec 10, 2025
b8d116a
clean up
fmontes Dec 10, 2025
9cee0cc
Move things around
fmontes Dec 10, 2025
58ab57c
refactor(dot-starter): integrate DotOnboardingAuthorComponent with en…
fmontes Dec 10, 2025
2e87b02
fix(dot-starter): update logo paths in DotOnboardingDevComponent to u…
fmontes Dec 15, 2025
b5bb2db
added
Dec 18, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
29 changes: 23 additions & 6 deletions core-web/apps/dotcms-ui/project.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -61,13 +61,20 @@
}
],
"styles": [
"node_modules/prismjs/themes/prism-okaidia.css",
"node_modules/primeicons/primeicons.css",
"libs/dotcms-scss/angular/styles.scss",
"node_modules/primeflex/primeflex.css",
"node_modules/primeng/resources/primeng.min.css",
"node_modules/gridstack/dist/gridstack.min.css"
],
"scripts": [],
"scripts": [
"node_modules/prismjs/prism.js",
"node_modules/prismjs/components/prism-css.min.js",
"node_modules/prismjs/components/prism-typescript.min.js",
"node_modules/prismjs/components/prism-bash.min.js",
"node_modules/clipboard/dist/clipboard.min.js"
],
"stylePreprocessorOptions": {
"includePaths": ["libs/dotcms-scss/angular"]
},
Expand Down Expand Up @@ -111,21 +118,31 @@
"outputPath": "../../tomcat9/webapps/ROOT/dotAdmin",
"baseHref": "",
"optimization": false,
"sourceMap": true,
"namedChunks": true,
"sourceMap": false,
"namedChunks": false,
"vendorChunk": true,
"buildOptimizer": false
"buildOptimizer": false,
"extractLicenses": false,
"fileReplacements": [],
"progress": false,
"outputHashing": "none",
"commonChunk": true,
"budgets": [],
"externalDependencies": ["date-fns/locale"]
}
},
"defaultConfiguration": "production",
"dependsOn": ["^build"]
},
"serve": {
"dependsOn": ["dotcms-webcomponents:build"],
"dependsOn": [],
"executor": "@angular-devkit/build-angular:dev-server",
"options": {
"proxyConfig": "apps/dotcms-ui/proxy-dev.conf.mjs",
"buildTarget": "dotcms-ui:build:development"
"buildTarget": "dotcms-ui:build:development",
"hmr": true,
"liveReload": false,
"watch": true
}
},
"extract-i18n": {
Expand Down
2 changes: 1 addition & 1 deletion core-web/apps/dotcms-ui/src/app/app-routing.module.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -115,7 +115,7 @@ const PORTLETS_ANGULAR: Route[] = [
{
path: 'starter',
loadChildren: () =>
import('@portlets/dot-starter/dot-starter.module').then((m) => m.DotStarterModule)
import('@portlets/dot-starter/dot-starter.routes').then((m) => m.dotStarterRoutes)
},
{
canActivate: [MenuGuardService],
Expand Down
284 changes: 284 additions & 0 deletions ...rc/app/portlets/dot-starter/components/onboarding-author/onboarding-author.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,284 @@
@if (userData$ | async; as user) {
<div
style="
background: linear-gradient(135deg, #eff6ff 0%, #ffffff 50%, #faf5ff 100%);
position: relative;
">
<p (click)="resetUserProfile()" class="button-link flex items-center">
<img src="dotAdmin/assets/logos/sync.svg" alt="" />
<span class="mx-1 underline">Not a marketer?</span>
</p>
<div class="grid dot-starter-top-content" style="width: 80%">
<div class="col-12 dot-starter-header mt-4">
<div>
<h3 class="p-0 m-0">Create Your First dotCMS Content Experience</h3>
<p
[innerHTML]="'starter.description' | dm: [user.username]"
class="dot-starter-description mt-5"></p>
</div>
</div>
<div class="col-12">
<div class="grid">
<div class="md:col-12">
<div class="dot-starter-top-main__section">
@if (user.showCreateDataModelLink) {
<a
class="dot-starter-top-main__block"
data-testId="starter.main.link.data.model"
routerLink="/content-types-angular/create/content">
<div class="dot-starter-top-main__link-number">
<span></span>
</div>
<div class="dot-starter-top-main__link-data">
<h4>
{{ 'starter.main.link.data.model.title' | dm }}
</h4>
<p>
{{ 'starter.main.link.data.model.description' | dm }}
</p>
</div>
</a>
}
@if (user.showCreateContentLink) {
<a
class="dot-starter-top-main__block"
data-testId="starter.main.link.content"
routerLink="/c/content/new/webPageContent">
<div class="dot-starter-top-main__link-number">
<span></span>
</div>
<div class="dot-starter-top-main__link-data">
<h4>
{{ 'starter.main.link.add.content.title' | dm }}
</h4>
<p>
{{ 'starter.main.link.add.content.description' | dm }}
</p>
</div>
</a>
}
@if (user.showCreateTemplateLink) {
<a
class="dot-starter-top-main__block"
data-testId="starter.main.link.design.layout"
routerLink="/templates/new/designer">
<div class="dot-starter-top-main__link-number">
<span></span>
</div>
<div class="dot-starter-top-main__link-data">
<h4>
{{ 'starter.main.link.design.layout.title' | dm }}
</h4>
<p>
{{ 'starter.main.link.design.layout.description' | dm }}
</p>
</div>
</a>
}
@if (user.showCreatePageLink) {
<a
class="dot-starter-top-main__block"
data-testId="starter.main.link.create.page"
routerLink="/c/content/new/htmlpageasset">
<div class="dot-starter-top-main__link-number">
<span></span>
</div>
<div class="dot-starter-top-main__link-data">
<h4>
{{ 'starter.main.link.create.page.title' | dm }}
</h4>
<p>
{{ 'starter.main.link.create.page.description' | dm }}
</p>
</div>
</a>
}
</div>
</div>
<div class="md:col-12 dot-starter-offset">
<h5 class="dot-starter-top-main__title" data-testId="dot-side-title">
{{ 'starter.side.title' | dm }}
</h5>
</div>
<div class="md:col-12 lg:col-6 dot-starter-offset">
<a
class="dot-starter-top-secondary__block"
href="https://dotcms.com/docs/latest/graphql"
data-testId="starter.side.link.graphQl"
target="_blank">
<div class="dot-starter-top-secondary__link-data-apis">
<h4>
{{ 'starter.side.link.graphQl.title' | dm }}
</h4>
<p>
{{ 'starter.side.link.graphQl.description' | dm }}
</p>
</div>
</a>
<a
class="dot-starter-top-secondary__block"
href="https://dotcms.com/product/features/image-api/"
data-testId="starter.side.link.image.processing"
target="_blank">
<div class="dot-starter-top-secondary__link-data-apis">
<h4>
{{ 'starter.side.link.image.processing.title' | dm }}
</h4>
<p>
{{ 'starter.side.link.image.processing.description' | dm }}
</p>
</div>
</a>
<a
class="dot-starter-top-secondary__block"
href="https://dotcms.com/docs/latest/rest-api-authentication#APIToken"
data-testId="starter.side.link.generate.key"
target="_blank">
<div class="dot-starter-top-secondary__link-data-apis">
<h4>
{{ 'starter.side.link.generate.key.title' | dm }}
</h4>
<p>
{{ 'starter.side.link.generate.key.description' | dm }}
</p>
</div>
</a>
</div>
<div class="md:col-12 lg:col-5 dot-starter-offset">
<a
class="dot-starter-top-secondary__block"
href="https://dotcms.com/docs/latest/content-api"
data-testId="starter.side.link.content"
target="_blank">
<div class="dot-starter-top-secondary__link-data-apis">
<h4>
{{ 'starter.side.link.content.title' | dm }}
</h4>
<p>
{{ 'starter.side.link.content.description' | dm }}
</p>
</div>
</a>
<a
class="dot-starter-top-secondary__block"
href="https://dotcms.com/docs/latest/page-rest-api-layout-as-a-service-laas"
data-testId="starter.side.link.page.layout"
target="_blank">
<div class="dot-starter-top-secondary__link-data-apis">
<h4>
{{ 'starter.side.link.page.layout.title' | dm }}
</h4>
<p>
{{ 'starter.side.link.page.layout.description' | dm }}
</p>
</div>
</a>
</div>
</div>
</div>
</div>
<div class="dot-starter-bottom-content" style="width: 80%">
<div class="md:col-12">
<h3 class="dot-starter-top-main__title" data-test="dot-resources-title">
{{ 'starter.side.resources.title' | dm }}
</h3>
</div>
<div class="lg:col-4 md:col-12">
<a
class="dot-starter-bottom__block"
href="https://dotcms.com/docs/latest/"
data-testId="starter.footer.link.documentation"
target="_blank">
<div class="dot-starter-bottom__link-icon">
<i class="pi pi-file-import"></i>
</div>
<div class="dot-starter-bottom__link-data">
<h4>
{{ 'starter.footer.link.documentation.title' | dm }}
</h4>
<p>
{{ 'starter.footer.link.documentation.description' | dm }}
</p>
</div>
</a>
</div>
<div class="lg:col-4 md:col-12">
<a
class="dot-starter-bottom__block"
href="https://dotcms.com/codeshare/"
data-testId="starter.footer.link.examples"
target="_blank">
<div class="dot-starter-bottom__link-icon">
<i class="pi pi-code"></i>
</div>
<div class="dot-starter-bottom__link-data">
<h4>{{ 'starter.footer.link.examples.title' | dm }}</h4>
<p>{{ 'starter.footer.link.examples.description' | dm }}</p>
</div>
</a>
</div>
<div class="lg:col-4 md:col-12">
<a
class="dot-starter-bottom__block"
href="https://dotcms.com/forum/"
data-testId="starter.footer.link.community"
target="_blank">
<div class="dot-starter-bottom__link-icon">
<i class="pi pi-users"></i>
</div>
<div class="dot-starter-bottom__link-data">
<h4>{{ 'starter.footer.link.community.title' | dm }}</h4>
<p>
{{ 'starter.footer.link.community.description' | dm }}
</p>
</div>
</a>
</div>
<div class="lg:col-4 md:col-12">
<a
class="dot-starter-bottom__block"
href="https://dotcms.com/courses/"
data-testId="starter.footer.link.training"
target="_blank">
<div class="dot-starter-bottom__link-icon">
<i class="pi pi-video"></i>
</div>
<div class="dot-starter-bottom__link-data">
<h4>{{ 'starter.footer.link.training.title' | dm }}</h4>
<p>{{ 'starter.footer.link.training.description' | dm }}</p>
</div>
</a>
</div>
<div class="lg:col-4 md:col-12">
<a
class="dot-starter-bottom__block"
href="https://dotcms.com/review/"
data-testId="starter.footer.link.review"
target="_blank">
<div class="dot-starter-bottom__link-icon">
<i class="pi pi-star"></i>
</div>
<div class="dot-starter-bottom__link-data">
<h4>{{ 'starter.footer.link.review.title' | dm }}</h4>
<p>{{ 'starter.footer.link.review.description' | dm }}</p>
</div>
</a>
</div>
<div class="lg:col-4 md:col-12">
<a
class="dot-starter-bottom__block"
href="https://dotcms.com/contact-us/"
data-testId="starter.footer.link.feedback"
target="_blank">
<div class="dot-starter-bottom__link-icon">
<i class="pi pi-comment"></i>
</div>
<div class="dot-starter-bottom__link-data">
<h4>{{ 'starter.footer.link.feedback.title' | dm }}</h4>
<p>{{ 'starter.footer.link.feedback.description' | dm }}</p>
</div>
</a>
</div>
</div>
</div>
}
Loading