CONTRIBUTING.md

@@ -71,6 +71,12 @@ If you want to use Docker:
 - Install the [Dev Containers](https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.remote-containers) extension in your VSCode.
 - Once installed you will be prompted to 'Reopen the folder to develop in a container [learn more](https://code.visualstudio.com/docs/devcontainers/containers) or Clone repository in Docker volume for [better I/O performance](https://code.visualstudio.com/docs/devcontainers/containers#_quick-start-open-a-git-repository-or-github-pr-in-an-isolated-container-volume)'. If you're not prompted, you can run the `Dev Containers: Open Folder in Container` command from the [VSCode Command Palette](https://code.visualstudio.com/docs/getstarted/userinterface#_command-palette).
 
+Alternatively you can use [devcontainers/cli](https://github.com/devcontainers/cli):
+
+- Install devcontainers following their documentation.
+- In your terminal navigate to the Qwik's project root directory.
+- Then run `devcontainer up --workspace-folder .`. This command will start a Docker container with all required environment dependencies.
+
 If you want to use Nix:
 
 - Install [Nix](https://nixos.org/download.html) on your machine and enable flakes. The [DetSys installer](https://github.com/DeterminateSystems/nix-installer) makes that easy.
@@ -303,7 +309,7 @@ To update all dependencies, run:
 pnpm deps
 ```
 
-This will show an interactive UI to update all dependencies. Be careful about performing major updates, especially for the docs site, since not all functionalitty has test coverage there.
+This will show an interactive UI to update all dependencies. Be careful about performing major updates, especially for the docs site, since not all functionality has test coverage there.
 
 ## Starter CLI `create-qwik`
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "qwik-monorepo",
-  "version": "1.5.4",
+  "version": "1.5.5",
   "comments": {
     "01": "devDependencies includes reference to @builder.io/qwik: workspace: *. This is needed or e2e tests will fail",
     "02": "  It would be nice to be able to remove this dependency and fix the test.",
@@ -136,7 +136,7 @@
     "node": ">=16.8.0 <18.0.0 || >=18.11",
     "npm": "please-use-pnpm",
     "yarn": "please-use-pnpm",
-    "pnpm": ">=8.6.12"
+    "pnpm": ">=9.0.5"
   },
   "packageManager": "pnpm@9.0.5",
   "pnpm": {

packages/create-qwik/package.json

@@ -1,7 +1,7 @@
 {
   "name": "create-qwik",
   "description": "Interactive CLI for create Qwik projects and adding features.",
-  "version": "1.5.4",
+  "version": "1.5.5",
   "author": "Builder.io Team",
   "bin": "./create-qwik.cjs",
   "bugs": "https://github.com/QwikDev/qwik/issues",

packages/docs/scripts/pages.json

@@ -187,5 +187,9 @@
   {
     "href": "https://numeia.com",
     "tags": "saas, marketing, ai"
+  },
+  {
+    "href": "https://qit.tools/",
+    "tags": "online,tools,converters"
   }
 ]

packages/docs/src/components/code-block/code-block.tsx

@@ -1,4 +1,4 @@
-import { component$, useStyles$ } from '@builder.io/qwik';
+import { component$, useStyles$, type QRL, useVisibleTask$, useSignal } from '@builder.io/qwik';
 import prismjs from 'prismjs';
 // Set to global so that prism language plugins can find it.
 const _global =
@@ -12,14 +12,37 @@ import 'prismjs/components/prism-jsx'; // needs PRISM global
 import 'prismjs/components/prism-tsx'; // needs PRISM global
 
 import styles from './code-block.css?inline';
+import { CopyCode } from '../copy-code/copy-code-block';
 interface CodeBlockProps {
   path?: string;
   language?: 'markup' | 'css' | 'javascript' | 'json' | 'jsx' | 'tsx';
   code: string;
+  pathInView$?: QRL<(name: string) => void>;
+  observerRootId?: string;
 }
 
 export const CodeBlock = component$((props: CodeBlockProps) => {
+  const listSig = useSignal<Element>();
   useStyles$(styles);
+
+  useVisibleTask$(async () => {
+    const { pathInView$, path, observerRootId } = props;
+    if (pathInView$ && path && listSig.value !== undefined) {
+      const el = listSig.value;
+      const intersectionObserver = new IntersectionObserver(
+        ([{ isIntersecting }]) => isIntersecting && pathInView$(path),
+        {
+          //to avoid any edge case
+          root: observerRootId ? document.getElementById(observerRootId) : null,
+        }
+      );
+      intersectionObserver.observe(el);
+      return () => {
+        intersectionObserver.unobserve(el);
+      };
+    }
+  });
+
   let language = props.language;
   if (!language && props.path && props.code) {
     const ext = props.path.split('.').pop();
@@ -37,9 +60,12 @@ export const CodeBlock = component$((props: CodeBlockProps) => {
     const highlighted = prismjs.highlight(props.code, prismjs.languages[language], language);
     const className = `language-${language}`;
     return (
-      <pre class={className}>
-        <code class={className} dangerouslySetInnerHTML={highlighted} />
-      </pre>
+      <div class="relative">
+        <pre class={className} ref={listSig}>
+          <code class={className} dangerouslySetInnerHTML={highlighted} />
+        </pre>
+        <CopyCode code={props.code} />
+      </div>
     );
   }
   return null;

packages/docs/src/components/copy-code/copy-code-block.tsx

@@ -0,0 +1,64 @@
+import { component$, useSignal, useStyles$ } from '@builder.io/qwik';
+import { CopyCode as CopyCodeIcon } from '../svgs/copy-code-icon';
+import styles from './copy-code.css?inline';
+
+const Check = component$(({ height = 12, width = 12 }: { height?: number; width?: number }) => {
+  useStyles$(styles);
+
+  return (
+    <svg
+      class="w-3.5 h-3.5 text-white "
+      height={height}
+      width={width}
+      aria-hidden="true"
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      viewBox="0 0 16 12"
+    >
+      <path
+        stroke="currentColor"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        stroke-width="2"
+        d="M1 5.917 5.724 10.5 15 1.5"
+      />
+    </svg>
+  );
+});
+export const CopyCode = component$(({ code }: { code: string }) => {
+  const copied = useSignal(false);
+  return (
+    <button
+      preventdefault:click
+      onClick$={async (e) => {
+        copied.value = !copied.value;
+        if (copied.value) {
+          setTimeout(() => (copied.value = false), 1500);
+        }
+        if (navigator.clipboard) {
+          await navigator.clipboard.writeText(code);
+        }
+      }}
+      class="absolute text-white right-2 top-2 shadow-2xl bg-[#1e1e1e] z-10"
+    >
+      <span
+        class={{
+          animate: true,
+          visible: copied.value,
+          hidden: !copied.value,
+        }}
+      >
+        <Check />
+      </span>
+      <span
+        class={{
+          animate: true,
+          visible: !copied.value,
+          hidden: copied.value,
+        }}
+      >
+        <CopyCodeIcon />
+      </span>
+    </button>
+  );
+});

packages/docs/src/components/copy-code/copy-code.css

@@ -0,0 +1,14 @@
+.animate {
+  opacity: 1;
+  animation: check-in 1 1s;
+}
+
+@keyframes check-in {
+  0% {
+    opacity: 0;
+  }
+
+  100% {
+    opacity: 1;
+  }
+}

packages/docs/src/components/svgs/copy-code-icon.tsx

@@ -0,0 +1,23 @@
+interface CopyIconProps {
+  width?: number;
+  height?: number;
+}
+
+export const CopyCode = ({ height = 18, width = 18 }: CopyIconProps) => {
+  return (
+    <svg
+      width={width}
+      height={height}
+      viewBox="0 0 24 24"
+      stroke-width="2"
+      stroke="currentColor"
+      fill="none"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    >
+      {' '}
+      <path stroke="none" d="M0 0h24v24H0z" /> <rect x="8" y="8" width="12" height="12" rx="2" />
+      <path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2" />
+    </svg>
+  );
+};

packages/docs/src/repl/repl-output-modules.tsx

@@ -1,45 +1,81 @@
+import { $, useStore, component$ } from '@builder.io/qwik';
 import { CodeBlock } from '../components/code-block/code-block';
-import type { ReplModuleOutput } from './types';
+import type { PathInView, ReplModuleOutput } from './types';
+const FILE_MODULE_DIV_ID = 'file-modules-client-buisness';
 
-export const ReplOutputModules = ({ outputs, headerText }: ReplOutputModulesProps) => {
+export const ReplOutputModules = component$(({ outputs, headerText }: ReplOutputModulesProps) => {
+  const store = useStore<PathInView>({
+    selectedPath: outputs.length ? outputs[0].path : '',
+  });
+  const pathInView$ = $((path: string) => {
+    store.selectedPath = path;
+  });
   return (
     <div class="output-result output-modules">
       <div class="file-tree">
         <div class="file-tree-header">{outputs.length > 0 ? headerText : ''}</div>
         <div class="file-tree-items">
           {outputs.map((o, i) => (
-            <a
-              href="#"
-              onClick$={() => {
-                const fileItem = document.querySelector(`[data-file-item="${i}"]`);
-                if (fileItem) {
-                  fileItem.scrollIntoView();
-                }
-              }}
-              preventdefault:click
-              key={o.path}
-            >
-              {o.path}
-            </a>
+            <div key={o.path}>
+              <a
+                href="#"
+                onClick$={() => {
+                  const fileItem = document.querySelector(`[data-file-item="${i}"]`);
+                  if (fileItem) {
+                    fileItem.scrollIntoView();
+                  }
+                }}
+                class={{
+                  'in-view': store.selectedPath && store.selectedPath === o.path,
+                  '!hidden': true,
+                  'md:!block': true,
+                }}
+                preventdefault:click
+                key={o.path}
+              >
+                {o.path}
+              </a>
+              <div class="block md:hidden">
+                <div class="file-item" data-file-item={i} key={o.path}>
+                  <div class="file-info">
+                    <span>{o.path}</span>
+                    {o.size ? <span class="file-size">({o.size})</span> : null}
+                  </div>
+                  <div class="file-text">
+                    <CodeBlock
+                      pathInView$={pathInView$}
+                      path={o.path}
+                      code={o.code}
+                      observerRootId={FILE_MODULE_DIV_ID}
+                    />
+                  </div>
+                </div>
+              </div>
+            </div>
           ))}
         </div>
       </div>
-      <div class="file-modules">
+      <div class="file-modules" id={FILE_MODULE_DIV_ID}>
         {outputs.map((o, i) => (
           <div class="file-item" data-file-item={i} key={o.path}>
             <div class="file-info">
               <span>{o.path}</span>
               {o.size ? <span class="file-size">({o.size})</span> : null}
             </div>
             <div class="file-text">
-              <CodeBlock path={o.path} code={o.code} />
+              <CodeBlock
+                pathInView$={pathInView$}
+                path={o.path}
+                code={o.code}
+                observerRootId={FILE_MODULE_DIV_ID}
+              />
             </div>
           </div>
         ))}
       </div>
     </div>
   );
-};
+});
 
 interface ReplOutputModulesProps {
   headerText: string;

packages/docs/src/repl/repl-output-panel.tsx

@@ -1,11 +1,12 @@
+import { component$ } from '@builder.io/qwik';
 import { CodeBlock } from '../components/code-block/code-block';
 import { ReplOutputModules } from './repl-output-modules';
 import { ReplOutputSymbols } from './repl-output-symbols';
 import { ReplTabButton } from './repl-tab-button';
 import { ReplTabButtons } from './repl-tab-buttons';
 import type { ReplAppInput, ReplStore } from './types';
 
-export const ReplOutputPanel = ({ input, store }: ReplOutputPanelProps) => {
+export const ReplOutputPanel = component$(({ input, store }: ReplOutputPanelProps) => {
   const diagnosticsLen = store.diagnostics.length + store.monacoDiagnostics.length;
 
   return (
@@ -131,7 +132,7 @@ export const ReplOutputPanel = ({ input, store }: ReplOutputPanelProps) => {
       </div>
     </div>
   );
-};
+});
 
 interface ReplOutputPanelProps {
   input: ReplAppInput;