Fix a shit ton of lint, tsc and build errors. All 100% working now
This commit is contained in:
Alicia Sykes
parent
f598e46865
commit
9610d59a3c
|
|
@ -1,4 +1,6 @@
|
|||
{
|
||||
|
||||
"license": "MIT",
|
||||
"scripts": {
|
||||
"dev": "vite --mode ssr",
|
||||
"build": "qwik build",
|
||||
|
|
@ -9,25 +11,34 @@
|
|||
"dev.debug": "node --inspect-brk ./node_modules/vite/bin/vite.js --mode ssr --force",
|
||||
"fmt": "prettier --write .",
|
||||
"fmt.check": "prettier --check .",
|
||||
"lint": "eslint \"src/**/*.ts*\"",
|
||||
"lint": "eslint \"src/**/*.ts*\" -f compact",
|
||||
"preview": "qwik build preview && vite preview --open",
|
||||
"start": "vite --open --mode ssr",
|
||||
"qwik": "qwik"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@builder.io/qwik-city": "^1.1.4",
|
||||
"@types/node": "^20.11.16",
|
||||
"@typescript-eslint/eslint-plugin": "^6.20.0",
|
||||
"@typescript-eslint/parser": "^6.20.0",
|
||||
"autoprefixer": "^10.4.13",
|
||||
"daisyui": "^3.0.2",
|
||||
"eslint": "^8.56.0",
|
||||
"eslint-plugin-qwik": "^1.4.3",
|
||||
"postcss": "^8.4.21",
|
||||
"tailwindcss": "^3.2.4",
|
||||
"typescript": "^5.3.3",
|
||||
"undici": "^5.16.0",
|
||||
"vite": "^4.0.4",
|
||||
"vite-plugin-static-copy": "^1.0.1",
|
||||
"vite-tsconfig-paths": "^4.3.1"
|
||||
},
|
||||
"dependencies": {
|
||||
"@builder.io/qwik": "^1.1.4",
|
||||
"marked": "^12.0.0",
|
||||
"sharp": "^0.33.2"
|
||||
},
|
||||
"resolutions": {
|
||||
"sharp": "^0.33.2"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -99,16 +99,33 @@ const getSvgPath = (icon: string) => {
|
|||
}
|
||||
};
|
||||
|
||||
|
||||
|
||||
|
||||
const makeFillColor = (props: IconProps) => {
|
||||
const isColorKey = (color: any): color is keyof typeof colors => color in colors;
|
||||
|
||||
let colorValue = 'currentcolor';
|
||||
if (props.color && isColorKey(props.color)) {
|
||||
const colorObject = colors[props.color];
|
||||
if (colorObject[400]) {
|
||||
colorValue = colorObject[400];
|
||||
}
|
||||
}
|
||||
return colorValue;
|
||||
};
|
||||
|
||||
|
||||
interface IconProps {
|
||||
icon: string;
|
||||
color?: string;
|
||||
class?: string;
|
||||
width?: number;
|
||||
height?: number;
|
||||
};
|
||||
}
|
||||
|
||||
const IconComponent = component$((props: IconProps) => {
|
||||
const fillColor = (colors[props.color] || [])[400] || colors['current'].currentColor || 'currentcolor';
|
||||
const fillColor = makeFillColor(props);
|
||||
const svgStyle = { fill: fillColor };
|
||||
const { vb, path } = getSvgPath(props.icon);
|
||||
const svgClass = props.class || '';
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@ export default component$(() => {
|
|||
<div class="max-w-2xl flex flex-col place-items-center">
|
||||
<p>The Ultimate</p>
|
||||
<h1 class="text-5xl font-bold">Personal Security Checklist</h1>
|
||||
<p class="subtitle pb-6">A guide to securing your digital life, and protecting your privacy online</p>
|
||||
<p class="subtitle pb-6">Your guide to securing your digital life and protecting your privacy</p>
|
||||
<Icon class="mb-4" icon="shield" width={120} height={120} />
|
||||
<a href="https://github.com/lissy93/personal-security-checklist">
|
||||
<button class="btn btn-primary btn-lg">
|
||||
|
|
|
|||
|
|
@ -9,58 +9,137 @@ import type { Section } from '../../types/PSC';
|
|||
|
||||
export default component$(() => {
|
||||
return (
|
||||
<div class="navbar bg-base-100">
|
||||
<div class="flex-1">
|
||||
<a href="/" class="btn btn-ghost text-xl tooltip tooltip-bottom flex capitalize" data-tip="Go back to Homepage">
|
||||
<Icon class="mr-2" icon="shield" width={28} height={28} />
|
||||
<h1>Personal Security Checklist</h1>
|
||||
</a>
|
||||
</div>
|
||||
<div class="flex-none">
|
||||
<ul class="menu menu-horizontal px-1">
|
||||
<li>
|
||||
<details>
|
||||
<summary>
|
||||
<Icon icon="checklist" width={16} height={16} />
|
||||
Checklists
|
||||
</summary>
|
||||
<ul class="p-2 bg-base-100 rounded-t-none z-10">
|
||||
<li>
|
||||
<a href="/checklist">
|
||||
<Icon class="mr-2" icon="all" width={16} height={16} />
|
||||
View All
|
||||
</a>
|
||||
</li>
|
||||
{data.map((item: Section) => (
|
||||
<li class={`hover:bg-${item.color}-600 hover:bg-opacity-15`}>
|
||||
<a href={`/checklist/${item.slug}`}>
|
||||
<Icon color={item.color} class="mr-2" icon={item.icon} width={16} height={16} />
|
||||
{item.title}
|
||||
<>
|
||||
<input id="my-drawer-3" type="checkbox" class="drawer-toggle" />
|
||||
<div class="navbar bg-base-100">
|
||||
<div class="flex-1">
|
||||
<div class="flex-none md:hidden">
|
||||
<label for="my-drawer-3" aria-label="open sidebar" class="btn btn-square btn-ghost">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="inline-block w-6 h-6 stroke-current"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path></svg>
|
||||
</label>
|
||||
</div>
|
||||
<a href="/" class="btn btn-ghost text-xl flex capitalize">
|
||||
<label for="my-drawer-3" aria-label="open sidebar" class="tooltip tooltip-bottom" data-tip="View all Pages"><Icon class="mr-2" icon="shield" width={28} height={28} /></label>
|
||||
<h1>Personal Security Checklist</h1>
|
||||
</a>
|
||||
</div>
|
||||
<div class="flex-none hidden md:flex">
|
||||
<ul class="menu menu-horizontal px-1">
|
||||
<li>
|
||||
<details>
|
||||
<summary>
|
||||
<Icon icon="checklist" width={16} height={16} />
|
||||
Checklists
|
||||
</summary>
|
||||
<ul class="p-2 bg-base-100 rounded-t-none z-10">
|
||||
<li>
|
||||
<a href="/checklist">
|
||||
<Icon class="mr-2" icon="all" width={16} height={16} />
|
||||
View All
|
||||
</a>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</details>
|
||||
</li>
|
||||
<li>
|
||||
<a class="tooltip flex tooltip-bottom" data-tip="View / Edit Source & Data">
|
||||
<Icon icon="github" width={16} height={16} />GitHub
|
||||
</a>
|
||||
</li>
|
||||
{/* <li>
|
||||
<a href="https://apps.aliciasykes.com" class="tooltip flex tooltip-bottom" data-tip="Other projects by Alicia Sykes">
|
||||
<Icon icon="code" width={24} height={16} />More
|
||||
</a>
|
||||
</li> */}
|
||||
</ul>
|
||||
<div class="tooltip tooltip-bottom" data-tip="Theme">
|
||||
<label class="cursor-pointer grid place-items-center">
|
||||
<input type="checkbox" value="synthwave" class="toggle theme-controller bg-base-content row-start-1 col-start-1 col-span-2"/>
|
||||
<svg class="col-start-1 row-start-1 stroke-base-100 fill-base-100" xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><path d="M12 1v2M12 21v2M4.2 4.2l1.4 1.4M18.4 18.4l1.4 1.4M1 12h2M21 12h2M4.2 19.8l1.4-1.4M18.4 5.6l1.4-1.4"/></svg>
|
||||
<svg class="col-start-2 row-start-1 stroke-base-100 fill-base-100" xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path></svg>
|
||||
</label>
|
||||
{data.map((item: Section, index: number) => (
|
||||
<li key={`checklist-nav-${index}`} class={`hover:bg-${item.color}-600 hover:bg-opacity-15`}>
|
||||
<a href={`/checklist/${item.slug}`}>
|
||||
<Icon color={item.color} class="mr-2" icon={item.icon} width={16} height={16} />
|
||||
{item.title}
|
||||
</a>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</details>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="tooltip flex tooltip-bottom" data-tip="View / Edit Source & Data">
|
||||
<Icon icon="github" width={16} height={16} />GitHub
|
||||
</a>
|
||||
</li>
|
||||
{/* <li>
|
||||
<a href="https://apps.aliciasykes.com" class="tooltip flex tooltip-bottom" data-tip="Other projects by Alicia Sykes">
|
||||
<Icon icon="code" width={24} height={16} />More
|
||||
</a>
|
||||
</li> */}
|
||||
</ul>
|
||||
<div class="tooltip tooltip-bottom" data-tip="Theme">
|
||||
<label class="cursor-pointer grid place-items-center">
|
||||
<input type="checkbox" value="synthwave" class="toggle theme-controller bg-base-content row-start-1 col-start-1 col-span-2"/>
|
||||
<svg class="col-start-1 row-start-1 stroke-base-100 fill-base-100" xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><path d="M12 1v2M12 21v2M4.2 4.2l1.4 1.4M18.4 18.4l1.4 1.4M1 12h2M21 12h2M4.2 19.8l1.4-1.4M18.4 5.6l1.4-1.4"/></svg>
|
||||
<svg class="col-start-2 row-start-1 stroke-base-100 fill-base-100" xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path></svg>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="drawer-side z-10">
|
||||
<label for="my-drawer-3" aria-label="close sidebar" class="drawer-overlay"></label>
|
||||
<ul class="rounded-box menu p-4 w-80 min-h-full bg-base-200">
|
||||
<h2 class="flex text-primary">
|
||||
<Icon class="mr-2" icon="shield" width={16} height={16} />
|
||||
Personal Security Checklist
|
||||
</h2>
|
||||
<li><a href="/">Home</a></li>
|
||||
<li><a href="/">GitHub</a></li>
|
||||
<li>
|
||||
<a href="/checklist">Checklists</a>
|
||||
<ul>
|
||||
{data.map((item: Section, index: number) => (
|
||||
<li key={`checklist-side-${index}`} class={`hover:bg-${item.color}-600 hover:bg-opacity-15`}>
|
||||
<a href={`/checklist/${item.slug}`}>
|
||||
<Icon color={item.color} class="mr-2" icon={item.icon} width={16} height={16} />
|
||||
{item.title}
|
||||
</a>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/article">Articles</a>
|
||||
<ul>
|
||||
<li><a href="/article/1">Article 1</a></li>
|
||||
<li><a href="/article/2">Article 2</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/about">About</a>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="#">Contributing</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">License</a>
|
||||
</li>
|
||||
</ul>
|
||||
<li>
|
||||
<a href="#">Author</a>
|
||||
<ul>
|
||||
<li><a href="#">About</a></li>
|
||||
<li><a href="#">Contact</a></li>
|
||||
<li>
|
||||
<a href="#">Socials</a>
|
||||
<ul>
|
||||
<li><a href="">GitHub</a></li>
|
||||
<li><a href="">Twitter</a></li>
|
||||
<li><a href="">Mastodon</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://apps.aliciasykes.com">More Apps</a>
|
||||
<ul>
|
||||
<li><a href="#">Web-Check</a></li>
|
||||
<li><a href="#">Dashy</a></li>
|
||||
<li><a href="#">Portainer-Templates</a></li>
|
||||
<li><a href="#">AdGuardian</a></li>
|
||||
<li><a href="#">Bug-Bounties</a></li>
|
||||
<li><a href="#">Awesome Privacy</a></li>
|
||||
<li><a href="#">Email Comparison</a></li>
|
||||
<li><a href="#">Git-In</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
});
|
||||
|
|
|
|||
|
|
@ -0,0 +1,47 @@
|
|||
import { component$ } from "@builder.io/qwik";
|
||||
import type { DocumentHead } from "@builder.io/qwik-city";
|
||||
|
||||
|
||||
export default component$(() => {
|
||||
return (
|
||||
<article class="bg-base-200 bg-opacity-25 p-8 mx-auto max-w-[1200px] m-8 rounded-lg shadow-lg">
|
||||
<h3>About the Author</h3>
|
||||
<p>
|
||||
This project was originally started by me, Alicia Sykes- with a lot of help from the community.
|
||||
</p>
|
||||
<br />
|
||||
<p>
|
||||
I write apps which aim to help people escape big tech, secure their data,
|
||||
and protect their privacy. I have a particular interest in self-hosting,
|
||||
Linux and OSINT.
|
||||
</p>
|
||||
<br />
|
||||
<p>
|
||||
If this type of stuff interests you, I maintain several other repositories that you may also like:
|
||||
</p>
|
||||
<br />
|
||||
<ul>
|
||||
<li>Web-Check - OSINT tool for analysing any website</li>
|
||||
<li>Dashy - Dashboard app, for organising your self-hosted services</li>
|
||||
<li>Portainer-Templates - Compiled repository of 1-click Docker apps for self-hosting</li>
|
||||
<li>AdGuardian - CLI tool for monitoring your networks traffic and AdGuard DNS stats</li>
|
||||
<li>Bug-Bounties - Database of websites which accept responsible vulnerability discolsure</li>
|
||||
<li>Awesome Privacy - A list of privacy-respscting software and services</li>
|
||||
<li>Email Comparison - Objective comparison of private/secure mail providers</li>
|
||||
<li>Git-In - Tools and resources to help beginners get into open source</li>
|
||||
</ul>
|
||||
<p>For a full list of projects I've published, see <a href="https://apps.aliciasykes.com/">apps.aliciasykes.com</a>, or follow me on GitHub (I'm <a href="https://github.com/lissy93">Lissy93</a>).</p>
|
||||
|
||||
</article>
|
||||
);
|
||||
});
|
||||
|
||||
export const head: DocumentHead = {
|
||||
title: "Welcome to Qwik",
|
||||
meta: [
|
||||
{
|
||||
name: "description",
|
||||
content: "Qwik site description",
|
||||
},
|
||||
],
|
||||
};
|
||||
|
|
@ -1,7 +1,8 @@
|
|||
import { component$ } from '@builder.io/qwik';
|
||||
import { useLocation } from '@builder.io/qwik-city';
|
||||
import marked from 'marked';
|
||||
import { marked } from 'marked';
|
||||
|
||||
import Icon from '../../../components/core/icon';
|
||||
import { data } from '../../../mock-data';
|
||||
import type { Section, Priority } from '../../../types/PSC';
|
||||
|
||||
|
|
@ -32,10 +33,17 @@ export default component$(() => {
|
|||
return title.toLowerCase().replace(/ /g, '-');
|
||||
};
|
||||
|
||||
const parseMarkdown = (text: string | undefined): string => {
|
||||
return marked.parse(text || '', { async: false }) as string || '';
|
||||
};
|
||||
|
||||
return (
|
||||
<article class="bg-base-200 bg-opacity-25 p-8 mx-auto w-full max-w-[1200px] rounded-lg shadow-lg">
|
||||
<h1 class="text-4xl font-bold capitalize">{section?.title}</h1>
|
||||
<p class="py-2" dangerouslySetInnerHTML={marked.parse(section?.intro || '')}></p>
|
||||
<h1 class={['gap-2 text-5xl font-bold capitalize flex']}>
|
||||
<Icon height={36} width={36} icon={section?.icon || 'star'} />
|
||||
{section?.title}
|
||||
</h1>
|
||||
<p class="py-2" dangerouslySetInnerHTML={parseMarkdown(section?.intro)}></p>
|
||||
|
||||
<div class="overflow-x-auto">
|
||||
<table class="table">
|
||||
|
|
@ -49,7 +57,7 @@ export default component$(() => {
|
|||
</thead>
|
||||
<tbody>
|
||||
{section?.checklist.map((item, index) => (
|
||||
<tr class={`rounded-sm hover:bg-opacity-5 hover:bg-${getBadgeClass(item.priority)}`}>
|
||||
<tr key={index} class={`rounded-sm hover:bg-opacity-5 hover:bg-${getBadgeClass(item.priority)}`}>
|
||||
<td>
|
||||
<input type="checkbox" class="checkbox" id={generateId(item.point)} />
|
||||
</td>
|
||||
|
|
@ -63,7 +71,7 @@ export default component$(() => {
|
|||
{item.priority}
|
||||
</div>
|
||||
</td>
|
||||
<td class="" dangerouslySetInnerHTML={marked.parse(item.details)}></td>
|
||||
<td dangerouslySetInnerHTML={parseMarkdown(item.details)}></td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
|
|
|
|||
|
|
@ -1,13 +1,23 @@
|
|||
import { component$ } from "@builder.io/qwik";
|
||||
|
||||
import SectionLinkGrid from "../../components/psc/section-link-grid";
|
||||
|
||||
import { data } from '../../mock-data';
|
||||
|
||||
export default component$(() => {
|
||||
return (
|
||||
<main class="flex items-center justify-center min-h-[80vh]">
|
||||
<SectionLinkGrid sections={data} />
|
||||
<main class="p-8">
|
||||
<div class="join join-vertical w-full">
|
||||
{data.map((section, index) => (
|
||||
<div key={index} class="collapse collapse-plus bg-base-200 join-item">
|
||||
<input type="radio" name="my-accordion-3" />
|
||||
<div class={['collapse-title text-xl font-medium', `bg-${section.color}-400`]}>
|
||||
<h3 class="text-slate-700">{section.title}</h3>
|
||||
</div>
|
||||
<div class="collapse-content">
|
||||
<p>hello</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</main>
|
||||
);
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,12 +1,9 @@
|
|||
import { component$, Slot, useStyles$ } from "@builder.io/qwik";
|
||||
import { component$, Slot } from "@builder.io/qwik";
|
||||
import type { RequestHandler } from "@builder.io/qwik-city";
|
||||
|
||||
import Header from "../components/furniture/header";
|
||||
import Navbar from "../components/furniture/nav";
|
||||
import Footer from "../components/furniture/footer";
|
||||
|
||||
// useStyles$(tailwind);
|
||||
|
||||
export const onGet: RequestHandler = async ({ cacheControl }) => {
|
||||
cacheControl({
|
||||
staleWhileRevalidate: 60 * 60 * 24 * 7,
|
||||
|
|
|
|||
|
|
@ -11,6 +11,7 @@ export interface Section {
|
|||
icon: string,
|
||||
color: string,
|
||||
checklist: Checklist[],
|
||||
furtherLinks?: FurtherLink[],
|
||||
}
|
||||
|
||||
export type Priority = 'recommended' | 'optional' | 'advanced';
|
||||
|
|
@ -21,3 +22,8 @@ export interface Checklist {
|
|||
details: string,
|
||||
}
|
||||
|
||||
export interface FurtherLink {
|
||||
title: string,
|
||||
url: string,
|
||||
description: string,
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1 @@
|
|||
declare module 'vite-plugin-copy';
|
||||
|
|
@ -2,10 +2,23 @@ import { defineConfig, type UserConfig } from "vite";
|
|||
import { qwikVite } from "@builder.io/qwik/optimizer";
|
||||
import { qwikCity } from "@builder.io/qwik-city/vite";
|
||||
import tsconfigPaths from "vite-tsconfig-paths";
|
||||
import { viteStaticCopy } from 'vite-plugin-static-copy'
|
||||
|
||||
export default defineConfig((): UserConfig => {
|
||||
return {
|
||||
plugins: [qwikCity(), qwikVite(), tsconfigPaths()],
|
||||
plugins: [
|
||||
qwikCity(),
|
||||
qwikVite(),
|
||||
tsconfigPaths(),
|
||||
viteStaticCopy({
|
||||
targets: [
|
||||
{
|
||||
src: '../personal-security-checklist.yml',
|
||||
dest: 'public'
|
||||
}
|
||||
]
|
||||
})
|
||||
],
|
||||
server: {
|
||||
headers: {
|
||||
"Cache-Control": "public, max-age=0",
|
||||
1245
web/yarn.lock
1245
web/yarn.lock
File diff suppressed because it is too large
Load Diff
Loading…
Reference in New Issue