init

.gitignore

@@ -0,0 +1,25 @@
+# build output
+dist/
+
+# generated types
+.astro/
+
+# dependencies
+node_modules/
+
+# logs
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+
+# environment variables
+.env
+.env.production
+
+# macOS-specific files
+.DS_Store
+
+package-lock.json
+
+_bk

.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
+}

.vscode/extensions.json

@@ -0,0 +1,4 @@
+{
+  "recommendations": ["astro-build.astro-vscode"],
+  "unwantedRecommendations": []
+}

.vscode/launch.json

@@ -0,0 +1,11 @@
+{
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "command": "./node_modules/.bin/astro dev",
+      "name": "Development server",
+      "request": "launch",
+      "type": "node-terminal"
+    }
+  ]
+}

.vscode/settings.json

@@ -0,0 +1,2 @@
+{
+}

README.md

@@ -0,0 +1,34 @@
+# Toys.028 | WebGL Carousel Demo.06 ~ PaperAnimation
+
+## 👾 ~ Demo
+
+- https://dev.shoya-kajita.com/028/
+
+<img src="public/assets/img/head/screenshot.webp">
+
+<img src="screenshot2.webp">
+
+## 🎮 ~ Getting Started
+
+```
+// install
+npm i
+
+// development
+npm run dev
+
+// production
+npm run build
+
+// build preview
+npm run preview
+```
+
+## 📝 ~ Note
+
+- https://www.pentacreation.com/blog/2021/06/210605.html
+- https://tympanus.net/codrops/2020/01/22/how-to-unroll-images-with-three-js/
+- https://tympanus.net/Development/UnrollingImages/
+- https://github.com/akella/UnrollingImages/blob/master/js/shader/vertex.glsl
+
+<img src="sample_sine.gif">

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,
+  },
+});

package.json

@@ -0,0 +1,30 @@
+{
+  "name": "project",
+  "type": "module",
+  "version": "0.0.1",
+  "scripts": {
+    "dev": "astro dev",
+    "start": "astro dev",
+    "build": "astro build && node replaceHtml.mjs",
+    "preview": "astro preview",
+    "astro": "astro"
+  },
+  "dependencies": {
+    "astro": "^2.2.1",
+    "gsap": "^3.11.4",
+    "three": "^0.148.0"
+  },
+  "devDependencies": {
+    "@astrojs/sitemap": "^1.2.2",
+    "@frontendista/astro-html-minify": "^1.0.7",
+    "autoprefixer": "^10.4.14",
+    "dotenv": "^16.0.3",
+    "fs-extra": "^11.1.1",
+    "glob": "^9.3.4",
+    "postcss-merge-queries": "^1.0.3",
+    "prettier": "^2.8.7",
+    "prettier-plugin-astro": "^0.8.0",
+    "sass": "^1.61.0",
+    "vite-plugin-glsl": "^1.1.2"
+  }
+}

postcss.config.cjs

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

public/robots.txt

@@ -0,0 +1,4 @@
+User-agent: *
+Allow: /
+
+Sitemap: https://dev.shoya-kajita.com/sitemap-index.xml

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