Change homepage layout and add footer

Author: sulco

docs/tutorialkit.dev/astro.config.ts

@@ -25,6 +25,7 @@ export default defineConfig({
       },
       components: {
         Head: './src/components/Layout/Head.astro',
+        PageFrame: './src/components/Layout/PageFrame.astro',
       },
       customCss: ['./src/styles/custom.scss'],
       logo: {

docs/tutorialkit.dev/src/assets/tutorialkit-preview.png

@@ -0,0 +1,22 @@
+<footer class="page-footer">
+  <a href="https://github.com/stackblitz/tutorialkit/blob/main/LICENSE" target="_blank">MIT License © 2024</a>
+  <span><a href="https://webcontainers.io" target="_blank">Powered by WebContainers</a></span>
+</footer>
+
+<style>
+  footer {
+    width: 100%;
+    padding: var(--sl-nav-pad-y) var(--sl-nav-pad-x);
+    opacity: 0.7;
+    font-size: 90%;
+    position: relative;
+    z-index: 10;
+    text-align: center;
+    display: flex;
+    justify-content: space-between;
+  }
+  a {
+    color: inherit;
+    text-decoration: none;
+  }
+</style>

docs/tutorialkit.dev/src/components/Layout/PageFooter.astro

@@ -0,0 +1,96 @@
+---
+import MobileMenuToggle from 'virtual:starlight/components/MobileMenuToggle';
+import type { Props } from '../props';
+import PageFooter from './PageFooter.astro';
+
+const { hasSidebar, labels } = Astro.props;
+---
+
+<div class="page sl-flex">
+  <header class="header"><slot name="header" /></header>
+  {
+    hasSidebar && (
+      <nav class="sidebar" aria-label={labels['sidebarNav.accessibleLabel']}>
+        <MobileMenuToggle {...Astro.props} />
+        <div id="starlight__sidebar" class="sidebar-pane">
+          <div class="sidebar-content sl-flex">
+            <slot name="sidebar" />
+          </div>
+        </div>
+      </nav>
+    )
+  }
+  <div class="main-frame"><slot /></div>
+  <PageFooter />
+</div>
+
+<style>
+  .page {
+    flex-direction: column;
+    min-height: 100vh;
+  }
+
+  .header {
+    z-index: var(--sl-z-index-navbar);
+    position: fixed;
+    inset-inline-start: 0;
+    inset-block-start: 0;
+    width: 100%;
+    height: var(--sl-nav-height);
+    border-bottom: 1px solid var(--sl-color-hairline-shade);
+    padding: var(--sl-nav-pad-y) var(--sl-nav-pad-x);
+    padding-inline-end: var(--sl-nav-pad-x);
+    background-color: var(--sl-color-bg-nav);
+  }
+
+  :global([data-has-sidebar]) .header {
+    padding-inline-end: calc(var(--sl-nav-gap) + var(--sl-nav-pad-x) + var(--sl-menu-button-size));
+  }
+
+  .sidebar-pane {
+    visibility: var(--sl-sidebar-visibility, hidden);
+    position: fixed;
+    z-index: var(--sl-z-index-menu);
+    inset-block: var(--sl-nav-height) 0;
+    inset-inline-start: 0;
+    width: 100%;
+    background-color: var(--sl-color-black);
+    overflow-y: auto;
+  }
+
+  :global([aria-expanded='true']) ~ .sidebar-pane {
+    --sl-sidebar-visibility: visible;
+  }
+
+  .sidebar-content {
+    height: 100%;
+    min-height: max-content;
+    padding: 1rem var(--sl-sidebar-pad-x) 0;
+    flex-direction: column;
+    gap: 1rem;
+  }
+
+  @media (min-width: 50rem) {
+    .sidebar-content::after {
+      content: '';
+      padding-bottom: 1px;
+    }
+  }
+
+  .main-frame {
+    padding-top: calc(var(--sl-nav-height) + var(--sl-mobile-toc-height));
+    padding-inline-start: var(--sl-content-inline-start);
+  }
+
+  @media (min-width: 50rem) {
+    :global([data-has-sidebar]) .header {
+      padding-inline-end: var(--sl-nav-pad-x);
+    }
+    .sidebar-pane {
+      --sl-sidebar-visibility: visible;
+      width: var(--sl-sidebar-width);
+      background-color: var(--sl-color-bg-sidebar);
+      border-inline-end: 1px solid var(--sl-color-hairline-shade);
+    }
+  }
+</style>

docs/tutorialkit.dev/src/components/Layout/PageFrame.astro

@@ -1,40 +1,46 @@
 ---
 import { Button } from '@components/Buttons/Button/Button';
-import tutorialkitThemesImg from '@assets/tutorialkit-themes.png';
+import tutorialkitImg from '@assets/tutorialkit-preview.png';
 ---
 
 <div class="simple-page-hero">
-  <h1>Increase Library Adoption with Interactive Coding Tutorials.</h1>
-  <p>
-    TutorialKit by <a href="https://stackblitz.com" target="_blank" rel="noopener">StackBlitz</a> enables you to create interactive
-    coding tutorials effortlessly, boosting the adoption of your framework, UI library or design system.
-  </p>
-  <div class="simple-page-hero__links">
-    <Button url="/guides/about/" theme="accent">Get Started</Button>
-    <Button url="https://demo.tutorialkit.dev">Try Demo</Button>
+  <div class="main">
+    <h1>Increase Library Adoption with Interactive Coding Tutorials.</h1>
+    <p>
+      TutorialKit by <a href="https://stackblitz.com" target="_blank" rel="noopener">StackBlitz</a> enables you to create
+      interactive coding tutorials effortlessly, boosting the adoption of your framework, UI library or design system.
+    </p>
+    <div class="simple-page-hero__links">
+      <Button url="/guides/about/" theme="accent">Get Started</Button>
+      <Button url="https://demo.tutorialkit.dev">Try Demo</Button>
+    </div>
   </div>
   <div class="ui-example">
-    <img src={tutorialkitThemesImg.src} />
+    <a href="https://demo.tutorialkit.dev" target="_blank">
+      <img src={tutorialkitImg.src} />
+    </a>
   </div>
 </div>
 
 <style lang="scss">
   @import '../../styles/breakpoints.scss';
 
+  :global(body) {
+    --sl-content-width: 75rem;
+  }
+
   .simple-page-hero {
     display: flex;
-    flex-direction: column;
+    flex-direction: row;
     justify-content: center;
-    align-items: center;
-    gap: 16px;
-    width: 820px;
+    align-items: start;
+    gap: 48px;
     max-width: 100%;
-    margin: 9dvh auto 0;
-    padding: 0 24px;
-    overflow-y: hidden;
+    margin: 9dvh auto 6dvh;
 
     @media screen and (max-width: $breakpoint-tablet-small) {
-      gap: 8px;
+      display: block;
+      padding: 0 24px;
     }
 
     @media screen and (max-width: $breakpoint-small) {
@@ -47,38 +53,49 @@ import tutorialkitThemesImg from '@assets/tutorialkit-themes.png';
     }
   }
 
+  .simple-page-hero .main {
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+
+    @media screen and (max-width: $breakpoint-tablet-small) {
+      gap: 12px;
+    }
+
+    @media screen and (max-width: $breakpoint-mobile) {
+      gap: 8px;
+    }
+  }
+
   .simple-page-hero h1 {
-    font-size: 56px;
+    font-size: 48px;
     font-weight: 600;
-    line-height: 1.12;
+    line-height: 1.3;
     letter-spacing: -2px;
-    text-align: center;
 
     @media screen and (max-width: $breakpoint-tablet-small) {
       max-width: 620px;
       font-size: 40px;
       letter-spacing: -1px;
+      text-align: center;
     }
 
     @media screen and (max-width: $breakpoint-mobile) {
       font-size: 28px;
       line-height: 1.2;
     }
-
-    @media screen and (max-width: $breakpoint-tiny) {
-      // font-size: 24px;
-    }
   }
 
   .simple-page-hero p {
     max-width: 680px;
-    font-size: 16px;
+    font-size: 20px;
     line-height: 1.8;
-    text-align: center;
+    margin-bottom: 1em;
 
     @media screen and (max-width: $breakpoint-tablet-small) {
       max-width: 680px;
       text-wrap: pretty;
+      text-align: center;
     }
 
     @media screen and (max-width: $breakpoint-small) {
@@ -104,42 +121,47 @@ import tutorialkitThemesImg from '@assets/tutorialkit-themes.png';
   .simple-page-hero__links {
     display: flex;
     justify-content: center;
-    gap: 12px;
+    gap: 44px;
 
     @media screen and (max-width: $breakpoint-mobile) {
       width: 100%;
       flex-direction: column;
     }
+
+    :global(> *) {
+      @media screen and (max-width: $breakpoint-mobile) {
+        margin: 0 auto;
+      }
+    }
   }
 
   .ui-example {
-    position: fixed;
-    top: max(532px, 50dvh);
-    width: 1400px;
-    max-width: 100%;
-    height: auto;
-    padding: 0 32px;
+    width: 100%;
     mask-image: radial-gradient(160% 100% at 50% 0%, #000 70%, transparent);
-    z-index: -1;
+    overflow: visible;
 
     html[data-theme='light'] & {
       mask-image: none;
     }
 
     @media screen and (max-width: $breakpoint-small) {
       top: 524px;
-      padding: 0 16px;
     }
 
-    @media screen and (max-width: $breakpoint-mobile) {
-      padding: 0;
+    a {
+      display: block;
+      transition: all 0.1s ease-in-out;
+      transform-origin: 0 150%;
+      scale: 0.98;
+    }
+
+    a:hover {
+      scale: 1;
     }
 
     img {
+      transition: all 0.2s ease-in-out;
       border-radius: 6px;
-      box-shadow:
-        -2px -2px 2px 0 hsla(0, 0%, 6%, 0.02),
-        0 0 0 1px rgba(0, 0, 0, 0.032);
 
       @media screen and (max-width: $breakpoint-mobile) {
         border-radius: 0;

docs/tutorialkit.dev/src/content/docs/index.astro

@@ -12,6 +12,7 @@ body {
   font-family: 'Inter', sans-serif;
   box-sizing: border-box;
   overscroll-behavior: none;
+  --footer-height: 50px;
 
   &::before {
     position: absolute;
@@ -30,17 +31,10 @@ body {
 
     [data-theme='dark'] & {
       background-image: radial-gradient(100% 100% at 50% 0%, transparent 60%, rgba(0, 0, 0, 0.4) 100%);
-      &::before {
-        background-image: linear-gradient(transparent 60%, rgba(0, 0, 0, 0.8) 100%);
-      }
     }
 
     [data-theme='light'] & {
       background-image: radial-gradient(100% 100% at 50% 0%, #fff 60%, #eff0f3 100%);
-
-      &::before {
-        background-image: linear-gradient(transparent 60%, rgba(255, 255, 255, 0.8) 100%);
-      }
     }
   }
 }
@@ -85,12 +79,19 @@ site-search button[data-open-modal] {
   transition-property: border-color, color;
 }
 
+// ----------------------------------------
+// Left sidebar
+#starlight__sidebar {
+  margin-bottom: var(--footer-height);
+}
+
 // ----------------------------------------
 // Table of contents
 
 .right-sidebar {
   padding-left: 32px;
   border: none;
+  height: calc(100% - var(--footer-height));
 }
 
 #starlight__on-this-page {