début implémentation light-mode avec son script : remplacement de tout les valeur de couleur par varriable corespondante, text-shadow autour de du logo pour le contour, changement de fonctionnement pour que svg puisse changer de couleur
This commit is contained in:
parent
8f9e75126e
commit
0585421854
56 changed files with 492 additions and 6978 deletions
|
|
@ -1,15 +0,0 @@
|
|||
{
|
||||
"env": {
|
||||
"browser": true,
|
||||
"es2021": true
|
||||
},
|
||||
"extends": [
|
||||
"eslint:recommended",
|
||||
"plugin:vue/recommended",
|
||||
"prettier"
|
||||
],
|
||||
"parserOptions": {
|
||||
"ecmaVersion": 12,
|
||||
"sourceType": "module"
|
||||
}
|
||||
}
|
||||
4
site/plugins/code-editor/.gitignore
vendored
4
site/plugins/code-editor/.gitignore
vendored
|
|
@ -1,2 +1,6 @@
|
|||
.DS_Store
|
||||
.cache
|
||||
node_modules
|
||||
package-lock.json
|
||||
yarn.lock
|
||||
composer.lock
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
# Kirby – Code editor
|
||||
|
||||
Code editor field for Kirby 3 and 4.
|
||||
Code editor field for Kirby 3, 4 and 5.
|
||||
|
||||
|
||||
|
||||
|
|
@ -8,7 +8,7 @@ Code editor field for Kirby 3 and 4.
|
|||
|
||||
## 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).
|
||||
> 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, you can consider [making a donation of your choice](https://paypal.me/sylvainjl).
|
||||
|
||||
- [1. Installation](#1-installation)
|
||||
- [2. Setup](#2-setup)
|
||||
|
|
|
|||
|
|
@ -1,20 +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"
|
||||
"name": "sylvainjule/code-editor",
|
||||
"description": "Code editor field for Kirby 3, 4 and 5",
|
||||
"type": "kirby-plugin",
|
||||
"license": "MIT",
|
||||
"version": "1.1.0",
|
||||
"authors": [
|
||||
{
|
||||
"name": "Sylvain Julé",
|
||||
"email": "contact@sylvain-jule.fr"
|
||||
}
|
||||
],
|
||||
"require": {
|
||||
"getkirby/composer-installer": "^1.2"
|
||||
},
|
||||
"extra": {
|
||||
"installer-name": "code-editor"
|
||||
},
|
||||
"minimum-stability": "beta"
|
||||
}
|
||||
|
|
|
|||
28
site/plugins/code-editor/eslint.config.mjs
Normal file
28
site/plugins/code-editor/eslint.config.mjs
Normal file
|
|
@ -0,0 +1,28 @@
|
|||
import js from "@eslint/js";
|
||||
import prettier from "eslint-config-prettier";
|
||||
import vue from "eslint-plugin-vue";
|
||||
|
||||
export default [
|
||||
js.configs.recommended,
|
||||
...vue.configs["flat/vue2-recommended"],
|
||||
prettier,
|
||||
{
|
||||
rules: {
|
||||
"vue/attributes-order": "error",
|
||||
"vue/component-definition-name-casing": "off",
|
||||
"vue/html-closing-bracket-newline": [
|
||||
"error",
|
||||
{
|
||||
singleline: "never",
|
||||
multiline: "always"
|
||||
}
|
||||
],
|
||||
"vue/multi-word-component-names": "off",
|
||||
"vue/require-default-prop": "off",
|
||||
"vue/require-prop-types": "error"
|
||||
},
|
||||
languageOptions: {
|
||||
ecmaVersion: 2022
|
||||
}
|
||||
}
|
||||
];
|
||||
|
|
@ -1 +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}
|
||||
.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:light-dark(var(--color-gray-950),var(--input-color-back));color:var(--color-gray-200);font-family:var(--font-mono);font-size:var(--text-sm);line-height:1.5;padding:var(--spacing-2);border-radius:var(--rounded)}.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]{min-height:30rem}.k-code-editor-input[data-size=huge]{min-height:45rem}.prism-editor__textarea:focus{outline:none}
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -1,15 +1,15 @@
|
|||
<?php
|
||||
|
||||
Kirby::plugin('sylvainjule/code-editor', [
|
||||
'options' => [
|
||||
'options' => array(
|
||||
'language' => 'css',
|
||||
'size' => 'small',
|
||||
'lineNumbers' => true,
|
||||
'size' => 'small',
|
||||
'lineNumbers' => true,
|
||||
'tabSize' => 4,
|
||||
'insertSpaces' => true,
|
||||
'ignoreTabKey' => false,
|
||||
],
|
||||
'fields' => [
|
||||
),
|
||||
'fields' => array(
|
||||
'code-editor' => require_once __DIR__ . '/lib/fields/code-editor.php',
|
||||
],
|
||||
),
|
||||
]);
|
||||
|
|
|
|||
6615
site/plugins/code-editor/package-lock.json
generated
6615
site/plugins/code-editor/package-lock.json
generated
File diff suppressed because it is too large
Load diff
|
|
@ -1,30 +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"
|
||||
}
|
||||
"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": "^3.4.2",
|
||||
"eslint": "^9.27.0",
|
||||
"eslint-config-prettier": "^10.1.5",
|
||||
"eslint-plugin-vue": "^9.33.0",
|
||||
"kirbyup": "^3.3.0",
|
||||
"prettier": "^3.5.3",
|
||||
"prismjs": "^1.30.0",
|
||||
"vue-prism-editor": "^1.3.0"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,62 +0,0 @@
|
|||
/* 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;
|
||||
|
|
@ -1,29 +0,0 @@
|
|||
@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;
|
||||
}
|
||||
|
|
@ -67,6 +67,31 @@ export default {
|
|||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
@import "../../assets/css/styles.scss";
|
||||
<style>
|
||||
.k-code-editor-input {
|
||||
background: light-dark(var(--color-gray-950), var(--input-color-back));
|
||||
color: var(--color-gray-200);
|
||||
font-family: var(--font-mono);
|
||||
font-size: var(--text-sm);
|
||||
line-height: 1.5;
|
||||
padding: var(--spacing-2);
|
||||
border-radius: var(--rounded);
|
||||
}
|
||||
|
||||
.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"] {
|
||||
min-height: 30rem;
|
||||
}
|
||||
.k-code-editor-input[data-size="huge"] {
|
||||
min-height: 45rem;
|
||||
}
|
||||
|
||||
.prism-editor__textarea:focus {
|
||||
outline: none;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue