Getting started with Eclipse Theia
+Getting started with the Eclipse Theia Platform
{features.map(
(feature, i) =>
-
The Eclipse Theia Platform
- 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 Theia IDE is a standard IDE built on the Theia Platform.
- View on GitHub
- Try online →
- Try on desktop →
+ Get started with the Theia Platform
+ Try Theia IDE online
+ Get Theia IDE for desktop
diff --git a/src/components/index/Promo.js b/src/components/index/Promo.js
index 8a672a3f..cfa5d27f 100644
--- a/src/components/index/Promo.js
+++ b/src/components/index/Promo.js
@@ -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%;
diff --git a/src/components/index/TheiaIDEDownloads.js b/src/components/index/TheiaIDEDownloads.js
new file mode 100644
index 00000000..b0a96522
--- /dev/null
+++ b/src/components/index/TheiaIDEDownloads.js
@@ -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 = () => (
+
+
+)
+
+export default TheiaIDEDownloads
diff --git a/src/components/index/TheiaIDEFeatures.js b/src/components/index/TheiaIDEFeatures.js
index dba7ebfa..f54ebd54 100644
--- a/src/components/index/TheiaIDEFeatures.js
+++ b/src/components/index/TheiaIDEFeatures.js
@@ -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:
+
+
)
export default TheiaIDEFeatures
\ No newline at end of file
diff --git a/src/components/index/TheiaIDEHeader.js b/src/components/index/TheiaIDEHeader.js
index ff8eb264..e327b916 100644
--- a/src/components/index/TheiaIDEHeader.js
+++ b/src/components/index/TheiaIDEHeader.js
@@ -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'
@@ -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;
@@ -40,7 +41,7 @@ const StyledHeader = styled.div`
height: 3rem;
}
.banner__image {
- height: 15rem;
+ height: 1rem;
}
&__banner {
padding: 15px;
@@ -88,16 +89,13 @@ const StyledHeader = styled.div`
const TheiaIDEHeader = () => (
-
-
+
+ Already using Eclipse Theia Blueprint? Help us make Theia even better, by sharing your experience and suggestions here.
+
+
+ + Download Theia IDE +
+ + 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). + + + +
+
+
+ Try Theia Blueprint Online
+ You can also try the latest version of Theia Blueprint online. The online test version is limited to 30 minutes per session and hosted via Theia.cloud. +Reporting Feature Requests and Bugs
+ The features found in the Eclipse Theia IDE are based on Eclipse Theia and the available extensions/plugins. For more details please see the Eclipse Theia GitHub Repository. 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 open an issue on GitHub to let us know. +Source Code
+ The source code for the Eclipse Theia IDE is available on GitHub. +Customization
+ Please see here for documentation on how to customize the Eclipse Theia IDE. +Support
+ Need help with Theia? To get support by the community go to the Discourse Theia forum or the Discussions at GitHub. To get professional support for Theia see the support page. +- 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.
, - videoSrc: CompletionVideo - }, - { - title: "Modern UX", - para: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.
, - videoSrc: TermianlVideo + videoSrc: CodeEditing }, { title: "Extensible and Open", - para: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:
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.
, - videoSrc: LayoutVideo + videoSrc: Extensible + }, + { + title: "Modern UX", + para: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.
, + videoSrc: ModernUX } ] const TheiaIDEFeatures = () => ( -
{ features.map((promo, i) =>
-
- 
-
-## What is Eclipse Theia Blueprint?
-
-Eclipse Theia Blueprint is a **template** for building desktop-based products based on the Eclipse Theia platform, as well as to showcase Eclipse Theia capabilities. It is made up of a subset of existing Eclipse Theia features and extensions and can be easily downloaded and installed on all major operating system platforms (see below). Documentation is available to help you customize and build your own Eclipse Theia-based product.
-
-## Downloads
-
-NOTE: Eclipse Theia Blueprint is **currently in beta**. While we are continuing to make improvements and add functionality, we welcome and value your feedback (see below).
-
-
-
-
-
-Already using Eclipse Theia Blueprint? Help us make Theia even better, by sharing your experience and suggestions [here](https://github.com/eclipse-theia/theia/discussions).
-
-## Try Theia Blueprint Online
-
-You can also [try the latest version of Theia Blueprint online](https://try.theia-cloud.io/). The online test version is limited to 30 minutes per session and hosted via [Theia.cloud](https://github.com/eclipsesource/theia-cloud).
-
-## Reporting Feature Requests and Bugs
-
-The features found in Eclipse Theia Blueprint are based on Eclipse Theia and the available extensions/plugins. For more details please see the [Eclipse Theia GitHub Repository](https://github.com/eclipse-theia/theia).
-Eclipse Theia Blueprint 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 [open an issue on GitHub](https://github.com/eclipse-theia/theia-blueprint/issues/new/choose) to let us know.
-
-## Source Code
-
-The source code for Eclipse Theia Blueprint is available on [GitHub](https://github.com/eclipse-theia/theia-blueprint).
-
-## Documentation
-
-Please see [here](/docs/blueprint_documentation) for documentation on how to customize Eclipse Theia Blueprint.
-
-## Support
-
-Need help with Theia? To get support by the community go to the [Discourse Theia forum](https://community.theia-ide.org/) or the [Discussions at GitHub](https://github.com/eclipse-theia/theia/discussions). To get professional support for Theia see the [support page](/support/).
+Eclipse Theia Blueprint has been rebranded to "Theia IDE" and has moved to this page.
\ No newline at end of file
diff --git a/src/pages/index.js b/src/pages/index.js
index a7f367c1..2f3a837d 100644
--- a/src/pages/index.js
+++ b/src/pages/index.js
@@ -26,6 +26,8 @@ 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'
export default ({ pageContext }) => {
@@ -40,6 +42,8 @@ export default ({ pageContext }) => {
- The Eclipse Theia IDE -
+
+ The Eclipse Theia IDE
-
+
)
diff --git a/src/components/index/VSCodeExtensions.js b/src/components/index/VSCodeExtensions.js
new file mode 100644
index 00000000..47769dd9
--- /dev/null
+++ b/src/components/index/VSCodeExtensions.js
@@ -0,0 +1,128 @@
+/********************************************************************************
+ * Copyright (C) 2020 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 styled from '@emotion/styled'
+import { extensions } from '../../utils/data'
+import Popup from 'reactjs-popup';
+import 'reactjs-popup/dist/index.css';
+import { Swiper, SwiperSlide } from 'swiper/react';
+import 'swiper/swiper-bundle.min.css';
+import 'swiper/components/navigation/navigation.min.css'
+import SwiperCore, {
+ Autoplay, Navigation
+} from 'swiper/core';
+
+SwiperCore.use([Autoplay, Navigation]);
+
+const Styled = styled.div`
+ .products {
+ padding-bottom: 5rem;
+ margin-top: 4rem;
+ position: relative;
+ &__thumb {
+ height: calc(100% - 1.5em);
+ max-width: 100%;
+ object-fit: fill;
+ cursor: pointer;
+ display: block;
+ margin: auto;
+
+ &-container {
+ height: 12rem;
+ padding: 2px;
+ @media(min-width: 768px) {
+ text-align: center;
+ }
+ @media(max-width: 50rem) {
+ width: 40%;
+ margin-bottom: 4rem;
+ }
+ @media(max-width: 30rem) {
+ width: 100%;
+ }
+ }
+ &-popup {
+ height: 100%;
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+ }
+ }
+ }
+ .swiper-button-next, .swiper-button-prev {
+ color: black;
+ margin-top: calc(0px - (var(--swiper-navigation-size)/ 2));
+ }
+ @media(min-width: 1120px) {
+ .swiper-button-next {
+ right: -6rem;
+ }
+ .swiper-button-prev {
+ left: -6rem;
+ }
+ }
+`
+
+const VSCodeExtensions = () => (
+ The Eclipse Theia IDE 
A modern and open IDE for cloud and desktop. The Theia IDE is based on the Theia platform.
@@ -106,7 +104,7 @@ const TheiaIDEHeader = () => ( Please note that the Theia IDE is currently rebranded from its original name “Theia Blueprint”.
+
+
+
+ +
+ {
+ extensions.map((item, i) => (
+
+
+ ))
+ }
+
+
+
+
+
+)
+
+export default VSCodeExtensions
diff --git a/src/docs/blueprint_download.md b/src/docs/blueprint_download.md
index f02fcc02..0d5508e4 100644
--- a/src/docs/blueprint_download.md
+++ b/src/docs/blueprint_download.md
@@ -4,52 +4,4 @@ title: Eclipse Theia Blueprint
# Eclipse Theia Blueprint
-Most popular extensions for Theia
+From robust linting tools to interactive notebook editors, customize your development experience like never before. Explore the >3000 availabe extensions for the Theia IDE at open-vsx.org!
++ +
+ 
+
+ {item.alt}
+
-
-## What is Eclipse Theia Blueprint?
-
-Eclipse Theia Blueprint is a **template** for building desktop-based products based on the Eclipse Theia platform, as well as to showcase Eclipse Theia capabilities. It is made up of a subset of existing Eclipse Theia features and extensions and can be easily downloaded and installed on all major operating system platforms (see below). Documentation is available to help you customize and build your own Eclipse Theia-based product.
-
-## Downloads
-
-NOTE: Eclipse Theia Blueprint is **currently in beta**. While we are continuing to make improvements and add functionality, we welcome and value your feedback (see below).
-
-| Windows | -Linux | -macOS | -
|---|---|---|
| Download latest | -Download latest | -Download latest | -