PatrickJS

 <div
  class={`flex aspect-square w-full grow flex-col items-center justify-center rounded-3xl ${
    props.useBorder ? 'border-4 border-gray-200' : ''
  } p-5 max-md:mt-10 max-md:max-w-full`}
>
  <Lottie
    path={props.lottie}
    loop={props.loop}
    speed={props.speed}
  />

PatrickJS

import { component$, sync$, Slot } from "@builder.io/qwik";
import { twMerge } from "tailwind-merge";

// save it's Tailwind
export const LoadingSpinner = () => (
  <div class="absolute bottom-[2px] left-[2px] right-[2px] top-[2px] flex items-center justify-center rounded-3xl  backdrop-blur-[1px]">
    <svg
      aria-hidden="true"
      class="h-8 w-8 animate-spin fill-blue-600 text-gray-200 dark:text-gray-600"
      viewBox="0 0 100 101"

PatrickJS

# 1.install gource using HomeBrew
$ brew install gource

# 2.install avconv
git clone git://git.libav.org/libav.git
cd libav 
# it will take 3-5 minutes to complie, be patient.
./configure --disable-yasm
make && make install 

PatrickJS

import { component$, sync$ } from "@builder.io/qwik";

export const RefreshButton = component$(({loading, onClick$, ...props}: any) => {
  const loading$ = sync$((_e: Event, target: HTMLButtonElement) => {
    const span = target.querySelector("span");
    target.disabled = span!.hidden;
    span!.hidden = !span!.hidden;
  });
  let clickListener = {};
  if (onClick$) {

PatrickJS

import { component$, type Signal, type JSXOutput } from "@builder.io/qwik";

export function Show(props: {
  when: boolean;
  "bind:when": Signal<boolean | undefined>;
  children?: JSXOutput;
  else?: JSXOutput;
}) {
  if (props["bind:when"] !== undefined) {
    return props["bind:when"].value ? props.children : props.else;

PatrickJS

<BlogIndex> <-- readDir
  <RefreshButton />
  <Toggle>
    <ArticlePreview filename="something.mdx"> <-- read file
      first 50 chars
    </ArticlePreview>
  </Toggle>

  <Toggle>
    <ArticlePreview filename="something.mdx"> <-- read file

PatrickJS

import {
  Slot,
  component$,
  createContextId,
  useContextProvider,
  useSignal,
  useStore,
  type Signal,
} from '@builder.io/qwik';

PatrickJS

import { component$, useVisibleTask$, useStore, useSignal, noSerialize } from '@builder.io/qwik';
import lottie from 'lottie-web';
import { Options } from './types';

export interface OptionsProps {
  options: Options;
}

export const QwikLottie = component$(({ options }: OptionsProps) => {
  const store = useStore({

PatrickJS

let data = Array.from({ length: 10 }, (_, i) => `item${i + 1}`);
let packageNameCounter = 0;

// Function to group array elements into packages
function groupArrayElements(list, groupSize) {
  // Base case: if the list is small enough, return it as a single package
  if (list.length <= groupSize) {
    return [{
      packageName: 'Pkg' + packageNameCounter++,
      items: list

PatrickJS

{
  "name": "everything",
  "version": "2.0.0",
  "description": "npm install undefined",
  "main": "index.js",
  "contributors": [
    "PatrickJS <github@patrickjs.com>",
    "uncenter <hi@uncenter.dev>"
  ],
  "keywords": [