Merge pull request #62 from ss1119/feature/issue-61

活動内容のページを修正

Author: ss1119

public/header/ja/activities.png

@@ -69,9 +69,9 @@ export default function Header() {
               <Image src={t.headerMenu.issues} alt="issues" width={110} height={52} />
             </a>
           </Link>
-          <Link href="/topics">
+          <Link href="/activities">
             <a className="hover:opacity-50">
-              <Image src={t.headerMenu.activities} alt="topics" width={110} height={52} />
+              <Image src={t.headerMenu.activities} alt="activities" width={110} height={52} />
             </a>
           </Link>
           <Link href="/publications">

src/components/header.js

@@ -13,7 +13,7 @@ function List({ items }) {
         <div key={item.sys.id} className="grid grid-cols-7 my-4 mx-3 items-center">
           <p className="py-1 mx-1 bg-gray-200 text-center">{item.fields.date}</p>
           <p className="col-span-6 py-1 mx-2">
-            <Link as={`/topics/${item.sys.id}`} href="/topics/[item.sys.id]">
+            <Link as={`/activities/${item.fields.year.toString()}/${item.sys.id}`} href="/activities/[item.fields.year.toString()]/[item.sys.id]">
               <a className="text-blue-600 hover:underline">{item.fields.title}</a>
             </Link>
           </p>

src/components/list.js

@@ -2,15 +2,15 @@ import Link from "next/link";
 
 import markdownStyles from "../styles/markdown-styles.module.css";
 
-export default function Sidebar({ items, title }) {
+export default function Sidebar({ items, title, type }) {
   return (
     <>
       <h2 className="text-lg font-bold m-2 p-2">{title}</h2>
       <div className={markdownStyles["markdown"]}>
         <ul className="px-2">
           {items.map((item) => (
             <li key={item.sys.id}>
-              <Link as={`/publications/${item.fields.year}`} href="/publications/[item.fields.year]">
+              <Link as={`/${type}/${item.fields.year}`} href={`/${type}/[item.fields.year]`}>
                 <a className="text-blue-600 hover:underline">{item.fields.title}</a>
               </Link>
             </li>

src/components/sidebar.js

@@ -6,17 +6,42 @@ const client = createClient({
   accessToken: NEXT_PUBLIC_CF_DELIVERY_ACCESS_TOKEN,
 });
 
-export async function getAllTopics() {
+export async function getAllActivities() {
   const res = await client.getEntries({
-    content_type: "topics",
+    content_type: "activities",
+    order: "-fields.year",
+  });
+  return res.items;
+}
+
+export async function getActivity(year) {
+  const res = await client.getEntries({
+    content_type: "activities",
+    "fields.year": year,
+  });
+  return res.items[0];
+}
+
+export async function getLatestActivity() {
+  const res = await client.getEntries({
+    content_type: "activities",
+    order: "-fields.year",
+  });
+  return res.items[0];
+}
+
+export async function getAllActivitiesOthers(year) {
+  const res = await client.getEntries({
+    content_type: "activitiesOthers",
+    "fields.year": year,
     order: "-fields.date",
   });
   return res.items;
 }
 
-export async function getTopics(id) {
+export async function getActivitiesOthers(id) {
   const res = await client.getEntries({
-    content_type: "topics",
+    content_type: "activitiesOthers",
     "sys.id": id,
   });
   return res.items[0];
@@ -46,14 +71,6 @@ export async function getLatestPublication() {
   return res.items[0];
 }
 
-export async function getLatestPublicationYear() {
-  const res = await client.getEntries({
-    content_type: "publications",
-    order: "-fields.year",
-  });
-  return res.items[0].fields.year;
-}
-
 export async function getEnAllPublications() {
   const res = await client.getEntries({
     content_type: "publicationsEn",

src/lib/api.js

@@ -1,14 +1,14 @@
 import Head from "next/head";
 import { useRouter } from "next/dist/client/router";
 
-import { getTopics, getAllTopics } from "../../lib/api";
-import { J_SITE_TITLE, E_SITE_TITLE } from "../../lib/constants";
-import markdownToHtml from "../../lib/markdownToHtml";
-import Layout from "../../components/layout";
-import Content from "../../components/content";
-import PageTitle from "../../components/pageTitle";
+import { getAllActivitiesOthers, getActivitiesOthers } from "../../../lib/api";
+import { J_SITE_TITLE, E_SITE_TITLE } from "../../../lib/constants";
+import markdownToHtml from "../../../lib/markdownToHtml";
+import Layout from "../../../components/layout";
+import Content from "../../../components/content";
+import PageTitle from "../../../components/pageTitle";
 
-export default function Publication({ title, etitle, body }) {
+export default function Activity({ title, etitle, body }) {
   const { locale } = useRouter();
   const site_title = locale === "ja-JP" ? J_SITE_TITLE : E_SITE_TITLE;
   const page_title = locale === "ja-JP" ? title : etitle;
@@ -27,15 +27,15 @@ export default function Publication({ title, etitle, body }) {
 }
 
 export async function getStaticPaths() {
-  const items = await getAllTopics();
+  const items = await getAllActivitiesOthers();
   const paths = [];
   items.map((item) => {
     paths.push({
-      params: { id: item.sys.id },
+      params: { year: item.fields.year.toString(), id: item.sys.id },
       locale: "ja-JP",
     });
     paths.push({
-      params: { id: item.sys.id },
+      params: { year: item.fields.year.toString(), id: item.sys.id },
       locale: "en",
     });
   });
@@ -44,7 +44,7 @@ export async function getStaticPaths() {
 }
 
 export async function getStaticProps({ params }) {
-  const item = await getTopics(params.id);
+  const item = await getActivitiesOthers(params.id);
   const body = await markdownToHtml(item.fields.body);
   return { props: { title: item.fields.title, etitle: item.fields.etitle, body: body } };
 }

src/pages/topics/[id].js src/pages/activities/[year]/[id].js

@@ -0,0 +1,64 @@
+import Link from "next/link";
+import Head from "next/head";
+import { useRouter } from "next/dist/client/router";
+
+import { getAllActivities, getActivity, getAllActivitiesOthers } from "../../../lib/api";
+import { J_SITE_TITLE, E_SITE_TITLE } from "../../../lib/constants";
+import markdownToHtml from "../../../lib/markdownToHtml";
+import Layout from "../../../components/layout";
+import Content from "../../../components/content";
+import List from "../../../components/list";
+import PageTitle from "../../../components/pageTitle";
+import Sidebar from "../../../components/sidebar";
+
+export default function Activity({ items, others, jtitle, etitle, body }) {
+  const { locale } = useRouter();
+  const site_title = locale === "ja-JP" ? J_SITE_TITLE : E_SITE_TITLE;
+  const page_title = locale === "ja-JP" ? jtitle : etitle;
+  const sidebar_title = locale === "ja-JP" ? "研究活動" : "Activities";
+
+  return (
+    <Layout>
+      <Head>
+        <title>
+          {page_title} | {site_title}
+        </title>
+      </Head>
+      <PageTitle title={page_title} />
+      <div className="grid grid-cols-5">
+        <div className="col-span-4">
+          <Content body={body} />
+          <List items={others} />
+        </div>
+        <div className="border-l">
+          <Sidebar items={items} title={sidebar_title} type="activities" />
+        </div>
+      </div>
+    </Layout>
+  );
+}
+
+export async function getStaticPaths({ locales }) {
+  const items = await getAllActivities();
+  const paths = [];
+  items.map((item) => {
+    paths.push({
+      params: { year: item.fields.year.toString() },
+      locale: "ja-JP",
+    });
+    paths.push({
+      params: { year: item.fields.year.toString() },
+      locale: "en",
+    });
+  });
+
+  return { paths, fallback: false };
+}
+
+export async function getStaticProps({ params }) {
+  const items = await getAllActivities();
+  const item = await getActivity(params.year);
+  const others = await getAllActivitiesOthers(params.year);
+  const body = await markdownToHtml(item.fields.body);
+  return { props: { items: items, others: others, jtitle: item.fields.title, etitle: item.fields.etitle, body: body } };
+}

src/pages/activities/[year]/index.js

@@ -0,0 +1,47 @@
+import Head from "next/head";
+import { useRouter } from "next/dist/client/router";
+
+import { getLatestActivity, getAllActivities } from "../../lib/api";
+import { J_SITE_TITLE, E_SITE_TITLE } from "../../lib/constants";
+import markdownToHtml from "../../lib/markdownToHtml";
+import Layout from "../../components/layout";
+import Content from "../../components/content";
+import PageTitle from "../../components/pageTitle";
+import Sidebar from "../../components/sidebar";
+
+function Index({ body, jtitle, etitle, items }) {
+  const { locale } = useRouter();
+  const site_title = locale === "ja-JP" ? J_SITE_TITLE : E_SITE_TITLE;
+  const page_title = locale === "ja-JP" ? jtitle : etitle;
+  const sidebar_title = locale === "ja-JP" ? "研究活動" : "Activities";
+
+  return (
+    <Layout>
+      <Head>
+        <title>
+          {page_title} | {site_title}
+        </title>
+      </Head>
+      <PageTitle title={page_title} />
+      <div className="grid grid-cols-5">
+        <div className="col-span-4">
+          <Content body={body} />
+        </div>
+        <div className="border-l">
+          <Sidebar items={items} title={sidebar_title} type="activities" />
+        </div>
+      </div>
+    </Layout>
+  );
+}
+
+export async function getStaticProps() {
+  const latestItem = await getLatestActivity();
+  const body = await markdownToHtml(latestItem.fields.body);
+  const items = await getAllActivities();
+  return {
+    props: { body: body, jtitle: latestItem.fields.title, etitle: latestItem.fields.etitle, items: items },
+  };
+}
+
+export default Index;

src/pages/activities/index.js

@@ -30,7 +30,7 @@ export default function Publication({ jitems, eitems, jtitle, etitle, jbody, ebo
           <Content body={body} />
         </div>
         <div className="border-l">
-          <Sidebar items={items} title={sidebar_title} />
+          <Sidebar items={items} title={sidebar_title} type="publications" />
         </div>
       </div>
     </Layout>

src/pages/publications/[year].js

@@ -30,7 +30,7 @@ export default function Index({ jbody, ebody, jtitle, etitle, jitems, eitems })
           <Content body={body} />
         </div>
         <div className="border-l">
-          <Sidebar items={items} title={sidebar_title} />
+          <Sidebar items={items} title={sidebar_title} type="publications" />
         </div>
       </div>
     </Layout>