tannerr_dev Posts - Answer Overflow

tannerr_dev

•Created by tannerr_dev on 1/28/2025 in #help

TSX layout / templating question

- is there a way to link a static style sheet from the server side tsx components?? i've been trying, searching and proompting, what am i missing... - im using server side tsx to render html and i want to link a style sheet instead of using the jsx css helper, can i just link a stylesheet like normally? main.tsx

import { Hono } from 'hono'
import { html, raw } from 'hono/html'
import { jsx} from 'hono/jsx'
import { Layout } from './layout.tsx'
import { serveStatic } from 'hono/deno'

const app = new Hono()

app.use('/static/*', serveStatic({ root: './' }))

app.get('/', (c) => {
  return c.html(
    <Layout title='tannerr.dev'>
      <h1>Welcome to tannerr.dev</h1>
      <form action="/entry" method="POST">
        <fieldset>
          <legend>This is a web form</legend>
          <label for="name">Enter your name: </label>
          <input type="text" name="name" id="name" required autofocus/>
          <button>Submit</button>
        </fieldset>
      </form>
    </Layout>
  )
})

Deno.serve(app.fetch)

import { Hono } from 'hono'
import { html, raw } from 'hono/html'
import { jsx} from 'hono/jsx'
import { Layout } from './layout.tsx'
import { serveStatic } from 'hono/deno'

const app = new Hono()

app.use('/static/*', serveStatic({ root: './' }))

app.get('/', (c) => {
  return c.html(
    <Layout title='tannerr.dev'>
      <h1>Welcome to tannerr.dev</h1>
      <form action="/entry" method="POST">
        <fieldset>
          <legend>This is a web form</legend>
          <label for="name">Enter your name: </label>
          <input type="text" name="name" id="name" required autofocus/>
          <button>Submit</button>
        </fieldset>
      </form>
    </Layout>
  )
})

Deno.serve(app.fetch)

layout.tsx

export const Layout = (props: { children: any, title?: string }) => (
  <html>
    <head>
      <title>{props.title || 'My App'}</title>
      <link href="./public/styles.css" rel="stylesheet">
    </head>
    <body>
      <nav>
        <a href="/">Home</a>
        <a href="/users">Users</a>
      </nav>
      {props.children}
    </body>
  </html>
)

export const Layout = (props: { children: any, title?: string }) => (
  <html>
    <head>
      <title>{props.title || 'My App'}</title>
      <link href="./public/styles.css" rel="stylesheet">
    </head>
    <body>
      <nav>
        <a href="/">Home</a>
        <a href="/users">Users</a>
      </nav>
      {props.children}
    </body>
  </html>
)

error output

Task start deno run --allow-net main.tsx
error: The module's source code could not be parsed: Unexpected token `html`. Expected jsx identifier at file:///home/kndr/web-dev/dono/dono/layout.tsx:8:4

    <html class={html}>
     ~~~~

Task start deno run --allow-net main.tsx
error: The module's source code could not be parsed: Unexpected token `html`. Expected jsx identifier at file:///home/kndr/web-dev/dono/dono/layout.tsx:8:4

    <html class={html}>
     ~~~~

22 replies

Gaming

Programming