diff --git a/apps/mobliz-clone/package.json b/apps/mobliz-clone/package.json index 01bd113df9..61ca5bb637 100644 --- a/apps/mobliz-clone/package.json +++ b/apps/mobliz-clone/package.json @@ -13,6 +13,7 @@ }, "dependencies": { "axios": "^0.24.0", + "font-awesome": "^4.7.0", "html-react-parser": "^4.2.2", "next": "^13.3.0", "react": "^18.2.0", diff --git a/apps/mobliz-clone/src/components/SideMenu.tsx b/apps/mobliz-clone/src/components/SideMenu.tsx index b03ca63d73..84a96ecc0c 100644 --- a/apps/mobliz-clone/src/components/SideMenu.tsx +++ b/apps/mobliz-clone/src/components/SideMenu.tsx @@ -3,29 +3,27 @@ import React, { useState, useEffect } from 'react'; import axios from '~/utils/axios'; const SideMenu: React.FC = () => { - const [tag, setTag] = useState(); const [newPost, setNewPost] = useState(); + const [tag, setTag] = useState(); const [error, setError] = useState(); useEffect(() => { - axios.get(`${process.env.NEXT_PUBLIC_APP_SITE_URL}/_cms/tags`) + axios.get(`${process.env.NEXT_PUBLIC_APP_SITE_URL}/_cms/list.json`) .then((response) => { - setTag(response.data.data); + setNewPost(response.data); }) .catch((error) => { setError(`データの取得に失敗しました。\n${JSON.stringify(error)}`); }); - }, []); - - useEffect(() => { - axios.get(`${process.env.NEXT_PUBLIC_APP_SITE_URL}/_cms/list.json`) + axios.get(`${process.env.NEXT_PUBLIC_APP_SITE_URL}/_cms/tags`) .then((response) => { - setNewPost(response.data); + setTag(response.data.data); }) .catch((error) => { setError(`データの取得に失敗しました。\n${JSON.stringify(error)}`); }); }, []); + return ( <> {error == null ? ( @@ -35,20 +33,17 @@ const SideMenu: React.FC = () => { Loading... ) : ( - <> +
+
最新記事
-
タグ
-
    +
      {tag.map((tagData, index) => { return ( -
    • -
      -
      -

      {`${tagData.name}`}

      -
      -
      +
    • + + {tagData.name} +
    • ); })}
- +
)} ) : ( -
-

{error}

-
+ { error } )} ); diff --git a/apps/mobliz-clone/src/pages/[pageId].tsx b/apps/mobliz-clone/src/pages/[pageId].tsx index 1e12067fc6..ab661bd003 100644 --- a/apps/mobliz-clone/src/pages/[pageId].tsx +++ b/apps/mobliz-clone/src/pages/[pageId].tsx @@ -38,8 +38,8 @@ const DetailPage: NextPage = (props: Props) => { ) : ( <>
-

{dateFnsFormat(new Date(resData.page.createdAt), 'yyyy.MM.dd')}

-

{dateFnsFormat(new Date(resData.page.updatedAt), 'yyyy.MM.dd')}

+

{dateFnsFormat(new Date(resData.page.createdAt), 'yyyy.MM.dd')}

+

{dateFnsFormat(new Date(resData.page.updatedAt), 'yyyy.MM.dd')}

{resData.title}

{parse(resData.htmlString)} diff --git a/apps/mobliz-clone/src/pages/_app.tsx b/apps/mobliz-clone/src/pages/_app.tsx index 636f8b96aa..fc3f8366d2 100644 --- a/apps/mobliz-clone/src/pages/_app.tsx +++ b/apps/mobliz-clone/src/pages/_app.tsx @@ -8,7 +8,7 @@ import Layout from '~/components/Layout'; const App = ({ Component, pageProps }: AppProps): JSX.Element => ( <> - + <title>WESEEK Blog diff --git a/apps/mobliz-clone/src/styles/globals.scss b/apps/mobliz-clone/src/styles/globals.scss index d4db885530..deed9d4536 100644 --- a/apps/mobliz-clone/src/styles/globals.scss +++ b/apps/mobliz-clone/src/styles/globals.scss @@ -1,3 +1,5 @@ +@import 'font-awesome'; + * { box-sizing: border-box; } @@ -16,6 +18,14 @@ body { background-color: #f9f9f9; } +h1, h2 { + margin-top: 16px; +} + +h3 { + margin-top: 12px; +} + header { background-image: url('../../public/weseek-blog-header.jpg'); background-position: center; @@ -50,3 +60,28 @@ img { color: #2581c4; } } + +// コピペ https://stackoverflow.com/questions/43227241/caret-before-link +.list-caret { + padding: 0; + margin: 0.75em 0; + list-style: none; +} + +.list-caret li a { + display: inline-block; +} + +.list-caret li a:before { + position: relative; + top: 1.1em; + left: -0.6em; + display: block; + width: 0; + height: 0; + color: #888; + content: ' '; + border-color: transparent #888; + border-style: solid; + border-width: 0.35em 0 0.35em 0.45em; +}