refactor: polish request section

packages/hoppscotch-embed/.eslintignore

@@ -0,0 +1,2 @@
+dist
+public

packages/hoppscotch-embed/.eslintrc

@@ -0,0 +1,7 @@
+{
+  "extends": ["@antfu"],
+  "rules": {
+    "semi": [2, "never"],
+    "quotes": ["error", "double"]
+  }
+}

packages/hoppscotch-embed/.gitignore

@@ -0,0 +1,9 @@
+.DS_Store
+.vite-ssg-dist
+.vite-ssg-temp
+*.local
+dist
+dist-ssr
+node_modules
+.idea/
+*.log

packages/hoppscotch-embed/.npmrc

@@ -0,0 +1 @@
+shamefully-hoist=true

packages/hoppscotch-embed/README.md

@@ -0,0 +1,183 @@
+<p align='center'>
+  <img src='https://user-images.githubusercontent.com/11247099/111864893-a457fd00-899e-11eb-9f05-f4b88987541d.png' alt='Vitesse - Opinionated Vite Starter Template' width='600'/>
+</p>
+
+<p align='center'>
+Mocking up web app with <b>Vitesse</b><sup><em>(speed)</em></sup><br>
+</p>
+
+<br>
+
+<p align='center'>
+<a href="https://vitesse.netlify.app/">Live Demo</a>
+</p>
+
+<br>
+
+## Features
+
+- ⚡️ [Vue 3](https://github.com/vuejs/vue-next), [Vite 2](https://github.com/vitejs/vite), [pnpm](https://pnpm.js.org/), [ESBuild](https://github.com/evanw/esbuild) - born with fastness
+
+- 🗂 [File based routing](./src/pages)
+
+- 📦 [Components auto importing](./src/components)
+
+- 🍍 [State Management via Pinia](https://pinia.esm.dev/)
+
+- 📑 [Layout system](./src/layouts)
+
+- 📲 [PWA](https://github.com/antfu/vite-plugin-pwa)
+
+- 🎨 [Windi CSS](https://github.com/windicss/windicss) - next generation utility-first CSS framework
+
+- 😃 [Use icons from any icon sets, with no compromise](https://github.com/antfu/unplugin-icons)
+
+- 🌍 [I18n ready](./locales)
+
+- 🗒 [Markdown Support](https://github.com/antfu/vite-plugin-md)
+
+- 🔥 Use the [new `<script setup>` syntax](https://github.com/vuejs/rfcs/pull/227)
+
+- 📥 [APIs auto importing](https://github.com/antfu/unplugin-auto-import) - use Composition API and others directly
+
+- 🖨 Server-side generation (SSG) via [vite-ssg](https://github.com/antfu/vite-ssg)
+
+- 🦔 Critical CSS via [critters](https://github.com/GoogleChromeLabs/critters)
+
+- 🦾 TypeScript, of course
+
+- ⚙️ E2E Testing with [Cypress](https://cypress.io/) on [GitHub Actions](https://github.com/features/actions)
+
+- ☁️ Deploy on Netlify, zero-config
+
+<br>
+
+## Pre-packed
+
+### UI Frameworks
+
+- [Windi CSS](https://github.com/windicss/windicss) (On-demand [TailwindCSS](https://tailwindcss.com/)) - lighter and faster, with a bunch of additional features!
+  - [Windi CSS Typography](https://windicss.org/plugins/official/typography.html)
+
+### Icons
+
+- [Iconify](https://iconify.design) - use icons from any icon sets [🔍Icônes](https://icones.netlify.app/)
+- [`unplugin-icons`](https://github.com/antfu/unplugin-icons) - icons as Vue components
+
+### Plugins
+
+- [Vue Router](https://github.com/vuejs/vue-router)
+  - [`vite-plugin-pages`](https://github.com/hannoeru/vite-plugin-pages) - file system based routing
+  - [`vite-plugin-vue-layouts`](https://github.com/JohnCampionJr/vite-plugin-vue-layouts) - layouts for pages
+- [Pinia](https://pinia.esm.dev) - Intuitive, type safe, light and flexible Store for Vue using the composition api
+- [`unplugin-vue-components`](https://github.com/antfu/unplugin-vue-components) - components auto import
+- [`unplugin-auto-import`](https://github.com/antfu/unplugin-auto-import) - Directly use Vue Composition API and others without importing
+- [`vite-plugin-pwa`](https://github.com/antfu/vite-plugin-pwa) - PWA
+- [`vite-plugin-windicss`](https://github.com/antfu/vite-plugin-windicss) - Windi CSS Integration
+- [`vite-plugin-md`](https://github.com/antfu/vite-plugin-md) - Markdown as components / components in Markdown
+  - [`markdown-it-prism`](https://github.com/jGleitz/markdown-it-prism) - [Prism](https://prismjs.com/) for syntax highlighting
+  - [`prism-theme-vars`](https://github.com/antfu/prism-theme-vars) - customizable Prism.js theme using CSS variables
+- [Vue I18n](https://github.com/intlify/vue-i18n-next) - Internationalization
+  - [`vite-plugin-vue-i18n`](https://github.com/intlify/vite-plugin-vue-i18n) - Vite plugin for Vue I18n
+- [VueUse](https://github.com/antfu/vueuse) - collection of useful composition APIs
+- [`@vueuse/head`](https://github.com/vueuse/head) - manipulate document head reactively
+
+### Coding Style
+
+- Use Composition API with [`<script setup>` SFC syntax](https://github.com/vuejs/rfcs/pull/227)
+- [ESLint](https://eslint.org/) with [@antfu/eslint-config](https://github.com/antfu/eslint-config), single quotes, no semi.
+
+### Dev tools
+
+- [TypeScript](https://www.typescriptlang.org/)
+- [Cypress](https://cypress.io/) - E2E Testing
+- [pnpm](https://pnpm.js.org/) - fast, disk space efficient package manager
+- [`vite-ssg`](https://github.com/antfu/vite-ssg) - Server-side generation
+  - [critters](https://github.com/GoogleChromeLabs/critters) - Critical CSS
+- [Netlify](https://www.netlify.com/) - zero-config deployment
+- [VS Code Extensions](./.vscode/extensions.json)
+  - [Vite](https://marketplace.visualstudio.com/items?itemName=antfu.vite) - Fire up Vite server automatically
+  - [Volar](https://marketplace.visualstudio.com/items?itemName=johnsoncodehk.volar) - Vue 3 `<script setup>` IDE support
+  - [Iconify IntelliSense](https://marketplace.visualstudio.com/items?itemName=antfu.iconify) - Icon inline display and autocomplete
+  - [i18n Ally](https://marketplace.visualstudio.com/items?itemName=lokalise.i18n-ally) - All in one i18n support
+  - [Windi CSS Intellisense](https://marketplace.visualstudio.com/items?itemName=voorjaar.windicss-intellisense) - IDE support for Windi CSS
+  - [ESLint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint)
+
+## Variations
+
+As this template is strongly opinionated, the following provides a curated list for community-maintained variations with different preferences and feature sets. Check them out as well. PR to add yours is also welcome!
+
+###### Official
+
+- [vitesse-lite](https://github.com/antfu/vitesse-lite) - Lightweight version of Vitesse
+- [vitesse-nuxt3](https://github.com/antfu/vitesse-nuxt3) - Vitesse for Nuxt 3
+- [vitesse-nuxt-bridge](https://github.com/antfu/vitesse-nuxt-bridge) - Vitesse for Nuxt 2 with Bridge
+- [vitesse-webext](https://github.com/antfu/vitesse-webext) - WebExtension Vite starter template
+
+###### Community
+
+- [vitesse-addons](https://github.com/JohnCampionJr/vitesse-addons) by [@johncampionjr](https://github.com/johncampionjr) - additional options for integrations, including [Prettier](https://prettier.io) and [Storybook](https://storybook.js.org)
+- [vitesse-ssr-template](https://github.com/frandiox/vitesse-ssr-template) by [@frandiox](https://github.com/frandiox) - Vitesse with SSR
+- [vitespa](https://github.com/ctholho/vitespa) by [@ctholho](https://github.com/ctholho) - Like Vitesse but without SSG/SSR
+- [vitailse](https://github.com/zynth17/vitailse) by [@zynth17](https://github.com/zynth17) - Like Vitesse but with TailwindCSS
+- [vitesse-modernized-chrome-ext](https://github.com/xiaoluoboding/vitesse-modernized-chrome-ext) by [@xiaoluoboding](https://github.com/xiaoluoboding) - ⚡️ Modernized Chrome Extension Manifest V3 Vite Starter Template
+- [vitesse-stackter-clean-architect](https://github.com/shamscorner/vitesse-stackter-clean-architect) by [@shamscorner](https://github.com/shamscorner) - A modular clean architecture pattern in vitesse template
+- [vitesse-enterprise](https://github.com/FranciscoKloganB/vitesse-enterprise) by [@FranciscoKloganB](https://github.com/FranciscoKloganB) - Consistent coding styles regardless of team-size.
+
+## Try it now!
+
+### GitHub Template
+
+[Create a repo from this template on GitHub](https://github.com/antfu/vitesse/generate).
+
+### Clone to local
+
+If you prefer to do it manually with the cleaner git history
+
+```bash
+npx degit antfu/vitesse my-vitesse-app
+cd my-vitesse-app
+pnpm i # If you don't have pnpm installed, run: npm install -g pnpm
+```
+
+## Checklist
+
+When you use this template, try follow the checklist to update your info properly
+
+- [ ] Change the author name in `LICENSE`
+- [ ] Change the title in `App.vue`
+- [ ] Change the favicon in `public`
+- [ ] Remove the `.github` folder which contains the funding info
+- [ ] Clean up the READMEs and remove routes
+
+And, enjoy :)
+
+## Usage
+
+### Development
+
+Just run and visit http://localhost:3333
+
+```bash
+pnpm dev
+```
+
+### Build
+
+To build the App, run
+
+```bash
+pnpm build
+```
+
+And you will see the generated file in `dist` that ready to be served.
+
+### Deploy on Netlify
+
+Go to [Netlify](https://app.netlify.com/start) and select your clone, `OK` along the way, and your App will be live in a minute.
+
+## Why
+
+I have created several Vite apps recently. Setting the configs up is kinda the bottleneck for me to make the ideas simply come true within a very short time.
+
+So I made this starter template for myself to create apps more easily, along with some good practices that I have learned from making those apps. It's strongly opinionated, but feel free to tweak it or even maintains your own forks. [(see community maintained variation forks)](#variations)

packages/hoppscotch-embed/cypress.json

@@ -0,0 +1,4 @@
+{
+  "baseUrl": "http://localhost:3333",
+  "chromeWebSecurity": false
+}

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

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

packages/hoppscotch-embed/index.html

@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="icon" href="/favicon.ico" type="image/ico" />
+    <link rel="apple-touch-icon" href="/pwa-192x192.png" />
+    <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#00aba9" />
+    <meta name="msapplication-TileColor" content="#00aba9" />
+    <meta name="theme-color" content="#ffffff" />
+    <script>
+      ;(function () {
+        const prefersDark =
+          window.matchMedia &&
+          window.matchMedia("(prefers-color-scheme: dark)").matches
+        const setting = localStorage.getItem("vueuse-color-scheme") || "auto"
+        if (setting === "dark" || (prefersDark && setting !== "light"))
+          document.documentElement.classList.toggle("dark", true)
+      })()
+    </script>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>

packages/hoppscotch-embed/locales/README.md

@@ -0,0 +1,7 @@
+## i18n
+
+This directory is to serve your locale translation files. YAML under this folder would be loaded automatically and register with their filenames as locale code.
+
+Check out [`vue-i18n`](https://github.com/intlify/vue-i18n-next) for more details.
+
+If you are using VS Code, [`i18n Ally`](https://github.com/lokalise/i18n-ally) is recommended to make the i18n experience better.

packages/hoppscotch-embed/locales/de.yml

@@ -0,0 +1,14 @@
+button:
+  about: Über
+  back: Zurück
+  go: Los
+  home: Startseite
+  toggle_dark: Dunkelmodus umschalten
+  toggle_langs: Sprachen ändern
+intro:
+  desc: Vite Startvorlage mit Vorlieben
+  dynamic-route: Demo einer dynamischen Route
+  hi: Hi, {name}!
+  aka: Auch bekannt als
+  whats-your-name: Wie heißt du?
+not-found: Nicht gefunden

packages/hoppscotch-embed/locales/en.yml

@@ -0,0 +1,17 @@
+button:
+  about: About
+  back: Back
+  go: GO
+  home: Home
+  toggle_dark: Toggle dark mode
+  toggle_langs: Change languages
+intro:
+  desc: Opinionated Vite Starter Template
+  dynamic-route: Demo of dynamic route
+  hi: Hi, {name}!
+  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/locales/es.yml

@@ -0,0 +1,14 @@
+button:
+  about: Acerca de
+  back: Atrás
+  go: Ir
+  home: Inicio
+  toggle_dark: Alternar modo oscuro
+  toggle_langs: Cambiar idiomas
+intro:
+  desc: Plantilla de Inicio de Vite Dogmática
+  dynamic-route: Demo de ruta dinámica
+  hi: ¡Hola, {name}!
+  aka: También conocido como
+  whats-your-name: ¿Cómo te llamas?
+not-found: No se ha encontrado

packages/hoppscotch-embed/locales/fr.yml

@@ -0,0 +1,14 @@
+button:
+  about: À propos de
+  back: Retour
+  go: Essayer
+  home: Accueil
+  toggle_dark: Basculer en mode sombre
+  toggle_langs: Changer de langue
+intro:
+  desc: Exemple d'application Vite
+  dynamic-route: Démo de route dynamique
+  hi: Salut, {name}!
+  aka: Aussi connu sous le nom de
+  whats-your-name: Comment t'appelles-tu ?
+not-found: Page non trouvée

packages/hoppscotch-embed/locales/id.yml

@@ -0,0 +1,14 @@
+button:
+  about: Tentang
+  back: Kembali
+  go: Pergi
+  home: Beranda
+  toggle_dark: Ubah ke mode gelap
+  toggle_langs: Ubah bahasa
+intro:
+  desc: Template awal vite
+  dynamic-route: Contoh rute dinamik
+  hi: Halo, {name}!
+  aka: Juga diketahui sebagai
+  whats-your-name: Siapa nama anda?
+not-found: Tidak ditemukan

packages/hoppscotch-embed/locales/it.yml

@@ -0,0 +1,13 @@
+button:
+  about: Su di me
+  back: Indietro
+  go: Vai
+  home: Home
+  toggle_dark: Attiva/disattiva modalità scura
+  toggle_langs: Cambia lingua
+intro:
+  desc: Modello per una Applicazione Vite
+  dynamic-route: Demo di rotta dinamica
+  hi: Ciao, {name}!
+  whats-your-name: Come ti chiami?
+not-found: Non trovato

packages/hoppscotch-embed/locales/ja.yml

@@ -0,0 +1,13 @@
+button:
+  about: これは？
+  back: 戻る
+  go: 進む
+  home: ホーム
+  toggle_dark: ダークモード切り替え
+  toggle_langs: 言語切り替え
+intro:
+  desc: 固執された Vite スターターテンプレート
+  dynamic-route: 動的ルートのデモ
+  hi: こんにちは、{name}!
+  whats-your-name: 君の名は。
+not-found: 見つかりませんでした

packages/hoppscotch-embed/locales/ko.yml

@@ -0,0 +1,14 @@
+button:
+  about: 소개
+  back: 뒤로가기
+  go: 이동
+  home: 홈
+  toggle_dark: 다크모드 토글
+  toggle_langs: 언어 변경
+intro:
+  desc: Vite 애플리케이션 템플릿
+  dynamic-route: 다이나믹 라우트 데모
+  hi: 안녕, {name}!
+  whats-your-name: 이름이 뭐예요?
+not-found: 찾을 수 없습니다
+

packages/hoppscotch-embed/locales/pl.yml

@@ -0,0 +1,14 @@
+button:
+  about: O nas
+  back: Wróć
+  go: WEJDŹ
+  home: Strona główna
+  toggle_dark: Ustaw tryb nocny
+  toggle_langs: Zmień język
+intro:
+  desc: Opiniowany szablon startowy Vite
+  dynamic-route: Demonstracja dynamicznego route
+  hi: Cześć, {name}!
+  aka: Znany też jako
+  whats-your-name: Jak masz na imię?
+not-found: Nie znaleziono

packages/hoppscotch-embed/locales/pt-BR.yml

@@ -0,0 +1,14 @@
+button:
+  about: Sobre
+  back: Voltar
+  go: Ir
+  home: Início
+  toggle_dark: Alternar modo escuro
+  toggle_langs: Mudar de idioma
+intro:
+  desc: Modelo Opinativo de Partida de Vite
+  dynamic-route: Demonstração de rota dinâmica
+  hi: Olá, {name}!
+  aka: Também conhecido como
+  whats-your-name: Qual é o seu nome?
+not-found: Não encontrado

packages/hoppscotch-embed/locales/ru.yml

@@ -0,0 +1,13 @@
+button:
+  about: О шаблоне
+  back: Назад
+  go: Перейти
+  home: Главная
+  toggle_dark: Включить темный режим
+  toggle_langs: Сменить язык
+intro:
+  desc: Самостоятельный начальный шаблон Vite
+  dynamic-route: Демо динамического маршрута
+  hi: Привет, {name}!
+  whats-your-name: Как тебя зовут?
+not-found: Не найден

packages/hoppscotch-embed/locales/tr.yml

@@ -0,0 +1,14 @@
+button:
+  about: Hakkımda
+  back: Geri
+  go: İLERİ
+  home: Anasayfa
+  toggle_dark: Karanlık modu değiştir
+  toggle_langs: Dilleri değiştir
+intro:
+  desc: Görüşlü Vite Başlangıç Şablonu
+  dynamic-route: Dinamik rota demosu
+  hi: Merhaba, {name}!
+  aka: Ayrıca şöyle bilinir
+  whats-your-name: Adınız nedir?
+not-found: Bulunamadı

packages/hoppscotch-embed/locales/vi.yml

@@ -0,0 +1,13 @@
+button:
+  about: Về
+  back: Quay lại
+  go: Đi
+  home: Khởi đầu
+  toggle_dark: Chuyển đổi chế độ tối
+  toggle_langs: Thay đổi ngôn ngữ
+intro:
+  desc: Ý kiến cá nhân Vite Template để bắt đầu
+  dynamic-route: Bản giới thiệu về dynamic route
+  hi: Hi, {name}!
+  whats-your-name: Tên bạn là gì?
+not-found: Không tìm thấy

packages/hoppscotch-embed/locales/zh-CN.yml

@@ -0,0 +1,14 @@
+button:
+  about: 关于
+  back: 返回
+  go: 确定
+  home: 首页
+  toggle_dark: 切换深色模式
+  toggle_langs: 切换语言
+intro:
+  desc: 固执己见的 Vite 项目模板
+  dynamic-route: 动态路由演示
+  hi: 你好，{name}
+  aka: 也叫
+  whats-your-name: 输入你的名字
+not-found: 未找到页面

packages/hoppscotch-embed/netlify.toml

@@ -0,0 +1,18 @@
+[build.environment]
+  # bypass npm auto install
+  NPM_FLAGS = "--version"
+  NODE_VERSION = "16"
+
+[build]
+  publish = "dist"
+  command = "npx pnpm i --store=node_modules/.pnpm-store && npx pnpm run build"
+
+[[redirects]]
+  from = "/*"
+  to = "/index.html"
+  status = 200
+
+[[headers]]
+  for = "/manifest.webmanifest"
+  [headers.values]
+    Content-Type = "application/manifest+json"

packages/hoppscotch-embed/package.json

@@ -0,0 +1,57 @@
+{
+  "private": true,
+  "scripts": {
+    "build": "cross-env NODE_ENV=production vite-ssg build",
+    "dev": "vite --port 3333 --open",
+    "lintfix": "eslint \"**/*.{vue,ts,js}\" --fix",
+    "lint": "eslint \"**/*.{vue,ts,js}\"",
+    "test": "cypress open",
+    "preview": "vite preview",
+    "preview-https": "serve dist",
+    "typecheck": "vue-tsc --noEmit",
+    "do-lint": "pnpm run lint",
+    "do-lintfix": "pnpm run lintfix",
+    "do-build-prod": "pnpm run build",
+    "do-test": "pnpm run test"
+  },
+  "dependencies": {
+    "@vueuse/core": "^7.1.2",
+    "@vueuse/head": "^0.7.2",
+    "nprogress": "^0.2.0",
+    "pinia": "^2.0.5",
+    "vue": "^3.2.23",
+    "vue-demi": "^0.12.1",
+    "vue-i18n": "^9.1.9",
+    "vue-router": "^4.0.12"
+  },
+  "devDependencies": {
+    "@antfu/eslint-config": "^0.11.1",
+    "@iconify-json/carbon": "^1.0.11",
+    "@intlify/vite-plugin-vue-i18n": "^3.2.1",
+    "@types/nprogress": "^0.2.0",
+    "@vitejs/plugin-vue": "^1.10.1",
+    "@vue/compiler-sfc": "^3.2.23",
+    "@vue/server-renderer": "^3.2.23",
+    "critters": "^0.0.15",
+    "cross-env": "^7.0.3",
+    "cypress": "^9.1.0",
+    "eslint": "^8.3.0",
+    "eslint-plugin-cypress": "^2.12.1",
+    "https-localhost": "^4.7.0",
+    "pnpm": "^6.23.2",
+    "typescript": "^4.5.2",
+    "unplugin-auto-import": "^0.5.1",
+    "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",
+    "vite-plugin-pwa": "^0.11.9",
+    "vite-plugin-vue-layouts": "^0.5.0",
+    "vite-plugin-windicss": "^1.5.3",
+    "vite-ssg": "^0.16.2",
+    "vue-tsc": "^0.29.6"
+  }
+}

packages/hoppscotch-embed/public/_headers

@@ -0,0 +1,3 @@
+/assets/*
+  cache-control: max-age=31536000
+  cache-control: immutable

packages/hoppscotch-embed/public/robots.txt

@@ -0,0 +1,2 @@
+User-agent: *
+Allow: /

packages/hoppscotch-embed/public/safari-pinned-tab.svg

@@ -0,0 +1,41 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
+ "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
+<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
+ width="700.000000pt" height="700.000000pt" viewBox="0 0 700.000000 700.000000"
+ preserveAspectRatio="xMidYMid meet">
+<metadata>
+Created by potrace 1.11, written by Peter Selinger 2001-2013
+</metadata>
+<g transform="translate(0.000000,700.000000) scale(0.100000,-0.100000)"
+fill="#000000" stroke="none">
+<path d="M2916 6015 c-93 -57 -173 -108 -178 -113 -6 -6 7 -36 33 -78 23 -38
+86 -141 139 -229 54 -88 135 -221 180 -295 46 -74 94 -155 108 -180 14 -25 29
+-52 35 -60 7 -12 -9 -45 -62 -130 -39 -63 -85 -140 -103 -170 -18 -30 -117
+-194 -222 -365 -104 -170 -199 -326 -210 -346 -12 -19 -61 -102 -111 -183 -49
+-81 -101 -166 -115 -189 -14 -23 -39 -64 -55 -90 -17 -27 -77 -126 -134 -220
+-57 -95 -127 -210 -156 -257 -194 -315 -325 -533 -325 -541 0 -5 -4 -9 -10 -9
+-5 0 -10 -4 -10 -9 0 -5 -55 -98 -121 -207 -247 -404 -403 -660 -416 -684 -8
+-14 -58 -97 -112 -185 l-98 -160 -189 -2 c-104 -1 -225 -2 -269 -2 l-80 -1 1
+-210 c0 -116 4 -213 8 -218 11 -11 6107 -9 6114 2 8 13 8 406 0 419 -4 7 -88
+10 -265 9 l-259 -2 -50 77 c-27 43 -54 87 -60 98 -6 11 -62 103 -124 205 -62
+102 -120 197 -129 212 -9 16 -85 142 -170 280 -85 139 -160 262 -165 273 -6
+11 -13 22 -16 25 -3 3 -30 46 -59 95 -30 50 -102 169 -161 265 -59 96 -240
+393 -402 660 -163 267 -371 609 -463 760 -92 151 -194 318 -225 370 -31 52
+-101 167 -155 255 l-97 160 27 50 c16 27 32 55 36 61 5 5 38 59 74 120 36 60
+69 116 74 124 5 8 75 122 155 253 81 131 144 242 141 247 -4 7 -114 76 -183
+115 -10 6 -52 32 -95 58 -42 27 -81 46 -87 42 -8 -5 -94 -140 -140 -219 -19
+-33 -221 -365 -246 -404 -15 -22 -18 -18 -111 135 -52 87 -123 203 -157 258
+-67 108 -67 110 -111 184 -16 28 -34 51 -40 50 -5 0 -86 -47 -179 -104z m739
+-1642 c319 -526 519 -854 637 -1046 43 -70 78 -130 78 -133 0 -2 5 -10 10 -17
+6 -7 69 -109 140 -227 72 -118 134 -222 139 -230 5 -8 55 -89 111 -180 56 -91
+105 -172 110 -180 9 -14 52 -84 270 -445 54 -88 135 -221 180 -295 46 -74 91
+-148 100 -165 9 -16 31 -53 48 -81 18 -28 32 -54 32 -57 0 -3 -403 -6 -895 -5
+l-895 0 0 81 c-1 45 -1 439 -1 875 l0 792 -37 1 c-57 1 -344 1 -374 0 l-27 -1
+0 -832 c0 -458 0 -852 0 -875 l-1 -42 -895 1 c-492 0 -895 3 -895 5 0 9 115
+198 122 201 5 2 8 7 8 12 0 5 23 46 51 92 28 46 78 128 112 183 33 55 70 116
+82 135 12 19 132 215 265 435 133 220 266 438 295 485 65 105 206 338 220 362
+6 10 172 284 370 608 198 325 387 635 420 690 33 55 62 100 65 100 3 0 73
+-111 155 -247z"/>
+</g>
+</svg>

packages/hoppscotch-embed/src/App.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+// https://github.com/vueuse/head
+// you can use this to manipulate the document head in any components,
+// they will be rendered correctly in the html results with vite-ssg
+useHead({
+  title: "Hoppscotch Embed",
+  meta: [
+    { name: "description", content: "Embed Hoppscotch instances in iframes" },
+  ],
+})
+</script>
+
+<template>
+  <router-view />
+</template>

packages/hoppscotch-embed/src/auto-imports.d.ts

@@ -0,0 +1,195 @@
+// Generated by 'unplugin-auto-import'
+// We suggest you to commit this file into source control
+declare global {
+  const asyncComputed: typeof import("@vueuse/core")["asyncComputed"]
+  const autoResetRef: typeof import("@vueuse/core")["autoResetRef"]
+  const biSyncRef: typeof import("@vueuse/core")["biSyncRef"]
+  const computed: typeof import("vue")["computed"]
+  const computedInject: typeof import("@vueuse/core")["computedInject"]
+  const controlledComputed: typeof import("@vueuse/core")["controlledComputed"]
+  const controlledRef: typeof import("@vueuse/core")["controlledRef"]
+  const createApp: typeof import("vue")["createApp"]
+  const createEventHook: typeof import("@vueuse/core")["createEventHook"]
+  const createGlobalState: typeof import("@vueuse/core")["createGlobalState"]
+  const createReactiveFn: typeof import("@vueuse/core")["createReactiveFn"]
+  const createSharedComposable: typeof import("@vueuse/core")["createSharedComposable"]
+  const createUnrefFn: typeof import("@vueuse/core")["createUnrefFn"]
+  const customRef: typeof import("vue")["customRef"]
+  const debouncedRef: typeof import("@vueuse/core")["debouncedRef"]
+  const debouncedWatch: typeof import("@vueuse/core")["debouncedWatch"]
+  const defineAsyncComponent: typeof import("vue")["defineAsyncComponent"]
+  const defineComponent: typeof import("vue")["defineComponent"]
+  const eagerComputed: typeof import("@vueuse/core")["eagerComputed"]
+  const effectScope: typeof import("vue")["effectScope"]
+  const EffectScope: typeof import("vue")["EffectScope"]
+  const extendRef: typeof import("@vueuse/core")["extendRef"]
+  const getCurrentInstance: typeof import("vue")["getCurrentInstance"]
+  const getCurrentScope: typeof import("vue")["getCurrentScope"]
+  const h: typeof import("vue")["h"]
+  const ignorableWatch: typeof import("@vueuse/core")["ignorableWatch"]
+  const inject: typeof import("vue")["inject"]
+  const isDefined: typeof import("@vueuse/core")["isDefined"]
+  const isReadonly: typeof import("vue")["isReadonly"]
+  const isRef: typeof import("vue")["isRef"]
+  const makeDestructurable: typeof import("@vueuse/core")["makeDestructurable"]
+  const markRaw: typeof import("vue")["markRaw"]
+  const nextTick: typeof import("vue")["nextTick"]
+  const onActivated: typeof import("vue")["onActivated"]
+  const onBeforeMount: typeof import("vue")["onBeforeMount"]
+  const onBeforeUnmount: typeof import("vue")["onBeforeUnmount"]
+  const onBeforeUpdate: typeof import("vue")["onBeforeUpdate"]
+  const onClickOutside: typeof import("@vueuse/core")["onClickOutside"]
+  const onDeactivated: typeof import("vue")["onDeactivated"]
+  const onErrorCaptured: typeof import("vue")["onErrorCaptured"]
+  const onKeyStroke: typeof import("@vueuse/core")["onKeyStroke"]
+  const onMounted: typeof import("vue")["onMounted"]
+  const onRenderTracked: typeof import("vue")["onRenderTracked"]
+  const onRenderTriggered: typeof import("vue")["onRenderTriggered"]
+  const onScopeDispose: typeof import("vue")["onScopeDispose"]
+  const onServerPrefetch: typeof import("vue")["onServerPrefetch"]
+  const onStartTyping: typeof import("@vueuse/core")["onStartTyping"]
+  const onUnmounted: typeof import("vue")["onUnmounted"]
+  const onUpdated: typeof import("vue")["onUpdated"]
+  const pausableWatch: typeof import("@vueuse/core")["pausableWatch"]
+  const provide: typeof import("vue")["provide"]
+  const reactify: typeof import("@vueuse/core")["reactify"]
+  const reactifyObject: typeof import("@vueuse/core")["reactifyObject"]
+  const reactive: typeof import("vue")["reactive"]
+  const reactivePick: typeof import("@vueuse/core")["reactivePick"]
+  const readonly: typeof import("vue")["readonly"]
+  const ref: typeof import("vue")["ref"]
+  const refDefault: typeof import("@vueuse/core")["refDefault"]
+  const shallowReactive: typeof import("vue")["shallowReactive"]
+  const shallowReadonly: typeof import("vue")["shallowReadonly"]
+  const shallowRef: typeof import("vue")["shallowRef"]
+  const syncRef: typeof import("@vueuse/core")["syncRef"]
+  const templateRef: typeof import("@vueuse/core")["templateRef"]
+  const throttledRef: typeof import("@vueuse/core")["throttledRef"]
+  const throttledWatch: typeof import("@vueuse/core")["throttledWatch"]
+  const toRaw: typeof import("vue")["toRaw"]
+  const toReactive: typeof import("@vueuse/core")["toReactive"]
+  const toRef: typeof import("vue")["toRef"]
+  const toRefs: typeof import("vue")["toRefs"]
+  const triggerRef: typeof import("vue")["triggerRef"]
+  const tryOnBeforeUnmount: typeof import("@vueuse/core")["tryOnBeforeUnmount"]
+  const tryOnMounted: typeof import("@vueuse/core")["tryOnMounted"]
+  const tryOnScopeDispose: typeof import("@vueuse/core")["tryOnScopeDispose"]
+  const tryOnUnmounted: typeof import("@vueuse/core")["tryOnUnmounted"]
+  const unref: typeof import("vue")["unref"]
+  const unrefElement: typeof import("@vueuse/core")["unrefElement"]
+  const until: typeof import("@vueuse/core")["until"]
+  const useActiveElement: typeof import("@vueuse/core")["useActiveElement"]
+  const useAsyncQueue: typeof import("@vueuse/core")["useAsyncQueue"]
+  const useAsyncState: typeof import("@vueuse/core")["useAsyncState"]
+  const useAttrs: typeof import("vue")["useAttrs"]
+  const useBase64: typeof import("@vueuse/core")["useBase64"]
+  const useBattery: typeof import("@vueuse/core")["useBattery"]
+  const useBreakpoints: typeof import("@vueuse/core")["useBreakpoints"]
+  const useBrowserLocation: typeof import("@vueuse/core")["useBrowserLocation"]
+  const useClamp: typeof import("@vueuse/core")["useClamp"]
+  const useClipboard: typeof import("@vueuse/core")["useClipboard"]
+  const useConfirmDialog: typeof import("@vueuse/core")["useConfirmDialog"]
+  const useCounter: typeof import("@vueuse/core")["useCounter"]
+  const useCssModule: typeof import("vue")["useCssModule"]
+  const useCssVar: typeof import("@vueuse/core")["useCssVar"]
+  const useDark: typeof import("@vueuse/core")["useDark"]
+  const useDebounce: typeof import("@vueuse/core")["useDebounce"]
+  const useDebouncedRefHistory: typeof import("@vueuse/core")["useDebouncedRefHistory"]
+  const useDebounceFn: typeof import("@vueuse/core")["useDebounceFn"]
+  const useDeviceMotion: typeof import("@vueuse/core")["useDeviceMotion"]
+  const useDeviceOrientation: typeof import("@vueuse/core")["useDeviceOrientation"]
+  const useDevicePixelRatio: typeof import("@vueuse/core")["useDevicePixelRatio"]
+  const useDevicesList: typeof import("@vueuse/core")["useDevicesList"]
+  const useDisplayMedia: typeof import("@vueuse/core")["useDisplayMedia"]
+  const useDocumentVisibility: typeof import("@vueuse/core")["useDocumentVisibility"]
+  const useDraggable: typeof import("@vueuse/core")["useDraggable"]
+  const useElementBounding: typeof import("@vueuse/core")["useElementBounding"]
+  const useElementHover: typeof import("@vueuse/core")["useElementHover"]
+  const useElementSize: typeof import("@vueuse/core")["useElementSize"]
+  const useElementVisibility: typeof import("@vueuse/core")["useElementVisibility"]
+  const useEventBus: typeof import("@vueuse/core")["useEventBus"]
+  const useEventListener: typeof import("@vueuse/core")["useEventListener"]
+  const useEventSource: typeof import("@vueuse/core")["useEventSource"]
+  const useEyeDropper: typeof import("@vueuse/core")["useEyeDropper"]
+  const useFavicon: typeof import("@vueuse/core")["useFavicon"]
+  const useFetch: typeof import("@vueuse/core")["useFetch"]
+  const useFocus: typeof import("@vueuse/core")["useFocus"]
+  const useFps: typeof import("@vueuse/core")["useFps"]
+  const useFullscreen: typeof import("@vueuse/core")["useFullscreen"]
+  const useGeolocation: typeof import("@vueuse/core")["useGeolocation"]
+  const useHead: typeof import("@vueuse/head")["useHead"]
+  const useI18n: typeof import("vue-i18n")["useI18n"]
+  const useIdle: typeof import("@vueuse/core")["useIdle"]
+  const useIntersectionObserver: typeof import("@vueuse/core")["useIntersectionObserver"]
+  const useInterval: typeof import("@vueuse/core")["useInterval"]
+  const useIntervalFn: typeof import("@vueuse/core")["useIntervalFn"]
+  const useKeyModifier: typeof import("@vueuse/core")["useKeyModifier"]
+  const useLastChanged: typeof import("@vueuse/core")["useLastChanged"]
+  const useLocalStorage: typeof import("@vueuse/core")["useLocalStorage"]
+  const useMagicKeys: typeof import("@vueuse/core")["useMagicKeys"]
+  const useManualRefHistory: typeof import("@vueuse/core")["useManualRefHistory"]
+  const useMediaControls: typeof import("@vueuse/core")["useMediaControls"]
+  const useMediaQuery: typeof import("@vueuse/core")["useMediaQuery"]
+  const useMemory: typeof import("@vueuse/core")["useMemory"]
+  const useMounted: typeof import("@vueuse/core")["useMounted"]
+  const useMouse: typeof import("@vueuse/core")["useMouse"]
+  const useMouseInElement: typeof import("@vueuse/core")["useMouseInElement"]
+  const useMousePressed: typeof import("@vueuse/core")["useMousePressed"]
+  const useMutationObserver: typeof import("@vueuse/core")["useMutationObserver"]
+  const useNetwork: typeof import("@vueuse/core")["useNetwork"]
+  const useNow: typeof import("@vueuse/core")["useNow"]
+  const useOnline: typeof import("@vueuse/core")["useOnline"]
+  const usePageLeave: typeof import("@vueuse/core")["usePageLeave"]
+  const useParallax: typeof import("@vueuse/core")["useParallax"]
+  const usePermission: typeof import("@vueuse/core")["usePermission"]
+  const usePointer: typeof import("@vueuse/core")["usePointer"]
+  const usePointerSwipe: typeof import("@vueuse/core")["usePointerSwipe"]
+  const usePreferredColorScheme: typeof import("@vueuse/core")["usePreferredColorScheme"]
+  const usePreferredDark: typeof import("@vueuse/core")["usePreferredDark"]
+  const usePreferredLanguages: typeof import("@vueuse/core")["usePreferredLanguages"]
+  const useRafFn: typeof import("@vueuse/core")["useRafFn"]
+  const useRefHistory: typeof import("@vueuse/core")["useRefHistory"]
+  const useResizeObserver: typeof import("@vueuse/core")["useResizeObserver"]
+  const useRoute: typeof import("vue-router")["useRoute"]
+  const useRouter: typeof import("vue-router")["useRouter"]
+  const useScriptTag: typeof import("@vueuse/core")["useScriptTag"]
+  const useScroll: typeof import("@vueuse/core")["useScroll"]
+  const useScrollLock: typeof import("@vueuse/core")["useScrollLock"]
+  const useSessionStorage: typeof import("@vueuse/core")["useSessionStorage"]
+  const useShare: typeof import("@vueuse/core")["useShare"]
+  const useSlots: typeof import("vue")["useSlots"]
+  const useSpeechRecognition: typeof import("@vueuse/core")["useSpeechRecognition"]
+  const useSpeechSynthesis: typeof import("@vueuse/core")["useSpeechSynthesis"]
+  const useStorage: typeof import("@vueuse/core")["useStorage"]
+  const useSwipe: typeof import("@vueuse/core")["useSwipe"]
+  const useTemplateRefsList: typeof import("@vueuse/core")["useTemplateRefsList"]
+  const useThrottle: typeof import("@vueuse/core")["useThrottle"]
+  const useThrottledRefHistory: typeof import("@vueuse/core")["useThrottledRefHistory"]
+  const useThrottleFn: typeof import("@vueuse/core")["useThrottleFn"]
+  const useTimeAgo: typeof import("@vueuse/core")["useTimeAgo"]
+  const useTimeout: typeof import("@vueuse/core")["useTimeout"]
+  const useTimeoutFn: typeof import("@vueuse/core")["useTimeoutFn"]
+  const useTimestamp: typeof import("@vueuse/core")["useTimestamp"]
+  const useTitle: typeof import("@vueuse/core")["useTitle"]
+  const useToggle: typeof import("@vueuse/core")["useToggle"]
+  const useTransition: typeof import("@vueuse/core")["useTransition"]
+  const useUrlSearchParams: typeof import("@vueuse/core")["useUrlSearchParams"]
+  const useUserMedia: typeof import("@vueuse/core")["useUserMedia"]
+  const useVirtualList: typeof import("@vueuse/core")["useVirtualList"]
+  const useVModel: typeof import("@vueuse/core")["useVModel"]
+  const useVModels: typeof import("@vueuse/core")["useVModels"]
+  const useWakeLock: typeof import("@vueuse/core")["useWakeLock"]
+  const useWebSocket: typeof import("@vueuse/core")["useWebSocket"]
+  const useWebWorker: typeof import("@vueuse/core")["useWebWorker"]
+  const useWebWorkerFn: typeof import("@vueuse/core")["useWebWorkerFn"]
+  const useWindowFocus: typeof import("@vueuse/core")["useWindowFocus"]
+  const useWindowScroll: typeof import("@vueuse/core")["useWindowScroll"]
+  const useWindowSize: typeof import("@vueuse/core")["useWindowSize"]
+  const watch: typeof import("vue")["watch"]
+  const watchAtMost: typeof import("@vueuse/core")["watchAtMost"]
+  const watchEffect: typeof import("vue")["watchEffect"]
+  const watchOnce: typeof import("@vueuse/core")["watchOnce"]
+  const watchWithFilter: typeof import("@vueuse/core")["watchWithFilter"]
+  const whenever: typeof import("@vueuse/core")["whenever"]
+}
+export {}

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

@@ -0,0 +1,30 @@
+// generated by unplugin-vue-components
+// We suggest you to commit this file into source control
+// Read more: https://github.com/vuejs/vue-next/pull/3399
+
+declare module "vue" {
+  export interface GlobalComponents {
+    Carbon3dCursor: typeof import("~icons/carbon/3d-cursor")["default"]
+    CarbonArrowUpRight: typeof import("~icons/carbon/arrow-up-right")["default"]
+    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"]
+    CarbonPedestrian: typeof import("~icons/carbon/pedestrian")["default"]
+    CarbonSun: typeof import("~icons/carbon/sun")["default"]
+    CarbonWarning: typeof import("~icons/carbon/warning")["default"]
+    Footer: typeof import("./components/Footer.vue")["default"]
+    Header: typeof import("./components/Header.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"]
+  }
+}
+
+export { }

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

@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import { isDark, toggleDark } from "~/composables"
+
+const { t, availableLocales, locale } = useI18n()
+
+const toggleLocales = () => {
+  // change to some real logic
+  const locales = availableLocales
+  locale.value = locales[(locales.indexOf(locale.value) + 1) % locales.length]
+}
+</script>
+
+<template>
+  <nav class="mt-6 text-xl">
+    <RouterLink class="mx-2 icon-btn" to="/" :title="t('button.home')">
+      <carbon-home />
+    </RouterLink>
+
+    <button
+      class="mx-2 icon-btn !outline-none"
+      :title="t('button.toggle_dark')"
+      @click="toggleDark()"
+    >
+      <carbon-moon v-if="isDark" />
+      <carbon-sun v-else />
+    </button>
+
+    <a
+      class="mx-2 icon-btn"
+      :title="t('button.toggle_langs')"
+      @click="toggleLocales"
+    >
+      <carbon-language />
+    </a>
+  </nav>
+</template>

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

@@ -0,0 +1,16 @@
+<template>
+  <header class="flex space-x-2 flex-1 py-2 px-2 items-center justify-between">
+    <span class="rounded font-bold text-secondaryDark tracking-wide py-2 px-4">
+      HOPPSCOTCH
+    </span>
+    <a
+      href="/"
+      target="_blank"
+      rel="noopener noreferrer"
+      class="buttonSecondary buttonSecondaryFilled"
+    >
+      <span class="mr-2 hidden sm:flex"> Open in Hoppscotch </span>
+      <carbon-arrow-up-right />
+    </a>
+  </header>
+</template>

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

@@ -0,0 +1,10 @@
+## Components
+
+Components in this dir will be auto-registered and on-demand, powered by [`unplugin-vue-components`](https://github.com/antfu/unplugin-vue-components).
+
+
+### Icons
+
+You can use icons from almost any icon sets by the power of [Iconify](https://iconify.design/).
+
+It will only bundle the icons you use. Check out [`unplugin-icons`](https://github.com/antfu/unplugin-icons) for more details.

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/composables/dark.ts

@@ -0,0 +1,3 @@
+// these APIs are auto-imported from @vueuse/core
+export const isDark = useDark()
+export const toggleDark = useToggle(isDark)

packages/hoppscotch-embed/src/composables/index.ts

@@ -0,0 +1 @@
+export * from "./dark"

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

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+const router = useRouter()
+const { t } = useI18n()
+</script>
+
+<template>
+  <main>
+    <div>
+      <p class="text-4xl">
+        <carbon-warning class="inline-block" />
+      </p>
+    </div>
+    <router-view />
+    <div>
+      <button class="m-3 mt-8 text-sm btn" @click="router.back()">
+        {{ t("button.back") }}
+      </button>
+    </div>
+  </main>
+</template>

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

@@ -0,0 +1,14 @@
+## Layouts
+
+Vue components in this dir are used as layouts.
+
+By default, `default.vue` will be used unless an alternative is specified in the route meta.
+
+With [`vite-plugin-pages`](https://github.com/hannoeru/vite-plugin-pages) and [`vite-plugin-vue-layouts`](https://github.com/JohnCampionJr/vite-plugin-vue-layouts), you can specify the layout in the page's SFCs like this:
+
+```html
+<route lang="yaml">
+meta:
+  layout: home
+</route>
+```

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

@@ -0,0 +1,6 @@
+<template>
+  <main>
+    <router-view />
+    <Footer />
+  </main>
+</template>

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

@@ -0,0 +1,8 @@
+<template>
+  <main>
+    <Header />
+    <div class="p-2">
+      <router-view />
+    </div>
+  </main>
+</template>

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

@@ -0,0 +1,6 @@
+<template>
+  <main>
+    <router-view />
+    <Footer />
+  </main>
+</template>

packages/hoppscotch-embed/src/main.ts

@@ -0,0 +1,25 @@
+// register vue composition api globally
+import { ViteSSG } from "vite-ssg"
+import generatedRoutes from "virtual:generated-pages"
+import { setupLayouts } from "virtual:generated-layouts"
+import App from "./App.vue"
+
+// windicss layers
+import "virtual:windi-base.css"
+import "virtual:windi-components.css"
+// your custom styles here
+import "./styles/main.css"
+// windicss utilities should be the last style import
+import "virtual:windi-utilities.css"
+// windicss devtools support (dev only)
+import "virtual:windi-devtools"
+
+const routes = setupLayouts(generatedRoutes)
+
+// https://github.com/antfu/vite-ssg
+export const createApp = ViteSSG(App, { routes }, (ctx) => {
+  // install all modules under `modules/`
+  Object.values(import.meta.globEager("./modules/*.ts")).map(i =>
+    i.install?.(ctx),
+  )
+})

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

@@ -0,0 +1,11 @@
+## Modules
+
+A custom user module system. Place a `.ts` file with the following template, it will be installed automatically.
+
+```ts
+import { UserModule } from '~/types'
+
+export const install: UserModule = ({ app, router, isClient }) => {
+  // do something
+}
+```

packages/hoppscotch-embed/src/modules/i18n.ts

@@ -0,0 +1,25 @@
+import { createI18n } from "vue-i18n"
+import { UserModule } from "~/types"
+
+// Import i18n resources
+// https://vitejs.dev/guide/features.html#glob-import
+//
+// Don't need this? Try vitesse-lite: https://github.com/antfu/vitesse-lite
+const messages = Object.fromEntries(
+  Object.entries(import.meta.globEager("../../locales/*.y(a)?ml")).map(
+    ([key, value]) => {
+      const yaml = key.endsWith(".yaml")
+      return [key.slice(14, yaml ? -5 : -4), value.default]
+    },
+  ),
+)
+
+export const install: UserModule = ({ app }) => {
+  const i18n = createI18n({
+    legacy: false,
+    locale: "en",
+    messages,
+  })
+
+  app.use(i18n)
+}

packages/hoppscotch-embed/src/modules/nprogress.ts

@@ -0,0 +1,13 @@
+import NProgress from "nprogress"
+import { UserModule } from "~/types"
+
+export const install: UserModule = ({ isClient, router }) => {
+  if (isClient) {
+    router.beforeEach(() => {
+      NProgress.start()
+    })
+    router.afterEach(() => {
+      NProgress.done()
+    })
+  }
+}

packages/hoppscotch-embed/src/modules/pinia.ts

@@ -0,0 +1,14 @@
+import { createPinia } from "pinia"
+import { UserModule } from "~/types"
+
+// Setup Pinia
+// https://pinia.esm.dev/
+export const install: UserModule = ({ isClient, initialState, app }) => {
+  const pinia = createPinia()
+  app.use(pinia)
+  // Refer to
+  // https://github.com/antfu/vite-ssg/blob/main/README.md#state-serialization
+  // for other serialization strategies.
+  if (isClient) pinia.state.value = initialState.pinia || {}
+  else initialState.pinia = pinia.state.value
+}

packages/hoppscotch-embed/src/modules/pwa.ts

@@ -0,0 +1,11 @@
+import { UserModule } from "~/types"
+
+// https://github.com/antfu/vite-plugin-pwa#automatic-reload-when-new-content-available
+export const install: UserModule = ({ isClient, router }) => {
+  if (!isClient) return
+
+  router.isReady().then(async() => {
+    const { registerSW } = await import("virtual:pwa-register")
+    registerSW({ immediate: true })
+  })
+}

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/index.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+const { t } = useI18n()
+</script>
+
+<template>
+  <div>
+    <h1 class="font-semibold text-secondaryDark text-2xl">
+      {{ t("app.title") }}
+    </h1>
+    <p class="mt-2 text-secondaryLight">
+      {{ t("app.description") }}
+    </p>
+  </div>
+</template>

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/shims.d.ts

@@ -0,0 +1,10 @@
+declare interface Window {
+  // extend the window
+}
+
+// with vite-plugin-md, markdowns can be treat as Vue components
+declare module "*.md" {
+  import { ComponentOptions } from "vue"
+  const component: ComponentOptions
+  export default component
+}

packages/hoppscotch-embed/src/stores/user.ts

@@ -0,0 +1,35 @@
+import { acceptHMRUpdate, defineStore } from "pinia"
+
+export const useUserStore = defineStore("user", () => {
+  /**
+   * Current named of the user.
+   */
+  const savedName = ref("")
+  const previousNames = ref(new Set<string>())
+
+  const usedNames = computed(() => Array.from(previousNames.value))
+  const otherNames = computed(() =>
+    usedNames.value.filter(name => name !== savedName.value),
+  )
+
+  /**
+   * Changes the current name of the user and saves the one that was used
+   * before.
+   *
+   * @param name - new name to set
+   */
+  function setNewName(name: string) {
+    if (savedName.value) previousNames.value.add(savedName.value)
+
+    savedName.value = name
+  }
+
+  return {
+    setNewName,
+    otherNames,
+    savedName,
+  }
+})
+
+if (import.meta.hot)
+  import.meta.hot.accept(acceptHMRUpdate(useUserStore, import.meta.hot))

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

@@ -0,0 +1,222 @@
+:root {
+  --font-sans: "Inter", sans-serif;
+  --font-mono: "Roboto Mono", monospace;
+  --body-font-size: 0.75rem;
+  --body-line-height: 1rem;
+  --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");
+}
+
+:root {
+  --primary-color: theme("colors.white");
+  --primary-light-color: theme("colors.true-gray.50");
+  --primary-dark-color: theme("colors.true-gray.100");
+  --secondary-color: theme("colors.true-gray.500");
+  --secondary-light-color: theme("colors.true-gray.400");
+  --secondary-dark-color: theme("colors.true-gray.900");
+  --divider-color: theme("colors.true-gray.200");
+  --divider-light-color: theme("colors.true-gray.100");
+  --divider-dark-color: theme("colors.true-gray.300");
+  --error-color: theme("colors.yellow.100");
+  --tooltip-color: theme("colors.true-gray.800");
+  --popover-color: theme("colors.white");
+}
+
+:root.dark {
+  --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");
+  --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-accent;
+}
+
+::-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;
+  @apply font-semibold;
+}
+
+#nprogress {
+  pointer-events: none;
+}
+
+#nprogress .bar {
+  @apply bg-teal-600 opacity-75;
+
+  position: fixed;
+  z-index: 1031;
+  top: 0;
+  left: 0;
+
+  width: 100%;
+  height: 2px;
+}
+
+.btn {
+  @apply rounded cursor-pointer bg-teal-600 text-white
+    py-1 px-4 inline-block
+    hover:bg-teal-700
+    disabled:cursor-default disabled:bg-gray-600 disabled:opacity-50;
+}
+
+.icon-btn {
+  @apply cursor-pointer opacity-75 transition
+    ease-in-out duration-200 inline-block select-none
+    hover:opacity-100 hover:text-teal-600;
+  font-size: 0.9em;
+}
+
+.buttonPrimary {
+  @apply bg-accent rounded font-bold text-accentContrast py-2 px-4 transition whitespace-nowrap inline-flex items-center justify-center hover:bg-accentDark focus:outline-none focus-visible:bg-accentDark;
+}
+
+.buttonSecondary {
+  @apply rounded font-semibold py-2 px-4 transition whitespace-nowrap inline-flex items-center justify-center hover:bg-primaryDark focus:outline-none focus-visible:bg-primaryDark;
+}
+
+.buttonSecondaryFilled {
+  @apply bg-primaryLight;
+}
+
+.inputPrimary {
+  @apply flex flex-1;
+  @apply bg-primaryLight;
+  @apply rounded py-2 px-4;
+  @apply font-semibold;
+  @apply font-sans;
+  @apply focus:outline-none;
+  @apply focus-visible:border-dividerDark;
+  @apply focus-visible:bg-primary;
+  @apply border;
+  @apply border-divider;
+  @apply hover:border-dividerDark;
+}
+
+.selectPrimary {
+  @apply bg-primaryLight;
+  @apply rounded py-2 px-4;
+  @apply font-semibold;
+  @apply font-sans;
+  @apply focus:outline-none;
+  @apply appearance-none;
+  @apply focus-visible:border-dividerDark;
+  @apply focus-visible:bg-primary;
+  @apply border;
+  @apply border-divider;
+  @apply hover:border-dividerDark;
+}

packages/hoppscotch-embed/src/types.ts

@@ -0,0 +1,3 @@
+import { ViteSSGContext } from "vite-ssg"
+
+export type UserModule = (ctx: ViteSSGContext) => void

packages/hoppscotch-embed/tsconfig.json

@@ -0,0 +1,27 @@
+{
+  "compilerOptions": {
+    "baseUrl": ".",
+    "module": "ESNext",
+    "target": "es2016",
+    "lib": ["DOM", "ESNext"],
+    "strict": true,
+    "esModuleInterop": true,
+    "incremental": false,
+    "skipLibCheck": true,
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "noUnusedLocals": true,
+    "strictNullChecks": true,
+    "forceConsistentCasingInFileNames": true,
+    "types": [
+      "cypress",
+      "vite/client",
+      "vite-plugin-pages/client",
+      "vite-plugin-vue-layouts/client"
+    ],
+    "paths": {
+      "~/*": ["src/*"]
+    }
+  },
+  "exclude": ["dist", "node_modules"]
+}

packages/hoppscotch-embed/vite.config.ts

@@ -0,0 +1,142 @@
+import path from "path"
+import { defineConfig } from "vite"
+import Vue from "@vitejs/plugin-vue"
+import Pages from "vite-plugin-pages"
+import Layouts from "vite-plugin-vue-layouts"
+import Icons from "unplugin-icons/vite"
+import IconsResolver from "unplugin-icons/resolver"
+import Components from "unplugin-vue-components/vite"
+import AutoImport from "unplugin-auto-import/vite"
+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: {
+    alias: {
+      "~/": `${path.resolve(__dirname, "src")}/`,
+    },
+  },
+  plugins: [
+    Vue({
+      include: [/\.vue$/, /\.md$/],
+    }),
+
+    // https://github.com/hannoeru/vite-plugin-pages
+    Pages({
+      extensions: ["vue", "md"],
+    }),
+
+    // https://github.com/JohnCampionJr/vite-plugin-vue-layouts
+    Layouts(),
+
+    // https://github.com/antfu/unplugin-auto-import
+    AutoImport({
+      imports: [
+        "vue",
+        "vue-router",
+        "vue-i18n",
+        "@vueuse/head",
+        "@vueuse/core",
+      ],
+      dts: "src/auto-imports.d.ts",
+    }),
+
+    // https://github.com/antfu/unplugin-vue-components
+    Components({
+      // allow auto load markdown components under `./src/components/`
+      extensions: ["vue", "md"],
+
+      // allow auto import and register components used in markdown
+      include: [/\.vue$/, /\.vue\?vue/, /\.md$/],
+
+      // custom resolvers
+      resolvers: [
+        // auto import icons
+        // https://github.com/antfu/unplugin-icons
+        IconsResolver({
+          componentPrefix: "",
+          // enabledCollections: ['carbon']
+        }),
+      ],
+
+      dts: "src/components.d.ts",
+    }),
+
+    // https://github.com/antfu/unplugin-icons
+    Icons({
+      autoInstall: true,
+    }),
+
+    // https://github.com/antfu/vite-plugin-windicss
+    WindiCSS({}),
+
+    // https://github.com/antfu/vite-plugin-pwa
+    VitePWA({
+      registerType: "autoUpdate",
+      includeAssets: ["favicon.ico", "robots.txt", "safari-pinned-tab.svg"],
+      manifest: {
+        name: "Vitesse",
+        short_name: "Vitesse",
+        theme_color: "#ffffff",
+        icons: [
+          {
+            src: "/pwa-192x192.png",
+            sizes: "192x192",
+            type: "image/png",
+          },
+          {
+            src: "/pwa-512x512.png",
+            sizes: "512x512",
+            type: "image/png",
+          },
+          {
+            src: "/pwa-512x512.png",
+            sizes: "512x512",
+            type: "image/png",
+            purpose: "any maskable",
+          },
+        ],
+      },
+    }),
+
+    // https://github.com/intlify/bundle-tools/tree/main/packages/vite-plugin-vue-i18n
+    VueI18n({
+      runtimeOnly: true,
+      compositionOnly: true,
+      include: [path.resolve(__dirname, "locales/**")],
+    }),
+
+    // https://github.com/antfu/vite-plugin-inspect
+    Inspect({
+      // change this to enable inspect for debugging
+      enabled: false,
+    }),
+
+    // https://github.com/stafyniaksacha/vite-plugin-fonts
+    ViteFonts({
+      google: {
+        families: ["Inter", "Roboto Mono"],
+      },
+    }),
+  ],
+
+  server: {
+    fs: {
+      strict: true,
+    },
+  },
+
+  // https://github.com/antfu/vite-ssg
+  ssgOptions: {
+    script: "async",
+    formatting: "minify",
+  },
+
+  optimizeDeps: {
+    include: ["vue", "vue-router", "@vueuse/core", "@vueuse/head"],
+    exclude: ["vue-demi"],
+  },
+})

packages/hoppscotch-embed/windi.config.ts

@@ -0,0 +1,33 @@
+import { defineConfig } from "windicss/helpers"
+
+export default defineConfig({
+  darkMode: "class",
+  // https://windicss.org/posts/v30.html#attributify-mode
+  attributify: true,
+  theme: {
+    extend: {
+      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)",
+      },
+      fontFamily: {
+        sans: "var(--font-sans)",
+        mono: "var(--font-mono)",
+      },
+    },
+  },
+})