QwikDev · shairez · Jul 18, 2022 · Jul 18, 2022 · Jul 18, 2022 · Jul 18, 2022
@@ -10,7 +10,7 @@
 
 - [Overview](routing/overview.mdx)
 - [Index](routing/default-index.mdx)
-- [Slugs](routing/slugs.mdx)
+- [Route Parameters](routing/route-parameters.mdx)
 - [Pathless Dirs](routing/pathless.mdx)
 
 ## Layout

@@ -10,11 +10,11 @@ The return value of `useLocation()` is equivalent to `document.location`, but it
 
 ## Path slug params
 
-`useLocation()` encodes the URL slugs as params.
+`useLocation()` encodes the [Route Parameters](/qwikcity/routing/route-parameters) as params.
 
 Assume you have: 
-- Route: `http://server/sku/[skuId]`
-- User navigates to: `http://server/sku/1234`
+- Route: `https://example.com/sku/[skuId]`
+- User navigates to: `https://example.com/sku/1234`
 - Then the `skuId` can be retrieved through `useLocation().params.skuId`.
 
 

@@ -12,7 +12,7 @@ Let's assume you have the router set up such as this:
   - routes/
     - some/           
       - path/
-        - index.tsx              # http://server/some/path
+        - index.tsx              # https://example.com/some/path
 ```
 
 ```typescript
@@ -35,12 +35,12 @@ You can build complex views by composing multiple components within each other.
   - routes/
     - some/           
       - path/
-        - index.tsx              # http://server/some/path
+        - index.tsx              # https://example.com/some/path
         - _sub_component.tsx
 ```
 
 Inside `index.tsx` you can create a component that is exported as `default` export. Content is created by writing a template with [JSX](https://reactjs.org/docs/introducing-jsx.html)-Syntax. Every component-Function returns the template that should be rendered on the screen. If you want to learn more about the component anatomy, please see [components documentation](/docs/components/overview).
-The following component will be rendered at `http://server/some/path` according to the directory-structure, we have set up above. 
+The following component will be rendered at `https://example.com/some/path` according to the directory-structure, we have set up above. 
 
 ```typescript
 // File: src/routes/some/path/index.tsx

@@ -12,7 +12,7 @@ Let's assume you have the router set up such as this:
   - routes/
     - some/           
       - path/
-        - index.mdx              # http://server/some/path
+        - index.mdx              # https://example.com/some/path
 ```
 
 ```Markdown
@@ -25,7 +25,7 @@ This is a simple hello world component.
 
 ```
 
-The above component will be rendered at `http://server/some/path`. 
+The above component will be rendered at `https://example.com/some/path`. 
 
 ## Importing other components.
 
@@ -38,7 +38,7 @@ The above component will be rendered at `http://server/some/path`.
   - routes/
     - some/           
       - path/
-        - index.mdx              # http://server/some/path
+        - index.mdx              # https://example.com/some/path
 ```
 
 ```Markdown

@@ -18,10 +18,10 @@ First layout files as follows:
     - some/   
       - _menu.md
       - _layout.tsx
-      - path.tsx       # http://server/some/path
+      - path.tsx       # https://example.com/some/path
 ```
 
-Navigating to `http://server/some/path` activates:
+Navigating to `https://example.com/some/path` activates:
 - `src/routes/some/path.tsx`: This component will be used for rendering the page content.
 - `src/routes/some/_layout.tsx`: This layout will be used to provide content around the `src/routes/some/path.tsx`. Internally the layout will use `src/routes/some/_menu.md` to render the menus.
 - `src/routes/some/_menu.md`: This file will be used to declare the menu structure which will be rendered by `src/routes/some/_layout.tsx`.

@@ -4,18 +4,18 @@ title: Qwik City - Retrieving Data
 
 # Qwik City - Retrieving Data
 
-Let's implement `http://server/product/abc123/details` so that we can retrieve the details of a product.
+Let's implement `https://example.com/product/abc123/details` so that we can retrieve the details of a product.
 
 ## File layout
 
-The first step is to layout out the files so that we can accept `http://server/product/abc123/details`.
+The first step is to layout out the files so that we can accept `https://example.com/product/abc123/details`.
 
 ```
 - src/
   - routes/
     - product/
       - [skuId]/
-        - details.js     # http://server/product/1234/details
+        - details.js     # https://example.com/product/1234/details
 ```
 
 ## Implement Endpoint

@@ -12,10 +12,10 @@ Assume this file layout.
   - routes/
     - product/
       - [skuId]/
-        - details.js     # http://server/product/1234/details
+        - details.js     # https://example.com/product/1234/details
 ```
 
-Let's say that a user does a request to an invalid `skuId` such as `http://server/product/999/details`. In this case, we would like to return a 404 HTTP status code and render a 404 page. The place where we determine if the request is valid or not is the data endpoint by looking into the database. Even if the response is non-200, the component still gets a chance to render a page (Except in the redirect case.)
+Let's say that a user does a request to an invalid `skuId` such as `https://example.com/product/999/details`. In this case, we would like to return a 404 HTTP status code and render a 404 page. The place where we determine if the request is valid or not is the data endpoint by looking into the database. Even if the response is non-200, the component still gets a chance to render a page (Except in the redirect case.)
 
 ```typescript
 // File: src/routes/product/[skuId]/details.js

@@ -6,11 +6,11 @@ title: Qwik City - Endpoints
 
 Endpoints are URLs that can be used to retrieve data.
 
-Imagine that you have `http://server/product/abc123/details` and you want to get the details of the product with the id `abc123`. You can retrieve the data in two different ways:
+Imagine that you have `https://example.com/product/abc123/details` and you want to get the details of the product with the id `abc123`. You can retrieve the data in two different ways:
 1. As HTML for human consumption.
 2. As JSON for machine consumption.
 
-In both cases, you are retrieving using the same URL `http://server/product/abc123/details`, the difference is the `Accept:` request header.
+In both cases, you are retrieving using the same URL `https://example.com/product/abc123/details`, the difference is the `Accept:` request header.
 - `Accept: text/html`: retrieves HTML for human consumption
 - `Accept: application/json`: retrieves JSON for machine consumption
 - Perhaps some other serialization format in the future.

@@ -21,9 +21,9 @@ All file-based route information is placed in `src/routes` directory. This is th
     - counter.tsx
   - routes/              # Put your route specific components here.
     - docs/
-      - overview.mdx     # http://server/docs/overview
-      - index.mdx        # http://server/docs/
-    - index.tsx          # http://server/
+      - overview.mdx     # https://example.com/docs/overview
+      - index.mdx        # https://example.com/docs/
+    - index.tsx          # https://example.com/
 ```
 ## Sample Component
 

@@ -13,7 +13,7 @@ Assume this file layout.
   - routes/
     - product/
       - [skuId]/
-        - details.js     # http://server/product/1234/details
+        - details.js     # https://example.com/product/1234/details
 ```
 
 If all we need to do is set the title of the page, we can do it in the `head` (and optional `meta`, `links` and `styles`) export of the component like so:

@@ -12,11 +12,11 @@ Qwik City defines the convention that layouts start with `_layout`. That's why t
   - routes/
     - _layout.tsx         # Default layout implementation
     - _layout-narrow.tsx  # Default named layout implementation
-    - home.tsx            # http://server/home (Layout used: _layout.tsx)
-    - contact@narrow.tsx  # http://server/contact (Layout used: _layout-narrow.tsx)
+    - home.tsx            # https://example.com/home (Layout used: _layout.tsx)
+    - contact@narrow.tsx  # https://example.com/contact (Layout used: _layout-narrow.tsx)
 ```
 
-- `http://server/home`
+- `https://example.com/home`
   ```
   +--------------------------------------------------+
   |       src/routes/_layout.tsx                     |
@@ -27,7 +27,7 @@ Qwik City defines the convention that layouts start with `_layout`. That's why t
   |                                                  |
   +--------------------------------------------------+
   ```
-- `http://server/contact`
+- `https://example.com/contact`
   ```
   +--------------------------------------------------+
   |       src/routes/_layout-narrow.tsx              |

@@ -16,7 +16,7 @@ We can define the above with these files.
     - _layout.tsx            # Parent layout
     - home/
       - _layout.tsx          # Child layout
-      - overview.tsx         # http://server/home/overview
+      - overview.tsx         # https://example.com/home/overview
 ```
 
 In the above example, there are two layouts that apply themselves to the output. 

@@ -35,8 +35,8 @@ We can define the above with these files.
     - Menu.tsx               # Menu component implementation
   - routes/
     - _layout.tsx            # Layout implementation using: <Header>, <Footer>, and <Menu>
-    - home.tsx               # http://server/home
-    - about.tsx              # http://server/about
+    - home.tsx               # https://example.com/home
+    - about.tsx              # https://example.com/about
 ```
 
 Note: Alternatively `src/_layout.tsx` can be `src/_layout/index.tsx` for the same outcome.

@@ -12,7 +12,7 @@ Sometimes the route component gets too complex, and placing the whole implementa
   - routes/
     - index.tsx                 # https://example.com/
     - some/           
-      - index.tsx                # https://server/some
+      - index.tsx                # https://example.com/some
       - path/
         - index.tsx              # https://example.com/some/path
         - _other_component.tsx   # this file is ignored and not mapped to any URL because of the leading underscore.

@@ -50,7 +50,7 @@ The `@qwik-city-plan` import is synthetic, meaning that it is created as part of
 
 Qwik City also supports:
 - [`index.tsx`](/qwikcity/routing/default-index)
-- [Slugs](/qwikcity/routing/slugs)
+- [Route Parameters](/qwikcity/routing/route-parameters)
 - [Pathless URLs](/qwikcity/routing/pathless)
 - [Nested layouts](/qwikcity/layout/overview)
 - [Menus](/qwikcity/content/menu)

@@ -11,7 +11,7 @@ Imagine that you have a page with the following URLs where `[skuId]` can be any
 - `https://example.com/sku/[skuId]` 
   - Will match: `https://example.com/sku/1234` 
   - Will match: `https://example.com/sku/xyz-567`
-- `http://example.com/sku/[skuId]/details` 
+- `https://example.com/sku/[skuId]/details` 
   - Will match: `https://example.com/sku/1234/details`
 
 ```

@@ -7,7 +7,7 @@ title: Qwik City - Static Assets
 
 Use `/public` folder to store all static assets such as images, fonts, etc.
 
-All static assets are served from your server's root (`/` as in `http://server/`) folder and superimposed under your routes (routes have priority.)
+All static assets are served from your server's root (`/` as in `https://example.com/`) folder and superimposed under your routes (routes have priority.)
 
 ```
 - public/
-Original file line number
+Diff line change
@@ Expand Up / @@ -7,7 +7,7 @@ title: Qwik City - Static Assets @@
     Use `/public` folder to store all static assets such as images, fonts, etc.
-    All static assets are served from your server's root (`/` as in `http://server/`) folder and superimposed under your routes (routes have priority.)
+    All static assets are served from your server's root (`/` as in `https://example.com/`) folder and superimposed under your routes (routes have priority.)
     ```
     - public/
@@ Expand Down @@