Skip to content

SSR to resolve FOUC #1534

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
ang-zeyu merged 5 commits into from
Apr 27, 2021
Merged

SSR to resolve FOUC #1534

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
363e982
Remove FOUC temporary styles
wxwxwxwx9 Apr 2, 2021
362cd6a
Resolve Vue side effects
wxwxwxwx9 Apr 1, 2021
55d80e9
Implement SSR for MarkBind
wxwxwxwx9 Mar 30, 2021
430b7fc
Remove HTML beautification feature
wxwxwxwx9 Apr 22, 2021
063b9df
Resolve SSR hydration issues
wxwxwxwx9 Apr 14, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 4 additions & 1 deletion docs/devGuide/design/architecture.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,10 @@ The 3 key classes representing different types of content are as follows:
<box type="tip" seamless>Note that `Layout` instances do not generate any output files directly, but rather, they store intermediate processing results to be used in a `Page`.</box>
Comment thread
wxwxwxwx9 marked this conversation as resolved.
1. `External` — source files referenced in a `Page`, `Layout` or even another `External` that result in a <tooltip content="hence the class naming `External`">**separate**</tooltip> output file. These output files are loaded dynamically and on-demand in the browser. These instances are managed by a single `ExternalManager` instance.

<box type="info" seamless>For example, the file referenced by a `<panel src="xx.md">` generates a separate `xx._include_.html`, which is requested and loaded only when the panel is expanded.</box>

@wxwxwxwx9 wxwxwxwx9 Apr 15, 2021 •
edited
Loading

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Same issue as having block-level elements nested within <p>.

@wxwxwxwx9 wxwxwxwx9 Apr 21, 2021

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Needs newline for the sentence to be parsed as markdown.

<box type="info" seamless>

For example, the file referenced by a `<panel src="xx.md">` generates a separate `xx._include_.html`, which is requested and loaded only when the panel is expanded.
</box>

### Content processing flow

Expand Down
12 changes: 0 additions & 12 deletions docs/userGuide/siteJsonFile.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -228,18 +228,6 @@ The example above uses tags as an example of configuring plugin settings, refer

**Specifies that the website should use MarkBind's search functionality.** Default: `true`. See [User Guide: Making the Site Searchable](makingTheSiteSearchable.html) for more details.

#### **`disableHtmlBeautify`**

**Turn off html beautification done by [js-beautify](https://github.com/beautify-web/js-beautify) for html files generated by MarkBind.** By default, MarkBind beautifies the HTML files it generates, which helps in user-friendly viewing and editing.
You can choose to turn this option off to improve the performance of the MarkBind build process.
<br>
To turn off the option, add the following to `site.json`:
```js
...
"disableHtmlBeautify": true,
...
```

#### **`timeZone`**

**Time zone of the [time stamp](reusingContents.html#built-in-global-variables).** Default: `"UTC"`.
Expand Down
124 changes: 117 additions & 7 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

4 changes: 2 additions & 2 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,8 +8,8 @@
"lint": "eslint . --ext .js,.vue && npm run csslint",
"lintfix": "eslint . --ext .js,.vue --fix && npm run csslintfix",
"setup": "npm ci && lerna clean --yes && lerna bootstrap --hoist",
"test": "npm run lint && lerna run test --stream",
"updatetest": "lerna run updatetest --stream"
"test": "npm run lint && cross-env TEST_MODE=true lerna run test --stream",
"updatetest": "cross-env TEST_MODE=true lerna run updatetest --stream"
},
"devDependencies": {
"eslint": "^7.4.0",
Expand Down
10 changes: 8 additions & 2 deletions packages/cli/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,8 @@ const _ = {};
_.isBoolean = require('lodash/isBoolean');

const { Site } = require('@markbind/core');
const { pageVueServerRenderer } = require('@markbind/core/src/Page/PageVueServerRenderer');

const fsUtil = require('@markbind/core/src/utils/fsUtil');
const utils = require('@markbind/core/src/utils');
const {
Expand Down Expand Up @@ -217,12 +219,16 @@ program

site
.readSiteConfig()
.then((config) => {
.then(async (config) => {
serverConfig.mount.push([config.baseUrl || '/', outputFolder]);

if (options.dev) {
// eslint-disable-next-line global-require
const getMiddlewares = require('@markbind/core-web/webpack.dev');
const webpackDevConfig = require('@markbind/core-web/webpack.dev');

await webpackDevConfig.serverEntry(pageVueServerRenderer.updateMarkBindVueBundle, rootFolder);

const getMiddlewares = webpackDevConfig.clientEntry;
getMiddlewares(`${config.baseUrl}/markbind`)
.forEach(middleware => serverConfig.middleware.push(middleware));
}
Expand Down
3 changes: 1 addition & 2 deletions packages/cli/test/functional/test_site/expected/bugs/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,10 +38,9 @@
<body>
<div id="app">


<div>
<header>
<navbar type="dark" default-highlight-on="sibling-or-child" class=" temp-navbar">
<navbar type="dark" default-highlight-on="sibling-or-child">
<template #brand><a href="/" title="Home" class="navbar-brand">Markbind Test Site</a></template>
<li><a class="nav-link" href="/test_site/bugs/index.html">Open Bugs</a></li>
</navbar>
Expand Down
Loading