{"id":39494155,"url":"https://github.com/code-dot-org/cdo-ide-poc","last_synced_at":"2026-01-18T05:40:06.904Z","repository":{"id":225204036,"uuid":"765348068","full_name":"code-dot-org/cdo-ide-poc","owner":"code-dot-org","description":"POC of a CDO IDE. Will probably go away. Don't use this unless you know why you're using it.","archived":false,"fork":false,"pushed_at":"2024-03-22T16:53:01.000Z","size":9889,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":5,"default_branch":"main","last_synced_at":"2024-04-14T20:22:17.380Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","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/code-dot-org.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}},"created_at":"2024-02-29T18:42:51.000Z","updated_at":"2024-03-05T17:09:46.000Z","dependencies_parsed_at":"2024-03-15T18:09:41.651Z","dependency_job_id":null,"html_url":"https://github.com/code-dot-org/cdo-ide-poc","commit_stats":null,"previous_names":["code-dot-org/cdo-ide-poc"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/code-dot-org/cdo-ide-poc","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/code-dot-org%2Fcdo-ide-poc","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/code-dot-org%2Fcdo-ide-poc/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/code-dot-org%2Fcdo-ide-poc/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/code-dot-org%2Fcdo-ide-poc/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/code-dot-org","download_url":"https://codeload.github.com/code-dot-org/cdo-ide-poc/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/code-dot-org%2Fcdo-ide-poc/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28531223,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-18T00:39:45.795Z","status":"online","status_checked_at":"2026-01-18T02:00:07.578Z","response_time":98,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":"2026-01-18T05:40:06.180Z","updated_at":"2026-01-18T05:40:06.899Z","avatar_url":"https://github.com/code-dot-org.png","language":"TypeScript","readme":"# CDO IDE\n\nThis is an extremely early POC. There is a lot of iteration to do.\n\n## Getting started.\n\nThis repo is on the honor system. Use PRs, look to history, behavior yourself.\n\n## Running locally\n\n```\ncd cdo-ide-poc\nnpm run\nnpm run dev\n\ngo to http://localhost:5173\n```\n\nOr you can use it in the main repo.\n\nRight now this code is hanging out in a separate repo. It'll get merged back into cdo main in a few weeks.\nUntil then, it hangs out in your package.json file under `cdo-ide-poc`\n\nYou an update it with:\n\n```\nyarn add cdo-ide-poc@git+https://github.com/code-dot-org/cdo-ide-poc.git#GITHUBHASH\n```\n\nobviously, if you're doing a lot of local development with it, you may just want to `yarn link` the package into place.\n\n## Working with the code\n\n```\n// get the full IDE layout\nconst {CDOIDE, ConfigType, ProjectType} = import \"@cdoide\";\n\nconst config : ConfigType = {...}\nconst project : ProjectType = {...}\n\n// put it onto your page somewhere.\n\u003cCDOIDE\n  config={config}\n  project={project}\n  setConfig={setConfig}\n  setProject={setProject}\n/\u003e\n```\n\nCheck the `types.ts` file for typing, but the tl;dr is that the `project` prop is assumed to be project specific data - that is to say, a list of files and folders and other associated metadata.\n\nThe `config` prop is for layout of the IDE itself - which panes to show, how to configure some of them, instructions for the lesson, and so on.\n\nLook towards `App.tsx` for an example wrapper with some sample data involved.\n\n## What does this do\n\nIt lays out a full IDE from some of the upper grade POC docs, but all it actually implements is a file browser, editor (with tabs for open files) and preview of HTML pages w/CSS. Everything else is placeholders.\n\n## What does this not do\n\nAnything else.\n\n- It's ugly as sin. There's little in the way of styling, it needs to be re-written into a pretty component library.\n- Work will need to be done on the preview to make sure it does everything we may need it to do. For example, right now it doesn't have a concept of knowing where to find images or link to other pages in the project.\n- Other bits of proposed functionality aren't implemented - such as a search box or more robust instructions.\n- The input structure is somewhat arbitrary. Maybe we want to adapt to a pre-existing project.json structure? Maybe we want to redefine it? Totally plausible.\n\n## Where do I start?\n\n- Take a look at `App.tsx` for the wrapper code that just lays out an IDE with some pre-defined `config` and `project` values.\n- In the `CDOIDE` directory, `CDOIDE/CDOIDE.tsx` is your starting point with the overall layout.\n- There are `left-pane`, `center-pane`, `right-pane` folders laying out the content within each of them.\n- The center pane contains the `InternalEditor.tsx` component which is the interface to `CodeMirror` and the `FileNav.tsx` component which gives the file tabs at the top.\n- The left pane contains the `Files.tsx` component which sets up the file browser.\n- _Don't put any external CDO end points into here._ The `CDOIDE` folder should be completely agnostic of anything on our backend (ideally, at least), and we should only interact with the rest of our systems by handing in data and callbacks (i.e., `config`, `project`, `setProject`, `setConfig`). If we need more interaction, we should skew towards enhancing that interface instead of tightly coupling code internally.\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcode-dot-org%2Fcdo-ide-poc","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcode-dot-org%2Fcdo-ide-poc","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcode-dot-org%2Fcdo-ide-poc/lists"}