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

update browser window styling #140

Merged
merged 2 commits into from
Jul 18, 2023
Merged

update browser window styling #140

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
1ca7352
update browser window styling
dmca-glasgow Jul 18, 2023
964eb35
fix tests
dmca-glasgow Jul 18, 2023
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
25 changes: 24 additions & 1 deletion compiler/src/html/wrapper/sidebar.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { Parent, Root } from 'mdast';
import { List, Parent, Root } from 'mdast';
import { toHast } from 'mdast-util-to-hast';
import { toc as getToc } from 'mdast-util-toc';

Expand All @@ -16,6 +16,8 @@ export async function createSidebar(mdast: Parent) {
const toc = getToc(mdast as Root, { maxDepth: 3 }).map;
const tocChildren = toc === null ? [] : [toHast(toc)];

printTableOfContents(toc);

return {
type: 'element',
tagName: 'aside',
Expand Down Expand Up @@ -65,3 +67,24 @@ async function createLogo() {
],
};
}

function printTableOfContents(toc: List | null) {
// toc?.children.forEach((a) => {
// a.children.forEach((b) => {
// if (b.type === 'paragraph') {
// // @ts-ignore
// console.log(`- [ ] ${b.children[0].children[0].value}`);
// }
// if (b.type === 'list') {
// b.children.forEach((c) => {
// c.children.forEach((d) => {
// if (d.type === 'paragraph') {
// // @ts-ignore
// console.log(` - [ ] ${d.children[0].children[0].value}`);
// }
// });
// });
// }
// });
// });
}
2 changes: 1 addition & 1 deletion compiler/src/knitr/__test__/knitr.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -323,7 +323,7 @@ describe('knitr', () => {
</div>
<div class="code-wrapper python-error-output">
<h6 class="console-heading">Python Console</h6>
<pre><code>Error in py_call_impl(callable, dots$args, dots$keywords): NameError: name 'a' is not defined
<pre><code>Error: NameError: name 'a' is not defined
Detailed traceback:
File "&#x3C;string>", line 1, in &#x3C;module></code></pre>
</div>
Expand Down
2 changes: 0 additions & 2 deletions compiler/src/knitr/knitr.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,11 +15,9 @@ import { mkdir, rmFile, writeFile } from '../utils/utils';
// bypass knitr for debugging
// export async function knitr(unit: Unit, ctx: Context) {
// const file = new VFile();

// file.value = unit.files.reduce((acc, o) => {
// return acc + EOL + EOL + o.value;
// }, '');

// return file;
// }

Expand Down
41 changes: 35 additions & 6 deletions compiler/src/mdast/__test__/program-switcher.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,41 @@ import {
} from '../../test-utils/test-processor';

describe('program switcher', () => {
it('should show the program switcher correctly', async () => {
const { html } = await testProcessor(
`
::::program-switcher

:::command-line
I am cli
:::

:::github-desktop
I am github desktop
:::

::::
`
);

const expected = unindentString(`
<div class="program-switcher">
<ul>
<li data-program="command-line">Command-line</li>
<li data-program="github-desktop">GitHub Desktop</li>
</ul>
<div data-program="command-line" class="program">
<p>I am cli</p>
</div>
<div data-program="github-desktop" class="program">
<p>I am github desktop</p>
</div>
</div>
`);

expect(html).toBe(expected);
});

it('should only show cli', async () => {
const { html } = await testProcessor(
`
Expand All @@ -24,14 +59,8 @@ describe('program switcher', () => {
}
);

console.log(html);

const expected = unindentString(`
<div class="program-switcher">
<ul>
<li data-program="command-line" class="active">Command-line</li>
<li data-program="github-desktop">GitHub Desktop</li>
</ul>
<div data-program="command-line" class="program show">
<p>I am cli</p>
</div>
Expand Down
183 changes: 111 additions & 72 deletions compiler/src/mdast/browser-window.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
import { Element } from 'hast';
import { Literal } from 'mdast';
import { LeafDirective } from 'mdast-util-directive';
import { Node } from 'unist';
Expand All @@ -8,97 +9,135 @@ import { failMessage } from '../utils/message';

export function browserWindow() {
return (tree: Node, file: VFile) => {
// visit(tree, 'image', (node) => {
// console.log(node);
// });

visit(tree, 'leafDirective', (node: LeafDirective) => {
if (node.name === 'browser') {
createBrowserWindow(node, file);
template(node, file);
}
});
};
}

type BrowserWindowAttributes = {
url: string;
};

function createBrowserWindow(node: LeafDirective, file: VFile) {
const { url } = node.attributes as BrowserWindowAttributes;
function template(node: LeafDirective, file: VFile) {
const url = node.attributes?.url || '';
const alt = node.attributes?.alt || '';
const imagePath = getImagePath(node, file);

const browser = createBrowserWindow(imagePath, url, alt);
const caption = createCaption(alt);

Object.assign(node, {
type: 'browser-window',
data: {
hName: 'div',
hName: 'figure',
hProperties: {
className: 'browser-window',
className: ['browser'],
},
hChildren: [browser, caption],
},
});
}

function createBrowserWindow(
imagePath: string,
url: string,
alt: string
): Element {
return {
type: 'element',
tagName: 'div',
properties: {
className: 'browser-window',
},
children: [
{
type: 'text',
value: '\n',
},
hChildren: [
{
type: 'text',
value: '\n',
{
type: 'element',
tagName: 'div',
properties: {
className: 'browser-window-wrapper',
},
{
type: 'element',
tagName: 'div',
properties: {
className: 'browser-window-wrapper',
children: [
createBrowserHeader(url),
{
type: 'text',
value: '\n',
},
children: [
{
type: 'element',
tagName: 'div',
properties: {
className: 'browser-window-header',
},
children: [
{
type: 'element',
tagName: 'div',
properties: {
className: 'browser-window-address-bar',
},
children: [
{
type: 'text',
value: url?.trim() || '',
},
],
},
],
{
type: 'element',
tagName: 'div',
properties: {
className: 'browser-window-content',
},
{
type: 'text',
value: '\n',
},
{
type: 'element',
tagName: 'div',
properties: {
className: 'browser-window-content',
},
children: [
{
type: 'element',
tagName: 'img',
properties: {
src: imagePath,
alt: '',
},
children: [
{
type: 'element',
tagName: 'img',
properties: {
src: imagePath,
alt,
},
],
},
{
type: 'text',
value: '\n',
},
],
},
],
children: [],
},
],
},
{
type: 'text',
value: '\n',
},
],
},
],
};
}

function createBrowserHeader(url: string): Element {
return {
type: 'element',
tagName: 'div',
properties: {
className: 'browser-window-header',
},
});
children: [
{
type: 'element',
tagName: 'div',
properties: {
className: 'browser-window-address-bar',
},
children: [
{
type: 'text',
value: url?.trim() || '',
},
],
},
],
};
}

function createCaption(alt: string): Element | null {
if (alt.trim() === '') {
return null;
}
return {
type: 'element',
tagName: 'figcaption',
children: [
{
type: 'element',
tagName: 'a',
children: [
{
type: 'text',
value: ` ${alt}`,
},
],
},
],
};
}

function getImagePath(node: LeafDirective, file: VFile) {
Expand Down
3 changes: 0 additions & 3 deletions template/src/styles/browser-window.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,4 @@
.browser-window {
padding: 2rem 0;
text-align: center;

.browser-window-wrapper {
display: inline-block;
border: 1px solid #0003;
Expand Down
4 changes: 4 additions & 0 deletions template/src/styles/code.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,9 @@ code {
font-family: monospace;
background: var(--boxoutBg);
border-radius: 0.2rem;

position: relative;
bottom: 0.05rem;
}

.code-wrapper, .terminal {
Expand All @@ -29,6 +32,7 @@ code {
padding: 0;
margin: 0;
background: transparent;
position: static;
}

&[class$="error-output"] {
Expand Down
Loading