{"id":26263906,"url":"https://github.com/pfuster12/mk2console","last_synced_at":"2025-04-30T12:40:50.695Z","repository":{"id":36435814,"uuid":"224262856","full_name":"Pfuster12/mk2Console","owner":"Pfuster12","description":"A trusty console embedded in-window to print rich log messages during development.","archived":false,"fork":false,"pushed_at":"2023-01-01T13:48:30.000Z","size":939,"stargazers_count":1,"open_issues_count":19,"forks_count":2,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-22T14:57:43.552Z","etag":null,"topics":["console","debug","developer-tools","npm-package","react","web","webpack"],"latest_commit_sha":null,"homepage":null,"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/Pfuster12.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-11-26T18:46:36.000Z","updated_at":"2020-08-09T13:22:56.000Z","dependencies_parsed_at":"2023-01-17T01:27:27.978Z","dependency_job_id":null,"html_url":"https://github.com/Pfuster12/mk2Console","commit_stats":null,"previous_names":[],"tags_count":7,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Pfuster12%2Fmk2Console","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Pfuster12%2Fmk2Console/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Pfuster12%2Fmk2Console/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Pfuster12%2Fmk2Console/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Pfuster12","download_url":"https://codeload.github.com/Pfuster12/mk2Console/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":251701963,"owners_count":21629925,"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":["console","debug","developer-tools","npm-package","react","web","webpack"],"created_at":"2025-03-14T01:36:34.203Z","updated_at":"2025-04-30T12:40:50.669Z","avatar_url":"https://github.com/Pfuster12.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Welcome to the Mark-II Console\n![npm](https://img.shields.io/npm/v/mk2console) [![Commitizen friendly](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg)](http://commitizen.github.io/cz-cli/)\n\n\u003cimg src=\"https://github.com/Pfuster12/mk2Console/blob/master/github-assets/website-screen.PNG\" width=\"860\"/\u003e\n\nThe Mark-II Console is a small console viewport that sits in the corner of your window. Print out your log messages during development with rich formatting and colour, so you don't need to open the hefty developer tools if all you need is to log some stuff out!\n\nClose at any time, no questions asked.\n\n## Install\n\nMk2Console is a [npm package](https://www.npmjs.com/package/mk2console).\n\n```console\nnpm i mk2console\n```\n\n\u003e **NOTE** Please use the latest version as versions before 1.3.4 contain major bugs.\n\n## How it works\nMk2Console consists of React component viewer and a simple object with helper functions. Import the component and the Helper function object in order to display and log messages in your code. The viewer works best when you place in your app's root view:\n\n```jsx\nimport {Mk2ConsoleViewer, Mk2Console} from 'mk2console'\n\nexport default function App() {\n\n    useEffect(() =\u003e {\n        Mk2Console.log('Testing...')\n    },\n    [])\n\n    return (\n        \u003cmain\u003e\n            \u003cdiv\u003e\n                \u003c\u003e\n                {/* Your other components...*/}\n                \u003c/\u003e\n            \u003c/div\u003e\n            \u003cMk2ConsoleViewer/\u003e\n        \u003c/main\u003e\n    )\n}\n```\n\n\u003e **NOTE** Mk2ConsoleViewer uses the new React Hooks.\n\nThe helper object contains the log function:\n\n```typescript\nlog: (msg: string, color: string = 'white', fontWeight: string = 'normal') =\u003e {}\n```\n\nThis is where the console is able to format its messages. The color and fontWeight can be set to any valid CSS value for these properties in string format, e.g. `'#FAFAFA'`, `'blue'`, `'bold'`, `'700'`.\n\nSo if we modify our initial call with some CSS properties:\n\n```jsx\nimport {Mk2ConsoleViewer, Mk2Console} from 'mk2console'\n\nexport default function App() {\n\n    useEffect(() =\u003e {\n        Mk2Console.log('And it supports rich formatting.', '#3dda82', 'bold')\n    },\n    [])\n\n    return (\n        \u003cdiv\u003e\n            \u003cMk2ConsoleViewer/\u003e\n        \u003c/div\u003e\n    )\n}\n```\n\nWe get the start up log message:\n\n![Default Theme](https://github.com/Pfuster12/mk2Console/blob/master/github-assets/default-theme-mk2console.PNG)\n\n### Highlight Color\n\n`highlight` is a special keyword in the Mk2Console. Every theme will have a highlight color defined for your convenience that you can use to quickly format log messages to stand out.\nIf you pass `highlight` to the color property in the log method:\n\n```\nMk2Console.log('This log is highlighted', 'highlight')\n```\n\nThe message will understand and use the theme's `highlight` color.\n\n## Supported Logger functions\n\n- Info: Info message with the theme's 'info' color.\n```info: (msg: string)```\n\n- Debug: Debugs a message with the theme's 'debug' color.\n```debug: (msg: string)```\n\n- Warn: Warning message with the theme's 'warn' color.\n```warn: (msg: string)```\n\n- Error: Error message with the theme's 'error' color.\n```error: (msg: string)```\n\n## Supported Props\n\n| Prop              | Type           | description                                         | default   | required  |\n| ------------------|:--------------:| ---------------------------------------------------:|----------:|----------:|\n| **theme**         | string         | Theme to use on startup                             | 'default' | false     |\n| **minimised**     | boolean        | Whether the console starts minimised by default     | 'true'    | false     |\n\nThe interface used:\n\n```typescript\ninterface Mk2ConsoleViewerProps {\n    theme?: string,\n    minimised?: boolean\n}\n```\n\n\u003e **NOTE** Since v1.3.1 the start up log message has been removed along with the property.\n\n## Maximise/Minimise\n\nSince v1.3.0 the console supports toggling the window into a minimised version to stop it\nfrom obstructing to much real estate in the website if you don't need it.\n\nIn fact the console defaults to a minimised state which you can toggle with the `minimised` prop.\n\n\n```jsx\nimport {Mk2ConsoleViewer, Mk2Console} from 'mk2console'\n\nexport default function App() {\n\n    return (\n        \u003cdiv\u003e\n            \u003cMk2ConsoleViewer minimised={false}/\u003e\n        \u003c/div\u003e\n    )\n}\n```\n\nMinimised:\n\n![Default Theme](https://github.com/Pfuster12/mk2Console/blob/master/github-assets/minimised.PNG)\n\nMaximised: \n\n![Default Theme](https://github.com/Pfuster12/mk2Console/blob/master/github-assets/maximised.PNG)\n\n## Themes\nThe mk2Consoles brings you beautiful and rich theming for all your logging needs.\n\nKeep it simple with the clean, classic default theme or choose from plugin themes. Or create your own! (TBA)\n\nThe package comes with a few pre-loaded themes:\n\nDefault\n--------\n![Default Theme](https://github.com/Pfuster12/mk2Console/blob/master/github-assets/default-theme-mk2console.PNG)\n\nLight\n--------\n![Light Theme](https://github.com/Pfuster12/mk2Console/blob/master/github-assets/light-theme-mk2console.PNG)\n\nDracula\n--------\n![Dracula Theme](https://github.com/Pfuster12/mk2Console/blob/master/github-assets/dracula-theme-mk2console.PNG)\n\n### How to change themes\n\nPass in the theme prop to make the console use the theme of your choice. The prop defaults to the 'default' theme:\n\n```jsx\nimport {Mk2ConsoleViewer, Mk2Console} from 'mk2console'\n\nexport default function App() {\n\n    return (\n        \u003cdiv\u003e\n            \u003cMk2ConsoleViewer theme=\"dracula\"/\u003e\n        \u003c/div\u003e\n    )\n}\n```\n\nThemes are instantly switchable in the Theme Dialog picker embedded in the Viewer window.\n![Theme dialog](https://github.com/Pfuster12/mk2Console/blob/master/github-assets/theme-dialog-mk2console.PNG)\n\nBuilt-in Themes\n---------------\n\n- `default`\n- `light`\n- `dracula`\n\n## Development\n\nMk2Console uses React Hooks, make sure you are using a version of `16.8.0` or above.\n\n### Version Control\nMk2Console is [Commitizen Friendly.](https://github.com/commitizen/cz-cli).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpfuster12%2Fmk2console","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpfuster12%2Fmk2console","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpfuster12%2Fmk2console/lists"}