{"id":21853326,"url":"https://github.com/emnudge/styled-logs","last_synced_at":"2025-04-14T16:35:35.330Z","repository":{"id":35005362,"uuid":"188352988","full_name":"EmNudge/Styled-Logs","owner":"EmNudge","description":"Stylized console logs made simple","archived":false,"fork":false,"pushed_at":"2023-01-04T03:52:28.000Z","size":95,"stargazers_count":5,"open_issues_count":4,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-10T13:10:24.918Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/EmNudge.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-05-24T04:38:25.000Z","updated_at":"2021-01-27T04:01:57.000Z","dependencies_parsed_at":"2023-01-15T11:51:51.005Z","dependency_job_id":null,"html_url":"https://github.com/EmNudge/Styled-Logs","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/EmNudge%2FStyled-Logs","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/EmNudge%2FStyled-Logs/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/EmNudge%2FStyled-Logs/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/EmNudge%2FStyled-Logs/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/EmNudge","download_url":"https://codeload.github.com/EmNudge/Styled-Logs/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248917220,"owners_count":21182954,"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":[],"created_at":"2024-11-28T01:21:46.289Z","updated_at":"2025-04-14T16:35:35.298Z","avatar_url":"https://github.com/EmNudge.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Styled-Logs\n\nThis is a basic library for styling console logs.\n\n[Play with this on codesandbox.io!](https://codesandbox.io/s/styledconsolelogs-pc4lv)\n\n## Usage\n\n```\nnpm install styled-log\n```\n\nor include it via CDN with\n\n```\n\u003cscript type=\"text/javascript\" src=\"https://cdn.jsdelivr.net/gh/emnudge/Styled-Logs/build/StyledLogs.min.js\"\u003e\u003c/script\u003e\n```\n\n## Background\n\nconsole.log() allows for basic css styling which uses a syntax similar to:\n\n```javascript\nconsole.log(\n  \"This is %cstyled-logs%cv0.1.0%c\\n\\nStyle your %cconsole%clogs%c\\nin a familiar way!\",\n  \"color: white; background: linear-gradient(#555, #333); padding: 2px 6px; border-radius: 4px 0 0 4px;\",\n  \"color: white; background: linear-gradient(#E86, #C64); padding: 2px 6px; border-radius: 0 4px 4px 0;\",\n  \"\",\n  \"color: white; background: linear-gradient(#555, #333); padding: 2px 6px; border-radius: 4px 0 0 4px;\",\n  \"color: white; background: linear-gradient(#E86, #C64); padding: 2px 6px; border-radius: 0 4px 4px 0;\",\n  \"\"\n);\n```\n\nwhich produces the following:\n\n![stylized console log](https://i.imgur.com/vwKcepp.png)\n\nAs you can see, while this is a really cool feature, the syntax makes it fairly hard to read and create.\nThis miniature library creates a much more familiar syntax for styling complex stylized console logs.\n\n## Syntax\n\n```javascript\nnew StyledLog().html`\n  This is \u003cdiv class=\"name\"\u003estyled-logs\u003c/div\u003e\n  \u003cdiv class=\"version\"\u003ev0.1.0\u003c/div\u003e\n  \u003cbr /\u003e\n  \u003cbr /\u003e\n  Style your \u003cdiv class=\"name\"\u003econsole\u003c/div\u003e\n  \u003cdiv class=\"version\"\u003elogs\u003c/div\u003e\n  \u003cbr /\u003e\n  in a familiar way!\n`.css`\n  .name { \n    color: white;\n    background: linear-gradient(#555, #333);\n    padding: 2px 6px;\n    border-radius: 4px 0 0 4px;\n  }\n  .version {\n    color: white;\n    background: linear-gradient(#E86, #C64);\n    padding: 2px 6px;\n    border-radius: 0 4px 4px 0;\n  }\n`.log();\n```\n\n`.html()` and `.css()` can be chained or kept separately. They are [Tagged Template Literals](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals#Tagged_templates) and they can also be called multiple times to change either html or css data.\n\n### Syntax Highlighting\n\nAs a side note, you may find it hard to read html/css without syntax highlighting. As these are tagged template literals, we can take advantage of some VS Code extensions meant for other frameworks. [es6-string-css](https://marketplace.visualstudio.com/items?itemName=bashmish.es6-string-css) can highlight the css for us and [lit-html](https://marketplace.visualstudio.com/items?itemName=bierner.lit-html) can highlight the html for us.\n\n## Aliases\n\nThe `StyleLog` class also includes an `aliases` object. This matches up self-closing tags with particular texts. By default it is set to `{ br: '\\n' }`, but it can be mutated to allow for custom and dynamic self-closing tags.\n\n#### example:\n\n```javascript\n// setting up our log, using the custom self-closing tag \"score\"\nconst scoreLog = new StyledLog().html`\n  High Score: \u003cscore class=\"score\" /\u003e!\n`.css`\n  .score {\n    color: red;\n  }\n`;\n\n// setting score's inner text to \"45\"\nscoreLog.aliases.score = 45;\nscoreLog.log();\n\n// setting score's inner text to \"512\"\nscoreLog.aliases.score = 512;\nscoreLog.log();\n```\n\nIf we set an alias to be a function, we can take in properties as input.\n```javascript\nconst scoreLog = new StyledLog().html`\n  Scores: \u003cscore multiplier=\"1\" /\u003e, \u003cscore multiplier=\"2\" /\u003e\n`;\n\nlet scoreNum = 10;\nscoreLog.aliases.score = ({ multiplier }) =\u003e \n  scoreNum * Number(multiplier);\n\nscoreLog.log(); // Scores: 10, 20\n\nscoreNum = 75;\nscoreLog.log(); // Scores: 75, 150\n```\n\n## Note\n\nConsole logs have minimal and arbitrary styling options. Most styles will not work. Experiment.\nThis library transpiles the pseudo-html and pseudo-css into objects and/or arrays. This is not anywhere close to real html and css.\nThe format is only similar to make creating these stylized logs more intuitive.\n\nThings like event listeners, pseudo-elements (ironic, I know), IDs, css variables, etc will not work.\n\n#### Syntax Not Supported\n- `id`s (`#` selector)\n- nesting (not in stylesheet nor html)\n- glob or sibling css selectors (`*`, `~`, `+`)\n- unclosed `p` tags\n- default styling (`div`s do not have `display: block`)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Femnudge%2Fstyled-logs","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Femnudge%2Fstyled-logs","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Femnudge%2Fstyled-logs/lists"}