refactor: Add 'src' folder in 'site' (#445)

This refactoring re-organizes the `site` folder to have a nested `src` folder.

Originally, [we wanted to keep the directory structure shallow](https://github.com/coder/coder/pull/8#issuecomment-1009578910) - but there were two points that motivated this change to introduce the `src` level.

1. We have several non-`src` folders now (`e2e`, `static`, `html_templates`, `.storybook`)
2. Having a `src` folder makes it easier to run XState Typegen

So given those two data points - I believe it makes sense to revisit that and introduce a `src` folder.

site/src/components/CodeExample/CodeExample.stories.tsx

@@ -0,0 +1,20 @@
+import { Story } from "@storybook/react"
+import React from "react"
+import { CodeExample, CodeExampleProps } from "./CodeExample"
+
+const sampleCode = `echo "Hello, world"`
+
+export default {
+  title: "CodeExample",
+  component: CodeExample,
+  argTypes: {
+    code: { control: "string", defaultValue: sampleCode },
+  },
+}
+
+const Template: Story<CodeExampleProps> = (args: CodeExampleProps) => <CodeExample {...args} />
+
+export const Example = Template.bind({})
+Example.args = {
+  code: sampleCode,
+}

site/src/components/CodeExample/CodeExample.test.tsx

@@ -0,0 +1,15 @@
+import { screen } from "@testing-library/react"
+import { render } from "../../test_helpers"
+import React from "react"
+import { CodeExample } from "./CodeExample"
+
+describe("CodeExample", () => {
+  it("renders code", async () => {
+    // When
+    render(<CodeExample code="echo hello" />)
+
+    // Then
+    // Both lines should be rendered
+    await screen.findByText("echo hello")
+  })
+})

site/src/components/CodeExample/CodeExample.tsx

@@ -0,0 +1,38 @@
+import { makeStyles } from "@material-ui/core/styles"
+import React from "react"
+import { MONOSPACE_FONT_FAMILY } from "../../theme/constants"
+
+import { CopyButton } from "../Button"
+
+export interface CodeExampleProps {
+  code: string
+}
+
+/**
+ * Component to show single-line code examples, with a copy button
+ */
+export const CodeExample: React.FC<CodeExampleProps> = ({ code }) => {
+  const styles = useStyles()
+
+  return (
+    <div className={styles.root}>
+      <code>{code}</code>
+      <CopyButton text={code} />
+    </div>
+  )
+}
+
+const useStyles = makeStyles((theme) => ({
+  root: {
+    display: "flex",
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "center",
+    background: theme.palette.background.default,
+    color: theme.palette.codeBlock.contrastText,
+    fontFamily: MONOSPACE_FONT_FAMILY,
+    fontSize: 13,
+    padding: theme.spacing(2),
+    borderRadius: theme.shape.borderRadius,
+  },
+}))

site/src/components/CodeExample/index.ts

@@ -0,0 +1 @@
+export * from "./CodeExample"