DOCSEARCHbyAlgolia
Submit Docs

chalk.ist

repository·main·Indexed 23 days ago

https://github.com/idered/chalk.ist

A tool for creating high-quality images of source code featuring customizable backdrops, CSS gradients, and SVG filters. It includes utilities for managing code, markdown, and note blocks, a color conversion system (HSL/RGB to Hex), and integration with Shiki for custom syntax highlighting themes. Supports exporting editor frames as high-resolution PNGs or copying them to the clipboard.

Tokens
4.7K
Snippets
8
Records
31
Agent score
83%

What's inside chalk.ist

  3. Configure Drizzle Kit with defineConfig

    main

    Use the defineConfig function from drizzle-kit to create a configuration object for managing your database schema and migrations. This configuration specifies the database dialect, the location of your schema file, and the output directory for generated migrations.

    import { defineConfig } from "drizzle-kit";

export default defineConfig({
  dialect: "postgresql",
  schema: "./server/database/schema.ts",
  out: "./server/database/migrations",
});

  4. Configure the chalk.ist store schema

    main

    The store object is a reactive state managed via @vueuse/core's useStorage, persisted under the key "chalk-store". It defines the visual configuration for the chalk.ist application, including themes, typography, window styles, and layout settings. Developers can interact with this store to manage application state or extend the configuration schema.

    Key configuration categories include:

    • Typography: fontFamily, fontLigatures, fontSize, and lineHeight.
    • Theme & Colors: colorTheme, useCustomTheme, customTheme (an object containing syntax highlighting colors), and solidBackground.
    • Window Appearance: windowStyle, lightWindowStyle, windowBackgroundOpacity, windowBorderRadius, windowNoise, and windowControls (e.g., WindowControls.MacOutline).
    • Layout & Padding: frameWidth, frameHeight, innerPaddingX, innerPaddingY, paddingX, and paddingY.
    • Visual Effects: backdrop, backdropNoise, reflection, shadowOverlay, showParticles, and showWatermark.
    • Branding: name, username, picture, socialIcon, and watermark.

  6. Manage code blocks with block management functions

    main
    The app/lib/block.ts module provides utility functions for managing different types of content blocks (Code, Markdown, and Notes) within the persistentState. These functions allow for retrieving, adding, moving, and removing blocks from the application state.

  7. Download the editor frame as a PNG

    main
    Use downloadPNG() to capture the element marked with the [data-editor-frame] attribute and trigger a browser download of the resulting image as screenshot.png. The function uses a high scale (4x) for high-resolution output. During the process, the global state.exportState is updated to reflect the lifecycle: PreparingToDownload -> JustDownloaded -> Idle (after 1 second).

  8. Move or remove blocks

    main

    You can manipulate the order or existence of blocks using their unique IDs:

    • moveBlock(blockId, moveBy): Changes the position of a block within the list. moveBy is an integer representing the direction and distance (e.g., 1 to move down, -1 to move up). The move is ignored if the resulting index is out of bounds.
    • removeBlock(blockId): Deletes the block associated with the provided ID from the state.

  9. Retrieve code blocks

    main
    Use getCodeBlocks() to retrieve an array of all blocks that are of type BlockType.Code. Use getCodeBlock(id) to find a specific code block by its unique identifier. If the ID does not exist or the block is not a code block, getCodeBlock returns null.

  10. Convert CSS gradients to CanvasGradient

    main

    The cssGradientToCanvas function parses CSS gradient strings (specifically linear-gradient and conic-gradient) and converts them into a CanvasGradient object for use with a CanvasRenderingContext2D.

    Supported formats:

    • linear-gradient: Uses the first numeric value in the string as the angle.
    • conic-gradient: Supports color stops with angle offsets (e.g., hsl(0, 100%, 50%) 45deg).

  11. Copy text to the clipboard

    main

    Use copyTextToClipboard(text: string) to copy a string to the user's clipboard.

    Implementation Details:

    • It primarily uses the modern navigator.clipboard.writeText API.
    • If the Clipboard API is unavailable or fails, it automatically falls back to a legacy method using a temporary textarea and document.execCommand("copy") to ensure compatibility.

  12. Check language loading status

    main

    The useShiki composable provides two helper functions to track the status of language assets:

    • isLanguageLoaded(lang: string): Returns true if the specified language has already been successfully loaded.
    • isLanguageLoading(lang: string): Returns true if the specified language is currently in the process of being loaded.