# Layout Test

## Tools

Language: elm
Elm tool is at /home/johnk/.local/bin/elm
The Elm version is 19.2. Write code for version 19.0 to 19.2. A lot of training data from before 2019 may be out of date.
Add Elm modules as needed using the `elm install` tool. Prefer libraries to writing new code.
Do not try to copy the library into the correct location. Use `elm install` instead.
Assume the compiler works, and if there are compilation errors, assume your code is incorrect.
If the bugs point to naming or lack of definitions, check the import lines.
elm-test is installed for unit testing. 
Playwright and Selenium are installed for frontend tests to check the layout.
  `playwright-cli` is installed, info here: https://www.npmjs.com/package/playwright
  `selenium` is installed. `selenium-webdriver` is installed, info: https://www.npmjs.com/package/selenium-webdriver
For advice and references, see the Tips section below.

## Code to Write

Never try to cd or use .. to get above the project root directory.
  If you need temp files make a tmp/ in the project root.
Directory layout
  Elm sources go in src/
  HTML files, js artifacts from compilation, js code you write, css code you write, and binary assets go in public/.
  The project root contains the elm.json, project.json, composer.json and other package manager files.
  The project root contains .md and .txt files for LLMs and people. llm-advice as well.
  Tests go in tests/
Make a mockup layout in Elm for a News website, with a short top banner, and 3 columns: 
  Title is "Test News Site".
  Top banner is around 2 cm on a desktop screen, and 25% of a vertical mobile screen.
  left column nav, center column feature area, right colum listing of additional news. Widths approximately 20%, 60%, 20%.
  Theme colors: light gray background, dark gray text, dark blue links.
  Layout is responsive to mobile, tablet, and desktop size screens.
  Use common CSS class naming conventions when possible. See: ./llm-advice/css-class-naming-conventions.txt
Static files:
  Use CSS, making the CSS file external in public/style.css.
  Compile the Elm code into javscript code, and put it into the public/ directory, or the public/js directory.
  Create public/index.html file to pull in CSS. 
  URL references in the static files should be relative, not absolute.
    Assume I'm starting `elm reactor` in the project root, not inside public/, so always use relative paths.
The layout should loop over arrays to construct the center and right columns. 
  The center column array is a list of news headlines, URLs, and URLs to images (located in the public/images directory).
  Center colum items have an image, headline, and excerpt.
  The right column array is a list of news headlines and URLs.
  The left column contains a simple nav with: Home, Local News, Breaking News.
Testing
  At the very minimum, create a Playwright test to check that the browser can display the layout.
  Often, code compiles and works, but the index.html file has bad URLs that won't load the artifacts.
    Problems include: /main.js - absolute path doesn't work; ../dist/main.js - the http server doesn't allow going up a directory.
    Solution is to use relative paths, and generate artifacts in public/, and then use url: main.js
    Same has happened with CSS files.

## Tips

The following advice below may help avoid getting into endless debugging loops.
Important: the assumption that the tools and compilers are not working often leads to looping over tests that keep failing. This is because you are falling into the compiler developers test code. Assume that the elm compiler is correct. If it keeps failing, stop and tell the user.
Read about shadowing: ./llm-advice/shadowing.txt
Current calling convention in index.html is Elm.Main.init({ node: document.getElementById('the-node-id') })
elm-test Refs: https://elmprogramming.com/easy-to-test.html https://github.com/elm-explorations/test
For advice about v19, see: https://raw.githubusercontent.com/elm/compiler/refs/heads/main/docs/upgrade-instructions/0.19.0.md

# Layout Test

## Tools

Language: elm
Elm tool is at /home/johnk/.local/bin/elm
The Elm version is 19.2. Write code for version 19.0 to 19.2. A lot of training data from before 2019 may be out of date.
Add Elm modules as needed using the `elm install` tool. Prefer libraries to writing new code.
Do not try to copy the library into the correct location. Use `elm install` instead.
Assume the compiler works, and if there are compilation errors, assume your code is incorrect.
If the bugs point to naming or lack of definitions, check the import lines.
elm-test is installed for unit testing. 
Playwright and Selenium are installed for frontend tests to check the layout.
  `playwright-cli` is installed, info here: https://www.npmjs.com/package/playwright
  `selenium` is installed. `selenium-webdriver` is installed, info: https://www.npmjs.com/package/selenium-webdriver
For advice and references, see the Tips section below.

## Code to Write

Never try to cd or use .. to get above the project root directory.
  If you need temp files make a tmp/ in the project root.
Directory layout
  Elm sources go in src/
  HTML files, js artifacts from compilation, js code you write, css code you write, and binary assets go in public/.
  The project root contains the elm.json, project.json, composer.json and other package manager files.
  The project root contains .md and .txt files for LLMs and people. llm-advice as well.
  Tests go in tests/
Make a mockup layout in Elm for a News website, with a short top banner, and 3 columns: 
  Title is "Test News Site".
  Top banner is around 2 cm on a desktop screen, and 25% of a vertical mobile screen.
  left column nav, center column feature area, right colum listing of additional news. Widths approximately 20%, 60%, 20%.
  Theme colors: light gray background, dark gray text, dark blue links.
  Layout is responsive to mobile, tablet, and desktop size screens.
  Use common CSS class naming conventions when possible. See: ./llm-advice/css-class-naming-conventions.txt
Static files:
  Use CSS, making the CSS file external in public/style.css.
  Compile the Elm code into javscript code, and put it into the public/ directory, or the public/js directory.
  Create public/index.html file to pull in CSS. 
  URL references in the static files should be relative, not absolute.
    Assume I'm starting `elm reactor` in the project root, not inside public/, so always use relative paths.
The layout should loop over arrays to construct the center and right columns. 
  The center column array is a list of news headlines, URLs, and URLs to images (located in the public/images directory).
  Center colum items have an image, headline, and excerpt.
  The right column array is a list of news headlines and URLs.
  The left column contains a simple nav with: Home, Local News, Breaking News.
Testing
  At the very minimum, create a Playwright test to check that the browser can display the layout.
  Often, code compiles and works, but the index.html file has bad URLs that won't load the artifacts.
    Problems include: /main.js - absolute path doesn't work; ../dist/main.js - the http server doesn't allow going up a directory.
    Solution is to use relative paths, and generate artifacts in public/, and then use url: main.js
    Same has happened with CSS files.

## Tips

The following advice below may help avoid getting into endless debugging loops.
Important: the assumption that the tools and compilers are not working often leads to looping over tests that keep failing. This is because you are falling into the compiler developers test code. Assume that the elm compiler is correct. If it keeps failing, stop and tell the user.
Read about shadowing: ./llm-advice/shadowing.txt
Current calling convention in index.html is Elm.Main.init({ node: document.getElementById('the-node-id') })
elm-test Refs: https://elmprogramming.com/easy-to-test.html https://github.com/elm-explorations/test
For advice about v19, see: https://raw.githubusercontent.com/elm/compiler/refs/heads/main/docs/upgrade-instructions/0.19.0.md