.features {
  display: flex;
  align-items: center;
  padding: 2rem 0;
  width: 100%;
}

.featureSvg {
  height: 200px;
  width: 200px;
}


/**
 * Any CSS included here will be global. The classic template
 * bundles Infima by default. Infima is a CSS framework designed to
 * work well for content-centric websites.
 */

/* You can override the default Infima variables here. */
@font-face {
  font-family: 'roboto';
  font-weight: 300;
  font-style: normal;
  src: url('/static/fonts/roboto/Roboto-Light.ttf') format(ttf);
}

@font-face {
  font-family: 'roboto';
  font-weight: 500;
  font-style: normal;
  src: url('/static/fonts/roboto/Roboto-Regular.ttf') format(ttf);
}

@font-face {
  font-family: 'roboto';
  font-weight: 600;
  font-style: normal;
  src: url('/static/fonts/roboto/Roboto-Bold.ttf') format(ttf);
}

@font-face {
  font-family: 'roboto';
  font-weight: 700;
  font-style: normal;
  src: url('/static/fonts/roboto/Roboto-Bold.ttf') format(ttf);
}

:root 
[data-theme='light']{
--ifm-font-family-monospace: 'roboto', Arial, sans-serif;
--ifm-font-family-base: 'roboto', Arial, sans-serif;
--ifm-color-primary: #009bc5;
--ifm-color-primary-dark: #008bb1;
--ifm-color-primary-darker: #0084a7;
--ifm-color-primary-darkest: #006c8a;
--ifm-color-primary-light: #00aad9;
--ifm-color-primary-lighter: #00b2e3;
--ifm-color-primary-lightest: #009BC5;
  --ifm-code-font-size: 95%;
}
[data-theme='dark']{
--ifm-color-primary: #00c4fa;
--ifm-color-primary-dark: #00b0e1;
--ifm-color-primary-darker: #00a7d4;
--ifm-color-primary-darkest: #0089af;
--ifm-color-primary-light: #14ccff;
--ifm-color-primary-lighter: #21cfff;
--ifm-color-primary-lightest: #46d7ff;
}

li::marker {
  font-family: Arial;
}

.docusaurus-highlight-code-line {
  background-color: rgba(0, 0, 0, 0.1);
  display: block;
  margin: 0 calc(-1 * var(--ifm-pre-padding));
  padding: 0 var(--ifm-pre-padding);
}

html[data-theme='dark'] .docusaurus-highlight-code-line {
  background-color: rgba(0, 0, 0, 0.3);
}

/**
 * CSS files with the .module.css suffix will be treated as CSS modules
 * and scoped locally.
 */

.heroBanner {
  padding: 4rem 0;
  text-align: center;
  position: relative;
  overflow: hidden;
}

@media screen and (max-width: 966px) {
  .heroBanner {
    padding: 2rem;
  }
}

.buttons {
  display: flex;
  align-items: center;
  justify-content: center;
}


module.exports = {
  presets: [require.resolve('@docusaurus/core/lib/babel/preset')],
};


// @ts-check
// Note: type annotations allow type checking and IDEs autocompletion

const lightCodeTheme = require('prism-react-renderer/themes/github');
const darkCodeTheme = require('prism-react-renderer/themes/dracula');

/** @type {import('@docusaurus/types').Config} */
const config = {
  title: 'mogenius Docs',
  tagline: 'Empowering Platform Engineering',
  url: 'https://docs.mogenius.com',
  baseUrl: '/',
  onBrokenLinks: 'warn',
  onBrokenMarkdownLinks: 'warn',
  favicon: 'img/favicon.ico',
  organizationName: 'mogenius', // Usually your GitHub org/user name.
  projectName: 'documentation', // Usually your repo name.
  // blog: 'false',
  /**plugins: ['@docusaurus/plugin-ideal-image'],*/

  presets: [
    [
      '@docusaurus/preset-classic',
      /** @type {import('@docusaurus/preset-classic').Options} */
      ({
        docs: {
          sidebarPath: require.resolve('./sidebars.js'),
          routeBasePath: '/',
          // Please change this to your repo.
          // editUrl: 'https://github.com/mogenius/docs',
        },
       blog: false,
          //{
          // showReadingTime: true,
          // Please change this to your repo.
          // editUrl:'https://github.com/mogenius/docs',
          //  },
        theme: {
          customCss: require.resolve('./src/css/custom.css'),
        },
      }),
    ],
  ],
  plugins: [
    [
      '@docusaurus/plugin-client-redirects',
      {
        redirects: [
          {
          to: '/',
          from: ['/tutorials/*']
          }
        ],
        // createRedirects(existingPath) {
        // if (existingPath.includes('/')) {
            // Redirect from /tutorials to Home
        //    return [
        //      existingPath.replace('/tutorials', '/'),
        //    ];
        //  }
        //  return undefined; // Return a falsy value: no redirect created
        // },
        },
    ],
  ],

  themeConfig:
    /** @type {import('@docusaurus/preset-classic').ThemeConfig} */
    ({ 
      Image: 'img/meta-image.jpeg',
      metadata: [
        {name: 'twitter:card', content: 'img/meta-image.jpeg'},
        {name: 'og:image', content: 'img/meta-image.jpeg'},
      ],
      colorMode: {
        defaultMode: 'dark',
        disableSwitch: false,
      },    
       navbar: {
        title: '',
        logo: {
          alt: 'mogenius logo',
          src: 'img/logo.svg',
          srcDark: 'img/logo_dark.svg',
          href: '/'
        },
        items: [
          
          {
          href: 'https://mogenius.com',
            label: 'Home',
            position: 'right',
          },
          {
            href: 'https://app.mogenius.com',
              label: 'Sign in',
              position: 'right',
            }
        ],
      },
      algolia: {
        // The application ID provided by Algolia
        appId: 'VV92UBZKRV',

        // Public API key: it is safe to commit it
        apiKey: 'ad3eaf5f78bccb6b6d24365364cc48cc',

        indexName: 'docs-dev',

        // Optional: see doc section below
        contextualSearch: true,
        
        // Optional: Algolia search parameters
        searchParameters: {},

        // Optional: path for search page that enabled by default (`false` to disable it)
        searchPagePath: 'search',

        //... other Algolia params
      },
      footer: {
        style: 'dark',
        links: [
          {
            title: 'More',
            items: [
              {
                label: 'mogenius platform',
                href: 'https://app.mogenius.com',
              },
              {
                label: 'mogenius status',
                href: 'https://status.mogenius.com',
              },
              {
                label: 'API reference',
                href: 'https://api-docs.mogenius.com',
              },
              {
                label: 'Website',
                href: 'https://mogenius.com',
              },
            ],
          },
          
          {
            title: 'Community',
            items: [
              {
                label: 'Twitter',
                href: 'https://twitter.com/mogenius',
              },
              {
                label: 'GitHub',
                href: 'https://github.com/mogenius',
              },
              {
                label: 'Feedback',
                href: 'https://feedback.mogenius.com',
              },
              {
                label: 'Blog',
                href: 'https://mogenius.com/blog',
              },
              {
                label: 'Newsletter',
                href: 'https://mogenius.com/newsletter',
              },
            ],
          },
          {
            title: 'Legal',
            items: [
              {
                label: 'Legal info',
                href: 'https://mogenius.com/legal-info',
              },
              {
                label: 'Privacy',
                href: 'https://mogenius.com/privacy',
              },
            ],
          },
        ],
        copyright: `Copyright © ${new Date().getFullYear()} mogenius. Built with Docusaurus.`,
      },
      prism: {
        theme: lightCodeTheme,
        darkTheme: darkCodeTheme,
      },
    }),
};

module.exports = config;

/**
 * Creating a sidebar enables you to:
 - create an ordered group of docs
 - render a sidebar for each doc of that group
 - provide next/previous navigation

 The sidebars can be generated from the filesystem, or explicitly defined here.

 Create as many sidebars as you want.
 */

// @ts-check

/** @type {import('@docusaurus/plugin-content-docs').SidebarsConfig} */
const sidebars = {
  // By default, Docusaurus generates a sidebar from the docs folder structure
  tutorialSidebar: [{type: 'autogenerated', dirName: '.'}],

  // But you can create a sidebar manually
  /*
  tutorialSidebar: [
    {
      type: 'category',
      label: 'Tutorial',
      items: ['hello'],
    },
  ],
   */
};

module.exports = sidebars;


import React from 'react';
import clsx from 'clsx';
import styles from './HomepageFeatures.module.css';

const FeatureList = [
  {
    title: 'Easy to Use',
    Svg: require('../../static/img/undraw_docusaurus_mountain.svg').default,
    description: (
      <>
        Docusaurus was designed from the ground up to be easily installed and
        used to get your website up and running quickly.
      </>
    ),
  },
  {
    title: 'Focus on What Matters',
    Svg: require('../../static/img/undraw_docusaurus_tree.svg').default,
    description: (
      <>
        Docusaurus lets you focus on your docs, and we&apos;ll do the chores. Go
        ahead and move your docs into the <code>docs</code> directory.
      </>
    ),
  },
  {
    title: 'Powered by React',
    Svg: require('../../static/img/undraw_docusaurus_react.svg').default,
    description: (
      <>
        Extend or customize your website layout by reusing React. Docusaurus can
        be extended while reusing the same header and footer.
      </>
    ),
  },
];

function Feature({Svg, title, description}) {
  return (
    <div className={clsx('col col--4')}>
      <div className="text--center">
        <Svg className={styles.featureSvg} alt={title} />
      </div>
      <div className="text--center padding-horiz--md">
        <h3>{title}</h3>
        <p>{description}</p>
      </div>
    </div>
  );
}

export default function HomepageFeatures() {
  return (
    <section className={styles.features}>
      <div className="container">
        <div className="row">
          {FeatureList.map((props, idx) => (
            <Feature key={idx} {...props} />
          ))}
        </div>
      </div>
    </section>
  );
}


import React from 'react';
import Layout from '@theme/Layout';

function Hello() {
  return (
    <Layout title="Hello">
      <div
        style={{
          display: 'flex',
          justifyContent: 'center',
          alignItems: 'center',
          height: '50vh',
          fontSize: '20px',
        }}>
<p>Hallo</p>
      </div>
    </Layout>
  );
}

export default Hello;

Demo workspace

Creating your own workspace

30-minute reset

mogenius Documentation

Connect your own Kubernetes cluster by installing the mogenius operator on the cluster.

Prepare a cluster in mogenius to connect with your own Kubernetes cluster.

Workload manager

Use Active Cluster Sync to synchronize Kubernetes workloads with Git.

Manage the mogenius operator, run updates and delete it from your cluster.

Here's a list of common issues with clusters on mogenius and how to fix them.

Get Started

Clusters

Workspaces

Deploying applications

Demo organization

Demo workspace

Creating your own workspace

30-minute reset

Get Started

Clusters

Workspaces

Deploying applications

​Demo workspace

​Creating your own workspace

​30-minute reset

Demo workspace

Creating your own workspace

30-minute reset