Support steps

assets/components/Icons/AppleLogo.vue

@@ -0,0 +1,7 @@
+<template>
+  <svg class="fill-current" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="16.77 4 136.46 162">
+    <path
+      d="m150.37 130.25c-2.45 5.66-5.35 10.87-8.71 15.66-4.58 6.53-8.33 11.05-11.22 13.56-4.48 4.12-9.28 6.23-14.42 6.35-3.69 0-8.14-1.05-13.32-3.18-5.197-2.12-9.973-3.17-14.34-3.17-4.58 0-9.492 1.05-14.746 3.17-5.262 2.13-9.501 3.24-12.742 3.35-4.929 0.21-9.842-1.96-14.746-6.52-3.13-2.73-7.045-7.41-11.735-14.04-5.032-7.08-9.169-15.29-12.41-24.65-3.471-10.11-5.211-19.9-5.211-29.378 0-10.857 2.346-20.221 7.045-28.068 3.693-6.303 8.606-11.275 14.755-14.925s12.793-5.51 19.948-5.629c3.915 0 9.049 1.211 15.429 3.591 6.362 2.388 10.447 3.599 12.238 3.599 1.339 0 5.877-1.416 13.57-4.239 7.275-2.618 13.415-3.702 18.445-3.275 13.63 1.1 23.87 6.473 30.68 16.153-12.19 7.386-18.22 17.731-18.1 31.002 0.11 10.337 3.86 18.939 11.23 25.769 3.34 3.17 7.07 5.62 11.22 7.36-0.9 2.61-1.85 5.11-2.86 7.51zm-31.26-123.01c0 8.1021-2.96 15.667-8.86 22.669-7.12 8.324-15.732 13.134-25.071 12.375-0.119-0.972-0.188-1.995-0.188-3.07 0-7.778 3.386-16.102 9.399-22.908 3.002-3.446 6.82-6.3113 11.45-8.597 4.62-2.2516 8.99-3.4968 13.1-3.71 0.12 1.0831 0.17 2.1663 0.17 3.2409z"
+    ></path>
+  </svg>
+</template>

assets/components/Icons/SlackIcon.vue

@@ -1,12 +1,14 @@
 <template>
-    <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 125.1 125.1" xml:space="preserve">
-        <defs></defs>
-        <g>
-            <rect x="54.1" y="53.8" transform="matrix(0.3176 0.9482 -0.9482 0.3176 102.0437 -16.5935)" width="17" height="17.6" />
-            <g>
-                <rect x="54.1" y="53.8" transform="matrix(0.3176 0.9482 -0.9482 0.3176 102.0437 -16.5935)" width="17" height="17.6" />
-                <path d="M119.8,45.3c-12.9-43-31.5-53-74.5-40.1s-53,31.5-40.1,74.5s31.5,53,74.5,40.1S132.7,88.3,119.8,45.3z M98.1,73.2L90,75.9l2.8,8.4c1.1,3.4-0.7,7.1-4.1,8.2c-0.7,0.2-1.5,0.4-2.2,0.3c-2.6-0.1-5.1-1.8-6-4.4L77.7,80L61,85.7l2.8,8.4c1.1,3.4-0.7,7.1-4.1,8.2c-0.7,0.2-1.5,0.4-2.2,0.3c-2.6-0.1-5.1-1.8-6-4.4l-2.8-8.4l-8.1,2.7c-0.7,0.2-1.5,0.4-2.2,0.3c-2.6-0.1-5.1-1.8-6-4.4c-1.1-3.4,0.7-7.1,4.1-8.2l8.1-2.7l-5.4-16.1l-8.1,2.7c-0.7,0.2-1.5,0.4-2.2,0.3c-2.6-0.1-5.1-1.8-6-4.4c-1.1-3.4,0.7-7.1,4.1-8.2l8.1-2.7l-2.8-8.4c-1.1-3.4,0.7-7.1,4.1-8.2c3.4-1.1,7.1,0.7,8.2,4.1l2.8,8.4l16.7-5.6L61.3,31c-1.1-3.4,0.7-7.1,4.1-8.2s7.1,0.7,8.2,4.1l2.8,8.4l8.1-2.7c3.4-1.1,7.1,0.7,8.2,4.1c1.1,3.4-0.7,7.1-4.1,8.2l-8.1,2.7l5.4,16.1L94,61c3.4-1.1,7.1,0.7,8.2,4.1C103.3,68.4,101.5,72.1,98.1,73.2z"/>
-            </g>
-        </g>
-    </svg>
-</template>
+  <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 125.1 125.1" xml:space="preserve">
+    <defs></defs>
+    <g>
+      <rect x="54.1" y="53.8" transform="matrix(0.3176 0.9482 -0.9482 0.3176 102.0437 -16.5935)" width="17" height="17.6" />
+      <g>
+        <rect x="54.1" y="53.8" transform="matrix(0.3176 0.9482 -0.9482 0.3176 102.0437 -16.5935)" width="17" height="17.6" />
+        <path
+          d="M119.8,45.3c-12.9-43-31.5-53-74.5-40.1s-53,31.5-40.1,74.5s31.5,53,74.5,40.1S132.7,88.3,119.8,45.3z M98.1,73.2L90,75.9l2.8,8.4c1.1,3.4-0.7,7.1-4.1,8.2c-0.7,0.2-1.5,0.4-2.2,0.3c-2.6-0.1-5.1-1.8-6-4.4L77.7,80L61,85.7l2.8,8.4c1.1,3.4-0.7,7.1-4.1,8.2c-0.7,0.2-1.5,0.4-2.2,0.3c-2.6-0.1-5.1-1.8-6-4.4l-2.8-8.4l-8.1,2.7c-0.7,0.2-1.5,0.4-2.2,0.3c-2.6-0.1-5.1-1.8-6-4.4c-1.1-3.4,0.7-7.1,4.1-8.2l8.1-2.7l-5.4-16.1l-8.1,2.7c-0.7,0.2-1.5,0.4-2.2,0.3c-2.6-0.1-5.1-1.8-6-4.4c-1.1-3.4,0.7-7.1,4.1-8.2l8.1-2.7l-2.8-8.4c-1.1-3.4,0.7-7.1,4.1-8.2c3.4-1.1,7.1,0.7,8.2,4.1l2.8,8.4l16.7-5.6L61.3,31c-1.1-3.4,0.7-7.1,4.1-8.2s7.1,0.7,8.2,4.1l2.8,8.4l8.1-2.7c3.4-1.1,7.1,0.7,8.2,4.1c1.1,3.4-0.7,7.1-4.1,8.2l-8.1,2.7l5.4,16.1L94,61c3.4-1.1,7.1,0.7,8.2,4.1C103.3,68.4,101.5,72.1,98.1,73.2z"
+        />
+      </g>
+    </g>
+  </svg>
+</template>

assets/components/Icons/TwitterIcon.vue

@@ -1,6 +1,8 @@
 <template>
-    <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 273.5 222.3" xml:space="preserve">
-        <defs></defs>
-        <path d="M273.5,26.3c-10.1,4.5-20.9,7.5-32.2,8.8c11.6-6.9,20.5-17.9,24.7-31c-10.9,6.4-22.9,11.1-35.7,13.6C220.1,6.8,205.5,0,189.4,0c-31,0-56.1,25.1-56.1,56.1c0,4.4,0.5,8.7,1.5,12.8c-46.7-2.4-88-24.7-115.7-58.6c-4.8,8.3-7.6,17.9-7.6,28.2c0,19.5,9.9,36.6,25,46.7c-9.2-0.3-17.8-2.8-25.4-7c0,0.2,0,0.5,0,0.7c0,27.2,19.3,49.8,45,55c-4.7,1.3-9.7,2-14.8,2c-3.6,0-7.1-0.4-10.6-1c7.1,22.3,27.9,38.5,52.4,39c-19.2,15-43.4,24-69.7,24c-4.5,0-9-0.3-13.4-0.8c24.8,15.9,54.3,25.2,86,25.2c103.2,0,159.6-85.5,159.6-159.6c0-2.4-0.1-4.9-0.2-7.3C256.5,47.4,266,37.5,273.5,26.3z"/>
-    </svg>
-</template>
+  <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 273.5 222.3" xml:space="preserve">
+    <defs></defs>
+    <path
+      d="M273.5,26.3c-10.1,4.5-20.9,7.5-32.2,8.8c11.6-6.9,20.5-17.9,24.7-31c-10.9,6.4-22.9,11.1-35.7,13.6C220.1,6.8,205.5,0,189.4,0c-31,0-56.1,25.1-56.1,56.1c0,4.4,0.5,8.7,1.5,12.8c-46.7-2.4-88-24.7-115.7-58.6c-4.8,8.3-7.6,17.9-7.6,28.2c0,19.5,9.9,36.6,25,46.7c-9.2-0.3-17.8-2.8-25.4-7c0,0.2,0,0.5,0,0.7c0,27.2,19.3,49.8,45,55c-4.7,1.3-9.7,2-14.8,2c-3.6,0-7.1-0.4-10.6-1c7.1,22.3,27.9,38.5,52.4,39c-19.2,15-43.4,24-69.7,24c-4.5,0-9-0.3-13.4-0.8c24.8,15.9,54.3,25.2,86,25.2c103.2,0,159.6-85.5,159.6-159.6c0-2.4-0.1-4.9-0.2-7.3C256.5,47.4,266,37.5,273.5,26.3z"
+    />
+  </svg>
+</template>

assets/components/Icons/WindowsLogo.vue

@@ -0,0 +1,22 @@
+<template>
+  <svg class="fill-current" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 305 305" xml:space="preserve">
+    <g id="XMLID_108_">
+      <path
+        id="XMLID_109_"
+        d="M139.999,25.775v116.724c0,1.381,1.119,2.5,2.5,2.5H302.46c1.381,0,2.5-1.119,2.5-2.5V2.5   c0-0.726-0.315-1.416-0.864-1.891c-0.548-0.475-1.275-0.687-1.996-0.583L142.139,23.301   C140.91,23.48,139.999,24.534,139.999,25.775z"
+      />
+      <path
+        id="XMLID_110_"
+        d="M122.501,279.948c0.601,0,1.186-0.216,1.644-0.616c0.544-0.475,0.856-1.162,0.856-1.884V162.5   c0-1.381-1.119-2.5-2.5-2.5H2.592c-0.663,0-1.299,0.263-1.768,0.732c-0.469,0.469-0.732,1.105-0.732,1.768l0.006,98.515   c0,1.25,0.923,2.307,2.16,2.477l119.903,16.434C122.274,279.94,122.388,279.948,122.501,279.948z"
+      />
+      <path
+        id="XMLID_138_"
+        d="M2.609,144.999h119.892c1.381,0,2.5-1.119,2.5-2.5V28.681c0-0.722-0.312-1.408-0.855-1.883   c-0.543-0.475-1.261-0.693-1.981-0.594L2.164,42.5C0.923,42.669-0.001,43.728,0,44.98l0.109,97.521   C0.111,143.881,1.23,144.999,2.609,144.999z"
+      />
+      <path
+        id="XMLID_169_"
+        d="M302.46,305c0.599,0,1.182-0.215,1.64-0.613c0.546-0.475,0.86-1.163,0.86-1.887l0.04-140   c0-0.663-0.263-1.299-0.732-1.768c-0.469-0.469-1.105-0.732-1.768-0.732H142.499c-1.381,0-2.5,1.119-2.5,2.5v117.496   c0,1.246,0.918,2.302,2.151,2.476l159.961,22.504C302.228,304.992,302.344,305,302.46,305z"
+      />
+    </g>
+  </svg>
+</template>

assets/components/Online/LoginWithGitHubButton.vue

@@ -6,12 +6,12 @@ import { useStudentStore } from "../../stores/student";
 const studentStore = useStudentStore();
 
 const login = async () => {
-    await studentStore.startLogin();
+  await studentStore.startLogin();
 };
 </script>
 <template>
-    <PrimaryButton @click="login" class="flex items-center px-2 py-2">
-        <GitHubIcon class="mr-2 h-5 w-5" />
-        <span class="flex text-xs font-normal">Log In &nbsp;with github</span>
-    </PrimaryButton>
+  <PrimaryButton @click="login" class="flex items-center px-2 py-2">
+    <GitHubIcon class="mr-2 h-5 w-5" />
+    <span class="flex text-xs font-normal">Log In &nbsp;with github</span>
+  </PrimaryButton>
 </template>

assets/components/Website/Pages/Offline/SupportStep.vue

@@ -0,0 +1,38 @@
+<script setup>
+import TerminalDisplay from "./TerminalDisplay.vue";
+
+defineProps({
+  step: {
+    type: Number,
+  },
+  title: {
+    type: String,
+  },
+  lines: {
+    type: Array,
+    required: false,
+    default: () => [],
+  },
+});
+</script>
+<template>
+  <li class="mb-12 flex w-full justify-between p-4">
+    <div class="flex flex-col">
+      <div class="mb-4 flex h-8 w-8 items-center justify-center rounded bg-slate-800 font-bold text-white">
+        {{ step }}
+      </div>
+      <div class="ml-4 flex-grow border-l border-solid border-slate-800"></div>
+    </div>
+
+    <div class="flex w-full flex-col lg:flex-row">
+      <div class="mr-8 flex-1 px-4">
+        <h4 class="mt-0 p-0 font-work-sans text-lg font-bold capitalize not-italic text-pink-600">
+          {{ title }}
+        </h4>
+        <p class="mt-4 text-sm text-gray-300"><slot name="description"></slot></p>
+      </div>
+
+      <TerminalDisplay v-if="lines.length" :lines="lines" />
+    </div>
+  </li>
+</template>

assets/components/Website/Pages/Offline/TerminalDisplay.vue

@@ -57,7 +57,7 @@ const clipboardAvailable = computed(() => {
           <span class="font-mono text-[10px] text-pink-600">Copied!</span>
         </TransitionRoot>
       </div>
-      <div class="whitespace-pre-wrap border-none bg-gray-900 p-0 font-mono text-white lg:px-10">
+      <div class="overflow-x-scroll whitespace-pre-wrap border-none bg-gray-900 p-0 font-mono text-sm text-white md:text-base lg:px-10">
         <div v-for="(line, i) in lines" :key="i">
           <span v-if="line.startsWith('//')" class="text-pink-600">
             <br />

assets/components/Website/Pages/Offline/TerminalStep.vue

@@ -19,7 +19,7 @@ defineProps({
 <template>
   <li class="mb-12 flex w-full justify-between p-4">
     <div class="flex flex-col">
-      <div class="mb-4 flex h-8 w-8 items-center justify-center rounded bg-slate-800 font-bold">
+      <div class="mb-4 flex h-8 w-8 items-center justify-center rounded bg-slate-800 font-bold text-white">
         {{ step }}
       </div>
       <div class="ml-4 flex-grow border-l border-solid border-slate-800"></div>

assets/components/Website/Pages/PageHome.vue

@@ -17,7 +17,7 @@ import TheWorkshops from "./Home/Section/TheWorkshops.vue";
 import BuildYourOwn from "./Home/Section/BuildYourOwn.vue";
 
 import { SparklesIcon } from "@heroicons/vue/24/solid";
-import {useStudentStore} from "../../../stores/student";
+import { useStudentStore } from "../../../stores/student";
 
 const studentStore = useStudentStore();
 
@@ -171,7 +171,6 @@ onUnmounted(() => {
                 <div v-else>
                   <GitHubIcon class="mr-2 h-6 w-6" />
                   <span v-if="studentStore.student">Log In with github</span>
-
                 </div>
               </PrimaryButton>
             </div>
@@ -255,7 +254,7 @@ onUnmounted(() => {
                   type="text"
                   placeholder="Type Something..."
                   v-model="userInput"
-                  class="w-full rounded-2xl p-5 font-work-sans text-base border-0 font-bold text-gray-900 focus:border-pink-500 focus:outline-none focus:ring focus:ring-pink-500"
+                  class="w-full rounded-2xl border-0 p-5 font-work-sans text-base font-bold text-gray-900 focus:border-pink-500 focus:outline-none focus:ring focus:ring-pink-500"
                   @keyup="userInputKeyup"
                 />