init

.gitignore

@@ -22,6 +22,4 @@ pnpm-debug.log*
 
 package-lock.json
 
-_bk
 _note
-dist/

.prettierignore

@@ -0,0 +1,2 @@
+package.json
+package-lock.json

.prettierrc

@@ -0,0 +1,7 @@
+{
+  "tabWidth": 2,
+  "trailingComma": "all",
+  "useTabs": false,
+  "semi": true,
+  "printWidth": 120
+}

astro.config.mjs

@@ -0,0 +1,92 @@
+import { defineConfig } from "astro/config";
+import postcssMergeQueries from "postcss-merge-queries";
+import htmlMinify from "@frontendista/astro-html-minify";
+import glsl from "vite-plugin-glsl";
+import sitemap from "@astrojs/sitemap";
+import * as dotenv from "dotenv";
+dotenv.config();
+
+function createDate() {
+  const now = new Date(),
+    year = now.getFullYear(),
+    month = now.getMonth() + 1,
+    date = now.getDate(),
+    hour = now.getHours(),
+    minute = now.getMinutes();
+  return `${year}${month}${date}${hour}${minute}`;
+  // return `${year}${month}${date}`;
+}
+
+const DATE = createDate(),
+  MODE = process.env.NODE_ENV,
+  SITE_URL = MODE === "production" ? process.env.PUBLIC_PROD_URL : process.env.PUBLIC_LOCAL_URL;
+// ? process.env.PUBLIC_TEST_URL : process.env.PUBLIC_LOCAL_URL;
+// ? process.env.PUBLIC_LOCAL_URL : process.env.PUBLIC_LOCAL_URL;
+
+console.log(
+  `// --------------------------\n\n⚡️ ~ MODE : ${MODE}\n\n▕▔▔▔▔▔▔▔▔▔▔▔╲\n▕╮╭┻┻╮╭┻┻╮╭▕╮╲\n▕╯┃╭╮┃┃╭╮┃╰▕╯╭▏\n▕╭┻┻┻┛┗┻┻┛ ╰▏ ▏\n▕╰━━━┓┈┈┈╭╮▕╭╮▏\n▕╭╮╰┳┳┳┳╯╰╯▕╰╯▏\n▕╰╯┈┗┛┗┛┈╭╮▕╮┈▏\n\n// --------------------------`,
+);
+
+console.log(SITE_URL);
+
+// https://astro.build/config
+export default defineConfig({
+  markdown: {
+    drafts: true,
+  },
+  build: {
+    assets: "assets",
+  },
+  site: SITE_URL,
+  base: "/",
+  vite: {
+    plugins: [glsl()],
+    esbuild: {
+      drop: ["console", "debugger"],
+    },
+    build: {
+      assetsInlineLimit: 0,
+      chunkSizeWarningLimit: 100000000,
+      rollupOptions: {
+        output: {
+          assetFileNames: `assets/[ext]/[name].${DATE}[extname]`,
+          entryFileNames: `assets/js/build.${DATE}.js`,
+        },
+      },
+      cssCodeSplit: false,
+    },
+    css: {
+      postcss: {
+        plugins: [postcssMergeQueries],
+      },
+    },
+    server: {
+      open: true,
+      port: 8080,
+    },
+    preview: {
+      open: true,
+      port: 8080,
+    },
+  },
+  integrations: [
+    sitemap(),
+    htmlMinify({
+      reportCompressedSize: false,
+      htmlTerserMinifierOptions: {
+        removeComments: true,
+        removeTagWhitespace: false,
+      },
+    }),
+  ],
+  server: {
+    open: true,
+    host: true,
+    port: 3000,
+  },
+  preview: {
+    open: true,
+    host: true,
+    port: 3000,
+  },
+});

postcss.config.cjs

@@ -0,0 +1,3 @@
+module.exports = {
+  plugins: [require("autoprefixer")],
+};

replaceHtml.mjs

@@ -0,0 +1,50 @@
+import { writeFileSync, readFileSync } from "fs";
+import glob from "glob";
+
+const replaceInHtmlFiles = () => {
+  try {
+    const files = glob.sync("dist/**/*.html");
+    console.log(files);
+    for (const file of files) {
+      // htmlファイルの読み込み
+      const data = readFileSync(file, "utf8");
+
+      // htmlの置かれているパスから相対(., ..)を算出
+      let relativePath = file.replace(/[^/]/g, "").replace(/\//g, ".");
+
+      if (relativePath.length === 1) {
+        relativePath = file.replace(/[^/]/g, "").replace(/\//g, ".");
+      } else {
+        relativePath = file.replace(/[^/]/g, "").replace(/\//g, "../");
+        relativePath = relativePath.slice(0, -1);
+        // 3 ... | ../../ → ../..
+        // 4 .... | ../../../ → ../../..
+        // 5 ..... | ../../../../ → ../../../..
+      }
+
+      // href, srcに指定されている絶対パスを置換
+      const result = data
+        .replace(/href="\//g, `href="${relativePath}/`)
+        .replace(/href='\//g, `href='${relativePath}/`)
+        .replace(/src="\//g, `src="${relativePath}/`)
+        .replace(/src='\//g, `src='${relativePath}/`)
+        .replace(/srcset="\//g, `srcset="${relativePath}/`)
+        .replace(/srcset='\//g, `srcset='${relativePath}/`)
+        .replace(/action="\//g, `action="${relativePath}/`)
+        .replace(/action='\//g, `action='${relativePath}/`)
+        .replace(/content="\//g, `content="${relativePath}/`)
+        .replace(/content='\//g, `content='${relativePath}/`);
+
+      writeFileSync(file, result, "utf8");
+      // console.log(file);
+    }
+    console.log(`\n// --------------------------\n\n👌 ~ replaceInHtmlFiles\n\n// --------------------------\n`);
+  } catch (error) {
+    console.log(
+      `\n// -------------------------- \n\n🙅‍♀️ ~ replaceInHtmlFiles\n\n// --------------------------\n${error}\n`,
+    );
+  }
+};
+
+replaceInHtmlFiles();
+// node replaceHtml.mjs

src/assets/js/app.js

@@ -55,8 +55,10 @@ window.addEventListener("DOMContentLoaded", (e) => {
 
     webgl.resize(params);
   };
-  resize();
   window.addEventListener("resize", resize, { passive: true });
+  setTimeout(() => {
+    resize();
+  }, 300);
 
   if (bool.isMatchMediaHover) {
     // 右クリック禁止

src/assets/js/webgl/WebGL.js

@@ -68,8 +68,8 @@ export class WebGL {
   }
 
   resize(params) {
-    this.params.w = this.params.w;
-    this.params.h = this.params.h;
+    this.params.w = params.w;
+    this.params.h = params.h;
 
     this.stage.resize(params.w, params.h);
     this.plane.resize(params);

src/assets/scss/foundation/_reset.scss

@@ -0,0 +1,156 @@
+@use "../global/function" as *;
+
+html,
+body {
+  font-family: var(--ja);
+  font-weight: 400;
+  font-size: calc(100 / var(--base-vw) * 1vw);
+  @include pc_w() {
+    --base-vw: 1440;
+  }
+  @include sp_w() {
+    --base-vw: 375;
+  }
+  color: var(--black);
+  background: var(--white);
+  background-size: cover;
+  background-repeat: no-repeat;
+  overscroll-behavior: none;
+}
+
+body,
+div,
+dl,
+dt,
+dd,
+ul,
+ol,
+li,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+pre,
+code,
+form,
+fieldset,
+legend,
+input,
+textarea,
+blockquote,
+th,
+td,
+p {
+  margin: 0;
+  padding: 0;
+}
+
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+
+iframe,
+fieldset,
+img {
+  border: 0;
+}
+
+address,
+caption,
+cite,
+code,
+dfn,
+em,
+strong,
+th,
+var {
+  font-style: normal;
+  font-weight: normal;
+}
+
+ol,
+ul {
+  list-style: none;
+}
+
+caption,
+th {
+  text-align: left;
+}
+
+abbr,
+acronym {
+  border: 0;
+  font-variant: normal;
+}
+
+sup {
+  vertical-align: text-top;
+}
+
+sub {
+  vertical-align: text-bottom;
+}
+
+input,
+textarea,
+select {
+  font-family: inherit;
+  font-size: inherit;
+  font-weight: inherit;
+}
+
+legend {
+  color: var(--black);
+}
+
+*:focus {
+  outline: none;
+}
+
+a {
+  cursor: pointer;
+  color: var(--black);
+  text-decoration: none;
+  box-shadow: none;
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+}
+
+input {
+  cursor: pointer;
+  -webkit-appearance: none;
+  appearance: none;
+  background-color: #fff;
+  border-radius: 0;
+}
+
+textarea {
+  cursor: pointer;
+  -webkit-appearance: none;
+  appearance: none;
+  border-radius: 0;
+  resize: vertical;
+}
+
+select {
+  cursor: pointer;
+  appearance: none;
+  -moz-appearance: none;
+  -webkit-appearance: none;
+  background: none;
+  border: none;
+}
+
+button {
+  cursor: pointer;
+  border: none;
+  background: initial;
+}
+
+::-webkit-scrollbar {
+  display: none;
+}

src/assets/scss/global/_app.scss

@@ -0,0 +1,3 @@
+// entry point
+@forward "./function";
+@forward "./variable";

src/assets/shader/frag/plane.glsl

@@ -72,4 +72,4 @@ void main() {
   vec4 texture = mix(t1,t2,interpolation);
   vec4 dist = vec4(texture.rgb * matcapTexture.rgb, 1.0);
   gl_FragColor = dist;
-}
+}

src/assets/shader/vert/plane.glsl

@@ -1,3 +1,4 @@
+
 attribute vec3 position;
 attribute vec3 normal;
 attribute vec2 uv;

src/components/Copyright.astro

@@ -0,0 +1,9 @@
+---
+---
+
+<a
+  class="c-copyright"
+  href="https://dev.shoya-kajita.com/"
+  target="_blank"
+  rel="noopener noreferrer">©2023 SHOYA KAJITA.</a
+>

src/env.d.ts

@@ -0,0 +1 @@
+/// <reference types="astro/client" />