Skip to content

Commit 609d52c

Browse files
committed
added TW/DaisyUI/etc...
1 parent 9b7c68a commit 609d52c

15 files changed

+1336
-1217
lines changed

package-lock.json

+1,194-1,018
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

package.json

+11-2
Original file line numberDiff line numberDiff line change
@@ -6,9 +6,13 @@
66
"dependencies": {
77
"@faker-js/faker": "^8.4.1",
88
"@prisma/client": "^5.10.2",
9+
"@radix-ui/react-icons": "^1.3.0",
10+
"@radix-ui/react-navigation-menu": "^1.1.4",
911
"@types/cookie-parser": "^1.4.6",
1012
"bcrypt": "^5.1.1",
1113
"body-parser": "^1.20.2",
14+
"class-variance-authority": "^0.7.0",
15+
"clsx": "^2.1.0",
1216
"cookie-parser": "^1.4.6",
1317
"dotenv": "^16.4.5",
1418
"express": "^4.18.2",
@@ -18,25 +22,30 @@
1822
"jsonwebtoken": "^9.0.2",
1923
"morgan": "^1.10.0",
2024
"picocolors": "^1.0.0",
21-
"rm": "^0.1.8",
25+
"tailwind-merge": "^2.2.1",
26+
"tailwindcss-animate": "^1.0.7",
2227
"validator": "^13.11.0"
2328
},
2429
"devDependencies": {
30+
"@tailwindcss/typography": "^0.5.10",
2531
"@types/bcrypt": "^5.0.2",
2632
"@types/body-parser": "^1.19.5",
2733
"@types/express": "^4.17.21",
2834
"@types/jsonwebtoken": "^9.0.5",
2935
"@types/morgan": "^1.9.9",
3036
"@types/node": "^20.11.20",
3137
"@types/validator": "^13.11.9",
38+
"daisyui": "^4.7.3",
3239
"nodemon": "^3.0.3",
3340
"prisma": "^5.10.2",
41+
"tailwindcss": "^3.4.1",
3442
"typescript": "^5.3.3"
3543
},
3644
"scripts": {
3745
"serve": "node .",
3846
"dev": "npx tsc --watch",
3947
"build": "npx tsc",
40-
"watch": "NODE_ENV='development' npx nodemon ."
48+
"watch": "NODE_ENV='development' npx nodemon .",
49+
"style": "npx tailwindcss -i tailwind.css -o public/style.css --watch --minify"
4150
}
4251
}

public/htmx.min.js

+1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

public/moon.svg

+1
Loading

public/style.css

+1-144
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

public/sun.svg

+1
Loading

public/theme-toggle-classic.min.css

+1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

src/main.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@ app.use(
3030
helmet({
3131
contentSecurityPolicy: {
3232
directives: {
33-
"script-src": ["'self'", "devpuzzles.com"],
33+
"script-src": ["'self'", "devpuzzles.com", "https://cdn.jsdelivr.net", "https://plausible.io"],
3434
},
3535
},
3636
}),

tailwind.config.js

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
/** @type {import('tailwindcss').Config} */
2+
export default {
3+
content: ["./src/**/*.{handlebars,ts,tsx,jsx}", "./views/**/*.{handlebars,ts,js,tsx,jsx}"],
4+
theme: {
5+
extend: {},
6+
},
7+
plugins: [require('@tailwindcss/typography'), require("tailwindcss-animate"), require("daisyui")],
8+
daisyui: {
9+
themes: [
10+
"forest",
11+
"emerald"
12+
]
13+
}
14+
}
15+

tailwind.css

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
@tailwind base;
2+
@tailwind components;
3+
@tailwind utilities;

tsconfig.json

+7-11
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,17 @@
11
{
22
"compilerOptions": {
33
/* Visit https://aka.ms/tsconfig to read more about this file */
4-
54
/* Projects */
65
// "incremental": true, /* Save .tsbuildinfo files to allow for incremental compilation of projects. */
76
// "composite": true, /* Enable constraints that allow a TypeScript project to be used with project references. */
87
// "tsBuildInfoFile": "./.tsbuildinfo", /* Specify the path to .tsbuildinfo incremental compilation file. */
98
// "disableSourceOfProjectReferenceRedirect": true, /* Disable preferring source files instead of declaration files when referencing composite projects. */
109
// "disableSolutionSearching": true, /* Opt a project out of multi-project reference checking when editing. */
1110
// "disableReferencedProjectLoad": true, /* Reduce the number of projects loaded automatically by TypeScript. */
12-
1311
/* Language and Environment */
1412
"target": "ESNext", /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */
1513
// "lib": [], /* Specify a set of bundled library declaration files that describe the target runtime environment. */
16-
// "jsx": "preserve", /* Specify what JSX code is generated. */
14+
"jsx": "react", /* Specify what JSX code is generated. */
1715
// "experimentalDecorators": true, /* Enable experimental support for legacy experimental decorators. */
1816
// "emitDecoratorMetadata": true, /* Emit design-type metadata for decorated declarations in source files. */
1917
// "jsxFactory": "", /* Specify the JSX factory function used when targeting React JSX emit, e.g. 'React.createElement' or 'h'. */
@@ -23,13 +21,16 @@
2321
// "noLib": true, /* Disable including any library files, including the default lib.d.ts. */
2422
// "useDefineForClassFields": true, /* Emit ECMAScript-standard-compliant class fields. */
2523
// "moduleDetection": "auto", /* Control what method is used to detect module-format JS files. */
26-
2724
/* Modules */
2825
"module": "NodeNext", /* Specify what module code is generated. */
2926
"rootDir": "src/", /* Specify the root folder within your source files. */
3027
// "moduleResolution": "node10", /* Specify how TypeScript looks up a file from a given module specifier. */
31-
// "baseUrl": "./", /* Specify the base directory to resolve non-relative module names. */
32-
// "paths": {}, /* Specify a set of entries that re-map imports to additional lookup locations. */
28+
"baseUrl": ".", /* Specify the base directory to resolve non-relative module names. */
29+
"paths": {
30+
"@/*": [
31+
"src/*"
32+
]
33+
}, /* Specify a set of entries that re-map imports to additional lookup locations. */
3334
// "rootDirs": [], /* Allow multiple folders to be treated as one when resolving modules. */
3435
// "typeRoots": [], /* Specify multiple folders that act like './node_modules/@types'. */
3536
// "types": [], /* Specify type package names to be included without being referenced in a source file. */
@@ -42,12 +43,10 @@
4243
// "resolveJsonModule": true, /* Enable importing .json files. */
4344
// "allowArbitraryExtensions": true, /* Enable importing files with any extension, provided a declaration file is present. */
4445
// "noResolve": true, /* Disallow 'import's, 'require's or '<reference>'s from expanding the number of files TypeScript should add to a project. */
45-
4646
/* JavaScript Support */
4747
// "allowJs": true, /* Allow JavaScript files to be a part of your program. Use the 'checkJS' option to get errors from these files. */
4848
// "checkJs": true, /* Enable error reporting in type-checked JavaScript files. */
4949
// "maxNodeModuleJsDepth": 1, /* Specify the maximum folder depth used for checking JavaScript files from 'node_modules'. Only applicable with 'allowJs'. */
50-
5150
/* Emit */
5251
// "declaration": true, /* Generate .d.ts files from TypeScript and JavaScript files in your project. */
5352
// "declarationMap": true, /* Create sourcemaps for d.ts files. */
@@ -72,15 +71,13 @@
7271
// "preserveConstEnums": true, /* Disable erasing 'const enum' declarations in generated code. */
7372
// "declarationDir": "./", /* Specify the output directory for generated declaration files. */
7473
// "preserveValueImports": true, /* Preserve unused imported values in the JavaScript output that would otherwise be removed. */
75-
7674
/* Interop Constraints */
7775
// "isolatedModules": true, /* Ensure that each file can be safely transpiled without relying on other imports. */
7876
// "verbatimModuleSyntax": true, /* Do not transform or elide any imports or exports not marked as type-only, ensuring they are written in the output file's format based on the 'module' setting. */
7977
// "allowSyntheticDefaultImports": true, /* Allow 'import x from y' when a module doesn't have a default export. */
8078
"esModuleInterop": true, /* Emit additional JavaScript to ease support for importing CommonJS modules. This enables 'allowSyntheticDefaultImports' for type compatibility. */
8179
// "preserveSymlinks": true, /* Disable resolving symlinks to their realpath. This correlates to the same flag in node. */
8280
"forceConsistentCasingInFileNames": true, /* Ensure that casing is correct in imports. */
83-
8481
/* Type Checking */
8582
"strict": true, /* Enable all strict type-checking options. */
8683
// "noImplicitAny": true, /* Enable error reporting for expressions and declarations with an implied 'any' type. */
@@ -101,7 +98,6 @@
10198
// "noPropertyAccessFromIndexSignature": true, /* Enforces using indexed accessors for keys declared using an indexed type. */
10299
// "allowUnusedLabels": true, /* Disable error reporting for unused labels. */
103100
// "allowUnreachableCode": true, /* Disable error reporting for unreachable code. */
104-
105101
/* Completeness */
106102
// "skipDefaultLibCheck": true, /* Skip type checking .d.ts files that are included with TypeScript. */
107103
"skipLibCheck": true /* Skip type checking all .d.ts files. */

views/home.handlebars

+12-21
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,14 @@
1-
2-
<main class="container">
3-
<h1>Welcome to DevPuzzles</h1>
4-
<p>
5-
DevPuzzles focuses on providing fun challenges, games, and puzzles related to computers. Our puzzles are made <a
6-
href="https://github.com/tristanisham/devpuzzles"> by our community</a>
7-
and we encourage you to make your own!
8-
</p>
1+
<main class="mx-auto container">
2+
<div class="flex flex-col flex-1 justify-center items-center">
3+
<article class="mx-20 prose lg:prose-xl">
4+
<h1>Welcome to DevPuzzles</h1>
5+
<p>
6+
DevPuzzles focuses on providing fun challenges, games, and puzzles related to computers. Our puzzles are made <a
7+
href="https://github.com/tristanisham/devpuzzles"> by our community</a>
8+
and we encourage you to make your own!
9+
</p>
10+
11+
</article>
12+
</div>
913

1014
</main>
11-
12-
<style>
13-
p {
14-
font-size: larger;
15-
font-weight: 400;
16-
}
17-
18-
#puzzle-mjs-example {
19-
display: flex;
20-
flex-direction: row;
21-
}
22-
</style>
23-

views/layouts/main.handlebars

+3
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@
77
<link rel="stylesheet" href="/style.css" />
88
<link rel="shortcut icon" href="devpuzzles.jpg" type="image/jpg" />
99
<script defer data-domain="devpuzzles.com" src="https://plausible.io/js/script.js"></script>
10+
<link rel="stylesheet" href="/theme-toggle-classic.min.css">
1011
</head>
1112

1213
<body>
@@ -15,7 +16,9 @@
1516
{{else}}
1617
{{> nav}}
1718
{{/if}}
19+
1820
{{{body}}}
21+
<script src="https://cdn.jsdelivr.net/npm/theme-change@2.0.2/index.js"></script>
1922
</body>
2023

2124
</html>

views/partials/auth-nav.handlebars

+45-9
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,46 @@
11
<nav>
2-
<a class="nav-logo" href="/">{{title}}</a>
3-
<a class="nav-item" href="https://github.com/tristanisham/devpuzzles">Our
4-
Source Code &star;</a>
5-
{{! Spacer }}
6-
<div class="spacer" style="flex-grow: 1;"></div>
7-
8-
<a href="/@{{user.handle}}" class="nav-item">My profile</a>
9-
10-
</nav>
2+
<div class="navbar bg-base-100">
3+
<div class="flex-1">
4+
<a class="btn btn-ghost text-xl">daisyUI</a>
5+
</div>
6+
<div class="flex-none gap-2">
7+
<div class="form-control">
8+
<input type="text" placeholder="Search" class="input input-bordered w-24 md:w-auto" />
9+
</div>
10+
<div>
11+
{{!-- Theme Toggle --}}
12+
<button class="theme-toggle theme-toggle--reversed" type="button" title="Toggle theme" aria-label="Toggle theme"
13+
data-toggle-theme="forest,emerald" data-act-class="ACTIVECLASS">
14+
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="1em" height="1em" fill="currentColor"
15+
class="theme-toggle__expand" viewBox="0 0 32 32">
16+
<clipPath id="theme-toggle__expand__cutout">
17+
<path d="M0-11h25a1 1 0 0017 13v30H0Z" />
18+
</clipPath>
19+
<g clip-path="url(#theme-toggle__expand__cutout)">
20+
<circle cx="16" cy="16" r="8.4" />
21+
<path
22+
d="M18.3 3.2c0 1.3-1 2.3-2.3 2.3s-2.3-1-2.3-2.3S14.7.9 16 .9s2.3 1 2.3 2.3zm-4.6 25.6c0-1.3 1-2.3 2.3-2.3s2.3 1 2.3 2.3-1 2.3-2.3 2.3-2.3-1-2.3-2.3zm15.1-10.5c-1.3 0-2.3-1-2.3-2.3s1-2.3 2.3-2.3 2.3 1 2.3 2.3-1 2.3-2.3 2.3zM3.2 13.7c1.3 0 2.3 1 2.3 2.3s-1 2.3-2.3 2.3S.9 17.3.9 16s1-2.3 2.3-2.3zm5.8-7C9 7.9 7.9 9 6.7 9S4.4 8 4.4 6.7s1-2.3 2.3-2.3S9 5.4 9 6.7zm16.3 21c-1.3 0-2.3-1-2.3-2.3s1-2.3 2.3-2.3 2.3 1 2.3 2.3-1 2.3-2.3 2.3zm2.4-21c0 1.3-1 2.3-2.3 2.3S23 7.9 23 6.7s1-2.3 2.3-2.3 2.4 1 2.4 2.3zM6.7 23C8 23 9 24 9 25.3s-1 2.3-2.3 2.3-2.3-1-2.3-2.3 1-2.3 2.3-2.3z" />
23+
</g>
24+
</svg></button>
25+
</div>
26+
<div class="dropdown dropdown-end">
27+
<div tabindex="0" role="button" class="btn btn-ghost btn-circle avatar">
28+
<div class="w-10 rounded-full">
29+
<img alt="Tailwind CSS Navbar component"
30+
src="https://daisyui.com/images/stock/photo-1534528741775-53994a69daeb.jpg" />
31+
</div>
32+
</div>
33+
<ul tabindex="0" class="mt-3 z-[1] p-2 shadow menu menu-sm dropdown-content bg-base-100 rounded-box w-52">
34+
<li>
35+
<a href="/@{{user.handle}}" class="justify-between">
36+
Profile
37+
<span class="badge">New</span>
38+
</a>
39+
</li>
40+
<li><a>Settings</a></li>
41+
<li><a>Logout</a></li>
42+
</ul>
43+
</div>
44+
</div>
45+
</div>
46+
</nav>

views/partials/nav.handlebars

+40-11
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,41 @@
11
<nav>
2-
<a class="nav-logo" href="/">{{title}}</a>
3-
<a class="nav-item" href="https://github.com/tristanisham/devpuzzles">Our
4-
Source Code &star;</a>
5-
{{! Spacer }}
6-
<div class="spacer" style="flex-grow: 1;"></div>
7-
8-
<a href="/login" class="nav-item">Login</a>
9-
<span>/</span>
10-
<a href="/signup" class="nav-item">Signup</a>
11-
12-
</nav>
2+
<div class="navbar bg-base-100">
3+
<div class="flex-1">
4+
<a class="btn btn-ghost text-xl">{{title}}</a>
5+
</div>
6+
<div class="flex-none">
7+
<ul class="menu menu-horizontal px-1">
8+
{{!-- Theme Toggle --}}
9+
<li>
10+
<button class="theme-toggle theme-toggle--reversed" type="button" title="Toggle theme"
11+
aria-label="Toggle theme" data-toggle-theme="forest,emerald" data-act-class="ACTIVECLASS">
12+
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="1em" height="1em" fill="currentColor"
13+
class="theme-toggle__expand" viewBox="0 0 32 32">
14+
<clipPath id="theme-toggle__expand__cutout">
15+
<path d="M0-11h25a1 1 0 0017 13v30H0Z" />
16+
</clipPath>
17+
<g clip-path="url(#theme-toggle__expand__cutout)">
18+
<circle cx="16" cy="16" r="8.4" />
19+
<path
20+
d="M18.3 3.2c0 1.3-1 2.3-2.3 2.3s-2.3-1-2.3-2.3S14.7.9 16 .9s2.3 1 2.3 2.3zm-4.6 25.6c0-1.3 1-2.3 2.3-2.3s2.3 1 2.3 2.3-1 2.3-2.3 2.3-2.3-1-2.3-2.3zm15.1-10.5c-1.3 0-2.3-1-2.3-2.3s1-2.3 2.3-2.3 2.3 1 2.3 2.3-1 2.3-2.3 2.3zM3.2 13.7c1.3 0 2.3 1 2.3 2.3s-1 2.3-2.3 2.3S.9 17.3.9 16s1-2.3 2.3-2.3zm5.8-7C9 7.9 7.9 9 6.7 9S4.4 8 4.4 6.7s1-2.3 2.3-2.3S9 5.4 9 6.7zm16.3 21c-1.3 0-2.3-1-2.3-2.3s1-2.3 2.3-2.3 2.3 1 2.3 2.3-1 2.3-2.3 2.3zm2.4-21c0 1.3-1 2.3-2.3 2.3S23 7.9 23 6.7s1-2.3 2.3-2.3 2.4 1 2.4 2.3zM6.7 23C8 23 9 24 9 25.3s-1 2.3-2.3 2.3-2.3-1-2.3-2.3 1-2.3 2.3-2.3z" />
21+
</g>
22+
</svg></button>
23+
</li>
24+
<li><a>Link</a></li>
25+
<li>
26+
<details>
27+
<summary>
28+
Parent
29+
</summary>
30+
<ul class="p-2 bg-base-100 rounded-t-none">
31+
<li>
32+
<a href="/login" class="nav-item">Login</a>
33+
</li>
34+
<li><a href="/about">About</a></li>
35+
</ul>
36+
</details>
37+
</li>
38+
</ul>
39+
</div>
40+
</div>
41+
</nav>

0 commit comments

Comments
 (0)