Skip to content

Commit

Permalink
Add readme file.
Browse files Browse the repository at this point in the history
  • Loading branch information
daniel-cintra committed Feb 5, 2024
1 parent f28743f commit dbefda4
Showing 1 changed file with 181 additions and 0 deletions.
181 changes: 181 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,181 @@
<p align="center" style="margin: 24px;">
<a href="https://docs.ismodular.com" target="_blank">
<img src="art/modular-github.png" alt="Modular Logo" style="width: 100%; max-width: 800px;"></a>
</p>

<center>

[![Vue v3.x](https://img.shields.io/badge/Vue.js-v3.x-2f4053?style=for-the-badge&logo=vue.js&logoColor=39af78)](https://vuejs.org/)
[![Inertia.js v1.x](https://img.shields.io/badge/Inertia.js-v1.x-6765ea?style=for-the-badge&logo=inertia&logoColor=ffffff)](https://inertiajs.com/)
[![Laravel v10.x](https://img.shields.io/badge/Laravel-v10.x-FF2D20?style=for-the-badge&logo=laravel)](https://laravel.com)
[![Tailwind CSS v3.x](https://img.shields.io/badge/Tailwind%20CSS-v3.x-31b5f7?style=for-the-badge&logo=tailwind-css&logoColor=ffffff)](https://tailwindcss.com/)
[![Tests passing](https://img.shields.io/badge/Tests-passing-green?style=for-the-badge&logo=github)](https://github.com/daniel-cintra/modular-blog/actions)

</center>

## Modular's Blog Module

The Modular Blog Module is a Blog Module for Applications built using the [Modular Project](https://docs.ismodular.com).

It has the following features:

- Posts Management
- Categories Management
- Tags Management
- Authors Management

This means that you can easily create posts using a Fully Featured WYSIWYG Editor, and manage them using a simple and intuitive interface to create, edit, and delete posts, categories, tags, and authors, also allowing you to manage the posts' status and visibility throught publication dates.

## Preparing to install the Modular Blog Module

Before installing the Modular Blog Module, you need to make sure that you have the Modular Project installed and configured in your Laravel Application. If you haven't done that yet, you can follow the [Modular Project's Installation Guide](https://docs.ismodular.com/getting-started.html).

With the Modular Project installed, follow the steps to [Publish Site Files](https://docs.ismodular.com/essentials/site-setup.html).

Now that you can proceed to install the Modular Blog Module.

## Installation

To install the Modular Blog Module, you need to require it using Composer:

```bash
composer require daniel-cintra/modular-blog
```

After that, you can run the module's installation command:

```bash
php artisan modular:blog-install
```

This command will publish the module's files required for the module to work, and also run the module's migrations and optionally seed the database with some default data.

### Check npm dependencies

The Blog Module has a dependency on the Pinia npm package. If you don't have it installed, follow these steps:

1 - On your project root run:

```bash
npm install -D pinia
```

2 - Open the file `resources/js/app.js` and add the pinia `import { createPinia } from 'pinia'` and the `.use(createPinia())` blocks.

```js
import '../css/app.css'
import 'remixicon/fonts/remixicon.css'

import { createApp, h } from 'vue'
import { createPinia } from 'pinia'
import { createInertiaApp } from '@inertiajs/vue3'
import { resolvePageComponent } from 'laravel-vite-plugin/inertia-helpers'
import { ZiggyVue } from '../../vendor/tightenco/ziggy/dist/vue.m'

const appName = import.meta.env.VITE_APP_NAME || 'Laravel'

// global components
import { Link } from '@inertiajs/vue3'
import Layout from './Layouts/AuthenticatedLayout.vue'

import Translations from '@/Plugins/Translations'

createInertiaApp({
title: (title) => `${title} - ${appName}`,
resolve: (name) => {
const page = resolvePageComponent(
`./Pages/${name}.vue`,
import.meta.glob('./Pages/**/*.vue')
)

page.then((module) => {
module.default.layout = module.default.layout || Layout
})

return page
},
setup({ el, App, props, plugin }) {
return createApp({ render: () => h(App, props) })
.use(createPinia())
.use(plugin)
.use(ZiggyVue, Ziggy)
.use(Translations)
.component('Link', Link)
.mount(el)
},
progress: {
color: '#3e63dd'
}
})
```

Here are the manual configuration needed to finish the Blog Installation:

### 1 - BlogServiceProvider

Add the BlogServiceProvider to `/config/app.php`

```php
Modules\Blog\BlogServiceProvider::class,
```

### 2 - Backend Menu Items

Add the menu items to the `resources/js/Configs/menu.js` items array:

```js

export default {
// main navigation - side menu
items: [
...
{
label: 'Blog',
permission: 'Blog',
children: [
{
label: 'Posts',
permission: 'Blog: Post - List',
icon: 'ri-draft-line',
link: route('blogPost.index')
},
{
label: 'Categories',
permission: 'Blog: Category - List',
icon: 'ri-folders-line',
link: route('blogCategory.index')
},
{
label: 'Authors',
permission: 'Blog: Author - List',
icon: 'ri-team-line',
link: route('blogAuthor.index')
}
]
},
...
]
}
```

### 3 - Frontend

In `vite.config.js` manually add the module entry to:

```js
plugins: [
laravel({
input: [
...
'resources-site/js/blog-app.js'
],
refresh: [
]
}),
...
],
```

## License

The Modular Project is open-source software licensed under the [MIT license](LICENSE.md).

0 comments on commit dbefda4

Please sign in to comment.