chore(www): server headers and fix react code reset (#4284)

Author: Barsnes

apps/www/app/_components/live-component/live-component.module.css

@@ -183,3 +183,7 @@
     }
   }
 }
+
+.hidden {
+  display: none;
+}

apps/www/app/_components/live-component/live-components.tsx

@@ -224,24 +224,22 @@ const Editor = ({ live, html, id, hidden }: EditorProps) => {
           <kbd>{t('live-component.activateB')}</kbd>{' '}
           {t('live-component.activateC')}
         </div>
-        {showHTML ? (
-          <LiveEditor
-            className={classes.editor}
-            disabled
-            code={rawHtml}
-            language='html'
-          />
-        ) : (
-          <LiveEditor
-            key={resetCount}
-            onChange={live.onChange}
-            className={cl(
-              classes.editor,
-              classes['live-editor'],
-              'live-editor',
-            )}
-          />
-        )}
+        <LiveEditor
+          className={cl(classes.editor, !showHTML && classes.hidden)}
+          disabled
+          code={rawHtml}
+          language='html'
+        />
+        <LiveEditor
+          key={resetCount}
+          onChange={live.onChange}
+          className={cl(
+            classes.editor,
+            classes['live-editor'],
+            'live-editor',
+            showHTML && classes.hidden,
+          )}
+        />
       </div>
     </section>
   );

apps/www/app/routes/components/component.tsx

@@ -1,4 +1,4 @@
-import { readFileSync } from 'node:fs';
+import { existsSync, readFileSync } from 'node:fs';
 import { createRequire } from 'node:module';
 import { join } from 'node:path';
 import {
@@ -49,6 +49,11 @@ export const loader = async ({ params, request }: Route.LoaderArgs) => {
   if (!component) {
     throw new Response('Not Found', { status: 404, statusText: 'Not Found' });
   }
+  const componentDir = join('app', 'content', 'components', component);
+
+  if (!existsSync(componentDir)) {
+    throw new Response('Not Found', { status: 404, statusText: 'Not Found' });
+  }
 
   if (
     !request.url.includes('code') &&
@@ -72,8 +77,6 @@ export const loader = async ({ params, request }: Route.LoaderArgs) => {
 
   const componentDocs = getComponentDocs(component);
 
-  const componentDir = join('app', 'content', 'components', component);
-
   // Extract exported story functions from *.stories.tsx
   const storyEntries = extractStories(componentDir);
   // Extract exported dodont functions from *.dodont.tsx

apps/www/server.js

@@ -38,6 +38,10 @@ if (DEVELOPMENT) {
     express.static('dist/client/assets', { immutable: true, maxAge: '1y' }),
   );
   app.use(morgan('tiny'));
+  app.use(
+    '/.well-known',
+    express.static('dist/client/.well-known', { maxAge: '1y' }),
+  );
   app.use(express.static('dist/client', { maxAge: '30d' }));
   app.use(await import(BUILD_PATH).then((mod) => mod.app));
 }

apps/www/server/app.ts

@@ -2,9 +2,30 @@ import 'react-router';
 import { createRequestHandler } from '@react-router/express';
 import express from 'express';
 
+const DEVELOPMENT = process.env.NODE_ENV === 'development';
+
+const connectSrc = [
+  "'self'",
+  'https://altinncdn.no',
+  DEVELOPMENT && 'ws://localhost:*',
+]
+  .filter(Boolean)
+  .join(' ');
+
 export const app = express();
 
 app.use((req, res, next) => {
+  res.setHeader('X-Content-Type-Options', 'nosniff');
+  res.setHeader(
+    'Strict-Transport-Security',
+    'max-age=31536000; includeSubDomains',
+  );
+  res.setHeader('X-Frame-Options', 'SAMEORIGIN');
+  res.setHeader(
+    'Content-Security-Policy-Report-Only',
+    `default-src 'none';base-uri 'self';script-src 'self' 'unsafe-inline' 'unsafe-eval';style-src 'self' https://altinncdn.no https://siteimproveanalytics.com 'unsafe-inline';font-src 'self' https://altinncdn.no;img-src 'self' data:;connect-src ${connectSrc};frame-ancestors 'self';form-action 'self';manifest-src 'self';`,
+  );
+  res.setHeader('Cache-Control', 'max-age');
   /* Stop TRACE request */
   if (req.method === 'TRACE') {
     res