Skip to content

Commit

Permalink
Render bracket references as superscript text
Browse files Browse the repository at this point in the history
This commit improves markdown rendering to convert reference labels
(e.g., `[1]`) to superscripts, improving document readability without
cluttering the text. This improvement applies documentation of all
scripts and categories.

Changes:

- Implement superscript conversion for reference labels within markdown
  content, ensuring a cleaner presentation of textual references.
- Enable HTML content within markdown, necessary for inserting `<sup>`
  elements due to limitations in `markdown-it`, see
  markdown-it/markdown-it#999 for details.
- Refactor markdown rendering process for improved testability and
  adherence to the Single Responsibility Principle.
- Create `_typography.scss` with font size definitions, facilitating
  better control over text presentation.
- Adjust external URL indicator icon sizing for consistency, aligning
  images with the top of the text to maintain a uniform appearence.
- Use normal font-size explicitly for documentation text to ensure
  consistency.
- Remove text size specification in `markdown-styles` mixin, using `1em`
  for spacing to simplify styling.
- Rename font sizing variables for clarity, distinguishing between
  absolute and relative units.
- Change `font-size-relative-smaller` to be `80%`, browser default for
  `font-size: smaller;` CSS style and use it with `<sup>` elements.
- Improve the logic for converting plain URLs to hyperlinks, removing
  trailing whitespace for cleaner link generation.
- Fix plain URL to hyperlink (autolinking) logic removing trailing
  whitespace from the original markdown content. This was revealed by
  tests after separating its logic.
- Increase test coverage with more tests.
- Add types for `markdown-it` through `@types/markdown-it` package for
  better editor support and maintainability.
- Simplify implementation of adding custom anchor attributes in
  `markdown-it` using latest documentation.
  • Loading branch information
undergroundwires committed Feb 9, 2024
1 parent 311fcb1 commit b9c89b7
Show file tree
Hide file tree
Showing 42 changed files with 1,036 additions and 378 deletions.
41 changes: 40 additions & 1 deletion package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,7 @@
"dependencies": {
"@floating-ui/vue": "^1.0.2",
"@juggle/resize-observer": "^3.4.0",
"@types/markdown-it": "^13.0.7",
"ace-builds": "^1.30.0",
"electron-log": "^5.0.1",
"electron-progressbar": "^2.1.0",
Expand Down
9 changes: 0 additions & 9 deletions src/presentation/assets/styles/_fonts.scss
Original file line number Diff line number Diff line change
Expand Up @@ -33,12 +33,3 @@
$font-normal : 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'source-code-pro', monospace;
$font-artistic : 'Yesteryear', cursive;
$font-main : 'Slabo 27px';

$font-size-smaller : 14px;
$font-size-small : 16px;
$font-size-normal : 18px;
$font-size-large : 22px;
$font-size-larger : 26px;
$font-size-largest : 40px;

$font-size-relative-smaller: 85%;
3 changes: 2 additions & 1 deletion src/presentation/assets/styles/_globals.scss
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@
@use "@/presentation/assets/styles/fonts" as *;
@use "@/presentation/assets/styles/mixins" as *;
@use "@/presentation/assets/styles/vite-path" as *;
@use "@/presentation/assets/styles/typography" as *;

* {
box-sizing: border-box;
Expand All @@ -20,5 +21,5 @@ a {
body {
background: $color-background;
font-family: $font-main;
font-size: $font-size-normal;
font-size: $font-size-absolute-normal;
}
8 changes: 7 additions & 1 deletion src/presentation/assets/styles/_mixins.scss
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
@use "@/presentation/assets/styles/colors" as *;
@use "@/presentation/assets/styles/fonts" as *;
@use "@/presentation/assets/styles/typography" as *;

@mixin hover-or-touch($selector-suffix: '', $selector-prefix: '&') {
@media (hover: hover) {
Expand Down Expand Up @@ -69,6 +70,11 @@
list-style: none;
}

@mixin reset-sup {
vertical-align: unset;
font-size: unset;
}

@mixin reset-button {
margin: 0;
padding-block: 0;
Expand All @@ -93,7 +99,7 @@

@mixin flat-button($disabled: false) {
@include reset-button;
$font-size: $font-size-normal;
$font-size: $font-size-absolute-normal;

@if $disabled {
color: $color-primary-light;
Expand Down
19 changes: 19 additions & 0 deletions src/presentation/assets/styles/_typography.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
/*
This naming convention for font sizes adheres to CSS standards, distinguishing between absolute and relative sizes.
We prefix each variable with its type (absolute or relative) for clear identification and context.
*/

// Absolute sizes use the <absolute-size> CSS data type, representing specific, fixed sizes unaffected by the parent element's size.
// See: https://archive.today/2024.02.02-005228/https://developer.mozilla.org/en-US/docs/Web/CSS/absolute-size.
$font-size-absolute-x-small : 14px;
$font-size-absolute-small : 16px;
$font-size-absolute-normal : 18px;
$font-size-absolute-large : 22px;
$font-size-absolute-x-large : 26px;
$font-size-absolute-xx-large : 40px;

// Relative sizes employ the <relative-size> CSS data type, allowing font size adjustments based on the parent element's size.
// See: https://archive.today/2024.02.02-010054/https://developer.mozilla.org/en-US/docs/Web/CSS/relative-size.
$font-size-relative-smallest : 80%; // Common browser standard for `font-size: smaller;`
$font-size-relative-smaller : 85%; // Common browser standard for `font-size: smaller;`
1 change: 1 addition & 0 deletions src/presentation/assets/styles/main.scss
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
/* This class is not supposed to more than forwarding other styles */

@forward "./fonts";
@forward "./typography";
@forward "./media";
@forward "./colors";
@forward "./globals";
Expand Down
4 changes: 2 additions & 2 deletions src/presentation/components/Code/CodeButtons/IconButton.vue
Original file line number Diff line number Diff line change
Expand Up @@ -81,7 +81,7 @@ export default defineComponent({
border-radius: 4px;
.button__icon {
font-size: $font-size-larger;
font-size: $font-size-absolute-x-large;
}
@include clickable;
Expand All @@ -99,7 +99,7 @@ export default defineComponent({
.button__text {
display: none;
font-family: $font-artistic;
font-size: $font-size-large;
font-size: $font-size-absolute-large;
color: $color-primary;
font-weight: 500;
@include hover-or-touch {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -63,14 +63,14 @@ export default defineComponent({
padding: 0.2rem;
.dollar {
margin-right: 0.5rem;
font-size: $font-size-smaller;
font-size: $font-size-absolute-x-small;
user-select: none;
}
.copy-action-container {
margin-left: 1rem;
}
code {
font-size: $font-size-small;
font-size: $font-size-absolute-small;
}
}
</style>
2 changes: 1 addition & 1 deletion src/presentation/components/Code/TheCodeArea.vue
Original file line number Diff line number Diff line change
Expand Up @@ -203,7 +203,7 @@ function getDefaultCode(language: ScriptingLanguage): string {
width: 100%;
height: 100%;
overflow: auto;
font-size: $font-size-small;
font-size: $font-size-absolute-small;
&__highlight {
background-color: $color-secondary-light;
position: absolute;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -142,7 +142,7 @@ function isClickable(element: Element) {
.error {
width: 100%;
text-align: center;
font-size: $font-size-largest;
font-size: $font-size-absolute-xx-large;
font-family: $font-normal;
}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -168,7 +168,7 @@ $card-horizontal-gap : $card-gap;
flex-direction: column;
flex: 1;
justify-content: center;
font-size: $font-size-large;
font-size: $font-size-absolute-large;
}
.card__inner__selection_indicator {
height: $card-inner-padding;
Expand All @@ -181,7 +181,7 @@ $card-horizontal-gap : $card-gap;
width: 100%;
margin-top: .25em;
vertical-align: middle;
font-size: $font-size-normal;
font-size: $font-size-absolute-normal;
}
}
.card__expander {
Expand All @@ -203,7 +203,7 @@ $card-horizontal-gap : $card-gap;
}
.card__expander__close-button {
font-size: $font-size-large;
font-size: $font-size-absolute-large;
align-self: flex-end;
margin-right: 0.25em;
@include clickable;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -57,6 +57,6 @@ export default defineComponent({
<style scoped lang="scss">
@use "@/presentation/assets/styles/main" as *;
.icon {
font-size: $font-size-normal;
font-size: $font-size-absolute-normal;
}
</style>
4 changes: 2 additions & 2 deletions src/presentation/components/Scripts/View/TheScriptsView.vue
Original file line number Diff line number Diff line change
Expand Up @@ -151,7 +151,7 @@ $margin-inner: 4px;
margin-top: 1em;
color: $color-primary-light;
.search__query__close-button {
font-size: $font-size-large;
font-size: $font-size-absolute-large;
margin-left: 0.25rem;
}
}
Expand All @@ -160,7 +160,7 @@ $margin-inner: 4px;
flex-direction: column;
word-break:break-word;
color: $color-on-primary;
font-size: $font-size-large;
font-size: $font-size-absolute-large;
padding:10px;
text-align:center;
> div {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -59,7 +59,7 @@ function formatAsMarkdownListItem(content: string): string {
flex: 1; // Expands the container to fill available horizontal space, enabling alignment of child items.
max-width: 100%; // Prevents horizontal expansion of inner content (e.g., when a code block is shown)
font-size: $font-size-normal;
font-size: $font-size-absolute-normal;
font-family: $font-main;
}
</style>
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,7 @@ export default defineComponent({
.documentation-button {
vertical-align: middle;
color: $color-primary;
font-size: $font-size-large;
font-size: $font-size-absolute-large;
:deep() { // This override leads to inconsistent highlight color, it should be re-styled.
@include hover-or-touch {
color: $color-primary-darker;
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
import { InlineReferenceLabelsToSuperscriptConverter } from './Renderers/InlineReferenceLabelsToSuperscriptConverter';
import { MarkdownItHtmlRenderer } from './Renderers/MarkdownItHtmlRenderer';
import { PlainTextUrlsToHyperlinksConverter } from './Renderers/PlainTextUrlsToHyperlinksConverter';
import type { MarkdownRenderer } from './MarkdownRenderer';

export class CompositeMarkdownRenderer implements MarkdownRenderer {
constructor(
private readonly renderers: readonly MarkdownRenderer[] = StandardMarkdownRenderers,
) {
if (!renderers.length) {
throw new Error('missing renderers');
}
}

public render(markdownContent: string): string {
let renderedContent = markdownContent;
for (const renderer of this.renderers) {
renderedContent = renderer.render(renderedContent);
}
return renderedContent;
}
}

const StandardMarkdownRenderers: readonly MarkdownRenderer[] = [
new PlainTextUrlsToHyperlinksConverter(),
new InlineReferenceLabelsToSuperscriptConverter(),
new MarkdownItHtmlRenderer(),
] as const;
Loading

0 comments on commit b9c89b7

Please sign in to comment.