mono-repository · mono-repository · Nov 28, 2023 · Feb 5, 2024
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -15,6 +15,7 @@
     "@astrojs/rss": "^2.4.3",
     "@astrojs/sitemap": "^1.3.3",
     "astro": "^2.7.2",
+    "axios": "^1.6.1",
     "microcms-js-sdk": "^2.5.0",
     "pattern.css": "^1.0.0",
     "three": "^0.158.0"

diff --git a/src/components/Header.astro b/src/components/Header.astro
@@ -1,21 +1,18 @@
 ---
 import HeaderLink from './HeaderLink.astro';
 import { SITE_TITLE,SITE_DESCRIPTION } from '../consts';
-
 ---
 
 <header>
-
 	<div class="flex">
 		<a href="/"><h2>{SITE_TITLE}</h2></a>
 		<h5>{SITE_DESCRIPTION}</h5>
 	</div>
 	<nav>
-		<HeaderLink href="/">Topic</HeaderLink>
-		<HeaderLink href="/blog">archive</HeaderLink>
-		<!-- <HeaderLink href="/note">idea</HeaderLink> -->
-		<HeaderLink href="/about">About</HeaderLink>
-		<HeaderLink href="https://github.com/withastro/astro" target="_blank">GitHub</HeaderLink>
+		<HeaderLink href="/"><i class="fa-solid fa-house"></i> Home</HeaderLink>
+		<HeaderLink href="/blog">Posts</HeaderLink>
+		<HeaderLink href="/about">Author</HeaderLink>
+		<HeaderLink href="https://github.com/mono-repository" target="_blank"><i class="fa-brands fa-github"></i> GitHub</HeaderLink>
 	</nav>
 </header>
 

diff --git a/src/consts.ts b/src/consts.ts
@@ -2,7 +2,7 @@
 // You can import this data from anywhere in your site by using the `import` keyword.
 
 export const SITE_TITLE = 'open-devlog';
-export const SITE_DESCRIPTION = 'developper archive';
+export const SITE_DESCRIPTION = 'daily&develop archive';
 export const AUTHOR = "Yamamoto Mio";
-export const CAREER = "Digital Craftsman\n(Photographer, Developper)";
+export const CAREER = "Digital Craftsman \nPhotographer, Software Developper";
 
diff --git a/src/layouts/BlogPost.astro b/src/layouts/BlogPost.astro
@@ -25,7 +25,7 @@ const { title, description, pubDate, updatedDate, heroImage } = Astro.props;
 					{heroImage && <img width={300} height={300} src={heroImage} alt="" />}
 					<div class="txt">
 						<h1 class="title">{title}</h1>
-						<p>{CAREER}</p>
+						<p class="whitespace-pre-wrap">{CAREER}</p>
 					<div class="last-updated-on">Found<FormattedDate date={pubDate} /></div>
 					{
 					updatedDate && (

diff --git a/src/layouts/TopicCards.astro → src/layouts/Home.astro b/src/layouts/TopicCards.astro → src/layouts/Home.astro
@@ -1,8 +1,10 @@
 ---
 const txt = "article"
 
+import { getBlogCount } from "../library/microcms";
+import * as styles from 'global.css'
 ---
-
+<!DOCTYPE html>
 <html>
   <head>
     <meta charset="utf-8" />
@@ -18,8 +20,16 @@ const txt = "article"
       import * as THREE from 'https://cdn.jsdelivr.net/npm/three@0.117.1/build/three.module.js';
 
       // サイズを指定
-      const width = 960;
-      const height = 540;
+      const width = 480;
+      const height = 300;
+
+      const maxWidthInCh = 65; //描写の最大幅を合わせる
+      const oneChWidth = parseFloat(getComputedStyle(document.documentElement).fontSize);
+      const maxWidthInPixels = maxWidthInCh * oneChWidth;
+      // ウィンドウの幅と比較して小さい方を採用
+      const finalWidth = Math.min(window.innerWidth, maxWidthInPixels);
+      const finalHeight = finalWidth * (height / width);
+
 
       // マウス座標管理用のベクトルを作成
       const mouse = new THREE.Vector2();
@@ -32,7 +42,7 @@ const txt = "article"
         canvas: canvas,
       });
       renderer.setPixelRatio(window.devicePixelRatio);
-      renderer.setSize(width, height);
+      renderer.setSize(finalWidth, finalHeight);
 
       // シーンを作成
       const scene = new THREE.Scene();
@@ -46,7 +56,7 @@ const txt = "article"
       // マウスとの交差を調べたいものは配列に格納する
       // 記事の総数を獲得し、それの数だけキューブを生成する
       const meshList = [];
-      for (let i = 0; i < 1000; i++) {
+      for (let i = 0; i < 100; i++) {
         const material = new THREE.MeshStandardMaterial({ color: 0xffffff });
 
         const mesh = new THREE.Mesh(geometry, material);
@@ -118,20 +128,48 @@ const txt = "article"
           }
         });
 
+        window.addEventListener('resize', () => {
+        // 更新された画面サイズを取得
+        const width = window.innerWidth;
+        const height = window.innerHeight;
+
+        if(width > 800){
+          camera.aspect = width / height;
+        camera.updateProjectionMatrix();
+
+        // レンダラーのサイズを更新
+        renderer.setSize(width/2, height/2.5);
+        }
+        // カメラのアスペクト比を更新
+
+      });
+
+
         // レンダリング
         renderer.render(scene, camera);
         requestAnimationFrame(tick);
       }
     </script>
   </head>
   <body>
+    <p class="total"><span>総合記事数 : </span>{{ getBlogCount }}件</p>
     <canvas id="myCanvas"></canvas>
   </body>
 </html>
 <style>
 
-main{
-  margin: 0;
-  overflow: hidden;
+body {
+  font-family: Verdana, sans-serif;
+	margin-left: auto;
+	margin-right:auto;
+	padding: 20px;
+	max-width: 65ch;
+	text-align: left;
+	background-color: #fff;
+	word-wrap: break-word;
+	overflow-wrap: break-word;
+	line-height: 1.5;
+	color: #444;
 }
-</style>
+
+</style>
diff --git a/src/library/microcms.ts b/src/library/microcms.ts
@@ -1,10 +1,34 @@
 //SDK利用準備
+import axios from 'axios';
 import { createClient, MicroCMSQueries } from "microcms-js-sdk";
 const client = createClient({
   serviceDomain: import.meta.env.MICROCMS_SERVICE_DOMAIN,
   apiKey: import.meta.env.MICROCMS_API_KEY,
 });
 
+//ブログ件数の取得
+export async function getBlogCount() {
+  try {
+    const response = await axios.get('note', {
+      headers: {
+        'X-API-KEY': import.meta.env.MICROCMS_API_KEY,
+      },
+      params: {
+        limit: 100, // 1件だけ取得することで総数を取得
+      },
+    });
+
+    // 総数はレスポンスのメタ情報に含まれています
+    const totalCount = response.data.totalCount;
+
+    console.log("ブログ記事の総数:", totalCount);
+
+    return totalCount;
+  } catch (error) {
+    console.error("ブログ記事の総数の取得に失敗しました:", error);
+  }
+}
+
 //型定義
 export type Blog = {
   id: string;
@@ -38,6 +62,7 @@ export const getBlogDetail = async (
 
 };
 
+
 // microCMSへAPIリクエスト
 // export const getStaticProps: GetStaticProps<Props, Params> = async (
 //   context: GetStaticPropsContext<Params, PreviewData>,

diff --git a/src/pages/index.astro b/src/pages/index.astro
@@ -4,7 +4,7 @@ import Header from '../components/Header.astro';
 import Footer from '../components/Footer.astro';
 import { SITE_TITLE, SITE_DESCRIPTION } from '../consts';
 import HeaderBody from '../components/MonthTopic.astro';
-import Layout from '../layouts/TopicCards.astro';
+import Layout from '../layouts/Home.astro';
 ---
 
 <!DOCTYPE html>