diff --git a/.env.development b/.env.development new file mode 100644 index 0000000..c334b89 --- /dev/null +++ b/.env.development @@ -0,0 +1,3 @@ +# No Content-Security-Policy for dev because it breaks the +# hot reloading +VITE_META_CSP= diff --git a/.env.production b/.env.production new file mode 100644 index 0000000..9f81416 --- /dev/null +++ b/.env.production @@ -0,0 +1,13 @@ +# .env.production + +# Content-Security-Policy content=" +# base-uri 'self'; +# default-src 'self'; +# script-src 'self'; +# style-src 'self' https://usds.github.io/ https://usds.gov/ 'unsafe-inline'; +# img-src 'self' https: data: blob:; +# font-src 'self' https://usds.github.io/ https://usds.gov/ https://*.gov/; +# form-action 'none'; +# worker-src 'self' https: data: blob:; +# +VITE_META_CSP= diff --git a/README.md b/README.md index 0e33bde..29906be 100644 --- a/README.md +++ b/README.md @@ -1,5 +1,8 @@ # USDS Site Editor +This tool addresses the error-prone part of adding or editing posts on the Jekyll Frontmatter website, +editing the yaml header and markdown content using WYSIWYG editor and guided forms modals. + A static-html, front-end React client to edit markdown and have it look visually similar to how it appears on the final site. @@ -9,6 +12,8 @@ Results of edits can be saved to the local device as a zip file, including any i Site is github pages deployed here: https://usds.github.io/website-content-editor/ + + ## What's working: - Heavily leverages the open source project: [MDXEditor](https://github.com/mdx-editor/editor) @@ -18,7 +23,7 @@ Site is github pages deployed here: https://usds.github.io/website-content-edito - Downloads zip file of the markdown and images ready to submitted (all without a server) - Can "upload" some existing markdown to make quick edits. -## Developers +# Developers 1. To deploy, merge `main` branch into `gh-pages`. [See branches](https://github.com/usds/website-content-editor/branches) 1. The [deploy action](https://github.com/usds/website-content-editor/actions) will automatically run. 1. Go to the github hosted website: https://usds.github.io/website-content-editor/ @@ -30,3 +35,79 @@ Site is github pages deployed here: https://usds.github.io/website-content-edito - Link component showing offsite links correctly - Help pages for how to merge in markdown edits back into website - Need to reorganize code. Lots of things should be separated out into components. + +## Build +The build scripts are all standard Vite stuff: +- `dev` Builds + watches + runs the site in development mode. +- `build` Builds `production` mode into the `dist/` directory +- `preview` Starts up a webserver pointing to `dist/` directory to check release builds +- `update` Is the `yarn` command to update dependencies + +### Some build exception - because... of course +The service-worker is a non-standard. The normal usage of a service-worker is to provide an offline app. + +OUR usage is to allow embedded images in the rich editor to function without a server. + +Build-wise, the service worker script is standard `.js` and the two files +are copied directly into the `dist/` directory. Because `registerSW.js` +and `service-worker.js` are standard javascript, they are **not** transpiled +and they don't import anything. So, some constants associated with the cache +are duplicated and need to kept in sync. + +## Service-Worker + + +## Security +Site is 100% static. All content is stored in the browser's cache and localstorage. + + +### Content-Security-Policy +Since it's running on github.io, we cannot set a CSP http header. +The next best thing is a `` header. + +Vite dev mode uses hot reloading, which uses unsafe `eval`, so for +localdev, the CSP is disabled. + +Enable/disable is done via the `.env.development` `.env.production` files. + +Here's the current CSP: +```html + +``` + +#### csp scripting +The most important items are: +``` +default-src 'self'; +script-src 'self'; +``` +These lock down scripting to just the site and prevents `eval` injections. + +#### csp style +``` +style-src 'self' https://usds.github.io/ https://usds.gov/ 'unsafe-inline'; +``` +The tool loads style scripts from website staging. + +`unsafe-inline` is required because some of the 3rd party tools dynamically sets `style=` attribute. + +#### csp images +``` +img-src 'self' https: data: blob:; +``` +The `https:` allows images to be loaded from anywhere. This allows the + + +## Debugging + +[details about how to debug a service worker] + diff --git a/index.html b/index.html index 4567e0d..db145e4 100644 --- a/index.html +++ b/index.html @@ -5,11 +5,16 @@ Website Content Editor + + %VITE_META_CSP% + + + diff --git a/src/mdxcomponents/frontmatterCustom/FrontmatterCustomEditor.tsx b/src/mdxcomponents/frontmatterCustom/FrontmatterCustomEditor.tsx index bb58ced..97ba80f 100644 --- a/src/mdxcomponents/frontmatterCustom/FrontmatterCustomEditor.tsx +++ b/src/mdxcomponents/frontmatterCustom/FrontmatterCustomEditor.tsx @@ -130,9 +130,8 @@ export const FrontmatterCustomEditor = ({yaml, onChange}: FrontmatterCustomEdito setValue("readtime_minutes", readingTimeInMinutes); } const previewImgFilename = cleanupFilename(getValues("carousel_image")); - const fileInputDefaultImage = previewImgFilename.length ? `/mdedit/img/${previewImgFilename}` : undefined - - console.log(`inital value for carousel_show: ${getValues("carousel_show")}`) + const fileInputDefaultImage = previewImgFilename.length ? `/mdedit/img/${previewImgFilename}` : undefined; + console.log(`inital value for carousel_show: ${getValues("carousel_show")}`); return ( setFrontmatterDialogOpen(open)}> diff --git a/src/vite-env.d.ts b/src/vite-env.d.ts index 11f02fe..52c007f 100644 --- a/src/vite-env.d.ts +++ b/src/vite-env.d.ts @@ -1 +1,2 @@ +/// https://vitejs.dev/guide/env-and-mode#intellisense-for-typescript ///