From 2be76a5558cdc75e355b3ab180b805ee087885ed Mon Sep 17 00:00:00 2001
From: Jonas Helming <jhelming@eclipsesource.com>
Date: Mon, 2 Dec 2024 11:46:26 +0100
Subject: [PATCH] Split Theia IDE and platform website (#659)

* Split Theia IDE and platform website

fixed #658
---
 gatsby-node.js                                |   2 +-
 src/components/Nav.js                         |   5 +-
 src/components/index/CommonNews.js            |  26 ++++
 src/components/index/Header.js                |  30 ++---
 src/components/index/PlatformHeader.js        | 126 ++++++++++++++++++
 src/components/index/TheiaIDEDownloads.js     |   3 +-
 ...headwithschema.js => headwithIDEschema.js} |  43 +-----
 src/layouts/headwithPlatformschema.js         |  49 +++++++
 src/pages/index.js                            |  50 ++-----
 src/pages/theia-platform.js                   |  44 ++++++
 10 files changed, 281 insertions(+), 97 deletions(-)
 create mode 100644 src/components/index/CommonNews.js
 create mode 100644 src/components/index/PlatformHeader.js
 rename src/layouts/{headwithschema.js => headwithIDEschema.js} (53%)
 create mode 100644 src/layouts/headwithPlatformschema.js
 create mode 100644 src/pages/theia-platform.js

diff --git a/gatsby-node.js b/gatsby-node.js
index 85eee246..63218233 100644
--- a/gatsby-node.js
+++ b/gatsby-node.js
@@ -30,7 +30,7 @@ exports.onCreateWebpackConfig = ({ actions }) => {
   };
 
 exports.onCreatePage = async ({ page, reporter, actions }) => {
-    if (page.path === '/') {
+    if (page.path === '/' || page.path === '/theia-platform/') {
         try {
             const response = await fetch(
                 'https://api.eclipse.org/adopters/projects/ecd.theia', {
diff --git a/src/components/Nav.js b/src/components/Nav.js
index d2b2ce63..8bf70b9b 100644
--- a/src/components/Nav.js
+++ b/src/components/Nav.js
@@ -226,10 +226,13 @@ class Nav extends React.Component {
                             </button>
                         </div>
                     </div>
-                    <ul className={`nav__items ${this.state.isNavRendered ? 'navIsRendered' : 'navIsNotRendered' }`}>
+                    <ul className={`nav__items ${this.state.isNavRendered ? 'navIsRendered' : 'navIsNotRendered'}`}>
                         <li className="nav__item">
                             <Link to="https://github.com/eclipse-theia/theia" className="nav__link">Github</Link>
                         </li>
+                        <li className="nav__item">
+                            <Link to="/theia-platform/" className="nav__link">Theia Platform</Link>
+                        </li>
                         <li className="nav__item">
                             <Link to="/docs/" className="nav__link" activeClassName="active">Documentation</Link>
                         </li>
diff --git a/src/components/index/CommonNews.js b/src/components/index/CommonNews.js
new file mode 100644
index 00000000..744ae59d
--- /dev/null
+++ b/src/components/index/CommonNews.js
@@ -0,0 +1,26 @@
+/********************************************************************************
+ * Copyright (C) 2020 TypeFox and others.
+ *
+ * This program and the accompanying materials are made available under the
+ * terms of the Eclipse Public License v. 2.0 which is available at
+ * http://www.eclipse.org/legal/epl-2.0.
+ *
+ * This Source Code may also be made available under the following Secondary
+ * Licenses when the conditions for such availability set forth in the Eclipse
+ * Public License v. 2.0 are satisfied: GNU General Public License, version 2
+ * with the GNU Classpath Exception which is available at
+ * https://www.gnu.org/software/classpath/license.html.
+ *
+ * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
+ ********************************************************************************/
+const PlatformHeader = () => (
+    <div className="header__banner">
+        <h2 style={{ fontSize: '2.1rem' }}>
+            <a href="https://eclipsesource.com/blogs/2024/11/07/eclipse-theia-1-54-release-news-and-noteworthy/" rel="noopener noreferrer">Learn about the latest 1.55 Release</a> and <a href="https://eclipsesource.com/blogs/2024/09/12/the-eclipse-theia-community-release-2024-08/">the latest Community Release (2024-08)</a>.
+            <br />
+            Stay up-to-date: <a href="https://twitter.com/theia_ide">follow us on Twitter</a> and <a href="https://accounts.eclipse.org/mailing-list/friends-of-theia">register to the "Friends of Theia" mailing list</a>.
+        </h2>
+    </div>
+)
+
+export default PlatformHeader
\ No newline at end of file
diff --git a/src/components/index/Header.js b/src/components/index/Header.js
index 31a95a97..8a1ff92a 100644
--- a/src/components/index/Header.js
+++ b/src/components/index/Header.js
@@ -15,9 +15,9 @@
  ********************************************************************************/
 
 import Background from '../../resources/background-image.png'
-import TheiaConLogo from '../../resources/theiacon-logo.svg'
 import Nav from '../Nav'
 import React from 'react'
+import CommonNews from './CommonNews'
 import { breakpoints } from '../../utils/variables'
 import styled from '@emotion/styled'
 
@@ -106,29 +106,29 @@ const Header = () => (
                     <iframe title="Github Star Count" className="header__github-button" src="https://ghbtns.com/github-btn.html?user=eclipse-theia&repo=theia&type=star&count=true" frameBorder={0} scrolling={0} />
                     <iframe title="Github Fork Count" className="header__github-button" src="https://ghbtns.com/github-btn.html?user=eclipse-theia&repo=theia&type=fork&count=true" frameBorder={0} scrolling={0} />
                 </div>
+                <center>
                 <h1 className="heading-primary">
-                    The Eclipse Theia Platform
+                    Welcome to Eclipse Theia
                 </h1>
+                </center>
+                <div className="header__banner">
                 <h2 style={{ fontSize: '2.1rem' }}>
-                        An Open, Flexible and Extensible Platform to efficiently develop and deliver Cloud & Desktop IDEs and tools with modern web technologies. The <a href="#theiaide"><b>Theia IDE</b></a> is a standard IDE built on the Theia Platform.
+                    <p>The <a href="#theiaide"><b>Theia IDE</b></a> is a modern IDE for cloud and desktop built on the Theia Platform.</p>
+                    <p>The <a href="theia-platform/">Theia Platform</a> is a framework for building custom, tailored cloud & desktop IDEs.</p>
+                
                 </h2>
+                </div>
                 <div className="header__buttons">
-                        <a className="btn" href="#gettingstarted" target="_blank" rel="noopener noreferrer">Get started with the Theia Platform</a>
-                        <a className="btn btn--cta" href="https://try.theia-cloud.io/" rel="noopener">Try Theia IDE online</a>
+                        <a className="btn btn--cta" href="https://try.theia-cloud.io/" target="_blank" rel="noopener noreferrer">Try Theia IDE online</a>
                         <a style ={{backgroundColor: "#0B5394", borderColor: "#0B5394"}} className="btn btn--cta" href="#theiaide" rel="noopener">Get Theia IDE for desktop</a>
+                        <a className="btn" href="theia-platform/">Explore the Theia Platform</a>
                  </div>
-                </div>
+                <CommonNews/>
                 <div className="header__banner">
-                    <h2 style={{ fontSize: '2.1rem' }}>
-                        <a href="https://eclipsesource.com/blogs/2024/11/07/eclipse-theia-1-54-release-news-and-noteworthy/" rel="noopener noreferrer">Learn about the latest 1.55 Release</a> and <a href="https://eclipsesource.com/blogs/2024/09/12/the-eclipse-theia-community-release-2024-08/">the latest Community Release (2024-08)</a>.
-                        <br/>
-                        Stay up-to-date: <a href="https://twitter.com/theia_ide">follow us on Twitter</a> and <a href="https://accounts.eclipse.org/mailing-list/friends-of-theia">register to the "Friends of Theia" mailing list</a>.
-                    </h2>
-                </div>
-                <div className="header__banner">
-                    <h1 style={{ fontSize: '2.2rem' }}>
+                    <h2 style={{ fontSize: '2.2rem' }}>
                         Theia IDE is now generally available! Read our <a href="https://newsroom.eclipse.org/news/announcements/eclipse-foundation-introduces-theia-ide-elevate-modern-developer-experience">press release</a> and <a href="https://eclipsesource.com/blogs/2024/06/27/introducing-the-theia-ide/">blog post</a> for more details!
-                    </h1>       
+                    </h2>       
+                </div>
                 </div>
         </header>
     </StyledHeader>
diff --git a/src/components/index/PlatformHeader.js b/src/components/index/PlatformHeader.js
new file mode 100644
index 00000000..6d83268a
--- /dev/null
+++ b/src/components/index/PlatformHeader.js
@@ -0,0 +1,126 @@
+/********************************************************************************
+ * Copyright (C) 2020 TypeFox and others.
+ *
+ * This program and the accompanying materials are made available under the
+ * terms of the Eclipse Public License v. 2.0 which is available at
+ * http://www.eclipse.org/legal/epl-2.0.
+ *
+ * This Source Code may also be made available under the following Secondary
+ * Licenses when the conditions for such availability set forth in the Eclipse
+ * Public License v. 2.0 are satisfied: GNU General Public License, version 2
+ * with the GNU Classpath Exception which is available at
+ * https://www.gnu.org/software/classpath/license.html.
+ *
+ * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
+ ********************************************************************************/
+
+import Background from '../../resources/background-image.png'
+import Nav from '../Nav'
+import React from 'react'
+import CommonNews from './CommonNews'
+import { breakpoints } from '../../utils/variables'
+import styled from '@emotion/styled'
+
+const StyledHeader = styled.div`
+     .header {
+        position: relative;
+        background-image: url(${Background});
+        background-size: cover;
+        background-repeat: no-repeat;
+        border-bottom: 10px solid #f8f8f8;
+        @media(max-width: ${breakpoints.xmd}) {
+            padding-top: 15rem;
+        }
+        &__logo-box {
+            margin-bottom: 3rem;
+        }
+        &__logo {
+            height: 3rem;
+        }
+        .banner__image {
+            height: auto;
+            width: 45rem; /* Default width */
+
+            @media (max-width: 800px) {
+                width: 35rem; /* Adjust for medium screens */
+            }
+
+            @media (max-width: 500px) {
+                width: 25rem; /* Further reduce width for smaller screens */
+            }
+
+            @media (max-width: 385px) {
+                width:20rem; /* Even smaller for very narrow screens */
+            }
+        }
+        &__banner {
+            padding: 15px;
+            text-align: center;
+        }
+        h1 {
+            margin-bottom: 1rem;
+            font-size: 3.4rem;
+        }
+        .btn {
+            max-width: 21rem;
+            @media(max-width: 385px) {
+                &:not(:last-child) {
+                    margin-right: 0;
+                }
+            }
+            @media(max-width: 800px) {
+                &:not(:last-child) {
+                    margin-right: 2rem;
+                }
+            }
+        }
+        &__github-details {
+            position: absolute;
+            top: 10rem;
+            right: 2rem;
+        }
+        &__buttons {
+            display:flex;
+            justify-content: space-evenly;
+            align-items: center;
+            text-align: center;
+            padding: 3rem 10vw;
+            @media(max-width: 800px){
+                padding: 3rem 0;
+            }
+            
+        }
+        iframe {
+            height: 2.5rem;
+            width: 12rem;
+        }
+    }
+`
+
+const PlatformHeader = () => (
+    <StyledHeader>
+        <header className='header' role="banner">
+            <div className="row">
+                <Nav shouldRenderLogo={true} />
+                <div className="header__github-details">
+                    <iframe title="Github Star Count" className="header__github-button" src="https://ghbtns.com/github-btn.html?user=eclipse-theia&repo=theia&type=star&count=true" frameBorder={0} scrolling={0} />
+                    <iframe title="Github Fork Count" className="header__github-button" src="https://ghbtns.com/github-btn.html?user=eclipse-theia&repo=theia&type=fork&count=true" frameBorder={0} scrolling={0} />
+                </div>
+                <h1 className="heading-primary">
+                    The Eclipse Theia Platform
+                </h1>
+                <h2 style={{ fontSize: '2.1rem' }}>
+                        An Open, Flexible and Extensible Platform to efficiently develop and deliver Cloud & Desktop IDEs and tools with modern web technologies. The <a href="#theiaide"><b>Theia IDE</b></a> is a standard IDE built on the Theia Platform.
+                </h2>
+                <div className="header__buttons">
+                        <a className="btn" href="#gettingstarted" target="_blank" rel="noopener noreferrer">Get started with the Theia Platform</a>
+                        <a className="btn btn--cta" href="https://try.theia-cloud.io/" rel="noopener">Try Theia IDE online</a>
+                        <a style ={{backgroundColor: "#0B5394", borderColor: "#0B5394"}} className="btn btn--cta" href="/#theiaide" rel="noopener">Get Theia IDE for desktop</a>
+                 </div>
+                </div>
+                <CommonNews/>
+        </header>
+    </StyledHeader>
+)
+
+export default PlatformHeader
diff --git a/src/components/index/TheiaIDEDownloads.js b/src/components/index/TheiaIDEDownloads.js
index ff888e0d..669f9fb3 100644
--- a/src/components/index/TheiaIDEDownloads.js
+++ b/src/components/index/TheiaIDEDownloads.js
@@ -104,7 +104,8 @@ const TheiaIDEDownloads = () => (
                 Help us make the Theia IDE even better, by <a href="https://github.com/eclipse-theia/theia/discussions">sharing your experience and suggestions</a>.
                 The features found in the Eclipse Theia IDE are based on Eclipse Theia and the available extensions/plugins. For more details please see the <a href="https://github.com/eclipse-theia/theia">Eclipse Theia GitHub Repository</a>. The Eclipse Theia IDE only packages existing Eclipse Theia functionality and installers. If you believe there is a mistake in packaging, something needs to be added to the packaging or the installers do not work properly, please <a href="https://github.com/eclipse-theia/theia-blueprint/issues/new/choose">open an issue on GitHub</a> to let us know.
                 <h1>Support</h1>
-                Need help with Theia? To get support by the community go to the <a href="https://github.com/eclipse-theia/theia/discussions">Discussions at GitHub</a>. To get professional support for Theia see the <a href="./support/">support page</a>.
+                Please refer to the <a href="docs/user_getting_started/">Theia IDE Documentation</a>.
+                Need further help with Theia? To get support by the community go to the <a href="https://github.com/eclipse-theia/theia/discussions">Discussions at GitHub</a>. To get professional support for Theia see the <a href="./support/">support page</a>.
             </div>
     
     </StyledHeader>
diff --git a/src/layouts/headwithschema.js b/src/layouts/headwithIDEschema.js
similarity index 53%
rename from src/layouts/headwithschema.js
rename to src/layouts/headwithIDEschema.js
index 932a9dfc..fbd0d6b3 100644
--- a/src/layouts/headwithschema.js
+++ b/src/layouts/headwithIDEschema.js
@@ -1,7 +1,7 @@
 import React from 'react'
 import BaseHead from './basehead'
 
-const HeadWithSchema = ({ canonical }) => (
+const HeadWithIDESchema = ({ canonical }) => (
   <>
     <BaseHead canonical={canonical} />
     {/* JSON-LD for Theia IDE */}
@@ -49,46 +49,7 @@ const HeadWithSchema = ({ canonical }) => (
         })
       }}
     />
-    {/* JSON-LD for Theia Platform */}
-    <script
-      type="application/ld+json"
-      dangerouslySetInnerHTML={{
-        __html: JSON.stringify({
-          "@context": "https://schema.org",
-          "@type": "SoftwareApplication",
-          "name": "Theia Platform",
-          "url": "https://theia-ide.org/",
-          "image": "https://theia-ide.org/static/TheiaPlatform.png",
-          "description": "Theia Platform is an extensible open-source framework for building customizable integrated development environments (IDEs) for desktop and web.",
-          "applicationCategory": "DeveloperApplication",
-          "applicationSubCategory": "FrameworkApplication",
-          "softwareRequirements": "Compatible with VS Code extensions",
-          "operatingSystem": "Linux, macOS, Windows",
-          "author": {
-            "@type": "Organization",
-            "name": "Eclipse Foundation",
-            "url": "https://www.eclipse.org/"
-          },
-          "publisher": {
-            "@type": "Organization",
-            "name": "Eclipse Foundation",
-            "url": "https://www.eclipse.org/"
-          },
-          "keywords": [
-            "custom IDE", "build custom IDE", "custom IDE Framework",
-            "alternative VS Code", "alternative Code OSS", "build custom tool",
-            "custom tool framework"
-          ],
-          "license": "Eclipse Public License 2.0",
-          "featureList": [
-            "AI-powered", "Open-source", "Build tailored IDEs and Tools",
-            "Cross-platform support", "VS Code extension compatibility",
-            "Desktop, browser and cloud support"
-          ]
-        })
-      }}
-    />
   </>
 )
 
-export default HeadWithSchema
+export default HeadWithIDESchema
diff --git a/src/layouts/headwithPlatformschema.js b/src/layouts/headwithPlatformschema.js
new file mode 100644
index 00000000..4b610c76
--- /dev/null
+++ b/src/layouts/headwithPlatformschema.js
@@ -0,0 +1,49 @@
+import React from 'react'
+import BaseHead from './basehead'
+
+const HeadWithPlatformSchema = ({ canonical }) => (
+  <>
+    <BaseHead canonical={canonical} />
+    {/* JSON-LD for Theia Platform */}
+    <script
+      type="application/ld+json"
+      dangerouslySetInnerHTML={{
+        __html: JSON.stringify({
+          "@context": "https://schema.org",
+          "@type": "SoftwareApplication",
+          "name": "Theia Platform",
+          "url": "https://theia-ide.org/",
+          "image": "https://theia-ide.org/static/TheiaPlatform.png",
+          "description": "Theia Platform is an extensible open-source framework for building customizable integrated development environments (IDEs) for desktop and web.",
+          "applicationCategory": "DeveloperApplication",
+          "applicationSubCategory": "FrameworkApplication",
+          "softwareRequirements": "Compatible with VS Code extensions",
+          "operatingSystem": "Linux, macOS, Windows",
+          "author": {
+            "@type": "Organization",
+            "name": "Eclipse Foundation",
+            "url": "https://www.eclipse.org/"
+          },
+          "publisher": {
+            "@type": "Organization",
+            "name": "Eclipse Foundation",
+            "url": "https://www.eclipse.org/"
+          },
+          "keywords": [
+            "custom IDE", "build custom IDE", "custom IDE Framework",
+            "alternative VS Code", "alternative Code OSS", "build custom tool",
+            "custom tool framework"
+          ],
+          "license": "Eclipse Public License 2.0",
+          "featureList": [
+            "AI-powered", "Open-source", "Build tailored IDEs and Tools",
+            "Cross-platform support", "VS Code extension compatibility",
+            "Desktop, browser and cloud support"
+          ]
+        })
+      }}
+    />
+  </>
+)
+
+export default HeadWithPlatformSchema
diff --git a/src/pages/index.js b/src/pages/index.js
index 615fd403..99f1d9d0 100644
--- a/src/pages/index.js
+++ b/src/pages/index.js
@@ -1,48 +1,22 @@
-/********************************************************************************
- * Copyright (C) 2019 TypeFox and others.
- *
- * This program and the accompanying materials are made available under the
- * terms of the Eclipse Public License v. 2.0 which is available at
- * http://www.eclipse.org/legal/epl-2.0.
- *
- * This Source Code may also be made available under the following Secondary
- * Licenses when the conditions for such availability set forth in the Eclipse
- * Public License v. 2.0 are satisfied: GNU General Public License, version 2
- * with the GNU Classpath Exception which is available at
- * https://www.gnu.org/software/classpath/license.html.
- *
- * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
- ********************************************************************************/
+import React from 'react';
 
- import React from 'react'
+import Layout from '../layouts/layout';
+import Header from '../components/index/Header';
+import TheiaIDEFeatures from '../components/index/TheiaIDEFeatures';
+import TheiaIDEHeader from '../components/index/TheiaIDEHeader';
+import VSCodeExtensions from '../components/index/VSCodeExtensions';
+import TheiaIDEDownloads from '../components/index/TheiaIDEDownloads';
+import TheiaIDEExtensible from '../components/index/TheiaIDEExtensible';
+import Footer from '../components/Footer';
+import HeadWithIDESchema from '../layouts/headwithIDEschema';
 
-import Layout from '../layouts/layout'
-import Header from '../components/index/Header'
-import Features from '../components/index/Features'
-import Footer from '../components/Footer'
-import ContributorsAndAdopters from '../components/index/ContributorsAndAdopters'
-import Products from '../components/index/Products'
-import GettingStarted from '../components/index/GettingStarted'
-import IntrosToTheia from '../components/index/IntrosToTheia'
-import TheiaIDEFeatures from '../components/index/TheiaIDEFeatures'
-import TheiaIDEHeader from '../components/index/TheiaIDEHeader'
-import VSCodeExtensions from '../components/index/VSCodeExtensions'
-import TheiaIDEDownloads from '../components/index/TheiaIDEDownloads'
-import TheiaIDEExtensible from '../components/index/TheiaIDEExtensible'
-import HeadWithSchema from '../layouts/headwithschema'
-
-export const Head = HeadWithSchema
+export const Head = HeadWithIDESchema
 
 export default ({ pageContext }) => {
     return (
         <Layout canonical='/'>
             <Header />
             <main role="main">
-                <Products />
-                <Features />
-                <ContributorsAndAdopters adopters={pageContext.adopters}/>
-                <GettingStarted/>
-                <IntrosToTheia />
                 <TheiaIDEHeader />
                 <VSCodeExtensions />
                 <TheiaIDEFeatures adopters={pageContext.adopters}/>
@@ -52,4 +26,4 @@ export default ({ pageContext }) => {
             <Footer background={true} />
         </Layout>
     )
-}
+}
\ No newline at end of file
diff --git a/src/pages/theia-platform.js b/src/pages/theia-platform.js
new file mode 100644
index 00000000..a735feb5
--- /dev/null
+++ b/src/pages/theia-platform.js
@@ -0,0 +1,44 @@
+/********************************************************************************
+ * Copyright (C) 2024 EclipseSource and others.
+ *
+ * This program and the accompanying materials are made available under the
+ * terms of the Eclipse Public License v. 2.0 which is available at
+ * http://www.eclipse.org/legal/epl-2.0.
+ *
+ * This Source Code may also be made available under the following Secondary
+ * Licenses when the conditions for such availability set forth in the Eclipse
+ * Public License v. 2.0 are satisfied: GNU General Public License, version 2
+ * with the GNU Classpath Exception which is available at
+ * https://www.gnu.org/software/classpath/license.html.
+ *
+ * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
+ ********************************************************************************/
+import React from 'react';
+
+import Layout from '../layouts/layout'
+import PlatformHeader from '../components/index/PlatformHeader'
+import Features from '../components/index/Features'
+import Footer from '../components/Footer'
+import ContributorsAndAdopters from '../components/index/ContributorsAndAdopters'
+import Products from '../components/index/Products'
+import GettingStarted from '../components/index/GettingStarted'
+import IntrosToTheia from '../components/index/IntrosToTheia'
+import HeadWithPlatformSchema from '../layouts/headwithPlatformschema';
+
+export const Head = HeadWithPlatformSchema
+
+export default ({ pageContext }) => {
+    return (
+        <Layout canonical='/'>
+            <PlatformHeader />
+            <main role="main">
+                <Products />
+                <Features />
+                <ContributorsAndAdopters adopters={pageContext.adopters}/>
+                <GettingStarted/>
+                <IntrosToTheia />
+            </main>
+            <Footer background={true} />
+        </Layout>
+    )
+}
\ No newline at end of file