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


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## 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, and the optional `goal` query parameter:

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

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

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.