@epic-web/workshop-app 6.57.0 → 6.58.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/build/client/assets/{_exerciseNumber-D8mJvwwf.js → _exerciseNumber-COUjBGBi.js} +2 -2
- package/build/client/assets/{_exerciseNumber-D8mJvwwf.js.map → _exerciseNumber-COUjBGBi.js.map} +1 -1
- package/build/client/assets/{_exerciseNumber_.finished-ifOd5NuD.js → _exerciseNumber_.finished-BjiSuKGH.js} +2 -2
- package/build/client/assets/{_exerciseNumber_.finished-ifOd5NuD.js.map → _exerciseNumber_.finished-BjiSuKGH.js.map} +1 -1
- package/build/client/assets/{_layout-DDytBxiZ.js → _layout-DgA_wW0k.js} +2 -2
- package/build/client/assets/{_layout-DDytBxiZ.js.map → _layout-DgA_wW0k.js.map} +1 -1
- package/build/client/assets/{diff-CUbXRIeq.js → diff-BVJpb91n.js} +2 -2
- package/build/client/assets/{diff-CUbXRIeq.js.map → diff-BVJpb91n.js.map} +1 -1
- package/build/client/assets/{diff-GhgVnDeo.js → diff-BkCOoQXe.js} +2 -2
- package/build/client/assets/{diff-GhgVnDeo.js.map → diff-BkCOoQXe.js.map} +1 -1
- package/build/client/assets/{epic-video-DdaxOz-5.js → epic-video-DSeT-uKN.js} +123 -123
- package/build/client/assets/{epic-video-DdaxOz-5.js.map → epic-video-DSeT-uKN.js.map} +1 -1
- package/build/client/assets/{epic-video-BUuA-tBw.js → epic-video-ITsM_wbc.js} +2 -2
- package/build/client/assets/{epic-video-BUuA-tBw.js.map → epic-video-ITsM_wbc.js.map} +1 -1
- package/build/client/assets/{finished-Dug_uwjv.js → finished-CBJx9qcb.js} +2 -2
- package/build/client/assets/{finished-Dug_uwjv.js.map → finished-CBJx9qcb.js.map} +1 -1
- package/build/client/assets/{index-UPAFB0f0.js → index-Cr0r3TYc.js} +2 -2
- package/build/client/assets/{index-UPAFB0f0.js.map → index-Cr0r3TYc.js.map} +1 -1
- package/build/client/assets/{index-C2aC4iSz.js → index-DOotQobj.js} +2 -2
- package/build/client/assets/{index-C2aC4iSz.js.map → index-DOotQobj.js.map} +1 -1
- package/build/client/assets/{manifest-ade4e0c4.js → manifest-212b6ac9.js} +1 -1
- package/build/client/assets/{mdx-CTC7HBz7.js → mdx-Bez0LKTa.js} +2 -2
- package/build/client/assets/{mdx-CTC7HBz7.js.map → mdx-Bez0LKTa.js.map} +1 -1
- package/build/client/assets/{test-BDSMF-Kf.js → test-BjW5Fz1e.js} +2 -2
- package/build/client/assets/{test-BDSMF-Kf.js.map → test-BjW5Fz1e.js.map} +1 -1
- package/build/client/assets/{tests-CHg0zMRl.js → tests-ihMcV-RO.js} +2 -2
- package/build/client/assets/{tests-CHg0zMRl.js.map → tests-ihMcV-RO.js.map} +1 -1
- package/build/server/index.js +12 -2
- package/build/server/index.js.map +1 -1
- package/package.json +3 -3
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{w as s,a as n,L as c}from"./chunk-UIGDSWPH-D7TrB36R.js";import{j as r}from"./jsx-runtime-C5WNSv3b.js";import{E as l}from"./index-C5c6Cdgw.js";import{E as m}from"./epic-video-
|
|
2
|
-
//# sourceMappingURL=_exerciseNumber-
|
|
1
|
+
import{w as s,a as n,L as c}from"./chunk-UIGDSWPH-D7TrB36R.js";import{j as r}from"./jsx-runtime-C5WNSv3b.js";import{E as l}from"./index-C5c6Cdgw.js";import{E as m}from"./epic-video-DSeT-uKN.js";import{G as p}from"./error-boundary-AXWwBxFl.js";import{u as a}from"./revalidation-ws-BdlKZ8s_.js";import{E as x}from"./launch-editor-B4NVrR9O.js";import{P as u}from"./progress-1Egr2Ysk.js";import{M as f}from"./mdx-Bez0LKTa.js";import{g as d}from"./root-loader-CcoJXu7H.js";import{g as b}from"./seo-t5J-DRxw.js";import{E as h}from"./error-boundary-R9rMPCtW.js";import"./index-Az39ZADK.js";import"./use-event-source-CrGUTTzj.js";import"./index-Dd9cSrtE.js";import"./index-CjiomtK6.js";import"./index-Dvg33-i0.js";import"./misc-GmfBFNKU.js";import"./tooltip-DOPvLR3d.js";import"./pe-BgHP_H47.js";import"./types-Cl2NuNg4.js";import"./online-DlPkOHh3.js";import"./loading-TTjdHw_c.js";import"./user-BGmCaKzN.js";import"./workshop-config-CJJU91bU.js";import"./preload-helper-BXl3LOEh.js";import"./progress-bar-CXiAexcc.js";import"./chunk-JG3XND5A-BfVtTDVp.js";const J=({loaderData:t,matches:e})=>{const o=t?.exercise.exerciseNumber.toString().padStart(2,"0"),i=d(e);return!t||!i?[{title:"🦉 | Error"}]:b({title:`📝 | ${o}. ${t.exercise.title} | ${i?.workshopTitle}`,description:`Introduction for ${o}. ${t.exercise.title}`,ogTitle:t.exercise.title,ogDescription:`Introduction for exercise ${Number(o)}`,instructor:i.instructor,requestInfo:i.requestInfo})},g={h1:()=>null},K=s(function({loaderData:e}){a({watchPaths:[e.exerciseReadme.file]});const o=String(e.firstStep?.stepNumber??"01").padStart(2,"0");return r.jsxs("main",{className:"relative flex h-full w-full max-w-5xl flex-col justify-between border-r md:w-3/4 xl:w-2/3",children:[r.jsxs("article",{id:e.articleId,className:"shadow-on-scrollbox scrollbar-thin scrollbar-thumb-scrollbar flex w-full flex-1 flex-col gap-12 overflow-y-scroll px-3 py-4 pt-6 md:px-10 md:py-12 md:pt-16",children:[r.jsx("div",{children:r.jsx("h1",{className:"text-[clamp(3rem,6vw,7.5rem)] leading-none font-extrabold",children:e.exercise.title})}),r.jsx("div",{children:e.exercise.instructionsCode?r.jsx(m,{epicVideoInfosPromise:e.epicVideoInfosPromise,children:r.jsx("div",{className:"prose dark:prose-invert sm:prose-lg",children:r.jsx(f,{code:e.exercise.instructionsCode,components:g})})}):"No instructions yet..."})]},e.articleId),r.jsx(l,{elementQuery:`#${e.articleId}`},`scroll-${e.articleId}`),r.jsx(u,{type:"instructions",exerciseNumber:e.exerciseNumber,className:"h-14 border-t px-6"}),r.jsxs("div",{className:"@container flex h-16 justify-between border-t border-b-4 lg:border-b-0",children:[r.jsx("div",{}),r.jsx(x,{file:e.exerciseReadme.file,relativePath:e.exerciseReadme.relativePath}),r.jsx(c,{to:`${o}/${e.firstType}`,prefetch:"intent",className:"bg-foreground text-background flex h-full items-center justify-center px-7","data-keyboard-action":"g+n",children:"Start Learning"})]})]})}),U=n(function(){return r.jsx(p,{className:"container flex items-center justify-center",statusHandlers:{404:h}})});export{U as ErrorBoundary,K as default,J as meta};
|
|
2
|
+
//# sourceMappingURL=_exerciseNumber-COUjBGBi.js.map
|
package/build/client/assets/{_exerciseNumber-D8mJvwwf.js.map → _exerciseNumber-COUjBGBi.js.map}
RENAMED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"_exerciseNumber-
|
|
1
|
+
{"version":3,"file":"_exerciseNumber-COUjBGBi.js","sources":["../../../app/routes/_app+/exercise+/$exerciseNumber.tsx"],"sourcesContent":["import path from 'path'\nimport { invariantResponse } from '@epic-web/invariant'\nimport { ElementScrollRestoration } from '@epic-web/restore-scroll'\nimport {\n\tgetExercises,\n\tgetWorkshopRoot,\n} from '@epic-web/workshop-utils/apps.server'\nimport { getWorkshopConfig } from '@epic-web/workshop-utils/config.server'\nimport { getEpicVideoInfos } from '@epic-web/workshop-utils/epic-api.server'\nimport {\n\tcombineServerTimings,\n\tgetServerTimeHeader,\n\tmakeTimings,\n\ttime,\n} from '@epic-web/workshop-utils/timing.server'\nimport slugify from '@sindresorhus/slugify'\nimport { data, type HeadersFunction, Link } from 'react-router'\nimport { EpicVideoInfoProvider } from '#app/components/epic-video.tsx'\nimport { GeneralErrorBoundary } from '#app/components/error-boundary.tsx'\nimport { useRevalidationWS } from '#app/components/revalidation-ws.tsx'\nimport { EditFileOnGitHub } from '#app/routes/launch-editor.tsx'\nimport { ProgressToggle } from '#app/routes/progress.tsx'\nimport { Mdx } from '#app/utils/mdx.tsx'\nimport { getRootMatchLoaderData } from '#app/utils/root-loader.ts'\nimport { getSeoMetaTags } from '#app/utils/seo.ts'\nimport { type Route } from './+types/$exerciseNumber.tsx'\nimport { getExercise404Data } from './__shared/error-boundary.server.ts'\nimport { Exercise404ErrorBoundary } from './__shared/error-boundary.tsx'\n\nexport const meta: Route.MetaFunction = ({ loaderData, matches }) => {\n\tconst number = loaderData?.exercise.exerciseNumber.toString().padStart(2, '0')\n\n\tconst rootData = getRootMatchLoaderData(matches)\n\tif (!loaderData || !rootData) return [{ title: '🦉 | Error' }]\n\n\treturn getSeoMetaTags({\n\t\ttitle: `📝 | ${number}. ${loaderData.exercise.title} | ${rootData?.workshopTitle}`,\n\t\tdescription: `Introduction for ${number}. ${loaderData.exercise.title}`,\n\t\togTitle: loaderData.exercise.title,\n\t\togDescription: `Introduction for exercise ${Number(number)}`,\n\t\tinstructor: rootData.instructor,\n\t\trequestInfo: rootData.requestInfo,\n\t})\n}\n\nexport async function loader({ request, params }: Route.LoaderArgs) {\n\tconst timings = makeTimings('exerciseNumberLoader')\n\tinvariantResponse(params.exerciseNumber, 'exerciseNumber is required')\n\tconst { title: workshopTitle } = getWorkshopConfig()\n\tconst exercises = await time(() => getExercises({ request, timings }), {\n\t\ttimings,\n\t\ttype: 'getExercises',\n\t\tdesc: 'getExercises in $exerciseNumber.tsx',\n\t})\n\tconst exercise = exercises.find(\n\t\t(e) => e.exerciseNumber === Number(params.exerciseNumber),\n\t)\n\tif (!exercise) {\n\t\tthrow Response.json(getExercise404Data({ exercises }), { status: 404 })\n\t}\n\n\tconst readmeFilepath = path.join(\n\t\tgetWorkshopRoot(),\n\t\t'exercises',\n\t\texercise.dirName,\n\t\t'README.mdx',\n\t)\n\n\tconst firstStep = exercise.steps.find(Boolean)\n\n\tconst articleId = `workshop-${slugify(workshopTitle)}-${\n\t\texercise.exerciseNumber\n\t}-instructions`\n\n\treturn data(\n\t\t{\n\t\t\tarticleId,\n\t\t\texercise,\n\t\t\texerciseNumber: exercise.exerciseNumber,\n\t\t\texerciseReadme: {\n\t\t\t\tfile: readmeFilepath,\n\t\t\t\trelativePath: `exercises/${exercise.dirName}/README.mdx`,\n\t\t\t},\n\t\t\texerciseTitle: exercise.title,\n\t\t\tfirstStep,\n\t\t\tfirstType: firstStep?.problem ? 'problem' : 'solution',\n\t\t\ttitle: workshopTitle,\n\t\t\tepicVideoInfosPromise: getEpicVideoInfos(\n\t\t\t\texercise.instructionsEpicVideoEmbeds,\n\t\t\t\t{ request },\n\t\t\t),\n\t\t},\n\t\t{\n\t\t\theaders: {\n\t\t\t\t'Server-Timing': getServerTimeHeader(timings),\n\t\t\t},\n\t\t},\n\t)\n}\n\nexport const headers: HeadersFunction = ({ loaderHeaders, parentHeaders }) => {\n\tconst headers = {\n\t\t'Cache-Control': loaderHeaders.get('Cache-Control') ?? '',\n\t\t'Server-Timing': combineServerTimings(loaderHeaders, parentHeaders),\n\t}\n\treturn headers\n}\n\n// we'll render the title ourselves thank you\nconst mdxComponents = { h1: () => null }\n\nexport default function ExerciseNumberRoute({\n\tloaderData: data,\n}: Route.ComponentProps) {\n\tuseRevalidationWS({\n\t\twatchPaths: [data.exerciseReadme.file],\n\t})\n\n\tconst firstStepNumber = String(data.firstStep?.stepNumber ?? '01').padStart(\n\t\t2,\n\t\t'0',\n\t)\n\treturn (\n\t\t<main className=\"relative flex h-full w-full max-w-5xl flex-col justify-between border-r md:w-3/4 xl:w-2/3\">\n\t\t\t<article\n\t\t\t\tid={data.articleId}\n\t\t\t\tkey={data.articleId}\n\t\t\t\tclassName=\"shadow-on-scrollbox scrollbar-thin scrollbar-thumb-scrollbar flex w-full flex-1 flex-col gap-12 overflow-y-scroll px-3 py-4 pt-6 md:px-10 md:py-12 md:pt-16\"\n\t\t\t>\n\t\t\t\t<div>\n\t\t\t\t\t<h1 className=\"text-[clamp(3rem,6vw,7.5rem)] leading-none font-extrabold\">\n\t\t\t\t\t\t{data.exercise.title}\n\t\t\t\t\t</h1>\n\t\t\t\t</div>\n\t\t\t\t<div>\n\t\t\t\t\t{data.exercise.instructionsCode ? (\n\t\t\t\t\t\t<EpicVideoInfoProvider\n\t\t\t\t\t\t\tepicVideoInfosPromise={data.epicVideoInfosPromise}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<div className=\"prose dark:prose-invert sm:prose-lg\">\n\t\t\t\t\t\t\t\t<Mdx\n\t\t\t\t\t\t\t\t\tcode={data.exercise.instructionsCode}\n\t\t\t\t\t\t\t\t\tcomponents={mdxComponents}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</EpicVideoInfoProvider>\n\t\t\t\t\t) : (\n\t\t\t\t\t\t'No instructions yet...'\n\t\t\t\t\t)}\n\t\t\t\t</div>\n\t\t\t</article>\n\t\t\t<ElementScrollRestoration\n\t\t\t\telementQuery={`#${data.articleId}`}\n\t\t\t\tkey={`scroll-${data.articleId}`}\n\t\t\t/>\n\t\t\t<ProgressToggle\n\t\t\t\ttype=\"instructions\"\n\t\t\t\texerciseNumber={data.exerciseNumber}\n\t\t\t\tclassName=\"h-14 border-t px-6\"\n\t\t\t/>\n\t\t\t<div className=\"@container flex h-16 justify-between border-t border-b-4 lg:border-b-0\">\n\t\t\t\t<div />\n\t\t\t\t<EditFileOnGitHub\n\t\t\t\t\tfile={data.exerciseReadme.file}\n\t\t\t\t\trelativePath={data.exerciseReadme.relativePath}\n\t\t\t\t/>\n\t\t\t\t<Link\n\t\t\t\t\tto={`${firstStepNumber}/${data.firstType}`}\n\t\t\t\t\tprefetch=\"intent\"\n\t\t\t\t\tclassName=\"bg-foreground text-background flex h-full items-center justify-center px-7\"\n\t\t\t\t\tdata-keyboard-action=\"g+n\"\n\t\t\t\t>\n\t\t\t\t\tStart Learning\n\t\t\t\t</Link>\n\t\t\t</div>\n\t\t</main>\n\t)\n}\n\nexport function ErrorBoundary() {\n\treturn (\n\t\t<GeneralErrorBoundary\n\t\t\tclassName=\"container flex items-center justify-center\"\n\t\t\tstatusHandlers={{\n\t\t\t\t404: Exercise404ErrorBoundary,\n\t\t\t}}\n\t\t/>\n\t)\n}\n"],"names":["meta","loaderData","matches","number","exercise","exerciseNumber","toString","padStart","rootData","getRootMatchLoaderData","title","getSeoMetaTags","workshopTitle","description","ogTitle","ogDescription","Number","instructor","requestInfo","mdxComponents","h1","$exerciseNumber","_UNSAFE_withComponentProps","data","useRevalidationWS","watchPaths","exerciseReadme","file","firstStepNumber","String","firstStep","stepNumber","jsxs","className","children","id","articleId","jsx","instructionsCode","EpicVideoInfoProvider","epicVideoInfosPromise","Mdx","code","components","ElementScrollRestoration","elementQuery","ProgressToggle","type","EditFileOnGitHub","relativePath","Link","to","firstType","prefetch","ErrorBoundary","_UNSAFE_withErrorBoundaryProps","GeneralErrorBoundary","statusHandlers","Exercise404ErrorBoundary"],"mappings":"yhCA6BO,MAAMA,EAA2BA,CAAC,CAAEC,WAAAA,EAAYC,QAAAA,CAAQ,IAAM,CACpE,MAAMC,EAASF,GAAYG,SAASC,eAAeC,WAAWC,SAAS,EAAG,GAAG,EAEvEC,EAAWC,EAAuBP,CAAO,EAC/C,MAAI,CAACD,GAAc,CAACO,EAAiB,CAAC,CAAEE,MAAO,YAAa,CAAC,EAEtDC,EAAe,CACrBD,MAAO,QAAQP,CAAM,KAAKF,EAAWG,SAASM,KAAK,MAAMF,GAAUI,aAAa,GAChFC,YAAa,oBAAoBV,CAAM,KAAKF,EAAWG,SAASM,KAAK,GACrEI,QAASb,EAAWG,SAASM,MAC7BK,cAAe,6BAA6BC,OAAOb,CAAM,CAAC,GAC1Dc,WAAYT,EAASS,WACrBC,YAAaV,EAASU,WACvB,CAAC,CACF,EAkEMC,EAAgB,CAAEC,GAAIA,IAAM,IAAK,EAEvCC,EAAAC,EAAA,SAA4C,CAC3CrB,WAAYsB,CACb,EAAyB,CACxBC,EAAkB,CACjBC,WAAY,CAACF,EAAKG,eAAeC,IAAI,CACtC,CAAC,EAED,MAAMC,EAAkBC,OAAON,EAAKO,WAAWC,YAAc,IAAI,EAAExB,SAClE,EACA,GACD,EACA,OACCyB,EAAAA,KAAC,OAAA,CAAKC,UAAU,4FACfC,SAAA,CAAAF,EAAAA,KAAC,UAAA,CACAG,GAAIZ,EAAKa,UAETH,UAAU,8JAEVC,SAAA,CAAAG,EAAAA,IAAC,MAAA,CACAH,eAAC,KAAA,CAAGD,UAAU,4DACZC,SAAAX,EAAKnB,SAASM,MAChB,CAAA,CACD,EACA2B,EAAAA,IAAC,MAAA,CACCH,SAAAX,EAAKnB,SAASkC,iBACdD,EAAAA,IAACE,EAAA,CACAC,sBAAuBjB,EAAKiB,sBAE5BN,SAAAG,EAAAA,IAAC,MAAA,CAAIJ,UAAU,sCACdC,SAAAG,EAAAA,IAACI,EAAA,CACAC,KAAMnB,EAAKnB,SAASkC,iBACpBK,WAAYxB,EACb,EACD,CAAA,CACD,EAEA,wBAAA,CAEF,CAAA,GAvBKI,EAAKa,SAwBX,EACAC,EAAAA,IAACO,EAAA,CACAC,aAAc,IAAItB,EAAKa,SAAS,EAAA,EAC3B,UAAUb,EAAKa,SAAS,EAC9B,EACAC,EAAAA,IAACS,EAAA,CACAC,KAAK,eACL1C,eAAgBkB,EAAKlB,eACrB4B,UAAU,oBAAA,CACX,EACAD,EAAAA,KAAC,MAAA,CAAIC,UAAU,yEACdC,SAAA,CAAAG,EAAAA,IAAC,MAAA,CAAA,CAAI,EACLA,EAAAA,IAACW,EAAA,CACArB,KAAMJ,EAAKG,eAAeC,KAC1BsB,aAAc1B,EAAKG,eAAeuB,YAAA,CACnC,EACAZ,EAAAA,IAACa,EAAA,CACAC,GAAI,GAAGvB,CAAe,IAAIL,EAAK6B,SAAS,GACxCC,SAAS,SACTpB,UAAU,6EACV,uBAAqB,MACrBC,SAAA,gBAAA,CAED,CAAA,CAAA,CACD,CAAA,CAAA,CACD,CAEF,CAAA,EAEOoB,EAAAC,EAAA,UAAyB,CAC/B,OACClB,EAAAA,IAACmB,EAAA,CACAvB,UAAU,6CACVwB,eAAgB,CACf,IAAKC,CACN,CAAA,CACD,CAEF,CAAA"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{w as n,L as l}from"./chunk-UIGDSWPH-D7TrB36R.js";import{j as e}from"./jsx-runtime-C5WNSv3b.js";import{E as c}from"./index-C5c6Cdgw.js";import{r as m}from"./index-Az39ZADK.js";import{E as a}from"./epic-video-
|
|
2
|
-
//# sourceMappingURL=_exerciseNumber_.finished-
|
|
1
|
+
import{w as n,L as l}from"./chunk-UIGDSWPH-D7TrB36R.js";import{j as e}from"./jsx-runtime-C5WNSv3b.js";import{E as c}from"./index-C5c6Cdgw.js";import{r as m}from"./index-Az39ZADK.js";import{E as a}from"./epic-video-DSeT-uKN.js";import{I as x,c as d}from"./misc-GmfBFNKU.js";import{L as f}from"./loading-TTjdHw_c.js";import{N as p}from"./nav-chevrons-C1okk63A.js";import{u as h}from"./revalidation-ws-BdlKZ8s_.js";import{E as u}from"./launch-editor-B4NVrR9O.js";import{P as b}from"./progress-1Egr2Ysk.js";import{u as j}from"./index-Dvg33-i0.js";import{M as g}from"./mdx-Bez0LKTa.js";import{u as N}from"./online-DlPkOHh3.js";import{g as v}from"./root-loader-CcoJXu7H.js";import{g as w}from"./seo-t5J-DRxw.js";import"./use-event-source-CrGUTTzj.js";import"./index-Dd9cSrtE.js";import"./index-CjiomtK6.js";import"./types-Cl2NuNg4.js";import"./tooltip-DOPvLR3d.js";import"./user-BGmCaKzN.js";import"./workshop-config-CJJU91bU.js";import"./progress-bar-CXiAexcc.js";import"./pe-BgHP_H47.js";import"./preload-helper-BXl3LOEh.js";const Y=({loaderData:s,matches:r})=>{const i=s?.exercise.exerciseNumber.toString().padStart(2,"0"),o=v(r);return!s||!o?[{title:"🦉 | Error"}]:w({title:`🦉 | ${i}. ${s.exercise.title} | ${o?.workshopTitle}`,description:`Elaboration for ${i}. ${s.exercise.title}`,ogTitle:`Finished: ${s.exercise.title}`,ogDescription:`Elaboration for exercise ${Number(i)}`,instructor:o.instructor,requestInfo:o.requestInfo})},E={h1:()=>null},Z=n(function({loaderData:r}){const i=r.exercise.exerciseNumber.toString().padStart(2,"0");return h({watchPaths:[`./exercises/${i}/FINISHED.mdx`]}),e.jsx("div",{className:"flex max-w-full grow flex-col",children:e.jsxs("main",{className:"flex grow flex-col sm:grid sm:h-full sm:min-h-[800px] sm:grid-cols-1 sm:grid-rows-2 md:min-h-[unset] lg:grid-cols-2 lg:grid-rows-1",children:[e.jsxs("div",{className:"relative flex flex-col sm:col-span-1 sm:row-span-1 sm:h-full lg:border-r",children:[e.jsx("h1",{className:"h-14 border-b pr-5 pl-10 text-sm leading-tight font-medium",children:e.jsx("div",{className:"flex h-14 flex-wrap items-center justify-between gap-x-2 py-2",children:e.jsxs("div",{className:"flex items-center justify-start gap-x-2",children:[e.jsx(l,{to:`/${i}`,className:"hover:underline",children:`${i}. ${r.exercise.title}`}),e.jsx("span",{children:"/"}),e.jsx("span",{children:"Elaboration"})]})})}),e.jsx("article",{className:"shadow-on-scrollbox scrollbar-thin scrollbar-thumb-scrollbar h-full w-full max-w-none flex-1 scroll-pt-6 space-y-6 overflow-y-auto p-2 sm:p-10 sm:pt-8",id:r.articleId,children:r.exercise.finishedCode?e.jsx(a,{epicVideoInfosPromise:r.epicVideoInfosPromise,children:e.jsx("div",{className:"prose dark:prose-invert sm:prose-lg",children:e.jsx(g,{code:r.exercise.finishedCode,components:E})})}):"No finished instructions yet..."}),e.jsx(c,{elementQuery:`#${r.articleId}`}),e.jsx(b,{type:"finished",exerciseNumber:r.exercise.exerciseNumber,className:"h-14 border-t px-6"}),e.jsxs("div",{className:"@container flex h-16 justify-between border-t border-b-4 lg:border-b-0",children:[e.jsx("div",{}),e.jsx(u,{file:r.exerciseFinished.file,relativePath:r.exerciseFinished.relativePath}),e.jsx(p,{prev:r.prevStepLink,next:r.nextStepLink})]})]}),e.jsx(y,{exerciseFormEmbedUrl:r.exerciseFormEmbedUrl,exerciseTitle:r.exercise.title})]})})});function y({exerciseFormEmbedUrl:s,exerciseTitle:r}){const i=j(),[o,t]=m.useState(!1);return N()?e.jsxs("div",{className:"relative min-h-full sm:min-h-[unset] sm:shrink-0",children:[o?null:e.jsx("div",{className:"absolute inset-0 z-10 flex items-center justify-center",children:e.jsx(f,{children:e.jsxs("span",{children:["Loading ",r," Elaboration form"]})})}),e.jsx("iframe",{onLoad:()=>t(!0),onError:()=>t(!0),title:"Elaboration",src:s,className:d("absolute inset-0 flex h-full w-full transition-opacity duration-300",o?"opacity-100":"opacity-0"),style:{colorScheme:i}})]}):e.jsx("div",{className:"relative shrink-0",children:e.jsx("div",{className:"text-body-md text-foreground-destructive absolute inset-0 z-10 flex items-center justify-center",children:e.jsx(x,{name:"WifiNoConnection",size:"xl",children:e.jsxs("span",{children:["Unable to load the ",e.jsx("a",{href:s,className:"underline",children:`${r} feedback form`})," when offline"]})})})})}export{Z as default,Y as meta};
|
|
2
|
+
//# sourceMappingURL=_exerciseNumber_.finished-BjiSuKGH.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"_exerciseNumber_.finished-ifOd5NuD.js","sources":["../../../app/routes/_app+/exercise+/$exerciseNumber_.finished.tsx"],"sourcesContent":["import path from 'path'\nimport { invariantResponse } from '@epic-web/invariant'\nimport { ElementScrollRestoration } from '@epic-web/restore-scroll'\nimport {\n\tgetAppPageRoute,\n\tgetApps,\n\tgetExercise,\n\tgetWorkshopRoot,\n\tisExerciseStepApp,\n} from '@epic-web/workshop-utils/apps.server'\nimport { getWorkshopConfig } from '@epic-web/workshop-utils/config.server'\nimport { getEpicVideoInfos } from '@epic-web/workshop-utils/epic-api.server'\nimport {\n\tcombineServerTimings,\n\tgetServerTimeHeader,\n\tmakeTimings,\n} from '@epic-web/workshop-utils/timing.server'\nimport slugify from '@sindresorhus/slugify'\nimport * as React from 'react'\nimport { data, type HeadersFunction, Link } from 'react-router'\nimport { EpicVideoInfoProvider } from '#app/components/epic-video.tsx'\nimport { Icon } from '#app/components/icons.tsx'\nimport { Loading } from '#app/components/loading.tsx'\nimport { NavChevrons } from '#app/components/nav-chevrons.tsx'\nimport { useRevalidationWS } from '#app/components/revalidation-ws.tsx'\nimport { EditFileOnGitHub } from '#app/routes/launch-editor.tsx'\nimport { ProgressToggle } from '#app/routes/progress.tsx'\nimport { useTheme } from '#app/routes/theme/index.tsx'\nimport { Mdx } from '#app/utils/mdx.tsx'\nimport { cn } from '#app/utils/misc.tsx'\nimport { useIsOnline } from '#app/utils/online.ts'\nimport { getRootMatchLoaderData } from '#app/utils/root-loader.ts'\nimport { getSeoMetaTags } from '#app/utils/seo.ts'\nimport { type Route } from './+types/$exerciseNumber_.finished.tsx'\n\nexport const meta: Route.MetaFunction = ({ loaderData, matches }) => {\n\tconst number = loaderData?.exercise.exerciseNumber.toString().padStart(2, '0')\n\n\tconst rootData = getRootMatchLoaderData(matches)\n\tif (!loaderData || !rootData) return [{ title: '🦉 | Error' }]\n\n\treturn getSeoMetaTags({\n\t\ttitle: `🦉 | ${number}. ${loaderData.exercise.title} | ${rootData?.workshopTitle}`,\n\t\tdescription: `Elaboration for ${number}. ${loaderData.exercise.title}`,\n\t\togTitle: `Finished: ${loaderData.exercise.title}`,\n\t\togDescription: `Elaboration for exercise ${Number(number)}`,\n\t\tinstructor: rootData.instructor,\n\t\trequestInfo: rootData.requestInfo,\n\t})\n}\n\nexport async function loader({ request, params }: Route.LoaderArgs) {\n\tconst timings = makeTimings('exerciseFinishedLoader')\n\tinvariantResponse(params.exerciseNumber, 'exerciseNumber is required')\n\tconst exercise = await getExercise(params.exerciseNumber, {\n\t\ttimings,\n\t\trequest,\n\t})\n\tif (!exercise) {\n\t\tthrow new Response('Not found', { status: 404 })\n\t}\n\tconst workshopConfig = getWorkshopConfig()\n\tconst exerciseFormTemplate = workshopConfig.forms.exercise\n\tconst exerciseFormEmbedUrl = exerciseFormTemplate\n\t\t.replace('{workshopTitle}', encodeURIComponent(workshopConfig.title))\n\t\t.replace('{exerciseTitle}', encodeURIComponent(exercise.title))\n\tconst nextExercise = await getExercise(exercise.exerciseNumber + 1, {\n\t\ttimings,\n\t\trequest,\n\t})\n\n\tconst finishedFilepath = path.join(\n\t\tgetWorkshopRoot(),\n\t\t'exercises',\n\t\texercise.dirName,\n\t\t'FINISHED.mdx',\n\t)\n\n\tconst apps = await getApps({ request, timings })\n\tconst exerciseApps = apps\n\t\t.filter(isExerciseStepApp)\n\t\t.filter((app) => app.exerciseNumber === exercise.exerciseNumber)\n\tconst prevApp = exerciseApps[exerciseApps.length - 1]\n\n\tconst articleId = `workshop-${slugify(workshopConfig.title)}-${\n\t\texercise.exerciseNumber\n\t}-finished`\n\n\treturn data(\n\t\t{\n\t\t\tarticleId,\n\t\t\tworkshopTitle: workshopConfig.title,\n\t\t\texercise,\n\t\t\texerciseFormEmbedUrl,\n\t\t\tepicVideoInfosPromise: getEpicVideoInfos(\n\t\t\t\texercise.finishedEpicVideoEmbeds,\n\t\t\t\t{ request },\n\t\t\t),\n\t\t\texerciseFinished: {\n\t\t\t\tfile: finishedFilepath,\n\t\t\t\trelativePath: `exercises/${exercise.dirName}/FINISHED.mdx`,\n\t\t\t},\n\t\t\tprevStepLink: prevApp\n\t\t\t\t? {\n\t\t\t\t\t\tto: getAppPageRoute(prevApp),\n\t\t\t\t\t\t'aria-label': `${prevApp.title} (${prevApp.type})`,\n\t\t\t\t\t}\n\t\t\t\t: null,\n\t\t\tnextStepLink: nextExercise\n\t\t\t\t? {\n\t\t\t\t\t\tto: `/exercise/${nextExercise.exerciseNumber.toString().padStart(2, '0')}`,\n\t\t\t\t\t\t'aria-label': `${nextExercise.title}`,\n\t\t\t\t\t}\n\t\t\t\t: {\n\t\t\t\t\t\tto: '/finished',\n\t\t\t\t\t\t'aria-label': 'Finished! 🎉',\n\t\t\t\t\t},\n\t\t},\n\t\t{\n\t\t\theaders: {\n\t\t\t\t'Server-Timing': getServerTimeHeader(timings),\n\t\t\t},\n\t\t},\n\t)\n}\n\nexport const headers: HeadersFunction = ({ loaderHeaders, parentHeaders }) => {\n\tconst headers = {\n\t\t'Cache-Control': loaderHeaders.get('Cache-Control') ?? '',\n\t\t'Server-Timing': combineServerTimings(loaderHeaders, parentHeaders),\n\t}\n\treturn headers\n}\n\nconst mdxComponents = { h1: () => null }\nexport default function ExerciseFinished({\n\tloaderData: data,\n}: Route.ComponentProps) {\n\tconst exerciseNumber = data.exercise.exerciseNumber\n\t\t.toString()\n\t\t.padStart(2, '0')\n\n\tuseRevalidationWS({\n\t\twatchPaths: [`./exercises/${exerciseNumber}/FINISHED.mdx`],\n\t})\n\n\treturn (\n\t\t<div className=\"flex max-w-full grow flex-col\">\n\t\t\t<main className=\"flex grow flex-col sm:grid sm:h-full sm:min-h-[800px] sm:grid-cols-1 sm:grid-rows-2 md:min-h-[unset] lg:grid-cols-2 lg:grid-rows-1\">\n\t\t\t\t<div className=\"relative flex flex-col sm:col-span-1 sm:row-span-1 sm:h-full lg:border-r\">\n\t\t\t\t\t<h1 className=\"h-14 border-b pr-5 pl-10 text-sm leading-tight font-medium\">\n\t\t\t\t\t\t<div className=\"flex h-14 flex-wrap items-center justify-between gap-x-2 py-2\">\n\t\t\t\t\t\t\t<div className=\"flex items-center justify-start gap-x-2\">\n\t\t\t\t\t\t\t\t<Link to={`/${exerciseNumber}`} className=\"hover:underline\">\n\t\t\t\t\t\t\t\t\t{`${exerciseNumber}. ${data.exercise.title}`}\n\t\t\t\t\t\t\t\t</Link>\n\t\t\t\t\t\t\t\t<span>/</span>\n\t\t\t\t\t\t\t\t<span>Elaboration</span>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</h1>\n\n\t\t\t\t\t<article\n\t\t\t\t\t\tclassName=\"shadow-on-scrollbox scrollbar-thin scrollbar-thumb-scrollbar h-full w-full max-w-none flex-1 scroll-pt-6 space-y-6 overflow-y-auto p-2 sm:p-10 sm:pt-8\"\n\t\t\t\t\t\tid={data.articleId}\n\t\t\t\t\t>\n\t\t\t\t\t\t{data.exercise.finishedCode ? (\n\t\t\t\t\t\t\t<EpicVideoInfoProvider\n\t\t\t\t\t\t\t\tepicVideoInfosPromise={data.epicVideoInfosPromise}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<div className=\"prose dark:prose-invert sm:prose-lg\">\n\t\t\t\t\t\t\t\t\t<Mdx\n\t\t\t\t\t\t\t\t\t\tcode={data.exercise.finishedCode}\n\t\t\t\t\t\t\t\t\t\tcomponents={mdxComponents}\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t</EpicVideoInfoProvider>\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t// TODO: render a random dad joke...\n\t\t\t\t\t\t\t'No finished instructions yet...'\n\t\t\t\t\t\t)}\n\t\t\t\t\t</article>\n\t\t\t\t\t<ElementScrollRestoration elementQuery={`#${data.articleId}`} />\n\t\t\t\t\t<ProgressToggle\n\t\t\t\t\t\ttype=\"finished\"\n\t\t\t\t\t\texerciseNumber={data.exercise.exerciseNumber}\n\t\t\t\t\t\tclassName=\"h-14 border-t px-6\"\n\t\t\t\t\t/>\n\t\t\t\t\t<div className=\"@container flex h-16 justify-between border-t border-b-4 lg:border-b-0\">\n\t\t\t\t\t\t<div />\n\t\t\t\t\t\t<EditFileOnGitHub\n\t\t\t\t\t\t\tfile={data.exerciseFinished.file}\n\t\t\t\t\t\t\trelativePath={data.exerciseFinished.relativePath}\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<NavChevrons prev={data.prevStepLink} next={data.nextStepLink} />\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t\t<Survey\n\t\t\t\t\texerciseFormEmbedUrl={data.exerciseFormEmbedUrl}\n\t\t\t\t\texerciseTitle={data.exercise.title}\n\t\t\t\t/>\n\t\t\t</main>\n\t\t</div>\n\t)\n}\n\nfunction Survey({\n\texerciseFormEmbedUrl,\n\texerciseTitle,\n}: {\n\texerciseFormEmbedUrl: string\n\texerciseTitle: string\n}) {\n\tconst theme = useTheme()\n\tconst [iframeLoaded, setIframeLoaded] = React.useState(false)\n\tconst isOnline = useIsOnline()\n\tif (!isOnline) {\n\t\treturn (\n\t\t\t<div className=\"relative shrink-0\">\n\t\t\t\t<div className=\"text-body-md text-foreground-destructive absolute inset-0 z-10 flex items-center justify-center\">\n\t\t\t\t\t<Icon name=\"WifiNoConnection\" size=\"xl\">\n\t\t\t\t\t\t<span>\n\t\t\t\t\t\t\t{'Unable to load the '}\n\t\t\t\t\t\t\t<a href={exerciseFormEmbedUrl} className=\"underline\">\n\t\t\t\t\t\t\t\t{`${exerciseTitle} feedback form`}\n\t\t\t\t\t\t\t</a>\n\t\t\t\t\t\t\t{' when offline'}\n\t\t\t\t\t\t</span>\n\t\t\t\t\t</Icon>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t)\n\t}\n\treturn (\n\t\t<div className=\"relative min-h-full sm:min-h-[unset] sm:shrink-0\">\n\t\t\t{!iframeLoaded ? (\n\t\t\t\t<div className=\"absolute inset-0 z-10 flex items-center justify-center\">\n\t\t\t\t\t<Loading>\n\t\t\t\t\t\t<span>Loading {exerciseTitle} Elaboration form</span>\n\t\t\t\t\t</Loading>\n\t\t\t\t</div>\n\t\t\t) : null}\n\t\t\t<iframe\n\t\t\t\tonLoad={() => setIframeLoaded(true)}\n\t\t\t\t// show what would have shown if there is an error\n\t\t\t\tonError={() => setIframeLoaded(true)}\n\t\t\t\ttitle=\"Elaboration\"\n\t\t\t\tsrc={exerciseFormEmbedUrl}\n\t\t\t\tclassName={cn(\n\t\t\t\t\t'absolute inset-0 flex h-full w-full transition-opacity duration-300',\n\t\t\t\t\tiframeLoaded ? 'opacity-100' : 'opacity-0',\n\t\t\t\t)}\n\t\t\t\tstyle={{ colorScheme: theme }}\n\t\t\t/>\n\t\t</div>\n\t)\n}\n"],"names":["meta","loaderData","matches","number","exercise","exerciseNumber","toString","padStart","rootData","getRootMatchLoaderData","title","getSeoMetaTags","workshopTitle","description","ogTitle","ogDescription","Number","instructor","requestInfo","mdxComponents","h1","$exerciseNumber__finished","_UNSAFE_withComponentProps","data","useRevalidationWS","watchPaths","className","children","jsxs","jsx","Link","to","id","articleId","finishedCode","EpicVideoInfoProvider","epicVideoInfosPromise","Mdx","code","components","ElementScrollRestoration","elementQuery","ProgressToggle","type","EditFileOnGitHub","file","exerciseFinished","relativePath","NavChevrons","prev","prevStepLink","next","nextStepLink","Survey","exerciseFormEmbedUrl","exerciseTitle","theme","useTheme","iframeLoaded","setIframeLoaded","React","useIsOnline","Loading","onLoad","onError","src","cn","style","colorScheme","Icon","name","size","href"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"_exerciseNumber_.finished-BjiSuKGH.js","sources":["../../../app/routes/_app+/exercise+/$exerciseNumber_.finished.tsx"],"sourcesContent":["import path from 'path'\nimport { invariantResponse } from '@epic-web/invariant'\nimport { ElementScrollRestoration } from '@epic-web/restore-scroll'\nimport {\n\tgetAppPageRoute,\n\tgetApps,\n\tgetExercise,\n\tgetWorkshopRoot,\n\tisExerciseStepApp,\n} from '@epic-web/workshop-utils/apps.server'\nimport { getWorkshopConfig } from '@epic-web/workshop-utils/config.server'\nimport { getEpicVideoInfos } from '@epic-web/workshop-utils/epic-api.server'\nimport {\n\tcombineServerTimings,\n\tgetServerTimeHeader,\n\tmakeTimings,\n} from '@epic-web/workshop-utils/timing.server'\nimport slugify from '@sindresorhus/slugify'\nimport * as React from 'react'\nimport { data, type HeadersFunction, Link } from 'react-router'\nimport { EpicVideoInfoProvider } from '#app/components/epic-video.tsx'\nimport { Icon } from '#app/components/icons.tsx'\nimport { Loading } from '#app/components/loading.tsx'\nimport { NavChevrons } from '#app/components/nav-chevrons.tsx'\nimport { useRevalidationWS } from '#app/components/revalidation-ws.tsx'\nimport { EditFileOnGitHub } from '#app/routes/launch-editor.tsx'\nimport { ProgressToggle } from '#app/routes/progress.tsx'\nimport { useTheme } from '#app/routes/theme/index.tsx'\nimport { Mdx } from '#app/utils/mdx.tsx'\nimport { cn } from '#app/utils/misc.tsx'\nimport { useIsOnline } from '#app/utils/online.ts'\nimport { getRootMatchLoaderData } from '#app/utils/root-loader.ts'\nimport { getSeoMetaTags } from '#app/utils/seo.ts'\nimport { type Route } from './+types/$exerciseNumber_.finished.tsx'\n\nexport const meta: Route.MetaFunction = ({ loaderData, matches }) => {\n\tconst number = loaderData?.exercise.exerciseNumber.toString().padStart(2, '0')\n\n\tconst rootData = getRootMatchLoaderData(matches)\n\tif (!loaderData || !rootData) return [{ title: '🦉 | Error' }]\n\n\treturn getSeoMetaTags({\n\t\ttitle: `🦉 | ${number}. ${loaderData.exercise.title} | ${rootData?.workshopTitle}`,\n\t\tdescription: `Elaboration for ${number}. ${loaderData.exercise.title}`,\n\t\togTitle: `Finished: ${loaderData.exercise.title}`,\n\t\togDescription: `Elaboration for exercise ${Number(number)}`,\n\t\tinstructor: rootData.instructor,\n\t\trequestInfo: rootData.requestInfo,\n\t})\n}\n\nexport async function loader({ request, params }: Route.LoaderArgs) {\n\tconst timings = makeTimings('exerciseFinishedLoader')\n\tinvariantResponse(params.exerciseNumber, 'exerciseNumber is required')\n\tconst exercise = await getExercise(params.exerciseNumber, {\n\t\ttimings,\n\t\trequest,\n\t})\n\tif (!exercise) {\n\t\tthrow new Response('Not found', { status: 404 })\n\t}\n\tconst workshopConfig = getWorkshopConfig()\n\tconst exerciseFormTemplate = workshopConfig.forms.exercise\n\tconst exerciseFormEmbedUrl = exerciseFormTemplate\n\t\t.replace('{workshopTitle}', encodeURIComponent(workshopConfig.title))\n\t\t.replace('{exerciseTitle}', encodeURIComponent(exercise.title))\n\tconst nextExercise = await getExercise(exercise.exerciseNumber + 1, {\n\t\ttimings,\n\t\trequest,\n\t})\n\n\tconst finishedFilepath = path.join(\n\t\tgetWorkshopRoot(),\n\t\t'exercises',\n\t\texercise.dirName,\n\t\t'FINISHED.mdx',\n\t)\n\n\tconst apps = await getApps({ request, timings })\n\tconst exerciseApps = apps\n\t\t.filter(isExerciseStepApp)\n\t\t.filter((app) => app.exerciseNumber === exercise.exerciseNumber)\n\tconst prevApp = exerciseApps[exerciseApps.length - 1]\n\n\tconst articleId = `workshop-${slugify(workshopConfig.title)}-${\n\t\texercise.exerciseNumber\n\t}-finished`\n\n\treturn data(\n\t\t{\n\t\t\tarticleId,\n\t\t\tworkshopTitle: workshopConfig.title,\n\t\t\texercise,\n\t\t\texerciseFormEmbedUrl,\n\t\t\tepicVideoInfosPromise: getEpicVideoInfos(\n\t\t\t\texercise.finishedEpicVideoEmbeds,\n\t\t\t\t{ request },\n\t\t\t),\n\t\t\texerciseFinished: {\n\t\t\t\tfile: finishedFilepath,\n\t\t\t\trelativePath: `exercises/${exercise.dirName}/FINISHED.mdx`,\n\t\t\t},\n\t\t\tprevStepLink: prevApp\n\t\t\t\t? {\n\t\t\t\t\t\tto: getAppPageRoute(prevApp),\n\t\t\t\t\t\t'aria-label': `${prevApp.title} (${prevApp.type})`,\n\t\t\t\t\t}\n\t\t\t\t: null,\n\t\t\tnextStepLink: nextExercise\n\t\t\t\t? {\n\t\t\t\t\t\tto: `/exercise/${nextExercise.exerciseNumber.toString().padStart(2, '0')}`,\n\t\t\t\t\t\t'aria-label': `${nextExercise.title}`,\n\t\t\t\t\t}\n\t\t\t\t: {\n\t\t\t\t\t\tto: '/finished',\n\t\t\t\t\t\t'aria-label': 'Finished! 🎉',\n\t\t\t\t\t},\n\t\t},\n\t\t{\n\t\t\theaders: {\n\t\t\t\t'Server-Timing': getServerTimeHeader(timings),\n\t\t\t},\n\t\t},\n\t)\n}\n\nexport const headers: HeadersFunction = ({ loaderHeaders, parentHeaders }) => {\n\tconst headers = {\n\t\t'Cache-Control': loaderHeaders.get('Cache-Control') ?? '',\n\t\t'Server-Timing': combineServerTimings(loaderHeaders, parentHeaders),\n\t}\n\treturn headers\n}\n\nconst mdxComponents = { h1: () => null }\nexport default function ExerciseFinished({\n\tloaderData: data,\n}: Route.ComponentProps) {\n\tconst exerciseNumber = data.exercise.exerciseNumber\n\t\t.toString()\n\t\t.padStart(2, '0')\n\n\tuseRevalidationWS({\n\t\twatchPaths: [`./exercises/${exerciseNumber}/FINISHED.mdx`],\n\t})\n\n\treturn (\n\t\t<div className=\"flex max-w-full grow flex-col\">\n\t\t\t<main className=\"flex grow flex-col sm:grid sm:h-full sm:min-h-[800px] sm:grid-cols-1 sm:grid-rows-2 md:min-h-[unset] lg:grid-cols-2 lg:grid-rows-1\">\n\t\t\t\t<div className=\"relative flex flex-col sm:col-span-1 sm:row-span-1 sm:h-full lg:border-r\">\n\t\t\t\t\t<h1 className=\"h-14 border-b pr-5 pl-10 text-sm leading-tight font-medium\">\n\t\t\t\t\t\t<div className=\"flex h-14 flex-wrap items-center justify-between gap-x-2 py-2\">\n\t\t\t\t\t\t\t<div className=\"flex items-center justify-start gap-x-2\">\n\t\t\t\t\t\t\t\t<Link to={`/${exerciseNumber}`} className=\"hover:underline\">\n\t\t\t\t\t\t\t\t\t{`${exerciseNumber}. ${data.exercise.title}`}\n\t\t\t\t\t\t\t\t</Link>\n\t\t\t\t\t\t\t\t<span>/</span>\n\t\t\t\t\t\t\t\t<span>Elaboration</span>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</h1>\n\n\t\t\t\t\t<article\n\t\t\t\t\t\tclassName=\"shadow-on-scrollbox scrollbar-thin scrollbar-thumb-scrollbar h-full w-full max-w-none flex-1 scroll-pt-6 space-y-6 overflow-y-auto p-2 sm:p-10 sm:pt-8\"\n\t\t\t\t\t\tid={data.articleId}\n\t\t\t\t\t>\n\t\t\t\t\t\t{data.exercise.finishedCode ? (\n\t\t\t\t\t\t\t<EpicVideoInfoProvider\n\t\t\t\t\t\t\t\tepicVideoInfosPromise={data.epicVideoInfosPromise}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<div className=\"prose dark:prose-invert sm:prose-lg\">\n\t\t\t\t\t\t\t\t\t<Mdx\n\t\t\t\t\t\t\t\t\t\tcode={data.exercise.finishedCode}\n\t\t\t\t\t\t\t\t\t\tcomponents={mdxComponents}\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t</EpicVideoInfoProvider>\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t// TODO: render a random dad joke...\n\t\t\t\t\t\t\t'No finished instructions yet...'\n\t\t\t\t\t\t)}\n\t\t\t\t\t</article>\n\t\t\t\t\t<ElementScrollRestoration elementQuery={`#${data.articleId}`} />\n\t\t\t\t\t<ProgressToggle\n\t\t\t\t\t\ttype=\"finished\"\n\t\t\t\t\t\texerciseNumber={data.exercise.exerciseNumber}\n\t\t\t\t\t\tclassName=\"h-14 border-t px-6\"\n\t\t\t\t\t/>\n\t\t\t\t\t<div className=\"@container flex h-16 justify-between border-t border-b-4 lg:border-b-0\">\n\t\t\t\t\t\t<div />\n\t\t\t\t\t\t<EditFileOnGitHub\n\t\t\t\t\t\t\tfile={data.exerciseFinished.file}\n\t\t\t\t\t\t\trelativePath={data.exerciseFinished.relativePath}\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<NavChevrons prev={data.prevStepLink} next={data.nextStepLink} />\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t\t<Survey\n\t\t\t\t\texerciseFormEmbedUrl={data.exerciseFormEmbedUrl}\n\t\t\t\t\texerciseTitle={data.exercise.title}\n\t\t\t\t/>\n\t\t\t</main>\n\t\t</div>\n\t)\n}\n\nfunction Survey({\n\texerciseFormEmbedUrl,\n\texerciseTitle,\n}: {\n\texerciseFormEmbedUrl: string\n\texerciseTitle: string\n}) {\n\tconst theme = useTheme()\n\tconst [iframeLoaded, setIframeLoaded] = React.useState(false)\n\tconst isOnline = useIsOnline()\n\tif (!isOnline) {\n\t\treturn (\n\t\t\t<div className=\"relative shrink-0\">\n\t\t\t\t<div className=\"text-body-md text-foreground-destructive absolute inset-0 z-10 flex items-center justify-center\">\n\t\t\t\t\t<Icon name=\"WifiNoConnection\" size=\"xl\">\n\t\t\t\t\t\t<span>\n\t\t\t\t\t\t\t{'Unable to load the '}\n\t\t\t\t\t\t\t<a href={exerciseFormEmbedUrl} className=\"underline\">\n\t\t\t\t\t\t\t\t{`${exerciseTitle} feedback form`}\n\t\t\t\t\t\t\t</a>\n\t\t\t\t\t\t\t{' when offline'}\n\t\t\t\t\t\t</span>\n\t\t\t\t\t</Icon>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t)\n\t}\n\treturn (\n\t\t<div className=\"relative min-h-full sm:min-h-[unset] sm:shrink-0\">\n\t\t\t{!iframeLoaded ? (\n\t\t\t\t<div className=\"absolute inset-0 z-10 flex items-center justify-center\">\n\t\t\t\t\t<Loading>\n\t\t\t\t\t\t<span>Loading {exerciseTitle} Elaboration form</span>\n\t\t\t\t\t</Loading>\n\t\t\t\t</div>\n\t\t\t) : null}\n\t\t\t<iframe\n\t\t\t\tonLoad={() => setIframeLoaded(true)}\n\t\t\t\t// show what would have shown if there is an error\n\t\t\t\tonError={() => setIframeLoaded(true)}\n\t\t\t\ttitle=\"Elaboration\"\n\t\t\t\tsrc={exerciseFormEmbedUrl}\n\t\t\t\tclassName={cn(\n\t\t\t\t\t'absolute inset-0 flex h-full w-full transition-opacity duration-300',\n\t\t\t\t\tiframeLoaded ? 'opacity-100' : 'opacity-0',\n\t\t\t\t)}\n\t\t\t\tstyle={{ colorScheme: theme }}\n\t\t\t/>\n\t\t</div>\n\t)\n}\n"],"names":["meta","loaderData","matches","number","exercise","exerciseNumber","toString","padStart","rootData","getRootMatchLoaderData","title","getSeoMetaTags","workshopTitle","description","ogTitle","ogDescription","Number","instructor","requestInfo","mdxComponents","h1","$exerciseNumber__finished","_UNSAFE_withComponentProps","data","useRevalidationWS","watchPaths","className","children","jsxs","jsx","Link","to","id","articleId","finishedCode","EpicVideoInfoProvider","epicVideoInfosPromise","Mdx","code","components","ElementScrollRestoration","elementQuery","ProgressToggle","type","EditFileOnGitHub","file","exerciseFinished","relativePath","NavChevrons","prev","prevStepLink","next","nextStepLink","Survey","exerciseFormEmbedUrl","exerciseTitle","theme","useTheme","iframeLoaded","setIframeLoaded","React","useIsOnline","Loading","onLoad","onError","src","cn","style","colorScheme","Icon","name","size","href"],"mappings":"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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{b as E,h as ie,L as g,A as ae,w as le,a as ce,O as pe}from"./chunk-UIGDSWPH-D7TrB36R.js";import{j as e}from"./jsx-runtime-C5WNSv3b.js";import{E as ue}from"./index-C5c6Cdgw.js";import{r as u}from"./index-Az39ZADK.js";import{G as de}from"./error-boundary-AXWwBxFl.js";import{N as me}from"./nav-chevrons-C1okk63A.js";import{u as fe}from"./revalidation-ws-BdlKZ8s_.js";import{L as C,E as xe}from"./launch-editor-B4NVrR9O.js";import{P as he}from"./progress-1Egr2Ysk.js";import{S as M}from"./set-playground-CqWopo_p.js";import{l as ve,c as F,I as A,o as ge,m as je}from"./misc-GmfBFNKU.js";import{a as Pe,g as be}from"./root-loader-CcoJXu7H.js";import{g as Ne}from"./seo-t5J-DRxw.js";import{E as we}from"./error-boundary-R9rMPCtW.js";import{E as Ee}from"./epic-video-DdaxOz-5.js";import{S as D,l as B,u as ye,R as Ce,c as Se,d as Re,e as H,P as U,f as w,A as V,g as Y,h as Oe,i as Ae,D as De,C as ke,m as Le}from"./tooltip-DOPvLR3d.js";import{M as _e}from"./mdx-CTC7HBz7.js";import{h as Ie,R as Te,u as Fe,F as $e}from"./index-DhJTQh61.js";import{u as Me,O as Be}from"./onboarding-indicator-BtHxYHrp.js";import"./preload-helper-BXl3LOEh.js";import"./types-Cl2NuNg4.js";import"./progress-bar-CXiAexcc.js";import"./pe-BgHP_H47.js";import"./index-wbZv2KL3.js";import"./index-CjiomtK6.js";import"./button-Bhee0nJ5.js";import"./dialog-D9Rz0D0m.js";import"./chunk-JG3XND5A-BfVtTDVp.js";import"./use-event-source-CrGUTTzj.js";import"./index-Dd9cSrtE.js";import"./index-Dvg33-i0.js";import"./online-DlPkOHh3.js";import"./loading-TTjdHw_c.js";import"./user-BGmCaKzN.js";import"./workshop-config-CJJU91bU.js";const G=u.createContext(null);function He(){const r=u.useContext(G);if(!r)throw new Error("useStepContext must be used within a StepContextProvider");return r}function Ue({children:r,inBrowserBrowserRef:t}){return e.jsx(G,{value:{inBrowserBrowserRef:t},children:r})}const Ve={DiffLink:k,PrevDiffLink:qe,NextDiffLink:Ge,InlineFile:Xe,LinkToApp:Ke};function Ye({inBrowserBrowserRef:r}){const t=E();return t.exerciseStepApp.instructionsCode?e.jsx(Ue,{inBrowserBrowserRef:r,children:e.jsx(Ee,{epicVideoInfosPromise:t.epicVideoInfosPromise,children:e.jsx("div",{className:"prose dark:prose-invert sm:prose-lg",children:e.jsx(_e,{code:t.exerciseStepApp.instructionsCode,components:Ve})})})}):null}function q(r,t,n){const i=new URLSearchParams(r);return n===null?i.delete(t):i.set(t,n),i}function Ge({app:r=0,fullPage:t=!1,children:n}){return e.jsx(k,{app1:r,app2:r+1,fullPage:t,children:n})}function qe({app:r=-1,fullPage:t=!1,children:n}){return e.jsx(k,{app1:r,app2:r+1,fullPage:t,children:n})}function k({app1:r=0,app2:t=1,children:n,fullPage:i=!1,to:s}){const o=E();if(!s&&!r&&!t)return e.jsx("callout-danger",{className:"notification",children:e.jsx("div",{className:"title",children:"DiffLink Error: invalid input"})});function a(p){if(typeof p=="number"){const m=o.exerciseIndex+p;return o.allApps[m]?.name}if(!p)return null;for(const{name:m,stepName:l}of o.allApps)if(p===m||p===l)return m;return null}if(s){const p=new URLSearchParams(s);r=p.get("app1"),t=p.get("app2")}const c=a(r),d=a(t);if(!c||!d)return e.jsxs("callout-danger",{className:"notification",children:[e.jsx("div",{className:"title",children:"DiffLink Error: invalid input"}),!c&&e.jsxs("div",{children:['app1: "',r,'" is not a valid app name']}),!d&&e.jsxs("div",{children:['app2: "',t,'" is not a valid app name']})]});s||(s=`app1=${c}&app2=${d}`);const f=i?`/diff?${s}`:`?${decodeURIComponent(q(new URLSearchParams,"preview",`diff&${s}`).toString())}`;return n||(n=e.jsxs("span",{children:["Go to Diff ",i?"":"Preview"," from: ",e.jsx("code",{children:c})," to:"," ",e.jsx("code",{children:d})]})),e.jsx(g,{to:f,children:n})}function Xe({file:r,type:t="playground",children:n=e.jsx("code",{children:r}),...i}){const s=E(),o=s[t]||s[s.type],a=e.jsxs("div",{className:"launch-editor-button-wrapper flex underline underline-offset-4",children:[n," ",e.jsx("svg",{height:24,width:24,children:e.jsx("use",{href:`${ge}#Keyboard`})})]});return ENV.EPICSHOP_DEPLOYED&&o?e.jsx("div",{className:"inline-block grow",children:e.jsx(C,{appFile:r,appName:o.name,...i,children:a})}):o?e.jsx("div",{className:"inline-block grow",children:e.jsx(C,{appFile:r,appName:o.name,...i,children:a})}):t==="playground"?e.jsx(D,{content:"You must 'Set to Playground' before opening a file",children:e.jsx("div",{className:"inline-block grow cursor-not-allowed",children:a})}):e.jsx(e.Fragment,{children:"children"})}function ze(r){return r==="problem"?"problem":r==="solution"?"solution":"playground"}function Ke({to:r,children:t=e.jsx("code",{children:r.toString()}),...n}){const[i]=ie(),s=`?${q(i,"pathname",r.toString()).toString()}`,o=E(),a=ze(i.get("preview")),c=Pe(),d=o[a],f=d?.dev.type==="script"?ve({domain:c.domain,port:d.dev.portNumber}):o.playground?.dev.type==="browser"||o.playground?.dev.type==="export"?o.playground.dev.pathname:null,{inBrowserBrowserRef:p}=He(),m=f?f.slice(0,-1)+r.toString():null;return e.jsxs("div",{className:"inline-flex items-center justify-between gap-1",children:[e.jsx(g,{to:s,...n,className:F(n.className,{"cursor-not-allowed":ENV.EPICSHOP_DEPLOYED}),title:ENV.EPICSHOP_DEPLOYED?"Cannot link to app in deployed version":void 0,onClick:l=>{ENV.EPICSHOP_DEPLOYED&&l.preventDefault(),n.onClick?.(l),p.current?.handleExtrnalNavigation(r.toString())},children:t}),m?e.jsx(D,{content:"Open in new tab",children:e.jsx("a",{href:m,target:"_blank",rel:"noreferrer",className:F("flex aspect-square items-center justify-center",{"cursor-not-allowed":ENV.EPICSHOP_DEPLOYED}),title:ENV.EPICSHOP_DEPLOYED?"Cannot link to app in deployed version":"Open in new tab",onClick:l=>{ENV.EPICSHOP_DEPLOYED&&l.preventDefault()},children:e.jsx(A,{name:"ExternalLink"})})}):null]})}var S="Popover",[X]=Se(S,[B]),y=B(),[We,h]=X(S),z=r=>{const{__scopePopover:t,children:n,open:i,defaultOpen:s,onOpenChange:o,modal:a=!1}=r,c=y(t),d=u.useRef(null),[f,p]=u.useState(!1),[m,l]=ye({prop:i,defaultProp:s??!1,onChange:o,caller:S});return e.jsx(Ce,{...c,children:e.jsx(We,{scope:t,contentId:Re(),triggerRef:d,open:m,onOpenChange:l,onOpenToggle:u.useCallback(()=>l(j=>!j),[l]),hasCustomAnchor:f,onCustomAnchorAdd:u.useCallback(()=>p(!0),[]),onCustomAnchorRemove:u.useCallback(()=>p(!1),[]),modal:a,children:n})})};z.displayName=S;var K="PopoverAnchor",Qe=u.forwardRef((r,t)=>{const{__scopePopover:n,...i}=r,s=h(K,n),o=y(n),{onCustomAnchorAdd:a,onCustomAnchorRemove:c}=s;return u.useEffect(()=>(a(),()=>c()),[a,c]),e.jsx(V,{...o,...i,ref:t})});Qe.displayName=K;var W="PopoverTrigger",Q=u.forwardRef((r,t)=>{const{__scopePopover:n,...i}=r,s=h(W,n),o=y(n),a=H(t,s.triggerRef),c=e.jsx(U.button,{type:"button","aria-haspopup":"dialog","aria-expanded":s.open,"aria-controls":s.contentId,"data-state":re(s.open),...i,ref:a,onClick:w(r.onClick,s.onOpenToggle)});return s.hasCustomAnchor?c:e.jsx(V,{asChild:!0,...o,children:c})});Q.displayName=W;var L="PopoverPortal",[Ze,Je]=X(L,{forceMount:void 0}),Z=r=>{const{__scopePopover:t,forceMount:n,children:i,container:s}=r,o=h(L,t);return e.jsx(Ze,{scope:t,forceMount:n,children:e.jsx(Y,{present:n||o.open,children:e.jsx(Oe,{asChild:!0,container:s,children:i})})})};Z.displayName=L;var P="PopoverContent",J=u.forwardRef((r,t)=>{const n=Je(P,r.__scopePopover),{forceMount:i=n.forceMount,...s}=r,o=h(P,r.__scopePopover);return e.jsx(Y,{present:i||o.open,children:o.modal?e.jsx(tt,{...s,ref:t}):e.jsx(rt,{...s,ref:t})})});J.displayName=P;var et=Ae("PopoverContent.RemoveScroll"),tt=u.forwardRef((r,t)=>{const n=h(P,r.__scopePopover),i=u.useRef(null),s=H(t,i),o=u.useRef(!1);return u.useEffect(()=>{const a=i.current;if(a)return Ie(a)},[]),e.jsx(Te,{as:et,allowPinchZoom:!0,children:e.jsx(ee,{...r,ref:s,trapFocus:n.open,disableOutsidePointerEvents:!0,onCloseAutoFocus:w(r.onCloseAutoFocus,a=>{a.preventDefault(),o.current||n.triggerRef.current?.focus()}),onPointerDownOutside:w(r.onPointerDownOutside,a=>{const c=a.detail.originalEvent,d=c.button===0&&c.ctrlKey===!0,f=c.button===2||d;o.current=f},{checkForDefaultPrevented:!1}),onFocusOutside:w(r.onFocusOutside,a=>a.preventDefault(),{checkForDefaultPrevented:!1})})})}),rt=u.forwardRef((r,t)=>{const n=h(P,r.__scopePopover),i=u.useRef(!1),s=u.useRef(!1);return e.jsx(ee,{...r,ref:t,trapFocus:!1,disableOutsidePointerEvents:!1,onCloseAutoFocus:o=>{r.onCloseAutoFocus?.(o),o.defaultPrevented||(i.current||n.triggerRef.current?.focus(),o.preventDefault()),i.current=!1,s.current=!1},onInteractOutside:o=>{r.onInteractOutside?.(o),o.defaultPrevented||(i.current=!0,o.detail.originalEvent.type==="pointerdown"&&(s.current=!0));const a=o.target;n.triggerRef.current?.contains(a)&&o.preventDefault(),o.detail.originalEvent.type==="focusin"&&s.current&&o.preventDefault()}})}),ee=u.forwardRef((r,t)=>{const{__scopePopover:n,trapFocus:i,onOpenAutoFocus:s,onCloseAutoFocus:o,disableOutsidePointerEvents:a,onEscapeKeyDown:c,onPointerDownOutside:d,onFocusOutside:f,onInteractOutside:p,...m}=r,l=h(P,n),j=y(n);return Fe(),e.jsx($e,{asChild:!0,loop:!0,trapped:i,onMountAutoFocus:s,onUnmountAutoFocus:o,children:e.jsx(De,{asChild:!0,disableOutsidePointerEvents:a,onInteractOutside:p,onEscapeKeyDown:c,onPointerDownOutside:d,onFocusOutside:f,onDismiss:()=>l.onOpenChange(!1),children:e.jsx(ke,{"data-state":re(l.open),role:"dialog",id:l.contentId,...j,...m,ref:t,style:{...m.style,"--radix-popover-content-transform-origin":"var(--radix-popper-transform-origin)","--radix-popover-content-available-width":"var(--radix-popper-available-width)","--radix-popover-content-available-height":"var(--radix-popper-available-height)","--radix-popover-trigger-width":"var(--radix-popper-anchor-width)","--radix-popover-trigger-height":"var(--radix-popper-anchor-height)"}})})})}),te="PopoverClose",nt=u.forwardRef((r,t)=>{const{__scopePopover:n,...i}=r,s=h(te,n);return e.jsx(U.button,{type:"button",...i,ref:t,onClick:w(r.onClick,()=>s.onOpenChange(!1))})});nt.displayName=te;var ot="PopoverArrow",st=u.forwardRef((r,t)=>{const{__scopePopover:n,...i}=r,s=y(n);return e.jsx(Le,{...s,...i,ref:t})});st.displayName=ot;function re(r){return r?"open":"closed"}var it=z,at=Q,lt=Z,ct=J;function pt({diffFilesPromise:r}){const t=E(),[n,i]=Me("files-popover"),[s,o]=u.useState(!1),a=u.useRef(null);function c(p){o(p),p&&i()}function d(){o(!1)}const f=t.playground?.appName;return e.jsx(e.Fragment,{children:e.jsxs(it,{open:s,onOpenChange:c,children:[e.jsx(at,{asChild:!0,children:e.jsxs("button",{className:"relative flex h-full items-center gap-1 border-r px-6 py-3 font-mono text-sm uppercase","aria-label":"Relevant Files",children:[e.jsx(A,{name:"Files"}),e.jsx("span",{className:"hidden @min-[640px]:inline",children:"Files"}),n?e.jsx(Be,{tooltip:"Click to see which files to edit!"}):null]})}),e.jsx(lt,{children:e.jsx(ct,{ref:a,className:"slideRightContent lg:slideUpContent invert-theme bg-background text-foreground z-10 rounded px-9 py-8 select-none",align:"start",sideOffset:5,children:e.jsxs("div",{className:"launch-editor-wrapper",children:[e.jsx("strong",{className:"inline-block px-2 pb-2 font-semibold uppercase",children:"Relevant Files"}),e.jsxs("p",{className:"text-muted-foreground mb-4 max-w-2xs px-2 text-sm",children:["These are the files you'll need to modify for this exercise. Click any file to open it directly in your editor at the right location."," ",e.jsx(g,{to:"/guide#file-links",className:"text-highlight underline",onClick:()=>o(!1),children:"Learn more →"})]}),t.problem&&t.playground?.appName!==t.problem.name?e.jsx("div",{className:"mb-2 rounded p-1 font-mono font-medium",children:e.jsx(M,{appName:t.problem.name})}):null,e.jsx("div",{id:"files",children:e.jsx(u.Suspense,{fallback:e.jsx(D,{content:"Loading diff",children:e.jsx("div",{className:"flex justify-center",children:e.jsx(A,{name:"Refresh",className:"h-8 w-8 animate-spin"})})}),children:e.jsx(ae,{resolve:r,errorElement:e.jsx("div",{className:"text-foreground-destructive",children:"Something went wrong."}),children:p=>{if(!p)return e.jsx("p",{className:"text-foreground-destructive",children:"Unable to determine diff"});if(typeof p=="string")return e.jsx("p",{className:"text-foreground-destructive",children:p});if(!p.length)return e.jsx("p",{children:"No files changed"});const m=f||ENV.EPICSHOP_GITHUB_ROOT?{}:{title:"You must 'Set to Playground' before opening a file",className:"not-allowed"};return e.jsxs("ul",{...m,children:[p.length>1&&!ENV.EPICSHOP_DEPLOYED?e.jsx("div",{className:"border-opacity-50 mb-2 border-b border-b-gray-50 pb-2 font-sans",children:e.jsx(C,{appFile:p.map(l=>`${l.path},${l.line},1`),appName:"playground",onUpdate:d,children:e.jsx("p",{children:"Open All Files"})})}):null,p.map(l=>e.jsx("li",{"data-state":l.status,children:e.jsx(C,{appFile:`${l.path},${l.line},1`,appName:ENV.EPICSHOP_DEPLOYED?t.problem?.name??"playground":"playground",onUpdate:d,children:e.jsx("code",{children:l.path})})},l.path))]})}})})})]})})})]})})}const ut="es_split_pct";function $(r,t=50){const n=typeof r=="number"?r:Number(r);return Number.isFinite(n)?Math.min(80,Math.max(20,Math.round(n*100)/100)):t}function ne(r,t){const n=r?.exerciseStepApp.exerciseNumber.toString().padStart(2,"0")??"00",i=r?.exerciseStepApp.stepNumber.toString().padStart(2,"0")??"00",s={problem:"💪",solution:"🏁"}[r?.type??"problem"],o=r?.[r.type]?.title??"N/A";return{emoji:s,stepNumber:i,title:o,exerciseNumber:n,exerciseTitle:r?.exerciseTitle??"Unknown exercise",workshopTitle:t,type:r?.type??"problem"}}const Xt=({loaderData:r,matches:t,params:n})=>{const i=be(t);if(!r||!i)return[{title:"🦉 | Error"}];const{emoji:s,stepNumber:o,title:a,exerciseNumber:c,exerciseTitle:d}=ne(r);return Ne({title:`${s} | ${o}. ${a} | ${c}. ${d} | ${i.workshopTitle}`,description:`${n.type} step for exercise ${c}. ${d}`,ogTitle:a,ogDescription:`${d} step ${Number(o)} ${n.type}`,instructor:i.instructor,requestInfo:i.requestInfo})},zt=le(function({loaderData:t}){const n=u.useRef(null),i=u.useRef(null),s=u.useRef(null),[o,a]=u.useState(t.splitPercent);function c(m){const l=$(m);document.cookie=`${ut}=${l}; path=/; SameSite=Lax;`}function d(m){const l=i.current;if(!l)return;const j=l.getBoundingClientRect();let b=!0;const R=Array.from(document.querySelectorAll("iframe")),oe=R.map(x=>x.style.pointerEvents);R.forEach(x=>x.style.pointerEvents="none");function O(x){if(!b){v();return}const se=(x-j.left)/j.width*100,T=$(se);a(T),c(T)}function _(x){if(!b||x.buttons===0){v();return}O(x.clientX)}function I(x){const N=x.touches?.[0];if(!b||!N){v();return}O(N.clientX)}function v(){b&&(b=!1,R.forEach((x,N)=>x.style.pointerEvents=oe[N]??""),window.removeEventListener("mousemove",_),window.removeEventListener("mouseup",v),window.removeEventListener("touchmove",I),window.removeEventListener("touchend",v),document.body.style.cursor="",document.body.style.userSelect="")}window.addEventListener("mousemove",_),window.addEventListener("mouseup",v),window.addEventListener("touchmove",I),window.addEventListener("touchend",v),document.body.style.cursor="col-resize",document.body.style.userSelect="none",O(m)}const f=ne(t);fe({watchPaths:[`${t.exerciseStepApp.relativePath}/README.mdx`]});const p=t.problem?t.playground?.appName!==t.problem.name:!1;return e.jsx("div",{className:"flex max-w-full grow flex-col",children:e.jsxs("main",{ref:i,className:"flex grow flex-col sm:h-full sm:min-h-[800px] md:min-h-[unset] lg:flex-row",children:[e.jsxs("div",{className:"relative flex min-w-0 flex-none basis-full flex-col sm:col-span-1 sm:row-span-1 sm:h-full lg:basis-(--split-pct)",style:{"--split-pct":`${o}%`},ref:s,children:[e.jsx("h1",{className:"@container h-14 border-b pr-5 pl-10 text-sm leading-tight font-medium",children:e.jsxs("div",{className:"flex h-14 items-center justify-between gap-x-2 py-2 whitespace-nowrap",children:[e.jsxs("div",{className:"flex items-center justify-start gap-x-2 uppercase",children:[e.jsxs(g,{to:je(t.exerciseStepApp.exerciseNumber),className:"hover:underline",children:[e.jsxs("span",{children:[f.exerciseNumber,"."]}),e.jsxs("span",{className:"hidden @min-[500px]:inline",children:[" ",f.exerciseTitle]})]}),e.jsx("span",{children:"/"}),e.jsxs(g,{to:".",className:"hover:underline",children:[e.jsxs("span",{children:[f.stepNumber,"."]}),e.jsxs("span",{className:"hidden @min-[300px]:inline",children:[" ",f.title]}),e.jsxs("span",{children:[" (",f.emoji]}),e.jsxs("span",{className:"hidden @min-[400px]:inline",children:[" ",f.type]}),e.jsx("span",{children:")"})]})]}),t.problem&&(t.playground?.appName!==t.problem.name||!t.playground?.isUpToDate)?e.jsx(M,{appName:t.problem.name,isOutdated:t.playground?.isUpToDate===!1,hideTextOnNarrow:!0,showOnboardingIndicator:p}):null]})}),e.jsxs("article",{id:t.articleId,className:"shadow-on-scrollbox scrollbar-thin scrollbar-thumb-scrollbar flex h-full w-full max-w-none flex-1 scroll-pt-6 flex-col justify-between space-y-6 overflow-y-auto p-2 sm:p-10 sm:pt-8",children:[t.exerciseStepApp.instructionsCode?e.jsx(Ye,{inBrowserBrowserRef:n}):e.jsx("div",{className:"flex h-full items-center justify-center text-lg",children:e.jsx("p",{children:"No instructions yet..."})}),e.jsxs("div",{className:"mt-auto flex justify-between",children:[t.prevStepLink?e.jsxs(g,{to:t.prevStepLink.to,"aria-label":"Previous Step","data-keyboard-action":"g+p",prefetch:"intent",children:[e.jsx("span",{"aria-hidden":!0,children:"←"}),e.jsx("span",{className:"hidden xl:inline",children:" Previous"})]}):e.jsx("span",{}),t.nextStepLink?e.jsxs(g,{to:t.nextStepLink.to,"aria-label":"Next Step","data-keyboard-action":"g+n",prefetch:"intent",children:[e.jsx("span",{className:"hidden xl:inline",children:"Next "}),e.jsx("span",{"aria-hidden":!0,children:"→"})]}):e.jsx("span",{})]})]},t.articleId),e.jsx(ue,{elementQuery:`#${t.articleId}`},`scroll-${t.articleId}`),t.type==="solution"?e.jsx(he,{type:"step",exerciseNumber:t.exerciseStepApp.exerciseNumber,stepNumber:t.exerciseStepApp.stepNumber,className:"h-14 border-t px-6"}):null,e.jsxs("div",{className:"@container flex h-16 justify-between border-t border-b-4 lg:border-b-0",children:[e.jsx("div",{children:e.jsx("div",{className:"h-full",children:e.jsx(pt,{diffFilesPromise:t.diffFiles})})}),e.jsx(xe,{appName:t.exerciseStepApp.name,relativePath:`${t.exerciseStepApp.relativePath}/README.mdx`}),e.jsx(me,{prev:t.prevStepLink?{to:t.prevStepLink.to,"aria-label":"Previous Step"}:null,next:t.nextStepLink?{to:t.nextStepLink.to,"aria-label":"Next Step"}:null})]})]}),e.jsx("div",{role:"separator","aria-orientation":"vertical",title:"Drag to resize",className:"bg-border hover:bg-accent hidden w-1 cursor-col-resize lg:block",onMouseDown:m=>d(m.clientX),onDoubleClick:()=>{a(50),c(50)},onTouchStart:m=>{const l=m.touches?.[0];l&&d(l.clientX)}}),e.jsx("div",{className:"flex min-w-0 flex-1",children:e.jsx(pe,{context:{inBrowserBrowserRef:n}})})]})})}),Kt=ce(function(){return e.jsx(de,{className:"container flex items-center justify-center",statusHandlers:{404:we}})});export{Kt as ErrorBoundary,zt as default,Xt as meta};
|
|
2
|
-
//# sourceMappingURL=_layout-
|
|
1
|
+
import{b as E,h as ie,L as g,A as ae,w as le,a as ce,O as pe}from"./chunk-UIGDSWPH-D7TrB36R.js";import{j as e}from"./jsx-runtime-C5WNSv3b.js";import{E as ue}from"./index-C5c6Cdgw.js";import{r as u}from"./index-Az39ZADK.js";import{G as de}from"./error-boundary-AXWwBxFl.js";import{N as me}from"./nav-chevrons-C1okk63A.js";import{u as fe}from"./revalidation-ws-BdlKZ8s_.js";import{L as C,E as xe}from"./launch-editor-B4NVrR9O.js";import{P as he}from"./progress-1Egr2Ysk.js";import{S as M}from"./set-playground-CqWopo_p.js";import{l as ve,c as F,I as A,o as ge,m as je}from"./misc-GmfBFNKU.js";import{a as Pe,g as be}from"./root-loader-CcoJXu7H.js";import{g as Ne}from"./seo-t5J-DRxw.js";import{E as we}from"./error-boundary-R9rMPCtW.js";import{E as Ee}from"./epic-video-DSeT-uKN.js";import{S as D,l as B,u as ye,R as Ce,c as Se,d as Re,e as H,P as U,f as w,A as V,g as Y,h as Oe,i as Ae,D as De,C as ke,m as Le}from"./tooltip-DOPvLR3d.js";import{M as _e}from"./mdx-Bez0LKTa.js";import{h as Ie,R as Te,u as Fe,F as $e}from"./index-DhJTQh61.js";import{u as Me,O as Be}from"./onboarding-indicator-BtHxYHrp.js";import"./preload-helper-BXl3LOEh.js";import"./types-Cl2NuNg4.js";import"./progress-bar-CXiAexcc.js";import"./pe-BgHP_H47.js";import"./index-wbZv2KL3.js";import"./index-CjiomtK6.js";import"./button-Bhee0nJ5.js";import"./dialog-D9Rz0D0m.js";import"./chunk-JG3XND5A-BfVtTDVp.js";import"./use-event-source-CrGUTTzj.js";import"./index-Dd9cSrtE.js";import"./index-Dvg33-i0.js";import"./online-DlPkOHh3.js";import"./loading-TTjdHw_c.js";import"./user-BGmCaKzN.js";import"./workshop-config-CJJU91bU.js";const G=u.createContext(null);function He(){const r=u.useContext(G);if(!r)throw new Error("useStepContext must be used within a StepContextProvider");return r}function Ue({children:r,inBrowserBrowserRef:t}){return e.jsx(G,{value:{inBrowserBrowserRef:t},children:r})}const Ve={DiffLink:k,PrevDiffLink:qe,NextDiffLink:Ge,InlineFile:Xe,LinkToApp:Ke};function Ye({inBrowserBrowserRef:r}){const t=E();return t.exerciseStepApp.instructionsCode?e.jsx(Ue,{inBrowserBrowserRef:r,children:e.jsx(Ee,{epicVideoInfosPromise:t.epicVideoInfosPromise,children:e.jsx("div",{className:"prose dark:prose-invert sm:prose-lg",children:e.jsx(_e,{code:t.exerciseStepApp.instructionsCode,components:Ve})})})}):null}function q(r,t,n){const i=new URLSearchParams(r);return n===null?i.delete(t):i.set(t,n),i}function Ge({app:r=0,fullPage:t=!1,children:n}){return e.jsx(k,{app1:r,app2:r+1,fullPage:t,children:n})}function qe({app:r=-1,fullPage:t=!1,children:n}){return e.jsx(k,{app1:r,app2:r+1,fullPage:t,children:n})}function k({app1:r=0,app2:t=1,children:n,fullPage:i=!1,to:s}){const o=E();if(!s&&!r&&!t)return e.jsx("callout-danger",{className:"notification",children:e.jsx("div",{className:"title",children:"DiffLink Error: invalid input"})});function a(p){if(typeof p=="number"){const m=o.exerciseIndex+p;return o.allApps[m]?.name}if(!p)return null;for(const{name:m,stepName:l}of o.allApps)if(p===m||p===l)return m;return null}if(s){const p=new URLSearchParams(s);r=p.get("app1"),t=p.get("app2")}const c=a(r),d=a(t);if(!c||!d)return e.jsxs("callout-danger",{className:"notification",children:[e.jsx("div",{className:"title",children:"DiffLink Error: invalid input"}),!c&&e.jsxs("div",{children:['app1: "',r,'" is not a valid app name']}),!d&&e.jsxs("div",{children:['app2: "',t,'" is not a valid app name']})]});s||(s=`app1=${c}&app2=${d}`);const f=i?`/diff?${s}`:`?${decodeURIComponent(q(new URLSearchParams,"preview",`diff&${s}`).toString())}`;return n||(n=e.jsxs("span",{children:["Go to Diff ",i?"":"Preview"," from: ",e.jsx("code",{children:c})," to:"," ",e.jsx("code",{children:d})]})),e.jsx(g,{to:f,children:n})}function Xe({file:r,type:t="playground",children:n=e.jsx("code",{children:r}),...i}){const s=E(),o=s[t]||s[s.type],a=e.jsxs("div",{className:"launch-editor-button-wrapper flex underline underline-offset-4",children:[n," ",e.jsx("svg",{height:24,width:24,children:e.jsx("use",{href:`${ge}#Keyboard`})})]});return ENV.EPICSHOP_DEPLOYED&&o?e.jsx("div",{className:"inline-block grow",children:e.jsx(C,{appFile:r,appName:o.name,...i,children:a})}):o?e.jsx("div",{className:"inline-block grow",children:e.jsx(C,{appFile:r,appName:o.name,...i,children:a})}):t==="playground"?e.jsx(D,{content:"You must 'Set to Playground' before opening a file",children:e.jsx("div",{className:"inline-block grow cursor-not-allowed",children:a})}):e.jsx(e.Fragment,{children:"children"})}function ze(r){return r==="problem"?"problem":r==="solution"?"solution":"playground"}function Ke({to:r,children:t=e.jsx("code",{children:r.toString()}),...n}){const[i]=ie(),s=`?${q(i,"pathname",r.toString()).toString()}`,o=E(),a=ze(i.get("preview")),c=Pe(),d=o[a],f=d?.dev.type==="script"?ve({domain:c.domain,port:d.dev.portNumber}):o.playground?.dev.type==="browser"||o.playground?.dev.type==="export"?o.playground.dev.pathname:null,{inBrowserBrowserRef:p}=He(),m=f?f.slice(0,-1)+r.toString():null;return e.jsxs("div",{className:"inline-flex items-center justify-between gap-1",children:[e.jsx(g,{to:s,...n,className:F(n.className,{"cursor-not-allowed":ENV.EPICSHOP_DEPLOYED}),title:ENV.EPICSHOP_DEPLOYED?"Cannot link to app in deployed version":void 0,onClick:l=>{ENV.EPICSHOP_DEPLOYED&&l.preventDefault(),n.onClick?.(l),p.current?.handleExtrnalNavigation(r.toString())},children:t}),m?e.jsx(D,{content:"Open in new tab",children:e.jsx("a",{href:m,target:"_blank",rel:"noreferrer",className:F("flex aspect-square items-center justify-center",{"cursor-not-allowed":ENV.EPICSHOP_DEPLOYED}),title:ENV.EPICSHOP_DEPLOYED?"Cannot link to app in deployed version":"Open in new tab",onClick:l=>{ENV.EPICSHOP_DEPLOYED&&l.preventDefault()},children:e.jsx(A,{name:"ExternalLink"})})}):null]})}var S="Popover",[X]=Se(S,[B]),y=B(),[We,h]=X(S),z=r=>{const{__scopePopover:t,children:n,open:i,defaultOpen:s,onOpenChange:o,modal:a=!1}=r,c=y(t),d=u.useRef(null),[f,p]=u.useState(!1),[m,l]=ye({prop:i,defaultProp:s??!1,onChange:o,caller:S});return e.jsx(Ce,{...c,children:e.jsx(We,{scope:t,contentId:Re(),triggerRef:d,open:m,onOpenChange:l,onOpenToggle:u.useCallback(()=>l(j=>!j),[l]),hasCustomAnchor:f,onCustomAnchorAdd:u.useCallback(()=>p(!0),[]),onCustomAnchorRemove:u.useCallback(()=>p(!1),[]),modal:a,children:n})})};z.displayName=S;var K="PopoverAnchor",Qe=u.forwardRef((r,t)=>{const{__scopePopover:n,...i}=r,s=h(K,n),o=y(n),{onCustomAnchorAdd:a,onCustomAnchorRemove:c}=s;return u.useEffect(()=>(a(),()=>c()),[a,c]),e.jsx(V,{...o,...i,ref:t})});Qe.displayName=K;var W="PopoverTrigger",Q=u.forwardRef((r,t)=>{const{__scopePopover:n,...i}=r,s=h(W,n),o=y(n),a=H(t,s.triggerRef),c=e.jsx(U.button,{type:"button","aria-haspopup":"dialog","aria-expanded":s.open,"aria-controls":s.contentId,"data-state":re(s.open),...i,ref:a,onClick:w(r.onClick,s.onOpenToggle)});return s.hasCustomAnchor?c:e.jsx(V,{asChild:!0,...o,children:c})});Q.displayName=W;var L="PopoverPortal",[Ze,Je]=X(L,{forceMount:void 0}),Z=r=>{const{__scopePopover:t,forceMount:n,children:i,container:s}=r,o=h(L,t);return e.jsx(Ze,{scope:t,forceMount:n,children:e.jsx(Y,{present:n||o.open,children:e.jsx(Oe,{asChild:!0,container:s,children:i})})})};Z.displayName=L;var P="PopoverContent",J=u.forwardRef((r,t)=>{const n=Je(P,r.__scopePopover),{forceMount:i=n.forceMount,...s}=r,o=h(P,r.__scopePopover);return e.jsx(Y,{present:i||o.open,children:o.modal?e.jsx(tt,{...s,ref:t}):e.jsx(rt,{...s,ref:t})})});J.displayName=P;var et=Ae("PopoverContent.RemoveScroll"),tt=u.forwardRef((r,t)=>{const n=h(P,r.__scopePopover),i=u.useRef(null),s=H(t,i),o=u.useRef(!1);return u.useEffect(()=>{const a=i.current;if(a)return Ie(a)},[]),e.jsx(Te,{as:et,allowPinchZoom:!0,children:e.jsx(ee,{...r,ref:s,trapFocus:n.open,disableOutsidePointerEvents:!0,onCloseAutoFocus:w(r.onCloseAutoFocus,a=>{a.preventDefault(),o.current||n.triggerRef.current?.focus()}),onPointerDownOutside:w(r.onPointerDownOutside,a=>{const c=a.detail.originalEvent,d=c.button===0&&c.ctrlKey===!0,f=c.button===2||d;o.current=f},{checkForDefaultPrevented:!1}),onFocusOutside:w(r.onFocusOutside,a=>a.preventDefault(),{checkForDefaultPrevented:!1})})})}),rt=u.forwardRef((r,t)=>{const n=h(P,r.__scopePopover),i=u.useRef(!1),s=u.useRef(!1);return e.jsx(ee,{...r,ref:t,trapFocus:!1,disableOutsidePointerEvents:!1,onCloseAutoFocus:o=>{r.onCloseAutoFocus?.(o),o.defaultPrevented||(i.current||n.triggerRef.current?.focus(),o.preventDefault()),i.current=!1,s.current=!1},onInteractOutside:o=>{r.onInteractOutside?.(o),o.defaultPrevented||(i.current=!0,o.detail.originalEvent.type==="pointerdown"&&(s.current=!0));const a=o.target;n.triggerRef.current?.contains(a)&&o.preventDefault(),o.detail.originalEvent.type==="focusin"&&s.current&&o.preventDefault()}})}),ee=u.forwardRef((r,t)=>{const{__scopePopover:n,trapFocus:i,onOpenAutoFocus:s,onCloseAutoFocus:o,disableOutsidePointerEvents:a,onEscapeKeyDown:c,onPointerDownOutside:d,onFocusOutside:f,onInteractOutside:p,...m}=r,l=h(P,n),j=y(n);return Fe(),e.jsx($e,{asChild:!0,loop:!0,trapped:i,onMountAutoFocus:s,onUnmountAutoFocus:o,children:e.jsx(De,{asChild:!0,disableOutsidePointerEvents:a,onInteractOutside:p,onEscapeKeyDown:c,onPointerDownOutside:d,onFocusOutside:f,onDismiss:()=>l.onOpenChange(!1),children:e.jsx(ke,{"data-state":re(l.open),role:"dialog",id:l.contentId,...j,...m,ref:t,style:{...m.style,"--radix-popover-content-transform-origin":"var(--radix-popper-transform-origin)","--radix-popover-content-available-width":"var(--radix-popper-available-width)","--radix-popover-content-available-height":"var(--radix-popper-available-height)","--radix-popover-trigger-width":"var(--radix-popper-anchor-width)","--radix-popover-trigger-height":"var(--radix-popper-anchor-height)"}})})})}),te="PopoverClose",nt=u.forwardRef((r,t)=>{const{__scopePopover:n,...i}=r,s=h(te,n);return e.jsx(U.button,{type:"button",...i,ref:t,onClick:w(r.onClick,()=>s.onOpenChange(!1))})});nt.displayName=te;var ot="PopoverArrow",st=u.forwardRef((r,t)=>{const{__scopePopover:n,...i}=r,s=y(n);return e.jsx(Le,{...s,...i,ref:t})});st.displayName=ot;function re(r){return r?"open":"closed"}var it=z,at=Q,lt=Z,ct=J;function pt({diffFilesPromise:r}){const t=E(),[n,i]=Me("files-popover"),[s,o]=u.useState(!1),a=u.useRef(null);function c(p){o(p),p&&i()}function d(){o(!1)}const f=t.playground?.appName;return e.jsx(e.Fragment,{children:e.jsxs(it,{open:s,onOpenChange:c,children:[e.jsx(at,{asChild:!0,children:e.jsxs("button",{className:"relative flex h-full items-center gap-1 border-r px-6 py-3 font-mono text-sm uppercase","aria-label":"Relevant Files",children:[e.jsx(A,{name:"Files"}),e.jsx("span",{className:"hidden @min-[640px]:inline",children:"Files"}),n?e.jsx(Be,{tooltip:"Click to see which files to edit!"}):null]})}),e.jsx(lt,{children:e.jsx(ct,{ref:a,className:"slideRightContent lg:slideUpContent invert-theme bg-background text-foreground z-10 rounded px-9 py-8 select-none",align:"start",sideOffset:5,children:e.jsxs("div",{className:"launch-editor-wrapper",children:[e.jsx("strong",{className:"inline-block px-2 pb-2 font-semibold uppercase",children:"Relevant Files"}),e.jsxs("p",{className:"text-muted-foreground mb-4 max-w-2xs px-2 text-sm",children:["These are the files you'll need to modify for this exercise. Click any file to open it directly in your editor at the right location."," ",e.jsx(g,{to:"/guide#file-links",className:"text-highlight underline",onClick:()=>o(!1),children:"Learn more →"})]}),t.problem&&t.playground?.appName!==t.problem.name?e.jsx("div",{className:"mb-2 rounded p-1 font-mono font-medium",children:e.jsx(M,{appName:t.problem.name})}):null,e.jsx("div",{id:"files",children:e.jsx(u.Suspense,{fallback:e.jsx(D,{content:"Loading diff",children:e.jsx("div",{className:"flex justify-center",children:e.jsx(A,{name:"Refresh",className:"h-8 w-8 animate-spin"})})}),children:e.jsx(ae,{resolve:r,errorElement:e.jsx("div",{className:"text-foreground-destructive",children:"Something went wrong."}),children:p=>{if(!p)return e.jsx("p",{className:"text-foreground-destructive",children:"Unable to determine diff"});if(typeof p=="string")return e.jsx("p",{className:"text-foreground-destructive",children:p});if(!p.length)return e.jsx("p",{children:"No files changed"});const m=f||ENV.EPICSHOP_GITHUB_ROOT?{}:{title:"You must 'Set to Playground' before opening a file",className:"not-allowed"};return e.jsxs("ul",{...m,children:[p.length>1&&!ENV.EPICSHOP_DEPLOYED?e.jsx("div",{className:"border-opacity-50 mb-2 border-b border-b-gray-50 pb-2 font-sans",children:e.jsx(C,{appFile:p.map(l=>`${l.path},${l.line},1`),appName:"playground",onUpdate:d,children:e.jsx("p",{children:"Open All Files"})})}):null,p.map(l=>e.jsx("li",{"data-state":l.status,children:e.jsx(C,{appFile:`${l.path},${l.line},1`,appName:ENV.EPICSHOP_DEPLOYED?t.problem?.name??"playground":"playground",onUpdate:d,children:e.jsx("code",{children:l.path})})},l.path))]})}})})})]})})})]})})}const ut="es_split_pct";function $(r,t=50){const n=typeof r=="number"?r:Number(r);return Number.isFinite(n)?Math.min(80,Math.max(20,Math.round(n*100)/100)):t}function ne(r,t){const n=r?.exerciseStepApp.exerciseNumber.toString().padStart(2,"0")??"00",i=r?.exerciseStepApp.stepNumber.toString().padStart(2,"0")??"00",s={problem:"💪",solution:"🏁"}[r?.type??"problem"],o=r?.[r.type]?.title??"N/A";return{emoji:s,stepNumber:i,title:o,exerciseNumber:n,exerciseTitle:r?.exerciseTitle??"Unknown exercise",workshopTitle:t,type:r?.type??"problem"}}const Xt=({loaderData:r,matches:t,params:n})=>{const i=be(t);if(!r||!i)return[{title:"🦉 | Error"}];const{emoji:s,stepNumber:o,title:a,exerciseNumber:c,exerciseTitle:d}=ne(r);return Ne({title:`${s} | ${o}. ${a} | ${c}. ${d} | ${i.workshopTitle}`,description:`${n.type} step for exercise ${c}. ${d}`,ogTitle:a,ogDescription:`${d} step ${Number(o)} ${n.type}`,instructor:i.instructor,requestInfo:i.requestInfo})},zt=le(function({loaderData:t}){const n=u.useRef(null),i=u.useRef(null),s=u.useRef(null),[o,a]=u.useState(t.splitPercent);function c(m){const l=$(m);document.cookie=`${ut}=${l}; path=/; SameSite=Lax;`}function d(m){const l=i.current;if(!l)return;const j=l.getBoundingClientRect();let b=!0;const R=Array.from(document.querySelectorAll("iframe")),oe=R.map(x=>x.style.pointerEvents);R.forEach(x=>x.style.pointerEvents="none");function O(x){if(!b){v();return}const se=(x-j.left)/j.width*100,T=$(se);a(T),c(T)}function _(x){if(!b||x.buttons===0){v();return}O(x.clientX)}function I(x){const N=x.touches?.[0];if(!b||!N){v();return}O(N.clientX)}function v(){b&&(b=!1,R.forEach((x,N)=>x.style.pointerEvents=oe[N]??""),window.removeEventListener("mousemove",_),window.removeEventListener("mouseup",v),window.removeEventListener("touchmove",I),window.removeEventListener("touchend",v),document.body.style.cursor="",document.body.style.userSelect="")}window.addEventListener("mousemove",_),window.addEventListener("mouseup",v),window.addEventListener("touchmove",I),window.addEventListener("touchend",v),document.body.style.cursor="col-resize",document.body.style.userSelect="none",O(m)}const f=ne(t);fe({watchPaths:[`${t.exerciseStepApp.relativePath}/README.mdx`]});const p=t.problem?t.playground?.appName!==t.problem.name:!1;return e.jsx("div",{className:"flex max-w-full grow flex-col",children:e.jsxs("main",{ref:i,className:"flex grow flex-col sm:h-full sm:min-h-[800px] md:min-h-[unset] lg:flex-row",children:[e.jsxs("div",{className:"relative flex min-w-0 flex-none basis-full flex-col sm:col-span-1 sm:row-span-1 sm:h-full lg:basis-(--split-pct)",style:{"--split-pct":`${o}%`},ref:s,children:[e.jsx("h1",{className:"@container h-14 border-b pr-5 pl-10 text-sm leading-tight font-medium",children:e.jsxs("div",{className:"flex h-14 items-center justify-between gap-x-2 py-2 whitespace-nowrap",children:[e.jsxs("div",{className:"flex items-center justify-start gap-x-2 uppercase",children:[e.jsxs(g,{to:je(t.exerciseStepApp.exerciseNumber),className:"hover:underline",children:[e.jsxs("span",{children:[f.exerciseNumber,"."]}),e.jsxs("span",{className:"hidden @min-[500px]:inline",children:[" ",f.exerciseTitle]})]}),e.jsx("span",{children:"/"}),e.jsxs(g,{to:".",className:"hover:underline",children:[e.jsxs("span",{children:[f.stepNumber,"."]}),e.jsxs("span",{className:"hidden @min-[300px]:inline",children:[" ",f.title]}),e.jsxs("span",{children:[" (",f.emoji]}),e.jsxs("span",{className:"hidden @min-[400px]:inline",children:[" ",f.type]}),e.jsx("span",{children:")"})]})]}),t.problem&&(t.playground?.appName!==t.problem.name||!t.playground?.isUpToDate)?e.jsx(M,{appName:t.problem.name,isOutdated:t.playground?.isUpToDate===!1,hideTextOnNarrow:!0,showOnboardingIndicator:p}):null]})}),e.jsxs("article",{id:t.articleId,className:"shadow-on-scrollbox scrollbar-thin scrollbar-thumb-scrollbar flex h-full w-full max-w-none flex-1 scroll-pt-6 flex-col justify-between space-y-6 overflow-y-auto p-2 sm:p-10 sm:pt-8",children:[t.exerciseStepApp.instructionsCode?e.jsx(Ye,{inBrowserBrowserRef:n}):e.jsx("div",{className:"flex h-full items-center justify-center text-lg",children:e.jsx("p",{children:"No instructions yet..."})}),e.jsxs("div",{className:"mt-auto flex justify-between",children:[t.prevStepLink?e.jsxs(g,{to:t.prevStepLink.to,"aria-label":"Previous Step","data-keyboard-action":"g+p",prefetch:"intent",children:[e.jsx("span",{"aria-hidden":!0,children:"←"}),e.jsx("span",{className:"hidden xl:inline",children:" Previous"})]}):e.jsx("span",{}),t.nextStepLink?e.jsxs(g,{to:t.nextStepLink.to,"aria-label":"Next Step","data-keyboard-action":"g+n",prefetch:"intent",children:[e.jsx("span",{className:"hidden xl:inline",children:"Next "}),e.jsx("span",{"aria-hidden":!0,children:"→"})]}):e.jsx("span",{})]})]},t.articleId),e.jsx(ue,{elementQuery:`#${t.articleId}`},`scroll-${t.articleId}`),t.type==="solution"?e.jsx(he,{type:"step",exerciseNumber:t.exerciseStepApp.exerciseNumber,stepNumber:t.exerciseStepApp.stepNumber,className:"h-14 border-t px-6"}):null,e.jsxs("div",{className:"@container flex h-16 justify-between border-t border-b-4 lg:border-b-0",children:[e.jsx("div",{children:e.jsx("div",{className:"h-full",children:e.jsx(pt,{diffFilesPromise:t.diffFiles})})}),e.jsx(xe,{appName:t.exerciseStepApp.name,relativePath:`${t.exerciseStepApp.relativePath}/README.mdx`}),e.jsx(me,{prev:t.prevStepLink?{to:t.prevStepLink.to,"aria-label":"Previous Step"}:null,next:t.nextStepLink?{to:t.nextStepLink.to,"aria-label":"Next Step"}:null})]})]}),e.jsx("div",{role:"separator","aria-orientation":"vertical",title:"Drag to resize",className:"bg-border hover:bg-accent hidden w-1 cursor-col-resize lg:block",onMouseDown:m=>d(m.clientX),onDoubleClick:()=>{a(50),c(50)},onTouchStart:m=>{const l=m.touches?.[0];l&&d(l.clientX)}}),e.jsx("div",{className:"flex min-w-0 flex-1",children:e.jsx(pe,{context:{inBrowserBrowserRef:n}})})]})})}),Kt=ce(function(){return e.jsx(de,{className:"container flex items-center justify-center",statusHandlers:{404:we}})});export{Kt as ErrorBoundary,zt as default,Xt as meta};
|
|
2
|
+
//# sourceMappingURL=_layout-DgA_wW0k.js.map
|