add additionnalCss
This commit is contained in:
isUnknown
parent
08c2f57d6e
commit
b4217f80d4
21 changed files with 7151 additions and 2 deletions
|
|
@ -27,7 +27,8 @@
|
||||||
"symfony/http-client": "^7.2",
|
"symfony/http-client": "^7.2",
|
||||||
"nyholm/psr7": "^1.8",
|
"nyholm/psr7": "^1.8",
|
||||||
"php-http/guzzle7-adapter": "^1.1",
|
"php-http/guzzle7-adapter": "^1.1",
|
||||||
"mailersend/mailersend": "^0.28.0"
|
"mailersend/mailersend": "^0.28.0",
|
||||||
|
"sylvainjule/code-editor": "^1.0"
|
||||||
},
|
},
|
||||||
"config": {
|
"config": {
|
||||||
"allow-plugins": {
|
"allow-plugins": {
|
||||||
|
|
|
||||||
40
composer.lock
generated
40
composer.lock
generated
|
|
@ -4,7 +4,7 @@
|
||||||
"Read more about it at https://getcomposer.org/doc/01-basic-usage.md#installing-dependencies",
|
"Read more about it at https://getcomposer.org/doc/01-basic-usage.md#installing-dependencies",
|
||||||
"This file is @generated automatically"
|
"This file is @generated automatically"
|
||||||
],
|
],
|
||||||
"content-hash": "b1bd6ef89760d4203a9c316fa84c6b43",
|
"content-hash": "5dfa3f8a0e0c08424cf5148eb08e1ab9",
|
||||||
"packages": [
|
"packages": [
|
||||||
{
|
{
|
||||||
"name": "beberlei/assert",
|
"name": "beberlei/assert",
|
||||||
|
|
@ -2220,6 +2220,44 @@
|
||||||
},
|
},
|
||||||
"time": "2019-03-08T08:55:37+00:00"
|
"time": "2019-03-08T08:55:37+00:00"
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
"name": "sylvainjule/code-editor",
|
||||||
|
"version": "1.0.3",
|
||||||
|
"source": {
|
||||||
|
"type": "git",
|
||||||
|
"url": "https://github.com/sylvainjule/kirby-code-editor.git",
|
||||||
|
"reference": "9795565acbf64f92c46423ed4cb5c94bb8a738ea"
|
||||||
|
},
|
||||||
|
"dist": {
|
||||||
|
"type": "zip",
|
||||||
|
"url": "https://api.github.com/repos/sylvainjule/kirby-code-editor/zipball/9795565acbf64f92c46423ed4cb5c94bb8a738ea",
|
||||||
|
"reference": "9795565acbf64f92c46423ed4cb5c94bb8a738ea",
|
||||||
|
"shasum": ""
|
||||||
|
},
|
||||||
|
"require": {
|
||||||
|
"getkirby/composer-installer": "^1.1"
|
||||||
|
},
|
||||||
|
"type": "kirby-plugin",
|
||||||
|
"extra": {
|
||||||
|
"installer-name": "code-editor"
|
||||||
|
},
|
||||||
|
"notification-url": "https://packagist.org/downloads/",
|
||||||
|
"license": [
|
||||||
|
"MIT"
|
||||||
|
],
|
||||||
|
"authors": [
|
||||||
|
{
|
||||||
|
"name": "Sylvain Julé",
|
||||||
|
"email": "contact@sylvain-jule.fr"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"description": "Code editor field for Kirby 3 and 4",
|
||||||
|
"support": {
|
||||||
|
"issues": "https://github.com/sylvainjule/kirby-code-editor/issues",
|
||||||
|
"source": "https://github.com/sylvainjule/kirby-code-editor/tree/1.0.3"
|
||||||
|
},
|
||||||
|
"time": "2024-03-06T18:19:23+00:00"
|
||||||
|
},
|
||||||
{
|
{
|
||||||
"name": "symfony/deprecation-contracts",
|
"name": "symfony/deprecation-contracts",
|
||||||
"version": "v3.5.1",
|
"version": "v3.5.1",
|
||||||
|
|
|
||||||
|
|
@ -50,5 +50,10 @@ tabs:
|
||||||
width: 1/3
|
width: 1/3
|
||||||
help: |
|
help: |
|
||||||
Actif : le code HTML du corps sera exécuté.
|
Actif : le code HTML du corps sera exécuté.
|
||||||
|
additionnalCss:
|
||||||
|
label: CSS additionnel
|
||||||
|
type: code-editor
|
||||||
|
help: Le point de rupture mobile / ordinateur se situe à 640px.
|
||||||
|
width: 2/3
|
||||||
|
|
||||||
metaTab: tabs/meta
|
metaTab: tabs/meta
|
||||||
|
|
|
||||||
12
site/plugins/code-editor/.editorconfig
Normal file
12
site/plugins/code-editor/.editorconfig
Normal file
|
|
@ -0,0 +1,12 @@
|
||||||
|
root = true
|
||||||
|
|
||||||
|
[*]
|
||||||
|
charset = utf-8
|
||||||
|
indent_style = space
|
||||||
|
indent_size = 2
|
||||||
|
end_of_line = lf
|
||||||
|
trim_trailing_whitespace = true
|
||||||
|
insert_final_newline = true
|
||||||
|
|
||||||
|
[*.php]
|
||||||
|
indent_size = 4
|
||||||
15
site/plugins/code-editor/.eslintrc.json
Normal file
15
site/plugins/code-editor/.eslintrc.json
Normal file
|
|
@ -0,0 +1,15 @@
|
||||||
|
{
|
||||||
|
"env": {
|
||||||
|
"browser": true,
|
||||||
|
"es2021": true
|
||||||
|
},
|
||||||
|
"extends": [
|
||||||
|
"eslint:recommended",
|
||||||
|
"plugin:vue/recommended",
|
||||||
|
"prettier"
|
||||||
|
],
|
||||||
|
"parserOptions": {
|
||||||
|
"ecmaVersion": 12,
|
||||||
|
"sourceType": "module"
|
||||||
|
}
|
||||||
|
}
|
||||||
2
site/plugins/code-editor/.gitignore
vendored
Normal file
2
site/plugins/code-editor/.gitignore
vendored
Normal file
|
|
@ -0,0 +1,2 @@
|
||||||
|
.DS_Store
|
||||||
|
node_modules
|
||||||
21
site/plugins/code-editor/LICENSE
Normal file
21
site/plugins/code-editor/LICENSE
Normal file
|
|
@ -0,0 +1,21 @@
|
||||||
|
MIT License
|
||||||
|
|
||||||
|
Copyright (c) 2021 Sylvain Julé
|
||||||
|
|
||||||
|
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||||
|
of this software and associated documentation files (the "Software"), to deal
|
||||||
|
in the Software without restriction, including without limitation the rights
|
||||||
|
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||||
|
copies of the Software, and to permit persons to whom the Software is
|
||||||
|
furnished to do so, subject to the following conditions:
|
||||||
|
|
||||||
|
The above copyright notice and this permission notice shall be included in all
|
||||||
|
copies or substantial portions of the Software.
|
||||||
|
|
||||||
|
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||||
|
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||||
|
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||||
|
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||||
|
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||||
|
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
||||||
|
SOFTWARE.
|
||||||
111
site/plugins/code-editor/README.md
Normal file
111
site/plugins/code-editor/README.md
Normal file
|
|
@ -0,0 +1,111 @@
|
||||||
|
# Kirby – Code editor
|
||||||
|
|
||||||
|
Code editor field for Kirby 3 and 4.
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<br/>
|
||||||
|
|
||||||
|
## Overview
|
||||||
|
|
||||||
|
> This plugin is completely free and published under the MIT license. However, if you are using it in a commercial project and want to help me keep up with maintenance, please consider [making a donation of your choice](https://paypal.me/sylvainjl) or purchasing your license(s) through [my affiliate link](https://a.paddle.com/v2/click/1129/36369?link=1170).
|
||||||
|
|
||||||
|
- [1. Installation](#1-installation)
|
||||||
|
- [2. Setup](#2-setup)
|
||||||
|
- [3. Options](#3-options)
|
||||||
|
- [4. Available languages](#4-available-languages)
|
||||||
|
- [5. License](#5-license)
|
||||||
|
- [6. Credits](#6-credits)
|
||||||
|
|
||||||
|
<br/>
|
||||||
|
|
||||||
|
## 1. Installation
|
||||||
|
|
||||||
|
Download and copy this repository to ```/site/plugins/code-editor```
|
||||||
|
|
||||||
|
Alternatively, you can install it with composer: ```composer require sylvainjule/code-editor```
|
||||||
|
|
||||||
|
<br/>
|
||||||
|
|
||||||
|
## 2. Setup
|
||||||
|
|
||||||
|
This field adds a code editor in the panel:
|
||||||
|
|
||||||
|
```yaml
|
||||||
|
editor:
|
||||||
|
label: My code editor
|
||||||
|
type: code-editor
|
||||||
|
```
|
||||||
|
|
||||||
|
<br/>
|
||||||
|
|
||||||
|
## 3. Options
|
||||||
|
|
||||||
|
| Name | Type | Default | Options | Description |
|
||||||
|
| -------------------- | ------------------ | ------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------ |
|
||||||
|
| language | `String` | `'css'` | - | Syntax mode of the editor. See below for available languages |
|
||||||
|
| size | `String` | `'small'` | - | Min height of the editor. `small / medium / large / huge` |
|
||||||
|
| lineNumbers | `Boolean` | `true` | - | Whether to show line numbers. |
|
||||||
|
| tabSize | `number` | `4` | - | The number of characters to insert when pressing tab key. |
|
||||||
|
| insertSpaces | `boolean` | `true` | - | Whether to use spaces for indentation. If you set it to `false`, you might also want to set `tabSize` to `1` |
|
||||||
|
| ignoreTabKey | `boolean` | `false` | - | Whether the editor should ignore tab key presses so that keyboard users can tab past the editor. Users can toggle this behaviour using `Ctrl+Shift+M` (Mac) / `Ctrl+M` manually when this is `false`. |
|
||||||
|
|
||||||
|
|
||||||
|
Note that you can make the default height any height you want with some [custom panel CSS](https://getkirby.com/docs/reference/system/options/panel#custom-panel-css). First, set the `size` option to any string you'd like:
|
||||||
|
|
||||||
|
```yaml
|
||||||
|
size: custom-size
|
||||||
|
```
|
||||||
|
|
||||||
|
Then in your `panel.css`:
|
||||||
|
|
||||||
|
```css
|
||||||
|
.k-code-editor-input[data-size="custom-size"] {
|
||||||
|
min-height: 15rem;
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
### 3.1. Default options
|
||||||
|
|
||||||
|
You can globally override the default options, instead of setting them on a per-field basis. In your `site/config/config.php`:
|
||||||
|
|
||||||
|
```php
|
||||||
|
return [
|
||||||
|
'sylvainjule.code-editor.language' => 'css',
|
||||||
|
'sylvainjule.code-editor.size' => 'small',
|
||||||
|
'sylvainjule.code-editor.lineNumbers' => true,
|
||||||
|
'sylvainjule.code-editor.tabSize' => 4,
|
||||||
|
'sylvainjule.code-editor.insertSpaces' => true,
|
||||||
|
'sylvainjule.code-editor.ignoreTabKey' => false,
|
||||||
|
];
|
||||||
|
```
|
||||||
|
|
||||||
|
<br/>
|
||||||
|
|
||||||
|
## 4. Available languages
|
||||||
|
|
||||||
|
Currently supported languages are:
|
||||||
|
|
||||||
|
* `css`
|
||||||
|
* `javascript`
|
||||||
|
* `json`
|
||||||
|
* `less`
|
||||||
|
* `php`
|
||||||
|
* `python`
|
||||||
|
* `ruby`
|
||||||
|
* `scss`
|
||||||
|
* `yaml`
|
||||||
|
|
||||||
|
<br/>
|
||||||
|
|
||||||
|
## 5. License
|
||||||
|
|
||||||
|
MIT
|
||||||
|
|
||||||
|
<br/>
|
||||||
|
|
||||||
|
## 6. Credits
|
||||||
|
|
||||||
|
**Code editor:**
|
||||||
|
|
||||||
|
- [Vue Prism Editor](https://github.com/koca/vue-prism-editor)
|
||||||
20
site/plugins/code-editor/composer.json
Normal file
20
site/plugins/code-editor/composer.json
Normal file
|
|
@ -0,0 +1,20 @@
|
||||||
|
{
|
||||||
|
"name": "sylvainjule/code-editor",
|
||||||
|
"description": "Code editor field for Kirby 3 and 4",
|
||||||
|
"type": "kirby-plugin",
|
||||||
|
"license": "MIT",
|
||||||
|
"version": "1.0.3",
|
||||||
|
"authors": [
|
||||||
|
{
|
||||||
|
"name": "Sylvain Julé",
|
||||||
|
"email": "contact@sylvain-jule.fr"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"require": {
|
||||||
|
"getkirby/composer-installer": "^1.1"
|
||||||
|
},
|
||||||
|
"extra": {
|
||||||
|
"installer-name": "code-editor"
|
||||||
|
},
|
||||||
|
"minimum-stability": "beta"
|
||||||
|
}
|
||||||
1
site/plugins/code-editor/index.css
Normal file
1
site/plugins/code-editor/index.css
Normal file
|
|
@ -0,0 +1 @@
|
||||||
|
.prism-editor-wrapper{width:100%;height:100%;display:flex;align-items:flex-start;overflow:auto;-o-tab-size:1.5em;tab-size:1.5em;-moz-tab-size:1.5em}@media (-ms-high-contrast:active),(-ms-high-contrast:none){.prism-editor-wrapper .prism-editor__textarea{color:transparent!important}.prism-editor-wrapper .prism-editor__textarea::-moz-selection{background-color:#accef7!important;color:transparent!important}.prism-editor-wrapper .prism-editor__textarea::selection{background-color:#accef7!important;color:transparent!important}}.prism-editor-wrapper .prism-editor__container{position:relative;text-align:left;box-sizing:border-box;padding:0;overflow:hidden;width:100%}.prism-editor-wrapper .prism-editor__line-numbers{height:100%;overflow:hidden;flex-shrink:0;padding-top:4px;margin-top:0;margin-right:10px}.prism-editor-wrapper .prism-editor__line-number{text-align:right;white-space:nowrap}.prism-editor-wrapper .prism-editor__textarea{position:absolute;top:0;left:0;height:100%;width:100%;resize:none;color:inherit;overflow:hidden;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;-webkit-text-fill-color:transparent}.prism-editor-wrapper .prism-editor__editor,.prism-editor-wrapper .prism-editor__textarea{margin:0;border:0;background:none;box-sizing:inherit;display:inherit;font-family:inherit;font-size:inherit;font-style:inherit;font-variant-ligatures:inherit;font-weight:inherit;letter-spacing:inherit;line-height:inherit;-moz-tab-size:inherit;-o-tab-size:inherit;tab-size:inherit;text-indent:inherit;text-rendering:inherit;text-transform:inherit;white-space:pre-wrap;word-wrap:keep-all;overflow-wrap:break-word;padding:0}.prism-editor-wrapper .prism-editor__textarea--empty{-webkit-text-fill-color:inherit!important}.prism-editor-wrapper .prism-editor__editor{position:relative;pointer-events:none}code[class*=language-],pre[class*=language-]{color:#ccc;background:none;font-family:Consolas,Monaco,Andale Mono,Ubuntu Mono,monospace;font-size:1em;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none}pre[class*=language-]{padding:1em;margin:.5em 0;overflow:auto}:not(pre)>code[class*=language-],pre[class*=language-]{background:#2d2d2d}:not(pre)>code[class*=language-]{padding:.1em;border-radius:.3em;white-space:normal}.token.comment,.token.block-comment,.token.prolog,.token.doctype,.token.cdata{color:#999}.token.punctuation{color:#ccc}.token.tag,.token.attr-name,.token.namespace,.token.deleted{color:#e2777a}.token.function-name{color:#6196cc}.token.boolean,.token.number,.token.function{color:#f08d49}.token.property,.token.class-name,.token.constant,.token.symbol{color:#f8c555}.token.selector,.token.important,.token.atrule,.token.keyword,.token.builtin{color:#cc99cd}.token.string,.token.char,.token.attr-value,.token.regex,.token.variable{color:#7ec699}.token.operator,.token.entity,.token.url{color:#67cdcc}.token.important,.token.bold{font-weight:700}.token.italic{font-style:italic}.token.entity{cursor:help}.token.inserted{color:green}.k-code-editor-input{background:#2d2d2d;color:#ccc;font-family:Fira code,Fira Mono,Consolas,Menlo,Courier,monospace;font-size:.9rem;line-height:1.5;padding:10px}.k-code-editor-input[data-size=small]{min-height:7.5rem}.k-code-editor-input[data-size=medium]{min-height:15rem}.k-code-editor-input[data-size=large],.k-code-editor-input[data-size=huge]{min-height:30rem}.prism-editor__textarea:focus{outline:none}
|
||||||
14
site/plugins/code-editor/index.js
Normal file
14
site/plugins/code-editor/index.js
Normal file
File diff suppressed because one or more lines are too long
15
site/plugins/code-editor/index.php
Normal file
15
site/plugins/code-editor/index.php
Normal file
|
|
@ -0,0 +1,15 @@
|
||||||
|
<?php
|
||||||
|
|
||||||
|
Kirby::plugin('sylvainjule/code-editor', [
|
||||||
|
'options' => [
|
||||||
|
'language' => 'css',
|
||||||
|
'size' => 'small',
|
||||||
|
'lineNumbers' => true,
|
||||||
|
'tabSize' => 4,
|
||||||
|
'insertSpaces' => true,
|
||||||
|
'ignoreTabKey' => false,
|
||||||
|
],
|
||||||
|
'fields' => [
|
||||||
|
'code-editor' => require_once __DIR__ . '/lib/fields/code-editor.php',
|
||||||
|
],
|
||||||
|
]);
|
||||||
32
site/plugins/code-editor/lib/fields/code-editor.php
Normal file
32
site/plugins/code-editor/lib/fields/code-editor.php
Normal file
|
|
@ -0,0 +1,32 @@
|
||||||
|
<?php
|
||||||
|
|
||||||
|
$options = require kirby()->root('kirby') . '/config/fields/textarea.php';
|
||||||
|
|
||||||
|
/* Merge new properties
|
||||||
|
--------------------------------*/
|
||||||
|
|
||||||
|
$options = A::merge($options, [
|
||||||
|
'props' => [
|
||||||
|
'size' => function($size = null) {
|
||||||
|
return $size ?? option('sylvainjule.code-editor.size');
|
||||||
|
},
|
||||||
|
'language' => function($language = null) {
|
||||||
|
return $language ?? option('sylvainjule.code-editor.language');
|
||||||
|
},
|
||||||
|
'lineNumbers' => function($lineNumbers = null) {
|
||||||
|
return $lineNumbers ?? option('sylvainjule.code-editor.lineNumbers');
|
||||||
|
},
|
||||||
|
'tabSize' => function($tabSize = null) {
|
||||||
|
return $tabSize ?? option('sylvainjule.code-editor.tabSize');
|
||||||
|
},
|
||||||
|
'insertSpaces' => function($insertSpaces = null) {
|
||||||
|
return $tabSize ?? option('sylvainjule.code-editor.insertSpaces');
|
||||||
|
},
|
||||||
|
'ignoreTabKey' => function($ignoreTabKey = null) {
|
||||||
|
return $tabSize ?? option('sylvainjule.code-editor.ignoreTabKey');
|
||||||
|
},
|
||||||
|
]
|
||||||
|
]);
|
||||||
|
|
||||||
|
// return the updated options
|
||||||
|
return $options;
|
||||||
6615
site/plugins/code-editor/package-lock.json
generated
Normal file
6615
site/plugins/code-editor/package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load diff
30
site/plugins/code-editor/package.json
Normal file
30
site/plugins/code-editor/package.json
Normal file
|
|
@ -0,0 +1,30 @@
|
||||||
|
{
|
||||||
|
"name": "kirby-code-editor",
|
||||||
|
"version": "1.0.3",
|
||||||
|
"description": "Code editor field for Kirby 3 and 4",
|
||||||
|
"main": "index.js",
|
||||||
|
"author": "Kirby Community",
|
||||||
|
"license": "MIT",
|
||||||
|
"repository": {
|
||||||
|
"type": "git",
|
||||||
|
"url": "git@github.com:sylvainjule/kirby-code-editor.git"
|
||||||
|
},
|
||||||
|
"scripts": {
|
||||||
|
"dev": "kirbyup src/index.js --watch",
|
||||||
|
"build": "kirbyup src/index.js",
|
||||||
|
"lint": "eslint \"src/**/*.{js,vue}\"",
|
||||||
|
"lint:fix": "npm run lint -- --fix",
|
||||||
|
"format": "prettier --write \"src/**/*.{css,js,vue}\"",
|
||||||
|
"prepare": "node src/node/patchVuePrismEditor.mjs"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"consola": "^2.15.3",
|
||||||
|
"eslint": "^8.3.0",
|
||||||
|
"eslint-config-prettier": "^8.3.0",
|
||||||
|
"eslint-plugin-vue": "^8.1.1",
|
||||||
|
"kirbyup": "^0.21.1",
|
||||||
|
"prettier": "^2.5.0",
|
||||||
|
"prismjs": "^1.25.0",
|
||||||
|
"vue-prism-editor": "^1.3.0"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,62 @@
|
||||||
|
/* Colors
|
||||||
|
---------------------------------*/
|
||||||
|
|
||||||
|
$color-black: #000;
|
||||||
|
$color-white: #fff;
|
||||||
|
$color-dark: #16171a;
|
||||||
|
$color-dark-grey: #777;
|
||||||
|
$color-light: #efefef;
|
||||||
|
$color-light-grey: #999;
|
||||||
|
$color-background: $color-light;
|
||||||
|
$color-positive: #5d800d;
|
||||||
|
$color-positive-border: $color-positive;
|
||||||
|
$color-positive-outline: rgba($color-positive, 0.25);
|
||||||
|
$color-positive-on-dark: #a7bd68;
|
||||||
|
$color-focus: #4271ae;
|
||||||
|
$color-focus-border: $color-focus;
|
||||||
|
$color-focus-outline: rgba($color-focus, 0.25);
|
||||||
|
$color-focus-on-dark: #81a2be;
|
||||||
|
$color-notice: #f5871f;
|
||||||
|
$color-notice-on-dark: #de935f;
|
||||||
|
$color-negative: #c82829;
|
||||||
|
$color-negative-border: $color-negative;
|
||||||
|
$color-negative-outline: rgba($color-negative, 0.25);
|
||||||
|
$color-negative-on-dark: #d16464;
|
||||||
|
$color-border: #ccc;
|
||||||
|
$color-backdrop: rgba($color-dark, 0.6);
|
||||||
|
$color-inset: #ebebeb;
|
||||||
|
|
||||||
|
|
||||||
|
/* Breakpoint
|
||||||
|
---------------------------------*/
|
||||||
|
|
||||||
|
$breakpoint-small: 30em;
|
||||||
|
$breakpoint-menu: 45em;
|
||||||
|
$breakpoint-medium: 65em;
|
||||||
|
$breakpoint-large: 90em;
|
||||||
|
$breakpoint-huge: 120em;
|
||||||
|
|
||||||
|
|
||||||
|
/* Fields
|
||||||
|
---------------------------------*/
|
||||||
|
|
||||||
|
$field-input-padding: .5rem;
|
||||||
|
$field-input-height: 2.25rem;
|
||||||
|
$field-input-line-height: 1.25rem;
|
||||||
|
|
||||||
|
|
||||||
|
/* Typography
|
||||||
|
---------------------------------*/
|
||||||
|
|
||||||
|
$font-size-tiny: 0.75rem;
|
||||||
|
$font-size-small: 0.875rem;
|
||||||
|
$font-size-medium: 1rem;
|
||||||
|
$font-size-large: 1.25rem;
|
||||||
|
$font-size-huge: 1.5rem;
|
||||||
|
$font-size-monster: 1.75rem;
|
||||||
|
|
||||||
|
$font-weight-normal: 400;
|
||||||
|
$font-weight-bold: 600;
|
||||||
|
|
||||||
|
$font-family-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
|
||||||
|
$font-family-mono: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace;
|
||||||
29
site/plugins/code-editor/src/assets/css/styles.scss
Normal file
29
site/plugins/code-editor/src/assets/css/styles.scss
Normal file
|
|
@ -0,0 +1,29 @@
|
||||||
|
@import
|
||||||
|
'abstracts/variables.scss';
|
||||||
|
|
||||||
|
.k-code-editor-input {
|
||||||
|
background: #2d2d2d;
|
||||||
|
color: #ccc;
|
||||||
|
font-family: Fira code, Fira Mono, Consolas, Menlo, Courier, monospace;
|
||||||
|
font-size: .9rem;
|
||||||
|
line-height: 1.5;
|
||||||
|
padding: 10px;
|
||||||
|
|
||||||
|
&[data-size="small"] {
|
||||||
|
min-height: 7.5rem;
|
||||||
|
}
|
||||||
|
&[data-size="medium"] {
|
||||||
|
min-height: 15rem;
|
||||||
|
}
|
||||||
|
&[data-size="large"] {
|
||||||
|
min-height: 30rem;
|
||||||
|
}
|
||||||
|
&[data-size="huge"] {
|
||||||
|
min-height: 30rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.prism-editor__textarea:focus {
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
72
site/plugins/code-editor/src/components/field/CodeEditor.vue
Normal file
72
site/plugins/code-editor/src/components/field/CodeEditor.vue
Normal file
|
|
@ -0,0 +1,72 @@
|
||||||
|
<template>
|
||||||
|
<k-field :input="uid" v-bind="$props" class="k-code-editor-field">
|
||||||
|
<prism-editor
|
||||||
|
v-model="code"
|
||||||
|
class="k-code-editor-input"
|
||||||
|
:highlight="highlighter"
|
||||||
|
:line-numbers="lineNumbers"
|
||||||
|
:tab-size="tabSize"
|
||||||
|
:insert-spaces="insertSpaces"
|
||||||
|
:ignore-tab-key="ignoreTabKey"
|
||||||
|
:data-size="size"
|
||||||
|
@input="onCodeInput"
|
||||||
|
/>
|
||||||
|
</k-field>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { PrismEditor } from "vue-prism-editor";
|
||||||
|
import "vue-prism-editor/dist/prismeditor.min.css";
|
||||||
|
import { highlight, languages } from "prismjs/components/prism-core";
|
||||||
|
import "prismjs/components/prism-markup-templating";
|
||||||
|
import "prismjs/components/prism-clike";
|
||||||
|
import "prismjs/components/prism-css";
|
||||||
|
import "prismjs/components/prism-javascript";
|
||||||
|
import "prismjs/components/prism-json";
|
||||||
|
import "prismjs/components/prism-less";
|
||||||
|
import "prismjs/components/prism-php";
|
||||||
|
import "prismjs/components/prism-python";
|
||||||
|
import "prismjs/components/prism-ruby";
|
||||||
|
import "prismjs/components/prism-scss";
|
||||||
|
import "prismjs/components/prism-yaml";
|
||||||
|
import "prismjs/themes/prism-tomorrow.css";
|
||||||
|
|
||||||
|
export default {
|
||||||
|
components: { PrismEditor },
|
||||||
|
|
||||||
|
extends: "k-textarea-field",
|
||||||
|
|
||||||
|
props: {
|
||||||
|
size: String,
|
||||||
|
language: String,
|
||||||
|
lineNumbers: Boolean,
|
||||||
|
tabSize: Number,
|
||||||
|
insertSpaces: Boolean,
|
||||||
|
ignoreTabKey: Boolean,
|
||||||
|
},
|
||||||
|
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
code: "",
|
||||||
|
};
|
||||||
|
},
|
||||||
|
|
||||||
|
mounted() {
|
||||||
|
this.code = this.value;
|
||||||
|
},
|
||||||
|
|
||||||
|
methods: {
|
||||||
|
highlighter() {
|
||||||
|
return highlight(this.code, languages[this.language]);
|
||||||
|
},
|
||||||
|
|
||||||
|
onCodeInput() {
|
||||||
|
this.$emit("input", this.code);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
@import "../../assets/css/styles.scss";
|
||||||
|
</style>
|
||||||
7
site/plugins/code-editor/src/index.js
Normal file
7
site/plugins/code-editor/src/index.js
Normal file
|
|
@ -0,0 +1,7 @@
|
||||||
|
import CodeEditor from "./components/field/CodeEditor.vue";
|
||||||
|
|
||||||
|
window.panel.plugin("sylvainjule/code-editor", {
|
||||||
|
fields: {
|
||||||
|
"code-editor": CodeEditor,
|
||||||
|
},
|
||||||
|
});
|
||||||
38
site/plugins/code-editor/src/node/patchVuePrismEditor.mjs
Normal file
38
site/plugins/code-editor/src/node/patchVuePrismEditor.mjs
Normal file
|
|
@ -0,0 +1,38 @@
|
||||||
|
import { existsSync, readFileSync, writeFileSync } from "fs";
|
||||||
|
import chalk from "chalk";
|
||||||
|
import consola from "consola";
|
||||||
|
|
||||||
|
const srcPath = "node_modules/vue-prism-editor/dist/prismeditor.esm.js";
|
||||||
|
|
||||||
|
async function main() {
|
||||||
|
consola.start("Vue Prism Editor patcher");
|
||||||
|
|
||||||
|
if (!existsSync(srcPath)) {
|
||||||
|
consola.error(
|
||||||
|
`couldn't find ${chalk.cyan(srcPath)}, did you run ${chalk.green(
|
||||||
|
"npm install"
|
||||||
|
)}?`
|
||||||
|
);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const source = readFileSync(srcPath, "utf8");
|
||||||
|
|
||||||
|
if (!source.includes("Vue.extend")) {
|
||||||
|
consola.success("already patched");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
consola.info("patching the source component...");
|
||||||
|
|
||||||
|
let output = source
|
||||||
|
.replace(/^import Vue from 'vue';/, "")
|
||||||
|
.replace("/*#__PURE__*/Vue.extend(", "")
|
||||||
|
.replace(/\}\)(;\s+export)/, "}$1");
|
||||||
|
|
||||||
|
writeFileSync(srcPath, output, "utf8");
|
||||||
|
|
||||||
|
consola.success("successfully patched");
|
||||||
|
}
|
||||||
|
|
||||||
|
main().catch((err) => consola.error(err));
|
||||||
|
|
@ -30,6 +30,7 @@ $entryTopPos ??= 20;
|
||||||
<meta name="robots" content="noindex, nofollow, noarchive">
|
<meta name="robots" content="noindex, nofollow, noarchive">
|
||||||
|
|
||||||
<?php if ($page->template() == 'linear' || $page->template() == 'grid'): ?>
|
<?php if ($page->template() == 'linear' || $page->template() == 'grid'): ?>
|
||||||
|
<!-- SCHEMA -->
|
||||||
<script type="application/ld+json">
|
<script type="application/ld+json">
|
||||||
{
|
{
|
||||||
"@context": "https://schema.org",
|
"@context": "https://schema.org",
|
||||||
|
|
@ -63,6 +64,14 @@ $entryTopPos ??= 20;
|
||||||
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
|
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
|
||||||
<meta name="apple-mobile-web-app-title" content="actuel-inactuel" />
|
<meta name="apple-mobile-web-app-title" content="actuel-inactuel" />
|
||||||
<link rel="manifest" href="/site.webmanifest" />
|
<link rel="manifest" href="/site.webmanifest" />
|
||||||
|
|
||||||
|
<?php if ($page->additionnalCss()->isNotEmpty()): ?>
|
||||||
|
<!-- CUSTOM CSS -->
|
||||||
|
<style>
|
||||||
|
<?= $page->additionnalCss() ?>
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<?php endif ?>
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body
|
<body
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue