fix: subdomain-aware routing for zine pages
On zine.mycofi.earth, URLs should be /create not /zine/create. Added useZinePath hook to adjust paths based on hostname. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
parent
3309f7e5de
commit
19764d7df4
|
|
@ -16,6 +16,22 @@ import {
|
|||
CheckCircle,
|
||||
} from "lucide-react";
|
||||
|
||||
// Helper to get correct path based on subdomain
|
||||
function useZinePath() {
|
||||
const [isSubdomain, setIsSubdomain] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
setIsSubdomain(window.location.hostname.startsWith("zine."));
|
||||
}, []);
|
||||
|
||||
return (path: string) => {
|
||||
if (isSubdomain) {
|
||||
return path.replace(/^\/zine/, "") || "/";
|
||||
}
|
||||
return path;
|
||||
};
|
||||
}
|
||||
|
||||
interface PageOutline {
|
||||
pageNumber: number;
|
||||
type: string;
|
||||
|
|
@ -46,6 +62,7 @@ const STEP_LABELS = {
|
|||
|
||||
export default function CreatePage() {
|
||||
const router = useRouter();
|
||||
const getPath = useZinePath();
|
||||
const [state, setState] = useState<ZineState | null>(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
|
@ -58,7 +75,7 @@ export default function CreatePage() {
|
|||
useEffect(() => {
|
||||
const input = sessionStorage.getItem("zineInput");
|
||||
if (!input) {
|
||||
router.push("/zine");
|
||||
router.push(getPath("/zine"));
|
||||
return;
|
||||
}
|
||||
|
||||
|
|
@ -255,7 +272,7 @@ export default function CreatePage() {
|
|||
|
||||
const copyShareLink = async () => {
|
||||
if (!state) return;
|
||||
const shareUrl = `${window.location.origin}/zine/z/${state.id}`;
|
||||
const shareUrl = `${window.location.origin}${getPath(`/zine/z/${state.id}`)}`;
|
||||
await navigator.clipboard.writeText(shareUrl);
|
||||
setCopied(true);
|
||||
setTimeout(() => setCopied(false), 2000);
|
||||
|
|
@ -279,7 +296,7 @@ export default function CreatePage() {
|
|||
<h2 className="text-2xl font-bold punk-text mb-4">Error</h2>
|
||||
<p className="text-red-600 mb-4">{error}</p>
|
||||
<button
|
||||
onClick={() => router.push("/zine")}
|
||||
onClick={() => router.push(getPath("/zine"))}
|
||||
className="px-6 py-2 bg-black text-white punk-text hover:bg-green-600"
|
||||
>
|
||||
Try Again
|
||||
|
|
@ -297,7 +314,7 @@ export default function CreatePage() {
|
|||
<div className="max-w-4xl mx-auto mb-8">
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<button
|
||||
onClick={() => router.push("/zine")}
|
||||
onClick={() => router.push(getPath("/zine"))}
|
||||
className="flex items-center gap-2 text-gray-600 hover:text-black"
|
||||
>
|
||||
<ArrowLeft className="w-4 h-4" />
|
||||
|
|
@ -666,7 +683,7 @@ export default function CreatePage() {
|
|||
<button
|
||||
onClick={() => {
|
||||
sessionStorage.removeItem("zineInput");
|
||||
router.push("/zine");
|
||||
router.push(getPath("/zine"));
|
||||
}}
|
||||
className="text-gray-600 hover:text-black punk-text underline"
|
||||
>
|
||||
|
|
|
|||
|
|
@ -1,10 +1,27 @@
|
|||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import { useState, useEffect } from "react";
|
||||
import { useRouter } from "next/navigation";
|
||||
import Link from "next/link";
|
||||
import { Mic, MicOff, Sparkles, BookOpen, Printer, ArrowLeft } from "lucide-react";
|
||||
|
||||
// Helper to get correct path based on subdomain
|
||||
function useZinePath() {
|
||||
const [isSubdomain, setIsSubdomain] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
setIsSubdomain(window.location.hostname.startsWith("zine."));
|
||||
}, []);
|
||||
|
||||
return (path: string) => {
|
||||
if (isSubdomain) {
|
||||
// On subdomain, /zine/create becomes /create
|
||||
return path.replace(/^\/zine/, "") || "/";
|
||||
}
|
||||
return path;
|
||||
};
|
||||
}
|
||||
|
||||
const STYLES = [
|
||||
{ value: "punk-zine", label: "Punk Zine", description: "Xerox texture, high contrast, DIY collage" },
|
||||
{ value: "mycelial", label: "Mycelial", description: "Organic networks, spore patterns, earth tones" },
|
||||
|
|
@ -23,6 +40,7 @@ const TONES = [
|
|||
|
||||
export default function ZinePage() {
|
||||
const router = useRouter();
|
||||
const getPath = useZinePath();
|
||||
const [topic, setTopic] = useState("");
|
||||
const [style, setStyle] = useState("mycelial");
|
||||
const [tone, setTone] = useState("regenerative");
|
||||
|
|
@ -65,7 +83,7 @@ export default function ZinePage() {
|
|||
|
||||
// Store the input in sessionStorage and navigate to create page
|
||||
sessionStorage.setItem("zineInput", JSON.stringify({ topic, style, tone }));
|
||||
router.push("/zine/create");
|
||||
router.push(getPath("/zine/create"));
|
||||
};
|
||||
|
||||
return (
|
||||
|
|
|
|||
Loading…
Reference in New Issue