YunYouJun
/
valaxy
mirror of https://github.com/YunYouJun/valaxy
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

feat: add addon-lightgallery

This commit is contained in:
YunYouJun 2023-04-02 23:33:34 +08:00
parent 39541cce3e
commit 22d550b82b
17 changed files with 217 additions and 90 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
demo/yun/package.json
View File

@ -14,12 +14,13 @@
"serve": "vite preview"
},
"dependencies": {
"valaxy": "link:../../packages/valaxy",
"valaxy-addon-algolia": "link:../../packages/valaxy-addon-algolia",
"valaxy-addon-components": "link:../../packages/valaxy-addon-components",
"valaxy-addon-twikoo": "link:../../packages/valaxy-addon-twikoo",
"valaxy-addon-waline": "link:../../packages/valaxy-addon-waline",
"valaxy-theme-yun": "link:../../packages/valaxy-theme-yun"
"valaxy": "workspace:*",
"valaxy-addon-algolia": "workspace:*",
"valaxy-addon-components": "workspace:*",
"valaxy-addon-lightgallery": "workspace:*",
"valaxy-addon-twikoo": "workspace:*",
"valaxy-addon-waline": "workspace:*",
"valaxy-theme-yun": "workspace:*"
},
"devDependencies": {
"nodemon": "^2.0.22",

2
demo/yun/valaxy.config.ts
View File

@ -6,6 +6,7 @@ import { addonAlgolia } from 'valaxy-addon-algolia'
// import { addonTwikoo } from 'valaxy-addon-twikoo'
import { addonWaline } from 'valaxy-addon-waline'
import { addonComponents } from 'valaxy-addon-components'
import { addonLightGallery } from 'valaxy-addon-lightgallery'
const safelist = [
'i-ri-home-line',
@ -104,6 +105,7 @@ export default defineValaxyConfig<ThemeConfig>({
pageview: true,
comment: true,
}),
addonLightGallery(),
// addonTwikoo({
// envId: 'https://twikoo.vercel.app',
// }),

1
docs/pages/dev/index.md
View File

@ -16,7 +16,6 @@ end: false
- [ ] Debug component.
- [x] local search
- [ ] algolia search for valaxy-theme-press
- [ ] Image preview by [lightGallery](https://www.lightgalleryjs.com/docs/vue/)
## Dev

1
package.json
View File

@ -65,6 +65,7 @@
"valaxy": "workspace:*",
"valaxy-addon-algolia": "workspace:*",
"valaxy-addon-components": "workspace:*",
"valaxy-addon-lightgallery": "workspace:*",
"valaxy-addon-twikoo": "workspace:*",
"valaxy-addon-waline": "workspace:*",
"valaxy-theme-press": "workspace:*",

28
packages/valaxy-addon-lightgallery/README.md Normal file
View File

@ -0,0 +1,28 @@
# valaxy-addon-lightgallery
[![NPM version](https://img.shields.io/npm/v/valaxy-addon-lightgallery?color=0078E7)](https://www.npmjs.com/package/valaxy-addon-lightgallery)
TODO: English Docs
valaxy-addon-lightgallery 基于 [lightgallery](https://github.com/sachinchoolur/lightGallery) 提供画廊预览效果。
## 如何使用
### 安装依赖
```bash
npm i valaxy-addon-lightgallery
```
### 加载插件
```ts
import { defineValaxyConfig } from 'valaxy'
import { addonLightGallery } from 'valaxy-addon-lightgallery'
export default defineValaxyConfig({
addons: [
addonLightGallery(),
],
})
```

25
packages/valaxy-addon-lightgallery/components/VAGallery.vue Normal file
View File

@ -0,0 +1,25 @@
<script lang="ts" setup>
import type { Photo } from 'valaxy'
// @ts-expect-error esm not supported
import LightGallery from 'lightgallery/vue/LightGalleryVue.umd.min.js'
defineProps<{
photos: Photo[]
}>()
</script>
<template>
<LightGallery class="va-photo-list">
<VAPhoto v-for="photo in photos" :key="photo.src" :photo="photo" />
</LightGallery>
</template>
<style lang="css">
@import 'lightgallery/css/lightgallery.css';
.va-photo-list {
display: flex;
justify-content: center;
flex-wrap: wrap;
}
</style>

52
packages/valaxy-addon-lightgallery/components/VAPhoto.vue Normal file
View File

@ -0,0 +1,52 @@
<script lang="ts" setup>
import type { Photo } from 'valaxy'
import { computed } from 'vue'
const props = defineProps<{
photo: Photo
}>()
const subHtml = computed(() => {
return `<h4>${props.photo.caption}</h4><p>${props.photo.desc}</p>`
})
</script>
<template>
<figure class="va-photo-list-item" :data-src="photo.src" :data-sub-html="subHtml">
<img class="va-photo-list-cover" :src="photo.src" loading="lazy" :alt="photo.caption">
<figcaption>
{{ photo.caption }}
</figcaption>
</figure>
</template>
<style lang="scss">
.va-photo-list-item {
display: inline-flex;
position: relative;
width: 15rem;
margin: 1.5rem;
cursor: pointer;
img {
box-sizing: border-box;
vertical-align: bottom;
display: inline-flex;
border: 0.25rem solid white;
box-shadow: 0 8px 10px rgba(#000000, 0.1);
width: 100%;
height: 10rem;
object-fit: cover;
background-color: #eee;
}
figcaption {
position: absolute;
bottom: -1.8rem;
display: block;
text-align: center;
width: 100%;
font-size: 0.9rem;
}
}
</style>

46
packages/valaxy-addon-lightgallery/components/VCLiveTime.vue Normal file
View File

@ -0,0 +1,46 @@
<script lang="ts" setup>
import { onMounted, ref } from 'vue'
import { useI18n } from 'vue-i18n'
const props = defineProps<{
startTime: string
}>()
const { t } = useI18n()
const passDay = ref(0)
const passHour = ref(0)
const passMinute = ref(0)
const passSecond = ref(0)
/**
* get live time
*/
function siteLiveTime() {
const start = new Date(props.startTime)
const now = new Date()
const timeDiff = (now.getTime() - start.getTime())
const msPerMinute = 60 * 1000
const msPerHour = 60 * msPerMinute
const msPerDay = 24 * msPerHour
passDay.value = Math.floor(timeDiff / msPerDay)
passHour.value = Math.floor((timeDiff % msPerDay) / 60 / 60 / 1000)
passMinute.value = Math.floor((timeDiff % msPerHour) / 60 / 1000)
passSecond.value = Math.floor((timeDiff % msPerMinute) / 1000)
}
onMounted(() => {
setInterval(siteLiveTime, 1000)
})
</script>
<template>
<div class="vc-site-live-time">
<slot name="live-time-before" />
<span mx-1>{{ t('time.day', passDay) }}</span>
<span mx-1>{{ t('time.hour', passHour) }}</span>
<span mx-1>{{ t('time.minute', passMinute) }}</span>
<span mx-1>{{ t('time.second', passSecond) }}</span>
<slot name="live-time-after" />
</div>
</template>

1
packages/valaxy-addon-lightgallery/index.ts Normal file
View File

@ -0,0 +1 @@
export * from './node'

8
packages/valaxy-addon-lightgallery/node/index.ts Normal file
View File

@ -0,0 +1,8 @@
import { defineValaxyAddon } from 'valaxy'
import pkg from '../package.json'
export const addonLightGallery = defineValaxyAddon(options => ({
name: pkg.name,
enable: true,
options,
}))

15
packages/valaxy-addon-lightgallery/package.json Normal file
View File

@ -0,0 +1,15 @@
{
"name": "valaxy-addon-lightgallery",
"version": "0.0.1",
"description": "Light Gallery for Valaxy",
"repository": "https://github.com/YunYouJun/valaxy/tree/main/packages/valaxy-addon-lightgallery",
"keywords": [
"valaxy",
"addon",
"lightgallery"
],
"main": "index.ts",
"dependencies": {
"lightgallery": "^2.7.1"
}
}

4
packages/valaxy-theme-yun/components/YunAlbum.vue
View File

@ -8,7 +8,7 @@ defineProps<{
</script>
<template>
<a class="yun-album-list-item" :href="album.url">
<AppLink class="yun-album-list-item" :to="album.url">
<figure :title="album.desc">
<img
loading="lazy"
@ -21,5 +21,5 @@ defineProps<{
「{{ album.caption }}」
</figcaption>
</figure>
</a>
</AppLink>
</template>

7
packages/valaxy-theme-yun/components/YunGallery.vue
View File

@ -1,7 +1,4 @@
<script lang="ts" setup>
import Lightgallery from 'lightgallery/vue'
import 'lightgallery/scss/lightgallery.scss'
import type { Photo } from 'valaxy'
defineProps<{
@ -10,7 +7,5 @@ defineProps<{
</script>
<template>
<Lightgallery class="yun-photo-list">
<YunPhoto v-for="photo in photos" :key="photo.src" :photo="photo" />
</Lightgallery>
<VAGallery :photos="photos" />
</template>

60
packages/valaxy-theme-yun/components/YunPhoto.vue
View File

@ -1,60 +0,0 @@
<script lang="ts" setup>
import type { Photo } from 'valaxy'
import { computed } from 'vue'
const props = defineProps<{
photo: Photo
}>()
const subHtml = computed(() => {
return `<h4>${props.photo.caption}</h4><p>${props.photo.desc}</p>`
})
</script>
<template>
<figure class="yun-photo-list-item" :data-src="photo.src" :data-sub-html="subHtml">
<img class="yun-photo-list-cover" :src="photo.src" loading="lazy" :alt="photo.caption">
<figcaption>
{{ photo.caption }}
</figcaption>
</figure>
</template>
<style lang="scss">
.yun {
&-photo-list {
display: flex;
justify-content: center;
flex-wrap: wrap;
}
&-photo-list-item {
display: inline-flex;
position: relative;
width: 15rem;
margin: 1.5rem;
cursor: pointer;
img {
box-sizing: border-box;
vertical-align: bottom;
display: inline-flex;
border: 0.25rem solid white;
box-shadow: 0 8px 10px rgba(#000000, 0.1);
width: 100%;
height: 10rem;
object-fit: cover;
background-color: #eee;
}
figcaption {
position: absolute;
bottom: -1.8rem;
display: block;
text-align: center;
width: 100%;
font-size: 0.9rem;
}
}
}
</style>

10
packages/valaxy-theme-yun/layouts/gallery.vue
View File

@ -1,7 +1,7 @@
<script lang="ts" setup>
import { defineWebPage, useSchemaOrg } from '@vueuse/schema-org'
import { useFrontmatter, usePostTitle } from 'valaxy'
import { computed } from 'vue'
import { useFrontmatter, usePostTitle, useRuntimeConfig } from 'valaxy'
import { computed, defineAsyncComponent } from 'vue'
import { useI18n } from 'vue-i18n'
import { useRouter } from 'vue-router'
@ -20,6 +20,12 @@ useSchemaOrg([
])
const photos = computed(() => frontmatter.value.photos || [])
const runtimeConfig = useRuntimeConfig()
const YunGallery = runtimeConfig.value.addons['valaxy-addon-lightgallery']
? defineAsyncComponent(() => import('../components/YunGallery.vue'))
: () => null
</script>
<template>

1
packages/valaxy-theme-yun/package.json
View File

@ -20,7 +20,6 @@
"@iconify-json/ant-design": "^1.1.5",
"@iconify-json/simple-icons": "^1.1.47",
"animejs": "^3.2.1",
"lightgallery": "^2.7.1",
"valaxy-addon-waline": "workspace:*"
},
"devDependencies": {

33
pnpm-lock.yaml
View File

@ -70,6 +70,9 @@ importers:
valaxy-addon-components:
specifier: workspace:*
version: link:packages/valaxy-addon-components
valaxy-addon-lightgallery:
specifier: workspace:*
version: link:packages/valaxy-addon-lightgallery
valaxy-addon-twikoo:
specifier: workspace:*
version: link:packages/valaxy-addon-twikoo
@ -95,22 +98,25 @@ importers:
demo/yun:
dependencies:
valaxy:
specifier: link:../../packages/valaxy
specifier: workspace:*
version: link:../../packages/valaxy
valaxy-addon-algolia:
specifier: link:../../packages/valaxy-addon-algolia
specifier: workspace:*
version: link:../../packages/valaxy-addon-algolia
valaxy-addon-components:
specifier: link:../../packages/valaxy-addon-components
specifier: workspace:*
version: link:../../packages/valaxy-addon-components
valaxy-addon-lightgallery:
specifier: workspace:*
version: link:../../packages/valaxy-addon-lightgallery
valaxy-addon-twikoo:
specifier: link:../../packages/valaxy-addon-twikoo
specifier: workspace:*
version: link:../../packages/valaxy-addon-twikoo
valaxy-addon-waline:
specifier: link:../../packages/valaxy-addon-waline
specifier: workspace:*
version: link:../../packages/valaxy-addon-waline
valaxy-theme-yun:
specifier: link:../../packages/valaxy-theme-yun
specifier: workspace:*
version: link:../../packages/valaxy-theme-yun
devDependencies:
nodemon:
@ -387,6 +393,12 @@ importers:
packages/valaxy-addon-components: {}
packages/valaxy-addon-lightgallery:
dependencies:
lightgallery:
specifier: ^2.7.1
version: 2.7.1
packages/valaxy-addon-twikoo:
dependencies:
valaxy:
@ -426,9 +438,6 @@ importers:
animejs:
specifier: ^3.2.1
version: 3.2.1
lightgallery:
specifier: ^2.7.1
version: 2.7.1
valaxy-addon-waline:
specifier: workspace:*
version: link:../valaxy-addon-waline
@ -3498,7 +3507,7 @@ packages:
/eslint-import-resolver-node@0.3.7:
resolution: {integrity: sha512-gozW2blMLJCeFpBwugLTGyvVjNoeo1knonXAcatC6bjPBZitotxdWf7Gimr25N4c0AAOo4eOUfaG82IJPDpqCA==}
dependencies:
debug: 3.2.7(supports-color@5.5.0)
debug: 3.2.7(supports-color@8.1.1)
is-core-module: 2.11.0
resolve: 1.22.1
transitivePeerDependencies:
@ -3527,7 +3536,7 @@ packages:
optional: true
dependencies:
'@typescript-eslint/parser': 5.57.0(eslint@8.37.0)(typescript@4.8.4)
debug: 3.2.7(supports-color@5.5.0)
debug: 3.2.7(supports-color@8.1.1)
eslint: 8.37.0
eslint-import-resolver-node: 0.3.7
transitivePeerDependencies:
@ -3595,7 +3604,7 @@ packages:
array-includes: 3.1.6
array.prototype.flat: 1.3.1
array.prototype.flatmap: 1.3.1
debug: 3.2.7(supports-color@5.5.0)
debug: 3.2.7(supports-color@8.1.1)
doctrine: 2.1.0
eslint: 8.37.0
eslint-import-resolver-node: 0.3.7