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

refactor: clean up boilerplate

Browse Source
This commit is contained in:
liyasthomas
2021-12-01 23:15:14 +05:30
parent 190a4c43ef
commit 63005c01ce
15 changed files with 169 additions and 127 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -18,7 +18,7 @@
"@vueuse/core": "^7.1.2",
"@vueuse/head": "^0.7.2",
"nprogress": "^0.2.0",
"pinia": "^2.0.4",
"pinia": "^2.0.5",
"vue": "^3.2.23",
"vue-demi": "^0.12.1",
"vue-i18n": "^9.1.9",
@@ -40,14 +40,14 @@
"https-localhost": "^4.7.0",
"pnpm": "^6.23.2",
"typescript": "^4.5.2",
"unplugin-auto-import": "^0.4.20",
"unplugin-icons": "^0.12.20",
"unplugin-auto-import": "^0.5.1",
"unplugin-icons": "^0.12.22",
"unplugin-vue-components": "^0.17.2",
"vite": "^2.6.14",
"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.7",
"vite-plugin-pwa": "^0.11.9",
"vite-plugin-vue-layouts": "^0.5.0",
"vite-plugin-windicss": "^1.5.3",
"vite-ssg": "^0.16.2",

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

@@ -11,26 +11,26 @@ const toggleLocales = () => {
</script>
<template>
<nav class="text-xl mt-6">
<router-link class="icon-btn mx-2" to="/" :title="t('button.home')">
<nav class="mt-6 text-xl">
<router-link class="mx-2 icon-btn" to="/" :title="t('button.home')">
<carbon-campsite />
</router-link>
<button class="icon-btn mx-2 !outline-none" :title="t('button.toggle_dark')" @click="toggleDark()">
<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="icon-btn mx-2" :title="t('button.toggle_langs')" @click="toggleLocales">
<a
class="mx-2 icon-btn"
:title="t('button.toggle_langs')"
@click="toggleLocales"
>
<carbon-language />
</a>
<router-link class="icon-btn mx-2" to="/about" :title="t('button.about')">
<carbon-dicom-overlay />
</router-link>
<a class="icon-btn mx-2" rel="noreferrer" href="https://github.com/antfu/vitesse" target="_blank" title="GitHub">
<carbon-logo-github />
</a>
</nav>
</template>

9
packages/hoppscotch-embed/src/layouts/404.vue
View File

@@ -4,7 +4,7 @@ const { t } = useI18n()
</script>
<template>
<main class="px-4 py-10 text-center text-teal-700 dark:text-gray-200">
<main class="text-center py-10 px-4 text-teal-700 dark:text-gray-200">
<div>
<p class="text-4xl">
<carbon-warning class="inline-block" />
@@ -12,11 +12,8 @@ const { t } = useI18n()
</div>
<router-view />
<div>
<button
class="btn m-3 text-sm mt-8"
@click="router.back()"
>
{{ t('button.back') }}
<button class="m-3 mt-8 text-sm btn" @click="router.back()">
{{ t("button.back") }}
</button>
</div>
</main>

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

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

4
packages/hoppscotch-embed/src/layouts/home.vue
View File

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

14
packages/hoppscotch-embed/src/main.ts
View File

@@ -17,11 +17,9 @@ 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))
},
)
export const createApp = ViteSSG(App, { routes }, (ctx) => {
// install all modules under `modules/`
Object.values(import.meta.globEager("./modules/*.ts")).map(i =>
i.install?.(ctx),
)
})

8
packages/hoppscotch-embed/src/modules/i18n.ts
View File

@@ -6,12 +6,12 @@ import { UserModule } from "~/types"
//
// 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]) => {
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 }) => {

8
packages/hoppscotch-embed/src/modules/nprogress.ts
View File

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

7
packages/hoppscotch-embed/src/modules/pinia.ts
View File

@@ -9,9 +9,6 @@ export const install: UserModule = ({ isClient, initialState, app }) => {
// 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
if (isClient) pinia.state.value = initialState.pinia || {}
else initialState.pinia = pinia.state.value
}

3
packages/hoppscotch-embed/src/modules/pwa.ts
View File

@@ -2,8 +2,7 @@ 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
if (!isClient) return
router.isReady().then(async() => {
const { registerSW } = await import("virtual:pwa-register")

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

@@ -4,7 +4,7 @@ const { t } = useI18n()
<template>
<div>
{{ t('not-found') }}
{{ t("not-found") }}
</div>
</template>

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

@@ -25,7 +25,7 @@ watchEffect(() => {
</p>
<template v-if="user.otherNames.length">
<p class="text-sm mt-4">
<p class="mt-4 text-sm">
<span class="opacity-75">{{ t('intro.aka') }}:</span>
<ul>
<li v-for="otherName in user.otherNames" :key="otherName">
@@ -39,7 +39,7 @@ watchEffect(() => {
<div>
<button
class="btn m-3 text-sm mt-6"
class="m-3 mt-6 text-sm btn"
@click="router.back()"
>
{{ t('button.back') }}

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

@@ -6,8 +6,7 @@ const name = ref(user.savedName)
const router = useRouter()
const go = () => {
if (name.value)
router.push(`/hi/${encodeURIComponent(name.value)}`)
if (name.value) router.push(`/hi/${encodeURIComponent(name.value)}`)
}
const { t } = useI18n()
@@ -15,19 +14,9 @@ const { t } = useI18n()
<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>
<em class="text-sm opacity-75">{{ t("intro.desc") }}</em>
</p>
<p>
<em class="text-sm opacity-75">{{ t('intro.desc') }}</em>
</p>
<div class="py-4" />
<input
id="input"
@@ -44,15 +33,11 @@ const { t } = useI18n()
outline="none active:none"
@keydown.enter="go"
>
<label class="hidden" for="input">{{ t('intro.whats-your-name') }}</label>
<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 class="m-3 text-sm btn" :disabled="!name" @click="go">
{{ t("button.go") }}
</button>
</div>
</div>

7
packages/hoppscotch-embed/src/stores/user.ts
View File

@@ -8,7 +8,9 @@ export const useUserStore = defineStore("user", () => {
const previousNames = ref(new Set<string>())
const usedNames = computed(() => Array.from(previousNames.value))
const otherNames = computed(() => usedNames.value.filter(name => name !== savedName.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
@@ -17,8 +19,7 @@ export const useUserStore = defineStore("user", () => {
* @param name - new name to set
*/
function setNewName(name: string) {
if (savedName.value)
previousNames.value.add(savedName.value)
if (savedName.value) previousNames.value.add(savedName.value)
savedName.value = name
}