fix: improve getting started

packages/docs/package.json

@@ -20,7 +20,7 @@
   "devDependencies": {
     "@builder.io/partytown": "^0.5.4",
     "@builder.io/qwik": "0.0.20-8",
-    "@builder.io/qwik-city": "0.0.5",
+    "@builder.io/qwik-city": "0.0.6",
     "@cloudflare/kv-asset-handler": "0.2.0",
     "@cloudflare/workers-types": "^3.10.0",
     "autoprefixer": "10.4.7",

packages/docs/pages/docs/concepts/reactivity.mdx

@@ -1,9 +1,3 @@
-
----
-title: Overview
-fetch: https://hackmd.io/@mhevery/SyYrShReq
----
-
 # Reactivity
 
 Reactivity is a key component of Qwik. Reactivity allows Qwik to track which components are subscribed to which state. This information enables Qwik to invalidate only the relevant component on state change, which minimizes the number of components that need to be rerendered. Without reactivity, a state change would require rerendering from the root component, which would force the whole component tree to be eagerly downloaded.

packages/docs/pages/docs/getting-started.mdx

@@ -28,9 +28,7 @@ $ npm init qwik@latest
 
 The CLI will guide you through an interactive menu to set the project-name and select one of the starters:
 
-
-[![asciicast](https://asciinema.org/a/ni3UZdIPYPNPNgaGlXrxcl1Bj.svg)](https://asciinema.org/a/ni3UZdIPYPNPNgaGlXrxcl1Bj)
-
+<script id="asciicast-493911" src="https://asciinema.org/a/493911.js" async></script>
 
 After your new app is created, you will see an output like the following in your terminal:
 

packages/docs/src/components/repl/repl-console.tsx

@@ -1,4 +1,4 @@
-import { component$, Host } from '@builder.io/qwik';
+import { component$, Host, jsx } from '@builder.io/qwik';
 import type { ReplEvent, ReplStore } from './types';
 
 export interface ReplConsoleProps {
@@ -19,6 +19,9 @@ export function ReplLog({ log }: { log: ReplEvent }) {
   if (log.end) {
     elapsed = renderElapsed(log.end - log.start);
   }
+  if (log.scope === 'build') {
+    return null;
+  }
   switch (log.kind) {
     case 'pause':
       return (
@@ -40,7 +43,7 @@ export function ReplLog({ log }: { log: ReplEvent }) {
       return (
         <div class={`log ${log.kind}`}>
           <div class={`platform ${log.scope}`}>{log.scope}</div>
-          <div class="content">{log.message}</div>
+          <div class="content">{renderConsoleMessage(log.message)}</div>
           {elapsed ? <div class="elapsed">{elapsed}</div> : null}
         </div>
       );
@@ -62,6 +65,21 @@ export function ReplLog({ log }: { log: ReplEvent }) {
   return null;
 }
 
+const styleprefix = '%c';
+function renderConsoleMessage(texts: string[]) {
+  const nodes = [];
+  for (let i = 0; i < texts.length; i++) {
+    const msg = texts[i];
+    if (msg.startsWith(styleprefix)) {
+      nodes.push(jsx('span', { style: texts[i + 1], children: msg.slice(styleprefix.length) }));
+      i++;
+    } else {
+      nodes.push(' ' + msg);
+    }
+  }
+  return nodes;
+}
+
 function basename(str: string) {
   const index = str.lastIndexOf('/');
   if (index > 0) {

packages/docs/src/components/repl/worker/ssr-html.ts

@@ -84,7 +84,7 @@ export const ssrHtml = async (
 
   result.events.push({
     kind: 'pause',
-    scope: 'build',
+    scope: 'ssr',
     start,
     end: performance.now(),
     message: [],

packages/qwik-city/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@builder.io/qwik-city",
-  "version": "0.0.5",
+  "version": "0.0.6",
   "description": "Static Site Generator for Qwik",
   "main": "./dist/index.cjs",
   "module": "./dist/index.mjs",
@@ -15,7 +15,7 @@
     "@types/mdx": "2.0.2"
   },
   "devDependencies": {
-    "@builder.io/qwik": "0.0.20-5",
+    "@builder.io/qwik": "0.0.20-8",
     "@microsoft/api-extractor": "7.24.0",
     "@types/github-slugger": "^1.3.0",
     "@types/marked": "^4.0.3",

packages/qwik-city/src/runtime/api.md

@@ -122,7 +122,7 @@ export interface PageHandler {
     // (undocumented)
     source: PageSource;
     // (undocumented)
-    url: URL;
+    url: string;
 }
 
 // @public (undocumented)

packages/qwik-city/src/vite/load-pages.ts

@@ -2,7 +2,7 @@ import fs from 'fs';
 import { extname, join } from 'path';
 import { parseMarkdownFile, parseIndexFile } from './parse';
 import type { PluginContext } from './types';
-import { IGNORE_EXT, IGNORE_NAMES, isMarkdownFile, isReadmeFile } from './utils';
+import { IGNORE_EXT, IGNORE_NAMES, isMarkdownFile, isIndexFile } from './utils';
 
 export async function loadPages(ctx: PluginContext, warn: (msg: string) => void) {
   ctx.pages = [];
@@ -19,7 +19,7 @@ async function loadPagesDir(ctx: PluginContext, dir: string, warn: (msg: string)
         if (!IGNORE_NAMES[itemName]) {
           try {
             const itemPath = join(dir, itemName);
-            if (isReadmeFile(itemName)) {
+            if (isIndexFile(itemName)) {
               const indexContent = await fs.promises.readFile(itemPath, 'utf-8');
               const index = parseIndexFile(ctx, itemPath, indexContent);
               ctx.indexes.push(index);

packages/qwik-city/src/vite/utils.ts

@@ -160,9 +160,9 @@ export function isMarkdownFile(ctx: PluginContext, filePath: string) {
   return ctx.extensions.includes(ext);
 }
 
-export function isReadmeFile(filePath: string) {
+export function isIndexFile(filePath: string) {
   filePath = filePath.toLowerCase();
-  return filePath === 'readme.md' || filePath === 'readme';
+  return filePath === 'index.md' || filePath === 'index';
 }
 
 export function getPagesBuildPath(pathname: string) {

yarn.lock

@@ -409,11 +409,11 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@builder.io/qwik-city@0.0.5, @builder.io/qwik-city@workspace:packages/qwik-city":
+"@builder.io/qwik-city@0.0.6, @builder.io/qwik-city@workspace:packages/qwik-city":
   version: 0.0.0-use.local
   resolution: "@builder.io/qwik-city@workspace:packages/qwik-city"
   dependencies:
-    "@builder.io/qwik": 0.0.20-5
+    "@builder.io/qwik": 0.0.20-8
     "@mdx-js/mdx": ^2.1.1
     "@microsoft/api-extractor": 7.24.0
     "@types/github-slugger": ^1.3.0
@@ -456,13 +456,6 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@builder.io/qwik@npm:0.0.20-5":
-  version: 0.0.20-5
-  resolution: "@builder.io/qwik@npm:0.0.20-5"
-  checksum: 72090bc226a5f380adb81a7f1fa9cde10cc08b0d619c11be6930e66fa73b38136943e9aa62e5e0e5724d5dd83b7c7bde484ab4901423465001fb783944c61439
-  languageName: node
-  linkType: hard
-
 "@cloudflare/kv-asset-handler@npm:0.2.0":
   version: 0.2.0
   resolution: "@cloudflare/kv-asset-handler@npm:0.2.0"
@@ -7628,7 +7621,7 @@ __metadata:
   dependencies:
     "@builder.io/partytown": ^0.5.4
     "@builder.io/qwik": 0.0.20-8
-    "@builder.io/qwik-city": 0.0.5
+    "@builder.io/qwik-city": 0.0.6
     "@cloudflare/kv-asset-handler": 0.2.0
     "@cloudflare/workers-types": ^3.10.0
     autoprefixer: 10.4.7