From c164ecc7c5e45ab7eb849a90a95f6b4d70bca2c5 Mon Sep 17 00:00:00 2001 From: Jonas Helming Date: Mon, 6 Nov 2023 16:11:00 +0100 Subject: [PATCH] Add Theia IDE fixed #468 Signed-off-by: Jonas Helming --- src/components/Nav.js | 3 +- src/components/index/GettingStarted.js | 4 +- src/components/index/Header.js | 12 +- src/components/index/Promo.js | 4 +- src/components/index/TheiaIDEDownloads.js | 124 +++++++++++++++++++++ src/components/index/TheiaIDEFeatures.js | 27 ++--- src/components/index/TheiaIDEHeader.js | 16 ++- src/components/index/VSCodeExtensions.js | 128 ++++++++++++++++++++++ src/docs/blueprint_download.md | 50 +-------- src/pages/index.js | 4 + src/resources/TheiaIDE.png | Bin 0 -> 35859 bytes src/resources/TheiaIDE.svg | 90 +++++++++++++++ src/resources/codeediting.mp4 | Bin 0 -> 79017 bytes src/resources/extensible.mp4 | Bin 0 -> 56281 bytes src/resources/extensions/docker.png | Bin 0 -> 50112 bytes src/resources/extensions/eslint.png | Bin 0 -> 31940 bytes src/resources/extensions/github.png | Bin 0 -> 16717 bytes src/resources/extensions/gitlens.png | Bin 0 -> 19078 bytes src/resources/extensions/go.png | Bin 0 -> 2936 bytes src/resources/extensions/java.png | Bin 0 -> 10612 bytes src/resources/extensions/npm.png | Bin 0 -> 523 bytes src/resources/extensions/python.png | Bin 0 -> 48597 bytes src/resources/extensions/yaml.png | Bin 0 -> 9569 bytes src/resources/modernux.mp4 | Bin 0 -> 523977 bytes src/utils/data.js | 59 +++++++++- 25 files changed, 436 insertions(+), 85 deletions(-) create mode 100644 src/components/index/TheiaIDEDownloads.js create mode 100644 src/components/index/VSCodeExtensions.js create mode 100644 src/resources/TheiaIDE.png create mode 100644 src/resources/TheiaIDE.svg create mode 100644 src/resources/codeediting.mp4 create mode 100644 src/resources/extensible.mp4 create mode 100644 src/resources/extensions/docker.png create mode 100644 src/resources/extensions/eslint.png create mode 100644 src/resources/extensions/github.png create mode 100644 src/resources/extensions/gitlens.png create mode 100644 src/resources/extensions/go.png create mode 100644 src/resources/extensions/java.png create mode 100644 src/resources/extensions/npm.png create mode 100644 src/resources/extensions/python.png create mode 100644 src/resources/extensions/yaml.png create mode 100644 src/resources/modernux.mp4 diff --git a/src/components/Nav.js b/src/components/Nav.js index 0b862d1c..1d8e2ec6 100644 --- a/src/components/Nav.js +++ b/src/components/Nav.js @@ -228,7 +228,7 @@ class Nav extends React.Component { + diff --git a/src/components/index/GettingStarted.js b/src/components/index/GettingStarted.js index 21ea3b2e..246d7d81 100644 --- a/src/components/index/GettingStarted.js +++ b/src/components/index/GettingStarted.js @@ -43,7 +43,7 @@ const features = [ img: Try it, title: "Try it", paragraphs: [<> - Eclipse Theia is a framework for building tools and IDEs. You can try it by building your own IDE/tools based on Theia within minutes. Alternatively, you can download and try Theia Blueprint, a template tool based on Eclipse Theia or try it online. + Eclipse Theia is a framework for building tools and IDEs. You can try it by building your own IDE/tools based on Theia within minutes. Alternatively, you can download and use the Theia IDE, a template tool based on Eclipse Theia or try it online. ] }, { @@ -72,7 +72,7 @@ const features = [ const GettingStarted = () => (
-

Getting started with Eclipse Theia

+

Getting started with the Eclipse Theia Platform

{features.map( (feature, i) => diff --git a/src/components/index/Header.js b/src/components/index/Header.js index 9e247d7a..9ceaad11 100644 --- a/src/components/index/Header.js +++ b/src/components/index/Header.js @@ -109,20 +109,16 @@ const Header = () => (
-
- Theia Platform (you want to build a tool) - Theia IDE (you want to use an IDE) -

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 = () => ( + +
+

+ 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). + + + +
+ Already using Eclipse Theia Blueprint? Help us make Theia even better, by sharing your experience and suggestions here. +
+
+
+

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. +
+ + +) + +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:

- 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) => ) }
-
+ ) 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 = () => ( -
-
-

- The Eclipse Theia IDE -

+
+

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”.
-
+ ) 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 = () => ( +
+ +
+

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!

+

+
+ + { + extensions.map((item, i) => ( + +
+ {item.alt} +
{item.alt}
+
+ + )) + } + +
+
+ +
+) + +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 -Theia Logo Blue - -## 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). - - - - - - - - - - - - - - - - -
WindowsLinuxmacOS
Download latestDownload latestDownload latest
- -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 }) => { + +