Skip to content

feat(demo): Improve the demo and remove it from the shipped code #116

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

Merged
damienalexandre merged 1 commit into from
Oct 21, 2025
Merged

feat(demo): Improve the demo and remove it from the shipped code #116

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
1 change: 1 addition & 0 deletions .gitattributes
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,3 +6,4 @@
/tests export-ignore
/TODO.md export-ignore
/tools export-ignore
/website export-ignore
4 changes: 4 additions & 0 deletions website/public/css/app.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2654,6 +2654,10 @@ body {
font-weight: var(--font-weight-base)
}

.u-fw\(bold\) {
font-weight: calc(var(--font-weight-base) * 2)
}

.u-fz\(base\) {
font-size: var(--font-size-base);
line-height: var(--line-height-base)
Expand Down
79 changes: 45 additions & 34 deletions website/public/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,25 +54,24 @@
</style>

<header>
<h1 class="u-fz(h1) u-ff(courgette) u-ta(center) u-c(orange)">JoliTypo Demo</h1>
<h1 class="u-ta(center)"><span class="u-ff(courgette) u-c(orange) u-fz(h1)">JoliTypo</span> Demo</h1>
<div class="subtitle u-fz(h5) u-ta(center)">
This is a sample page to let you try out our microtypography fixer.
Try JoliTypo online via this official demo.
</div>
<div class="subtitle u-fz(h5) u-ta(center) u-bb(orange) u-pb(base) u-w(70) u-mx(auto)">
Learn more at GitHub : <a href="https://github.com/jolicode/JoliTypo"
class="u-c(orange) u-tc(none) link">See repository</a>.
<a href="https://github.com/jolicode/JoliTypo"
class="u-c(orange) u-tc(none) link">Project documentation</a>
</div>
</header>

<div class="help u-ta(center) u-mt(double) u-fz(help)">
<p>You may try here the
<a href="https://jolicode.com/" class="u-c(orange)
u-tc(none) link">JoliCode</a>
Microtypography Fixer and see how it works.
<p>
JoliType is a PHP Microtypography fixer - it fixes the typographic<br>
errors in your HTML or text by applying a set of rules.
</p>
<p>
Simply select a locale and some fixers, paste in the text or
HTML you want to see fixed and profit !
Simply select a locale and some fixers,<br> paste in the text or
HTML you want to see fixed and get the result instantly.
</p>
</div>

Expand All @@ -84,9 +83,9 @@ <h3 class="u-fz(h3) u-ff(courgette) u-c(darkgrey) u-ta(center) u-my(double)">Sel
<div>
<select id="typo_fixer_locale" name="typo_fixer[locale]" required="required"
class="u-p(half) u-bgc(orangegradient) u-br(5) u-bor(none) u-c(white) u-fz(input) u-cur(pointer)">
<option value="" selected="selected">Select a locale</option>
<option value="">Select a locale</option>
<option value="fr">French</option>
<option value="en">English</option>
<option value="en" selected="selected">English</option>
<option value="de">German</option>
<option value="es">Spanish</option>
<option value="it">Italian</option>
Expand Down Expand Up @@ -734,13 +733,13 @@ <h3 class="u-fz(h3) u-ff(courgette) u-c(darkgrey) u-ta(center) u-my(double)">Sel

<div class="form__part u-my(double)">
<h3 class="u-fz(h3) u-ff(courgette) u-c(darkgrey) u-ta(center) u-my(double)">
Choose the fixes you want to apply
Choose the Fixers you want to apply
</h3>
<div class="form__fixes-wrapper o-grid o-grid--2 o-grid--5@tablet-up u-jc(center) u-ac(stretch)">
<div class="form__fixes-checkbox u-my(half) o-grid__col">
<label for="typo_fixers_0">
<div class="form__fixes-checkbox-inner js-box u-bgc(orangegradient) u-p(half) u-c(white) u-h(100) u-fz(input) u-br(5) u-d(flex) u-fxd(column) u-jc(space-between) u-ai(stretch) u-cur(pointer)">
<div class="form__label-name u-bb(white)">Dash</div>
<div class="form__label-name u-bb(white) u-fw(bold)">Dash</div>
<div class="form__label-desc u-pt(half)">Add longer dashes instead of regular ones</div>
<input type="checkbox" class="js-checkbox u-my(half) u-as(center)" id="typo_fixers_0" value="Dash" name="typo_fixer[fixers][]" checked="checked">
</div>
Expand All @@ -750,7 +749,7 @@ <h3 class="u-fz(h3) u-ff(courgette) u-c(darkgrey) u-ta(center) u-my(double)">
<div class="form__fixes-checkbox u-my(half) o-grid__col">
<label for="typo_fixers_1">
<div class="form__fixes-checkbox-inner js-box u-bgc(orangegradient) u-p(half) u-c(white) u-h(100) u-fz(input) u-br(5) u-d(flex) u-fxd(column) u-jc(space-between) u-ai(stretch) u-cur(pointer)">
<div class="form__label-name u-bb(white)">Dimension</div>
<div class="form__label-name u-bb(white) u-fw(bold)">Dimension</div>
<div class="form__label-desc u-pt(half)">Real × symbol between numbers</div>
<input type="checkbox" class="js-checkbox u-my(half) u-as(center)" id="typo_fixers_1" value="Dimension" name="typo_fixer[fixers][]" checked="checked">
</div>
Expand All @@ -760,8 +759,8 @@ <h3 class="u-fz(h3) u-ff(courgette) u-c(darkgrey) u-ta(center) u-my(double)">
<div class="form__fixes-checkbox u-my(half) o-grid__col">
<label for="typo_fixers_2">
<div class="form__fixes-checkbox-inner js-box u-bgc(orangegradient) u-p(half) u-c(white) u-h(100) u-fz(input) u-br(5) u-d(flex) u-fxd(column) u-jc(space-between) u-ai(stretch) u-cur(pointer)">
<div class="form__label-name u-bb(white)">Ellipsis</div>
<div class="form__label-desc u-pt(half)">Real ellipsis rather than three dots</div>
<div class="form__label-name u-bb(white) u-fw(bold)">Ellipsis</div>
<div class="form__label-desc u-pt(half)">Real ellipsis… rather than three dots</div>
<input type="checkbox" class="js-checkbox u-my(half) u-as(center)" id="typo_fixers_2" value="Ellipsis" name="typo_fixer[fixers][]" checked="checked">
</div>
</label>
Expand All @@ -770,8 +769,8 @@ <h3 class="u-fz(h3) u-ff(courgette) u-c(darkgrey) u-ta(center) u-my(double)">
<div class="form__fixes-checkbox u-my(half) o-grid__col">
<label for="typo_fixers_3">
<div class="form__fixes-checkbox-inner js-box u-bgc(orangegradient) u-p(half) u-c(white) u-h(100) u-fz(input) u-br(5) u-d(flex) u-fxd(column) u-jc(space-between) u-ai(stretch) u-cur(pointer)">
<div class="form__label-name u-bb(white)">SmartQuotes</div>
<div class="form__label-desc u-pt(half)">Language adequate quotes</div>
<div class="form__label-name u-bb(white) u-fw(bold)">SmartQuotes</div>
<div class="form__label-desc u-pt(half)">Language adequate «&nbsp;quotes&nbsp;»</div>
<input type="checkbox" class="js-checkbox u-my(half) u-as(center)" id="typo_fixers_3" value="SmartQuotes" name="typo_fixer[fixers][]" checked="checked">
</div>
</label>
Expand All @@ -780,7 +779,7 @@ <h3 class="u-fz(h3) u-ff(courgette) u-c(darkgrey) u-ta(center) u-my(double)">
<div class="form__fixes-checkbox u-my(half) o-grid__col">
<label for="typo_fixers_4">
<div class="form__fixes-checkbox-inner js-box u-bgc(orangegradient) u-p(half) u-c(white) u-h(100) u-fz(input) u-br(5) u-d(flex) u-fxd(column) u-jc(space-between) u-ai(stretch) u-cur(pointer)">
<div class="form__label-name u-bb(white)">FrenchNoBreakSpace</div>
<div class="form__label-name u-bb(white) u-fw(bold)">FrenchNoBreakSpace</div>
<div class="form__label-desc u-pt(half)">Set non breaking spaces before : ; ! ?</div>
<input type="checkbox" class="js-checkbox u-my(half) u-as(center)" id="typo_fixers_4" value="FrenchNoBreakSpace" name="typo_fixer[fixers][]">
</div>
Expand All @@ -790,7 +789,7 @@ <h3 class="u-fz(h3) u-ff(courgette) u-c(darkgrey) u-ta(center) u-my(double)">
<div class="form__fixes-checkbox u-my(half) o-grid__col">
<label for="typo_fixers_5">
<div class="form__fixes-checkbox-inner js-box u-bgc(orangegradient) u-p(half) u-c(white) u-h(100) u-fz(input) u-br(5) u-d(flex) u-fxd(column) u-jc(space-between) u-ai(stretch) u-cur(pointer)">
<div class="form__label-name u-bb(white)">NoSpaceBeforeComma</div>
<div class="form__label-name u-bb(white) u-fw(bold)">NoSpaceBeforeComma</div>
<div class="form__label-desc u-pt(half)">Remove spaces before commas</div>
<input type="checkbox" class="js-checkbox u-my(half) u-as(center)" id="typo_fixers_5" value="NoSpaceBeforeComma" name="typo_fixer[fixers][]" checked="checked">
</div>
Expand All @@ -800,7 +799,7 @@ <h3 class="u-fz(h3) u-ff(courgette) u-c(darkgrey) u-ta(center) u-my(double)">
<div class="form__fixes-checkbox u-my(half) o-grid__col">
<label for="typo_fixers_6">
<div class="form__fixes-checkbox-inner js-box u-bgc(orangegradient) u-p(half) u-c(white) u-h(100) u-fz(input) u-br(5) u-d(flex) u-fxd(column) u-jc(space-between) u-ai(stretch) u-cur(pointer)">
<div class="form__label-name u-bb(white)">Hyphen</div>
<div class="form__label-name u-bb(white) u-fw(bold)">Hyphen</div>
<div class="form__label-desc u-pt(half)">Automatic word-hyphenation</div>
<input type="checkbox" class="js-checkbox u-my(half) u-as(center)" id="typo_fixers_6" value="Hyphen" name="typo_fixer[fixers][]" checked="checked">
</div>
Expand All @@ -810,7 +809,7 @@ <h3 class="u-fz(h3) u-ff(courgette) u-c(darkgrey) u-ta(center) u-my(double)">
<div class="form__fixes-checkbox u-my(half) o-grid__col">
<label for="typo_fixers_7">
<div class="form__fixes-checkbox-inner js-box u-bgc(orangegradient) u-p(half) u-c(white) u-h(100) u-fz(input) u-br(5) u-d(flex) u-fxd(column) u-jc(space-between) u-ai(stretch) u-cur(pointer)">
<div class="form__label-name u-bb(white)">CurlyQuote</div>
<div class="form__label-name u-bb(white) u-fw(bold)">CurlyQuote</div>
<div class="form__label-desc u-pt(half)">Replace straight quotes by curly one’s</div>
<input type="checkbox" class="js-checkbox u-my(half) u-as(center)" id="typo_fixers_7" value="CurlyQuote" name="typo_fixer[fixers][]" checked="checked">
</div>
Expand All @@ -820,7 +819,7 @@ <h3 class="u-fz(h3) u-ff(courgette) u-c(darkgrey) u-ta(center) u-my(double)">
<div class="form__fixes-checkbox u-my(half) o-grid__col">
<label for="typo_fixers_8">
<div class="form__fixes-checkbox-inner js-box u-bgc(orangegradient) u-p(half) u-c(white) u-h(100) u-fz(input) u-br(5) u-d(flex) u-fxd(column) u-jc(space-between) u-ai(stretch) u-cur(pointer)">
<div class="form__label-name u-bb(white)">Trademark</div>
<div class="form__label-name u-bb(white) u-fw(bold)">Trademark</div>
<div class="form__label-desc u-pt(half)">Handle symbols like ™ © ®</div>
<input type="checkbox" class="js-checkbox u-my(half) u-as(center)" id="typo_fixers_8" value="Trademark" name="typo_fixer[fixers][]" checked="checked">
</div>
Expand All @@ -830,7 +829,7 @@ <h3 class="u-fz(h3) u-ff(courgette) u-c(darkgrey) u-ta(center) u-my(double)">
<div class="form__fixes-checkbox u-my(half) o-grid__col">
<label for="typo_fixers_9">
<div class="form__fixes-checkbox-inner js-box u-bgc(orangegradient) u-p(half) u-c(white) u-h(100) u-fz(input) u-br(5) u-d(flex) u-fxd(column) u-jc(space-between) u-ai(stretch) u-cur(pointer)">
<div class="form__label-name u-bb(white)">Unit</div>
<div class="form__label-name u-bb(white) u-fw(bold)">Unit</div>
<div class="form__label-desc u-pt(half)">Add non breaking spaces for units</div>
<input type="checkbox" class="js-checkbox u-my(half) u-as(center)" id="typo_fixers_9" value="Unit" name="typo_fixer[fixers][]" checked="checked">
</div>
Expand All @@ -839,37 +838,49 @@ <h3 class="u-fz(h3) u-ff(courgette) u-c(darkgrey) u-ta(center) u-my(double)">
</div>
</div>

<button class="js-check-all form__check-all u-br(5) u-c(white) u-bgc(orangegradient) u-px(base) u-py(semihalf) u-bor(none) u-cur(pointer) u-fz(input)">Uncheck all</button>
<button class="js-check-all form__check-all u-br(5) u-c(white) u-px(base) u-py(semihalf) u-bor(none) u-cur(pointer) u-fz(input)">Uncheck all</button>

<div class="form__part u-my(double)">
<h3 class="u-fz(h3) u-ff(courgette) u-c(darkgrey) u-ta(center) u-my(double)">
Paste in your text or HTML
</h3>

<div>
<textarea id="typo_fixer_content" name="typo_fixer[content]" required="required" class="js-content u-w(100) u-vh(45) u-bor(orange) u-br(5)"></textarea>
<textarea id="typo_fixer_content" name="typo_fixer[content]" required="required" class="js-content u-w(100) u-vh(45) u-bor(orange) u-br(5)">
&lt;p&gt;
"You have to let it all go - fear, doubt, disbelief" Morpheus said.
&lt;/p&gt;
&lt;p&gt;
Neo smirked. "I know kung fu."
&lt;/p&gt;
&lt;p&gt;
The city shimmered. He jumped - not to escape, but to fly.
&lt;/p&gt;
&lt;p&gt;
(c) The Matrix universe, used for illustrative purposes.
&lt;/p&gt;</textarea>
</div>
</div>

<button type="submit" name="submit" class="form__submit u-br(5) u-c(white) u-bgc(orangegradient) u-px(base) u-py(semihalf) u-bor(none) u-cur(pointer) u-fz(input)">
Behold Typo Madness !
Run JoliTypo now
</button>
</form>

<div id="result" class="u-d(none) u-mt(double)">
<h3 class="u-fz(h3) u-ff(courgette) u-c(darkgrey) u-ta(center) u-my(double)">
PHP Code
Result
</h3>

<pre id="phpCode" class="u-w(100) u-vh(25) u-bor(orange) u-br(5) u-over(auto)">
</pre>
<div id="resultContent" class="u-w(100) u-vh(25) u-bor(orange) u-br(5) u-over(auto)">
</div>

<h3 class="u-fz(h3) u-ff(courgette) u-c(darkgrey) u-ta(center) u-my(double)">
Result
PHP Code
</h3>

<div id="resultContent" class="u-w(100) u-vh(25) u-bor(orange) u-br(5) u-over(auto)">
</div>
<pre id="phpCode" class="u-w(100) u-vh(25) u-bor(orange) u-br(5) u-over(auto)">
</pre>
</div>

<footer class="u-ta(center) u-mt(double)">
Expand Down