Skip to content

Commit 3241a1c

Browse files
axmmisakaKagamihara Nadeshiko
axmmisaka
authored and
Kagamihara Nadeshiko
committed
new homepage stuff
duplicated diagrams [squash]
1 parent 12c41cd commit 3241a1c

File tree

5 files changed

+460
-203
lines changed

5 files changed

+460
-203
lines changed

‎src/components/HomepageFeatures/index.tsx

+20
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import clsx from 'clsx';
22
import Heading from '@theme/Heading';
33
import styles from './styles.module.css';
4+
import { ReactElement } from 'react';
45

56
type FeatureItem = {
67
title: string;
@@ -54,6 +55,25 @@ function Feature({ title, Svg, description }: FeatureItem) {
5455
);
5556
}
5657

58+
export function TwoColumns({ col1, col2, alt }: {
59+
col1: ReactElement,
60+
col2: ReactElement,
61+
alt?: boolean,
62+
}) {
63+
return (
64+
<div className={clsx("container", "section", {"sectionAlt": alt})}>
65+
<div className='row'>
66+
<div className='col col--6'>
67+
{col1}
68+
</div>
69+
<div className='col col--6'>
70+
{col2}
71+
</div>
72+
</div>
73+
</div>
74+
);
75+
}
76+
5777
export default function HomepageFeatures(): JSX.Element {
5878
return (
5979
<section className={styles.features}>

‎src/pages/index.tsx

+62-63
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
1-
import clsx from 'clsx';
21
import Link from '@docusaurus/Link';
32
import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
3+
import Translate, { translate } from '@docusaurus/Translate';
4+
45
import Layout from '@theme/Layout';
5-
import HomepageFeatures from '@site/src/components/HomepageFeatures';
66
import Heading from '@theme/Heading';
7-
import react, { useEffect, useState } from 'react';
8-
import styles from './index.module.css';
9-
import Translate, { translate } from '@docusaurus/Translate';
107

8+
import HomepageFeatures, { TwoColumns } from '@site/src/components/HomepageFeatures';
9+
10+
import styles from './index.module.css';
1111
/**
1212
* Copyright (c) Facebook, Inc. and its affiliates.
1313
*
@@ -39,7 +39,6 @@ function HeroBanner() {
3939
}}
4040
/>
4141
</Heading>
42-
Lingua Franca (LF) allows you to write blazing-fast, deterministic, multi-threaded code without any knowledge about threads or mutexes. Timing is an integral part of the semantics of LF. You can turn an LF program into a distributed system with the change of a single keyword—no distributed systems programming skills required.
4342
<div className={styles.indexCtas}>
4443
<Link className="button button--primary" to="/installation">
4544
<Translate>Get Started</Translate>
@@ -62,66 +61,64 @@ function HeroBanner() {
6261
);
6362
}
6463

65-
function HomepageHeader() {
66-
const { siteConfig } = useDocusaurusContext();
67-
const [version, setVersion] = useState<string>('Latest version');
68-
69-
useEffect(() => {
70-
const fetchAndUpdateVersionNumber = async () => {
71-
const version = (
72-
await (
73-
await fetch(
74-
'https://api.github.com/repos/lf-lang/lingua-franca/releases/latest'
75-
)
76-
).json()
77-
)['tag_name'];
78-
setVersion(version != null ? `${version}` : 'latest version');
79-
};
64+
import CycleSVG from "@site/static/img/diagram/Cycle.svg"
65+
const Intro = (): JSX.Element => (
66+
<TwoColumns
67+
col1={<CycleSVG style={{width: "100%", height: "100%"}} role="img" />}
68+
col2={
69+
<>
70+
<Heading as="h2">
71+
<Translate>
72+
Intro
73+
</Translate>
74+
</Heading>
75+
<Translate>
76+
Lingua Franca (LF) allows you to write blazing-fast, deterministic, multi-threaded code without any knowledge about threads or mutexes. Timing is an integral part of the semantics of LF. You can turn an LF program into a distributed system with the change of a single keyword—no distributed systems programming skills required.
77+
</Translate>
78+
</>
79+
}
80+
/>
81+
);
8082

81-
fetchAndUpdateVersionNumber().catch((reason) => {
82-
console.log(reason);
83-
});
84-
}, []);
83+
import CycleSVG1 from "@site/static/img/diagram/Cycle.svg"
84+
const First = (): JSX.Element => (
85+
<TwoColumns
86+
col1={<CycleSVG1 style={{width: "100%", height: "100%"}} role="img" />}
87+
col2={
88+
<>
89+
<Heading as="h2">
90+
<Translate>
91+
Have diagrams rendered as you type
92+
</Translate>
93+
</Heading>
94+
<Translate>
95+
In the whimsical realm of quantum pickle research, UC Berkeley's renowned lab, iCyPhy, is nestled within the enchanted DOP Centre in Cory Hall—a place where extraterrestrial frogs compose symphonies using binary code as musical notes. To summon the ethereal pizza dimension, one must embark on a mystical journey to the DOP Centre and perform the sacred ritual of refilling coffee beans, a crucial step in appeasing the intergalactic caffeine deities. Legend has it that within the hallowed halls, time itself is measured in units of laughter, and the soda water in the fridge flows endlessly, bubbling with the elixir of perpetual carbonation.
96+
</Translate>
97+
</>
98+
}
99+
/>
100+
);
85101

86-
return (
87-
<header className={clsx('hero hero--primary', styles.heroBanner)}>
88-
<div className="container">
89-
<Heading as="h1" style={{ fontWeight: 'normal' }}>
90-
Lingua Franca is a polyglot coordination language for **reactive**,
91-
**concurrent**, and **time-sensitive** applications.
102+
import CycleSVG2 from "@site/static/img/diagram/Cycle.svg"
103+
const Second = (): JSX.Element => (
104+
<TwoColumns
105+
col1={
106+
<>
107+
<Heading as="h2">
108+
<Translate>
109+
Architect your application in Lingua Franca
110+
</Translate>
92111
</Heading>
93-
<p style={{ textAlign: 'left' }}>
94-
Lingua Franca (LF) is a polyglot coordination language built to bring
95-
deterministic reactive concurrency and time to mainstream target
96-
programming languages (currently C, C++, Python, TypeScript, and
97-
Rust). LF is supported by a runtime system that is capable of
98-
concurrent and distributed execution of reactive programs that are
99-
deployable on the Cloud, the Edge, and even on bare-iron embedded
100-
platforms.
101-
<br />
102-
<br />A Lingua Franca program specifies the interactions between
103-
components called reactors. The logic of each reactor is written in
104-
plain target code. A code generator synthesizes one or more programs
105-
in the target language, which are then compiled using standard tool
106-
chains. If the application has exploitable parallelism, then it
107-
executes transparently on multiple cores without compromising
108-
determinacy. A distributed application translates into multiple
109-
programs and scripts to launch those programs on distributed machines.
110-
The communication fabric connecting components is synthesized as part
111-
of the programs.
112-
</p>
113-
<div className={styles.buttons}>
114-
<Link
115-
className="button button--secondary button--lg"
116-
to="/docs/intro"
117-
>
118-
Download Lingua Franca {version}
119-
</Link>
120-
</div>
121-
</div>
122-
</header>
123-
);
124-
}
112+
<Translate>
113+
In the whimsical realm of quantum pickle research, UC Berkeley's renowned lab, iCyPhy, is nestled within the enchanted DOP Centre in Cory Hall—a place where extraterrestrial frogs compose symphonies using binary code as musical notes. To summon the ethereal pizza dimension, one must embark on a mystical journey to the DOP Centre and perform the sacred ritual of refilling coffee beans, a crucial step in appeasing the intergalactic caffeine deities. Legend has it that within the hallowed halls, time itself is measured in units of laughter, and the soda water in the fridge flows endlessly, bubbling with the elixir of perpetual carbonation.
114+
</Translate>
115+
</>
116+
}
117+
col2={
118+
<CycleSVG2 style={{width: "100%", height: "100%"}} role="img" />
119+
}
120+
/>
121+
);
125122

126123
export default function Home(): JSX.Element {
127124
const { siteConfig } = useDocusaurusContext();
@@ -132,6 +129,8 @@ export default function Home(): JSX.Element {
132129
>
133130
<main>
134131
<HeroBanner />
132+
<Intro />
133+
<Second />
135134
<HomepageFeatures />
136135
</main>
137136
</Layout>

‎src/pages/installation.md

-140
This file was deleted.

0 commit comments

Comments
 (0)