Webmeister's Adonis Introduction

@!section('content')

`)),mdx("p",null,"Let's create a file that will be used as a route view."),mdx("pre",null,mdx("code",e({parentName:"pre"},{className:"language-bash"}),`# this will create resources/views/index.edge node ace make:view index `)),mdx("p",null,"Also, add these codes to the\xA0",mdx("inlineCode",{parentName:"p"},"resources/views/index.edge"),"\xA0file:"),mdx("pre",null,mdx("code",e({parentName:"pre"},{className:"language-markup"}),`@layout('layouts/master') @section('content')

@endsection `)),mdx("p",null,"The Adonis router automatically look in\xA0",mdx("inlineCode",{parentName:"p"},"resources/views"),`\xA0folder for the view. Open your route file and change it according to this:`),mdx("pre",null,mdx("code",e({parentName:"pre"},{className:"language-typescript"}),`// start/routes.ts Route.get('/', async ({ view }) => { return view.render('index') }) `)),mdx("p",null,"Now, we can create reusable components. I'll first create a navigation bar. In Edge, we can do this by the partial templates. Partials are used on many pages and views. I'll also use\xA0",mdx("a",e({parentName:"p"},{href:"https://devdojo.com/tails"}),"Devdojo Tail's demo components"),"."),mdx("pre",null,mdx("code",e({parentName:"pre"},{}),`# this will create resources/views/partials/navbar.edge node ace make:view partials/navbar `)),mdx("p",null,"Add the codes to the\xA0",mdx("inlineCode",{parentName:"p"},"resources/partials/navbar.edge"),"\xA0file."),mdx("pre",null,mdx("code",e({parentName:"pre"},{className:"language-markup"}),`

tails.

`)),mdx("p",null,"Because\xA0",mdx("inlineCode",{parentName:"p"},"navbar"),"\xA0component will be on every page, we should inform the master layout. We insert the partial template by putting this\xA0",mdx("inlineCode",{parentName:"p"},"@include('partials/navbar')"),"\xA0in the proper place."),mdx("pre",null,mdx("code",e({parentName:"pre"},{className:"language-markup"}),` Webmeister's Adonis Introduction

@include('partials/navbar') @!section('content')

`)),mdx("h2",null,"Adding Tailwind to Adonis"),mdx("p",null,"On your project directory, install the dependencies:"),mdx("pre",null,mdx("code",e({parentName:"pre"},{className:"language-bash"}),`# install dependencies npm install -D tailwindcss@latest postcss@latest autoprefixer@latest # create postcss config file touch postcss.config.js # also install postcss-load npm i -D postcss-loader # create tailwind config file npx tailwindcss init `)),mdx("p",null,"Set the\xA0",mdx("inlineCode",{parentName:"p"},"postcss.config.js"),"."),mdx("pre",null,mdx("code",e({parentName:"pre"},{className:"language-javascript"}),`// postcss.config.js module.exports = { plugins: [require('tailwindcss'), require('autoprefixer')], } `)),mdx("p",null,"Also, make tailwind configs as follow. (Note: I'm also exploring Tailwind and the code below includes my settings)"),mdx("pre",null,mdx("code",e({parentName:"pre"},{className:"language-javascript"}),`// tailwind.config.js const colors = require('tailwindcss/colors') module.exports = { mode: 'jit', purge: ['./resources/views/**/*.edge', './resources/assets/ts/**/*.ts'], darkMode: 'class', // or 'media' or 'class' theme: { extend: {}, }, variants: { extend: {}, }, plugins: [], theme: { colors: { transparent: 'transparent', current: 'currentColor', black: colors.black, white: colors.white, gray: colors.trueGray, indigo: colors.indigo, red: colors.rose, yellow: colors.amber, teal: colors.teal, darkblue: colors.blueGray, }, }, } `)),mdx("p",null,"We should also tell the webpack that we will use Postcss. Fortunately, the webpack settings are already done for us. We just need to uncomment the line:"),mdx("pre",null,mdx("code",e({parentName:"pre"},{className:"language-javascript"}),`// webpack.config.js /* Find the line below and uncomment it */ Encore.enablePostCssLoader() /* `)),mdx("p",null,"We should create a separate CSS file for tailwinds. On your project's root directory, create the file."),mdx("pre",null,mdx("code",e({parentName:"pre"},{}),`touch resources/css/tailwind.css `)),mdx("pre",null,mdx("code",e({parentName:"pre"},{className:"language-css"}),`/* resources/css/tailwind.css */ @tailwind base; @tailwind components; @tailwind utilities; `)),mdx("p",null,"Import\xA0",mdx("inlineCode",{parentName:"p"},"tailwind.css"),"\xA0to\xA0",mdx("inlineCode",{parentName:"p"},"app.css"),". Open\xA0",mdx("inlineCode",{parentName:"p"},"app.css"),"\xA0file. Only add this single line to the top of the file."),mdx("pre",null,mdx("code",e({parentName:"pre"},{className:"language-css"}),`@import "./tailwind.css"; /* * */ `)),mdx("p",null,"We'll finish adding Tailwind to the Adonis5 app with this final single-line modification. Open your\xA0",mdx("inlineCode",{parentName:"p"},"master.edge"),"\xA0file, and add this single line to the head part:"),mdx("pre",null,mdx("code",e({parentName:"pre"},{className:"language-html"}),` `)),mdx("p",null,"The final form of the\xA0",mdx("inlineCode",{parentName:"p"},"master.edge"),"\xA0should look like this."),mdx("pre",null,mdx("code",e({parentName:"pre"},{className:"language-markup"}),` Webmeister's Adonis Introduction

@include('partials/navbar') @!section('content')

`)),mdx("p",null,"If you open your app, you'll see that Tailwind is successfully integrated with the AdonisJS app."),mdx("h3",null,"SolidJS: First Impressions - Reactive Primitives"),mdx("p",null,"SolidJS is a true reactive library that allows you to use JSX for your frontend projects. In this blog post, I\u2019ll share my first impressions."))}MDXContent.isMDXComponent=!0;