dev works

This commit is contained in:
2021-12-27 14:46:07 +01:00
parent 2df24bf871
commit eacff74c0a
5 changed files with 61 additions and 35 deletions

View File

@@ -465,10 +465,22 @@ Ensure the default browser behavior of the `hidden` attribute.
position: static;
}
.absolute {
position: absolute;
}
.relative {
position: relative;
}
.top-0 {
top: 0px;
}
.right-0 {
right: 0px;
}
.mt-0 {
margin-top: 0px;
}
@@ -481,18 +493,6 @@ Ensure the default browser behavior of the `hidden` attribute.
margin-bottom: 2rem;
}
.mb-2 {
margin-bottom: 0.5rem;
}
.mb-4 {
margin-bottom: 1rem;
}
.mt-4 {
margin-top: 1rem;
}
.inline-block {
display: inline-block;
}
@@ -509,6 +509,14 @@ Ensure the default browser behavior of the `hidden` attribute.
display: contents;
}
.flex-grow {
flex-grow: 1;
}
.flex-col {
flex-direction: column;
}
.justify-center {
justify-content: center;
}
@@ -517,14 +525,6 @@ Ensure the default browser behavior of the `hidden` attribute.
gap: 1rem;
}
.gap-8 {
gap: 2rem;
}
.gap-2 {
gap: 0.5rem;
}
.rounded {
border-radius: 0.25rem;
}
@@ -537,18 +537,14 @@ Ensure the default browser behavior of the `hidden` attribute.
border-width: 2px;
}
.border-b-2 {
border-bottom-width: 2px;
}
.border-b-4 {
border-bottom-width: 4px;
}
.border-b-8 {
border-bottom-width: 8px;
}
.border-b-2 {
border-bottom-width: 2px;
}
.border-primary-500 {
border-color: var(--color-primary-500);
}
@@ -583,10 +579,6 @@ Ensure the default browser behavior of the `hidden` attribute.
text-align: center;
}
.align-text-bottom {
vertical-align: text-bottom;
}
.text-4xl {
font-size: 2.25rem;
line-height: 2.5rem;

View File

@@ -0,0 +1,13 @@
A heavily customized `Laravel 8` boilerplate starter-kit with complete BO solution, with posts management as main demo feature. On frontend/assets side it's relies on last technologies, i.e. `pnpm` + `Vue 3` + `Typescript` with nice [template setup](https://v3.vuejs.org/api/sfc-script-setup.html) as default syntactic sugar, and finally `WindiCSS` as CSS utility framework. You can easily ditch WindiCSS for `Tailwind` if you prefer, as it's almost the same API.
The BO dev API is similar to my last `Vuetify Admin` project but rewritten in more customizable components. You have complete **DataTable** with pagination, sorts, global search, filters, Excel export, customizable row actions with nice Dev-side API. It has a nice **BaseForm** which reduces forms code boilerplate, with a few supported form inputs (you can easily create your own). It's also support direct right-aside editing with proper URL context (see users management on demo). All BO relies on [Inertia](https://inertiajs.com/) for minimal API glue boilerplate.
This project has full covered test suite written in [`Pest`](https://pestphp.com/) and uses the most known Dev tools for proper QA assurance as :
* `Larastan` as static analyszer,
* `PHP CS Fixer` as code formatter
* `Laravel IDE Helper` for proper IDE integration
* `Clockwork` for debugging (notably N+1 SQL problems)
* `PHPUnit Watcher` for full `TDD` experience
* Perfect `VS Code` integration with recommended plugins
* `Docker` support

View File

@@ -0,0 +1,15 @@
My most personal open-source 2020 *Mammoth* project. It's a full admin framework similar as [React Admin](https://marmelab.com/react-admin/) but for `VueJS 2` and using `Vuetify 2` as material frontend framework.
It's a complete frontend project mainly written in `Javascript`, with multiple usable [NPM packages](https://www.npmjs.com/package/vuetify-admin), a backend [Laravel bridge](https://github.com/okami101/laravel-admin), all inside a mono-repo managed by [Lerna](https://lerna.js.org/). A [Vue CLI plugin](https://www.npmjs.com/package/vue-cli-plugin-vuetify-admin) was also created for quick starting.
I put many efforts into writing [a complete documentation](https://www.okami101.io/vuetify-admin) on [VuePress](https://vuepress.vuejs.org/), with [complete tutorials](https://www.okami101.io/vuetify-admin/guide/tutorial.html), including integration within [Laravel](https://www.okami101.io/vuetify-admin/guide/laravel.html) and [Symfony API Platform](https://www.okami101.io/vuetify-admin/guide/api-platform.html). This documentation has clearly represented not far from **80%** of all work ! It also has [many samples](https://github.com/okami101/vuetify-admin/tree/master/examples) and [a complete demo](https://va-demo.okami101.io/).
But I had to decide to stop this project after a couple of months because multiple reasons :
* Less time available
* Too much effort to maintain and evolve it
* Not written on `Typescript` that allows proper refactoring
* Not unit tests from the beginning, which is a **HUGE** mistake
* `Vite`, `Vue 3` with real `Typescript` support and `Vuetify 3` are in the corner, which necessitates full rewrite and new *next* repo
Nevertheless, it was a very instructive project that shows me the **real amount work for a good documentation** and the **cost of missing proper unit/integration/e2e tests**.

View File

@@ -38,11 +38,13 @@
projects:
- name: vuetify-admin
title: Vuetify Admin
date: 11/2020
repo: okami101/vuetify-admin
demo: https://va-demo.okami101.io/
docs: https://www.okami101.io/vuetify-admin
- name: laravel-rad-stack
title: Laravel RAD Stack
date: 10/2021
repo: adr1enbe4udou1n/laravel-rad-stack
demo: https://laravel-rad-stack.okami101.io/

View File

@@ -14,19 +14,23 @@
{{ if .description }}
<div class="prose dark:prose-light mb-8">
{{ readFile (print "_data/works/realworld.md") | markdownify }}
{{ readFile "_data/works/realworld.md" | markdownify }}
</div>
{{ end }}
<div class="grid md:grid-cols-2 gap-4">
{{ range .projects }}
<div class="flex flex-col gap-4 rounded border-2 border-primary-500 p-4 h-full">
<div class="text-center">
<div class="flex flex-col gap-4 rounded border-2 border-primary-500 p-4">
<div class="text-center relative">
<a href="https://github.com/{{ .repo }}" target="_blank">
<h3 class="pb-1 font-bold border-b-2 border-primary-500 inline-block">
{{ .title }}
</h3>
</a>
<div class="absolute top-0 right-0">
{{ partial "badge.html" (print "Date : " .date) }}
</div>
</div>
<div class="prose dark:prose-light flex-grow">
{{ readFile (print "_data/works/" .name ".md") | markdownify }}