diff --git a/aio/src/app/embedded/code/code-example.component.spec.ts b/aio/src/app/embedded/code/code-example.component.spec.ts
index 987258b884..cd50303c7f 100644
--- a/aio/src/app/embedded/code/code-example.component.spec.ts
+++ b/aio/src/app/embedded/code/code-example.component.spec.ts
@@ -81,6 +81,8 @@ class TestCodeComponent {
@Input() code = '';
@Input() language: string;
@Input() linenums: boolean | number;
+ @Input() path: string;
+ @Input() region: string;
get someCode() {
return this.code && this.code.length > 30 ? this.code.substr(0, 30) + '...' : this.code;
diff --git a/aio/src/app/embedded/code/code-example.component.ts b/aio/src/app/embedded/code/code-example.component.ts
index b84f240d65..5ba2c0aeb8 100644
--- a/aio/src/app/embedded/code/code-example.component.ts
+++ b/aio/src/app/embedded/code/code-example.component.ts
@@ -16,7 +16,8 @@ import { Component, ElementRef, OnInit } from '@angular/core';
selector: 'code-example',
template: `
@@ -33,6 +38,12 @@ const copiedLabel = 'Copied!';
})
export class CodeComponent implements OnChanges {
+ /**
+ * The code to be formatted, this should already be HTML encoded
+ */
+ @Input()
+ code: string;
+
/**
* The language of the code to render
* (could be javascript, dart, typescript, etc)
@@ -50,10 +61,16 @@ export class CodeComponent implements OnChanges {
linenums: boolean | number | string;
/**
- * The code to be formatted, this should already be HTML encoded
+ * path to the source of the code being displayed
*/
@Input()
- code: string;
+ path: string;
+
+ /**
+ * region of the source of the code being displayed
+ */
+ @Input()
+ region: string;
/**
* The element in the template that will display the formatted code
@@ -70,7 +87,9 @@ export class CodeComponent implements OnChanges {
this.code = this.code && leftAlign(this.code);
if (!this.code) {
- this.setCodeHtml('The code sample is missing.
');
+ const src = this.path ? this.path + (this.region ? '#' + this.region : '') : '';
+ const srcMsg = src ? ` for
${src}` : '.';
+ this.setCodeHtml(`The code sample is missing${srcMsg}
`);
return;
}
@@ -117,7 +136,7 @@ export class CodeComponent implements OnChanges {
// if no linenums, enable line numbers if more than one line
return linenums == null || linenums === NaN ?
- (this.code.match(/\n/g) || []).length > 1 : linenums;
+ (this.code.match(/\n/g) || []).length > defaultLineNumsCount : linenums;
}
}
diff --git a/aio/tools/transforms/examples-package/processors/render-examples.js b/aio/tools/transforms/examples-package/processors/render-examples.js
index 35ecde9ac7..670dd0792a 100644
--- a/aio/tools/transforms/examples-package/processors/render-examples.js
+++ b/aio/tools/transforms/examples-package/processors/render-examples.js
@@ -17,8 +17,6 @@ module.exports = function renderExamples(getExampleRegion) {
if (attrMap.path) {
// We found a path attribute so look up the example and rebuild the HTML
const exampleContent = getExampleRegion(doc, attrMap.path, attrMap.region);
- delete attrMap.path;
- delete attrMap.region;
attributes = Object.keys(attrMap).map(key => ` ${key}="${attrMap[key].replace(/"/g, '"')}"`).join('');
return `<${element}${attributes}>\n${exampleContent}\n${element}>`;
}
diff --git a/aio/tools/transforms/examples-package/processors/render-examples.spec.js b/aio/tools/transforms/examples-package/processors/render-examples.spec.js
index b02580a06f..c0e1f90a1f 100644
--- a/aio/tools/transforms/examples-package/processors/render-examples.spec.js
+++ b/aio/tools/transforms/examples-package/processors/render-examples.spec.js
@@ -45,7 +45,7 @@ describe('renderExamples processor', () => {
{ renderedContent: `<${CODE_TAG} path="test/url">Some code${CODE_TAG}>`}
];
processor.$process(docs);
- expect(docs[0].renderedContent).toEqual(`<${CODE_TAG}>\nwhole file\n${CODE_TAG}>`);
+ expect(docs[0].renderedContent).toEqual(`<${CODE_TAG} path="test/url">\nwhole file\n${CODE_TAG}>`);
});
it(`should replace all instances of <${CODE_TAG}> tags`, () => {
@@ -53,7 +53,7 @@ describe('renderExamples processor', () => {
{ renderedContent: `<${CODE_TAG} path="test/url">Some code${CODE_TAG}><${CODE_TAG} path="test/url" region="region-1">Other code${CODE_TAG}>`}
];
processor.$process(docs);
- expect(docs[0].renderedContent).toEqual(`<${CODE_TAG}>\nwhole file\n${CODE_TAG}><${CODE_TAG}>\nregion 1 contents\n${CODE_TAG}>`);
+ expect(docs[0].renderedContent).toEqual(`<${CODE_TAG} path="test/url">\nwhole file\n${CODE_TAG}><${CODE_TAG} path="test/url" region="region-1">\nregion 1 contents\n${CODE_TAG}>`);
});
it('should contain the region contents from the example file if a region is specified', () => {
@@ -61,7 +61,7 @@ describe('renderExamples processor', () => {
{ renderedContent: `<${CODE_TAG} path="test/url" region="region-1">Some code${CODE_TAG}>` }
];
processor.$process(docs);
- expect(docs[0].renderedContent).toEqual(`<${CODE_TAG}>\nregion 1 contents\n${CODE_TAG}>`);
+ expect(docs[0].renderedContent).toEqual(`<${CODE_TAG} path="test/url" region="region-1">\nregion 1 contents\n${CODE_TAG}>`);
});
it(`should replace the content of the <${CODE_TAG}> tag with the whole contents from an example file if the region is empty`, () => {
@@ -69,15 +69,16 @@ describe('renderExamples processor', () => {
{ renderedContent: `<${CODE_TAG} path="test/url" region="">Some code${CODE_TAG}>` }
];
processor.$process(docs);
- expect(docs[0].renderedContent).toEqual(`<${CODE_TAG}>\nwhole file\n${CODE_TAG}>`);
+ expect(docs[0].renderedContent).toEqual(`<${CODE_TAG} path="test/url" region="">\nwhole file\n${CODE_TAG}>`);
});
- it('should remove the path and region attributes but leave the other attributes alone', () => {
- const docs = [
- { renderedContent: `<${CODE_TAG} class="special" path="test/url" linenums="15" region="region-1" id="some-id">Some code${CODE_TAG}>` }
+ it('should pass along all attributes including path and region', () => {
+ const openTag = `<${CODE_TAG} class="special" path="test/url" linenums="15" region="region-1" id="some-id">`;
+
+ const docs = [ { renderedContent: `${openTag}Some code${CODE_TAG}>` }
];
processor.$process(docs);
- expect(docs[0].renderedContent).toEqual(`<${CODE_TAG} class="special" linenums="15" id="some-id">\nregion 1 contents\n${CODE_TAG}>`);
+ expect(docs[0].renderedContent).toEqual(`${openTag}\nregion 1 contents\n${CODE_TAG}>`);
});
it('should cope with spaces and double quotes inside attribute values', () => {
@@ -85,7 +86,7 @@ describe('renderExamples processor', () => {
{ renderedContent: `<${CODE_TAG} title='a "quoted" value' path="test/url">${CODE_TAG}>`}
];
processor.$process(docs);
- expect(docs[0].renderedContent).toEqual(`<${CODE_TAG} title="a "quoted" value">\nwhole file\n${CODE_TAG}>`);
+ expect(docs[0].renderedContent).toEqual(`<${CODE_TAG} title="a "quoted" value" path="test/url">\nwhole file\n${CODE_TAG}>`);
});
})
);