Develop

docusaurus.config.js

@@ -49,7 +49,8 @@ const config = {
   projectName: 'agilets',
   themes: ['@docusaurus/theme-live-codeblock'],
   plugins: [
-    'docusaurus-plugin-sass' /* @docusaurus/plugin-google-analytics (Not necessary because it automatically gets added) */,
+    'docusaurus-plugin-sass',
+    // @docusaurus/plugin-google-analytics (Not necessary because it automatically gets added)
   ],
   customFields: { ...customFields },
   themeConfig: {

src/_pages/LandingPage/components/HeaderView/components/Astronaut/index.tsx

@@ -0,0 +1,53 @@
+import { animated, useSpring } from 'react-spring';
+import React, { useEffect, useState } from 'react';
+import { useAgile } from '@agile-ts/react';
+import core from '../../../../../../core';
+import styles from './styles.module.css';
+import clsx from 'clsx';
+
+type Props = { className?: string };
+
+const Astronaut: React.FC<Props> = (props) => {
+  const { className } = props;
+  const [timing] = useState(200);
+  const [isRaised, setIsRaised] = React.useState(false);
+  const animated_Astronaut = useSpring({
+    transform: isRaised ? `translateY(-${30}px)` : `translateY(0px)`,
+    config: {
+      mass: 1,
+      tension: 400,
+      friction: 15,
+    },
+  });
+  const dark = useAgile(core.ui.ASTRONAUT_DARK);
+
+  useEffect(() => {
+    if (!isRaised) {
+      return;
+    }
+
+    const timeoutId = setTimeout(() => {
+      core.ui.toggleAstronautColor(!dark);
+      setIsRaised(false);
+    }, timing);
+
+    return () => clearTimeout(timeoutId);
+  }, [isRaised, timing]);
+
+  const trigger = () => setIsRaised(true);
+
+  return (
+    <div className={clsx(styles.Container, className)}>
+      <animated.img
+        onMouseEnter={trigger}
+        style={animated_Astronaut}
+        className={styles.Image}
+        src={`img/astronaut-${dark ? 'dark' : 'light'}.svg`}
+        alt={'Astronaut'}
+      />
+      <div className={styles.Text}>Poke me 👆 to mutate my color State.</div>
+    </div>
+  );
+};
+
+export default Astronaut;

src/_pages/LandingPage/components/HeaderView/components/Astronaut/styles.module.css

@@ -0,0 +1,16 @@
+.Container {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+}
+
+.Text {
+  color: var(--ifm-color-on-background-2);
+  margin-top: 30px;
+  align-self: center;
+}
+
+.Image {
+  width: 100%;
+  max-width: 800px;
+}

src/pages/LandingPage/components/HeaderView/index.tsx → src/_pages/LandingPage/components/HeaderView/index.tsx

@@ -1,12 +1,14 @@
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
-import HeaderTyper from '../../../../components/other/HeaderTyper';
+import HeaderTyper from './components/HeaderTyper';
 import Spacer from '../../../../components/other/Spacer';
 import PrimaryButton from '../../../../components/buttons/PrimaryButton';
 import GithubButton from '../../../../components/buttons/GithubButton';
 import styles from './styles.module.css';
 import { useWindowSize } from '../../../../hooks/useWindowSize';
-import MouseScroller from '../../../../components/other/MouseScroller';
+import MouseScroller from './components/MouseScroller';
+import { animated, useSpring } from 'react-spring';
+import Astronaut from './components/Astronaut';
 
 const HeaderView: React.FC = () => {
   const { siteConfig } = useDocusaurusContext();
@@ -52,11 +54,7 @@ const HeaderView: React.FC = () => {
           />
         </div>
       </div>
-      <img
-        className={styles.AstronautImage}
-        src={'img/astronaut-light.svg'}
-        alt={'Astronaut'}
-      />
+      <Astronaut className={styles.AstronautImage} />
       {windowHeight > 850 && windowHeight < 1200 && <MouseScroller />}
     </div>
   );

src/_pages/LandingPage/components/OtherFeaturesView/components/Cards/index.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+
+export interface CardInterface {
+  title: string;
+  description: string;
+  imagePath: string;
+}
+
+export type Props = { cards: CardInterface[]; startIndex?: number };
+
+const Cards: React.FC<CardInterface> = (props) => {
+  return (
+    <div>
+      <div>much todo</div>
+    </div>
+  );
+};
+
+export default Cards;

src/_pages/LandingPage/components/OtherFeaturesView/index.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import styles from './styles.module.css';
+import Spacer from '../../../../components/other/Spacer';
+
+const OtherFeaturesView: React.FC = () => {
+  return (
+    <div className={styles.Container}>
+      <Spacer height={30} />
+      <div>todo</div>
+    </div>
+  );
+};
+
+export default OtherFeaturesView;

src/_pages/LandingPage/components/OtherFeaturesView/styles.module.css

@@ -0,0 +1,9 @@
+.Container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 95%;
+  max-width: var(--ifm-container-width);
+  margin: 0 auto;
+  padding: 8rem 0;
+}

src/components/other/LiveCoder/components/LiveCoderReact/index.tsx → src/_pages/LandingPage/components/StartCodingView/components/LiveCoder/components/LiveCoderReact/index.tsx

@@ -1,17 +1,30 @@
 import * as React from 'react';
 import { LiveProvider, LiveEditor, LiveError, LivePreview } from 'react-live';
-import clsx from 'clsx';
 import styles from './styles.module.css';
 import { CodeSectionPropsInterface } from '../../index';
 import ReactLiveScope from '@theme/ReactLiveScope';
+import { useEffect, useState } from 'react';
 
 interface Props extends CodeSectionPropsInterface {}
 
 const LiveCoderReact: React.FC<Props> = (props) => {
   const { code, theme, transformCode } = props;
 
+  const [mounted, setMounted] = useState(false);
+  // The Prism theme on SSR is always the default theme but the site theme
+  // can be in a different mode. React hydration doesn't update DOM styles
+  // that come from SSR. Hence force a re-render after mounting to apply the
+  // current relevant styles. There will be a flash seen of the original
+  // styles seen using this current approach but that's probably ok. Fixing
+  // the flash will require changing the theming approach and is not worth it
+  // at this point.
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
   return (
     <LiveProvider
+      key={String(mounted)}
       code={code.replace(/\n$/, '')}
       transformCode={transformCode || ((code) => `${code};`)}
       theme={theme}

src/components/other/LiveCoder/index.tsx → src/_pages/LandingPage/components/StartCodingView/components/LiveCoder/index.tsx

@@ -4,12 +4,10 @@ import LiveCoderReact from './components/LiveCoderReact';
 import { PrismTheme } from 'prism-react-renderer';
 import { useState } from 'react';
 import LiveCodeNotFound from './components/LiveCodeNotFound';
-import FrameworkButton, {
-  FrameworkButtonProps,
-} from './components/FrameworkButton';
 import { FaReact, FaVuejs } from 'react-icons/all';
-import usePrismTheme from '../../../theme/hooks/usePrismTheme';
-import PlainButton from '../../buttons/PlainButton';
+import usePrismTheme from '@theme/hooks/usePrismTheme';
+import PlainButton from '../../../../../../components/buttons/PlainButton';
+import FrameworkButton from './components/FrameworkButton';
 
 type Props = {
   reactCode: string;

src/pages/LandingPage/components/StartCodingView/index.tsx → src/_pages/LandingPage/components/StartCodingView/index.tsx

@@ -1,8 +1,7 @@
 import React from 'react';
 import styles from './styles.module.css';
-import LiveCoder from '../../../../components/other/LiveCoder';
+import LiveCoder from './components/LiveCoder';
 import Spacer from '../../../../components/other/Spacer';
-import PlainButton from '../../../../components/buttons/PlainButton';
 
 const reactCode = `// Let's start by creating an Agile Instance
 const App = new Agile();

src/components/other/StatBadge/index.tsx → src/_pages/LandingPage/components/StatsView/components/StatBadge/index.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import styles from './styles.module.css';
 import { IconContext } from 'react-icons';
-import Icons, { IconTypes } from '../Icons';
+import Icons, { IconTypes } from '../../../../../../components/other/Icons';
 import clsx from 'clsx';
 import { useHistory } from 'react-router-dom';
 

src/pages/LandingPage/components/StatsView/index.tsx → src/_pages/LandingPage/components/StatsView/index.tsx

@@ -4,7 +4,7 @@ import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
 import Spacer from '../../../../components/other/Spacer';
 import { useAgile } from '@agile-ts/react';
 import core from '../../../../core';
-import StatBadge from '../../../../components/other/StatBadge';
+import StatBadge from './components/StatBadge';
 
 const StatsView: React.FC = () => {
   const { siteConfig } = useDocusaurusContext();

src/components/other/SectionScroller/components/SectionRightItem/index.tsx → src/_pages/LandingPage/components/StraightforwardView/components/SectionScroller/components/SectionRightItem/index.tsx

@@ -1,7 +1,9 @@
 import React from 'react';
 import styles from './styles.module.css';
 import clsx from 'clsx';
-import Icons, { IconTypes } from '../../../Icons';
+import Icons, {
+  IconTypes,
+} from '../../../../../../../../components/other/Icons';
 
 export type Props = {
   icon?: IconTypes;

src/components/other/SectionScroller/index.tsx → src/_pages/LandingPage/components/StraightforwardView/components/SectionScroller/index.tsx

@@ -1,10 +1,10 @@
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 import styles from './styles.module.css';
-import { useWindowSize } from '../../../hooks/useWindowSize';
+import { useWindowSize } from '../../../../../../hooks/useWindowSize';
 import SectionRightItem from './components/SectionRightItem';
 import SectionLeftItem from './components/SectionLeftItem';
 import { FiChevronDown, FiChevronUp } from 'react-icons/all';
-import { IconTypes } from '../Icons';
+import { IconTypes } from '../../../../../../components/other/Icons';
 
 export interface SectionInterface {
   codeWithComment?: string;

src/pages/LandingPage/components/StraightforwardView/index.tsx → src/_pages/LandingPage/components/StraightforwardView/index.tsx

@@ -3,7 +3,7 @@ import styles from './styles.module.css';
 import Spacer from '../../../../components/other/Spacer';
 import SectionScroller, {
   SectionInterface,
-} from '../../../../components/other/SectionScroller';
+} from './components/SectionScroller';
 import PlainButton from '../../../../components/buttons/PlainButton';
 
 const sections: SectionInterface[] = [

src/core/entities/ui/ui.actions.ts

@@ -1,10 +1,14 @@
-import { THEME_TYPE } from './ui.controller';
+import { ASTRONAUT_DARK, THEME_TYPE } from './ui.controller';
 import { ThemeInterface } from './ui.interface';
 
 export const toggleTheme = (dark: boolean): void => {
   THEME_TYPE.set(dark ? 'dark' : 'light');
 };
 
+export const toggleAstronautColor = (dark: boolean): void => {
+  ASTRONAUT_DARK.set(dark);
+};
+
 export const mutateThemeCssProperties = (theme: ThemeInterface): void => {
   document.documentElement.style.setProperty(
     '--ifm-background-color',

src/core/entities/ui/ui.controller.ts

@@ -18,3 +18,7 @@ export const THEME = App.createState<ThemeInterface>(
 ).watch('mutateColor', (value) => {
   mutateThemeCssProperties(value);
 });
+
+export const ASTRONAUT_DARK = App.createState<boolean>(false).persist(
+  'astronaut-color'
+);

src/css/custom.scss

@@ -273,7 +273,7 @@ html[data-theme="dark"] {
   }
 
   .menu__link--active.active {
-    border-left: 5px solid var(--ifm-color-primary) !important;
+    border-left: 5px solid #6c69a0 !important;
     font-weight: 700 !important;
     padding-left: 8px;
     background-color: rgba(121, 118, 171, 0.2);

src/pages/index.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect } from 'react';
 
-import LandingPage from './LandingPage';
+import LandingPage from '../_pages/LandingPage';
 import core from '../core';
 
 const Home = () => {