Refactor HEAD and add schema information (#648)

fixed #647 Signed-off-by: Jonas Helming <[email protected]>
eclipse-theia · Nov 8, 2024 · e7f5825 · e7f5825
1 parent dc8171f
commit e7f5825
Show file tree

Hide file tree

Showing 16 changed files with 155 additions and 94 deletions.
diff --git a/gatsby-config.js b/gatsby-config.js
@@ -6,7 +6,6 @@ module.exports = {
     },
     plugins: [
         'gatsby-plugin-emotion',
-        'gatsby-plugin-react-helmet',
         {
             resolve: 'gatsby-source-filesystem',
             options: {

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -16,12 +16,10 @@
     "@babel/core": "^7.26.0",
     "@emotion/react": "^11.13.3",
     "@emotion/styled": "^11.13.0",
-    "@types/react-helmet": "^6.1.11",
     "env-cmd": "^10.1.0",
     "gatsby": "^5.13.7",
     "gatsby-plugin-catch-links": "^5.13.1",
     "gatsby-plugin-emotion": "^8.13.1",
-    "gatsby-plugin-react-helmet": "^6.13.1",
     "gatsby-remark-autolink-headers": "^6.13.1",
     "gatsby-remark-external-links": "0.0.4",
     "gatsby-remark-prismjs": "^7.13.2",
@@ -32,7 +30,6 @@
     "prismjs": "^1.29.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "react-helmet": "^6.1.0",
     "react-tweet-embed": "^2.0.0",
     "react-twitter-embed": "^4.0.4",
     "reactjs-popup": "^2.0.6",

diff --git a/src/layouts/basehead.js b/src/layouts/basehead.js
@@ -0,0 +1,26 @@
+import React from 'react'
+import useSiteMetadata from '../hooks/use-site-metadata'
+import AppleTouchIcon from '../resources/apple-touch-icon.png'
+import Favicon from '../resources/theia-favicon.svg'
+import Favicon196 from '../resources/theia-favicon-196x196.png'
+
+const BaseHead = ({ canonical }) => {
+    const { title, description } = useSiteMetadata()
+    return (
+      <>
+        <html lang="en" />
+        <title>{title}</title>
+        <meta name="description" content={description} />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <meta name="theme-color" content="#FFFFFF" />
+        {canonical && <link rel="canonical" href={`https://theia-ide.org${canonical}`} />}
+        <link rel="apple-touch-icon" type="image/png" href={AppleTouchIcon} sizes="180x180" />
+        <link rel="icon" type="image/png" href={Favicon196} sizes="196x196" />
+        <link rel="icon" type="image/svg+xml" href={Favicon} sizes="any" />
+        <link href="https://fonts.googleapis.com/css?family=Anonymous+Pro&display=swap" rel="stylesheet" />
+        <link href="https://fonts.googleapis.com/css?family=Montserrat:400,500&display=swap" rel="stylesheet" />
+      </>
+    )
+}
+
+export default BaseHead
diff --git a/src/layouts/headwithschema.js b/src/layouts/headwithschema.js
@@ -0,0 +1,94 @@
+import React from 'react'
+import BaseHead from './basehead'
+
+const HeadWithSchema = ({ canonical }) => (
+  <>
+    <BaseHead canonical={canonical} />
+    {/* JSON-LD for Theia IDE */}
+    <script
+      type="application/ld+json"
+      dangerouslySetInnerHTML={{
+        __html: JSON.stringify({
+          "@context": "https://schema.org",
+          "@type": "SoftwareApplication",
+          "name": "Theia IDE",
+          "url": "https://theia-ide.org/#theiaide",
+          "image": "https://theia-ide.org/static/TheiaIDE.png",
+          "description": "Theia IDE is a modern, open-source, and flexible development environment (IDE) for developers on desktop and browser, featuring advanced AI-powered capabilities with full control over AI interactions.",
+          "operatingSystem": "Linux, macOS, Windows",
+          "applicationCategory": "DeveloperApplication",
+          "applicationSubCategory": "IntegratedDevelopmentEnvironment",
+          "softwareVersion": "1.55.0",
+          "softwareRequirements": "Compatible with VS Code extensions",
+          "author": {
+            "@type": "Organization",
+            "name": "Eclipse Foundation",
+            "url": "https://www.eclipse.org/"
+          },
+          "publisher": {
+            "@type": "Organization",
+            "name": "Eclipse Foundation",
+            "url": "https://www.eclipse.org/"
+          },
+          "releaseNotes": "https://eclipsesource.com/blogs/2024/11/07/eclipse-theia-1-54-release-news-and-noteworthy/",
+          "keywords": [
+            "open-source IDE",
+            "development environment",
+            "AI-powered IDE",
+            "VS Code extensions",
+            "VS Code alternative"
+          ],
+          "license": "Eclipse Public License 2.0",
+          "featureList": [
+            "AI-powered",
+            "Open-source",
+            "Compatible with VS Code extensions",
+            "Cross-platform support",
+            "Runs in browser and desktop environments"
+          ]
+        })
+      }}
+    />
+    {/* 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
diff --git a/src/layouts/layout.js b/src/layouts/layout.js
@@ -16,19 +16,11 @@
 
 import React from 'react'
 import { Global, css } from '@emotion/react'
-import Helmet from 'react-helmet'
-import useSiteMetadata from '../hooks/use-site-metadata'
 import { fontSizes, colors, grid, breakpoints } from '../utils/variables'
-import Favicon from '../resources/theia-favicon.svg'
-import Favicon196 from '../resources/theia-favicon-196x196.png'
-import AppleTouchIcon from '../resources/apple-touch-icon.png'
+const Layout = ({ children }) => (
+  <>
+    <Global styles={css`
 
-
-const Layout = ({ children, canonical }) => {
-    const { title, description } = useSiteMetadata()
-    return (
-        <>
-            <Global styles={css`
                 /* --------------------------------------------- */
                 /* ----- Basic Setup ----- */
                 /* --------------------------------------------- */
@@ -191,29 +183,11 @@ const Layout = ({ children, canonical }) => {
                     border: 1px solid #cfcece;
                     outline: none;
                 }
-                
-
-            `} />
-            <Helmet>
-                <html lang='en' />
-                <title>{title}</title>
-                <meta name='description' content={description} />
-                <meta name="viewport" content="width=device-width, initial-scale=1" />
-                <meta name="theme-color" content="#FFFFFF" />
-                {
-                    canonical ? <link rel="canonical" href={`https://theia-ide.org${canonical}`} /> : null
-                }
-                <link rel="apple-touch-icon" type="image/png" href={AppleTouchIcon} sizes="180x180"/>
-                <link rel="icon" type="image/png" href={Favicon196} sizes="196x196"/>
-                <link rel="icon" type="image/svg+xml" href={Favicon} sizes="any"/>
-                <link href="https://fonts.googleapis.com/css?family=Anonymous+Pro&display=swap" rel="stylesheet" />
-                <link href="https://fonts.googleapis.com/css?family=Montserrat:400,500&display=swap" rel="stylesheet" />
-            </Helmet>
-            <>
-                {children}
-            </>
-        </>
-    )
-}
-
-export default Layout
+    `} />
+    <>
+      {children}
+    </>
+  </>
+)
+
+export default Layout
diff --git a/src/pages/404.js b/src/pages/404.js
@@ -24,6 +24,7 @@ import styled from '@emotion/styled'
 import { breakpoints } from '../utils/variables'
 import Nav from '../components/Nav'
 import { Link } from 'gatsby'
+import BaseHead from '../layouts/basehead'
 
 const StyledNotFoundPage = styled.div`
     background-image: url(${Background});
@@ -63,6 +64,8 @@ const StyledNotFoundPage = styled.div`
     }
 
 `
+export const Head = BaseHead
+
 
 const NotFoundPage = () => (
     <Layout>

diff --git a/src/pages/blogs.js b/src/pages/blogs.js
@@ -18,6 +18,11 @@ import React from 'react'
 import Layout from '../layouts/layout'
 import Blogs from '../components/Blogs'
 import Footer from '../components/Footer'
+import BaseHead from '../layouts/basehead'
+
+
+export const Head = BaseHead
+
 
 export default () => {
     return (

diff --git a/src/pages/docs.js b/src/pages/docs.js
@@ -17,6 +17,7 @@
 import React from 'react'
 import DocsLayout from '../layouts/docs-layout'
 import { graphql } from 'gatsby'
+import BaseHead from '../layouts/basehead'
 
 export const query = graphql`
     query {
@@ -31,6 +32,7 @@ export const query = graphql`
         }
     }
 `
+export const Head = BaseHead
 
 const Docs = ({ data }) => {
     const context =  { next: "/docs/architecture/", nextTitle: "Architecture Overview" }

diff --git a/src/pages/index.js b/src/pages/index.js
@@ -29,7 +29,9 @@ 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 default ({ pageContext }) => {
     return (

diff --git a/src/pages/releases.js b/src/pages/releases.js
@@ -18,6 +18,9 @@ import React from 'react'
 import Layout from '../layouts/layout'
 import Releases from '../components/Releases'
 import Footer from '../components/Footer'
+import BaseHead from '../layouts/basehead'
+
+export const Head = BaseHead
 
 export default () => {
     return (

diff --git a/src/pages/resources.js b/src/pages/resources.js
@@ -18,6 +18,9 @@ import React from 'react'
 import Layout from '../layouts/layout'
 import Resources from '../components/Resources'
 import Footer from '../components/Footer'
+import BaseHead from '../layouts/basehead'
+
+export const Head = BaseHead
 
 export default () => {
     return (

diff --git a/src/pages/support.js b/src/pages/support.js
@@ -18,6 +18,10 @@ import React from 'react'
 import Layout from '../layouts/layout'
 import Support from '../components/Support'
 import Footer from '../components/Footer'
+import BaseHead from '../layouts/basehead'
+
+
+export const Head = BaseHead
 
 export default () => {
     return (