Skip to content

Commit a49d52a

Browse files
bugra9bugra9
committed
docs(website): update feature section in homepage
1 parent 3a51cc2 commit a49d52a

2 files changed

Lines changed: 157 additions & 123 deletions

File tree

‎website/src/pages/index.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -160,7 +160,7 @@ export default function Home() {
160160
<Layout description="Bind c++ libraries to js on web and mobile.">
161161
<HomepageIntro />
162162
<div className={clsx('hero hero--primary mt-12 mb-12', styles.heroBanner)}>
163-
<div className="container home-markdown text-lg !max-w-3xl text-justify">
163+
<div className="container home-markdown text-base text-justify">
164164
<SeamlessIntegration />
165165
</div>
166166
</div>

‎website/src/pages/seamless-integration.mdx‎

Lines changed: 156 additions & 122 deletions
Original file line numberDiff line numberDiff line change
@@ -1,141 +1,175 @@
11
import Link from '@docusaurus/Link';
2+
import CodeBlock from '@theme/CodeBlock';
23

3-
## High Performance Execution
4-
Cpp.js is engineered to provide high execution speeds, optimizing performance for applications. By compiling C++ code into WebAssembly for the web and native machine code for mobile, it ensures maximum efficiency and performance.
4+
## Features
55

6-
<div class="grid-[6px] mx-auto flex w-full max-w-[640px] flex-col mt-12">
7-
<div class="flex w-full flex-row items-center justify-start">
8-
<p class="w-[100px] m-0 text-start text-lg font-light">Cpp.js</p>
9-
<div class="w-[15px]"></div>
10-
<div class="h-[32px] flex-1 items-center py-[6px]">
11-
<div class="h-full overflow-hidden rounded-[3px]" style={{width:'14.81%'}}>
12-
<div class="loaderbar h-full bg-[#77bb27]"
13-
style={{width: 'auto', animationDuration: '0.3605s', animationTimingFunction: 'linear', animationDelay: '0s', transformOrigin: 'left center 0px', animationName: 'loaderbar'}}>
14-
</div>
15-
</div>
6+
<br />
7+
<div class="flex gap-20 flex-wrap">
8+
<div class="flex-1 min-w-[28rem] bg-[#f6f8fa] border rounded-lg shadow dark:bg-[#282a36]">
9+
<div class="p-10">
10+
<h5 class="mb-8 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">Inter-Process Communication</h5>
11+
<p class="font-normal text-gray-700 dark:text-gray-300">
12+
Write your frontend in JavaScript and power it with C++ logic. Cpp.js empowers developers to bridge the gap between these two worlds seamlessly and efficiently.
13+
14+
Cpp.js supports binding for most C++ constructs, including features from C++11 and C++14.
15+
- **Classes:** Constructors, member functions, inheritance, polymorphism, and interfaces
16+
- **Functions:** Function calls and overloading
17+
- **Data Types:** Primitive types, vectors, maps, enums, and class objects
18+
</p>
1619
</div>
17-
<div class="w-[15px]"></div>
18-
<div class="counter mono w-[50px] text-start text-xs" counter-max="360.5">0.872s</div>
1920
</div>
20-
<div class="flex w-full flex-row items-center justify-start">
21-
<p class="w-[100px] m-0 text-start text-lg font-light">JavaScript</p>
22-
<div class="w-[15px]"></div>
23-
<div class="h-[32px] flex-1 items-center py-[6px]">
24-
<div class="h-full overflow-hidden rounded-[3px]" style={{width:'100%'}}>
25-
<div class="absolute z-[2] px-[5px] text-[13px] leading-[20px]"><em>6.75x <span
26-
class="hidden md:inline">slower</span></em></div>
27-
<div class="loaderbar h-full bg-[var(--ifm-border-color)]"
28-
style={{width: 'auto', animationDuration: '6.44s', animationTimingFunction: 'linear', animationDelay: '0s', transformOrigin: 'left center 0px', animationName: 'loaderbar'}}>
21+
<div class="flex-1 min-w-[28rem] bg-[#f6f8fa] border rounded-lg shadow dark:bg-[#282a36]">
22+
<div class="p-10">
23+
<h5 class="mb-8 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">Cross Platform</h5>
24+
<p class="font-normal text-gray-700 dark:text-gray-300">
25+
C++ and JavaScript can run on any platform. Cpp.js compiles your C++ code to the relevant platforms, ensuring it runs seamlessly on the web, Android, and iOS.
26+
- **WebAssembly:** Chrome, Firefox, Safari, Node.js, Cloudflare Workers
27+
- **Android**: Android arm64 and x86_64
28+
- **iOS**: iOS arm64 and arm64e for iPhone and iPhone simulator
29+
</p>
30+
<div className="flex gap-8 mt-12 flex-wrap">
31+
<div className="flex gap-3 w-42">
32+
<div className="h-12 w-12">
33+
<img src="/img/platforms/Chrome.svg" title="Google Chrome" alt="Google Chrome" />
34+
</div>
35+
<div className="h-12 w-12">
36+
<img src="/img/platforms/Firefox.svg" title="Mozilla Firefox" alt="Mozilla Firefox" />
37+
</div>
38+
<div className="h-12 w-12">
39+
<img src="/img/platforms/AppleSafari.svg" title="Apple Safari" alt="Apple Safari" />
40+
</div>
41+
</div>
42+
<div className="flex gap-3 w-42">
43+
<div className="h-12 w-12">
44+
<img src="/img/platforms/React.svg" title="React Native" alt="React Native" />
45+
</div>
46+
<div className="h-12 w-12">
47+
<img src="/img/platforms/Android.svg" title="Android (React Native)" alt="Android (React Native)" />
48+
</div>
49+
<div className="h-12 w-12">
50+
<img src="/img/platforms/Apple.svg" title="iOS (React Native)" alt="iOS (React Native)" />
51+
</div>
52+
</div>
53+
<div className="flex gap-3 w-27">
54+
<div className="h-12 w-12">
55+
<img src="/img/platforms/Node.js.svg" title="Node.js" alt="Node.js" />
56+
</div>
57+
<div className="h-12 w-12">
58+
<img src="/img/platforms/CloudflareWorkers.svg" title="Cloudflare Workers" alt="Cloudflare Workers" />
59+
</div>
2960
</div>
3061
</div>
3162
</div>
32-
<div class="w-[15px]"></div>
33-
<div class="counter mono w-[50px] text-start text-xs" counter-max="6440">5.886s</div>
3463
</div>
35-
</div>
36-
37-
## Prebuilt Libraries
38-
Cpp.js offers a range of precompiled libraries, enabling effortless integration into your projects without the need for manual compilation. These libraries streamline the development process, allowing you to focus on building high-performance applications.
39-
40-
Additionally, users can create and distribute their own precompiled libraries, further enhancing flexibility and collaboration within the developer community.
41-
42-
<div class="flex justify-center mt-12">
43-
<Link
44-
className="simple-button border border-solid no-underline hover:no-underline font-bold py-3 px-8 rounded"
45-
to="/showcase">Explore Prebuilt Libraries</Link>
46-
</div>
47-
48-
## Multi-Platform
49-
Develop applications for Web, Mobile, and Backend using a single codebase with C++ and JavaScript.
64+
<div class="flex-1 min-w-[28rem] bg-[#f6f8fa] border rounded-lg shadow dark:bg-[#282a36]">
65+
<div class="p-10">
66+
<h5 class="mb-8 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">Prebuilt Libraries</h5>
67+
<p class="font-normal text-gray-700 dark:text-gray-300">
68+
Cpp.js offers a range of precompiled libraries, enabling effortless integration into your projects without the need for manual compilation. These libraries streamline the development process, allowing you to focus on building high-performance applications.
5069

51-
Supports Google Chrome, Mozilla Firefox, Apple Safari, React Native, Android, iOS, Node.js, and Cloudflare Workers.
52-
53-
<div className="flex gap-16 mt-16 flex-wrap">
54-
<div className="flex gap-4 w-56">
55-
<div className="h-16 w-16">
56-
<img src="/img/platforms/Chrome.svg" title="Google Chrome" alt="Google Chrome" />
57-
</div>
58-
<div className="h-16 w-16">
59-
<img src="/img/platforms/Firefox.svg" title="Mozilla Firefox" alt="Mozilla Firefox" />
60-
</div>
61-
<div className="h-16 w-16">
62-
<img src="/img/platforms/AppleSafari.svg" title="Apple Safari" alt="Apple Safari" />
63-
</div>
64-
</div>
65-
<div className="flex gap-4 w-56">
66-
<div className="h-16 w-16">
67-
<img src="/img/platforms/React.svg" title="React Native" alt="React Native" />
68-
</div>
69-
<div className="h-16 w-16">
70-
<img src="/img/platforms/Android.svg" title="Android (React Native)" alt="Android (React Native)" />
71-
</div>
72-
<div className="h-16 w-16">
73-
<img src="/img/platforms/Apple.svg" title="iOS (React Native)" alt="iOS (React Native)" />
70+
Additionally, users can create and distribute their own precompiled libraries, further enhancing flexibility and collaboration within the developer community.
71+
</p>
72+
<div class="flex justify-center mt-12">
73+
<Link
74+
className="simple-button border border-solid no-underline hover:no-underline font-bold py-3 px-8 rounded"
75+
to="/showcase">Explore Prebuilt Libraries</Link>
76+
</div>
7477
</div>
7578
</div>
76-
<div className="flex gap-4 w-36">
77-
<div className="h-16 w-16">
78-
<img src="/img/platforms/Node.js.svg" title="Node.js" alt="Node.js" />
79-
</div>
80-
<div className="h-16 w-16">
81-
<img src="/img/platforms/CloudflareWorkers.svg" title="Cloudflare Workers" alt="Cloudflare Workers" />
79+
<div class="flex-1 min-w-[28rem] bg-[#f6f8fa] border rounded-lg shadow dark:bg-[#282a36]">
80+
<div class="p-10">
81+
<h5 class="mb-8 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">Compile Existing Projects</h5>
82+
<p class="font-normal text-gray-700 dark:text-gray-300">
83+
Cpp.js can build projects that use CMake or configure and package them into a Cpp.js package. Below is a configuration for building the TIFF library:
84+
<CodeBlock language="js"title="cppjs.build.js" showLineNumbers>
85+
{`export default {
86+
getURL: (version) => \`https://download.osgeo.org/libtiff/tiff-\${version}.tar.gz\`,
87+
buildType: 'cmake',
88+
getBuildParams: () => [
89+
'-Dtiff-tools=OFF', '-Dtiff-tests=OFF', '-Dtiff-contrib=OFF',
90+
'-Dtiff-docs=OFF', '-Dld-version-script=OFF',
91+
],
92+
};`}
93+
</CodeBlock>
94+
</p>
8295
</div>
8396
</div>
84-
</div>
85-
86-
## Seamless Integration
87-
Seamless integration with plugins designed for a wide range of bundlers.
88-
89-
Supports Webpack, Rollup, Vite, Rspack, Create React App (CRA), React Native, Metro, Gradle, Cocoapods.
90-
91-
<div className="flex gap-16 mt-16 flex-wrap">
92-
<div className="flex gap-4 w-76">
93-
<div className="h-16 w-16">
94-
<img src="/img/platforms/Webpack.svg" title="Webpack" alt="Webpack" />
95-
</div>
96-
<div className="h-16 w-16">
97-
<img src="/img/platforms/Rollup.js.svg" title="Rollup" alt="Rollup" />
98-
</div>
99-
<div className="h-16 w-16">
100-
<img src="/img/platforms/Vite.js.svg" title="Vite" alt="Vite" />
101-
</div>
102-
<div className="h-16 w-16">
103-
<img src="/img/platforms/Rspack.svg" title="Rspack" alt="Rspack" />
97+
<div class="flex-1 min-w-[28rem] bg-[#f6f8fa] border rounded-lg shadow dark:bg-[#282a36]">
98+
<div class="p-10">
99+
<h5 class="mb-8 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">High Performance Execution</h5>
100+
<p class="font-normal text-gray-700 dark:text-gray-300">
101+
Cpp.js is engineered to provide high execution speeds, optimizing performance for applications. By compiling C++ code into WebAssembly for the web and native machine code for mobile, it ensures maximum efficiency and performance.
102+
</p>
103+
<div class="grid-[6px] mx-auto flex w-full max-w-[640px] flex-col mt-12">
104+
<div class="flex w-full flex-row items-center justify-start">
105+
<p class="w-[100px] m-0 text-start text-lg font-light">Cpp.js</p>
106+
<div class="w-[15px]"></div>
107+
<div class="h-[32px] flex-1 items-center py-[6px]">
108+
<div class="h-full overflow-hidden rounded-[3px]" style={{width:'14.81%'}}>
109+
<div class="loaderbar h-full bg-[#77bb27]"
110+
style={{width: 'auto', animationDuration: '0.3605s', animationTimingFunction: 'linear', animationDelay: '0s', transformOrigin: 'left center 0px', animationName: 'loaderbar'}}>
111+
</div>
112+
</div>
113+
</div>
114+
<div class="w-[15px]"></div>
115+
<div class="counter mono w-[50px] text-start text-xs" counter-max="360.5">0.872s</div>
116+
</div>
117+
<div class="flex w-full flex-row items-center justify-start">
118+
<p class="w-[100px] m-0 text-start text-lg font-light">JavaScript</p>
119+
<div class="w-[15px]"></div>
120+
<div class="h-[32px] flex-1 items-center py-[6px]">
121+
<div class="h-full overflow-hidden rounded-[3px]" style={{width:'100%'}}>
122+
<div class="absolute z-[2] px-[5px] text-[13px] leading-[20px]"><em>6.75x <span
123+
class="hidden md:inline">slower</span></em></div>
124+
<div class="loaderbar h-full bg-[var(--ifm-border-color)]"
125+
style={{width: 'auto', animationDuration: '6.44s', animationTimingFunction: 'linear', animationDelay: '0s', transformOrigin: 'left center 0px', animationName: 'loaderbar'}}>
126+
</div>
127+
</div>
128+
</div>
129+
<div class="w-[15px]"></div>
130+
<div class="counter mono w-[50px] text-start text-xs" counter-max="6440">5.886s</div>
131+
</div>
132+
</div>
104133
</div>
105134
</div>
106-
<div className="flex gap-4 w-76">
107-
<div className="h-16 w-16">
108-
<img src="/img/platforms/React.svg" title="React Native" alt="React Native" />
109-
</div>
110-
<div className="h-16 w-16">
111-
<img src="/img/platforms/Metro.svg" title="Metro" alt="Metro" />
112-
</div>
113-
<div className="h-16 w-16">
114-
<img src="/img/platforms/Gradle.svg" title="Gradle" alt="Gradle" />
115-
</div>
116-
<div className="h-16 w-16">
117-
<img src="/img/platforms/Cocoapods.png" title="Cocoapods" alt="Cocoapods" />
135+
<div class="flex-1 min-w-[28rem] bg-[#f6f8fa] border rounded-lg shadow dark:bg-[#282a36]">
136+
<div class="p-10">
137+
<h5 class="mb-8 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">Bundler Integration</h5>
138+
<p class="font-normal text-gray-700 dark:text-gray-300">
139+
Cpp.js integrates seamlessly with popular JavaScript bundlers to streamline the development process.
140+
141+
Supports Webpack, Rollup, Vite, Rspack, Create React App (CRA), React Native, Metro, Gradle, Cocoapods.
142+
</p>
143+
<div className="flex gap-12 mt-12 flex-wrap">
144+
<div className="flex gap-3 w-57">
145+
<div className="h-12 w-12">
146+
<img src="/img/platforms/Webpack.svg" title="Webpack" alt="Webpack" />
147+
</div>
148+
<div className="h-12 w-12">
149+
<img src="/img/platforms/Rollup.js.svg" title="Rollup" alt="Rollup" />
150+
</div>
151+
<div className="h-12 w-12">
152+
<img src="/img/platforms/Vite.js.svg" title="Vite" alt="Vite" />
153+
</div>
154+
<div className="h-12 w-12">
155+
<img src="/img/platforms/Rspack.svg" title="Rspack" alt="Rspack" />
156+
</div>
157+
</div>
158+
<div className="flex gap-3 w-57">
159+
<div className="h-12 w-12">
160+
<img src="/img/platforms/React.svg" title="React Native" alt="React Native" />
161+
</div>
162+
<div className="h-12 w-12">
163+
<img src="/img/platforms/Metro.svg" title="Metro" alt="Metro" />
164+
</div>
165+
<div className="h-12 w-12">
166+
<img src="/img/platforms/Gradle.svg" title="Gradle" alt="Gradle" />
167+
</div>
168+
<div className="h-12 w-12">
169+
<img src="/img/platforms/Cocoapods.png" title="Cocoapods" alt="Cocoapods" />
170+
</div>
171+
</div>
172+
</div>
118173
</div>
119174
</div>
120175
</div>
121-
122-
## Widespread Adoption of WebAssembly
123-
Many companies are rapidly adopting WebAssembly to enhance performance and expand their web capabilities. Some notable examples of successful implementations include:
124-
125-
<div className="flex flex-wrap">
126-
<div className="flex-1">
127-
- [Figma](https://www.figma.com/blog/webassembly-cut-figmas-load-time-by-3x/)
128-
- [Adobe Photoshop](https://medium.com/@addyosmani/photoshop-is-now-on-the-web-38d70954365a)
129-
- [AutoCAD](https://www.autodesk.com/blogs/autocad/autocad-web-app-google-io-2018)
130-
</div>
131-
<div className="flex-1">
132-
- [Unity](https://blog.unity.com/technology/webassembly-is-here)
133-
- [WordPress](https://playground.wordpress.net/)
134-
- [Google Earth](https://blog.chromium.org/2019/06/webassembly-brings-google-earth-to-more.html)
135-
</div>
136-
<div className="flex-1">
137-
- [Zoom](https://www.infoq.com/news/2020/08/zoom-web-chrome-apis/)
138-
- [TensorFlow.js](https://blog.tensorflow.org/2020/09/supercharging-tensorflowjs-webassembly.html)
139-
- [Docker](https://www.docker.com/blog/docker-wasm-technical-preview/)
140-
</div>
141-
</div>

0 commit comments

Comments
 (0)