Skip to content

Commit

Permalink
Add better readme examples
Browse files Browse the repository at this point in the history
  • Loading branch information
caendesilva committed Feb 6, 2024
1 parent 5b71c79 commit 6cd9997
Showing 1 changed file with 23 additions and 22 deletions.
45 changes: 23 additions & 22 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -25,10 +25,6 @@ name: World

# Hello, {{ $name }}!

<x-tweet url='https://twitter.com/aarondfrancis/status/1705211030882684946'>
The best part about being 90% done with a project is that you're almost halfway finished!
</x-tweet>

<x-header image="media/my-image.png">
<x-slot name="title">
Lorem Ipsum
Expand All @@ -40,6 +36,12 @@ name: World
## More stuff

Lorem ipsum dolor sit amet.

@include('related-posts')

@push('footer')
<script src="https://example.com/script.js"></script>
@endpush
```

## Supported components
Expand All @@ -65,36 +67,35 @@ name: World
### Including components

```markdown
@include('components.alert')
@include('related-posts')

@include('related-posts', ['limit' => 5])

@include('components.alert', ['type' => 'error'])
@component('faq-item')
@slot('question') How do I get started? @endslot
@slot('answer') Check our detailed documentation for step-by-step instructions. @endslot
@endcomponent

@component('components.alert')
Something went wrong
@component('faq-item')
@slot('question') Can I customize the appearance? @endslot
@slot('answer') Yes, the styles are easily customizable to fit your design. @endslot
@endcomponent
```

```markdown
<x-alert/>

<x-alert type="error" />
<x-news-banner />

<x-alert type="error">
Something went wrong
</x-alert>
<x-news-banner message="New package released!" />

<x-header image="media/my-image.png">
<x-slot name="title">
Lorem Ipsum
</x-slot>

Lorem ipsum dolor sit amet
</x-header>
<x-feature-card image="media/feature-image.png">
<x-slot name="title">Exciting Feature</x-slot>
<p>This feature allows you to do incredible things!</p>
</x-feature-card>
```

### Pushing to stacks

The push directive allows you to push to any stack in your layout.
The push directive allows you to push to any stack in your layout. Perfect if you need to add a script or style for a specific page.

```markdown
@push('header')
Expand Down

0 comments on commit 6cd9997

Please sign in to comment.