Skip to content

A page per URL ​

Task: one file that answers a URL for each item.

yaml
# Recipe: one file answers /product/1, /product/2 and so on.
paths:
  components: ./components

A [name] segment in a file or folder name matches any value, and the page gets it as the variable name. It arrives as text; type="integer" on a q:set turns it into a number.

xml
<q:component name="Product">
  <!-- components/product/[id].q answers /product/7 with id = "7". -->
  <q:set name="products" type="array"
         value='[{"name": "Kettle", "price": 35}, {"name": "Teapot", "price": 22}]' />
  <q:set name="n" type="integer" value="{id}" />

  <html>
  <body>
    <q:if condition="n >= 1 and n &lt;= len(products)">
      <h1>{products[n - 1].name}</h1>
      <p>Product {id}: ${products[n - 1].price}</p>
    </q:if>
    <q:else>
      <h1>No product {id}</h1>
    </q:else>
  </body>
  </html>
</q:component>
xml
<q:test name="the URL segment becomes a variable" page="/product/2">
  <test:visit />
  <test:expect text="Teapot" />
  <test:expect text="Product 2: $22" />
  <test:expect var="id" value="2" />
</q:test>

<q:test name="one file answers every id" page="/product/1">
  <test:visit />
  <test:expect text="Kettle" />
</q:test>

<q:test name="an id with no product says so" page="/product/9">
  <test:visit />
  <test:expect text="No product 9" />
</q:test>
text
tests/product.test.q
  PASS  the URL segment becomes a variable
  PASS  one file answers every id
  PASS  an id with no product says so
3 passed, 0 failed

With a database, the page reads the row with the id: see Edit a row. The rule: ROUTE-1.

MIT Licensed · Built with VitePress