nuxpress is the result of me reading through VuePress's source code for a week. It doesn't have blogging support yet, so I set out to try and cook something up with it. I learned a lot reading through Evan's code, but my feeling is that VuePress goes to great lengths to replicate Nuxt's functionality for automatically setting up and launching a Vue app.
While I see the value of having vuepress as a standalone CLI tool and
everything it does that Nuxt doesn't (e.g., all SEO-friendly publishing tweaks),
for me really its golden feature is streamlining Markdown in Vue files.
Now, I really like Nuxt's code organization standards. Having a blog as
a Nuxt app makes sense, as it would give me total freedom for customization.
VuePress's eject command gives you a similar functionality, but you miss
the multitude of plugins and Nuxt-oriented solutions out there.
So instead of trying to add blogging support to VuePress, I decided to add Markdown blogging support to a Nuxt app with the minimum amount of code and conventions I could possibly manage.
| nuxt.config.js | Supercharged with functions that load .entry files from a
entries/ directory. Generates RSS and Atom feeds using
.template files under feeds/. |
| plugins/entryLoader.js | Uses an index entries.json file (generated by
nuxt.config.js) to apply the Markdown transformation and inject
$entries and $permalinks in Nuxt's app. |
| pages/index.vue | asyncData() makes $entries available to
the template. Entries are automatically ordered by dates descending. |
| pages/entry.vue | asyncData() makes article available to
the template, accessed via slug in the $permalinks hash. |
If the loader encounters a directory under entries, it checks inside for an
.entry file and copies all other files to /static/entries/, so you can
reference any assets in your .entry files.
The first and second paragraphs of an .entry files are reserved
for the publishing date and title respectively. The publishing date
can be anything Date.parse() can handle.
The domain constant in nuxt.config.js, then:
| pages/* | Where index.vue, entry.vue and
archive.vue live. As long as you understand and preserve the logic,
layout and CSS can be modified as you like. |
| feeds/* | Lodash templates for RSS and Atom feeds. |
| layouts/default.vue | Nuxt's default layout, set up to use components/LeftColumn.vue |
| components/LeftColumn.vue | The left column in the default two-column layout. This can be removed altogether and replaced by whatever layout structure you're using. |
| head.js | Base HTML head definitions used by pages/*. |
I love Markdown, but the fact that you need to use a unique identifier for link references makes things to hard to maintain.
Here's an example:
To use it you need to [write a locustfile][1], which is just a Python file with
at least one [Locust subclass][2]. Each Locust object specifies a list of tasks
to be performed during the test, represented by a [`TaskSet`][3] class.
[1]: http://docs.locust.io/en/latest/writing-a-locustfile.html
[2]: http://docs.locust.io/en/latest/api.html#locust-class
[3]: http://docs.locust.io/en/latest/api.html#taskset-class
if you remove the second link, you get an aesthetically unpleasing unordered
list. Plus you have to keep track of references, even if you use slugs as link
identifiers instead of numbers. In nuxpress, all you have to do is:
To use it you need to [write a locustfile][], which is just a Python file with
at least one [Locust subclass][]. Each Locust object specifies a list of tasks
to be performed during the test, represented by a [`TaskSet`][] class.
[]: http://docs.locust.io/en/latest/writing-a-locustfile.html
[]: http://docs.locust.io/en/latest/api.html#locust-class
[]: http://docs.locust.io/en/latest/api.html#taskset-class
And it will automatically link ordered references. Use this if you're ok with not ever having two references to the same link in paragraphs, and want a streamlined way of adding and editing them. Otherwise, regular Markdown link references will work as expected.
npm install
npm run dev # development mode
npm start # nuxt servernuxpress is missing quite a few features, such as:
- Progressive web app enhancements
- Syntax highlighting for code blocks
Plus the entry loading code can probably be improved to make better use of async I/O. My first attempts were giving me a headache so its current version processes everything linearly. PRs are most definitely welcome.
MIT