Skip to content

Commit

Permalink
Add Theia IDE
Browse files Browse the repository at this point in the history
fixed #468

Signed-off-by: Jonas Helming <jhelming@eclipsesource.com>
  • Loading branch information
JonasHelming committed Nov 10, 2023
1 parent baee324 commit 30027de
Show file tree
Hide file tree
Showing 25 changed files with 436 additions and 85 deletions.
3 changes: 2 additions & 1 deletion src/components/Nav.js
Original file line number Diff line number Diff line change
Expand Up @@ -228,7 +228,7 @@ class Nav extends React.Component {
</div>
<ul className={`nav__items ${this.state.isNavRendered ? 'navIsRendered' : 'navIsNotRendered' }`}>
<li className="nav__item">
<Link to="/#features" className="nav__link">Features</Link>
<Link to="https://github.com/eclipse-theia/theia" className="nav__link">Github</Link>
</li>
<li className="nav__item">
<Link to="/docs/" className="nav__link" activeClassName="active">Documentation</Link>
Expand All @@ -249,6 +249,7 @@ class Nav extends React.Component {
<li><Link to="/resources/" className="nav__link">Other Resources</Link></li>
</ul>
</li>

</ul>
</nav>
</StyledNav>
Expand Down
4 changes: 2 additions & 2 deletions src/components/index/GettingStarted.js
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,7 @@ const features = [
img: <img src={TryIt} alt="Try it" />,
title: "Try it",
paragraphs: [<>
Eclipse Theia is a framework for building tools and IDEs. You can try it by <a href="https://theia-ide.org/docs/composing_applications/">building your own IDE/tools based on Theia</a> within minutes. Alternatively, you can <a href="https://theia-ide.org/docs/blueprint_download/">download and try Theia Blueprint</a>, a template tool based on Eclipse Theia or <a href="https://try.theia-cloud.io/">try it online</a>.
Eclipse Theia is a framework for building tools and IDEs. You can try it by <a href="https://theia-ide.org/docs/composing_applications/">building your own IDE/tools based on Theia</a> within minutes. Alternatively, you can <a href="#theiaide">download and use the Theia IDE</a>, a template tool based on Eclipse Theia or <a href="https://try.theia-cloud.io/">try it online</a>.
</>]
},
{
Expand Down Expand Up @@ -72,7 +72,7 @@ const features = [
const GettingStarted = () => (
<StyledFeatures>
<section className="row features" id="gettingstarted">
<h3 className="heading-tertiary">Getting started with Eclipse Theia</h3>
<h3 className="heading-tertiary">Getting started with the Eclipse Theia Platform</h3>
<div className="feature__container">
{features.map(
(feature, i) => <Feature key={`${i}+${feature.title}`} {...feature} />
Expand Down
12 changes: 4 additions & 8 deletions src/components/index/Header.js
Original file line number Diff line number Diff line change
Expand Up @@ -109,20 +109,16 @@ const Header = () => (
</a>
</div>
</div>
<div className="header__buttons">
<a className="btn" href="https://github.com/eclipse-theia/theia" target="_blank" rel="noopener noreferrer">Theia Platform (you want to build a tool)</a>
<a className="btn btn--cta" href="https://try.theia-cloud.io/" rel="noopener">Theia IDE (you want to use an IDE)</a>
</div>
<h1 className="heading-primary">
The Eclipse Theia Platform
</h1>
<h2 style={{ fontSize: '2.1rem' }}>
An Open, Flexible and Extensible Cloud & Desktop IDE Platform Efficiently develop and deliver Cloud & Desktop IDEs and tools with modern web technologies.
An Open, Flexible and Extensible Cloud & Desktop IDE Platform Efficiently develop and deliver Cloud & Desktop IDEs and tools with modern web technologies. The <a href=""><b>Theia IDE</b></a> is a standard IDE built on the Theia Platform.
</h2>
<div className="header__buttons">
<a className="btn" href="https://github.com/eclipse-theia/theia" target="_blank" rel="noopener noreferrer">View on GitHub</a>
<a className="btn btn--cta" href="https://try.theia-cloud.io/" rel="noopener">Try online &nbsp;&nbsp;&rarr;</a>
<a className="btn btn--cta" href="/docs/blueprint_download/" rel="noopener">Try on desktop &nbsp;&nbsp;&rarr;</a>
<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="#theiaide" rel="noopener">Get Theia IDE for desktop</a>
</div>
</div>
<div className="header__banner">
Expand Down
4 changes: 2 additions & 2 deletions src/components/index/Promo.js
Original file line number Diff line number Diff line change
Expand Up @@ -38,12 +38,12 @@ const StyledPromo = styled.div`
}
&:not(:last-child) {
margin-bottom: 5rem;
margin-bottom: 2rem;
}
.promo__text {
width: 50%;
padding: 9rem 5rem;
padding: 1rem 3rem;
@media(max-width: ${breakpoints.md}) {
width: 100%;
Expand Down
124 changes: 124 additions & 0 deletions src/components/index/TheiaIDEDownloads.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,124 @@
/********************************************************************************
* 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 DocImage from '../DocImage'
import Nav from '../Nav'
import React from 'react'
import TheiaLogoDark from '../../resources/theia-logo-dark.svg'
import TheiaConLogo from '../../resources/theiacon-logo.svg'
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: 15rem;
}
&__banner {
padding: 15px;
text-align: center;
}
h1 {
margin-bottom: 1rem;
font-size: 2.2rem;
}
.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 TheiaIDEDownloads = () => (
<StyledHeader>
<div id="theiaidedownload" className="row">
<h1 >
Download Theia IDE
</h1>

NOTE: The Eclipse Theia IDE is currently in beta. While we are continuing to make improvements and add functionality, we welcome and value your feedback (see below).

<div className="header__buttons">
<a className="btn btn--cta" href="https://www.eclipse.org/downloads/download.php?file=/theia/latest/windows/TheiaBlueprint.exe&r=1" rel="noopener">Windows (latest)</a>
<a className="btn btn--cta" href="https://www.eclipse.org/downloads/download.php?file=/theia/latest/linux/TheiaBlueprint.AppImage&r=1" rel="noopener">Linux (latest)</a>
<a className="btn btn--cta" href="https://www.eclipse.org/downloads/download.php?file=/theia/latest/macos/TheiaBlueprint.dmg&r=1" rel="noopener">MacOS (latest)</a>
</div>

<center>
Already using Eclipse Theia Blueprint? Help us make Theia even better, by sharing your experience and suggestions <a href="https://github.com/eclipse-theia/theia/discussions">here</a>.
</center>
</div>
<div className="row">
<h1>Try Theia Blueprint Online</h1>
You can also <a href="https://try.theia-cloud.io/">try the latest version of Theia Blueprint online</a>. The online test version is limited to 30 minutes per session and hosted via <a href="https://github.com/eclipsesource/theia-cloud">Theia.cloud</a>.
<h1>Reporting Feature Requests and Bugs</h1>
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>Source Code</h1>
The source code for the Eclipse Theia IDE is available on <a href="https://github.com/eclipse-theia/theia-blueprint">GitHub</a>.
<h1>Customization</h1>
Please see <a href="http://localhost:8000/docs/blueprint_documentation">here</a> for documentation on how to customize the Eclipse Theia IDE.
<h1>Support</h1>
Need help with Theia? To get support by the community go to the <a href="https://community.theia-ide.org/">Discourse Theia forum</a> or the <a href="https://github.com/eclipse-theia/theia/discussions">Discussions at GitHub</a>. To get professional support for Theia see the <a href="http://localhost:8000/support/">support page</a>.
</div>

</StyledHeader>
)

export default TheiaIDEDownloads
27 changes: 14 additions & 13 deletions src/components/index/TheiaIDEFeatures.js
Original file line number Diff line number Diff line change
Expand Up @@ -16,40 +16,41 @@

import React from 'react'

import CompletionVideo from '../../resources/completion.mp4'
import TermianlVideo from '../../resources/terminal.mp4'
import CodeEditing from '../../resources/codeediting.mp4'
import ModernUX from '../../resources/modernux.mp4'
import LayoutVideo from '../../resources/layout.mp4'
import Extensible from '../../resources/extensible.mp4'
import Promo from './Promo'

const features = [
{
title: "Language Support",
para: <p>
Experience world-class code editing support in Theia IDE, integrated with the Language Server Protocol (LSP). This allows you to develop in almost any programming language, including Python, Java, JavaScript, C++, and more—all within one versatile environment.
Experience world-class code editing support in Theia IDE, integrated with the Language Server Protocol (LSP). Develop in almost any programming language, including Python, Java, JavaScript, C++, and more—all within one environment.
</p>,
videoSrc: CompletionVideo
},
{
title: "Modern UX",
para: <p>Elevate your development workflow with Theia IDE's flexible workbench layout and user experience. Featuring a dynamic toolbar, detachable views, and efficient tab management, our interface is designed to adapt to your needs, streamlining your projects for optimal productivity.</p>,
videoSrc: TermianlVideo
videoSrc: CodeEditing
},
{
title: "Extensible and Open",
para: <p>Unlock limitless possibilities with Theia IDE's seamless compatibility with the vast VS Code extension ecosystem. From robust linting tools to interactive notebook editors, customize your development experience like never before. Plus, enjoy the added confidence of a fully open-source platform governed by a vendor-neutral community. Streamline your workflow, enrich your toolset, and code on your own terms.
para: <p>Unlock limitless possibilities with Theia IDE's seamless compatibility with the VS Code extension ecosystem (see below). Plus, enjoy the added confidence of a fully open-source platform governed by a vendor-neutral community. Enrich your toolset on your own terms.

</p>,
videoSrc: LayoutVideo
videoSrc: Extensible
},
{
title: "Modern UX",
para: <p>Elevate your development workflow with Theia IDE's flexible workbench layout and user experience. Featuring a dynamic toolbar, detachable views, and efficient tab management, our interface is designed to adapt to your needs, streamlining your projects for optimal productivity.</p>,
videoSrc: ModernUX
}
]


const TheiaIDEFeatures = () => (
<section className="promos">

<div className="row">
{ features.map((promo, i) => <Promo key={i} {...promo} />) }
</div>
</section>

)

export default TheiaIDEFeatures
16 changes: 7 additions & 9 deletions src/components/index/TheiaIDEHeader.js
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ import DocImage from '../DocImage'
import Nav from '../Nav'
import React from 'react'
import TheiaLogoDark from '../../resources/theia-logo-dark.svg'
import TheiaConLogo from '../../resources/theiacon-logo.svg'
import TheiaIDELogo from '../../resources/TheiaIDE.svg'
import { breakpoints } from '../../utils/variables'
import styled from '@emotion/styled'

Expand All @@ -32,6 +32,7 @@ const StyledHeader = styled.div`
border-bottom: 10px solid #f8f8f8;
@media(max-width: ${breakpoints.xmd}) {
padding-top: 15rem;
}
&__logo-box {
margin-bottom: 3rem;
Expand All @@ -40,7 +41,7 @@ const StyledHeader = styled.div`
height: 3rem;
}
.banner__image {
height: 15rem;
height: 1rem;
}
&__banner {
padding: 15px;
Expand Down Expand Up @@ -88,16 +89,13 @@ const StyledHeader = styled.div`

const TheiaIDEHeader = () => (
<StyledHeader>
<header className='header' role="banner">
<div className="row">
<h1 className="heading-primary">
The Eclipse Theia IDE
</h1>
<div id="theiaide" className="row">
<h1>The Eclipse Theia IDE <img src={TheiaIDELogo} style={{height: '3rem'}}></img></h1>
<h2 style={{ fontSize: '2.1rem' }}>
A modern and open IDE for cloud and desktop. The Theia IDE is based on the Theia platform.
</h2>
<div className="header__buttons">
<a className="btn btn--cta" href="/docs/blueprint_download/" rel="noopener">Download &nbsp;&nbsp;&rarr;</a>
<a className="btn btn--cta" href="#theiaidedownload" rel="noopener">Download &nbsp;&nbsp;&rarr;</a>
<a className="btn btn--cta" href="https://try.theia-cloud.io/" rel="noopener">Try online &nbsp;&nbsp;&rarr;</a>
<a className="btn" href="https://github.com/eclipse-theia/theia" target="_blank" rel="noopener noreferrer">View on GitHub</a>
</div>
Expand All @@ -106,7 +104,7 @@ const TheiaIDEHeader = () => (
Please note that the Theia IDE is currently rebranded from its original name “Theia Blueprint”.
</h2></center>
</div>
</header>

</StyledHeader>
)

Expand Down
Loading

0 comments on commit 30027de

Please sign in to comment.