よき

Dev-TRANs · Nov 23, 2023 · 2a7c98b · 2a7c98b
1 parent 94e775a
commit 2a7c98b
Show file tree

Hide file tree

Showing 8 changed files with 146 additions and 8 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,6 @@
+{
+    "[astro]": {
+        "editor.tabSize": 2,
+        "editor.insertSpaces": true
+    }
+}
diff --git a/bun.lockb b/bun.lockb
diff --git a/src/components/brands/Logo.astro b/src/components/brands/Logo.astro
diff --git a/src/components/page/Footer.astro b/src/components/page/Footer.astro
@@ -0,0 +1,19 @@
+<footer class='w-full mt-2'>
+  <div class='bg-slate-700 text-white p-2'>
+    <div class="grid grid-cols-2 gap-2">
+      <div>
+        <div class="text-lg font-bold">Schoolink</div>
+        <div class="text-sm text-slate-400">学校間の<br>コミュニケーションを</div>
+      </div>
+      <div>
+        <div class="font-bold">Social</div>
+        <div class="text-slate-400">
+          <div><a class="underline hover:no-underline" href="https://github.com/dev-trans/schoolink">GitHub</a></div>
+        </div>
+      </div>
+    </div>
+    <div class="text-center text-slate-400">
+      &copy; 2023 TRANs
+    </div>
+  </div>
+</footer>
diff --git a/src/components/page/Header.astro b/src/components/page/Header.astro
@@ -0,0 +1,15 @@
+---
+import Logo from '../brands/Logo.astro'
+---
+<header class="sticky top-0 w-full">
+  <div class="flex items-center justify-between px-2 py-3">
+    <div class="font-bold font-mono text-xl">
+      Schoolink
+    </div>
+    <div>
+      <div>
+        <a href='/login' class="p-2 rounded bg-blue-500 text-white font-bold">Login</a>
+      </div>
+    </div>
+  </div>
+</header>
diff --git a/src/layouts/Layout.astro → src/layouts/BaseLayout.astro b/src/layouts/Layout.astro → src/layouts/BaseLayout.astro
@@ -1,9 +1,10 @@
 ---
-interface Props {
-	title: string;
+export interface Props {
+	title: string
 }
+const { title } = Astro.props
+
 
-const { title } = Astro.props;
 ---
 
 <!doctype html>

diff --git a/src/layouts/PageLayout.astro b/src/layouts/PageLayout.astro
@@ -0,0 +1,14 @@
+---
+import Footer from '../components/page/Footer.astro'
+import Header from '../components/page/Header.astro'
+import BaseLayout, { type Props as BaseProps } from './BaseLayout.astro'
+
+export interface Props extends BaseProps {
+
+}
+---
+<BaseLayout {...Astro.props}>
+  <Header />
+  <slot />
+  <Footer />
+</BaseLayout>
diff --git a/src/pages/index.astro b/src/pages/index.astro
@@ -1,10 +1,58 @@
 ---
-import Layout from '../layouts/Layout.astro';
+import PageLayout from '../layouts/PageLayout.astro'
+
+const posts = [
+  {
+    school: 'Example市立Example中学校',
+    title: 'Google Formで毎日の体温チェックをする方法を教えて！',
+    body: '最近私たちの学校ではインフルエンザが流行しています。そのため、体温を紙に書いて提出していますが、負担がとても大きいです。それを回避するために、Google Formsを用いた体温管理をしたいのですが、詳しい生徒会さんはいませんか？',
+    id: crypto.randomUUID()
+  },
+  {
+    school: 'Example高等学校',
+    title: '文化祭の資金どうしてます？',
+    body: '文化祭の資金ってどうしていますか？文化祭を生徒会主催で初めて開催することになったのですが、よくわかりません。',
+    id: crypto.randomUUID()
+  },
+  {
+    school: 'Schoolink市立テスト学校',
+    title: 'テストをなくすには？',
+    body: '定期テストをなくすにはどうすればよいですか？生徒会主催のテロも考えていますが、現実性は薄いです。',
+    id: crypto.randomUUID()
+  }
+]
 ---
 
-<Layout title="Schoolink">
+<PageLayout title="Home | Schoolink">
   <main>
-    <div class="text-2xl">Schoolink</div>
-    <div>By TRANs</div>
+    <div class="bg-blue-50 my-2">
+      <div class="py-5 px-4">
+        <div class="text-2xl font-bold">
+          学校間の<br class='block sm:hidden' />コミュニケーションを
+        </div>
+        <div class='text-slate-500'>
+          Schoolinkは、生徒会間のコミュニケーションを支援するアプリです。<br =>
+          生徒会活動振興会の支援のもと、生徒会情報機構が運営/開発をしています。
+        </div>
+      </div>
+    </div>
+    <div class="px-2">
+      <div class="text-xl my-2">最新の投稿</div>
+      <div class='px-1 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-2'>
+        {
+          posts.map(post => {
+            return <div class='border rounded-md p-2'>
+              <div class='text-lg font-bold'>{ post.title }</div>
+              <div class="text-slate-600 text-sm pl-2">from { post.school }</div>
+              <hr class="my-1"/>
+              <div class="text-slate-600 text-sm pl-2">{ post.body.slice(0, 42) }...</div>
+              <div class="underline hover:no-underline text-right px-3">
+                <a href={`/posts/${post.id}`}>Show More →</a>
+              </div>
+            </div>
+          })
+        }
+      </div>
+    </div>
   </main>
-</Layout>
+</PageLayout>