{"id":26024507,"url":"https://github.com/tmhsdigital/embed-tester","last_synced_at":"2026-03-08T12:39:18.255Z","repository":{"id":278256433,"uuid":"935027419","full_name":"TMHSDigital/embed-tester","owner":"TMHSDigital","description":"A barebones site used to test embeddable elements, such as maps or charts. ","archived":false,"fork":false,"pushed_at":"2025-02-18T20:28:52.000Z","size":6,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-02-18T20:41:30.717Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://tmhsdigital.github.io/embed-tester/","language":null,"has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/TMHSDigital.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2025-02-18T19:36:54.000Z","updated_at":"2025-02-18T20:28:55.000Z","dependencies_parsed_at":"2025-02-18T20:41:33.040Z","dependency_job_id":null,"html_url":"https://github.com/TMHSDigital/embed-tester","commit_stats":null,"previous_names":["tmhsdigital/embed-tester"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TMHSDigital%2Fembed-tester","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TMHSDigital%2Fembed-tester/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TMHSDigital%2Fembed-tester/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TMHSDigital%2Fembed-tester/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/TMHSDigital","download_url":"https://codeload.github.com/TMHSDigital/embed-tester/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":242212509,"owners_count":20090512,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-03-06T12:34:31.860Z","updated_at":"2026-03-08T12:39:18.249Z","avatar_url":"https://github.com/TMHSDigital.png","language":null,"readme":"\u003cdiv align=\"center\"\u003e\n  \u003ch1 style=\"font-size: 3rem; font-weight: 700; margin-bottom: 1rem; background: linear-gradient(to right, #4facfe 0%, #00f2fe 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent;\"\u003eEMBED-TESTER\u003c/h1\u003e\n  \n  \u003cp style=\"font-size: 1.2rem; font-weight: 500; margin-bottom: 1.5rem; background: linear-gradient(to right, #a1c4fd 0%, #c2e9fb 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent;\"\u003eTest your embeddable elements with ease\u003c/p\u003e\n  \n  \u003cdiv style=\"display: flex; justify-content: center; gap: 1rem; margin-bottom: 1.5rem;\"\u003e\n    \u003cspan style=\"padding: 0.5rem 1rem; border-radius: 8px; background: linear-gradient(to right, #84fab0 0%, #8fd3f4 100%); font-weight: 600; color: #1a202c;\"\u003eModern UI\u003c/span\u003e\n    \u003cspan style=\"padding: 0.5rem 1rem; border-radius: 8px; background: linear-gradient(to right, #fa709a 0%, #fee140 100%); font-weight: 600; color: #1a202c;\"\u003eSecure\u003c/span\u003e\n    \u003cspan style=\"padding: 0.5rem 1rem; border-radius: 8px; background: linear-gradient(to right, #a18cd1 0%, #fbc2eb 100%); font-weight: 600; color: #1a202c;\"\u003eResponsive\u003c/span\u003e\n  \u003c/div\u003e\n\u003c/div\u003e\n\n\u003cdiv align=\"center\"\u003e\n\n[![Live Demo](https://img.shields.io/badge/demo-live-brightgreen.svg?style=for-the-badge)](https://tmhsdigital.github.io/embed-tester)\n[![License](https://img.shields.io/badge/license-Apache%202.0-blue.svg?style=for-the-badge)](LICENSE)\n[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=for-the-badge)](http://makeapullrequest.com)\n\n  \u003ch1\u003eembed-tester\u003c/h1\u003e\n  \u003cp\u003eA modern, lightweight site to test embeddable elements, such as maps, charts, and interactive widgets.\u003c/p\u003e\n\n  \u003c!-- Animated Divider --\u003e\n  \u003cimg src=\"https://user-images.githubusercontent.com/73097560/115834477-dbab4500-a447-11eb-908a-139a6edaec5c.gif\"\u003e\n\n  \u003c!-- Animated Banner --\u003e\n  \u003cdiv style=\"position: relative; width: 100%; height: 0; padding-bottom: 56.25%; overflow: hidden; background: rgba(0,0,0,0.1); z-index: 0;\"\u003e\n    \u003cimg src=\"https://i.giphy.com/media/v1.Y2lkPTc5MGI3NjExdDZ5aXl6dXUzY3gxbDNldG00dWtsNTJ0NWEzdWN5bXM3bnNvMjlsbCZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/L6Mgrfcc6Y9PS2Nm6B/giphy.gif\" style=\"position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; opacity: 0.15; pointer-events: none;\" alt=\"Background GIF\"\u003e\n  \u003c/div\u003e\n\n  \u003c!-- Animated Divider --\u003e\n  \u003cimg src=\"https://user-images.githubusercontent.com/73097560/115834477-dbab4500-a447-11eb-908a-139a6edaec5c.gif\"\u003e\n\n  \u003c!-- Animated Text --\u003e\n  \u003cimg src=\"https://readme-typing-svg.herokuapp.com?font=Fira+Code\u0026pause=1000\u0026color=2EF7A5\u0026center=true\u0026vCenter=true\u0026width=435\u0026lines=Welcome+to+embed-tester;Test+Your+Embeddable+Elements;Enjoy+the+Demo\" alt=\"Typing SVG\" /\u003e\n\n\u003c/div\u003e\n\n\u003cdiv align=\"center\"\u003e\n  \u003ch2 style=\"font-size: 2.2rem; margin-top: 2rem; margin-bottom: 1.5rem; background: linear-gradient(to right, #6a11cb 0%, #2575fc 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent;\"\u003eFeatures\u003c/h2\u003e\n\u003c/div\u003e\n\n- **Predefined Embeds:** Quickly test common embeds like Google Maps, Plotly Charts (example), and YouTube videos.\n- **Custom Code Input:** Paste your own HTML embed code into a textarea for testing.\n- **Code Preview:** Safely preview the structure of your custom HTML code before embedding.\n- **Responsive Testing:** Resize the embed container instantly to common device widths (Mobile, Tablet, Desktop) or fit it to the available space.\n- **Configurable Sandbox:** Dynamically adjust the `sandbox` attribute permissions for the custom embed iframe using checkboxes. Dangerous permissions (`allow-same-origin`, `allow-top-navigation`) trigger user confirmation dialogs.\n- **Dark Mode:** Toggle between light and dark themes, with preference saved to `localStorage`.\n- **Save/Load Configuration:** Save your custom embed code and selected sandbox permissions to `localStorage` and automatically load them on your next visit. Use the \"Save Config\" and \"Load Config\" buttons.\n- **Clean UI:** Modern interface with clear controls and improved error/placeholder feedback.\n- **Security Conscious:** Uses `srcdoc` for custom code, dynamically configured `sandbox` attributes, confirmation dialogs, and a Content Security Policy (CSP) meta tag.\n- **Accessibility Aware:** Includes keyboard navigation shortcuts (e.g., Ctrl+E to Embed), visible focus indicators, and ARIA attributes.\n- **Help System:** Minimalistic tooltips provide context for sandbox permissions on click/hover.\n- **Optimized:** Includes performance enhancements like debounced resizing and lazy-loaded icons.\n\n\u003cdiv align=\"center\"\u003e\n  \u003ch2 style=\"font-size: 2.2rem; margin-top: 2rem; margin-bottom: 1.5rem; background: linear-gradient(to right, #ff9a9e 0%, #fad0c4 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent;\"\u003eQuick Start\u003c/h2\u003e\n\u003c/div\u003e\n\n1.  **Clone the repository**\n    ```bash\n    git clone https://github.com/TMHSDigital/embed-tester.git\n    cd embed-tester\n    ```\n\n2.  **Open in browser**\n    Simply open the `docs/index.html` file in your web browser. No build step or local server is required.\n\n3.  **Or visit the Live Demo:** [https://tmhsdigital.github.io/embed-tester](https://tmhsdigital.github.io/embed-tester)\n\n\n\u003cdiv align=\"center\"\u003e\n  \u003ch2 style=\"font-size: 2.2rem; margin-top: 2rem; margin-bottom: 1.5rem; background: linear-gradient(to right, #43e97b 0%, #38f9d7 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent;\"\u003eProject Structure\u003c/h2\u003e\n\u003c/div\u003e\n\nThe website files are in the `docs` folder for GitHub Pages compatibility:\n```\ndocs/\n├── index.html          # Main HTML file\n├── styles.css         # Main CSS file (imports others)\n├── embed.js          # Core functionality\n├── API.md           # API documentation\n└── css/            # CSS modules\n    ├── base.css    # Root variables, body, containers\n    ├── header.css  # Header styles\n    ├── footer.css  # Footer styles\n    └── buttons.css # Button and control styles\n```\n\n## Usage Guide\n\n1.  **Select Embed Type:** Click the \"Map\", \"Chart\", or \"YouTube\" buttons to load predefined examples.\n2.  **Use Custom Code:** Paste your own HTML embed code into the large textarea.\n3.  **Configure Sandbox (for Custom Code):** Check/uncheck the desired sandbox permissions below the textarea. Use the help icons (?) for more information about each permission. Be cautious with dangerous permissions (highlighted).\n4.  **Preview (for Custom Code):** Click the \"Preview Code\" button to see a static render of your HTML structure before embedding.\n5.  **Embed Custom Code:** Click the \"Embed Custom Code\" button. You may be prompted for confirmation if dangerous permissions are selected.\n6.  **Test Responsiveness:** Use the \"Mobile\", \"Tablet\", \"Desktop\", and \"Fit Container\" buttons to resize the preview area.\n7.  **Manage Configuration:** Use \"Save Config\" to store your custom code and sandbox settings in your browser's local storage for your next visit. \"Load Config\" manually reloads the last saved configuration.\n8.  **Toggle Theme:** Use the \"Theme\" button to switch between light and dark modes.\n9.  **Clear:** Use the \"Clear\" button to remove the current embed and reset the preview area.\n\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftmhsdigital%2Fembed-tester","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftmhsdigital%2Fembed-tester","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftmhsdigital%2Fembed-tester/lists"}