diff --git a/.editorconfig b/.editorconfig index 8c199bb..ae2ebfe 100644 --- a/.editorconfig +++ b/.editorconfig @@ -1,17 +1,9 @@ +root = true + [*] charset = utf-8 indent_style = space indent_size = 2 end_of_line = lf -insert_final_newline = true trim_trailing_whitespace = true - -[*.php] -indent_size = 2 - -[*.md,*.txt] -trim_trailing_whitespace = false -insert_final_newline = false - -[composer.json] -indent_size = 2 +insert_final_newline = true diff --git a/.gitattributes b/.gitattributes index fd39f0c..20b4efe 100644 --- a/.gitattributes +++ b/.gitattributes @@ -4,6 +4,8 @@ .gitignore export-ignore # Development files +/.vscode /src/panel export-ignore .editorconfig export-ignore +.eslint.config.mjs package.json export-ignore diff --git a/.github/ISSUE_TEMPLATE/bug.md b/.github/ISSUE_TEMPLATE/bug.md index b9c61d5..afd6020 100644 --- a/.github/ISSUE_TEMPLATE/bug.md +++ b/.github/ISSUE_TEMPLATE/bug.md @@ -8,22 +8,18 @@ assignees: 'bogdancondorachi' ## Description - ## Steps to Reproduce 1. Go to '...' 2. Click on '...' 3. See error - ## Screenshots - ## Environment: - **Browser:** [e.g. Chrome, Firefox, Safari] - **Plugin Version:** [e.g. 2.4.0] - **Kirby Version:** [e.g. 4.4.1, 4.3.8] - ## Additional Context - **Field Blueprint:** - **Field Content:** diff --git a/.github/ISSUE_TEMPLATE/feature.md b/.github/ISSUE_TEMPLATE/feature.md index 71eaa41..8143d0f 100644 --- a/.github/ISSUE_TEMPLATE/feature.md +++ b/.github/ISSUE_TEMPLATE/feature.md @@ -8,5 +8,4 @@ assignees: 'bogdancondorachi' ## Summary - ## Why is this feature needed? diff --git a/.github/workflows/update-sources.yml b/.github/workflows/update-sources.yml index 3c4b419..4f2cafd 100644 --- a/.github/workflows/update-sources.yml +++ b/.github/workflows/update-sources.yml @@ -2,7 +2,7 @@ name: Update Grammars and Themes on: schedule: - - cron: '0 23 * * 0' # Runs at 11:00 PM (UTC) every Sunday + - cron: "0 23 * * 0" # Runs at 11:00 PM (UTC) every Sunday workflow_dispatch: # Allows manual trigger jobs: @@ -18,13 +18,13 @@ jobs: - name: Set up Node uses: actions/setup-node@v4 with: - node-version: '18' + node-version: "18" # Step 3: Set up PHP and Composer - name: Set up PHP and Composer uses: shivammathur/setup-php@v2 with: - php-version: '8.2' + php-version: "8.2" tools: composer # Step 4: Check for updates to Shiki repository diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 0000000..a18f56d --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,37 @@ +{ + // Disable the default formatter, use eslint instead + "prettier.enable": false, + "editor.formatOnSave": false, + + // Auto fix + "editor.codeActionsOnSave": { + "source.fixAll.eslint": "explicit", + "source.organizeImports": "never" + }, + + // Silent the stylistic rules in you IDE, but still auto fix them + "eslint.rules.customizations": [ + { "rule": "style/*", "severity": "off", "fixable": true }, + { "rule": "format/*", "severity": "off", "fixable": true }, + { "rule": "*-indent", "severity": "off", "fixable": true }, + { "rule": "*-spacing", "severity": "off", "fixable": true }, + { "rule": "*-spaces", "severity": "off", "fixable": true }, + { "rule": "*-order", "severity": "off", "fixable": true }, + { "rule": "*-dangle", "severity": "off", "fixable": true }, + { "rule": "*-newline", "severity": "off", "fixable": true }, + { "rule": "*quotes", "severity": "off", "fixable": true }, + { "rule": "*semi", "severity": "off", "fixable": true } + ], + + // Enable eslint for all supported languages + "eslint.validate": [ + "javascript", + "typescript", + "vue", + "markdown", + "json", + "yaml", + "css", + "scss" + ] +} diff --git a/README.md b/README.md index 149d963..8ce00c8 100644 --- a/README.md +++ b/README.md @@ -1,189 +1,191 @@ -![Kirby Code Highlighter](.github/preview-v2.png) - -![Version](https://img.shields.io/packagist/v/bogdancondorachi/kirby-code-highlighter?style=for-the-badge&label=Version&labelColor=3d444d&color=096BDE) -![Dependency](https://img.shields.io/badge/kirby-%5E4.0-F4E162?style=for-the-badge&labelColor=3d444d) -![Dependency](https://img.shields.io/packagist/dependency-v/bogdancondorachi/kirby-code-highlighter/php?style=for-the-badge&label=PHP&labelColor=3d444d&color=7C72FF) - -> [!NOTE] -> A server-side syntax highlighter plugin for Kirby CMS, powered by [Phiki](https://github.com/phikiphp/phiki), that uses TextMate grammars and VS Code themes to generate syntax-highlighted code within Kirby's code block and KirbyText. Also with [Shiki](https://shiki.style) implementation for live code block preview inside the Kirby Panel! - -## ✨ Key Features -- ⚡ **Performance:** Fast and powerful syntax highlighting. -- 🚀 **Integration:** Works with Kirby's code block and KirbyText. -- 👁️ **Panel Preview:** Live code preview in the Kirby Panel. -- 🌍 **Languages:** Over 200+ supported languages. -- 🎨 **Themes:** Choose from 50+ VS Code themes. -- 🔐 **Base64 Support:** Handles base64-encoded content. - -## 📦 Installation - -### Composer -```bash -composer require bogdancondorachi/kirby-code-highlighter -``` - -### Git Submodule -```bash -git submodule add https://github.com/bogdancondorachi/kirby-code-highlighter.git site/plugins/code-highlighter -``` - -### Manual -[Download the plugin](https://api.github.com/repos/bogdancondorachi/kirby-code-highlighter/zipball) and extract it to: `/site/plugins/code-highlighter` - -## ⚙️ Usage - -### Kirby Blocks Field -This plugin overwrites the Kirby's native [code block](https://getkirby.com/docs/reference/panel/blocks/code), the output will be highlighted automatically. - -```yaml -blocks: - type: blocks - fieldsets: - - code -``` -*By default, the code block uses the [default theme](#default-theme). A theme selector is provided for applying different themes to individual blocks. You can also [customize](#customize-languages-and-themes-selection) the available languages and themes.* - -### KirbyText -Embed syntax-highlighted code directly in KirbyText fields: - -```` -```php -echo "Hello, world!"; -``` -```` - -Or use the plugin's custom KirbyTag with support for base64-encoded content: - -``` -(code: ZWNobyAiSGVsbG8sIHdvcmxkISI7 lang: php theme: github-light) -``` -*By default, the code tag applies the [default theme](#default-theme). However, you can use the theme attribute to specify a different theme for individual code blocks.* - -## 🔧 Configuration -All options goes into your `config.php` file: - -### Default Theme -Set the default theme: - -```php -'bogdancondorachi.code-highlighter' => [ - 'theme' => 'github-dark-default', -], -``` -*Check out the [supported](#explore-supported-languages-and-themes) themes* - -### Default Language -Set the default language: - -```php -'bogdancondorachi.code-highlighter' => [ - 'language' => 'text', -], -``` -*Check out the [supported](#explore-supported-languages-and-themes) languages* - -### Light/Dark Dual Themes -If you use light/dark mode on your website, you can set a default theme for each individual mode: - -```php -'bogdancondorachi.code-highlighter' => [ - 'themes' => [ - 'light' => 'github-light', - 'dark' => 'github-dark' - ] -], -``` - -In this case, you'll need to add one of the CSS snippet's to make it reactive to your site's theme: - -#### Query-based Dark Mode -```css -@media (prefers-color-scheme: light) { - .phiki, - .phiki span { - color: var(--phiki-light); - background-color: var(--phiki-light-bg); - } -} - -@media (prefers-color-scheme: dark) { - .phiki, - .phiki span { - color: var(--phiki-dark); - background-color: var(--phiki-dark-bg); - } -} -``` - -#### Class-based Dark Mode -```css -html.light .phiki, -html.light .phiki span { - color: var(--phiki-light); - background-color: var(--phiki-light-bg); -} - -html.dark .phiki, -html.dark .phiki span { - color: var(--phiki-dark); - background-color: var(--phiki-dark-bg); -} -``` - -### Line Numbering -Enable line numbers in your rendered code blocks: - -```php -'bogdancondorachi.code-highlighter' => [ - 'gutter' => true, -], -``` - -### Customize Languages and Themes Selection -Customize the languages and themes options available in Kirby’s code block: - -```php -'bogdancondorachi.code-highlighter' => [ - 'block.languages' => [ - 'css' => 'CSS', - 'php' => 'PHP', - 'yml' => 'Yaml', - ], - 'block.themes' => [ - 'github-dark' => 'GitHub Dark', - 'github-light' => 'GitHub Light', - 'vitesse-dark' => 'Vitesse Dark', - ], -], -``` - -#### Explore Supported Languages and Themes -- [Supported Languages](https://shiki.matsu.io/languages) -- [Supported Themes](https://shiki.matsu.io/themes) - -### Front-end Block Styling -Further customize the block style to match your site's design. Here's an example: - -```css -.phiki { - margin: 2rem 0; - padding: 1rem; - font-size: .875rem; - line-height: 1.5rem; - overflow: auto; - border-radius: .25rem; - box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06); -} - -.phiki .line-number { - margin-right: 1rem; - text-align: right; -} -``` - -## 🙏 Credits -- [Ryan Chandler](https://github.com/ryangjchandler) for porting Shiki to PHP via [Phiki](https://github.com/phikiphp/phiki), which powers this plugin. -- [Johann Schopplich](https://github.com/johannschopplich) for his [Kirby Highlighter](https://github.com/johannschopplich/kirby-highlighter), which served as base for this project. - -## 📜 License -[MIT License](./LICENSE) Copyright © 2024 [Bogdan Condorachi](https://github.com/bogdancondorachi) +![Kirby Code Highlighter](.github/preview-v2.png) + +![Version](https://img.shields.io/packagist/v/bogdancondorachi/kirby-code-highlighter?style=for-the-badge&label=Version&labelColor=3d444d&color=096BDE) +![Dependency](https://img.shields.io/badge/kirby-%5E4.0-F4E162?style=for-the-badge&labelColor=3d444d) +![Dependency](https://img.shields.io/packagist/dependency-v/bogdancondorachi/kirby-code-highlighter/php?style=for-the-badge&label=PHP&labelColor=3d444d&color=7C72FF) + +> [!NOTE] +> A server-side syntax highlighter plugin for Kirby CMS, powered by [Phiki](https://github.com/phikiphp/phiki), that uses TextMate grammars and VS Code themes to generate syntax-highlighted code within Kirby's code block and KirbyText. Also with [Shiki](https://shiki.style) implementation for live code block preview inside the Kirby Panel! + +## ✨ Key Features +- ⚡ **Performance:** Fast and powerful syntax highlighting. +- 🚀 **Integration:** Works with Kirby's code block and KirbyText. +- 👁️ **Panel Preview:** Live code preview in the Kirby Panel. +- 🌍 **Languages:** Over 200+ supported languages. +- 🎨 **Themes:** Choose from 50+ VS Code themes. +- 🔐 **Base64 Support:** Handles base64-encoded content. + +## 📦 Installation + +### Composer +```bash +composer require bogdancondorachi/kirby-code-highlighter +``` + +### Git Submodule +```bash +git submodule add https://github.com/bogdancondorachi/kirby-code-highlighter.git site/plugins/code-highlighter +``` + +### Manual +[Download the plugin](https://api.github.com/repos/bogdancondorachi/kirby-code-highlighter/zipball) and extract it to: `/site/plugins/code-highlighter` + +## ⚙️ Usage + +### Kirby Blocks Field +This plugin overwrites the Kirby's native [code block](https://getkirby.com/docs/reference/panel/blocks/code), the output will be highlighted automatically. + +```yaml +blocks: + type: blocks + fieldsets: + - code +``` +*By default, the code block uses the [default theme](#default-theme). A theme selector is provided for applying different themes to individual blocks. You can also [customize](#customize-languages-and-themes-selection) the available languages and themes.* + +### KirbyText +Embed syntax-highlighted code directly in KirbyText fields: + +```` +```php +echo "Hello, world!"; +``` +```` + +Or use the plugin's custom KirbyTag with support for base64-encoded content: + +``` +(code: ZWNobyAiSGVsbG8sIHdvcmxkISI7 lang: php theme: github-light) +``` +*By default, the code tag applies the [default theme](#default-theme). However, you can use the theme attribute to specify a different theme for individual code blocks.* + +## 🔧 Configuration +All options goes into your `config.php` file: + +### Default Theme +Set the default theme: + +```php +'bogdancondorachi.code-highlighter' => [ + 'theme' => 'github-dark-default', +], +``` +*Check out the [supported](#explore-supported-languages-and-themes) themes* + +### Default Language +Set the default language: + +```php +'bogdancondorachi.code-highlighter' => [ + 'language' => 'text', +], +``` +*Check out the [supported](#explore-supported-languages-and-themes) languages* + +### Light/Dark Dual Themes +If you use light/dark mode on your website, you can set a default theme for each individual mode: + +```php +'bogdancondorachi.code-highlighter' => [ + 'themes' => [ + 'light' => 'github-light', + 'dark' => 'github-dark' + ] +], +``` + +In this case, you'll need to add one of the CSS snippet's to make it reactive to your site's theme: + +#### Query-based Dark Mode +```css +@media (prefers-color-scheme: light) { + .phiki, + .phiki span { + color: var(--phiki-light); + background-color: var(--phiki-light-bg); + } +} + +@media (prefers-color-scheme: dark) { + .phiki, + .phiki span { + color: var(--phiki-dark); + background-color: var(--phiki-dark-bg); + } +} +``` + +#### Class-based Dark Mode +```css +html.light .phiki, +html.light .phiki span { + color: var(--phiki-light); + background-color: var(--phiki-light-bg); +} + +html.dark .phiki, +html.dark .phiki span { + color: var(--phiki-dark); + background-color: var(--phiki-dark-bg); +} +``` + +### Line Numbering +Enable line numbers in your rendered code blocks: + +```php +'bogdancondorachi.code-highlighter' => [ + 'gutter' => true, +], +``` + +### Customize Languages and Themes Selection +Customize the languages and themes options available in Kirby’s code block: + +```php +'bogdancondorachi.code-highlighter' => [ + 'block.languages' => [ + 'css' => 'CSS', + 'php' => 'PHP', + 'yml' => 'Yaml', + ], + 'block.themes' => [ + 'github-dark' => 'GitHub Dark', + 'github-light' => 'GitHub Light', + 'vitesse-dark' => 'Vitesse Dark', + ], +], +``` + +#### Explore Supported Languages and Themes +- [Supported Languages](https://shiki.matsu.io/languages) +- [Supported Themes](https://shiki.matsu.io/themes) + +### Front-end Block Styling +Further customize the block style to match your site's design. Here's an example: + +```css +.phiki { + margin: 2rem 0; + padding: 1rem; + font-size: 0.875rem; + line-height: 1.5rem; + overflow: auto; + border-radius: 0.25rem; + box-shadow: + 0 1px 3px 0 rgba(0, 0, 0, 0.1), + 0 1px 2px 0 rgba(0, 0, 0, 0.06); +} + +.phiki .line-number { + margin-right: 1rem; + text-align: right; +} +``` + +## 🙏 Credits +- [Ryan Chandler](https://github.com/ryangjchandler) for porting Shiki to PHP via [Phiki](https://github.com/phikiphp/phiki), which powers this plugin. +- [Johann Schopplich](https://github.com/johannschopplich) for his [Kirby Highlighter](https://github.com/johannschopplich/kirby-highlighter), which served as base for this project. + +## 📜 License +[MIT License](./LICENSE) Copyright © 2024 [Bogdan Condorachi](https://github.com/bogdancondorachi) diff --git a/eslint.config.mjs b/eslint.config.mjs new file mode 100644 index 0000000..5958d8c --- /dev/null +++ b/eslint.config.mjs @@ -0,0 +1,39 @@ +import antfu from "@antfu/eslint-config"; + +export default antfu( + { + stylistic: { + indent: 2, + semi: true, + quotes: "double", + }, + formatters: { + css: true, + }, + vue: { + overrides: { + "vue/attributes-order": "error", + "vue/block-order": ["error", { + order: ["template", "script", "style"], + }], + "vue/component-definition-name-casing": "off", + "vue/multi-word-component-names": "off", + "vue/prefer-template": "off", + "vue/require-default-prop": "off", + }, + // https://github.com/antfu/eslint-config/issues/367 + sfcBlocks: { + blocks: { + styles: false, + }, + }, + vueVersion: 2, + }, + ignores: ["**/vendor/**", "index.css", "index.js"], + }, + { + rules: { + "style/brace-style": ["warn", "1tbs", { allowSingleLine: true }], + }, + }, +); diff --git a/package.json b/package.json index 5286a20..af9f332 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,15 @@ { + "name": "kirby-code-highlighter", + "type": "module", + "private": true, "scripts": { "dev": "npx -y kirbyup serve src/panel/index.js", - "build": "npx -y kirbyup src/panel/index.js" - } + "build": "npx -y kirbyup src/panel/index.js", + "lint": "eslint .", + "lint:fix": "eslint . --fix" + }, + "devDependencies": { + "@antfu/eslint-config": "^3.13.0" + }, + "browserslist": "> 2%" } diff --git a/src/panel/CodeHighlighterBlock.vue b/src/panel/CodeHighlighterBlock.vue index b2d1d77..bee3046 100644 --- a/src/panel/CodeHighlighterBlock.vue +++ b/src/panel/CodeHighlighterBlock.vue @@ -11,7 +11,7 @@ ref="language" :multiple="false" :options="languages" - :search="{ placeholder: 'Select a language...'}" + :search="{ placeholder: 'Select a language...' }" :value="content.language" @input="update({ language: $event })" /> @@ -24,7 +24,7 @@ ref="theme" :multiple="false" :options="themes" - :search="{ placeholder: 'Select a theme...'}" + :search="{ placeholder: 'Select a theme...' }" :value="content.theme" @input="update({ theme: $event })" /> @@ -39,10 +39,9 @@
- + option.value === value); + const option = options.find(option => option.value === value); return option ? option.text : value; }, @@ -163,10 +168,6 @@ export default { }); }, }, - async mounted() { - await this.fetchDefaultOptions(); - await this.initHighlighter(); - } }; diff --git a/src/panel/index.js b/src/panel/index.js index d83b99e..dfd28c0 100644 --- a/src/panel/index.js +++ b/src/panel/index.js @@ -1,7 +1,7 @@ -import CodeHighlighterBlock from "./CodeHighlighterBlock.vue" +import CodeHighlighterBlock from "./CodeHighlighterBlock.vue"; -panel.plugin('bogdancondorachi/code-highlighter', { +window.panel.plugin("bogdancondorachi/code-highlighter", { blocks: { - codeHighlighter: CodeHighlighterBlock - } -}) + codeHighlighter: CodeHighlighterBlock, + }, +});