diff --git a/examples/vue3/src/MarkdownFile.story.md b/examples/vue3/src/MarkdownFile.story.md index 69a51108..0c839d59 100644 --- a/examples/vue3/src/MarkdownFile.story.md +++ b/examples/vue3/src/MarkdownFile.story.md @@ -1,3 +1,96 @@ # Markdown file This is a standalone `MarkdownFile.story.md` file, rendering as a docs-only story. + +--- + +## Headings + +# h1 Heading +## h2 Heading +### h3 Heading +#### h4 Heading +##### h5 Heading +###### h6 Heading + +--- + +## Links + +[link](https://histoire.dev "title text!") + +--- + +## Emphasis + +**This is bold text** + +*This is italic text* + +~~Strikethrough~~ + +--- + +## Blockquotes + +> Blockquotes can also be nested... +>> ...by using additional greater-than signs right next to each other... +> > > ...or with spaces between arrows. + +--- + +## Lists + +### Unordered + +- Create a list by starting a line with `+`, `-`, or `*` +- Sub-lists are made by indenting 2 spaces: + - Marker character change forces new list start: + - Ac tristique libero volutpat at + - Facilisis in pretium nisl aliquet + - Nulla volutpat aliquam velit +- Very easy! + +### Ordered + +1. Lorem ipsum dolor sit amet +2. Consectetur adipiscing elit +3. Integer molestie lorem at massa + +--- + +## Code + +Inline `code` + +Block code "fences" +``` +Sample text here... +``` + +Syntax highlighting +``` js +const foo = function (bar) { + return bar++ +} + +console.warn(foo(5)) +``` + +--- + +## Tables + +| Option | Description | +| ------ | ------------------------------------------------------------------------- | +| data | path to data files to supply the data that will be passed into templates. | +| engine | engine to be used for processing templates. Handlebars is the default. | +| ext | extension to be used for dest files. | + +--- + +## Images + +![Stormtroopocat](https://octodex.github.com/images/stormtroopocat.jpg "The Stormtroopocat") + +--- diff --git a/packages/histoire-app/src/app/style/main.pcss b/packages/histoire-app/src/app/style/main.pcss index 7fa4270a..b03096ea 100644 --- a/packages/histoire-app/src/app/style/main.pcss +++ b/packages/histoire-app/src/app/style/main.pcss @@ -10,8 +10,6 @@ ::after { box-sizing: border-box; border-width: 0; - border-style: solid; - border-color: #e5e7eb; } a, diff --git a/packages/histoire-app/tailwind.config.cjs b/packages/histoire-app/tailwind.config.cjs index dcd4b7cc..ffc7bd9d 100644 --- a/packages/histoire-app/tailwind.config.cjs +++ b/packages/histoire-app/tailwind.config.cjs @@ -71,67 +71,34 @@ delete module.exports.theme.extend.colors.gray module.exports.theme.colors = colors module.exports.plugins.push(require('@tailwindcss/typography')) -// prose-a:htw-text-primary-500 prose-headings:htw-mb-2 prose-headings:htw-mt-4 first:prose-headings:htw-mt-0 prose-blockquote:htw-ml-0 + module.exports.theme.extend.typography = theme => ({ DEFAULT: { css: { - 'a': { - 'color': theme('colors.primary-500'), - 'textDecoration': 'none', - - '&:hover': { - textDecoration: 'underline', - }, + // Custom style + 'table': { + borderCollapse: 'collapse', }, - - 'h1, h2, h3, h4, th': { - 'marginBottom': '0.75rem', - - '&:not(:first-child)': { - marginTop: '1.25rem', - }, + 'thead, tr, blockquote': { + borderStyle: 'solid', }, - - '--tw-prose-invert-quote-borders': theme('colors.gray-800'), - '--tw-prose-invert-hr': theme('colors.gray-800'), - 'blockquote': { - 'marginLeft': 0, - 'marginRight': 0, - 'backgroundColor': theme('colors.gray-100'), - 'padding': '.25rem .375rem', - - '& p:first-child': { - marginTop: 0, - }, - - '& p:last-child': { - marginBottom: 0, - }, - - '.dark &': { - backgroundColor: theme('colors.gray-750'), - }, + marginInlineStart: '0.375rem', + marginInlineEnd: '0.375rem', }, + // Theme variables + // Light + '--tw-prose-links': theme('colors.primary-500'), + '--tw-prose-pre-bg': theme('colors.gray-800'), + // Dark + '--tw-prose-invert-links': theme('colors.primary-500'), + '--tw-prose-invert-quote-borders': theme('colors.gray-500'), + '--tw-prose-invert-hr': theme('colors.gray-500'), + '--tw-prose-invert-th-borders': theme('colors.gray-500'), + '--tw-prose-invert-td-borders': theme('colors.gray-600'), '--tw-prose-invert-bullets': theme('colors.gray-500'), - - 'li': { - marginTop: '0.1rem', - marginBottom: '0.1rem', - }, - - 'code': { - 'backgroundColor': theme('colors.gray-500 / 20%'), - 'fontWeight': 'normal', - 'padding': '0.05rem 0.5rem', - 'borderRadius': '0.25rem', - 'fontSize': '0.8rem', - - '&::before, &::after': { - display: 'none', - }, - }, + '--tw-prose-invert-pre-bg': theme('colors.gray-800'), }, }, })