refactor: clean up boilerplate + init request section

packages/hoppscotch-embed/cypress/integration/basic.spec.ts

@@ -1,28 +1,21 @@
-
 context("Basic", () => {
   beforeEach(() => {
     cy.visit("/")
   })
 
   it("basic nav", () => {
-    cy.url()
+    cy.url().should("eq", "http://localhost:3333/")
-      .should("eq", "http://localhost:3333/")
 
-    cy.contains("[Home Layout]")
+    cy.contains("[Home Layout]").should("exist")
-      .should("exist")
 
     cy.get("#input")
       .type("Vitesse{Enter}")
       .url()
-      .should("eq", "http://localhost:3333/hi/Vitesse")
+      .should("eq", "http://localhost:3333/r/Vitesse")
 
-    cy.contains("[Default Layout]")
+    cy.contains("[Default Layout]").should("exist")
-      .should("exist")
 
-    cy.get(".btn")
+    cy.get(".btn").click().url().should("eq", "http://localhost:3333/")
-      .click()
-      .url()
-      .should("eq", "http://localhost:3333/")
   })
 
   it("markdown", () => {
@@ -31,7 +24,6 @@ context("Basic", () => {
       .url()
       .should("eq", "http://localhost:3333/about")
 
-    cy.get("pre.language-js")
+    cy.get("pre.language-js").should("exist")
-      .should("exist")
   })
 })

packages/hoppscotch-embed/locales/en.yml

@@ -12,3 +12,6 @@ intro:
   aka: Also known as
   whats-your-name: What's your name?
 not-found: Not found
+app:
+  title: Hoppscotch Embed
+  description: Embed Hoppscotch instance in your websites

packages/hoppscotch-embed/package.json

@@ -44,6 +44,7 @@
     "unplugin-icons": "^0.12.22",
     "unplugin-vue-components": "^0.17.2",
     "vite": "^2.6.14",
+    "vite-plugin-fonts": "^0.2.2",
     "vite-plugin-inspect": "^0.3.11",
     "vite-plugin-md": "^0.11.4",
     "vite-plugin-pages": "^0.19.0-beta.6",

packages/hoppscotch-embed/src/components.d.ts

@@ -5,7 +5,9 @@
 declare module "vue" {
   export interface GlobalComponents {
     CarbonCampsite: typeof import("~icons/carbon/campsite")["default"]
+    CarbonCircleDash: typeof import("~icons/carbon/circle-dash")["default"]
     CarbonDicomOverlay: typeof import("~icons/carbon/dicom-overlay")["default"]
+    CarbonHome: typeof import("~icons/carbon/home")["default"]
     CarbonLanguage: typeof import("~icons/carbon/language")["default"]
     CarbonLogoGithub: typeof import("~icons/carbon/logo-github")["default"]
     CarbonMoon: typeof import("~icons/carbon/moon")["default"]
@@ -14,6 +16,11 @@ declare module "vue" {
     CarbonWarning: typeof import("~icons/carbon/warning")["default"]
     Footer: typeof import("./components/Footer.vue")["default"]
     README: typeof import("./components/README.md")["default"]
+    Request: typeof import("./components/Request.vue")["default"]
+    "Request copy": typeof import("./components/Response.vueue")["default"]
+    RequestOptions: typeof import("./components/RequestOptions.vue")["default"]
+    Response: typeof import("./components/Response.vue")["default"]
+    Spinner: typeof import("./components/Spinner.vue")["default"]
   }
 }
 

packages/hoppscotch-embed/src/components/Footer.vue

@@ -13,7 +13,7 @@ const toggleLocales = () => {
 <template>
   <nav class="mt-6 text-xl">
     <router-link class="mx-2 icon-btn" to="/" :title="t('button.home')">
-      <carbon-campsite />
+      <carbon-home />
     </router-link>
 
     <button

packages/hoppscotch-embed/src/components/Request.vue

@@ -0,0 +1,37 @@
+<script setup lang="ts">
+const props = defineProps<{ shortCode: string }>()
+</script>
+
+<template>
+  <div>
+    <div v-if="!props.shortCode">
+      not found
+    </div>
+    <!-- <div v-else>
+      <Spinner />
+      <p>Loading...</p>
+    </div> -->
+    <div v-else>
+      <form class="flex space-x-2">
+        <select id="method" required name="method" class="selectPrimary">
+          <option value="GET">
+            GET
+          </option>
+          <option value="POST">
+            POST
+          </option>
+          <option value="PUT">
+            PUT
+          </option>
+          <option value="DELETE">
+            DELETE
+          </option>
+        </select>
+        <input required type="text" placeholder="URL" class="inputPrimary">
+        <button type="submit" class="buttonPrimary">
+          Send
+        </button>
+      </form>
+    </div>
+  </div>
+</template>

packages/hoppscotch-embed/src/components/RequestOptions.vue

@@ -0,0 +1,3 @@
+<template>
+  <div>request options</div>
+</template>

packages/hoppscotch-embed/src/components/Response.vue

@@ -0,0 +1,3 @@
+<template>
+  <div>response</div>
+</template>

packages/hoppscotch-embed/src/components/Spinner.vue

@@ -0,0 +1,3 @@
+<template>
+  <carbon-circle-dash class="animate-spin" />
+</template>

packages/hoppscotch-embed/src/layouts/default.vue

@@ -1,9 +1,6 @@
 <template>
-  <main class="text-center py-10 px-4 text-gray-700 dark:text-gray-200">
+  <main class="text-center py-10 px-4 text-gray-800 dark:text-gray-200">
     <router-view />
     <Footer />
-    <div class="mx-auto mt-5 text-center text-sm opacity-25">
-      [Default Layout]
-    </div>
   </main>
 </template>

packages/hoppscotch-embed/src/layouts/embed.vue

@@ -0,0 +1,5 @@
+<template>
+  <main class="text-gray-700 dark:text-gray-200">
+    <router-view />
+  </main>
+</template>

packages/hoppscotch-embed/src/pages/about.md

@@ -1,21 +0,0 @@
----
-title: About
----
-
-<div class="text-center">
-  <!-- You can use Vue components inside markdown -->
-  <carbon-dicom-overlay class="text-4xl -mb-6 m-auto" />
-  <h3>About</h3>
-</div>
-
-[Vitesse](https://github.com/antfu/vitesse) is an opinionated [Vite](https://github.com/vitejs/vite) starter template made by [@antfu](https://github.com/antfu) for mocking apps swiftly. With **file-based routing**, **components auto importing**, **markdown support**, I18n, PWA and uses **WindiCSS** for UI.
-
-```js
-// syntax highlighting example
-function vitesse() {
-  const foo = 'bar'
-  console.log(foo)
-}
-```
-
-Check out the [GitHub repo](https://github.com/antfu/vitesse) for more details.

packages/hoppscotch-embed/src/pages/hi/[name].vue

@@ -1,49 +0,0 @@
-<script setup lang="ts">
-import { useUserStore } from "~/stores/user"
-
-const props = defineProps<{ name: string }>()
-const router = useRouter()
-const user = useUserStore()
-const { t } = useI18n()
-
-watchEffect(() => {
-  user.setNewName(props.name)
-})
-</script>
-
-<template>
-  <div>
-    <p class="text-4xl">
-      <carbon-pedestrian class="inline-block" />
-    </p>
-    <p>
-      {{ t('intro.hi', { name: props.name }) }}
-    </p>
-
-    <p class="text-sm opacity-50">
-      <em>{{ t('intro.dynamic-route') }}</em>
-    </p>
-
-    <template v-if="user.otherNames.length">
-      <p class="mt-4 text-sm">
-        <span class="opacity-75">{{ t('intro.aka') }}:</span>
-        <ul>
-          <li v-for="otherName in user.otherNames" :key="otherName">
-            <router-link :to="`/hi/${otherName}`" replace>
-              {{ otherName }}
-            </router-link>
-          </li>
-        </ul>
-      </p>
-    </template>
-
-    <div>
-      <button
-        class="m-3 mt-6 text-sm btn"
-        @click="router.back()"
-      >
-        {{ t('button.back') }}
-      </button>
-    </div>
-  </div>
-</template>

packages/hoppscotch-embed/src/pages/index.vue

@@ -1,49 +1,14 @@
 <script setup lang="ts">
-import { useUserStore } from "~/stores/user"
-
-const user = useUserStore()
-const name = ref(user.savedName)
-
-const router = useRouter()
-const go = () => {
-  if (name.value) router.push(`/hi/${encodeURIComponent(name.value)}`)
-}
-
 const { t } = useI18n()
 </script>
 
 <template>
   <div>
-    <p>
+    <h1 class="font-semibold text-2xl">
-      <em class="text-sm opacity-75">{{ t("intro.desc") }}</em>
+      {{ t("app.title") }}
+    </h1>
+    <p class="mt-2 text-gray-400 dark:text-gray-500">
+      {{ t("app.description") }}
     </p>
-
-    <input
-      id="input"
-      v-model="name"
-      :placeholder="t('intro.whats-your-name')"
-      :aria-label="t('intro.whats-your-name')"
-      type="text"
-      autocomplete="false"
-      p="x-4 y-2"
-      w="250px"
-      text="center"
-      bg="transparent"
-      border="~ rounded gray-200 dark:gray-700"
-      outline="none active:none"
-      @keydown.enter="go"
-    >
-    <label class="hidden" for="input">{{ t("intro.whats-your-name") }}</label>
-
-    <div>
-      <button class="m-3 text-sm btn" :disabled="!name" @click="go">
-        {{ t("button.go") }}
-      </button>
-    </div>
   </div>
 </template>
-
-<route lang="yaml">
-meta:
-  layout: home
-</route>

packages/hoppscotch-embed/src/pages/r/[shortCode].vue

@@ -0,0 +1,14 @@
+<template>
+  <Request :short-code="props.shortCode" />
+  <RequestOptions />
+  <Response />
+</template>
+
+<script setup lang="ts">
+const props = defineProps<{ shortCode: string }>()
+</script>
+
+<route lang="yaml">
+meta:
+  layout: embed
+</route>

packages/hoppscotch-embed/src/styles/main.css

@@ -1,13 +1,139 @@
+:root {
+  --font-sans: "Inter", sans-serif;
+  --font-mono: "Roboto Mono", monospace;
+  --body-font-size: 0.75rem;
+  --body-line-height: 1rem;
+  --primary-color: theme("colors.true-gray.900");
+  --primary-light-color: theme("colors.dark.600");
+  --primary-dark-color: theme("colors.true-gray.800");
+  --secondary-color: theme("colors.true-gray.400");
+  --secondary-light-color: theme("colors.true-gray.500");
+  --secondary-dark-color: theme("colors.true-gray.100");
+  --accent-color: theme("colors.purple.500");
+  --accent-light-color: theme("colors.purple.400");
+  --accent-dark-color: theme("colors.purple.600");
+  --accent-contrast-color: theme("colors.white");
+  --divider-color: theme("colors.true-gray.800");
+  --divider-light-color: theme("colors.dark.500");
+  --divider-dark-color: theme("colors.dark.300");
+  --error-color: theme("colors.warm-gray.800");
+  --tooltip-color: theme("colors.true-gray.100");
+  --popover-color: theme("colors.dark.700");
+}
+
+:root {
+  @apply antialiased;
+
+  accent-color: var(--accent-color);
+  font-variant-ligatures: common-ligatures;
+}
+
+::-webkit-scrollbar-track {
+  @apply bg-transparent;
+}
+
+::-webkit-scrollbar-thumb {
+  @apply bg-divider bg-clip-content;
+  @apply rounded-full;
+  @apply border-solid border-transparent border-4;
+  @apply hover:(bg-dividerDark bg-clip-content) ;
+}
+
+::-webkit-scrollbar {
+  @apply w-4;
+  @apply h-4;
+}
+
+.hide-scrollbar {
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+}
+
+.hide-scrollbar::-webkit-scrollbar {
+  @apply hidden;
+}
+
+*,
+*::before,
+*::after {
+  @apply backface-hidden;
+}
+
+::selection {
+  @apply bg-accentDark;
+  @apply text-accentContrast;
+}
+
+input::placeholder,
+textarea::placeholder {
+  @apply text-secondary;
+  @apply opacity-35;
+}
+
+input,
+textarea {
+  @apply text-secondaryDark;
+  @apply font-medium;
+}
+
+html {
+  scroll-behavior: smooth;
+}
+
+body {
+  @apply bg-primary;
+  @apply text-secondary;
+  @apply font-medium;
+  @apply select-none;
+  @apply overflow-x-hidden;
+
+  animation: fade 300ms forwards;
+  font-size: var(--body-font-size);
+  line-height: var(--body-line-height);
+  -webkit-tap-highlight-color: transparent;
+  -webkit-touch-callout: none;
+}
+
+@keyframes fade {
+  0% {
+    @apply opacity-0;
+  }
+
+  100% {
+    @apply opacity-100;
+  }
+}
+
+.fade-enter-active,
+.fade-leave-active,
+.page-enter-active,
+.page-leave-active,
+.layout-enter-active,
+.layout-leave-active {
+  @apply transition-opacity;
+}
+
+.fade-enter,
+.fade-leave-to,
+.page-enter,
+.page-leave-to,
+.layout-enter,
+.layout-leave-to {
+  @apply opacity-0;
+}
+
 html,
 body,
 #app {
   height: 100%;
   margin: 0;
   padding: 0;
+
+  @apply font-sans;
 }
 
 html.dark {
-  background: #121212;
+  @apply bg-dark-800;
 }
 
 #nprogress {
@@ -39,3 +165,22 @@ html.dark {
     hover:opacity-100 hover:text-teal-600;
   font-size: 0.9em;
 }
+
+.buttonPrimary {
+  @apply bg-teal-600 text-white;
+  @apply rounded py-2 px-6;
+  @apply font-sans;
+}
+
+.inputPrimary {
+  @apply flex flex-1;
+  @apply bg-dark-500;
+  @apply rounded py-2 px-4;
+  @apply font-sans;
+}
+
+.selectPrimary {
+  @apply bg-dark-500;
+  @apply rounded py-2 px-4;
+  @apply font-sans;
+}

packages/hoppscotch-embed/vite.config.ts

@@ -11,6 +11,7 @@ import WindiCSS from "vite-plugin-windicss"
 import { VitePWA } from "vite-plugin-pwa"
 import VueI18n from "@intlify/vite-plugin-vue-i18n"
 import Inspect from "vite-plugin-inspect"
+import ViteFonts from "vite-plugin-fonts"
 
 export default defineConfig({
   resolve: {
@@ -113,6 +114,13 @@ export default defineConfig({
       // change this to enable inspect for debugging
       enabled: false,
     }),
+
+    // https://github.com/stafyniaksacha/vite-plugin-fonts
+    ViteFonts({
+      google: {
+        families: ["Inter", "Roboto Mono"],
+      },
+    }),
   ],
 
   server: {

packages/hoppscotch-embed/windi.config.ts

@@ -4,4 +4,30 @@ export default defineConfig({
   darkMode: "class",
   // https://windicss.org/posts/v30.html#attributify-mode
   attributify: true,
+  theme: {
+    colors: {
+      primary: "var(--primary-color)",
+      primaryLight: "var(--primary-light-color)",
+      primaryDark: "var(--primary-dark-color)",
+      secondary: "var(--secondary-color)",
+      secondaryLight: "var(--secondary-light-color)",
+      secondaryDark: "var(--secondary-dark-color)",
+      accent: "var(--accent-color)",
+      accentLight: "var(--accent-light-color)",
+      accentDark: "var(--accent-dark-color)",
+      accentContrast: "var(--accent-contrast-color)",
+      divider: "var(--divider-color)",
+      dividerLight: "var(--divider-light-color)",
+      dividerDark: "var(--divider-dark-color)",
+      error: "var(--error-color)",
+      tooltip: "var(--tooltip-color)",
+      popover: "var(--popover-color)",
+    },
+    extend: {
+      fontFamily: {
+        sans: "var(--font-sans)",
+        mono: "var(--font-mono)",
+      },
+    },
+  },
 })

pnpm-lock.yaml

@@ -308,6 +308,7 @@ importers:
       unplugin-icons: ^0.12.22
       unplugin-vue-components: ^0.17.2
       vite: ^2.6.14
+      vite-plugin-fonts: ^0.2.2
       vite-plugin-inspect: ^0.3.11
       vite-plugin-md: ^0.11.4
       vite-plugin-pages: ^0.19.0-beta.6
@@ -349,6 +350,7 @@ importers:
       unplugin-icons: 0.12.22_9417d93c2d611a99e242fff8baf59806
       unplugin-vue-components: 0.17.2_vite@2.6.14+vue@3.2.23
       vite: 2.6.14
+      vite-plugin-fonts: 0.2.2_vite@2.6.14
       vite-plugin-inspect: 0.3.11_vite@2.6.14
       vite-plugin-md: 0.11.4_vite@2.6.14
       vite-plugin-pages: 0.19.0-beta.6_9417d93c2d611a99e242fff8baf59806
@@ -18850,6 +18852,14 @@ packages:
       extsprintf: 1.3.0
     dev: true
 
+  /vite-plugin-fonts/0.2.2_vite@2.6.14:
+    resolution: {integrity: sha512-fhzhsrTiuzlDjSO6g5sV5EVIIvbb8lmsaIY6eUTBM4lcF55x40UBpHrcyvNwIhQG211g0lu83XC7oZlkmvdkMA==}
+    peerDependencies:
+      vite: ^2.0.0
+    dependencies:
+      vite: 2.6.14
+    dev: true
+
   /vite-plugin-inspect/0.3.11_vite@2.6.14:
     resolution: {integrity: sha512-YsaV4bhJ++EULZamWVudMsq0VTugR/0slgbSj/A9JI9KmsGsXBCN4zBx0ptd0TkKrRniLbqO7iQqdZaybuLGvQ==}
     peerDependencies: