├── .github └── FUNDING.yml ├── .gitignore ├── CONTRIBUTING.md ├── DOCUMENTATION.md ├── LICENSE ├── README.md ├── css └── style.css ├── index.html ├── js └── main.js └── package.json /.github/FUNDING.yml: -------------------------------------------------------------------------------- 1 | github: ionicabizau 2 | patreon: ionicabizau 3 | open_collective: ionicabizau 4 | custom: https://www.buymeacoffee.com/h96wwchmy -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | *.swp 2 | *.swo 3 | *~ 4 | *.log 5 | node_modules 6 | *.env 7 | .DS_Store 8 | package-lock.json 9 | .bloggify/* 10 | -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | # 🌟 Contributing 2 | 3 | Want to contribute to this project? Great! Please read these quick steps to streamline the process and avoid unnecessary tasks. ✨ 4 | 5 | ## 💬 Discuss Changes 6 | Start by opening an issue in the repository using the [bug tracker][1]. Describe your proposed contribution or the bug you've found. If relevant, include platform info and screenshots. 🖼️ 7 | 8 | Wait for feedback before proceeding unless the fix is straightforward, like a typo. 📝 9 | 10 | ## 🔧 Fixing Issues 11 | 12 | Fork the project and create a branch for your fix, naming it `some-great-feature` or `some-issue-fix`. Commit changes while following the [code style][2]. If the project has tests, add one. ✅ 13 | 14 | If a `package.json` or `bower.json` exists, add yourself to the `contributors` array; create it if it doesn't. 🙌 15 | 16 | ```json 17 | { 18 | "contributors": [ 19 | "Your Name (http://your.website)" 20 | ] 21 | } 22 | ``` 23 | 24 | ## 📬 Creating a Pull Request 25 | Open a pull request and reference the initial issue (e.g., *fixes #*). Provide a clear title and consider adding visual aids for clarity. 📊 26 | 27 | ## ⏳ Wait for Feedback 28 | Your contributions will be reviewed. If feedback is given, update your branch as needed, and the pull request will auto-update. 🔄 29 | 30 | ## 🎉 Everyone Is Happy! 31 | Your contributions will be merged, and everyone will appreciate your effort! 😄❤️ 32 | 33 | Thanks! 🤩 34 | 35 | [1]: /issues 36 | [2]: https://github.com/IonicaBizau/code-style -------------------------------------------------------------------------------- /DOCUMENTATION.md: -------------------------------------------------------------------------------- 1 | ## Documentation 2 | 3 | You can see below the API reference of this module. 4 | 5 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2016-25 Ionică Bizău (https://ionicabizau.net) 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | # ejs-playground 21 | 22 | [![Support me on Patreon][badge_patreon]][patreon] [![Buy me a book][badge_amazon]][amazon] [![PayPal][badge_paypal_donate]][paypal-donations] [![Ask me anything](https://img.shields.io/badge/ask%20me-anything-1abc9c.svg)](https://github.com/IonicaBizau/ama) [![Version](https://img.shields.io/npm/v/ejs-playground.svg)](https://www.npmjs.com/package/ejs-playground) [![Downloads](https://img.shields.io/npm/dt/ejs-playground.svg)](https://www.npmjs.com/package/ejs-playground) [![Get help on Codementor](https://cdn.codementor.io/badges/get_help_github.svg)](https://www.codementor.io/@johnnyb?utm_source=github&utm_medium=button&utm_term=johnnyb&utm_campaign=github) 23 | 24 | Buy Me A Coffee 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | > A web app to play with EJS templates. 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | [![ejs-playground](http://i.imgur.com/Hbq4N7t.png)](https://ionicabizau.github.io/ejs-playground) 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | ## :question: Get Help 73 | 74 | There are few ways to get help: 75 | 76 | 77 | 78 | 1. Please [post questions on Stack Overflow](https://stackoverflow.com/questions/ask). You can open issues with questions, as long you add a link to your Stack Overflow question. 79 | 2. For bug reports and feature requests, open issues. :bug: 80 | 3. For direct and quick help, you can [use Codementor](https://www.codementor.io/johnnyb). :rocket: 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 | 99 | ## :yum: How to contribute 100 | Have an idea? Found a bug? See [how to contribute][contributing]. 101 | 102 | 103 | ## :sparkling_heart: Support my projects 104 | I open-source almost everything I can, and I try to reply to everyone needing help using these projects. Obviously, 105 | this takes time. You can integrate and use these projects in your applications *for free*! You can even change the source code and redistribute (even resell it). 106 | 107 | However, if you get some profit from this or just want to encourage me to continue creating stuff, there are few ways you can do it: 108 | 109 | 110 | - Starring and sharing the projects you like :rocket: 111 | - [![Buy me a book][badge_amazon]][amazon]—I love books! I will remember you after years if you buy me one. :grin: :book: 112 | - [![PayPal][badge_paypal]][paypal-donations]—You can make one-time donations via PayPal. I'll probably buy a ~~coffee~~ tea. :tea: 113 | - [![Support me on Patreon][badge_patreon]][patreon]—Set up a recurring monthly donation and you will get interesting news about what I'm doing (things that I don't share with everyone). 114 | - **Bitcoin**—You can send me bitcoins at this address (or scanning the code below): `1P9BRsmazNQcuyTxEqveUsnf5CERdq35V6` 115 | 116 | ![](https://i.imgur.com/z6OQI95.png) 117 | 118 | 119 | Thanks! :heart: 120 | 121 | 122 | 123 | 124 | 125 | 126 | 127 | 128 | 129 | 130 | 131 | 132 | 133 | 134 | 135 | 136 | 137 | 138 | 139 | 140 | 141 | 142 | 143 | 144 | ## :scroll: License 145 | 146 | [MIT][license] © [Ionică Bizău][website] 147 | 148 | 149 | 150 | 151 | 152 | 153 | [license]: /LICENSE 154 | [website]: https://ionicabizau.net 155 | [contributing]: /CONTRIBUTING.md 156 | [docs]: /DOCUMENTATION.md 157 | [badge_patreon]: https://ionicabizau.github.io/badges/patreon.svg 158 | [badge_amazon]: https://ionicabizau.github.io/badges/amazon.svg 159 | [badge_paypal]: https://ionicabizau.github.io/badges/paypal.svg 160 | [badge_paypal_donate]: https://ionicabizau.github.io/badges/paypal_donate.svg 161 | [patreon]: https://www.patreon.com/ionicabizau 162 | [amazon]: http://amzn.eu/hRo9sIZ 163 | [paypal-donations]: https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=RVXDDLKKLQRJW 164 | -------------------------------------------------------------------------------- /css/style.css: -------------------------------------------------------------------------------- 1 | @import url(https://cdnjs.cloudflare.com/ajax/libs/gridly/1.4.1/prefixed/gridly.min.css); 2 | @import url(https://cdnjs.cloudflare.com/ajax/libs/octicons/3.5.0/octicons.css); 3 | @import url(https://fonts.googleapis.com/css?family=Cutive+Mono); 4 | 5 | .row { 6 | height: 100vh; 7 | } 8 | 9 | body { 10 | margin: 0; 11 | background:#514f4f; 12 | } 13 | 14 | #editor { 15 | height: 100vh; 16 | font-size:1.2rem; 17 | } 18 | 19 | .col-result { 20 | overflow: auto; 21 | } 22 | 23 | .col.col-result { 24 | background:#2E2E2E; 25 | color: #fff; 26 | padding: 10px; 27 | font-family: 'Cutive Mono', Monaco, monospace; 28 | font-weight: 600; 29 | } 30 | 31 | #result{ 32 | background-color:#2E2E2E; 33 | font-size:1rem; 34 | margin-bottom:1rem; 35 | } 36 | 37 | /*http://cssdeck.com/labs/custom-webkit-scrollbars/**/ 38 | ::-webkit-scrollbar { 39 | width: 10px; 40 | height: 10px; 41 | } 42 | ::-webkit-scrollbar-track { 43 | background-color: rgba(113,112,107,0.1); 44 | -webkit-border-radius: 5px; 45 | } 46 | ::-webkit-scrollbar-thumb:vertical { 47 | background-color: rgba(0,0,0,.2); 48 | -webkit-border-radius: 6px; 49 | } 50 | ::-webkit-scrollbar-thumb:vertical:hover, 51 | ::-webkit-scrollbar-thumb:horizontal:hover { 52 | background: red; 53 | } 54 | ::-webkit-scrollbar-thumb:horizontal { 55 | background-color: rgba(0,0,0,.2); 56 | -webkit-border-radius: 6px; 57 | } 58 | 59 | .footer { 60 | position: fixed; 61 | z-index: 99; 62 | left: 10px; 63 | bottom: 21px; 64 | color: #000000; 65 | background: #fff; 66 | padding: 10px; 67 | font-family: 'Cutive Mono', Monaco, monospace; 68 | border:2px solid black; 69 | box-shadow:inset 0px -3px 3px 0px red; 70 | } 71 | 72 | a { 73 | color: #1D75AB; 74 | text-decoration: none; 75 | } 76 | 77 | textarea{ 78 | position : absolute; 79 | left : -100%; 80 | } 81 | 82 | #copy{ 83 | padding:1rem; 84 | font-weight: 700; 85 | margin-left:32rem; 86 | margin-top:1.2rem; 87 | } 88 | 89 | #fullScreen{ 90 | width:100%; 91 | padding:1rem; 92 | margin-bottom:1rem; 93 | } 94 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | EJS Playground 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 | 15 |
16 | 17 | 18 | 19 |
20 | 21 |
22 | 23 |
24 | 25 |
26 | 27 |
28 | 29 | 
30 | 
31 |
32 | 33 |
34 | 35 |
36 | 37 |
38 | with by @IonicaBizau | @IonicaBizau/ejs-playground 39 |
40 | 41 | 42 | 43 | 44 | 45 | 46 | -------------------------------------------------------------------------------- /js/main.js: -------------------------------------------------------------------------------- 1 | (function () { 2 | var $result = document.getElementById("result"); 3 | 4 | function update() { 5 | var result = null, 6 | input = editor.getValue(); 7 | try { 8 | result = ejs.render(input); 9 | $result.parentNode.style.background = "#2E2E2E"; 10 | } catch (e) { 11 | result = e.stack; 12 | $result.parentNode.style.background = "#c0392b"; 13 | } 14 | 15 | if (/html/.test(location.search)) { 16 | $result.innerHTML = result; 17 | } else { 18 | $result.textContent = result; 19 | } 20 | } 21 | 22 | var editor = ace.edit("editor"); 23 | editor.setTheme("ace/theme/monokai"); 24 | editor.getSession().setMode("ace/mode/ejs"); 25 | editor.on("change", update); 26 | editor.setValue( 27 | `OK, so have fun! :D 28 | ------------------- 29 | <% 30 | var fruits = ["Apple", "Pear", "Orange", "Lemon"] 31 | , random = " ".repeat(198).split("").map(x => Math.random()) 32 | ; 33 | %> 34 | 35 | These fruits are amazing: 36 | <% for(var i = 0; i < fruits.length; ++i) {%> 37 | - <%=fruits[i]%>s<% } %> 38 | 39 | Let's see some random numbers: 40 | 41 | <% random.forEach((c, i) => { 42 | %> <%=c.toFixed(2) + ((i + 1) % 10 === 0 ? "\\n": " ") %><%});%>`, 43 | -1 44 | ); 45 | editor.focus(); 46 | })(); 47 | 48 | function myFunction() { 49 | const copyText = document.getElementById("result").textContent; 50 | const textArea = document.createElement("textarea"); 51 | textArea.textContent = copyText; 52 | document.body.append(textArea); 53 | textArea.select(); 54 | document.execCommand("copy"); 55 | document.getElementById("copy").textContent = "Copied to Clipboard"; 56 | document.getElementById("copy").style.width = "20rem"; 57 | document.getElementById("copy").style.marginLeft = "24rem"; 58 | } 59 | 60 | function FullScreen() { 61 | var content = document.querySelector(".row").style.display; 62 | 63 | if (content === "block") { 64 | document.querySelector(".row").style.display = "flex"; 65 | document.getElementById("fullScreen").textContent = "Enter Full Screen"; 66 | document.querySelector(".col-result").style.textAlign = "left" 67 | } else { 68 | document.querySelector(".row").style.display = "block"; 69 | document.getElementById("fullScreen").textContent = "Exit Full Screen"; 70 | document.querySelector(".col-result").style.textAlign = "center"; 71 | } 72 | } 73 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "ejs-playground", 3 | "version": "2.0.11", 4 | "description": "A web app to play with EJS templates.", 5 | "main": "index.html", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "repository": { 10 | "type": "git", 11 | "url": "git+ssh://git@github.com/IonicaBizau/ejs-playground.git" 12 | }, 13 | "keywords": [ 14 | "ejs", 15 | "playground" 16 | ], 17 | "author": "Ionică Bizău (https://ionicabizau.net)", 18 | "license": "MIT", 19 | "bugs": { 20 | "url": "https://github.com/IonicaBizau/ejs-playground/issues" 21 | }, 22 | "homepage": "https://github.com/IonicaBizau/ejs-playground#readme", 23 | "blah": { 24 | "ex_img": "http://i.imgur.com/Hbq4N7t.png", 25 | "ex_url": "https://ionicabizau.github.io/ejs-playground" 26 | }, 27 | "files": [ 28 | "bin/", 29 | "app/", 30 | "lib/", 31 | "dist/", 32 | "src/", 33 | "scripts/", 34 | "resources/", 35 | "menu/", 36 | "cli.js", 37 | "index.js", 38 | "index.d.ts", 39 | "package-lock.json", 40 | "bloggify.js", 41 | "bloggify.json", 42 | "bloggify/" 43 | ] 44 | } --------------------------------------------------------------------------------