1import React from "react";
2import ReactMarkdown from "react-markdown";
3import { useMarkdownPosts } from "../hooks/useMarkdownPosts";
5const About: React.FC = () => {
6 const { posts, error, loading } = useMarkdownPosts("posts");
8 return (
9 <div style={{ maxWidth: "800px", margin: "0 auto" }}>
10 <h1>About Zia</h1>
12 <p
13 style={{ fontSize: "1.1rem", lineHeight: "1.6", marginBottom: "2rem" }}
14 >
15 Zia is a benchmarking framework for evaluating compression algorithms on
16 numeric array datasets, with a focus on scientific data. It measures
17 compression ratios and performance metrics across various algorithms and
18 datasets.
19 </p>
21 <p>
22 <a
23 href="https://github.com/magland/zia"
24 target="_blank"
25 rel="noopener noreferrer"
26 style={{ color: "#0066cc" }}
27 >
28 View on GitHub
29 </a>
30 </p>
32 <hr />
34 {error ? (
35 <div style={{ color: "red" }}>Error loading content: {error}</div>
36 ) : loading ? (
37 <div>Loading...</div>
38 ) : (
39 <div>
40 {posts.map((post) => (
41 <div
42 key={post.path}
43 className="markdown-content"
44 style={{ marginBottom: "2rem" }}
45 >
46 <div style={{ color: "#666", marginBottom: "1rem" }}>
47 {post.date.toLocaleDateString("en-US", {
48 year: "numeric",
49 month: "long",
50 day: "numeric",
51 })}
52 </div>
53 <ReactMarkdown>{post.content}</ReactMarkdown>
54 {post.path !== posts[posts.length - 1].path && <hr />}
55 </div>
56 ))}
57 </div>
58 )}
59 </div>
60 );
61};
63export default About;