btwedutech/hoppscotch
5
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 6 Wiki Activity

refactor: clean up boilerplate + init request section

Browse Source
This commit is contained in:
liyasthomas
2021-12-02 10:28:29 +05:30
parent 63005c01ce
commit 99b9ffd293
19 changed files with 279 additions and 130 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
packages/hoppscotch-embed/cypress/integration/basic.spec.ts
View File

@@ -1,28 +1,21 @@
context("Basic", () => {
beforeEach(() => {
cy.visit("/")
})
it("basic nav", () => {
cy.url()
.should("eq", "http://localhost:3333/")
cy.url().should("eq", "http://localhost:3333/")
cy.contains("[Home Layout]")
.should("exist")
cy.contains("[Home Layout]").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]")
.should("exist")
cy.contains("[Default Layout]").should("exist")
cy.get(".btn")
.click()
.url()
.should("eq", "http://localhost:3333/")
cy.get(".btn").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")
.should("exist")
cy.get("pre.language-js").should("exist")
})
})

3
packages/hoppscotch-embed/locales/en.yml
View File

@@ -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

1
packages/hoppscotch-embed/package.json
View File

@@ -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",

7
packages/hoppscotch-embed/src/components.d.ts vendored
View File

@@ -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"]
}
}

2
packages/hoppscotch-embed/src/components/Footer.vue
View File

@@ -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

37
packages/hoppscotch-embed/src/components/Request.vue Normal file
View File

@@ -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>

3
packages/hoppscotch-embed/src/components/RequestOptions.vue Normal file
View File

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

3
packages/hoppscotch-embed/src/components/Response.vue Normal file
View File

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

3
packages/hoppscotch-embed/src/components/Spinner.vue Normal file
View File

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

5
packages/hoppscotch-embed/src/layouts/default.vue
View File

@@ -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>

5
packages/hoppscotch-embed/src/layouts/embed.vue Normal file
View File

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

21
packages/hoppscotch-embed/src/pages/about.md
View File

@@ -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.

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

@@ -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>

45
packages/hoppscotch-embed/src/pages/index.vue
View File

@@ -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>
<em class="text-sm opacity-75">{{ t("intro.desc") }}</em>
<h1 class="font-semibold text-2xl">
{{ 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>

14
packages/hoppscotch-embed/src/pages/r/[shortCode].vue Normal file
View File

@@ -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>

147
packages/hoppscotch-embed/src/styles/main.css
View File

@@ -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;
}

8
packages/hoppscotch-embed/vite.config.ts
View File

@@ -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: {

26
packages/hoppscotch-embed/windi.config.ts
View File

@@ -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)",
},
},
},
})