diff --git a/app/views/layouts/default.phtml b/app/views/layouts/default.phtml index 665e47a7fe..2818e4d923 100644 --- a/app/views/layouts/default.phtml +++ b/app/views/layouts/default.phtml @@ -103,8 +103,6 @@ if(!empty($platforms)) { }); - - exec($this->getParam('head', [])); ?> diff --git a/docker-compose.yml b/docker-compose.yml index 2a86fc575e..08a1b9b3e9 100644 --- a/docker-compose.yml +++ b/docker-compose.yml @@ -73,7 +73,6 @@ services: - ./app:/usr/src/code/app # - ./vendor:/usr/src/code/vendor - ./docs:/usr/src/code/docs - - ./public:/usr/src/code/public - ./src:/usr/src/code/src - ./debug:/tmp - ./dev:/usr/local/dev diff --git a/gulpfile.js b/gulpfile.js index 15af05dbfe..3a1b0fe37c 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -99,6 +99,32 @@ const configDep = { 'node_modules/markdown-it/dist/markdown-it.js', 'node_modules/pell/dist/pell.js', 'node_modules/turndown/dist/turndown.js', + // PrismJS Core + 'node_modules/prismjs/components/prism-core.min.js', + // PrismJS Languages + 'node_modules/prismjs/components/prism-markup.min.js', + 'node_modules/prismjs/components/prism-css.min.js', + 'node_modules/prismjs/components/prism-clike.min.js', + 'node_modules/prismjs/components/prism-javascript.min.js', + 'node_modules/prismjs/components/prism-bash.min.js', + 'node_modules/prismjs/components/prism-csharp.min.js', + 'node_modules/prismjs/components/prism-dart.min.js', + 'node_modules/prismjs/components/prism-go.min.js', + 'node_modules/prismjs/components/prism-graphql.min.js', + 'node_modules/prismjs/components/prism-http.min.js', + 'node_modules/prismjs/components/prism-java.min.js', + 'node_modules/prismjs/components/prism-json.min.js', + 'node_modules/prismjs/components/prism-kotlin.min.js', + 'node_modules/prismjs/components/prism-markup-templating.min.js', + 'node_modules/prismjs/components/prism-php.min.js', + 'node_modules/prismjs/components/prism-powershell.min.js', + 'node_modules/prismjs/components/prism-python.min.js', + 'node_modules/prismjs/components/prism-ruby.min.js', + 'node_modules/prismjs/components/prism-swift.min.js', + 'node_modules/prismjs/components/prism-typescript.min.js', + 'node_modules/prismjs/components/prism-yaml.min.js', + // PrismJS Plugins + 'node_modules/prismjs/plugins/line-numbers/prism-line-numbers.min.js', ], dest: './public/dist/scripts' }; diff --git a/package-lock.json b/package-lock.json index 674df22628..9d83c0ded3 100644 --- a/package-lock.json +++ b/package-lock.json @@ -12,6 +12,7 @@ "chart.js": "^3.5.1", "markdown-it": "^12.2.0", "pell": "^1.0.6", + "prismjs": "^1.25.0", "turndown": "^7.1.1" }, "devDependencies": { @@ -3564,6 +3565,11 @@ "node": ">= 0.8" } }, + "node_modules/prismjs": { + "version": "1.25.0", + "resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.25.0.tgz", + "integrity": "sha512-WCjJHl1KEWbnkQom1+SzftbtXMKQoezOCYs5rECqMN+jP+apI7ftoflyqigqzopSO3hMhTEb0mFClA8lkolgEg==" + }, "node_modules/process-nextick-args": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.1.tgz", @@ -7971,6 +7977,11 @@ "integrity": "sha1-t+PqQkNaTJsnWdmeDyAesZWALuE=", "dev": true }, + "prismjs": { + "version": "1.25.0", + "resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.25.0.tgz", + "integrity": "sha512-WCjJHl1KEWbnkQom1+SzftbtXMKQoezOCYs5rECqMN+jP+apI7ftoflyqigqzopSO3hMhTEb0mFClA8lkolgEg==" + }, "process-nextick-args": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.1.tgz", diff --git a/package.json b/package.json index 5c2255d2f4..6c71f23a67 100644 --- a/package.json +++ b/package.json @@ -20,6 +20,7 @@ "chart.js": "^3.5.1", "markdown-it": "^12.2.0", "pell": "^1.0.6", + "prismjs": "^1.25.0", "turndown": "^7.1.1" } } diff --git a/public/styles/default.less b/public/styles/default.less index 817e7ba5ed..660895a22e 100644 --- a/public/styles/default.less +++ b/public/styles/default.less @@ -19,6 +19,7 @@ img[src=""] { @import "icons"; @import "polyfills"; @import "forms"; +@import "ide"; @import "scopes/console"; @import "scopes/home"; @import "comps/alerts"; @@ -32,7 +33,6 @@ img[src=""] { @import "comps/modal"; @import "comps/scroll"; @import "comps/tabs"; -@import "dependencies/prism"; html { padding: 0; diff --git a/public/styles/dependencies/prism.less b/public/styles/dependencies/prism.less deleted file mode 100644 index fcad3f69dd..0000000000 --- a/public/styles/dependencies/prism.less +++ /dev/null @@ -1,358 +0,0 @@ -/* PrismJS 1.15.0 -https://prismjs.com/download.html#themes=prism-okaidia&languages=markup+css+clike+javascript+ruby+markup-templating+php&plugins=line-numbers */ -/** - * okaidia theme for JavaScript, CSS and HTML - * Loosely based on Monokai textmate theme by http://www.monokai.nl/ - * @author ocodia - */ - -.ide { - background-color: var(--config-prism-background); - overflow: hidden; - position: relative; - z-index: 1; - box-shadow: 0 2px 4px 0 rgba(50,50,93,.3); - border-radius: 10px; - margin-bottom: 30px; - &:extend(.force-left); - &:extend(.force-ltr); - - * { - font-family: 'Source Code Pro', monospace; - } - - &[data-lang]::after { - content: attr(data-lang-label); - display: inline-block; - background: #ffffff; - color: #000000; - position: absolute; - top: 15px; - padding: 5px 10px; - border-radius: 15px; - font-size: 10px; - right: 10px; // should be right for both ltr and rtl - opacity: 0.95; - } - - &[data-lang="bash"]::after { - background: var(--config-language-bash); - color: var(--config-language-bash-contrast); - } - - &[data-lang="javascript"]::after { - background: var(--config-language-javascript); - color: var(--config-language-javascript-contrast); - } - - &[data-lang="web"]::after { - background: var(--config-language-web); - color: var(--config-language-web-contrast); - } - - &[data-lang="html"]::after { - background: var(--config-language-html); - color: var(--config-language-html-contrast); - } - - &[data-lang="php"]::after { - background: var(--config-language-php); - color: var(--config-language-php-contrast); - } - - &[data-lang="nodejs"]::after { - background: var(--config-language-nodejs); - color: var(--config-language-nodejs-contrast); - } - - &[data-lang="ruby"]::after { - background: var(--config-language-ruby); - color: var(--config-language-ruby-contrast); - } - - &[data-lang="python"]::after { - background: var(--config-language-python); - color: var(--config-language-python-contrast); - } - - &[data-lang="go"]::after { - background: var(--config-language-go); - color: var(--config-language-go-contrast); - } - - &[data-lang="dart"]::after { - background: var(--config-language-dart); - color: var(--config-language-dart-contrast); - } - - &[data-lang="flutter"]::after { - background: var(--config-language-flutter); - color: var(--config-language-flutter-contrast); - } - - &[data-lang="android"]::after { - background: var(--config-language-android); - color: var(--config-language-android-contrast); - } - - &[data-lang="kotlin"]::after { - background: var(--config-language-kotlin); - color: var(--config-language-kotlin-contrast); - } - - &[data-lang="java"]::after { - background: var(--config-language-java); - color: var(--config-language-java-contrast); - } - - &[data-lang="yaml"]::after { - background: var(--config-language-yaml); - color: var(--config-language-yaml-contrast); - } - - .tag { - color: inherit!important; - background: transparent!important; - padding: inherit!important; - font-size: inherit!important; - line-height: 14px; - } - - .copy { - cursor: pointer; - content: attr(data-lang); - display: inline-block; - background: #ffffff; - color: #000000; - position: absolute; - transform: translateX(-50%); - bottom: -20px; - padding: 5px 10px; - border-radius: 15px; - font-size: 10px; - font-style: normal; - .func-start(50%); - opacity: 0; - transition: bottom .3s, opacity .3s; - line-height: normal; - font-family: 'Poppins', sans-serif; - - &::before { - .func-padding-end(5px); - } - } - - &:hover { - .copy { - transition: bottom .3s, opacity .3s; - opacity: 0.90; - bottom: 16px; - } - } - - pre { - -webkit-hyphens: none; - -moz-hyphens: none; - -ms-hyphens: none; - hyphens: none; - color: #e6ebf1; - font-weight: 400; - line-height: 20px; - font-size: 13px; - margin: 0; - padding: 20px; - padding-left: 60px; - } - - &.light { - box-shadow: 0 2px 4px 0 rgba(50,50,93,.1); - background-color: #ffffff; - - pre { - color: #414770; - } - - .token.comment, - .token.prolog, - .token.doctype, - .token.cdata { - color: #91a2b0; - } - - .token.selector, - .token.attr-name, - .token.string, - .token.char, - .token.builtin, - .token.inserted { - color: #149570; - } - - .token.punctuation { - color: #414770; - } - - .token.operator, - .token.entity, - .token.url, - .language-css .token.string, - .style .token.string, - .token.variable { - color: #414770; - } - - .line-numbers .line-numbers-rows { - background: #f2feef; - } - - .line-numbers-rows > span:before { - color: #5dc79e; - } - - .token.keyword { - color: #6772e4; - font-weight: 500; - } - } -} - -code[class*="language-"], -pre[class*="language-"] { -text-align: left; -white-space: pre; -word-spacing: normal; -word-break: normal; -word-wrap: normal; --moz-tab-size: 4; --o-tab-size: 4; -tab-size: 4; -} - -/* Code blocks */ -pre[class*="language-"] { - overflow: auto; -} - -/* Inline code */ -:not(pre) > code[class*="language-"] { - padding: .1em; - white-space: normal; -} - -.token.comment, -.token.prolog, -.token.doctype, -.token.cdata { - color: #6b7c93; -} - -.token.punctuation { - color: #f8f8f2; -} - -.namespace { - opacity: .7; -} - -.token.property, -.token.tag, -.token.constant, -.token.symbol, -.token.deleted { - color: #f92672; -} - -.token.boolean, -.token.number { - color: #f79a59; -} - -.token.selector, -.token.attr-name, -.token.string, -.token.char, -.token.builtin, -.token.inserted { - color: #3ecf8e; -} - -.token.operator, -.token.entity, -.token.url, -.language-css .token.string, -.style .token.string, -.token.variable { - color: #f8f8f2; -} - -.token.atrule, -.token.attr-value, -.token.function, -.token.class-name { - color: #45b2e8; -} - -.token.keyword { - color: #7795f8; -} - -.token.regex, -.token.important { - color: #fd971f; -} - -.token.important, -.token.bold { - //font-weight: bold; -} -.token.italic { - font-style: italic; -} - -.token.entity { - cursor: help; -} - -pre[class*="language-"].line-numbers { - position: relative; - padding-left: 60px; - counter-reset: linenumber; -} - -pre[class*="language-"].line-numbers > code { - position: relative; - white-space: inherit; -} - -.line-numbers .line-numbers-rows { - background: var(--config-prism-numbers); - position: absolute; - pointer-events: none; - top: -20px; - bottom: -21px; - padding: 20px 0; - font-size: 100%; - left: -60px; - width: 40px; /* works for line-numbers below 1000 lines */ - letter-spacing: -1px; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; -} - -.line-numbers-rows > span { - .func-padding-end(5px); - pointer-events: none; - display: block; - counter-increment: linenumber; -} - -.line-numbers-rows > span:before { - content: counter(linenumber); - color: #636365; - display: block; - padding-right: 0.8em; - text-align: right; -} - diff --git a/public/styles/ide.less b/public/styles/ide.less new file mode 100644 index 0000000000..ea8ff683e1 --- /dev/null +++ b/public/styles/ide.less @@ -0,0 +1,349 @@ +.ide { + background-color: var(--config-prism-background); + overflow: hidden; + position: relative; + z-index: 1; + box-shadow: 0 2px 4px 0 rgba(50, 50, 93, 0.3); + border-radius: 10px; + margin-bottom: 30px; + &:extend(.force-left); + &:extend(.force-ltr); + + * { + font-family: "Source Code Pro", monospace; + } + + &[data-lang]::after { + content: attr(data-lang-label); + display: inline-block; + background: #ffffff; + color: #000000; + position: absolute; + top: 15px; + padding: 5px 10px; + border-radius: 15px; + font-size: 10px; + right: 10px; // should be right for both ltr and rtl + opacity: 0.95; + } + + &[data-lang="bash"]::after { + background: var(--config-language-bash); + color: var(--config-language-bash-contrast); + } + + &[data-lang="javascript"]::after { + background: var(--config-language-javascript); + color: var(--config-language-javascript-contrast); + } + + &[data-lang="web"]::after { + background: var(--config-language-web); + color: var(--config-language-web-contrast); + } + + &[data-lang="html"]::after { + background: var(--config-language-html); + color: var(--config-language-html-contrast); + } + + &[data-lang="php"]::after { + background: var(--config-language-php); + color: var(--config-language-php-contrast); + } + + &[data-lang="nodejs"]::after { + background: var(--config-language-nodejs); + color: var(--config-language-nodejs-contrast); + } + + &[data-lang="ruby"]::after { + background: var(--config-language-ruby); + color: var(--config-language-ruby-contrast); + } + + &[data-lang="python"]::after { + background: var(--config-language-python); + color: var(--config-language-python-contrast); + } + + &[data-lang="go"]::after { + background: var(--config-language-go); + color: var(--config-language-go-contrast); + } + + &[data-lang="dart"]::after { + background: var(--config-language-dart); + color: var(--config-language-dart-contrast); + } + + &[data-lang="flutter"]::after { + background: var(--config-language-flutter); + color: var(--config-language-flutter-contrast); + } + + &[data-lang="android"]::after { + background: var(--config-language-android); + color: var(--config-language-android-contrast); + } + + &[data-lang="kotlin"]::after { + background: var(--config-language-kotlin); + color: var(--config-language-kotlin-contrast); + } + + &[data-lang="java"]::after { + background: var(--config-language-java); + color: var(--config-language-java-contrast); + } + + &[data-lang="yaml"]::after { + background: var(--config-language-yaml); + color: var(--config-language-yaml-contrast); + } + + .tag { + color: inherit !important; + background: transparent !important; + padding: inherit !important; + font-size: inherit !important; + line-height: 14px; + } + + .copy { + cursor: pointer; + content: attr(data-lang); + display: inline-block; + background: #ffffff; + color: #000000; + position: absolute; + transform: translateX(-50%); + bottom: -20px; + padding: 5px 10px; + border-radius: 15px; + font-size: 10px; + font-style: normal; + .func-start(50%); + opacity: 0; + transition: bottom 0.3s, opacity 0.3s; + line-height: normal; + font-family: "Poppins", sans-serif; + + &::before { + .func-padding-end(5px); + } + } + + &:hover { + .copy { + transition: bottom 0.3s, opacity 0.3s; + opacity: 0.9; + bottom: 16px; + } + } + + pre { + -webkit-hyphens: none; + -moz-hyphens: none; + -ms-hyphens: none; + hyphens: none; + color: #e6ebf1; + font-weight: 400; + line-height: 20px; + font-size: 13px; + margin: 0; + padding: 20px; + padding-left: 60px; + } + + &.light { + box-shadow: 0 2px 4px 0 rgba(50, 50, 93, 0.1); + background-color: #ffffff; + + pre { + color: #414770; + } + + .token.comment, + .token.prolog, + .token.doctype, + .token.cdata { + color: #91a2b0; + } + + .token.selector, + .token.attr-name, + .token.string, + .token.char, + .token.builtin, + .token.inserted { + color: #149570; + } + + .token.punctuation { + color: #414770; + } + + .token.operator, + .token.entity, + .token.url, + .language-css .token.string, + .style .token.string, + .token.variable { + color: #414770; + } + + .line-numbers .line-numbers-rows { + background: #f2feef; + } + + .line-numbers-rows > span:before { + color: #5dc79e; + } + + .token.keyword { + color: #6772e4; + font-weight: 500; + } + } +} + +code[class*="language-"], +pre[class*="language-"] { + text-align: left; + white-space: pre; + word-spacing: normal; + word-break: normal; + word-wrap: normal; + -moz-tab-size: 4; + -o-tab-size: 4; + tab-size: 4; +} + +/* Code blocks */ +pre[class*="language-"] { + overflow: auto; +} + +/* Inline code */ +:not(pre) > code[class*="language-"] { + padding: 0.1em; + white-space: normal; +} + +.token.comment, +.token.prolog, +.token.doctype, +.token.cdata { + color: #6b7c93; +} + +.token.punctuation { + color: #f8f8f2; +} + +.namespace { + opacity: 0.7; +} + +.token.property, +.token.tag, +.token.constant, +.token.symbol, +.token.deleted { + color: #f92672; +} + +.token.boolean, +.token.number { + color: #f79a59; +} + +.token.selector, +.token.attr-name, +.token.string, +.token.char, +.token.builtin, +.token.inserted { + color: #3ecf8e; +} + +.token.operator, +.token.entity, +.token.url, +.language-css .token.string, +.style .token.string, +.token.variable { + color: #f8f8f2; +} + +.token.atrule, +.token.attr-value, +.token.function, +.token.class-name { + color: #45b2e8; +} + +.token.keyword { + color: #7795f8; +} + +.token.regex, +.token.important { + color: #fd971f; +} + +.token.important, +.token.bold { + //font-weight: bold; +} +.token.italic { + font-style: italic; +} + +.token.entity { + cursor: help; +} + +pre[class*="language-"].line-numbers { + position: relative; + padding-left: 60px; + counter-reset: linenumber; +} + +pre[class*="language-"].line-numbers > code { + position: relative; + white-space: inherit; +} + +.line-numbers .line-numbers-rows { + background: var(--config-prism-numbers); + position: absolute; + pointer-events: none; + top: -20px; + bottom: -21px; + padding: 20px 0; + font-size: 100%; + left: -60px; + width: 40px; /* works for line-numbers below 1000 lines */ + letter-spacing: -1px; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; +} + +.line-numbers-rows > span { + .func-padding-end(5px); + pointer-events: none; + display: block; + counter-increment: linenumber; +} + +.line-numbers-rows > span:before { + content: counter(linenumber); + color: #636365; + display: block; + padding-right: 0.8em; + text-align: right; +}