Skip to content

Commit

Permalink
Merge pull request #7 from parallax/2.x
Browse files Browse the repository at this point in the history
2.x
  • Loading branch information
luke-parallax authored Mar 26, 2024
2 parents c7e8220 + 94d79a8 commit ac049d2
Show file tree
Hide file tree
Showing 88 changed files with 501 additions and 6,850 deletions.
8 changes: 8 additions & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
115 changes: 25 additions & 90 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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"/>

Expand All @@ -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)
Expand Down Expand Up @@ -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

Expand Down
50 changes: 0 additions & 50 deletions bin/build.js

This file was deleted.

7 changes: 4 additions & 3 deletions composer.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
5 changes: 0 additions & 5 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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:*",
Expand All @@ -24,8 +22,5 @@
"prettier": "^2.7.1",
"prettier-plugin-tailwindcss": "^0.1.13",
"tailwindcss": "^3.3.3"
},
"dependencies": {
"highlight.js": "^11.9.0"
}
}
127 changes: 38 additions & 89 deletions resources/css/index.css
Original file line number Diff line number Diff line change
@@ -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;
}
Loading

0 comments on commit ac049d2

Please sign in to comment.