Skip to content

Commit 7f08538

Browse files
mychidarkomychidarko
committed
feat: add leaf zero docs
1 parent 552bfe5 commit 7f08538

File tree

4 files changed

+446
-1
lines changed

4 files changed

+446
-1
lines changed

‎.vitepress/config/sidebar.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -136,11 +136,11 @@ const sidebar = [
136136
{ text: 'Introduction', link: '/docs/frontend/' },
137137
{ text: 'Bare UI', link: '/docs/frontend/bareui' },
138138
{ text: 'Leaf Blade', link: '/docs/frontend/blade' },
139+
{ text: 'Leaf Zero', link: '/docs/frontend/zero' },
139140
{ text: 'Other Engines', link: '/docs/frontend/third-party' },
140141
{ text: 'Vite JS', link: '/docs/frontend/vite' },
141142
{ text: 'Tailwind CSS', link: '/docs/frontend/tailwind' },
142143
{ text: 'Inertia JS', link: '/docs/frontend/inertia' },
143-
// { text: 'Viewi PHP', link: '/docs/frontend/viewi' },
144144
// { text: 'Leaf UI', link: '/docs/frontend/leaf-ui' },
145145
],
146146
},

‎.vitepress/theme/components/shared/PreviewCode.vue‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
<script setup>
2+
import { computed, ref, useTemplateRef } from 'vue';
3+
4+
const tab = ref('preview');
5+
const props = defineProps(['title']);
6+
const marker = useTemplateRef('marker');
7+
const preview = computed(() => tab.value === 'preview');
8+
9+
const repositionTabMarker = (el) => {
10+
marker.value.style.width = el.offsetWidth + 'px';
11+
marker.value.style.height = el.offsetHeight + 'px';
12+
marker.value.style.left = el.offsetLeft + 'px';
13+
};
14+
15+
</script>
16+
17+
<template>
18+
<div class="relative z-30 w-full mb-5 rounded-lg">
19+
<div class="flex items-center justify-between mb-3">
20+
<h4 class="!m-0 !p-0">{{ props.title }}</h4>
21+
<div
22+
class="relative inline-grid items-center justify-center w-auto h-10 grid-cols-2 p-1 bg-[var(--vp-c-bg-alt)] rounded-xl select-none">
23+
<button type="button" @click="repositionTabMarker($event.target); tab = 'preview';"
24+
class="relative z-20 inline-flex items-center justify-center h-8 px-3 text-sm font-medium transition-all rounded-lg cursor-pointer whitespace-nowrap ring-offset-background">Preview</button>
25+
<button type="button" @click="repositionTabMarker($event.target); tab = 'code';"
26+
class="relative z-20 inline-flex items-center justify-center h-8 px-3 text-sm font-medium transition-all rounded-lg cursor-pointer whitespace-nowrap ring-offset-background">Code</button>
27+
<div ref="marker" class="absolute left-0 z-10 w-1/2 h-full duration-300 ease-out"
28+
style="width: 76px; height: 32px; left: 4px;">
29+
<div class="w-full h-full bg-[var(--vp-c-bg)] rounded-lg shadow-sm"></div>
30+
</div>
31+
</div>
32+
</div>
33+
34+
<div class="relative">
35+
<div v-show="preview"
36+
class="relative border rounded-lg border-neutral-200 dark:border-gray-800 bg-[var(--vp-c-bg-alt)]">
37+
<slot name="preview"></slot>
38+
</div>
39+
40+
<div v-show="!preview" :class="{ 'opacity-0 z-10': preview, 'z-30': !preview }"
41+
class="relative not-prose cursor-text z-10">
42+
<slot name="code"></slot>
43+
</div>
44+
</div>
45+
</div>
46+
</template>

‎src/docs/frontend/blade.md‎

Lines changed: 130 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@
44

55
<script setup>
66
import VideoModal from '@theme/components/shared/VideoModal.vue'
7+
import Button from '@theme/components/shared/Button.vue'
78
</script>
89

910
Blade is Laravel's own templating engine that makes creating dynamic views easy. It lets you mix regular PHP code with its own features for more flexibility, has a clean syntax and caches your views for faster performance.
@@ -89,6 +90,135 @@ Blade views are a pretty sweet mixture of HTML, PHP, and clean syntax. You can c
8990

9091
This should look pretty familiar if you know HTML (of course you do). The only difference is the <span v-pre>`{{ $name }}`</span> part. This is Blade's way of creating a variable in your view. When you render this view, Blade will allow you pass in a variable called `$name` and it will be displayed in place of <span v-pre>`{{ $name }}`</span>. Let's see how you can render this view.
9192

93+
<section id="leaf-zero" class="rounded-2xl shadow-md outline outline-gray-100 p-4 md:p-10">
94+
<p
95+
class="mt-4 text-3xl sm:text-4xl text-slate-900 font-extrabold tracking-tight dark:text-slate-50"
96+
>
97+
Ship even faster with Leaf Zero.
98+
</p>
99+
<p class="mt-4 max-w-3xl space-y-6">
100+
Zero is a collection of free pre-built components, page sections, and templates powered by Blade, Tailwind and Alpine JS to help you build your UIs faster.
101+
</p>
102+
<Button as="a" href="/docs/frontend/zero" class="!text-white bg-red-500 hover:bg-red-600">View Leaf Zero</Button>
103+
<div class="relative pt-10 xl:pt-0 mt-10">
104+
<div
105+
class="hidden dark:block absolute top-0 inset-x-0 h-[37.5rem] bg-gradient-to-b from-[#0c1120] xl:top-18"
106+
></div>
107+
<div
108+
class="absolute inset-x-0 bg-top bg-no-repeat GridLockup_beams-0___8Vns top-0 xl:top-18"
109+
></div>
110+
<div
111+
class="absolute inset-x-0 h-[37.5rem] bg-grid-slate-900/[0.04] bg-top [mask-image:linear-gradient(0deg,transparent,black)] dark:bg-grid-slate-100/[0.03] dark:bg-[center_top_-1px] dark:border-t dark:border-slate-100/5 top-0 xl:top-18"
112+
></div>
113+
<div
114+
style="
115+
mask-image: linear-gradient(
116+
to bottom,
117+
white,
118+
white,
119+
transparent
120+
);
121+
-webkit-mask-image: linear-gradient(
122+
to bottom,
123+
white,
124+
white,
125+
transparent
126+
);
127+
"
128+
class="max-w-7xl mx-auto sm:px-6 md:px-8"
129+
>
130+
<div class="flex justify-center">
131+
<div class="w-[216%] ml-[28%] flex-none sm:w-[76rem] sm:ml-0">
132+
<div
133+
class="relative"
134+
style="padding-top: 30.647155812036274%"
135+
>
136+
<img
137+
alt=""
138+
loading="lazy"
139+
decoding="async"
140+
src="https://zero.leafphp.dev/assets/img/hero.png"
141+
class="absolute shadow-xl rounded-lg"
142+
style="
143+
top: 3.55556%;
144+
left: 2.22589%;
145+
width: 19.4559%;
146+
opacity: 1;
147+
transform: none;
148+
"
149+
/><img
150+
alt=""
151+
loading="lazy"
152+
decoding="async"
153+
src="https://zero.leafphp.dev/assets/img/hero.png"
154+
class="absolute shadow-xl rounded-lg"
155+
style="
156+
top: 0%;
157+
left: 23.6603%;
158+
width: 46.7436%;
159+
opacity: 1;
160+
transform: none;
161+
"
162+
/><img
163+
alt=""
164+
loading="lazy"
165+
decoding="async"
166+
src="https://zero.leafphp.dev/assets/img/hero.png"
167+
class="absolute shadow-xl rounded-lg"
168+
style="
169+
top: 6.96296%;
170+
left: 72.3825%;
171+
width: 25.3916%;
172+
opacity: 1;
173+
transform: none;
174+
"
175+
/><img
176+
alt=""
177+
loading="lazy"
178+
decoding="async"
179+
src="https://zero.leafphp.dev/assets/img/hero.png"
180+
class="absolute shadow-xl rounded-lg"
181+
style="
182+
top: 42.8148%;
183+
left: 0%;
184+
width: 38.9118%;
185+
opacity: 1;
186+
transform: none;
187+
"
188+
/><img
189+
alt=""
190+
loading="lazy"
191+
decoding="async"
192+
src="https://zero.leafphp.dev/assets/img/hero.png"
193+
class="absolute shadow-xl rounded-lg"
194+
style="
195+
top: 42.8148%;
196+
left: 40.8904%;
197+
width: 36.3561%;
198+
opacity: 1;
199+
transform: none;
200+
"
201+
/><img
202+
alt=""
203+
loading="lazy"
204+
decoding="async"
205+
src="https://zero.leafphp.dev/assets/img/hero.png"
206+
class="absolute shadow-xl rounded-lg"
207+
style="
208+
top: 42.8148%;
209+
left: 79.2251%;
210+
width: 20.7749%;
211+
opacity: 1;
212+
transform: none;
213+
"
214+
/>
215+
</div>
216+
</div>
217+
</div>
218+
</div>
219+
</div>
220+
</section>
221+
92222
## Rendering Blade Views
93223

94224
Remember we set up Blade earlier? Now we can use it to render our Blade views. Here's how you can render the `hello.blade.php` view we created earlier:

0 commit comments

Comments
 (0)