Revo Docs
v2.1.0
Installation

Add the private repository to composer.json 

"repositories" : [
    ...
    {
        "type": "vcs",
        "url": "git@github.com:revosystems/dejavu.git"
    }
]
Copied!

Then require the package 

composer require revosystems/dejavu
Copied!
TailwindCSS

Add tailwindcss dependencies on package.json 

"devDependencies": {
    ...
    "tailwindcss": "^3.1.0",
    "@tailwindcss/forms": "^0.5.2"
}
Copied!

Add the brand color in tailwind.config 

theme: {
    extend: {
        colors: {
            'brand': '#EA5A2E',
        }
    }
}
Copied!

Add the components to content section 

module.exports = {
    content: [
        './vendor/revosystems/dejavu/**/*.blade.php',
    ]
}
Copied!

Add the forms plugin too 

import forms from '@tailwindcss/forms';
export default {
    ...
    plugins: [forms],
    ...
}
Copied!
Alpine

Warning: If Livewire 3.x is used it automatically loads alpinejs. DO NOT import alpinejs via scripts in that case or it will cause issues due to multiple instances running at the same time. 

<script defer src="https://cdn.jsdelivr.net/npm/@alpinejs/focus@3.x.x/dist/cdn.min.js"></script>
<script defer src="https://cdn.jsdelivr.net/npm/@alpinejs/collapse@3.x.x/dist/cdn.min.js"></script>
<script defer src="https://cdn.jsdelivr.net/npm/@alpinejs/mask@3.x.x/dist/cdn.min.js"></script>
<script defer src="https://cdn.jsdelivr.net/npm/@alpinejs/anchor@3.x.x/dist/cdn.min.js"></script>
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
Copied!
Fontawesome

Some components come with built in icons, you need o import your FontAwesome lib 

<script src="https://kit.fontawesome.com/{your-kit-key}.js" crossorigin="anonymous"></script>
Copied!
Code highlight

The codeblock component uses highlight.js for syntax highlighting, if you want this you can import it with 

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/atom-one-dark.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
Copied!

And then initialize it with 

<script>hljs.highlightAll();</script>
Copied!