feat: init hoppscotch-embed package

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

@@ -0,0 +1,20 @@
+## File-based Routing
+
+Routes will be auto-generated for Vue files in this dir with the same file structure.
+Check out [`vite-plugin-pages`](https://github.com/hannoeru/vite-plugin-pages) for more details.
+
+### Path Aliasing
+
+`~/` is aliased to `./src/` folder.
+
+For example, instead of having
+
+```ts
+import { isDark } from '../../../../composables'
+```
+
+now, you can use
+
+```ts
+import { isDark } from '~/composables'
+```

packages/hoppscotch-embed/src/pages/[...all].vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+const { t } = useI18n()
+</script>
+
+<template>
+  <div>
+    {{ t('not-found') }}
+  </div>
+</template>
+
+<route lang="yaml">
+meta:
+  layout: 404
+</route>

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

@@ -0,0 +1,21 @@
+---
+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

@@ -0,0 +1,49 @@
+<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="text-sm mt-4">
+        <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="btn m-3 text-sm mt-6"
+        @click="router.back()"
+      >
+        {{ t('button.back') }}
+      </button>
+    </div>
+  </div>
+</template>

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

@@ -0,0 +1,64 @@
+<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 class="text-4xl">
+      <carbon-campsite class="inline-block" />
+    </p>
+    <p>
+      <a rel="noreferrer" href="https://github.com/antfu/vitesse" target="_blank">
+        Vitesse
+      </a>
+    </p>
+    <p>
+      <em class="text-sm opacity-75">{{ t('intro.desc') }}</em>
+    </p>
+
+    <div class="py-4" />
+
+    <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>