はじめに

このブログは Astro と UnoCSS と sparkio で作られています。記事は Markdoc で書いています。

Code Block

import { defineElement, useState, useHost, useEffect, css } from "@sparkio/core"

const MyCounter = defineElement(
  {
    tag: "my-counter",
    props: {
      initial: { type: Number, value: () => 0 },
    },
    styles: css`
      :host { display: inline-block; }
      button {
        font-size: 1rem;
        padding: 0.5rem 1rem;
        cursor: pointer;
      }
    `,
  },
  (props) => {
    const [count, setCount] = useState(props.initial)
    const host = useHost()

    useEffect(() => {
      const root = host.current.shadowRoot!
      const handler = () => setCount(count + 1)
      root.addEventListener("click", handler)
      return () => root.removeEventListener("click", handler)
    }, [count])

    return `<button>${count} clicked</button>`
  },
)

export default MyCounter

Alert

Useful information that users should know, even when skimming content.

Helpful advice for doing things better or more easily.

Key information users need to know to achieve their goal.

Urgent info that needs immediate user attention to avoid problems.

Advises about risks or negative outcomes of certain actions.

Sample

はじめに

Code Block

Alert

Assets