Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Added Inertia guide with AdonisJS #1899

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Added Inertia guide with AdonisJS #1899

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
108 changes: 97 additions & 11 deletions src/pages/docs/guides/adonisjs.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,6 +37,8 @@ let steps = [
body: () => (
<p>
Add the paths to all of your template files in your <code>tailwind.config.js</code> file.
<br />
Add Inertia path if you are using Inertia.js.
</p>
),
code: {
Expand All @@ -47,6 +49,8 @@ let steps = [
> content: [
> "./resources/**/*.edge",
> "./resources/**/*.{js,ts,jsx,tsx,vue}",
> // If you are using Inertia.js
> "./inertia/**/*.{js,ts,jsx,tsx,vue}",
> ],
theme: {
extend: {},
Expand All @@ -60,7 +64,8 @@ let steps = [
body: () => (
<p>
Add the <code>@tailwind</code> directives for each of Tailwind’s layers to your{' '}
<code>./resources/css/app.css</code> file.
<code>./resources/css/app.css</code> or <code>./inertia/css/app.css</code> file, depending
on Edge or Inertia.js.
</p>
),
code: {
Expand All @@ -69,6 +74,91 @@ let steps = [
code: '@tailwind base;\n@tailwind components;\n@tailwind utilities;',
},
},
{
title: 'For Inertia, remove Tailwind CDN from your layout',
body: () => (
<p>
If you're using Inertia, make sure to remove the Tailwind CDN in the{' '}
<code>./resources/views/inertia_layout.edge</code> to avoid duplicate Tailwind imports.
</p>
),
code: {
name: 'inertia_layout.edge',
lang: 'diff-html',
code: ` <!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

<title inertia>AdonisJS x Inertia x React</title>

<link rel="preconnect" href="https://fonts.bunny.net">
<link href="https://fonts.bunny.net/css?family=instrument-sans:400,400i,500,500i,600,600i,700,700i" rel="stylesheet" />

<style>
:root {
--sand-1: #fdfdfc;
--sand-2: #f9f9f8;
--sand-3: #f1f0ef;
--sand-4: #e9e8e6;
--sand-5: #e2e1de;
--sand-6: #dad9d6;
--sand-7: #cfceca;
--sand-8: #bcbbb5;
--sand-9: #8d8d86;
--sand-10: #82827c;
--sand-11: #63635e;
--sand-12: #21201c;
}
</style>

- <script src="https://cdn.tailwindcss.com"></script>

<script>
tailwind.config = {
theme: {
extend: {
fontFamily: {
sans: ['Instrument Sans', 'sans-serif'],
},
colors: {
primary: {
DEFAULT: '#5A45FF',
},
sand: {
1: 'var(--sand-1)',
2: 'var(--sand-2)',
3: 'var(--sand-3)',
4: 'var(--sand-4)',
5: 'var(--sand-5)',
6: 'var(--sand-6)',
7: 'var(--sand-7)',
8: 'var(--sand-8)',
9: 'v and import it herear(--sand-9)',
10: 'var(--sand-10)',
11: 'var(--sand-11)',
12: 'var(--sand-12)',
},
},
},
},
}
</script>

@viteReactRefresh()
@inertiaHead()
@vite(['inertia/app/app.tsx', \`inertia/pages/\${page.component}.tsx\`])
</head>

<body class="min-h-screen w-screen font-sans">
@inertia()
</body>

</html>`,
},
},
{
title: 'Start your build process',
body: () => (
Expand All @@ -86,8 +176,8 @@ let steps = [
title: 'Start using Tailwind in your project',
body: () => (
<p>
Make sure your compiled CSS is included in the <code>{'<head>'}</code> then start using
Tailwind’s utility classes to style your content.
If you're using Edge, make sure your compiled CSS is included in the <code>{'<head>'}</code>{' '}
then start using Tailwind’s utility classes to style your content.
</p>
),
code: {
Expand All @@ -98,6 +188,7 @@ let steps = [
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
> <!-- Only when using Edge -->
> @vite(['resources/css/app.css', 'resources/js/app.js'])
</head>
<body>
Expand All @@ -122,16 +213,11 @@ export default function UsingAdonis({ code }) {
}

export function getStaticProps() {
let { highlightCode } = require('../../../../remark/utils')
let { highlightedCodeSnippets } = require('@/components/Guides/Snippets.js')

return {
props: {
code: steps.map(({ code }) => {
if (code.lang && code.lang !== 'terminal') {
return highlightCode(code.code, code.lang)
}
return code.code
}),
code: highlightedCodeSnippets(steps),
},
}
}
Expand All @@ -143,4 +229,4 @@ UsingAdonis.layoutProps = {
},
Layout: DocumentationLayout,
allowOverflow: false,
}
}