diff --git a/web/README.md b/web/README.md deleted file mode 100644 index 08408ed..0000000 --- a/web/README.md +++ /dev/null @@ -1,115 +0,0 @@ -# Qwik City App ⚡️ - -- [Qwik Docs](https://qwik.builder.io/) -- [Discord](https://qwik.builder.io/chat) -- [Qwik GitHub](https://github.com/BuilderIO/qwik) -- [@QwikDev](https://twitter.com/QwikDev) -- [Vite](https://vitejs.dev/) - ---- - -## Project Structure - -This project is using Qwik with [QwikCity](https://qwik.builder.io/qwikcity/overview/). QwikCity is just an extra set of tools on top of Qwik to make it easier to build a full site, including directory-based routing, layouts, and more. - -Inside your project, you'll see the following directory structure: - -``` -├── public/ -│ └── ... -└── src/ - ├── components/ - │ └── ... - └── routes/ - └── ... -``` - -- `src/routes`: Provides the directory-based routing, which can include a hierarchy of `layout.tsx` layout files, and an `index.tsx` file as the page. Additionally, `index.ts` files are endpoints. Please see the [routing docs](https://qwik.builder.io/qwikcity/routing/overview/) for more info. - -- `src/components`: Recommended directory for components. - -- `public`: Any static assets, like images, can be placed in the public directory. Please see the [Vite public directory](https://vitejs.dev/guide/assets.html#the-public-directory) for more info. - -## Add Integrations and deployment - -Use the `yarn qwik add` command to add additional integrations. Some examples of integrations includes: Cloudflare, Netlify or Express Server, and the [Static Site Generator (SSG)](https://qwik.builder.io/qwikcity/guides/static-site-generation/). - -```shell -yarn qwik add # or `yarn qwik add` -``` - -## Development - -Development mode uses [Vite's development server](https://vitejs.dev/). The `dev` command will server-side render (SSR) the output during development. - -```shell -npm start # or `yarn start` -``` - -> Note: during dev mode, Vite may request a significant number of `.js` files. This does not represent a Qwik production build. - -## Preview - -The preview command will create a production build of the client modules, a production build of `src/entry.preview.tsx`, and run a local server. The preview server is only for convenience to preview a production build locally and should not be used as a production server. - -```shell -yarn preview # or `yarn preview` -``` - -## Production - -The production build will generate client and server modules by running both client and server build commands. The build command will use Typescript to run a type check on the source code. - -```shell -yarn build # or `yarn build` -``` - -## Vercel Edge - -This starter site is configured to deploy to [Vercel Edge Functions](https://vercel.com/docs/concepts/functions/edge-functions), which means it will be rendered at an edge location near to your users. - -## Installation - -The adaptor will add a new `vite.config.ts` within the `adapters/` directory, and a new entry file will be created, such as: - -``` -└── adapters/ - └── vercel-edge/ - └── vite.config.ts -└── src/ - └── entry.vercel-edge.tsx -``` - -Additionally, within the `package.json`, the `build.server` script will be updated with the Vercel Edge build. - -## Production build - -To build the application for production, use the `build` command, this command will automatically run `npm run build.server` and `npm run build.client`: - -```shell -npm run build -``` - -[Read the full guide here](https://github.com/BuilderIO/qwik/blob/main/starters/adapters/vercel-edge/README.md) - -## Dev deploy - -To deploy the application for development: - -```shell -npm run deploy -``` - -Notice that you might need a [Vercel account](https://docs.Vercel.com/get-started/) in order to complete this step! - -## Production deploy - -The project is ready to be deployed to Vercel. However, you will need to create a git repository and push the code to it. - -You can [deploy your site to Vercel](https://vercel.com/docs/concepts/deployments/overview) either via a Git provider integration or through the Vercel CLI. - -## Static Site Generator (Node.js) - -```shell -npm run build.server -``` diff --git a/web/README.txt b/web/README.txt new file mode 100644 index 0000000..a44806e --- /dev/null +++ b/web/README.txt @@ -0,0 +1,10 @@ + +This is the source for the https://digital-defense.io website, which displays the checklist data interactively + +For build, development and deploy instructions, see the main README + +If you wish to make content changes, the only file you need to edit is `personal-security-checklist.yml`, in the repo's root + +All code here is licensed under MIT + + diff --git a/web/public/banner.png b/web/public/banner.png new file mode 100644 index 0000000..e7d2d55 Binary files /dev/null and b/web/public/banner.png differ diff --git a/web/src/components/router-head/router-head.tsx b/web/src/components/router-head/router-head.tsx index aa1b9c2..90581f3 100644 --- a/web/src/components/router-head/router-head.tsx +++ b/web/src/components/router-head/router-head.tsx @@ -2,20 +2,37 @@ import { useDocumentHead, useLocation } from "@builder.io/qwik-city"; import { component$ } from "@builder.io/qwik"; -/** - * The RouterHead component is placed inside of the document `` element. - */ export const RouterHead = component$(() => { const head = useDocumentHead(); const loc = useLocation(); return ( <> - {head.title} - + {/* Basics */} + {head.title || 'Digital Defense - The ultimate personal security checklist to secure your digital life'} + + + {/* Site config */} + + + + + {/* Open Graph / Facebook */} + + + + + + + {/* Twitter */} + + + + + {head.meta.map((m) => ( @@ -32,7 +49,7 @@ export const RouterHead = component$(() => { {head.scripts.map((s) => ( + ); }); diff --git a/web/src/routes/layout.tsx b/web/src/routes/layout.tsx index d16df41..99ad960 100644 --- a/web/src/routes/layout.tsx +++ b/web/src/routes/layout.tsx @@ -8,8 +8,7 @@ import { ChecklistContext } from "~/store/checklist-context"; import type { Sections } from "~/types/PSC"; export const useChecklists = routeLoader$(async () => { - const remoteUrl = 'https://gist.githubusercontent.com/Lissy93/0c26e4255b6fabc2c027ac72a4428aeb/raw/c36fc0430df223534eaf76c035943f4b343915e4/personal-security-checklist.yml'; - // TODO: Update this URL to point to the Git repository + const remoteUrl = 'https://raw.githubusercontent.com/Lissy93/personal-security-checklist/HEAD/personal-security-checklist.yml'; return fetch(remoteUrl) .then((res) => res.text()) .then((res) => jsyaml.load(res) as Sections) diff --git a/web/vercel.json b/web/vercel.json index 9e9a00b..dc6eb9b 100644 --- a/web/vercel.json +++ b/web/vercel.json @@ -1,11 +1,54 @@ { + "version": 2, "headers": [ { "source": "/build/(.*)", "headers": [ { "key": "Cache-Control", - "value": "public, max-age=31536000, s-maxage=31536000, immutable" + "value": "public, max-age=31536000, immutable" + } + ] + }, + { + "source": "/(.*)", + "headers": [ + { + "key": "X-Content-Type-Options", + "value": "nosniff" + }, + { + "key": "X-Frame-Options", + "value": "DENY" + }, + { + "key": "Referrer-Policy", + "value": "strict-origin-when-cross-origin" + }, + { + "key": "Permissions-Policy", + "value": "camera=(), microphone=(), geolocation=()" + }, + { + "key": "Strict-Transport-Security", + "value": "max-age=63072000; includeSubDomains; preload" + }, + { + "key": "Content-Security-Policy", + "value": "default-src 'self'; script-src 'self' 'unsafe-inline'; style-src 'self' 'unsafe-inline'; img-src 'self' https: data:; font-src 'self' https: data:;" + } + ] + } + ], + "cleanUrls": true, + "trailingSlash": false, + "staticHeaders": [ + { + "source": "/static/(.*)", + "headers": [ + { + "key": "Cache-Control", + "value": "public, max-age=604800, immutable" } ] }