{"id":21619021,"url":"https://github.com/usds/website-content-editor","last_synced_at":"2026-04-18T13:35:21.823Z","repository":{"id":225214867,"uuid":"764749950","full_name":"usds/website-content-editor","owner":"usds","description":"Prototype for making editing markdown for USDS websites easier","archived":false,"fork":false,"pushed_at":"2024-09-09T23:42:39.000Z","size":1249,"stargazers_count":0,"open_issues_count":10,"forks_count":2,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-03-18T18:19:47.178Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/usds.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","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":"2024-02-28T16:35:28.000Z","updated_at":"2024-08-23T18:54:18.000Z","dependencies_parsed_at":"2024-03-14T17:52:40.463Z","dependency_job_id":"5ebcbf2a-fff7-4564-b0dc-bea079514eb4","html_url":"https://github.com/usds/website-content-editor","commit_stats":null,"previous_names":["usds/website-content-editor"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/usds/website-content-editor","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/usds%2Fwebsite-content-editor","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/usds%2Fwebsite-content-editor/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/usds%2Fwebsite-content-editor/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/usds%2Fwebsite-content-editor/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/usds","download_url":"https://codeload.github.com/usds/website-content-editor/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/usds%2Fwebsite-content-editor/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31971488,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-18T00:39:45.007Z","status":"online","status_checked_at":"2026-04-18T02:00:07.018Z","response_time":103,"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":"2024-11-24T23:07:39.612Z","updated_at":"2026-04-18T13:35:16.811Z","avatar_url":"https://github.com/usds.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# USDS Site Editor\n\nThis tool addresses the error-prone part of adding or editing posts on the Jekyll Frontmatter website,\nediting the yaml header and markdown content using WYSIWYG editor and guided forms modals.\n\nA static-html, front-end React client to edit markdown and have it look visually similar to how it appears on the final\nsite.\n\n\"Serverless\" in the sense that it is running locally in browser with no server interaction required.\n\nResults of edits can be saved to the local device as a zip file, including any images used by the markdown.\n\nSite is github pages deployed here: https://usds.github.io/website-content-editor/\n\n![Screen shot of cache storage debug screen](./docs/readme-img0.png \"Screen shot of cache storage debug screen\")\n\n1. Load/save data\n2. Switch between WYSIWYG and markdown text editor mode.\n3. Edit page metadata (Front Matter header) via a modal dialog\n4. Read only preview of metadata. Must be edited in modal or as text.\n5. The rich editor section\n\n## What's working\n\n- Heavily leverages the open source project: [MDXEditor](https://github.com/mdx-editor/editor)\n- Customizes the Frontmatter plugin with a dialog for editing our variables.\n- Loads stylesheets/fonts/image from USDS's staging site to make it visually consistent with final look-and-feel.\n- Stores uploaded photos into cache and uses a service worker layer to display them in the editor\n- Downloads zip file of the markdown and images ready to submitted (all without a server)\n- Can \"upload\" some existing markdown to make quick edits.\n\n# Developers\n1. To deploy, merge `main` branch into `gh-pages`. [See branches](https://github.com/usds/website-content-editor/branches)\n1. The [deploy action](https://github.com/usds/website-content-editor/actions) will automatically run.\n1. Go to the github hosted website: https://usds.github.io/website-content-editor/\n\n## What's still to-do:\n- Unit tests of some kind\n- Handle different template types\n- Create a better Quote component\n- Link component showing offsite links correctly\n- Help pages for how to merge in markdown edits back into website\n- Need to reorganize code. Lots of things should be separated out into components.\n\n## Build\nThe build scripts are all standard Vite stuff:\n- `dev` Builds + watches + runs the site in development mode.\n- `build` Builds `production` mode into the `dist/` directory\n- `preview` Starts up a webserver pointing to `dist/` directory to check release builds\n- `update` Is the `yarn` command to update dependencies\n\n### Some build exception - because... of course\nThe service-worker is a non-standard. The normal usage of a service-worker is to provide an offline app.\n\nOUR usage is to allow embedded images in the rich editor to function without a server.\n\nBuild-wise, the service worker script is standard `.js` and the two files\nare copied directly into the `dist/` directory. Because `registerSW.js`\nand `service-worker.js` are standard javascript, they are **not** transpiled\nand they don't import anything. So, some constants associated with the cache\nare duplicated and need to kept in sync.\n\n## Security\nSite is 100% static. All content is stored in the browser's cache and localstorage.\n\n\n### Content-Security-Policy\nSince it's running on github.io, we cannot set a CSP http header.\nThe next best thing is a `\u003cmeta\u003e` header.\n\nVite dev mode uses hot reloading, which uses unsafe `eval`, so for\nlocaldev, the CSP is disabled.\n\nEnable/disable is done via the `.env.development` `.env.production` files.\n\nHere's the current CSP:\n```html\n\u003cmeta http-equiv=\"Content-Security-Policy\" \n      content=\"\n        base-uri 'self';\n        default-src 'self';\n        script-src 'self';\n        style-src 'self' https://usds.github.io/ https://usds.gov/ 'unsafe-inline'; \n        img-src 'self' https: data: blob:; \n        font-src 'self' https://usds.github.io/ https://usds.gov/ https://*.gov/; \n        form-action 'none';\n        worker-src 'self' https: data: blob:;\"\u003e\n```\n\n#### csp scripting\nThe most important items are:\n```\ndefault-src 'self';\nscript-src 'self';\n```\nThese lock down scripting to just the site and prevents `eval` injections.\n\n#### csp style\n```\nstyle-src 'self' https://usds.github.io/ https://usds.gov/ 'unsafe-inline';\n```\nThe tool loads style scripts from website staging.\n\n`unsafe-inline` is required because some of the 3rd party tools dynamically sets `style=` attribute.\n\n#### csp images\n```\nimg-src 'self' https: data: blob:;\n```\nThe `https:` allows images to be loaded from anywhere. This allows the service-worker to \ncache images from sites that are pasted into the WYSIWYG editor.\n\nThe service worker transparently passes on all requests that are not images.\n\n## Build breakage\n\u003e ⚠️ **This package as well as MDXEditor both use lexical and other libraries; therefore, both\nmust use the same VERSION or you'll get strange typescript errors / runtime errors!**\n\nTo make this breakage more explicit, the yarn locks in the same version as MDXEditor\n\n``` json5\n  \"peerDependencies\": {\n    \"react\": \"^18.2.0\",\n    \"react-dom\": \"^18.2.0\"\n  },\n  \"resolutions\": {\n    \"@lexical/react\": \"^0.14.3\",\n    \"@mdxeditor/gurx\": \"^1.1.3\",\n    \"downshift\": \"^7.6.0\",\n    \"lexical\": \"^0.14.3\",\n    \"mdast-util-from-markdown\": \"^2.0.0\",\n    \"mdast-util-frontmatter\": \"^2.0.1\",\n    \"mdast-util-gfm\": \"^3.0.0\",\n    \"micromark-extension-gfm\": \"^3.0.0\"\n  },\n```\n\nIf the packages ever get out of sync, you'll start getting like typescript compile warnings like this:\n\u003e ⚠️ `\"warning \"@mdxeditor/editor \u003e @lexical/utils \u003e @lexical/table@0.12.6\" has incorrect peer dependency \"lexical@0.12.6\".\"`\n\n\u003e ⚠️ `TS2345: Argument of type 'import(\"/website-content-editor/node_modules/@mdxeditor/editor/node_modules/lexical/LexicalEditor\").LexicalEditor | null' is not assignable to parameter of type 'import(\"/website-content-editor/node_modules/lexical/LexicalEditor\").LexicalEditor | null'.\nType 'import(\"/website-content-editor/node_modules/@mdxeditor/editor/node_modules/lexical/LexicalEditor\").LexicalEditor' is not assignable to type 'import(\"/website-content-editor/node_modules/lexical/LexicalEditor\").LexicalEditor'.\nTypes of property '['constructor']' are incompatible.`\n\nThe package from MDXEditor that determines which versions to use (aka our package must stay in sync with)\ncan be found here: \nhttps://github.com/mdx-editor/editor/blob/main/package.json\n\nUse the `resolutions` section of our package to try and make sure the versions are the same.\n\n## Debugging\n\nIn chrome debugger, the Applications tab shows the service workers features.\n\nYou should check the \"Update on reload\"\n![Screen shot of service worker debug screen](./docs/readme-img1.png \"Screen shot of service worker debug screen\")\n\nThe current list of cached images can be viewed under Cache Storage\n![Screen shot of cache storage debug screen](./docs/readme-img2.png \"Screen shot of cache storage debug screen\")\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fusds%2Fwebsite-content-editor","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fusds%2Fwebsite-content-editor","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fusds%2Fwebsite-content-editor/lists"}