✨ new csp middleware with full typing+IntelliSense and versatile getCspInitialProps

.changeset/chilly-tips-smell.md

@@ -0,0 +1,5 @@
+---
+"@next-safe/middleware": patch
+---
+
+use base64 encoding for nonce instead of Hex

.changeset/honest-terms-work.md

@@ -0,0 +1,9 @@
+---
+"@next-safe/middleware": minor
+---
+
+new `csp` middleware with extensive Typing for IntelliSense CSP configuration
+
+- typing has been borrowed from the [SvelteKit CSP Integration](https://kit.svelte.dev/docs/configuration#csp), which is excellent
+- handles annoying single quotes in the background, no need to think about them in code
+

.changeset/mean-ligers-leave.md

@@ -0,0 +1,10 @@
+---
+"@next-safe/middleware": minor
+---
+
+versatile `getCspInitialProps` for `_document.js`
+
+- flag to opt into styles trustification for CSP
+- flag to opt out from script trustification for CSP
+- option to pass external raw css text to hash for CSP. For instance needed for [Mantine](https://mantine.dev/), to pass `extractCritical(initialProps.html).css` (emotion)  
+- option to enhance `<App>` (`_app.js`) with nonce from SSR (needed for React Providers that can consume a nonce) 

.changeset/seven-mails-mix.md

@@ -0,0 +1,5 @@
+---
+"@next-safe/middleware": minor
+---
+
+helper to set up [CSP violation reprting to Sentry](https://docs.sentry.io/product/security-policy-reporting/) with a one-liner

.gitignore

@@ -12,4 +12,7 @@
 !.yarn/plugins
 !.yarn/releases
 !.yarn/sdks
-!.yarn/versions
+!.yarn/versions
+
+# .env
+**/.env*

CONTRIBUTING.md

@@ -0,0 +1,76 @@
+## Package development
+
+The repository has a [`gitpod.yml`](.gitpod.yml) and [GitPod](https://gitpod.io/) offers 50 hours/month for free for working on public repos. The easiest way to get started with development.
+
+### Run an e2e app development server with local packages
+
+Run in repo root:
+
+```
+yarn dev
+```
+
+It will rebuild and rebundle packages on changes and run `next dev` of the e2e test app in parallel.
+
+
+### Serve an e2e app production build with local packages
+
+Required to test and evaluate things around strict CSPs. Run in repo root:
+
+```
+yarn start
+```
+
+It will (re)build all packages in the repo that have changed and serve a production build of the e2e app with `next start` and local package builds.
+
+
+### Deploy the e2e app with local packages to Vercel
+So see the behavior of the package in a production environment, you can deploy the e2e app to Vercel.
+It will always use the local packages built from the last commit you pushed/deployed.
+
+First, [fork this repo](https://github.com/nibtime/next-safe-middleware/fork). Then click the deploy button and import your fork: 
+
+[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/project)
+
+Afterwards, you need to customize commands in Vercel project settings to make it work with [Yarn 3 monorepo structure](#repository-structure).
+
+#### In your Vercel project settings
+
+Set `apps/e2e` as "Root Directory" and enable "Include source files outside of the Root Directory in the Build Step."
+
+In "Build & Development Settings":
+
+Set "Framework Preset" to `Next.js`
+
+and override the following commands:
+
+**Build Command:** 
+```
+cd ../.. && yarn build:e2e:vercel
+```
+**Install Command:** 
+```
+yarn install --immutable --immutable-cache
+```
+
+## Submit PRs
+TODO
+
+## Report bugs
+TODO
+
+## Suggest features and enhancements
+TODO
+
+## Ask questions
+TODO
+
+## Commit and code conventions
+TODO + setup for ESLint, Prettier, husky and lint-staged will be provided at some point.
+
+## Repository structure
+TODO
+
+## Attributions
+
+Policy icon in [README](packages/next-safe-middleware/_README.md) created by [Kiranshastry - Flaticon](https://www.flaticon.com/free-icons/policy)

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2022 nibtime
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -0,0 +1 @@
+packages/next-safe-middleware/README.md

apps/e2e/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2022 nibtime
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

apps/e2e/__tests__/pages/index.test.tsx

@@ -2,11 +2,11 @@ import { render, screen } from "@testing-library/react";
 import Home from "../../pages/index";
 
 describe("Home", () => {
-  it("renders a heading", () => {
+  it("renders package name in heading", () => {
     render(<Home />);
 
     const heading = screen.getByRole("heading", {
-      name: /@next-safe\/middleware e2e test app/i,
+      name: /@next-safe\/middleware/i,
     });
     expect(heading).toBeInTheDocument();
   });

apps/e2e/package.json

@@ -17,7 +17,8 @@
   "babelMacros": {
     "twin": {
       "preset": "stitches",
-      "stitchesConfig": "stitches.config.ts"
+      "stitchesConfig": "stitches.config.ts",
+      "disableShortCss": false
     }
   },
   "scripts": {
@@ -29,6 +30,9 @@
   },
   "dependencies": {
     "@builder.io/partytown": "^0.5.2",
+    "@mantine/core": "^4.2.12",
+    "@mantine/hooks": "^4.2.12",
+    "@mantine/next": "^4.2.12",
     "@next-safe/middleware": "workspace:*",
     "@stitches/react": "^1.2.6",
     "ky": "^0.29.0",
@@ -37,11 +41,12 @@
     "next-safe": "^3.2.1",
     "ramda": "^0.28.0",
     "react": "^17.0.1",
-    "react-dom": "^17.0.1"
+    "react-dom": "^17.0.1",
+    "tabler-icons-react": "^1.52.0"
   },
   "devDependencies": {
     "@babel/runtime": "^7.17.2",
-    "@tailwindcss/typography": "~0.4.1",
+    "@tailwindcss/typography": "^0.5.2",
     "@testing-library/jest-dom": "^5.16.2",
     "@testing-library/react": "^12.1.3",
     "@types/node": "17.0.18",
@@ -53,8 +58,8 @@
     "babel-plugin-macros": "^3.1.0",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^27.5.1",
-    "tailwindcss": "^2",
-    "twin.macro": "^2.8.2",
+    "tailwindcss": "^3.1.4",
+    "twin.macro": "rc",
     "typescript": "^4.5.5"
   }
 }

apps/e2e/pages/_app.tsx

@@ -1,4 +1,11 @@
+import {
+  ColorScheme,
+  ColorSchemeProvider,
+  MantineProvider,
+} from "@mantine/core";
+import { useHotkeys, useLocalStorage } from "@mantine/hooks";
 import Script from "next/script";
+import { useMemo } from "react";
 // import '../styles/globals.css';
 import globalStyles from "../styles/globalStyles";
 
@@ -7,8 +14,19 @@ const customInlineScriptWorker = `console.log('Hi I am inline-script running wit
 
 const customInlineScriptAfter = `console.log('Hi I am an inline-script running with strategy afterInteractive')`;
 
-function MyApp({ Component, pageProps }) {
-  globalStyles();
+function MyApp({ Component, pageProps, ssrNonce }) {
+  const nonce = typeof window === 'undefined' ? ssrNonce : document.head.nonce
+
+  const [colorScheme, setColorScheme] = useLocalStorage<ColorScheme>({
+    key: "mantine-color-scheme",
+    defaultValue: "light",
+    getInitialValueInEffect: true,
+  });
+
+  const toggleColorScheme = (value?: ColorScheme) =>
+    setColorScheme(value || (colorScheme === "dark" ? "light" : "dark"));
+
+  useHotkeys([["mod+J", () => toggleColorScheme()]]);
   return (
     <>
       <Script
@@ -50,7 +68,20 @@ function MyApp({ Component, pageProps }) {
       >
         {customInlineScriptAfter}
       </Script>
-      <Component {...pageProps} />
+      <ColorSchemeProvider
+        colorScheme={colorScheme}
+        toggleColorScheme={toggleColorScheme}
+      >
+        <MantineProvider
+          theme={{ colorScheme }}
+          emotionOptions={{
+            key: "mantine",
+            nonce,
+          }}
+        >
+          <Component {...pageProps} />
+        </MantineProvider>
+      </ColorSchemeProvider>
     </>
   );
 }