feat: iroiro

.vscode/settings.json

@@ -0,0 +1,5 @@
+{
+    "[astro]": {
+        "editor.tabSize": 2,
+    }
+}

README.md

@@ -1,3 +1,6 @@
+# 五所川原盛り上げ隊のサイト
+Using Astro!
+
 # Astro Starter Kit: Basics
 
 ```sh

astro.config.ts

@@ -0,0 +1,8 @@
+import { defineConfig } from 'astro/config';
+
+import tailwind from "@astrojs/tailwind";
+
+// https://astro.build/config
+export default defineConfig({
+  integrations: [tailwind()]
+});

bunfig.toml

@@ -0,0 +1,2 @@
+[install.scopes]
+"@jsr" = "https://npm.jsr.io"

package.json

@@ -10,8 +10,13 @@
     "astro": "astro"
   },
   "dependencies": {
-    "astro": "^4.7.0",
     "@astrojs/check": "^0.5.10",
+    "@astrojs/tailwind": "^5.1.0",
+    "@ns/ha": "npm:@jsr/ns__ha",
+    "astro": "^4.7.0",
+    "fast-xml-parser": "^4.3.6",
+    "node-html-parser": "^6.1.13",
+    "tailwindcss": "^3.4.3",
     "typescript": "^5.4.5"
   }
 }

src/components/Header.astro

@@ -0,0 +1,20 @@
+---
+import Logo from '../assets/logo.jpeg'
+import { Image } from 'astro:assets'
+---
+<header class="fixed top-0 w-full">
+  <div class="w-full grid p-2 grid-cols-1 lg:grid-cols-2">
+    <div class="flex items-center w-full gap-1">
+      <Image src={Logo} alt='五所川原盛り上げ隊' class="w-12 h-12 rounded-full" />
+    </div>
+    <div class="grid place-items-center grid-cols-2 bg-white rounded-full p-1 rounded-tr-none w-full">
+      <a class="header-link-btn wave">Links</a>
+      <a class="header-link-btn wave">Contact</a>
+    </div>
+  </div>
+</header>
+<style>
+  .header-link-btn {
+    @apply text-slate-600 p-2 rounded-full h-full text-lg font-bold w-full text-center;
+  }
+</style>

src/components/Links.astro

@@ -0,0 +1,41 @@
+---
+import { Image } from "astro:assets";
+import instagram from "../assets/brands/instagram.svg?raw";
+
+const links: {
+  name: string;
+  link: string;
+  id: string;
+  image: string | ImageMetadata;
+}[] = [
+  {
+    name: "Instagram",
+    link: "https://www.instagram.com/goshogawara_moriagetai",
+    id: "@goshogawara_moriagetai",
+    image: instagram,
+  },
+];
+---
+
+<div class="grid grid-cols-2 lg:grid-cols-4">
+  {
+    links.map((link) => (
+      <a class="wave" href={link.link}>
+        <div class="border text-center p-2 rounded-md flex flex-col">
+          <div class="flex justify-center">
+            {typeof link.image === "string" ? (
+              <div
+                set:html={link.image}
+                class="text-white w-24 h-24 text-center"
+              />
+            ) : (
+              <Image src={link.image} alt={link.name} class="w-24 h-24" />
+            )}
+          </div>
+          <div>{link.name}</div>
+          <div>{link.id}</div>
+        </div>
+      </a>
+    ))
+  }
+</div>

src/components/Posts.astro

@@ -0,0 +1,40 @@
+---
+import { parse } from 'node-html-parser'
+
+const dateFormatter = new Intl.DateTimeFormat('ja-JP', {
+  dateStyle: 'medium',
+  timeStyle: 'medium',
+  timeZone: 'Asia/Tokyo',
+})
+
+const items: {
+  title: string
+  desc: string
+  url: string
+  date: Date
+  type: 'ameblo' | 'threads'
+}[] = []
+const ameba = (async () => {
+  const rss = await fetch('http://rssblog.ameba.jp/goshogawara-moriagetai/rss.html').then(res => res.text())
+  const json = parse(rss)
+  for (const item of json.querySelectorAll('item')) {
+    items.push({
+      title: item.querySelector('title')?.innerText!,
+      desc: item.querySelector('description')?.innerText!,
+      url: item.getAttribute('rdf:about')!,
+      date: new Date(item.querySelector('dc\\:date')?.innerText!),
+      type: 'ameblo'
+    })
+  }
+})()
+await Promise.all([ameba])
+---
+<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-2">
+  {
+    items.map(item => (<a class="wave" href={item.url} data-hcolor="#aaa"><div class="p-2 border rounded-md">
+      <div class="text-xl font-bold">{item.title}</div>
+      <div class="text-slate-500 text-sm">{dateFormatter.format(item.date)}</div>
+      <div>{item.desc.length > 50 ? item.desc.slice(0, 50) + '...' : item.desc}</div>
+    </div></a>))
+  }
+</div>

src/env.d.ts

@@ -1 +1,2 @@
+/// <reference path="../.astro/types.d.ts" />
 /// <reference types="astro/client" />

src/layouts/Base.astro

@@ -0,0 +1,28 @@
+---
+export interface Props {
+  title: string
+}
+
+const { title } = Astro.props
+---
+
+<!doctype html>
+<html lang="en">
+	<head>
+		<meta charset="UTF-8" />
+		<meta name="description" content="Astro description" />
+		<meta name="viewport" content="width=device-width" />
+		<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+		<meta name="generator" content={Astro.generator} />
+		<title>{title}</title>
+		{
+			import.meta.env.DEV && <>
+			  <script is:inline src="//cdn.jsdelivr.net/npm/eruda"></script>
+	  		<script is:inline>eruda.init();</script>
+			</>
+		}
+	</head>
+	<body>
+		<slot />
+	</body>
+</html>

src/layouts/Page.astro

@@ -0,0 +1,23 @@
+---
+import Base, { type Props as BaseProps } from "./Base.astro"
+import Header from "../components/Header.astro"
+export type Props = BaseProps & {}
+---
+
+<Base {...Astro.props}>
+  <Header />
+  <slot />
+</Base>
+<script>
+  import { wave } from "@ns/ha"
+  const buttons =
+    document.querySelectorAll<HTMLAnchorElement>(".wave")
+  for (const button of buttons) {
+    const ha = wave({
+      color: button.dataset.hcolor ?? '#ddd',
+      duration: 500,
+      target: button,
+    })
+    button.onpointerdown = (evt) => ha.do({ pos: evt })
+  }
+</script>