mirror of
https://github.com/withastro/astro.git
synced 2025-03-24 23:21:57 -05:00
Remove markdown component (#7931)
This commit is contained in:
Bjorn Lu
Emanuele Stoppa
parent
6333651a9f
commit
3c31008519
88 changed files with 10 additions and 1499 deletions
9
.changeset/gentle-meals-crash.md
Normal file
9
.changeset/gentle-meals-crash.md
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
---
|
||||
'astro': major
|
||||
---
|
||||
|
||||
Remove support for `Astro.__renderMarkdown` which is used by `@astrojs/markdown-component`.
|
||||
|
||||
The `<Markdown />` component was deprecated in Astro v1 and is completely removed in v3. This integration must now be removed from your project.
|
||||
|
||||
As an alternative, you can use community packages that provide a similar component like https://github.com/natemoo-re/astro-remote instead.
|
||||
|
|
@ -27,7 +27,6 @@
|
|||
"@astrojs/vercel": "3.7.4",
|
||||
"@astrojs/vue": "2.2.1",
|
||||
"@astrojs/internal-helpers": "0.1.1",
|
||||
"@astrojs/markdown-component": "1.0.5",
|
||||
"@astrojs/markdown-remark": "2.2.1",
|
||||
"@astrojs/telemetry": "2.1.1",
|
||||
"@astrojs/underscore-redirects": "0.2.0"
|
||||
|
|
|
|||
|
|
@ -88,7 +88,6 @@ export class App {
|
|||
return createEnvironment({
|
||||
adapterName: this.#manifest.adapterName,
|
||||
logging: this.#logging,
|
||||
markdown: this.#manifest.markdown,
|
||||
mode: 'production',
|
||||
compressHTML: this.#manifest.compressHTML,
|
||||
renderers: this.#manifest.renderers,
|
||||
|
|
|
|||
|
|
@ -1,4 +1,3 @@
|
|||
import type { MarkdownRenderingOptions } from '@astrojs/markdown-remark';
|
||||
import type {
|
||||
RouteData,
|
||||
SerializedRouteData,
|
||||
|
|
@ -40,7 +39,6 @@ export type SSRManifest = {
|
|||
base: string;
|
||||
compressHTML: boolean;
|
||||
assetsPrefix?: string;
|
||||
markdown: MarkdownRenderingOptions;
|
||||
renderers: SSRLoadedRenderer[];
|
||||
/**
|
||||
* Map of directive name (e.g. `load`) to the directive script code
|
||||
|
|
|
|||
|
|
@ -507,7 +507,6 @@ async function generatePath(
|
|||
const env = createEnvironment({
|
||||
adapterName: manifest.adapterName,
|
||||
logging,
|
||||
markdown: manifest.markdown,
|
||||
mode: opts.mode,
|
||||
renderers: manifest.renderers,
|
||||
clientDirectives: manifest.clientDirectives,
|
||||
|
|
@ -619,7 +618,6 @@ export function createBuildManifest(
|
|||
entryModules: Object.fromEntries(internals.entrySpecifierToBundleMap.entries()),
|
||||
routes: [],
|
||||
adapterName: '',
|
||||
markdown: settings.config.markdown,
|
||||
clientDirectives: settings.clientDirectives,
|
||||
compressHTML: settings.config.compressHTML,
|
||||
renderers,
|
||||
|
|
|
|||
|
|
@ -489,7 +489,6 @@ function buildManifest(
|
|||
base: settings.config.base,
|
||||
compressHTML: settings.config.compressHTML,
|
||||
assetsPrefix: settings.config.build.assetsPrefix,
|
||||
markdown: settings.config.markdown,
|
||||
componentMetadata: Array.from(internals.componentMetadata),
|
||||
renderers: [],
|
||||
clientDirectives: Array.from(settings.clientDirectives),
|
||||
|
|
|
|||
|
|
@ -42,7 +42,6 @@ async function renderPage({ mod, renderContext, env, cookies }: RenderPage) {
|
|||
links: renderContext.links,
|
||||
styles: renderContext.styles,
|
||||
logging: env.logging,
|
||||
markdown: env.markdown,
|
||||
params: renderContext.params,
|
||||
pathname: renderContext.pathname,
|
||||
componentMetadata: renderContext.componentMetadata,
|
||||
|
|
|
|||
|
|
@ -1,4 +1,3 @@
|
|||
import type { MarkdownRenderingOptions } from '@astrojs/markdown-remark';
|
||||
import type { AstroSettings, RuntimeMode, SSRLoadedRenderer } from '../../@types/astro';
|
||||
import type { LogOptions } from '../logger/core.js';
|
||||
import type { ModuleLoader } from '../module-loader';
|
||||
|
|
@ -16,10 +15,6 @@ export interface Environment {
|
|||
adapterName?: string;
|
||||
/** logging options */
|
||||
logging: LogOptions;
|
||||
/**
|
||||
* Used to support `Astro.__renderMarkdown` for legacy `<Markdown />` component
|
||||
*/
|
||||
markdown: MarkdownRenderingOptions;
|
||||
/** "development" or "production" */
|
||||
mode: RuntimeMode;
|
||||
compressHTML: boolean;
|
||||
|
|
|
|||
|
|
@ -1,4 +1,3 @@
|
|||
import type { MarkdownRenderingOptions } from '@astrojs/markdown-remark';
|
||||
import type {
|
||||
AstroGlobal,
|
||||
AstroGlobalPartial,
|
||||
|
|
@ -27,10 +26,6 @@ export interface CreateResultArgs {
|
|||
*/
|
||||
ssr: boolean;
|
||||
logging: LogOptions;
|
||||
/**
|
||||
* Used to support `Astro.__renderMarkdown` for legacy `<Markdown />` component
|
||||
*/
|
||||
markdown: MarkdownRenderingOptions;
|
||||
params: Params;
|
||||
pathname: string;
|
||||
renderers: SSRLoadedRenderer[];
|
||||
|
|
@ -128,10 +123,8 @@ class Slots {
|
|||
}
|
||||
}
|
||||
|
||||
let renderMarkdown: any = null;
|
||||
|
||||
export function createResult(args: CreateResultArgs): SSRResult {
|
||||
const { markdown, params, request, resolve, locals } = args;
|
||||
const { params, request, resolve, locals } = args;
|
||||
|
||||
const url = new URL(request.url);
|
||||
const headers = new Headers();
|
||||
|
|
@ -222,31 +215,6 @@ export function createResult(args: CreateResultArgs): SSRResult {
|
|||
slots: astroSlots as unknown as AstroGlobal['slots'],
|
||||
};
|
||||
|
||||
Object.defineProperty(Astro, '__renderMarkdown', {
|
||||
// Ensure this API is not exposed to users
|
||||
enumerable: false,
|
||||
writable: false,
|
||||
// TODO: Remove this hole "Deno" logic once our plugin gets Deno support
|
||||
value: async function (content: string, opts: MarkdownRenderingOptions) {
|
||||
// @ts-expect-error
|
||||
if (typeof Deno !== 'undefined') {
|
||||
throw new Error('Markdown is not supported in Deno SSR');
|
||||
}
|
||||
|
||||
if (!renderMarkdown) {
|
||||
// The package is saved in this variable because Vite is too smart
|
||||
// and will try to inline it in buildtime
|
||||
let astroRemark = '@astrojs/';
|
||||
astroRemark += 'markdown-remark';
|
||||
|
||||
renderMarkdown = (await import(astroRemark)).renderMarkdown;
|
||||
}
|
||||
|
||||
const { code } = await renderMarkdown(content, { ...markdown, ...(opts ?? {}) });
|
||||
return code;
|
||||
},
|
||||
});
|
||||
|
||||
return Astro;
|
||||
},
|
||||
resolve,
|
||||
|
|
|
|||
|
|
@ -17,7 +17,6 @@ export function createDevelopmentEnvironment(
|
|||
let env = createEnvironment({
|
||||
adapterName: manifest.adapterName,
|
||||
logging,
|
||||
markdown: manifest.markdown,
|
||||
mode,
|
||||
// This will be overridden in the dev server
|
||||
renderers: [],
|
||||
|
|
|
|||
|
|
@ -92,7 +92,6 @@ export function createDevelopmentManifest(settings: AstroSettings): SSRManifest
|
|||
entryModules: {},
|
||||
routes: [],
|
||||
adapterName: '',
|
||||
markdown: settings.config.markdown,
|
||||
clientDirectives: settings.clientDirectives,
|
||||
renderers: [],
|
||||
base: settings.config.base,
|
||||
|
|
|
|||
|
|
@ -1,78 +0,0 @@
|
|||
# @astrojs/markdown-component
|
||||
|
||||
## 1.0.5
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- [#7343](https://github.com/withastro/astro/pull/7343) [`3d9a392a0`](https://github.com/withastro/astro/commit/3d9a392a09133aeb7a6efeb59c307f27a9b83198) Thanks [@matthewp](https://github.com/matthewp)! - Fix Markdown component error message false positive
|
||||
|
||||
## 1.0.4
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- [#7104](https://github.com/withastro/astro/pull/7104) [`826e02890`](https://github.com/withastro/astro/commit/826e0289005f645b902375b98d5549c6a95ccafa) Thanks [@bluwy](https://github.com/bluwy)! - Specify `"files"` field to only publish necessary files
|
||||
|
||||
## 1.0.3
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- [#6494](https://github.com/withastro/astro/pull/6494) [`a13e9d7e3`](https://github.com/withastro/astro/commit/a13e9d7e33baccf51e7d4815f99b481ad174bc57) Thanks [@Yan-Thomas](https://github.com/Yan-Thomas)! - Consistency improvements to several package descriptions
|
||||
|
||||
## 1.0.2
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- [#5281](https://github.com/withastro/astro/pull/5281) [`a558cf317`](https://github.com/withastro/astro/commit/a558cf317a98bfb79688a31ddb81c910e16e79c2) Thanks [@aleksa-codes](https://github.com/aleksa-codes)! - Update URLs in package.json
|
||||
|
||||
## 1.0.1
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- [#4208](https://github.com/withastro/astro/pull/4208) [`fe3b42398`](https://github.com/withastro/astro/commit/fe3b423982faa87c106e6a072bb14cb0a6678064) Thanks [@myakura](https://github.com/myakura)! - README update
|
||||
|
||||
## 1.0.0
|
||||
|
||||
### Major Changes
|
||||
|
||||
- [`04ad44563`](https://github.com/withastro/astro/commit/04ad445632c67bdd60c1704e1e0dcbcaa27b9308) - > Astro v1.0 is out! Read the [official announcement post](https://astro.build/blog/astro-1/).
|
||||
|
||||
**No breaking changes**. This package is now officially stable and compatible with `astro@1.0.0`!
|
||||
|
||||
## 0.2.1
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- [#4085](https://github.com/withastro/astro/pull/4085) [`c15cb3663`](https://github.com/withastro/astro/commit/c15cb36636320012c7d0c9d6ac8620029da70b0b) Thanks [@Princesseuh](https://github.com/Princesseuh)! - Fix TypeScript error when importing the component
|
||||
|
||||
## 0.2.0
|
||||
|
||||
### Minor Changes
|
||||
|
||||
- [#4016](https://github.com/withastro/astro/pull/4016) [`00fab4ce1`](https://github.com/withastro/astro/commit/00fab4ce135eb799cac69140403d7724686733d6) Thanks [@bholmesdev](https://github.com/bholmesdev)! - The use of components and JSX expressions in Markdown are no longer supported by default.
|
||||
|
||||
For long term support, migrate to the `@astrojs/mdx` integration for MDX support (including `.mdx` pages!).
|
||||
|
||||
Not ready to migrate to MDX? Add the legacy flag to your Astro config to re-enable the previous Markdown support.
|
||||
|
||||
```js
|
||||
// https://astro.build/config
|
||||
export default defineConfig({
|
||||
legacy: {
|
||||
astroFlavoredMarkdown: true,
|
||||
},
|
||||
});
|
||||
```
|
||||
|
||||
* [#3986](https://github.com/withastro/astro/pull/3986) [`bccd88f0e`](https://github.com/withastro/astro/commit/bccd88f0ebe1fbf383c0cee4b27a4c24c72dea72) Thanks [@matthewp](https://github.com/matthewp)! - Move the Markdown component to its own package
|
||||
|
||||
This change moves the Markdown component into its own package where it will be maintained separately. All that needs to change from a user's perspective is the import statement:
|
||||
|
||||
```astro
|
||||
|
||||
```
|
||||
|
||||
Becomes:
|
||||
|
||||
```astro
|
||||
|
||||
```
|
||||
|
|
@ -1,49 +0,0 @@
|
|||
---
|
||||
interface Props {
|
||||
content?: string;
|
||||
}
|
||||
|
||||
const dedent = (str: string) => {
|
||||
const _str = str.split('\n').filter(s => s.trimStart().length > 0);
|
||||
if (_str.length === 0) {
|
||||
return str.trimStart();
|
||||
}
|
||||
const trimmedSpace = _str[0].replace(_str[0].trimStart(), '');
|
||||
return str
|
||||
.split('\n')
|
||||
.map((ln) => ln.startsWith(trimmedSpace) ? ln.replace(trimmedSpace, '') : ln)
|
||||
.join('\n');
|
||||
}
|
||||
|
||||
// Internal props that should not be part of the external interface.
|
||||
interface InternalProps extends Props {
|
||||
class: string;
|
||||
$scope: string;
|
||||
}
|
||||
|
||||
let { content, class: className } = Astro.props as InternalProps;
|
||||
let html = null;
|
||||
let htmlContent = '';
|
||||
|
||||
// If no content prop provided, use the slot.
|
||||
if (!content) {
|
||||
content = await Astro.slots.render('default');
|
||||
if (content !== undefined && content !== null) {
|
||||
content = dedent(content);
|
||||
}
|
||||
}
|
||||
|
||||
if (content) {
|
||||
htmlContent = await (Astro as any).__renderMarkdown(content, {
|
||||
$: {
|
||||
scopedClassName: className,
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
html = htmlContent;
|
||||
---
|
||||
|
||||
<>
|
||||
{html ? <Fragment set:html={html} /> : <slot />}
|
||||
</>
|
||||
|
|
@ -1,43 +0,0 @@
|
|||
{
|
||||
"name": "@astrojs/markdown-component",
|
||||
"description": "Use the legacy Markdown component in your Astro site",
|
||||
"version": "1.0.5",
|
||||
"type": "module",
|
||||
"author": "withastro",
|
||||
"license": "MIT",
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "https://github.com/withastro/astro.git",
|
||||
"directory": "packages/markdown/component"
|
||||
},
|
||||
"bugs": "https://github.com/withastro/astro/issues",
|
||||
"homepage": "https://docs.astro.build/en/migrate/#markdown--component-removed",
|
||||
"main": "./Markdown.astro",
|
||||
"exports": {
|
||||
".": {
|
||||
"astro": "./Markdown.astro"
|
||||
}
|
||||
},
|
||||
"files": [
|
||||
"Markdown.astro"
|
||||
],
|
||||
"scripts": {
|
||||
"test": "mocha --exit --timeout 20000"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/mocha": "^9.1.1",
|
||||
"astro": "workspace:*",
|
||||
"chai": "^4.3.7",
|
||||
"cheerio": "1.0.0-rc.12",
|
||||
"github-slugger": "^1.5.0",
|
||||
"mocha": "^9.2.2",
|
||||
"rehype-autolink-headings": "^6.1.1",
|
||||
"rehype-slug": "^5.0.1",
|
||||
"rehype-toc": "^3.0.2",
|
||||
"remark-code-titles": "^0.1.2"
|
||||
},
|
||||
"keywords": [
|
||||
"astro",
|
||||
"astro-component"
|
||||
]
|
||||
}
|
||||
|
|
@ -1,16 +0,0 @@
|
|||
# @astrojs/markdown-component
|
||||
|
||||
This package brings legacy support for the `<Markdown />` component to all Astro projects.
|
||||
|
||||
> **Warning**
|
||||
> The `<Markdown />` component does not work in SSR. Consider [importing Markdown content](https://docs.astro.build/en/guides/markdown-content/#importing-markdown) instead.
|
||||
|
||||
```astro
|
||||
---
|
||||
import Markdown from '@astrojs/markdown-component';
|
||||
---
|
||||
|
||||
<Markdown># Markdown syntax is now supported! **Yay!**</Markdown>
|
||||
```
|
||||
|
||||
See our [Markdown Guide](https://docs.astro.build/en/guides/markdown-content/) for more info.
|
||||
|
|
@ -1,37 +0,0 @@
|
|||
import { expect } from 'chai';
|
||||
import * as cheerio from 'cheerio';
|
||||
import { loadFixture } from './test-utils.js';
|
||||
import addClasses from './fixtures/astro-markdown-plugins/add-classes.mjs';
|
||||
|
||||
describe('Astro Markdown plugins', () => {
|
||||
let fixture;
|
||||
|
||||
before(async () => {
|
||||
fixture = await loadFixture({
|
||||
root: './fixtures/astro-markdown-plugins/',
|
||||
markdown: {
|
||||
remarkPlugins: [
|
||||
'remark-code-titles',
|
||||
['rehype-autolink-headings', { behavior: 'prepend' }],
|
||||
],
|
||||
rehypePlugins: [
|
||||
'rehype-slug',
|
||||
['rehype-toc', { headings: ['h2', 'h3'] }],
|
||||
[addClasses, { 'h1,h2,h3': 'title' }],
|
||||
],
|
||||
},
|
||||
});
|
||||
await fixture.build();
|
||||
});
|
||||
|
||||
it('Can render Astro <Markdown> with plugins', async () => {
|
||||
const html = await fixture.readFile('/astro/index.html');
|
||||
const $ = cheerio.load(html);
|
||||
|
||||
// test 1: Added a TOC
|
||||
expect($('.toc')).to.have.lengthOf(1);
|
||||
|
||||
// teste 2: Added .title to h1
|
||||
expect($('#hello-world').hasClass('title')).to.equal(true);
|
||||
});
|
||||
});
|
||||
|
|
@ -1,147 +0,0 @@
|
|||
import { expect } from 'chai';
|
||||
import * as cheerio from 'cheerio';
|
||||
import { loadFixture } from './test-utils.js';
|
||||
|
||||
describe('Astro Markdown Shiki', () => {
|
||||
describe('Render shiki', () => {
|
||||
let fixture;
|
||||
|
||||
before(async () => {
|
||||
fixture = await loadFixture({ root: './fixtures/astro-markdown-shiki/normal/' });
|
||||
await fixture.build();
|
||||
});
|
||||
|
||||
it('Can render Astro <Markdown> with shiki', async () => {
|
||||
const html = await fixture.readFile('/astro/index.html');
|
||||
const $ = cheerio.load(html);
|
||||
|
||||
// There should be no HTML from Prism
|
||||
expect($('.token')).to.have.lengthOf(0);
|
||||
|
||||
expect($('pre')).to.have.lengthOf(2);
|
||||
|
||||
expect($('span.line')).to.have.lengthOf(2);
|
||||
expect($('span.line').get(0).children).to.have.lengthOf(1);
|
||||
expect($('span.line').get(1).children).to.have.lengthOf(5);
|
||||
});
|
||||
});
|
||||
|
||||
describe('Themes', () => {
|
||||
describe('Integrated theme', async () => {
|
||||
let fixture;
|
||||
|
||||
before(async () => {
|
||||
fixture = await loadFixture({ root: './fixtures/astro-markdown-shiki/themes-integrated/' });
|
||||
await fixture.build();
|
||||
});
|
||||
|
||||
it('<Markdown /> component', async () => {
|
||||
const html = await fixture.readFile('/astro/index.html');
|
||||
const $ = cheerio.load(html);
|
||||
|
||||
expect($('pre')).to.have.lengthOf(1);
|
||||
expect($('pre').hasClass('astro-code')).to.equal(true);
|
||||
expect($('pre').attr().style).to.equal('background-color: #fff; overflow-x: auto;');
|
||||
});
|
||||
});
|
||||
|
||||
describe('Custom theme', async () => {
|
||||
let fixture;
|
||||
|
||||
before(async () => {
|
||||
fixture = await loadFixture({ root: './fixtures/astro-markdown-shiki/themes-custom/' });
|
||||
await fixture.build();
|
||||
});
|
||||
|
||||
it('<Markdown /> component', async () => {
|
||||
const html = await fixture.readFile('/astro/index.html');
|
||||
const $ = cheerio.load(html);
|
||||
|
||||
expect($('pre')).to.have.lengthOf(1);
|
||||
expect($('pre').hasClass('astro-code')).to.equal(true);
|
||||
expect($('pre').attr().style).to.equal('background-color: #FDFDFE; overflow-x: auto;');
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe('Custom langs', () => {
|
||||
let fixture;
|
||||
|
||||
before(async () => {
|
||||
fixture = await loadFixture({ root: './fixtures/astro-markdown-shiki/langs/' });
|
||||
await fixture.build();
|
||||
});
|
||||
|
||||
it('<Markdown /> component', async () => {
|
||||
const html = await fixture.readFile('/astro/index.html');
|
||||
const $ = cheerio.load(html);
|
||||
|
||||
const segments = $('.line').get(6).children;
|
||||
expect(segments).to.have.lengthOf(3);
|
||||
expect(segments[0].attribs.style).to.be.equal('color: #E1E4E8');
|
||||
expect(segments[1].attribs.style).to.be.equal('color: #79B8FF');
|
||||
|
||||
const unknownLang = $('.line').last().html();
|
||||
expect(unknownLang).to.be.equal(
|
||||
'<span style="color: #e1e4e8">This language does not exist</span>'
|
||||
);
|
||||
});
|
||||
});
|
||||
|
||||
describe('Wrap', () => {
|
||||
describe('wrap = true', () => {
|
||||
const style =
|
||||
'background-color: #24292e; overflow-x: auto; white-space: pre-wrap; word-wrap: break-word;';
|
||||
let fixture;
|
||||
|
||||
before(async () => {
|
||||
fixture = await loadFixture({ root: './fixtures/astro-markdown-shiki/wrap-true/' });
|
||||
await fixture.build();
|
||||
});
|
||||
|
||||
it('<Markdown /> component', async () => {
|
||||
const html = await fixture.readFile('/astro/index.html');
|
||||
const $ = cheerio.load(html);
|
||||
|
||||
expect($('pre').get(0).attribs.style).to.equal(style);
|
||||
expect($('pre').get(1).attribs.style).to.equal(style);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe('wrap = false', () => {
|
||||
const style = 'background-color: #24292e; overflow-x: auto;';
|
||||
let fixture;
|
||||
|
||||
before(async () => {
|
||||
fixture = await loadFixture({ root: './fixtures/astro-markdown-shiki/wrap-false/' });
|
||||
await fixture.build();
|
||||
});
|
||||
|
||||
it('<Markdown /> component', async () => {
|
||||
const html = await fixture.readFile('/astro/index.html');
|
||||
const $ = cheerio.load(html);
|
||||
|
||||
expect($('pre').get(0).attribs.style).to.equal(style);
|
||||
expect($('pre').get(1).attribs.style).to.equal(style);
|
||||
});
|
||||
});
|
||||
|
||||
describe('wrap = null', () => {
|
||||
const style = 'background-color: #24292e';
|
||||
let fixture;
|
||||
|
||||
before(async () => {
|
||||
fixture = await loadFixture({ root: './fixtures/astro-markdown-shiki/wrap-null/' });
|
||||
await fixture.build();
|
||||
});
|
||||
|
||||
it('<Markdown /> component', async () => {
|
||||
const html = await fixture.readFile('/astro/index.html');
|
||||
const $ = cheerio.load(html);
|
||||
|
||||
expect($('pre').get(0).attribs.style).to.equal(style);
|
||||
expect($('pre').get(1).attribs.style).to.equal(style);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
|
@ -1,244 +0,0 @@
|
|||
import { expect } from 'chai';
|
||||
import * as cheerio from 'cheerio';
|
||||
import { loadFixture } from './test-utils.js';
|
||||
|
||||
describe('Astro Markdown', () => {
|
||||
let fixture;
|
||||
|
||||
before(async () => {
|
||||
fixture = await loadFixture({
|
||||
root: './fixtures/astro-markdown/',
|
||||
});
|
||||
await fixture.build();
|
||||
});
|
||||
|
||||
// NOTE: This test uses legacy markdown, which requires `github-slugger` to be installed.
|
||||
// This breaks in strict dependency installation, but since it's a legacy feature, ignore for now.
|
||||
it('Can load markdown pages with Astro', async () => {
|
||||
const html = await fixture.readFile('/post/index.html');
|
||||
const $ = cheerio.load(html);
|
||||
|
||||
// test 1: There is a div added in markdown
|
||||
expect($('#first').length).to.be.ok;
|
||||
|
||||
// test 2: There is a div added via a component from markdown
|
||||
expect($('#test').length).to.be.ok;
|
||||
});
|
||||
|
||||
it('Can handle code elements without extra spacing', async () => {
|
||||
const html = await fixture.readFile('/code-element/index.html');
|
||||
const $ = cheerio.load(html);
|
||||
|
||||
$('code').each((_, el) => {
|
||||
expect($(el).html()).to.equal($(el).html().trim());
|
||||
});
|
||||
});
|
||||
|
||||
it('Correctly handles component children in markdown pages (#3319)', async () => {
|
||||
const html = await fixture.readFile('/children/index.html');
|
||||
|
||||
expect(html).not.to.contain('<p></p>');
|
||||
});
|
||||
|
||||
it('Can handle HTML comments in markdown pages', async () => {
|
||||
const html = await fixture.readFile('/comment/index.html');
|
||||
const $ = cheerio.load(html);
|
||||
|
||||
expect($('h1').text()).to.equal('It works!');
|
||||
});
|
||||
|
||||
it('Prevents `*/` sequences from breaking HTML comments (#3476)', async () => {
|
||||
const html = await fixture.readFile('/comment-with-js/index.html');
|
||||
const $ = cheerio.load(html);
|
||||
|
||||
expect($('h1').text()).to.equal('It still works!');
|
||||
});
|
||||
|
||||
it('Can handle HTML comments in inline code', async () => {
|
||||
const html = await fixture.readFile('/comment-with-js/index.html');
|
||||
const $ = cheerio.load(html);
|
||||
|
||||
expect($('p code').text()).to.equal('<!-- HTML comments in code -->');
|
||||
});
|
||||
|
||||
it('Can handle HTML comments in code fences', async () => {
|
||||
const html = await fixture.readFile('/comment-with-js/index.html');
|
||||
const $ = cheerio.load(html);
|
||||
|
||||
expect($('pre > code').text()).to.equal('<!-- HTML comments in code fence -->');
|
||||
});
|
||||
|
||||
it('Can load more complex jsxy stuff', async () => {
|
||||
const html = await fixture.readFile('/complex/index.html');
|
||||
const $ = cheerio.load(html);
|
||||
|
||||
expect($('#test').text()).to.equal('Hello world');
|
||||
});
|
||||
|
||||
it('Empty code blocks do not fail', async () => {
|
||||
const html = await fixture.readFile('/empty-code/index.html');
|
||||
const $ = cheerio.load(html);
|
||||
|
||||
// test 1: There is not a `<code>` in the codeblock
|
||||
expect($('pre')[0].children).to.have.lengthOf(1);
|
||||
|
||||
// test 2: The empty `<pre>` failed to render
|
||||
expect($('pre')[1].children).to.have.lengthOf(0);
|
||||
});
|
||||
|
||||
it('Runs code blocks through syntax highlighter', async () => {
|
||||
const html = await fixture.readFile('/code/index.html');
|
||||
const $ = cheerio.load(html);
|
||||
|
||||
// test 1: There are child spans in code blocks
|
||||
expect($('code span').length).greaterThan(0);
|
||||
});
|
||||
|
||||
it('Scoped styles should not break syntax highlight', async () => {
|
||||
const html = await fixture.readFile('/scopedStyles-code/index.html');
|
||||
const $ = cheerio.load(html);
|
||||
|
||||
// test 1: <pre> tag has correct shiki class
|
||||
expect($('pre').hasClass('astro-code')).to.equal(true);
|
||||
|
||||
// test 2: inline styles are still applied
|
||||
expect($('pre').is('[style]')).to.equal(true);
|
||||
|
||||
// test 3: There are styled child spans in code blocks
|
||||
expect($('pre code span').length).to.be.greaterThan(0);
|
||||
expect($('pre code span').is('[style]')).to.equal(true);
|
||||
});
|
||||
|
||||
function isAstroScopedClass(cls) {
|
||||
return /^astro-.*/.test(cls);
|
||||
}
|
||||
|
||||
it('Scoped styles should be applied to syntax highlighted lines', async () => {
|
||||
const html = await fixture.readFile('/scopedStyles-code/index.html');
|
||||
const $ = cheerio.load(html);
|
||||
|
||||
// test 1: the "pre" tag receives scoped style
|
||||
const preClassList = $('pre').attr('class').split(/\s+/);
|
||||
expect(preClassList.length).to.equal(3);
|
||||
const preAstroClass = preClassList.find(isAstroScopedClass);
|
||||
expect(Boolean(preAstroClass)).to.equal(true);
|
||||
|
||||
// test 2: each "span" line receives scoped style
|
||||
const spanClassList = $('pre code span').attr('class').split(/\s+/);
|
||||
expect(spanClassList.length).to.equal(2);
|
||||
const spanAstroClass = spanClassList.find(isAstroScopedClass);
|
||||
expect(Boolean(spanAstroClass)).to.equal(true);
|
||||
});
|
||||
|
||||
it('Renders correctly when deeply nested on a page', async () => {
|
||||
const html = await fixture.readFile('/deep/index.html');
|
||||
const $ = cheerio.load(html);
|
||||
|
||||
// test 1: Rendered all children
|
||||
expect($('#deep').children()).to.have.lengthOf(3);
|
||||
|
||||
// tests 2–4: Only rendered title in each section
|
||||
expect($('.a').children()).to.have.lengthOf(1);
|
||||
expect($('.b').children()).to.have.lengthOf(1);
|
||||
expect($('.c').children()).to.have.lengthOf(1);
|
||||
|
||||
// test 5–7: Rendered title in correct section
|
||||
expect($('.a > h2').text()).to.equal('A');
|
||||
expect($('.b > h2').text()).to.equal('B');
|
||||
expect($('.c > h2').text()).to.equal('C');
|
||||
});
|
||||
|
||||
it('Renders dynamic content though the content attribute', async () => {
|
||||
const html = await fixture.readFile('/external/index.html');
|
||||
const $ = cheerio.load(html);
|
||||
|
||||
// test 1: Rendered markdown content
|
||||
expect($('#outer')).to.have.lengthOf(1);
|
||||
|
||||
// test 2: Nested markdown content
|
||||
expect($('#inner')).to.have.lengthOf(1);
|
||||
|
||||
// test 3: Scoped class passed down
|
||||
expect($('#inner').is('[class]')).to.equal(true);
|
||||
});
|
||||
|
||||
it('Renders curly braces correctly', async () => {
|
||||
const html = await fixture.readFile('/braces/index.html');
|
||||
const $ = cheerio.load(html);
|
||||
|
||||
// test 1: Rendered curly braces markdown content
|
||||
expect($('code')).to.have.lengthOf(3);
|
||||
|
||||
// test 2: Rendered curly braces markdown content
|
||||
expect($('code:first-child').text()).to.equal('({})');
|
||||
|
||||
// test 3: Rendered curly braces markdown content
|
||||
expect($('code:nth-child(2)').text()).to.equal('{...props}');
|
||||
|
||||
// test 4: Rendered curly braces markdown content
|
||||
expect($('code:last-child').text()).to.equal('{/* JavaScript */}');
|
||||
});
|
||||
|
||||
it('Does not close parent early when using content attribute (#494)', async () => {
|
||||
const html = await fixture.readFile('/close/index.html');
|
||||
const $ = cheerio.load(html);
|
||||
|
||||
// test <Markdown content /> closed div#target early
|
||||
expect($('#target').children()).to.have.lengthOf(2);
|
||||
});
|
||||
|
||||
it('Can render markdown with --- for horizontal rule', async () => {
|
||||
const html = await fixture.readFile('/dash/index.html');
|
||||
expect(!!html).to.equal(true);
|
||||
});
|
||||
|
||||
it('Can render markdown content prop (#1259)', async () => {
|
||||
const html = await fixture.readFile('/content/index.html');
|
||||
const $ = cheerio.load(html);
|
||||
|
||||
// test Markdown rendered correctly via content prop
|
||||
expect($('h1').text()).to.equal('Foo');
|
||||
});
|
||||
|
||||
it("doesn't occurs TypeError when no elements", async () => {
|
||||
const html = await fixture.readFile('/no-elements/index.html');
|
||||
// render html without error
|
||||
expect(html).to.be.ok;
|
||||
});
|
||||
|
||||
it('can render nested list correctly', async () => {
|
||||
const html = await fixture.readFile('/nested-list/index.html');
|
||||
const $ = cheerio.load(html);
|
||||
/**
|
||||
* - list
|
||||
* - list
|
||||
*/
|
||||
expect($('#target > ul > li').children()).to.have.lengthOf(1);
|
||||
expect($('#target > ul > li > ul > li').text()).to.equal('nested list');
|
||||
/**
|
||||
* 1. Hello
|
||||
* 1. nested hello
|
||||
*/
|
||||
expect($('#target > ol > li').children()).to.have.lengthOf(1);
|
||||
expect($('#target > ol > li > ol > li').text()).to.equal('nested hello');
|
||||
});
|
||||
|
||||
it('Escapes HTML tags in code blocks', async () => {
|
||||
const html = await fixture.readFile('/code-in-md/index.html');
|
||||
const $ = cheerio.load(html);
|
||||
|
||||
expect($('code').eq(0).html()).to.equal('<script>');
|
||||
expect($('blockquote').length).to.equal(1);
|
||||
expect($('code').eq(1).html()).to.equal('</script>');
|
||||
expect($('pre').html()).to.contain('>This should also work without any problems.<');
|
||||
});
|
||||
|
||||
it('Generate the right props for the layout', async () => {
|
||||
const html = await fixture.readFile('/layout-props/index.html');
|
||||
const $ = cheerio.load(html);
|
||||
|
||||
expect($('#title').text()).to.equal('Hello world!');
|
||||
expect($('#url').text()).to.equal('/layout-props');
|
||||
expect($('#file').text()).to.match(/.*\/layout-props.md$/);
|
||||
});
|
||||
});
|
||||
|
|
@ -1,18 +0,0 @@
|
|||
import { selectAll } from 'hast-util-select';
|
||||
|
||||
export default (additions) => {
|
||||
const adders = Object.entries(additions).map(adder);
|
||||
return (node) => adders.forEach((a) => a(node));
|
||||
};
|
||||
|
||||
const adder = ([selector, className]) => {
|
||||
const writer = write(className);
|
||||
return (node) => selectAll(selector, node).forEach(writer);
|
||||
};
|
||||
|
||||
const write =
|
||||
(className) =>
|
||||
({ properties }) => {
|
||||
if (!properties.className) properties.className = className;
|
||||
else properties.className += ` ${className}`;
|
||||
};
|
||||
|
|
@ -1,7 +0,0 @@
|
|||
import { defineConfig } from 'astro/config';
|
||||
import preact from '@astrojs/preact';
|
||||
|
||||
// https://astro.build/config
|
||||
export default defineConfig({
|
||||
integrations: [preact()],
|
||||
});
|
||||
|
|
@ -1,13 +0,0 @@
|
|||
{
|
||||
"name": "@test/astro-markdown-component-astro-markdown-component-plugins",
|
||||
"version": "0.0.0",
|
||||
"private": true,
|
||||
"dependencies": {
|
||||
"@astrojs/markdown-component": "workspace:*",
|
||||
"@astrojs/preact": "workspace:*",
|
||||
"astro": "workspace:*",
|
||||
"hast-util-select": "^5.0.2",
|
||||
"preact": "^10.15.1",
|
||||
"rehype-slug": "^5.0.1"
|
||||
}
|
||||
}
|
||||
|
|
@ -1,10 +0,0 @@
|
|||
<html>
|
||||
<head>
|
||||
<!-- Head Stuff -->
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<slot></slot>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,10 +0,0 @@
|
|||
---
|
||||
import Markdown from '@astrojs/markdown-component';
|
||||
import Layout from '../layouts/content.astro';
|
||||
---
|
||||
|
||||
<Layout>
|
||||
<Markdown is:raw>
|
||||
# Hello world
|
||||
</Markdown>
|
||||
</Layout>
|
||||
|
|
@ -1,19 +0,0 @@
|
|||
const riGrammar = JSON.parse(
|
||||
String.raw`{"name":"rinfo","patterns":[{"include":"#lf-rinfo"}],"repository":{"lf-rinfo":{"patterns":[{"include":"#control"},{"include":"#operator"},{"include":"#strings"},{"include":"#number"},{"include":"#comment"},{"include":"#literal"}]},"control":{"patterns":[{"name":"keyword.control.ri","match":"\\b(si|mientras|repetir)\\b"},{"name":"keyword.other.ri","match":"\\b(programa|robots|areas|variables|comenzar|fin)\\b"},{"name":"support.function.other.ri","match":"\\b(tomarFlor|HayFlorEnLaBolsa|HayFlorEnLaEsquina|depositarFlor|HayPapelEnLaBolsa|HayPapelEnLaEsquina|tomarPapel|depositarPapel)\\b"}]},"operator":{"comment":"Captures operators and also puts them in different sub-groups that further describe them","patterns":[{"match":"\\+|-|\\*|/","name":"keyword.operator.arithmetic.ri"},{"match":"<|>|<=|>=|=|<>|!=","name":"keyword.operator.comparison.ri"},{"match":"\\b(Pos|Informar|Leer|Iniciar|AsignarArea|AreaC)\\b","name":"support.function.arithmetic.ri"},{"match":":=","name":"keyword.operator.assign.ri"},{"match":"(&|~)","name":"support.function.logical.ri"}]},"strings":{"name":"string.quoted.double.ri","beginCaptures":{"0":{"name":"string.quoted.double.begin.ri"}},"endCaptures":{"0":{"name":"string.quoted.double.end.ri"}},"begin":"\"","end":"\"","patterns":[{"name":"constant.character.escape.ri","match":"\\\\."}]},"comment":{"patterns":[{"name":"comment.block.ri","begin":"{","end":"}","patterns":[{"include":"#comment"}]}]},"literal":{"patterns":[{"name":"constant.language.ri","match":"\\b(verdadero|falso|boolean|numero)\\b"}]},"number":{"patterns":[{"comment":"Captures decimal numbers, with the negative sign being considered an operator","match":"(-)?(?:((?:\\b\\d+(?:\\.\\d*)?|\\.\\d+)(?:\\b|e-?\\d+\\b)%?)|(\\$[0-9]+\\b))","captures":{"1":{"name":"keyword.operator.arithmetic.ri"},"2":{"name":"constant.numeric.decimal.ri"},"3":{"name":"constant.numeric.hex.ri"}}}]}},"scopeName":"source.rinfo"}`
|
||||
);
|
||||
|
||||
export default {
|
||||
markdown: {
|
||||
syntaxHighlight: 'shiki',
|
||||
shikiConfig: {
|
||||
langs: [
|
||||
{
|
||||
id: 'rinfo',
|
||||
scopeName: 'source.rinfo',
|
||||
grammar: riGrammar,
|
||||
aliases: ['ri'],
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
}
|
||||
|
|
@ -1,9 +0,0 @@
|
|||
{
|
||||
"name": "@test/astro-markdown-component-astro-markdown-shiki-langs",
|
||||
"version": "0.0.0",
|
||||
"private": true,
|
||||
"dependencies": {
|
||||
"astro": "workspace:*",
|
||||
"@astrojs/markdown-component": "workspace:*"
|
||||
}
|
||||
}
|
||||
|
|
@ -1,10 +0,0 @@
|
|||
<html>
|
||||
<head>
|
||||
<!-- Head Stuff -->
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<slot></slot>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,31 +0,0 @@
|
|||
---
|
||||
import Markdown from '@astrojs/markdown-component';
|
||||
import Layout from '../layouts/content.astro';
|
||||
---
|
||||
|
||||
<Layout>
|
||||
<Markdown is:raw>
|
||||
# Hello world
|
||||
|
||||
```rinfo
|
||||
programa Rinfo
|
||||
areas
|
||||
ciuadad: AreaC(1,1,100,100)
|
||||
robots
|
||||
robot robot1
|
||||
comenzar
|
||||
Informar(PosAv, PosCa)
|
||||
fin
|
||||
variables
|
||||
Rinfo: robot1
|
||||
comenzar
|
||||
AsignarArea(Rinfo, ciudad)
|
||||
Iniciar(Rinfo, 1, 1)
|
||||
fin
|
||||
```
|
||||
|
||||
```unknown
|
||||
This language does not exist
|
||||
```
|
||||
</Markdown>
|
||||
</Layout>
|
||||
|
|
@ -1,5 +0,0 @@
|
|||
export default {
|
||||
markdown: {
|
||||
syntaxHighlight: 'shiki',
|
||||
},
|
||||
}
|
||||
|
|
@ -1,9 +0,0 @@
|
|||
{
|
||||
"name": "@test/astro-markdown-component-astro-markdown-shiki-normal",
|
||||
"version": "0.0.0",
|
||||
"private": true,
|
||||
"dependencies": {
|
||||
"astro": "workspace:*",
|
||||
"@astrojs/markdown-component": "workspace:*"
|
||||
}
|
||||
}
|
||||
|
|
@ -1,10 +0,0 @@
|
|||
<html>
|
||||
<head>
|
||||
<!-- Head Stuff -->
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<slot></slot>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,18 +0,0 @@
|
|||
---
|
||||
import Markdown from '@astrojs/markdown-component';
|
||||
import Layout from '../layouts/content.astro';
|
||||
---
|
||||
|
||||
<Layout>
|
||||
<Markdown is:raw>
|
||||
# Hello world
|
||||
|
||||
```
|
||||
plaintext
|
||||
```
|
||||
|
||||
```js
|
||||
console.log('JavaScript')
|
||||
```
|
||||
</Markdown>
|
||||
</Layout>
|
||||
|
|
@ -1,9 +0,0 @@
|
|||
{
|
||||
"name": "@test/astro-markdown-component-astro-markdown-component-shiki",
|
||||
"version": "0.0.0",
|
||||
"private": true,
|
||||
"dependencies": {
|
||||
"astro": "workspace:*",
|
||||
"@astrojs/markdown-component": "workspace:*"
|
||||
}
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -1,9 +0,0 @@
|
|||
{
|
||||
"name": "@test/astro-markdown-component-astro-markdown-shiki-themes-custom",
|
||||
"version": "0.0.0",
|
||||
"private": true,
|
||||
"dependencies": {
|
||||
"astro": "workspace:*",
|
||||
"@astrojs/markdown-component": "workspace:*"
|
||||
}
|
||||
}
|
||||
|
|
@ -1,10 +0,0 @@
|
|||
<html>
|
||||
<head>
|
||||
<!-- Head Stuff -->
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<slot></slot>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,14 +0,0 @@
|
|||
---
|
||||
import Markdown from '@astrojs/markdown-component';
|
||||
import Layout from '../layouts/content.astro';
|
||||
---
|
||||
|
||||
<Layout>
|
||||
<Markdown is:raw>
|
||||
# Hello world
|
||||
|
||||
```js
|
||||
console.log('JavaScript')
|
||||
```
|
||||
</Markdown>
|
||||
</Layout>
|
||||
|
|
@ -1,6 +0,0 @@
|
|||
export default {
|
||||
markdown: {
|
||||
syntaxHighlight: 'shiki',
|
||||
shikiConfig: { theme: 'github-light' },
|
||||
},
|
||||
}
|
||||
|
|
@ -1,9 +0,0 @@
|
|||
{
|
||||
"name": "@test/astro-markdown-component-astro-markdown-shiki-themes-integrated",
|
||||
"version": "0.0.0",
|
||||
"private": true,
|
||||
"dependencies": {
|
||||
"astro": "workspace:*",
|
||||
"@astrojs/markdown-component": "workspace:*"
|
||||
}
|
||||
}
|
||||
|
|
@ -1,10 +0,0 @@
|
|||
<html>
|
||||
<head>
|
||||
<!-- Head Stuff -->
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<slot></slot>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,14 +0,0 @@
|
|||
---
|
||||
import Markdown from '@astrojs/markdown-component';
|
||||
import Layout from '../layouts/content.astro';
|
||||
---
|
||||
|
||||
<Layout>
|
||||
<Markdown is:raw>
|
||||
# Hello world
|
||||
|
||||
```js
|
||||
console.log('JavaScript')
|
||||
```
|
||||
</Markdown>
|
||||
</Layout>
|
||||
|
|
@ -1,24 +0,0 @@
|
|||
---
|
||||
layout: ../layouts/content.astro
|
||||
---
|
||||
|
||||
# Hello world
|
||||
|
||||
```yaml
|
||||
apiVersion: v3
|
||||
kind: Pod
|
||||
metadata:
|
||||
name: rss-site
|
||||
labels:
|
||||
app: web
|
||||
spec:
|
||||
containers:
|
||||
- name: front-end
|
||||
image: nginx
|
||||
ports:
|
||||
- containerPort: 80
|
||||
- name: rss-reader
|
||||
image: nickchase/rss-php-nginx:v1
|
||||
ports:
|
||||
- containerPort: 88
|
||||
```
|
||||
|
|
@ -1,6 +0,0 @@
|
|||
export default {
|
||||
markdown: {
|
||||
syntaxHighlight: 'shiki',
|
||||
shikiConfig: { wrap: false },
|
||||
},
|
||||
}
|
||||
|
|
@ -1,9 +0,0 @@
|
|||
{
|
||||
"name": "@test/astro-markdown-component-astro-markdown-shiki-wrap-false",
|
||||
"version": "0.0.0",
|
||||
"private": true,
|
||||
"dependencies": {
|
||||
"astro": "workspace:*",
|
||||
"@astrojs/markdown-component": "workspace:*"
|
||||
}
|
||||
}
|
||||
|
|
@ -1,10 +0,0 @@
|
|||
<html>
|
||||
<head>
|
||||
<!-- Head Stuff -->
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<slot></slot>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,18 +0,0 @@
|
|||
---
|
||||
import Markdown from '@astrojs/markdown-component';
|
||||
import Layout from '../layouts/content.astro';
|
||||
---
|
||||
|
||||
<Layout>
|
||||
<Markdown is:raw>
|
||||
# Hello world
|
||||
|
||||
```
|
||||
plaintext
|
||||
```
|
||||
|
||||
```js
|
||||
console.log('JavaScript')
|
||||
```
|
||||
</Markdown>
|
||||
</Layout>
|
||||
|
|
@ -1,6 +0,0 @@
|
|||
export default {
|
||||
markdown: {
|
||||
syntaxHighlight: 'shiki',
|
||||
shikiConfig: { wrap: null },
|
||||
},
|
||||
}
|
||||
|
|
@ -1,9 +0,0 @@
|
|||
{
|
||||
"name": "@test/astro-markdown-component-astro-markdown-shiki-wrap-null",
|
||||
"version": "0.0.0",
|
||||
"private": true,
|
||||
"dependencies": {
|
||||
"astro": "workspace:*",
|
||||
"@astrojs/markdown-component": "workspace:*"
|
||||
}
|
||||
}
|
||||
|
|
@ -1,10 +0,0 @@
|
|||
<html>
|
||||
<head>
|
||||
<!-- Head Stuff -->
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<slot></slot>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,18 +0,0 @@
|
|||
---
|
||||
import Markdown from '@astrojs/markdown-component';
|
||||
import Layout from '../layouts/content.astro';
|
||||
---
|
||||
|
||||
<Layout>
|
||||
<Markdown is:raw>
|
||||
# Hello world
|
||||
|
||||
```
|
||||
plaintext
|
||||
```
|
||||
|
||||
```js
|
||||
console.log('JavaScript')
|
||||
```
|
||||
</Markdown>
|
||||
</Layout>
|
||||
|
|
@ -1,6 +0,0 @@
|
|||
export default {
|
||||
markdown: {
|
||||
syntaxHighlight: 'shiki',
|
||||
shikiConfig: { wrap: true },
|
||||
},
|
||||
}
|
||||
|
|
@ -1,9 +0,0 @@
|
|||
{
|
||||
"name": "@test/astro-markdown-component-astro-markdown-shiki-wrap-true",
|
||||
"version": "0.0.0",
|
||||
"private": true,
|
||||
"dependencies": {
|
||||
"astro": "workspace:*",
|
||||
"@astrojs/markdown-component": "workspace:*"
|
||||
}
|
||||
}
|
||||
|
|
@ -1,10 +0,0 @@
|
|||
<html>
|
||||
<head>
|
||||
<!-- Head Stuff -->
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<slot></slot>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,18 +0,0 @@
|
|||
---
|
||||
import Markdown from '@astrojs/markdown-component';
|
||||
import Layout from '../layouts/content.astro';
|
||||
---
|
||||
|
||||
<Layout>
|
||||
<Markdown is:raw>
|
||||
# Hello world
|
||||
|
||||
```
|
||||
plaintext
|
||||
```
|
||||
|
||||
```js
|
||||
console.log('JavaScript')
|
||||
```
|
||||
</Markdown>
|
||||
</Layout>
|
||||
|
|
@ -1,9 +0,0 @@
|
|||
import { defineConfig } from 'astro/config';
|
||||
import preact from '@astrojs/preact';
|
||||
import svelte from "@astrojs/svelte";
|
||||
|
||||
// https://astro.build/config
|
||||
export default defineConfig({
|
||||
integrations: [preact(), svelte()],
|
||||
site: 'https://astro.build/',
|
||||
});
|
||||
|
|
@ -1,13 +0,0 @@
|
|||
{
|
||||
"name": "@test/astro-markdown-component-astro-markdown-component",
|
||||
"version": "0.0.0",
|
||||
"private": true,
|
||||
"dependencies": {
|
||||
"@astrojs/markdown-component": "workspace:*",
|
||||
"@astrojs/preact": "workspace:*",
|
||||
"@astrojs/svelte": "workspace:*",
|
||||
"astro": "workspace:*",
|
||||
"preact": "^10.15.1",
|
||||
"svelte": "^3.59.1"
|
||||
}
|
||||
}
|
||||
|
|
@ -1,7 +0,0 @@
|
|||
import { h } from 'preact';
|
||||
import { useState } from 'preact/hooks';
|
||||
|
||||
export default function () {
|
||||
const [count, setCount] = useState(0);
|
||||
return <button onClick={() => setCount(count + 1)}>{count}</button>;
|
||||
}
|
||||
|
|
@ -1,5 +0,0 @@
|
|||
import { h } from 'preact';
|
||||
|
||||
export default function () {
|
||||
return <div id="test">Testing</div>;
|
||||
}
|
||||
|
|
@ -1,5 +0,0 @@
|
|||
import { h } from 'preact';
|
||||
|
||||
export default function ({ name }) {
|
||||
return <div id="test">Hello {name}</div>;
|
||||
}
|
||||
|
|
@ -1,13 +0,0 @@
|
|||
<article>
|
||||
<section class="fragmentSlot">
|
||||
<slot name="fragmentSlot">❌ Missing content for slot "fragmentSlot"</slot>
|
||||
</section>
|
||||
|
||||
<section class="pSlot">
|
||||
<slot name="pSlot">❌ Missing content for slot "pSlot"</slot>
|
||||
</section>
|
||||
|
||||
<section class="defaultSlot">
|
||||
<slot>❌ Missing content for default slot</slot>
|
||||
</section>
|
||||
</article>
|
||||
|
|
@ -1,11 +0,0 @@
|
|||
<script>
|
||||
let cool = false
|
||||
</script>
|
||||
|
||||
<button on:click={() => cool = true}>This is cool right? {cool}</button>
|
||||
|
||||
<style>
|
||||
button {
|
||||
background: green;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,20 +0,0 @@
|
|||
import { h } from 'preact';
|
||||
|
||||
const TextBlock = ({
|
||||
title,
|
||||
children,
|
||||
noPadding = false,
|
||||
}) => {
|
||||
return (
|
||||
<div
|
||||
className={`${
|
||||
noPadding ? "" : "md:px-2 lg:px-4"
|
||||
} flex-1 prose prose-headings:font-grotesk`}
|
||||
>
|
||||
<h3>{title}</h3>
|
||||
<p>{children}</p>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default TextBlock;
|
||||
|
|
@ -1,5 +0,0 @@
|
|||
import Counter from './Counter';
|
||||
|
||||
export default {
|
||||
Counter
|
||||
}
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
This should have `nospace` around it.
|
||||
|
||||
This should have <code class="custom-class">nospace</code> around it.
|
||||
|
|
@ -1,6 +0,0 @@
|
|||
---
|
||||
---
|
||||
|
||||
## Plain jane
|
||||
|
||||
I am plain markdown!
|
||||
|
|
@ -1,10 +0,0 @@
|
|||
<html>
|
||||
<head>
|
||||
<!-- Head Stuff -->
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<slot></slot>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,17 +0,0 @@
|
|||
---
|
||||
interface Props {
|
||||
url: string;
|
||||
file: string;
|
||||
title: string;
|
||||
}
|
||||
|
||||
const { title, url, file } = Astro.props.content as Props;
|
||||
---
|
||||
|
||||
<html>
|
||||
<body>
|
||||
<div id="title">{title}</div>
|
||||
<div id="url">{url}</div>
|
||||
<div id="file">{file}</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,13 +0,0 @@
|
|||
---
|
||||
import Markdown from '@astrojs/markdown-component';
|
||||
const title = 'My Blog Post';
|
||||
const description = 'This is a post about some stuff.';
|
||||
---
|
||||
|
||||
<Markdown is:raw>
|
||||
## Interesting Topic
|
||||
|
||||
`({})`
|
||||
`{...props}`
|
||||
`{/* JavaScript */}`
|
||||
</Markdown>
|
||||
|
|
@ -1,12 +0,0 @@
|
|||
---
|
||||
setup: import TextBlock from '../components/TextBlock'
|
||||
---
|
||||
{/* https://github.com/withastro/astro/issues/3319 */}
|
||||
|
||||
<TextBlock title="Hello world!" noPadding>
|
||||
<ul class="not-prose">
|
||||
<li>A</li>
|
||||
<li>B</li>
|
||||
<li>C</li>
|
||||
</ul>
|
||||
</TextBlock>
|
||||
|
|
@ -1,12 +0,0 @@
|
|||
---
|
||||
import Markdown from '@astrojs/markdown-component';
|
||||
const content = `Markdown *content* to render`;
|
||||
---
|
||||
|
||||
<main>
|
||||
<div id="target">
|
||||
<Markdown content={content} />
|
||||
<p>Some other stuff</p>
|
||||
</div>
|
||||
<p>Lastly...</p>
|
||||
</main>
|
||||
|
|
@ -1,7 +0,0 @@
|
|||
---
|
||||
const content = await Astro.glob('../content/*.md');
|
||||
---
|
||||
|
||||
<div>
|
||||
{content.map(({ Content }) => <Content />)}
|
||||
</div>
|
||||
|
|
@ -1,16 +0,0 @@
|
|||
# Inline code blocks
|
||||
|
||||
`<script>` tags in **Astro** components are now built,
|
||||
bundled and optimized by default.
|
||||
|
||||
> Markdown formatting still works between tags in inline code blocks.
|
||||
|
||||
We can also use closing `</script>` tags without any problems.
|
||||
|
||||
# Fenced code blocks
|
||||
|
||||
```html
|
||||
<body>
|
||||
<div>This should also work without any problems.</div>
|
||||
</body>
|
||||
```
|
||||
|
|
@ -1,13 +0,0 @@
|
|||
---
|
||||
import Markdown from '@astrojs/markdown-component';
|
||||
const title = 'My Blog Post';
|
||||
const description = 'This is a post about some stuff.';
|
||||
---
|
||||
|
||||
<Markdown is:raw>
|
||||
## Interesting Topic
|
||||
|
||||
```js
|
||||
const thing = () => {};
|
||||
```
|
||||
</Markdown>
|
||||
|
|
@ -1,23 +0,0 @@
|
|||
<!--
|
||||
HTML comments with */ inside!
|
||||
-->
|
||||
|
||||
<!--
|
||||
```js
|
||||
/**
|
||||
* It even works inside nested fenced code blocks!
|
||||
*/
|
||||
function test() {
|
||||
/* Yay */
|
||||
return 'Nice!';
|
||||
}
|
||||
```
|
||||
-->
|
||||
|
||||
```
|
||||
<!-- HTML comments in code fence -->
|
||||
```
|
||||
|
||||
`<!-- HTML comments in code -->`
|
||||
|
||||
# It still works!
|
||||
|
|
@ -1,2 +0,0 @@
|
|||
<!-- HTML comments! -->
|
||||
# It works!
|
||||
|
|
@ -1,16 +0,0 @@
|
|||
---
|
||||
import Markdown from '@astrojs/markdown-component';
|
||||
import Layout from '../layouts/content.astro';
|
||||
import Hello from '../components/Hello.jsx';
|
||||
|
||||
const title = 'My Blog Post';
|
||||
const description = 'This is a post about some stuff.';
|
||||
---
|
||||
|
||||
<Layout>
|
||||
<Markdown>
|
||||
## Interesting Topic
|
||||
|
||||
<Hello name={`world`} />
|
||||
</Markdown>
|
||||
</Layout>
|
||||
|
|
@ -1,6 +0,0 @@
|
|||
---
|
||||
import Markdown from '@astrojs/markdown-component';
|
||||
const content = '# Foo';
|
||||
---
|
||||
|
||||
<Markdown content={content} />
|
||||
|
|
@ -1,14 +0,0 @@
|
|||
---
|
||||
title: My Blog Post
|
||||
layout: ../layouts/content.astro
|
||||
---
|
||||
|
||||
## Title
|
||||
|
||||
Hello world
|
||||
|
||||
With this in the body ---
|
||||
|
||||
## Another
|
||||
|
||||
more content
|
||||
|
|
@ -1,29 +0,0 @@
|
|||
---
|
||||
import Markdown from '@astrojs/markdown-component';
|
||||
import Layout from '../layouts/content.astro';
|
||||
import Hello from '../components/Hello.jsx';
|
||||
import Counter from '../components/Counter.jsx';
|
||||
|
||||
const title = 'My Blog Post';
|
||||
const description = 'This is a post about some stuff.';
|
||||
---
|
||||
|
||||
<div id="deep">
|
||||
<section class="a">
|
||||
<Markdown is:raw>
|
||||
## A
|
||||
</Markdown>
|
||||
</section>
|
||||
|
||||
<section class="b">
|
||||
<Markdown is:raw>
|
||||
## B
|
||||
</Markdown>
|
||||
</section>
|
||||
|
||||
<section class="c">
|
||||
<Markdown is:raw>
|
||||
## C
|
||||
</Markdown>
|
||||
</section>
|
||||
</div>
|
||||
|
|
@ -1,20 +0,0 @@
|
|||
---
|
||||
title: My Blog Post
|
||||
layout: ../layouts/content.astro
|
||||
---
|
||||
|
||||
## Title
|
||||
|
||||
Hello world
|
||||
|
||||
With this in the body ---
|
||||
|
||||
## Another
|
||||
|
||||
more content
|
||||
|
||||
```
|
||||
|
||||
```
|
||||
|
||||
<pre></pre>
|
||||
|
|
@ -1,19 +0,0 @@
|
|||
---
|
||||
import Markdown from '@astrojs/markdown-component';
|
||||
|
||||
const outer = `# Outer`;
|
||||
const inner = `## Inner`;
|
||||
---
|
||||
|
||||
<style>
|
||||
#root { color: green; }
|
||||
</style>
|
||||
<div id="root">
|
||||
<Markdown content={outer} />
|
||||
|
||||
<Markdown>
|
||||
# Nested
|
||||
|
||||
<Markdown content={inner} />
|
||||
</Markdown>
|
||||
</div>
|
||||
|
|
@ -1,9 +0,0 @@
|
|||
---
|
||||
import Layout from '../../layouts/content.astro'
|
||||
|
||||
const posts = await Astro.glob('../../imported-md/*.md')
|
||||
---
|
||||
|
||||
<Layout>
|
||||
{posts.map(({ Content }) => <Content />)}
|
||||
</Layout>
|
||||
|
|
@ -1,4 +0,0 @@
|
|||
---
|
||||
title: 'Hello world!'
|
||||
layout: '../layouts/layout-props.astro'
|
||||
---
|
||||
|
|
@ -1,32 +0,0 @@
|
|||
---
|
||||
// Component imports and setup JavaScript go here!
|
||||
import Markdown from '@astrojs/markdown-component';
|
||||
const content = `
|
||||
- list 1
|
||||
- list 2
|
||||
- list
|
||||
- - list
|
||||
1. Hello
|
||||
1. Hello`
|
||||
---
|
||||
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width" />
|
||||
<title>Welcome to Astro</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<h1>Welcome to <a href="https://astro.build/">Astro</a></h1>
|
||||
<div id="target">
|
||||
<Markdown is:raw>
|
||||
- list
|
||||
- nested list
|
||||
|
||||
1. Hello
|
||||
1. nested hello
|
||||
</Markdown>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,5 +0,0 @@
|
|||
---
|
||||
import Markdown from '@astrojs/markdown-component';
|
||||
---
|
||||
|
||||
<Markdown is:raw></Markdown>
|
||||
|
|
@ -1,16 +0,0 @@
|
|||
---
|
||||
import Markdown from '@astrojs/markdown-component';
|
||||
import Layout from '../layouts/content.astro';
|
||||
import Example from '../components/Example.jsx';
|
||||
|
||||
const title = 'My Blog Post';
|
||||
const description = 'This is a post about some stuff.';
|
||||
---
|
||||
|
||||
<Markdown>
|
||||
## Interesting Topic
|
||||
|
||||
<div id="first">Some content</div>
|
||||
|
||||
<Example></Example>
|
||||
</Markdown>
|
||||
|
|
@ -1,21 +0,0 @@
|
|||
---
|
||||
import Markdown from '@astrojs/markdown-component';
|
||||
import Layout from '../layouts/content.astro';
|
||||
|
||||
---
|
||||
<style>
|
||||
#root {
|
||||
color: green;
|
||||
}
|
||||
</style>
|
||||
<Layout>
|
||||
<div id="root">
|
||||
<Markdown>
|
||||
## Interesting Topic
|
||||
|
||||
```js
|
||||
const thing = () => {};
|
||||
```
|
||||
</Markdown>
|
||||
</div>
|
||||
</Layout>
|
||||
|
|
@ -1 +0,0 @@
|
|||
console.log("Hello world");
|
||||
|
|
@ -1,10 +0,0 @@
|
|||
import { loadFixture as baseLoadFixture } from '../../../astro/test/test-utils.js';
|
||||
|
||||
export { fixLineEndings } from '../../../astro/test/test-utils.js';
|
||||
|
||||
export function loadFixture(config) {
|
||||
if (config?.root) {
|
||||
config.root = new URL(config.root, import.meta.url);
|
||||
}
|
||||
return baseLoadFixture(config);
|
||||
}
|
||||
Loading…
Add table
Reference in a new issue