From 229a88b07efb5dfebfd6ef1d82895fee69addb1c Mon Sep 17 00:00:00 2001 From: Alicia Sykes Date: Sat, 3 Feb 2024 12:07:50 +0000 Subject: [PATCH] Write homepage, start checklist page --- web/package.json | 39 +- web/postcss.config.js | 8 + web/src/components/core/icon.tsx | 125 ++ web/src/components/furniture/footer.tsx | 18 + web/src/components/furniture/header.tsx | 8 + web/src/components/furniture/hero.tsx | 24 + web/src/components/furniture/nav.tsx | 66 + web/src/components/psc/psc.module.css | 6 + web/src/components/psc/section-link-grid.tsx | 34 + .../starter/counter/counter.module.css | 13 - .../components/starter/counter/counter.tsx | 32 - .../starter/footer/footer.module.css | 23 - web/src/components/starter/footer/footer.tsx | 19 - .../components/starter/gauge/gauge.module.css | 27 - web/src/components/starter/gauge/index.tsx | 38 - .../starter/header/header.module.css | 44 - web/src/components/starter/header/header.tsx | 43 - .../components/starter/hero/hero.module.css | 43 - web/src/components/starter/hero/hero.tsx | 82 - .../starter/infobox/infobox.module.css | 23 - .../components/starter/infobox/infobox.tsx | 13 - .../starter/next-steps/next-steps.module.css | 36 - .../starter/next-steps/next-steps.tsx | 81 - web/src/global.css | 46 - web/src/mock-data.ts | 130 ++ web/src/root.tsx | 10 +- web/src/routes/checklist/[title]/index.tsx | 75 + web/src/routes/checklist/index.tsx | 13 + web/src/routes/demo/flower/flower.css | 77 - web/src/routes/demo/flower/index.tsx | 69 - web/src/routes/demo/todolist/index.tsx | 78 - .../routes/demo/todolist/todolist.module.css | 44 - web/src/routes/index.tsx | 96 +- web/src/routes/layout.tsx | 24 +- web/src/routes/styles.css | 214 -- web/src/styles/global.css | 9 + web/src/styles/tailwind.css | 4 + web/yarn.lock | 1856 ++++++----------- 38 files changed, 1242 insertions(+), 2348 deletions(-) create mode 100644 web/postcss.config.js create mode 100644 web/src/components/core/icon.tsx create mode 100644 web/src/components/furniture/footer.tsx create mode 100644 web/src/components/furniture/header.tsx create mode 100644 web/src/components/furniture/hero.tsx create mode 100644 web/src/components/furniture/nav.tsx create mode 100644 web/src/components/psc/psc.module.css create mode 100644 web/src/components/psc/section-link-grid.tsx delete mode 100644 web/src/components/starter/counter/counter.module.css delete mode 100644 web/src/components/starter/counter/counter.tsx delete mode 100644 web/src/components/starter/footer/footer.module.css delete mode 100644 web/src/components/starter/footer/footer.tsx delete mode 100644 web/src/components/starter/gauge/gauge.module.css delete mode 100644 web/src/components/starter/gauge/index.tsx delete mode 100644 web/src/components/starter/header/header.module.css delete mode 100644 web/src/components/starter/header/header.tsx delete mode 100644 web/src/components/starter/hero/hero.module.css delete mode 100644 web/src/components/starter/hero/hero.tsx delete mode 100644 web/src/components/starter/infobox/infobox.module.css delete mode 100644 web/src/components/starter/infobox/infobox.tsx delete mode 100644 web/src/components/starter/next-steps/next-steps.module.css delete mode 100644 web/src/components/starter/next-steps/next-steps.tsx delete mode 100644 web/src/global.css create mode 100644 web/src/mock-data.ts create mode 100644 web/src/routes/checklist/[title]/index.tsx create mode 100644 web/src/routes/checklist/index.tsx delete mode 100644 web/src/routes/demo/flower/flower.css delete mode 100644 web/src/routes/demo/flower/index.tsx delete mode 100644 web/src/routes/demo/todolist/index.tsx delete mode 100644 web/src/routes/demo/todolist/todolist.module.css delete mode 100644 web/src/routes/styles.css create mode 100644 web/src/styles/global.css create mode 100644 web/src/styles/tailwind.css diff --git a/web/package.json b/web/package.json index 6a2227a..2080016 100644 --- a/web/package.json +++ b/web/package.json @@ -1,21 +1,11 @@ { - "name": "my-qwik-basic-starter", - "description": "Demo App with Routing built-in (recommended)", - "engines": { - "node": ">=15.0.0" - }, - "private": true, - "trustedDependencies": [ - "sharp" - ], - "type": "module", "scripts": { + "dev": "vite --mode ssr", "build": "qwik build", "build.client": "vite build", "build.preview": "vite build --ssr src/entry.preview.tsx", "build.types": "tsc --incremental --noEmit", "deploy": "echo 'Run \"npm run qwik add\" to install a server adapter'", - "dev": "vite --mode ssr", "dev.debug": "node --inspect-brk ./node_modules/vite/bin/vite.js --mode ssr --force", "fmt": "prettier --write .", "fmt.check": "prettier --check .", @@ -25,18 +15,19 @@ "qwik": "qwik" }, "devDependencies": { - "@builder.io/qwik": "^1.4.3", - "@builder.io/qwik-city": "^1.4.3", - "@types/eslint": "^8.56.2", - "@types/node": "^20.11.6", - "@typescript-eslint/eslint-plugin": "^6.19.1", - "@typescript-eslint/parser": "^6.19.1", - "eslint": "^8.56.0", - "eslint-plugin-qwik": "^1.4.3", - "prettier": "^3.2.4", - "typescript": "5.3.3", - "undici": "*", - "vite": "^5.0.12", - "vite-tsconfig-paths": "^4.2.1" + "@builder.io/qwik-city": "^1.1.4", + "autoprefixer": "^10.4.13", + "daisyui": "^3.0.2", + "postcss": "^8.4.21", + "tailwindcss": "^3.2.4", + "typescript": "^5.3.3", + "undici": "^5.16.0", + "vite": "^4.0.4", + "vite-tsconfig-paths": "^4.3.1" + }, + "dependencies": { + "@builder.io/qwik": "^1.1.4", + "marked": "^12.0.0", + "sharp": "^0.33.2" } } diff --git a/web/postcss.config.js b/web/postcss.config.js new file mode 100644 index 0000000..825cb18 --- /dev/null +++ b/web/postcss.config.js @@ -0,0 +1,8 @@ +module.exports = { + plugins: { + 'postcss-import': {}, + 'tailwindcss/nesting': {}, + tailwindcss: {}, + autoprefixer: {}, + }, +} diff --git a/web/src/components/core/icon.tsx b/web/src/components/core/icon.tsx new file mode 100644 index 0000000..e63a81d --- /dev/null +++ b/web/src/components/core/icon.tsx @@ -0,0 +1,125 @@ +// IconComponent.jsx or IconComponent.tsx +import { component$ } from "@builder.io/qwik"; +import colors from 'tailwindcss/colors'; + +const getSvgPath = (icon: string) => { + switch (icon) { + case 'star': + return { + vb: "0 0 24 24", + path: "M10 15l-5.5 3 1-5.5L0 7.5l5.6-0.5L10 2l2 5 5.5 0.5-4 4 1 5.5z", + }; + case 'password': + return { + vb: "0 0 512 512", + path: "M336 352c97.2 0 176-78.8 176-176S433.2 0 336 0S160 78.8 160 176c0 18.7 2.9 36.8 8.3 53.7L7 391l-7 7V408v80 24H24h80 24V488 448h40 24V424 384h40 9.9l7-7 33.3-33.3c16.9 5.4 35 8.3 53.7 8.3zM376 96a40 40 0 1 1 0 80 40 40 0 1 1 0-80z", + }; + case 'browser': + return { + vb: "0 0 512 512", + path: "M352 256c0 22.2-1.2 43.6-3.3 64H163.3c-2.2-20.4-3.3-41.8-3.3-64s1.2-43.6 3.3-64H348.7c2.2 20.4 3.3 41.8 3.3 64zm28.8-64H503.9c5.3 20.5 8.1 41.9 8.1 64s-2.8 43.5-8.1 64H380.8c2.1-20.6 3.2-42 3.2-64s-1.1-43.4-3.2-64zm112.6-32H376.7c-10-63.9-29.8-117.4-55.3-151.6c78.3 20.7 142 77.5 171.9 151.6zm-149.1 0H167.7c6.1-36.4 15.5-68.6 27-94.7c10.5-23.6 22.2-40.7 33.5-51.5C239.4 3.2 248.7 0 256 0s16.6 3.2 27.8 13.8c11.3 10.8 23 27.9 33.5 51.5c11.6 26 20.9 58.2 27 94.7zm-209 0H18.6C48.6 85.9 112.2 29.1 190.6 8.4C165.1 42.6 145.3 96.1 135.3 160zM8.1 192H131.2c-2.1 20.6-3.2 42-3.2 64s1.1 43.4 3.2 64H8.1C2.8 299.5 0 278.1 0 256s2.8-43.5 8.1-64zM194.7 446.6c-11.6-26-20.9-58.2-27-94.6H344.3c-6.1 36.4-15.5 68.6-27 94.6c-10.5 23.6-22.2 40.7-33.5 51.5C272.6 508.8 263.3 512 256 512s-16.6-3.2-27.8-13.8c-11.3-10.8-23-27.9-33.5-51.5zM135.3 352c10 63.9 29.8 117.4 55.3 151.6C112.2 482.9 48.6 426.1 18.6 352H135.3zm358.1 0c-30 74.1-93.6 130.9-171.9 151.6c25.5-34.2 45.2-87.7 55.3-151.6H493.4z", + }; + case 'email': + return { + vb: "0 0 512 512", + path: "M48 64C21.5 64 0 85.5 0 112c0 15.1 7.1 29.3 19.2 38.4L236.8 313.6c11.4 8.5 27 8.5 38.4 0L492.8 150.4c12.1-9.1 19.2-23.3 19.2-38.4c0-26.5-21.5-48-48-48H48zM0 176V384c0 35.3 28.7 64 64 64H448c35.3 0 64-28.7 64-64V176L294.4 339.2c-22.8 17.1-54 17.1-76.8 0L0 176z", + }; + case 'messaging': + return { + vb: "0 0 512 512", + path: "M64 0C28.7 0 0 28.7 0 64V256c0 35.3 28.7 64 64 64H96v48c0 6.1 3.4 11.6 8.8 14.3s11.9 2.1 16.8-1.5L202.7 320H352c35.3 0 64-28.7 64-64V64c0-35.3-28.7-64-64-64H64zM352 352H256v32c0 35.3 28.7 64 64 64H437.3l81.1 60.8c4.8 3.6 11.3 4.2 16.8 1.5s8.8-8.2 8.8-14.3V448h32c35.3 0 64-28.7 64-64V192c0-35.3-28.7-64-64-64H448V256c0 53-43 96-96 96z", + }; + case 'social': + return { + vb: "0 0 512 512", + path: "M352 224c53 0 96-43 96-96s-43-96-96-96s-96 43-96 96c0 4 .2 8 .7 11.9l-94.1 47C145.4 170.2 121.9 160 96 160c-53 0-96 43-96 96s43 96 96 96c25.9 0 49.4-10.2 66.6-26.9l94.1 47c-.5 3.9-.7 7.8-.7 11.9c0 53 43 96 96 96s96-43 96-96s-43-96-96-96c-25.9 0-49.4 10.2-66.6 26.9l-94.1-47c.5-3.9 .7-7.8 .7-11.9s-.2-8-.7-11.9l94.1-47C302.6 213.8 326.1 224 352 224z", + }; + case 'network': + return { + vb: "0 0 512 512", + path: "M176 80v48h32 48 80V80H176zm-48 48V80H96c-8.8 0-16 7.2-16 16v32h48zM80 176v56H208V176H80zm0 160h48V280H80v56zm0 48v32c0 8.8 7.2 16 16 16H208V384H176 128 80zm96-48H288.8c-.5 4.7-.8 9.4-.8 14.1c0 11.5 1 22.9 3 33.9H256v48h50.1c8.1 17.5 18.8 33.7 31.5 48H96c-35.3 0-64-28.7-64-64V96c0-35.3 28.7-64 64-64H416c35.3 0 64 28.7 64 64v48.6c-1.7-1.5-3.3-3.1-5-4.6c-17.7-16-44.7-16-62.5-.1c-12.9 11.5-25.1 23.7-36.5 36.1H256v56h76c-2.4 3.6-4.7 7.2-6.9 10.7c-7.4 12-14.2 24.5-19.9 37.3H176v56zM432 128V96c0-8.8-7.2-16-16-16H384v48h48zm48 384c-88.4 0-160-71.6-160-160c0-76.7 62.5-144.7 107.2-179.4c5-3.9 10.9-5.8 16.8-5.8c7.9-.1 16 3.1 22 9.2l46 46 11.3-11.3c11.7-11.7 30.6-12.7 42.3-1C624.5 268 640 320.2 640 352c0 88.4-71.6 160-160 160zm64-111.8c0-36.5-37-73-54.8-88.4c-5.4-4.7-13.1-4.7-18.5 0C453 327.1 416 363.6 416 400.2c0 35.3 28.7 64 64 64s64-28.7 64-64z", + }; + case 'mobile': + return { + vb: "0 0 512 512", + path: "M80 0C44.7 0 16 28.7 16 64V448c0 35.3 28.7 64 64 64H304c35.3 0 64-28.7 64-64V64c0-35.3-28.7-64-64-64H80zm80 432h64c8.8 0 16 7.2 16 16s-7.2 16-16 16H160c-8.8 0-16-7.2-16-16s7.2-16 16-16z", + }; + case 'computer': + return { + vb: "0 0 512 512", + path: "M0 192H176V0H160C71.6 0 0 71.6 0 160v32zm0 32V352c0 88.4 71.6 160 160 160h64c88.4 0 160-71.6 160-160V224H192 0zm384-32V160C384 71.6 312.4 0 224 0H208V192H384z", + }; + case 'home': + return { + vb: "0 0 512 512", + path: "M357.7 8.5c-12.3-11.3-31.2-11.3-43.4 0l-208 192c-9.4 8.6-12.7 22-8.5 34c87.1 25.3 155.6 94.2 180.3 181.6H464c26.5 0 48-21.5 48-48V256h32c13.2 0 25-8.1 29.8-20.3s1.6-26.2-8.1-35.2l-208-192zM288 208c0-8.8 7.2-16 16-16h64c8.8 0 16 7.2 16 16v64c0 8.8-7.2 16-16 16H304c-8.8 0-16-7.2-16-16V208zM24 256c-13.3 0-24 10.7-24 24s10.7 24 24 24c101.6 0 184 82.4 184 184c0 13.3 10.7 24 24 24s24-10.7 24-24c0-128.1-103.9-232-232-232zm8 256a32 32 0 1 0 0-64 32 32 0 1 0 0 64zM0 376c0 13.3 10.7 24 24 24c48.6 0 88 39.4 88 88c0 13.3 10.7 24 24 24s24-10.7 24-24c0-75.1-60.9-136-136-136c-13.3 0-24 10.7-24 24z", + }; + case 'finance': + return { + vb: "0 0 512 512", + path: "M64 32C28.7 32 0 60.7 0 96v32H576V96c0-35.3-28.7-64-64-64H64zM576 224H0V416c0 35.3 28.7 64 64 64H512c35.3 0 64-28.7 64-64V224zM112 352h64c8.8 0 16 7.2 16 16s-7.2 16-16 16H112c-8.8 0-16-7.2-16-16s7.2-16 16-16zm112 16c0-8.8 7.2-16 16-16H368c8.8 0 16 7.2 16 16s-7.2 16-16 16H240c-8.8 0-16-7.2-16-16z", + }; + case 'human': + return { + vb: "0 0 512 512", + path: "M112 48a48 48 0 1 1 96 0 48 48 0 1 1 -96 0zm40 304V480c0 17.7-14.3 32-32 32s-32-14.3-32-32V256.9L59.4 304.5c-9.1 15.1-28.8 20-43.9 10.9s-20-28.8-10.9-43.9l58.3-97c17.4-28.9 48.6-46.6 82.3-46.6h29.7c33.7 0 64.9 17.7 82.3 46.6l58.3 97c9.1 15.1 4.2 34.8-10.9 43.9s-34.8 4.2-43.9-10.9L232 256.9V480c0 17.7-14.3 32-32 32s-32-14.3-32-32V352H152z", + }; + case 'physical': + return { + vb: "0 0 512 512", + path: "M48 0C21.5 0 0 21.5 0 48V464c0 26.5 21.5 48 48 48h96V432c0-26.5 21.5-48 48-48s48 21.5 48 48v80h88.6c-5.4-9.4-8.6-20.3-8.6-32V352c0-23.7 12.9-44.4 32-55.4V272c0-30.5 12.2-58.2 32-78.4V48c0-26.5-21.5-48-48-48H48zM64 240c0-8.8 7.2-16 16-16h32c8.8 0 16 7.2 16 16v32c0 8.8-7.2 16-16 16H80c-8.8 0-16-7.2-16-16V240zm112-16h32c8.8 0 16 7.2 16 16v32c0 8.8-7.2 16-16 16H176c-8.8 0-16-7.2-16-16V240c0-8.8 7.2-16 16-16zm80 16c0-8.8 7.2-16 16-16h32c8.8 0 16 7.2 16 16v32c0 8.8-7.2 16-16 16H272c-8.8 0-16-7.2-16-16V240zM80 96h32c8.8 0 16 7.2 16 16v32c0 8.8-7.2 16-16 16H80c-8.8 0-16-7.2-16-16V112c0-8.8 7.2-16 16-16zm80 16c0-8.8 7.2-16 16-16h32c8.8 0 16 7.2 16 16v32c0 8.8-7.2 16-16 16H176c-8.8 0-16-7.2-16-16V112zM272 96h32c8.8 0 16 7.2 16 16v32c0 8.8-7.2 16-16 16H272c-8.8 0-16-7.2-16-16V112c0-8.8 7.2-16 16-16zM464 240c17.7 0 32 14.3 32 32v48H432V272c0-17.7 14.3-32 32-32zm-80 32v48c-17.7 0-32 14.3-32 32V480c0 17.7 14.3 32 32 32H544c17.7 0 32-14.3 32-32V352c0-17.7-14.3-32-32-32V272c0-44.2-35.8-80-80-80s-80 35.8-80 80z", + }; + case 'shield': + return { + vb: "0 0 512 512", + path: "M256 0c4.6 0 9.2 1 13.4 2.9L457.7 82.8c22 9.3 38.4 31 38.3 57.2c-.5 99.2-41.3 280.7-213.6 363.2c-16.7 8-36.1 8-52.8 0C57.3 420.7 16.5 239.2 16 140c-.1-26.2 16.3-47.9 38.3-57.2L242.7 2.9C246.8 1 251.4 0 256 0zm0 66.8V444.8C394 378 431.1 230.1 432 141.4L256 66.8l0 0z", + }; + case 'github': + return { + vb: "0 0 512 512", + path: "M186.1 328.7c0 20.9-10.9 55.1-36.7 55.1s-36.7-34.2-36.7-55.1 10.9-55.1 36.7-55.1 36.7 34.2 36.7 55.1zM480 278.2c0 31.9-3.2 65.7-17.5 95-37.9 76.6-142.1 74.8-216.7 74.8-75.8 0-186.2 2.7-225.6-74.8-14.6-29-20.2-63.1-20.2-95 0-41.9 13.9-81.5 41.5-113.6-5.2-15.8-7.7-32.4-7.7-48.8 0-21.5 4.9-32.3 14.6-51.8 45.3 0 74.3 9 108.8 36 29-6.9 58.8-10 88.7-10 27 0 54.2 2.9 80.4 9.2 34-26.7 63-35.2 107.8-35.2 9.8 19.5 14.6 30.3 14.6 51.8 0 16.4-2.6 32.7-7.7 48.2 27.5 32.4 39 72.3 39 114.2zm-64.3 50.5c0-43.9-26.7-82.6-73.5-82.6-18.9 0-37 3.4-56 6-14.9 2.3-29.8 3.2-45.1 3.2-15.2 0-30.1-.9-45.1-3.2-18.7-2.6-37-6-56-6-46.8 0-73.5 38.7-73.5 82.6 0 87.8 80.4 101.3 150.4 101.3h48.2c70.3 0 150.6-13.4 150.6-101.3zm-82.6-55.1c-25.8 0-36.7 34.2-36.7 55.1s10.9 55.1 36.7 55.1 36.7-34.2 36.7-55.1-10.9-55.1-36.7-55.1z", + }; + case 'checklist': + return { + vb: "0 0 512 512", + path: "M192 0c-41.8 0-77.4 26.7-90.5 64H64C28.7 64 0 92.7 0 128V448c0 35.3 28.7 64 64 64H320c35.3 0 64-28.7 64-64V128c0-35.3-28.7-64-64-64H282.5C269.4 26.7 233.8 0 192 0zm0 64a32 32 0 1 1 0 64 32 32 0 1 1 0-64zm-4.7 132.7c6.2 6.2 6.2 16.4 0 22.6l-64 64c-6.2 6.2-16.4 6.2-22.6 0l-32-32c-6.2-6.2-6.2-16.4 0-22.6s16.4-6.2 22.6 0L112 249.4l52.7-52.7c6.2-6.2 16.4-6.2 22.6 0zM192 272c0-8.8 7.2-16 16-16h96c8.8 0 16 7.2 16 16s-7.2 16-16 16H208c-8.8 0-16-7.2-16-16zm-16 80H304c8.8 0 16 7.2 16 16s-7.2 16-16 16H176c-8.8 0-16-7.2-16-16s7.2-16 16-16zM72 368a24 24 0 1 1 48 0 24 24 0 1 1 -48 0z", + }; + case 'code': + return { + vb: "0 0 512 512", + path: "M392.8 1.2c-17-4.9-34.7 5-39.6 22l-128 448c-4.9 17 5 34.7 22 39.6s34.7-5 39.6-22l128-448c4.9-17-5-34.7-22-39.6zm80.6 120.1c-12.5 12.5-12.5 32.8 0 45.3L562.7 256l-89.4 89.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l112-112c12.5-12.5 12.5-32.8 0-45.3l-112-112c-12.5-12.5-32.8-12.5-45.3 0zm-306.7 0c-12.5-12.5-32.8-12.5-45.3 0l-112 112c-12.5 12.5-12.5 32.8 0 45.3l112 112c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L77.3 256l89.4-89.4c12.5-12.5 12.5-32.8 0-45.3z", + }; + case 'all': + return { + vb: "0 0 512 512", + path: "M0 72C0 49.9 17.9 32 40 32H88c22.1 0 40 17.9 40 40v48c0 22.1-17.9 40-40 40H40c-22.1 0-40-17.9-40-40V72zM0 232c0-22.1 17.9-40 40-40H88c22.1 0 40 17.9 40 40v48c0 22.1-17.9 40-40 40H40c-22.1 0-40-17.9-40-40V232zM128 392v48c0 22.1-17.9 40-40 40H40c-22.1 0-40-17.9-40-40V392c0-22.1 17.9-40 40-40H88c22.1 0 40 17.9 40 40zM160 72c0-22.1 17.9-40 40-40h48c22.1 0 40 17.9 40 40v48c0 22.1-17.9 40-40 40H200c-22.1 0-40-17.9-40-40V72zM288 232v48c0 22.1-17.9 40-40 40H200c-22.1 0-40-17.9-40-40V232c0-22.1 17.9-40 40-40h48c22.1 0 40 17.9 40 40zM160 392c0-22.1 17.9-40 40-40h48c22.1 0 40 17.9 40 40v48c0 22.1-17.9 40-40 40H200c-22.1 0-40-17.9-40-40V392zM448 72v48c0 22.1-17.9 40-40 40H360c-22.1 0-40-17.9-40-40V72c0-22.1 17.9-40 40-40h48c22.1 0 40 17.9 40 40zM320 232c0-22.1 17.9-40 40-40h48c22.1 0 40 17.9 40 40v48c0 22.1-17.9 40-40 40H360c-22.1 0-40-17.9-40-40V232zM448 392v48c0 22.1-17.9 40-40 40H360c-22.1 0-40-17.9-40-40V392c0-22.1 17.9-40 40-40h48c22.1 0 40 17.9 40 40z", + }; + default: + return { vb: "", path: "" }; // Default path or a placeholder icon + } +}; + +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 svgStyle = { fill: fillColor }; + const { vb, path } = getSvgPath(props.icon); + const svgClass = props.class || ''; + const width = props.width || 80; + const height = props.height || 50; + + return ( + + + + ); +}); + +export default IconComponent; diff --git a/web/src/components/furniture/footer.tsx b/web/src/components/furniture/footer.tsx new file mode 100644 index 0000000..78ad7ef --- /dev/null +++ b/web/src/components/furniture/footer.tsx @@ -0,0 +1,18 @@ +import { component$ } from "@builder.io/qwik"; + +export default component$(() => { + + const ghLink = 'https://github.com/Lissy93/personal-security-checklist/'; + const licenseLink = 'https://github.com/Lissy93/personal-security-checklist/blob/master/LICENSE'; + const authorLink = 'https://aliciasykes.com'; + + return ( + + ); +}); diff --git a/web/src/components/furniture/header.tsx b/web/src/components/furniture/header.tsx new file mode 100644 index 0000000..b41e679 --- /dev/null +++ b/web/src/components/furniture/header.tsx @@ -0,0 +1,8 @@ +import { component$ } from "@builder.io/qwik"; + +export default component$(() => { + return ( +
+
+ ); +}); diff --git a/web/src/components/furniture/hero.tsx b/web/src/components/furniture/hero.tsx new file mode 100644 index 0000000..c0acc04 --- /dev/null +++ b/web/src/components/furniture/hero.tsx @@ -0,0 +1,24 @@ +import { component$ } from "@builder.io/qwik"; + +import Icon from "../core/icon"; + +export default component$(() => { + return ( +
+
+
+

The Ultimate

+

Personal Security Checklist

+

A guide to securing your digital life, and protecting your privacy online

+ + + + +
+
+
+ ); +}); diff --git a/web/src/components/furniture/nav.tsx b/web/src/components/furniture/nav.tsx new file mode 100644 index 0000000..2650ca3 --- /dev/null +++ b/web/src/components/furniture/nav.tsx @@ -0,0 +1,66 @@ + +import { component$ } from "@builder.io/qwik"; + +import Icon from "../core/icon"; + +import { data } from '../../mock-data'; + +import type { Section } from '../../types/PSC'; + +export default component$(() => { + return ( +
+
+ + +

Personal Security Checklist

+ +
+
+ +
+ +
+
+
+ ); +}); diff --git a/web/src/components/psc/psc.module.css b/web/src/components/psc/psc.module.css new file mode 100644 index 0000000..4e899de --- /dev/null +++ b/web/src/components/psc/psc.module.css @@ -0,0 +1,6 @@ + +.container { + display: grid; + gap: 2rem; + grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); +} diff --git a/web/src/components/psc/section-link-grid.tsx b/web/src/components/psc/section-link-grid.tsx new file mode 100644 index 0000000..aca6874 --- /dev/null +++ b/web/src/components/psc/section-link-grid.tsx @@ -0,0 +1,34 @@ +import { component$ } from "@builder.io/qwik"; + +import type { Section } from '../../types/PSC'; +import Icon from '../core/icon'; + +import styles from './psc.module.css'; + +export default component$((props: { sections: Section[] }) => { + return ( +
+ {props.sections.map((section: Section) => ( + +
+ +

0/{section.checklist.length} Done

+
+
+

{section.title}

+

{section.description}

+ + {/*
+ +
*/} +
+ + ))} +
+ ); +}); diff --git a/web/src/components/starter/counter/counter.module.css b/web/src/components/starter/counter/counter.module.css deleted file mode 100644 index b18744e..0000000 --- a/web/src/components/starter/counter/counter.module.css +++ /dev/null @@ -1,13 +0,0 @@ -.counter-wrapper { - margin-top: 50px; - display: flex; - align-items: center; - justify-content: center; - gap: 10px; -} - -@media screen and (min-width: 768px) { - .counter-wrapper { - gap: 30px; - } -} diff --git a/web/src/components/starter/counter/counter.tsx b/web/src/components/starter/counter/counter.tsx deleted file mode 100644 index 289b87d..0000000 --- a/web/src/components/starter/counter/counter.tsx +++ /dev/null @@ -1,32 +0,0 @@ -import { component$, useSignal, $ } from "@builder.io/qwik"; -import styles from "./counter.module.css"; -import Gauge from "../gauge"; - -export default component$(() => { - const count = useSignal(70); - - const setCount = $((newValue: number) => { - if (newValue < 0 || newValue > 100) { - return; - } - count.value = newValue; - }); - - return ( -
- - - -
- ); -}); diff --git a/web/src/components/starter/footer/footer.module.css b/web/src/components/starter/footer/footer.module.css deleted file mode 100644 index 87786f1..0000000 --- a/web/src/components/starter/footer/footer.module.css +++ /dev/null @@ -1,23 +0,0 @@ -.anchor { - color: white !important; - display: block; - font-size: 0.8rem; - text-align: center; - text-decoration: none; - line-height: 1.5; -} - -.anchor span:not(.spacer) { - display: block; -} - -.spacer { - display: none; - padding: 0 15px; -} - -@media screen and (min-width: 768px) { - .anchor span { - display: inline !important; - } -} diff --git a/web/src/components/starter/footer/footer.tsx b/web/src/components/starter/footer/footer.tsx deleted file mode 100644 index 8e89cb9..0000000 --- a/web/src/components/starter/footer/footer.tsx +++ /dev/null @@ -1,19 +0,0 @@ -import { component$ } from "@builder.io/qwik"; -import { useServerTimeLoader } from "../../../routes/layout"; -import styles from "./footer.module.css"; - -export default component$(() => { - const serverTime = useServerTimeLoader(); - - return ( - - ); -}); diff --git a/web/src/components/starter/gauge/gauge.module.css b/web/src/components/starter/gauge/gauge.module.css deleted file mode 100644 index d7ccf1c..0000000 --- a/web/src/components/starter/gauge/gauge.module.css +++ /dev/null @@ -1,27 +0,0 @@ -.wrapper { - position: relative; -} - -.gauge { - width: 160px; -} - -.value { - position: absolute; - top: 50%; - left: 50%; - color: white; - font-size: 3rem; - transform: translate(-50%, -50%); - width: 200px; - text-align: center; -} - -@media screen and (min-width: 768px) { - .gauge { - width: 400px; - } - .value { - font-size: 7rem; - } -} diff --git a/web/src/components/starter/gauge/index.tsx b/web/src/components/starter/gauge/index.tsx deleted file mode 100644 index 996c38b..0000000 --- a/web/src/components/starter/gauge/index.tsx +++ /dev/null @@ -1,38 +0,0 @@ -import { component$ } from "@builder.io/qwik"; -import styles from "./gauge.module.css"; - -export default component$(({ value = 50 }: { value?: number }) => { - const safeValue = value < 0 || value > 100 ? 50 : value; - - return ( -
- - - - - - - - - - - - - {safeValue} -
- ); -}); diff --git a/web/src/components/starter/header/header.module.css b/web/src/components/starter/header/header.module.css deleted file mode 100644 index c74aa7e..0000000 --- a/web/src/components/starter/header/header.module.css +++ /dev/null @@ -1,44 +0,0 @@ -.wrapper { - display: flex; - align-items: center; - justify-content: space-between; -} - -.logo { - display: inline-block; -} -.logo a { - display: block; -} - -.header ul { - margin: 0; - padding: 0; - list-style: none; - display: flex; - gap: 30px; -} - -.header li { - display: none; - margin: 0; - padding: 0; - font-size: 0.7rem; -} - -.header li a { - color: white; - display: inline-block; - padding: 0; - text-decoration: none; -} - -.header li a:hover { - color: var(--qwik-light-blue); -} - -@media (min-width: 450px) { - .header li { - display: inline-block; - } -} diff --git a/web/src/components/starter/header/header.tsx b/web/src/components/starter/header/header.tsx deleted file mode 100644 index ec87f5e..0000000 --- a/web/src/components/starter/header/header.tsx +++ /dev/null @@ -1,43 +0,0 @@ -import { component$ } from "@builder.io/qwik"; -import { QwikLogo } from "../icons/qwik"; -import styles from "./header.module.css"; - -export default component$(() => { - return ( -
-
-
- - - -
- -
-
- ); -}); diff --git a/web/src/components/starter/hero/hero.module.css b/web/src/components/starter/hero/hero.module.css deleted file mode 100644 index 1f968a7..0000000 --- a/web/src/components/starter/hero/hero.module.css +++ /dev/null @@ -1,43 +0,0 @@ -.hero { - display: flex; - vertical-align: middle; - flex-direction: column; - flex-wrap: nowrap; - align-items: center; - height: 450px; - justify-content: center; - gap: 40px; -} - -.hero-image { - width: 100%; - position: absolute; - height: auto; - object-fit: cover; - z-index: -1; - opacity: 0.2; - pointer-events: none; -} - -.hero p { - color: white; - margin: 0; - font-size: 1rem; -} - -.button-group { - display: flex; - flex-direction: row; - gap: 24px; -} - -@media screen and (min-width: 768px) { - .hero { - gap: 60px; - height: 500px; - } - - .hero p { - font-size: 1.3rem; - } -} diff --git a/web/src/components/starter/hero/hero.tsx b/web/src/components/starter/hero/hero.tsx deleted file mode 100644 index 9acf623..0000000 --- a/web/src/components/starter/hero/hero.tsx +++ /dev/null @@ -1,82 +0,0 @@ -import { component$ } from "@builder.io/qwik"; -import styles from "./hero.module.css"; -import ImgThunder from "../../../media/thunder.png?jsx"; - -export default component$(() => { - return ( -
- -

- So fantastic -
- to have you here -

-

Have fun building your App with Qwik.

-
- - - Explore the docs - -
-
- ); -}); diff --git a/web/src/components/starter/infobox/infobox.module.css b/web/src/components/starter/infobox/infobox.module.css deleted file mode 100644 index b703912..0000000 --- a/web/src/components/starter/infobox/infobox.module.css +++ /dev/null @@ -1,23 +0,0 @@ -.infobox { - color: white; - font-size: 0.8rem; - line-height: 2; - margin: 0 0 40px; -} - -.infobox h3 { - font-size: 1rem; - font-weight: 400; - margin: 0 0 15px; - padding: 0; -} - -.infobox li { - line-height: 2.5; -} - -@media screen and (min-width: 600px) { - .infobox { - margin: 0; - } -} diff --git a/web/src/components/starter/infobox/infobox.tsx b/web/src/components/starter/infobox/infobox.tsx deleted file mode 100644 index f6f66e4..0000000 --- a/web/src/components/starter/infobox/infobox.tsx +++ /dev/null @@ -1,13 +0,0 @@ -import { Slot, component$ } from "@builder.io/qwik"; -import styles from "./infobox.module.css"; - -export default component$(() => { - return ( -
-

- -

- -
- ); -}); diff --git a/web/src/components/starter/next-steps/next-steps.module.css b/web/src/components/starter/next-steps/next-steps.module.css deleted file mode 100644 index bffdc73..0000000 --- a/web/src/components/starter/next-steps/next-steps.module.css +++ /dev/null @@ -1,36 +0,0 @@ -.gettingstarted { - display: flex; - color: white; - flex-direction: column; - justify-content: center; - align-items: center; - height: 280px; - line-height: 1.5; - gap: 10px; - max-width: 600px; - margin: 0 auto; -} - -.gettingstarted .intro { - font-size: 1rem; - width: 100%; - word-break: break-word; -} -.gettingstarted .hint { - font-size: 0.8rem; -} -.gettingstarted .hint a { - color: var(--qwik-dark-purple); -} - -@media screen and (min-width: 768px) { - .gettingstarted { - height: 180px; - } - .gettingstarted .intro { - font-size: 1.2rem; - } - .gettingstarted .hint { - font-size: 1rem; - } -} diff --git a/web/src/components/starter/next-steps/next-steps.tsx b/web/src/components/starter/next-steps/next-steps.tsx deleted file mode 100644 index 1e0a15f..0000000 --- a/web/src/components/starter/next-steps/next-steps.tsx +++ /dev/null @@ -1,81 +0,0 @@ -import { component$, $, useOnWindow, useSignal } from "@builder.io/qwik"; -import styles from "./next-steps.module.css"; - -export const GETTING_STARTED_STEPS = [ - { - message: - "Press and hold the ALT/Option key to activate 'Click-to-Source' mode", - }, - { - message: - "Select the title of this page while keeping the ALT/Option key pressed", - hint: 'Edit the title and save the changes. If your editor does not open, have a look at this page to set the correct LAUNCH_EDITOR value.', - }, - { - message: - "Update now the routeLoader$ defined in the src/routes/layout.tsx file", - hint: "Instead of returning the current date, you could return any possible string.
The output is displayed in the footer.", - }, - { - message: "Create a new Route called /me", - hint: 'Create a new directory called me in src/routes. Within this directory create a index.tsx file or copy the src/routes/index.tsx file. Your new route is now accessible here ✨', - }, - { - message: "Time to have a look at Forms", - hint: 'Open the TODO list App and add some items to the list. Try the same with disabled JavaScript 🐰', - }, - { - message: "Congratulations! You are now familiar with the basics! 🎉", - hint: "If you need further info on how to use qwik, have a look at qwik.builder.io or join the Discord channel.", - }, -]; - -export default component$(() => { - const gettingStartedStep = useSignal(0); - - useOnWindow( - "keydown", - $((e) => { - if ((e as KeyboardEvent).key === "Alt") { - gettingStartedStep.value = 1; - } - }), - ); - - return ( -
-

- Time for a -
- qwik intro? -

-
-
- -
- {gettingStartedStep.value + 1 < GETTING_STARTED_STEPS.length ? ( - - ) : ( - - )} -
- ); -}); diff --git a/web/src/global.css b/web/src/global.css deleted file mode 100644 index f4335aa..0000000 --- a/web/src/global.css +++ /dev/null @@ -1,46 +0,0 @@ -/** - * WHAT IS THIS FILE? - * - * Globally applied styles. No matter which components are in the page or matching route, - * the styles in here will be applied to the Document, without any sort of CSS scoping. - * - */ - -:root { - --qwik-dark-blue: #006ce9; - --qwik-light-blue: #18b6f6; - --qwik-light-purple: #ac7ff4; - --qwik-dark-purple: #713fc2; - --qwik-dirty-black: #1d2033; - --qwik-dark-background: #151934; - --qwik-dark-text: #ffffff; -} - -html { - line-height: 1; - -webkit-text-size-adjust: 100%; - -moz-tab-size: 4; - -o-tab-size: 4; - tab-size: 4; - font-family: - ui-sans-serif, - system-ui, - -apple-system, - BlinkMacSystemFont, - "Segoe UI", - Roboto, - "Helvetica Neue", - Arial, - "Noto Sans", - sans-serif, - "Apple Color Emoji", - "Segoe UI Emoji", - "Segoe UI Symbol", - "Noto Color Emoji"; -} - -body { - padding: 0; - margin: 0; - line-height: inherit; -} diff --git a/web/src/mock-data.ts b/web/src/mock-data.ts new file mode 100644 index 0000000..22af889 --- /dev/null +++ b/web/src/mock-data.ts @@ -0,0 +1,130 @@ + +import type { Section } from './types/PSC'; + +export const data: Section[] = [ + { + title: 'Authentication', + slug: 'authentication', + description: 'Securing your online account login credentials', + icon: 'password', + intro: 'Most reported data breaches are caused by the use of weak, default or stolen passwords (according to [this Verizon report](http://www.verizonenterprise.com/resources/reports/rp_dbir-2016-executive-summary_xg_en.pdf)).' + + 'Use long, strong and unique passwords, manage them in a secure password manager, enable 2-factor authentication, keep on top of breaches and take care while logging into your accounts.', + checklist: [ + { + point: 'Use a Strong Password', + priority: 'recommended', + details: `If your password is too short, or contains dictionary words, places or names- then it can be easily cracked through brute force, or guessed by someone. The easiest way to make a strong password, is by making it long (12+ characters)- consider using a 'passphrase', made up of many words. Alternatively, use a password generator to create a long, strong random password. Have a play with [HowSecureIsMyPassword.net](https://howsecureismypassword.net), to get an idea of how quickly common passwords can be cracked. Read more about creating strong passwords: [securityinabox.org](https://securityinabox.org/en/passwords/passwords-and-2fa/)`, + }, + { + point: 'Don\'t reuse Passwords', + priority: 'optional', + details: `If someone was to reuse a password, and one site they had an account with suffered a leak, then a criminal could easily gain unauthorized access to their other accounts. This is usually done through large-scale automated login requests, and it is called Credential Stuffing. Unfortunately this is all too common, but it's simple to protect against- use a different password for each of your online accounts`, + }, + { + point: 'Use a Secure Password Manager', + priority: 'advanced', + details: `For most people it is going to be near-impossible to remember hundreds of strong and unique passwords. A password manager is an application that generates, stores and auto-fills your login credentials for you. All your passwords will be encrypted against 1 master passwords (which you must remember, and it should be very strong). Most password managers have browser extensions and mobile apps, so whatever device you are on, your passwords can be auto-filled. A good all-rounder is [BitWarden](https://bitwarden.com), or see [Recommended Password Managers](https://github.com/Lissy93/awesome-privacy#password-managers)`, + }, + ], + color: 'yellow', + }, + { + title: 'Web Browsing', + slug: 'web-browsing', + description: 'Avoiding tracking, censorship, and data collection online', + icon: 'browser', + intro: '', + checklist: [], + color: 'emerald', + }, + { + title: 'Email', + slug: 'email', + description: 'Protecting the gateway to your online accounts', + icon: 'email', + intro: '', + checklist: [], + color: 'teal', + }, + { + title: 'Messaging', + slug: 'messaging', + description: 'Keeping your communications private and secure', + icon: 'messaging', + intro: '', + checklist: [], + color: 'cyan', + }, + { + title: 'Social Media', + slug: 'social-media', + description: 'Minimizing the risks associated with using online communities', + icon: 'social', + intro: '', + checklist: [], + color: 'blue', + }, + { + title: 'Networks', + slug: 'networks', + description: 'Safeguarding your network traffic', + icon: 'network', + intro: '', + checklist: [], + color: 'violet', + }, + { + title: 'Mobile Devices', + slug: 'mobile-devices', + description: 'Reduce invasive tracking for cells, smartphones and tablets', + icon: 'mobile', + intro: '', + checklist: [], + color: 'fuchsia', + }, + { + title: 'Personal Computers', + slug: 'personal-computers', + description: 'Securing your PC\'s operating system, data & activity', + icon: 'computer', + intro: '', + checklist: [], + color: 'pink', + }, + { + title: 'Smart Home', + slug: 'smart-home', + description: 'Using IoT devices without compromising your privacy', + icon: 'home', + intro: '', + checklist: [], + color: 'red', + }, + { + title: 'Personal Finance', + slug: 'personal-finance', + description: 'Protecting your funds, financial accounts and transactions', + icon: 'finance', + intro: '', + checklist: [], + color: 'purple', + }, + { + title: 'Human Aspect', + slug: 'human-aspect', + description: 'Avoiding social engineering security risks', + icon: 'human', + intro: '', + checklist: [], + color: 'indigo', + }, + { + title: 'Physical Security', + slug: 'physical-security', + description: 'Taking measures to prevent IRL security incidents', + icon: 'physical', + intro: '', + checklist: [], + color: 'lime', + }, +]; diff --git a/web/src/root.tsx b/web/src/root.tsx index 65ad337..1164247 100644 --- a/web/src/root.tsx +++ b/web/src/root.tsx @@ -1,4 +1,4 @@ -import { component$ } from "@builder.io/qwik"; +import { component$, useStyles$ } from "@builder.io/qwik"; import { QwikCityProvider, RouterOutlet, @@ -6,9 +6,13 @@ import { } from "@builder.io/qwik-city"; import { RouterHead } from "./components/router-head/router-head"; -import "./global.css"; +import tailwind from './styles/tailwind.css?inline'; + +import "./styles/global.css"; export default component$(() => { + + useStyles$(tailwind); /** * The root of a QwikCity site always start with the component, * immediately followed by the document's and . @@ -24,7 +28,7 @@ export default component$(() => { - + diff --git a/web/src/routes/checklist/[title]/index.tsx b/web/src/routes/checklist/[title]/index.tsx new file mode 100644 index 0000000..31f78aa --- /dev/null +++ b/web/src/routes/checklist/[title]/index.tsx @@ -0,0 +1,75 @@ +import { component$ } from '@builder.io/qwik'; +import { useLocation } from '@builder.io/qwik-city'; +import marked from 'marked'; + +import { data } from '../../../mock-data'; +import type { Section, Priority } from '../../../types/PSC'; + +export default component$(() => { + const loc = useLocation(); + // const endpoint = useEndpoint<{ params: { title: string } }>(); + const slug = loc.params.title; + + const section: Section | undefined = data.find((item: Section) => item.slug === slug); + + // You can now use `title` to fetch data related to this checklist item + // and render it below. + + const getBadgeClass = (priority: Priority, precedeClass: string = '') => { + switch (priority) { + case 'recommended': + return `${precedeClass}success`; + case 'optional': + return `${precedeClass}warning`; + case 'advanced': + return `${precedeClass}error`; + default: + return `${precedeClass}neutral`; + } + }; + + const generateId = (title: string) => { + return title.toLowerCase().replace(/ /g, '-'); + }; + + return ( +
+

{section?.title}

+

+ +
+ + + + + + + + + + + {section?.checklist.map((item, index) => ( + + + + + + + ))} + +
Done?AdviceLevelDetails
+ + + + +
+ {item.priority} +
+
+
+
+ ); +}); + diff --git a/web/src/routes/checklist/index.tsx b/web/src/routes/checklist/index.tsx new file mode 100644 index 0000000..a5c4f46 --- /dev/null +++ b/web/src/routes/checklist/index.tsx @@ -0,0 +1,13 @@ +import { component$ } from "@builder.io/qwik"; + +import SectionLinkGrid from "../../components/psc/section-link-grid"; + +import { data } from '../../mock-data'; + +export default component$(() => { + return ( +
+ +
+ ); +}); diff --git a/web/src/routes/demo/flower/flower.css b/web/src/routes/demo/flower/flower.css deleted file mode 100644 index 2414520..0000000 --- a/web/src/routes/demo/flower/flower.css +++ /dev/null @@ -1,77 +0,0 @@ -.host { - display: grid; - - align-items: center; - justify-content: center; - justify-items: center; - --rotation: 135deg; - --rotation: 225deg; - --size-step: 10px; - --odd-color-step: 5; - --even-color-step: 5; - --center: 12; - - width: 100%; - height: 500px; - - contain: strict; -} - -h1 { - margin-bottom: 60px; -} - -.input { - width: 60%; -} - -.square { - --size: calc(40px + var(--index) * var(--size-step)); - - display: block; - width: var(--size); - height: var(--size); - transform: rotateZ( - calc(var(--rotation) * var(--state) * (var(--center) - var(--index))) - ); - transition-property: transform, border-color; - transition-duration: 5s; - transition-timing-function: ease-in-out; - grid-area: 1 / 1; - background: white; - border-width: 2px; - border-style: solid; - border-color: black; - box-sizing: border-box; - will-change: transform, border-color; - - contain: strict; -} - -.square.odd { - --luminance: calc(1 - calc(calc(var(--index) * var(--odd-color-step)) / 256)); - background: rgb( - calc(172 * var(--luminance)), - calc(127 * var(--luminance)), - calc(244 * var(--luminance)) - ); -} - -.pride .square:nth-child(12n + 1) { - background: #e70000; -} -.pride .square:nth-child(12n + 3) { - background: #ff8c00; -} -.pride .square:nth-child(12n + 5) { - background: #ffef00; -} -.pride .square:nth-child(12n + 7) { - background: #00811f; -} -.pride .square:nth-child(12n + 9) { - background: #0044ff; -} -.pride .square:nth-child(12n + 11) { - background: #760089; -} diff --git a/web/src/routes/demo/flower/index.tsx b/web/src/routes/demo/flower/index.tsx deleted file mode 100644 index 28734a4..0000000 --- a/web/src/routes/demo/flower/index.tsx +++ /dev/null @@ -1,69 +0,0 @@ -import { - component$, - useVisibleTask$, - useStore, - useStylesScoped$, -} from "@builder.io/qwik"; -import { type DocumentHead, useLocation } from "@builder.io/qwik-city"; -import styles from "./flower.css?inline"; - -export default component$(() => { - useStylesScoped$(styles); - const loc = useLocation(); - - const state = useStore({ - count: 0, - number: 20, - }); - - useVisibleTask$(({ cleanup }) => { - const timeout = setTimeout(() => (state.count = 1), 500); - cleanup(() => clearTimeout(timeout)); - - const internal = setInterval(() => state.count++, 7000); - cleanup(() => clearInterval(internal)); - }); - - return ( -
- -

- Generate Flowers -

- - { - state.number = el.valueAsNumber; - }} - /> -
- {Array.from({ length: state.number }, (_, i) => ( -
- )).reverse()} -
-
- ); -}); - -export const head: DocumentHead = { - title: "Qwik Flower", -}; diff --git a/web/src/routes/demo/todolist/index.tsx b/web/src/routes/demo/todolist/index.tsx deleted file mode 100644 index 943235e..0000000 --- a/web/src/routes/demo/todolist/index.tsx +++ /dev/null @@ -1,78 +0,0 @@ -import { component$ } from "@builder.io/qwik"; -import { - type DocumentHead, - routeLoader$, - routeAction$, - zod$, - z, - Form, -} from "@builder.io/qwik-city"; -import styles from "./todolist.module.css"; - -interface ListItem { - text: string; -} - -export const list: ListItem[] = []; - -export const useListLoader = routeLoader$(() => { - return list; -}); - -export const useAddToListAction = routeAction$( - (item) => { - list.push(item); - return { - success: true, - }; - }, - zod$({ - text: z.string().trim().min(1), - }), -); - -export default component$(() => { - const list = useListLoader(); - const action = useAddToListAction(); - - return ( - <> -
-

- TODO List -

-
- - - -
- {list.value.length === 0 ? ( - No items found - ) : ( -
    - {list.value.map((item, index) => ( -
  • {item.text}
    • - ))} -
- )} -
- -
-
- {" "} - -
- -

- PS: This little app works even when JavaScript is disabled. -

-
- - ); -}); - -export const head: DocumentHead = { - title: "Qwik Todo List", -}; diff --git a/web/src/routes/demo/todolist/todolist.module.css b/web/src/routes/demo/todolist/todolist.module.css deleted file mode 100644 index e1f6f27..0000000 --- a/web/src/routes/demo/todolist/todolist.module.css +++ /dev/null @@ -1,44 +0,0 @@ -.list { - display: flex; - flex-direction: column; - gap: 20px; - color: white; -} - -.list, -.empty { - min-height: 250px; -} - -.list li { - list-style: none; -} - -.empty { - color: white; - display: block; -} - -.input { - background: white; - color: var(--qwik-light-blue); - border: none; - border-radius: 8px; - padding: 15px 20px; - margin-right: 10px; - font-size: 0.8rem; -} - -.hint { - font-size: 0.8rem; - color: white; - margin-top: 30px; -} - -@media screen and (min-width: 768px) { - .input { - padding: 23px 35px; - margin-right: 20px; - font-size: 1rem; - } -} diff --git a/web/src/routes/index.tsx b/web/src/routes/index.tsx index 0a38fc0..aa5f429 100644 --- a/web/src/routes/index.tsx +++ b/web/src/routes/index.tsx @@ -1,102 +1,16 @@ import { component$ } from "@builder.io/qwik"; import type { DocumentHead } from "@builder.io/qwik-city"; -import Counter from "../components/starter/counter/counter"; -import Hero from "../components/starter/hero/hero"; -import Infobox from "../components/starter/infobox/infobox"; -import Starter from "../components/starter/next-steps/next-steps"; +import Hero from "../components/furniture/hero"; +import SectionLinkGrid from "../components/psc/section-link-grid"; + +import { data } from '../mock-data'; export default component$(() => { return ( <> - - - - - -
-

- You can count -
on me -

- -
- -
- -
- CLI Commands -
- <> -

- npm run dev -
- Starts the development server and watches for changes -

-

- npm run preview -
- Creates production build and starts a server to preview it -

-

- npm run build -
- Creates production build -

-

- npm run qwik add -
- Runs the qwik CLI to add integrations -

- - - -
- -
- Example Apps -
-

- Have a look at the Flower App or the{" "} - Todo App. -

- - - -
- Community -
- - -
-
+ ); }); diff --git a/web/src/routes/layout.tsx b/web/src/routes/layout.tsx index faa0f2a..d06c956 100644 --- a/web/src/routes/layout.tsx +++ b/web/src/routes/layout.tsx @@ -1,35 +1,25 @@ import { component$, Slot, useStyles$ } from "@builder.io/qwik"; -import { routeLoader$ } from "@builder.io/qwik-city"; import type { RequestHandler } from "@builder.io/qwik-city"; -import Header from "../components/starter/header/header"; -import Footer from "../components/starter/footer/footer"; +import Header from "../components/furniture/header"; +import Navbar from "../components/furniture/nav"; +import Footer from "../components/furniture/footer"; -import styles from "./styles.css?inline"; +// useStyles$(tailwind); export const onGet: RequestHandler = async ({ cacheControl }) => { - // Control caching for this request for best performance and to reduce hosting costs: - // https://qwik.builder.io/docs/caching/ cacheControl({ - // Always serve a cached response by default, up to a week stale staleWhileRevalidate: 60 * 60 * 24 * 7, - // Max once every 5 seconds, revalidate on the server to get a fresh version of this page maxAge: 5, }); }; -export const useServerTimeLoader = routeLoader$(() => { - return { - date: new Date().toISOString(), - }; -}); - export default component$(() => { - useStyles$(styles); return ( <> -
-
+ {/*
*/} + +