Skip to content

Commit

Permalink
Split Theia IDE and platform website (#659)
Browse files Browse the repository at this point in the history
* Split Theia IDE and platform website

fixed #658
  • Loading branch information
JonasHelming authored Dec 2, 2024
1 parent 0b75c9c commit 2be76a5
Show file tree
Hide file tree
Showing 10 changed files with 281 additions and 97 deletions.
2 changes: 1 addition & 1 deletion gatsby-node.js
Original file line number Diff line number Diff line change
Expand Up @@ -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', {
Expand Down
5 changes: 4 additions & 1 deletion src/components/Nav.js
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
26 changes: 26 additions & 0 deletions src/components/index/CommonNews.js
Original file line number Diff line number Diff line change
@@ -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
30 changes: 15 additions & 15 deletions src/components/index/Header.js
Original file line number Diff line number Diff line change
Expand Up @@ -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'

Expand Down Expand Up @@ -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>
Expand Down
126 changes: 126 additions & 0 deletions src/components/index/PlatformHeader.js
Original file line number Diff line number Diff line change
@@ -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
3 changes: 2 additions & 1 deletion src/components/index/TheiaIDEDownloads.js
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
43 changes: 2 additions & 41 deletions src/layouts/headwithschema.js → src/layouts/headwithIDEschema.js
Original file line number Diff line number Diff line change
@@ -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 */}
Expand Down Expand Up @@ -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
49 changes: 49 additions & 0 deletions src/layouts/headwithPlatformschema.js
Original file line number Diff line number Diff line change
@@ -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
Loading

0 comments on commit 2be76a5

Please sign in to comment.