Releases: MoOx/phenomic
0.16.1
- Fixed:
Uncaught TypeError: (0 , _reactRouterScroll2.default) is not a function
We now
only importuseScroll
from react-router-scroll (as we only use this).
react-router-scroll@0.3.1
was exporting a default value,0.3.2
is not.
(#627 - @MoOx) - Fixed:
SyntaxError: Unexpected token
when importing CSS from
node_modules
.
Previously,node_modules/*
where skipped in webpack static build,
to improve performance (via webpackexternals
option).
The problem is that is going to cause some issue for most people that will
require stuff fromnode_modules
like CSS, SVG or other non-JS files.
(#639 - @MoOx) - Added: better webpack build notifications.
We replaced
webpack-error-notifications
by
[webpack-notifier
(https://www.npmjs.com/package/webpack-notifier)
(which add compat for Windows).
You don't have to do anything as it's embedded in Phenomic dev server.
(#527 - @MoOx)
0.16.0
tl;dr
- 🔨 Breaking change:
"phenomic/lib/content-loader"
should now be replaced
by a value imported from"phenomic"
(import { phenomicLoader } from "phenomic"
).
Following this, phenomic loader configuration should be directly in
phenomic section, notphenomic.loader
orphenomic.contentLoader
. - 🎉 New feature: dynamic pages! You now have the ability to generate
pages for all metadata used in your text files.
This can be used to generate pages for tags, categories, authors etc.
(Pagination is not handled yet, but will be in a near future). - 🎉 New feature: phenomic loader now supports plugins.
Lots of flexibility has been added with this feature,
unlocking a lot of possibilities!
🚀 Examples of update and changes:
- Example of update from Phenomic 0.15 to 0.16
- Example of implementation of some tags and authors pages
ℹ️ Some works has been done on the documentation:
☺️ A new Getting started has been
crafted. Please tell us what you think about it!- 🤗 We also have updated the Showcase page where
you can filter projects by tags. - ❤️ Do not hesitate to submit your website/app made with Phenomic!
Details
-
Changed: default markdown renderer updated to
remark-autolink-headings@^4.0.0
.
This might fix issue with missing links for headings. -
Changed: default markdown renderer updated to
remark-highlight.js@^4.0.0
This might fix issue with broken highlighted code. -
Changed:
phenomic/lib/content-loader
reference is deprecated in favor of
import { phenomicLoader } from "phenomic"
.
You can usephenomicLoader
variable in webpack configuration to reference
Phenomic loader. This change allows us more flexibility for the location of
the code.
(@MoOx) -
Changed: loader will now read loader configuration directly from
phenomic
section, not inphenomic.loader
orphenomic.contentLoader
-
Removed:
renderer
option fromcontent-loader
(nowphenomicLoader
).
See the newplugins
option below for more information.
If you want to do the same effect, you can use the following pluginsimport { phenomicLoader, phenomicLoaderPlugins } from "phenomic" // ... phenomic: { // ... plugins: [ // this 3 default plugin can be replaced by the a preset. More info below phenomicLoaderPlugins.initHeadPropertyFromConfig phenomicLoaderPlugins.initHeadPropertyFromContent phenomicLoaderPlugins.initBodyPropertyFromContent phenomicLoaderPlugins.markdownInitHeadDescriptionPropertyFromContent // optional, now you can replace this if you don't use markdown! // phenomicLoaderPlugins.markdownTransformBodyPropertyToHtml // the commented plugin above is the default renderer // here is an example that can be used like the old renderer // method ({ result }) => { // the difference here, is you need to return the entire new // (modified) result. // The `body` part is what your are looking for return { ...result, body: doYourThing(result.body), } } ] }
-
Removed:
raw
andrawBody
properties from page data.
If you want those back, there are plugins ready for you:import { phenomicLoader, phenomicLoaderPlugins, phenomicLoaderPresets, } from "phenomic" // ...then in the webpack config phenomic: { plugins: [ ...phenomicLoaderPresets.default, ...phenomicLoaderPresets.markdown, phenomicLoaderPlugins.initRawPropertyFromContent, phenomicLoaderPlugins.initRawBodyPropertyFromContent, ] }
See the new
plugins
option below for more information.
(#547 - @MoOx) -
Added:
plugins
option for the phenomic loader.
This option allow more flexibility on how to handle and transform
input passed to it.
By default, almost the same behavior as before is executed via the following plugins:plugins: [ phenomicLoaderPlugins.initHeadPropertyFromConfig, phenomicLoaderPlugins.initHeadPropertyFromContent, phenomicLoaderPlugins.initBodyPropertyFromContent, phenomicLoaderPlugins.markdownInitHeadDescriptionPropertyFromContent, phenomicLoaderPlugins.markdownTransformBodyPropertyToHtml, ]
See the configuration section in the documentation to know more how to customize this.
If you want just add more plugins for specific behavior (and so keep
the default plugins), you can spread some plugins/presets.
(see documentation for more informations).
(#260 - @MoOx) -
Added:
"phenomic"
package now exposes new valuesphenomicLoader
(ex "phenomic/lib/content-loader")phenomicLoaderPlugins
, the list of all available pluginsphenomicLoaderPresets
, that containsdefault
andmarkdown
presets
(see documentation for more informations).
(@MoOx)
-
Added: More routes can be pre-rendered! Previously, only files consumed
viaphenomic-loader
(formercontent-loader
) where generated as HTML.
Now your routes are consumed and pre-rendered when possible!
This is super convenient to define pages that will list content by tags,
categories, authors etc!
Here is a simple example to add pages for each tags by editing
web_modules/app/routes.js
(if you still use default location):export default ( <Route component={ LayoutContainer }> <Route path="tag/:tag" component={ ContainerThatWillListPostByTag } /> <Route path="*" component={ PageContainer } /> </Route> )
Obviously, you will need to define
ContainerThatWillListPostByTag
(and find a better name for it).
Here is an example on a website that implemented this:
→ Example of implementation of some tags and authors pages.
Please check out "Routing" section in the docs for more details.
Good news: pagination is on the roadmap!
(@MoOx)
Boilerplate
- Fixed: (boilerplate)
postcss-browser-reporter
was added on production
only when it should have been the opposite!
(@MoOx) - Changed: (boilerplate) LayoutContainer now import global CSS first
(#571 - @AdamQuadmon) - Changed: (boilerplate)
content-loader
reference is now in a variable
that can be imported (import { phenomicLoader } from "phenomic"
)
(@MoOx)
0.15.0
tl;dr;
offline
option has been rewritten. If you were usingoffline: true
, you
don't need to change anything, you will just have few bug fixes and a change
to "network" first approach.
Otherwise, please check details below and/or the online documentation.
We hope you will enjoy this nice API!- default port is now 3333 in development
- remark has been updated to 5.x version
- boilerplate got some updates, mainly for stylelint
Details
-
Removed:
appcache
option has now completely being removed in favor of
offline
(after being deprecated in 0.11.0). See new API below. -
Changed: Offline option has been completely rewritten.
Service Worker now uses a network first approach.
This is to prevent having an outdated collection that will lead to request
outdated entries urls that might not exist anymore (and that have not been
cached yet, see #451).
This is for the better.
By the way, we now rely on
offline-plugin
to generate Service Worker and Appcache files.
The part that registers the Service Worker is now included in the client
bundle.
Note that for a better caching, the default boilerplate now use[hash]
in the filenames loaded viafile-loader
.
We encourage you to do the same by using a parameter like
loader: "file-loader?name=[path][name].[hash].[ext] // ...
.
Offline API is now much more flexible and clear to setup thanks to the new
cachePatterns
.
Here is an example of the newoffline
option:{ serviceWorker: true, appcache: { // fallback for SW, will cache onInstall and afterInstall pattern. // onDemand cannot be cache with appcache. onInstall: true, afterInstall: true, }, cachePatterns: { onInstall: [ "/", "phenomic.*" ], // cache App Shell on SW install afterInstall: [ "**", ":assets:" ], // cache all content onDemand: [ ], // since everything is cached by default (if offline: true) // you don't need to cache anything on demand. // but this option offers you a lot of flexibility, see documentation // for more examples excludes: [ "**/.*", "**/*.map", "**/*.html" ], // excludes useless files }, }
Using
offline: true
will use the configuration above. To know more about
this option and all the possibility you have, please read the documentation.
(#485 - @MoOx) -
Changed:
remark
has been updated to^5.0.0
.
This is a breaking change and since (for now) remark
is still a dependency,
you should be careful when upgrading if you are using a custom render method
based on remark.
Some plugins have also been updated to work with remark 5.xremark-highlight.js
has been updated to^3.1.1
remark-html
has been updated to^5.0.0
-
Changed: default port is now
3333
.
This is to prevent weird behavior if you useoffline
option.
Since3000
is pretty common, not using it will avoid having your website
Service Worker to be used for others projects.
That said we advise you to choose your own port if you useoffline
option.
(@MoOx)
Boilerplate
- Changed:
postcss-browser-reporter
is now disabled in production.
Just in case you still have some PostCSS messages not handled yet.
Here is the change you can do in your PostCSS config section in your
webpack.config
to do the same on your existing project:
`diff
postcss: () => [
require("stylelint")(),
require("postcss-cssnext")({ browsers: "last 2 versions" }),- require("postcss-browser-reporter")(),
require("postcss-reporter")(),
- ...config.production ? [
-
require("postcss-browser-reporter")(),
- ] : [],
],
`
(@MoOx)
- require("postcss-browser-reporter")(),
- Changed:
stylelint
has been updated to^6.8.0
(@MoOx) - Changed:
stylelint-config-standard
has been updated to^10.0.0
(@MoOx) - Changed: making date structure obvious in examples posts frontmatter.
(#559 - @MoOx)
0.14.2
0.14.1
0.14.0
Finally, the navigation has now a proper scroll behavior
- new page: scroll to top
- back button: scroll position restored
For those which implemented a fix for this scrolling issue:
you can just remove your workaround !
Details
Boilerplate
- Added:
PageLoading
now use "Loading..." has a<title>
(@MoOx)
0.13.0
tl;dr;
No breaking changes!
- You can just remove stuff from your
.gitignore
file since now static
builded files are hiddenscripts/_
*.bundle.js
- If you want global (normal) CSS (no CSS Modules), you can just update your
webpack.config.js
(if not done already) to add support for
global CSS via*.global.css
files.
See the corresponding changes.
Note that the scope has be restricted toweb_modules
.
Feel free to adjust to your need.
Details
- Changed: node (static) bundle (
phenomic.node.bundle.js
) is now hidden
(innode_modules/.cache/phenomic
,
thanks to find-cache-dir)
(#439 - @MoOx) - Fixed: files should not be created anymore near your phenomic.node script
(#439 - @MoOx)
Boilerplate
- Changed: (boilerplate) loader for CSS is only applied to local
web_modules
.
If you want to consume CSS fromnode_modules
you will need to define your
own section and adjust the scope accordingly (depending on wether it's global
CSS or CSS Modules...)
(#516 - @MoOx) - Added: (boilerplate)
*.global.css
can be just normal CSS (not CSS Modules)
(#443 and
#95 - @MoOx) - Added: (boilerplate) add a default meta viewport tag
(@MoOx)
0.12.4
0.12.3
0.12.2
-
Added:
BodyContainer
component.
This component is now recommended to used wrap pagesbody
, in replacement of
previous usage ofdangerouslySetInnerHTML
.
Previous method still works but have
a known issue.
To use this component, you can simply replace in your layouts the following
code{ body && <div dangerouslySetInnerHTML={ { __html: html } } /> }
By the following code
<BodyContainer>{ body }</BodyContainer>
Note that you will need to import
BodyContainer
like thisimport { BodyContainer } from "phenomic"
Example of full diff
import Helmet from "react-helmet" import invariant from "invariant" -import { joinUri } from "phenomic" +import { BodyContainer, joinUri } from "phenomic" class Page extends Component { //... { head.title && <h1>{ head.title }</h1> } { header } - { - body && - <div - dangerouslySetInnerHTML={ { __html: html } } - /> - } + <BodyContainer>{ body }</BodyContainer> { props.children } { footer }
(#469)