Skip to content

Commit

Permalink
Merge downstream UI Kit documentation
Browse files Browse the repository at this point in the history
  • Loading branch information
caendesilva committed Feb 2, 2024
1 parent ec26cfa commit 7dbb4bb
Show file tree
Hide file tree
Showing 5 changed files with 90 additions and 6 deletions.
@@ -1,5 +1,5 @@
<!DOCTYPE html>
<html lang="{{ config('hyde.language', 'en') }}">
<html lang="{{ config('site.language', 'en') }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
Expand All @@ -18,12 +18,12 @@
<div class="flex">
<div class="light">
<div class="dark:bg-gray-900 dark:text-white w-[70ch] p-8 border-gray-500 border-r-gray-900 border-2">
@include('ui-examples.components')
@include('components')
</div>
</div>
<div class="dark">
<div class="dark:bg-gray-900 dark:text-white w-[70ch] p-8 border-gray-900 border-2">
@include('ui-examples.components')
@include('components')
</div>
</div>
</div>
Expand Down
Expand Up @@ -5,6 +5,7 @@
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
background: #80808080;
position: relative;
}
Expand All @@ -19,11 +20,15 @@
width: 100%;
height: 4rem;
}
.contentArea p {
margin-top: 0.25rem;
}
</style>
<x-hyde-ui::layouts.focus>
<div id="contentArea">
<x-hyde-ui::heading>
Content Area
</x-hyde-ui::heading>
<p>(Focus Layout)</p>
</div>
</x-hyde-ui::layouts.focus>
Expand Up @@ -5,6 +5,7 @@
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
background: #80808080;
position: relative;
}
Expand All @@ -19,19 +20,24 @@
width: 100%;
height: 4rem;
}
.contentArea p {
margin-top: 0.25rem;
}
</style>
<x-hyde-ui::layouts.sidegrid>
<div class="contentArea">
<x-hyde-ui::heading>
Content Area
</x-hyde-ui::heading>
<p>(Sidegrid Layout)</p>
</div>

<x-slot:aside>
<div class="contentArea">
<x-hyde-ui::heading>
Content Area
</x-hyde-ui::heading>
<p>(Sidegrid Layout - Aside)</p>
</div>
</x-slot:aside>
</x-hyde-ui::layouts.sidegrid>
70 changes: 70 additions & 0 deletions packages/ui-kit/docs/composer.json
@@ -0,0 +1,70 @@
{
"name": "hyde/hyde",
"description": "Static Site Generator to rapidly create Blogs, Documentation Sites, and more, using Markdown and Blade.",
"keywords": [
"framework",
"hyde",
"hyde framework",
"hydephp",
"static site generator",
"static site framework",
"ssg"
],
"homepage": "https://hydephp.com",
"type": "project",
"license": "MIT",
"support": {
"issues": "https://github.com/hydephp/hyde/issues",
"source": "https://github.com/hydephp/hyde"
},
"authors": [
{
"name": "Caen De Silva",
"email": "caen@desilva.se"
}
],
"require": {
"php": "^8.1",
"hyde/framework": "^1.0",
"hyde/ui-kit": "dev-master",
"laravel-zero/framework": "^10.0"
},
"require-dev": {
"hyde/realtime-compiler": "^3.0"
},
"autoload": {
"psr-4": {
"App\\": "app/"
}
},
"autoload-dev": {
"psr-4": {
"Hyde\\Testing\\": "tests/"
}
},
"scripts": {
"post-autoload-dump": [
"@php -r \"@unlink('./app/storage/framework/cache/packages.php');\"",
"@php hyde package:discover --ansi"
]
},
"config": {
"preferred-install": "dist",
"sort-packages": true,
"optimize-autoloader": true,
"allow-plugins": {
"pestphp/pest-plugin": true
}
},
"repositories": [
{
"type": "vcs",
"url": "https://github.com/hydephp/ui-kit"
}
],
"minimum-stability": "dev",
"prefer-stable": true,
"bin": [
"hyde"
]
}
9 changes: 6 additions & 3 deletions packages/ui-kit/docs/documentation.md
@@ -1,4 +1,8 @@
# Hyde UI Kit - Documentation
---
title: Documentation
---

# HydePHP UI Kit - Documentation

The HydePHP UI Kit is a collection of minimalistic and un-opinionated TailwindCSS components for Laravel Blade,
indented to be used with HydePHP. Note that these components may require CSS classes not present in the bundled app.css
Expand All @@ -10,7 +14,6 @@ Please make sure you're familiar with [Laravel Blade](https://laravel.com/docs/b

>info Tip: Most components allow you to pass any additional HTML attributes to the element!

## Components

### Buttons
Expand Down Expand Up @@ -116,7 +119,7 @@ This component will convert any Markdown within it to HTML using the Hyde Markdo
```blade
<x-hyde-ui::markdown>
## Markdown Heading
Hello world!
</x-hyde-ui::markdown>
```
Expand Down

0 comments on commit 7dbb4bb

Please sign in to comment.