nostalgie - npm Package Versions

BREAKING Renamed the nostalgie/helmet runtime module to nostalgie/markup to better reflect its purpose: affecting the generated markup. The Helmet, HelmetProps and HelmetTags have been renamed to Markup, MarkupProps and MarkupTags, respectively.

As a reminder, the nostalgie/markup module is your one-stop shop to set the page title, meta tags or other markup-related features:
```
import { Markup } from "nostalgie/markup";

export function MyPage() {
  return (
    <>
      <Markup>
        <title>My page title</title>
      </Markup>
      <h1>My page</h1>
    </>
  );
}
```

0.76.0

Diff

filearts

published 0.76.0 • 3 years ago

Changelog

Source

[0.76.0] - 2021-02-23

Added

Improved typing and behaviour of the styled helper function.
Changed the CodeSnippets component to hide line numbers by default but to show them with an MDX annotation of lines or an boolean prop lineNumbers.

Also made various improvements to overflow and highlighting of lines in the CodeSnippets component.

For example, the following:
```
```js
console.log('hello world');
```
```
Results in:
```
console.log('hello world');
```
And the following:
```
```js lines
console.log('hello world');
```
```
Results in:
```
console.log('hello world');
```

0.75.1

Diff

filearts

published 0.75.1 • 3 years ago

Changelog

Source

[0.75.1] - 2021-02-19

Fixed

Fixes a bug in the server renderer wherein a superfluous comma could get inserted in the initial server markup.

0.75.0

Diff

filearts

published 0.75.0 • 3 years ago

Changelog

Source

[0.75.0] - 2021-02-19

Added

Adds the code:<import_specifier> import syntax to import an instance of the <CodeSnippet /> component, wired up with the source code of the file to which the <import_specifier> resolves.

This is expected to be useful in documentation and tutorials so that such documents can refer directly to concrete examples instead of having to duplicate the code.

Example:
```
import Changelog from 'code:./CHANGELOG.md';

Here are the first 6 lines of our changelog, with the emphasis put on the 5th and 6th lines.

<Changelog toLine={6} emphasizeLines={[[5,6]]} />
```

Changed

Fixed support for the styled function and custom components.

You can now do the following:

import { styled } from 'nostalgie/styling';

function MyComponent() {
  return <h1>Hello world</h1>;
}

// Template string api
export const MyComponentRed = styled(MyComponent)`
  color: red;
`;

// Object style api
export const MyComponentBlue = styled(MyComponent){
  color: 'blue',
};

Refactored how code blocks are rendered in .md and .mdx to use a new, internal <CodeSnippet /> component. This new component supports emphasizing certain lines. Instead of each code snippet having static react components created at build time, this approach compiles a json representation of the snippet and styling information that a shared <CodeSnippet /> component consumes at runtime.

Code blocks now support chosing different themes for each code block. Themes can either be chosen from one of the themes built into shiki (see here for a list of built-in themes). For example:
```
```ts theme:nord
function helloWorkd() {
  return 'hello world';
}
```
```
Produces:
```
function helloWorkd() {
  return 'hello world';
}
```
This feature also supports loading themes from relative (to the .md or .mdx file) or absolute paths. For example:
```
```ts theme:./themes/OneDark.json
function helloWorkd() {
  return 'hello world';
}
```
```
Produces:
```
function helloWorkd() {
  return 'hello world';
}
```
Additionally, ranges of lines can be emphasized by using the emphasize meta option on code blocks. Multiple instances of the emphasize option can be used to highlight several ranges. For example:
```
```ts emphasize:2-4
function helloWorld() {
  // For some reason,
  // we decided to emphasize this comment
  // and split it across 3 lines!?
}
```
```
Produces:
```
function helloWorld() {
  // For some reason,
  // we decided to emphasize this comment
  // and split it across 3 lines!?
}
```

0.74.0

Diff

filearts

published 0.74.0 • 3 years ago

Changelog

Source

[0.74.0] - 2021-02-13

Added

Added ability to gracefully recover from and log build errors in dev mode.
Add support for handling server-side redirects triggered by nostalgie/router's <Redirect /> component (via react-router).

Whereas before an app without redirects would be fully functional with JavaScript disabled, one with redirects would sit idle on any route intending to trigger a redirect. This change will result in a 302 response with a Location header and some (very) simple markup explaining the iminent redirect.
Add support for reading and embedding css resources referred-to by URLs.

For example, the following is now supported for loading a Google Font:
```
/* The following imports the Monoton font, with _just_ the letter N */
@import url('https://fonts.googleapis.com/css2?family=Monoton&display=swap&text=N');
```
What is interesting about this is that the above url points to a css file, which also contains a URL @import to the actual font file. Nostalgie will import both of these, treating the font file as a base64-encoded uri. The resulting CSS file will be a stand-alone asset that no longer needs to download the font at runtime, avoiding any risk of flash of unstyled text (FOUT).

Of course, the trade-off here is that this increases the initial render size so it remains to be seen how this plays out.