This is an automated email from the ASF dual-hosted git repository.
morningman pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/doris-website.git
The following commit(s) were added to refs/heads/master by this push:
new 5e86b4df0c3 [course] refine Doris 101 learning experience (#4029)
5e86b4df0c3 is described below
commit 5e86b4df0c31f11088c17cb7c5a8995da5411cab
Author: Mingyu Chen (Rayner) <[email protected]>
AuthorDate: Sun Aug 2 23:53:22 2026 +0800
[course] refine Doris 101 learning experience (#4029)
## Summary
- clarify the Doris 101 landing-page introduction and show that more
courses are coming
- surface module descriptions from the lesson navigation on hover and
keyboard focus
- move baseline information into the lesson header and refine
active-module and flow layouts across desktop and mobile
- keep the new UI aligned with the existing semantic brand-theme tokens
## Validation
- `git diff --check`
- targeted English Docusaurus build with the course plugin enabled
## Scope
This changes the shared course UI only; no versioned or localized
documentation content is modified.
Co-authored-by: morningman <[email protected]>
---
src/components/course/CourseLanding.scss | 71 +++++++++++--------
src/components/course/CourseLanding.tsx | 26 ++++---
src/components/course/CourseLesson.scss | 118 +++++++++++++++++++++++--------
src/components/course/CourseLesson.tsx | 11 ++-
4 files changed, 154 insertions(+), 72 deletions(-)
diff --git a/src/components/course/CourseLanding.scss
b/src/components/course/CourseLanding.scss
index fe56299fb43..dac454740a6 100644
--- a/src/components/course/CourseLanding.scss
+++ b/src/components/course/CourseLanding.scss
@@ -79,36 +79,11 @@
line-height: 1.6;
}
- &__meta {
- display: flex;
- flex-wrap: wrap;
- gap: 12px 24px;
- margin: 24px 0 30px;
- padding: 0;
- font: 700 12px/1.5 var(--font-mono);
- letter-spacing: 0.05em;
- list-style: none;
- text-transform: uppercase;
-
- li {
- display: inline-flex;
- align-items: center;
- gap: 8px;
-
- &::before {
- width: 8px;
- height: 8px;
- border-radius: 50%;
- background: var(--brand-primary);
- content: '';
- }
- }
- }
-
&__actions {
display: flex;
flex-wrap: wrap;
gap: 14px;
+ margin-top: 30px;
}
&__button {
@@ -175,7 +150,9 @@
border-radius: 999px;
background: var(--brand-surface-note);
color: var(--brand-ink);
- font: 700 11px/1 var(--font-mono);
+ font: 700 10px/1 var(--font-mono);
+ text-transform: uppercase;
+ white-space: nowrap;
}
}
@@ -247,9 +224,37 @@
color: var(--brand-ink);
}
+ &__path-coming {
+ position: relative;
+ display: grid;
+ min-height: 58px;
+ grid-template-columns: 48px 1fr auto;
+ align-items: center;
+ gap: 14px;
+ padding: 7px 12px 7px 8px;
+ border: 1px dashed var(--brand-primary);
+ border-radius: 18px;
+ background: var(--brand-surface-faint);
+
+ .course-landing__path-number {
+ border-color: var(--brand-primary);
+ border-style: dashed;
+ background: var(--brand-primary-soft);
+ }
+ }
+
&__path-name {
font-size: 14px;
font-weight: 800;
+
+ small {
+ display: block;
+ margin-top: 4px;
+ color: var(--brand-primary-deep);
+ font: 700 10px/1 var(--font-mono);
+ letter-spacing: 0.08em;
+ text-transform: uppercase;
+ }
}
&__path-arrow {
@@ -257,6 +262,12 @@
font: 800 17px/1 var(--font-mono);
}
+ &__path-more-mark {
+ color: var(--brand-primary-deep);
+ font: 800 18px/1 var(--font-mono);
+ letter-spacing: 0.08em;
+ }
+
}
@media (max-width: 900px) {
@@ -305,11 +316,13 @@
box-shadow: 8px 8px 0 var(--brand-primary-soft);
}
- &__path-step {
+ &__path-step,
+ &__path-coming {
grid-template-columns: 44px 1fr;
}
- &__path-arrow {
+ &__path-arrow,
+ &__path-more-mark {
display: none;
}
diff --git a/src/components/course/CourseLanding.tsx
b/src/components/course/CourseLanding.tsx
index 10af21b109a..b7d31268075 100644
--- a/src/components/course/CourseLanding.tsx
+++ b/src/components/course/CourseLanding.tsx
@@ -8,7 +8,7 @@ function CoursePath(): JSX.Element {
<aside className="course-landing__path-card"
aria-labelledby="course-path-title">
<div className="course-landing__path-header">
<h2 id="course-path-title">Your Doris path</h2>
- <span>01 → 06</span>
+ <span>6 available · more to come</span>
</div>
<ol className="course-landing__path-list">
{COURSE_101_MODULES.map((module, index) => (
@@ -23,6 +23,19 @@ function CoursePath(): JSX.Element {
</a>
</li>
))}
+ <li>
+ <div
+ className="course-landing__path-coming"
+ aria-label="More Doris 101 courses coming soon"
+ >
+ <span className="course-landing__path-number"
aria-hidden="true">+</span>
+ <span className="course-landing__path-name">
+ More courses
+ <small>Coming soon</small>
+ </span>
+ <span className="course-landing__path-more-mark"
aria-hidden="true">···</span>
+ </div>
+ </li>
</ol>
</aside>
);
@@ -45,14 +58,11 @@ export function CourseLanding(): JSX.Element {
<span>Build for real.</span>
</h1>
<p className="course-landing__lead">
- Go from first principles to a working mental
model of Apache Doris—architecture,
- deployment, tables, data operations, SQL
analytics, and lakehouse connectivity.
+ Start with the fundamentals of OLAP databases,
then move on to advanced topics and
+ practical use of Apache Doris. The course
connects general database concepts with
+ Doris's core capabilities, so you can
understand and use Doris more effectively.
+ The database knowledge you gain will also
apply to other systems.
</p>
- <ul className="course-landing__meta"
aria-label="Course details">
- <li>6 guided modules</li>
- <li>Self-paced</li>
- <li>Basic SQL + CLI</li>
- </ul>
<div className="course-landing__actions">
<a className="course-landing__button
course-landing__button--primary" href={COURSE_101_MODULES[0].href}>
Start with the overview →
diff --git a/src/components/course/CourseLesson.scss
b/src/components/course/CourseLesson.scss
index cc2875c98da..3138b24888a 100644
--- a/src/components/course/CourseLesson.scss
+++ b/src/components/course/CourseLesson.scss
@@ -109,6 +109,8 @@ body:has(.course-player) {
}
&__rail {
+ position: relative;
+ z-index: 2;
min-height: calc(100vh - var(--ifm-navbar-height) - 64px);
padding: 1.75rem 1.35rem;
border-right: 1px solid var(--brand-border-soft);
@@ -135,9 +137,57 @@ body:has(.course-player) {
border-radius: 12px;
}
- li > a:hover {
- border-color: var(--brand-border-soft);
- background: var(--brand-paper);
+ li > a {
+ position: relative;
+
+ &:hover {
+ border-color: var(--brand-border-soft);
+ background: var(--brand-paper);
+ }
+
+ &::before,
+ &::after {
+ position: absolute;
+ z-index: 20;
+ opacity: 0;
+ pointer-events: none;
+ transition: opacity 0.15s ease, transform 0.15s ease;
+ }
+
+ &::before {
+ top: 50%;
+ right: -13px;
+ border-width: 7px 8px 7px 0;
+ border-style: solid;
+ border-color: transparent var(--brand-ink) transparent
transparent;
+ content: '';
+ transform: translate(8px, -50%);
+ }
+
+ &::after {
+ top: 50%;
+ left: calc(100% + 12px);
+ width: 290px;
+ padding: 0.9rem 1rem;
+ border: 2px solid var(--brand-ink);
+ border-radius: 12px;
+ background: var(--brand-ink);
+ box-shadow: 5px 5px 0 var(--brand-primary-soft);
+ color: var(--brand-paper);
+ content: attr(data-description);
+ font-size: 0.75rem;
+ font-weight: 600;
+ line-height: 1.5;
+ transform: translate(8px, -50%);
+ }
+
+ &:hover::before,
+ &:hover::after,
+ &:focus-visible::before,
+ &:focus-visible::after {
+ opacity: 1;
+ transform: translate(0, -50%);
+ }
}
}
@@ -205,24 +255,11 @@ body:has(.course-player) {
box-shadow: 0 3px 0 var(--brand-ink);
}
- &__rail-note {
- display: grid;
- gap: 0.35rem;
- margin-top: 1.25rem;
- padding: 1.15rem 0.5rem 0;
- border-top: 1px solid var(--brand-border-soft);
-
- strong {
- color: var(--brand-ink);
- font-size: 0.72rem;
- }
-
- span,
- small {
- color: var(--brand-ink-soft);
- font-size: 0.67rem;
- line-height: 1.5;
- }
+ &__module--active &__module-copy small {
+ display: block;
+ overflow: visible;
+ -webkit-box-orient: initial;
+ -webkit-line-clamp: initial;
}
&__learning {
@@ -242,6 +279,7 @@ body:has(.course-player) {
> div:first-child {
display: flex;
+ flex: 1;
min-width: 0;
align-items: center;
gap: 0.65rem;
@@ -263,6 +301,17 @@ body:has(.course-player) {
}
}
+ &__baseline {
+ flex-shrink: 0;
+ padding: 0.4rem 0.55rem;
+ border: 1px solid var(--brand-border-soft);
+ border-radius: 8px;
+ background: var(--brand-surface-soft);
+ color: var(--brand-ink-soft);
+ font: 700 0.64rem/1 var(--font-mono);
+ white-space: nowrap;
+ }
+
&__progress {
display: flex;
flex-shrink: 0;
@@ -565,12 +614,17 @@ body:has(.course-player) {
&:not(:last-child)::after {
position: absolute;
- top: calc(50% - 0.5rem);
- right: -1rem;
+ top: 50%;
+ left: calc(100% + 0.375rem);
z-index: 2;
+ display: grid;
+ width: 1rem;
+ height: 1rem;
+ place-items: center;
color: var(--brand-primary-deep);
content: '→';
font: 900 1rem/1 var(--font-mono);
+ transform: translate(-50%, -50%);
}
}
@@ -590,7 +644,6 @@ body:has(.course-player) {
border: 2px solid var(--brand-ink) !important;
background: var(--brand-accent) !important;
box-shadow: 0 5px 0 var(--brand-ink);
- transform: translateY(-4px);
}
}
@@ -771,6 +824,8 @@ body:has(.course-player) {
}
&__learning-head {
+ display: grid;
+ grid-template-columns: minmax(0, 1fr) auto;
align-items: flex-start;
}
@@ -779,6 +834,12 @@ body:has(.course-player) {
gap: 0.35rem;
}
+ &__baseline {
+ grid-column: 1 / -1;
+ grid-row: 2;
+ justify-self: start;
+ }
+
&__progress > i {
width: 90px;
}
@@ -848,10 +909,9 @@ body:has(.course-player) {
min-height: 70px;
&:not(:last-child)::after {
- top: auto;
- right: calc(50% - 0.5rem);
- bottom: -1rem;
- transform: rotate(90deg);
+ top: calc(100% + 0.375rem);
+ left: 50%;
+ transform: translate(-50%, -50%) rotate(90deg);
}
}
}
@@ -866,6 +926,8 @@ body:has(.course-player) {
}
@media (prefers-reduced-motion: reduce) {
+ .course-player__rail li > a::before,
+ .course-player__rail li > a::after,
.course-player__progress b,
.course-player__dots button {
transition: none;
diff --git a/src/components/course/CourseLesson.tsx
b/src/components/course/CourseLesson.tsx
index dd1830f767a..e6f85f13d18 100644
--- a/src/components/course/CourseLesson.tsx
+++ b/src/components/course/CourseLesson.tsx
@@ -266,18 +266,14 @@ export function CourseLessonPlayer({
{isCurrent ? (
<div
aria-current="step">{content}</div>
) : (
- <Link to={module.href}>{content}</Link>
+ <Link to={module.href}
data-description={module.description}>
+ {content}
+ </Link>
)}
</li>
);
})}
</ol>
- <div className="course-player__rail-note">
- <strong>Lesson format</strong>
- <span>{units.length} focused units · Learn at your own
pace</span>
- <span>Baseline: {baseline}</span>
- <small>Progress is not stored yet.</small>
- </div>
</aside>
<main className="course-player__learning">
@@ -286,6 +282,7 @@ export function CourseLessonPlayer({
<span>Module {String(moduleNumber).padStart(2,
'0')}</span>
<strong>{activeUnitProps?.label}</strong>
</div>
+ <span className="course-player__baseline">Baseline:
{baseline}</span>
<div
className="course-player__progress"
role="progressbar"
---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]
