fix: launch supports workshopFile

kentcdodds · kentcdodds · commit 8d6dd7df6c19 · 2023-02-11T16:21:47.000-07:00
diff --git a/packages/example/exercises/01.nested-routing/01-02.problem/README.01.md b/packages/example/exercises/01.nested-routing/01-02.problem/README.01.md
@@ -8,85 +8,38 @@ this exercise.
 <ul>
   <li className="flex gap-2">
     <span>modified:</span>
-    <LaunchEditor file="/Users/kentcdodds/code/epicweb-dev/kcdshop/packages/example/exercises/01-nested-routing/01-02.problem/app/entry.server.tsx">
+    <LaunchEditor workshopFile="exercises/01.nested-routing/01-02.problem/app/entry.server.tsx">
       `app/entry.server.tsx`
     </LaunchEditor>
   </li>
   <li className="flex gap-2">
     <span>modified:</span>
-    <LaunchEditor file="/Users/kentcdodds/code/epicweb-dev/kcdshop/packages/example/exercises/01-nested-routing/01-02.problem/app/root.tsx">
+    <LaunchEditor workshopFile="exercises/01.nested-routing/01-02.problem/app/root.tsx">
       `app/root.tsx`
     </LaunchEditor>
   </li>
   <li className="flex gap-2">
     <span>deleted:</span>
-    <LaunchEditor file="/Users/kentcdodds/code/epicweb-dev/kcdshop/packages/example/exercises/01-nested-routing/01-02.problem/app/routes/deleted.tsx">
+    <LaunchEditor workshopFile="exercises/01.nested-routing/01-02.problem/app/routes/deleted.tsx">
       `app/routes/deleted.tsx`
     </LaunchEditor>
   </li>
   <li className="flex gap-2">
     <span>modified:</span>
-    <LaunchEditor file="/Users/kentcdodds/code/epicweb-dev/kcdshop/packages/example/exercises/01-nested-routing/01-02.problem/app/routes/index.tsx">
+    <LaunchEditor workshopFile="exercises/01.nested-routing/01-02.problem/app/routes/index.tsx">
       `app/routes/index.tsx`
     </LaunchEditor>
   </li>
   <li className="flex gap-2">
     <span>added:</span>
-    <LaunchEditor file="/Users/kentcdodds/code/epicweb-dev/kcdshop/packages/example/exercises/01-nested-routing/01-02.problem/app/routes/parent.tsx">
+    <LaunchEditor workshopFile="exercises/01.nested-routing/01-02.problem/app/routes/parent.tsx">
       `app/routes/parent.tsx`
     </LaunchEditor>
   </li>
   <li className="flex gap-2">
     <span>modified:</span>
-    <LaunchEditor file="/Users/kentcdodds/code/epicweb-dev/kcdshop/packages/example/exercises/01-nested-routing/01-02.problem/package.json">
+    <LaunchEditor workshopFile="exercises/01.nested-routing/01-02.problem/package.json">
       `package.json`
     </LaunchEditor>
   </li>
 </ul>
-
-<ul>
-  <li className="flex gap-2">
-    <span>modified:</span>
-
-    <LaunchEditor file="/Users/kentcdodds/code/epicweb-dev/kcdshop/packages/example/exercises/01-nested-routing/01-02.problem/app/entry.server.tsx">
-      `app/entry.server.tsx`
-    </LaunchEditor>
-
-  </li>
-
-  <li className="flex gap-2">
-    <span>modified:</span>
-
-    <LaunchEditor file="/Users/kentcdodds/code/epicweb-dev/kcdshop/packages/example/exercises/01-nested-routing/01-02.problem/app/root.tsx">
-      `app/root.tsx`
-    </LaunchEditor>
-
-  </li>
-
-  <li className="flex gap-2">
-    <span>deleted:</span>
-
-    <LaunchEditor file="/Users/kentcdodds/code/epicweb-dev/kcdshop/packages/example/exercises/01-nested-routing/01-02.problem/app/routes/deleted.tsx">
-      `app/routes/deleted.tsx`
-    </LaunchEditor>
-
-  </li>
-
-  <li className="flex gap-2">
-    <span>modified:</span>
-
-    <LaunchEditor file="/Users/kentcdodds/code/epicweb-dev/kcdshop/packages/example/exercises/01-nested-routing/01-02.problem/app/routes/index.tsx">
-      `app/routes/index.tsx`
-    </LaunchEditor>
-
-  </li>
-
-  <li className="flex gap-2">
-    <span>added:</span>
-
-    <LaunchEditor file="/Users/kentcdodds/code/epicweb-dev/kcdshop/packages/example/exercises/01-nested-routing/01-02.problem/app/routes/parent.tsx">
-      `app/routes/parent.tsx`
-    </LaunchEditor>
-
-  </li>
-</ul>
diff --git a/packages/example/exercises/01.nested-routing/01-02.problem/README.02.md b/packages/example/exercises/01.nested-routing/01-02.problem/README.02.md
@@ -35,85 +35,38 @@ export async function loader({ params }: DataFunctionArgs) {
 <ul>
   <li className="flex gap-2">
     <span>modified:</span>
-    <LaunchEditor file="/Users/kentcdodds/code/epicweb-dev/kcdshop/packages/example/exercises/01-nested-routing/01-02.problem/app/entry.server.tsx">
+    <LaunchEditor workshopFile="exercises/01.nested-routing/01-02.problem/app/entry.server.tsx">
       `app/entry.server.tsx`
     </LaunchEditor>
   </li>
   <li className="flex gap-2">
     <span>modified:</span>
-    <LaunchEditor file="/Users/kentcdodds/code/epicweb-dev/kcdshop/packages/example/exercises/01-nested-routing/01-02.problem/app/root.tsx">
+    <LaunchEditor workshopFile="exercises/01.nested-routing/01-02.problem/app/root.tsx">
       `app/root.tsx`
     </LaunchEditor>
   </li>
   <li className="flex gap-2">
     <span>deleted:</span>
-    <LaunchEditor file="/Users/kentcdodds/code/epicweb-dev/kcdshop/packages/example/exercises/01-nested-routing/01-02.problem/app/routes/$.tsx">
+    <LaunchEditor workshopFile="exercises/01.nested-routing/01-02.problem/app/routes/$.tsx">
       `app/routes/$.tsx`
     </LaunchEditor>
   </li>
   <li className="flex gap-2">
     <span>deleted:</span>
-    <LaunchEditor file="/Users/kentcdodds/code/epicweb-dev/kcdshop/packages/example/exercises/01-nested-routing/01-02.problem/app/routes/deleted.tsx">
+    <LaunchEditor workshopFile="exercises/01.nested-routing/01-02.problem/app/routes/deleted.tsx">
       `app/routes/deleted.tsx`
     </LaunchEditor>
   </li>
   <li className="flex gap-2">
     <span>modified:</span>
-    <LaunchEditor file="/Users/kentcdodds/code/epicweb-dev/kcdshop/packages/example/exercises/01-nested-routing/01-02.problem/app/routes/index.tsx">
+    <LaunchEditor workshopFile="exercises/01.nested-routing/01-02.problem/app/routes/index.tsx">
       `app/routes/index.tsx`
     </LaunchEditor>
   </li>
   <li className="flex gap-2">
     <span>modified:</span>
-    <LaunchEditor file="/Users/kentcdodds/code/epicweb-dev/kcdshop/packages/example/exercises/01-nested-routing/01-02.problem/package.json">
+    <LaunchEditor workshopFile="exercises/01.nested-routing/01-02.problem/package.json">
       `package.json`
     </LaunchEditor>
   </li>
 </ul>
-
-<ul>
-  <li className="flex gap-2">
-    <span>modified:</span>
-
-    <LaunchEditor file="/Users/kentcdodds/code/epicweb-dev/kcdshop/packages/example/exercises/01-nested-routing/01-02.problem/app/entry.server.tsx">
-      `app/entry.server.tsx`
-    </LaunchEditor>
-
-  </li>
-
-  <li className="flex gap-2">
-    <span>modified:</span>
-
-    <LaunchEditor file="/Users/kentcdodds/code/epicweb-dev/kcdshop/packages/example/exercises/01-nested-routing/01-02.problem/app/root.tsx">
-      `app/root.tsx`
-    </LaunchEditor>
-
-  </li>
-
-  <li className="flex gap-2">
-    <span>deleted:</span>
-
-    <LaunchEditor file="/Users/kentcdodds/code/epicweb-dev/kcdshop/packages/example/exercises/01-nested-routing/01-02.problem/app/routes/$.tsx">
-      `app/routes/$.tsx`
-    </LaunchEditor>
-
-  </li>
-
-  <li className="flex gap-2">
-    <span>deleted:</span>
-
-    <LaunchEditor file="/Users/kentcdodds/code/epicweb-dev/kcdshop/packages/example/exercises/01-nested-routing/01-02.problem/app/routes/deleted.tsx">
-      `app/routes/deleted.tsx`
-    </LaunchEditor>
-
-  </li>
-
-  <li className="flex gap-2">
-    <span>modified:</span>
-
-    <LaunchEditor file="/Users/kentcdodds/code/epicweb-dev/kcdshop/packages/example/exercises/01-nested-routing/01-02.problem/app/routes/index.tsx">
-      `app/routes/index.tsx`
-    </LaunchEditor>
-
-  </li>
-</ul>
diff --git a/packages/example/exercises/02.styling/01-02.problem/README.01.md b/packages/example/exercises/02.styling/01-02.problem/README.01.md
@@ -3,10 +3,8 @@
 <ul>
   <li className="flex gap-2">
     <span>modified:</span>
-    <LaunchEditor file="/Users/kentcdodds/code/epicweb-dev/kcdshop/packages/example/exercises/02-styling/01-02.problem/package.json">
+    <LaunchEditor workshopFile="exercises/02.styling/01-02.problem/package.json">
       `package.json`
     </LaunchEditor>
   </li>
 </ul>
-
-<ul>- No files changed</ul>
diff --git a/packages/example/exercises/02.styling/01-02.problem/README.02.md b/packages/example/exercises/02.styling/01-02.problem/README.02.md
@@ -3,10 +3,8 @@
 <ul>
   <li className="flex gap-2">
     <span>modified:</span>
-    <LaunchEditor file="/Users/kentcdodds/code/epicweb-dev/kcdshop/packages/example/exercises/02-styling/01-02.problem/package.json">
+    <LaunchEditor workshopFile="exercises/02.styling/01-02.problem/package.json">
       `package.json`
     </LaunchEditor>
   </li>
 </ul>
-
-<ul>- No files changed</ul>
diff --git a/packages/example/exercises/02.styling/03.problem.tailwind/README.md b/packages/example/exercises/02.styling/03.problem.tailwind/README.md
@@ -1,5 +1,5 @@
 ## Files 🗃
 
-<ul>- No files changed</ul>
-
-<ul>- No files changed</ul>
+<ul>
+  <li>No files changed</li>
+</ul>
diff --git a/packages/example/exercises/03.react-components/01-03.problem/README.01.md b/packages/example/exercises/03.react-components/01-03.problem/README.01.md
@@ -7,7 +7,7 @@ Components rock
 <ul>
   <li className="flex gap-2">
     <span>modified:</span>
-    <LaunchEditor file="/Users/kentcdodds/code/epicweb-dev/kcdshop/packages/example/exercises/03-react-components/01-03.problem/index.tsx">
+    <LaunchEditor workshopFile="exercises/03.react-components/01-03.problem/index.tsx">
       `index.tsx`
     </LaunchEditor>
   </li>
diff --git a/packages/example/exercises/03.react-components/01-03.problem/README.02.md b/packages/example/exercises/03.react-components/01-03.problem/README.02.md
@@ -7,7 +7,7 @@ Props are great
 <ul>
   <li className="flex gap-2">
     <span>modified:</span>
-    <LaunchEditor file="/Users/kentcdodds/code/epicweb-dev/kcdshop/packages/example/exercises/03-react-components/01-03.problem/index.tsx">
+    <LaunchEditor workshopFile="exercises/03.react-components/01-03.problem/index.tsx">
       `index.tsx`
     </LaunchEditor>
   </li>
diff --git a/packages/example/exercises/03.react-components/01-03.problem/README.03.md b/packages/example/exercises/03.react-components/01-03.problem/README.03.md
@@ -7,7 +7,7 @@ Don't forget to compose 🎼
 <ul>
   <li className="flex gap-2">
     <span>modified:</span>
-    <LaunchEditor file="/Users/kentcdodds/code/epicweb-dev/kcdshop/packages/example/exercises/03-react-components/01-03.problem/index.tsx">
+    <LaunchEditor workshopFile="exercises/03.react-components/01-03.problem/index.tsx">
       `index.tsx`
     </LaunchEditor>
   </li>
diff --git a/packages/example/exercises/03.react-components/01-03.problem/index.tsx b/packages/example/exercises/03.react-components/01-03.problem/index.tsx
@@ -2,7 +2,12 @@ import * as React from 'react'
 import * as ReactDOM from 'react-dom/client'
 
 function Counter() {
-	return <button>0</button>
+	return (
+		<div>
+			This is a counter!
+			<button>0</button>
+		</div>
+	)
 }
 
 const rootEl = document.createElement('div')
diff --git a/packages/example/exercises/03.react-components/04.problem.state/README.md b/packages/example/exercises/03.react-components/04.problem.state/README.md
@@ -4,4 +4,6 @@ Oh what a problem
 
 ## Files 🗃
 
-<ul>- No files changed</ul>
+<ul>
+  <li>No files changed</li>
+</ul>
diff --git a/packages/workshop-app/app/root.tsx b/packages/workshop-app/app/root.tsx
@@ -1,19 +1,27 @@
-import type { LinksFunction, V2_MetaFunction } from '@remix-run/node'
+import type {
+	LinksFunction,
+	SerializeFrom,
+	V2_MetaFunction,
+} from '@remix-run/node'
+import { json } from '@remix-run/node'
 import {
 	Links,
 	LiveReload,
 	Meta,
 	Outlet,
 	Scripts,
 	ScrollRestoration,
+	useRouteLoaderData,
 } from '@remix-run/react'
 
 import reachTabsStylesheetUrl from '@reach/tabs/styles.css'
 import appStylesheetUrl from './styles/app.css'
 import tailwindStylesheetUrl from './styles/tailwind.css'
+import { getWorkshopRoot } from './utils/misc.server'
 
 export const links: LinksFunction = () => {
 	return [
+		{ rel: 'stylesheet', href: '/fonts.css' },
 		{ rel: 'stylesheet', href: tailwindStylesheetUrl },
 		{ rel: 'stylesheet', href: appStylesheetUrl },
 		{ rel: 'stylesheet', href: reachTabsStylesheetUrl },
@@ -28,6 +36,16 @@ export const meta: V2_MetaFunction = () => {
 	]
 }
 
+export async function loader() {
+	return json({
+		workshopRoot: await getWorkshopRoot(),
+	})
+}
+
+export function useRootLoaderData() {
+	return useRouteLoaderData('root') as SerializeFrom<typeof loader>
+}
+
 export default function App() {
 	return (
 		<html lang="en" className="h-full">
diff --git a/packages/workshop-app/app/routes/_app+/app.$name.ts b/packages/workshop-app/app/routes/_app+/app.$name.ts
@@ -49,6 +49,7 @@ export async function loader({ params }: DataFunctionArgs) {
 		<meta charset="utf-8">
 		<meta name="viewport" content="width=device-width, initial-scale=1">
 		<title>${app.title}</title>
+		<link rel="stylesheet" href="/app-default.css">
 		${indexCss ? `<link rel="stylesheet" href="${indexCss}">` : ''}
 	</head>
 	<body>
diff --git a/packages/workshop-app/app/routes/admin.tsx b/packages/workshop-app/app/routes/admin.tsx
@@ -63,7 +63,9 @@ export async function action({ request }: DataFunctionArgs) {
 					files,
 					app.fullPath,
 				)
-				await fs.promises.writeFile(readmePath, updatedReadme)
+				if (readme !== updatedReadme) {
+					await fs.promises.writeFile(readmePath, updatedReadme)
+				}
 			}
 			return json({ success: true })
 		}
diff --git a/packages/workshop-app/app/routes/launch-editor.tsx b/packages/workshop-app/app/routes/launch-editor.tsx
@@ -2,6 +2,7 @@ import type { DataFunctionArgs } from '@remix-run/node'
 import { json } from '@remix-run/node'
 import { useFetcher } from '@remix-run/react'
 import { z } from 'zod'
+import { useRootLoaderData } from '~/root'
 import { launchEditor } from '~/utils/launch-editor.server'
 
 const launchSchema = z.object({
@@ -23,6 +24,7 @@ export async function action({ request }: DataFunctionArgs) {
 
 export function LaunchEditor({
 	file,
+	workshopFile,
 	line,
 	column,
 	children,
@@ -31,7 +33,15 @@ export function LaunchEditor({
 	line?: number
 	column?: number
 	children: React.ReactNode
-}) {
+} & (
+	| {
+			file: string
+			workshopFile: never
+	  }
+	| { file: never; workshopFile: string }
+)) {
+	const { workshopRoot } = useRootLoaderData()
+	file = workshopFile ? `${workshopRoot}/${workshopFile}` : file
 	const fetcher = useFetcher<typeof action>()
 	return (
 		<fetcher.Form action="/launch-editor" method="post">
diff --git a/packages/workshop-app/app/utils/process-manager.server.ts b/packages/workshop-app/app/utils/process-manager.server.ts
@@ -123,7 +123,7 @@ export async function runAppDev(app: App) {
 	}
 	appProcess.stdout.on('data', handleStdOutData)
 	function handleStdErrData(data: Buffer) {
-		console.log(
+		console.error(
 			data
 				.toString('utf-8')
 				.split('\n')
diff --git a/packages/workshop-app/app/utils/readme-files-section.server.ts b/packages/workshop-app/app/utils/readme-files-section.server.ts
diff --git a/packages/workshop-app/public/app-default.css b/packages/workshop-app/public/app-default.css
diff --git a/packages/workshop-app/public/fonts.css b/packages/workshop-app/public/fonts.css
diff --git a/packages/workshop-app/server/index.ts b/packages/workshop-app/server/index.ts
