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/clang.html ADDED Viewed

@@ -0,0 +1,202 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="UTF-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+	<title>C/C++ Examples - @socketry/syntax</title>
+	<link rel="stylesheet" href="examples.css">
+</head>
+<body>
+	<header>
+		<h1>C/C++ Examples</h1>
+		<p class="subtitle">C/C++ syntax highlighting</p>
+	</header>
+	<nav>
+		<a href="index.html">Back to Examples</a>
+	</nav>
+<h1>C/C++/Objective-C Syntax Highlighting</h1>
+	<div class="example">
+		<h2>C Example</h2>
+		<syntax-code language="c">
+#include &lt;stdio.h&gt;
+#include &lt;stdlib.h&gt;
+#define MAX_SIZE 100
+typedef struct {
+	int x;
+	int y;
+} Point;
+int main(int argc, char *argv[]) {
+	// Initialize variables
+	Point p = {10, 20};
+	size_t count = 0;
+	/* Print the point */
+	printf("Point: (%d, %d)\n", p.x, p.y);
+	// Character and strings
+	char ch = 'A';
+	char *message = "Hello, World!\n";
+	// Numbers
+	int decimal = 42;
+	int hex = 0xFF00;
+	double pi = 3.14159;
+	// Boolean logic
+	if (p.x &gt; 0 &amp;&amp; p.y &gt; 0) {
+		printf("First quadrant\n");
+	}
+	return 0;
+}
+		</syntax-code>
+	</div>
+	<div class="example">
+		<h2>C++ Example</h2>
+		<syntax-code language="cpp">
+#include &lt;iostream&gt;
+#include &lt;vector&gt;
+#include &lt;string&gt;
+namespace MyNamespace {
+	class MyClass {
+	private:
+		std::string name;
+		int value;
+	public:
+		MyClass(const std::string&amp; n) : name(n), value(0) {}
+		virtual void doSomething() {
+			std::cout &lt;&lt; "Name: " &lt;&lt; name &lt;&lt; std::endl;
+		}
+		virtual ~MyClass() = default;
+	};
+	template&lt;typename T&gt;
+	class Container {
+	private:
+		std::vector&lt;T&gt; items;
+	public:
+		void add(const T&amp; item) {
+			items.push_back(item);
+		}
+		size_t size() const {
+			return items.size();
+		}
+	};
+}
+int main() {
+	using namespace MyNamespace;
+	// Create objects
+	MyClass obj("Example");
+	Container&lt;int&gt; numbers;
+	// Add numbers
+	for (int i = 0; i &lt; 10; ++i) {
+		numbers.add(i);
+	}
+	// Boolean values
+	bool flag = true;
+	void *ptr = NULL;
+	// Call method
+	obj.doSomething();
+	return 0;
+}
+		</syntax-code>
+	</div>
+	<div class="example">
+		<h2>Objective-C Example</h2>
+		<syntax-code language="objective-c">
+#import &lt;Foundation/Foundation.h&gt;
+@interface Person : NSObject
+@property (nonatomic, retain) NSString *name;
+@property (nonatomic, assign) NSInteger age;
+@property (nonatomic, copy) NSString *email;
+- (instancetype)initWithName:(NSString *)name age:(NSInteger)age;
+- (void)sayHello;
+- (NSString *)description;
+@end
+@implementation Person
+- (instancetype)initWithName:(NSString *)name age:(NSInteger)age {
+	self = [super init];
+	if (self) {
+		_name = [name copy];
+		_age = age;
+	}
+	return self;
+}
+- (void)sayHello {
+	NSLog(@"Hello, my name is %@", self.name);
+}
+- (NSString *)description {
+	return [NSString stringWithFormat:@"Person(name=%@, age=%ld)",
+		self.name, (long)self.age];
+}
+@end
+int main(int argc, char *argv[]) {
+	@autoreleasepool {
+		// Create person
+		Person *person = [[Person alloc] initWithName:@"John Doe" age:30];
+		person.email = @"john@example.com";
+		// Call methods
+		[person sayHello];
+		NSLog(@"%@", [person description]);
+		// Objective-C literals
+		NSArray *array = @[@"one", @"two", @"three"];
+		NSDictionary *dict = @{@"key": @"value"};
+		NSNumber *number = @42;
+		// Boolean values
+		BOOL success = YES;
+		if (success) {
+			NSLog(@"Success!");
+		}
+	}
+	return 0;
+}
+		</syntax-code>
+	</div>
+	<script type="module">
+		import Syntax from '../Syntax.js';
+		import '../Syntax/CodeElement.js';
+		import clang from '../Syntax/Language/clang.js';
+		const syntax = Syntax.default;
+		clang(syntax);
+		console.log('Clang language registered with aliases:', ['c', 'cpp', 'c++', 'objective-c']);
+	</script>
+</body>
+</html>

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

@@ -0,0 +1,110 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta charset="UTF-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+	<title>C# Examples - @socketry/syntax</title>
+	<link rel="stylesheet" href="examples.css">
+</head>
+<body>
+	<header>
+		<h1>C# Examples</h1>
+		<p class="subtitle">C# syntax highlighting</p>
+	</header>
+	<nav>
+		<a href="index.html">Back to Examples</a>
+	</nav>
+<h1>C# Syntax Highlighting</h1>
+	<syntax-code language="csharp">
+using System;
+using System.Collections.Generic;
+using System.Linq;
+namespace ExampleApp
+{
+    /// <summary>
+    /// Represents a person with basic information
+    /// </summary>
+    public class Person
+    {
+        public string Name { get; set; }
+        public int Age { get; private set; }
+        private readonly List<string> _hobbies;
+        public Person(string name, int age)
+        {
+            Name = name;
+            Age = age;
+            _hobbies = new List<string>();
+        }
+        public void AddHobby(string hobby)
+        {
+            if (!string.IsNullOrEmpty(hobby))
+            {
+                _hobbies.Add(hobby);
+            }
+        }
+        public override string ToString()
+        {
+            return $"{Name} ({Age} years old)";
+        }
+    }
+    public class Calculator
+    {
+        public static double Add(double a, double b) => a + b;
+        public static double Multiply(params double[] numbers)
+        {
+            return numbers.Aggregate(1.0, (acc, n) => acc * n);
+        }
+    }
+    class Program
+    {
+        static void Main(string[] args)
+        {
+            // Create person
+            var person = new Person("John Doe", 30);
+            person.AddHobby("Reading");
+            person.AddHobby("Gaming");
+            Console.WriteLine(person);
+            // LINQ example
+            var numbers = new[] { 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 };
+            var evenNumbers = numbers.Where(n => n % 2 == 0)
+                                    .Select(n => n * n);
+            foreach (var num in evenNumbers)
+            {
+                Console.WriteLine($"Square: {num}");
+            }
+            // Async/await pattern
+            ProcessDataAsync().Wait();
+        }
+        static async Task ProcessDataAsync()
+        {
+            await Task.Delay(1000);
+            Console.WriteLine("Data processed!");
+        }
+    }
+}
+	</syntax-code>
+	</div>
+	<script type="module">
+		import Syntax from '../Syntax.js';
+		await Syntax.highlight({ autoUpgrade: true });
+	</script>
+</body>
+</html>

data/public/_components/@socketry/syntax/examples/css-colors.html ADDED Viewed

@@ -0,0 +1,179 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="UTF-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+	<title>CSS Examples - @socketry/syntax</title>
+	<link rel="stylesheet" href="examples.css">
+	<style>
+		/* Styling for color box visualization */
+		.colour-box {
+			display: inline-block;
+			margin-left: 5px;
+			vertical-align: middle;
+		}
+		.colour-box .sample {
+			display: inline-block;
+			width: 20px;
+			height: 20px;
+			border: 1px solid #333;
+			border-radius: 3px;
+			vertical-align: middle;
+		}
+	</style>
+</head>
+<body>
+	<header>
+		<h1>CSS Examples</h1>
+		<p class="subtitle">CSS syntax with color visualization boxes</p>
+	</header>
+	<nav>
+		<a href="index.html">Back to Examples</a>
+		<a href="html.html">HTML</a>
+		<a href="javascript.html">JavaScript</a>
+	</nav>
+	<div class="example">
+		<h2>Complete CSS Stylesheet</h2>
+		<p class="description">CSS with colors, selectors, media queries, and animations - colors show inline preview boxes:</p>
+		<syntax-code language="css">
+/* CSS Stylesheet Example */
+:root {
+	--primary-color: #3498db;
+	--secondary-color: #2ecc71;
+	--danger-color: rgb(231, 76, 60);
+}
+body {
+	font-family: 'Arial', sans-serif;
+	background-color: #f4f4f4;
+	color: #333;
+	margin: 0;
+	padding: 20px;
+}
+.container {
+	max-width: 1200px;
+	margin: 0 auto;
+	background: white;
+	padding: 30px;
+	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+}
+/* Headings */
+h1, h2, h3 {
+	color: #2c3e50;
+	margin-bottom: 15px;
+}
+h1 {
+	font-size: 2.5em;
+	border-bottom: 3px solid #3498db;
+}
+/* Buttons */
+.btn {
+	display: inline-block;
+	padding: 10px 20px;
+	background-color: #3498db;
+	color: white;
+	border: none;
+	border-radius: 5px;
+	cursor: pointer;
+	transition: background-color 0.3s ease;
+}
+.btn:hover {
+	background-color: #2980b9;
+}
+.btn-success {
+	background: linear-gradient(135deg, #2ecc71, #27ae60);
+}
+.btn-danger {
+	background-color: rgba(231, 76, 60, 0.9);
+}
+/* Named colors */
+.alert {
+	background-color: LightYellow;
+	border: 1px solid Gold;
+	color: DarkOrange;
+	padding: 15px;
+}
+.info {
+	background-color: AliceBlue;
+	border-left: 4px solid CornflowerBlue;
+}
+/* HSL colors */
+.accent {
+	color: hsl(120, 100%, 50%);
+	background: hsla(240, 100%, 50%, 0.2);
+}
+/* Media queries */
+@media screen and (max-width: 768px) {
+	.container {
+		padding: 15px;
+	}
+	h1 {
+		font-size: 2em;
+	}
+}
+/* Animations */
+@keyframes fadeIn {
+	from {
+		opacity: 0;
+		transform: translateY(-20px);
+	}
+	to {
+		opacity: 1;
+		transform: translateY(0);
+	}
+}
+.fade-in {
+	animation: fadeIn 0.5s ease-in;
+}
+/* Pseudo-elements */
+.quote::before {
+	content: '"';
+	color: #95a5a6;
+}
+/* Attribute selectors */
+input[type="text"] {
+	border: 1px solid #bdc3c7;
+	padding: 8px;
+}
+input[type="submit"]:disabled {
+	opacity: 0.5;
+	cursor: not-allowed;
+}
+		</syntax-code>
+	</div>
+	<script type="module">
+		import Syntax from '../Syntax.js';
+		import registerCSS from '../Syntax/Language/css.js';
+		registerCSS(Syntax.default);
+		await Syntax.highlight({
+			autoUpgrade: true,
+			syntax: Syntax.default
+		});
+	</script>
+</body>
+</html>

data/public/_components/@socketry/syntax/examples/custom-theme.html ADDED Viewed

@@ -0,0 +1,155 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="UTF-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+	<title>Custom Theme Example - @socketry/syntax</title>
+	<style>
+		body {
+			font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+			max-width: 1200px;
+			margin: 0 auto;
+			padding: 2rem;
+			background: #f5f5f5;
+		}
+		h1 {
+			color: #333;
+			border-bottom: 2px solid #4ec9b0;
+			padding-bottom: 0.5rem;
+		}
+		.example {
+			margin: 2rem 0;
+			background: white;
+			padding: 1.5rem;
+			border-radius: 8px;
+			box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+		}
+		h2 {
+			color: #569cd6;
+			margin-top: 0;
+		}
+		.description {
+			margin-bottom: 1rem;
+			color: #666;
+		}
+		pre {
+			background: #f8f8f8;
+			border: 1px solid #ddd;
+			border-radius: 4px;
+			padding: 1rem;
+			overflow: auto;
+		}
+		/* Custom theme using CSS variables - Ocean theme */
+		.ocean-theme {
+			--syntax-base-hue: 200;  /* Ocean blue - all colors derive from this! */
+		}
+		/* Custom theme - Sunset theme */
+		.sunset-theme {
+			--syntax-base-hue: 30;   /* Orange - warm sunset colors */
+		}
+		/* Custom theme - Forest theme */
+		.forest-theme {
+			--syntax-base-hue: 140;  /* Green - natural forest palette */
+		}
+		/* Custom theme - High contrast */
+		.high-contrast-theme {
+			--syntax-base-hue: 270;
+			--syntax-base-saturation: 90%;   /* More vibrant */
+			--syntax-base-lightness: 40%;    /* Darker for more contrast */
+		}
+	</style>
+</head>
+<body>
+	<h1>Custom Theme Examples</h1>
+	<p>The new CSS variable system makes it incredibly easy to create custom themes.
+	   Just override <strong>one variable</strong> (<code>--syntax-base-hue</code>) and the entire color scheme updates automatically using hue rotation!</p>
+	<div class="example">
+		<h2>Default Theme</h2>
+		<p class="description">The base theme with standard colors:</p>
+		<pre><syntax-code language="javascript">// JavaScript example
+function greet(name) {
+	const message = `Hello, ${name}!`;
+	console.log(message);
+	return true;
+}
+</syntax-code></pre>
+	</div>
+	<div class="example">
+		<h2>Ocean Theme</h2>
+		<p class="description">Cool blues and teals - just set <code>--syntax-base-hue: 200</code>:</p>
+		<pre><syntax-code language="javascript" class="ocean-theme">// JavaScript example
+function greet(name) {
+	const message = `Hello, ${name}!`;
+	console.log(message);
+	return true;
+}
+</syntax-code></pre>
+	</div>
+	<div class="example">
+		<h2>Sunset Theme</h2>
+		<p class="description">Warm oranges, reds, and purples:</p>
+		<pre><syntax-code language="javascript" class="sunset-theme">// JavaScript example
+function greet(name) {
+	const message = `Hello, ${name}!`;
+	console.log(message);
+	return true;
+}
+</syntax-code></pre>
+	</div>
+	<div class="example">
+		<h2>Forest Theme</h2>
+		<p class="description">Natural greens and browns:</p>
+		<pre><syntax-code language="javascript" class="forest-theme">// JavaScript example
+function greet(name) {
+	const message = `Hello, ${name}!`;
+	console.log(message);
+	return true;
+}
+</syntax-code></pre>
+	</div>
+	<div class="example">
+		<h2>Markdown with Ocean Theme</h2>
+		<p class="description">Markdown uses semantic token types that work perfectly with custom themes:</p>
+		<pre><syntax-code language="markdown" class="ocean-theme"># Markdown Example
+This is **bold** and this is *italic*.
+Here's some `inline code` and a [link](https://example.com).
+> A blockquote looks nice too!
+- List item 1
+- List item 2
+</syntax-code></pre>
+	</div>
+	<script type="module">
+		import Syntax from '../Syntax.js';
+		// Automatically highlight all syntax-code elements
+		document.addEventListener('DOMContentLoaded', async function() {
+			await Syntax.highlight();
+		});
+	</script>
+</body>
+</html>