Add footer to all pages

public/images/brand.svg

@@ -0,0 +1,4 @@
+<svg width="283" height="283" viewBox="0 0 283 283" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M0 39C0 17.4609 17.4609 0 39 0H244C265.539 0 283 17.4609 283 39V244C283 265.539 265.539 283 244 283H39C17.4609 283 0 265.539 0 244V39Z" fill="black"></path>
+    <path d="M121.215 210.72C119.348 211.28 116.361 211.84 112.255 212.4C108.335 212.96 104.228 213.24 99.9347 213.24C95.828 213.24 92.0947 212.96 88.7347 212.4C85.5614 211.84 82.8547 210.72 80.6147 209.04C78.3747 207.36 76.6014 205.12 75.2947 202.32C74.1747 199.333 73.6147 195.507 73.6147 190.84V106.84C73.6147 102.547 74.3614 98.9067 75.8547 95.92C77.5347 92.7467 79.868 89.9467 82.8547 87.52C85.8414 85.0933 89.4814 82.9467 93.7747 81.08C98.2547 79.0267 103.015 77.2533 108.055 75.76C113.095 74.2667 118.321 73.1467 123.735 72.4C129.148 71.4667 134.561 71 139.975 71C148.935 71 156.028 72.7733 161.255 76.32C166.481 79.68 169.095 85.28 169.095 93.12C169.095 95.7333 168.721 98.3467 167.975 100.96C167.228 103.387 166.295 105.627 165.175 107.68C161.255 107.68 157.241 107.867 153.135 108.24C149.028 108.613 145.015 109.173 141.095 109.92C137.175 110.667 133.441 111.507 129.895 112.44C126.535 113.187 123.641 114.12 121.215 115.24V210.72ZM166.387 188.32C166.387 180.48 168.813 173.947 173.667 168.72C178.52 163.493 185.147 160.88 193.547 160.88C201.947 160.88 208.573 163.493 213.427 168.72C218.28 173.947 220.707 180.48 220.707 188.32C220.707 196.16 218.28 202.693 213.427 207.92C208.573 213.147 201.947 215.76 193.547 215.76C185.147 215.76 178.52 213.147 173.667 207.92C168.813 202.693 166.387 196.16 166.387 188.32Z" fill="white"></path>
+</svg>

src/components/Footer.astro

@@ -0,0 +1,108 @@
+---
+import Icon from './Icon.astro';
+---
+
+<div class='py-6 sm:py-16 pb-10 bg-slate-900 text-white'>
+  <div class='container'>
+    <p
+      class='text-gray-400 font-medium flex flex-col sm:flex-row gap-0 sm:gap-4 mb-8 sm:mb-16 justify-center'
+    >
+      <a
+        class='transition-colors px-2 py-1.5 border-b border-b-gray-700 sm:border-b-0 sm:py-0 sm:px-0 hover:text-white'
+        href='/roadmaps'>Roadmaps</a
+      >
+      <a
+        class='transition-colors px-2 py-1.5 border-b border-b-gray-700 sm:border-b-0 sm:py-0 sm:px-0 hover:text-white'
+        href='/guides'>Guides</a
+      >
+      <a
+        class='transition-colors px-2 py-1.5 border-b border-b-gray-700 sm:border-b-0 sm:py-0 sm:px-0 hover:text-white'
+        href='/videos'>Videos</a
+      >
+      <a
+        class='transition-colors px-2 py-1.5 border-b border-b-gray-700 sm:border-b-0 sm:py-0 sm:px-0 hover:text-white'
+        href='/about'>About</a
+      >
+      <a
+        class='transition-colors px-2 py-1.5 sm:border-b-0 sm:py-0 sm:px-0 hover:text-white'
+        href='https://youtube.com/theroadmap?sub_confirmation=1'
+        target='_blank'>YouTube</a
+      >
+    </p>
+
+    <div class='flex flex-col sm:flex-row justify-between gap-12'>
+      <div class='max-w-[365px]'>
+        <p class='flex items-center text-md'>
+          <a
+            class='font-medium text-lg inline-flex items-center hover:text-gray-100 text-white transition-colors hover:text-gray-400'
+            href='/'
+          >
+            <Icon icon='logo' />
+            <span class='ml-2'>roadmap.sh</span>
+          </a>
+          <span class='text-gray-400 mx-2'>by</span>
+          <a
+            class='bg-blue-600 text-sm py-1 px-1.5 font-regular hover:bg-blue-700 rounded-md'
+            href='https://twitter.com/kamranahmedse'
+            target='_blank'
+          >
+            <span class='hidden sm:inline'>@kamranahmedse</span>
+            <span class='inline sm:hidden'>Kamran Ahmed</span>
+          </a>
+        </p>
+        <p class='text-slate-300/60 my-4'>
+          Community created roadmaps, articles, resources and journeys to help
+          you choose your path and grow in your career.
+        </p>
+        <div class='text-gray-400 text-sm'>
+          <p>
+            &copy; roadmap.sh
+            <span class='mx-1.5'>&middot;</span>
+            <a href='/about' class='hover:text-white'>FAQs</a>
+            <span class='mx-1.5'>&middot;</span>
+            <a href='/terms' class='hover:text-white'>Terms</a>
+            <span class='mx-1.5'>&middot;</span>
+            <a href='/privacy' class='hover:text-white'>Privacy</a>
+          </p>
+        </div>
+      </div>
+
+      <div class='text-left sm:text-right max-w-[365px]'>
+        <a href='https://thenewstack.io' target='_blank'>
+          <img
+            src='/images/tns.png'
+            alt='ThewNewStack'
+            class='my-1.5 mr-auto sm:mr-0 sm:ml-auto'
+            width='200'
+            height='24.8'
+          />
+        </a>
+        <p class='text-slate-300/60 my-4'>
+          The leading DevOps resource for Kubernetes, cloud-native computing,
+          and the latest in at-scale development, deployment, and management.
+        </p>
+        <div class='text-gray-400 text-sm'>
+          <p>
+            <a
+              href='https://thenewstack.io/category/devops/'
+              target='_blank'
+              class='text-gray-400 hover:text-white'>DevOps</a
+            >
+            <span class='mx-1.5'>&middot;</span>
+            <a
+              href='https://thenewstack.io/category/kubernetes/'
+              target='_blank'
+              class='text-gray-400 hover:text-white'>Kubernetes</a
+            >
+            <span class='mx-1.5'>&middot;</span>
+            <a
+              href='https://thenewstack.io/category/cloud-native/'
+              target='_blank'
+              class='text-gray-400 hover:text-white'>Cloud-Native</a
+            >
+          </p>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

src/guides/http-basic-authentication.md

@@ -40,7 +40,7 @@ Now that we know what basic authentication is, the question is, how does it work
 ### Step 1
 When the browser first requests the server, the server tries to check the availability of the `Authorization` header in the request. Because it is the first request, no `Authorization` header is found in the request. So the server responds with the `401 Unauthorized` response code and also sends the `WWW-Authenticate` header with the value set to `Basic`, which tells the browser that it needs to trigger the basic authentication flow.
 
-```plaintext
+```text
 401 Unauthorized
 WWW-Authenticate: Basic realm='user_pages'
 ```

src/layouts/BaseLayout.astro

@@ -2,6 +2,7 @@
 import '../styles/global.css';
 import Navigation from '../components/Navigation.astro';
 import OpenSourceBanner from '../components/OpenSourceBanner.astro';
+import Footer from '../components/Footer.astro';
 
 export interface Props {
   title: string;
@@ -26,6 +27,7 @@ const { title } = Astro.props;
     <slot />
 
     <OpenSourceBanner />
+	  <Footer />
     <slot name='after-footer' />
   </body>
 </html>