elmasse / nextein Goto Github PK

The current implementation when passing excerpt in <Content /> tag, the selector used to determine the excerpt is set to :root > paragraph:first-child. This can be configurable by making the excerpt to accept a valid units-util-select(https://www.npmjs.com/package/unist-util-select) selector

<Content {...post} excerpt={`:root > paragraph:first-of-type`} />

I had being looking for a way to create a custom name for the output directory and can't find it.

My use case would be something like creating a GitHub page with nextein to hold the source code and the output directory being a git submodule with static files.

So the nextein would be something like <username> and the submodule <username>.github.io so I would like the create the output of the export process inside that directory instead of the out one.

MDX is an awesome extension to Markdown to be able to add JS code and even React componentes inside a Markdown file (.mdx).

It would be awesome if nextein could use MDX natively so if you use normal MD it will work as usual but you can also extend it.

First of all, this is really cool!

Some folks night have a hard time reading the website because of the low contrast of grey text over black.

you might find this useful: http://webaim.org/resources/contrastchecker

I want to create a site with multiple authors and categories with information on their own. I think the best way to achieve it would be some kind of content folder, that wraps around it.

is this possible with any current configuration?

imagined folder structure:

└── content
    ├── posts
    │   ├── post1.md
    │   └── post2.md
    ├── authors
    │   ├── author1.json
    │   └── author2.json
    └── categories
        ├── category1.json
        └── category2.json

Overriding the plugin array will enable to define more than one instance of the same plugin, so in case of the default nextein-plugin-markdown we can define a different set of rehype plugins in different locations.

Related to #151

Hi @elmasse,

Great job. Thank you for doing it.

I was thinking about doing this kind of product and actually done prototype.

Even though it static site generator, how about adding client side support?
By client side support, I mean rendering next pages on the client side, after initial load. Next has this feature for exported static sites too.

It loads next pages faster and nice UX experience to have.

I ported my prototype to nextein and it works great. https://github.com/delgermurun/delgermurun.mn

We should be able to add and configure different plugins instead of using rehype/remark. This will open the door for adding support for formats other than markdown and also provide a way to configure the posts folder.

The idea is to not break any existing codebase that uses nextein so by default the nextein-rehype-plugin (name can be discussed, also nextein-markdown-plugin is being considered) will be included and default configuration to current values.

• Create plugin system that reads from next.config.js
• Define a plugin API (What's the plugin responsibility and what data structure it should handle/provide) alongside with process.
• Implement mardown plugin to move current logic into it.
• Update tests.
• Update Readme

Hi, I try the Getting Started but I have an error when run npm run dev

/Volumes/lavaldi/repos/personal-blog/node_modules/nextein/dist/bin/nextein-dev:58
srv.start(argv.port).then(async function () {
                          ^^^^^

SyntaxError: missing ) after argument list
    at createScript (vm.js:56:10)
    at Object.runInThisContext (vm.js:97:10)
    at Module._compile (module.js:542:28)
    at Object.Module._extensions..js (module.js:579:10)
    at Module.load (module.js:487:32)
    at tryModuleLoad (module.js:446:12)
    at Function.Module._load (module.js:438:3)
    at Module.runMain (module.js:604:10)
    at run (bootstrap_node.js:389:7)
    at startup (bootstrap_node.js:149:9)

npm ERR! Darwin 16.7.0
npm ERR! argv "/usr/local/bin/node" "/usr/local/bin/npm" "run" "dev"
npm ERR! node v6.11.3
npm ERR! npm  v3.10.10
npm ERR! code ELIFECYCLE
npm ERR! [email protected] dev: `nextein`
npm ERR! Exit status 1

package.json

"dependencies": {
    "next": "^3.2.2",
    "nextein": "^1.0.0-beta20",
    "react": "^15.6.1",
    "react-dom": "^15.6.1"
  }

Use case:
Have an index page that renders a next page. Include a nextein/link to a blog page with a list of posts.

pages/index.js

import React form 'react'
import Link from 'nextein/link'

export default () => (
  <div>
    <h1>Hello There</h1>
    <p>This is a very simple component. With a link to <Link href="/blog"><a>My Blog</a></Link></p>
  </div>
)

pages/blog.js

import React from 'react'
import withPosts from 'nextein/posts'
import { Content } from 'nextein/post'

export default withPosts(({ posts }) => {
  return (
    <main>
    {
      posts.map((post, index) => (        
        <article key={`post-${index}`}>
          <h1>{post.data.title}</h1>
          <Content {...post} />
        </article>
      ))
    }
    </main>
  )
})

Need a way / example on how to generate a feed.xml

Hey,

currently i'm rebuilding my blog with nextein and want to make a suggestion for filtering the posts. The content is in my case huge for every posts item. About 15000-40000 chars for each of my 180 posts.
Maybe we can add an option to inCategory like {removeContent: true} to delete the content from the posts object.
A commom use case is to render a list with urls for posts in a category. So we don't need the content.

Sometimes I just want to write normal HTML tags inside markdown in order to style them in a certain way, but I noticed that all HTML tags written in markdown are escaped in nextein.

Is there a way to achieve what I wanted?

Hiya!

remark changed a few weeks ago and I just wanted to let you know!

I also just checked your code and came up with two ideas, do with them whatever you’d like 😉

use unified directly

You’re now importing remark directly, but that contains an unneeded markdown compiler/generator/stringifier. You could make stuff a bit lighter if you’d apply the following changes:

Now:

  remark()
    .use(excerpt && extractExcerpt)
    .use(reactRenderer, {
      prefix: `entry-`,
      remarkReactComponents: renderers
    })
    .processSync(content).contents

Proposed:

  unified()
    .use(remarkParse)
    .use(excerpt && extractExcerpt)
    .use(reactRenderer, {
      prefix: `entry-`,
      remarkReactComponents: renderers
    })
    .processSync(content).contents

use rehype

Markdown has an interesting feature: just paste in HTML and it’ll turn out great. However, if you use it, it breaks a lot of stuff in markdown. Instead, I suggest using rehype through remark-rehype, rehype-raw, and rehype-react. It gives you much better support for HTML, and rehype has some interesting other plugins (caveat: svg isn’t really supported).

Next 3.x is out of beta, package.json should use the new version for peerDep and devDeps

Related to: elmasse/nextein-example#2

i'm trying to port my metalsmith blog over a metalsmith generated static-site to nextein. i have a markdown file with content for the home page. but assigning page: index won't allow me to find the post with withPost() on page/index.js. any ideas on how i could resolve this?

I had some major headache yesterday with hot reloading being wonky. Style changes in styled-components wouldn't load as expected. I had to click on another page and then back again to trigger a rebuild. Turned out it was because I used "dev": "nextein" as suggested in the readme and as used in nextein-example.

Since I had to dig around the source to find that you can add a dev argument, maybe it should be added to the readme and perhaps also changed in nextein-example?

What's the use case of running nextein without the dev argument?

Hey elmasse, love nextein!

I'm having an issue where my static assets are reloading whenever I navigate from post to post.

$ nextein
TypeError: Cannot read property 'exportPathMap' of undefined
    at Server.readEntries (/Volumes/Data/Workspace/MyWeb/node_modules/nextein/dist/server.js:100:50)
    at <anonymous>
    at process._tickCallback (internal/process/next_tick.js:118:7)
    at Function.Module.runMain (module.js:705:11)
    at startup (bootstrap_node.js:193:16)
    at bootstrap_node.js:660:3
error An unexpected error occurred: "Command failed.
Exit code: 1
Command: sh
Arguments: -c nextein
Directory: /Volumes/Data/Workspace/MyWeb/web
Output:

@elmasse

Needed to update to next@canary to fix the export command when using withCss or withSass plugins. Running npx next works fine but of course doesn't generate all the posts from markdown

When you try to load a single post page (which use withPost), you can notice that the page will include all posts in the __NEXT_DATA__ object. Is it possible to omit all other entries and load only the data necessary to render the single post ?

If you try for example to open http://localhost:3000/first-post the content from all other posts will be loaded into __NEXT_DATA__ as well. This behaviour isn't wanted if you have a large collection of posts, since opening a single post will download some MB before rendering the page.

#4 and #125 seems to be in some way related with this.

Is there a way to have a custom route in a Nextein app? I want to have a separate URL for each category, such as /food, /cars, /news, etc. I tried exporting each of them dynamically in next.config.js, but it still errors with 404 when loading a URL directly (not via <Link>).

const path = require('path');
const fs = require('fs');
const nexteinConfig = require('nextein/config').default;

module.exports = nexteinConfig({
	exportPathMap: () => {
		const categories = fs.readdirSync(path.join(__dirname, 'posts'));

		return categories.map(name => ({
			[`/${name}`]: {
				page: '/category'
			}
		}));
	}
});

In exported version when navigating to another page the posts are loaded twice.

To make Nextein compatible with Jekyll posts the generated url should include .html and also remove the date from the file name.

Add an opt-in option to post front matter for using .html

---
useExtension: true
---

I was expecting this out of the box as this is clearly a must-have feature. So, I'm not sure if missed some config option or this is just not supported yet?

Implement PUBLIC_URL env to define the url prefix.

Hi,

First of all, thanks for nextein! It's amazing!

I'm running into this issue though. It only happens when deploying my site via now, not when running locally. When I open a page that is using withPostsFilterBy for the first time via a nextein <Link> I get an error in the console:

Cannot read property 'filter' of undefined
TypeError: Cannot read property 'filter' of undefined
    at Function.value (https://out-qsowcegedz.now.sh/_next/dec5f7f2-4a3e-44b9-8e02-75a7abd04637/page/blog/index.js:3:2566)
    at <anonymous>

Navigating back and clicking on the link again works though.

The error seems to happen because loadEntries() returns undefined:

Source seems to be the client version of loadEntries:

I'm trying to dig deeper into the issue myself atm but my JS debug skills are noobish. Just wanted to report to see if this is a known issue.

Thanks

Is it possible to add SSR caching (for assets) with Nextein? I would like to set a few headers to cache things like custom fonts, stylesheets, etc. so that they are not reloaded on each visit. At the moment I do not see a clear path for caching with Nextein.

Would this require creating a custom server? Next provides an example for SSR caching which does, in fact, require setting up a custom server.

Are there any options to extend SSR this with the next.config.js file or other?

Thanks!

After completing successfully step 3 of the tutorial and exporting my static website, when I navigate to the "blog" section I get an error because the "posts" prop is undefined. If instead I start navigation by loading the blog page everything works fine.

http://localhost:8080/ -> http://localhost:8080/blog : "An unexpected error has occurred."
http://localhost:8080/blog : 👍

Hi,

awesome project! How about this: instead of defining the category in each post, we could define it with the dir structure like this:

├───posts
│   ├───cat-1
│   │  └───post-cat-1.md
│   ├───cat-2
│   │  └───sub-cat-2
│   │     └───post-sub-cat-2.md
│   └───post-cat-2.md

The posts would be available via:

• /cat-1/post-cat-1
• /cat-2/post-cat-2
• /cat-2/sub-cat/post-sub-cat-2

In-page anchoring doesn't work without injecting <h2> elements with id tags into markdown. In-page anchoring should work and usually does work with markdown out of the box. How difficult would this be to add to nextein?

There is a reported issue with next v7.0.2 (vercel/next.js#5429) that prevents HMR to work with projects that contains .git in the name.
I'm posting this to keep track of the issue resolution and for future reference the quick workaround is to set the webpackDevMiddleware watchOptions as follows using next.config.js:

module.exports = {
  webpackDevMiddleware(config) {
    config.watchOptions = {
      ignored: [
        /\.git\//,
        /\.next\//,
        /node_modules/
      ]
    }
    return config;
  }
}

I'm trying to generate a list of categories as a navigation on a blog. Even though there seems to be no built-in method to get those, I can extract them from posts prop in a component wrapped with withPosts. The problem comes on a page for a specific post, where I have access only to post, but not posts. Is there a workaround for this? Perhaps list categories using fs.readdir on the server and expose that data to a client?

Add link to nextein starter repository

Information in package.json

• add description
• add github repo url
• add issues url
• add keywords
• move index.js -> posts from main or remove main

Version 6.1.0 of next was just published.

This version is covered by your current version range and after updating it in your project the build failed.

next is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.

Your Greenkeeper Bot 🌴

• Include next 6.0.0 in package.json peer dependencies
• needed to remove
  require('source-map-support/register');
  from bin/nextein-dev script

Is pagination for posts on your plans? It would be a great feature to have.

I successfully followed step 3 of the tutorial, but when I export my static website all the routes that were previously auto-generated by Next are available no more, I have to re-declare them explicitly like so:

exportPathMap: defaultPathMap => ({
  ...defaultPathMap, // this doesn't even work
  '/blog': { page: '/blog' },
  '/about': { page: '/about' }, // this was auto-defined before using nextein
}),

I'm using next ^7.0.1 and nextein ^2.0.0.

Version 10 of Node.js (code name Dubnium) has been released! 🎊

To see what happens to your code in Node.js 10, Greenkeeper has created a branch with the following changes:

• Added the new Node.js version to your .travis.yml

If you’re interested in upgrading this repo to Node.js 10, you can open a PR with these changes. Please note that this issue is just intended as a friendly reminder and the PR as a possible starting point for getting your code running on Node.js 10.

Your Greenkeeper Bot 🌴

Hey @elmasse,
I'm still loving nextein!

Currently, we can use withPosts to to grab all of the posts content and data.
Is there a plan to make it so only the data without the content is fetch-able?

This kind of feature would be really cool for dynamic sidebars and pagination!

There have been updates to the react monorepo:

• • The devDependency react was updated from 16.6.1 to 16.6.2.

• The devDependency react-dom was updated from 16.6.1 to 16.6.2.
• The devDependency react-test-renderer was updated from 16.6.1 to 16.6.2.

🚨 View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

This monorepo update includes releases of one or more dependencies which all belong to the react group definition.

react is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.

Your Greenkeeper Bot 🌴