import { Box } from "@mui/material";
import { ArrowRightAlt } from "@mui/icons-material";
import BlogCard from "./ui/blogcard";
import Link from "next/link";
import Latest from "./ui/latest";
import Links from "./ui/links";
import CreateButton from "./ui/createbutton";

export const runtime = 'edge'

export default function Home() {
  return (
    <main>
      <h2 className="text-xl text-center">
        Hello! <br/>
        I hope you enjoy my blogs! :)
      </h2>
      <CreateButton />
        <div className="m-1">
          <div className="md:grid grid-cols-2">
            <div className="md:ml-52">
              <p>Latest</p>
              <Latest />
              <hr className="hidden md:block"/>
              <Links device="other"/>
            </div>
            <div className="md:ml-32 md:mr-52">
              <p>Other Blogs</p>
              <div className="flex flex-wrap justify-center md:block">
                <BlogCard />
              </div>
            </div>
          </div>
          <Link href="/blog">
            <Box component="section" sx={{p: 2, border: '1px solid gray', m: 2}}>
              <p>View other blogs <ArrowRightAlt /></p>
            </Box>
          </Link>
        </div>
    </main>
  );
}

import Image from "next/image";
import { getRequestContext } from "@cloudflare/next-on-pages";
import Link from "next/link";
import { dateParser } from "../lib/dateparser";
import imageFetch from "@/app/lib/imagefetch";
import { Card, CardContent } from "@mui/material";

export const runtime = 'edge'

export default async function Latest() {
    const database = getRequestContext().env.DB;
    const { results } = await database.prepare("SELECT * FROM Blog").all();
    if (!results) {
        throw new Error("No posts available!");
    }
    const latest = results.slice(-1)
    let title: any;
    let url: any;
    let description: any;
    let date: any;
    title = latest[0].title;
    url = latest[0].url;
    description = latest[0].description;
    date = latest[0].date;
    let image = await imageFetch(`${latest[0].url}-cover`);

    return (
        <Link href={`/blog/${latest[0].url}`}>
            <Card sx={{ boxShadow: 3 }} className="!bg-slate-400 hover:shadow-2xl m-2 w-full h-96 mx-auto">
                <CardContent>
                    <Image 
                        src={image}
                        width={350}
                        height={200}
                        alt={title}
                    className="m-auto"/>
                    <strong>{title}</strong>
                    <p>{description}</p>
                    <p>{dateParser(date)}</p>
                    </CardContent>
            </Card>
        </Link>
    )
  }

import Image from "next/image";
import imageFetch from "../lib/imagefetch";

export default async function ImageFetch({ url }: {url: any}) {
    const link = await imageFetch(`${url}-cover`)
    return (
        <Image 
            src={link}
            width={150}
            height={200}
            key={url}
            alt={url}
            className="mx-auto my-1 md:relative md:float-start md:m-1"
        />
    )
}

export default async function imageFetch(link: any) {
    return await getSignedUrl(S3, new GetObjectCommand({Bucket: 'blog', Key: `${link}.webp`}), { expiresIn: 3600 })
}

import { getRequestContext } from "@cloudflare/next-on-pages";
import { dateParser } from "../lib/dateparser";
import Link from "next/link";
import ImageFetch from "./imagefetch";
import { Card, CardContent } from "@mui/material";

export const runtime = 'edge'

export default async function BlogCard() {
    const database = getRequestContext().env.DB;
    const { results } = await database.prepare("SELECT * FROM Blog ORDER BY date DESC LIMIT 6").all();
    
    return results.map((page): JSX.Element => {
        let title: any = page.title
        let description: any = page.description;
        let date: any = page.date;
        let url: any = page.url;
        return (
            <Link href={`/blog/${page.url}`} key={`${page.title}`}>
                <Card sx={{ boxShadow: 3 }} className="!bg-slate-400 hover:shadow-2xl m-2 md:w-full w-[200px] md:min-h-[150px]">
                    <CardContent>
                    <ImageFetch url={url}/>
                        <div className="title">
                            <strong>{title}</strong>
                        </div>
                        <div className="description">
                            <p>{description}</p>
                        </div>
                        <p>{dateParser(date)}</p>
                    </CardContent>
                </Card>
            </Link>
        )
    })
}