Update meta tags and site configuration

This commit is contained in:
Alicia Sykes 2024-02-11 00:04:30 +00:00
parent b2a7b60f71
commit 0612457c31
6 changed files with 78 additions and 124 deletions

View File

@ -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
```

10
web/README.txt Normal file
View File

@ -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

BIN
web/public/banner.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 99 KiB

View File

@ -2,20 +2,37 @@ import { useDocumentHead, useLocation } from "@builder.io/qwik-city";
import { component$ } from "@builder.io/qwik"; import { component$ } from "@builder.io/qwik";
/**
* The RouterHead component is placed inside of the document `<head>` element.
*/
export const RouterHead = component$(() => { export const RouterHead = component$(() => {
const head = useDocumentHead(); const head = useDocumentHead();
const loc = useLocation(); const loc = useLocation();
return ( return (
<> <>
<title>{head.title}</title> {/* Basics */}
<title>{head.title || 'Digital Defense - The ultimate personal security checklist to secure your digital life'}</title>
<meta name="description" content="The ultimate personal security checklist to secure your digital life" />
{/* Site config */}
<link rel="canonical" href={loc.url.href} /> <link rel="canonical" href={loc.url.href} />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="icon" type="image/png" href="/favicon.png" /> <link rel="icon" type="image/png" href="/favicon.png" />
<link rel="apple-touch-icon" href="/favicon.png" />
<meta name="theme-color" content="#6419e6" />
<link rel="manifest" href="/manifest.json" />
{/* Open Graph / Facebook */}
<meta property="og:type" content="website" />
<meta property="og:url" content={loc.url.href} />
<meta property="og:title" content="Digital Defense - The ultimate personal security checklist to secure your digital life" />
<meta property="og:description" content="The ultimate personal security checklist to secure your digital life" />
<meta property="og:image" content="/banner.png" />
{/* Twitter */}
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:url" content={loc.url.href} />
<meta name="twitter:title" content="Digital Defense - The ultimate personal security checklist to secure your digital life" />
<meta name="twitter:description" content="The ultimate personal security checklist to secure your digital life" />
<meta name="twitter:image" content="/banner.png" />
{head.meta.map((m) => ( {head.meta.map((m) => (
<meta key={m.key} {...m} /> <meta key={m.key} {...m} />
@ -32,7 +49,7 @@ export const RouterHead = component$(() => {
{head.scripts.map((s) => ( {head.scripts.map((s) => (
<script key={s.key} {...s.props} dangerouslySetInnerHTML={s.script} /> <script key={s.key} {...s.props} dangerouslySetInnerHTML={s.script} />
))} ))}
<script defer data-domain="security-list.js.org" src="https://no-track.as93.net/js/script.js"></script> <script defer data-domain="digital-defense.io" src="https://no-track.as93.net/js/script.js"></script>
</> </>
); );
}); });

View File

@ -8,8 +8,7 @@ import { ChecklistContext } from "~/store/checklist-context";
import type { Sections } from "~/types/PSC"; import type { Sections } from "~/types/PSC";
export const useChecklists = routeLoader$(async () => { export const useChecklists = routeLoader$(async () => {
const remoteUrl = 'https://gist.githubusercontent.com/Lissy93/0c26e4255b6fabc2c027ac72a4428aeb/raw/c36fc0430df223534eaf76c035943f4b343915e4/personal-security-checklist.yml'; const remoteUrl = 'https://raw.githubusercontent.com/Lissy93/personal-security-checklist/HEAD/personal-security-checklist.yml';
// TODO: Update this URL to point to the Git repository
return fetch(remoteUrl) return fetch(remoteUrl)
.then((res) => res.text()) .then((res) => res.text())
.then((res) => jsyaml.load(res) as Sections) .then((res) => jsyaml.load(res) as Sections)

View File

@ -1,11 +1,54 @@
{ {
"version": 2,
"headers": [ "headers": [
{ {
"source": "/build/(.*)", "source": "/build/(.*)",
"headers": [ "headers": [
{ {
"key": "Cache-Control", "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"
} }
] ]
} }