From 696d32e94282b8f0fc039d0550ee7813aa0dbaa7 Mon Sep 17 00:00:00 2001 From: Alexey Ivanov Date: Thu, 28 Nov 2019 00:06:48 +0900 Subject: [PATCH 01/11] Update sidebar structure to allow tutorial links --- src/Documentation/SidebarMenu/helper.js | 6 ++- src/Documentation/SidebarMenu/helper.test.js | 49 ++++++++++++++++++++ 2 files changed, 54 insertions(+), 1 deletion(-) diff --git a/src/Documentation/SidebarMenu/helper.js b/src/Documentation/SidebarMenu/helper.js index bc83eef2e5..1a5f9330bf 100644 --- a/src/Documentation/SidebarMenu/helper.js +++ b/src/Documentation/SidebarMenu/helper.js @@ -14,6 +14,9 @@ import sidebar from '../sidebar' source: "/static/docs/get-started/add-files.md", prev: "/doc/get-started/configure", next: "/doc/get-started/share-data", + tutorials: { + katacoda: "https://www.katacoda.com/loodse/courses/docker/docker-02-install" + } children: [] } */ @@ -74,7 +77,7 @@ function validateRawItem({ slug, source, children }) { function normalizeItem({ item, parentPath, resultRef, prevRef }) { validateRawItem(item) - const { label, slug, source } = item + const { label, slug, source, tutorials } = item // If prev item doesn't have source we need to recirsively search for it const prevItemWithSource = @@ -89,6 +92,7 @@ function normalizeItem({ item, parentPath, resultRef, prevRef }) { path: PATH_ROOT + parentPath + slug, source: source === false ? false : sourcePath, label: label ? label : startCase(slug), + tutorials: tutorials || {}, prev, next: undefined } diff --git a/src/Documentation/SidebarMenu/helper.test.js b/src/Documentation/SidebarMenu/helper.test.js index 01ca93da5a..896ad49f75 100644 --- a/src/Documentation/SidebarMenu/helper.test.js +++ b/src/Documentation/SidebarMenu/helper.test.js @@ -13,6 +13,7 @@ describe('SidebarMenu/helper', () => { label: 'Item Name', path: '/doc/item-name', source: '/static/docs/item-name.md', + tutorials: {}, prev: undefined, next: undefined } @@ -31,6 +32,7 @@ describe('SidebarMenu/helper', () => { label: 'Item Name', path: '/doc/item-name', source: '/static/docs/item-name.md', + tutorials: {}, prev: undefined, next: undefined } @@ -49,6 +51,7 @@ describe('SidebarMenu/helper', () => { label: 'Custom Label', path: '/doc/item-name', source: '/static/docs/item-name.md', + tutorials: {}, prev: undefined, next: undefined } @@ -67,6 +70,37 @@ describe('SidebarMenu/helper', () => { label: 'Item Name', path: '/doc/item-name', source: '/static/docs/item-name/index.md', + tutorials: {}, + prev: undefined, + next: undefined + } + ] + + jest.doMock('../sidebar.json', () => rawData) + const sidebarData = require('./helper').default + + expect(sidebarData).toEqual(result) + }) + + it('Forwards tutorials', () => { + const rawData = [ + { + slug: 'item-name', + tutorials: { + katacoda: + 'https://www.katacoda.com/loodse/courses/dvc/dvc-01-install' + } + } + ] + const result = [ + { + label: 'Item Name', + path: '/doc/item-name', + source: '/static/docs/item-name.md', + tutorials: { + katacoda: + 'https://www.katacoda.com/loodse/courses/dvc/dvc-01-install' + }, prev: undefined, next: undefined } @@ -90,6 +124,7 @@ describe('SidebarMenu/helper', () => { label: 'Item Name', path: '/doc/item-name', source: '/static/docs/item-name.md', + tutorials: {}, prev: undefined, next: '/doc/item-name/nested-item', children: [ @@ -97,6 +132,7 @@ describe('SidebarMenu/helper', () => { label: 'Nested Item', path: '/doc/item-name/nested-item', source: '/static/docs/item-name/nested-item.md', + tutorials: {}, prev: '/doc/item-name', next: '/doc/item-name/nested-item/subnested-item', children: [ @@ -105,6 +141,7 @@ describe('SidebarMenu/helper', () => { path: '/doc/item-name/nested-item/subnested-item', source: '/static/docs/item-name/nested-item/subnested-item.md', + tutorials: {}, prev: '/doc/item-name/nested-item', next: undefined } @@ -130,6 +167,7 @@ describe('SidebarMenu/helper', () => { label: 'First Item', path: '/doc/first-item', source: '/static/docs/first-item.md', + tutorials: {}, prev: undefined, next: '/doc/first-item/nested-item', children: [ @@ -137,6 +175,7 @@ describe('SidebarMenu/helper', () => { label: 'Nested Item', path: '/doc/first-item/nested-item', source: '/static/docs/first-item/nested-item.md', + tutorials: {}, prev: '/doc/first-item', next: '/doc/second-item' } @@ -146,6 +185,7 @@ describe('SidebarMenu/helper', () => { label: 'Second Item', path: '/doc/second-item', source: '/static/docs/second-item.md', + tutorials: {}, prev: '/doc/first-item/nested-item', next: undefined } @@ -167,6 +207,7 @@ describe('SidebarMenu/helper', () => { label: 'First Item', path: '/doc/first-item', source: '/static/docs/first-item.md', + tutorials: {}, prev: undefined, next: '/doc/second-item' }, @@ -174,6 +215,7 @@ describe('SidebarMenu/helper', () => { label: 'Second Item', path: '/doc/second-item', source: false, + tutorials: {}, prev: '/doc/first-item', next: '/doc/second-item/nested-item', children: [ @@ -181,6 +223,7 @@ describe('SidebarMenu/helper', () => { label: 'Nested Item', path: '/doc/second-item/nested-item', source: '/static/docs/second-item/nested-item.md', + tutorials: {}, prev: '/doc/first-item', next: undefined } @@ -210,6 +253,7 @@ describe('SidebarMenu/helper', () => { label: 'First Item', path: '/doc/first-item', source: '/static/docs/first-item.md', + tutorials: {}, prev: undefined, next: '/doc/second-item' }, @@ -217,6 +261,7 @@ describe('SidebarMenu/helper', () => { label: 'Second Item', path: '/doc/second-item', source: false, + tutorials: {}, prev: '/doc/first-item', next: '/doc/second-item/nested-item', children: [ @@ -224,6 +269,7 @@ describe('SidebarMenu/helper', () => { label: 'Nested Item', path: '/doc/second-item/nested-item', source: false, + tutorials: {}, prev: '/doc/first-item', next: '/doc/second-item/nested-item/subnested-item', children: [ @@ -232,6 +278,7 @@ describe('SidebarMenu/helper', () => { path: '/doc/second-item/nested-item/subnested-item', source: '/static/docs/second-item/nested-item/subnested-item.md', + tutorials: {}, prev: '/doc/first-item', next: undefined } @@ -278,6 +325,7 @@ describe('SidebarMenu/helper', () => { label: 'Item Name', path: '/doc/item-name', source: '/static/docs/item-name.md', + tutorials: {}, prev: undefined, next: undefined } @@ -302,6 +350,7 @@ describe('SidebarMenu/helper', () => { label: 'Subnested Item', path: '/doc/item-name/nested-item/subnested-item', source: '/static/docs/item-name/nested-item/subnested-item.md', + tutorials: {}, prev: undefined, next: undefined } From 48c1e285f5aac84941a2814ec015523c706769de Mon Sep 17 00:00:00 2001 From: Alexey Ivanov Date: Thu, 28 Nov 2019 00:58:01 +0900 Subject: [PATCH 02/11] Add basic display for tutorials --- package.json | 1 + pages/doc.js | 8 +++++-- src/Documentation/RightPanel/RightPanel.js | 27 ++++++++++++++++------ yarn.lock | 5 ++++ 4 files changed, 32 insertions(+), 9 deletions(-) diff --git a/package.json b/package.json index 7d1ae3837e..80e5684ed7 100644 --- a/package.json +++ b/package.json @@ -32,6 +32,7 @@ "lodash.kebabcase": "^4.1.1", "lodash.startcase": "^4.4.0", "lodash.throttle": "^4.1.1", + "lodash.topairs": "^4.3.0", "next": "^9.1.4", "perfect-scrollbar": "^1.4.0", "prop-types": "^15.7.2", diff --git a/pages/doc.js b/pages/doc.js index 502afefbff..291d3feb19 100644 --- a/pages/doc.js +++ b/pages/doc.js @@ -176,7 +176,7 @@ export default class Documentation extends Component { render() { const { - currentItem: { source, path, label, next, prev }, + currentItem: { source, path, label, tutorials, next, prev }, headings, markdown, pageNotFound, @@ -225,7 +225,11 @@ export default class Documentation extends Component { onNavigate={this.onNavigate} /> )} - + ) diff --git a/src/Documentation/RightPanel/RightPanel.js b/src/Documentation/RightPanel/RightPanel.js index 7bb6a3722b..1cf3832a81 100644 --- a/src/Documentation/RightPanel/RightPanel.js +++ b/src/Documentation/RightPanel/RightPanel.js @@ -4,6 +4,8 @@ import styled from 'styled-components' import { LightButton } from '../LightButton' // utils import throttle from 'lodash.throttle' +import topairs from 'lodash.topairs' +import startCase from 'lodash.startcase' const ROOT_ELEMENT = 'bodybag' const MARKDOWN_ROOT = '#markdown-root' @@ -109,20 +111,23 @@ export default class RightPanel extends React.PureComponent { }, 100) render() { - const { headings, githubLink } = this.props + const { headings, githubLink, tutorials } = this.props const { current } = this.state + const tutorialsData = topairs(tutorials) + return ( - {headings.length ? ( + {!headings.length && !tutorialsData.length && } + {headings.length > 0 && ( <>
Content

- {headings.map(({ slug, text }, headingIndex) => ( + {headings.map(({ slug, text }) => ( {text} @@ -130,12 +135,19 @@ export default class RightPanel extends React.PureComponent { ))}
- ) : ( + )} + {tutorialsData.length > 0 && ( <> - +
Tutorials
+
+ {tutorialsData.map(([key, value]) => ( + + {startCase(key)} + + ))} +
)} - 🐛 @@ -173,6 +185,7 @@ RightPanel.propTypes = { text: PropTypes.string.isRequired }) ).isRequired, + tutorials: PropTypes.object, githubLink: PropTypes.string.isRequired } diff --git a/yarn.lock b/yarn.lock index 7d2d16752e..08238e5314 100644 --- a/yarn.lock +++ b/yarn.lock @@ -5702,6 +5702,11 @@ lodash.throttle@^4.1.1: resolved "https://registry.yarnpkg.com/lodash.throttle/-/lodash.throttle-4.1.1.tgz#c23e91b710242ac70c37f1e1cda9274cc39bf2f4" integrity sha1-wj6RtxAkKscMN/HhzaknTMOb8vQ= +lodash.topairs@^4.3.0: + version "4.3.0" + resolved "https://registry.yarnpkg.com/lodash.topairs/-/lodash.topairs-4.3.0.tgz#3b6deaa37d60fb116713c46c5f17ea190ec48d64" + integrity sha1-O23qo31g+xFnE8RsXxfqGQ7EjWQ= + lodash@^4.17.11, lodash@^4.17.13, lodash@^4.17.14, lodash@^4.17.15, lodash@^4.17.4: version "4.17.15" resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.15.tgz#b447f6670a0455bbfeedd11392eff330ea097548" From 0e0aa59a0b57a1143f53429df9cc5166321aa1a1 Mon Sep 17 00:00:00 2001 From: Alexey Ivanov Date: Thu, 28 Nov 2019 00:58:20 +0900 Subject: [PATCH 03/11] Add tutorial example --- src/Documentation/sidebar.json | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/Documentation/sidebar.json b/src/Documentation/sidebar.json index 512a6018ef..093293ea7b 100644 --- a/src/Documentation/sidebar.json +++ b/src/Documentation/sidebar.json @@ -12,7 +12,10 @@ "import-data", { "label": "Connect with Code", - "slug": "connect-code-and-data" + "slug": "connect-code-and-data", + "tutorials": { + "katacoda": "https://www.katacoda.com/loodse/courses/dvc/dvc-01-install" + } }, "pipeline", "visualize", From ef95e165f59c2e0b32473d80c2aee0b117dfb28c Mon Sep 17 00:00:00 2001 From: Alexey Ivanov Date: Thu, 28 Nov 2019 01:10:20 +0900 Subject: [PATCH 04/11] Add icons to known platforms --- src/Documentation/RightPanel/RightPanel.js | 14 +++++++++++++- static/tutorial-icons/katacoda.png | Bin 0 -> 2103 bytes 2 files changed, 13 insertions(+), 1 deletion(-) create mode 100644 static/tutorial-icons/katacoda.png diff --git a/src/Documentation/RightPanel/RightPanel.js b/src/Documentation/RightPanel/RightPanel.js index 1cf3832a81..77fa07f44c 100644 --- a/src/Documentation/RightPanel/RightPanel.js +++ b/src/Documentation/RightPanel/RightPanel.js @@ -10,6 +10,10 @@ import startCase from 'lodash.startcase' const ROOT_ELEMENT = 'bodybag' const MARKDOWN_ROOT = '#markdown-root' +const icons = { + katacoda: '/static/tutorial-icons/katacoda.png' +} + const imageChecker = (images, callback) => { // IE can't use forEach on array-likes const imagesArray = Array.prototype.slice.call(images) @@ -142,7 +146,8 @@ export default class RightPanel extends React.PureComponent {
{tutorialsData.map(([key, value]) => ( - {startCase(key)} + {icons[key] && } + Run in {startCase(key)} ))}
@@ -264,3 +269,10 @@ const Spacer = styled.div` const Description = styled.p` color: #3c3937; ` + +const Icon = styled.img` + float: left; + width: 16px; + height: 16px; + margin: 5px 5px 5px 0; +` diff --git a/static/tutorial-icons/katacoda.png b/static/tutorial-icons/katacoda.png new file mode 100644 index 0000000000000000000000000000000000000000..2e4bbc5df6d09650b07652075795ff2b61e463de GIT binary patch literal 2103 zcmV-72*~$|P)CN5bNHFagF4zIuyzp6JZoX(W*_0gi`A4ZcTI{vXYaK+mK`l z>1oqNrMuE)H?5?LOX|J9GtYB+o^zga&eNXG*}r-}&-eL0bNT(=ukYvfmHDjC`cL}# z$rJL6S7UQ--o0-q6voQ_;Q+rp9TJ?ZE+1~Gue#gUe=D`;r;A)SH@9j3?*FZ)f1LjM z&70txH*d!O$(Bd{B=gtfZ%Mtq7pf{nc4&<^#<3l1rrKI0*RJ;8`l_x$q9sG<`i)!D zU%Y&+Fg`g&oqG4qaAag8zNtwv)YjH^*~iyk`_lj>-%~nT8ZSs^6Trn zYLUBrhy3pbcs21}yS47vjfN;)Y;d6>o~MrUaoQM2VWA{pKGp~VVK>JLA&y3fapFLU zOoEF1H1ORm!C$r%NlD4?8yg!ZA3S(4Sahh^^P^0gnp>w$PEOF?PK;T;7#;OGU0->x zkpM_{qaogof+Qz(JlV*`P^u2Z3n>V*RKcRzO6Xa|!eUb;m}ru4GEy7%EE1euTyf@1 zCpx>j&xZ>lzW6AB7b7En?Hyg`zt2DPYe{+aa7#nYTZzyBSqo@bZA*c`N)5H)bc}D| z;+IqouCHZbe*hIPH*;|ykP0hpk`yr0Lml!nrXk+f5~YO&&o5rOoFa%=sUS`5*o6G6 zu}R+GqsL2k@7_cCU{0Kxb+WDFvW>q8N-Phk*@VGi{xTGYa*^kw33vUO@H0}zz5p8D zWODI(GqH&Mc^XIhxjlw~`34G7fVOA`jA(LbU8#it8wT=ref#p-%{#gGA3u$|e5J3V z`f&cUnu^k~s+!uk4*+AYMjf_^i$_%)S7D}cFce)9AZH$m#QD0|?N5WiMg?^OI_`eO z!k83*Bi+ZgaHRl`zGh>ciza6DTzw9v)U67#Q&Gzjp0JY{vIcauPz-*c;BCd;|zq!_Aoo&w2JR;(38$ zM?{Aw0LfMWvYh}_UNGjnI-%%GeGnkhX!H;O#X&S_t$armYll!9U9oJmMzK*CKu5MP z05!FBr)C+MFr)xOLqm&+={4MY;ivOanfs?^IL1NQED$qixf37`P%`&}94{JVA}R`V z`B1a;hq>!gXqqhm**pj&`xvO$^Wp36fTCqw+)mcP(^QT$8qdDrNb5ziLI-;mGLW|D z3miLI_B=ByC*<$rR`%BI+u{vrS?K9G_vq5q{x=);p232l?6FL|Rrr&P4 zy{Q*AZO*~5%F1FEN0;`Y_#O@p?iH>}BOZu>lE-?e&W(hcfhXjxLLsL&531zppexHF z$ZRGe99YmGAjoz^B+QnBY3mB>B{o>sCJQ}gVuuCC_TlLe8VIm&{m=oK+> zFNKY=WjgS)HUvxG4jNn{O6+-{= zvUKr)7&0|{CSvSph_M_4BklPMA|0aVwQ!LD8{eXfZ9ZD?G*&@V zBon)QwP0^)3cHX*9ItH{ByLD|ng3GL+uF}~cl_9PE;}{po!4ALNFwOCv6ewxN-PYg zaZnbbiJg8F@U2y`&09k{jJ|PI!}jGisH`X-$=#7BB;GSa=2Ilj-^Xq5?B3XVvgy)a z3vwqC_=~VlV1e_Adbp9KO+-cuTfH>!7hes;IWv*DDj2oLj}Gt6-h^ zs@%$$RgC=oMfR=jote!|O=pQ(xl>zL-@RvV!CE6@6HS>vN+hy^Y-pH(7MGA@;OOl7 hH)C0u&-$#7&~HPIV&W2B5oQ1Y002ovPDHLkV1m%H1i}CS literal 0 HcmV?d00001 From 5d1e1246cfa9a3e9472155abfe08a2299eda6657 Mon Sep 17 00:00:00 2001 From: Alexey Ivanov Date: Thu, 28 Nov 2019 01:12:13 +0900 Subject: [PATCH 05/11] Open tutorials link in new window --- src/Documentation/RightPanel/RightPanel.js | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/src/Documentation/RightPanel/RightPanel.js b/src/Documentation/RightPanel/RightPanel.js index 77fa07f44c..63b67d52aa 100644 --- a/src/Documentation/RightPanel/RightPanel.js +++ b/src/Documentation/RightPanel/RightPanel.js @@ -145,7 +145,13 @@ export default class RightPanel extends React.PureComponent {
Tutorials

{tutorialsData.map(([key, value]) => ( - + {icons[key] && } Run in {startCase(key)} From 326d6e4d953801ad789262b081c717ac93d839df Mon Sep 17 00:00:00 2001 From: Alexey Ivanov Date: Fri, 29 Nov 2019 19:40:39 +0900 Subject: [PATCH 06/11] Update sidebar.json with actual tutorials --- src/Documentation/sidebar.json | 20 ++++++++++++++------ 1 file changed, 14 insertions(+), 6 deletions(-) diff --git a/src/Documentation/sidebar.json b/src/Documentation/sidebar.json index 093293ea7b..beb585a07b 100644 --- a/src/Documentation/sidebar.json +++ b/src/Documentation/sidebar.json @@ -2,6 +2,9 @@ { "slug": "get-started", "source": "get-started/index.md", + "tutorials": { + "katacoda": "https://katacoda.com/dvc/courses/get-started/initialize" + }, "children": [ "agenda", "initialize", @@ -12,10 +15,7 @@ "import-data", { "label": "Connect with Code", - "slug": "connect-code-and-data", - "tutorials": { - "katacoda": "https://www.katacoda.com/loodse/courses/dvc/dvc-01-install" - } + "slug": "connect-code-and-data" }, "pipeline", "visualize", @@ -115,7 +115,12 @@ "label": "File Format (.dvc)", "slug": "dvc-file-format" }, - "dvcignore", + { + "slug": "dvcignore", + "tutorials": { + "katacoda": "https://katacoda.com/dvc/courses/examples/dvcignore" + } + }, "updating-tracked-files", "large-dataset-optimization", "external-dependencies", @@ -189,7 +194,10 @@ }, { "label": "fetch", - "slug": "fetch" + "slug": "fetch", + "tutorials": { + "katacoda": "https://katacoda.com/dvc/courses/examples/fetch" + } }, { "label": "get-url", From 0ed8d9a17f195f786c6d0198654c3eebb60c55f8 Mon Sep 17 00:00:00 2001 From: Alexey Ivanov Date: Fri, 29 Nov 2019 20:01:14 +0900 Subject: [PATCH 07/11] Update tutorials styles --- src/Documentation/RightPanel/RightPanel.js | 71 ++++++++++++---------- 1 file changed, 40 insertions(+), 31 deletions(-) diff --git a/src/Documentation/RightPanel/RightPanel.js b/src/Documentation/RightPanel/RightPanel.js index 63b67d52aa..4e1b7c6c33 100644 --- a/src/Documentation/RightPanel/RightPanel.js +++ b/src/Documentation/RightPanel/RightPanel.js @@ -10,10 +10,6 @@ import startCase from 'lodash.startcase' const ROOT_ELEMENT = 'bodybag' const MARKDOWN_ROOT = '#markdown-root' -const icons = { - katacoda: '/static/tutorial-icons/katacoda.png' -} - const imageChecker = (images, callback) => { // IE can't use forEach on array-likes const imagesArray = Array.prototype.slice.call(images) @@ -122,7 +118,7 @@ export default class RightPanel extends React.PureComponent { return ( - {!headings.length && !tutorialsData.length && } + {!headings.length && } {headings.length > 0 && ( <>
Content
@@ -142,20 +138,28 @@ export default class RightPanel extends React.PureComponent { )} {tutorialsData.length > 0 && ( <> -
Tutorials
-
- {tutorialsData.map(([key, value]) => ( - - {icons[key] && } - Run in {startCase(key)} - - ))} + + + 🖥️ + {' '} + Need a tutorial? + + {tutorialsData.map(([key, value]) => { + const ButtonComponent = icons[key] || ExternalButton + + return ( + + {icons[key] && } + Run in {startCase(key)} + + ) + })} +

)} @@ -248,19 +252,19 @@ const HeadingLink = styled.a` } ` -const GithubButton = styled(LightButton)` - min-width: 120px; +const ExternalButton = styled(LightButton)` + box-sizing: border-box; + min-width: 170px; margin: 10px 0; +` +const GithubButton = styled(ExternalButton)` i { background-image: url(/static/img/github_icon.svg); } ` -const DiscordButton = styled(LightButton)` - min-width: 120px; - margin: 10px 0; - +const DiscordButton = styled(ExternalButton)` i { background-image: url(/static/img/discord.svg); width: 1.2em; @@ -268,6 +272,14 @@ const DiscordButton = styled(LightButton)` } ` +const KatacodaButton = styled(ExternalButton)` + i { + background-image: url(/static/tutorial-icons/katacoda.png); + width: 24px; + height: 24px; + } +` + const Spacer = styled.div` height: 65px; ` @@ -276,9 +288,6 @@ const Description = styled.p` color: #3c3937; ` -const Icon = styled.img` - float: left; - width: 16px; - height: 16px; - margin: 5px 5px 5px 0; -` +const icons = { + katacoda: KatacodaButton +} From 789ed8621fcdb105df887eba32e6ec80c4d12222 Mon Sep 17 00:00:00 2001 From: Alexey Ivanov Date: Mon, 2 Dec 2019 21:35:45 +0900 Subject: [PATCH 08/11] Update emoji and text for tutorials --- src/Documentation/RightPanel/RightPanel.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/Documentation/RightPanel/RightPanel.js b/src/Documentation/RightPanel/RightPanel.js index 4e1b7c6c33..86ffa27cb6 100644 --- a/src/Documentation/RightPanel/RightPanel.js +++ b/src/Documentation/RightPanel/RightPanel.js @@ -140,9 +140,9 @@ export default class RightPanel extends React.PureComponent { <> - 🖥️ + ▶️ {' '} - Need a tutorial? + It can be run online {tutorialsData.map(([key, value]) => { const ButtonComponent = icons[key] || ExternalButton From 7e651cf5cc80d701f711c612186a7f8ed45d91d4 Mon Sep 17 00:00:00 2001 From: Alexey Ivanov Date: Mon, 2 Dec 2019 23:05:58 +0900 Subject: [PATCH 09/11] Add mobile styles for tutorials --- pages/doc.js | 1 + src/Documentation/Markdown/Markdown.js | 31 +++++++++- src/Documentation/RightPanel/RightPanel.js | 36 +---------- src/Documentation/Tutorials.js | 72 ++++++++++++++++++++++ 4 files changed, 105 insertions(+), 35 deletions(-) create mode 100644 src/Documentation/Tutorials.js diff --git a/pages/doc.js b/pages/doc.js index 291d3feb19..87e044d42f 100644 --- a/pages/doc.js +++ b/pages/doc.js @@ -220,6 +220,7 @@ export default class Documentation extends Component { - + {tutorials && ( + + + + )} + Edit on GitHub {!headings.length && } @@ -136,7 +133,7 @@ export default class RightPanel extends React.PureComponent {
)} - {tutorialsData.length > 0 && ( + {Object.keys(tutorials || {}).length > 0 && ( <> @@ -144,22 +141,7 @@ export default class RightPanel extends React.PureComponent { {' '} It can be run online - {tutorialsData.map(([key, value]) => { - const ButtonComponent = icons[key] || ExternalButton - - return ( - - {icons[key] && } - Run in {startCase(key)} - - ) - })} -
+
)} @@ -272,14 +254,6 @@ const DiscordButton = styled(ExternalButton)` } ` -const KatacodaButton = styled(ExternalButton)` - i { - background-image: url(/static/tutorial-icons/katacoda.png); - width: 24px; - height: 24px; - } -` - const Spacer = styled.div` height: 65px; ` @@ -287,7 +261,3 @@ const Spacer = styled.div` const Description = styled.p` color: #3c3937; ` - -const icons = { - katacoda: KatacodaButton -} diff --git a/src/Documentation/Tutorials.js b/src/Documentation/Tutorials.js new file mode 100644 index 0000000000..91215ed86e --- /dev/null +++ b/src/Documentation/Tutorials.js @@ -0,0 +1,72 @@ +import React from 'react' +import PropTypes from 'prop-types' +import topairs from 'lodash.topairs' +import startCase from 'lodash.startcase' +import styled from 'styled-components' + +import { LightButton } from './LightButton' + +export default function Tutorials({ compact, tutorials }) { + const tutorialsData = topairs(tutorials) + + return ( + + {tutorialsData.map(([key, value]) => { + const ButtonComponent = icons[key] || ExternalButton + + return ( + + {icons[key] && } + {!compact && `Run in ${startCase(key)}`} + + ) + })} + + ) +} + +Tutorials.propTypes = { + compact: PropTypes.bool, + tutorials: PropTypes.object +} + +const Wrapper = styled.div`` + +const ExternalButton = styled(LightButton)` + box-sizing: border-box; + min-height: 36px; + + ${({ compact }) => + !compact && + ` + width: 100%; + margin: 10px 0; + `} + + ${({ compact }) => + compact && + ` + margin-left: 5px; + + i { + margin-right: 0; + } + `} +` + +const KatacodaButton = styled(ExternalButton)` + i { + background-image: url(/static/tutorial-icons/katacoda.png); + width: 24px; + height: 24px; + } +` +const icons = { + katacoda: KatacodaButton +} From 3911b41a2aa16d8e6bb7cf23f606fb984cbf71eb Mon Sep 17 00:00:00 2001 From: Alexey Ivanov Date: Tue, 3 Dec 2019 20:56:44 +0900 Subject: [PATCH 10/11] Make tutorial button clickable --- src/Documentation/Markdown/Markdown.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/Documentation/Markdown/Markdown.js b/src/Documentation/Markdown/Markdown.js index f73109c24b..048a0f545d 100644 --- a/src/Documentation/Markdown/Markdown.js +++ b/src/Documentation/Markdown/Markdown.js @@ -383,6 +383,8 @@ const Button = styled.div` ` const TutorialsWrapper = styled.div` + position: relative; + z-index: 1; float: right; margin: 5px 0 0 10px; From df333635b43d5cc0979355417383fa106977347e Mon Sep 17 00:00:00 2001 From: Alexey Ivanov Date: Wed, 4 Dec 2019 18:37:33 +0900 Subject: [PATCH 11/11] Add new katacoda links --- src/Documentation/sidebar.json | 13 +++++++++++-- 1 file changed, 11 insertions(+), 2 deletions(-) diff --git a/src/Documentation/sidebar.json b/src/Documentation/sidebar.json index beb585a07b..9dd847c917 100644 --- a/src/Documentation/sidebar.json +++ b/src/Documentation/sidebar.json @@ -61,16 +61,25 @@ }, { "slug": "versioning", - "label": "Data Versioning" + "label": "Data Versioning", + "tutorials": { + "katacoda": "https://katacoda.com/dvc/courses/tutorials/versioning" + } }, { "slug": "pipelines", - "label": "Stages and Pipelines" + "label": "Stages and Pipelines", + "tutorials": { + "katacoda": "https://katacoda.com/dvc/courses/tutorials/pipelines" + } }, { "slug": "deep", "label": "Deep Dive Tutorial", "source": "deep/index.md", + "tutorials": { + "katacoda": "https://katacoda.com/dvc/courses/tutorials/pipelines" + }, "children": [ "preparation", {