Robin Lindner Posts - Answer Overflow

•Created by Robin Lindner on 6/24/2024 in #pages-help

Headless CMS for Cloudflare+Astro

Hey all, can anybody recommend a headless CMS for use in Astro SSR on Cloudflare? I currently use contentful, but the contentful integration uses under the hood somewhere eval, which is disabled by CF.

1 replies

•Created by Robin Lindner on 4/15/2024 in #support

Discord Invite via DM

5 replies

•Created by Robin Lindner on 4/2/2024 in #pages-help

wrangler preview output is not the same as live

2 replies

•Created by Robin Lindner on 3/31/2024 in #general-help

CDN Performance in Europe

Are there plans improving Cloudflare CDN performance in general (e.g. more PoPs)? Especially in Europe/Germany. For some of my pages I currently use Bunny. Some things are already running on Cloudflare. I also find the handling of Cloudflare much better & the possibilities with Workers, etc. are much better. Nevertheless, the latency of Bunny, Edgio, ... still outperforms...

1 replies

•Created by Robin Lindner on 3/29/2024 in #pages-help

100 rules limit on Astro-generated site

Previously, I ran my Astro website with node under Docker. Since the cluster is getting too expensive for me in the long run, I'm in the process of switching to Cloudflare and have tried to use the Cloudflare adapter for Astro. Apparently the workers have an upper limit for rules (100). A _routes.json with almost 150 exclude rules is created for the static files. Does anyone have a good approach to solving the problem?

30 replies

•Created by Robin Lindner on 3/1/2024 in #help

Structure microservices

Hi, how would you structure a Deno microservice repository with a good developer experience (good debugging, ..., communication using message brokers)? Do you have any example?

3 replies

•Created by Robin Lindner on 12/30/2023 in #support

Build a Drag & Drop Designer with Solid

I have a major project at the moment. It's about building a designer for documents (mostly DIN A4 / US Letter - but also labels). What is the best way to build something like this with SolidJS? With a drag & drop functionality, snapping & co. And some kind of invisible grid, so that I can save the result of the designer at the end and render it in another service, e.g. to PDF or ZPL. How would you proceed with something like this? Have you ever built something like this?

6 replies

CC#

•Created by Robin Lindner on 9/25/2023 in #help

❔ PDF Library for Printing & Rendering?

Does any of you know some .NET PDF-Library, which is able to print against a Windows Printer? Most printers I want to support, do not support PDF directly... Only ZPL, PCL, ...

2 replies

•Created by Robin Lindner on 6/16/2023 in #help

Running deno in distroless image does not work well

Hey, I have the following Dockerfile:

FROM node:lts AS build
WORKDIR /app
COPY .npmrc package.json pnpm-lock.yaml ./
RUN npm install -g pnpm \
    && pnpm fetch --prod
COPY . ./
RUN pnpm install -r --offline --prod \
    && pnpm build

# Run
FROM denoland/deno:distroless-1.34.2
USER deno
COPY --from=build --chown=deno:deno /app/dist/ /app/
WORKDIR /app/server
ENV HOST=0.0.0.0
ENV Port=3000
EXPOSE 3000
HEALTHCHECK --interval=30s --timeout=30s --start-period=5s --retries=3 CMD curl --fail http://localhost:3000 || exit 1 
CMD ["run", "--allow-net", "--allow-read", "--allow-env", "entry.mjs"]

FROM node:lts AS build
WORKDIR /app
COPY .npmrc package.json pnpm-lock.yaml ./
RUN npm install -g pnpm \
    && pnpm fetch --prod
COPY . ./
RUN pnpm install -r --offline --prod \
    && pnpm build

# Run
FROM denoland/deno:distroless-1.34.2
USER deno
COPY --from=build --chown=deno:deno /app/dist/ /app/
WORKDIR /app/server
ENV HOST=0.0.0.0
ENV Port=3000
EXPOSE 3000
HEALTHCHECK --interval=30s --timeout=30s --start-period=5s --retries=3 CMD curl --fail http://localhost:3000 || exit 1 
CMD ["run", "--allow-net", "--allow-read", "--allow-env", "entry.mjs"]

But for some reason I get some error:

$ docker run asciity:0.1.0 -p 3000:3000
docker: Error response from daemon: unable to find user deno: no matching entries in passwd file.

$ docker run asciity:0.1.0 -p 3000:3000
docker: Error response from daemon: unable to find user deno: no matching entries in passwd file.

. Do you have some idea to fix it?

3 replies

•Created by Robin Lindner on 6/11/2023 in #support

useContext returns undefined.

Hey I created a Provider and a context to manage figlet fonts. This provider is just a "singleton"-reference to my FontRegistry. FontProvider + useFonts:

import { createSignal, createContext, useContext, FlowComponent, FlowProps } from "solid-js";
import { FontRegistry } from "../../core/fonts/font-registry";

const FontContext = createContext<FontRegistry>();

export const useFonts = () => useContext(FontContext);
export const FontProvider = (props: FlowProps) => {
    const fontRegistry = new FontRegistry();
    const [fonts, _setFonts] = createSignal<FontRegistry>(fontRegistry);

    return <FontContext.Provider value={fonts()}>
        {props.children}
    </FontContext.Provider>;
}

import { createSignal, createContext, useContext, FlowComponent, FlowProps } from "solid-js";
import { FontRegistry } from "../../core/fonts/font-registry";

const FontContext = createContext<FontRegistry>();

export const useFonts = () => useContext(FontContext);
export const FontProvider = (props: FlowProps) => {
    const fontRegistry = new FontRegistry();
    const [fonts, _setFonts] = createSignal<FontRegistry>(fontRegistry);

    return <FontContext.Provider value={fonts()}>
        {props.children}
    </FontContext.Provider>;
}

Child-Component:

export const TextToAscii = () => {
    const fonts = useFonts(); // -> undefined
    const fontIterable = Array.from(fonts?.fonts ?? []);

    return <div>
        <For each={fontIterable}>
            {(font) => <div>{font.name}</div>}
        </For>
    </div>
};

export const TextToAscii = () => {
    const fonts = useFonts(); // -> undefined
    const fontIterable = Array.from(fonts?.fonts ?? []);

    return <div>
        <For each={fontIterable}>
            {(font) => <div>{font.name}</div>}
        </For>
    </div>
};

For some reason useContext returns undefined. I use Astro for this, but even in client:only mode it does not work. Astro page:

---
import { FontProvider } from "../components/FontProvider/FontProvider";
import { TextToAscii as TextToA } from "../components/TextToAscii/TextToAscii";
---

<html lang="en">
    <head>
        <!-- ... -->
    </head>
    <body>
        <FontProvider client:only>
            <TextToA client:only />
        </FontProvider>
    </body>
</html>

---
import { FontProvider } from "../components/FontProvider/FontProvider";
import { TextToAscii as TextToA } from "../components/TextToAscii/TextToAscii";
---

<html lang="en">
    <head>
        <!-- ... -->
    </head>
    <body>
        <FontProvider client:only>
            <TextToA client:only />
        </FontProvider>
    </body>
</html>

1 replies

•Created by Robin Lindner on 3/4/2023 in #support

Modal Implementation

Has anyone ever written a generic component for a modal? Something lean and not an external UI framework is enough for me. I heard the <portal> component is quite useful for this. Background is that I want/need to implement a small DSGVO modal.

11 replies

CC#

•Created by Robin Lindner on 1/10/2023 in #help

❔ Docker + .NET [open / unresolved]

Hey all, I want to build a docker container which consumes a NuGet Package from a nuget feed behind a proxy. The problem is, it does not work:

10 replies

•Created by Robin Lindner on 1/8/2023 in #support

Passive Event Listeners

How can I mark onWheel as { passive: true }

import "./NewsElements.scss";
import { NewsElement } from "./NewsElement";

export const NewsElements = () => {
    let container: HTMLDivElement;

    const handleWheel = (event: WheelEvent) => {
        event.preventDefault();
        container.scrollLeft += event.deltaY;
    }

    return <div ref={container!} class="chaos-news-elements" onWheel={handleWheel}>
        <div class="chaos-news-elements--scroll-wrapper">
            <NewsElement title="Lorem ipsum" description="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet" />
            <NewsElement title="Lorem ipsum" description="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet" />
            <NewsElement title="Lorem ipsum" description="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet" />
        </div>
    </div>
}

import "./NewsElements.scss";
import { NewsElement } from "./NewsElement";

export const NewsElements = () => {
    let container: HTMLDivElement;

    const handleWheel = (event: WheelEvent) => {
        event.preventDefault();
        container.scrollLeft += event.deltaY;
    }

    return <div ref={container!} class="chaos-news-elements" onWheel={handleWheel}>
        <div class="chaos-news-elements--scroll-wrapper">
            <NewsElement title="Lorem ipsum" description="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet" />
            <NewsElement title="Lorem ipsum" description="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet" />
            <NewsElement title="Lorem ipsum" description="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet" />
        </div>
    </div>
}

2 replies

•Created by Robin Lindner on 1/6/2023 in #support

Modals in SolidJS

Is there some proper way implementing modals in solid? I have a special button component and I want to open a modal on clicking this button. I read something about Portal. Can you help me here :)? What would you do? Best Practice?

4 replies

•Created by Robin Lindner on 12/30/2022 in #support

Theme management with Solid

I would like to have a Dark and Light Mode on my page. For this I use Solid in combination with Astro.

<html> <!-- index.astro -->
  <body>
    <Scaffold client:only>
      <Header client:load />
      <main>
        <slot />
      </main>
      <Footer />
    </Scaffold>
  </body>
</html>

<html> <!-- index.astro -->
  <body>
    <Scaffold client:only>
      <Header client:load />
      <main>
        <slot />
      </main>
      <Footer />
    </Scaffold>
  </body>
</html>

How would you proceed now? My current status is that I have created a wrapper object "Scaffold" on the Astro page. Scaffold is a solidjs component which looks like this:

// Scaffold.tsx
import { Component, ErrorBoundary, JSX, Suspense } from "solid-js";
import { createThemeSignal } from "../../theme";

export interface ScaffoldProps {
    children?: JSX.Element | JSX.Element[];
}

export const Scaffold: Component<ScaffoldProps> = (props: ScaffoldProps) => {
    const [theme] = createThemeSignal();

    return <div class="scaffold" data-theme={theme()}>
        <Suspense fallback={<div>Loading...</div>}>
            <ErrorBoundary fallback={err => <div>Errored: {err}</div>}>
                {props.children}
            </ErrorBoundary>
        </Suspense>
    </div>
};

// Scaffold.tsx
import { Component, ErrorBoundary, JSX, Suspense } from "solid-js";
import { createThemeSignal } from "../../theme";

export interface ScaffoldProps {
    children?: JSX.Element | JSX.Element[];
}

export const Scaffold: Component<ScaffoldProps> = (props: ScaffoldProps) => {
    const [theme] = createThemeSignal();

    return <div class="scaffold" data-theme={theme()}>
        <Suspense fallback={<div>Loading...</div>}>
            <ErrorBoundary fallback={err => <div>Errored: {err}</div>}>
                {props.children}
            </ErrorBoundary>
        </Suspense>
    </div>
};

There I import a "signal" for the theme:

// theme.ts
import { createStore } from "solid-js/store";

export enum Theme {
    Light = "light",
    Dark = "dark"
}

interface StoreProps {
    theme?: Theme | "system"
}

export function createThemeSignal() {
    const [store, setStore] = createStore({} as StoreProps);
    if (!document.documentElement.hasAttribute("data-theme")) {
        document.documentElement.setAttribute("data-theme", store.theme ?? "system");
    }

    let setTheme = (theme: Theme | "system") => {
        document.documentElement.setAttribute("data-theme", theme);
        setStore({ theme });
    }

    let getTheme = () => {
        return store.theme ?? "system";
    }

    return [getTheme, setTheme] as const;
}

// theme.ts
import { createStore } from "solid-js/store";

export enum Theme {
    Light = "light",
    Dark = "dark"
}

interface StoreProps {
    theme?: Theme | "system"
}

export function createThemeSignal() {
    const [store, setStore] = createStore({} as StoreProps);
    if (!document.documentElement.hasAttribute("data-theme")) {
        document.documentElement.setAttribute("data-theme", store.theme ?? "system");
    }

    let setTheme = (theme: Theme | "system") => {
        document.documentElement.setAttribute("data-theme", theme);
        setStore({ theme });
    }

    let getTheme = () => {
        return store.theme ?? "system";
    }

    return [getTheme, setTheme] as const;
}

15 replies

•Created by Robin Lindner on 12/22/2022 in #support

Load data async

5 replies

CC#

•Created by Robin Lindner on 12/19/2022 in #help

❔ LaTeX CS Syntax Highlighting

Hi all, I need a syntax highlighting for C# in LaTeX using the Listings package. What I find on the internet either does not work or is on a very old C# standard. Can you help me peepoCoffeeChristmas

4 replies

•Created by Robin Lindner on 10/8/2022 in #help

Static compilation of deno modules

Is there a way to statically compile libraries into the .js bundle instead of dynamically retrieving them from deno.land. The point is that I would like to test the Boa engine in the Deno environment and so the libraries are interfering. Of course the Deno internals have to be implemented afterwards. So that, for example, from the following code:

import { fetch } from "https://deno.land/x/[email protected]/mod.ts";

import { fetch } from "https://deno.land/x/[email protected]/mod.ts";

becomes: the compiled code of https://github.com/lucacasonato/deno_local_file_fetch/blob/main/mod.ts something like:

async function fetch(
  input: string | Request | URL,
  init?: RequestInit,
): Promise<Response> {
  // impl
}

async function fetch(
  input: string | Request | URL,
  init?: RequestInit,
): Promise<Response> {
  // impl
}

5 replies