Fix: file organization

src/app/blog/[slug]/page.tsx

@@ -0,0 +1,112 @@
+import { Metadata } from 'next'
+import { remark } from 'remark'
+import html from 'remark-html'
+import gfm from 'remark-gfm'
+import { getPostBySlug, getAllPosts } from '../../../../lib/posts'
+import { formatDate } from '../../../../lib/dateFormat'
+import styles from '@/styles/blog/content.module.css'
+
+export async function generateStaticParams() {
+    const posts = await getAllPosts()
+    return posts.map((post) => ({
+        slug: post.slug,
+    }))
+}
+
+export async function generateMetadata({ params }: { params: Promise<{ slug: string }> }): Promise<Metadata> {
+    const { slug } = await params
+    const post = await getPostBySlug(slug)
+
+    if (!post) {
+        return {
+            title: 'Post Not Found',
+            description: 'This post is not available.',
+            openGraph: {
+                title: 'Post Not Found',
+                description: 'This post is not available.',
+                url: '',
+                siteName: 'Zisty',
+                locale: 'ja-JP',
+                type: 'website',
+                images: '/ogp.webp',
+            },
+            icons: '/favicon.png"',
+            verification: {
+                google: ''
+            },
+            publisher: '@teamzisty',
+            robots: 'index, follow',
+            creator: '@teamzisty',
+            keywords: ['Zisty', 'TeamZisty', 'ZISTY', 'teamzisty'],
+        }
+    }
+
+    const description = post.excerpt ?? post.description ?? `${post.description}`
+    const url = `https://www.zisty.net/${slug}`
+
+    return {
+        title: `${post.title}`,
+        description: description,
+        openGraph: {
+            title: post.title,
+            description: description,
+            url: url,
+            siteName: 'Zisty',
+            locale: 'ja-JP',
+            type: 'website',
+            images: '/ogp.webp',
+        },
+        icons: '/favicon.png"',
+        verification: {
+            google: ''
+        },
+        publisher: '@teamzisty',
+        robots: 'index, follow',
+        creator: '@teamzisty',
+        keywords: ['Zisty', 'TeamZisty', 'ZISTY', 'teamzisty'],
+    }
+}
+
+export default async function BlogPost({ params }: { params: Promise<{ slug: string }> }) {
+    const { slug } = await params
+    const post = await getPostBySlug(slug)
+
+    if (!post) {
+        return (
+            <>
+                <main>
+                    <div className={styles.notFound}>
+                        <i className="bi bi-cup-hot"></i>
+                        <h1>Does not exist</h1>
+                        <p>
+                            このブログは削除されている、または存在していない可能性があります。
+                            <br />
+                            どうですか？コーヒーでもご一緒に。
+                        </p>
+                    </div>
+                </main>
+            </>
+        )
+    }
+
+    const processedContent = await remark().use(html).use(gfm).process(post.content)
+    const contentHtml = processedContent.toString()
+
+    return (
+        <>
+            <main>
+                <article>
+                    <div className={styles.blog}>
+                        <div className={styles.title}>
+                            <p>{formatDate(post.date)}</p>
+                            <h1>{post.title}</h1>
+                        </div>
+                        <div className={styles.content}>
+                            <div dangerouslySetInnerHTML={{ __html: contentHtml }} />
+                        </div>
+                    </div>
+                </article>
+            </main>
+        </>
+    )
+}

src/app/blog/page.tsx

@@ -0,0 +1,54 @@
+import Image from "next/image";
+import Link from 'next/link';
+import Head from 'next/head';
+import { getAllPosts } from '../../../lib/posts';
+import { Post } from '../../../types/post';
+import { formatDate } from '../../../lib/dateFormat'
+import styles from '@/styles/blog/contents.module.css'
+
+const defaultHeader = "https://zisty.net/images/posts/default-header.jpg";
+
+export const metadata = {
+  title: 'Blog',
+  description: 'This is a blog maintained by a member of Zisty. Please take a look.',
+}
+
+interface BlogProps {
+  posts: Post[];
+}
+
+export default async function Blog() {
+  const posts = await getAllPosts();
+  return (
+    <>
+      <Head>
+        <title>Blog / Zisty</title>
+      </Head>
+      <main>
+        <section className={styles.blog} id="Blog">
+          <div className={styles.container}>
+            {posts && posts.map((post) => (
+              <article key={post.slug}>
+                <Link href={`/blog/${post.slug}`}>
+                  <div className={styles.box}>
+                    <Image
+                      src={post.header || defaultHeader}
+                      width={1920}
+                      height={1080}
+                      alt={post.title}
+                    />
+                    <div className={styles.content}>
+                      <h2 className={styles.togs}>{post.author}・{formatDate(post.date)}</h2>
+                      <h2 className={styles.title}>{post.title}</h2>
+                      <p className={styles.desc}>{post.description}</p>
+                    </div>
+                  </div>
+                </Link>
+              </article>
+            ))}
+          </div>
+        </section>
+      </main>
+    </>
+  );
+}

src/app/cookie/page.tsx

@@ -0,0 +1,54 @@
+export const runtime = 'edge';
+import { Metadata } from 'next'
+import { remark } from 'remark'
+import html from 'remark-html'
+import gfm from 'remark-gfm'
+import styles from '../../styles/terms.module.css'
+
+export const metadata: Metadata = {
+    title: 'Cookie Policy',
+    description: 'This Cookie Policy applies to the services and content provided by Zisty. Please review it.',
+}
+
+export default function cookiePage() {
+    return (
+        <>
+            <main>
+                <div className={styles.contents}>
+                    <div className={styles.title}>
+                        <p>2024/12/22</p>
+                        <h1>Cookie Policy</h1>
+                    </div>
+                    <div className={styles.content}>
+                        <h1>まず初めに</h1>
+                        <p>こういうｺﾞﾁｬｺﾞﾁｬしてて読みたくないのは我々も同じです。ですがこれがないと平和なコミュニティはできません。ご理解をよろしくお願いします。</p>
+                        <p>Zistyのアカウントの作成や利用、Zistyが運営しているサービスの利用する際には本規約に同意したものとみなされます。注意深くお読みいただき、ご理解頂いた上でご利用ください。もし、本規約に同意いただけない場合は、サービスの利用をお控えください。</p>
+
+                        <h1>Cookieとは</h1>
+                        <p>Cookieはウェブサイトがユーザーのブラウザに保存する小さなデータファイルのことです。これにより、ユーザーのセッション情報などを保存したり、ユーザーの行動を分析したりすることが可能になります。</p>
+
+                        <h1>Cookieを使用する目的</h1>
+                        <p>ZistyはCookieを使用してユーザーのセッション情報を保存するのに使用しています。これにより、ユーザーはアクセス時に毎度ログインする手間がなく、自動でログインすることができます。</p>
+
+                        <h1>Cookieの管理</h1>
+                        <p>Cookieはブラウザの設定を変更することで無効にしたり、削除したりすることができます。しかし、Cookieの削除や無効を行うと、一部の機能が利用できなくなることがあります。</p>
+
+                        <h1>サードパーティー</h1>
+                        <p>Zistyは分析ツールなどによって発行されたサードパーティーのCookieを使用する場合があります。これにより、第三者が提供するサービスを活用し、サービスの改善や改良などを行うことができます。</p>
+
+                        <h1>規約について</h1>
+                        <h2>本規約の変更</h2>
+                        <p>Zistyは本規約を予告なく変更できる権利を有します。変更後の規約はZistyに提示した時点から効力を発生します。引き続きZistyが提供するサービスなどを利用することで、変更に同意したものとみなされます。また利用規約の変更はSNSやBlogを通してお知らせすることもあります。</p>
+
+                        <h2>連絡先</h2>
+                        <p>本規約に関するお問い合わせは以下の連絡先までご連絡ください。<br />
+                            <b>[email protected]</b></p>
+
+                        <h1></h1>
+                        <p>以上が、Zistyの本規約です。本規約は予告なく変更される場合がありますのでご注意ください。</p>
+                    </div>
+                </div>
+            </main>
+        </>
+    )
+}

src/app/layout.tsx

@@ -0,0 +1,112 @@
+import clsx from "clsx";
+import Image from "next/image";
+import header from "@/styles/header.module.css";
+import footer from "@/styles/footer.module.css";
+import "@/styles/globals.css";
+import icon from "@/assets/zisty_header.png";
+
+export const metadata = {
+  title: {
+    default: 'Zisty',
+    template: '%s / Zisty'
+  },
+  description: 'We are a team of engineers with the slogan “We turn the unreal to real”. It is a team that stands like a club, consisting mainly of students.',
+  metadataBase: new URL('https://zisty.net'),
+  openGraph: {
+    title: 'We turn the unreal to real',
+    description: 'We are a team of engineers with the slogan “We turn the unreal to real”. It is a team that stands like a club, consisting mainly of students.',
+    url: 'https://zisty.net',
+    siteName: 'Zisty',
+    images: [
+      {
+        url: '/ogp.webp',
+        width: 1200,
+        height: 630,
+      }
+    ],
+    locale: 'ja_JP',
+    type: 'website',
+  },
+  icons: {
+    icon: '/favicon.png',
+  },
+  robots: {
+    index: true,
+    follow: true,
+  }
+};
+
+export default function RootLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <html lang="en">
+      <body>
+        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.min.css" />
+        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css" />
+
+        <div className={header.headerClass}>
+          <div className={header.leftLinks}>
+            <a className={header.headerA} href="/"><Image src={"https://github.com/teamzisty/Website/blob/main/src/assets/Images/zisty_header.png?raw=true"} width={500} height={500} alt="zisty_header" /></a>
+            <a className={header.headerA} href="/blog/">Blog</a>
+            <a className={header.headerA} href="https://accounts.zisty.net/">Accounts</a>
+          </div>
+          <div className={header.rightLinks}>
+            <a className={header.headerB} href="https://discord.gg/6BPfVm6cST" target="_blank"><i className={clsx("fa-brands", "fa-discord", header["Brands"])}></i></a>
+            <a className={header.headerB} href="https://x.com/teamzisty" target="_blank"><i className={clsx("fa-brands", "fa-x-twitter", header["Brands"])}></i></a>
+            <a className={header.headerB} href="https://github.com/teamzisty" target="_blank"><i className={clsx("fa-brands", "fa-github", header["Brands"])}></i></a>
+          </div>
+        </div>
+
+        {children}
+
+        <footer className={footer.footer}>
+          <Image
+            src={icon}
+            width={500}
+            height={500}
+            alt="zisty_header"
+            className={footer.logo}
+          />
+
+          <div className={footer.nav}>
+            <div className={footer.category}>
+              <div className={footer.categoryName}>More</div>
+              <ul className={footer.categoryNav}>
+                <li><a href="/blog/">Blog</a></li>
+                <li><a href="mailto:[email protected]">Contact Us</a></li>
+                <li><a href="https://docs.zisty.net/" target="_blank">Documents <i className={clsx("fa-solid", "fa-arrow-up-right-from-square", footer["redirect"])}></i></a></li>
+              </ul>
+            </div>
+
+            <div className={footer.category}>
+              <div className={footer.categoryName}>Legal</div>
+              <ul className={footer.categoryNav}>
+                <li><a href="/privacy/">Privacy Policy</a></li>
+                <li><a href="/terms/">Terms of Use</a></li>
+                <li><a href="/cookie/">Cookie Policy</a></li>
+              </ul>
+            </div>
+
+            <div className={footer.category}>
+              <div className={footer.categoryName}>Accounts</div>
+              <ul className={footer.categoryNav}>
+                <li><a href="https://accounts.zisty.net/" target="_blank">Dashboard  <i className={clsx("fa-solid", "fa-arrow-up-right-from-square", footer["redirect"])}></i></a></li>
+                <li><a href="https://accounts.zisty.net/login" target="_blank">Login  <i className={clsx("fa-solid", "fa-arrow-up-right-from-square", footer["redirect"])}></i></a></li>
+                <li><a href="https://accounts.zisty.net/register" target="_blank">Register  <i className={clsx("fa-solid", "fa-arrow-up-right-from-square", footer["redirect"])}></i></a></li>
+              </ul>
+            </div>
+
+            <div className={footer.category}>
+              <div className={footer.categoryName}>Socials</div>
+              <ul className={footer.categoryNav}>
+                <li><a href="https://x.com/teamzisty" target="_blank"><i className="bi bi-twitter-x"></i> X</a></li>
+                <li><a href="https://github.com/teamzisty" target="_blank"><i className="bi bi-github"></i> Github</a></li>
+                <li><a href="https://dsc.gg/teamzisty" target="_blank"><i className="bi bi-discord"></i> Discord</a></li>
+                <li><a href="https://misskey.io/@teamzisty" target="_blank"><i className="bi bi-globe"></i> Fediverse</a></li>
+              </ul>
+            </div>
+          </div>
+        </footer>   
+      </body>
+    </html>
+  );
+}

src/app/page.tsx

@@ -0,0 +1,21 @@
+export const runtime = 'edge';
+import Image from "next/image";
+import hero from "@/styles/hero.module.css";
+import logo from "@/assets/zisty_header.png";
+
+export default function Home() {
+  return (
+    <main className="home">
+      <div className={hero.hero}>
+        <div className={hero["contents"]}>
+          <p className={hero.tag}>Welcome to Zisty</p>
+          <h1>Our mission is to<br />“turn the unreal into reality.”</h1>
+          <p className={hero.description}>We are a community team of mainly Japanese students who love programming.</p>
+        </div>
+        <div className={hero["animation"]}>
+          <Image src={logo} width={500} height={500} alt="hero" className={hero.real} />
+        </div>
+      </div>
+    </main>
+  );
+}