{"id":13722472,"url":"https://github.com/wobsoriano/blipgloss","last_synced_at":"2025-03-17T16:10:44.710Z","repository":{"id":49616405,"uuid":"517153400","full_name":"wobsoriano/blipgloss","owner":"wobsoriano","description":"Style definitions for nice terminal layouts 👄","archived":false,"fork":false,"pushed_at":"2023-09-19T19:29:47.000Z","size":187,"stargazers_count":162,"open_issues_count":1,"forks_count":7,"subscribers_count":4,"default_branch":"main","last_synced_at":"2025-03-04T23:09:20.478Z","etag":null,"topics":["bubbles","bubbletea","bun","bunjs","cli","go","golang","layout","lipgloss","node","style","tui"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/wobsoriano.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-07-23T20:03:08.000Z","updated_at":"2025-03-02T01:35:19.000Z","dependencies_parsed_at":"2024-06-19T14:56:31.587Z","dependency_job_id":null,"html_url":"https://github.com/wobsoriano/blipgloss","commit_stats":{"total_commits":69,"total_committers":1,"mean_commits":69.0,"dds":0.0,"last_synced_commit":"f7ed8124edce15bfe951d05b9a85306e3081da8d"},"previous_names":[],"tags_count":18,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wobsoriano%2Fblipgloss","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wobsoriano%2Fblipgloss/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wobsoriano%2Fblipgloss/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wobsoriano%2Fblipgloss/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/wobsoriano","download_url":"https://codeload.github.com/wobsoriano/blipgloss/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244066180,"owners_count":20392406,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["bubbles","bubbletea","bun","bunjs","cli","go","golang","layout","lipgloss","node","style","tui"],"created_at":"2024-08-03T01:01:29.140Z","updated_at":"2025-03-17T16:10:44.678Z","avatar_url":"https://github.com/wobsoriano.png","language":"TypeScript","funding_links":[],"categories":["TypeScript","Extensions"],"sub_categories":["Utilities"],"readme":"# blipgloss\n\nStyle definitions for nice terminal layouts. Powered by [lipgloss](https://github.com/charmbracelet/lipgloss) and `bun:ffi`.\n\n![Blipgloss example](https://i.imgur.com/zW4nYM5.png)\n\n## Install\n\n```bash\nbun add blipgloss\n```\n\n## Usage\n\nBlipgloss takes an expressive, declarative approach to terminal rendering. Users familiar with CSS will feel at home with Blipgloss.\n\n```ts\nimport { NewStyle } from 'blipgloss'\n\nconst style = NewStyle()\n  .Bold(true)\n  .Foreground(\"#FAFAFA\")\n  .Background(\"#7D56F4\")\n  .PaddingTop(2)\n  .PaddingLeft(4)\n  .Width(22)\n\nconsole.log(style.Render(\"Hello, bun.\"))\n```\n\n\u003cimg src=\"https://i.imgur.com/TKhvhlR.png\" alt=\"demo\" width=\"300\" /\u003e\n\n## Colors\n\nBlipgloss supports the following color profiles:\n\n### ANSI 16 colors (4-bit)\n\n```js\nBackground(\"5\")  // magenta\nBackground(\"9\")  // red\nBackground(\"12\") // light blue\n```\n\n### ANSI 256 colors (8-bit)\n\n```js\nBackground(\"86\")  // aqua\nBackground(\"201\") // hot pink\nBackground(\"202\") // orange\n```\n\n### True Color (16,777,216 colors; 24-bit)\n\n```js\nBackground(\"#0000FF\") // good ol' 100% blue\nBackground(\"#04B575\") // a green\nBackground(\"#3C3C3C\") // a dark gray\n```\n\n...as well as a 1-bit Ascii profile, which is black and white only.\n\nThe terminal's color profile will be automatically detected, and colors outside the gamut of the current palette will be automatically coerced to their closest available value.\n\n### Adaptive Colors\n\nYou can also specify color options for light and dark backgrounds:\n\n```js\nBackground({\n  Light: '236',\n  Dark: '248'\n})\n```\n\n### Complete Colors\n\nCompleteColor specifies exact values for truecolor, ANSI256, and ANSI color profiles.\n\n```js\nBackground({\n  True: \"#0000FF\",\n  ANSI256: \"86\",\n  ANSI: \"5\"\n})\n```\n\n### Complete Adaptive Colors\n\nYou can use CompleteColor with AdaptiveColor to specify the exact values for light and dark backgrounds without automatic color degradation.\n\n```js\nBackground({\n  Light: {TrueColor: \"#d7ffae\", ANSI256: \"193\", ANSI: \"11\"},\n  Dark: {TrueColor: \"#d75fee\", ANSI256: \"163\", ANSI: \"5\"}\n})\n```\n\nThe terminal's background color will automatically be detected and the appropriate color will be chosen at runtime.\n\n## Inline Formatting\n\nBlipgloss supports the usual ANSI text formatting options:\n\n```js\nconst style = NewStyle()\n  .Bold(true)\n  .Italic(true)\n  .Faint(true)\n  .Blink(true)\n  .Strikethrough(true)\n  .Underline(true)\n  .Reverse(true)\n```\n\n## Block-Level Formatting\n\nBlipgloss also supports rules for block-level formatting:\n\n```js\n// Padding\nconst style = NewStyle()\n  .PaddingTop(2)\n  .PaddingRight(4)\n  .PaddingBottom(2)\n  .PaddingLeft(4)\n\n// Margins\nconst style = NewStyle()\n  .MarginTop(2)\n  .MarginRight(4)\n  .MarginBottom(2)\n  .MarginLeft(4)\n```\n\nThere is also shorthand syntax for margins and padding, which follows the same format as CSS:\n\n```js\n// 2 cells on all sides\nNewStyle().Padding(2)\n\n// 2 cells on the top and bottom, 4 cells on the left and right\nNewStyle().Margin(2, 4)\n\n// 1 cell on the top, 4 cells on the sides, 2 cells on the bottom\nNewStyle().Padding(1, 4, 2)\n\n// Clockwise, starting from the top: 2 cells on the top, 4 on the right, 3 on\n// the bottom, and 1 on the left\nNewStyle().Margin(2, 4, 3, 1)\n```\n\n## Aligning Text\n\nYou can align paragraphs of text to the left, right, or center.\n\n```js\nimport { Position } from 'blipgloss'\n\nconst style = NewStyle()\n  .Width(24)\n  .Align(Position.Left)   // align it left\n  .Align(Position.Right)  // no wait, align it right\n  .Align(Position.Center) // just kidding, align it in the center\n```\n\n## Width and Height\n\nSetting a minimum width and height is simple and straightforward.\n\n```js\nconst str = NewStyle()\n  .Width(24)\n  .Height(32)\n  .Foreground(\"63\")\n  .Render(\"What’s for lunch?\")\n```\n\n## Borders\n\nAdding borders is easy:\n\n```js\nimport { NewStyle, Border } from 'blipgloss'\n\n// Add a purple, rectangular border\nconst style = NewStyle()\n  .BorderStyle(Border.Normal)\n  .BorderForeground(\"63\")\n\n// Set a rounded, yellow-on-purple border to the top and left\nconst anotherStyle = NewStyle()\n  .BorderStyle(Border.Rounded)\n  .BorderForeground(\"228\")\n  .BorderBackground(\"63\")\n  .BorderTop(true).\n  .BorderLeft(true)\n\n// Make your own border\nconst style = NewStyle()\n  .BorderStyle({\n    Top:         \"._.:*:\",\n    Bottom:      \"._.:*:\",\n    Left:        \"|*\",\n    Right:       \"|*\",\n    TopLeft:     \"*\",\n    TopRight:    \"*\",\n    BottomLeft:  \"*\",\n    BottomRight: \"*\",\n  })\n```\n\n## Copying Styles\n\nJust use `Copy()`:\n\n```js\nconst style = NewStyle().Foreground(\"219\")\n\nconst wildStyle = style.Copy().Blink(true)\n```\n\n`Copy()` performs a copy on the underlying data structure ensuring that you get a true, dereferenced copy of a style. Without copying it's possible to mutate styles.\n\n## Unsetting Rules\n\nAll rules can be unset:\n\n```js\nconst style = NewStyle().\n    Bold(true).                        // make it bold\n    UnsetBold().                       // jk don't make it bold\n    Background(\"227\"). // yellow background\n    UnsetBackground()                  // never mind\n```\n\n## Enforcing Rules\n\nSometimes, such as when developing a component, you want to make sure style definitions respect their intended purpose in the UI. This is where `Inline` and `MaxWidth`, and `MaxHeight` come in:\n\n```js\n// Force rendering onto a single line, ignoring margins, padding, and borders.\nsomeStyle.Inline(true).Render(\"yadda yadda\")\n\n// Also limit rendering to five cells\nsomeStyle.Inline(true).MaxWidth(5).Render(\"yadda yadda\")\n\n// Limit rendering to a 5x5 cell block\nsomeStyle.MaxWidth(5).MaxHeight(5).Render(\"yadda yadda\")\n```\n\n## Rendering\n\nGenerally, you just call the `Render(string)` method:\n\n```js\nconsole.log(NewStyle().Bold(true).Render(\"Hello, bun.\"))\n```\n\n## Utilities\n\nIn addition to pure styling, Lip Gloss also ships with some utilities to help assemble your layouts.\n\n### Joining Paragraphs\n\nHorizontally and vertically joining paragraphs is a cinch.\n\n```js\nimport { Position, JoinHorizontal, JoinVertical } from 'blipgloss'\n\n// Horizontally join three paragraphs along their bottom edges\nJoinHorizontal(Position.Bottom, paragraphA, paragraphB, paragraphC)\n\n// Vertically join two paragraphs along their center axes\nJoinVertical(Position.Center, paragraphA, paragraphB)\n\n// Horizontally join three paragraphs, with the shorter ones aligning 20%\n// from the top of the tallest\nJoinHorizontal(0.2, paragraphA, paragraphB, paragraphC)\n```\n\n### Measuring Width and Height\n\nSometimes you’ll want to know the width and height of text blocks when building your layouts.\n\n```js\nimport { NewStyle, Width, Height } from 'blipgloss'\n\nconst block = NewStyle()\n  .Width(40)\n  .Padding(2)\n  .Render(someLongString)\n\n// Get the actual, physical dimensions of the text block.\nconst width = Width(block)\nconst height = Height(block)\n```\n\n### Placing Text in Whitespace\n\nSometimes you’ll simply want to place a block of text in whitespace.\n\n```js\nimport { PlaceHorizontal, PlaceVertical, Place, Position } from 'blipgloss'\n\n// Center a paragraph horizontally in a space 80 cells wide. The height of\n// the block returned will be as tall as the input paragraph.\nconst block = PlaceHorizontal(80, Position.Center, fancyStyledParagraph)\n\n// Place a paragraph at the bottom of a space 30 cells tall. The width of\n// the text block returned will be as wide as the input paragraph.\nconst block = PlaceVertical(30, Position.Bottom, fancyStyledParagraph)\n\n// Place a paragraph in the bottom right corner of a 30x80 cell space.\nconst block = Place(30, 80, Position.Right, Position.Bottom, fancyStyledParagraph)\n```\n\n## License\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwobsoriano%2Fblipgloss","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwobsoriano%2Fblipgloss","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwobsoriano%2Fblipgloss/lists"}