elmasse / nextein Goto Github PK
View Code? Open in Web Editor NEWA static site generator with markdown + react for Next.js
Home Page: https://nextein.elmasse.io
License: ISC License
A static site generator with markdown + react for Next.js
Home Page: https://nextein.elmasse.io
License: ISC License
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?
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.
$ 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:
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
Branch | Build failing π¨ |
---|---|
Dependency | next |
Current Version | 6.0.3 |
Type | devDependency |
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.
dist
to server
to be more consistent: #4506Recipes
section: #4661with-material-ui
per #4439: #4444Huge thanks to @ex3ndr @teleginzhenya, @Zn4rK, @bennygenel, @brikou, @scaasic, @oliviertassinari, @fatfisz, @andrewmclagan, @koss-lebedev, @davscro, @tobitos, @ngauthier, @skv-headless, @rovansteen, @giautm, @swissspidy, @teleginzhenya, @jthegedus, @lon-io, @mmiszy, @vasco3, @dlcoffee, @quietshu, @klyburke, @toolmantim @gHashTag, @TheRobBrennan, @lukebarton, @tvthatsme, @joaogranado, @rwieruch, @andy-viv, @AriLFrankel, @vladnicula, @JeromeFitz, @elrumordelaluz, @Yuripetusko, @yhirano55, @nwalters512, @lucleray, @lfades, @jonespen, @sampsonjoliver, @DevSpeak, and @loganfsmyth for helping!
The new version differs by 103 commits.
512f16e
6.1.0
7fcfb8b
Make production compilation faster (patch) (#4677)
1ebd996
6.0.4-canary.9
85769c3
Pass through buildId to webpack config in development (#4665)
e70c595
Add example to Recipes
section (#4661)
36c82fd
Fix incorrect wording (#4658)
6ed2da4
with-socket.io Example updated with _app.js (#4644)
f4af03b
Remove unneeded async (#4635)
91900d1
Update "url deprecated" error docs with note re: React Dev Tools (#4652)
0989ecc
[with-jest]Β Move jest deps to devDeps (#4650)
3ae9f87
Rephrase url deprecation text and add link to next-codemod (#4649)
6cba9fa
Remove the React 15 support comment (#4648)
67cb87a
Added with-unstated example (#4628)
fc2d59d
Add class properties configuration (#4619)
bf882eb
Failing test for #4620 (#4625)
There are 103 commits in total.
See the full diff
There is a collection of frequently asked questions. If those donβt help, you can always ask the humans behind Greenkeeper.
Your Greenkeeper Bot π΄
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`} />
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'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?
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:
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?
Is pagination for posts on your plans? It would be a great feature to have.
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
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
Hey elmasse, love nextein!
I'm having an issue where my static assets are reloading whenever I navigate from post to post.
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;
}
}
Add link to nextein starter repository
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>
)
})
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"
}
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?
Next 3.x is out of beta, package.json should use the new version for peerDep and devDeps
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 π
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
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).
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.
Need a way / example on how to generate a feed.xml
Information in package.json
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.
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 : π
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?
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'
}
}));
}
});
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?
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!
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.
In exported version when navigating to another page the posts are loaded twice.
devDependency
react was updated from 16.6.1
to 16.6.2
.devDependency
react-dom was updated from 16.6.1
to 16.6.2
.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.
There is a collection of frequently asked questions. If those donβt help, you can always ask the humans behind Greenkeeper.
Your Greenkeeper Bot π΄
To see what happens to your code in Node.js 10, Greenkeeper has created a branch with the following changes:
.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.
Greenkeeper has checked the engines
key in any package.json
file, the .nvmrc
file, and the .travis.yml
file, if present.
engines
was only updated if it defined a single version, not a range..nvmrc
was updated to Node.js 10.travis.yml
was only changed if there was a root-level node_js
that didnβt already include Node.js 10, such as node
or lts/*
. In this case, the new version was appended to the list. We didnβt touch job or matrix configurations because these tend to be quite specific and complex, and itβs difficult to infer what the intentions were.For many simpler .travis.yml
configurations, this PR should suffice as-is, but depending on what youβre doing it may require additional work or may not be applicable at all. Weβre also aware that you may have good reasons to not update to Node.js 10, which is why this was sent as an issue and not a pull request. Feel free to delete it without comment, Iβm a humble robot and wonβt feel rejected π€
There is a collection of frequently asked questions. If those donβt help, you can always ask the humans behind Greenkeeper.
Your Greenkeeper Bot π΄
require('source-map-support/register');
Related to: elmasse/nextein-example#2
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.
next.config.js
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.
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
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!
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:
nextein/src/components/posts.js
Lines 27 to 29 in b44f1fb
Source seems to be the client version of loadEntries
:
Lines 25 to 30 in b44f1fb
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
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
A declarative, efficient, and flexible JavaScript library for building user interfaces.
π Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. πππ
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google β€οΈ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.