Interactive development

10x Resume candidates can use just ↗︎ commands as described below to interactively edit their content and watch results of their changes.

Interactive development

The 10x Resume .justfile provides a dev command which will run the build and rendering tools in “watch” mode and a link command which displays the link and password needed to access the content. As a convenience for OSX users, it also provides an openstatic command which will copy the password to the clipboard and open the static development link in a browser.

Steps

1. To use 10x Resume in “watch” mode, run the following command from the git workspace
   (e.g. ~/10xresume/dev)

   just dev

   Sample output

   % just dev
   pnpm install --reporter=append-only
   Scope: all 24 workspace projects
   Lockfile is up to date, resolution step is skipped
   Already up to date
   Done in 1.6s
   [ ! -e .env ] && cp .env.local .env
   [ ! -e 00000000.enc ] && just write-enc
   pnpm run dev
   > 10xresume@ dev /Users/demo/10xresume/dev
   >                dotenvx run -- turbo dev    --concurrency=12
   [dotenvx@1.19.2] injecting env (18) from .env
   turbo 2.3.3
   • Packages in scope: @repo/Access, @repo/Access-browser, @repo/Access-node, ...
   • Running dev in 23 packages
   • Remote caching disabled
   ...
   @repo/Details:dev: > @repo/Details@ dev /Users/demo/10xresume/dev/Packages/Details
   @repo/Details:dev: > tsc --watch
   @repo/Access:dev:
   @repo/Access:dev: > @repo/Access@ dev /Users/demo/10xresume/dev/Packages/Access
   @repo/Access:dev: > tsc --watch
   @repo/Cli:dev:
   @repo/Cli:dev: > @repo/Cli@ dev /Users/demo/10xresume/dev/Apps/Cli
   @repo/Cli:dev: > concurrently 'pnpm run dev:tsc' 'pnpm run dev:build'
   @repo/Cache:dev:
   @repo/Cache:dev: > @repo/Cache@ dev /Users/demo/10xresume/dev/Packages/Cache
   @repo/Cache:dev: > tsc --watch
   @repo/Details-css:dev:
   @repo/Details-css:dev: > @repo/Details-css@ dev /Users/demo/10xresume/dev/Packages/Details-css
   @repo/Details-css:dev: > nodemon -x 'pnpm run build' -w Details.module.css
   @repo/Portfolio:dev:
   @repo/Portfolio:dev: > @repo/Portfolio@ dev /Users/demo/10xresume/dev/Job/Portfolio
   @repo/Portfolio:dev: > dotenvx run -f ../../.env -- tsx node_modules/@11ty/eleventy/cmd.cjs --config=.eleventy.ts --serve
   @repo/Codeview:dev:
   @repo/Codeview:dev: > @repo/Codeview@ dev /Users/demo/10xresume/dev/Packages/Codeview
   @repo/Codeview:dev: > tsc --watch
   @repo/Details-render:dev:
   @repo/Details-render:dev: > @repo/Details-render@ dev /Users/demo/10xresume/dev/Packages/Details-render
   @repo/Details-render:dev: > nodemon -x 'pnpm run both' -w Render.tsx -w ../Details/Details.tsx -w ../Details-css/Details.module.css -w ../../Job/Data
   @repo/Pdf:dev:
   @repo/Pdf:dev: > @repo/Pdf@ dev /Users/demo/10xresume/dev/Job/Pdf
   @repo/Pdf:dev: > ./wait.sh && tsx node_modules/@11ty/eleventy/cmd.cjs --config=.eleventy.ts --serve
   @repo/App:dev: > @repo/App@ dev /Users/demo/10xresume/dev/Apps/App
   @repo/App:dev: > pnpm run env && concurrently 'pnpm run dev:tsc' 'pnpm run dev:build'
   @repo/Pdf:dev: + '[' '!' -e Src/_includes/details.css ']'
   @repo/Access-browser:dev:
   @repo/Access-browser:dev: > @repo/Access-browser@ dev /Users/demo/10xresume/dev/Packages/Access-browser
   @repo/Access-browser:dev: > pnpm run env && tsc --watch
   @repo/Details-css:dev: [nodemon] 3.1.9
   @repo/Details-css:dev: [nodemon] to restart at any time, enter `rs`
   @repo/Details-css:dev: [nodemon] watching path(s): Details.module.css
   @repo/Details-css:dev: [nodemon] watching extensions: js,mjs,cjs,json
   @repo/Details-css:dev: [nodemon] starting `pnpm run build`
   @repo/Details-render:dev: [nodemon] 3.1.9
   @repo/Details-render:dev: [nodemon] to restart at any time, enter `rs`
   @repo/Details-render:dev: [nodemon] watching path(s): Render.tsx ../Details/Details.tsx ../Details-css/Details.module.css ../../Job/Data/**/*
   @repo/Details-render:dev: [nodemon] watching extensions: js,mjs,cjs,json
   @repo/Details-render:dev: [nodemon] starting `pnpm run both`
   @repo/Portfolio:dev: [dotenvx@1.19.2] injecting env (18) from ../../.env
   @repo/Cache:dev: [1:48:34 PM] Starting compilation in watch mode...
   @repo/Access:dev: [1:48:34 PM] Starting compilation in watch mode...
   @repo/Details:dev: [1:48:34 PM] Starting compilation in watch mode...
   @repo/Codeview:dev: [1:48:34 PM] Starting compilation in watch mode...
   @repo/App:dev:
   @repo/App:dev: > @repo/App@ env /Users/demo/10xresume/dev/Apps/App
   @repo/App:dev: > dotenvx get -f ../../.env | jq -M '{ACCESS,WORKER}' > DOTENV.json
   @repo/Access-browser:dev:
   @repo/Access-browser:dev: > @repo/Access-browser@ env /Users/demo/10xresume/dev/Packages/Access-browser
   @repo/Access-browser:dev: > dotenvx get -f ../../.env | jq -M '{LADLEACCESS}' > .ladle/DOTENV.json
   @repo/Details-css:dev:
   @repo/Details-css:dev: > @repo/Details-css@ build /Users/demo/10xresume/dev/Packages/Details-css
   @repo/Details-css:dev: > css-typed Details.module.css && mkdir -p dist && cp Details.* dist
   @repo/Details-render:dev:
   @repo/Details-render:dev: > @repo/Details-render@ both /Users/demo/10xresume/dev/Packages/Details-render
   @repo/Details-render:dev: > pnpm run build && pnpm run render
   @repo/Cli:dev: [1]
   @repo/Cli:dev: [1] > @repo/Cli@ dev:build /Users/demo/10xresume/dev/Apps/Cli
   @repo/Cli:dev: [1] > tsup --watch --onSuccess 'mv dist/10x.js dist/10x'
   @repo/Cli:dev: [0]
   @repo/Cli:dev: [0] > @repo/Cli@ dev:tsc /Users/demo/10xresume/dev/Apps/Cli
   @repo/Cli:dev: [0] > tsc  --watch
   @repo/Details-css:dev: [nodemon] clean exit - waiting for changes before restart
   @repo/Access-browser:dev: [1:48:36 PM] Starting compilation in watch mode...
   @repo/Pdf:dev: [11ty] Writing ./build/index.html from ./Src/index.njk
   @repo/Pdf:dev: [11ty] Copied 17 Wrote 1 file in 0.52 seconds (v3.0.0)
   @repo/Pdf:dev: [11ty] Watching…
   @repo/Cli:dev: [0] 1:48:36 PM - Starting compilation in watch mode...
   @repo/Pdf:dev: [11ty] Server at http://localhost:8080/
   @repo/Portfolio:dev: [11ty] Writing ./build/10x/_items.json from ./Src/10x/_items.md (liquid)
   @repo/Portfolio:dev: [11ty] Writing ./build/10x/hello.1.md from ./Src/10x/hello.1.md (liquid)
   @repo/Portfolio:dev: [11ty] Writing ./build/10x/analysis.1/index.html from ./Src/10x/analysis.1.md (liquid)
   ...
   @repo/Portfolio:dev: [11ty] Copied 60 Wrote 17 files in 0.95 seconds (v3.0.0)
   @repo/Portfolio:dev: [11ty] Watching…
   @repo/Portfolio:dev: [11ty] Server at http://localhost:8081/
   @repo/Details-render:dev:
   @repo/Details-render:dev: > @repo/Details-render@ build /Users/demo/10xresume/dev/Packages/Details-render
   @repo/Details-render:dev: > esbuild Render.tsx --platform=node --bundle --outdir=dist && mv dist/Render.js dist/Render.cjs
   @repo/Details-render:dev:
   @repo/Details-render:dev:   dist/Render.js   822.8kb
   @repo/Details-render:dev:   dist/Render.css    3.4kb
   @repo/Details-render:dev:   Done in 47ms
   @repo/Cli:dev: [1] CLI Building entry: 10x.ts
   @repo/Cli:dev: [1] CLI Using tsconfig: tsconfig.json
   @repo/Cli:dev: [1] CLI tsup v8.3.5
   @repo/Cli:dev: [1] CLI Using tsup config: /Users/demo/10xresume/dev/Apps/Cli/tsup.config.ts
   @repo/Cli:dev: [1] CLI Running in watch mode
   @repo/Cli:dev: [1] CLI Target: node20
   @repo/Cli:dev: [1] CLI Cleaning output folder
   @repo/Cli:dev: [1] CJS Build start
   @repo/App:dev: [0]
   @repo/App:dev: [0] > @repo/App@ dev:tsc /Users/demo/10xresume/dev/Apps/App
   @repo/App:dev: [0] > dotenvx run -f ../../.env -- tsc  --noEmit --watch
   @repo/App:dev: [1]
   @repo/App:dev: [1] > @repo/App@ dev:build /Users/demo/10xresume/dev/Apps/App
   @repo/App:dev: [1] > dotenvx run -f ../../.env -- vite --clearScreen false
   @repo/Details:dev: [1:48:39 PM] Found 0 errors. Watching for file changes.
   @repo/Details:dev:
   @repo/Cli:dev: [1] CJS dist/10x.js 2.89 MB
   @repo/Cli:dev: [1] CJS Build success in 1104ms
   @repo/Cli:dev: [1] CLI Watching for changes in "."
   @repo/Cli:dev: [1] CLI Ignoring changes in "**/{.git,node_modules}/**" | "dist"
   @repo/App:dev: [1] [dotenvx@1.19.2] injecting env (18) from ../../.env
   @repo/Pdf:dev: Prince ok
   @repo/App:dev: [1] Apps/App/vite.config.ts defineConfig command serve mode development worker off
   @repo/App:dev: [0] 1:48:39 PM - Starting compilation in watch mode...
   @repo/App:dev: [0]
   @repo/Details-render:dev:
   @repo/Details-render:dev: > @repo/Details-render@ render /Users/demo/10xresume/dev/Packages/Details-render
   @repo/Details-render:dev: > dotenvx run -f ../../.env -- node dist/Render.cjs
   @repo/App:dev: [1]
   @repo/App:dev: [1]   VITE v5.4.11  ready in 677 ms
   @repo/App:dev: [1]
   @repo/App:dev: [1]   ➜  Local:   https://localhost:5173/
   @repo/App:dev: [1]   ➜  Network: https://169.254.33.19:5173/
   @repo/App:dev: [1]   ➜  Network: https://192.168.1.51:5173/
   @repo/Details-render:dev: [dotenvx@1.19.2] injecting env (18) from ../../.env
   @repo/Details-render:dev: Wrote ../../Job/Pdf/Src/_includes/details.html
   @repo/Details-render:dev: Wrote ../../Job/Pdf/Src/_includes/details.css
   @repo/Details-render:dev: [nodemon] clean exit - waiting for changes before restart
   @repo/Pdf:dev: [11ty] File changed: Src/_includes/details.html
   @repo/Pdf:dev: [11ty] File changed: Src/_includes/details.css
   @repo/Pdf:dev: [11ty] Writing ./build/index.html from ./Src/index.njk
   @repo/Pdf:dev: [11ty] Copied 17 Wrote 1 file in 0.02 seconds (v3.0.0)
   @repo/Pdf:dev: [11ty] Watching…
   @repo/Access:dev: [1:48:40 PM] Found 0 errors. Watching for file changes.
   @repo/Pdf:dev: Prince ok
   @repo/Access-browser:dev: [1:48:45 PM] Found 0 errors. Watching for file changes.
   @repo/Cache:dev: [1:48:45 PM] Found 0 errors. Watching for file changes.
   @repo/Cli:dev: [0]
   @repo/Cli:dev: [0] 1:48:46 PM - Found 0 errors. Watching for file changes.
   @repo/Codeview:dev: [1:48:47 PM] Found 0 errors. Watching for file changes.
   @repo/Codeview:dev:
   @repo/App:dev: [0] 1:48:51 PM - Found 0 errors. Watching for file changes.

2. In another terminal, run the following command from the git workspace to display the static link and password to access the content:

   just link

   Sample output

   % just link
          link https://localhost:5173/?00000000#/l/7cCwTvv93tpJhnU44MwMuA
   static link https://localhost:5173/static?00000000#/l/7cCwTvv93tpJhnU44MwMuA
      password xxxxxxxxxxxxxxxxxxxx

   Note

   Opening the link will attempt to load content from Userbase.
   For now use the static link to test content locally served by vite.

   On OSX, the following command will copy the password to the clipboard and open the 10x Resume static development link in a browser.

   just openstatic

Opening the link

Opening the static development link in a browser will cause it to load the 10x Resume single-page application and redirect to a login page with a populated Link field and an empty Password field as shown below

Entering the password and pressing SIGN IN will cause the application to download the registration file, decrypt it and redirects to the welcome page.

Entering an invalid password will display a ‘Failed to decrypt link data’ error.

Live editing

Candidates may edit the content when the dev command is running and see their changes by refreshing the browser. For example, after the frontmatter the Job/Portfolio/Src/10x/hello.1.md file has the text

My name is {{ Profile.name }}.  I'm an experienced ...

Adding ## This is an edit ahead of this text and refreshing the browser will cause it to show