Update docs, add blog post

Author: plondon

blog/2019-05-28-hola.md

@@ -0,0 +1,54 @@
+---
+slug: why-codeamigo
+title: Why I Created Codeamigo
+author: Philip London
+author_title: Founder @ codeamigo.dev
+author_url: https://github.com/plondon
+author_image_url: https://avatars.githubusercontent.com/u/5640772?v=4
+tags: [codeamigo, about, education]
+---
+
+I've applied to work at [Codecademy](https://www.codecademy.com/) three times, once in 2014, again in 2015, and most recently in 2020. I've been rejected all three times. A few weeks after the most recent rejection I decided to build my own version of Codecademy. I was living in Spain so I thought codeamigo would be a good name. Here's why I created [codeamigo.dev](https://codeamigo.dev) and what I've learned so far.
+
+I love the interactive learning experience of Codecademy. Of all the mediums I've used to learn how to code, YouTube, blog posts, tutorials, etc., Codecademy always stood out. I loved feeling a sense of accomplishment after finishing a step or lesson, or reaching my streak goal for the week. When I was first learning to code, I visited Codecademy everyday. I wouldn't be a developer without it.
+
+What _bothered_ me about the platform was that I didn't know my teachers. I wanted to connect with members of my community and learn from them, instead of just digesting information from a black box. Watching [MKBHD](https://www.youtube.com/user/marquesbrownlee) on YouTube made this clear. I don't watch everyone of his videos because I'm interested in each and every piece of tech, I'm interested in him, and how he presents his material.
+
+I thought if I could bring that concept to coding lessons and tutorials people would be able to learn from and follow peers they liked learning from. Building the platform was a lot of fun and quite challenging.
+
+## Compiling Code on The Fly
+
+Without a doubt the most challenging aspect of building codeamigo.dev was the code compilation. There are not a ton of examples of it in the wild. In fact, [Amjad Masad](https://twitter.com/amasad), who built repl.it, also wrote the code for Codecademy. Anyway, I decided to start with just languages the browser can understand natively, so HTML, CSS, and JS. [Ives Van Hoorne](https://twitter.com/compuives) and the [codesandbox](https://codesandbox.io) team were a great inspiration.
+
+### Attempt 1: babel-standalone
+
+Based on talks given by Ives I figued that [babel-standalone](https://babeljs.io/docs/en/babel-standalone) would be a good first step. Everytime a file changed I would post a message to an iframe that was listening for files, transpile them with babel, and then append the generated output to a script tag. I had special logic for if the file was HTML or CSS. It was very primitive, messy, and slow. I was happy it worked but it would sometimes take 5-6 seconds to render a change.
+
+### Attempt 2: parcel
+
+After scouring the internet for other solutions I came across [parcel](https://github.com/parcel-bundler/parcel/issues/1253) and thought this might be a good approach. In fact, they even had their own [REPL project](https://parcel-repl.vercel.app/) that mirrored the functionality I wanted. This worked well for awhile and was what the project was using when I posted it to [Hacker News originally](https://news.ycombinator.com/item?id=26464998). However, it would often use too many webworkers and cause the site to crash. Plus, I knew it wouldn't be able to scale past browser based languages.
+
+### Attempt 3: repl.it approach
+
+Next up I tried [recreating repl.it's approach](https://cloud.google.com/customers/repl-it). But it thoguht it would be too complex of an endeavor considering I have yet to find product-market-fit.
+
+### Attempt 4: Codesandbox To the Rescue!
+
+A few months ago, codesandbox released [sandpack](https://github.com/codesandbox/sandpack), which is exactly what I was looking for. A super fast, super scalable browser bundler. I would still like to dive deeper into Attempt 3, but only once I have more users and interest.
+
+## Learning New Tools
+
+I've loved the process of recreating Codecademy. I've loved owning all aspects of the project, the backend, frontend, and design, I've been able to implement features quickly and deploy them easily and automatically through [vercel](https://vercel.com). I've gotten to use and love [linear](https://linear.app) for issue management and [plausible](https://plausible.io/) for analytics.
+
+### Backend
+
+codeamigo.dev's backend uses NodeJS to serve an Apollo Server GraphQL API. Everytime you take a lesson, the backend creates codeModules specific to your user, so that it can save your progress. Of course it also tracks what step you are on and which checkpoints you've completed. When and if you decide to create a lesson, codeamigo will provide you with templates to get you started on React.js, Angular, or VanillaJS/TS projects.
+
+### Frontend
+
+The frontend is a NextJS app using apollo-client to manage state and tailwindcss for styling. 
+
+### How It Works
+
+codeamigo.dev provides you with a platform to create Codecademy style lessons. Each lesson is made up of Steps, and each Step is made up of Checkpoints. A Step can have many or no Checkpoints. Each Checkpoint points to a test you must write that a user must pass. You can read more about testing [here](https://docs.codeamigo.dev/docs/).
+I hope that this project helps people learn new topics, either through teaching them or taking lessons!

blog/2019-05-29-hello-world.md

@@ -0,0 +1,36 @@
+Be sure to add `@testing-library/angular: 10.9.0` to package.json
+
+### Test a component is rendered
+
+```ts
+import { TestBed } from "@angular/core/testing";
+import { render, screen, fireEvent } from "@testing-library/angular";
+import { CounterComponent } from "./counter.component";
+import {
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting
+} from "@angular/platform-browser-dynamic/testing";
+
+describe("Counter", () => {
+  beforeEach(() => {
+    TestBed.resetTestEnvironment(); // new
+    TestBed.initTestEnvironment(
+      BrowserDynamicTestingModule,
+      platformBrowserDynamicTesting()
+    );
+
+    TestBed.configureTestingModule({
+      declarations: [CounterComponent]
+    }).compileComponents();
+  });
+
+  it("should render counter", async () => {
+    await render(CounterComponent, {
+      componentProperties: { counter: 5 }
+    });
+
+    expect(screen.getByText("Current Count: 5")).toBeDefined();
+  });
+});
+
+```

blog/2019-05-30-welcome.md

@@ -1,8 +1,3 @@
----
-title: Writing Tests
----
-
-## React
 Be sure to add `@testing-library/react: 12.0.0` to package.json
 
 ### Check that the textContent is correct
@@ -77,43 +72,4 @@ describe('Board, handleClick', () => {
 		expect(getByText('X')).toBeDefined()
 	})
 })
-```
-
-## Angular
-
-Be sure to add `@testing-library/angular: 10.9.0` to package.json
-
-### Test a component is rendered
-
-```ts
-import { TestBed } from "@angular/core/testing";
-import { render, screen, fireEvent } from "@testing-library/angular";
-import { CounterComponent } from "./counter.component";
-import {
-  BrowserDynamicTestingModule,
-  platformBrowserDynamicTesting
-} from "@angular/platform-browser-dynamic/testing";
-
-describe("Counter", () => {
-  beforeEach(() => {
-    TestBed.resetTestEnvironment(); // new
-    TestBed.initTestEnvironment(
-      BrowserDynamicTestingModule,
-      platformBrowserDynamicTesting()
-    );
-
-    TestBed.configureTestingModule({
-      declarations: [CounterComponent]
-    }).compileComponents();
-  });
-
-  it("should render counter", async () => {
-    await render(CounterComponent, {
-      componentProperties: { counter: 5 }
-    });
-
-    expect(screen.getByText("Current Count: 5")).toBeDefined();
-  });
-});
-
 ```

blog/2021-07-20-why-i-created-codeamigo.md

@@ -14,11 +14,11 @@ module.exports = {
       title: 'codeamigo',
       logo: {
         alt: 'codeamigo Logo',
-        src: 'img/logo.svg',
+        src: 'img/logo.png',
       },
       items: [
         {
-          to: 'docs/',
+          to: 'docs/writing-tests/react',
           activeBasePath: 'docs',
           label: 'Docs',
           position: 'left',
@@ -38,30 +38,26 @@ module.exports = {
           title: 'Docs',
           items: [
             {
-              label: 'Getting Started',
-              to: 'docs/',
+              label: 'Writing Tests',
+              to: 'docs/writing-tests/react',
             },
           ],
         },
         {
           title: 'Community',
           items: [
-            {
-              label: 'Stack Overflow',
-              href: 'https://stackoverflow.com/questions/tagged/docusaurus',
-            },
-            {
-              label: 'Discord',
-              href: 'https://discordapp.com/invite/docusaurus',
-            },
             {
               label: 'Twitter',
-              href: 'https://twitter.com/docusaurus',
+              href: 'https://twitter.com/codeamigo_dev',
             },
+            {
+              label: 'GitHub',
+              href: 'https://github.com/codeamigo'
+            }
           ],
         },
       ],
-      copyright: `Copyright © ${new Date().getFullYear()} My Project, Inc. Built with Docusaurus.`,
+      copyright: `Copyright © ${new Date().getFullYear()} codeamigo LLC, Built with Docusaurus.`,
     },
   },
   presets: [

docs/writing-tests/angular.md

@@ -2,21 +2,16 @@ module.exports = {
   docs: [
     {
       type: 'category',
-      label: 'Codeamigo Docs',
+      label: 'Writing Tests',
       items: [
-        'writing-tests',
+        'writing-tests/react',
+        'writing-tests/angular',
       ],
     },
     {
       type: 'category',
       label: 'Docusaurus Tutorial',
       items: [
-        'getting-started',
-        'create-a-page',
-        'create-a-document',
-        'create-a-blog-post',
-        'markdown-features',
-        'thank-you',
       ],
     },
   ],

docs/writing-tests.md docs/writing-tests/react.md

@@ -1,95 +1,6 @@
 import React from 'react';
-import clsx from 'clsx';
-import Layout from '@theme/Layout';
-import Link from '@docusaurus/Link';
-import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
-import useBaseUrl from '@docusaurus/useBaseUrl';
-import styles from './styles.module.css';
-
-const features = [
-  {
-    title: 'Easy to Use',
-    imageUrl: 'img/undraw_docusaurus_mountain.svg',
-    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',
-    imageUrl: 'img/undraw_docusaurus_tree.svg',
-    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',
-    imageUrl: 'img/undraw_docusaurus_react.svg',
-    description: (
-      <>
-        Extend or customize your website layout by reusing React. Docusaurus can
-        be extended while reusing the same header and footer.
-      </>
-    ),
-  },
-];
-
-function Feature({imageUrl, title, description}) {
-  const imgUrl = useBaseUrl(imageUrl);
-  return (
-    <div className={clsx('col col--4', styles.feature)}>
-      {imgUrl && (
-        <div className="text--center">
-          <img className={styles.featureImage} src={imgUrl} alt={title} />
-        </div>
-      )}
-      <h3>{title}</h3>
-      <p>{description}</p>
-    </div>
-  );
-}
+import  { Redirect } from 'react-router-dom';
 
 export default function Home() {
-  const context = useDocusaurusContext();
-  const {siteConfig = {}} = context;
-  return (
-    <Layout
-      title={`Hello from ${siteConfig.title}`}
-      description="Description will go into a meta tag in <head />">
-      <header className={clsx('hero hero--primary', styles.heroBanner)}>
-        <div className="container">
-          <h1 className="hero__title">{siteConfig.title}</h1>
-          <p className="hero__subtitle">{siteConfig.tagline}</p>
-          <div className={styles.buttons}>
-            <Link
-              className={clsx(
-                'button button--outline button--secondary button--lg',
-                styles.getStarted,
-              )}
-              to={useBaseUrl('docs/')}>
-              Get Started
-            </Link>
-          </div>
-        </div>
-      </header>
-      <main>
-        {features && features.length > 0 && (
-          <section className={styles.features}>
-            <div className="container">
-              <div className="row">
-                {features.map((props, idx) => (
-                  <Feature key={idx} {...props} />
-                ))}
-              </div>
-            </div>
-          </section>
-        )}
-      </main>
-    </Layout>
-  );
-}
+  return <Redirect to='/docs/writing-tests/react' />;
+}