marinaaisa/nuxt-markdown-blog-starter

Nuxt + Markdown blog starter

nuxt-markdown-blog-starter's Issues

Change URL Structure

How to change URL Structure For Example

http://localhost:3000/blog/bacon-ipsum/ to http://localhost:3000/bacon-ipsum/

Image is not showing in the README

Hi,

Just found your starter blog and noticed that the Markdown image is not showing on the README.md

Keep the good work !

Problem with Image component in Dynamic Markdown

A message error appears in development mode:

The client-side rendered virtual DOM tree is not matching server-rendered content

This only happens when the Image component is used inside of a markdown file

npm install failed

For me

node -v
v12.6.0
npm -v
6.10.3

Installing packages finished with error.

npm install


> [email protected] install /home/daniel/pro/nuxt-markdown-blog-starter/node_modules/node-sass
> node scripts/install.js

Downloading binary from https://github.com/sass/node-sass/releases/download/v4.11.0/linux-x64-72_binding.node
Cannot download "https://github.com/sass/node-sass/releases/download/v4.11.0/linux-x64-72_binding.node": 

HTTP error 404 Not Found

Hint: If github.com is not accessible in your location
      try setting a proxy via HTTP_PROXY, e.g. 

      export HTTP_PROXY=http://example.com:1234

or configure npm proxy via

      npm config set proxy http://example.com:8080

> [email protected] install /home/daniel/pro/nuxt-markdown-blog-starter/node_modules/sharp
> (node install/libvips && node install/dll-copy && prebuild-install) || (node-gyp rebuild && node install/dll-copy)

info sharp Downloading https://github.com/lovell/sharp-libvips/releases/download/v8.7.4/libvips-8.7.4-linux-x64.tar.gz
prebuild-install WARN install No prebuilt binaries found (target=12.6.0 runtime=node arch=x64 libc= platform=linux)
make: Entering directory '/home/daniel/pro/nuxt-markdown-blog-starter/node_modules/sharp/build'
  TOUCH Release/obj.target/libvips-cpp.stamp
  CXX(target) Release/obj.target/sharp/src/common.o
In file included from ../src/common.cc:27:0:
../src/common.h:80:20: error: ‘Handle’ is not a member of ‘v8’
   bool HasAttr(v8::Handle<v8::Object> obj, std::string attr);
                    ^~~~~~
../src/common.h:80:37: error: expected primary-expression before ‘>’ token
   bool HasAttr(v8::Handle<v8::Object> obj, std::string attr);
                                     ^
../src/common.h:80:39: error: ‘obj’ was not declared in this scope
   bool HasAttr(v8::Handle<v8::Object> obj, std::string attr);
                                       ^~~
../src/common.h:80:56: error: expected primary-expression before ‘attr’
   bool HasAttr(v8::Handle<v8::Object> obj, std::string attr);
                                                        ^~~~
../src/common.h:80:60: error: expression list treated as compound expression in initializer [-fpermissive]
   bool HasAttr(v8::Handle<v8::Object> obj, std::string attr);
                                                            ^
../src/common.h:81:29: error: ‘Handle’ is not a member of ‘v8’
   std::string AttrAsStr(v8::Handle<v8::Object> obj, std::string attr);
                             ^~~~~~
../src/common.h:81:46: error: expected primary-expression before ‘>’ token
   std::string AttrAsStr(v8::Handle<v8::Object> obj, std::string attr);
                                              ^
../src/common.h:81:48: error: ‘obj’ was not declared in this scope
   std::string AttrAsStr(v8::Handle<v8::Object> obj, std::string attr);
                                                ^~~
../src/common.h:81:65: error: expected primary-expression before ‘attr’
   std::string AttrAsStr(v8::Handle<v8::Object> obj, std::string attr);
                                                                 ^~~~
../src/common.h:82:38: error: ‘Handle’ is not a member of ‘v8’
   std::vector<double> AttrAsRgba(v8::Handle<v8::Object> obj, std::string attr);
                                      ^~~~~~
../src/common.h:82:55: error: expected primary-expression before ‘>’ token
   std::vector<double> AttrAsRgba(v8::Handle<v8::Object> obj, std::string attr);
                                                       ^
../src/common.h:82:57: error: ‘obj’ was not declared in this scope
   std::vector<double> AttrAsRgba(v8::Handle<v8::Object> obj, std::string attr);
                                                         ^~~
../src/common.h:82:74: error: expected primary-expression before ‘attr’
   std::vector<double> AttrAsRgba(v8::Handle<v8::Object> obj, std::string attr);
                                                                          ^~~~
../src/common.h:83:48: error: ‘Handle’ is not a member of ‘v8’
   template<typename T> v8::Local<T> AttrAs(v8::Handle<v8::Object> obj, std::string attr) {
                                                ^~~~~~
../src/common.h:83:65: error: expected primary-expression before ‘>’ token
   template<typename T> v8::Local<T> AttrAs(v8::Handle<v8::Object> obj, std::string attr) {
                                                                 ^
../src/common.h:83:67: error: ‘obj’ was not declared in this scope
   template<typename T> v8::Local<T> AttrAs(v8::Handle<v8::Object> obj, std::string attr) {
                                                                   ^~~
../src/common.h:83:84: error: expected primary-expression before ‘attr’
   template<typename T> v8::Local<T> AttrAs(v8::Handle<v8::Object> obj, std::string attr) {
                                                                                    ^~~~
../src/common.h:83:37: warning: variable templates only available with -std=c++14 or -std=gnu++14
   template<typename T> v8::Local<T> AttrAs(v8::Handle<v8::Object> obj, std::string attr) {
                                     ^~~~~~
../src/common.h:83:90: error: expected ‘;’ before ‘{’ token
   template<typename T> v8::Local<T> AttrAs(v8::Handle<v8::Object> obj, std::string attr) {
                                                                                          ^
../src/common.h:86:37: error: ‘Handle’ is not a member of ‘v8’
   template<typename T> T AttrTo(v8::Handle<v8::Object> obj, std::string attr) {
                                     ^~~~~~
../src/common.h:86:54: error: expected primary-expression before ‘>’ token
   template<typename T> T AttrTo(v8::Handle<v8::Object> obj, std::string attr) {
                                                      ^
../src/common.h:86:56: error: ‘obj’ was not declared in this scope
   template<typename T> T AttrTo(v8::Handle<v8::Object> obj, std::string attr) {
                                                        ^~~
../src/common.h:86:73: error: expected primary-expression before ‘attr’
   template<typename T> T AttrTo(v8::Handle<v8::Object> obj, std::string attr) {
                                                                         ^~~~
../src/common.h:86:26: warning: variable templates only available with -std=c++14 or -std=gnu++14
   template<typename T> T AttrTo(v8::Handle<v8::Object> obj, std::string attr) {
                          ^~~~~~
../src/common.h:86:79: error: expected ‘;’ before ‘{’ token
   template<typename T> T AttrTo(v8::Handle<v8::Object> obj, std::string attr) {
                                                                               ^
../src/common.h:89:37: error: ‘Handle’ is not a member of ‘v8’
   template<typename T> T AttrTo(v8::Handle<v8::Object> obj, int attr) {
                                     ^~~~~~
../src/common.h:89:54: error: expected primary-expression before ‘>’ token
   template<typename T> T AttrTo(v8::Handle<v8::Object> obj, int attr) {
                                                      ^
../src/common.h:89:56: error: ‘obj’ was not declared in this scope
   template<typename T> T AttrTo(v8::Handle<v8::Object> obj, int attr) {
                                                        ^~~
../src/common.h:89:61: error: expected primary-expression before ‘int’
   template<typename T> T AttrTo(v8::Handle<v8::Object> obj, int attr) {
                                                             ^~~
../src/common.h:86:26: warning: variable templates only available with -std=c++14 or -std=gnu++14
   template<typename T> T AttrTo(v8::Handle<v8::Object> obj, std::string attr) {
                          ^~~~~~
../src/common.h:89:71: error: expected ‘;’ before ‘{’ token
   template<typename T> T AttrTo(v8::Handle<v8::Object> obj, int attr) {
                                                                       ^
../src/common.h:95:9: error: ‘Handle’ is not a member of ‘v8’
     v8::Handle<v8::Object> input, std::vector<v8::Local<v8::Object>> &buffersToPersist);
         ^~~~~~
../src/common.h:95:26: error: expected primary-expression before ‘>’ token
     v8::Handle<v8::Object> input, std::vector<v8::Local<v8::Object>> &buffersToPersist);
                          ^
../src/common.h:95:28: error: ‘input’ was not declared in this scope
     v8::Handle<v8::Object> input, std::vector<v8::Local<v8::Object>> &buffersToPersist);
                            ^~~~~
../src/common.h:95:28: note: suggested alternative: ‘ino_t’
     v8::Handle<v8::Object> input, std::vector<v8::Local<v8::Object>> &buffersToPersist);
                            ^~~~~
                            ino_t
../src/common.h:95:70: error: expected primary-expression before ‘&’ token
     v8::Handle<v8::Object> input, std::vector<v8::Local<v8::Object>> &buffersToPersist);
                                                                      ^
../src/common.h:95:71: error: ‘buffersToPersist’ was not declared in this scope
     v8::Handle<v8::Object> input, std::vector<v8::Local<v8::Object>> &buffersToPersist);
                                                                       ^~~~~~~~~~~~~~~~
../src/common.h:95:87: error: expression list treated as compound expression in initializer [-fpermissive]
     v8::Handle<v8::Object> input, std::vector<v8::Local<v8::Object>> &buffersToPersist);
                                                                                       ^
../src/common.cc:34:20: error: redefinition of ‘bool sharp::HasAttr’
   bool HasAttr(v8::Handle<v8::Object> obj, std::string attr) {
                    ^~~~~~
In file included from ../src/common.cc:27:0:
../src/common.h:80:8: note: ‘bool sharp::HasAttr’ previously defined here
   bool HasAttr(v8::Handle<v8::Object> obj, std::string attr);
        ^~~~~~~
../src/common.cc:34:20: error: ‘Handle’ is not a member of ‘v8’
   bool HasAttr(v8::Handle<v8::Object> obj, std::string attr) {
                    ^~~~~~
../src/common.cc:34:37: error: expected primary-expression before ‘>’ token
   bool HasAttr(v8::Handle<v8::Object> obj, std::string attr) {
                                     ^
../src/common.cc:34:39: error: ‘obj’ was not declared in this scope
   bool HasAttr(v8::Handle<v8::Object> obj, std::string attr) {
                                       ^~~
../src/common.cc:34:56: error: expected primary-expression before ‘attr’
   bool HasAttr(v8::Handle<v8::Object> obj, std::string attr) {
                                                        ^~~~
../src/common.cc:37:29: error: redefinition of ‘std::string sharp::AttrAsStr’
   std::string AttrAsStr(v8::Handle<v8::Object> obj, std::string attr) {
                             ^~~~~~
In file included from ../src/common.cc:27:0:
../src/common.h:81:15: note: ‘std::string sharp::AttrAsStr’ previously declared here
   std::string AttrAsStr(v8::Handle<v8::Object> obj, std::string attr);
               ^~~~~~~~~
../src/common.cc:37:29: error: ‘Handle’ is not a member of ‘v8’
   std::string AttrAsStr(v8::Handle<v8::Object> obj, std::string attr) {
                             ^~~~~~
../src/common.cc:37:46: error: expected primary-expression before ‘>’ token
   std::string AttrAsStr(v8::Handle<v8::Object> obj, std::string attr) {
                                              ^
../src/common.cc:37:48: error: ‘obj’ was not declared in this scope
   std::string AttrAsStr(v8::Handle<v8::Object> obj, std::string attr) {
                                                ^~~
../src/common.cc:37:65: error: expected primary-expression before ‘attr’
   std::string AttrAsStr(v8::Handle<v8::Object> obj, std::string attr) {
                                                                 ^~~~
../src/common.cc:40:38: error: redefinition of ‘std::vector<double> sharp::AttrAsRgba’
   std::vector<double> AttrAsRgba(v8::Handle<v8::Object> obj, std::string attr) {
                                      ^~~~~~
In file included from ../src/common.cc:27:0:
../src/common.h:82:23: note: ‘std::vector<double> sharp::AttrAsRgba’ previously declared here
   std::vector<double> AttrAsRgba(v8::Handle<v8::Object> obj, std::string attr);
                       ^~~~~~~~~~
../src/common.cc:40:38: error: ‘Handle’ is not a member of ‘v8’
   std::vector<double> AttrAsRgba(v8::Handle<v8::Object> obj, std::string attr) {
                                      ^~~~~~
../src/common.cc:40:55: error: expected primary-expression before ‘>’ token
   std::vector<double> AttrAsRgba(v8::Handle<v8::Object> obj, std::string attr) {
                                                       ^
../src/common.cc:40:57: error: ‘obj’ was not declared in this scope
   std::vector<double> AttrAsRgba(v8::Handle<v8::Object> obj, std::string attr) {
                                                         ^~~
../src/common.cc:40:74: error: expected primary-expression before ‘attr’
   std::vector<double> AttrAsRgba(v8::Handle<v8::Object> obj, std::string attr) {
                                                                          ^~~~
../src/common.cc:51:9: error: redefinition of ‘sharp::InputDescriptor* sharp::CreateInputDescriptor’
     v8::Handle<v8::Object> input, std::vector<v8::Local<v8::Object>> &buffersToPersist
         ^~~~~~
In file included from ../src/common.cc:27:0:
../src/common.h:94:20: note: ‘sharp::InputDescriptor* sharp::CreateInputDescriptor’ previously defined here
   InputDescriptor* CreateInputDescriptor(
                    ^~~~~~~~~~~~~~~~~~~~~
../src/common.cc:51:9: error: ‘Handle’ is not a member of ‘v8’
     v8::Handle<v8::Object> input, std::vector<v8::Local<v8::Object>> &buffersToPersist
         ^~~~~~
../src/common.cc:51:26: error: expected primary-expression before ‘>’ token
     v8::Handle<v8::Object> input, std::vector<v8::Local<v8::Object>> &buffersToPersist
                          ^
../src/common.cc:51:28: error: ‘input’ was not declared in this scope
     v8::Handle<v8::Object> input, std::vector<v8::Local<v8::Object>> &buffersToPersist
                            ^~~~~
../src/common.cc:51:28: note: suggested alternative: ‘ino_t’
     v8::Handle<v8::Object> input, std::vector<v8::Local<v8::Object>> &buffersToPersist
                            ^~~~~
                            ino_t
../src/common.cc:51:70: error: expected primary-expression before ‘&’ token
     v8::Handle<v8::Object> input, std::vector<v8::Local<v8::Object>> &buffersToPersist
                                                                      ^
../src/common.cc:51:71: error: ‘buffersToPersist’ was not declared in this scope
     v8::Handle<v8::Object> input, std::vector<v8::Local<v8::Object>> &buffersToPersist
                                                                       ^~~~~~~~~~~~~~~~
cc1plus: warning: unrecognized command line option ‘-Wno-cast-function-type’
sharp.target.mk:134: recipe for target 'Release/obj.target/sharp/src/common.o' failed
make: *** [Release/obj.target/sharp/src/common.o] Error 1
make: Leaving directory '/home/daniel/pro/nuxt-markdown-blog-starter/node_modules/sharp/build'
gyp ERR! build error 
gyp ERR! stack Error: `make` failed with exit code: 2
gyp ERR! stack     at ChildProcess.onExit (/home/daniel/.nvm/versions/node/v12.6.0/lib/node_modules/npm/node_modules/node-gyp/lib/build.js:196:23)
gyp ERR! stack     at ChildProcess.emit (events.js:203:13)
gyp ERR! stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:272:12)
gyp ERR! System Linux 4.15.0-58-generic
gyp ERR! command "/home/daniel/.nvm/versions/node/v12.6.0/bin/node" "/home/daniel/.nvm/versions/node/v12.6.0/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js" "rebuild"
gyp ERR! cwd /home/daniel/pro/nuxt-markdown-blog-starter/node_modules/sharp
gyp ERR! node -v v12.6.0
gyp ERR! node-gyp -v v5.0.3
gyp ERR! not ok 
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules/watchpack/node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] install: `(node install/libvips && node install/dll-copy && prebuild-install) || (node-gyp rebuild && node install/dll-copy)`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the [email protected] install script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/daniel/.npm/_logs/2019-08-20T18_54_54_385Z-debug.log

[i-18n] The problem of switching languages and then refreshing the page and then going back to the default language

如题，自己也尝试做了一些修改，但是没成功。主要是遇到了这个问题，导致我无法在页面刷新时获得Cookie中的language来初始化设置语言 ：

If the page is refreshed after switching the new language, the language displayed on the page will be changed back to the default language .
I also tried to make some modifications, but it was useless . Mainly because of this problem, I was unable to get the language in the Cookie to initialize the setting language when the page was refreshed:

---

求解惑，十万分感谢！
It would be very kind of you to help me!

Netlify Deployment don't works

https://brave-borg-57a14b.netlify.com/

How would you include Vue components in blog posts?

It's possible to do this with the markdown plugin. How would you go about implementing this? Do we have to make a Vue component for each blog post?

In the example they gave, you are required to make the component extend from the markdown file like this:

<script>
import readme from "../../README.md"
import NpmOrYarn from "./NpmOrYarn.vue"  // <-- including this component in markdown

export default {
  extends: readme.vue.component,
  components: { NpmOrYarn }
}
</script>

Suggestion: add heading tag anchors

I realized that the blog didn't have heading anchors, so I thought it'll be a good idea to add to the example.

The markdown-it-anchor plugin can be used.

In nuxt.config.js, add:

import mia from 'markdown-it-anchor';

...

md.use(mia, {
  permalink: true,
});

...

export default {
  ...
  router: {
    scrollBehavior: async (to, from, savedPosition) => {
      if (savedPosition) {
        return savedPosition;
      }

      const findEl = (hash, x = 0) => {
        return (
          document.querySelector(hash) ||
          new Promise((resolve) => {
            if (x > 50) {
              return resolve(document.querySelector('#app'));
            }
            setTimeout(() => {
              resolve(findEl(hash, ++x || 1));
            }, 100);
          })
        );
      };

      if (to.hash) {
        const el = await findEl(to.hash);
        if ('scrollBehavior' in document.documentElement.style) {
          return window.scrollTo({ top: el.offsetTop, behavior: 'smooth' });
        } else {
          return window.scrollTo(0, el.offsetTop);
        }
      }

      return { x: 0, y: 0 };
    }
  }
};

Anchors seem to be broken in Nuxt, so you need to add the scrollBehavior function. Check this issue: #5359

Another reason why this might be a good idea to add is because anchors don't work in Nuxt. This may help beginners.

Apart from this, I'd also like to thank you for creating this example! It's perfect!

[support] Can we import multiple post types in the asyncData promise?

Awesome work with this! The way you're handling everything is pretty straight forward and works great, so thanks for sharing.

I'm running into an issue though: What if you have multiple post types, like "blog" and "projects" and want to load both in the same page? I can't figure it out.

Here's what I've tried (that doesn't work):

import blog from "~/pages/blog/list.js";
import projects from "~/pages/projects/list.js";

export default {
  async asyncData({ app }) {
    async function asyncImportBlog(postName) {
      const wholeMD = await import(`~/pages/blog/${postName}.md`);
      return wholeMD.attributes;
    }

    async function asyncImportProjects(projectName) {
      const wholeMD = await import(`~/pages/projects/${projectName}.md`);
      return wholeMD.attributes;
    }

    return Promise.all([
        blog.map(post => asyncImportBlog(post)),
        projects.map(post => asyncImportProjects(post))
      ]).then(res => {
        return {
          blog: res[0],
          projects: res[1]
        };
      });
  },

And here's a CodeSandbox with that running: https://codesandbox.io/s/nuxt-markdown-blog-starter-g83c5

I'm trying to import the markdown files into the main index page. Any ideas?