Skip to content

Commit 4c966c8

Browse files
CodeHimBlogCodeHimBlog
committed
Upload file: prettyjsonrafeca.html
1 parent ba082de commit 4c966c8

File tree

1 file changed

+394
-0
lines changed

1 file changed

+394
-0
lines changed

‎projects/prettyjsonrafeca.html‎

Lines changed: 394 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,394 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>prettyjson</title>
7+
<meta name="description" content="Package for formatting JSON data in a coloured YAML-style, perfect for CLI output">
8+
<meta name="author" content="rafeca">
9+
<meta name="robots" content="index, follow">
10+
11+
<!-- Open Graph Tags (for Social Media) -->
12+
<meta property="og:title" content="{{og_title}}">
13+
<meta property="og:description" content="{{og_description}}">
14+
<meta property="og:image" content="{{og_image}}">
15+
<meta property="og:url" content="{{og_url}}">
16+
<meta property="og:type" content="{{og_type}}">
17+
18+
<!-- Twitter Cards -->
19+
<meta name="twitter:card" content="{{twitter_card}}">
20+
<meta name="twitter:title" content="{{twitter_title}}">
21+
<meta name="twitter:description" content="{{twitter_description}}">
22+
<meta name="twitter:image" content="{{twitter_image}}">
23+
<meta name="twitter:site" content="{{twitter_site}}">
24+
25+
<!-- Canonical URL -->
26+
<link rel="canonical" href="{{canonical_url}}">
27+
28+
<!-- Favicon -->
29+
<link rel="icon" href="/favicon.ico" type="image/png">
30+
<!-- Bootstrap CSS -->
31+
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
32+
<!-- Bootstrap Icons -->
33+
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css" rel="stylesheet">
34+
<link rel="stylesheet" href="/css/styles.css">
35+
<!-- Custom Styles -->
36+
<style>
37+
body {
38+
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
39+
background-color: #f4f4f9;
40+
color: #343a40;
41+
padding-top: 56px;
42+
}
43+
a{
44+
text-decoration: none;
45+
}
46+
.site-main, .sidebar{
47+
background: #fff;
48+
49+
}
50+
.sidebar{
51+
padding: 12px;
52+
}
53+
54+
.package-image {
55+
max-width: 120px;
56+
max-height: 120px;
57+
object-fit: contain;
58+
}
59+
.stat-row {
60+
display: flex;
61+
justify-content: space-between;
62+
margin: 1rem 0;
63+
gap: 1rem;
64+
}
65+
.stat-box {
66+
text-align: center;
67+
flex: 1;
68+
border: 1px solid #ddd;
69+
border-radius: 8px;
70+
padding: 0.5rem;
71+
font-size: 0.9rem;
72+
}
73+
.stat-box i {
74+
font-size: 1.4rem;
75+
margin-bottom: 0.25rem;
76+
display: block;
77+
}
78+
.breadcrumbs {
79+
margin-bottom: 1.5rem;
80+
background: #fff;
81+
padding: 0.5rem 1rem;
82+
border-radius: 5px;
83+
}
84+
.metadata-item {
85+
display: flex;
86+
align-items: center;
87+
margin-bottom: 0.5rem;
88+
}
89+
.metadata-item i {
90+
font-size: 1.2rem;
91+
margin-right: 0.5rem;
92+
color: #6c757d;
93+
}
94+
</style>
95+
</head>
96+
<body>
97+
<!-- Navbar -->
98+
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
99+
<div class="container">
100+
<a class="navbar-brand" href="https://codehimblog.github.io">
101+
<i class="bi bi-box-seam me-2"></i>CodehimBlog
102+
</a>
103+
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
104+
<span class="navbar-toggler-icon"></span>
105+
</button>
106+
<div class="collapse navbar-collapse" id="navbarNav">
107+
<ul class="navbar-nav ms-auto">
108+
<li class="nav-item">
109+
<a class="nav-link" href="https://codehimblog.github.io/"><i class="bi bi-house-door me-1"></i> Home</a>
110+
</li>
111+
<li class="nav-item">
112+
<a class="nav-link" href="https://codehimblog.github.io/projects/"><i class="bi bi-box me-1"></i> Projects</a>
113+
</li>
114+
<li class="nav-item">
115+
<a class="nav-link" href="https://codehimblog.github.io/about.html"><i class="bi bi-book me-1"></i> About</a>
116+
</li>
117+
<li class="nav-item">
118+
<a class="nav-link" href="https://codehimblog.github.io/contact.html"><i class="bi bi-envelope me-1"></i> Contact</a>
119+
</li>
120+
</ul>
121+
</div>
122+
</div>
123+
</nav>
124+
125+
<!-- Breadcrumbs -->
126+
<div class="container mt-4 breadcrumbs">
127+
<nav aria-label="breadcrumb">
128+
<ol class="breadcrumb mb-0">
129+
<li class="breadcrumb-item"><a href="https://codehimblog.github.io/">Home</a></li>
130+
<li class="breadcrumb-item"><a href="https://codehimblog.github.io/projects/">Projects</a></li>
131+
<li class="breadcrumb-item active" aria-current="page">prettyjson</li>
132+
</ol>
133+
</nav>
134+
</div>
135+
136+
<!-- Schema Markup for Breadcrumbs -->
137+
<script type="application/ld+json">
138+
{
139+
"@context": "https://schema.org",
140+
"@type": "BreadcrumbList",
141+
"itemListElement": [
142+
{
143+
"@type": "ListItem",
144+
"position": 1,
145+
"name": "Home",
146+
"item": "https://codehimblog.github.io/"
147+
},
148+
{
149+
"@type": "ListItem",
150+
"position": 2,
151+
"name": "Projects",
152+
"item": "https://codehimblog.github.io/projects/"
153+
},
154+
{
155+
"@type": "ListItem",
156+
"position": 3,
157+
"name": "prettyjson",
158+
"item": "https://codehimblog.github.io/projects/{{packageSlug}}"
159+
}
160+
]
161+
}
162+
</script>
163+
164+
165+
<!-- Main Content -->
166+
<div class="container mt-4">
167+
<div class="row">
168+
169+
170+
<!-- Main Details -->
171+
<main class="col-md-8 site-main">
172+
<!-- Project Name & Description -->
173+
<h1 id="packageName">prettyjson</h1>
174+
<p id="packageDescription" class="text-muted">Package for formatting JSON data in a coloured YAML-style, perfect for CLI output</p>
175+
176+
<!-- Statistics -->
177+
<div class="stat-row">
178+
<div class="stat-box">
179+
<i class="bi bi-star-fill text-warning"></i>
180+
<span id="stargazersCount">481</span>
181+
<p>Stars</p>
182+
</div>
183+
<div class="stat-box">
184+
<i class="bi bi-arrow-repeat text-secondary"></i>
185+
<span id="forksCount">56</span>
186+
<p>Forks</p>
187+
</div>
188+
<div class="stat-box">
189+
<i class="bi bi-exclamation-circle text-danger"></i>
190+
<span id="openIssuesCount">22</span>
191+
<p>Open Issues</p>
192+
</div>
193+
</div>
194+
195+
<!-- Action Buttons -->
196+
<div class="mb-4">
197+
<a href="http://rafeca.com/prettyjson" target="_blank" class="btn btn-success me-2" id="homepageBtn">
198+
<i class="bi bi-house-door me-2"></i>Visit Homepage
199+
</a>
200+
<a href="https://github.com/rafeca/prettyjson/archive/refs/heads/master.zip" class="btn btn-primary me-2" id="downloadBtn">
201+
<i class="bi bi-cloud-download me-2"></i>Download ZIP
202+
</a>
203+
<a href="https://github.com/rafeca/prettyjson" target="_blank" class="btn btn-outline-secondary" id="githubBtn">
204+
<i class="bi bi-github me-2"></i>Fork on GitHub
205+
</a>
206+
</div>
207+
208+
<!-- Tabs -->
209+
<ul class="nav nav-tabs" id="infoTabs" role="tablist">
210+
<li class="nav-item" role="presentation">
211+
<button class="nav-link active" id="installation-tab" data-bs-toggle="tab" data-bs-target="#installation" type="button" role="tab" aria-controls="installation" aria-selected="true">
212+
<i class="bi bi-file-earmark-text"></i> Readme
213+
</button>
214+
</li>
215+
<li class="nav-item" role="presentation">
216+
<button class="nav-link" id="dependencies-tab" data-bs-toggle="tab" data-bs-target="#dependencies" type="button" role="tab" aria-controls="dependencies" aria-selected="false">
217+
<i class="bi bi-diagram-2-fill me-2"></i> Dependencies
218+
</button>
219+
</li>
220+
<li class="nav-item" role="presentation">
221+
<button class="nav-link" id="changelog-tab" data-bs-toggle="tab" data-bs-target="#changelog" type="button" role="tab" aria-controls="changelog" aria-selected="false">
222+
<i class="bi bi-journal-text me-2"></i> Changelog
223+
</button>
224+
</li>
225+
<li class="nav-item" role="presentation">
226+
<button class="nav-link" id="contributors-tab" data-bs-toggle="tab" data-bs-target="#contributors" type="button" role="tab" aria-controls="contributors" aria-selected="false">
227+
<i class="bi bi-people me-2"></i> Contributors
228+
</button>
229+
</li>
230+
</ul>
231+
232+
<div class="tab-content mt-3" id="infoTabsContent">
233+
<div class="tab-pane fade show active" id="installation" role="tabpanel" aria-labelledby="installation-tab">
234+
<h1 id="prettyjsonbuildstatushttpstravisciorgrafecaprettyjsonsvghttpstravisciorgrafecaprettyjsonnpmversionhttpsbadgefuryiojsprettyjsonsvghttpsbadgefuryiojsprettyjsoncoveragestatushttpscoverallsioreposgithubrafecaprettyjsonbadgesvgbranchmasterhttpscoverallsiogithubrafecaprettyjsonbranchmaster">prettyjson <a href="https://travis-ci.org/rafeca/prettyjson"><img src="https://travis-ci.org/rafeca/prettyjson.svg" alt="Build Status" /></a> <a href="https://badge.fury.io/js/prettyjson"><img src="https://badge.fury.io/js/prettyjson.svg" alt="NPM version" /></a> <a href="https://coveralls.io/github/rafeca/prettyjson?branch=master"><img src="https://coveralls.io/repos/github/rafeca/prettyjson/badge.svg?branch=master" alt="Coverage Status" /></a></h1>
235+
<p>Package for formatting JSON data in a coloured YAML-style, perfect for CLI output.</p>
236+
<h2 id="howtoinstall">How to install</h2>
237+
<p>Just install it via NPM:</p>
238+
<pre class="prettyprint linenums lang-bash"><code>$ npm install -g prettyjson
239+
</code></pre>
240+
<p>This will install <code>prettyjson</code> globally, so it will be added automatically
241+
to your <code>PATH</code>.</p>
242+
<h2 id="usingitfromthecli">Using it (from the CLI)</h2>
243+
<p>This package installs a command line interface to render JSON data in a more
244+
convenient way. You can use the CLI in three different ways:</p>
245+
<p><strong>Decode a JSON file:</strong> If you want to see the contents of a JSON file, just pass
246+
it as the first argument to the CLI:</p>
247+
<pre class="prettyprint linenums lang-bash"><code>$ prettyjson package.json
248+
</code></pre>
249+
<p><img src="https://raw.github.com/rafeca/prettyjson/master/images/example3.png" alt="Example 1" /></p>
250+
<p><strong>Decode the stdin:</strong> You can also pipe the result of a command (for example an
251+
HTTP request) to the CLI to see the JSON result in a clearer way:</p>
252+
<pre class="prettyprint linenums lang-bash"><code>$ curl https://api.github.com/users/rafeca | prettyjson
253+
</code></pre>
254+
<p><img src="https://raw.github.com/rafeca/prettyjson/master/images/example4.png" alt="Example 2" /></p>
255+
<p><strong>Decode random strings:</strong> if you call the CLI with no arguments, you'll get a
256+
prompt where you can past JSON strings and they'll be automatically displayed in a clearer way:</p>
257+
<p><img src="https://raw.github.com/rafeca/prettyjson/master/images/example5.png" alt="Example 3" /></p>
258+
<h3 id="commandlineoptions">Command line options</h3>
259+
<p>It's possible to customize the output through some command line options:</p>
260+
<pre class="prettyprint linenums lang-bash"><code># Change colors
261+
$ prettyjson --string=red --multiline_string=cyan --keys=blue --dash=yellow --number=green package.json
262+
263+
# Do not use colors
264+
$ prettyjson --nocolor=1 package.json
265+
266+
# Change indentation
267+
$ prettyjson --indent=4 package.json
268+
269+
# Render arrays elements in a single line
270+
$ prettyjson --inline-arrays=1 package.json
271+
272+
# Escape conflictive strings
273+
$ prettyjson --escape=1 package.json
274+
</code></pre>
275+
<p><strong>Deprecation Notice</strong>: The old configuration through environment variables is
276+
deprecated and it will be removed in the next major version (1.0.0).</p>
277+
<h2 id="usingitfromnodejs">Using it (from Node.js)</h2>
278+
<p>It's pretty easy to use it. You just have to include it in your script and call
279+
the <code>render()</code> method:</p>
280+
<pre class="prettyprint linenums lang-javascript"><code>var prettyjson = require('prettyjson');
281+
282+
var data = {
283+
username: 'rafeca',
284+
url: 'https://github.com/rafeca',
285+
twitter_account: 'https://twitter.com/rafeca',
286+
projects: ['prettyprint', 'connfu']
287+
};
288+
289+
var options = {
290+
noColor: true
291+
};
292+
293+
console.log(prettyjson.render(data, options));
294+
</code></pre>
295+
<p>And will output:</p>
296+
<p><img src="https://raw.github.com/rafeca/prettyjson/master/images/example1.png" alt="Example 4" /></p>
297+
<p>You can also configure the colors of the hash keys and array dashes
298+
(using <a href="https://github.com/Marak/colors.js">colors.js</a> colors syntax):</p>
299+
<pre class="prettyprint linenums lang-javascript"><code>var prettyjson = require('prettyjson');
300+
301+
var data = {
302+
username: 'rafeca',
303+
url: 'https://github.com/rafeca',
304+
twitter_account: 'https://twitter.com/rafeca',
305+
projects: ['prettyprint', 'connfu']
306+
};
307+
308+
console.log(prettyjson.render(data, {
309+
keysColor: 'rainbow',
310+
dashColor: 'magenta',
311+
stringColor: 'white',
312+
multilineStringColor: 'cyan'
313+
}));
314+
</code></pre>
315+
<p>Will output something like:</p>
316+
<p><img src="https://raw.github.com/rafeca/prettyjson/master/images/example2.png" alt="Example 5" /></p>
317+
<h2 id="runningtests">Running Tests</h2>
318+
<p>To run the test suite first invoke the following command within the repo,
319+
installing the development dependencies:</p>
320+
<pre class="prettyprint linenums lang-bash"><code>$ npm install
321+
</code></pre>
322+
<p>then run the tests:</p>
323+
<pre class="prettyprint linenums lang-bash"><code>$ npm test
324+
</code></pre>
325+
<p>On windows, you can run the tests with:</p>
326+
<pre class="prettyprint linenums lang-cmd"><code>C:\git\prettyjson&gt; npm run-script testwin
327+
</code></pre>
328+
</div>
329+
<div class="tab-pane fade" id="dependencies" role="tabpanel" aria-labelledby="dependencies-tab">
330+
<h5>Dependencies</h5>
331+
<ul id="dependenciesList">
332+
<li>@colors/colors (1.5.0)</li><li>minimist (^1.2.0)</li>
333+
</ul>
334+
</div>
335+
<div class="tab-pane fade" id="changelog" role="tabpanel" aria-labelledby="changelog-tab">
336+
<h5>Changelog</h5>
337+
<ul id="changelogList">
338+
<p>No changelog available.</p>
339+
</ul>
340+
</div>
341+
<div class="tab-pane fade" id="contributors" role="tabpanel" aria-labelledby="contributors-tab">
342+
<h5>Contributors</h5>
343+
<ul id="contributorsList">
344+
<li>rafeca (152 contributions)</li><li>dlight (2 contributions)</li><li>shaunmccarthy (2 contributions)</li><li>SuperPaintman (2 contributions)</li><li>nem035 (2 contributions)</li><li>exos (2 contributions)</li><li>fengzilong (1 contributions)</li><li>mercan01 (1 contributions)</li><li>tiye (1 contributions)</li><li>gotterdemarung (1 contributions)</li><li>XhmikosR (1 contributions)</li><li>EndangeredMassa (1 contributions)</li><li>pdehaan (1 contributions)</li><li>MichaelDeBoey (1 contributions)</li><li>mmalecki (1 contributions)</li><li>sonicdoe (1 contributions)</li><li>dgoguerra (1 contributions)</li><li>bahamas10 (1 contributions)</li><li>DABH (1 contributions)</li><li>alexey-detr (1 contributions)</li>
345+
</ul>
346+
</div>
347+
</div>
348+
</main>
349+
<!-- Sidebar -->
350+
<aside class="col-md-4">
351+
<div class="sidebar">
352+
<div class="sidebar-item">
353+
<h5>Owner</h5>
354+
<div class="d-flex align-items-center">
355+
<img src="https://avatars.githubusercontent.com/u/408035?v=4" alt="Owner Avatar" class="rounded-circle me-2" style="width: 40px; height: 40px;">
356+
<a href="https://github.com/rafeca" target="_blank" id="ownerName">rafeca</a>
357+
</div>
358+
</div>
359+
<div class="sidebar-item">
360+
<h5>Metadata</h5>
361+
<div class="metadata-item">
362+
<i class="bi bi-calendar"></i>
363+
<strong>Created At:</strong> <span id="createdAt">October 10, 2011</span>
364+
</div>
365+
<div class="metadata-item">
366+
<i class="bi bi-pencil-square"></i>
367+
<strong>Last Updated:</strong> <span id="updatedAt">October 15, 2024</span>
368+
</div>
369+
<div class="metadata-item">
370+
<i class="bi bi-code-slash"></i>
371+
<strong>Language:</strong> <span id="language">JavaScript</span>
372+
</div>
373+
<div class="metadata-item">
374+
<i class="bi bi-box-arrow-in-down"></i>
375+
<strong>Size:</strong> <span id="repoSize">1.01 MB</span>
376+
</div>
377+
</div>
378+
</div>
379+
</aside>
380+
</div>
381+
</div>
382+
383+
<!-- Footer -->
384+
<footer class="bg-dark text-white text-center py-3">
385+
<div class="container">
386+
<p class="mb-0">© 2024 Package Hub Pro - Powered by Bootstrap</p>
387+
</div>
388+
</footer>
389+
390+
<!-- Bootstrap Bundle JS -->
391+
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
392+
<script src="https://cdn.jsdelivr.net/gh/google/code-prettify@master/loader/run_prettify.js"></script>
393+
</body>
394+
</html>

0 commit comments

Comments
 (0)