diff --git a/README.md b/README.md index 32ec90e..56d1508 100644 --- a/README.md +++ b/README.md @@ -1,35 +1,35 @@ -# Code2Image [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=for-the-badge)]() [![GitHub license](https://img.shields.io/github/license/cyberpirate92/code2img-chrome.svg?style=for-the-badge)](https://github.com/cyberpirate92/code2img-chrome/blob/master/LICENSE) [![Chrome Web Store](https://img.shields.io/chrome-web-store/v/abloihkaeipjifnhehnicpjfjoaclngo?style=for-the-badge)](https://chrome.google.com/webstore/detail/code2image/abloihkaeipjifnhehnicpjfjoaclngo) +# Themeify -A Google Chrome browser extension to create pretty images of code snippets powered by the [code2img](https://github.com/cyberpirate92/code2img) REST API. +[![Chrome Web Store](https://img.shields.io/chrome-web-store/v/abloihkaeipjifnhehnicpjfjoaclngo?style=for-the-badge)](https://chrome.google.com/webstore/detail/code2image/abloihkaeipjifnhehnicpjfjoaclngo) [![GitHub license](https://img.shields.io/github/license/cyberpirate92/code2img-chrome.svg?style=for-the-badge)](https://github.com/cyberpirate92/code2img-chrome/blob/master/LICENSE) [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=for-the-badge)]() -[![](https://developer.chrome.com/webstore/images/ChromeWebStore_Badge_v2_496x150.png)](https://chrome.google.com/webstore/detail/code2image/abloihkaeipjifnhehnicpjfjoaclngo) +Themeify is a [Google Chrome extension](https://chrome.google.com/webstore/detail/code2image/abloihkaeipjifnhehnicpjfjoaclngo) for creating beautiful images of code snippets directly from webpages, powered by the [code2img](https://github.com/cyberpirate92/code2img) REST API. -![](./images/demo.gif) +[![](./images/Store%20Assets/Marquee%20Promo%20Tile_v7.png)](https://chrome.google.com/webstore/detail/code2image/abloihkaeipjifnhehnicpjfjoaclngo) -## Installing locally for Development +## How to use Themeify -1. Clone this repository `git clone https://github.com/cyberpirate92/code2img-chrome`. -2. Open Google Chrome and open Extension Management page by navigating to `chrome://extensions`. -3. Turn on **Developer Mode**. -4. Click on the **LOAD UNPACKED** button and select the `src` directory from the project folder. +1. Select the text (code snippet) on the page. +2. Right click on the selected text and select Themeify from the context menu and the programming language in the submenu. +3. In the language submenu, select the color theme of your choice. -![](./images/load_extension.png) +![](./images/context-menu-screenshot.png) -5. The extension is now installed locally. +4. A file save dialog will appear where you can rename the file +if required and save the image. -## Usage +![](./images/download-dialog-screenshot.png) -1. Select the text (code snippet) on the page that you want to include in the image. -2. Right click and select Code2Image and in the submenu, select the language. -3. In the language submenu, select a color theme. +## Sample Image generated using Themeify -![](./images/context-menu2-screenshot.png) +![](./images/sample-output.png) -4. A file save dialog will appear where you can rename the file -if required and save the image. +## Installing locally for Development -![](./images/download-dialog-screenshot.png) +1. Clone this repository `git clone https://github.com/cyberpirate92/code2img-chrome`. +2. Open Google Chrome and open Extension Management page by navigating to `chrome://extensions`. +3. Turn on **Developer Mode**. +4. Click on the **LOAD UNPACKED** button and select the `src` directory from the project folder. -## Sample Image generated using Code2Image extension +![](./images/load_extension.png) -![](./images/sample-image.png) +5. The extension is now installed locally. diff --git a/images/context-menu-screenshot.png b/images/context-menu-screenshot.png new file mode 100644 index 0000000..45687b3 Binary files /dev/null and b/images/context-menu-screenshot.png differ diff --git a/images/context-menu1-screenshot.png b/images/context-menu1-screenshot.png deleted file mode 100644 index fae405c..0000000 Binary files a/images/context-menu1-screenshot.png and /dev/null differ diff --git a/images/context-menu2-screenshot.png b/images/context-menu2-screenshot.png deleted file mode 100644 index 3955b2a..0000000 Binary files a/images/context-menu2-screenshot.png and /dev/null differ diff --git a/images/download-dialog-screenshot.png b/images/download-dialog-screenshot.png index 819a828..ae17dd2 100644 Binary files a/images/download-dialog-screenshot.png and b/images/download-dialog-screenshot.png differ diff --git a/images/sample-image.png b/images/sample-image.png deleted file mode 100644 index 0958bc2..0000000 Binary files a/images/sample-image.png and /dev/null differ diff --git a/images/sample-output.png b/images/sample-output.png new file mode 100644 index 0000000..d2f1687 Binary files /dev/null and b/images/sample-output.png differ diff --git a/src/js/preferences.js b/src/js/preferences.js index 51a74fc..7ab06b4 100644 --- a/src/js/preferences.js +++ b/src/js/preferences.js @@ -52,7 +52,7 @@ function generatePreview(imageElement, spinnerElement, errorAlert, preferences) let queryParams = new URLSearchParams(); queryParams.set('language', 'java'); - queryParams.set('theme', 'xonokai'); + queryParams.set('theme', 'pojoaque'); queryParams.set('background-color', preferences.backgroundColor); queryParams.set('show-background', preferences.showBackground); queryParams.set('line-numbers', preferences.showLineNumbers); @@ -192,6 +192,8 @@ function normalize(value, minValue, maxValue) { backgroundImagePreview.parentElement.classList.remove('d-none'); } } + + settingsPreviewSection.classList.add('d-none'); }); } @@ -238,6 +240,9 @@ function normalize(value, minValue, maxValue) { previewButton.addEventListener('click', () => { settingsPreviewSection.classList.remove('d-none'); + settingsPreviewSection.scrollIntoView({ + behavior: "smooth", + }); generatePreview(settingsPreviewImage, previewLoadingSpinner, document.querySelector('#previewErrorAlert'), getSettings()); }); @@ -251,7 +256,7 @@ function normalize(value, minValue, maxValue) { * used for generating the preview */ const previewCode = `/* - * 🔥🔥 Generated with Themeify 🔥🔥 + * 🔥🔥 This is a preview 🔥🔥 */ import java.util.*; class FizzBuzz diff --git a/src/preferences.html b/src/preferences.html index a4f2566..2e66b74 100644 --- a/src/preferences.html +++ b/src/preferences.html @@ -12,7 +12,7 @@
-
+
Themeify Preferences
@@ -21,7 +21,7 @@
General Preferences
-
+
@@ -35,7 +35,7 @@
Background Preferences
-
+
@@ -98,10 +98,10 @@ Your preferences are saved.
- - - - + + + +