Add initial landing page

app.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
   const config = useRuntimeConfig();
 
-  if (config.public.onMaintenance) {
+  if (config.public.onMaintenance === 'true') {
     throw createError({
       statusCode: 503,
       statusMessage:

components/footer.vue

@@ -0,0 +1,7 @@
+<template>
+  <footer class="footer footer-center p-4 bg-base-300 text-base-content">
+    <aside>
+      <p>Copyright © 2023 - All right reserved by Netervati</p>
+    </aside>
+  </footer>
+</template>

components/landing-page/code.vue

@@ -0,0 +1,22 @@
+<template>
+  <div class="p-4">
+    <div class="m-auto mockup-code text-xs md:text-lg w-full overflow-hidden">
+      <pre data-prefix="$"><code>curl -X GET \</code></pre> 
+      <pre data-prefix=">"><code>  <span class="text-cyan-500">https://gateway.pseudorestapi.com/api/users</span> \</code></pre> 
+      <pre data-prefix=">"><code>  -H "Accept: application/json" \</code></pre>
+      <pre data-prefix=">"><code>  -u myapikey:mysecretkey</code></pre>
+      <pre data-prefix=">"><code>[</code></pre>
+      <pre data-prefix=">"><code>  {</code></pre>
+      <pre data-prefix=">"><code>    <span class="text-green-500">"id"</span>: <span class="text-yellow-500">"8b710bdf-0ea0-4cfc-859c-74b9dc6a597d"</span>,</code></pre>
+      <pre data-prefix=">"><code>    <span class="text-green-500">"full_name"</span>: <span class="text-yellow-500">"Carroll Bergstrom"</span>,</code></pre>
+      <pre data-prefix=">"><code>    <span class="text-green-500">"email"</span>: <span class="text-yellow-500">"Keon.Osinski-Jenkins@hotmail.com"</span></code></pre>
+      <pre data-prefix=">"><code>  },</code></pre>
+      <pre data-prefix=">"><code>  {</code></pre>
+      <pre data-prefix=">"><code>    <span class="text-green-500">"id"</span>: <span class="text-yellow-500">"b09ee0c6-f274-4ae2-933c-027e7d5bfe9b"</span>,</code></pre>
+      <pre data-prefix=">"><code>    <span class="text-green-500">"full_name"</span>: <span class="text-yellow-500">"Luis Littel"</span>,</code></pre>
+      <pre data-prefix=">"><code>    <span class="text-green-500">"email"</span>: <span class="text-yellow-500">"Mabel19@gmail.com"</span></code></pre>
+      <pre data-prefix=">"><code>  },</code></pre>
+      <pre data-prefix=">"><code>]</code></pre>
+    </div>
+  </div>
+</template>

components/nav/bar.vue

@@ -39,7 +39,7 @@
 <template>
   <div class="bg-base-100 border-b border-gray-300 navbar">
     <div class="flex-1">
-      <NuxtLink class="btn btn-ghost normal-case text-xl" to="/">
+      <NuxtLink class="btn btn-ghost normal-case text-xl" to="/dashboard">
         <img width="200" src="/full-logo.png" />
       </NuxtLink>
     </div>

components/nav/barPublic.vue

@@ -0,0 +1,34 @@
+<script lang="ts" setup>
+  import { Bars3Icon, ComputerDesktopIcon } from '@heroicons/vue/24/outline';
+</script>
+
+<template>
+  <div class="navbar bg-base-100">
+    <div class="navbar-start">
+      <div class="dropdown">
+        <label tabindex="0" class="btn btn-ghost lg:hidden">
+          <Bars3Icon class="h-6 w-6" />
+        </label>
+        <ul tabindex="0" class="menu menu-sm dropdown-content mt-3 z-[1] p-2 shadow bg-base-100 rounded-box w-52">
+          <li><NuxtLink to="/docs">Docs</NuxtLink></li>
+          <li><NuxtLink to="https://github.com/netervati/pseudo-rest-api">Source</NuxtLink></li>
+        </ul>
+      </div>
+      <NuxtLink class="btn btn-ghost normal-case text-xl" to="/">
+        <img width="200" src="/full-logo.png" />
+      </NuxtLink>
+    </div>
+    <div class="navbar-center hidden lg:flex">
+      <ul class="menu menu-horizontal px-1">
+        <li><NuxtLink to="/docs">Docs</NuxtLink></li>
+        <li><NuxtLink to="https://github.com/netervati/pseudo-rest-api">Source</NuxtLink></li>
+      </ul>
+    </div>
+    <div class="navbar-end">
+      <NuxtLink class="btn btn-sm" to="/dashboard">
+        <ComputerDesktopIcon class="h-6 w-6" />
+        <span class="hidden md:block md:ml-2">Dashboard</span>
+      </NuxtLink>
+    </div>
+  </div>
+</template>

components/project/grid.vue

@@ -11,7 +11,7 @@
     */
     projectStore.target = project;
 
-    navigateTo(`/project/${project.project_keys[0].api_key}/apis`);
+    navigateTo(`/dashboard/project/${project.project_keys[0].api_key}/apis`);
   };
 </script>
 

components/side/bar.vue

@@ -9,25 +9,25 @@
   const route = useRoute();
 
   const links = computed(() => {
-    const base = [{ name: 'Home', icon: HomeIcon, to: '/' }];
+    const base = [{ name: 'Home', icon: HomeIcon, to: '/dashboard' }];
 
     if (route.path.includes('project') && route.params.urlpath !== null) {
       base.push(
         ...[
           {
             name: 'APIs',
             icon: ServerStackIcon,
-            to: `/project/${route.params.urlpath}/apis`,
+            to: `/dashboard/project/${route.params.urlpath}/apis`,
           },
           {
             name: 'Resources',
             icon: CircleStackIcon,
-            to: `/project/${route.params.urlpath}/resources`,
+            to: `/dashboard/project/${route.params.urlpath}/resources`,
           },
           {
             name: 'Settings',
             icon: WrenchScrewdriverIcon,
-            to: `/project/${route.params.urlpath}/settings`,
+            to: `/dashboard/project/${route.params.urlpath}/settings`,
           },
         ]
       );

composables/useSignIn.ts

@@ -24,6 +24,7 @@ export default function (): SignInProgressProps {
 
     url = url.includes('http') ? url : `https://${url}`;
     url = url.charAt(url.length - 1) === '/' ? url : `${url}/`;
+    url = `${url}dashboard`;
 
     return url;
   };
@@ -55,7 +56,7 @@ export default function (): SignInProgressProps {
     }
 
     if (user.value) {
-      navigateTo('/');
+      navigateTo('/dashboard');
     }
   });
 

middleware/auth.ts

@@ -6,7 +6,7 @@ export default defineNuxtRouteMiddleware((to, from) => {
     return navigateTo('/login');
   }
 
-  if (from.path === '/login' && to.path === '/') {
+  if (from.path === '/login' && to.path === '/dashboard') {
     toast.dark('Successfully signed in');
   }
 });

middleware/validateProject.ts

@@ -27,5 +27,5 @@ export default defineNuxtRouteMiddleware(async (to) => {
 
   toast.error('Project does not exists!');
 
-  return navigateTo('/');
+  return navigateTo('/dashboard');
 });

pages/dashboard/index.vue

@@ -0,0 +1,36 @@
+<script lang="ts" setup>
+  import ModalCreateProject from '~~/components/modal/createProject.vue';
+  import useProject from '~~/stores/useProject';
+
+  definePageMeta({
+    middleware: 'auth',
+  });
+
+  const project = useProject();
+  const secretKey = ref('');
+
+  const modal = useModal(ModalCreateProject, {
+    id: 'create-project',
+    onSuccess: (key: string) => {
+      secretKey.value = key;
+    },
+  });
+</script>
+
+<template>
+  <div class="p-6">
+    <Button
+      :disabled="project.isDisabled"
+      color="success"
+      size="sm"
+      @click="modal.open"
+    >
+      New Project
+    </Button>
+    <ProjectSecretKeyBox :secret-key="secretKey" />
+    <ProjectGrid />
+    <ClientOnly>
+      <component :is="modal.component" />
+    </ClientOnly>
+  </div>
+</template>

pages/project/[url-path]/settings.vue → pages/dashboard/project/[url-path]/settings.vue

@@ -63,7 +63,7 @@
       await projectKey.regenerate(project.target!.id, {
         onSuccess: (result: { projectApiKey: string; secretKey: string }) => {
           navigateTo({
-            path: `/project/${result.projectApiKey}/settings`,
+            path: `/dashboard/project/${result.projectApiKey}/settings`,
             query: {
               secret_key: result.secretKey,
             },
@@ -83,7 +83,7 @@
           await project.refresh();
           closeModal();
 
-          navigateTo('/');
+          navigateTo('/dashboard');
         },
       });
     },

pages/index.vue

@@ -1,36 +1,17 @@
-<script lang="ts" setup>
-  import ModalCreateProject from '~~/components/modal/createProject.vue';
-  import useProject from '~~/stores/useProject';
-
+<script setup lang="ts">
   definePageMeta({
-    middleware: 'auth',
-  });
-
-  const project = useProject();
-  const secretKey = ref('');
-
-  const modal = useModal(ModalCreateProject, {
-    id: 'create-project',
-    onSuccess: (key: string) => {
-      secretKey.value = key;
-    },
+    layout: 'blank',
   });
 </script>
 
 <template>
-  <div class="p-6">
-    <Button
-      :disabled="project.isDisabled"
-      color="success"
-      size="sm"
-      @click="modal.open"
-    >
-      New Project
-    </Button>
-    <ProjectSecretKeyBox :secret-key="secretKey" />
-    <ProjectGrid />
-    <ClientOnly>
-      <component :is="modal.component" />
-    </ClientOnly>
-  </div>
+  <NavBarPublic />
+  <section class="flex flex-col md:flex-row gap-3 p-2 md:p-8">
+    <LandingPageCode />
+    <header class="m-auto">
+      <h1 class="font-bold text-4xl md:text-6xl">Intuitive way to mock REST endpoints</h1>
+      <p class="mt-8 text-lg md:text-2xl">Build your own fake REST APIs without having to learn any programming language or framework</p>
+    </header>
+  </section>
+  <Footer />
 </template>

pages/login.vue

@@ -3,7 +3,7 @@
     layout: 'blank',
   });
 
-  preloadRouteComponents('/');
+  preloadRouteComponents('/dashboard');
 
   const signIn = useSignIn();
 </script>