{"id":22044915,"url":"https://github.com/leabs/zen-mode","last_synced_at":"2026-02-10T08:31:40.019Z","repository":{"id":181324721,"uuid":"614456729","full_name":"leabs/zen-mode","owner":"leabs","description":"A quick and easy way to compile and share an array of embedded content in the browser.","archived":false,"fork":false,"pushed_at":"2025-02-11T14:04:24.000Z","size":10613,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-05-08T05:52:37.490Z","etag":null,"topics":["astro","iframes","youtube"],"latest_commit_sha":null,"homepage":"https://zen-mode.vercel.app","language":"Astro","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/leabs.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}},"created_at":"2023-03-15T16:09:45.000Z","updated_at":"2025-02-11T14:04:30.000Z","dependencies_parsed_at":"2023-12-31T20:33:59.112Z","dependency_job_id":null,"html_url":"https://github.com/leabs/zen-mode","commit_stats":null,"previous_names":["leabs/zen-mode"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/leabs%2Fzen-mode","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/leabs%2Fzen-mode/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/leabs%2Fzen-mode/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/leabs%2Fzen-mode/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/leabs","download_url":"https://codeload.github.com/leabs/zen-mode/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253009850,"owners_count":21839713,"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":["astro","iframes","youtube"],"created_at":"2024-11-30T13:09:35.246Z","updated_at":"2026-02-10T08:31:39.970Z","avatar_url":"https://github.com/leabs.png","language":"Astro","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Zen Mode\n\n[Zen Mode](https://zen-mode.vercel.app/) is a website which allows you to format individual websites or individual youtube videos into a high level view, and then share the link with your friends. **Currently this is limited to youtube videos, but I am working on adding support for more video sites and entire websites.**\n\nThis project basically ties together: an Astro static site, user selected flexbox properties, and user selected iframes paths.\n\n![Screenshot of Zen Mode](public/screenshot.png)\n\n## Why\n\nSometimes I find myself at my computer monitor trying to manage multiple sites or video streams in different tabs. I wanted to create a website which would allow me to format the iframe sites into a single window, and then share the link with my friends.\n\n## Use Cases\n\nHere are a few use cases I can think of:\n\n- Breaking news: You want to watch multiple videos and fullscreen the one that is most interesting to you.\n- Monitoring: You want to monitor multiple live streams like Train Cam footage, or a live stream of a city? \n- Collaborative Coding: An open window in an online IDE, docs site, and live preview.\n- Sharing: You want to share a URL of multiple videos with your friends? Zen mode lets you do that!\n\n## Note\n\n- Not all sites are supported. If you find a site that is not supported, please open an issue and I will try to add support for it.\n- Autoplay is currently disabled in Safari and iOS. I am working on a solution to this problem.\n\nStar and watch the [repo]() to get updates on new features!\n\n## How to use\n\n- Go to the website: [https://zen-mode.vercel.app/](https://zen-mode.vercel.app/)\n- If it is your first time here, click add videos to get started\n- Enter the URL of the website or video you want to display\n- Set the number of Rows you want\n- Set the number of Columns you want\n- The URL will update with your row and column count, as well as your video paths for easy sharing. This URL will likely be pretty long, so use a service like [tinyurl](https://tinyurl.com/) to shorten it.\n\n## How to run locally\n\nThis site uses [Astro](https://astro.build), a static site generator. To run locally, you will need to install the dependencies and run the dev server.\n\n1. Clone or download the repo\n2. Install dependencies: `npm install`\n3. Run the dev server: `npm run dev`\n4. Open the site in your browser: http://localhost:3000\n\n## Other Commands\n\nAll commands are run from the root of the project, from a terminal:\n\n| Command                | Action                                           |\n| :--------------------- | :----------------------------------------------- |\n| `npm run build`        | Build your production site to `./dist/`          |\n| `npm run preview`      | Preview your build locally, before deploying     |\n| `npm run astro ...`    | Run CLI commands like `astro add`, `astro check` |\n| `npm run astro --help` | Get help using the Astro CLI                     |\n\n## Want to learn more?\n\nFeel free to check [the Astro documentation](https://docs.astro.build) or jump into their [Discord server](https://astro.build/chat).\n\n## How to deploy\n\nI deploy using [Vercel](https://vercel.com/). To deploy, you will need to create a Vercel account and link it to your GitHub account. Then, you can deploy the site by adding the repo as a new project and clicking the \"Deploy\" button below.\n\n[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/import/project?template=)\n\n## Main technologies used\n\n- [Astro](https://astro.build) - Static site generator\n- [Tailwind CSS](https://tailwindcss.com/) - CSS framework\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fleabs%2Fzen-mode","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fleabs%2Fzen-mode","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fleabs%2Fzen-mode/lists"}