Merge pull request #20 from axmmisaka/slider-gitpod

added gitpod and made some code change

Author: lhstrh

src/components/HomepageSlider/codes.tsx

@@ -18,6 +18,12 @@ export const main: JSX.Element = (<pre
       <span style={{ color: "#EEFFFF" }}> {"{"}</span>
     </span>
     <br />
+    <span className="line">
+      <span style={{ color: "#545454", fontStyle: "italic" }}>
+        {"  "}// Instantiate two Player reactors here
+      </span>
+    </span>
+    <br />
     <span className="line">
       <span style={{ color: "#EEFFFF" }}>{"  "}player1 </span>
       <span style={{ color: "#89DDFF" }}>=</span>
@@ -42,6 +48,12 @@ export const main: JSX.Element = (<pre
     <br />
     <span className="line" />
     <br />
+    <span className="line">
+      <span style={{ color: "#545454", fontStyle: "italic" }}>
+        {"  "}// Make connections between them
+      </span>
+    </span>
+    <br />
     <span className="line">
       <span style={{ color: "#EEFFFF" }}>{"  "}player2</span>
       <span style={{ color: "#89DDFF" }}>.</span>
@@ -170,8 +182,8 @@ export const target = (<pre
     <span className="line">
       <span style={{ color: "#C792EA" }}>{"    "}const</span>
       <span style={{ color: "#C792EA" }}> char</span>
-      <span style={{ color: "#89DDFF" }}>*</span>
-      <span style={{ color: "#EEFFFF" }}> symbol_names[] </span>
+      <span style={{ color: "#89DDFF" }}>**</span>
+      <span style={{ color: "#EEFFFF" }}> symbol_names </span>
       <span style={{ color: "#89DDFF" }}>=</span>
       <span style={{ color: "#89DDFF" }}> {"{"}</span>
       <span style={{ color: "#89DDFF" }}>"</span>

src/components/HomepageSlider/index.tsx

@@ -16,10 +16,12 @@ const titles = [
 
 import RockPaperScissor from '@site/static/img/diagram/rps.svg';
 import ElaboratedRPS from  '@site/static/img/diagram/elaborate.svg';
+import Link from '@docusaurus/Link';
 
 const codes = [
   <>
     {main}
+    <div>{"\n\n\n\n\n"}</div>
     <div className={clsx(styles.diagramSVGContainer, styles.codeAbove)}>
       <RockPaperScissor
         title="Lingua Franca Diagram for the RockPaperScissor Program"
@@ -77,6 +79,11 @@ export const CodeContainer = ({
             </CSSTransition>
           </SwitchTransition>
       </div>
+      <div className={clsx(styles.linkButton)}>
+      <Link href="https://gitpod.io/new#https://github.com/lf-lang/playground-lingua-franca/tree/main">
+        <img src="https://raw.githubusercontent.com/gitpod-io/gitpod/30da76375c996109f243491b23e47feefab7217f/components/dashboard/public/button/open-in-gitpod.svg" />
+      </Link>
+    </div>
       <button
         className={clsx(styles.advance, "button", "button--primary")}
         onClick={() => {

src/components/HomepageSlider/styles.module.css

@@ -36,6 +36,12 @@
     /* Override Infima's button */
 }
 
+.linkButton {
+    position: absolute;
+    right: 1rem;
+    top: 3rem;
+}
+
 .codeContent {
     height: 30rem;
 }