DOCSEARCHbyAlgolia
Submit Docs

Pines UI Library

repository·main·Indexed 25 days ago

https://github.com/thedevdojo/pines

A UI library featuring a documentation and showcase system for navigating components and guides via a dynamic, query-parameter-driven interface. Includes utilities for retrieving URL query parameters, fetching file contents via the Fetch API, populating HTML lists from JSON data, and formatting strings to Title Case.

Tokens
422
Snippets
0
Records
5
Agent score
35%

What's inside Pines

  1. Run the Pines UI Library locally

    main

    To view the Pines UI Library locally (for example, to test components or prepare for contributions), follow these steps:

    1. Download the repository contents to a local folder.
    2. Ensure you have NodeJS and the http-server package installed.
    3. Navigate to the project folder in your terminal.
    4. Start the local server using the http-server command.
    5. Open the provided localhost URL in your browser to view the library.

  2. Retrieve URL query parameters

    main
    Use getQueryParameter(parameter) to extract the value of a specific query parameter from the current window location. This is useful for determining which UI element or getting-started guide to display based on the URL (e.g., ?element=accordion).

  3. Load file contents via Fetch

    main
    The library provides load_file(filename, callback) and get_element(filename, callback) to asynchronously fetch file contents as text using the Fetch API. Both functions accept a filename and a callback function that receives the file text as its argument.

  4. Populate HTML lists from JSON data

    main

    Use addItemsToList(myObject, myList, param, examples = null) to dynamically generate list items (<li>) and links (<a>) within a specified DOM element.

    • myObject: The object containing the items to list.
    • myList: The DOM element where the list will be appended.
    • param: The query parameter name to use in the generated links (e.g., 'element' or 'start').
    • examples (optional): An object mapping keys to arrays of example filenames. If provided, it will generate nested sub-lists of examples with the suffix -examples/example- appended to the URL.