Comments (2)
Hello @krmao, not sure why you encounter an error 500. Could you share your [...nextmd].js
file?
I have just updated the README.md by adding a better (and up-to-date) "Get started" section. Is your initialization the same as described in the readme?
Thanks
from next-markdown.
Hello @frouo , my steps as same as the readme, also use the new config about 'pathToContent',and use your demo git readmes, while run 'npm run dev', and url to the path, show 'not supprt xxx' error, I don't know why, may be the versions is different.
"react": "^17.0.2",
"react-dom": "^17.0.2",
"next": "^11.1.2",
The yesterday code is revert, But just as same as the demo, no edit, thank you for the response.
now I have change the new way use gray-matter and marker and run ok.
/* eslint-disable camelcase */
// noinspection ES6CheckImport,JSUnusedGlobalSymbols,JSUnresolvedVariable
import React from "react";
import Image from "next/image";
import emptyImage from "@public/empty.png";
import style from "../index.module.scss";
import BasicLayout from "@common/basic-layout";
import fs from "fs";
import path from "path";
import matter from "gray-matter";
import {marked} from "marked";
export async function getStaticPaths() {
const paths = fs
.readdirSync(path.join("src/blog/markdowns"))
.map((filename) => ({params: {pathname: filename.replace(".md", "")}}));
return {paths, fallback: false};
}
export async function getStaticProps({params: {pathname}}) {
const markdownWithMeta = fs.readFileSync(path.join("src/blog/markdowns", pathname + ".md"), "utf-8");
const {data, content} = matter(markdownWithMeta);
return {
props: {
basic: {style: BasicLayout.styles.HEAD_WITH_SIDER},
data,
pathname,
content
}
};
}
export default class Page extends React.Component {
constructor(props) {
super(props);
this.state = {data: {}};
}
componentDidMount() {}
render() {
const {
data: {title, date, cover_image},
content
} = this.props;
return (
<React.Fragment>
<div className={style["container"]}>
<div
className={style["container-empty"]}
style={{display: this.state?.data === null ? "flex" : "none"}}>
<Image width={280} height={280} alt={""} src={emptyImage} />
<div className={style["empty-text"]}>功能上线中,敬请期待~</div>
</div>
<div
className={style["container-data"]}
style={{display: this.state?.data === null ? "none" : "flex"}}>
<div className={style.containerMD}>
<h1 className={style.mdTitle}>{title}</h1>
<div className={style.mdDate}>Posted on {date}</div>
{/* eslint-disable-next-line @next/next/no-img-element */}
<img className={style.mdImage} alt={""} src={cover_image} />
<div className={style.mdContent}>
<div dangerouslySetInnerHTML={{__html: marked.parse(content)}} />
</div>
</div>
</div>
</div>
</React.Fragment>
);
}
}
from next-markdown.
Related Issues (8)
- feat (advanced): allow to flatten some directories for docs / blog classification purpose
- feat: optional catch all routes HOT 1
- feat: support mdx
- feat: allow building docs style pages HOT 5
- feat: enhance blog-aware rules to handle more use cases (blog, docs...) HOT 1
- Setup the project so it's easy to develop and test this nextjs library HOT 3
- feat (advanced): split next-markdown into smaller modules HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from next-markdown.