Giter Site home page Giter Site logo

nuxt / content Goto Github PK

View Code? Open in Web Editor NEW
3.0K 27.0 600.0 29.28 MB

The file-based CMS for your Nuxt application, powered by Markdown and Vue components.

Home Page: https://content.nuxt.com

License: MIT License

Vue 11.95% TypeScript 87.55% Shell 0.42% JavaScript 0.08%
nuxt nuxt-module cms git-cms markdown mdc vue

content's Introduction

nuxt-content-social-card

Nuxt Content

npm version npm downloads License Nuxt Volta

Nuxt Content reads the content/ directory in your project, parses .md, .yml, .csv or .json files and creates a powerful data layer for your application. Bonus, use Vue components in Markdown with the MDC syntax.

Features

  • Nuxt 3 support
  • A Markdown syntax made for Vue components (MDC)
  • Navigation generation
  • Code highlighting with Shiki
  • Blazing fast hot module replacement in development
  • Powerful query builder (MongoDB like)
  • Table of contents generation
  • Also handles CSV, YAML and JSON(5)
  • Extend with hooks and content plugins
  • ... and more

Nuxt 2

Nuxt 2 is supported with Content v1, documentation is on https://content.nuxt.com/v1 and the code on the v1 branch.

💻 Development

Note

This repository uses bash scripts for development and testing. If you are on Windows, you can use WSL or Git Bash.

  • Clone repository
  • Install dependencies using pnpm install
  • Prepare using pnpm prepare
  • Build using pnpm build
  • Try playground using pnpm dev
  • Test using pnpm test

License

MIT - Made with 💚

content's People

Contributors

adamdehaven avatar alexanderbelokon avatar antfu avatar atinux avatar azrikahar avatar barbapapazes avatar bdrtsky avatar bencodezen avatar benjamincanac avatar clemcode avatar cogor avatar danielroe avatar debs-obrien avatar farnabaz avatar geminii avatar harlan-zw avatar jefrydco avatar kevinmarrec avatar mannil avatar mathe42 avatar maximepvrt avatar nobkd avatar nozomuikuta avatar pi0 avatar qwertovsky avatar renovate-bot avatar renovate[bot] avatar tahul avatar thomorlo avatar utamori avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

content's Issues

router.base settings not respected in fetch link to db.json

Version

@nuxt/content: v1.2.0
nuxt: v2.12.2

Reproduction Link

repo: https://gitlab.com/chris_jung/nuxt-content-pages-poc
page: https://chris_jung.gitlab.io/nuxt-content-pages-poc/

Steps to reproduce

  1. open the page
  2. klick "about" link

What is Expected?

The about page should render

What is actually happening?

Showing "NetworkError when attempting to fetch resource."

So the page should respect the base.path setting also in the fetch actions that are fetching the "db.json"

While this works for "regular" chunks like "https://chris_jung.gitlab.io/nuxt-content-pages-poc/_nuxt/c7193aa757204530e99b.js", the db.json file is linked as follows: "https://chris_jung.gitlab.io/_nuxt/content/db.json?1590523967052"

request url should decodeURI(url) before searching query in lib/middleware.js

Version

@nuxt/content: v1.2.0
nuxt: v2.12.2

Reproduction Link

repo: https://github.com/hunterliu1003/nuxt-content-pages-poc
page: https://nuxt-content-pages-poc.now.sh/

Steps to reproduce

  1. open the page
  2. click "關於我" link

What is Expected?

The "關於我" page should render

What is actually happening?

Showing 404 not found page:
截圖 2020-05-27 下午7 50 42

API error:
截圖 2020-05-27 下午7 42 31

The API fail only when client-side render

change

// lib/middleware
const url = nodeReq.url(req)

to

const url = decodeURI(nodeReq.url(req))

can fixed this issue

Generating pages more than one level deep fails

Nuxt 2.12, Content 1.2

npm run generate works great when it's a single level folder within content like these:

/content
  /articles
  /posts
  /blog

All the content under articles, posts, and blog generate as expected.

When it's more than one level deep /articles/series - there is an Error generated issue for those pages, along with the _slug files within them.

The fetch line is simply:

    async fetch () {
      this.seriesOfArticles = await this.$content('articles/series').sortBy('published', 'desc').fetch()
    }

And it works fine locally - just when I try to generate it fails.

Plugins not installed?

Possible @nuxt/content bug. Could also be related to remark or remark-twemoji and remark-frontmatter.

Related: madiodio/remark-twemoji#8, remarkjs/remark-frontmatter#13

Version

@nuxt/content: latest (1.2.0)
nuxt: latest (2.12.2)

Reproduction Link

https://github.com/Strahinja/remark-bug

Steps to reproduce

$ yarn install
$ yarn generate

What is Expected?

No warnings.

What is actually happening?

WARN  remark-twemoji is not installed
WARN  remark-frontmatter,yaml is not installed

Webpack throws a lot of warnings and I can't explain why.

Hi!

I've setup a fresh NuxtJS project with nuxt/content and nuxt/components which works great so far. But webpack is throwing a lot of warnings for all kinds of file types since it is apparently trying to load them but can't handle them. I figured I'd post it here since my guess would be that this should at least be fixed within nuxt/content for all the .md files webpack complains about?

I get that webpack is missing these loaders, but what I do not understand:

  • Shouldn't the loaders be included within the packages or something?
  • Why is the setup trying to pipe a pdf file through webpack that sits in the static folder?
  • Why would the setup try to ingest the yarn.lock file? 😅

Examples

I have a lot of markdown files, so this is just an excerpt from the log. The warnings are about *.md, yarn.lock, *.pdf files, project-wide.

 WARN  in ./yarn.lock                                                        friendly-errors 13:29:59

Module parse failed: Unexpected character '#' (1:0)                          friendly-errors 13:29:59
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> # THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
| # yarn lockfile v1
|
                                                                             friendly-errors 13:29:59
 @ . sync ^\.\/.*$
 @ ./node_modules/babel-loader/lib??ref--2-0!./node_modules/@nuxt/components/dist/loader.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./pages/initiatoren/_contributor.vue?vue&type=script&lang=js&
 @ ./pages/initiatoren/_contributor.vue?vue&type=script&lang=js&
 @ ./pages/initiatoren/_contributor.vue
 @ ./.nuxt/router.js
 @ ./.nuxt/index.js
 @ ./.nuxt/client.js
 @ multi ./node_modules/@nuxt/components/dist/installComponents.js eventsource-polyfill webpack-hot-middleware/client?reload=true&timeout=30000&ansiColors=&overlayStyles=&name=client&path=/__webpack_hmr/client ./.nuxt/client.js
                                                                             friendly-errors 13:29:59

 WARN  in ./README.md                                                        friendly-errors 13:29:59

Module parse failed: Unexpected character '#' (1:0)                          friendly-errors 13:29:59
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> # project name
|
| > My ultimate Nuxt.js project
                                                                             friendly-errors 13:29:59
 @ . sync ^\.\/.*$
 @ ./node_modules/babel-loader/lib??ref--2-0!./node_modules/@nuxt/components/dist/loader.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./pages/initiatoren/_contributor.vue?vue&type=script&lang=js&
 @ ./pages/initiatoren/_contributor.vue?vue&type=script&lang=js&
 @ ./pages/initiatoren/_contributor.vue
 @ ./.nuxt/router.js
 @ ./.nuxt/index.js
 @ ./.nuxt/client.js
 @ multi ./node_modules/@nuxt/components/dist/installComponents.js eventsource-polyfill webpack-hot-middleware/client?reload=true&timeout=30000&ansiColors=&overlayStyles=&name=client&path=/__webpack_hmr/client ./.nuxt/client.js

 WARN  in ./static/filename.pdf                                     friendly-errors 13:29:59

Module parse failed: Unexpected token (1:0)                                  friendly-errors 13:29:59
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
(Source code omitted for this binary file)
                                                                             friendly-errors 13:29:59
 @ . sync ^\.\/.*$
 @ ./node_modules/babel-loader/lib??ref--2-0!./node_modules/@nuxt/components/dist/loader.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./pages/initiatoren/_contributor.vue?vue&type=script&lang=js&
 @ ./pages/initiatoren/_contributor.vue?vue&type=script&lang=js&
 @ ./pages/initiatoren/_contributor.vue
 @ ./.nuxt/router.js
 @ ./.nuxt/index.js
 @ ./.nuxt/client.js
 @ multi ./node_modules/@nuxt/components/dist/installComponents.js eventsource-polyfill webpack-hot-middleware/client?reload=true&timeout=30000&ansiColors=&overlayStyles=&name=client&path=/__webpack_hmr/client ./.nuxt/client.js

I didn't add any wild stuff in my nuxt.config.js:

export default {
  mode: 'universal',
  /*
   ** Headers of the page
   */
  head: {
    titleTemplate: '%s | THINGS,
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      {
        hid: 'description',
        name: 'description',
        content: process.env.npm_package_description || '',
      },
      { name: 'robots', content: 'noindex' },
    ],
    link: [
      {
        rel: 'icon',
        type: 'image/x-icon',
        href:
          'data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>☎️</text></svg>',
      },
      {
        rel: 'preconnect',
        href: 'https://fonts.gstatic.com',
        crossorigin: true,
      },
      {
        rel: 'preload',
        as: 'style',
        href:
          'https://fonts.googleapis.com/css2?family=Poppins:wght@700&family=Roboto:wght@400;700&display=swap',
      },
      {
        rel: 'stylesheet',
        href:
          'https://fonts.googleapis.com/css2?family=Poppins:wght@700&family=Roboto:wght@400;700&display=swap',
        media: 'print',
        onload: "this.media='all'",
      },
    ],
  },
  /*
   ** Customize the progress-bar color
   */
  loading: { color: '#fff' },
  /*
   ** Global CSS
   */
  css: ['~/assets/css/base.css'],
  /*
   ** Plugins to load before mounting the App
   */
  plugins: [],
  /*
   ** Nuxt.js dev-modules
   */
  buildModules: [
    // Doc: https://github.com/nuxt-community/eslint-module
    '@nuxtjs/eslint-module',
    // Doc: https://github.com/nuxt-community/stylelint-module
    '@nuxtjs/stylelint-module',
    // TODO: Remove when upgrading to nuxt 2.13+
    '@nuxt/components',
  ],
  /*
   ** Nuxt.js modules
   */
  modules: ['@nuxtjs/pwa', '@nuxt/content'],
  /*
   ** Build configuration
   */
  build: {
    /*
     ** You can extend webpack config here
     */
  },
}

and the packages were updated to their latest version minutes ago which did not fix anything:

{
  "name": "project name",
  "version": "1.0.0",
  "description": "My ultimate Nuxt.js project",
  "author": "Markus Siering",
  "private": true,
  "scripts": {
    "dev": "nuxt",
    "build": "nuxt build",
    "start": "nuxt start",
    "generate": "nuxt generate",
    "lint": "eslint --ext .js,.vue --ignore-path .gitignore ."
  },
  "lint-staged": {
    "*.{js,vue}": "yarn lint",
    "*.{css,vue}": "stylelint"
  },
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "dependencies": {
    "@nuxt/content": "^1.2.0",
    "@nuxtjs/pwa": "^3.0.0-0",
    "nuxt": "^2.0.0"
  },
  "devDependencies": {
    "@nuxt/components": "^0.3.1",
    "@nuxtjs/eslint-config": "^3.0.0",
    "@nuxtjs/eslint-module": "^2.0.0",
    "@nuxtjs/stylelint-module": "^4.0.0",
    "babel-eslint": "^10.0.1",
    "eslint": "^7.1.0",
    "eslint-config-prettier": "^6.10.0",
    "eslint-plugin-nuxt": ">=0.4.2",
    "eslint-plugin-prettier": "^3.1.2",
    "husky": "^4.0.0",
    "lint-staged": "^10.2.7",
    "prettier": "^2.0.5",
    "stylelint": "^13.5.0"
  }
}

Since this is pretty much an out of the box setup, does anyone have any idea why this is happening?

Vue components not getting rendered in Markdown

I'm fairly sure this is a misunderstanding of the docs rather than a bug, but I'm sure other people will encounter this problem.

Version

@nuxtjs/content: v0.3.0
@nuxt/components: v0.2.5
@nuxt: v2.12.0

Reproduction Link

Sandbox link

Steps to reproduce

There are two uses of the MarginalNote component in this sandbox. One is used directly in _slug.vue (but is commented out), the other is a Vue component in content/index.md. Look at the page as it is right now - the MarginalNote in the Markdown file is not getting rendered.

However, it will render if you uncomment the one used directly in _slug.vue.

What is Expected?

I was hoping I could just use Vue components in Markdown as specified on the docs. I've checked both the content docs and the components docs, not sure if components isn't intended to be used this way, but otherwise how should these components be "imported" in Markdown?

What is actually happening?

My Vue component isn't rendered when used in Markdown, and it seems like this may be because it isn't getting imported.

Unknown custom element: <my-component> - did you register the component correctly?

Version

@nuxt/content: 1.0.0
nuxt-edge: ^2.13.0-26503223.f13b3752

Reproduction Link

https://codesandbox.io/s/nuxtcontent-demo-keb5g?file=/pages/_slug.vue

Steps to reproduce

Follow documentation about vue components

  1. Create component WidgetScreenshot.vue and register as global.

  2. Create markdown content:

## Screenshot Widget

<widget-screenshot src="/screens/app.png" alt="App Screenshot"></widget-screenshot>

What is Expected?

Component displayed on the page.

What is actually happening?

[Vue warn]: Unknown custom element: <widget-screenshot> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

found in

---> <Pages/home.vue> at pages/home.vue

How to handle search with $emit value?

I have search input field in header component. I'm getting emitted value but it's doesn't filter content. How do i pass $fetch with $emit from header component or what is the right way?

Index.vue

import Header from '@/components/layout/header';
export default {
  components: {
    Header
  },
  data() {
    return {
      posts: [],
      q: ''
    }
  },
  async fetch() {
    this.posts = await this.$content('posts')
    .search(this.q)
    .fetch()
  }
}

Header.vue

<template>
<div>
<input type="search" placeholder="Type your search" v-model="q" @input="$emit('q', $event)">
</div>
</template>
<script>
export default {
  props: [ 'q' ]
}
</script>

Footnote References Not Working When Text

While the footnotes now show up, they don't work with "relative" footnotes ([^word] instead of [^1]). The link to the footnote shows the actual word rather than a 1, or 2, etc.

Footnote support?

Wondering why Markdown footnotes:

Sam ate a sandwich.[^opinion]

[^opinion]: It was a very good sandwich.

does not seem supported in this module.

My hand-rolled Nuxt CMS used several MarkdownIt modules in the extend key in nuxt.config.js. Is there a way I can add these to content?

Previous config was:

    extend (config, ctx) {
      config.resolve.alias['vue'] = 'vue/dist/vue.common',
      config.module.rules.push({
        test: /\.md$/,
        loader: 'frontmatter-markdown-loader',
        include: path.resolve(__dirname, 'content'),
        options: {
          typographer: true,
          markdownIt: markdownIt({ html: true }).use(markdownItFootnote)          
             .use(require('markdown-it-video'), {
                vimeo: { 
                  options: {'responsive': true },
                  height: '',
                  width: ''
                },
             })
}

Add filter by tag/category feature

Is your feature request related to a problem? Please describe.

I need to show a list of articles which contain featured tag. Currently, if I understand correctly there is no way to filter articles by tag. This can be category as well. I prefer tags for this certain problem.

Describe the solution you'd like

One should be able to able to query for some tags like this:

const articles = await this.$content('articles').where({ tag: { $in: ['feature', 'announcements'] } }).fetch()

Describe alternatives you've considered

I don't see any alternative way of doing this on @nuxtjs/content

Missing/default content

Is your feature request related to a problem? Please describe.

I'm using Nuxt+Content to develop an encyclopedia for my fiction project. Each character can have several MD files. Many minor characters have folders but no or little content, so a lot of these files just don't exist.

My character information view attempts to get some of these files from the API. When the file is missing, that results in a 404 from the API and an error line in devtools. My development standard is to have my console free of errors. However, I haven't found any way to either suppress the errors or have the API return some default content.

Describe the solution you'd like

Part 1. Recognize if a folder contains a _default folder. If it does, the data in that file can be served for paths into its sibling folders that don't have the requested file.

So for example, take this directory structure:

characters
|- _default
|- |- backstory.md
|- luke_skywalker
|- |- backstory.md
|- lando_calrissian
|- jabba_the_hut

Since characters/lando_calrissian doesn't have a backstory.md file, the call $content('characters','lando_calrissian','backstory') would fail. But with this feature, it would pull the backstory.md file from characters/_default and serve that instead.

Part 2. If a folder contains a _missing.json file, then an attempt to retrieve a file from that folder or subfolders that doesn't exist would serve the _missing.json file instead. This would at least let the path return something, and the consumer would decide for itself what to do with it.

So, given the example above, $content('characters','lando_calrissian','backstory') could try the following paths:

  1. characters/lando_calrissian/backstory
  2. characters/_default/backstory
  3. characters/lando_calrissian/_missing
  4. characters/_missing
  5. _missing

Of course, both of these methods would be configurable.

Describe alternatives you've considered

I suppose that I could refactor my code and get all of the data for the character as one object, and parse it accordingly. However, I have several different components, and this assumption may not hold for all of them.

Router.base ignored when fetching content

Version

@nuxt/content: v1.2.0
nuxt: v2.12.2

I have router.base set to /fe/. It seems that @nuxt/content ignores this when I call fetch() in my Vue file. When I use curl to call the api explicitly, everything seems fine. I tried setting apiPrefix to fe/_content, and then the api is called there, but is actually available at /fe/fe/_content

(Sorry, I didn't manage to operate the codesandbox)

$content.fetch() inside a component

Hello,

I'm quite lost and I need some help to understand why my code doesn't work.
I'm dev a very simple website with markdown files inside the contentfolder. In the root index.vue, I've been able to get the list of the markdown files, and building a menu in the navbar.

Wrapping up this in Vue style, I then created a component inside the components folder, and moved the <script> with asyncData getting the files via $content('', { deep: true}).fetch()
It didn't work. I remembered asyncData cannot be used inside a component, so I used :

(I'm in a component inside the components folder, and this component is displayed in a layout)

export default {
  data() {
    return { articles: {} };
  },
  async fetch(context) {
    this.articles = await context.$content("", { deep: true }).fetch();
  }
};

I just can't figure out why it doesn't work : the articles is still empty.
I tried with and without context, I tried with this.$content... I'm clueless now.

My point is to make a static generated website.

Thanks a lot for your help, I just spent like 5 hours on this thing /o\

edit: actually it looks like fetch doesn't exist.
When I try to display fetchState, or when I put Property or method "$fetch" is not defined on the instance but referenced during render. based on the fetch examples I got some errors telling me the objects doesn't exist.

Configurable container for markdown

Is your feature request related to a problem? Please describe.

I would like to include components into markdown content and let them keep their styles, for example:

# What to do next?

<v-btn to="/signup">Sign up</v-btn>

Or you can also:
- read articles
- listen podcasts

The common approach to style markdown content is to put it in some container like .typo , .typography or .markdown and style it like this:

.typo h1 { font-size: 2rem; }
.typo a { color: blue; }

I use TailwindCSS for components and even if I have v-btn with text-white it will be blue in output.

It would be great to add to wrap markdown content into some container with some specific class and make it configurable.

Describe the solution you'd like

export default {
  content: {
    markdown: {
      container: 'typo' // default ''
    }
  }
}

Describe alternatives you've considered

Right now I am using frontmatter with notypo: true which disables my default typo class in wrapper.

Another option is to use scoped css or !important in components

"createdAt" property is missing

Hi, the documentation states, that createdAt and updatedAt properties are added. This, however, is not true, because createdAt is missing.

Version

@nuxt/content: v1.0.2
nuxt: v2.12.0

Reproduction Link

You can reproduce it on your own sandbox, looking at the api _content
https://codesandbox.io/s/nuxtcontent-demo-l164h
Key and Value for createdAt are missing.

Once i try to run the project after cloning it i get this error message, can anyone help?

FATAL Both nuxt and nuxt-edge dependencies are installed! This is unsupported, please choose one and remove the other one from dependencies. 11:43:14

at Object.run (node_modules@nuxt\cli-edge\dist\cli-index.js:3025:11)
at Object. (node_modules\nuxt-edge\bin\nuxt.js:4:31)
at Module._compile (internal/modules/cjs/loader.js:1138:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1158:10)
at Module.load (internal/modules/cjs/loader.js:986:32)
at Function.Module._load (internal/modules/cjs/loader.js:879:14)
at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:71:12)
at internal/main/run_main_module.js:17:47

npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! @nuxt/[email protected] dev: nuxt example
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the @nuxt/[email protected] dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

Can I load the markdown files from a server

I would like to know if I can load the markdown from a server. I am creating a content site but admin users will be allowed to create their own content. At the moment with the examples I see, you have to create the markdown in dev mode and then do a nuxt generate / nuxt build and then upload to production server.

Support for .txt files

Describe the solution you'd like

Support retrieving lists of strings from .txt files.

Describe alternatives you've considered

If you're retrieving the list of strings to display it as a bulleted list, you can store it as a .md file. You can also store it in a .json file. The idea is that .txt allows for storing the list with no delimiters or styling.

The `npm run generate` fails in typescript projects.

Version

@nuxt/content: v1.0.0
@nuxt/typescript-runtime: v0.4.0
@nuxt/typescript-build: v0.6.0
nuxt: v2.12.2

Reproduction Link

https://github.com/tanakakjs/nuxt-blog

The project generated by create-nuxt-app. (spa & typescript)

Steps to reproduce

  1. Run npm run generate
  2. The following errors occur.
17:21 Property '$content' does not exist on type 'Context'.
    15 |
    16 | export default Vue.extend({
  > 17 |   async asyncData({ $content, params, error }) {
       |                     ^
    18 |     let posts
    19 |     try {
    20 |       posts = await $content('post')

What is the right way to deal with it?

"export 'default' (imported as 'QueryBuilder') was not found in './query-builder'

First time opening a ticket to git repo, so please forgive me, if I am doing something wrong.

I installed the @nuxt/content package as described in the documentation, but I get the following error in the console:

WARN in ./.nuxt/content/plugin.client.js
"export 'default' (imported as 'QueryBuilder') was not found in './query-builder'

and

Uncaught TypeError: Cannot assign to read only property 'exports' of object '#'
at Module.eval (query-builder.js?b39a:101)
at eval (query-builder.js:166)
at Module../.nuxt/content/query-builder.js (app.js:275)
at webpack_require (runtime.js:854)
at fn (runtime.js:151)
at eval (plugin.client.js:15)
at Module../.nuxt/content/plugin.client.js (app.js:263)
at webpack_require (runtime.js:854)
at fn (runtime.js:151)
at eval (index.js:43)


@nuxt/content: v1.0.0
nuxt: v2.11.0

as a result, {export default} will not work on any page.

Hot Reloading does not work TS + Composition API + Markdown

Version

@nuxt/content: 1.2.0
@nuxt/typescript-runtime: 0.4.8
nuxt-composition-api: 0.8.0

nuxt: 2.12.2

Steps to reproduce

I use nuxt with typescript and composition api:

pages/_slug.vue:

<template>
  <nuxt-content :document="doc" />
</template>

<script lang="ts">
import { defineComponent, useContext, useAsync, onServerPrefetch, computed } from 'nuxt-composition-api'

export default defineComponent({
  setup() {
    const { $content, params } = useContext()
    const fetchContent = () => {
      return $content(params.value.slug || 'index').fetch()
    }

    const doc = useAsync(fetchContent)
    onServerPrefetch(async () => {
      doc.value = await fetchContent()
    })

    return {
      doc
    }
  }
})
</script>

content/index.md:

# Test

What is Expected?

Hot reloading after modify content/index.md.

What is actually happening?

ℹ Type checking in progress...      nuxt:typescript 21:59:23
ℹ No type errors found                  nuxt:typescript 21:59:26
ℹ Version: typescript 3.8.3            nuxt:typescript 21:59:26
ℹ Time: 4104 ms                           nuxt:typescript 21:59:26
ℹ Updated ./content/index.md       @nuxt/content 21:59:38

Folder name

Why content instead of contents in plural like other folders in NuxtJS main structure?

Codeblock Styling Issue

I am pretty sure I am missing some CSS here but attached is the screenshot of how currently the codeblock is displayed.

Image

I wold like to display it like it appears on the documentation website as in the removing the white background.

Thanks in advance.

Allow a way to modify slugs

Is your feature request related to a problem? Please describe.

Having a routing convention is great! However, in medium-large blogs or content-based websites, you usually want a way to create your url slugs independently from your file structure.

For instance, you may want urls like:

  • /:slug
  • /:year/:month/:slug
  • ...

Right now, the only way to achieve this is to create a file structure accordingly. But for these cases it could be problematic.

Imagine this case: you have a blog with 200 articles and you want urls like /:slug. That'd mean to have everything under content dir, which is crazy in orgs terms. (yes, you could have dirs like content/:year, but that's not the url you want for SEO purposes whatsoever)

Describe the solution you'd like

In short: a way to decouple file structure and urls shape

I know is not the same case, but as inspiration Gridsome have a Pages API useful for this case.

How to filter using JSON object instead of array as a source?

Using the JSON as source, I see that we can filter and search by key. But how I do this if my JSON source is not an array, but an object?

My current source is something like that (you can ignore the id, I don't want to show/search for) and I'm following the documentation (list works well):

Edit: Search does not work either.

[
  {
    "0": {
      "path": "xxxxxxxxxxxxxxxxxxxx",
      "type": "file",
      "sha": "1111111111111111",
      "url": "https://xxxxxxxxxxxxxxxxxxxx"
    },
    "1":  {
      "path": "yyyyyyyyyyyyyy",
      "type": "file",
      "sha": "00000000000",
      "url": "https://yyyyyyyyyyyyyyy"
    }
  }
]

Copy paste code blocks

Copy paste code blocks

The syntax highlighting is brilliant. I didn't realise it came part of @nuxt/content. But I also would love to be able to copy-and-paste the syntax with a single click. Maybe it's beyond the scope of what the module does.

In fairness, I have no thoughts on the best way to implement this but I'd be happy to investigate if you think it's a worthwhile addition to the library.

WARN /var/www/html/site.com/content does not exist, but it does

Version

@nuxt/content: v1.2.0
nuxt: v2.12.2
Ubuntu: 18.04

Not sure if this is a bug, or where it's coming from. I've been working on a site using @nuxt/content on my localhost, which has been great. But when I migrated everything to live, suddenly I was getting the error WARN /var/www/html/dev.site.com/content does not exist. I can see the /content folder when I ssh in, it has all its files, and it's got drwxr-xr-x permissions. This is happening regardless of whether I'm running nuxt start or nuxt.

As far as my server setup, I'm using nginx as a reverse proxy as shown on the docs. My server_name is currently set to an IP address, since I haven't transferred the domain name over yet. All the files are getting auto-updated via the post-receive hook in git, but I can confirm that all the files inside the /content folder are there. I can also see all the components contained in /layouts/default.vue correctly, it's just /content that apparently doesn't exist.

I don't currently have the site running through https, because I'm trying to fix this part first.

Any ideas?

Edit: here's my nginx config, in case that helps. It's essentially identical to what's on the nuxt.js website right now.

map $sent_http_content_type $expires {
        "text/html"                     epoch;
        "text/html; charset=utf-8"      epoch;
        default                         off;
}

server {
        listen 80;
        server_name xx.xx.xxx.xx;

        gzip                    on;
        gzip_types              text/plain application/xml text/css application/javascript;
        gzip_min_length         1000;

        location / {
                expires $expires;
                proxy_redirect                  off;
                proxy_set_header Host           $host;
                proxy_set_header X-Real-IP      $remote_addr;
                proxy_set_header X-Forwarded-For        $proxy_add_x_forwarded_for;
                proxy_set_header X-Forwarded-Proto      $scheme;
                proxy_read_timeout              1m;
                proxy_connect_timeout           1m;
                proxy_pass                      http://127.0.0.1:3001;
        }
}

ESLint vue/no-unused-components conflict with components in markdown

Problem

Since Nuxt allows components to import individual components that a markdown file will use (instead of registering all components in a markdown file globally), this is causing a small problem since anyone using the ESLint-Vue will get an error because technically it doesn't exist inside the component template (but it does exist in the markdown).

Example

<!-- content/article.md -->
# My Article Title

Here is my text and a demo of my concept:

<my-demo></my-demo>
<!-- index.vue -->
<script>
import MyDemo from '~/components/MyDemo.vue'

export default {
  components: { 
    MyDemo
  },
  async asyncData({ $content }) {
    const page = await $content.path('article').fetch()

    return { page }  
  }
}
</script>

<template>
  <main>
    <nuxt-content :document="page" />
  </main>
</template>

This will throw the error:

ERROR in ./pages/workshops/index.vue
Module Error (from ./node_modules/eslint-loader/dist/cjs.js):

/Users/bencodezen/Projects/bencodezen/pages/index.vue
  8:5  error  The "MyDemo" component has been registered but not used  vue/no-unused-components

✖ 1 problem (1 error, 0 warnings)

Temporary Workaround

I've worked around this temporarily by disabling the rule on that page with

/* eslint-disable vue/no-unused-components */

but this feels hacky at best.

Next Steps

I wonder if there's a way to detect that a component is going to be used in a component before ESLint catches the error and stops the whole page from rendering on local dev? Anyhow, happy to chat more if it would help!

P.S. My apologies if I filed it in the wrong category. I didn't feel like this was a "bug" in the traditional sense, so I put it here to start.

Content excerpt support

Describe the solution you'd like

Please provide a way to fetch plain content body texts (not the body object of the current fetching result), in order to display excerpt on pages such as content list view.
Feature like Content Excerpt of VuePress would be awesome.

Describe alternatives you've considered

Having <nuxt-content> prop for displaying excerpt and other selected content properties would be useful too.

How to handle search properly - different result observed

Reproduction link - https://codesandbox.io/s/github/rajesh-h/cs_content

quick reproduction:
Click on search icon -> enter text -> Pressure -> Click enter/search
You will get result with only one article

https://sj1bl.sse.codesandbox.io/search/pressure - you will get more than one result

Details:
What happens when you click on search?
Search input is present in header component
It invokes a method which will push the navigation to baseurl/search/{slug}

When I put the direct url I get more results.

search logic handled here

I am sure I might be doing something weird, but unable to get around it.

Your help is much appreciated.

Alternative to LokiDB

LokiDB doesn't seem to be actively maintained :
LokiJS-Forge/LokiDB#168 (comment)

One major issue I encountered, for instance, is that default LokiOperatorPackage doesn't support date comparison ($eq is implemented as === which doesn't work against Date object). It's a bit weird because its predecessor (LokiDB) implemented $dteq for this precise reason.

In the meantime, it seems possible to extends LokiOperatorPackage in order to provide custom comp operators.

That being said, I wonder if there is a more robust alternative to LokiDB

How to define article properties like meta tags for SEO?

Hi!

I have developed a blog with nuxt and vue-meta with a database solution, so I ask for every meta tags for each page. But this git-based solution is very elegant and simple.

I would like to know which is the right mechanism for share meta info between content articles and component head method.

After reading nuxt/content docs I tried defining meta info like author near to title property like this:

// content/home.md
---
title: Home
author: Juan Manuel López Pazos
---

# Welcome to my blog

Then I load that info in asyncData method:

// views/_slug.vue
async asyncData ({ $content, params }) {
    const articles = await $content('articles').fetch()

    const path = params.slug ? `articles/${params.slug}` : 'home'
    const doc = await $content(path).fetch()

    return {
      articles,
      doc
    }
  },

And finally use doc.author property as author meta tag in head method:

// views/_slug.vue
head () {
  return {
    title: this.doc.title,
    meta: [
      {
        hid: 'author',
        name: 'author',
        content: this.doc.author
      }
    ]
  }
}

This solution works and the author meta tag is added to document. However I don't know if this is the right and cleaner way.

In case that this solution is right, I think properties section in .md files can turned into a garbage.
Is developer's responsibility to keep it clean? Or is nuxt/content going to offer a more sophisticated mechanism for this stage?

Thank you so much.

Ordering and filtering from a CSV

First, thanks for the hard work on nuxt content. Very cool.

Playing around with some sample data like-a-so:

"Year", "Score", "Title"
1968,  86, "Greetings"
1970,  17, "Bloody Mama"
1970,  73, "Hi, Mom!"
1971,  40, "Born to Win"
1973,  98, "Mean Streets"
1973,  88, "Bang the Drum Slowly"
1974,  97, "The Godfather, Part II"
1976,  41, "The Last Tycoon"
1976,  99, "Taxi Driver"

In a CSV I'm having a tough time using sortBy or only. Example ("deniro" is the csv)

    const deniroMovies = await $content('deniro')
      .sortBy('Title')
      .fetch()

Is that not possible yet?

How to render Prism line-numbers

Regarding codeblocks - how do I use the Prism line-numbers plugin to render the line-numbers.

I tried making a plugin in the plugins folder like so:

import 'prismjs/plugins/line-numbers/prism-line-numbers'

But it doesn't work.

Allow a way to use remark plugins

Is your feature request related to a problem? Please describe.

I would like to use remark plugins in markdown content, for example:

For instance, @nuxtjs/markdownit can config in nuxt.config.js:

markdownit: {
  use: [
    'markdown-it-div',
    'markdown-it-attrs'
  ]
}

and Vuepress can config in .vuepress/config.js:

markdown: {
  plugins: {
    'markdown-it-bar': {
      // provide options here
    }
  }
}

Describe the solution you'd like

In short: a way to use remark plugins

export default {
  content: {
    use: [
      [
        'remark-attr', { 
          // provide options here 
        }
      ],
      // else plugins
    ]
  }
}

Template with slot not getting rendered

Version

@nuxt/content: 1.0.2
nuxt: 2.12.2

Reproduction Link

https://codesandbox.io/s/nuxtcontent-demo-fp7i6?file=/content/index.md

Steps to reproduce

When using the template tag together with named slots <template slot="slotname">, the content of the template does not get rendered.

What is Expected?

The <template slot="slotname"> should render properly.

What is actually happening?

The <template slot="slotname"> does not render properly. Whatever you put inside, it gets rendered as Template Content.

image

Document how to display content outside component (e.g., RSS)

Users will want to display their content outside of components, such as in an RSS feed. Currently, the displaying content page only discusses using a component to render content. The document object does not include HTML or a plaintext summary that could be used for this.

Describe the solution you'd like

On the Displaying content page, document how to include content programmatically, such as in an RSS feed.

Support for rehype plugins

Is your feature request related to a problem? Please describe.

From version 1.2.0 it is possible to define only remark plugins. But have you considered supporting the definition of rehype plugins?

Describe the solution you'd like

For example, MDX allows you to easily define plugins for remark and rehype, which are considered within the conversion flow as you can see here https://mdxjs.com/advanced/plugins. It would be useful to be able to define rehype plugins in a similar way.

Maybe something like this could be supported

export default {
  content: {
    // ...
    markdown: {
      rehypePlugins: [
        // ..
        'rehype-accessible-emojis',
        'rehype-katex',
        'rehype-picture',
        // ...
      ]
    },
    // ...
  }
}

But perhaps this current option markdown.plugins must be renamed to markdown.remarkPlugins to reduce the misunderstanding of both types of plugins

[Feature Request] Get content of subdirectories also

Feature Idea

When fetching a content from a directory it would be awesome to have the content from the sub directories listed as well.

Expected behaviour

-| content/
---| articles/
------| article.md
------| new/
---------| inside-new.md

Current with the directory tree as above if I fetch the content as

await this.$content('articles').fetch()

only article is in the response. It would be awesome to have the content from subdirectory of articles, in this case new would be fetched as well.
i.e. article and inside-new would all be in the resposne after fetch.

Possible solution

I agree not everyone would love to have this behavious by default. So I thought of two possible solutions to have this feature and also keep the current behavious

1. Pass a boolean parameter to .fetch() method, depending on which the subdirectory will be or won't be fetched... Default can be false for the compatibility with current bahaviour.

2. Add a new method which acts just like fetch but gets content from subdirectories as well.. something like .fetchDeep() or anything that makes sense.

Other stuffs

I am loving this module a lot. It makes lots of things really easier compared to how annoying they were earlier.
Regarding the feature request, that is just my idea. I would love to know if that would not be possible or won't be implemented.

❤️ Nuxt.js

How to clean integrate latex equation inside markdown files ?

Hello !

I'm not quite used to the nuxt/content module, and I've never integrated latex in nuxt before, so I prefer asking you !
I'd like to write latex equations un mardown files, fetch the files thanks to the nuxt/content module, and display each articles with their equations.
At the end, I'd like to nuxt generate and serve the website with netlify.

I tried integrating through npm, and by including mathjax script in the nuxt.config.js head, but none of this worked, and I'd like to know the "best practice" to make a clean website.

Thanks !

edit : I forgot to say, I checked the remark plugin remark-html-katex and I thought installing it with npm and adding it to the markdown.plugins section of nuxt.config.js would have been a success, but it seems nothing happens when I write an equation in a markdown file.

value.split is not a function

After initial install, I'm getting this error:

  at analyzer_StandardAnalyzer.whitespaceTokenizer [as tokenizer] (node_modules/@lokidb/full-text-search/lokidb.full-text-search.js:139:18)
  at analyze (node_modules/@lokidb/full-text-search/lokidb.full-text-search.js:175:29)

Support for i18n

Hello, thanks for such a wonderful module. I have a question, is there any possibility to use i18n together with your module?

Inline vue-component at start of paragraph, removes paragraph

Version

@nuxt/content: v1.2.0
nuxt: ex: v2.12.2

Reproduction Link

https://codesandbox.io/s/nuxtcontent-demo-kxlq6?file=/content/index.md

Steps to reproduce

  • Create an component which you want to use inline in your md files
  • Create paragraphs where the component is at the start of the paragraph.

Use case: we have a simple logo which we style differently from the text and would like to use it in your md files, inline with the text.

What is Expected?

Each paragraph of the md file will correspond to a

tag in the generated HTML.

What is actually happening?

There are no

tags created, everything is one single block of text + components.

Fetch content from external sources

Is your feature request related to a problem? Please describe.

I've got some articles in a database which can be accessed by a REST API. It would be great to access these articles from Nuxt Content.

Describe the solution you'd like

For example: const { title } = await this.$content('https://some-api/article-1').only(['title']).fetch()

Describe alternatives you've considered

Instead of accessing them like above. Download markdown files to the content directory and access them in the regular way.

Thanks for all the hard work and the awesome new features!

Using Variables that exist in the YAML or JSON files inside your markdown.

Is it possible to use the variables that comes from the YAML def or the JSON files or CSV files inside your markdown on a specific page.

In an index page I can go and fetch all the content of a specific folder inside the contents directory. I can list the content and then route to a specific page for e.g. markdown. But I want to use the same variables that was available when I received the content through this.$content inside the actual markdown page instead of manually typing it.

HTML autocompletion on MD in VS Code

I know it's not a question totally related to the module but I've never used HTML in MD, so I would like to know if is there a way to get autocompletion of HTML on Markdown so it's easier to use with the module?

Thanks so much for your great job!! 🔥

Netlify: POST /_content/index 404

Version

@nuxt/content: v1.0.0
nuxt-edge: 2.13.0-26503223.f13b3752

Steps to reproduce

yarn build

What is Expected?

  • /dist/_content/ folder is present
  • website is deployable as static website on Netlify

What is actually happening?

  • Open deployed site on Netlify
  • Console show: Error 404 for POST /_content/index

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo 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.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.