Jason.json Comments - Answer Overflow

Jason.json

Posts Comments

SSolidJS

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

A question about server side rendering an <a> tag based on requestEvent.

Have a nice day/night! 😃

14 replies

SSolidJS

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

A question about server side rendering an <a> tag based on requestEvent.

But thank you 🫶

14 replies

SSolidJS

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

A question about server side rendering an <a> tag based on requestEvent.

Thanks i figured that out

14 replies

SSolidJS

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

A question about server side rendering an <a> tag based on requestEvent.

My website wich i am trying to fix: https://lisia-nora.pl/en

14 replies

SSolidJS

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

A question about server side rendering an <a> tag based on requestEvent.

😭

14 replies

SSolidJS

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

A question about server side rendering an <a> tag based on requestEvent.

I used createResource but it does not seems to work.

14 replies

SSolidJS

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

A question about server side rendering an <a> tag based on requestEvent.

I would be blad for help 🙂

14 replies

SSolidJS

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

A question about server side rendering an <a> tag based on requestEvent.

Cuz google SEO does not see the languages variants and it does not index it very well...

14 replies

SSolidJS

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

A question about server side rendering an <a> tag based on requestEvent.

Why i want to do this?

14 replies

SSolidJS

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

A question about server side rendering an <a> tag based on requestEvent.

Source code of LANGUAGES constant

export const LANGUAGES: Record<string, { name: string; flag: JSX.Element }> = {
pl: {
    name: "Polski",
    flag: (
      <svg
        xmlns="http://www.w3.org/2000/svg"
        width="32"
        height="32"
        viewBox="0 0 32 32"
      >
        <path
          d="M1,24c0,2.209,1.791,4,4,4H27c2.209,0,4-1.791,4-4V15H1v9Z"
          fill="#cb2e40"
        ></path>
        <path
          d="M27,4H5c-2.209,0-4,1.791-4,4v8H31V8c0-2.209-1.791-4-4-4Z"
          fill="#fff"
        ></path>
        <path
          d="M5,28H27c2.209,0,4-1.791,4-4V8c0-2.209-1.791-4-4-4H5c-2.209,0-4,1.791-4,4V24c0,2.209,1.791,4,4,4ZM2,8c0-1.654,1.346-3,3-3H27c1.654,0,3,1.346,3,3V24c0,1.654-1.346,3-3,3H5c-1.654,0-3-1.346-3-3V8Z"
          opacity=".15"
        ></path>
        <path
          d="M27,5H5c-1.657,0-3,1.343-3,3v1c0-1.657,1.343-3,3-3H27c1.657,0,3,1.343,3,3v-1c0-1.657-1.343-3-3-3Z"
          fill="#fff"
          opacity=".2"
        ></path>
      </svg>
    ),
  },
 //[rest of the langs...]
}

export const LANGUAGES: Record<string, { name: string; flag: JSX.Element }> = {
pl: {
    name: "Polski",
    flag: (
      <svg
        xmlns="http://www.w3.org/2000/svg"
        width="32"
        height="32"
        viewBox="0 0 32 32"
      >
        <path
          d="M1,24c0,2.209,1.791,4,4,4H27c2.209,0,4-1.791,4-4V15H1v9Z"
          fill="#cb2e40"
        ></path>
        <path
          d="M27,4H5c-2.209,0-4,1.791-4,4v8H31V8c0-2.209-1.791-4-4-4Z"
          fill="#fff"
        ></path>
        <path
          d="M5,28H27c2.209,0,4-1.791,4-4V8c0-2.209-1.791-4-4-4H5c-2.209,0-4,1.791-4,4V24c0,2.209,1.791,4,4,4ZM2,8c0-1.654,1.346-3,3-3H27c1.654,0,3,1.346,3,3V24c0,1.654-1.346,3-3,3H5c-1.654,0-3-1.346-3-3V8Z"
          opacity=".15"
        ></path>
        <path
          d="M27,5H5c-1.657,0-3,1.343-3,3v1c0-1.657,1.343-3,3-3H27c1.657,0,3,1.343,3,3v-1c0-1.657-1.343-3-3-3Z"
          fill="#fff"
          opacity=".2"
        ></path>
      </svg>
    ),
  },
 //[rest of the langs...]
}

14 replies

SSolidJS

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

A question about server side rendering an <a> tag based on requestEvent.

// TSX Template
return (
    <div class="relative">
      <button
        class="bg-gray-800 text-white p-2 rounded flex items-center shadow w-[150px]"
        onClick={() => setIsOpen(!isOpen())}
      >
        <span class="mr-2">{lang.flag}</span>
        <span>{lang.name}</span>
        <svg
          class="w-4 h-4 ml-2"
          fill="none"
          stroke="currentColor"
          viewBox="0 0 24 24"
        >
          <path
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="2"
            d="M19 9l-7 7-7-7"
          ></path>
        </svg>
      </button>
      <Show when={isOpen()}>
        <div class="absolute mt-2 w-full bg-gray-800 rounded shadow-lg z-50">
          <Show when={urls()}>
            <For each={urls()}>
              {(url) => (
                <A
                  href={url.href}
                  class="p-2 hover:bg-gray-700 cursor-pointer flex items-center"
                >
                  <span class="mr-2">{url.flag}</span>
                  <span class="text-white">{url.name}</span>
                </A>
              )}
            </For>
          </Show>
        </div>
      </Show>
    </div>
  );

// TSX Template
return (
    <div class="relative">
      <button
        class="bg-gray-800 text-white p-2 rounded flex items-center shadow w-[150px]"
        onClick={() => setIsOpen(!isOpen())}
      >
        <span class="mr-2">{lang.flag}</span>
        <span>{lang.name}</span>
        <svg
          class="w-4 h-4 ml-2"
          fill="none"
          stroke="currentColor"
          viewBox="0 0 24 24"
        >
          <path
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="2"
            d="M19 9l-7 7-7-7"
          ></path>
        </svg>
      </button>
      <Show when={isOpen()}>
        <div class="absolute mt-2 w-full bg-gray-800 rounded shadow-lg z-50">
          <Show when={urls()}>
            <For each={urls()}>
              {(url) => (
                <A
                  href={url.href}
                  class="p-2 hover:bg-gray-700 cursor-pointer flex items-center"
                >
                  <span class="mr-2">{url.flag}</span>
                  <span class="text-white">{url.name}</span>
                </A>
              )}
            </For>
          </Show>
        </div>
      </Show>
    </div>
  );

14 replies

SSolidJS

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

A question about server side rendering an <a> tag based on requestEvent.

My code implementation

import { createSignal, For, Show, onMount, createResource } from "solid-js";
import { A, useNavigate } from "@solidjs/router";
import { LANGUAGES } from "~/lib/config";
import { getRequestEvent, isServer } from "solid-js/web";

interface CountrySelectorProps {
  lang: string;
}

export default function CountrySelector(props: CountrySelectorProps) {
  const navigate = useNavigate();
  const [isOpen, setIsOpen] = createSignal(false);

  const lang = LANGUAGES[props.lang];

  const [urls] = createResource(
    () => {
      const event = getRequestEvent();
      const requestUrl = event?.request?.url;

      return Object.entries(LANGUAGES).map(([key, lang]) => {
        return {
          shortName: key,
          href: requestUrl!.replace(props.lang, key),
          flag: lang.flag,
          name: lang.name,
        };
      });
    },
    { deferStream: true }
  );
}

import { createSignal, For, Show, onMount, createResource } from "solid-js";
import { A, useNavigate } from "@solidjs/router";
import { LANGUAGES } from "~/lib/config";
import { getRequestEvent, isServer } from "solid-js/web";

interface CountrySelectorProps {
  lang: string;
}

export default function CountrySelector(props: CountrySelectorProps) {
  const navigate = useNavigate();
  const [isOpen, setIsOpen] = createSignal(false);

  const lang = LANGUAGES[props.lang];

  const [urls] = createResource(
    () => {
      const event = getRequestEvent();
      const requestUrl = event?.request?.url;

      return Object.entries(LANGUAGES).map(([key, lang]) => {
        return {
          shortName: key,
          href: requestUrl!.replace(props.lang, key),
          flag: lang.flag,
          name: lang.name,
        };
      });
    },
    { deferStream: true }
  );
}

14 replies

SSolidJS

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

Nesting server side functions in namespaces or any kind of block of code.

I was thinking about that, but maybe I will just leave it as it is. No need to use more performance overhead abstraction in my opinion. It would work better without it. 👍

10 replies

SSolidJS

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

Nesting server side functions in namespaces or any kind of block of code.

I was just looking for a stucture like partern where I could write cleaner code.

10 replies

SSolidJS

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

Nesting server side functions in namespaces or any kind of block of code.

Or if you preserve them.

10 replies

SSolidJS

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

Nesting server side functions in namespaces or any kind of block of code.

Sure! Thanks for that. Also the enums at runtime compiles to very strange object like thing if you do not use const modifier.

10 replies

SSolidJS

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

Nesting server side functions in namespaces or any kind of block of code.

Thanks! I’m aware that namespaces in JS are objects, which can introduce some performance overhead. However, I wanted to keep everything in db.ts without creating additional files. Either way, I’ll give it a try I had forgotten about import * as alias from 'somewhere'; . I’ll test it and let you know if it works. 👍

10 replies

SSolidJS

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

useContext returns undefined

53 replies

SSolidJS

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

useContext returns undefined

53 replies

SSolidJS

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

useContext returns undefined

53 replies

Gaming

Programming