Markdoc plugin for Next.js

Related tags

Learning resource plugin markdown webpack nextjs loader markdoc
Overview

@markdoc/next.js

Note: this plugin will be treated as a beta version until v1.0.0 is released.

Using the @markdoc/next.js plugin allows you to create custom .md and .mdoc pages in your Next.js apps, and automatically render them with markdoc.

Setup

The first thing you'll need to do is install @markdoc/next.js and add it to your project's config.

  1. From your project, run this command to install @markdoc/next.js:

    npm install @markdoc/next.js @markdoc/markdoc

  2. Open next.config.js and add the following code:

    // next.config.js

const withMarkdoc = require('@markdoc/next.js');

module.exports = withMarkdoc(/* options */)({
  pageExtensions: ['js', 'md'],
});

  3. Create a new Markdoc file in pages/docs named getting-started.md.

    pages
├── _app.js
├── docs
│   └── getting-started.md
├── index.js

  4. Add some content to getting-started.md:

    ---
title: Get started with Markdoc
description: How to get started with Markdoc
---

# Get started with Markdoc

See our docs for more options.

Contributing

Contributions and feedback are welcomed and encouraged. Feel free to open PRs here, or open issues in the Markdoc core repo.

Follow these steps to set up the project:

  1. Run npm install
  2. Run npm test

Code of conduct

This project has adopted the Stripe Code of conduct.

License

This project uses the MIT license.

Comments
  • Add CodeQL workflow for GitHub code scanning

    Add CodeQL workflow for GitHub code scanning

    Hi markdoc/next.js!

    This is a one-off automatically generated pull request from LGTM.com :robot:. You might have heard that we’ve integrated LGTM’s underlying CodeQL analysis engine natively into GitHub. The result is GitHub code scanning!

    With LGTM fully integrated into code scanning, we are focused on improving CodeQL within the native GitHub code scanning experience. In order to take advantage of current and future improvements to our analysis capabilities, we suggest you enable code scanning on your repository. Please take a look at our blog post for more information.

    This pull request enables code scanning by adding an auto-generated codeql.yml workflow file for GitHub Actions to your repository — take a look! We tested it before opening this pull request, so all should be working :heavy_check_mark:. In fact, you might already have seen some alerts appear on this pull request!

    Where needed and if possible, we’ve adjusted the configuration to the needs of your particular repository. But of course, you should feel free to tweak it further! Check this page for detailed documentation.

    Questions? Check out the FAQ below!

    FAQ

    Click here to expand the FAQ section

    How often will the code scanning analysis run?

    By default, code scanning will trigger a scan with the CodeQL engine on the following events:

    • On every pull request — to flag up potential security problems for you to investigate before merging a PR.
    • On every push to your default branch and other protected branches — this keeps the analysis results on your repository’s Security tab up to date.
    • Once a week at a fixed time — to make sure you benefit from the latest updated security analysis even when no code was committed or PRs were opened.

    What will this cost?

    Nothing! The CodeQL engine will run inside GitHub Actions, making use of your unlimited free compute minutes for public repositories.

    What types of problems does CodeQL find?

    The CodeQL engine that powers GitHub code scanning is the exact same engine that powers LGTM.com. The exact set of rules has been tweaked slightly, but you should see almost exactly the same types of alerts as you were used to on LGTM.com: we’ve enabled the security-and-quality query suite for you.

    How do I upgrade my CodeQL engine?

    No need! New versions of the CodeQL analysis are constantly deployed on GitHub.com; your repository will automatically benefit from the most recently released version.

    The analysis doesn’t seem to be working

    If you get an error in GitHub Actions that indicates that CodeQL wasn’t able to analyze your code, please follow the instructions here to debug the analysis.

    How do I disable LGTM.com?

    If you have LGTM’s automatic pull request analysis enabled, then you can follow these steps to disable the LGTM pull request analysis. You don’t actually need to remove your repository from LGTM.com; it will automatically be removed in the next few months as part of the deprecation of LGTM.com (more info here).

    Which source code hosting platforms does code scanning support?

    GitHub code scanning is deeply integrated within GitHub itself. If you’d like to scan source code that is hosted elsewhere, we suggest that you create a mirror of that code on GitHub.

    How do I know this PR is legitimate?

    This PR is filed by the official LGTM.com GitHub App, in line with the deprecation timeline that was announced on the official GitHub Blog. The proposed GitHub Action workflow uses the official open source GitHub CodeQL Action. If you have any other questions or concerns, please join the discussion here in the official GitHub community!

    I have another question / how do I get in touch?

    Please join the discussion here to ask further questions and send us suggestions!

    opened by lgtm-com[bot] 1
  • Bump json5 from 2.2.1 to 2.2.3

    Bump json5 from 2.2.1 to 2.2.3

    Bumps json5 from 2.2.1 to 2.2.3.

    Release notes

    Sourced from json5's releases.

    v2.2.3

    v2.2.2

    • Fix: Properties with the name __proto__ are added to objects and arrays. (#199) This also fixes a prototype pollution vulnerability reported by Jonathan Gregson! (#295).
    Changelog

    Sourced from json5's changelog.

    v2.2.3 [code, diff]

    v2.2.2 [code, diff]

    • Fix: Properties with the name __proto__ are added to objects and arrays. (#199) This also fixes a prototype pollution vulnerability reported by Jonathan Gregson! (#295).
    Commits
    • c3a7524 2.2.3
    • 94fd06d docs: update CHANGELOG for v2.2.3
    • 3b8cebf docs(security): use GitHub security advisories
    • f0fd9e1 docs: publish a security policy
    • 6a91a05 docs(template): bug -> bug report
    • 14f8cb1 2.2.2
    • 10cc7ca docs: update CHANGELOG for v2.2.2
    • 7774c10 fix: add proto to objects and arrays
    • edde30a Readme: slight tweak to intro
    • 97286f8 Improve example in readme
    • Additional commits viewable in compare view

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • Bump peer dependency version

    Bump peer dependency version

    Hi, "@markdoc/markdoc": "^0.1.4" is causingConflicting peer dependency error when running npm i with npm 7 and above. I have to run npm i -f every time I install or update something, which is a little annoying.

    npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR!
npm ERR! While resolving: @markdoc/[email protected]
npm ERR! Found: @markdoc/[email protected]
npm ERR! [node_modules/@markdoc](mailto:node_modules/@markdoc)/markdoc
npm ERR!   @markdoc/markdoc@"^0.2.0" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer @markdoc/markdoc@"^0.1.4" from @markdoc/[email protected]
npm ERR! [node_modules/@markdoc](mailto:node_modules/@markdoc)/next.js
npm ERR!   @markdoc/next.js@"^0.2.0" from the root project
npm ERR!
npm ERR! Conflicting peer dependency: @markdoc/[email protected]
npm ERR! [node_modules/@markdoc](mailto:node_modules/@markdoc)/markdoc
npm ERR!   peer @markdoc/markdoc@"^0.1.4" from @markdoc/[email protected]
npm ERR!   [node_modules/@markdoc](mailto:node_modules/@markdoc)/next.js
npm ERR!     @markdoc/next.js@"^0.2.0" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
    opened by kejiweixun 0
  • Fix default export warning

    Fix default export warning

    This PR changes it such that .default is only executed if the module object has a default property.

    Closes https://github.com/markdoc/markdoc/issues/196

    opened by mfix-stripe 0
  • Fix resolve issues

    Fix resolve issues

    Working on: https://github.com/markdoc/markdoc/issues/41

    Using this.resolve instead of require.resolve should fix some Windows issues. This will also ensure that files ending in .ts will be resolved.

    I tested this on https://github.com/markdoc/docs, and everything still works. I will create a prerelease before bumping to a new minor version.

    opened by mfix-stripe 0
Releases(0.2.1)

  • 0.2.1(Nov 4, 2022)

  • 0.2.0(Oct 24, 2022)

  • 0.1.11-0(Oct 5, 2022)

  • 0.1.10(Sep 30, 2022)

  • 0.1.9(Sep 29, 2022)

  • 0.1.8(Sep 20, 2022)

  • 0.1.7(Sep 19, 2022)

    What's Changed

    • Always resolve schemaPath from next.js's root dir by @mfix-stripe in https://github.com/markdoc/next.js/pull/12
    • Support async transform in Next.js plugin by @mfix-stripe in https://github.com/markdoc/next.js/pull/13
    • Import config at build time by @mfix-stripe in https://github.com/markdoc/next.js/pull/14
    • Fix default export warning by @mfix-stripe in https://github.com/markdoc/next.js/pull/15

    Full Changelog: https://github.com/markdoc/next.js/compare/0.1.6...0.1.7

    Source code(tar.gz)
    Source code(zip)

  • v0.1.7-2(Sep 19, 2022)

  • 0.1.7-1(Jul 21, 2022)

    • Import config at build time (#14) fe0a185
    • support async transform in Next.js plugin (#13) 076771e

    https://github.com/markdoc/next.js/compare/0.1.7-0...0.1.7-1

    Source code(tar.gz)
    Source code(zip)

  • 0.1.7-0(Jul 8, 2022)

  • 0.1.6(Jul 5, 2022)

  • 0.1.5(Jun 28, 2022)

    What's Changed

    • markdoc.dev by @mfix-stripe in https://github.com/markdoc/next.js/pull/7
    • Attempt windows fix by @mfix-stripe in https://github.com/markdoc/next.js/pull/9
    • Use enhanced-resolve (from webpack) by @mfix-stripe in https://github.com/markdoc/next.js/pull/10
    • Double-escape back-slashes by @mfix-stripe in https://github.com/markdoc/next.js/pull/11

    Full Changelog: https://github.com/markdoc/next.js/compare/v0.1.4...0.1.5

    Thanks @thecrypticace for all your help testing this release.

    Source code(tar.gz)
    Source code(zip)

  • 0.1.5-1(Jun 28, 2022)

    • Double-escape back-slashes (#11) 886364e
    • try out enhanced-resolve (from webpack) (#10) 4641d7f

    https://github.com/markdoc/next.js/compare/0.1.5-0...0.1.5-1

    Source code(tar.gz)
    Source code(zip)

  • 0.1.5-0(Jun 28, 2022)

  • v0.1.4(May 20, 2022)

  • 0.1.4-1(May 20, 2022)

  • 0.1.4-0(May 19, 2022)

  • 0.1.3(May 17, 2022)

  • 0.1.2(May 10, 2022)

  • 0.1.1(May 10, 2022)

  • 0.1.0(May 10, 2022)

Owner
Markdoc
The Markdoc toolchain
Markdoc
GitHub https://markdoc.io/docs/nextjs
Starter repo for quickly deploying a Markdoc app with Next.js

Full Next.js example This is a full-featured boilerplate for a creating a documentation website using Markdoc and Next.js. Setup First, clone this rep

Markdoc 9 May 29, 2022
Grupprojekt för kurserna 'Javascript med Ramverk' och 'Agil Utveckling'

JavaScript-med-Ramverk-Laboration-3 Grupprojektet för kurserna Javascript med Ramverk och Agil Utveckling. Utvecklingsguide För information om hur utv

Svante Jonsson IT-Högskolan 3 May 18, 2022
Hemsida för personer i Sverige som kan och vill erbjuda boende till människor på flykt

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

null 4 May 3, 2022
Kurs-repo för kursen Webbserver och Databaser

Webbserver och databaser This repository is meant for CME students to access exercises and codealongs that happen throughout the course. I hope you wi

null 14 Jan 3, 2023
Markdoc is a Markdown-based syntax and toolchain for creating custom documentation sites and experiences.

A powerful, flexible, Markdown-based authoring framework. Markdoc is a Markdown-based syntax and toolchain for creating custom documentation sites and

Markdoc 5.8k Jan 2, 2023
🖼️ Image proxy for Next.js. Makes it possible to use dynamic domains in next/image component.

Next.js Image Proxy Image proxy for Next.js. Makes it possible to use dynamic domains in next/image component. ❔ Motivation This library makes it poss

Blazity 30 Dec 1, 2022
next-graphql-server is a library for building production-grade GraphQL servers using Next.js with API Routes

next-graphql-server next-graphql-server is an easy to use Next.js library for creating performant GraphQL endpoints on top of Next.js API Routes. Star

Jakub Neander 82 Nov 21, 2022
💻 A simple Create Next App template to start your projects with Next.js, TypeScript, ESLint, Prettier and other tools.

⚡ Next Typescript Template ⚡ A simple Create Next App template to start your projects with Next.js, TypeScript, ESLint, Prettier and other tools. Quic

João Gabriel 13 Nov 23, 2022
A fullstack next.js template with all the fun stuff like next auth, mongodb, prisma, chakra ui

Welcome to FullStack Next.js template ?? A fullstack next.js template with all the fun stuff like next auth, mongodb, prisma, chakra ui ✨ Demo Tech Ne

Avneesh Agarwal 10 Oct 16, 2022
This is a Next.js project bootstrapped with create-next-app.

Getting Started First, run the development server: npm run dev # or yarn dev Open http://localhost:3000 with your browser to see the result. You can s

J.D. 8 Dec 5, 2022
Babel-plugin-amd-checker - Module format checking plugin for Babel usable in both Node.js the web browser environments.

babel-plugin-amd-checker A Babel plugin to check the format of your modules when compiling your code using Babel. This plugin allows you to abort the

Ferdinand Prantl 1 Jan 6, 2022
A variety of jQuery plugin patterns for jump starting your plugin development

jQuery Plugin Patterns So, you've tried out jQuery Boilerplate or written a few of your own plugins before. They work to a degree and are readable, bu

jQuery Boilerplate 1.6k Dec 31, 2022
A tool to get plugin statistics of Obsidian plugin ecosystem.

Obsidian Plugin Stats A tool to get plugin statistics of Obsidian plugin ecosystem. Usage You can use this tool to see the plugins that has hit commun

Ganessh Kumar 27 Dec 25, 2022
📦 Alpine JS plugin to extend the functionality of the official $persist plugin

Alpine JS Persist Extended Alpine JS magic method $storage extends the official $persist plugin to help you work with local storage ?? Example ?? <div

Mark Mead 11 Dec 28, 2022
kakaolink-plugin is a remote-kakao plugin for sending KakaoLinks instead of plain text

kakaolink-plugin Discord Server About kakaolink-plugin is a remote-kakao plugin for sending KakaoLinks instead of plain text. Requirements Node.js v17

null 5 Oct 1, 2022
A markdown-it plugin that process images through the eleventy-img plugin. Can be used in any projects that uses markdown-it.

markdown-it-eleventy-img A markdown-it plugin that process images through the eleventy-img plugin. Can be used in any projects that use markdown-it. F

null 25 Dec 20, 2022
This is a simple Image popup Jquery plugin. With a very simple configuration, you can show a popup on your webpage. By the way, this plugin works after page load.

Jquery-SingleImagePopup This is a simple Image popup Jquery plugin. With a very simple configuration, you can show a popup on your webpage. By the way

Rajan Karmaker 1 Aug 22, 2022
An obsidian toolbar plugin, modified from the Cmenu plugin

obsidian-editing-toolbar Plugin Thanks to the cmenu plugin, which gave me a lot of inspiration, but this plugin has not been maintained for more than

null 321 Dec 29, 2022
Deploy WordPress plugin and theme to the wordpress.org plugin directory.

wp-deployer Deploy WordPress plugin and theme to the wordpress.org plugin directory. Install npm install --save-dev wp-deployer Settings slug : Plugin

Nilambar Sharma 5 Sep 6, 2022