Initial commit

Author: B-i-t-K

.github/workflows/build.yml

@@ -0,0 +1,40 @@
+name: Build and Deploy Dom-Explorer
+
+on:
+  push:
+    branches:
+      - main
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    steps:
+    - name: Checkout code
+      uses: actions/[email protected]
+
+    - name: Set up Bun
+      uses: oven-sh/setup-bun@v2
+
+    - name: Install dependencies
+      run: bun install
+
+    - name: Build
+      run: bun run build
+
+    - name: Upload GitHub Pages artifact
+      uses: actions/[email protected]
+      with:
+        path: .output/public
+
+  deploy:
+    runs-on: ubuntu-latest
+    needs: build
+    permissions:
+      pages: write
+      id-token: write
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    steps:
+    - name: Deploy GitHub Pages site
+      uses: actions/[email protected]

.gitignore

@@ -0,0 +1,27 @@
+# Nuxt dev/build outputs
+.output
+.data
+.nuxt
+.nitro
+.cache
+dist
+
+# Node dependencies
+node_modules
+.angular
+
+# Logs
+logs
+*.log
+
+# Misc
+.DS_Store
+.fleet
+.idea
+
+# Local env files
+.env
+.env.*
+!.env.example
+
+*.local

.vscode/settings.json

@@ -0,0 +1,17 @@
+{
+  "files.exclude": {
+    "**/.git": true,
+    "**/.svn": true,
+    "**/.hg": true,
+    "**/CVS": true,
+    "**/.DS_Store": true,
+    "**/Thumbs.db": true,
+    "**/node_modules": false,
+    "**/.nuxt": false
+  },
+  "css.customData": [
+    ".vscode/tailwind.json"
+  ],
+  "typescript.tsdk": "node_modules/typescript/lib",
+  "liveServer.settings.port": 5501
+}

.vscode/tailwind.json

@@ -0,0 +1,55 @@
+{
+  "version": 1.1,
+  "atDirectives": [
+    {
+      "name": "@tailwind",
+      "description": "Use the `@tailwind` directive to insert Tailwind's `base`, `components`, `utilities` and `screens` styles into your CSS.",
+      "references": [
+        {
+          "name": "Tailwind Documentation",
+          "url": "https://tailwindcss.com/docs/functions-and-directives#tailwind"
+        }
+      ]
+    },
+    {
+      "name": "@apply",
+      "description": "Use the `@apply` directive to inline any existing utility classes into your own custom CSS. This is useful when you find a common utility pattern in your HTML that you’d like to extract to a new component.",
+      "references": [
+        {
+          "name": "Tailwind Documentation",
+          "url": "https://tailwindcss.com/docs/functions-and-directives#apply"
+        }
+      ]
+    },
+    {
+      "name": "@responsive",
+      "description": "You can generate responsive variants of your own classes by wrapping their definitions in the `@responsive` directive:\n```css\n@responsive {\n  .alert {\n    background-color: #E53E3E;\n  }\n}\n```\n",
+      "references": [
+        {
+          "name": "Tailwind Documentation",
+          "url": "https://tailwindcss.com/docs/functions-and-directives#responsive"
+        }
+      ]
+    },
+    {
+      "name": "@screen",
+      "description": "The `@screen` directive allows you to create media queries that reference your breakpoints by **name** instead of duplicating their values in your own CSS:\n```css\n@screen sm {\n  /* ... */\n}\n```\n…gets transformed into this:\n```css\n@media (min-width: 640px) {\n  /* ... */\n}\n```\n",
+      "references": [
+        {
+          "name": "Tailwind Documentation",
+          "url": "https://tailwindcss.com/docs/functions-and-directives#screen"
+        }
+      ]
+    },
+    {
+      "name": "@variants",
+      "description": "Generate `hover`, `focus`, `active` and other **variants** of your own utilities by wrapping their definitions in the `@variants` directive:\n```css\n@variants hover, focus {\n   .btn-brand {\n    background-color: #3182CE;\n  }\n}\n```\n",
+      "references": [
+        {
+          "name": "Tailwind Documentation",
+          "url": "https://tailwindcss.com/docs/functions-and-directives#variants"
+        }
+      ]
+    }
+  ]
+}

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 BitK
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -0,0 +1,52 @@
+# Dom-Explorer
+
+Dom-Explorer is a web-based tool designed for testing various HTML parsers and sanitizers. It displays the results of each parser as a tree and allows users to create pipelines that chain multiple parsers to visualize the transformation of HTML at each step. 
+
+This repository contains the source code for the website published at: [Dom-Explorer Website](https://b-i-t-k.github.io/Dom-Explorer/).
+
+## Features
+
+- **Parser/Sanitizer Support:**
+  - [Ammonia](https://github.com/rust-ammonia/ammonia)
+  - [Angular](https://angular.io/)
+  - [DomParser](https://developer.mozilla.org/en-US/docs/Web/API/DOMParser)
+  - [DomPurify](https://github.com/cure53/DOMPurify)
+  - [HighlightJs](https://highlightjs.org/)
+  - [JsXss](https://jsxss.com/en/index.html)
+  - [Parse5](https://github.com/inikulin/parse5)
+  - [SafeValues](https://github.com/google/safevalues)
+  - [SrcdocParser](https://developer.mozilla.org/en-US/docs/Web/API/HTMLIFrameElement/srcdoc)
+  - [TemplateParser](https://developer.mozilla.org/en-US/docs/Web/API/HTMLTemplateElement)
+
+- **Tab Sync:**  
+  Synchronizes pipelines and HTML parsing across multiple browser tabs in real-time.
+
+- **Embeddable Pipelines:**  
+  Users can embed pipelines into their websites as an iframe for others to interact with.
+
+- **Presets:**  
+  Save commonly used pipelines for easy reuse.
+
+- **Shareable URL:**  
+  Share pipelines by simply copying and pasting the URL. The state of the pipeline is embedded in the URL, making it easy to share with others.
+
+## Getting Started
+
+To get started with Dom-Explorer:
+
+1. Clone the project and install dependencies:
+   ```bash
+   git clone https://github.com/b-i-t-k/Dom-Explorer.git
+   cd Dom-Explorer
+   bun install
+   ```
+
+2. Run the development server:
+   ```bash
+   cd web
+   bun run --bun dev
+   ```
+
+## Contributing
+
+Contributions are welcome! Feel free to open issues or submit pull requests to improve this tool.

app/app.vue

@@ -0,0 +1,16 @@
+<template>
+  <div>
+    <ClientOnly>
+      <TooltipProvider>
+        <NuxtLayout />
+      </TooltipProvider>
+    </ClientOnly>
+  </div>
+</template>
+<script lang="ts" setup>
+import "./assets/style.css";
+import "highlight.js/styles/github-dark-dimmed.min.css"
+
+</script>
+
+<style lang="scss"></style>

app/assets/style.css

@@ -0,0 +1,91 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  :root {
+    /* Name: custom color palette
+       Author: Ilias Ism
+       URL: https://gradient.page */
+
+    /* CSS: .bg-gradient { background: var(--gradient) } */
+    --gradient: linear-gradient(to top left,#000C40,#607D8B);
+    --background: 243 100% 98.26%;
+    --foreground: 243 10% 0.52%;
+
+    --muted: 243 10% 91.3%;
+    --muted-foreground: 243 5% 41.3%;
+
+    --popover: 243 10% 91.3%;
+    --popover-foreground: 243 10% 0.65%;
+
+    --card: 243 10% 91.3%;
+    --card-foreground: 243 10% 0.65%;
+
+    --border: 243 15% 89.52%;
+    --input: 243 15% 89.52%;
+
+    --primary: 243 100% 13%;
+    --primary-foreground: 243 2% 91.3%;
+
+    --secondary: 243 5% 73.9%;
+    --secondary-foreground: 243 7% 11.3%;
+
+    --accent: 243 5% 73.9%;
+    --accent-foreground: 243 7% 11.3%;
+
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 0 0% 98%;
+
+    --ring: 243 100% 13%;
+
+    --radius: 0.5rem;
+
+    
+    /* Name: custom color palette
+       Author: Ilias Ism
+       URL: https://gradient.page */
+
+    /* CSS: .bg-gradient { background: var(--gradient) } */
+    --gradient: linear-gradient(to top left, #3a6186, #89253e);
+
+    --background: 222 26% 3.04%;
+    --foreground: 222 4% 96.9%;
+
+    --muted: 222 20% 11.4%;
+    --muted-foreground: 222 4% 53.8%;
+
+    --popover: 222 57% 4.94%;
+    --popover-foreground: 222 4% 96.9%;
+
+    --card: 222 57% 4.94%;
+    --card-foreground: 222 4% 96.9%;
+
+    --border: 222 20% 11.4%;
+    --input: 222 20% 11.4%;
+
+    --primary: 222 40% 38%;
+    --primary-foreground: 222 4% 96.9%;
+
+    --secondary: 222 20% 11.4%;
+    --secondary-foreground: 222 4% 96.9%;
+
+    --accent: 222 20% 11.4%;
+    --accent-foreground: 222 4% 96.9%;
+
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 222 4% 96.9%;
+
+    --ring: 222 40% 38%;
+  }
+}
+
+@layer base {
+  [class*="border"] {
+    @apply border-border;
+  }
+}
+
+html {
+  @apply bg-black text-foreground;
+}