Merge pull request #83 from madhusudhan1234/feature/codemirror-integration-9518149390473446564

Author: madhusudhan1234

.gitignore

@@ -22,3 +22,4 @@ pnpm-debug.log*
 
 # jetbrains setting folder
 .idea/
+dev_server.log

package-lock.json

@@ -13,8 +13,20 @@
     "@astrojs/mdx": "^4.2.1",
     "@astrojs/rss": "^4.0.11",
     "@astrojs/sitemap": "^3.3.0",
+    "@babel/runtime": "^7.28.4",
+    "@codemirror/lang-css": "^6.3.1",
+    "@codemirror/lang-html": "^6.4.11",
+    "@codemirror/lang-javascript": "^6.2.4",
+    "@codemirror/lang-json": "^6.0.2",
+    "@codemirror/lang-markdown": "^6.5.0",
+    "@codemirror/lang-python": "^6.2.1",
+    "@codemirror/lang-yaml": "^6.1.2",
+    "@codemirror/state": "^6.5.3",
+    "@codemirror/view": "^6.39.9",
     "@tailwindcss/vite": "^4.1.18",
+    "@uiw/codemirror-theme-vscode": "^4.25.4",
     "astro": "^5.5.2",
+    "codemirror": "^6.0.2",
     "lucide-astro": "^0.556.0",
     "sharp": "^0.34.1",
     "tailwindcss": "^4.1.18"

package.json

@@ -45,15 +45,15 @@ your-folder-name/
 First, define the server host machines and ensure they are accessible via SSH. Set up the necessary SSH configuration using private/public keys, then specify the hosts in the inventory/hosts file like this:
 
 inventory/hosts
-```
+```ini
 [web_servers]
 your-host-ip # for example: 192.168.1.10
 ```
 
 Define the ansible.cfg file like this:
 
 ansible.cfg
-```
+```ini
 [defaults]
 inventory = inventory/hosts
 remote_user = ubuntu
@@ -95,7 +95,7 @@ Here is the breakdown of the ansible.cfg settings:
 Ansible uses simple, human-readable scripts called playbooks to automate tasks. Now add the playbook file in the following location:
 
 playbooks/provision.yml
-```
+```yaml
 - name: Provision PHP
   hosts: web_servers
   become: true
@@ -143,7 +143,7 @@ The roles/ directory is where Ansible stores reusable automation logic. Each rol
 Now let's configure the `common` role. This role is mainly useful for common tasks like updating the apt cache, installing packages, setting timezone, etc.
 
 roles/common/tasks/main.yml
-```
+```yaml
 - name: Install common packages
   apt:
     name:
@@ -168,15 +168,15 @@ roles/common/tasks/main.yml
 The {{ timezone }} variable is defined in the roles/common/vars/main.yml file:
 
 roles/common/vars/main.yml
-```
+```yaml
 ---
 timezone: Asia/Tokyo
 ```
 
 Now that the common role is ready, let's set up the PHP role in a similar way:
 
 roles/php/tasks/main.yml
-```
+```yaml
 - name: Install PHP and extensions
   apt:
     name:
@@ -194,7 +194,7 @@ roles/php/tasks/main.yml
 This will install PHP and php-fpm (PHP FastCGI Process Manager) and notify the handler to restart php-fpm. The handler is defined like this:
 
 roles/php/handlers/main.yml
-```
+```yaml
 - name: restart php-fpm
   service:
     name: "php{{ php_version }}-fpm"
@@ -205,7 +205,7 @@ roles/php/handlers/main.yml
 Set the PHP version in the following variable file:
 
 roles/php/vars/main.yml
-```
+```yaml
 ---
 php_version: 8.3
 ```
@@ -214,7 +214,9 @@ If you need to add secret variables, you can use an Ansible vault file. When usi
 
 Finally, run this command to provision the server:
 
-`ansible-playbook playbooks/provision.yml`
+```bash
+ansible-playbook playbooks/provision.yml
+```
 
 This is the basic way of using Ansible. For more advanced usage, please check additional resources about Ansible. Creating a README.md file for each role is a best practice to document all necessary details.
 

src/content/blog/getting-started-with-ansible.md

@@ -36,7 +36,7 @@ Circular Queue usage:
 - print() - print the elements in the queue
 
 
-```
+```js
 class CircularQueue {
   constructor(capacity) {
     this.items = new Array(capacity)
@@ -109,7 +109,7 @@ class CircularQueue {
 
 This is the implementation for the circular queue data structure in JavaScript. Let's check if it workks correctly.
 
-```
+```js
 const circularQueue = new CircularQueue(5)
 console.log(circularQueue.isEmpty()) // true
 

src/content/notes/data-structure-circular-queue-in-javascript.md

@@ -27,7 +27,7 @@ Linked List Usage
 - Video Player
 
 
-```
+```js
 class Node {
     constructor(value) {
         this.value = value
@@ -58,7 +58,7 @@ class LinkedList {
 }
 ```
 
-```
+```js
 const list = new LinkedList()
 console.log(list.isEmpty()) // true
 console.log(list.getSize()) // 0

src/content/notes/data-structure-linkedlist-in-javascript.md

@@ -119,5 +119,8 @@ const tagList: string[] =
 			</article>
 		</main>
 		<Footer />
+        <script>
+            import "../scripts/codemirror-loader.js";
+        </script>
 	</body>
 </html>

src/layouts/BlogPost.astro

@@ -0,0 +1,88 @@
+
+import { EditorView, basicSetup } from "codemirror";
+import { EditorState } from "@codemirror/state";
+import { vscodeDark } from '@uiw/codemirror-theme-vscode';
+
+async function main() {
+    const codeblocks = document.querySelectorAll('pre');
+
+    for (const preElement of codeblocks) {
+        const codeElement = preElement.querySelector('code');
+        if (!codeElement) continue;
+
+        const code = codeElement.textContent?.replace(/\n$/, '') || '';
+        const langMatch = codeElement.className.match(/language-(\S+)/);
+        let lang = langMatch ? langMatch[1] : 'plaintext';
+
+        // Normalize language names
+        const langMap = {
+            'js': 'javascript',
+            'ts': 'typescript',
+            'py': 'python',
+            'yml': 'yaml',
+            'md': 'markdown'
+        };
+        lang = langMap[lang] || lang;
+
+        const extensions = [basicSetup];
+        let languageSupport;
+
+        try {
+            switch (lang) {
+                case 'javascript':
+                case 'typescript':
+                case 'jsx':
+                case 'tsx':
+                    languageSupport = (await import('@codemirror/lang-javascript')).javascript();
+                    break;
+                case 'python':
+                    languageSupport = (await import('@codemirror/lang-python')).python();
+                    break;
+                case 'html':
+                    languageSupport = (await import('@codemirror/lang-html')).html();
+                    break;
+                case 'css':
+                    languageSupport = (await import('@codemirror/lang-css')).css();
+                    break;
+                case 'json':
+                    languageSupport = (await import('@codemirror/lang-json')).json();
+                    break;
+                case 'markdown':
+                    languageSupport = (await import('@codemirror/lang-markdown')).markdown();
+                    break;
+                case 'yaml':
+                    languageSupport = (await import('@codemirror/lang-yaml')).yaml();
+                    break;
+            }
+        } catch(e) {
+            console.error(`Failed to load language support for ${lang}`, e);
+        }
+
+        if (languageSupport) {
+            extensions.push(languageSupport);
+        }
+
+        const state = EditorState.create({
+            doc: code,
+            extensions: [
+                ...extensions,
+                EditorView.editable.of(false),
+                vscodeDark
+            ]
+        });
+
+        const parent = preElement.parentNode;
+        if (parent) {
+            const wrapper = document.createElement('div');
+            parent.insertBefore(wrapper, preElement);
+            preElement.style.display = 'none';
+
+            new EditorView({
+                state,
+                parent: wrapper,
+            });
+        }
+    }
+}
+
+main();