RubyGems - presently - Versions diffs - 0.1.0 - Mend

presently 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (215) hide show

data/public/_components/@socketry/syntax/examples/markdown.html ADDED Viewed

@@ -0,0 +1,121 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="UTF-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+	<title>Markdown Examples - @socketry/syntax</title>
+	<link rel="stylesheet" href="examples.css">
+</head>
+<body>
+	<header>
+		<h1>Markdown Examples</h1>
+		<p class="subtitle">Markdown syntax with clickable links</p>
+	</header>
+	<nav>
+		<a href="index.html">Back to Examples</a>
+		<a href="javascript.html">JavaScript</a>
+		<a href="python.html">Python</a>
+	</nav>
+	<div class="example">
+		<h2>Complete Markdown Document</h2>
+		<p class="description">A full markdown document with various elements:</p>
+		<pre><code class="language-markdown"># Main Heading
+This is a paragraph with **bold text**, *italic text*, and `inline code`.
+## Subheading
+Here's a [link to example](https://example.com) and an ![image](image.png).
+### Code Block
+```javascript
+const greeting = "Hello, World!";
+console.log(greeting);
+```
+### Lists
+- Unordered item 1
+- Unordered item 2
+  - Nested item
+1. Ordered item 1
+2. Ordered item 2
+### Blockquote
+> This is a quoted text.
+> It can span multiple lines.
+---
+That's a horizontal rule above.
+</code></pre>
+	</div>
+	<div class="example">
+		<h2>Headers</h2>
+		<p class="description">Different heading levels:</p>
+		<pre><code class="language-markdown"># Heading 1
+## Heading 2
+### Heading 3
+#### Heading 4
+##### Heading 5
+###### Heading 6
+</code></pre>
+	</div>
+	<div class="example">
+		<h2>Text Formatting</h2>
+		<p class="description">Bold, italic, and code:</p>
+		<pre><code class="language-markdown">**Bold with asterisks**
+__Bold with underscores__
+*Italic with asterisks*
+_Italic with underscores_
+`Inline code`
+```
+Code block
+Multiple lines
+```
+</code></pre>
+	</div>
+	<div class="example">
+		<h2>Links and Images</h2>
+		<p class="description">Markdown link and image syntax (links are clickable!):</p>
+		<pre><code class="language-markdown">[Link text](https://example.com)
+[Link with title](https://example.com "Title")
+![Alt text](image.png)
+![Image with title](image.png "Image Title")
+Plain URLs are also clickable:
+https://github.com/socketry/syntax-js
+http://example.com/path?query=value
+</code></pre>
+	</div>
+	<script type="module">
+		import Syntax from '../Syntax.js';
+		import registerMarkdown from '../Syntax/Language/markdown.js';
+		// Register the Markdown language
+		registerMarkdown(Syntax.default);
+		// Automatically upgrade code blocks
+		document.addEventListener('DOMContentLoaded', async function() {
+			await Syntax.highlight();
+		});
+	</script>
+</body>
+</html>

data/public/_components/@socketry/syntax/examples/mixed.html ADDED Viewed

@@ -0,0 +1,306 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="UTF-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+	<title>Mixed Languages Examples - @socketry/syntax</title>
+	<link rel="stylesheet" href="examples.css">
+</head>
+<body>
+	<header>
+		<h1>Mixed Languages Examples</h1>
+		<p class="subtitle">Mixed Languages syntax highlighting</p>
+	</header>
+	<nav>
+		<a href="index.html">Back to Examples</a>
+	</nav>
+<h1>Mixed Content Examples</h1>
+	<nav>
+		<a href="index.html">← Back</a>
+		<a href="javascript.html">JavaScript</a>
+		<a href="html.html">HTML</a>
+	</nav>
+	<div class="example">
+		<h2>HTML with Embedded JavaScript</h2>
+		<p class="description">JavaScript code inside &lt;script&gt; tags is highlighted with JavaScript syntax:</p>
+		<syntax-code language="html">
+&lt;!DOCTYPE html&gt;
+&lt;html lang="en"&gt;
+&lt;head&gt;
+	&lt;meta charset="UTF-8"&gt;
+	&lt;title&gt;Interactive Page&lt;/title&gt;
+	&lt;script&gt;
+		// This JavaScript code is highlighted!
+		document.addEventListener('DOMContentLoaded', () => {
+			const button = document.querySelector('#myButton');
+			const counter = { count: 0 };
+			button.addEventListener('click', () => {
+				counter.count++;
+				console.log(`Clicked ${counter.count} times`);
+				// Update the UI
+				button.textContent = `Clicks: ${counter.count}`;
+			});
+		});
+	&lt;/script&gt;
+&lt;/head&gt;
+&lt;body&gt;
+	&lt;h1&gt;Click Counter&lt;/h1&gt;
+	&lt;button id="myButton"&gt;Click Me!&lt;/button&gt;
+&lt;/body&gt;
+&lt;/html&gt;
+		</syntax-code>
+	</div>
+	<div class="example">
+		<h2>Multiple Script Blocks</h2>
+		<p class="description">Multiple &lt;script&gt; tags with different content:</p>
+		<syntax-code language="html">
+&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+&lt;head&gt;
+	&lt;!-- External script --&gt;
+	&lt;script src="https://cdn.example.com/library.js"&gt;&lt;/script&gt;
+	&lt;!-- Module script --&gt;
+	&lt;script type="module"&gt;
+		import { helper } from './utils.js';
+		class App {
+			constructor() {
+				this.data = [];
+			}
+			async init() {
+				const response = await fetch('/api/data');
+				this.data = await response.json();
+				this.render();
+			}
+		}
+		const app = new App();
+		app.init();
+	&lt;/script&gt;
+	&lt;!-- Inline event handler (old style) --&gt;
+	&lt;script&gt;
+		function handleClick(event) {
+			alert('Button clicked!');
+			return false;
+		}
+	&lt;/script&gt;
+&lt;/head&gt;
+&lt;body&gt;
+	&lt;button onclick="handleClick(event)"&gt;Old Style Handler&lt;/button&gt;
+&lt;/body&gt;
+&lt;/html&gt;
+		</syntax-code>
+	</div>
+	<div class="example">
+		<h2>ES6 Modules in HTML</h2>
+		<p class="description">Modern JavaScript modules with imports:</p>
+		<syntax-code language="html">
+&lt;!DOCTYPE html&gt;
+&lt;html lang="en"&gt;
+&lt;head&gt;
+	&lt;meta charset="UTF-8"&gt;
+	&lt;title&gt;ES Module Example&lt;/title&gt;
+&lt;/head&gt;
+&lt;body&gt;
+	&lt;div id="app"&gt;&lt;/div&gt;
+	&lt;script type="module"&gt;
+		// Dynamic imports
+		const { createApp } = await import('./framework.js');
+		// App component
+		const app = createApp({
+			data() {
+				return {
+					message: 'Hello, World!',
+					count: 0
+				};
+			},
+			methods: {
+				increment() {
+					this.count++;
+				}
+			},
+			template: `
+				&lt;div&gt;
+					&lt;h1&gt;{{ message }}&lt;/h1&gt;
+					&lt;p&gt;Count: {{ count }}&lt;/p&gt;
+					&lt;button @click="increment"&gt;Increment&lt;/button&gt;
+				&lt;/div&gt;
+			`
+		});
+		app.mount('#app');
+	&lt;/script&gt;
+&lt;/body&gt;
+&lt;/html&gt;
+		</syntax-code>
+	</div>
+	<div class="example">
+		<h2>Web Components</h2>
+		<p class="description">Custom elements with JavaScript:</p>
+		<syntax-code language="html">
+&lt;!DOCTYPE html&gt;
+&lt;html lang="en"&gt;
+&lt;head&gt;
+	&lt;meta charset="UTF-8"&gt;
+	&lt;title&gt;Web Components&lt;/title&gt;
+	&lt;script&gt;
+		class MyCounter extends HTMLElement {
+			#count = 0;
+			#shadow;
+			constructor() {
+				super();
+				this.#shadow = this.attachShadow({ mode: 'open' });
+			}
+			connectedCallback() {
+				this.render();
+				this.#shadow.querySelector('button').addEventListener('click', () => {
+					this.#count++;
+					this.render();
+				});
+			}
+			render() {
+				this.#shadow.innerHTML = `
+					&lt;style&gt;
+						:host { display: block; padding: 1rem; }
+						button { padding: 0.5rem 1rem; }
+					&lt;/style&gt;
+					&lt;div&gt;
+						&lt;p&gt;Count: ${this.#count}&lt;/p&gt;
+						&lt;button&gt;Increment&lt;/button&gt;
+					&lt;/div&gt;
+				`;
+			}
+		}
+		customElements.define('my-counter', MyCounter);
+	&lt;/script&gt;
+&lt;/head&gt;
+&lt;body&gt;
+	&lt;h1&gt;Custom Counter Element&lt;/h1&gt;
+	&lt;my-counter&gt;&lt;/my-counter&gt;
+	&lt;my-counter&gt;&lt;/my-counter&gt;
+&lt;/body&gt;
+&lt;/html&gt;
+		</syntax-code>
+	</div>
+	<div class="example">
+		<h2>Async Script Loading</h2>
+		<p class="description">Different script loading strategies:</p>
+		<syntax-code language="html">
+&lt;!DOCTYPE html&gt;
+&lt;html lang="en"&gt;
+&lt;head&gt;
+	&lt;meta charset="UTF-8"&gt;
+	&lt;title&gt;Script Loading Strategies&lt;/title&gt;
+	&lt;!-- Regular blocking script --&gt;
+	&lt;script src="critical.js"&gt;&lt;/script&gt;
+	&lt;!-- Async: Download in parallel, execute ASAP --&gt;
+	&lt;script async src="analytics.js"&gt;&lt;/script&gt;
+	&lt;!-- Defer: Download in parallel, execute after DOM ready --&gt;
+	&lt;script defer src="app.js"&gt;&lt;/script&gt;
+	&lt;!-- Module: Always deferred by default --&gt;
+	&lt;script type="module" src="main.js"&gt;&lt;/script&gt;
+	&lt;!-- Inline with initialization --&gt;
+	&lt;script&gt;
+		window.APP_CONFIG = {
+			apiUrl: 'https://api.example.com',
+			version: '1.0.0',
+			features: {
+				analytics: true,
+				darkMode: true
+			}
+		};
+	&lt;/script&gt;
+&lt;/head&gt;
+&lt;body&gt;
+	&lt;div id="root"&gt;&lt;/div&gt;
+&lt;/body&gt;
+&lt;/html&gt;
+		</syntax-code>
+	</div>
+	<div class="example">
+		<h2>Template Strings in HTML</h2>
+		<p class="description">Using template literals for dynamic content:</p>
+		<syntax-code language="html">
+&lt;!DOCTYPE html&gt;
+&lt;html lang="en"&gt;
+&lt;head&gt;
+	&lt;meta charset="UTF-8"&gt;
+	&lt;title&gt;Templates&lt;/title&gt;
+&lt;/head&gt;
+&lt;body&gt;
+	&lt;div id="user-list"&gt;&lt;/div&gt;
+	&lt;script&gt;
+		const users = [
+			{ id: 1, name: 'Alice', role: 'Admin' },
+			{ id: 2, name: 'Bob', role: 'User' },
+			{ id: 3, name: 'Charlie', role: 'Moderator' }
+		];
+		function renderUsers(users) {
+			return users.map(user => `
+				&lt;div class="user-card" data-user-id="${user.id}"&gt;
+					&lt;h3&gt;${user.name}&lt;/h3&gt;
+					&lt;span class="badge ${user.role.toLowerCase()}"&gt;
+						${user.role}
+					&lt;/span&gt;
+					&lt;button onclick="editUser(${user.id})"&gt;Edit&lt;/button&gt;
+				&lt;/div&gt;
+			`).join('');
+		}
+		document.getElementById('user-list').innerHTML = renderUsers(users);
+		function editUser(id) {
+			console.log(`Editing user ${id}`);
+		}
+	&lt;/script&gt;
+&lt;/body&gt;
+&lt;/html&gt;
+		</syntax-code>
+	</div>
+	<script type="module">
+		import Syntax from '../Syntax.js';
+		// Initialize highlighting
+		await Syntax.highlight({
+			autoUpgrade: true,
+			syntax: Syntax.default
+		});
+	</script>
+</body>
+</html>