Merge pull request #23 from axmmisaka/landing-page

Adjustments to the landing page
lf-lang · Dec 14, 2023 · a83fc1e · a83fc1e
2 parents d1d640d + 059dee8
commit a83fc1e
Show file tree

Hide file tree

Showing 27 changed files with 2,415 additions and 917 deletions.
diff --git a/blog/2023-12-11-docusaurus.md b/blog/2023-12-11-docusaurus.md
@@ -9,7 +9,7 @@ We have a new website! Most importantly, this website is the home of our documen
 
 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.
 
-![Docusaurus Logo](https://docusaurus.io/img/docusaurus_keytar.svg)
+![LinguaFrancasaurus](../static/img/blog/lf-and-docusaurus.svg)
 
 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.
 

diff --git a/blog/2023-12-15-release-lingo.md b/blog/2023-12-15-release-lingo.md
@@ -5,7 +5,7 @@ authors: [tassilo, lhstrh]
 tags: [lingo, lingua franca, packaging, build tool]
 ---
 
-![Test](../static/img/blog/lingo-release-post.png)
+![Banner](../static/img/blog/lingo-release-post.png)
 
 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.
 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.

diff --git a/docusaurus.config.ts b/docusaurus.config.ts
@@ -66,8 +66,9 @@ const config: Config = {
     navbar: {
       logo: {
         alt: 'The Lingua Franca Logo',
-        src: 'img/lf-forlight.svg',
-        srcDark: "img/lf-fordark.svg",
+        src: 'img/lf-forlight-mono.svg',
+        srcDark: "img/lf-fordark-mono.svg",
+        style: {marginLeft: "20px"},
       },
       items: [
         {
@@ -81,8 +82,10 @@ const config: Config = {
         {to: '/community', label: 'Community', position: 'left'},
         {
           href: 'https://github.com/lf-lang/',
-          label: 'GitHub',
           position: 'right',
+          // https://github.com/facebook/docusaurus/blob/61116e2ad6f675d0ba1abef98484712b14834bdb/website/docusaurus.config.ts#L615-L620
+          className: "header-github-link",
+          'aria-label': 'GitHub repository',
         },
       ],
     },

diff --git a/src/components/HomepageFeatures/index.tsx b/src/components/HomepageFeatures/index.tsx
@@ -25,7 +25,7 @@ const FeatureList: FeatureItem[] = [
     ),
   },
   {
-    title: "Built-In Timing Semantics",
+    title: "Built-in Timing Semantics",
     Svg: Timing,
     description: (
       <Translate>
@@ -68,10 +68,12 @@ export function TwoColumns({
   alt?: boolean;
 }) {
   return (
-    <div className={clsx("container", "section", { sectionAlt: alt })}>
-      <div className="row">
-        <div className="col col--6">{col1}</div>
-        <div className="col col--6">{col2}</div>
+    <div className={clsx("section", { sectionAlt: alt })}>
+      <div className="container">
+        <div className="row">
+          <div className="col col--6">{col1}</div>
+          <div className="col col--6">{col2}</div>
+        </div>
       </div>
     </div>
   );

diff --git a/src/components/HomepageFeatures/styles.module.css b/src/components/HomepageFeatures/styles.module.css
@@ -6,6 +6,6 @@
 }
 
 .featureSvg {
-  height: 400px;
-  width: 400px;
+  height: 250px;
+  width: 250px;
 }
diff --git a/src/components/HomepageSlider/codes.tsx b/src/components/HomepageSlider/codes.tsx
@@ -19,7 +19,7 @@ export const main: JSX.Element = (<pre
     </span>
     <br />
     <span className="line">
-      <span style={{ color: "#545454", fontStyle: "italic" }}>
+      <span style={{ color: "#242526", fontStyle: "italic" }}>
         {"  "}// Instantiate two Player reactors here
       </span>
     </span>
@@ -49,7 +49,7 @@ export const main: JSX.Element = (<pre
     <span className="line" />
     <br />
     <span className="line">
-      <span style={{ color: "#545454", fontStyle: "italic" }}>
+      <span style={{ color: "#242526", fontStyle: "italic" }}>
         {"  "}// Make connections between them
       </span>
     </span>

diff --git a/src/components/HomepageSlider/index.tsx b/src/components/HomepageSlider/index.tsx
@@ -10,7 +10,7 @@ import { main, click, target } from './codes';
 
 const titles = [
   <Translate>Architect your application in Lingua Franca</Translate>,
-  <Translate>Have diagrams rendered as you type</Translate>,
+  <Translate>Have interactive diagrams rendered as you type</Translate>,
   <Translate>Write reactive code in the language you like</Translate>,
 ];
 
@@ -47,7 +47,7 @@ const codes = [
 export const CodeContainer = ({
   className,
 }: {
-  className: string;
+  className?: string;
 }): JSX.Element => {
   const [page, setPage] = useState(0);
   const refs = [useRef(null), useRef(null), useRef(null)] as (React.LegacyRef<HTMLDivElement> | undefined)[];

diff --git a/src/components/HomepageSlider/styles.module.css b/src/components/HomepageSlider/styles.module.css
@@ -1,10 +1,9 @@
 .codeContainer {
-    min-width: 600px;
-    height: 150px;
-    background-color: #10425d;
+    height: auto;
+    background-color: #38546c;
     font-size: 1rem;
     border-radius: 8px;
-    padding: 0 !important;
+    padding: 0;
 
     position: relative;
 }
@@ -15,7 +14,7 @@
     font-size: 1.2rem;
     color: white;
     background-color: #242526;
-    padding-left: 1rem !important;
+    padding-left: 1rem;
 }
 
 .codeAbove {

diff --git a/src/css/custom.css b/src/css/custom.css
@@ -42,3 +42,23 @@
 .sectionAlt {
   background-color: var(--ifm-color-emphasis-100);
 }
+
+/* https://github.com/facebook/docusaurus/blob/61116e2ad6f675d0ba1abef98484712b14834bdb/website/src/css/custom.css#L74C1-L90C2 */
+
+.header-github-link:hover {
+  opacity: 0.6;
+}
+
+.header-github-link::before {
+  content: '';
+  width: 24px;
+  height: 24px;
+  display: flex;
+  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")
+    no-repeat;
+}
+
+[data-theme='dark'] .header-github-link::before {
+  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")
+    no-repeat;
+}
diff --git a/src/pages/index.module.css b/src/pages/index.module.css
@@ -3,148 +3,25 @@
  * and scoped locally.
  */
 
-.heroBanner {
-  padding: 4rem 0;
-  text-align: center;
-  position: relative;
-  overflow: hidden;
-}
-
 .subHero {
   color: var(--ifm-color-secondary-lightest);
   font-size: 1.2rem;
 }
 
-@media screen and (max-width: 996px) {
-  .heroBanner {
-    padding: 2rem;
-  }
-}
-
-.buttons {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.section {
-  padding: 40px 0;
-}
-
-.sectionAlt {
-  background-color: var(--ifm-color-emphasis-100);
-}
-
-.sectionInner {
-  margin: 0 auto;
-}
-
-.featureImage {
-  width: auto;
-  max-height: 128px;
-  margin: 0 auto;
-}
-
-.featureHeading {
-  font-size: var(--ifm-h3-font-size);
-  padding-top: 1rem;
-}
-
-.announcement {
-  font-weight: bold;
-  font-size: 24px;
-  padding: 48px;
-  margin: 0 auto;
-  text-align: center;
-}
-
-.announcementDark {
-  background-color: #20232a;
-  color: var(--ifm-color-secondary-lightest);
-  /* Reapply the primary color, because it has been locally overridden as
-   * the dark theme color */
-  --ifm-link-color: var(--ifm-color-primary);
-}
-
-.announcementInner {
-  margin: 0 auto;
-  max-width: 768px;
-}
-
-.topBanner {
-  font-size: 20px;
-  padding: 30px 20px;
-  max-width: 900px;
-  margin: 0 auto;
-  text-align: center;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-}
-
-.topBannerTitle {
-  font-size: 54px;
-  font-weight: bold;
-  margin-bottom: 0.4rem;
-}
-
-@media only screen and (max-width: 768px) {
-  .topBannerTitle {
-    font-size: 40px;
-  }
-}
-
-.topBannerTitleText {
-  background: linear-gradient(
-    90deg,
-    rgb(131 58 180 / 100%) 0%,
-    rgb(253 29 29 / 100%) 50%,
-    rgb(252 176 69 / 100%) 100%
-  );
-  background-clip: text;
-  -webkit-text-fill-color: transparent;
-}
-
-.topBannerTitleText:hover {
-  border-bottom: solid 2px;
-  border-color: rgb(152 0 255);
-}
-
-html[data-theme="dark"] .topBannerTitleText {
-  background: linear-gradient(
-    90deg,
-    rgb(152 0 255) 0%,
-    rgb(246 41 41) 50%,
-    rgb(255 169 8) 100%
-  );
-  background-clip: text;
-  -webkit-text-fill-color: transparent;
-}
-
-.topBannerDescription {
-  font-size: 20px;
-}
-@media only screen and (max-width: 768px) {
-  .topBannerDescription {
-    font-size: 16px;
-    white-space: normal;
-  }
-}
-
 .hero {
   background-color: #2b3137;
   padding: 48px;
 }
 
 .heroInner {
   margin: 0 auto;
-  max-width: 1400px;
+  max-width: 1200px;
   padding: 0 20px;
 }
 
 .heroProjectTagline {
   color: var(--ifm-color-secondary-lightest);
-  font-size: 60px;
+  font-size: 56px;
   margin: 0;
 }
 
@@ -176,9 +53,10 @@ html[data-theme="dark"] .topBannerTitleText {
 .heroLogo {
   animation-duration: 2s;
   animation-name: jack-in-the-box;
-  float: right;
-  margin-top: 20px;
-  padding: 0 20px 20px;
+  float: left;
+  margin-top: 100px;
+  margin-right: 35px;
+  padding: 0 75px 75px;
   height: auto;
 }
 
@@ -211,7 +89,7 @@ html[data-theme="dark"] .topBannerTitleText {
   color: var(--ifm-color-primary);
 }
 
-@media only screen and (max-width: 768px) {
+@media only screen and (max-width: 960px) {
   .hero {
     padding-left: 20px;
     padding-right: 20px;
@@ -245,23 +123,44 @@ html[data-theme="dark"] .topBannerTitleText {
   }
 }
 
-.tweetsSection > :global(.col) > * {
-  margin-bottom: 2rem;
+/* Used to test CSS insertion order */
+.test-marker-site-index-page {
+  content: "site-index-page";
+}
+
+.buttonContainer {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: center;
 }
 
-@media (max-width: 996px) {
-  .tweetsSection > :global(.col:last-child) > *:last-child {
-    margin-bottom: 0;
-  }
+.buttonContainer .button,
+.buttonContainer .button:hover {
+  color: black;
 }
 
-@media (min-width: 997px) {
-  .tweetsSection > :global(.col) > *:last-child {
-    margin-bottom: 0;
+.buttonContainer .button:last-of-type {
+  margin: 0px 36px;
+}
+
+/* Hardcode stuff */
+@media only screen and (max-width: 997px) {
+  .topMarginIfCol6BecameVertical {
+    margin-top: 2rem;
   }
 }
 
-/* Used to test CSS insertion order */
-.test-marker-site-index-page {
-  content: "site-index-page";
+.universityContainer {
+  text-align: center;
+}
+
+/* https://docusaurus.io/docs/markdown-features/assets#github-style-themed-images */
+[data-theme='light'] .showInDarkThemeOnly,
+[data-theme='dark'] .showInLightThemeOnly {
+  display: none;
 }
+
+[data-theme='dark'] .recolourWorldMapPinInDarkTheme [fill="#003164"] {
+  fill: #e3e3e3;
+}