Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

colorful documenation in HTML and CSS #39

Merged
merged 3 commits into from
Aug 15, 2024
Merged

colorful documenation in HTML and CSS #39

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
f3a555e
what if purple
ryanve Aug 14, 2024
7a38418
online documentation
ryanve Aug 15, 2024
dcac56f
Returns
ryanve Aug 15, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
26 changes: 13 additions & 13 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,42 +18,42 @@ import eol from 'eol'
## API

### `eol.auto(text)`
- Normalize line endings in <var>text</var> for the current operating system
- <b>@return</b> string with line endings normalized to `\r\n` or `\n`
* Normalize line endings in <var>text</var> to match the current operating system
* Returns string with line endings normalized to `\r\n` or `\n`

### `eol.crlf(text)`
- Normalize line endings in <var>text</var> to <b>CRLF</b> (Windows, DOS)
- <b>@return</b> string with line endings normalized to `\r\n`
* Normalize line endings in <var>text</var> to <b>CRLF</b> (Windows, DOS)
* Returns string with line endings normalized to `\r\n`

### `eol.lf(text)`
- Normalize line endings in <var>text</var> to <b>LF</b> (Unix, OS X)
- <b>@return</b> string with line endings normalized to `\n`
* Normalize line endings in <var>text</var> to <b>LF</b> (Unix, OS X)
* Returns string with line endings normalized to `\n`

### `eol.cr(text)`
- Normalize line endings in <var>text</var> to <b>CR</b> (Mac OS)
- <b>@return</b> string with line endings normalized to `\r`
* Normalize line endings in <var>text</var> to <b>CR</b> (Mac OS)
* Returns string with line endings normalized to `\r`

### `eol.dub(text)`

- [Dubnormalize.](https://github.com/ryanve/eol/pull/32) [Used internally.](eol.js) [Generative.](#dubbing)
- Create normalizer where linebreaks become <var>text</var>
- <b>@return</b> composed function
- Returns composed function

### `eol.before(text)`
- Add linebreak before <var>text</var>
- <b>@return</b> string with linebreak added before text
- Returns string with linebreak added before text

### `eol.after(text)`
- Add linebreak after <var>text</var>
- <b>@return</b> string with linebreak added after text
- Returns string with linebreak added after text

### `eol.match(text)`
- Detect or inspect linebreaks in <var>text</var>
- <b>@return</b> array of matched linebreaks
- Returns array of matched linebreaks

### `eol.split(text)`
- Split <var>text</var> by newline
- <b>@return</b> array of lines
- Returns array of lines

### Joining

Expand Down
154 changes: 124 additions & 30 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,38 +1,132 @@
<!DOCTYPE html>
<html lang="en-US" class="scheme--white">
<html lang="en-US" class="iffy">
<meta charset="utf-8">
<title>EOL converter</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Newline character converter">

<title>EOL opensource library</title>

<meta name="viewport" content="width=device-width">
<meta name="description" content="JavaScript newline conversion library">
<meta name="color-scheme" content="dark light">
<meta name="theme-color" content="darkviolet">

<link rel="help" href="https://github.com/ryanve/eol#readme">
<link rel="help" href="https://en.wikipedia.org/wiki/Newline">

<link rel="help" href="https://s9a.page/iffy">
<style media=(color)>
.iyff {filter:hue-rotate(-288deg)}
.ffiy {filter:hue-rotate(288deg)}
.ffyi {filter:hue-rotate(144deg)}
.yiff {filter:hue-rotate(-144deg)}
.iffy {fill:var(--iffy);stroke:var(--yffi)}
.yffi {fill:var(--yffi);stroke:var(--iffy)}
.iffy.iffy {background-color:var(--iffy);color:var(--yffi)}
.yffi.yffi {background-color:var(--yffi);color:var(--iffy)}
.iffy ::selection {color:var(--iffy);background:var(--else)}
.yffi ::selection {color:var(--yffi);background:var(--else)}
.iffy *{background-color:transparent;color:unset;--else:aquamarine}
.yffi *{background-color:transparent;color:unset;--else:dodgerblue}
*{--iffy:darkviolet;--yffi:lemonchiffon}
@media (prefers-color-scheme:dark){*{--yffi:khaki}}
@media (prefers-contrast:more){*{--iffy:indigo}}
@media (prefers-contrast:less){*{--yffi:peachpuff}}
</style>

<link rel="stylesheet" href="style.css">

<header class="m-b-3">
<h1 class="m-b-1">eol converter</h1>
<a class="button scheme--light" href="https://github.com/ryanve/eol">Github</a>
<a class="button scheme--light" href="https://www.npmjs.com/package/eol">npm</a>
<header class="iffy" id="hi">
<h1>
<cite>eol</cite>
opensource
newline
conversion
</h1>
<nav aria-label="opensource">
<a class="bttn yffi ffyi" href="https://github.com/ryanve/eol">github</a>
<a class="bttn yffi ffiy" href="https://www.npmjs.com/package/eol">npm</a>
</nav>
<p>
<code>eol</code> is an opensource
<a class="ffyi" href="https://en.wikipedia.org/wiki/Newline">newline</a>
conversion <code>node</code> module.
<code>eol</code> helps you smoothly convert <i>line endings</i>
in <a class="ffyi" href="https://nodejs.org">node</a> applications.
<code>eol</code> is written in JavaScript and supports TypeScript too.
The words <i>newline</i>, <i>linebreak</i>, <i>line ending</i>
are used interchangeably here.
They mark an <i>end of line</i>.
Feel free to play with <code>eol</code>
in the console on this page for learning purposes.
</p>
</header>

<form class="js-converter__form">
<fieldset class="m-b-2">
<label class="block m-b-2">
<b>Input</b>
<textarea class="area border-radius scheme--white js-converter__input"></textarea>
</label>
<button type="submit" class="button scheme--dark">Convert line endings to</button>
<label class="inline-block m-b-2">
<select class="button scheme--light text--uppercase js-converter__method" aria-label="Convert to">
<option selected>lf</option>
<option>crlf</option>
<option>cr</option>
</select>
</label>
</fieldset>
<section>
<h2 class="inherit-size">Output</h2>
<div class="area scheme--white border-radius js-converter__output" contenteditable></div>
</section>
</form>
<section class="yffi" id="methods">
<h2>methods</h2>
<dl>
<dt><code>eol.auto(<var>text</var>)</code>
<dd>Normalize <var>text</var> to match the current operating system
<dd>Returns string with <i>line endings</i> normalized accordingly
<dt><code>eol.crlf(<var>text</var>)</code>
<dd>Normalize <i>line endings</i> in <var>text</var> to CRLF (Windows, DOS)
<dd>Returns string normalized to <q>\r\n</q> <i>line endings</i>
<dt><code>eol.lf(<var>text</var>)</code>
<dd>Normalize <i>line endings</i> in <var>text</var> to LF (Unix, OS X)
<dd>Returns string normalized to <q>\n</q> <i>line endings</i>
<dt><code>eol.cr(<var>text</var>)</code>
<dd>Normalize <i>line endings</i> in <var>text</var> to CR (Mac OS)
<dd>Returns string normalized to <q>\r</q> <i>line endings</i>
<dt><code>eol.dub(<var>text</var>)</code>
<dd>Generate normalizer that replaces <i>line endings</i> with <var>text</var>
<dd>Returns composed function like above
<dd>Usable as glue to join arrays
<dt><code>eol.before(<var>text</var>)</code>
<dd>Add <i>linebreak</i> before <var>text</var>
<dd>Returns string with <i>linebreak</i> added <em>before</em> <var>text</var>
<dt><code>eol.after(<var>text</var>)</code>
<dd>Add <i>linebreak</i> after <var>text</var>
<dd>Returns string with <i>linebreak</i> added <em>after</em> <var>text</var>
<dt><code>eol.match(<var>text</var>)</code>
<dd>Detect or inspect <i>linebreaks</i> in <var>text</var>
<dd>Returns array of matched <i>linebreaks</i>
<dt><code>eol.split(<var>text</var>)</code>
<dd>Split <var>text</var> by <i>newline</i>
<dd>Returns array of lines
</dl>
</section>

<section class="yffi yiff" id="samples">
<h2>samples</h2>
<h3>normalizing</h3>
<pre>eol.lf("hello<b>\r\n</b>world<b>\r\n</b>")<br>// "hello<b>\n</b>world<b>\n</b>"</pre>
<h3>remove empty lines</h3>
<pre>eol.split(text).filter(line => line).join(eol.lf)</pre>
<h3>detect or inspect</h3>
<pre>eol.match("hello<b>\n</b>world<b>\n</b>")<br>// ["\n","\n"]</pre>
<h3>coercion</h3>
<pre>String(eol.lf) // "\n"</pre>
<pre>String(eol.cr) // "\r"</pre>
<pre>String(eol.crlf) // "\r\n"</pre>
<h3>generating normalizers</h3>
<pre>let lflf = eol.dub("\n\n")<br>lflf("hello<b>\n</b>world<b>\n</b>")<br>// "hello<b>\n\n</b>world<b>\n\n</b>"</pre>
</section>

<footer class="iffy ffiy" id="thankyou">
<h2>thank you</h2>
<p>
Thank you for being part of the opensource community.
Hope you enjoy using <code>eol</code>
</p>
<p>
<a class="ffyi" href="https://github.com/ryanve/eol">All the code is on github</a>
where <a class="ffyi" href="https://github.com/sponsors/ryanve">you may sponsor its creator if you like</a>
</p>
<p>
Color here uses the <a class="ffiy" href="https://s9a.page/iffy">iffy opensource library</a>.
If you enjoy space <a class="ffiy" href="https://ryanve.dev/ssv">you may also enjoy ssv</a>
</p>
<p>
<a class="yffi" href="#hi">=p</a>
</p>
</footer>

<script src="eol.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.slim.min.js"></script>
<script src="ui.js"></script>
133 changes: 71 additions & 62 deletions style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,81 +1,90 @@
.scheme--white { background: whitesmoke; color: black }
.scheme--dark { background: blue; color: whitesmoke }
.scheme--light { background: gainsboro; color: blue }
:focus { outline-color: blue }

*, :before, :after { box-sizing: border-box }
html { font: 1em/2 sans-serif; }
body { width: 100%; margin: auto; padding: 1em }
a { text-decoration: none }
a:hover { text-decoration: underline }
textarea, select { font: inherit }
textarea { max-width: 100%; margin: 0 }
header, section { display: block }
fieldset { padding: 0; border: 0 }
label { margin: 0; padding: 0 }
h1, h2 { line-height: 1 }

.border-radius {
border-radius: .25em;
}

.inherit-size {
font-size: inherit;
}

.button {
font-size: inherit;
font-style: inherit;
font-weight: bold;
min-height: 2.5em;
display: inline-block;
border: 0;
border-radius: .25em;
padding: .33333em .66666em;
margin: 0;
:focus {
box-shadow: 0 0 1ch 1ch var(--yffi, currentColor);
outline: thick dotted var(--iffy, currentColor);
}

:any-link:hover {
text-decoration-style: double;
}

* {
box-sizing: border-box;
}

.button:focus {
text-decoration: underline;
html {
font-family: sans-serif;
font-size: max(3ch, 2vw + 1vh);
line-height: 1.618;
}

.button:enabled:hover {
cursor: pointer;
text-decoration: underline;
body {
display: flex;
flex-flow: column;
margin: auto;
overflow-wrap: anywhere;
}

.m-b-1 {
margin-bottom: .5em;
body > * {
contain: layout;
padding: 1em;
padding-block: calc(1em + 1vh);
padding-inline: calc(1em + 1vw);
}

.m-b-2 {
margin-bottom: 1em;
a:only-child,
nav a {
padding: .5ch;
}

.m-b-3 {
{
padding: .5ch;
}

header {
margin-bottom: 2em;
}

.inline-block {
display: inline-block;
pre {
font-family: monospace;
white-space: pre-line;
}

.block {
display: block;
p {
max-width: 26em;
margin-inline: auto;
}

.area {
white-space: pre-wrap;
border: 2px solid gainsboro;
padding: .25em;
display: block;
overflow: auto;
resize: vertical;
width: 100%;
height: 7.5em;
line-height: 1.1;
dt {
font-size: 1.236rem;
margin-block: 1em 0;
}

.text--uppercase {
text-transform: uppercase;
}
dd {
margin-block: 0;
}

pre {
font-size: 0.666rem;
margin: 0;
}

q {
font-family: monospace;
quotes: '"' '"';
}

h1 {
font-size: 1.618em;
font-weight: unset;
margin-bottom: 1ch;
}

h2 {
font-size: 1.382em;
}

dfn,
cite {
font-style: unset;
font-weight: bold;
}
9 changes: 0 additions & 9 deletions ui.js
View file
Open in desktop

This file was deleted.