Cursorless enablement group page

packages/cursorless-org/mdx-components.tsx

@@ -0,0 +1,15 @@
+import type { MDXComponents } from "mdx/types";
+
+// This file allows you to provide custom React components
+// to be used in MDX files. You can import and use any
+// React component you want, including components from
+// other libraries.
+
+// This file is required to use MDX in `app` directory.
+export function useMDXComponents(components: MDXComponents): MDXComponents {
+  return {
+    // Allows customizing built-in components, e.g. to add styling.
+    // h1: ({ children }) => <h1 style={{ fontSize: "100px" }}>{children}</h1>,
+    ...components,
+  };
+}

packages/cursorless-org/next.config.js

@@ -1,3 +1,9 @@
+const withMDX = require("@next/mdx")({
+  options: {
+    providerImportSource: "@mdx-js/react",
+  },
+});
+
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   webpack(config) {
@@ -9,7 +15,10 @@ const nextConfig = {
 
     return config;
   },
+  experimental: {
+    mdxRs: true,
+  },
   reactStrictMode: true,
 };
 
-module.exports = nextConfig;
+module.exports = withMDX(nextConfig);

packages/cursorless-org/package.json

@@ -14,6 +14,9 @@
   },
   "dependencies": {
     "@cursorless/cheatsheet": "workspace:*",
+    "@mdx-js/loader": "2.3.0",
+    "@mdx-js/react": "2.3.0",
+    "@next/mdx": "13.4.10",
     "eslint": "^8.38.0",
     "eslint-config-next": "13.2.3",
     "next": "13.2.3",
@@ -24,6 +27,8 @@
   },
   "devDependencies": {
     "@svgr/webpack": "6.5.1",
+    "@types/mdx": "2.0.5",
+    "@types/mdx-js__react": "1.5.5",
     "@types/node": "^16.11.3",
     "@types/react": "18.0.28",
     "@types/react-dom": "18.0.11",

packages/cursorless-org/src/components/Social.tsx → packages/cursorless-org/src/components/BaseSocial.tsx

@@ -1,17 +1,34 @@
 import {
-  DESCRIPTION,
   BASE_URL,
+  VIDEO_SHARE_THUMBNAIL_HEIGHT,
   VIDEO_SHARE_THUMBNAIL_URL,
-  YOUTUBE_SLUG,
-  TITLE,
   VIDEO_SHARE_THUMBNAIL_WIDTH,
-  VIDEO_SHARE_THUMBNAIL_HEIGHT,
 } from "./constants";
 
-export default function Social() {
+export interface Props {
+  title: string;
+  description: string;
+  relativeUrl: string;
+  youtubeSlug?: string;
+  thumbnailUrl?: string;
+  thumbnailWidth?: string;
+  thumbnailHeight?: string;
+}
+
+export default function BaseSocial({
+  title,
+  description,
+  relativeUrl,
+  youtubeSlug,
+  thumbnailUrl = VIDEO_SHARE_THUMBNAIL_URL,
+  thumbnailWidth = VIDEO_SHARE_THUMBNAIL_WIDTH,
+  thumbnailHeight = VIDEO_SHARE_THUMBNAIL_HEIGHT,
+}: Props) {
+  const url = `${BASE_URL}/${relativeUrl}`;
+
   return (
     <>
-      <meta property="og:title" content={TITLE} key="title" />
+      <meta property="og:title" content={title} key="title" />
       <link
         rel="apple-touch-icon"
         sizes="180x180"
@@ -31,30 +48,63 @@ export default function Social() {
       />
       <link rel="manifest" href="/site.webmanifest" />
       <meta property="og:site_name" content="Cursorless" />
-      <meta property="og:url" content={BASE_URL} />
-      <meta property="og:image" content={VIDEO_SHARE_THUMBNAIL_URL} />
-      <meta property="og:image:width" content={VIDEO_SHARE_THUMBNAIL_WIDTH} />
-      <meta property="og:image:height" content={VIDEO_SHARE_THUMBNAIL_HEIGHT} />
-      <meta property="og:description" content={DESCRIPTION} />
+      <meta property="og:url" content={url} />
+      <meta property="og:image" content={thumbnailUrl} />
+      <meta property="og:image:width" content={thumbnailWidth} />
+      <meta property="og:image:height" content={thumbnailHeight} />
+      <meta property="og:description" content={description} />
       <meta property="og:type" content="video" />
+      {youtubeSlug != null ? (
+        <VideoSocial youtubeSlug={youtubeSlug} />
+      ) : (
+        <meta name="twitter:card" content="summary_large_image" />
+      )}
+      <meta name="twitter:site" content="@GoCursorless" />
+      <meta name="twitter:url" content={url} />
+      <meta name="twitter:title" content="Cursorless" />
+      <meta name="twitter:description" content={description} />
+      <meta name="twitter:image" content={thumbnailUrl} />
+      <link itemProp="url" href={url} />
+      <meta itemProp="name" content="Cursorless" />
+      <meta itemProp="description" content={description} />
+      <meta name="description" content={description} />
+      <meta itemProp="paid" content="false" />
+      <meta itemProp="channelId" content="UCIh61mLlS6Do3R_8KnEScIQ" />
+      <link itemProp="thumbnailUrl" href={thumbnailUrl} />
+      <meta itemProp="isFamilyFriendly" content="true" />
+      <meta
+        itemProp="regionsAllowed"
+        content="HK,HT,TC,BW,PA,FK,AW,TN,AU,GE,SL,CC,TF,PN,TZ,CL,ET,BN,AR,PH,VI,EE,MY,LB,BM,UG,LU,NZ,KR,GG,BJ,SO,HM,GT,PR,IT,AZ,ZA,MH,MF,CW,UY,MN,MQ,MW,SE,PT,MK,SR,MA,RS,GQ,NP,BD,FM,GD,KI,IL,CK,YE,ML,BF,AO,SG,CG,GS,BI,CY,LR,UM,GH,BR,GY,KP,PM,IO,EH,SK,LV,AQ,IN,RE,LY,ZW,SZ,HR,LT,KE,TT,CR,KW,ER,NF,TK,BE,JM,SA,BH,RO,BO,MM,TH,IE,TD,QA,CN,FR,SC,VU,MG,SY,JP,PS,JO,MV,MD,TL,BY,GN,TJ,DE,TO,TR,BT,FJ,TW,AE,ES,DO,BS,NO,GU,DK,KH,SD,GB,ZM,VE,SS,IQ,AD,KG,NI,PK,PL,CZ,NA,LC,PY,SV,LA,AI,YT,US,VC,IR,NL,NU,AS,AL,GR,SH,GM,LS,ME,TV,EG,CF,DZ,SX,CA,PF,KM,AF,HN,NE,CD,MX,NC,CM,CX,SJ,GW,GF,VG,TG,BA,GP,CV,BQ,MO,SN,CH,BZ,MP,PE,FI,BB,GI,IS,PG,SM,BL,BG,AX,AM,AT,AG,ID,CI,GA,MC,NG,RW,SI,BV,UA,UZ,SB,LI,CU,VN,KN,WS,LK,IM,TM,OM,KY,VA,MT,MZ,DJ,EC,DM,HU,MU,FO,JE,NR,CO,WF,KZ,MR,GL,RU,MS,PW,ST"
+      />
+    </>
+  );
+}
+
+interface VideoProps {
+  youtubeSlug: string;
+}
+
+function VideoSocial({ youtubeSlug }: VideoProps) {
+  return (
+    <>
       <meta
         property="og:video:url"
-        content={`https://www.youtube.com/embed/${YOUTUBE_SLUG}`}
+        content={`https://www.youtube.com/embed/${youtubeSlug}`}
       />
       <meta
         property="og:video:secure_url"
-        content={`https://www.youtube.com/embed/${YOUTUBE_SLUG}`}
+        content={`https://www.youtube.com/embed/${youtubeSlug}`}
       />
       <meta property="og:video:type" content="text/html" />
       <meta property="og:video:width" content="1280" />
       <meta property="og:video:height" content="720" />
       <meta
         property="og:video:url"
-        content={`http://www.youtube.com/v/${YOUTUBE_SLUG}?version=3&amp;autohide=1`}
+        content={`http://www.youtube.com/v/${youtubeSlug}?version=3&amp;autohide=1`}
       />
       <meta
         property="og:video:secure_url"
-        content={`https://www.youtube.com/v/${YOUTUBE_SLUG}?version=3&amp;autohide=1`}
+        content={`https://www.youtube.com/v/${youtubeSlug}?version=3&amp;autohide=1`}
       />
       <meta property="og:video:type" content="application/x-shockwave-flash" />
       <meta property="og:video:width" content="1280" />
@@ -67,28 +117,12 @@ export default function Social() {
       <meta property="og:video:tag" content="Talon voice" />
 
       <meta name="twitter:card" content="player" />
-      <meta name="twitter:site" content="@GoCursorless" />
-      <meta name="twitter:url" content={BASE_URL} />
-      <meta name="twitter:title" content="Cursorless" />
-      <meta name="twitter:description" content={DESCRIPTION} />
-      <meta name="twitter:image" content={VIDEO_SHARE_THUMBNAIL_URL} />
       <meta
         name="twitter:player"
-        content={`https://www.youtube.com/embed/${YOUTUBE_SLUG}`}
+        content={`https://www.youtube.com/embed/${youtubeSlug}`}
       />
       <meta name="twitter:player:width" content="1280" />
       <meta name="twitter:player:height" content="720" />
-      <link itemProp="url" href={BASE_URL} />
-      <meta itemProp="name" content="Cursorless" />
-      <meta itemProp="description" content={DESCRIPTION} />
-      <meta itemProp="paid" content="false" />
-      <meta itemProp="channelId" content="UCIh61mLlS6Do3R_8KnEScIQ" />
-      <link itemProp="thumbnailUrl" href={VIDEO_SHARE_THUMBNAIL_URL} />
-      <meta itemProp="isFamilyFriendly" content="true" />
-      <meta
-        itemProp="regionsAllowed"
-        content="HK,HT,TC,BW,PA,FK,AW,TN,AU,GE,SL,CC,TF,PN,TZ,CL,ET,BN,AR,PH,VI,EE,MY,LB,BM,UG,LU,NZ,KR,GG,BJ,SO,HM,GT,PR,IT,AZ,ZA,MH,MF,CW,UY,MN,MQ,MW,SE,PT,MK,SR,MA,RS,GQ,NP,BD,FM,GD,KI,IL,CK,YE,ML,BF,AO,SG,CG,GS,BI,CY,LR,UM,GH,BR,GY,KP,PM,IO,EH,SK,LV,AQ,IN,RE,LY,ZW,SZ,HR,LT,KE,TT,CR,KW,ER,NF,TK,BE,JM,SA,BH,RO,BO,MM,TH,IE,TD,QA,CN,FR,SC,VU,MG,SY,JP,PS,JO,MV,MD,TL,BY,GN,TJ,DE,TO,TR,BT,FJ,TW,AE,ES,DO,BS,NO,GU,DK,KH,SD,GB,ZM,VE,SS,IQ,AD,KG,NI,PK,PL,CZ,NA,LC,PY,SV,LA,AI,YT,US,VC,IR,NL,NU,AS,AL,GR,SH,GM,LS,ME,TV,EG,CF,DZ,SX,CA,PF,KM,AF,HN,NE,CD,MX,NC,CM,CX,SJ,GW,GF,VG,TG,BA,GP,CV,BQ,MO,SN,CH,BZ,MP,PE,FI,BB,GI,IS,PG,SM,BL,BG,AX,AM,AT,AG,ID,CI,GA,MC,NG,RW,SI,BV,UA,UZ,SB,LI,CU,VN,KN,WS,LK,IM,TM,OM,KY,VA,MT,MZ,DJ,EC,DM,HU,MU,FO,JE,NR,CO,WF,KZ,MR,GL,RU,MS,PW,ST"
-      />
     </>
   );
 }

packages/cursorless-org/src/components/IndexSocial.tsx

@@ -0,0 +1,13 @@
+import BaseSocial from "./BaseSocial";
+import { DESCRIPTION, TITLE, VIDEO_SHARE_THUMBNAIL_URL } from "./constants";
+
+export default function IndexSocial() {
+  return (
+    <BaseSocial
+      title={TITLE}
+      description={DESCRIPTION}
+      youtubeSlug={VIDEO_SHARE_THUMBNAIL_URL}
+      relativeUrl=""
+    />
+  );
+}

packages/cursorless-org/src/components/Layout.tsx

@@ -0,0 +1,45 @@
+import { MDXProvider } from "@mdx-js/react";
+import type { MDXComponents } from "mdx/types.js";
+import Head from "next/head";
+import BaseSocial from "./BaseSocial";
+
+const components: MDXComponents = {
+  h1: ({ children }) => (
+    <h1 className="text-center text-[2.5em] leading-tight mb-3">{children}</h1>
+  ),
+  h2: ({ children }) => <h2 className="text-[1.5em] my-5">{children}</h2>,
+  h3: ({ children }) => <h3 className="text-[1.3em] mt-4">{children}</h3>,
+  h4: ({ children }) => <h4 className="text-[1.2em] mt-4">{children}</h4>,
+  hr: () => <hr className="my-5 border-salmon-900 dark:border-salmon-100" />,
+  ul: ({ children }) => <ul className="list-disc ml-8">{children}</ul>,
+  ol: ({ children }) => <ol className="list-decimal ml-8">{children}</ol>,
+  li: ({ children }) => <li className="my-2">{children}</li>,
+};
+
+export const bodyClasses = "bg-salmon-100 dark:bg-salmon-900";
+
+export interface Props extends React.PropsWithChildren {
+  title: string;
+  description: string;
+  relativeUrl: string;
+}
+
+export function Layout({ title, description, relativeUrl, children }: Props) {
+  return (
+    <>
+      <Head>
+        <title>{title}</title>
+        <BaseSocial
+          title={title}
+          description={description}
+          relativeUrl={relativeUrl}
+        />
+      </Head>
+      <MDXProvider components={components}>
+        <main className="text-salmon-900 dark:text-salmon-100 font-mono p-4 sm:p-5 lg:p-8">
+          <div className="max-w-prose mx-auto">{children}</div>
+        </main>
+      </MDXProvider>
+    </>
+  );
+}

packages/cursorless-org/src/content/enablement-group.mdx

@@ -0,0 +1,80 @@
+export const meta = {
+  title: "Cursorless Enablement Group",
+  description:
+    "Help enable the adoption of Cursorless by speeding up its development.",
+};
+
+# {meta.title}
+
+## 🚀 {meta.description}
+
+Cursorless, an open-source spoken programming language, lets users eliminate the need for a cursor entirely. In other words, software engineers can code at the speed of sound (increased productivity) and all computer users can reduce strain on their wrists to prevent injury (preventative healthcare).
+
+![hats](/big-hats.png)
+
+Cursorless development is user-led. Your support will help Cursorless founder, Pokey Rule, develop the following feature requests as quickly as possible.
+
+- Reduce the learning curve to increase the rate of adoption
+- Launch Cursorless in other IDEs, such as JetBrains, emacs, etc, as well as in a web browser, and even work globally using OCR / accessibility APIs to place hats anywhere on the screen
+- Further improvements to the Cursorless execution engine to advance the state of the art in voice coding.
+
+### 🎯 Goals
+
+Cursorless needs a dedicated, full-time software engineer on staff. This will cost $5,000 USD per month. The Enablement Group guides development and the participation fees contribute to this crucial funding. Cursorless will always be open source.
+
+## 🙌 Join the Cursorless Enablement Group
+
+The Enablement Group consists of stakeholders whose talents, lived experiences, and career experiences bring vital perspectives to the development of Cursorless. Support and input helps increase the speed at which new feature can be delivered.
+
+## 🥇 Benefits of Joining the Cursorless Enablement Group
+
+{/* <!--- Hey Pokey! Can you do a bit of styling for these 5 which will consider the major benefits. I have ideas in the figmaa wireframe if helpful! --> */}
+
+1. **Become a Distinguished Accessibility Champion**: By joining the Enablement Group, you solidify your position as a dedicated advocate for accessible technology and inclusion. Your active involvement showcases your commitment to driving positive change and making technology more accessible for everyone.
+
+2. **Gain Prominent Visibility Online**: As a valued member of the Enablement Group, you gain increased visibility within both the open source and accessible technology communities. Your participation will be recognized on all web properties including GitHub Repo, cursorless.org, social media, via any other acknowledgments in project updates, newsletters, and events to cement your role as a key player in advancing Cursorless.
+
+3. **Obtain Collective Influence on Development**: While the development of Cursorless is guided by its community of users, your annual fee directly contributes to the development of these feature requests! Use your expertise and experience to help prioritize and comment on effective solutions around feature requests. You're ensuring that development directly aligns with the needs of users who value inclusive and accessible technology and rely on it to succeed in their lives.
+
+4. **Join a Collaboration with Industry Leaders**: Joining the Enablement Group provides an opportunity to collaborate with like-minded individuals and industry leaders who share your passion for accessible technology This network allows you to exchange insights, share best practices, and collectively drive the advancement of inclusive digital solutions.
+
+5. **Empowering Future Accessibility**: Your commitment to the Enablement Group supports the long-term vision of creating a full-time staff engineer dedicated to developing Cursorless. As the group grows, the possibility of achieving this goal becomes more tangible, contributing to a sustainable and impactful initiative for accessible technology.
+
+### 💅 All participants also enjoy the following benefits
+
+SOME TEXT TO FILL OUT THE FOLLOWING PARAGRAPH. Lorem ipsum dolor sit amet cons ectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+
+#### 🤓 Technical
+
+- Be the first to access Cursorless feature updates and new versions.
+- Lead the adoption of Cursorless by understanding its implementation and having superior knowledge of its use.
+- Have some influence over the direction of some aspects of the technology through your expertise.
+- Gain an advanced and deeper knowledge of any outputs of the group (recommended practices, engineering guidelines)
+
+#### 🥽 Visibility
+
+- Ability to promote your organization as a champion for accessible technology and in particular Cursorless.
+- Ability to promote your organization as a leader in the area of accessible technology.
+- Opportunity to connect with other influencers in software and accessibility.
+- Networking and ability to cultivate deep relationships and potential partnerships with leaders, founders, and influencers.
+
+#### 🪖 Strategic
+
+- Support an initiative targeted at facilitating an increased and more rapid shift of adoption of Cursorless as a faster way to go code and a healthier way to code.
+- Support of open standards approach. Standards are critical to interoperability and openness is consistent with a positive image in the industry.
+
+{/* <!-- Individual, Nonprofit, and corporate tiers go here. I do not believe I can stylize them well --> */}
+
+## Cursorless can be used to execute any computing task. And here are the most common use cases:
+
+{/* <!-- I will attempt this list here --> */}
+
+1. Programing and software Development
+2. Performing common tasks associated with "office jobs"
+3. File and asset management
+4. Making inaccessible software more accessible
+5. Web browsing
+6. Research
+7. Document writing and editing
+
+{/* <!-- Footer as usual --> */}

packages/cursorless-org/src/content/enablement-group.mdx.d.ts

@@ -0,0 +1,6 @@
+export { default } from "*.mdx";
+
+export const meta: {
+  title: string;
+  description: string;
+};

packages/cursorless-org/src/pages/enablement-group.tsx

@@ -0,0 +1,24 @@
+import {
+  default as EnablementGroup,
+  meta,
+} from "../content/enablement-group.mdx";
+import { Layout, bodyClasses } from "../components/Layout";
+
+const RELATIVE_URL = "cursorless-enablement";
+
+// See https://github.com/vercel/next.js/discussions/12325#discussioncomment-1116108
+export async function getStaticProps() {
+  return { props: { bodyClasses } };
+}
+
+export default function Page() {
+  return (
+    <Layout
+      title={meta.title}
+      description={meta.description}
+      relativeUrl={RELATIVE_URL}
+    >
+      <EnablementGroup />
+    </Layout>
+  );
+}

packages/cursorless-org/src/pages/index.tsx

@@ -2,7 +2,7 @@ import { EmbeddedVideo } from "../components/embedded-video";
 import Head from "next/head";
 import Button from "../components/Button";
 import { TITLE, YOUTUBE_SLUG } from "../components/constants";
-import Social from "../components/Social";
+import IndexSocial from "../components/IndexSocial";
 import Logo from "./logo.svg";
 
 // See https://github.com/vercel/next.js/discussions/12325#discussioncomment-1116108
@@ -19,7 +19,7 @@ export default function LandingPage() {
     <>
       <Head>
         <title>{TITLE}</title>
-        <Social />
+        <IndexSocial />
       </Head>
       <main className="items-center justify-center text-salmon-900 dark:text-salmon-100 font-mono font-bold tracking-[0.18em] overflow-auto fixed top-0 bottom-0 left-0 right-0 p-2 sm:p-0 sm:flex ">
         {/*

packages/cursorless-org/tailwind.config.js

@@ -74,6 +74,7 @@ module.exports = {
         xs: "1.2em",
         lg: "1.8em",
         "2xl": "2.4em",
+        "3xl": "3.6em",
       },
       colors: {
         salmon: {