Add events and google slides support

kiali · Oct 22, 2024 · de95775 · de95775
1 parent 32922c8
commit de95775
Show file tree

Hide file tree

Showing 8 changed files with 107 additions and 16 deletions.
diff --git a/events/2023_11_Kiali Beyond the Graph/event.json b/events/2023_11_Kiali Beyond the Graph/event.json
@@ -0,0 +1,15 @@
+{
+	"date": "2023-11-1",
+	"place": "Chicago, NA",
+	"eventName": "Kubecon Istio Day NA",
+	"talkName": "Kiali Beyond the Graph - Troubleshooting istio",
+	"description": "",
+	"lang": "EN",
+	"type": "talk",
+	"presentation": {
+		"type" : "youtube",
+		"link": "https://www.youtube.com/embed/MX-Sym2EkGI?si=nf__c_nOZL0rh1rt"
+	},	
+	"folder_path": "https://www.youtube.com/watch?v=MX-Sym2EkGI"
+}
+
diff --git a/events/2024_03_Ambient_Kubecon/event.json b/events/2024_03_Ambient_Kubecon/event.json
@@ -0,0 +1,14 @@
+{
+	"date": "2024-03-20",
+	"place": "Paris, France",
+	"eventName": "Kubecon IstioDay EU",
+	"talkName": "Ambient",
+	"description": "",
+	"lang": "EN",
+	"type": "lighting",
+	"presentation": {
+		"type" : "presentation",
+		"link": "https://docs.google.com/presentation/d/1rrh_UXNxupbaAnOsgO2I7qpRV2Ilpg7uCHFXaHKs6Rk/edit?usp=sharing"
+	},	
+	"folder_path": ""
+}
diff --git a/website/package.json b/website/package.json
@@ -20,6 +20,7 @@
     "react": "^18.3.1",
     "react-bootstrap": "^2.10.5",
     "react-dom": "^18.3.1",
+    "react-google-slides": "^4.0.0",
     "react-markdown": "^9.0.1",
     "react-router-dom": "^6.27.0",
     "react-scripts": "5.0.1",

diff --git a/website/src/components/TalkView/TalkView.tsx b/website/src/components/TalkView/TalkView.tsx
@@ -1,5 +1,6 @@
 import React from "react";
 import Markdown from 'react-markdown'
+import ReactGoogleSlides from "react-google-slides";
 
 export const TalkView = (props: {type: string, link: string, path: string}) => {   
     const [content, setContent] = React.useState<string>("# Hey")
@@ -32,6 +33,17 @@ export const TalkView = (props: {type: string, link: string, path: string}) => {
                 <iframe width="100%" height="500" src={props.link} title="YouTube video player" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerPolicy="strict-origin-when-cross-origin" allowFullScreen></iframe>
                 </div>
             )}
+            {props.type === 'presentation' && (
+                <ReactGoogleSlides
+                width={"100%"}
+                height={600}
+                slidesLink={props.link}
+                slideDuration={10}
+                position={1}
+                showControls
+                allowFullScreen
+              />
+            )}
         </>
     )
 }
diff --git a/website/src/data/events.json b/website/src/data/events.json
@@ -30,5 +30,37 @@
         "folder_path": "https://github.com/kiali/community/tree/main/2024_10_Setup_your_mesh_ES",
         "path": "events/2024_10_Setup_your_mesh_ES",
         "id": "145105813215"
+    },
+    {
+        "date": "2024-03-20",
+        "place": "Paris, France",
+        "eventName": "Kubecon IstioDay EU",
+        "talkName": "Ambient",
+        "description": "",
+        "lang": "EN",
+        "type": "lighting",
+        "presentation": {
+            "type": "presentation",
+            "link": "https://docs.google.com/presentation/d/1rrh_UXNxupbaAnOsgO2I7qpRV2Ilpg7uCHFXaHKs6Rk/edit?usp=sharing"
+        },
+        "folder_path": "",
+        "path": "events/2024_03_Ambient_Kubecon",
+        "id": "277611753779"
+    },
+    {
+        "date": "2023-11-1",
+        "place": "Chicago, NA",
+        "eventName": "Kubecon Istio Day NA",
+        "talkName": "Kiali Beyond the Graph - Troubleshooting istio",
+        "description": "",
+        "lang": "EN",
+        "type": "talk",
+        "presentation": {
+            "type": "youtube",
+            "link": "https://www.youtube.com/embed/MX-Sym2EkGI?si=nf__c_nOZL0rh1rt"
+        },
+        "folder_path": "https://www.youtube.com/watch?v=MX-Sym2EkGI",
+        "path": "events/2023_11_Kiali Beyond the Graph",
+        "id": "150534735104"
     }
 ]
diff --git a/website/src/views/Talk.tsx b/website/src/views/Talk.tsx
@@ -12,6 +12,9 @@ const Talk = () => {
     const [openPreview, setOpenPreview] = React.useState(false);
     const talk = events.filter(ev => ev.id === talkId)[0]
 
+    const contentTalk = <TalkView type={talk.presentation.type} link={talk.presentation.link} path={talk.path}/>
+
+
     return (
         <Container fluid>
             <Row>
@@ -59,21 +62,29 @@ const Talk = () => {
 
                         </Form>        
 
-                        <Button
-                            onClick={() => setOpenPreview(!openPreview)}
-                            aria-expanded={openPreview}
-                        >
-                            See Preview
-                        </Button>
-                        <Collapse in={openPreview}>
-                            <div>
-                            <TalkView type={talk.presentation.type} link={talk.presentation.link} path={talk.path}/> 
-                            </div>   
-                        </Collapse>
-                         </Card.Body>
-                         <Card.Body>
-                            <Card.Link target='_blank' href={talk.folder_path}>See {talk.type}</Card.Link>
+                        {talk.type === 'markdown'? (
+                            <>
+                                <Button
+                                onClick={() => setOpenPreview(!openPreview)}
+                                aria-expanded={openPreview}
+                                >
+                                    See Preview
+                                </Button>
+                                <Collapse in={openPreview}>
+                                    <div>
+                                    {contentTalk}
+                                    </div>   
+                                </Collapse>
+                            </>
+                        ):
+                        (contentTalk)}
+
                          </Card.Body>
+                         {talk.folder_path !== "" && (
+                            <Card.Body>
+                                <Card.Link target='_blank' href={talk.folder_path}>See {talk.type}</Card.Link>
+                            </Card.Body>
+                         )}
                     </Card>
                 </Col>
             </Row>

diff --git a/website/src/views/Talks.tsx b/website/src/views/Talks.tsx
@@ -4,8 +4,9 @@ import { Card, Col, Container, Row, Table } from "react-bootstrap";
 import { NavLink, useNavigate } from "react-router-dom";
 
 export const iconsType: {[key:string]: string} = {
-    "workshop": "nc-icon nc-tv-2",
-    "talk": "nc-icon nc-audio-92"
+    "workshop": "fas fa-desktop",
+    "talk": "fas fa-microphone",
+    "lighting": "fas fa-bolt"
 }
 
 const Talks = () => {

diff --git a/website/yarn.lock b/website/yarn.lock
@@ -8994,6 +8994,11 @@ react-error-overlay@^6.0.11:
   resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-6.0.11.tgz#92835de5841c5cf08ba00ddd2d677b6d17ff9adb"
   integrity sha512-/6UZ2qgEyH2aqzYZgQPxEnz33NJ2gNsnHA2o5+o4wW9bLM/JYQitNP9xPhsXwC08hMMovfGe/8retsdDsczPRg==
 
+react-google-slides@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/react-google-slides/-/react-google-slides-4.0.0.tgz#6de0d63f969b8f113d8def40ea9b359a5071c938"
+  integrity sha512-WRstUSvMaGmeC7GWobZsEj5tRw1h5/vlf1hs4LGNuuKrdzG5B52HV3eU3Okk+MDo309dVDnjYaAxW/p5kbLPDQ==
+
 react-is@^16.13.1, react-is@^16.3.2, react-is@^16.7.0:
   version "16.13.1"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"