From f6682be1ad49d64fb2e1a0461cf0c4609a01de1f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?mio=C2=A5repo?= <1911140076s@ed.fuk.kindai.ac.jp> Date: Tue, 28 Nov 2023 17:04:28 +0900 Subject: [PATCH 1/2] commit 1128 --- package-lock.json | 91 ++++++++++++++++++++ package.json | 1 + src/components/Header.astro | 11 +-- src/consts.ts | 4 +- src/layouts/BlogPost.astro | 2 +- src/layouts/{TopicCards.astro => Home.astro} | 46 ++++++++-- src/library/microcms.ts | 25 ++++++ src/pages/index.astro | 2 +- 8 files changed, 163 insertions(+), 19 deletions(-) rename src/layouts/{TopicCards.astro => Home.astro} (80%) diff --git a/package-lock.json b/package-lock.json index c27e198..d794d36 100644 --- a/package-lock.json +++ b/package-lock.json @@ -12,6 +12,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" @@ -1367,6 +1368,21 @@ "retry": "0.13.1" } }, + "node_modules/asynckit": { + "version": "0.4.0", + "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz", + "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==" + }, + "node_modules/axios": { + "version": "1.6.1", + "resolved": "https://registry.npmjs.org/axios/-/axios-1.6.1.tgz", + "integrity": "sha512-vfBmhDpKafglh0EldBEbVuoe7DyAavGSLWhuSm5ZSEKQnHhBf0xAAwybbNH1IkrJNGnS/VG4I5yxig1pCEXE4g==", + "dependencies": { + "follow-redirects": "^1.15.0", + "form-data": "^4.0.0", + "proxy-from-env": "^1.1.0" + } + }, "node_modules/bail": { "version": "2.0.2", "resolved": "https://registry.npmjs.org/bail/-/bail-2.0.2.tgz", @@ -1804,6 +1820,17 @@ "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz", "integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==" }, + "node_modules/combined-stream": { + "version": "1.0.8", + "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz", + "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==", + "dependencies": { + "delayed-stream": "~1.0.0" + }, + "engines": { + "node": ">= 0.8" + } + }, "node_modules/comma-separated-tokens": { "version": "2.0.3", "resolved": "https://registry.npmjs.org/comma-separated-tokens/-/comma-separated-tokens-2.0.3.tgz", @@ -1972,6 +1999,14 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/delayed-stream": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz", + "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==", + "engines": { + "node": ">=0.4.0" + } + }, "node_modules/dequal": { "version": "2.0.3", "resolved": "https://registry.npmjs.org/dequal/-/dequal-2.0.3.tgz", @@ -2314,6 +2349,38 @@ "pkg-dir": "^4.2.0" } }, + "node_modules/follow-redirects": { + "version": "1.15.3", + "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.3.tgz", + "integrity": "sha512-1VzOtuEM8pC9SFU1E+8KfTjZyMztRsgEfwQl44z8A25uy13jSzTj6dyK2Df52iV0vgHCfBwLhDWevLn95w5v6Q==", + "funding": [ + { + "type": "individual", + "url": "https://github.com/sponsors/RubenVerborgh" + } + ], + "engines": { + "node": ">=4.0" + }, + "peerDependenciesMeta": { + "debug": { + "optional": true + } + } + }, + "node_modules/form-data": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz", + "integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==", + "dependencies": { + "asynckit": "^0.4.0", + "combined-stream": "^1.0.8", + "mime-types": "^2.1.12" + }, + "engines": { + "node": ">= 6" + } + }, "node_modules/format": { "version": "0.2.2", "resolved": "https://registry.npmjs.org/format/-/format-0.2.2.tgz", @@ -4159,6 +4226,25 @@ "node": ">=10.0.0" } }, + "node_modules/mime-db": { + "version": "1.52.0", + "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz", + "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==", + "engines": { + "node": ">= 0.6" + } + }, + "node_modules/mime-types": { + "version": "2.1.35", + "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz", + "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==", + "dependencies": { + "mime-db": "1.52.0" + }, + "engines": { + "node": ">= 0.6" + } + }, "node_modules/mimic-fn": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/mimic-fn/-/mimic-fn-4.0.0.tgz", @@ -4671,6 +4757,11 @@ "url": "https://github.com/sponsors/wooorm" } }, + "node_modules/proxy-from-env": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz", + "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==" + }, "node_modules/qs": { "version": "6.11.2", "resolved": "https://registry.npmjs.org/qs/-/qs-6.11.2.tgz", diff --git a/package.json b/package.json index a67d041..41d6575 100644 --- 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 index 6d9687b..639192e 100644 --- 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'; - ---
-

{SITE_TITLE}
{SITE_DESCRIPTION}
diff --git a/src/consts.ts b/src/consts.ts index 4cd4873..a539554 100644 --- 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 index b58fdc9..dc1eb85 100644 --- a/src/layouts/BlogPost.astro +++ b/src/layouts/BlogPost.astro @@ -25,7 +25,7 @@ const { title, description, pubDate, updatedDate, heroImage } = Astro.props; {heroImage && }

{title}

-

{CAREER}

+

{CAREER}

Found
{ updatedDate && ( diff --git a/src/layouts/TopicCards.astro b/src/layouts/Home.astro similarity index 80% rename from src/layouts/TopicCards.astro rename to src/layouts/Home.astro index befcf6a..14c9b88 100644 --- a/src/layouts/TopicCards.astro +++ b/src/layouts/Home.astro @@ -1,8 +1,10 @@ --- const txt = "article" +import { getBlogCount } from "../library/microcms"; +import * as styles from 'global.css' --- - + @@ -18,8 +20,8 @@ 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 = window.innerWidth; + const height = window.innerHeight/3; // マウス座標管理用のベクトルを作成 const mouse = new THREE.Vector2(); @@ -46,7 +48,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,6 +120,23 @@ 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); @@ -125,13 +144,24 @@ const txt = "article" +

総合記事数 : {{ getBlogCount }}件

\ No newline at end of file + + diff --git a/src/library/microcms.ts b/src/library/microcms.ts index 15390f1..cdc9c88 100644 --- 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 = async ( // context: GetStaticPropsContext, diff --git a/src/pages/index.astro b/src/pages/index.astro index 44eedfc..b8d9ef9 100644 --- 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'; --- From e58c9bb322767035108372ae5f0e0f40a14f1ec6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?mio=C2=A5repo?= <1911140076s@ed.fuk.kindai.ac.jp> Date: Mon, 5 Feb 2024 21:49:31 +0900 Subject: [PATCH 2/2] Update Home.astro --- src/layouts/Home.astro | 14 +++++++++++--- 1 file changed, 11 insertions(+), 3 deletions(-) diff --git a/src/layouts/Home.astro b/src/layouts/Home.astro index 14c9b88..def6edd 100644 --- a/src/layouts/Home.astro +++ b/src/layouts/Home.astro @@ -20,8 +20,16 @@ import * as styles from 'global.css' import * as THREE from 'https://cdn.jsdelivr.net/npm/three@0.117.1/build/three.module.js'; // サイズを指定 - const width = window.innerWidth; - const height = window.innerHeight/3; + 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(); @@ -34,7 +42,7 @@ import * as styles from 'global.css' canvas: canvas, }); renderer.setPixelRatio(window.devicePixelRatio); - renderer.setSize(width, height); + renderer.setSize(finalWidth, finalHeight); // シーンを作成 const scene = new THREE.Scene();