Comments Demo App

# 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 %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://lakm.gitbook.io/commenter/advance/customization.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.