更新

Author: murisans

js/app.js

@@ -14,6 +14,7 @@ const DevPanel = ({ onToggle }) => {
 const App = () => {
   const [currentPage, setCurrentPage] = useState('home');
   const [isDark, setIsDark] = useState(false);
+  const [openContent, setOpenContent] = useState(null);
 
   useEffect(() => {
     const savedTheme = localStorage.getItem('theme');
@@ -39,6 +40,15 @@ const App = () => {
 
   const handleNavigate = (page) => {
     setCurrentPage(page);
+    setOpenContent(null);
+    window.location.hash = page;
+    window.scrollTo({ top: 0, behavior: 'smooth' });
+  };
+
+  const handleOpenContent = (type, slug) => {
+    const page = type === 'article' ? 'articles' : 'works';
+    setCurrentPage(page);
+    setOpenContent({ type, slug });
     window.location.hash = page;
     window.scrollTo({ top: 0, behavior: 'smooth' });
   };
@@ -57,13 +67,13 @@ const App = () => {
   const renderPage = () => {
     switch (currentPage) {
       case 'works':
-        return <WorksPage />;
+        return <WorksPage openContent={openContent} />;
       case 'articles':
-        return <ArticlesPage />;
+        return <ArticlesPage openContent={openContent} />;
       case 'about':
         return <AboutPage />;
       default:
-        return <HomePage onNavigate={handleNavigate} />;
+        return <HomePage onNavigate={handleNavigate} onOpenContent={handleOpenContent} />;
     }
   };
 

js/pages/ArticlesPage.js

@@ -1,4 +1,4 @@
-const ArticlesPage = () => {
+const ArticlesPage = ({ openContent }) => {
   const [articles, setArticles] = useState([]);
   const [selectedArticle, setSelectedArticle] = useState(null);
   const [loading, setLoading] = useState(true);
@@ -18,6 +18,15 @@ const ArticlesPage = () => {
     }
   }, [selectedArticle]);
 
+  useEffect(() => {
+    if (openContent && openContent.type === 'article' && articles.length > 0) {
+      const article = articles.find(a => a.slug === openContent.slug);
+      if (article) {
+        setSelectedArticle(article);
+      }
+    }
+  }, [openContent, articles]);
+
   useEffect(() => {
     const urlParams = new URLSearchParams(window.location.search);
     const openParam = urlParams.get('open');

js/pages/HomePage.js

@@ -1,4 +1,4 @@
-const HomePage = ({ onNavigate }) => {
+const HomePage = ({ onNavigate, onOpenContent }) => {
   const [articles, setArticles] = useState([]);
   const [works, setWorks] = useState([]);
   const [loading, setLoading] = useState(true);
@@ -42,10 +42,11 @@ const HomePage = ({ onNavigate }) => {
             <div className="card-grid">
               {articles.map((article) => (
                 <Card key={article.id} tag={article.tag} title={article.title} description={article.description} meta={article.date} onClick={() => {
-                  const url = new URL(window.location.href);
-                  url.searchParams.set('open', `article:${article.slug}`);
-                  url.hash = '#articles';
-                  window.location.href = url.toString();
+                  if (onOpenContent) {
+                    onOpenContent('article', article.slug);
+                  } else {
+                    onNavigate('articles');
+                  }
                 }} />
               ))}
             </div>
@@ -65,10 +66,11 @@ const HomePage = ({ onNavigate }) => {
             <div className="card-grid">
               {works.map((work, index) => (
                 <Card key={work.id} title={work.title} description={work.description} tag={work.techStack[0]} onClick={() => {
-                  const url = new URL(window.location.href);
-                  url.searchParams.set('open', `work:${work.slug}`);
-                  url.hash = '#works';
-                  window.location.href = url.toString();
+                  if (onOpenContent) {
+                    onOpenContent('work', work.slug);
+                  } else {
+                    onNavigate('works');
+                  }
                 }} />
               ))}
             </div>

js/pages/WorksPage.js

@@ -1,4 +1,4 @@
-const WorksPage = () => {
+const WorksPage = ({ openContent }) => {
   const [works, setWorks] = useState([]);
   const [selectedWork, setSelectedWork] = useState(null);
   const [loading, setLoading] = useState(true);
@@ -31,6 +31,15 @@ const WorksPage = () => {
     }
   }, [selectedWork]);
 
+  useEffect(() => {
+    if (!loading && openContent && openContent.type === 'work') {
+      const work = works.find(w => w.slug === openContent.slug);
+      if (work) {
+        setSelectedWork(work);
+      }
+    }
+  }, [loading, openContent, works]);
+
   useEffect(() => {
     const urlParams = new URLSearchParams(window.location.search);
     const openParam = urlParams.get('open');