Skip to content

Commit

Permalink
Merge pull request #102 from UofGAnalytics/columns
Browse files Browse the repository at this point in the history 
Columns
  • Loading branch information
@dmca-glasgow
dmca-glasgow committed Apr 29, 2022
2 parents afddc74 + e5e43d9 commit de0349b
Show file tree
Hide file tree
Showing 15 changed files with 388 additions and 33 deletions.
5 changes: 5 additions & 0 deletions compiler/src/cli/cli.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,10 @@ const { argv } = yargs(process.argv.slice(2))
type: 'boolean',
description: "Don't embed assets",
})
.option('noEmbedAssetUrl', {
type: 'boolean',
description: "Don't complete asset Url",
})
.option('noCache', {
type: 'boolean',
description: 'No cache',
Expand Down Expand Up @@ -72,6 +76,7 @@ const options: Options = {
noSyntaxHighlight: argv.noSyntaxHighlight,
noReport: argv.noReport,
noEmbedAssets: argv.noEmbedAssets,
noEmbedAssetUrl: argv.noEmbedAssetUrl,
noCache: argv.noCache,
noTexSvg: argv.noTexSvg,
spelling: argv.spelling,
Expand Down
1 change: 1 addition & 0 deletions compiler/src/context.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ export type Options = {
noReport?: boolean;
reportOnlyErrors?: boolean;
noEmbedAssets?: boolean;
noEmbedAssetUrl?: boolean;
noCache?: boolean;
noTexSvg?: boolean;
week?: number;
Expand Down
38 changes: 38 additions & 0 deletions compiler/src/linter/assert-columns.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,38 @@
import { Root } from 'mdast';
import { ContainerDirective } from 'mdast-util-directive';
import { visit } from 'unist-util-visit';
import { VFile } from 'vfile';

import { failMessage } from '../utils/message';

export function assertColumnStructure() {
return (tree: Root, file: VFile) => {
visit(
tree,
'containerDirective',
(node: ContainerDirective, index, _parent) => {
if (node.name === 'columns') {
const children = node.children as ContainerDirective[];
const columns = children.filter((o) => o.name === 'column');
if (columns.length < 2) {
failMessage(
file,
'Columns must contain at least 2 columns',
node.position
);
}
}
if (node.name === 'column') {
const parent = _parent as ContainerDirective;
if (!parent || parent.name !== 'columns') {
failMessage(
file,
'Column must be nested inside columns',
node.position
);
}
}
}
);
};
}
2 changes: 2 additions & 0 deletions compiler/src/linter/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ import { VFile } from 'vfile';

import { Context } from '../context';
import { assertAssetExists } from './assert-asset-exists';
import { assertColumnStructure } from './assert-columns';
import { assertNoH1 } from './assert-no-h1';
import { assertTaskAnswerStructure } from './assert-task-answer';
import { assertVideoAttributes } from './assert-video-attributes';
Expand Down Expand Up @@ -51,6 +52,7 @@ export async function createReport(
.use(assertAssetExists)
.use(assertVideoAttributes)
.use(assertTaskAnswerStructure)
.use(assertColumnStructure)
.use(assertWeblinkTarget)
.use(assertNoH1)
.use(lintLatex)
Expand Down
213 changes: 213 additions & 0 deletions compiler/src/mdast/__test__/columns.test.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,213 @@
import {
ignoreWhitespace,
testProcessor,
} from '../../test-utils/test-processor';

describe('columns', () => {
it('should render columns from macro', async () => {
const { md } = await testProcessor(`
##[columns]
###[column]
Column 1
###[/column]
###[column]
Column 2
###[/column]
##[/columns]
`);

expect(ignoreWhitespace(md)).toBe(
ignoreWhitespace(`
::::columns
:::column
Column 1
:::
:::column
Column 2
:::
::::
`)
);
});

it('should fail on columns with no column', async () => {
const { hasFailingMessage } = await testProcessor(
`
::::columns
::::
`,
{ shouldFail: true }
);
expect(
hasFailingMessage('Columns must contain at least 2 columns')
).toBe(true);
});

it('should fail on columns with one column', async () => {
const { hasFailingMessage } = await testProcessor(
`
::::columns
:::column
Column 1
:::
::::
`,
{ shouldFail: true }
);
expect(
hasFailingMessage('Columns must contain at least 2 columns')
).toBe(true);
});

it('should fail on columns with one column', async () => {
const { hasFailingMessage } = await testProcessor(
`
:::column
Column 1
:::
`,
{ shouldFail: true }
);
expect(hasFailingMessage('Column must be nested inside columns')).toBe(
true
);
});

it('should render columns', async () => {
const { html } = await testProcessor(`
::::columns
:::column
Column 1
:::
:::column
Column 2
:::
::::
`);

expect(ignoreWhitespace(html)).toBe(
ignoreWhitespace(`
<div class="columns">
<div class="column">
<p>Column 1</p>
</div>
<div class="column">
<p>Column 2</p>
</div>
</div>
`)
);
});

it('should render columns with image', async () => {
const { html } = await testProcessor(`
##[columns]
###[column, imgsrc="LMpr.pdf"]
###[/column]
###[column, imgsrc="LMpo.pdf"]
###[/column]
##[/columns]
`);

expect(ignoreWhitespace(html)).toBe(
ignoreWhitespace(`
<div class="columns">
<div class="column">
<figure class="img-wrapper" id="figure-1">
<div class="img-bg">
<img src="LMpr.pdf">
</div>
<figcaption><a href="#figure-1"><span class="caption-count">Figure 1</span></a></figcaption>
</figure>
</div>
<div class="column">
<figure class="img-wrapper" id="figure-2">
<div class="img-bg">
<img src="LMpo.pdf">
</div>
<figcaption><a href="#figure-2"><span class="caption-count">Figure 2</span></a></figcaption>
</figure>
</div>
</div>
`)
);
});

it('should render columns with image and alt text', async () => {
const { html } = await testProcessor(`
##[columns]
###[column, imgsrc="LMpr.pdf"]
Alt text 1
###[/column]
###[column, imgsrc="LMpo.pdf"]
Alt text 2
###[/column]
##[/columns]
`);

expect(ignoreWhitespace(html)).toBe(
ignoreWhitespace(`
<div class="columns">
<div class="column">
<figure class="img-wrapper" id="alt-text-1">
<div class="img-bg">
<img src="LMpr.pdf" alt="Alt text 1">
</div>
<figcaption><a href="#alt-text-1"><span class="caption-count">Figure 1:</span> Alt text 1</a></figcaption>
</figure>
</div>
<div class="column">
<figure class="img-wrapper" id="alt-text-2">
<div class="img-bg">
<img src="LMpo.pdf" alt="Alt text 2">
</div>
<figcaption><a href="#alt-text-2"><span class="caption-count">Figure 2:</span> Alt text 2</a></figcaption>
</figure>
</div>
</div>
`)
);
});

it('should render columns with image and alt text and other text', async () => {
const { html } = await testProcessor(`
##[columns]
###[column, imgsrc="LMpr.pdf"]
Alt text 1
More text 1
###[/column]
###[column, imgsrc="LMpo.pdf"]
Alt text 2
More text 2
###[/column]
##[/columns]
`);

expect(ignoreWhitespace(html)).toBe(
ignoreWhitespace(`
<div class="columns">
<div class="column">
<figure class="img-wrapper" id="alt-text-1">
<div class="img-bg">
<img src="LMpr.pdf" alt="Alt text 1">
</div>
<figcaption><a href="#alt-text-1"><span class="caption-count">Figure 1:</span> Alt text 1</a></figcaption>
</figure>
<p>More text 1</p>
</div>
<div class="column">
<figure class="img-wrapper" id="alt-text-2">
<div class="img-bg">
<img src="LMpo.pdf" alt="Alt text 2">
</div>
<figcaption><a href="#alt-text-2"><span class="caption-count">Figure 2:</span> Alt text 2</a></figcaption>
</figure>
<p>More text 2</p>
</div>
</div>
`)
);
});
});
55 changes: 33 additions & 22 deletions compiler/src/mdast/__test__/images.test.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,37 +3,48 @@ import {
testProcessor,
} from '../../test-utils/test-processor';

// <figure class="img-wrapper" id="#my-alt-text">
// <div class="img-bg">
// <img src="" alt="My alt text">
// </div>
// <figcaption>
// <a href="#my-alt-text">
// <span class="caption-count">Figure 1: </span>
// My alt text
// </a>
// </figcaption>
// </figure>

describe('images', () => {
it('should render an html figure', async () => {
const { html } = await testProcessor(`
![]()
const { html } = await testProcessor('![]()');

const expected = ignoreWhitespace(`
<p></p>
<figure class="img-wrapper" id="figure-1">
<div class="img-bg">
<img src="" alt="">
</div>
<figcaption>
<a href="#figure-1">
<span class="caption-count">Figure 1</span>
</a>
</figcaption>
</figure>
<p></p>
`);

expect(ignoreWhitespace(html)).toMatch(
/<figureclass="img-wrapper"id="figure-1"><divclass="img-bg"><imgsrc=".+"alt=""><\/div><figcaption><ahref="#figure-1"><spanclass="caption-count">Figure1<\/span><\/a><\/figcaption><\/figure>/
);
expect(ignoreWhitespace(html)).toBe(expected);
});

it('should render an html figure with alt text', async () => {
const { html } = await testProcessor(`
![My alt text]()
const { html } = await testProcessor('![My alt text]()');

const expected = ignoreWhitespace(`
<p></p>
<figure class="img-wrapper" id="my-alt-text">
<div class="img-bg">
<img src="" alt="My alt text">
</div>
<figcaption>
<a href="#my-alt-text">
<span class="caption-count">Figure 1: </span>
My alt text
</a>
</figcaption>
</figure>
<p></p>
`);

expect(ignoreWhitespace(html)).toMatch(
/<figureclass="img-wrapper"id="my-alt-text"><divclass="img-bg"><imgsrc=".+"alt="Myalttext"><\/div><figcaption><ahref="#my-alt-text"><spanclass="caption-count">Figure1:<\/span>Myalttext<\/a><\/figcaption><\/figure>/
);
expect(ignoreWhitespace(html)).toBe(expected);
});

it('should render an html figure with custom attributes', async () => {
Expand Down
Loading

0 comments on commit de0349b

Please sign in to comment.