Exercise pages squishing intro and instructions together

BNAndras · May 25, 2026, 2:32am

Solve Grep on Exercism has introduction and instructions sections. However, the page isn’t calling them out separately so the introduction bleeds into the instructions.

Compare that to Grep in Go on Exercism where the introduction and instructions are correctly called out separately. If we determine this needs a fix, I think we would have to ping Jeremy, and he can look into it schedule permitting.

mk-mxp · May 25, 2026, 9:17am

Shouldn’t that common exercise page be generated from problem-specifications anyways?

BNAndras · May 25, 2026, 5:33pm

I’m fairly sure it is already. The content is almost identical between that page and the Go-specific one. The main difference I see is that the Go has a track-specific instructions append.

IsaacG · May 25, 2026, 11:08pm

Consider the track > exercise > show which includes both the intro header and instruction header.

github.com

exercism/website/blob/9839e438fddf68aab4da21b2ec0d3c641cfb7c2f/app/views/tracks/exercises/show/_instructions.html.haml#L9-L18


      
            %h2= t('.introduction_heading')
            %section{ class: "!mb-24" }
              %p.mb-12
                = t('.hello_world_intro_html', track_title: track.title).html_safe
              %p.mb-20
                = t('.watch_video_prompt')
          
              = vimeo_embed("853440496?h=6abbdfc68f")
          
          %h2= t('.instructions_heading')

The generic > exercise > show page in contract just has a t('.instructions_section.title')

github.com

exercism/website/blob/9839e438fddf68aab4da21b2ec0d3c641cfb7c2f/app/views/generic_exercises/show.html.haml#L25


      
          .flex.flex-col.md:flex-row.gap-48
            .lhs.flex-grow
              - if @exercise.deep_dive_youtube_id.present?
                .mb-32.bg-backgroundColorA.shadow-lg.rounded-8.px-20.lg:px-32.py-20.lg:py-24
                  .text-h3.mb-8= t('.deep_dive_section.title', exercise_title: @exercise.title)
                  %p.text-p-large.mb-16= @exercise.deep_dive_blurb
                  %div{ class: 'w-[100%]' }
                    = render ReactComponents::Common::YoutubePlayer.new(@exercise.deep_dive_youtube_id, 'generic_exercise')
          
              %section.instructions.px-20.lg:px-32.py-20.lg:py-24
                .text-h3.mb-12= t('.instructions_section.title')
                .c-textual-content.--large
                  .border-b-1.border-borderColor5{ class: "!pb-8 !mb-32" }
                    = raw @ps_data.description_html
          
                  - if @exercise.tutorial?
                    %p.mb-20
                      = t('.instructions_section.intro_video_text')
                      = vimeo_embed("853440496?h=6abbdfc68f")
          
                  - source = @ps_data.source