Improve documentation website (#8)

* Improve documentation website

* Edit documentation content

* Address Comments part 2

apps/docs/babel.config.js

@@ -7,12 +7,18 @@
  * @format
  */
 
+const path = require('path');
 const isProd = process.env.NODE_ENV === 'production';
 
 const options = {
   dev: !isProd,
   test: false,
-  stylexSheetName: isProd ? 'custom' : undefined,
+  stylexSheetName: '<>',
+  genConditionalClasses: true,
+  unstable_moduleResolution: {
+    type: 'commonJS',
+    rootDir: path.join(__dirname, '../..'),
+  },
 };
 
 module.exports = {

apps/docs/components/FeatureCard.js

@@ -0,0 +1,136 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @format
+ */
+
+import * as React from 'react';
+import * as stylex from '@stylexjs/stylex';
+import Link from '@docusaurus/Link';
+
+let count = 0;
+
+function useId() {
+  const [id, setId] = React.useState(null);
+  React.useEffect(() => {
+    setId(`id-${++count}`);
+  }, []);
+  return id;
+}
+
+export default function FeatureCard({
+  to,
+  emoji,
+  title,
+  subtitle,
+  children,
+  style,
+}) {
+  const titleId = useId();
+  return (
+    <Link
+      {...stylex.props(styles.card, style)}
+      aria-labelledby={titleId}
+      to={to}>
+      <div {...stylex.props(styles.layout)}>
+        <div {...stylex.props(styles.emoji)} aria-hidden>
+          {emoji}
+        </div>
+        <div>
+          <h3 {...stylex.props(styles.title)} id={titleId}>
+            {title}
+          </h3>
+          <h4 {...stylex.props(styles.subTitle)}>{subtitle}</h4>
+          <p {...stylex.props(styles.body)}>{children}</p>
+        </div>
+      </div>
+    </Link>
+  );
+}
+
+const LARGE = '@container (min-width: 540px)';
+
+const styles = stylex.create({
+  card: {
+    alignItems: 'center',
+    backgroundColor: 'var(--bg1)',
+    borderColor: 'hsla(var(--pink-h), var(--pink-s), var(--pink-l), 0.1)',
+    borderRadius: 32,
+    borderStyle: 'solid',
+    borderWidth: 1,
+    boxShadow: {
+      default:
+        '0 2px 4px hsla(var(--pink-h), var(--pink-s), var(--pink-l), 0.1)',
+      ':hover':
+        '0 2px 8px hsla(var(--pink-h), var(--pink-s), var(--pink-l), 0.5)',
+    },
+    boxSizing: 'border-box',
+    color: {
+      default: 'inherit',
+      ':hover': 'inherit',
+    },
+    textDecoration: {
+      default: 'none',
+      ':hover': 'none',
+    },
+    containerType: 'inline-size',
+    display: 'flex',
+    gridRow: {
+      default: 'span 2',
+      '@container (max-width: 940px)': 'span 1',
+    },
+    height: '100%',
+    justifyContent: 'center',
+    position: 'relative',
+    transitionProperty: 'box-shadow',
+    transitionDuration: '0.2s',
+    transitionTimingFunction: 'ease-in-out',
+  },
+  layout: {
+    display: 'flex',
+    flexDirection: {
+      default: 'column',
+      [LARGE]: 'row',
+    },
+    width: '100%',
+    alignItems: 'center',
+    justifyContent: {
+      default: 'center',
+      [LARGE]: 'flex-start',
+    },
+    textAlign: {
+      default: 'center',
+      [LARGE]: 'left',
+    },
+    padding: {
+      default: 16,
+      [LARGE]: 32,
+    },
+    columnGap: 32,
+  },
+  emoji: {
+    fontSize: '8rem',
+    alignSelf: 'center',
+    marginBlock: '-0.16em',
+  },
+  title: {
+    fontSize: '2rem',
+    margin: 0,
+  },
+  subTitle: {
+    fontSize: '1rem',
+    margin: 0,
+    marginTop: '0.2em',
+    color: 'var(--pink)',
+    fontWeight: 400,
+  },
+  body: {
+    marginTop: '1em',
+    fontSize: '1rem',
+    lineHeight: 1.4,
+    opacity: 0.5,
+  },
+});

apps/docs/components/FeaturePile.js

@@ -0,0 +1,100 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @format
+ */
+
+import * as React from 'react';
+import * as stylex from '@stylexjs/stylex';
+import FeatureCard from './FeatureCard';
+
+export default function FeaturePile() {
+  return (
+    <div {...stylex.props(styles.container)}>
+      <div {...stylex.props(styles.grid)}>
+        <FeatureCard
+          emoji="🧗‍♂️"
+          subtitle="Atomic CSS for small bundles"
+          title="Scalable"
+          to="/docs/learn/#scalable">
+          Scale new heights without being weighed down by the size of CSS
+          bundles.
+        </FeatureCard>
+        <FeatureCard
+          emoji="🔮"
+          style={styles.double}
+          subtitle="“The last style applied always wins”"
+          title="Predictable"
+          to="/docs/learn/#predictable">
+          You shouldn't need a crystal ball to know what styles are applied on
+          an element.
+        </FeatureCard>
+        <FeatureCard
+          emoji="🧩"
+          subtitle="Styles are data too"
+          title="Composable"
+          to="/docs/learn/#flexible--composable">
+          Styles can be passed around as props, and merged deterministically. It
+          all fits together.
+        </FeatureCard>
+        <FeatureCard
+          emoji="🏎️"
+          style={styles.smallOnLarge}
+          subtitle="Ship a single static CSS file"
+          title="Fast"
+          to="/docs/learn/#static--fast">
+          The StyleX compiler bundles styles into a static CSS file. No runtime
+          style injection.
+        </FeatureCard>
+        <FeatureCard
+          emoji="🥽"
+          style={styles.small}
+          subtitle="Strongly types for all styles"
+          title="Type-Safe"
+          to="/docs/learn/#type-safe">
+          Safety first! Static types catch common styling mistakes in code.
+        </FeatureCard>
+      </div>
+    </div>
+  );
+}
+
+const styles = stylex.create({
+  container: {
+    width: '100%',
+    containerType: 'inline-size',
+  },
+  grid: {
+    display: 'grid',
+    gridTemplateColumns: {
+      default: '1fr 1fr 1fr 1fr',
+      '@container (min-width: 940.1px) and (max-width: 1230px)': '1fr 1fr 1fr',
+      '@container (max-width: 940px)': '1fr',
+    },
+    gridAutoRows: '1fr',
+    gap: 16,
+    width: '100%',
+    alignItems: 'center',
+  },
+  double: {
+    gridColumn: {
+      default: null,
+      '@container (min-width: 940.1px)': 'span 2',
+    },
+    gridRow: null,
+  },
+  small: {
+    gridColumn: null,
+    gridRow: null,
+  },
+  smallOnLarge: {
+    gridRow: {
+      default: null,
+      '@container (min-width: 940px) and (max-width: 1230px)': 'span 2',
+    },
+    gridColumn: null,
+  },
+});