Development

.github/workflows/deployDev.yml

@@ -1,8 +1,8 @@
-name: Deploy Developement
+name: Deploy Development
 
 on:
   push:
-    branches: ["developement"]
+    branches: ['development']
 
 jobs:
   deploy-dev:

.github/workflows/deployMain.yml

@@ -2,7 +2,7 @@ name: Deploy Main
 
 on:
   push:
-    branches: ["main"]
+    branches: ['main']
 
 jobs:
   deploy:

.gitignore

@@ -21,4 +21,4 @@ logs
 # Local env files
 .env
 .env.*
-!.env.example
+!.env.production

.husky/pre-commit

@@ -0,0 +1,2 @@
+echo "$(git diff --cached --name-only --diff-filter=ACMR | sed 's| |\\ |g')" | xargs prettier --write --ignore-unknown
+git update-index --again

.prettierignore

@@ -0,0 +1,2 @@
+node_modules/
+dist/

.prettierrc

@@ -0,0 +1,7 @@
+{
+  "semi": true,
+  "singleQuote": true,
+  "tabWidth": 2,
+  "printWidth": 80,
+  "trailingComma": "es5"
+}

README.md

@@ -60,9 +60,9 @@ cd pinkmind
 pnpm install
 ```
 
-### Running for Developement
+### Running for Development
 
-Use the following pnpm scripts for developement.
+Use the following pnpm scripts for development.
 
 ```bash
 pnpm run pretty # formats the code
@@ -71,7 +71,7 @@ pnpm run dev # to start a local dev server
 
 ### Running for Deployment
 
-Use the following npm scripts for developement.
+Use the following npm scripts for development.
 
 ```bash
 pnpm run build # build the application for production

app.config.ts

@@ -1,6 +1,7 @@
 export default defineAppConfig({
-  title: "Pinkmind",
+  title: 'WhiteMind',
   ui: {
-    primary: "customPrimary",
+    primary: 'customPrimary',
+    secondary: 'customSecondary',
   },
 });

app.vue

@@ -1,9 +1,34 @@
-<script setup></script>
+<script setup lang="ts">
+const route = useRoute();
+const sessionStore = useSessionStore();
+
+const splitRoute = computed(() => route.path.split('/'));
+
+const moveNotifications = computed((): boolean => {
+  if (splitRoute.value.length <= 1) {
+    return false;
+  }
+  return splitRoute.value[1] === 'tutorial';
+});
+
+await sessionStore.syncLocalSessionData();
+
+onMounted(() => {
+  window.addEventListener('beforeunload', sessionStore.saveSessionData);
+});
+
+onUnmounted(() => {
+  window.removeEventListener('beforeunload', sessionStore.saveSessionData);
+});
+</script>
 
 <template>
   <div>
+    <LoadingOverlay />
     <NuxtLayout>
       <NuxtPage />
     </NuxtLayout>
+    <UNotifications :class="{ 'mr-96': moveNotifications }" />
+    <VerifyEmailModal />
   </div>
 </template>

assets/css/tailwind.css

@@ -1,3 +1,30 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+@layer base {
+  body {
+    background-color: black;
+  }
+}
+
+::-webkit-scrollbar {
+  width: 5px;
+}
+
+/* Track */
+::-webkit-scrollbar-track {
+  background: rgba(0, 0, 0, 0.1);
+  border-radius: 3px;
+}
+
+/* Handle */
+::-webkit-scrollbar-thumb {
+  background: #888;
+  border-radius: 3px;
+}
+
+/* Handle on hover */
+::-webkit-scrollbar-thumb:hover {
+  background: #555;
+}

components/AppFooter.vue

@@ -1,26 +1,34 @@
-<script setup lang="ts">
-</script>
+<script setup lang="ts"></script>
 
 <template>
-  <!-- tailwind custom footer -->
-  <footer class="bg-gray-800 justify-center">
+  <footer class="w-full">
     <div class="container p-4 mx-auto">
       <div class="flex flex-col md:flex-row justify-between items-center">
         <div class="flex flex-col md:flex-row items-center">
-          <div class="text-white text-lg font-bold">Neurologism</div>
-          <div class="text-gray-400 ml-0 md:ml-4 mt-2 md:mt-0">© {{ new Date().getFullYear() }}</div>
+          <div class="text-white text-lg font-bold">
+            <a href="/">WhiteMind</a>
+          </div>
+          <div class="text-gray-400 ml-0 md:ml-4 mt-2 md:mt-0">
+            © {{ new Date().getFullYear() }}
+          </div>
         </div>
-        <div class="flex flex-col md:flex-row items-center mt-4 md:mt-0">
-          <div class="text-gray-400"><a href="/privacy">Privacy Policy</a></div>
-          <div class="text-gray-400 ml-4"><a href="/terms">Terms of Service</a></div>
-          <div class="text-gray-400 ml-4"><a href="/contact">Contact Us</a></div>
-          <div class="text-gray-400 ml-4 items-center">
-            <a href="https://github.com/neurologism" target="_blank">
-              <UIcon name="i-mdi-github" class="w-5 h-5" />
+        <div class="flex sm:grid-cols-2 md:flex-row items-center mt-4 md:mt-0">
+          <div class="grid text-gray-400">
+            <a href="/privacy-policy">Privacy Policy</a>
+          </div>
+          <div class="text-gray-400 ml-4">
+            <a href="/terms-and-conditions">Terms and Conditions</a>
+          </div>
+          <div class="text-gray-400 ml-4">
+            <a href="/contact">Contact Us</a>
+          </div>
+          <div class="text-gray-400 ml-4 mt-2 items-center">
+            <a href="https://discord.gg/RhnprTzd8q" target="_blank">
+              <UIcon name="ic:baseline-discord" class="w-5 h-5" />
             </a>
           </div>
         </div>
       </div>
     </div>
   </footer>
-</template>
+</template>

components/AppHeader.vue

@@ -1,69 +1,84 @@
 <script setup lang="ts">
-const emit = defineEmits(["click-theme", "click-profile"]);
+const sessionStore = useSessionStore();
 
-const colorMode = useColorMode();
-const isDark = computed({
-  get() {
-    return colorMode.value === "dark";
-  },
-  set() {
-    colorMode.preference = colorMode.value === "dark" ? "light" : "dark";
-  },
-});
+const emit = defineEmits(['click-theme']);
+
+const showProfileSlideover = ref(false);
 
-const links = [
-  [
-    {
-      label: "Whitemind",
-      click: () => navigateTo("/"),
-    },
-  ],
-  [
-    {
-      label: "Home",
-      icon: "i-heroicons-home",
-      to: "/",
-    },
-    {
-      label: "Tutorials",
-      icon: "i-heroicons-academic-cap",
-      to: "/tutorials",
-    },
-    {
-      label: "Projects",
-      icon: "i-heroicons-folder",
-      to: "/projects",
-    },
-  ],
-  [
-    {
-      label: "",
-      icon: "fluent:dark-theme-20-filled",
-      click: () => (isDark.value = !isDark.value),
-    },
-    {
-      label: "Profile",
-      avatar: {
-        src: "/testpfp.jpg",
-      },
-      click: () => emit("click-profile"),
-    },
-  ],
-];
+const colorMode = useColorMode();
+// const isDark = computed({
+//   get() {
+//     return colorMode.value === 'dark';
+//   },
+//   set() {
+//     colorMode.preference = colorMode.value === 'dark' ? 'light' : 'dark';
+//   },
+// });
 </script>
 
 <template>
   <ClientOnly>
-    <UHorizontalNavigation
-      :links="links"
-      class="border-b border-gray-200 dark:border-gray-800"
+    <ProfileSlideover v-model="showProfileSlideover" />
+    <div
+      class="backdrop-blur-md border-slate-800 flex items-center w-full z-50 fixed h-16"
+      style="border-bottom-width: 0.5px"
     >
-      <template #default="{ link }">
-        <span
-          class="group-hover:text-primary relative hidden md:block first:text-xl first:font-semibold first:dark:text-white first:dark:group-hover:text-white"
-          >{{ link.label }}</span
+      <div
+        @click="() => navigateTo('/')"
+        class="hover:cursor-pointer grow-0 ml-1 sm:ml-3 lg:ml-5"
+      >
+        <NuxtImg
+          src="/favicon-32x32.png"
+          width="48"
+          height="48"
+          alt="WhiteMind"
+          class="group-hover:text-primary hover:bg-blend relative first:text-xl first:font-semibold first:dark:text-white first:dark:group-hover:text-white p-2"
+          style="filter: drop-shadow(2px 4px 3px rgba(0, 0, 0, 0.5))"
+        />
+      </div>
+      <div
+        class="text-white text-2xl font-semibold hover:cursor-pointer grow-0"
+        style="filter: drop-shadow(2px 4px 3px rgba(0, 0, 0, 0.5))"
+        @click="() => navigateTo('/')"
+      >
+        WhiteMind
+      </div>
+
+      <div class="flex-grow"></div>
+      <!-- <UTooltip
+        class="hover:cursor-pointer sm:mr-2"
+        @click="() => (isDark = !isDark)"
+        :text="isDark ? 'light theme' : 'dark theme'"
+      >
+        <UIcon name="fluent:dark-theme-20-filled" size="large" />
+      </UTooltip> -->
+      <div
+        v-if="!sessionStore.isAuthorized"
+        class="ml-1 sm:ml-3 lg:ml-5 grow-0 mr-3 lg:mr-5"
+      >
+        <UButton
+          to="/login"
+          variant="ghost"
+          color="gray"
+          class="mr-1 sm:mr-3 lg:mr-5"
+        >
+          Sign in
+        </UButton>
+        <UButton to="/signup" variant="solid" color="gray"> Sign up </UButton>
+      </div>
+
+      <UTooltip class="mr-1 sm:mr-3 lg:mr-5 grow-0" v-else>
+        <div
+          class="hover:cursor-pointer grow-0 mr-1 sm:mr-3 lg:mr-5"
+          @click="showProfileSlideover = !showProfileSlideover"
         >
-      </template>
-    </UHorizontalNavigation>
+          <UAvatar
+            size="md"
+            :src="sessionStore.hasPfp ? sessionStore.pfpUrl : '/user.svg'"
+            :alt="sessionStore.sessionData.user.displayname ?? ''"
+          />
+        </div>
+      </UTooltip>
+    </div>
   </ClientOnly>
 </template>

components/HintBox.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+const showHint = ref(false);
+</script>
+
+<template>
+  <div @click="showHint = true">
+    <slot name="default" />
+    <div class="m-2">
+      <slot v-if="showHint" name="hint" />
+    </div>
+  </div>
+</template>