change stage presentation

Makefile

@@ -8,37 +8,37 @@ refresh_concept_fixtures:
 	gsed -i '1s/^/export default /' mirage/concept-fixtures/*.js
 
 refresh_course_fixtures:
-	hub api repos/codecrafters-io/build-your-own-redis/contents/course-definition.yml \
+	gh api repos/codecrafters-io/build-your-own-redis/contents/course-definition.yml \
 		| jq -r .content \
 		| base64 -d \
 		| yq -o json eval \
 		> mirage/course-fixtures/redis.js
 
-	hub api repos/codecrafters-io/build-your-own-docker/contents/course-definition.yml \
+	gh api repos/codecrafters-io/build-your-own-docker/contents/course-definition.yml \
 		| jq -r .content \
 		| base64 -d \
 		| yq -o json eval \
 		> mirage/course-fixtures/docker.js
 
-	hub api repos/codecrafters-io/build-your-own-git/contents/course-definition.yml \
+	gh api repos/codecrafters-io/build-your-own-git/contents/course-definition.yml \
 		| jq -r .content \
 		| base64 -d \
 		| yq -o json eval \
 		> mirage/course-fixtures/git.js
 
-	hub api repos/codecrafters-io/build-your-own-sqlite/contents/course-definition.yml \
+	gh api repos/codecrafters-io/build-your-own-sqlite/contents/course-definition.yml \
 		| jq -r .content \
 		| base64 -d \
 		| yq -o json eval \
 		> mirage/course-fixtures/sqlite.js
 
-	hub api repos/codecrafters-io/build-your-own-grep/contents/course-definition.yml \
+	gh api repos/codecrafters-io/build-your-own-grep/contents/course-definition.yml \
 		| jq -r .content \
 		| base64 -d \
 		| yq -o json eval \
 		> mirage/course-fixtures/grep.js
 
-	hub api repos/codecrafters-io/build-your-own-dummy/contents/course-definition.yml \
+	gh api repos/codecrafters-io/build-your-own-dummy/contents/course-definition.yml \
 		| jq -r .content \
 		| base64 -d \
 		| yq -o json eval \

app/components/course-page/course-stage-step/your-task-card/action-button-list.ts

@@ -44,12 +44,12 @@ export default class ActionButtonListComponent extends Component<Signature> {
 
   @action
   handleViewCodeExamplesButtonClicked() {
-    this.router.transitionTo('course.stage.code-examples', this.args.courseStage.position);
+    this.router.transitionTo('course.stage.code-examples');
   }
 
   @action
   handleViewScreencastsButtonClicked() {
-    this.router.transitionTo('course.stage.screencasts', this.args.courseStage.position);
+    this.router.transitionTo('course.stage.screencasts');
   }
 
   @action

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

@@ -11,12 +11,16 @@
   <div class="mt-6">
     <div class="flex flex-col items-start">
       <div class="flex items-center flex-wrap gap-x-3">
-        <div class="text-lg sm:text-xl md:text-2xl" data-test-step-name>
+        <div class="text-lg sm:text-xl md:text-2xl">
           {{#if (eq @currentStep.type "CourseStageStep")}}
             {{! @glint-expect-error not typesafe }}
-            <span class="font-bold text-gray-700">{{@currentStep.courseStage.name}}</span>
+            <span class="font-bold text-gray-700" data-test-step-name>{{@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 uppercase">{{@currentStep.courseStage.slug}}</span>
+            </span>
           {{else}}
-            <span class="font-bold text-gray-700">{{@currentStep.title}}</span>
+            <span class="font-bold text-gray-700" data-test-step-name>{{@currentStep.title}}</span>
           {{/if}}
         </div>
 
@@ -25,9 +29,9 @@
         </div>
       </div>
 
-      {{! TODO: This uses if (not ...) instead of unless because ESLint seems to replace this before linting? }}
-      {{! We already have this shown in the test runner card }}
-      {{#if (not (and (eq @currentStep.type "CourseStageStep") (eq @currentStep @activeStep)))}}
+      {{! For complete steps, we have the "You've completed this step" banner" }}
+      {{! For in-progress steps, users shouldn't be focused on this area anyway }}
+      {{#if (not (or (eq @currentStep.status "complete") (eq @currentStep.status "in_progress")))}}
         <CoursePage::StepProgressIndicator @step={{@currentStep}} class="mt-2 ml-0.5" />
       {{/if}}
     </div>

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/header/sticky-section.hbs

@@ -19,16 +19,11 @@
 
   {{#if this.isSticky}}
     <div class="flex-shrink-0 flex items-center gap-x-3">
-      <div class="hidden sm: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 (eq @currentStep.type "CourseStageStep")}}
+        <div class="hidden sm:inline-flex items-center text-xs font-semibold text-gray-500">
+          Stage #<span class="uppercase">{{this.currentStepAsCourseStageStep.courseStage.slug}}</span>
+        </div>
+      {{/if}}
 
       <CoursePage::StepStatusPill @step={{@currentStep}} class="flex-shrink-0" />
     </div>

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/components/course-page/test-results-bar/bottom-section.hbs

@@ -5,24 +5,6 @@
   data-test-bottom-section
   ...attributes
 >
-  {{!-- <div class="inline-flex items-center text-xs text-gray-400">
-    {{#if (eq @activeStep.type "CourseStageStep")}}
-      <span class="text-gray-400 font-semibold">{{@activeStep.title}}</span>
-      <span>&nbsp;(</span>
-      {{#each this.activeStepAsCourseStageStep.breadcrumbs as |breadcrumb index|}}
-        {{#if (eq index 0)}}
-          {{breadcrumb}}
-        {{else}}
-          <span class="text-gray-300 px-2 inline-flex">&gt;</span>
-          {{breadcrumb}}
-        {{/if}}
-      {{/each}}
-      <span>)</span>
-    {{else}}
-      <span class="text-gray-400 font-semibold">{{@activeStep.title}}</span>
-    {{/if}}
-  </div> --}}
-
   <CoursePage::StepProgressIndicator @step={{@activeStep}} />
 
   {{#if (eq @activeStep.type "CourseStageStep")}}

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() {

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

@@ -17,17 +17,6 @@ export default class CourseStageStep extends Step {
     this.stageListItem = stageListItem;
   }
 
-  get breadcrumbs(): string[] {
-    if (this.courseStage.isExtensionStage) {
-      return [
-        this.courseStage.primaryExtension!.name,
-        `Stage ${this.courseStage.positionWithinExtension}/${this.courseStage.primaryExtension!.stages.length}`,
-      ];
-    } else {
-      return [`Stage ${this.courseStage.positionWithinCourse}/${this.courseStage.course.baseStages.length}`];
-    }
-  }
-
   get completedAt(): Date | null {
     return this.stageListItem.completedAt;
   }