Skip to content
New issue

Have a question about this project? # for a free GitHub account to open an issue and contact its maintainers and the community.

#

By clicking “#”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? # to your account

Jump to bottom

Feat reactive page #1

Open
wants to merge 16 commits into
base: main
Choose a base branch
from
Open

Feat reactive page #1

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
16 commits
Select commit Hold shift + click to select a range
8227a86
feat: basic [about] page
KarenChuang Aug 28, 2024
520a2a7
feat: basic [pages] page
KarenChuang Aug 28, 2024
e4efa53
feat:navigator responsive
KarenChuang Aug 29, 2024
2798aff
feat: home page responsive 50%
KarenChuang Sep 1, 2024
558f5e6
feat: home page responsive 80% & fix blog page
KarenChuang Sep 1, 2024
51066c0
fix
KarenChuang Sep 1, 2024
f5137f4
feat: add link
KarenChuang Sep 2, 2024
5800959
update: home page
KarenChuang Sep 2, 2024
c0e5e5d
fix: header style
KarenChuang Sep 2, 2024
eb746cd
fix: blog padding
KarenChuang Sep 2, 2024
e104d45
fix: add xs screen
KarenChuang Sep 3, 2024
163c2e9
fix: Dragonfly size
KarenChuang Sep 4, 2024
77e48f2
style: Reusing Styles
KarenChuang Sep 4, 2024
2f0f30b
fix: header
KarenChuang Sep 4, 2024
efc5f8f
fix: bottom style
KarenChuang Sep 4, 2024
781e764
fix: dragonfly icon
KarenChuang Sep 4, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions src/app.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,8 +8,8 @@
%sveltekit.head%
</head>

<body data-sveltekit-preload-data="hover">
<body data-sveltekit-preload-data="hover" class="min-w-[360px]">
<div style="display: contents">%sveltekit.body%</div>
</body>

</html>
</html>
21 changes: 17 additions & 4 deletions src/routes/+layout.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,25 @@
<script>
import '../app.css';
import '../styles/layout.css';
import Navigator from './navigator.svelte';
import HomeNavigator from './home-navigator.svelte';
import { page } from '$app/stores';
</script>

<div class="bg-background-dark font-code">
<Navigator
class="w-[75rem] mx-auto flex justify-between bg-background-dark -mb-[6.5rem] pt-[2rem] pb-[2rem]"
/>
<div class=" bg-background-dark">
{#if $page.url.pathname === '/'}
<HomeNavigator class="apply-navigator-base apply-navigator-responsive apply-home-navigator" />
{:else}
<Navigator class="apply-navigator-base apply-navigator-responsive apply-regular-navigator" />
{/if}
</div>

<slot />

<div class="bg-[#E7F1BE] w-full h-full flex items-center justify-center">
<div
class="bg-[#E7F1BE] w-[340px] md:w-[1000px] lg:w-[1100px] mx-10 text-center text-background-dark border-t border-dashed border-background-dark pt-6 py-4 mt-20 font-code"
>
© Copyright 2024-, Tonbo IO.
</div>
</div>
149 changes: 71 additions & 78 deletions src/routes/+page.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,93 +1,84 @@
<script>
import '../styles/home.css';

import Dragonfly from './dragonfly.svelte';
import BenchmarkChart from './benchmark-chart.svelte';
</script>

<svelte:head>
<title>Tonbo - an extensible embedded database using Arrow.</title>
</svelte:head>

<div
class="bg-background-dark min-w-[75rem] pt-12 flex selection:bg-background-light selection:text-background-dark font-code"
>
<!-- PART 1 -->
<div class="px-4 apply-container-base xs:px-10 apply-selection font-code">
<div
class="w-[75rem] mx-auto border-l border-r border-t relative border-background-light flex flex-col pb-[6rem]"
class="apply-container-base apply-container-responsive md:p-0 p-3.5 pb-10 border-x-2 border-b-2 border-background-light md:h-[550px]"
>
<div class="mt-[3rem] text-font-light border-b border-background-light flex">
<article
class="w-[16.5rem] ml-[2rem] text-background-light text-[1.5rem] -mr-[4rem] leading-[1.5rem]"
<div class="relative">
<div
class="hidden border-b-[1px] md:block border-background-light text-background-light px-10"
>
<p>
Tonbo incurs minimal cost for inserting and scanning structured data via Apache Arrow.
</p>
</article>
<div class="w-[46rem] h-[33rem] mb-[3rem] flex flex-col justify-between">
<div class="flex justify-end mt-[4rem] -mb-[20rem]">
<div class="md:w-[16.5rem] md:text-[1.5rem] -mr-[4rem] md:leading-[1.5rem] pb-6">
Tonbo incurrs minimal cost to insert and scan structured data.
</div>
</div>
<div
class="border-2 text-5xl border-background-light w-[93%] sm:w-[456px] lg:w-[588px] lg:h-[361px] md:w-[488px] md:h-[361px] text-[#FFFDEC] p-[32px] pb-[48px] pr-2 leading-tight mt-10 mb-12 md:pt-9 md:pl-[104px] md:pr-20 md:absolute md:top-0 md:right-[126px] lg:right-[226px] bg-background-dark"
>
A portable embedded database using Arrow.
</div>
</div>

<div class="relative md:h-[449px]">
<div
class="flex flex-col md:flex-row w-[100px] md:w-[320px] md:justify-between shrink-0 mr-4 md:mr-0 md:absolute lg:right-[226px] md:right-[126px] md:bottom-0"
>
<a href="https://docs.rs/tonbo/latest/tonbo/" target="_blank">
<div
class="w-[36rem] h-[22rem] border text-[3.5rem] border-background-light flex items-center justify-center"
class="apply-button-base apply-border relative mb-4 text-white hover:bg-background-light hover:text-background-dark md:w-[149px]"
>
<div
class="w-[26rem] leading-[4.5rem] h-[19.75rem] flex items-center justify-center mb-[1rem] ml-[1rem]"
>
A portable embedded database using Arrow.
</div>
Read Docs
</div>
</div>

<div class="flex items-end justify-between z-10">
<Dragonfly />
<div class="flex">
<a href="https://docs.rs/tonbo/latest/tonbo/">
<div
class="w-[8rem] h-[3rem] border border-background-light flex items-center justify-center hover:bg-background-light hover:text-background-dark cursor-pointer relative text-[1.5rem] mr-[2rem] select-none"
>
Read Docs
</div>
</a>
<a href="https://github.com/tonbo-io/tonbo/tree/main/examples">
<div
class="w-[8rem] h-[3rem] border border-background-light flex items-center justify-center hover:bg-background-light text-background-dark cursor-pointer relative text-[1.5rem] bg-tonbo-red select-none"
>
Example
</div>
</a>
</a>
<a href="https://github.com/tonbo-io/tonbo/tree/main/examples" target="_blank">
<div
class="apply-button-base apply-border relative hover:bg-background-light text-background-dark bg-[#EF6A21] md:w-[149px]"
>
Example
</div>
</div>
</a>
</div>
<div
class="w-fit h-fit mt-[-130px] absolute right-0 md:absolute top-[-5px] xs:bottom-[-22px] sm:right-20 md:left-[240px] md:top-[260px]"
>
<Dragonfly class="text-[14px] sm:text-[16px] md:text-[17px]" />
</div>
</div>
</div>

<div
class=" p-[28px] apply-container-responsive h-[64px] apply-container-base border-x-2 border-background-light"
></div>
</div>

<div
class=" bg-background-light min-w-[75rem] selection:bg-background-dark selection:text-background-light font-code"
class="p-4 xs:px-10 bg-background-light selection:bg-background-dark selection:text-background-light font-code"
>
<div class="min-h-screen w-[75rem] mx-auto relative flex flex-col">
<div class="columns-2 mt-[3rem] mb-[6rem]">
<div class="border border-background-dark flex flex-col h-[23rem]">
<div class="relative flex flex-col w-full min-h-screen mx-auto apply-container-responsive">
<!-- PART 2 -->
<div class="mt-5 mb-20 md:columns-2">
<div class="flex flex-col border border-background-dark">
<div
class="bg-background-dark h-[3.5rem] text-font-light flex items-center justify-center text-[1.5rem] selection:bg-background-light selection:text-background-dark"
>
Benchmark: range performance
</div>
<pre
class="font-code ml-[2rem] mr-[2rem] mt-[1.5rem] leading-[1.3rem] text-background-dark">
<code class="font-meium">Random range read with column projection:</code>
╔═══════════════════════════════════════════════════════════════╗
║ ║
║ Tonbo | █████████▓▒ | 1666ms ║
║ RocksDB | ██████████████████████▓▒ | 3689ms ║
║ Sled | ███████████████████████▓▒ | 3837ms ║
║ ║
╚═══════════════════════════════════════════════════════════════╝
(lower is better) Latency (pct99)
</pre>
<pre class="ml-[2rem] font-code text-[0.75rem]">
CPU: AMD EPYC 7H12
RAM: 64GB DDR4 2933MHz * 8
DISK: SamSung 970 EVO Plus 4TB
</pre>
<BenchmarkChart />
</div>
<article class="h-[23rem] flex flex-col justify-center ml-[4rem] mr-[2rem]">
<p class="text-[1.5rem] mb-[1rem]">2.2x faster than RocksDB</p>
<article class="md:h-[23rem] mt-5 flex flex-col justify-center md:ml-[4rem] md:mr-[2rem]">
<p class="text-[1.5rem] mb-[1rem] font-semibold text-center md:text-left">
2.2x faster than RocksDB
</p>
<p class="text-[1rem]">
Because of Tonbo's native support for structured data zero-copy loading and projection
pushing down, Tonbo is 2.2x faster than RocksDB.
Expand All @@ -99,46 +90,48 @@ DISK: SamSung 970 EVO Plus 4TB
</article>
</div>

<!-- PART 3 -->
<div
class="bg-background-dark h-[3.5rem] text-font-light flex items-center justify-center text-[1.5rem] selection:bg-background-light selection:text-background-dark"
class="bg-background-dark h-14 text-font-light flex items-center justify-center text-base sm:text-[1.5rem] selection:bg-background-light selection:text-background-dark max-w-[1194px] mx-auto w-full"
>
Just Arrow, Structured, Portable
</div>
<div class="border border-background-dark flex">
<article class="border-r border-background-dark p-[2rem] flex-1">
<p class="text-[1.5rem] mb-[1rem]">Vendor lock-in free</p>
<p class="text-[1rem]">

<div class="flex flex-col md:flex-row border border-background-dark max-w-[1194px] mx-auto">
<article
class="border-b border-dashed apply-article-base md:border-r md:border-b-0 border-background-dark"
>
<p class="apply-heading">Vendor lock-in free</p>
<p class="text-base leading-normal">
Tonbo is built as a thin wrapper over Arrow schema and Parquet format, which means you are
able to use many analytic tools to can fully benefit from the Arrow ecosystem.
</p>
</article>
<article class=" border-background-dark p-[2rem] flex-1">
<p class="text-[1.5rem] mb-[1rem]">Combine agility of KV and convinient of structured</p>
<p class="text-[1rem]">
<article
class="border-b border-dashed apply-article-base md:border-b-0 md:border-r border-background-dark"
>
<p class="apply-heading">Combine agility of KV and convinient of structured</p>
<p class="text-base leading-normal">
Thanks to Rust lifetime, type system and asynchronous, Tonbo allows user to save each
overhead as need with safety: raw data reference, compile-time declared schema, and so on.
And push-down support makes it convenient to query structured data:
<a
href="https://github.com/tonbo-io/tonbo/blob/main/examples/datafusion.rs"
class="underline"
target="_blank"
>
just about several minutes coding to be integrated into SQL engine for example.
</a>
</p>
</article>
<article class="border-l border-background-dark p-[2rem] flex-1">
<p class="text-[1.5rem] mb-[1rem]">From many sources to many targets</p>
<p class="text-[1rem]">
<article class="apply-article-base">
<p class="apply-heading">From many sources to many targets</p>
<p class="text-base leading-normal">
As an embedded database, Tonbo supports customizing runtime and file system, and also it
is designed for running on kinds of target platforms, we will complete official support
WASM / OPFS, Python asyncio and object storages in Sep 2024.
</p>
</article>
</div>
<div
class="h-[4rem] flex items-center justify-center text-center text-background-dark border-t border-background-dark mt-[6rem]"
>
© Copyright 2024-, Tonbo IO.
</div>
</div>
</div>
89 changes: 89 additions & 0 deletions src/routes/about/+page.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,89 @@
<script>
import PageHeader from '../header.svelte';

import 'highlight.js/styles/atom-one-dark.css';
</script>

<div class="bg-[#E7F1BE] font-code">
<div
class="min-h-screen h-fit sm:w-full md:w-[1000px] lg:w-[1200px] m-auto md:border-x-2 md:border-b-2 border-black"
>
<div class="hidden sm:flex sm:w-full md:w-[998px]lg:w-[1198px] m-auto pt-12">
<PageHeader title="About Tonbo" />
</div>

<div class="px-4 xs:px-10 sm:w-[600px] md:w-[800px] sm:px-0 py-6 min-h-full m-auto">
<div>
<h1
class="py-4 my-4 text-2xl border-b-2 border-black border-dashed sm:border-b-0 md:text-xl"
>
About <span class="sm:hidden">Tonbo</span>
</h1>
<p class="mt-[16px]">
Tonbo IO was conceived during my time in ByteDance, 2022. I have observed that existing
data processing infrastructure often requires transferring data to centralized vendors for
storage and analysis, limiting true data ownership. Tonbo IO addresses this challenge by
offering an edge-first embedded database that supports data storage and analysis from
local devices to shared storage services, all in open-source formats.
</p>

<div class="mt-4 sm:w-fit">
<h1 class="py-4 text-2xl border-t-2 border-black border-dashed md:text-xl">Contacts</h1>
<div class="pb-6 border-b-2 border-black border-dashed sm:pr-20 sm:w-content">
<p>
Tzu Gwo:
<a class="underline" href="mailto: guozixing@tonbo.io">guozixing@tonbo.io</a>
</p>
<p>
Zeren Li:
<a class="underline" href="mailto: lizeren@tonbo.io"> lizeren@tonbo.io</a>
</p>
</div>
</div>
<h1 class="py-4 text-2xl border-dashed md:text-xl">Credits</h1>
<div>
<ul class="list-disc list-inside">
<li>
<a href="https://arrow.apache.org/" target="_blank" class="underline">Apache Arrow</a>
/ <a href="https://parquet.apache.org/" target="_blank" class="underline">Parquet</a>:
open-source data / file formats supports storing data to numerous storage services, it
help us avoiding vendor lock-in.
</li>
<li>
<a href="https://github.com/facebook/rocksdb" target="_blank" class="underline"
>RocksDB</a
>: a state-of-art embedded database, RocksDB inspires Tonbo on building a high
performance columnar database on LSM Tree.
</li>
<li>
<a href="https://github.com/skyzh/mini-lsm" target="_blank" class="underline"
>mini-lsm</a
>: an educational project implementing LSM Trees in Rust. The exploration of Rust's
type system and efficient LSM Tree implementation in this project inspired the
abstract type de# Tonbo.
</li>
<li>
<a href="https://github.com/spacejam/sled" target="_blank" class="underline">sled</a>:
an embedded database written in Rust, its API and modular project structure design
impact us.
</li>
<li>
<a href="https://github.com/cberner/redb" target="_blank" class="underline">redb</a>:
an embedded key-value store in Rust, Tonbo built early stage benchmarks upon its
cases.
</li>
<p>
Also thanks to all of Tonbo's <a
href="https://github.com/tonbo-io/tonbo/graphs/contributors"
target="_blank"
class="underline">community contributors</a
>, their support and dedication make this project possible. And thanks to
<a href="https://x.com/CreamQ" target="_blank" class="underline">@Cream Tang</a>, who
designed the web and the logo.
</p>
</ul>
</div>
</div>
</div>
</div>
</div>
Loading