Refactor course page header and sidebar components

Author: rohitpaulk

app/components/course-page/header/main-section.hbs

@@ -15,6 +15,10 @@
           {{#if (eq @currentStep.type "CourseStageStep")}}
             {{! @glint-expect-error not typesafe }}
             <span class="font-bold text-gray-700">{{@currentStep.courseStage.name}}</span>
+            <span class="font-mono text-base sm:text-lg md:text-xl">
+              {{! @glint-expect-error not typesafe }}
+              <span class="text-gray-300">#</span><span class="font-mono text-gray-400">{{@currentStep.courseStage.uppercasedSlug}}</span>
+            </span>
           {{else}}
             <span class="font-bold text-gray-700">{{@currentStep.title}}</span>
           {{/if}}

app/components/course-page/header/navigation-controls.hbs

@@ -7,24 +7,15 @@
 
       <CoursePage::StepSwitcherContainer @currentStep={{@currentStep}} @stepList={{@stepList}} />
 
-      {{#if (eq @currentStep.type "CourseStageStep")}}
-        <div class="flex items-center">
-          <div class="inline-flex items-center text-xs font-semibold text-gray-500">
-            {{#each this.currentStepAsCourseStageStep.breadcrumbs as |breadcrumb index|}}
-              {{#if (eq index 0)}}
-                {{breadcrumb}}
-              {{else}}
-                <span class="text-gray-300 px-2 inline-flex">&gt;</span>
-                {{breadcrumb}}
-              {{/if}}
-            {{/each}}
-          </div>
-
-          {{#if this.currentStepAsCourseStageStep.courseStage.primaryExtension}}
-            <BetaCourseExtensionLabel class="ml-2" />
-          {{/if}}
-        </div>
-      {{/if}}
+      <div class="flex items-center">
+        {{#if @course.releaseStatusIsBeta}}
+          <BetaCourseLabel />
+        {{else if @course.isFree}}
+          <FreeCourseLabel @course={{@course}} />
+        {{else if (and (eq @currentStep.type "CourseStageStep") this.currentStepAsCourseStageStep.courseStage.primaryExtension)}}
+          <BetaCourseExtensionLabel />
+        {{/if}}
+      </div>
     </div>
 
     <div class="flex items-center gap-x-3">

app/components/course-page/sidebar.hbs

@@ -9,13 +9,6 @@
   </div>
 
   <div class="px-3">
-    {{! Find ways to move this out of sidebar? }}
-    {{#if @course.releaseStatusIsBeta}}
-      <BetaCourseLabel class="mr-3 mt-3 sm:mt-2" @tooltipSide="right" />
-    {{else if @course.isFree}}
-      <FreeCourseLabel @course={{@course}} class="mr-3 mt-3 sm:mt-2" @tooltipSide="right" />
-    {{/if}}
-
     {{! @glint-expect-error: not typesafe yet}}
     <CoursePage::RepositoryDropdown @repositories={{@repositories}} @activeRepository={{@activeRepository}} class="mt-4" />
   </div>

app/models/course-stage.ts

@@ -67,11 +67,7 @@ export default class CourseStageModel extends Model {
   }
 
   get identifierForURL() {
-    if (this.isBaseStage) {
-      return `${this.positionWithinCourse}`; // Example: /stages/3
-    } else {
-      return `${this.primaryExtensionSlug}:${this.positionWithinExtension}`; // Example: /stages/ext2:1
-    }
+    return this.slug;
   }
 
   get isBaseStage() {
@@ -150,6 +146,10 @@ Our interactive concepts can help with this:
     return this.position > 3;
   }
 
+  get uppercasedSlug() {
+    return this.slug.toUpperCase();
+  }
+
   hasCommunitySolutionsForLanguage(language: LanguageModel) {
     return ((this.communitySolutionCounts || {})[language.slug] || 0) > 0;
   }

app/styles/prism-light-theme.css

@@ -8,7 +8,7 @@ pre[class*='language-'] {
   color: black;
   background: none;
   text-shadow: 0 1px white;
-  font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
+  font-family: SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
   font-size: 1em;
   text-align: left;
   white-space: pre;

app/utils/course-page-step-list/course-stage-step.ts

@@ -19,12 +19,9 @@ export default class CourseStageStep extends Step {
 
   get breadcrumbs(): string[] {
     if (this.courseStage.isExtensionStage) {
-      return [
-        this.courseStage.primaryExtension!.name,
-        `Stage ${this.courseStage.positionWithinExtension}/${this.courseStage.primaryExtension!.stages.length}`,
-      ];
+      return [this.courseStage.primaryExtension!.name, `Stage #${this.courseStage.uppercasedSlug}`];
     } else {
-      return [`Stage ${this.courseStage.positionWithinCourse}/${this.courseStage.course.baseStages.length}`];
+      return [`Stage #${this.courseStage.uppercasedSlug}`];
     }
   }
 

tailwind.config.js

@@ -43,7 +43,7 @@ module.exports = {
     },
     fontFamily: {
       sans: 'Montserrat, sans-serif',
-      mono: 'Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace',
+      mono: 'SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace',
     },
     extend: {
       brightness: {