Merge pull request #4 from nullscript-lang/dev

Dev

Author: kiron0

.vitepress/components/NullScriptPlayground.vue

@@ -5,13 +5,53 @@ export default defineConfig({
   description:
     "A fun parody programming language that transpiles to JavaScript",
   base: "/",
+  appearance: true,
+  srcDir: "src",
+  assetsDir: "assets",
   head: [
-    ["link", { rel: "icon", href: "/logo.png" }],
-    ["link", { rel: "apple-touch-icon", href: "/logo.png" }],
+    ["link", { rel: "icon", href: "/assets/logo.png" }],
+    ["link", { rel: "apple-touch-icon", href: "/assets/logo.png" }],
+    // Open Graph / Facebook
+    ["meta", { property: "og:type", content: "website" }],
+    [
+      "meta",
+      {
+        property: "og:title",
+        content: "NullScript - JavaScript with Attitude",
+      },
+    ],
+    [
+      "meta",
+      {
+        property: "og:description",
+        content:
+          "A fun parody programming language that transpiles to JavaScript",
+      },
+    ],
+    ["meta", { property: "og:image", content: "/assets/og-image.png" }],
+    ["meta", { property: "og:url", content: "https://nullscript.js.org" }],
+    // Twitter
+    ["meta", { name: "twitter:card", content: "summary_large_image" }],
+    [
+      "meta",
+      {
+        name: "twitter:title",
+        content: "NullScript - JavaScript with Attitude",
+      },
+    ],
+    [
+      "meta",
+      {
+        name: "twitter:description",
+        content:
+          "A fun parody programming language that transpiles to JavaScript",
+      },
+    ],
+    ["meta", { name: "twitter:image", content: "/assets/og-image.png" }],
   ],
   themeConfig: {
     logo: {
-      src: "/logo.png",
+      src: "/assets/logo.png",
       alt: "NullScript Logo",
       style: {
         borderRadius: "10%",

.vitepress/components/playground.vue

@@ -0,0 +1,52 @@
+:root {
+  --vp-c-brand-1: #f7df1e;
+  --vp-c-brand-2: #e6c800;
+  --vp-button-brand-bg: #f7df1e;
+  --vp-button-brand-hover-bg: #e6c800;
+  --vp-button-brand-text: #000;
+  --vp-button-brand-hover-text: #000;
+  --vp-code-bg: #f7df1e;
+  --vp-code-color: #000;
+}
+
+.dark {
+  --vp-c-neutral-1: #000;
+  --vp-code-bg: #333;
+  --vp-code-color: #f7df1e;
+}
+
+/* Custom scrollbar */
+::-webkit-scrollbar {
+  width: 6px;
+}
+
+::-webkit-scrollbar-track {
+  background: var(--vp-c-bg-soft);
+  border-radius: 3px;
+}
+
+::-webkit-scrollbar-thumb {
+  background: var(--vp-c-brand);
+  border-radius: 3px;
+  transition: background 0.2s ease;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: var(--vp-c-brand-light);
+}
+
+/* Custom animations */
+@keyframes fadeInUp {
+  from {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.VPHome .VPHomeHero .container .main {
+  animation: fadeInUp 0.6s ease-out;
+}

.vitepress/config.ts

@@ -1,9 +1,10 @@
 import DefaultTheme from "vitepress/theme";
-import NullScriptPlayground from "../components/NullScriptPlayground.vue";
+import Playground from "../components/playground.vue";
+import "./custom.css";
 
 export default {
   ...DefaultTheme,
   enhanceApp({ app }) {
-    app.component("NullScriptPlayground", NullScriptPlayground);
+    app.component("Playground", Playground);
   },
 };

.vitepress/theme/custom.css

@@ -40,6 +40,7 @@ nullscript run hello.ns
 ```
 
 Output:
+
 ```
 Hello, World! Welcome to NullScript! 🎭
 ```
@@ -50,19 +51,19 @@ Hello, World! Welcome to NullScript! 🎭
 
 NullScript replaces traditional JavaScript keywords with more expressive alternatives:
 
-| JavaScript | NullScript | Description |
-|------------|------------|-------------|
-| `function` | `run` | Define a function |
-| `const` | `fixed` | Constant variable |
-| `let` | `let` | Mutable variable |
-| `console.log` | `speak.say` | Print to console |
-| `console.error` | `speak.scream` | Print error |
-| `if` | `whatever` | Conditional statement |
-| `else` | `otherwise` | Else clause |
-| `true` | `yes` | Boolean true |
-| `false` | `no` | Boolean false |
-| `class` | `model` | Define a class |
-| `new` | `fresh` | Create instance |
+| JavaScript      | NullScript     | Description           |
+| --------------- | -------------- | --------------------- |
+| `function`      | `run`          | Define a function     |
+| `const`         | `fixed`        | Constant variable     |
+| `let`           | `let`          | Mutable variable      |
+| `console.log`   | `speak.say`    | Print to console      |
+| `console.error` | `speak.scream` | Print error           |
+| `if`            | `whatever`     | Conditional statement |
+| `else`          | `otherwise`    | Else clause           |
+| `true`          | `yes`          | Boolean true          |
+| `false`         | `no`           | Boolean false         |
+| `class`         | `model`        | Define a class        |
+| `new`           | `fresh`        | Create instance       |
 
 ### Basic Syntax Examples
 
@@ -226,6 +227,7 @@ speak.say(`Result: ${sum}`);
 ### Module System
 
 **math.ns**
+
 ```nullscript
 fixed PI = 3.14159;
 
@@ -241,6 +243,7 @@ share { PI, calculateArea, calculateCircumference };
 ```
 
 **main.ns**
+
 ```nullscript
 use { calculateArea, calculateCircumference } from './math.ns';
 
@@ -303,14 +306,14 @@ run later fetchAndFormatData() {
 
 ```javascript
 // Import compiled NullScript module
-import { greet, calculateSum } from './compiled/utils.js';
+import { greet, calculateSum } from "./compiled/utils.js";
 
 // Use NullScript functions in JavaScript
 const message = greet("JavaScript Developer");
 const sum = calculateSum(10, 20);
 
 console.log(message); // Output from NullScript function
-console.log(sum);     // Output from NullScript function
+console.log(sum); // Output from NullScript function
 ```
 
 ## 🎯 Why Choose NullScript?
@@ -334,11 +337,11 @@ console.log(sum);     // Output from NullScript function
 
 ## 📚 Documentation
 
-- **[Getting Started Guide](./guide/getting-started.md)** - Complete setup and first steps
-- **[Language Reference](./reference/keywords.md)** - Full keyword mapping and syntax
-- **[Examples](./examples/basic.md)** - More code examples and patterns
-- **[CLI Documentation](./cli/usage.md)** - Complete command-line interface guide
-- **[Interactive Playground](./playground.md)** - Try NullScript in your browser
+- **[Getting Started Guide](./src/guide/getting-started.md)** - Complete setup and first steps
+- **[Language Reference](./src/reference/keywords.md)** - Full keyword mapping and syntax
+- **[Examples](./src/examples/basic.md)** - More code examples and patterns
+- **[CLI Documentation](./src/cli/usage.md)** - Complete command-line interface guide
+- **[Interactive Playground](./src/playground.md)** - Try NullScript in your browser
 
 ## 🤝 Contributing
 
@@ -366,4 +369,4 @@ NullScript embraces the joy of coding while maintaining the power and flexibilit
 
 **Ready to add some attitude to your JavaScript?** 🚀
 
-[Get Started](./guide/getting-started.md) | [Try the Playground](./playground.md) | [View Examples](./examples/basic.md)
+[Get Started](./src/guide/getting-started.md) | [Try the Playground](./src/playground.md) | [View Examples](./src/examples/basic.md)

.vitepress/theme/index.ts

@@ -7,15 +7,17 @@
     "dev": "vitepress dev",
     "build": "vitepress build",
     "preview": "vitepress preview",
-    "clean": "rm -rf .vitepress/dist"
+    "clean": "rm -rf .vitepress/dist",
+    "format": "prettier --write \"**/*.{js,json,md,vue}\""
   },
   "dependencies": {
     "vitepress": "^1.0.0-rc.36",
     "vue": "^3.3.13"
   },
   "devDependencies": {
     "@types/node": "^20.10.6",
-    "gh-pages": "^6.3.0"
+    "gh-pages": "^6.3.0",
+    "prettier": "^3.6.2"
   },
   "keywords": [
     "nullscript",
@@ -28,5 +30,5 @@
     "type": "git",
     "url": "https://github.com/nullscript-lang/nullscript-docs.git"
   },
-  "homepage": "https://nullscript-lang.github.io/nullscript/"
+  "homepage": "https://nullscript.js.org"
 }