Jason.json Posts - Answer Overflow

Jason.json

•Created by Jason.json on 1/4/2025 in #support

Solid Start does not load images on load event?

import { Show, createEffect, createSignal } from "solid-js";

interface LazyImageProps {
  placeholder?: string;
  class?: string;
  src: string;
  alt: string;
}

export default function LazyImage(props: LazyImageProps) {
  const [loading, setLoading] = createSignal(true);

  createEffect(() => {
    console.log("loading", loading());
  });

  const onLoad = (e: any) => {
    console.log(e);
    setLoading(false);
  };

  return (
    <>
      <Show when={loading() && props.placeholder}>
        <img
          src={props.placeholder}
          class={props.class}
          draggable="false"
          alt="placeholder"
          loading="lazy"
        />
      </Show>
      <img
        onLoad={onLoad}
        class={props.class}
        draggable="false"
        src={props.src}
        alt={props.alt}
        loading="lazy"
      />
    </>
  );
}

import { Show, createEffect, createSignal } from "solid-js";

interface LazyImageProps {
  placeholder?: string;
  class?: string;
  src: string;
  alt: string;
}

export default function LazyImage(props: LazyImageProps) {
  const [loading, setLoading] = createSignal(true);

  createEffect(() => {
    console.log("loading", loading());
  });

  const onLoad = (e: any) => {
    console.log(e);
    setLoading(false);
  };

  return (
    <>
      <Show when={loading() && props.placeholder}>
        <img
          src={props.placeholder}
          class={props.class}
          draggable="false"
          alt="placeholder"
          loading="lazy"
        />
      </Show>
      <img
        onLoad={onLoad}
        class={props.class}
        draggable="false"
        src={props.src}
        alt={props.alt}
        loading="lazy"
      />
    </>
  );
}

Why the load event does not work? I still get true after loading the image.

11 replies

SSolidJS

•Created by Jason.json on 1/3/2025 in #support

Post CSS with Solid Start

I have one question. Does someone know to include Post-CSS in Solid-Start project? I use SCSS and I would like to make the bundles smaller by analyzing the .tsx files. My files use scss like so.

    myfile.tsx
    myflie.tsx.scss

    myfile.tsx
    myflie.tsx.scss

I use .tsx.scss to group them in my IDE. And then I just import them into the .tsx file.

import './myfile.tsx.scss';

import './myfile.tsx.scss';

11 replies

SSolidJS

•Created by Jason.json on 12/26/2024 in #support

Changing baseURL based on production and window.location.href

I have an API calling function that builds URLs like this: ${baseUrl()}/api/[...]. The baseUrl function looks like this:

function baseUrl(): string {
  if (production()) return prodServer;
  return devServer;
}

function baseUrl(): string {
  if (production()) return prodServer;
  return devServer;
}

However, when testing the production build, it uses prodServer, which is my domain, but the API calls fail because the connection is refused from localhost. I tried checking window.location.href to see if it includes devServer or prodServer, but this doesn’t work as expected. Many API calls are created in server-side code where window is undefined. Is there a better way to determine the URL context in such cases?

6 replies

SSolidJS

•Created by Jason.json on 12/25/2024 in #support

Route for error 500

How can I make a route for error 505 in solid start? I made a file [...500].tsx

5 replies

SSolidJS

•Created by Jason.json on 12/18/2024 in #support

Solid Start offline indicator in mobile / desktop app

Hi I am looking to include <OfflineIndicator/> in my app when the user goes offline in mobile / desktop app. Is there any way I can include it on all of my routes or I have to include it myself all of them?

3 replies

SSolidJS

•Created by Jason.json on 12/14/2024 in #support

How to include Gzip compression to Solid Start project?

Hi, I was using google lighthouse to check the page performance and it suggests to me that I should use gzip compression for json api response. Is there any easy way to include it to my app?

20 replies

SSolidJS

•Created by Jason.json on 12/7/2024 in #support

Server Side Fetching

Hi I want to fetch data from server side and render the title based on it's content like in PHP. I want to execute the fetch request to api from server side because I want to render the page to client when fetch is ready. Do someone could provide an example script?

    export default function MyFetch() { 
          // data fetching 
          return <Title>{data.title}</Title>
     }

    export default function MyFetch() { 
          // data fetching 
          return <Title>{data.title}</Title>
     }

62 replies

SSolidJS

•Created by Jason.json on 12/7/2024 in #support

ServerSide fetching for metatags

Hi I am looking for server side fetching for open graph metatags. I want to execute fetch on server side and then render page with title and metatags filled in. If returned result from fetch has length of 0 redirect user to /404 page. My meta tags setup

  const [texturepack] = useAPIFetch(`texturepacks?id=${id}`);
   return (
    <>
      <Suspense>
        <Show when={texturepack()}>
          <Title>{texturepack()?.[0]?.title || "Texture Pack"}</Title>

          <MetaPageProvider
            title={`Lisia Nora.pl - See texturepack ${
              texturepack()?.[0]?.title
            }! 🦊`}
            url={`lisia-nora.pl/textures?id=${id}`}
            description={texturepack()?.[0]?.description || "No description"}
            image_url={texturepack()?.[0]?.thumbnail || ""}
          />
        </Show>
      </Suspense>
    </>
   );

  const [texturepack] = useAPIFetch(`texturepacks?id=${id}`);
   return (
    <>
      <Suspense>
        <Show when={texturepack()}>
          <Title>{texturepack()?.[0]?.title || "Texture Pack"}</Title>

          <MetaPageProvider
            title={`Lisia Nora.pl - See texturepack ${
              texturepack()?.[0]?.title
            }! 🦊`}
            url={`lisia-nora.pl/textures?id=${id}`}
            description={texturepack()?.[0]?.description || "No description"}
            image_url={texturepack()?.[0]?.thumbnail || ""}
          />
        </Show>
      </Suspense>
    </>
   );

It works but does show nothing when the link is sent. Source code of MetaPageProvider

import { MetaProvider, Meta, Link } from "@solidjs/meta";

interface Props {
  description: string;
  image_url: string;
  title: string;
  url: string;
}

export default function MetaPageProvider({
  description,
  image_url,
  title,
  url,
}: Props) {
  image_url = `https://lisia-nora.pl/${image_url}`;

  return (
    <MetaProvider>
      <Meta property="og:description" content={description} />
      <Meta property="og:locale" content="pl_PL" />
      <Meta property="og:url" content={url} />
      <Meta property="og:title" content={title} />
      <Link rel="image_src" href={image_url} />
      <Meta property="og:type" content="webapp" />
      <Meta property="og:image" content={image_url} />
    </MetaProvider>
  );
}

import { MetaProvider, Meta, Link } from "@solidjs/meta";

interface Props {
  description: string;
  image_url: string;
  title: string;
  url: string;
}

export default function MetaPageProvider({
  description,
  image_url,
  title,
  url,
}: Props) {
  image_url = `https://lisia-nora.pl/${image_url}`;

  return (
    <MetaProvider>
      <Meta property="og:description" content={description} />
      <Meta property="og:locale" content="pl_PL" />
      <Meta property="og:url" content={url} />
      <Meta property="og:title" content={title} />
      <Link rel="image_src" href={image_url} />
      <Meta property="og:type" content="webapp" />
      <Meta property="og:image" content={image_url} />
    </MetaProvider>
  );
}

30 replies

SSolidJS

•Created by Jason.json on 12/5/2024 in #support

Google AdSense with SolidStart

Hi I want to include google adsense in my solid start website. I think I've done everything what I had to do. My problem is that ads does not display on my page. There are just empty spaces for them to load. 😦 I just hit my adulthood and tring to get extra money. If someone is more experienced with google adsense I would love to ask him for little help.

1 replies

SSolidJS

•Created by Jason.json on 12/5/2024 in #support

Project Structure and Build Output Configuration

Hi there, I need assistance with configuring my project to build the output folder one directory above the current level. This setup is necessary due to hosting requirements. Specifically, my hosting provider mandates that the main JavaScript file (app.js) and package.json be located in the same directory, with the type field in package.json set to commonjs. Here’s the structure I aim to achieve:

public_nodejs/  <- Main folder used by hosting to find app.js file
│
├── app.js      <- Main file pointing to .output directory
├── package.json
├── my_app_dir/ <- Source files
└── .output/    <- Build output

public_nodejs/  <- Main folder used by hosting to find app.js file
│
├── app.js      <- Main file pointing to .output directory
├── package.json
├── my_app_dir/ <- Source files
└── .output/    <- Build output

I want to maintain a package.json with type: "module" for building my project and then eject it one folder above. I am using pnpm for package management. My current app configuration looks like this:

import { defineConfig } from "@solidjs/start/config";

export default defineConfig({
  ssr: true,
  server: {
    preset: "node-server",
    externals: {
      traceOptions: {
        base: process.cwd(),
      },
    },
  },
});

import { defineConfig } from "@solidjs/start/config";

export default defineConfig({
  ssr: true,
  server: {
    preset: "node-server",
    externals: {
      traceOptions: {
        base: process.cwd(),
      },
    },
  },
});

Could you please help me adjust the configuration to achieve this setup?

5 replies

Gaming

Programming