mirror of https://github.com/YunYouJun/valaxy
docs: optimize addon & theme card styles
This commit is contained in:
parent
986961eace
commit
499cf9474c
|
|
@ -3,6 +3,7 @@ import { computed, ref } from 'vue'
|
|||
import { useI18n } from 'vue-i18n'
|
||||
|
||||
export interface ValaxyAddon {
|
||||
icon: string
|
||||
name: string
|
||||
repo: string
|
||||
desc: string
|
||||
|
|
@ -25,40 +26,22 @@ const filteredAddons = computed(() => {
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<div class="relative mx-1 my-4 flex-center border border-slate-300" flex="~" rounded>
|
||||
<div class="relative my-4 flex-center" flex="~" rounded>
|
||||
<div class="i-ri-search-line absolute text-slate-400 left-0 pl-12" />
|
||||
<input
|
||||
v-model="keyword"
|
||||
:placeholder="t('gallery.tip')"
|
||||
class="placeholder:text-slate-400
|
||||
focus:outline-none focus:border-sky-500 focus:ring-sky-500 focus:ring-1
|
||||
b-2 w-full h-12"
|
||||
rounded
|
||||
pl-10 pr-4
|
||||
class="focus:border-purple-500 b-2 w-full h-12"
|
||||
dark="border-dark-200"
|
||||
bg="bg-white dark:bg-dark-500"
|
||||
rounded-lg transition
|
||||
type="text" name="search"
|
||||
>
|
||||
</div>
|
||||
<ul class="m-0 p-0 sm:grid-cols-1 lg:grid-cols-2 grid">
|
||||
<li v-for="addon, i in filteredAddons" :key="i" class="w-full lg:p-4 sm:pb-4 list-none">
|
||||
<a mr-2 :href="addon.repo" target="_blank">
|
||||
<h3 flex="~" justify-center items-center>
|
||||
<div text-xl mr-1 i-ri-github-line />
|
||||
<span>{{ addon.name }}</span>
|
||||
</h3>
|
||||
</a>
|
||||
<div text-xl>
|
||||
<a mr-2 class="text-red-600" :href="`https://npmjs.com/package/${addon.name}`" target="_blank" alt="NPM Package">
|
||||
<div i-ri-npmjs-line />
|
||||
</a>
|
||||
</div>
|
||||
<p m-1>
|
||||
{{ addon.desc }}
|
||||
</p>
|
||||
<ul class=" m-0 p-0 flex flex-wrap">
|
||||
<span v-for="tag, j in addon.tags" :key="j" class="break-all text-gray mr-6px">
|
||||
#{{ tag }}
|
||||
</span>
|
||||
</ul>
|
||||
<ul class="m-0 p-0 sm:grid-cols-1 lg:grid-cols-2 grid" gap="4">
|
||||
<li v-for="addon, i in filteredAddons" :key="i" class="w-full list-none">
|
||||
<AddonGalleryCard :addon="addon" />
|
||||
</li>
|
||||
</ul>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,42 @@
|
|||
<script lang="ts" setup>
|
||||
import type { ValaxyAddon } from './AddonGallery.vue'
|
||||
|
||||
defineProps<{
|
||||
addon: ValaxyAddon
|
||||
}>()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div
|
||||
class="transition bg-$va-c-bg-alt" border rounded-xl p-4
|
||||
dark="border-dark-200"
|
||||
hover="bg-$va-c-bg shadow-md"
|
||||
>
|
||||
<a class="text-purple-600 dark:text-purple-300" mr-2 :href="addon.repo" target="_blank">
|
||||
<h3 flex="~" justify-center items-center my-2 font="light">
|
||||
<div class="text-black dark:text-white" text-xl mr-1 i-ri-github-line />
|
||||
<span>{{ addon.name }}</span>
|
||||
</h3>
|
||||
</a>
|
||||
<p my-1 text-xl>
|
||||
<a mr-2 class="text-red-600" :href="`https://npmjs.com/package/${addon.name}`" target="_blank" alt="NPM Package">
|
||||
<div i-ri-npmjs-line />
|
||||
</a>
|
||||
|
||||
<!-- <a mr-2 class="text-black dark:text-white" :href="addon.repo" target="_blank" alt="GitHub Repo">
|
||||
<div i-ri-github-line />
|
||||
</a> -->
|
||||
</p>
|
||||
<p my-1 class="text-truncate">
|
||||
{{ addon.desc }}
|
||||
</p>
|
||||
<ul class=" m-0 p-0 flex flex-wrap" items-center op="70">
|
||||
<span inline-flex mr-1>
|
||||
<div :class="addon.icon" />
|
||||
</span>
|
||||
<span v-for="tag, j in addon.tags" :key="j" class="break-all mr-1">
|
||||
#{{ tag }}
|
||||
</span>
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -4,6 +4,7 @@ import { useI18n } from 'vue-i18n'
|
|||
|
||||
const props = withDefaults(defineProps<{
|
||||
themes: {
|
||||
icon: string
|
||||
name: string
|
||||
repo: string
|
||||
desc: string
|
||||
|
|
@ -23,34 +24,59 @@ const filteredThemes = computed(() => {
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<div class="search-wrapper relative mx-0.5 my-4">
|
||||
<div class="i-ri-search-line absolute text-slate-400 absolute inset-y-0 top-50% -translate-y-2/4 pl-8 " />
|
||||
<div class="relative my-4 flex-center" flex="~" rounded>
|
||||
<div class="i-ri-search-line absolute text-slate-400 left-0 pl-12" />
|
||||
<input
|
||||
v-model="keyword" :placeholder="t('gallery.tip')"
|
||||
class="placeholder:text-slate-400
|
||||
focus:outline-none focus:border-sky-500 focus:ring-sky-500 focus:ring-1
|
||||
border border-slate-300
|
||||
pl-8 pr-3 b-3 pl-4 w-full h-16"
|
||||
v-model="keyword"
|
||||
:placeholder="t('gallery.tip')"
|
||||
pl-10 pr-4
|
||||
class="focus:border-purple-500 b-2 w-full h-12"
|
||||
dark="border-dark-200"
|
||||
bg="bg-white dark:bg-dark-500"
|
||||
rounded-lg transition
|
||||
type="text" name="search"
|
||||
>
|
||||
</div>
|
||||
<ul class="m-0 p-0 sm:grid-cols-1 lg:grid-cols-2 grid">
|
||||
<li v-for="theme, i in filteredThemes" :key="i" class="w-full lg:p-4 sm:pb-4 list-none">
|
||||
<div class="img-wrapper" cursor-pointer>
|
||||
<img :src="theme.siteImage" :alt="theme.name">
|
||||
<a target="_blank" :href="theme.siteExampleURL || theme.repo" :alt="theme.name" class="mask">
|
||||
<div class="i-ri-eye-line text-40px text-white " />
|
||||
</a>
|
||||
<ul class="m-0 p-0 sm:grid-cols-1 lg:grid-cols-2 grid" gap="4">
|
||||
<li v-for="theme, i in filteredThemes" :key="i" class="w-full list-none">
|
||||
<div
|
||||
class="transition bg-$va-c-bg-alt" border rounded-xl
|
||||
dark="border-dark-200"
|
||||
overflow-hidden
|
||||
hover="bg-$va-c-bg shadow-md"
|
||||
>
|
||||
<div class="img-wrapper" cursor-pointer>
|
||||
<img :src="theme.siteImage" :alt="theme.name">
|
||||
<a target="_blank" :href="theme.siteExampleURL || theme.repo" :alt="theme.name" class="mask">
|
||||
<div class="i-ri-eye-line text-40px text-white " />
|
||||
</a>
|
||||
</div>
|
||||
<div px-4 pb-4>
|
||||
<a :href="theme.repo" target="_blank">
|
||||
<h3 mt-5 flex justify-center items-center>
|
||||
<div text-xl mr-2 :class="theme.icon" />
|
||||
<span>{{ theme.name }}</span>
|
||||
</h3>
|
||||
</a>
|
||||
<p my-1 text-xl>
|
||||
<a mr-2 class="text-red-600" :href="`https://npmjs.com/package/${theme.name}`" target="_blank" alt="NPM Package">
|
||||
<div i-ri-npmjs-line />
|
||||
</a>
|
||||
|
||||
<!-- <a mr-2 class="text-black dark:text-white" :href="addon.repo" target="_blank" alt="GitHub Repo">
|
||||
<div i-ri-github-line />
|
||||
</a> -->
|
||||
</p>
|
||||
<p my-1>
|
||||
{{ theme.desc }}
|
||||
</p>
|
||||
<ul class=" m-0 p-0 flex flex-wrap">
|
||||
<span v-for="tag, j in theme.tags" :key="j" class="break-all text-gray mr-6px">
|
||||
#{{ tag }}
|
||||
</span>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<a :href="theme.repo" target="_blank">
|
||||
<h3> {{ theme.name }}</h3>
|
||||
</a>
|
||||
<p>{{ theme.desc }}</p>
|
||||
<ul class=" m-0 p-0 flex flex-wrap">
|
||||
<span v-for="tag, j in theme.tags" :key="j" class="break-all text-gray mr-6px">
|
||||
#{{ tag }}
|
||||
</span>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -7,19 +7,35 @@ end: false
|
|||
|
||||
addons:
|
||||
- name: valaxy-addon-algolia
|
||||
icon: i-ri-search-line
|
||||
repo: https://github.com/YunYouJun/valaxy/tree/main/packages/valaxy-addon-algolia
|
||||
desc: Algolia Search.
|
||||
tags:
|
||||
- search
|
||||
- name: valaxy-addon-components
|
||||
icon: i-ri-apps-2-line
|
||||
repo: https://github.com/YunYouJun/valaxy/tree/main/packages/valaxy-addon-components
|
||||
desc: Common Components for Valaxy.
|
||||
tags:
|
||||
- component
|
||||
- name: valaxy-addon-lightgallery
|
||||
icon: i-ri-image-line
|
||||
repo: https://github.com/YunYouJun/valaxy/tree/main/packages/valaxy-addon-lightgallery
|
||||
desc: LightGallery for Valaxy.
|
||||
tags:
|
||||
- image
|
||||
- name: valaxy-addon-waline
|
||||
icon: i-ri-chat-3-line
|
||||
repo: https://github.com/YunYouJun/valaxy/tree/main/packages/valaxy-addon-waline
|
||||
desc: Waline comment.
|
||||
tags:
|
||||
- comment
|
||||
- name: valaxy-addon-twikoo
|
||||
icon: i-ri-chat-3-line
|
||||
repo: https://github.com/YunYouJun/valaxy/tree/main/packages/valaxy-addon-twikoo
|
||||
desc: Twikoo comment.
|
||||
tags:
|
||||
- comment
|
||||
---
|
||||
|
||||
<AddonGallery :addons="$frontmatter.addons" />
|
||||
|
|
|
|||
|
|
@ -7,14 +7,16 @@ end: false
|
|||
|
||||
themes:
|
||||
- name: valaxy-theme-yun
|
||||
icon: i-ri-cloud-line
|
||||
repo: https://github.com/YunYouJun/valaxy/tree/main/packages/valaxy-theme-yun
|
||||
desc: Default Theme for Valaxy Default Theme for Valaxy Default Theme for Valaxy Default Theme for Valaxy Default Theme for Valaxy
|
||||
desc: Default Theme for Valaxy
|
||||
siteImage: https://s2.loli.net/2023/05/05/QoK4ZimqN3fgRdD.png
|
||||
siteExampleURL: https://www.yunyoujun.cn
|
||||
tags:
|
||||
- yun
|
||||
- light
|
||||
- name: valaxy-theme-press
|
||||
icon: i-ri-book-line
|
||||
repo: https://github.com/YunYouJun/valaxy/tree/main/packages/valaxy-theme-press
|
||||
desc: Docs Theme for Valaxy
|
||||
siteImage: https://s2.loli.net/2023/05/05/1DyEudpohIl47cP.png
|
||||
|
|
|
|||
|
|
@ -0,0 +1,204 @@
|
|||
// #!/usr/bin/env node
|
||||
// /* eslint-disable @typescript-eslint/no-var-requires */
|
||||
// /* eslint-disable no-console */
|
||||
|
||||
// // @todo migrate to ts
|
||||
|
||||
// import process from 'node:process'
|
||||
// import fs from 'node:fs'
|
||||
// import path from 'node:path'
|
||||
// import prompts from 'prompts'
|
||||
// import execa from 'execa'
|
||||
// import { blue, bold, cyan, dim, gray, green, red, yellow } from 'kolorist'
|
||||
// import minimist from 'minimist'
|
||||
// import { version } from '../package.json'
|
||||
|
||||
// const argv = minimist(process.argv.slice(2))
|
||||
|
||||
// const cwd = process.cwd()
|
||||
|
||||
// const renameFiles = {
|
||||
// _gitignore: '.gitignore',
|
||||
// _npmrc: '.npmrc',
|
||||
// }
|
||||
|
||||
// async function init() {
|
||||
// console.log()
|
||||
// console.log(` ${bold('🌌 Valaxy')} ${blue(`v${version}`)}`)
|
||||
// console.log()
|
||||
|
||||
// let targetDir = argv._[0]
|
||||
// if (!targetDir) {
|
||||
// /**
|
||||
// * @type {{ projectName: string }}
|
||||
// */
|
||||
// const { projectName } = await prompts({
|
||||
// type: 'text',
|
||||
// name: 'projectName',
|
||||
// message: 'Project name:',
|
||||
// initial: 'valaxy-blog',
|
||||
// })
|
||||
// targetDir = projectName.trim()
|
||||
|
||||
// const packageName = await getValidPackageName(targetDir)
|
||||
// const root = path.join(cwd, targetDir)
|
||||
|
||||
// if (!fs.existsSync(root)) {
|
||||
// fs.mkdirSync(root, { recursive: true })
|
||||
// }
|
||||
// else {
|
||||
// const existing = fs.readdirSync(root)
|
||||
// if (existing.length) {
|
||||
// console.log(yellow(` Target directory "${targetDir}" is not empty.`))
|
||||
// /**
|
||||
// * @type {{ yes: boolean }}
|
||||
// */
|
||||
// const { yes } = await prompts({
|
||||
// type: 'confirm',
|
||||
// name: 'yes',
|
||||
// initial: 'Y',
|
||||
// message: 'Remove existing files and continue?',
|
||||
// })
|
||||
// if (yes)
|
||||
// emptyDir(root)
|
||||
|
||||
// else
|
||||
// return
|
||||
// }
|
||||
// }
|
||||
|
||||
// console.log(` ${dim('📁')} ${dim(root)}`)
|
||||
// console.log()
|
||||
// console.log(dim(' Scaffolding project in ') + targetDir + dim(' ...'))
|
||||
|
||||
// const templateDir = path.join(__dirname, 'template')
|
||||
// const write = (file, content) => {
|
||||
// const targetPath = renameFiles[file]
|
||||
// ? path.join(root, renameFiles[file])
|
||||
// : path.join(root, file)
|
||||
// if (content)
|
||||
// fs.writeFileSync(targetPath, content)
|
||||
|
||||
// else
|
||||
// copy(path.join(templateDir, file), targetPath)
|
||||
// }
|
||||
|
||||
// const files = fs.readdirSync(templateDir)
|
||||
// for (const file of files.filter(f => f !== 'package.json'))
|
||||
// write(file)
|
||||
|
||||
// // write pkg name & version
|
||||
// // eslint-disable-next-line @typescript-eslint/no-require-imports
|
||||
// const pkg = require(path.join(templateDir, 'package.json'))
|
||||
// if (packageName)
|
||||
// pkg.name = packageName
|
||||
// pkg.version = version
|
||||
|
||||
// write('package.json', JSON.stringify(pkg, null, 2))
|
||||
|
||||
// const pkgManager = (/pnpm/.test(process.env.npm_execpath) || /pnpm/.test(process.env.npm_config_user_agent))
|
||||
// ? 'pnpm'
|
||||
// : /yarn/.test(process.env.npm_execpath) ? 'yarn' : 'npm'
|
||||
|
||||
// const related = path.relative(cwd, root)
|
||||
// console.log(green(' Done.\n'))
|
||||
|
||||
// /**
|
||||
// * @type {{ yes: boolean }}
|
||||
// */
|
||||
// const { yes } = await prompts({
|
||||
// type: 'confirm',
|
||||
// name: 'yes',
|
||||
// initial: 'Y',
|
||||
// message: 'Install and start it now?',
|
||||
// })
|
||||
|
||||
// if (yes) {
|
||||
// const { agent } = await prompts({
|
||||
// name: 'agent',
|
||||
// type: 'select',
|
||||
// message: 'Choose the agent',
|
||||
// choices: ['npm', 'yarn', 'pnpm'].map(i => ({ value: i, title: i })),
|
||||
// })
|
||||
|
||||
// if (!agent)
|
||||
// return
|
||||
|
||||
// await execa(agent, ['install'], { stdio: 'inherit', cwd: root })
|
||||
// await execa(agent, ['run', 'dev'], { stdio: 'inherit', cwd: root })
|
||||
// }
|
||||
// else {
|
||||
// console.log(dim('\n start it later by:\n'))
|
||||
// if (root !== cwd)
|
||||
// console.log(blue(` cd ${bold(related)}`))
|
||||
|
||||
// console.log(blue(` ${pkgManager === 'yarn' ? 'yarn' : `${pkgManager} install`}`))
|
||||
// console.log(blue(` ${pkgManager === 'yarn' ? 'yarn dev' : `${pkgManager} run dev`}`))
|
||||
// console.log()
|
||||
// console.log(` ${cyan('✨')}`)
|
||||
// console.log()
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
|
||||
// function copy(src, dest) {
|
||||
// const stat = fs.statSync(src)
|
||||
// if (stat.isDirectory())
|
||||
// copyDir(src, dest)
|
||||
|
||||
// else
|
||||
// fs.copyFileSync(src, dest)
|
||||
// }
|
||||
|
||||
// function copyDir(srcDir, destDir) {
|
||||
// fs.mkdirSync(destDir, { recursive: true })
|
||||
// for (const file of fs.readdirSync(srcDir)) {
|
||||
// const srcFile = path.resolve(srcDir, file)
|
||||
// const destFile = path.resolve(destDir, file)
|
||||
// copy(srcFile, destFile)
|
||||
// }
|
||||
// }
|
||||
|
||||
// async function getValidPackageName(projectName) {
|
||||
// projectName = path.basename(projectName)
|
||||
// const packageNameRegExp = /^(?:@[a-z0-9-*~][a-z0-9-*._~]*\/)?[a-z0-9-~][a-z0-9-._~]*$/
|
||||
// if (packageNameRegExp.test(projectName)) {
|
||||
// return projectName
|
||||
// }
|
||||
// else {
|
||||
// const suggestedPackageName = projectName
|
||||
// .trim()
|
||||
// .toLowerCase()
|
||||
// .replace(/\s+/g, '-')
|
||||
// .replace(/^[._]/, '')
|
||||
// .replace(/[^a-z0-9-~]+/g, '-')
|
||||
|
||||
// /**
|
||||
// * @type {{ inputPackageName: string }}
|
||||
// */
|
||||
// const { inputPackageName } = await prompts({
|
||||
// type: 'text',
|
||||
// name: 'inputPackageName',
|
||||
// message: 'Package name:',
|
||||
// initial: suggestedPackageName,
|
||||
// // validate: input =>
|
||||
// // packageNameRegExp.test(input) ? true : 'Invalid package.json name',
|
||||
// })
|
||||
// return inputPackageName
|
||||
// }
|
||||
// }
|
||||
|
||||
// /**
|
||||
// * @param {string} dir
|
||||
// * @returns
|
||||
// */
|
||||
// function emptyDir(dir) {
|
||||
// if (!fs.existsSync(dir))
|
||||
// return
|
||||
// console.log(red(' Remove ') + gray(dir))
|
||||
// fs.rmSync(dir, { recursive: true, force: true })
|
||||
// }
|
||||
|
||||
// init().catch((e) => {
|
||||
// console.error(e)
|
||||
// })
|
||||
Loading…
Reference in New Issue