Skip to content

Commit a83fc1e

Browse files
lhstrhlhstrh
authored
Merge pull request #23 from axmmisaka/landing-page
Adjustments to the landing page
2 parents d1d640d + 059dee8 commit a83fc1e

27 files changed

+2415
-917
lines changed

‎blog/2023-12-11-docusaurus.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ We have a new website! Most importantly, this website is the home of our documen
99

1010
After careful consideration, we realized that our original website had become overly intricate to maintain due to its numerous customizations and dependencies. Writing comprehensive documentation is already a challenging and time-consuming task, and we were keen on avoiding additional complexity that could hinder our progress. Additionally, we had a wishlist of new features, including the ability to version our documentation, incorporate a blog page, and provide support for [MDX](https://mdxjs.com/). In pursuit of solutions, we explored various options.
1111

12-
![Docusaurus Logo](https://docusaurus.io/img/docusaurus_keytar.svg)
12+
![LinguaFrancasaurus](../static/img/blog/lf-and-docusaurus.svg)
1313

1414
Fortunately, we discovered a framework that encompassed all the features we desired: [Docusaurus](https://docusaurus.io/). The adoption of this framework allowed us to streamline our infrastructure significantly. Remarkably, we were able to retain essential functionalities, such as our [Algolia](https://www.algolia.com)-based search bar and Markdown-based documentation pages, which are now more accessible for reading and editing.
1515

‎blog/2023-12-15-release-lingo.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ authors: [tassilo, lhstrh]
55
tags: [lingo, lingua franca, packaging, build tool]
66
---
77

8-
![Test](../static/img/blog/lingo-release-post.png)
8+
![Banner](../static/img/blog/lingo-release-post.png)
99

1010
Programming languages like Python, Rust, or JavaScript are popular not only because of particular language features, but also thanks to the quality of the tools and packages they offer access to.
1111
A good and mature ecosystem includes features such as developer support, mainly through IDEs or LSPs. Lingua Franca already shines in this area with its VSCode integration that offers functionality like code highlighting, error handling, build support, and diagram synthesis. Another important aspect of a modern language's ecosystem concerns package management. Although it is possible to import reactors from files in the local file system, support for packaging in Lingua Franca is still in its infancy.

‎docusaurus.config.ts

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -66,8 +66,9 @@ const config: Config = {
6666
navbar: {
6767
logo: {
6868
alt: 'The Lingua Franca Logo',
69-
src: 'img/lf-forlight.svg',
70-
srcDark: "img/lf-fordark.svg",
69+
src: 'img/lf-forlight-mono.svg',
70+
srcDark: "img/lf-fordark-mono.svg",
71+
style: {marginLeft: "20px"},
7172
},
7273
items: [
7374
{
@@ -81,8 +82,10 @@ const config: Config = {
8182
{to: '/community', label: 'Community', position: 'left'},
8283
{
8384
href: 'https://github.com/lf-lang/',
84-
label: 'GitHub',
8585
position: 'right',
86+
// https://github.com/facebook/docusaurus/blob/61116e2ad6f675d0ba1abef98484712b14834bdb/website/docusaurus.config.ts#L615-L620
87+
className: "header-github-link",
88+
'aria-label': 'GitHub repository',
8689
},
8790
],
8891
},

‎src/components/HomepageFeatures/index.tsx

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@ const FeatureList: FeatureItem[] = [
2525
),
2626
},
2727
{
28-
title: "Built-In Timing Semantics",
28+
title: "Built-in Timing Semantics",
2929
Svg: Timing,
3030
description: (
3131
<Translate>
@@ -68,10 +68,12 @@ export function TwoColumns({
6868
alt?: boolean;
6969
}) {
7070
return (
71-
<div className={clsx("container", "section", { sectionAlt: alt })}>
72-
<div className="row">
73-
<div className="col col--6">{col1}</div>
74-
<div className="col col--6">{col2}</div>
71+
<div className={clsx("section", { sectionAlt: alt })}>
72+
<div className="container">
73+
<div className="row">
74+
<div className="col col--6">{col1}</div>
75+
<div className="col col--6">{col2}</div>
76+
</div>
7577
</div>
7678
</div>
7779
);

‎src/components/HomepageFeatures/styles.module.css

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,6 @@
66
}
77

88
.featureSvg {
9-
height: 400px;
10-
width: 400px;
9+
height: 250px;
10+
width: 250px;
1111
}

‎src/components/HomepageSlider/codes.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ export const main: JSX.Element = (<pre
1919
</span>
2020
<br />
2121
<span className="line">
22-
<span style={{ color: "#545454", fontStyle: "italic" }}>
22+
<span style={{ color: "#242526", fontStyle: "italic" }}>
2323
{" "}// Instantiate two Player reactors here
2424
</span>
2525
</span>
@@ -49,7 +49,7 @@ export const main: JSX.Element = (<pre
4949
<span className="line" />
5050
<br />
5151
<span className="line">
52-
<span style={{ color: "#545454", fontStyle: "italic" }}>
52+
<span style={{ color: "#242526", fontStyle: "italic" }}>
5353
{" "}// Make connections between them
5454
</span>
5555
</span>

‎src/components/HomepageSlider/index.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ import { main, click, target } from './codes';
1010

1111
const titles = [
1212
<Translate>Architect your application in Lingua Franca</Translate>,
13-
<Translate>Have diagrams rendered as you type</Translate>,
13+
<Translate>Have interactive diagrams rendered as you type</Translate>,
1414
<Translate>Write reactive code in the language you like</Translate>,
1515
];
1616

@@ -47,7 +47,7 @@ const codes = [
4747
export const CodeContainer = ({
4848
className,
4949
}: {
50-
className: string;
50+
className?: string;
5151
}): JSX.Element => {
5252
const [page, setPage] = useState(0);
5353
const refs = [useRef(null), useRef(null), useRef(null)] as (React.LegacyRef<HTMLDivElement> | undefined)[];

‎src/components/HomepageSlider/styles.module.css

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,9 @@
11
.codeContainer {
2-
min-width: 600px;
3-
height: 150px;
4-
background-color: #10425d;
2+
height: auto;
3+
background-color: #38546c;
54
font-size: 1rem;
65
border-radius: 8px;
7-
padding: 0 !important;
6+
padding: 0;
87

98
position: relative;
109
}
@@ -15,7 +14,7 @@
1514
font-size: 1.2rem;
1615
color: white;
1716
background-color: #242526;
18-
padding-left: 1rem !important;
17+
padding-left: 1rem;
1918
}
2019

2120
.codeAbove {

‎src/css/custom.css

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -42,3 +42,23 @@
4242
.sectionAlt {
4343
background-color: var(--ifm-color-emphasis-100);
4444
}
45+
46+
/* https://github.com/facebook/docusaurus/blob/61116e2ad6f675d0ba1abef98484712b14834bdb/website/src/css/custom.css#L74C1-L90C2 */
47+
48+
.header-github-link:hover {
49+
opacity: 0.6;
50+
}
51+
52+
.header-github-link::before {
53+
content: '';
54+
width: 24px;
55+
height: 24px;
56+
display: flex;
57+
background: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12'/%3E%3C/svg%3E")
58+
no-repeat;
59+
}
60+
61+
[data-theme='dark'] .header-github-link::before {
62+
background: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='white' d='M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12'/%3E%3C/svg%3E")
63+
no-repeat;
64+
}

‎src/pages/index.module.css

Lines changed: 40 additions & 141 deletions
Original file line numberDiff line numberDiff line change
@@ -3,148 +3,25 @@
33
* and scoped locally.
44
*/
55

6-
.heroBanner {
7-
padding: 4rem 0;
8-
text-align: center;
9-
position: relative;
10-
overflow: hidden;
11-
}
12-
136
.subHero {
147
color: var(--ifm-color-secondary-lightest);
158
font-size: 1.2rem;
169
}
1710

18-
@media screen and (max-width: 996px) {
19-
.heroBanner {
20-
padding: 2rem;
21-
}
22-
}
23-
24-
.buttons {
25-
display: flex;
26-
align-items: center;
27-
justify-content: center;
28-
}
29-
30-
.section {
31-
padding: 40px 0;
32-
}
33-
34-
.sectionAlt {
35-
background-color: var(--ifm-color-emphasis-100);
36-
}
37-
38-
.sectionInner {
39-
margin: 0 auto;
40-
}
41-
42-
.featureImage {
43-
width: auto;
44-
max-height: 128px;
45-
margin: 0 auto;
46-
}
47-
48-
.featureHeading {
49-
font-size: var(--ifm-h3-font-size);
50-
padding-top: 1rem;
51-
}
52-
53-
.announcement {
54-
font-weight: bold;
55-
font-size: 24px;
56-
padding: 48px;
57-
margin: 0 auto;
58-
text-align: center;
59-
}
60-
61-
.announcementDark {
62-
background-color: #20232a;
63-
color: var(--ifm-color-secondary-lightest);
64-
/* Reapply the primary color, because it has been locally overridden as
65-
* the dark theme color */
66-
--ifm-link-color: var(--ifm-color-primary);
67-
}
68-
69-
.announcementInner {
70-
margin: 0 auto;
71-
max-width: 768px;
72-
}
73-
74-
.topBanner {
75-
font-size: 20px;
76-
padding: 30px 20px;
77-
max-width: 900px;
78-
margin: 0 auto;
79-
text-align: center;
80-
display: flex;
81-
flex-direction: column;
82-
align-items: center;
83-
}
84-
85-
.topBannerTitle {
86-
font-size: 54px;
87-
font-weight: bold;
88-
margin-bottom: 0.4rem;
89-
}
90-
91-
@media only screen and (max-width: 768px) {
92-
.topBannerTitle {
93-
font-size: 40px;
94-
}
95-
}
96-
97-
.topBannerTitleText {
98-
background: linear-gradient(
99-
90deg,
100-
rgb(131 58 180 / 100%) 0%,
101-
rgb(253 29 29 / 100%) 50%,
102-
rgb(252 176 69 / 100%) 100%
103-
);
104-
background-clip: text;
105-
-webkit-text-fill-color: transparent;
106-
}
107-
108-
.topBannerTitleText:hover {
109-
border-bottom: solid 2px;
110-
border-color: rgb(152 0 255);
111-
}
112-
113-
html[data-theme="dark"] .topBannerTitleText {
114-
background: linear-gradient(
115-
90deg,
116-
rgb(152 0 255) 0%,
117-
rgb(246 41 41) 50%,
118-
rgb(255 169 8) 100%
119-
);
120-
background-clip: text;
121-
-webkit-text-fill-color: transparent;
122-
}
123-
124-
.topBannerDescription {
125-
font-size: 20px;
126-
}
127-
@media only screen and (max-width: 768px) {
128-
.topBannerDescription {
129-
font-size: 16px;
130-
white-space: normal;
131-
}
132-
}
133-
13411
.hero {
13512
background-color: #2b3137;
13613
padding: 48px;
13714
}
13815

13916
.heroInner {
14017
margin: 0 auto;
141-
max-width: 1400px;
18+
max-width: 1200px;
14219
padding: 0 20px;
14320
}
14421

14522
.heroProjectTagline {
14623
color: var(--ifm-color-secondary-lightest);
147-
font-size: 60px;
24+
font-size: 56px;
14825
margin: 0;
14926
}
15027

@@ -176,9 +53,10 @@ html[data-theme="dark"] .topBannerTitleText {
17653
.heroLogo {
17754
animation-duration: 2s;
17855
animation-name: jack-in-the-box;
179-
float: right;
180-
margin-top: 20px;
181-
padding: 0 20px 20px;
56+
float: left;
57+
margin-top: 100px;
58+
margin-right: 35px;
59+
padding: 0 75px 75px;
18260
height: auto;
18361
}
18462

@@ -211,7 +89,7 @@ html[data-theme="dark"] .topBannerTitleText {
21189
color: var(--ifm-color-primary);
21290
}
21391

214-
@media only screen and (max-width: 768px) {
92+
@media only screen and (max-width: 960px) {
21593
.hero {
21694
padding-left: 20px;
21795
padding-right: 20px;
@@ -245,23 +123,44 @@ html[data-theme="dark"] .topBannerTitleText {
245123
}
246124
}
247125

248-
.tweetsSection > :global(.col) > * {
249-
margin-bottom: 2rem;
126+
/* Used to test CSS insertion order */
127+
.test-marker-site-index-page {
128+
content: "site-index-page";
129+
}
130+
131+
.buttonContainer {
132+
display: flex;
133+
flex-wrap: wrap;
134+
align-items: center;
135+
justify-content: center;
250136
}
251137

252-
@media (max-width: 996px) {
253-
.tweetsSection > :global(.col:last-child) > *:last-child {
254-
margin-bottom: 0;
255-
}
138+
.buttonContainer .button,
139+
.buttonContainer .button:hover {
140+
color: black;
256141
}
257142

258-
@media (min-width: 997px) {
259-
.tweetsSection > :global(.col) > *:last-child {
260-
margin-bottom: 0;
143+
.buttonContainer .button:last-of-type {
144+
margin: 0px 36px;
145+
}
146+
147+
/* Hardcode stuff */
148+
@media only screen and (max-width: 997px) {
149+
.topMarginIfCol6BecameVertical {
150+
margin-top: 2rem;
261151
}
262152
}
263153

264-
/* Used to test CSS insertion order */
265-
.test-marker-site-index-page {
266-
content: "site-index-page";
154+
.universityContainer {
155+
text-align: center;
156+
}
157+
158+
/* https://docusaurus.io/docs/markdown-features/assets#github-style-themed-images */
159+
[data-theme='light'] .showInDarkThemeOnly,
160+
[data-theme='dark'] .showInLightThemeOnly {
161+
display: none;
267162
}
163+
164+
[data-theme='dark'] .recolourWorldMapPinInDarkTheme [fill="#003164"] {
165+
fill: #e3e3e3;
166+
}

0 commit comments

Comments
 (0)