2import axios from "axios";
4import yaml from "yaml";
5import contentYaml from "../content/home-content.yml?raw";
6import { HomeContent, HomeSection } from "../types/home-content";
7import "../components/Button.css";
104f442improve layoutJeremy Magland 10
3e91ba2add home pageJeremy Magland 11const SectionCard: React.FC<{ section: HomeSection }> = ({ section }) => {
12 if (section.external) {
13 return (
14 <div
15 style={{
18 borderRadius: "8px",
19 backgroundColor: "#f9f9f9",
21 flexDirection: "column",
22 height: "100%",
24 >
eba1648submit instructionsJeremy Magland 25 <h2 style={{ fontSize: "1.25rem", marginBottom: "0.5rem" }}>
26 {section.title}
27 </h2>
28 <p style={{ marginBottom: "0.5rem" }}>{section.description}</p>
30 href={section.link}
31 target="_blank"
32 rel="noopener noreferrer"
33 className="soft-button"
36 {section.linkText}
37 </a>
38 </div>
39 );
40 }
bde0876rearrange tabsJeremy Magland 41
43 <div
44 style={{
47 borderRadius: "8px",
48 backgroundColor: "#f9f9f9",
50 flexDirection: "column",
51 height: "100%",
53 >
eba1648submit instructionsJeremy Magland 54 <h2 style={{ fontSize: "1.25rem", marginBottom: "0.5rem" }}>
55 {section.title}
56 </h2>
57 <p style={{ marginBottom: "0.5rem" }}>{section.description}</p>
58 <Link
59 to={section.link}
60 className="soft-button"
61 style={{ marginTop: "auto", alignSelf: "flex-start" }}
62 >
64 </Link>
65 </div>
bde0876rearrange tabsJeremy Magland 68
70 current_dataset: string;
71 current_algorithm: string;
72 completed_count: number;
73 total_count: number;
74 progress_percentage: number;
75 elapsed_time: number;
76 last_update: string;
77 completed_benchmarks: Array<{
78 dataset: string;
79 algorithm: string;
80 compression_ratio: number;
81 encode_time: number;
82 decode_time: number;
83 cache_status: string;
84 }>;
85}
eba1648submit instructionsJeremy Magland 88 const [status, setStatus] = useState<BenchmarkStatus | null>(null);
90 useEffect(() => {
91 const fetchStatus = async () => {
92 try {
93 const response = await axios.get(
94 "https://tempory.net/f/memobin/benchmark_status/current.json",
95 );
96 setStatus(response.data);
97 } catch (error) {
98 console.error("Error fetching benchmark status:", error);
99 }
100 };
102 fetchStatus();
103 }, []);
106 <div style={{ maxWidth: "1200px", margin: "0 auto", padding: "2rem" }}>
108 style={{
109 marginBottom: "2rem",
110 display: "flex",
111 alignItems: "center",
112 gap: "1rem",
113 }}
114 >
115 <img
116 src={`${import.meta.env.BASE_URL}logo.svg`}
117 alt="BenchCompress Logo"
118 style={{ width: "40px", height: "auto" }}
119 />
120 {content.title}
121 </h1>
124 style={{ fontSize: "1.1rem", lineHeight: "1.6", marginBottom: "2rem" }}
125 >
126 {content.description}
127 </p>
130 style={{
131 display: "grid",
132 gap: "2rem",
133 gridTemplateColumns: "repeat(auto-fit, minmax(300px, 1fr))",
134 }}
135 >
136 {Object.entries(content.sections).map(([key, section]) => (
137 <SectionCard key={key} section={section} />
138 ))}
139 </div>
142 style={{
143 margin: "3rem 0",
144 border: "none",
145 borderTop: "1px solid #eaeaea",
146 }}
147 />
150 style={{ textAlign: "center", color: "#666", fontSize: "0.9rem" }}
151 >
152 <p>
156 <>
157 <div
158 style={{
159 margin: "1rem 0",
160 padding: "0.5rem",
161 border: "1px solid #eaeaea",
162 borderRadius: "4px",
163 display: "inline-block",
164 }}
165 >
166 Last benchmark run:{" "}
167 {new Date(status.last_update).toLocaleString()}
168 <br />
169 Status:{" "}
170 {status.progress_percentage === 100
171 ? "Completed"
172 : "In Progress"}{" "}
173 ({status.completed_count}/{status.total_count} benchmarks)
174 </div>
175 <br />
176 </>
177 )}
179 <a
180 href="https://github.com/magland/benchcompress/blob/main/LICENSE"
181 target="_blank"
182 rel="noopener noreferrer"
183 style={{ color: "#666", textDecoration: "underline" }}
186 </a>
187 </p>
188 </footer>
190 );
191}