tigawanna / pocketbook

Minimal social app with rakkasjs vite ssr, shadcn and pocketbase

RAKKAS + TAILWIND

Rakkas js starter template Packages

• tailwind+shadcn+daisyui for styling shadch add commands will work and put the components in scr/compnents/shadcn/ui buy default this tempalte comes with

  • button
  • dialog
  • alert-dialog
  • avatar
  • card
  • dropdown-menu
  • popover
  • input
  • textarea
  • label
  • checkbox
  • select
    run

  npx shadcn-ui@latest add 

  to add more component

  then run

  npx daisyfy shadcn

  to make it work with the daisyui themes

the theme is persietd using cokies for smooth SSR without hydration errors and FOUC

src/entry-hattip.tsx
      emitToDocumentHead() {
        const cookie_theme = requestContext?.cookie?.theme;
        return `
    <link rel="icon" type="image/svg+xml" href="/site.svg" />
    <script>
      (function() {
        document.documentElement.setAttribute("data-theme", "${cookie_theme}");
      })();
     </script>
     <script>$TQD=Object.create(null);$TQS=data=>Object.assign($TQD,data);</script>
  `;
      },

you can also change the favico/other attributes you want to inject to the ducumnet head there othere places this can be changed is in preload functions

src/routes/layout.tsx

Layout.preload = (ctx: PageContext) => {
  return {
    head: {
      title: "Chez Maison",
      keywords:
        "bills, property managent,tenancy,monthly,billing,invoice",
      description: "intergrated property management app  ",
    },
  };
};

or in the head component read more

to modify/add themes add the in the tailwind config daisyui object , read more

  daisyui: {
    //  3 themes
    themes: [
      {
        light: {
          ...require("daisyui/src/theming/themes")["wireframe"],
          "color-scheme": "light",
          fontFamily: "",
          primary: "#433922",
          secondary: "#34d399",
          accent: "#343232",
          neutral: "#ffe4e6",
          info: "#62c2d5",
          accent: "#966919",
          success: "#25bbac",
          warning: "#c88314",
          error: "#e77982",
          "--rounded-btn": "1.9rem",
          "--tab-border": "2px",
          "--tab-radius": ".5rem",
        },
        dark: {
          ...require("daisyui/src/theming/themes")["wireframe"],
          accent: "#343232",
          fontFamily: "",
          "base-100": "#000000",
          "base-200": "#0D0D0D",
          "base-300": "#1A1919",
          neutral: "#272626",
          "color-scheme": "dark",
          primary: "#433922",
          secondary: "#34d399",
          accent: "#966919",
          info: "#62c2d5",
          success: "#25bbac",
          warning: "#c88314",
          error: "#e77982",
          "--rounded-btn": "1.9rem",
          "--tab-border": "2px",
          "--tab-radius": ".5rem",
        },

      },
    ],


  },

• tanstack/react-query for data fetching

  fetching is done on SSR in the rakksjs hooks

  • entry-client.tsx
  • entry-hattip.tsx

  read more

for server only fetchigg / mutation use useServerSideQuery and useServerSideMutation read more

• @tanem/react-nprogress : for nprogress bar on route change
• pocketbase + typed-pocketbase To generate type , run the command inside the pocketbase directory (same directory in which you run ./pocketbase serve )

npx typed-pocketbase --email [e-mail] --password your_typegen_pasorword -o Database.d.ts

then copy the Database.d.ts