Fix broken mobile layout, sidebar portal, and header animations
This commit is contained in:
Avery Felts
parent
f5363fea7c
commit
0d0258de97
50
.open-next 2/worker 10.js
Normal file
50
.open-next 2/worker 10.js
Normal file
@ -0,0 +1,50 @@
|
||||
//@ts-expect-error: Will be resolved by wrangler build
|
||||
import { handleImageRequest } from "./cloudflare/images.js";
|
||||
//@ts-expect-error: Will be resolved by wrangler build
|
||||
import { runWithCloudflareRequestContext } from "./cloudflare/init.js";
|
||||
//@ts-expect-error: Will be resolved by wrangler build
|
||||
import { maybeGetSkewProtectionResponse } from "./cloudflare/skew-protection.js";
|
||||
// @ts-expect-error: Will be resolved by wrangler build
|
||||
import { handler as middlewareHandler } from "./middleware/handler.mjs";
|
||||
//@ts-expect-error: Will be resolved by wrangler build
|
||||
export { DOQueueHandler } from "./.build/durable-objects/queue.js";
|
||||
//@ts-expect-error: Will be resolved by wrangler build
|
||||
export { DOShardedTagCache } from "./.build/durable-objects/sharded-tag-cache.js";
|
||||
//@ts-expect-error: Will be resolved by wrangler build
|
||||
export { BucketCachePurge } from "./.build/durable-objects/bucket-cache-purge.js";
|
||||
export default {
|
||||
async fetch(request, env, ctx) {
|
||||
return runWithCloudflareRequestContext(request, env, ctx, async () => {
|
||||
const response = maybeGetSkewProtectionResponse(request);
|
||||
if (response) {
|
||||
return response;
|
||||
}
|
||||
const url = new URL(request.url);
|
||||
// Serve images in development.
|
||||
// Note: "/cdn-cgi/image/..." requests do not reach production workers.
|
||||
if (url.pathname.startsWith("/cdn-cgi/image/")) {
|
||||
const m = url.pathname.match(/\/cdn-cgi\/image\/.+?\/(?<url>.+)$/);
|
||||
if (m === null) {
|
||||
return new Response("Not Found!", { status: 404 });
|
||||
}
|
||||
const imageUrl = m.groups.url;
|
||||
return imageUrl.match(/^https?:\/\//)
|
||||
? fetch(imageUrl, { cf: { cacheEverything: true } })
|
||||
: env.ASSETS?.fetch(new URL(`/${imageUrl}`, url));
|
||||
}
|
||||
// Fallback for the Next default image loader.
|
||||
if (url.pathname ===
|
||||
`${globalThis.__NEXT_BASE_PATH__}/_next/image${globalThis.__TRAILING_SLASH__ ? "/" : ""}`) {
|
||||
return await handleImageRequest(url, request.headers, env);
|
||||
}
|
||||
// - `Request`s are handled by the Next server
|
||||
const reqOrResp = await middlewareHandler(request, env, ctx);
|
||||
if (reqOrResp instanceof Response) {
|
||||
return reqOrResp;
|
||||
}
|
||||
// @ts-expect-error: resolved by wrangler build
|
||||
const { handler } = await import("./server-functions/default/handler.mjs");
|
||||
return handler(reqOrResp, env, ctx, request.signal);
|
||||
});
|
||||
},
|
||||
};
|
||||
50
.open-next 2/worker 11.js
Normal file
50
.open-next 2/worker 11.js
Normal file
@ -0,0 +1,50 @@
|
||||
//@ts-expect-error: Will be resolved by wrangler build
|
||||
import { handleImageRequest } from "./cloudflare/images.js";
|
||||
//@ts-expect-error: Will be resolved by wrangler build
|
||||
import { runWithCloudflareRequestContext } from "./cloudflare/init.js";
|
||||
//@ts-expect-error: Will be resolved by wrangler build
|
||||
import { maybeGetSkewProtectionResponse } from "./cloudflare/skew-protection.js";
|
||||
// @ts-expect-error: Will be resolved by wrangler build
|
||||
import { handler as middlewareHandler } from "./middleware/handler.mjs";
|
||||
//@ts-expect-error: Will be resolved by wrangler build
|
||||
export { DOQueueHandler } from "./.build/durable-objects/queue.js";
|
||||
//@ts-expect-error: Will be resolved by wrangler build
|
||||
export { DOShardedTagCache } from "./.build/durable-objects/sharded-tag-cache.js";
|
||||
//@ts-expect-error: Will be resolved by wrangler build
|
||||
export { BucketCachePurge } from "./.build/durable-objects/bucket-cache-purge.js";
|
||||
export default {
|
||||
async fetch(request, env, ctx) {
|
||||
return runWithCloudflareRequestContext(request, env, ctx, async () => {
|
||||
const response = maybeGetSkewProtectionResponse(request);
|
||||
if (response) {
|
||||
return response;
|
||||
}
|
||||
const url = new URL(request.url);
|
||||
// Serve images in development.
|
||||
// Note: "/cdn-cgi/image/..." requests do not reach production workers.
|
||||
if (url.pathname.startsWith("/cdn-cgi/image/")) {
|
||||
const m = url.pathname.match(/\/cdn-cgi\/image\/.+?\/(?<url>.+)$/);
|
||||
if (m === null) {
|
||||
return new Response("Not Found!", { status: 404 });
|
||||
}
|
||||
const imageUrl = m.groups.url;
|
||||
return imageUrl.match(/^https?:\/\//)
|
||||
? fetch(imageUrl, { cf: { cacheEverything: true } })
|
||||
: env.ASSETS?.fetch(new URL(`/${imageUrl}`, url));
|
||||
}
|
||||
// Fallback for the Next default image loader.
|
||||
if (url.pathname ===
|
||||
`${globalThis.__NEXT_BASE_PATH__}/_next/image${globalThis.__TRAILING_SLASH__ ? "/" : ""}`) {
|
||||
return await handleImageRequest(url, request.headers, env);
|
||||
}
|
||||
// - `Request`s are handled by the Next server
|
||||
const reqOrResp = await middlewareHandler(request, env, ctx);
|
||||
if (reqOrResp instanceof Response) {
|
||||
return reqOrResp;
|
||||
}
|
||||
// @ts-expect-error: resolved by wrangler build
|
||||
const { handler } = await import("./server-functions/default/handler.mjs");
|
||||
return handler(reqOrResp, env, ctx, request.signal);
|
||||
});
|
||||
},
|
||||
};
|
||||
50
.open-next 2/worker 12.js
Normal file
50
.open-next 2/worker 12.js
Normal file
@ -0,0 +1,50 @@
|
||||
//@ts-expect-error: Will be resolved by wrangler build
|
||||
import { handleImageRequest } from "./cloudflare/images.js";
|
||||
//@ts-expect-error: Will be resolved by wrangler build
|
||||
import { runWithCloudflareRequestContext } from "./cloudflare/init.js";
|
||||
//@ts-expect-error: Will be resolved by wrangler build
|
||||
import { maybeGetSkewProtectionResponse } from "./cloudflare/skew-protection.js";
|
||||
// @ts-expect-error: Will be resolved by wrangler build
|
||||
import { handler as middlewareHandler } from "./middleware/handler.mjs";
|
||||
//@ts-expect-error: Will be resolved by wrangler build
|
||||
export { DOQueueHandler } from "./.build/durable-objects/queue.js";
|
||||
//@ts-expect-error: Will be resolved by wrangler build
|
||||
export { DOShardedTagCache } from "./.build/durable-objects/sharded-tag-cache.js";
|
||||
//@ts-expect-error: Will be resolved by wrangler build
|
||||
export { BucketCachePurge } from "./.build/durable-objects/bucket-cache-purge.js";
|
||||
export default {
|
||||
async fetch(request, env, ctx) {
|
||||
return runWithCloudflareRequestContext(request, env, ctx, async () => {
|
||||
const response = maybeGetSkewProtectionResponse(request);
|
||||
if (response) {
|
||||
return response;
|
||||
}
|
||||
const url = new URL(request.url);
|
||||
// Serve images in development.
|
||||
// Note: "/cdn-cgi/image/..." requests do not reach production workers.
|
||||
if (url.pathname.startsWith("/cdn-cgi/image/")) {
|
||||
const m = url.pathname.match(/\/cdn-cgi\/image\/.+?\/(?<url>.+)$/);
|
||||
if (m === null) {
|
||||
return new Response("Not Found!", { status: 404 });
|
||||
}
|
||||
const imageUrl = m.groups.url;
|
||||
return imageUrl.match(/^https?:\/\//)
|
||||
? fetch(imageUrl, { cf: { cacheEverything: true } })
|
||||
: env.ASSETS?.fetch(new URL(`/${imageUrl}`, url));
|
||||
}
|
||||
// Fallback for the Next default image loader.
|
||||
if (url.pathname ===
|
||||
`${globalThis.__NEXT_BASE_PATH__}/_next/image${globalThis.__TRAILING_SLASH__ ? "/" : ""}`) {
|
||||
return await handleImageRequest(url, request.headers, env);
|
||||
}
|
||||
// - `Request`s are handled by the Next server
|
||||
const reqOrResp = await middlewareHandler(request, env, ctx);
|
||||
if (reqOrResp instanceof Response) {
|
||||
return reqOrResp;
|
||||
}
|
||||
// @ts-expect-error: resolved by wrangler build
|
||||
const { handler } = await import("./server-functions/default/handler.mjs");
|
||||
return handler(reqOrResp, env, ctx, request.signal);
|
||||
});
|
||||
},
|
||||
};
|
||||
50
.open-next 2/worker 13.js
Normal file
50
.open-next 2/worker 13.js
Normal file
@ -0,0 +1,50 @@
|
||||
//@ts-expect-error: Will be resolved by wrangler build
|
||||
import { handleImageRequest } from "./cloudflare/images.js";
|
||||
//@ts-expect-error: Will be resolved by wrangler build
|
||||
import { runWithCloudflareRequestContext } from "./cloudflare/init.js";
|
||||
//@ts-expect-error: Will be resolved by wrangler build
|
||||
import { maybeGetSkewProtectionResponse } from "./cloudflare/skew-protection.js";
|
||||
// @ts-expect-error: Will be resolved by wrangler build
|
||||
import { handler as middlewareHandler } from "./middleware/handler.mjs";
|
||||
//@ts-expect-error: Will be resolved by wrangler build
|
||||
export { DOQueueHandler } from "./.build/durable-objects/queue.js";
|
||||
//@ts-expect-error: Will be resolved by wrangler build
|
||||
export { DOShardedTagCache } from "./.build/durable-objects/sharded-tag-cache.js";
|
||||
//@ts-expect-error: Will be resolved by wrangler build
|
||||
export { BucketCachePurge } from "./.build/durable-objects/bucket-cache-purge.js";
|
||||
export default {
|
||||
async fetch(request, env, ctx) {
|
||||
return runWithCloudflareRequestContext(request, env, ctx, async () => {
|
||||
const response = maybeGetSkewProtectionResponse(request);
|
||||
if (response) {
|
||||
return response;
|
||||
}
|
||||
const url = new URL(request.url);
|
||||
// Serve images in development.
|
||||
// Note: "/cdn-cgi/image/..." requests do not reach production workers.
|
||||
if (url.pathname.startsWith("/cdn-cgi/image/")) {
|
||||
const m = url.pathname.match(/\/cdn-cgi\/image\/.+?\/(?<url>.+)$/);
|
||||
if (m === null) {
|
||||
return new Response("Not Found!", { status: 404 });
|
||||
}
|
||||
const imageUrl = m.groups.url;
|
||||
return imageUrl.match(/^https?:\/\//)
|
||||
? fetch(imageUrl, { cf: { cacheEverything: true } })
|
||||
: env.ASSETS?.fetch(new URL(`/${imageUrl}`, url));
|
||||
}
|
||||
// Fallback for the Next default image loader.
|
||||
if (url.pathname ===
|
||||
`${globalThis.__NEXT_BASE_PATH__}/_next/image${globalThis.__TRAILING_SLASH__ ? "/" : ""}`) {
|
||||
return await handleImageRequest(url, request.headers, env);
|
||||
}
|
||||
// - `Request`s are handled by the Next server
|
||||
const reqOrResp = await middlewareHandler(request, env, ctx);
|
||||
if (reqOrResp instanceof Response) {
|
||||
return reqOrResp;
|
||||
}
|
||||
// @ts-expect-error: resolved by wrangler build
|
||||
const { handler } = await import("./server-functions/default/handler.mjs");
|
||||
return handler(reqOrResp, env, ctx, request.signal);
|
||||
});
|
||||
},
|
||||
};
|
||||
50
.open-next 2/worker 14.js
Normal file
50
.open-next 2/worker 14.js
Normal file
@ -0,0 +1,50 @@
|
||||
//@ts-expect-error: Will be resolved by wrangler build
|
||||
import { handleImageRequest } from "./cloudflare/images.js";
|
||||
//@ts-expect-error: Will be resolved by wrangler build
|
||||
import { runWithCloudflareRequestContext } from "./cloudflare/init.js";
|
||||
//@ts-expect-error: Will be resolved by wrangler build
|
||||
import { maybeGetSkewProtectionResponse } from "./cloudflare/skew-protection.js";
|
||||
// @ts-expect-error: Will be resolved by wrangler build
|
||||
import { handler as middlewareHandler } from "./middleware/handler.mjs";
|
||||
//@ts-expect-error: Will be resolved by wrangler build
|
||||
export { DOQueueHandler } from "./.build/durable-objects/queue.js";
|
||||
//@ts-expect-error: Will be resolved by wrangler build
|
||||
export { DOShardedTagCache } from "./.build/durable-objects/sharded-tag-cache.js";
|
||||
//@ts-expect-error: Will be resolved by wrangler build
|
||||
export { BucketCachePurge } from "./.build/durable-objects/bucket-cache-purge.js";
|
||||
export default {
|
||||
async fetch(request, env, ctx) {
|
||||
return runWithCloudflareRequestContext(request, env, ctx, async () => {
|
||||
const response = maybeGetSkewProtectionResponse(request);
|
||||
if (response) {
|
||||
return response;
|
||||
}
|
||||
const url = new URL(request.url);
|
||||
// Serve images in development.
|
||||
// Note: "/cdn-cgi/image/..." requests do not reach production workers.
|
||||
if (url.pathname.startsWith("/cdn-cgi/image/")) {
|
||||
const m = url.pathname.match(/\/cdn-cgi\/image\/.+?\/(?<url>.+)$/);
|
||||
if (m === null) {
|
||||
return new Response("Not Found!", { status: 404 });
|
||||
}
|
||||
const imageUrl = m.groups.url;
|
||||
return imageUrl.match(/^https?:\/\//)
|
||||
? fetch(imageUrl, { cf: { cacheEverything: true } })
|
||||
: env.ASSETS?.fetch(new URL(`/${imageUrl}`, url));
|
||||
}
|
||||
// Fallback for the Next default image loader.
|
||||
if (url.pathname ===
|
||||
`${globalThis.__NEXT_BASE_PATH__}/_next/image${globalThis.__TRAILING_SLASH__ ? "/" : ""}`) {
|
||||
return await handleImageRequest(url, request.headers, env);
|
||||
}
|
||||
// - `Request`s are handled by the Next server
|
||||
const reqOrResp = await middlewareHandler(request, env, ctx);
|
||||
if (reqOrResp instanceof Response) {
|
||||
return reqOrResp;
|
||||
}
|
||||
// @ts-expect-error: resolved by wrangler build
|
||||
const { handler } = await import("./server-functions/default/handler.mjs");
|
||||
return handler(reqOrResp, env, ctx, request.signal);
|
||||
});
|
||||
},
|
||||
};
|
||||
50
.open-next 2/worker 15.js
Normal file
50
.open-next 2/worker 15.js
Normal file
@ -0,0 +1,50 @@
|
||||
//@ts-expect-error: Will be resolved by wrangler build
|
||||
import { handleImageRequest } from "./cloudflare/images.js";
|
||||
//@ts-expect-error: Will be resolved by wrangler build
|
||||
import { runWithCloudflareRequestContext } from "./cloudflare/init.js";
|
||||
//@ts-expect-error: Will be resolved by wrangler build
|
||||
import { maybeGetSkewProtectionResponse } from "./cloudflare/skew-protection.js";
|
||||
// @ts-expect-error: Will be resolved by wrangler build
|
||||
import { handler as middlewareHandler } from "./middleware/handler.mjs";
|
||||
//@ts-expect-error: Will be resolved by wrangler build
|
||||
export { DOQueueHandler } from "./.build/durable-objects/queue.js";
|
||||
//@ts-expect-error: Will be resolved by wrangler build
|
||||
export { DOShardedTagCache } from "./.build/durable-objects/sharded-tag-cache.js";
|
||||
//@ts-expect-error: Will be resolved by wrangler build
|
||||
export { BucketCachePurge } from "./.build/durable-objects/bucket-cache-purge.js";
|
||||
export default {
|
||||
async fetch(request, env, ctx) {
|
||||
return runWithCloudflareRequestContext(request, env, ctx, async () => {
|
||||
const response = maybeGetSkewProtectionResponse(request);
|
||||
if (response) {
|
||||
return response;
|
||||
}
|
||||
const url = new URL(request.url);
|
||||
// Serve images in development.
|
||||
// Note: "/cdn-cgi/image/..." requests do not reach production workers.
|
||||
if (url.pathname.startsWith("/cdn-cgi/image/")) {
|
||||
const m = url.pathname.match(/\/cdn-cgi\/image\/.+?\/(?<url>.+)$/);
|
||||
if (m === null) {
|
||||
return new Response("Not Found!", { status: 404 });
|
||||
}
|
||||
const imageUrl = m.groups.url;
|
||||
return imageUrl.match(/^https?:\/\//)
|
||||
? fetch(imageUrl, { cf: { cacheEverything: true } })
|
||||
: env.ASSETS?.fetch(new URL(`/${imageUrl}`, url));
|
||||
}
|
||||
// Fallback for the Next default image loader.
|
||||
if (url.pathname ===
|
||||
`${globalThis.__NEXT_BASE_PATH__}/_next/image${globalThis.__TRAILING_SLASH__ ? "/" : ""}`) {
|
||||
return await handleImageRequest(url, request.headers, env);
|
||||
}
|
||||
// - `Request`s are handled by the Next server
|
||||
const reqOrResp = await middlewareHandler(request, env, ctx);
|
||||
if (reqOrResp instanceof Response) {
|
||||
return reqOrResp;
|
||||
}
|
||||
// @ts-expect-error: resolved by wrangler build
|
||||
const { handler } = await import("./server-functions/default/handler.mjs");
|
||||
return handler(reqOrResp, env, ctx, request.signal);
|
||||
});
|
||||
},
|
||||
};
|
||||
50
.open-next 2/worker 4.js
Normal file
50
.open-next 2/worker 4.js
Normal file
@ -0,0 +1,50 @@
|
||||
//@ts-expect-error: Will be resolved by wrangler build
|
||||
import { handleImageRequest } from "./cloudflare/images.js";
|
||||
//@ts-expect-error: Will be resolved by wrangler build
|
||||
import { runWithCloudflareRequestContext } from "./cloudflare/init.js";
|
||||
//@ts-expect-error: Will be resolved by wrangler build
|
||||
import { maybeGetSkewProtectionResponse } from "./cloudflare/skew-protection.js";
|
||||
// @ts-expect-error: Will be resolved by wrangler build
|
||||
import { handler as middlewareHandler } from "./middleware/handler.mjs";
|
||||
//@ts-expect-error: Will be resolved by wrangler build
|
||||
export { DOQueueHandler } from "./.build/durable-objects/queue.js";
|
||||
//@ts-expect-error: Will be resolved by wrangler build
|
||||
export { DOShardedTagCache } from "./.build/durable-objects/sharded-tag-cache.js";
|
||||
//@ts-expect-error: Will be resolved by wrangler build
|
||||
export { BucketCachePurge } from "./.build/durable-objects/bucket-cache-purge.js";
|
||||
export default {
|
||||
async fetch(request, env, ctx) {
|
||||
return runWithCloudflareRequestContext(request, env, ctx, async () => {
|
||||
const response = maybeGetSkewProtectionResponse(request);
|
||||
if (response) {
|
||||
return response;
|
||||
}
|
||||
const url = new URL(request.url);
|
||||
// Serve images in development.
|
||||
// Note: "/cdn-cgi/image/..." requests do not reach production workers.
|
||||
if (url.pathname.startsWith("/cdn-cgi/image/")) {
|
||||
const m = url.pathname.match(/\/cdn-cgi\/image\/.+?\/(?<url>.+)$/);
|
||||
if (m === null) {
|
||||
return new Response("Not Found!", { status: 404 });
|
||||
}
|
||||
const imageUrl = m.groups.url;
|
||||
return imageUrl.match(/^https?:\/\//)
|
||||
? fetch(imageUrl, { cf: { cacheEverything: true } })
|
||||
: env.ASSETS?.fetch(new URL(`/${imageUrl}`, url));
|
||||
}
|
||||
// Fallback for the Next default image loader.
|
||||
if (url.pathname ===
|
||||
`${globalThis.__NEXT_BASE_PATH__}/_next/image${globalThis.__TRAILING_SLASH__ ? "/" : ""}`) {
|
||||
return await handleImageRequest(url, request.headers, env);
|
||||
}
|
||||
// - `Request`s are handled by the Next server
|
||||
const reqOrResp = await middlewareHandler(request, env, ctx);
|
||||
if (reqOrResp instanceof Response) {
|
||||
return reqOrResp;
|
||||
}
|
||||
// @ts-expect-error: resolved by wrangler build
|
||||
const { handler } = await import("./server-functions/default/handler.mjs");
|
||||
return handler(reqOrResp, env, ctx, request.signal);
|
||||
});
|
||||
},
|
||||
};
|
||||
50
.open-next 2/worker 5.js
Normal file
50
.open-next 2/worker 5.js
Normal file
@ -0,0 +1,50 @@
|
||||
//@ts-expect-error: Will be resolved by wrangler build
|
||||
import { handleImageRequest } from "./cloudflare/images.js";
|
||||
//@ts-expect-error: Will be resolved by wrangler build
|
||||
import { runWithCloudflareRequestContext } from "./cloudflare/init.js";
|
||||
//@ts-expect-error: Will be resolved by wrangler build
|
||||
import { maybeGetSkewProtectionResponse } from "./cloudflare/skew-protection.js";
|
||||
// @ts-expect-error: Will be resolved by wrangler build
|
||||
import { handler as middlewareHandler } from "./middleware/handler.mjs";
|
||||
//@ts-expect-error: Will be resolved by wrangler build
|
||||
export { DOQueueHandler } from "./.build/durable-objects/queue.js";
|
||||
//@ts-expect-error: Will be resolved by wrangler build
|
||||
export { DOShardedTagCache } from "./.build/durable-objects/sharded-tag-cache.js";
|
||||
//@ts-expect-error: Will be resolved by wrangler build
|
||||
export { BucketCachePurge } from "./.build/durable-objects/bucket-cache-purge.js";
|
||||
export default {
|
||||
async fetch(request, env, ctx) {
|
||||
return runWithCloudflareRequestContext(request, env, ctx, async () => {
|
||||
const response = maybeGetSkewProtectionResponse(request);
|
||||
if (response) {
|
||||
return response;
|
||||
}
|
||||
const url = new URL(request.url);
|
||||
// Serve images in development.
|
||||
// Note: "/cdn-cgi/image/..." requests do not reach production workers.
|
||||
if (url.pathname.startsWith("/cdn-cgi/image/")) {
|
||||
const m = url.pathname.match(/\/cdn-cgi\/image\/.+?\/(?<url>.+)$/);
|
||||
if (m === null) {
|
||||
return new Response("Not Found!", { status: 404 });
|
||||
}
|
||||
const imageUrl = m.groups.url;
|
||||
return imageUrl.match(/^https?:\/\//)
|
||||
? fetch(imageUrl, { cf: { cacheEverything: true } })
|
||||
: env.ASSETS?.fetch(new URL(`/${imageUrl}`, url));
|
||||
}
|
||||
// Fallback for the Next default image loader.
|
||||
if (url.pathname ===
|
||||
`${globalThis.__NEXT_BASE_PATH__}/_next/image${globalThis.__TRAILING_SLASH__ ? "/" : ""}`) {
|
||||
return await handleImageRequest(url, request.headers, env);
|
||||
}
|
||||
// - `Request`s are handled by the Next server
|
||||
const reqOrResp = await middlewareHandler(request, env, ctx);
|
||||
if (reqOrResp instanceof Response) {
|
||||
return reqOrResp;
|
||||
}
|
||||
// @ts-expect-error: resolved by wrangler build
|
||||
const { handler } = await import("./server-functions/default/handler.mjs");
|
||||
return handler(reqOrResp, env, ctx, request.signal);
|
||||
});
|
||||
},
|
||||
};
|
||||
@ -629,6 +629,7 @@
|
||||
opacity: 0.7;
|
||||
filter: blur(5px);
|
||||
}
|
||||
|
||||
/* Swipe ecosystem for mobile placards */
|
||||
@media (max-width: 640px) {
|
||||
.swipe-container {
|
||||
@ -651,7 +652,7 @@
|
||||
}
|
||||
|
||||
.swipe-item {
|
||||
flex: 0 0 calc(100vw - 3rem);
|
||||
flex: 0 0 88vw;
|
||||
scroll-snap-align: center;
|
||||
}
|
||||
}
|
||||
@ -237,54 +237,51 @@ export function Dashboard({ user }: DashboardProps) {
|
||||
{/* Dashboard Sections */}
|
||||
<div className="space-y-10 sm:space-y-12">
|
||||
|
||||
{/* SECTION: Daily Snapshot (Horizontal Swipe on Mobile) */}
|
||||
<section>
|
||||
<div className="flex items-center justify-between mb-4 px-1">
|
||||
<h2 className="text-xs font-bold uppercase tracking-[0.2em] opacity-50">Daily Snapshot</h2>
|
||||
<div className="sm:hidden flex items-center gap-1.5 opacity-30">
|
||||
<div className="w-1 h-1 rounded-full bg-primary" />
|
||||
<div className="w-1 h-1 rounded-full bg-primary/50" />
|
||||
<div className="w-1 h-1 rounded-full bg-primary/50" />
|
||||
{/* SECTION: Mobile Swipe Ecosystem */}
|
||||
<div className="swipe-container sm:space-y-12 sm:block">
|
||||
|
||||
{/* SLIDE 1: Daily Stats (Nicotine & Weed) */}
|
||||
<div className="swipe-item sm:opacity-100 sm:animate-none">
|
||||
<div className="sm:hidden flex items-center justify-between mb-2 px-1">
|
||||
<h2 className="text-[10px] font-bold uppercase tracking-[0.2em] opacity-50">Daily Stats</h2>
|
||||
</div>
|
||||
<div className="space-y-4 sm:grid sm:grid-cols-2 sm:gap-6 sm:space-y-0">
|
||||
<StatsCard key={`stats-nicotine-${refreshKey}`} usageData={usageData} substance="nicotine" />
|
||||
<StatsCard key={`stats-weed-${refreshKey}`} usageData={usageData} substance="weed" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="swipe-container sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:gap-6 sm:px-0 sm:margin-0">
|
||||
<div className="swipe-item sm:block opacity-0 animate-fade-in-up">
|
||||
<StatsCard key={`stats-combined-${refreshKey}`} usageData={usageData} substance={preferences.substance} />
|
||||
{/* SLIDE 2: Calendar & Inspiration */}
|
||||
<div id="calendar-section" className="swipe-item sm:opacity-100 sm:animate-none">
|
||||
<div className="sm:hidden flex items-center justify-between mb-2 px-1">
|
||||
<h2 className="text-[10px] font-bold uppercase tracking-[0.2em] opacity-50">Calendar</h2>
|
||||
</div>
|
||||
<div className="swipe-item sm:block opacity-0 animate-fade-in-up delay-75">
|
||||
<UsageCalendar
|
||||
key={refreshKey}
|
||||
usageData={usageData}
|
||||
onDataUpdate={loadData}
|
||||
userId={user.id}
|
||||
religion={preferences.religion}
|
||||
onReligionUpdate={async (religion) => {
|
||||
const updatedPrefs = { ...preferences, religion };
|
||||
setPreferences(updatedPrefs);
|
||||
await savePreferencesAsync(updatedPrefs);
|
||||
}}
|
||||
preferences={preferences}
|
||||
onPreferencesUpdate={async (updatedPrefs) => {
|
||||
await savePreferencesAsync(updatedPrefs);
|
||||
setPreferences(updatedPrefs);
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* SLIDE 3: Mood & Savings */}
|
||||
<div className="swipe-item sm:opacity-100 sm:animate-none space-y-4">
|
||||
<div className="sm:hidden flex items-center justify-between mb-2 px-1">
|
||||
<h2 className="text-[10px] font-bold uppercase tracking-[0.2em] opacity-50">Mood & Savings</h2>
|
||||
</div>
|
||||
<div className="space-y-4 sm:grid sm:grid-cols-2 sm:gap-6 sm:space-y-0">
|
||||
<MoodTracker />
|
||||
</div>
|
||||
<div className="swipe-item sm:block opacity-0 animate-fade-in-up delay-150 sm:col-span-2 lg:col-span-1">
|
||||
<UsageCalendar
|
||||
key={refreshKey}
|
||||
usageData={usageData}
|
||||
onDataUpdate={loadData}
|
||||
userId={user.id}
|
||||
religion={preferences.religion}
|
||||
onReligionUpdate={async (religion) => {
|
||||
const updatedPrefs = { ...preferences, religion };
|
||||
setPreferences(updatedPrefs);
|
||||
await savePreferencesAsync(updatedPrefs);
|
||||
}}
|
||||
preferences={preferences}
|
||||
onPreferencesUpdate={async (updatedPrefs) => {
|
||||
await savePreferencesAsync(updatedPrefs);
|
||||
setPreferences(updatedPrefs);
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* SECTION: Your Journey */}
|
||||
<section>
|
||||
<div className="flex items-center justify-between mb-4 px-1">
|
||||
<h2 className="text-xs font-bold uppercase tracking-[0.2em] opacity-50">Your Journey</h2>
|
||||
</div>
|
||||
|
||||
<div className="swipe-container sm:grid sm:grid-cols-2 lg:grid-cols-4 sm:gap-6 sm:px-0">
|
||||
<div className="swipe-item sm:block opacity-0 animate-fade-in-up delay-200">
|
||||
<SavingsTrackerCard
|
||||
key={`savings-${refreshKey}`}
|
||||
savingsConfig={savingsConfig}
|
||||
@ -293,21 +290,24 @@ export function Dashboard({ user }: DashboardProps) {
|
||||
onSavingsConfigChange={handleSavingsConfigChange}
|
||||
/>
|
||||
</div>
|
||||
<div className="swipe-item sm:block opacity-0 animate-fade-in-up delay-300">
|
||||
</div>
|
||||
|
||||
{/* SLIDE 4: Journey & Plan */}
|
||||
<div id="journey-section" className="swipe-item sm:opacity-100 sm:animate-none">
|
||||
<div className="sm:hidden flex items-center justify-between mb-2 px-1">
|
||||
<h2 className="text-[10px] font-bold uppercase tracking-[0.2em] opacity-50">Your Journey</h2>
|
||||
</div>
|
||||
<div className="grid sm:grid-cols-3 gap-6 space-y-4 sm:space-y-0">
|
||||
<HealthTimelineCard
|
||||
key={`health-${refreshKey}`}
|
||||
usageData={usageData}
|
||||
preferences={preferences}
|
||||
/>
|
||||
</div>
|
||||
<div className="swipe-item sm:block opacity-0 animate-fade-in-up delay-400">
|
||||
<AchievementsCard
|
||||
key={`achievements-${refreshKey}`}
|
||||
achievements={achievements}
|
||||
substance={preferences.substance}
|
||||
/>
|
||||
</div>
|
||||
<div className="swipe-item sm:block opacity-0 animate-fade-in-up delay-500">
|
||||
<QuitPlanCard
|
||||
key={`quit-plan-${refreshKey}`}
|
||||
plan={preferences.quitPlan}
|
||||
@ -316,29 +316,34 @@ export function Dashboard({ user }: DashboardProps) {
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</main>
|
||||
</main >
|
||||
|
||||
<SetupWizard open={showSetup} onComplete={handleSetupComplete} />
|
||||
|
||||
{preferences && (
|
||||
<UsagePromptDialog
|
||||
open={showUsagePrompt}
|
||||
onClose={() => setShowUsagePrompt(false)}
|
||||
onSubmit={handleUsageSubmit}
|
||||
userId={user.id}
|
||||
/>
|
||||
)}
|
||||
{
|
||||
preferences && (
|
||||
<UsagePromptDialog
|
||||
open={showUsagePrompt}
|
||||
onClose={() => setShowUsagePrompt(false)}
|
||||
onSubmit={handleUsageSubmit}
|
||||
userId={user.id}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
{showCelebration && newBadge && (
|
||||
<CelebrationAnimation
|
||||
badge={newBadge}
|
||||
onComplete={handleCelebrationComplete}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
{
|
||||
showCelebration && newBadge && (
|
||||
<CelebrationAnimation
|
||||
badge={newBadge}
|
||||
onComplete={handleCelebrationComplete}
|
||||
/>
|
||||
)
|
||||
}
|
||||
</div >
|
||||
);
|
||||
}
|
||||
|
||||
@ -12,10 +12,12 @@ import {
|
||||
Heart,
|
||||
Calendar
|
||||
} from 'lucide-react';
|
||||
import React from 'react';
|
||||
import { useRouter } from 'next/navigation';
|
||||
import { cn } from '@/lib/utils';
|
||||
import { useTheme } from '@/lib/theme-context';
|
||||
import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
|
||||
import { createPortal } from 'react-dom';
|
||||
|
||||
interface SideMenuProps {
|
||||
isOpen: boolean;
|
||||
@ -50,18 +52,27 @@ export function SideMenu({ isOpen, onClose, user, userName }: SideMenuProps) {
|
||||
.join('')
|
||||
.toUpperCase() || user.email[0].toUpperCase();
|
||||
|
||||
return (
|
||||
// Use Portal to render outside of header stacking context
|
||||
const [mounted, setMounted] = React.useState(false);
|
||||
|
||||
React.useEffect(() => {
|
||||
setMounted(true);
|
||||
}, []);
|
||||
|
||||
if (!mounted) return null;
|
||||
|
||||
return createPortal(
|
||||
<div className="fixed inset-0 z-[100] flex">
|
||||
{/* Backdrop */}
|
||||
<div
|
||||
className="absolute inset-0 bg-black/40 backdrop-blur-sm transition-none"
|
||||
className="absolute inset-0 bg-black/40 backdrop-blur-sm transition-all animate-in fade-in duration-300"
|
||||
onClick={onClose}
|
||||
/>
|
||||
|
||||
{/* Menu Content */}
|
||||
<div
|
||||
className={cn(
|
||||
"relative w-72 h-full flex flex-col shadow-2xl transition-none",
|
||||
"relative w-72 h-full flex flex-col shadow-2xl transition-all animate-in slide-in-from-left duration-300",
|
||||
theme === 'light'
|
||||
? "bg-white text-slate-900"
|
||||
: "bg-slate-900 text-white border-r border-white/5"
|
||||
@ -125,13 +136,25 @@ export function SideMenu({ isOpen, onClose, user, userName }: SideMenuProps) {
|
||||
<MenuLink
|
||||
icon={Heart}
|
||||
label="Health Status"
|
||||
onClick={onClose}
|
||||
onClick={() => {
|
||||
// Link to Dashboard Health Section
|
||||
onClose();
|
||||
const el = document.getElementById('journey-section');
|
||||
if (el) el.scrollIntoView({ behavior: 'smooth', block: 'start' });
|
||||
else alert("View your Health Status on the Dashboard Journey section!");
|
||||
}}
|
||||
color="blue"
|
||||
/>
|
||||
<MenuLink
|
||||
icon={Calendar}
|
||||
label="History"
|
||||
onClick={onClose}
|
||||
onClick={() => {
|
||||
onClose();
|
||||
// Link to Calendar section
|
||||
const el = document.getElementById('calendar-section');
|
||||
if (el) el.scrollIntoView({ behavior: 'smooth', block: 'start' });
|
||||
else alert("View your History on the Dashboard Calendar!");
|
||||
}}
|
||||
color="amber"
|
||||
/>
|
||||
</div>
|
||||
@ -144,7 +167,10 @@ export function SideMenu({ isOpen, onClose, user, userName }: SideMenuProps) {
|
||||
<MenuLink
|
||||
icon={Settings}
|
||||
label="Settings"
|
||||
onClick={onClose}
|
||||
onClick={() => {
|
||||
onClose();
|
||||
alert("Please use the Notification Bell in the header for settings.");
|
||||
}}
|
||||
/>
|
||||
<button
|
||||
onClick={handleLogout}
|
||||
@ -155,7 +181,8 @@ export function SideMenu({ isOpen, onClose, user, userName }: SideMenuProps) {
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>,
|
||||
document.body
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
@ -33,6 +33,7 @@ import { Cigarette, Leaf, LogOut, Home, ChevronDown, Sun, Moon, Bell, BellOff, B
|
||||
import { useTheme } from '@/lib/theme-context';
|
||||
import { InstallAppButton } from './InstallAppButton';
|
||||
import { cn } from '@/lib/utils';
|
||||
import { SideMenu } from './SideMenu';
|
||||
|
||||
interface UserHeaderProps {
|
||||
user: User;
|
||||
@ -121,8 +122,6 @@ function HourlyTimePicker({ value, onChange }: HourlyTimePickerProps) {
|
||||
);
|
||||
}
|
||||
|
||||
import { SideMenu } from './SideMenu';
|
||||
|
||||
export function UserHeader({ user, preferences }: UserHeaderProps) {
|
||||
const [userName, setUserName] = useState<string | null>(null);
|
||||
const [reminderSettings, setReminderSettings] = useState<ReminderSettings>({ enabled: false, reminderTime: '09:00', frequency: 'daily' });
|
||||
@ -220,10 +219,10 @@ export function UserHeader({ user, preferences }: UserHeaderProps) {
|
||||
backdropFilter: 'blur(12px)',
|
||||
borderBottom: theme === 'light' ? '1px solid rgba(0,0,0,0.05)' : '1px solid rgba(255,255,255,0.05)'
|
||||
}}>
|
||||
{/* Cloudy/Foggy effect overlay */}
|
||||
<div className="absolute inset-0 pointer-events-none select-none overflow-hidden">
|
||||
<div className="absolute inset-0 fog-layer-1 opacity-20" />
|
||||
<div className="absolute inset-0 fog-layer-2 opacity-15" />
|
||||
{/* Cloudy/Foggy effect overlay - removed mix-blend-overlay for visibility */}
|
||||
<div className="absolute inset-0 pointer-events-none select-none overflow-hidden invert dark:invert-0 transition-all duration-300">
|
||||
<div className="absolute inset-0 fog-layer-1 opacity-40 dark:opacity-30" />
|
||||
<div className="absolute inset-0 fog-layer-2 opacity-30 dark:opacity-20" />
|
||||
</div>
|
||||
|
||||
<div className="container mx-auto px-4 h-16 sm:h-20 flex items-center justify-between relative z-50">
|
||||
@ -231,15 +230,19 @@ export function UserHeader({ user, preferences }: UserHeaderProps) {
|
||||
<div className="flex-1 flex justify-start">
|
||||
<button
|
||||
onClick={() => setIsSideMenuOpen(true)}
|
||||
className="group relative flex items-center gap-2 p-1 rounded-full transition-all hover:bg-black/5 dark:hover:bg-white/5 active:scale-95"
|
||||
className="group relative flex items-center gap-2 p-1.5 pr-3 rounded-full transition-all hover:bg-black/5 dark:hover:bg-white/5 active:scale-95 border border-transparent hover:border-primary/10"
|
||||
>
|
||||
<Avatar className="h-9 w-9 sm:h-10 sm:w-10 ring-2 ring-primary/20 transition-all group-hover:ring-primary/40">
|
||||
<AvatarImage src={user.profilePictureUrl ?? undefined} alt={userName || 'User'} />
|
||||
<AvatarFallback className="bg-primary/20 text-primary text-xs font-bold">{initials}</AvatarFallback>
|
||||
</Avatar>
|
||||
<div className="hidden lg:block text-left mr-2">
|
||||
<div className="text-[10px] font-bold uppercase tracking-widest opacity-40 leading-none mb-1">Menu</div>
|
||||
<div className="h-0.5 w-4 bg-primary/40 rounded-full" />
|
||||
<div className="relative">
|
||||
<Avatar className="h-9 w-9 sm:h-10 sm:w-10 ring-2 ring-primary/20 transition-all group-hover:ring-primary/50 shadow-sm">
|
||||
<AvatarImage src={user.profilePictureUrl ?? undefined} alt={userName || 'User'} />
|
||||
<AvatarFallback className="bg-gradient-to-br from-indigo-500 to-purple-500 text-white font-bold">{initials}</AvatarFallback>
|
||||
</Avatar>
|
||||
<div className="absolute -bottom-1 -right-1 bg-white dark:bg-slate-900 rounded-full p-0.5 shadow-sm border border-border">
|
||||
<Menu className="h-3 w-3 text-primary" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="hidden sm:block text-left">
|
||||
<div className="text-[10px] font-bold uppercase tracking-widest opacity-50 leading-none">Menu</div>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user