mirror of
https://github.com/DavidHDev/vue-bits.git
synced 2026-03-07 14:39:30 -07:00
documentation structure
This commit is contained in:
David Haz
144
src/components/code/CliInstallation.vue
Normal file
144
src/components/code/CliInstallation.vue
Normal file
@@ -0,0 +1,144 @@
|
||||
<template>
|
||||
<div class="cli-installation">
|
||||
<h2 class="demo-title">One-Time Installation</h2>
|
||||
|
||||
<VCodeBlock v-if="command" :code="command" :persistent-copy-button="true" highlightjs lang="bash" theme="nord"
|
||||
:copy-button="true" class="code-block" />
|
||||
|
||||
<div class="cli-divider"></div>
|
||||
|
||||
<h2 class="demo-title">Full CLI Setup</h2>
|
||||
<p class="jsrepo-info">
|
||||
Vue Bits uses
|
||||
<a href="https://jsrepo.dev/" target="_blank" rel="noreferrer">jsrepo</a>
|
||||
to help you install components via CLI— you can set it up project-wide following the steps below.
|
||||
</p>
|
||||
|
||||
<Accordion expandIcon="pi pi-chevron-right" collapseIcon="pi pi-chevron-down">
|
||||
<AccordionPanel value="setup">
|
||||
<AccordionHeader>Setup Steps</AccordionHeader>
|
||||
<AccordionContent>
|
||||
<div class="setup-content">
|
||||
<p class="demo-extra-info">1. Initialize a config file for your project</p>
|
||||
|
||||
<div class="setup-option">
|
||||
<VCodeBlock :persistent-copy-button="true" code="npx jsrepo init https://vuebits.dev" highlightjs
|
||||
lang="bash" theme="nord" :copy-button="true" class="code-block" />
|
||||
</div>
|
||||
|
||||
<p class="demo-extra-info">2. Browse & add components from the list</p>
|
||||
<VCodeBlock :persistent-copy-button="true" code="npx jsrepo add" highlightjs lang="bash" theme="nord"
|
||||
:copy-button="true" class="code-block" />
|
||||
|
||||
<p class="demo-extra-info">3. Or just add a specific component</p>
|
||||
<VCodeBlock :persistent-copy-button="true" code="npx jsrepo add Animations/AnimatedContainer" highlightjs
|
||||
lang="bash" theme="nord" :copy-button="true" class="code-block" />
|
||||
</div>
|
||||
</AccordionContent>
|
||||
</AccordionPanel>
|
||||
</Accordion>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { VCodeBlock } from '@wdns/vue-code-block'
|
||||
import Accordion from 'primevue/accordion'
|
||||
import AccordionPanel from 'primevue/accordionpanel'
|
||||
import AccordionHeader from 'primevue/accordionheader'
|
||||
import AccordionContent from 'primevue/accordioncontent'
|
||||
|
||||
const { command } = defineProps<{
|
||||
command?: string
|
||||
}>()
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.cli-installation {
|
||||
padding-bottom: 1.2rem;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.setup-content {
|
||||
padding: 1rem 0;
|
||||
}
|
||||
|
||||
.setup-option {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.jsrepo-info {
|
||||
color: #a1a1aa;
|
||||
font-size: 14px;
|
||||
margin: 1rem 0;
|
||||
}
|
||||
|
||||
.jsrepo-info a {
|
||||
color: #27FF64;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.code-block {
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
border: 1px solid #142216;
|
||||
}
|
||||
|
||||
:deep(.p-accordion-header) {
|
||||
background: #0b0b0b;
|
||||
border: 1px solid #142216;
|
||||
border-radius: 20px;
|
||||
}
|
||||
|
||||
:deep(.p-accordionpanel) {
|
||||
border: none;
|
||||
}
|
||||
|
||||
:deep(.p-accordionheader-toggle-icon) {
|
||||
color: #fff !important;
|
||||
fill: #fff !important;
|
||||
}
|
||||
|
||||
:deep(.p-accordionheader-toggle-icon svg) {
|
||||
color: #fff !important;
|
||||
fill: #fff !important;
|
||||
}
|
||||
|
||||
:deep(.p-accordionheader-toggle-icon path) {
|
||||
fill: #fff !important;
|
||||
stroke: #fff !important;
|
||||
}
|
||||
|
||||
:deep(.p-accordion-content) {
|
||||
background: #0b0b0b;
|
||||
border: 1px solid #142216;
|
||||
border-top: none;
|
||||
border-radius: 0 0 20px 20px;
|
||||
}
|
||||
|
||||
:deep(.v-code-block) {
|
||||
background: #0b0b0b;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
:deep(.v-code-block--tab-highlightjs-github-dark-icon) {
|
||||
color: #999 !important;
|
||||
fill: #999 !important;
|
||||
}
|
||||
|
||||
:deep(.v-code-block--me-1) {
|
||||
margin-right: 0 !important;
|
||||
}
|
||||
|
||||
:deep(.v-code-block pre) {
|
||||
background: #0b0b0b;
|
||||
margin: 0;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
:deep(.v-code-block .hljs) {
|
||||
background: #0b0b0b;
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
}
|
||||
</style>
|
||||
110
src/components/code/CodeExample.vue
Normal file
110
src/components/code/CodeExample.vue
Normal file
@@ -0,0 +1,110 @@
|
||||
<template>
|
||||
<div class="code-example">
|
||||
<div v-for="[name, snippet] in codeEntries" :key="name" class="code-section">
|
||||
<h2 v-if="shouldShowTitle()" class="demo-title">{{ getDisplayName(name) }}</h2>
|
||||
|
||||
<VCodeBlock v-if="snippet" :code="snippet" highlightjs :lang="getLanguage(name)" theme="nord"
|
||||
:copy-button="true" :persistent-copy-button="true" class="code-block" />
|
||||
|
||||
<div v-if="!snippet" class="no-code">
|
||||
<span>Nothing here yet!</span>
|
||||
<i class="pi pi-face-sad"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue'
|
||||
import { VCodeBlock } from '@wdns/vue-code-block'
|
||||
import type { CodeObject } from '../../types/code'
|
||||
|
||||
const props = defineProps<{
|
||||
codeObject: CodeObject
|
||||
}>()
|
||||
|
||||
const skipKeys = [
|
||||
'cli'
|
||||
]
|
||||
|
||||
const codeEntries = computed(() => {
|
||||
return Object.entries(props.codeObject).filter(([name]) => !skipKeys.includes(name))
|
||||
})
|
||||
|
||||
const shouldShowTitle = () => {
|
||||
return true // Show titles for all sections
|
||||
}
|
||||
|
||||
const getDisplayName = (name: string) => {
|
||||
if (name === 'code') return 'Code'
|
||||
if (name === 'cli') return 'CLI Command'
|
||||
if (name === 'utility') return 'Utility'
|
||||
if (name === 'usage') return 'Usage'
|
||||
if (name === 'installation') return 'Installation'
|
||||
return name.charAt(0).toUpperCase() + name.slice(1)
|
||||
}
|
||||
|
||||
const getLanguage = (name: string) => {
|
||||
if (name === 'cli') return 'bash'
|
||||
if (name === 'code') return 'html'
|
||||
if (name === 'usage') return 'html'
|
||||
if (name === 'installation') return 'bash'
|
||||
return 'javascript'
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.code-example {
|
||||
margin: 1.2rem 0;
|
||||
}
|
||||
|
||||
.code-section {
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.code-block {
|
||||
overflow: hidden;
|
||||
border: 1px solid #142216;
|
||||
border-radius: 15px;
|
||||
}
|
||||
|
||||
.no-code {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
color: #a1a1aa;
|
||||
font-style: italic;
|
||||
padding: 2rem;
|
||||
background: #0b0b0b;
|
||||
border: 1px solid #142216;
|
||||
border-radius: 15px;
|
||||
}
|
||||
|
||||
:deep(.v-code-block) {
|
||||
background: #0b0b0b;
|
||||
border-radius: 10px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
:deep(.v-code-block pre) {
|
||||
background: #0b0b0b;
|
||||
margin: 0;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
:deep(.v-code-block--tab-highlightjs-github-dark-icon) {
|
||||
color: #999 !important;
|
||||
fill: #999 !important;
|
||||
}
|
||||
|
||||
:deep(.v-code-block--me-1) {
|
||||
margin-right: 0 !important;
|
||||
}
|
||||
|
||||
:deep(.v-code-block .hljs) {
|
||||
background: #0b0b0b;
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
}
|
||||
</style>
|
||||
18
src/components/code/Dependencies.vue
Normal file
18
src/components/code/Dependencies.vue
Normal file
@@ -0,0 +1,18 @@
|
||||
<template>
|
||||
<div class="dependencies-container">
|
||||
<h2 class="demo-title">Dependencies</h2>
|
||||
<div class="demo-details">
|
||||
<span v-for="dep in dependencyList" :key="dep" class="dependency-tag">
|
||||
{{ dep }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
interface Props {
|
||||
dependencyList: string[]
|
||||
}
|
||||
|
||||
defineProps<Props>()
|
||||
</script>
|
||||
Reference in New Issue
Block a user