Comments Demo App

> For the complete documentation index, see [llms.txt](https://lakm.gitbook.io/commenter/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://lakm.gitbook.io/commenter/advance/customization.md).

# Customization

### Customize Views

You can customize all the views by publishing them using the following command.&#x20;

```bash
php artisan vendor:publish --tag=commenter-views
```

This will publish the package views into  `resources/views/vendor/commenter` path.

```
resources
    |--views
        |--vendor
            |--commenter
```

{% hint style="warning" %}
This will duplicate the commenter styles in your project stylesheet (`app.css`), resulting in a slightly heavier stylesheet. If you need clean assets, refer to the following steps.
{% endhint %}

### Building assets from scratch&#x20;

{% hint style="info" %}
This approach can be cumbersome. If you only plan to modify the Blade templates without touching the commenter scripts (*vanilla.js*), you can limit your changes to the [views](#customize-views).
{% endhint %}

#### Step - 1

Publish assets using the following command.

```bash
php artisan vendor:publish --tag=commenter-raw-assets
```

This will publish commenter assets in following paths.

```
resources
    |--css
        |--commenter.css
    |--js
        |--commenter.js
```

#### Step - 2

Include the commenter assets in your project's main asset entries.

```css
// resources/css/app.css

@import 'quill/dist/quill.snow.css'; // ✅
@import 'highlight.js/styles/github.css' // ✅;
@import './commenter.css' // ✅;

@import 'tailwindcss';
...
```

{% hint style="danger" %}
You must include ***commenter.css*****&#x20;before&#x20;*****tailwind.css*****.**
{% endhint %}

```
// app.js

import './bootstrap';
import './commenter.js' ✅
```

#### Step - 3

The following `npm` dependencies are required. Please add them to your project's `package.json` file.

```json
// package.json
 "dependencies": {
    "axios": "^1.15.2",
    "highlight.js": "^11.9.0",
    "moment": "^2.30.1",
    "quill": "^2.0.3"
  },
```

#### Step - 4

Define and include the commenter Tailwind configuration in `tailwind.config.js`. You can find the configuration file in `vendor/lakm/laravel-comments/tailwind.config.js`.

```javascript
// tailwind.config.js
/** @type {import('tailwindcss').Config} */
export default {
    content: [
        "./resources/**/*.blade.php",
    ],
    theme: {
        extend: {
            gridTemplateColumns: {
                '14': 'repeat(18, minmax(0, 1fr))',
            },
            gridColumn: {
                'span-17': 'span 17 / span 17',
            }
        },
    },
    plugins: [],
    darkMode: ['selector', '.dark'],
    safelist: [
        "hover:bg-[rgb(229,231,235)]!",
        "hover:bg-[rgb(229,231,235)]",
        "hover:bg-[#0707a5]!",
        "hover:bg-[#0707a5]",
    ],
}
```

#### Step -5

You can now make any changes to the commenter and build the assets. You may also publish the views as described in the [customize views](#customize-views) section.

#### Step - 5&#x20;

Install npm dependencies and build assets.

```bash
npm install
npm run build
```

Include the built assets in your layout and remove the existing commenter assets.

```html
// Some code<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}" class="darkK">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Comments Demo App</title>

    <!-- Fonts -->
    <link rel="preconnect" href="https://fonts.bunny.net">
    <link href="https://fonts.bunny.net/css?family=figtree:400,600&display=swap" rel="stylesheet" />

{{--	@commenterStyles--}} 

    @vite(['resources/css/app.css', 'resources/js/app.js',])
    
    ...
    
{{--	@commenterScripts--}}
```

{% hint style="info" %}
Remove commenter built assets folder in `public/vendor/lakm/commenter` , if you have already built them.
{% endhint %}