@readme/markdown 14.13.0 → 14.13.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/components/Accordion/style.scss +4 -0
- package/components/TailwindRoot/index.tsx +4 -0
- package/dist/example/components.d.ts +2 -0
- package/dist/lib/mdxish.d.ts +1 -1
- package/dist/lib/micromark/mdx-component/continuation-checks.d.ts +3 -0
- package/dist/lib/renderMdxish.d.ts +1 -1
- package/dist/main.css +2 -2
- package/dist/main.css.map +1 -1
- package/dist/main.js +243 -116
- package/dist/main.node.js +243 -116
- package/dist/main.node.js.map +1 -1
- package/dist/processor/plugin/mdxish-components.d.ts +1 -1
- package/dist/processor/transform/mdxish/components/mdx-blocks.d.ts +0 -31
- package/dist/render-fixture.css +1 -1
- package/dist/render-fixture.css.map +1 -1
- package/dist/render-fixture.node.js +243 -116
- package/dist/render-fixture.node.js.map +1 -1
- package/dist/utils/common-html-words.d.ts +9 -0
- package/package.json +1 -1
- package/styles/gfm.scss +15 -1
|
@@ -9,7 +9,7 @@ interface Options {
|
|
|
9
9
|
* Identifies custom MDX components and recursively parses markdown children.
|
|
10
10
|
* Replaces tagName with PascalCase component name for React component resolution.
|
|
11
11
|
*
|
|
12
|
-
* @see
|
|
12
|
+
* @see .claude/context/MDXish/Processor Overview.md
|
|
13
13
|
* @param {Options} options - Configuration options
|
|
14
14
|
* @param {CustomComponents} options.components - Available custom components
|
|
15
15
|
* @param {Function} options.processMarkdown - Function to process markdown content
|
|
@@ -1,37 +1,6 @@
|
|
|
1
1
|
import type { Parent } from 'mdast';
|
|
2
2
|
import type { Plugin } from 'unified';
|
|
3
3
|
export { parseAttributes, parseTag } from '../../../../lib/utils/mdxish/mdxish-component-tag-parser';
|
|
4
|
-
/**
|
|
5
|
-
* Transform PascalCase HTML nodes into mdxJsxFlowElement nodes.
|
|
6
|
-
*
|
|
7
|
-
* Remark parses unknown/custom component tags as raw HTML nodes.
|
|
8
|
-
* These are the custom readme MDX syntax for components.
|
|
9
|
-
* This transformer identifies these patterns and converts them to proper MDX JSX elements so they
|
|
10
|
-
* can be accurately recognized and rendered later with their component definition code.
|
|
11
|
-
*
|
|
12
|
-
* Note: The main goal is to promote PascalCase tags to MDX elements, but we want to promote
|
|
13
|
-
* normal HTML to MDX elements in some cases so they get the full custom parsing behavior.
|
|
14
|
-
* E.g. tags with JSX expressions, nested components, etc.
|
|
15
|
-
*
|
|
16
|
-
* The mdx-component micromark tokenizer ensures that multi-line components are captured
|
|
17
|
-
* as single HTML nodes, so this transformer only needs to handle two cases:
|
|
18
|
-
*
|
|
19
|
-
* ### 1. Self-closing tags
|
|
20
|
-
* ```
|
|
21
|
-
* <Component />
|
|
22
|
-
* ```
|
|
23
|
-
* Parsed as: `html: "<Component />"`
|
|
24
|
-
*
|
|
25
|
-
* ### 2. Self-contained blocks (entire component in single HTML node)
|
|
26
|
-
* ```
|
|
27
|
-
* <Component>
|
|
28
|
-
* content
|
|
29
|
-
* </Component>
|
|
30
|
-
* ```
|
|
31
|
-
* Parsed as: `html: "<Component>\n content\n</Component>"`
|
|
32
|
-
* The opening tag, content, and closing tag are all captured in one HTML node
|
|
33
|
-
* (guaranteed by the mdx-component tokenizer).
|
|
34
|
-
*/
|
|
35
4
|
declare const mdxishMdxComponentBlocks: Plugin<[{
|
|
36
5
|
safeMode?: boolean;
|
|
37
6
|
}?], Parent>;
|
package/dist/render-fixture.css
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
.Accordion{background:rgba(var(--color-bg-page-rgb, white), 1);border:1px solid var(--color-border-default, rgba(0, 0, 0, 0.1));border-radius:5px}.Accordion-title{align-items:center;background:rgba(var(--color-bg-page-rgb, white), 1);border:0;border-radius:5px;color:var(--color-text-default, #384248);cursor:pointer;display:flex;font-size:16px;font-weight:500;padding:10px;position:relative;text-align:left;width:100%}.Accordion-title:hover{background:var(--color-bg-hover, rgba(0, 0, 0, 0.05))}.Accordion[open] .Accordion-title{border-bottom-left-radius:0;border-bottom-right-radius:0}.Accordion-title::marker{content:""}.Accordion-title::-webkit-details-marker{display:none}.Accordion-toggleIcon,.Accordion-toggleIcon_opened{color:var(--color-text-minimum, #637288);font-size:14px;margin-left:5px;margin-right:10px;transition:transform .1s}.Accordion-toggleIcon_opened,.Accordion-toggleIcon_opened_opened{transform:rotate(90deg)}.Accordion-icon{color:var(--project-color-primary, inherit);margin-right:10px}.Accordion-content{color:var(--color-text-muted, #4f5a66);padding:5px 15px 0 15px}
|
|
1
|
+
.Accordion{background:rgba(var(--color-bg-page-rgb, white), 1);border:1px solid var(--color-border-default, rgba(0, 0, 0, 0.1));border-radius:5px}.Accordion-title{align-items:center;background:rgba(var(--color-bg-page-rgb, white), 1);border:0;border-radius:5px;color:var(--color-text-default, #384248);cursor:pointer;display:flex;font-size:16px;font-weight:500;padding:10px;position:relative;text-align:left;width:100%}.Accordion-title:hover{background:var(--color-bg-hover, rgba(0, 0, 0, 0.05))}.Accordion[open] .Accordion-title{border-bottom-left-radius:0;border-bottom-right-radius:0}.Accordion-title::marker{content:""}.Accordion-title::-webkit-details-marker{display:none}.Accordion-toggleIcon,.Accordion-toggleIcon_opened{color:var(--color-text-minimum, #637288);font-size:14px;margin-left:5px;margin-right:10px;transition:transform .1s}.Accordion-toggleIcon_opened,.Accordion-toggleIcon_opened_opened{transform:rotate(90deg)}.Accordion-icon{color:var(--project-color-primary, inherit);margin-right:10px}.Accordion-content{color:var(--color-text-muted, #4f5a66);padding:5px 15px 0 15px}.Accordion-content>*{margin-bottom:var(--markdown-spacing, 15px)}
|
|
2
2
|
.CardsGrid{--CardsGrid-gap: 1.5em;--CardsGrid-columns: auto-fit;--CardsGrid-cardWidth: auto;display:grid;gap:var(--CardsGrid-gap);grid-template-columns:repeat(var(--CardsGrid-columns), minmax(var(--CardsGrid-cardWidth), 1fr))}.Card{--Card-badge-bg-color: var(--yellow);--Card-badge-color: var(--yellow10);--Card-content-color: var(--color-text-minimum);--Card-gap: 0.25em;--Card-href-arrow-opacity: 0;--Card-href-arrow-transform: translateX(-5px);--Card-icon-color: var(--color-text-default);--Card-icon-opacity: 0.65;--Card-icon-opacity-hover: 0.75;--Card-line-height: 1.4;--Card-shadow: none;--Card-title-color: var(--color-text-default);background:var(--Card-bg-color);border:1px solid var(--Card-border-color);border-radius:var(--border-radius-lg);box-shadow:var(--Card-shadow);display:flex;flex-direction:var(--Card-layout);gap:var(--Card-gap);line-height:var(--Card-line-height);padding:var(--Card-padding);text-decoration:none}.Card_card{--Card-bg-color: rgba(var(--color-bg-page-inverse-rgb), 0);--Card-bg-color-hover: rgba(var(--color-bg-page-inverse-rgb), 0);--Card-border-color: var(--color-border-default);--Card-layout: column;--Card-padding: 1.5em}[data-color-mode=dark] .Card_card{--Card-bg-color: rgba(var(--color-bg-page-inverse-rgb), 0.05);--Card-bg-color-hover: rgba(var(--color-bg-page-inverse-rgb), 0.1)}@media(prefers-color-scheme: dark){[data-color-mode=auto] .Card_card,[data-color-mode=system] .Card_card{--Card-bg-color: rgba(var(--color-bg-page-inverse-rgb), 0.05);--Card-bg-color-hover: rgba(var(--color-bg-page-inverse-rgb), 0.1)}}.Card_tile{--Card-gap: 1em;--Card-icon-opacity: 0.5;--Card-layout: row}.Card_tile .Card-content{--Card-gap: 0}.Card[href]:not([href=""]){color:inherit;text-decoration:none}.Card[href]:not([href=""]):hover,.Card[href]:not([href=""]):active,.Card[href]:not([href=""]):focus{--Card-icon-opacity: var(--Card-icon-opacity-hover);--Card-href-arrow-opacity: 0.75;--Card-href-arrow-transform: none;background:var(--Card-bg-color-hover)}.Card-icon{color:var(--Card-icon-color);font-size:1.4em;margin-bottom:.5em;opacity:var(--Card-icon-opacity);transition:opacity var(--transition-timing) var(--transition-fast)}.Card-title{align-items:flex-start;color:var(--Card-title-color);display:flex;gap:.5em;font-weight:var(--font-weight-bold)}.Card-badge{align-items:center;background:var(--Card-badge-bg-color);border-radius:1em;color:var(--Card-badge-color);font-size:.6em;padding:0 .5em;display:inline-flex;position:relative;top:.5em}.Card-arrow{font-size:.8em;opacity:var(--Card-href-arrow-opacity);position:relative;top:.375em;transition:opacity var(--transition-timing) var(--transition-fast),transform var(--transition-timing) var(--transition-fast);transform:var(--Card-href-arrow-transform)}.Card-content{color:var(--Card-content-color);display:flex;flex-direction:column;font-size:1em;gap:var(--Card-gap)}.Card-content p:last-child{margin-bottom:0}
|
|
3
3
|
.Columns{display:grid;gap:var(--md, 20px)}@media(max-width: 414px){.Columns{grid-template-columns:1fr !important}}
|
|
4
4
|
.TabGroup-nav{border-bottom:solid var(--color-border-default, rgba(0, 0, 0, 0.1));margin-bottom:15px}.TabGroup-tab{background:none;border:0;color:var(--color-text-minimum, #637288);cursor:pointer;font-size:15px;font-weight:600;margin-right:15px;padding:0;padding-bottom:10px}.TabGroup-tab_active{background:none;border:0;border-bottom:solid var(--color-tab-active, currentcolor);color:var(--color-tab-active, currentcolor);font-size:15px;font-weight:600;margin-right:15px;margin-bottom:-2px;padding:0;padding-bottom:10px}.TabGroup-tab:hover{color:var(--color-text-muted, #4f5a66)}.TabGroup-icon{color:var(--project-color-primary, inherit);margin-right:10px}.TabGroup .TabContent{color:var(--color-text-muted, #4f5a66)}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"render-fixture.css","mappings":"AAAA,WACE,oDACA,iEACA,kBAEA,iBACE,mBACA,oDACA,SACA,kBACA,yCACA,eACA,aACA,eACA,gBACA,aACA,kBACA,gBACA,WAEA,uBACE,sDAGF,kCACE,4BACA,6BAGF,yBACE,WAGF,yCACE,aAIJ,mDAEE,yCACA,eACA,gBACA,kBACA,yBAEA,iEACE,wBAIJ,gBACE,4CACA,kBAGF,mBACE,uCACA,
|
|
1
|
+
{"version":3,"file":"render-fixture.css","mappings":"AAAA,WACE,oDACA,iEACA,kBAEA,iBACE,mBACA,oDACA,SACA,kBACA,yCACA,eACA,aACA,eACA,gBACA,aACA,kBACA,gBACA,WAEA,uBACE,sDAGF,kCACE,4BACA,6BAGF,yBACE,WAGF,yCACE,aAIJ,mDAEE,yCACA,eACA,gBACA,kBACA,yBAEA,iEACE,wBAIJ,gBACE,4CACA,kBAGF,mBACE,uCACA,wBAEA,qBACE,4C;ACzDN,WACE,uBACA,8BACA,4BAEA,aACA,yBACA,gGAGF,MAGE,qCACA,oCACA,gDACA,mBACA,6BACA,8CACA,6CACA,0BACA,gCACA,wBACA,oBACA,8CAEA,gCACA,0CACA,sCACA,8BACA,aACA,kCACA,oBACA,oCACA,4BACA,qBAEA,WACE,2DACA,iEACA,iDACA,sBACA,sBCXA,kCDcE,8DACA,mECTA,mCAFF,sEDUE,8DACA,oEAIJ,WACE,gBACA,yBACA,mBAEA,yBACE,cAKJ,2BACE,cACA,qBAEA,oGAGE,oDACA,gCACA,kCAEA,sCAIJ,WACE,6BACA,gBACA,mBACA,iCACA,mEAGF,YACE,uBACA,8BACA,aACA,SACA,oCAGF,YACE,mBACA,sCACA,kBACA,8BACA,eACA,eACA,oBACA,kBACA,SAGF,YACE,eACA,uCACA,kBACA,WACA,4HACE,CAEF,2CAGF,cACE,gCACA,aACA,sBACA,cACA,oBAEA,2BACE,gB;AE7HN,SACE,aACA,oBAEA,yBAJF,SAKI,sC;ACNF,cACE,oEACA,mBAGF,cACE,gBACA,SACA,yCACA,eACA,eACA,gBACA,kBACA,UACA,oBAEA,qBACE,gBACA,SACA,0DACA,4CACA,eACA,gBACA,kBACA,mBACA,UACA,oBAGF,oBACE,uCAIJ,eACE,4CACA,kBAGF,sBACE,uC","sources":["webpack://@readme/markdown/./components/Accordion/style.scss","webpack://@readme/markdown/./components/Cards/style.scss","webpack://@readme/markdown/./styles/mixins/dark-mode.scss","webpack://@readme/markdown/./components/Columns/style.scss","webpack://@readme/markdown/./components/Tabs/style.scss"],"sourcesContent":[".Accordion {\n background: rgba(var(--color-bg-page-rgb, white), 1);\n border: 1px solid var(--color-border-default, rgba(black, 0.1));\n border-radius: 5px;\n\n &-title {\n align-items: center;\n background: rgba(var(--color-bg-page-rgb, white), 1);\n border: 0;\n border-radius: 5px;\n color: var(--color-text-default, #384248);\n cursor: pointer;\n display: flex;\n font-size: 16px;\n font-weight: 500;\n padding: 10px;\n position: relative;\n text-align: left;\n width: 100%;\n\n &:hover {\n background: var(--color-bg-hover, rgba(black, 0.05));\n }\n\n .Accordion[open] & {\n border-bottom-left-radius: 0;\n border-bottom-right-radius: 0;\n }\n\n &::marker {\n content: \"\";\n }\n\n &::-webkit-details-marker {\n display: none;\n } \n }\n\n &-toggleIcon,\n &-toggleIcon_opened {\n color: var(--color-text-minimum, #637288);\n font-size: 14px;\n margin-left: 5px;\n margin-right: 10px;\n transition: transform 0.1s;\n\n &_opened {\n transform: rotate(90deg);\n }\n }\n\n &-icon {\n color: var(--project-color-primary, inherit);\n margin-right: 10px;\n }\n\n &-content {\n color: var(--color-text-muted, #4f5a66);\n padding: 5px 15px 0 15px;\n\n > * {\n margin-bottom: var(--markdown-spacing, 15px);\n }\n }\n}\n","@import '../../styles/mixins/dark-mode.scss';\n\n$iphone-plus: 414px;\n\n.CardsGrid {\n --CardsGrid-gap: 1.5em;\n --CardsGrid-columns: auto-fit;\n --CardsGrid-cardWidth: auto;\n\n display: grid;\n gap: var(--CardsGrid-gap);\n grid-template-columns: repeat(var(--CardsGrid-columns), minmax(var(--CardsGrid-cardWidth), 1fr));\n}\n\n.Card {\n $card: &;\n\n --Card-badge-bg-color: var(--yellow);\n --Card-badge-color: var(--yellow10);\n --Card-content-color: var(--color-text-minimum);\n --Card-gap: 0.25em;\n --Card-href-arrow-opacity: 0;\n --Card-href-arrow-transform: translateX(-5px);\n --Card-icon-color: var(--color-text-default);\n --Card-icon-opacity: 0.65;\n --Card-icon-opacity-hover: 0.75;\n --Card-line-height: 1.4;\n --Card-shadow: none;\n --Card-title-color: var(--color-text-default);\n\n background: var(--Card-bg-color);\n border: 1px solid var(--Card-border-color);\n border-radius: var(--border-radius-lg);\n box-shadow: var(--Card-shadow);\n display: flex;\n flex-direction: var(--Card-layout);\n gap: var(--Card-gap);\n line-height: var(--Card-line-height);\n padding: var(--Card-padding);\n text-decoration: none;\n\n &_card {\n --Card-bg-color: rgba(var(--color-bg-page-inverse-rgb), 0);\n --Card-bg-color-hover: rgba(var(--color-bg-page-inverse-rgb), 0);\n --Card-border-color: var(--color-border-default);\n --Card-layout: column;\n --Card-padding: 1.5em;\n\n @include dark-mode {\n --Card-bg-color: rgba(var(--color-bg-page-inverse-rgb), 0.05);\n --Card-bg-color-hover: rgba(var(--color-bg-page-inverse-rgb), 0.1);\n }\n }\n\n &_tile {\n --Card-gap: 1em;\n --Card-icon-opacity: 0.5;\n --Card-layout: row;\n\n #{$card}-content {\n --Card-gap: 0;\n }\n }\n\n // needs specificity to override the default link styles; while preserving logic for empty hrefs\n &[href]:not([href='']) {\n color: inherit;\n text-decoration: none;\n\n &:hover,\n &:active,\n &:focus {\n --Card-icon-opacity: var(--Card-icon-opacity-hover);\n --Card-href-arrow-opacity: 0.75;\n --Card-href-arrow-transform: none;\n\n background: var(--Card-bg-color-hover);\n }\n }\n\n &-icon {\n color: var(--Card-icon-color);\n font-size: 1.4em;\n margin-bottom: 0.5em;\n opacity: var(--Card-icon-opacity);\n transition: opacity var(--transition-timing) var(--transition-fast);\n }\n\n &-title {\n align-items: flex-start;\n color: var(--Card-title-color);\n display: flex;\n gap: 0.5em;\n font-weight: var(--font-weight-bold);\n }\n\n &-badge {\n align-items: center;\n background: var(--Card-badge-bg-color);\n border-radius: 1em;\n color: var(--Card-badge-color);\n font-size: 0.6em;\n padding: 0 0.5em;\n display: inline-flex;\n position: relative;\n top: 0.5em;\n }\n\n &-arrow {\n font-size: 0.8em;\n opacity: var(--Card-href-arrow-opacity);\n position: relative;\n top: 0.375em;\n transition:\n opacity var(--transition-timing) var(--transition-fast),\n transform var(--transition-timing) var(--transition-fast);\n transform: var(--Card-href-arrow-transform);\n }\n\n &-content {\n color: var(--Card-content-color);\n display: flex;\n flex-direction: column;\n font-size: 1em;\n gap: var(--Card-gap);\n\n p:last-child {\n margin-bottom: 0;\n }\n }\n}\n","/* We’re planning to move this in to the monorepo in which case\n we could share the dark mode mix in. Kelly is planning to take\n some time to make that move so can we add a comment here to\n circle back on this at that point?\n\n - Rafe\n April 2025\n*/\n\n@mixin dark-mode($global: false) {\n $root: &;\n\n @if not $root {\n [data-color-mode='dark'] {\n @content;\n }\n\n [data-color-mode='auto'],\n [data-color-mode='system'] {\n @media (prefers-color-scheme: dark) {\n @content;\n }\n }\n } @else if $global {\n :global([data-color-mode='dark']) & {\n @content;\n }\n\n :global([data-color-mode='auto']) &,\n :global([data-color-mode='system']) & {\n @media (prefers-color-scheme: dark) {\n @content;\n }\n }\n } @else {\n [data-color-mode='dark'] & {\n @content;\n }\n\n [data-color-mode='auto'] &,\n [data-color-mode='system'] & {\n @media (prefers-color-scheme: dark) {\n @content;\n }\n }\n }\n}\n","$iphone-plus: 414px;\n\n.Columns {\n display: grid;\n gap: var(--md, 20px);\n\n @media (max-width: $iphone-plus) {\n grid-template-columns: 1fr !important;\n }\n}\n",".TabGroup {\n &-nav {\n border-bottom: solid var(--color-border-default, #{rgba(black, 0.1)});\n margin-bottom: 15px;\n }\n\n &-tab {\n background: none;\n border: 0;\n color: var(--color-text-minimum, #637288);\n cursor: pointer;\n font-size: 15px;\n font-weight: 600;\n margin-right: 15px;\n padding: 0;\n padding-bottom: 10px;\n\n &_active {\n background: none;\n border: 0;\n border-bottom: solid var(--color-tab-active, currentcolor);\n color: var(--color-tab-active, currentcolor);\n font-size: 15px;\n font-weight: 600;\n margin-right: 15px;\n margin-bottom: -2px;\n padding: 0;\n padding-bottom: 10px;\n }\n\n &:hover {\n color: var(--color-text-muted, #4f5a66);\n }\n }\n\n &-icon {\n color: var(--project-color-primary, inherit);\n margin-right: 10px;\n }\n\n .TabContent {\n color: var(--color-text-muted, #4f5a66);\n }\n}\n"],"names":[],"sourceRoot":""}
|