Skip to content
This repository has been archived by the owner on Sep 7, 2020. It is now read-only.

Releases: MoOx/phenomic

0.16.1

23 Aug 07:52
Compare
Choose a tag to compare
  • Fixed: Uncaught TypeError: (0 , _reactRouterScroll2.default) is not a function
    We now
    only import useScroll
    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 webpack externals option).
    The problem is that is going to cause some issue for most people that will
    require stuff from node_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

22 Aug 22:27
Compare
Choose a tag to compare

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, not phenomic.loader or phenomic.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:

ℹ️ Some works has been done on the documentation:

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 use phenomicLoader 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 in phenomic.loader or phenomic.contentLoader

  • Removed: renderer option from content-loader (now phenomicLoader).
    See the new plugins option below for more information.
    If you want to do the same effect, you can use the following plugins

    import { 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 and rawBody 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 values

    • phenomicLoader (ex "phenomic/lib/content-loader")
    • phenomicLoaderPlugins, the list of all available plugins
    • phenomicLoaderPresets, that contains default and markdown presets
      (see documentation for more informations).
      (@MoOx)
  • Added: More routes can be pre-rendered! Previously, only files consumed
    via phenomic-loader (former content-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

13 Jul 14:53
Compare
Choose a tag to compare

tl;dr;

  • offline option has been rewritten. If you were using offline: 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 via file-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 new offline 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.x

    • remark-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 use offline option.
    Since 3000 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 use offline 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)
  • 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

12 Jun 10:00
Compare
Choose a tag to compare
  • Fixed: Security exception when accessing "/" via a
    react-router <Link to="/""> is now avoided.
    (#521 - @MoOx)

0.14.1

12 Jun 08:44
Compare
Choose a tag to compare
  • Fixed: explicit update of react-router@^2.3.0 peer dependency
    (@MoOx)

0.14.0

12 Jun 05:16
Compare
Choose a tag to compare

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

  • Fixed: navigation now offers a proper scroll behavior.
    Not more weird page updates.
    (#285 - @MoOx)

Boilerplate

  • Added: PageLoading now use "Loading..." has a <title>
    (@MoOx)

0.13.0

09 Jun 05:48
Compare
Choose a tag to compare

tl;dr;

No breaking changes!

  • You can just remove stuff from your .gitignore file since now static
    builded files are hidden
    • scripts/_
    • *.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 to web_modules.
    Feel free to adjust to your need.

Details

  • Changed: node (static) bundle (phenomic.node.bundle.js) is now hidden
    (in node_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 from node_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

30 May 10:48
Compare
Choose a tag to compare
  • Fixed: regression with path-to-uri introduced in 0.12.3
    (path.posix is undefined)
    #503

0.12.3

27 May 06:56
Compare
Choose a tag to compare
  • Fixed: public joinUri function now correctly join uri with protocol
    #500

0.12.2

20 May 21:16
Compare
Choose a tag to compare
  • Added: BodyContainer component.
    This component is now recommended to used wrap pages body, in replacement of
    previous usage of dangerouslySetInnerHTML.
    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 this

    import { 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)