Fix a shit ton of lint, tsc and build errors. All 100% working now

This commit is contained in:
Alicia Sykes 2024-02-04 16:38:51 +00:00
parent f598e46865
commit 9610d59a3c
12 changed files with 1491 additions and 77 deletions

View File

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

View File

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

View File

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

View File

@ -9,14 +9,21 @@ import type { Section } from '../../types/PSC';
export default component$(() => {
return (
<>
<input id="my-drawer-3" type="checkbox" class="drawer-toggle" />
<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} />
<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">
<div class="flex-none hidden md:flex">
<ul class="menu menu-horizontal px-1">
<li>
<details>
@ -31,8 +38,8 @@ export default component$(() => {
View All
</a>
</li>
{data.map((item: Section) => (
<li class={`hover:bg-${item.color}-600 hover:bg-opacity-15`}>
{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}
@ -43,7 +50,7 @@ export default component$(() => {
</details>
</li>
<li>
<a class="tooltip flex tooltip-bottom" data-tip="View / Edit Source & Data">
<a href="#" class="tooltip flex tooltip-bottom" data-tip="View / Edit Source & Data">
<Icon icon="github" width={16} height={16} />GitHub
</a>
</li>
@ -62,5 +69,77 @@ export default component$(() => {
</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>
</>
);
});

View File

@ -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",
},
],
};

View File

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

View File

@ -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>
);
});

View File

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

View File

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

1
web/src/types/vite-plugin-copy.d.ts vendored Normal file
View File

@ -0,0 +1 @@
declare module 'vite-plugin-copy';

View File

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

File diff suppressed because it is too large Load Diff