From f5ec277c9f0ca998594c66df9a738d3a7fca3d3b Mon Sep 17 00:00:00 2001 From: Neill Robson Date: Fri, 7 Jun 2024 09:33:29 -0400 Subject: [PATCH 1/7] Header styling --- src/main.js | 2 +- src/{main.css => main.scss} | 21 +++++++++++++++++++++ 2 files changed, 22 insertions(+), 1 deletion(-) rename src/{main.css => main.scss} (70%) diff --git a/src/main.js b/src/main.js index 70f83dc..829e589 100644 --- a/src/main.js +++ b/src/main.js @@ -1,7 +1,7 @@ import Vue from 'vue'; import router from './router'; import App from './App.vue'; -import './main.css'; +import './main.scss'; Vue.config.productionTip = false; diff --git a/src/main.css b/src/main.scss similarity index 70% rename from src/main.css rename to src/main.scss index 074692d..ec26f5e 100644 --- a/src/main.css +++ b/src/main.scss @@ -19,6 +19,27 @@ h6 { font-family: Sora, Helvetica, Arial, sans-serif; } +[mdxtype='MDXLayout'] { + h1 { + font-size: 46px; + } + h2 { + font-size: 36px; + } + h3 { + font-size: 22px; + } + h4 { + font-size: 18px; + } + h5 { + font-size: 16px; + } + h6 { + font-size: 14px; + } +} + /* * Targeting specifically images within the main MDX body. * There's certainly a better way to do this by passing MDX components, From aecc1b948327224dea529be73248d2ff92f8f919 Mon Sep 17 00:00:00 2001 From: Neill Robson Date: Fri, 7 Jun 2024 09:51:03 -0400 Subject: [PATCH 2/7] Demonstrate MDXProvider restyling --- package-lock.json | 1 + package.json | 1 + src/content/components/buttons/index.mdx | 2 +- src/main.js | 11 ++++++++++- 4 files changed, 13 insertions(+), 2 deletions(-) diff --git a/package-lock.json b/package-lock.json index c6e7bc6..2fcd066 100644 --- a/package-lock.json +++ b/package-lock.json @@ -17,6 +17,7 @@ "@babel/core": "^7.12.16", "@babel/eslint-parser": "^7.12.16", "@google-cloud/storage": "^7.11.1", + "@mdx-js/vue": "^1.6.22", "@mdx-js/vue-loader": "^1.6.22", "@octokit/rest": "^20.1.1", "@vue/cli-plugin-babel": "~5.0.0", diff --git a/package.json b/package.json index 7e42812..32ab008 100644 --- a/package.json +++ b/package.json @@ -18,6 +18,7 @@ "@babel/core": "^7.12.16", "@babel/eslint-parser": "^7.12.16", "@google-cloud/storage": "^7.11.1", + "@mdx-js/vue": "^1.6.22", "@mdx-js/vue-loader": "^1.6.22", "@octokit/rest": "^20.1.1", "@vue/cli-plugin-babel": "~5.0.0", diff --git a/src/content/components/buttons/index.mdx b/src/content/components/buttons/index.mdx index 0eb8a14..e64e4de 100644 --- a/src/content/components/buttons/index.mdx +++ b/src/content/components/buttons/index.mdx @@ -3,7 +3,7 @@ import ExternalButton from '@/components/ExternalButton.vue'; # Buttons -Use buttons to enable the user to identify and trigger an action on the page. +> Use buttons to enable the user to identify and trigger an action on the page. ({ + render(h) { + return h('strong', props); + } + }) +}; + new Vue({ - render: (h) => h(App), + render: (h) => h(MDXProvider, { props: { components } }, [h(App)]), router }).$mount('#app'); From 88d9d28299681014296146d0db9d2b7b554f27f0 Mon Sep 17 00:00:00 2001 From: Neill Robson Date: Fri, 7 Jun 2024 10:04:21 -0400 Subject: [PATCH 3/7] JSX syntax --- src/main.js | 23 +++++++++++++++++++---- src/main.scss | 5 +++++ 2 files changed, 24 insertions(+), 4 deletions(-) diff --git a/src/main.js b/src/main.js index 8e56345..946b994 100644 --- a/src/main.js +++ b/src/main.js @@ -6,15 +6,30 @@ import './main.scss'; Vue.config.productionTip = false; +/** + * Use this object *only* to map standard Markdown elements to custom Vue components. + * + * Doing so allows writers to, for example, use the blockquote `>` syntax to render + * a different HTML tag that is more semantically relevant. + * + * In all other cases, prefer explicit component imports into the MDX file. + */ const components = { - blockquote: (props) => ({ - render(h) { - return h('strong', props); + blockquote: () => ({ + render() { + //

...

+ return this.$slots.default; } }) }; new Vue({ - render: (h) => h(MDXProvider, { props: { components } }, [h(App)]), + render() { + return ( + + + + ); + }, router }).$mount('#app'); diff --git a/src/main.scss b/src/main.scss index ec26f5e..0ef26ef 100644 --- a/src/main.scss +++ b/src/main.scss @@ -38,6 +38,11 @@ h6 { h6 { font-size: 14px; } + + [parentname='blockquote'] { + font-size: 18px; + line-height: 135%; + } } /* From 5d71d1a9773422d53a55c23c3fa64c0a4081a13c Mon Sep 17 00:00:00 2001 From: Neill Robson Date: Fri, 7 Jun 2024 10:32:16 -0400 Subject: [PATCH 4/7] Misc spacing/styling updates --- src/content/components/buttons/spec.mdx | 10 +++++----- src/main.scss | 24 ++++++++++++++++++++++-- 2 files changed, 27 insertions(+), 7 deletions(-) diff --git a/src/content/components/buttons/spec.mdx b/src/content/components/buttons/spec.mdx index da904a0..cef8a40 100644 --- a/src/content/components/buttons/spec.mdx +++ b/src/content/components/buttons/spec.mdx @@ -35,7 +35,7 @@ Use Primary buttons for: - Constructive actions (such as Submit). - Confirmation (such as Yes, Delete). -#### Examples: +**Examples:**    @@ -51,7 +51,7 @@ Use Secondary buttons for: - Dismiss actions (such as Cancel). - When actions need less prominence because they arent critical to the purpose, i.e. Share -#### Examples: +**Examples:**    @@ -68,7 +68,7 @@ Use Tertiary Buttons: - When standard buttons would be too heavy, distracting, or visually unappealing in the space. - In right hand CTA’s of a table -#### Examples: +**Examples:**    @@ -84,7 +84,7 @@ Use Tertiary Link Buttons: - Highlighting the interactivity of an option relative to normal text (such as + 3 more rules) - Placing next to a primary action for less prominence -#### Examples: +**Examples:**    @@ -102,7 +102,7 @@ Use Destructive Buttons: - For Primary actions that are critical, such as removing access, or difficult to reverse, such as deleting an object. -#### Examples: +**Examples:**    diff --git a/src/main.scss b/src/main.scss index 0ef26ef..c165a78 100644 --- a/src/main.scss +++ b/src/main.scss @@ -22,26 +22,46 @@ h6 { [mdxtype='MDXLayout'] { h1 { font-size: 46px; + margin: 16px 0; } + h2 { - font-size: 36px; + font-size: 22px; + margin-top: 64px; } + h3 { - font-size: 22px; + font-size: 20px; + margin-top: 64px; } + h4 { font-size: 18px; } + h5 { font-size: 16px; } + h6 { font-size: 14px; } + p { + line-height: 135%; + margin: 1.5em 0; + } + [parentname='blockquote'] { font-size: 18px; + } + + ul { line-height: 135%; + + > li { + margin: 0.2em 0; + } } } From 7393e41643ac676e931261c48006525ffdfa4855 Mon Sep 17 00:00:00 2001 From: Neill Robson Date: Mon, 10 Jun 2024 12:54:42 -0400 Subject: [PATCH 5/7] Remove unnecessary scrollbars when always-on in macos --- src/App.vue | 2 +- src/components/SidebarNav.vue | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/App.vue b/src/App.vue index 3e99148..08f4d63 100644 --- a/src/App.vue +++ b/src/App.vue @@ -45,7 +45,7 @@ export default { main { padding: 120px 80px; - overflow: scroll; + overflow: auto; perspective: 1px; } diff --git a/src/components/SidebarNav.vue b/src/components/SidebarNav.vue index 5bbc0ce..4798463 100644 --- a/src/components/SidebarNav.vue +++ b/src/components/SidebarNav.vue @@ -177,7 +177,7 @@ nav { .main { padding: 0 32px; - overflow-y: scroll; + overflow-y: auto; } .footer { From 94b5a4a77328e2270cf92177a53e3288e33fe63f Mon Sep 17 00:00:00 2001 From: Neill Robson Date: Mon, 10 Jun 2024 15:00:44 -0400 Subject: [PATCH 6/7] Improve content-image custom styling --- src/main.js | 11 +++++++++++ src/main.scss | 18 +++++++----------- 2 files changed, 18 insertions(+), 11 deletions(-) diff --git a/src/main.js b/src/main.js index 946b994..36c51af 100644 --- a/src/main.js +++ b/src/main.js @@ -20,6 +20,17 @@ const components = { //

...

return this.$slots.default; } + }), + // shallow-copy props because MDXProvider shares the instance to parents + img: ({ ...props }) => ({ + render() { + // Pull everything except `attrs` into a child object, domProps + const { attrs, ...domProps } = props; + const data = { attrs, domProps }; + const elProps = { class: 'mdx-img', ...props, ...data }; + + return ; + } }) }; diff --git a/src/main.scss b/src/main.scss index c165a78..561ab50 100644 --- a/src/main.scss +++ b/src/main.scss @@ -52,6 +52,7 @@ h6 { margin: 1.5em 0; } + /* TODO: Find a way to customize this selector to something more semantically relevant */ [parentname='blockquote'] { font-size: 18px; } @@ -63,16 +64,11 @@ h6 { margin: 0.2em 0; } } -} -/* - * Targeting specifically images within the main MDX body. - * There's certainly a better way to do this by passing MDX components, - * something to research in the future. - */ -[mdxtype='MDXLayout'] > p > img { - max-width: 95%; - box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); - margin: 0 auto; - display: block; + .mdx-img { + max-width: 95%; + box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); + margin: 0 auto; + display: block; + } } From ef46cb9c9bb442f60b0e013aa8c0a1c130b43c3b Mon Sep 17 00:00:00 2001 From: Neill Robson Date: Mon, 10 Jun 2024 15:34:40 -0400 Subject: [PATCH 7/7] Give blockquote blurb a custom class --- src/main.js | 6 ++++-- src/main.scss | 9 ++++----- 2 files changed, 8 insertions(+), 7 deletions(-) diff --git a/src/main.js b/src/main.js index 36c51af..e75af8c 100644 --- a/src/main.js +++ b/src/main.js @@ -17,11 +17,13 @@ Vue.config.productionTip = false; const components = { blockquote: () => ({ render() { - //

...

+ delete this.$slots.default[0].data.attrs.parentName; + this.$slots.default[0].data.class = 'mdx-blurb'; + return this.$slots.default; } }), - // shallow-copy props because MDXProvider shares the instance to parents + // shallow-copy props because MDXProvider shares the parameter instance to parents img: ({ ...props }) => ({ render() { // Pull everything except `attrs` into a child object, domProps diff --git a/src/main.scss b/src/main.scss index 561ab50..181e551 100644 --- a/src/main.scss +++ b/src/main.scss @@ -52,11 +52,6 @@ h6 { margin: 1.5em 0; } - /* TODO: Find a way to customize this selector to something more semantically relevant */ - [parentname='blockquote'] { - font-size: 18px; - } - ul { line-height: 135%; @@ -65,6 +60,10 @@ h6 { } } + .mdx-blurb { + font-size: 18px; + } + .mdx-img { max-width: 95%; box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);