Skip to content

Commit 829a306

Browse files
committed
feat: use hsml dependency
1 parent dcdb444 commit 829a306

File tree

8 files changed

+126
-142
lines changed

8 files changed

+126
-142
lines changed

README.md

Lines changed: 90 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1 +1,91 @@
1+
<p>
2+
<a href="https://www.npmjs.com/package/vite-plugin-vue-hsml" target="_blank">
3+
<img alt="NPM package" src="https://img.shields.io/npm/v/vite-plugin-vue-hsml.svg">
4+
</a>
5+
<a href="https://www.npmjs.com/package/vite-plugin-vue-hsml" target="_blank">
6+
<img alt="Downloads" src="https://img.shields.io/npm/dt/vite-plugin-vue-hsml.svg">
7+
</a>
8+
<a href="https://github.com/Shinigami92/vite-plugin-vue-hsml/actions/workflows/ci.yml">
9+
<img alt="Build Status" src="https://github.com/Shinigami92/vite-plugin-vue-hsml/actions/workflows/ci.yml/badge.svg?branch=main">
10+
</a>
11+
<a href="https://github.com/Shinigami92/vite-plugin-vue-hsml/blob/main/LICENSE">
12+
<img alt="License: MIT" src="https://img.shields.io/github/license/Shinigami92/vite-plugin-vue-hsml.svg">
13+
</a>
14+
<a href="https://www.paypal.com/donate?hosted_button_id=L7GY729FBKTZY" target="_blank">
15+
<img alt="Donate: PayPal" src="https://img.shields.io/badge/Donate-PayPal-blue.svg">
16+
</a>
17+
</p>
18+
19+
# UNDER CONSTRUCTION
20+
21+
Right now there is no stable version of `hsml` available. I'm just working on it.
22+
23+
<img src="https://chronicle-brightspot.s3.amazonaws.com/6a/c4/00e4ab3143f7e0cf4d9fd33aa00b/constructocat2.jpg" width="400px" />
24+
125
# vite-plugin-vue-hsml
26+
27+
[hsml](https://github.com/Shinigami92/hsml) is a hyper short markup language that is inspired by [pug](https://pugjs.org) (aka jade).
28+
29+
This plugin allows you to use `hsml` in Vue SFCs.
30+
31+
## Example
32+
33+
```vue
34+
<script setup lang="ts">
35+
defineProps<{
36+
/** Show the back button on small screens */
37+
backOnSmallScreen?: boolean;
38+
/** Show the back button on both small and big screens */
39+
back?: boolean;
40+
/** Do not applying overflow hidden to let use floatable components in title */
41+
noOverflowHidden?: boolean;
42+
}>();
43+
44+
const container = ref();
45+
const route = useRoute();
46+
const { height: windowHeight } = useWindowSize();
47+
const { height: containerHeight } = useElementBounding(container);
48+
const wideLayout = computed(() => route.meta.wideLayout ?? false);
49+
const sticky = computed(() => route.path?.startsWith('/settings/'));
50+
const containerClass = computed(() => {
51+
// we keep original behavior when not in settings page and when the window height is smaller than the container height
52+
if (!isHydrated.value || !sticky.value || windowHeight.value < containerHeight.value) return null;
53+
54+
return 'lg:sticky lg:top-0';
55+
});
56+
</script>
57+
58+
<template lang="hsml">
59+
div(ref="container" :class="containerClass")
60+
.sticky.top-0.z10.backdrop-blur.native:lg:w-[calc(100vw-5rem)].native:xl:w-[calc(135%+(100vw-1200px)/2)](
61+
pt="[env(safe-area-inset-top,0)]"
62+
bg="[rgba(var(--rgb-bg-base),0.7)]"
63+
)
64+
.flex.justify-between.px5.py2.native:xl:flex(:class="{ 'xl:hidden': $route.name !== 'tag' }" border="b base")
65+
.flex.gap-3.items-center.py2.w-full(:overflow-hidden="!noOverflowHidden ? '' : false")
66+
NuxtLink.items-center.btn-text.p-0.xl:hidden(
67+
v-if="backOnSmallScreen || back"
68+
flex="~ gap1"
69+
:aria-label="$t('nav.back')"
70+
@click="$router.go(-1)"
71+
)
72+
.rtl-flip(i-ri:arrow-left-line)
73+
.flex.w-full.native-mac:justify-center.native-mac:text-center.native-mac:sm:justify-start(
74+
:truncate="!noOverflowHidden ? '' : false"
75+
data-tauri-drag-region
76+
)
77+
slot(name="title")
78+
.sm:hidde.nh-7.w-1px
79+
.flex.items-center.flex-shrink-0.gap-x-2
80+
slot(name="actions")
81+
PwaBadge.lg:hidden
82+
NavUser(v-if="isHydrated")
83+
NavUserSkeleton(v-else)
84+
slot(name="header")
85+
div(hidden)
86+
PwaInstallPrompt.lg:hidden
87+
.m-auto(:class="isHydrated && wideLayout ? 'xl:w-full sm:max-w-600px' : 'sm:max-w-600px md:shrink-0'")
88+
.h-6(hidden :class="{ 'xl:block': $route.name !== 'tag' && !$slots.header }")
89+
slot
90+
</template>
91+
```

package.json

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,7 @@
4444
"@types/node": "~20.2.5",
4545
"@types/prettier": "~2.7.2",
4646
"@vitest/coverage-c8": "~0.31.1",
47-
"c8": "~7.13.0",
47+
"c8": "~7.14.0",
4848
"npm-run-all": "~4.1.5",
4949
"prettier": "2.8.8",
5050
"prettier-plugin-organize-imports": "~3.2.2",
@@ -57,10 +57,13 @@
5757
"peerDependencies": {
5858
"vite": "^4.0.0"
5959
},
60-
"packageManager": "pnpm@8.5.1",
60+
"packageManager": "pnpm@8.6.0",
6161
"engines": {
6262
"node": "^16.13.0 || >=18.0.0",
6363
"npm": ">=7.0.0",
6464
"pnpm": ">=8.0.0"
65+
},
66+
"dependencies": {
67+
"hsml": "~0.1.0"
6568
}
6669
}

pnpm-lock.yaml

Lines changed: 30 additions & 8 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

src/hsml.d.ts

Lines changed: 0 additions & 7 deletions
This file was deleted.

src/hsml.js

Lines changed: 0 additions & 116 deletions
This file was deleted.

src/hsml_bg.wasm

-50.6 KB
Binary file not shown.

src/hsml_bg.wasm.d.ts

Lines changed: 0 additions & 8 deletions
This file was deleted.

src/index.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1+
import { compile_content } from 'hsml';
12
import type { Plugin } from 'vite';
2-
import { compile_content } from './hsml';
33

44
const fileRegex = /\.vue$/;
55

0 commit comments

Comments
 (0)