feat(showcase): add link to github in code examples

Enhances the code examples in the showcase by implementing the following changes:

- Modified the styling to the code block to make it more readable.
- Added light and dark modes for code highlighting.
- Added a footer to the code block with a direct link to the corresponding file on GitHub.

src/components/code-block/code-block.scss

@@ -1,4 +1,5 @@
-@import 'highlight.js/scss/atom-one-dark';
+@import 'highlight.js/styles/github-dark-dimmed.css' screen and (prefers-color-scheme: dark);
+@import 'highlight.js/styles/github.css' screen and (prefers-color-scheme: light);
 
 [part="container"] {
   overflow-x: auto;

src/layout/content/showcase/showcase-component.js

@@ -2,13 +2,15 @@ import { html, LitElement, unsafeCSS } from 'lit';
 import '../../../components/code-block/code-block';
 import { theme } from '../../../theme/theme';
 import showcaseComponentCss from './showcase-component.scss?inline';
+import { when } from 'lit/directives/when.js';
 
 export class ShowcaseComponent extends LitElement {
   static styles = [theme, unsafeCSS(showcaseComponentCss)];
 
   static properties = {
     hasCodeExample: { type: Boolean, state: true },
-    exampleLanguage: { type: String }
+    exampleLanguage: { type: String },
+    href: { type: String }
   };
 
   connectedCallback() {
@@ -29,7 +31,20 @@ export class ShowcaseComponent extends LitElement {
 
       <div class="${!this.hasCodeExample ? 'hidden' : ''}">
         <h3>Implementation</h3>
-        <slot name="code"></slot>
+        <div part="implementation">
+          <div part="implementation-code">
+            <slot name="code"></slot>
+          </div>
+          ${when(this.href, () => html`
+            <div part="implementation-footer">
+              <a href="https://github.com/SRGSSR/pillarbox-web-demo/blob/main/static/showcases/${this.href}"
+                 part="implementation-link"
+                 target="_blank">
+                view on github
+              </a>
+            </div>
+          `)}
+        </div>
       </div>
     `;
   }

src/layout/content/showcase/showcase-component.scss

@@ -11,6 +11,31 @@
   border-left: 3px solid var(--color-5);
 }
 
+[part="implementation"] {
+  margin-bottom: var(--size-4);
+  background-color: var(--color-10);
+  border: 2px solid var(--color-5);
+  border-radius: var(--radius-1);
+  box-shadow: var(--inner-shadow-4);
+}
+
+[part="implementation-code"] {
+  padding-inline: var(--size-3);
+}
+
+[part="implementation-footer"] {
+  display: flex;
+  align-items: center;
+  justify-content: end;
+  border-top: 1px solid var(--color-6);
+  padding-inline: var(--size-2);
+}
+
+[part="implementation-link"] {
+  padding: var(--size-2);
+  font-size: var(--font-size-0);
+}
+
 .hidden {
   display: none;
 }

src/layout/content/showcase/showcase-page.js

@@ -25,7 +25,7 @@ export class ShowCasePage extends LitElement {
     return html`
       <div class="fade-in"
            @animationend="${e => e.target.classList.remove('fade-in')}">
-        <showcase-component>
+        <showcase-component href="start-time.html">
           <h2 slot="title">Start the player at a given position</h2>
           <p slot="description">
             In this showcase, we'll demonstrate how to load a video source and
@@ -46,7 +46,7 @@ export class ShowCasePage extends LitElement {
   #renderMultiplePlayers() {
     return html`
       <div class="fade-in" @animationend="${e => e.target.classList.remove('fade-in')}">
-      <showcase-component>
+      <showcase-component href="multi-player.html">
         <h2 slot="title">Multiple Players</h2>
         <p slot="description">
           This example demonstrates how to incorporate multiple video players

src/layout/content/showcase/showcase-page.scss

@@ -12,6 +12,7 @@ a {
   text-decoration: none;
   background-color: var(--color-9);
   border: 1px solid var(--color-10);
+  border-radius: var(--radius-2);
   transition: background-color 0.4s, border-color 0.4s;
   padding-inline: var(--size-3);