README

Wiki Bundle for Sulu

Developed by Steeven THOMAS

📂 Requirements

• PHP ^8.2
• Sulu ^2.6.*

🛠️ Features

• Wiki and Documentation Management
• Syntax Highlighting for Code Blocks
• Keyboard Shortcuts
• Copy Button
• Quotes
• Separators

📸 Screenshots

You can see screenshots of admin and frontend.

🚀 Installation

Step 1: Download using composer

In a Symfony application run this command to install and integrate Cookie Consent bundle in your application:

composer require itech-world/sulu-wiki-bundle

Step 2: Enable the bundle

When not using symfony flex, enable the bundle in bundles.php manually:

return [
    // ...
    ItechWorld\SuluWikiBundle\ItechWorldSuluWikiBundle::class => ['all' => true],
];

Step 3: Edit admin package

Edit the assets/admin/package.json to add the bundle to the list of bundles:

{
    "dependencies": {
        "sulu-itech-world-sulu-wiki-bundle": "file:../../vendor/itech-world/sulu-wiki-bundle/public/js"
    }
}

Edit the assets/admin/app.js to add the bundle in imports:

import 'sulu-itech-world-sulu-wiki-bundle';

In the assets/admin/ folder, run the following command:

npm install
npm run build

or

yarn install
yarn build

Step 4: Configure to your needs

Configure your bundle in the config/packages/itech_world_sulu_wiki.yaml file:

itech_world_sulu_wiki:
    highlight:
        stylesheet: "https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.10.0/styles/atom-one-dark.min.css" # Define the url of the stylesheet for theme highlight.js, 11.10.0 by default
        script: "https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js'" # Define the url of the script for highlight.js, 11.9.0 by default
        languages: ["https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/languages/php.min.js"] # Define the urls of the scripts for the languages you want to use, 11.9.0/languages/php.min.js by default
        copy_button: true # Define if you want to display the copy button, true by default
    quote:
        standard: "💬" # Define the standard quote icon
        info: "ℹ️" # Define the info quote icon
        warning: "⚠️" # Define the warning quote icon
        danger: "❗" # Define the danger quote icon
        success: "✅" # Define the success quote icon

You can find all urls in https://cdnjs.com/libraries/highlight.js By default :

• stylesheet: "https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.10.0/styles/atom-one-dark.min.css"
• script: "https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"
• languages: ["https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/languages/php.min.js"]

For the quote icons, you can use any emoji you want or add external icons, from FontAwesome for example.

Step 5: Add blocks in your xml page template

Add the following code in your xml page template:

<xi:include href="../../../vendor/itech-world/sulu-wiki-bundle/config/templates/blocks.xml" xpointer="xmlns(sulu=http://schemas.sulu.io/template/template)
                              xpointer(/sulu:properties/sulu:block[@name='wiki_blocks'])"/>

You can create and use your own block template, like the blocks.xml file.

📖 Usage

Twig implementation

Load the HIGHLIGHT scripts and stylesheet in your base twig template in the head section:

{{ it_sulu_wiki_scripts() }}

If you want to use the default front css, load it in your base twig template in the head section:

{{ it_sulu_wiki_default_css() }}

Include the blocks in your twig front template:

{% include '@ItechWorldSuluWiki/blocks/_blocks.html.twig' %}

🎨 Customization

Styling

SuluWikiBundle comes with a default styling. If you don't want to use the default css, you can create your own css file. You can find the default css file in the bundle default_css.html.twig template.

🐛 Bug and Idea

See the open issues for a list of proposed features (and known issues).

💰 Support me

You can buy me a coffee to support me this plugin is 100% free.

Buy me a coffee

👨‍💻 Contact

📘  License

This bundle is under the MIT License.