Merge pull request #7 from parallax/2.x

2.x

Author: luke-parallax

CHANGELOG.md

@@ -2,6 +2,14 @@
 
 All notable changes to `filament-syntax-entry` will be documented in this file.
 
+## 2.0.0 - March 26, 2024
+
+- Syntax highlighting now handled server-side using [tempestphp/highlight](https://github.com/tempestphp/highlight)
+- Highlight.js theme support dropped
+- Added documentation on how to create custom themes
+- Added support for Laravel 11
+- PHP 8.3 required for server-side highlighting
+
 ## 1.0.1 - Feb 2, 2024
 
 - General codebase housekeeping

README.md

@@ -5,7 +5,7 @@
 [![Total Downloads](https://img.shields.io/packagist/dt/parallax/filament-syntax-entry?style=flat-square)](https://packagist.org/packages/parallax/filament-syntax-entry)
 ![Stars](https://img.shields.io/github/stars/parallax/filament-syntax-entry?style=flat-square)
 
-Add a Filament [infolist entry](https://filamentphp.com/docs/3.x/infolists/entries/getting-started) for themeable syntax highlighting using [highlight.js](https://highlightjs.org).
+Add a Filament [infolist entry](https://filamentphp.com/docs/3.x/infolists/entries/getting-started) for themeable server-side syntax highlighting using [tempestphp/highlight](https://github.com/tempestphp/highlight).
 
 <img class="filament-hidden" src="https://github.com/parallax/filament-syntax-entry/raw/main/assets/filament-syntax-entry.jpg"/>
 
@@ -23,6 +23,14 @@ Optionally, you can publish the views using
 php artisan vendor:publish --tag="filament-syntax-entry-views"
 ```
 
+## Upgrading from 1.x
+
+There are a couple of important changes to be aware of when upgrading to version 2.x:
+
+- PHP 8.3 is required for server-side syntax highlighting
+- Highlight.js is no longer supported
+- Theme selection has been replaced with the ability to create custom themes
+
 ## Quickstart
 
 ### Add the [Infolist entry](https://filamentphp.com/docs/3.x/infolists/entries/getting-started)
@@ -50,116 +58,43 @@ class ProductResource extends Resource
 
 ### Setting the language
 
-Automatic language detection is enabled by default so this isn't required, but if you would like to define the language used you may use the `language()` method:
+The default language value is set to `json`. To override this value you may use the `language()` method:
 
 ```php
 SyntaxEntry::make('metadata')
  ->language('json');
 ```
 
-To keep the bundle size down only the following languages are currently available:
+The following languages are currently available:
 
-- `bash`
+- `blade`
 - `css`
-- `dockerfile`
-- `graphql`
+- `gdscript`
+- `html`
 - `javascript`
 - `json`
-- `markdown`
 - `php`
-- `scss`
-- `shell`
 - `sql`
-- `typescript`
+- `twig`
 - `xml`
 - `yaml`
 
-### Setting the theme
+### Creating a custom theme
 
-You may override the default themes using the `theme()` and/or `darkModeTheme()` methods:
+You may override the default theme by using the `theme()` method:
 
 ```php
 SyntaxEntry::make('metadata')
- ->theme('filament')
- ->darkModeTheme('filament-dark');
+ ->theme('smudge');
+```
+
+This will wrap the syntax component with a custom class like so:
+
+```
+syntax-entry-theme-smudge
 ```
 
-The following themes are currently available:
-
-- `a11y-dark`
-- `a11y-light`
-- `agate`
-- `an-old-hope`
-- `androidstudio`
-- `arduino-light`
-- `arta`
-- `ascetic`
-- `atom-one-dark-reasonable`
-- `atom-one-dark`
-- `atom-one-light`
-- `brown-paper`
-- `codepen-embed`
-- `color-brewer`
-- `dark`
-- `default`
-- `devibeans`
-- `docco`
-- `far`
-- `felipec`
-- `filament-dark` (default dark mode theme)
-- `filament` (default theme)
-- `foundation`
-- `github-dark-dimmed`
-- `github-dark`
-- `github`
-- `gml`
-- `googlecode`
-- `gradient-dark`
-- `gradient-light`
-- `grayscale`
-- `hybrid`
-- `idea`
-- `intellij-light`
-- `ir-black`
-- `isbl-editor-dark`
-- `isbl-editor-light`
-- `kimbie-dark`
-- `kimbie-light`
-- `lightfair`
-- `lioshi`
-- `magula`
-- `mono-blue`
-- `monokai-sublime`
-- `monokai`
-- `night-owl`
-- `nnfx-dark`
-- `nnfx-light`
-- `nord`
-- `obsidian`
-- `panda-syntax-dark`
-- `panda-syntax-light`
-- `paraiso-dark`
-- `paraiso-light`
-- `pojoaque`
-- `purebasic`
-- `qtcreator-dark`
-- `qtcreator-light`
-- `rainbow`
-- `routeros`
-- `school-book`
-- `shades-of-purple`
-- `srcery`
-- `stackoverflow-dark`
-- `stackoverflow-light`
-- `sunburst`
-- `tokyo-night-dark`
-- `tokyo-night-light`
-- `tomorrow-night-blue`
-- `tomorrow-night-bright`
-- `vs`
-- `vs2015`
-- `xcode`
-- `xt256`
+The final step is to follow the [tempestphp/highlight](https://github.com/tempestphp/highlight) documentation on how to create your own theme, and use this in combination with [Filament themes](https://filamentphp.com/docs/3.x/panels/themes#creating-a-custom-theme).
 
 ## Changelog
 

bin/build.js

@@ -20,14 +20,15 @@
  }
  ],
  "require": {
- "php": "^8.1",
+ "php": "^8.3",
  "filament/filament": "^3.0",
+ "illuminate/contracts": "^10.0|^11.0",
  "spatie/laravel-package-tools": "^1.15.0",
- "illuminate/contracts": "^10.0"
+ "tempest/highlight": "dev-main"
  },
  "require-dev": {
  "laravel/pint": "^1.0",
- "nunomaduro/collision": "^7.9",
+ "nunomaduro/collision": "^7.9|^8.1",
  "orchestra/testbench": "^8.0",
  "pestphp/pest": "^2.0",
  "pestphp/pest-plugin-arch": "^2.0",

composer.json

@@ -2,9 +2,7 @@
  "private": true,
  "type": "module",
  "scripts": {
- "dev:scripts": "node bin/build.js --dev",
  "dev:styles": "npx tailwindcss -i resources/css/index.css -o resources/dist/filament-syntax-entry.css --postcss --watch",
- "build:scripts": "node bin/build.js",
  "build:styles": "npx tailwindcss -i resources/css/index.css -o resources/dist/filament-syntax-entry.css --postcss --minify && yarn purge",
  "purge": "filament-purge -i resources/dist/filament-syntax-entry.css -o resources/dist/filament-syntax-entry.css -v 3.x",
  "dev": "npm-run-all --parallel dev:*",
@@ -24,8 +22,5 @@
  "prettier": "^2.7.1",
  "prettier-plugin-tailwindcss": "^0.1.13",
  "tailwindcss": "^3.3.3"
- },
- "dependencies": {
- "highlight.js": "^11.9.0"
  }
 }

package.json

@@ -1,95 +1,44 @@
-@import '../../vendor/filament/filament/resources/css/theme.css';
-@import './themes/a11y-dark.css';
-@import './themes/a11y-light.css';
-@import './themes/agate.css';
-@import './themes/an-old-hope.css';
-@import './themes/androidstudio.css';
-@import './themes/arduino-light.css';
-@import './themes/arta.css';
-@import './themes/ascetic.css';
-@import './themes/atom-one-dark-reasonable.css';
-@import './themes/atom-one-dark.css';
-@import './themes/atom-one-light.css';
-@import './themes/brown-paper.css';
-@import './themes/codepen-embed.css';
-@import './themes/color-brewer.css';
-@import './themes/dark.css';
-@import './themes/default.css';
-@import './themes/devibeans.css';
-@import './themes/docco.css';
-@import './themes/far.css';
-@import './themes/felipec.css';
-@import './themes/filament-dark.css';
-@import './themes/filament.css';
-@import './themes/foundation.css';
-@import './themes/github-dark-dimmed.css';
-@import './themes/github-dark.css';
-@import './themes/github.css';
-@import './themes/gml.css';
-@import './themes/googlecode.css';
-@import './themes/gradient-dark.css';
-@import './themes/gradient-light.css';
-@import './themes/grayscale.css';
-@import './themes/hybrid.css';
-@import './themes/idea.css';
-@import './themes/intellij-light.css';
-@import './themes/ir-black.css';
-@import './themes/isbl-editor-dark.css';
-@import './themes/isbl-editor-light.css';
-@import './themes/kimbie-dark.css';
-@import './themes/kimbie-light.css';
-@import './themes/lightfair.css';
-@import './themes/lioshi.css';
-@import './themes/magula.css';
-@import './themes/mono-blue.css';
-@import './themes/monokai-sublime.css';
-@import './themes/monokai.css';
-@import './themes/night-owl.css';
-@import './themes/nnfx-dark.css';
-@import './themes/nnfx-light.css';
-@import './themes/nord.css';
-@import './themes/obsidian.css';
-@import './themes/panda-syntax-dark.css';
-@import './themes/panda-syntax-light.css';
-@import './themes/paraiso-dark.css';
-@import './themes/paraiso-light.css';
-@import './themes/pojoaque.css';
-@import './themes/purebasic.css';
-@import './themes/qtcreator-dark.css';
-@import './themes/qtcreator-light.css';
-@import './themes/rainbow.css';
-@import './themes/routeros.css';
-@import './themes/school-book.css';
-@import './themes/shades-of-purple.css';
-@import './themes/srcery.css';
-@import './themes/stackoverflow-dark.css';
-@import './themes/stackoverflow-light.css';
-@import './themes/sunburst.css';
-@import './themes/tokyo-night-dark.css';
-@import './themes/tokyo-night-light.css';
-@import './themes/tomorrow-night-blue.css';
-@import './themes/tomorrow-night-bright.css';
-@import './themes/vs.css';
-@import './themes/vs2015.css';
-@import './themes/xcode.css';
-@import './themes/xt256.css';
-
-.filament-syntax-entry-component .grid {
- @apply block;
+.syntax-entry-component .grid {
+ @apply grid-cols-1;
 }
 
-.filament-syntax-entry {
- @apply font-mono rounded-xl overflow-hidden shadow-sm ring-1;
+.syntax-entry-theme-filament {
+ @apply p-6 bg-gray-50 dark:bg-gray-950 font-mono text-sm text-gray-950 dark:text-white leading-6 rounded-xl shadow-sm ring-1 ring-gray-950/5 dark:ring-white/10;
 
- .hljs {
- @apply block p-6 overflow-x-scroll;
+ .hl-keyword {
+ @apply text-blue-600;
+ }
+ 
+ .hl-property,
+ .hl-value,
+ .hl-variable {
+ @apply text-gray-950 dark:text-white;
+ }
+ 
+ .hl-type {
+ @apply text-red-600;
+ }
+ 
+ .hl-generic {
+ @apply text-purple-600;
+ }
+ 
+ .hl-comment span,
+ .hl-comment {
+ @apply text-gray-600;
+ }
+ 
+ .hl-blur {
+ @apply blur-sm;
+ }
+ 
+ .hl-strong {
+ @apply font-bold;
+ }
+ 
+ .hl-attribute,
+ .hl-em {
+ @apply italic;
  }
 }
 
-:is(.dark .filament-syntax-entry) {
- @apply ring-white/10;
-}
-
-:not(.dark .filament-syntax-entry) {
- @apply ring-gray-950/5;
-}