NotFound.vue missing title and description

[nerdoza]

• VuePress 0.8.4
• Tested on Windows 10 & Ubuntu with same result

There seems to be 2 different ways this issue appears, depending on if you are running dev or a static build.

When in development mode (vuepress dev) the title attribute is blank and the description attribute is missing entirely.

When building the site (vuepress build) the resulting 404.html page has VuePress as the title and the description attribute is blank.

Also worth noteing, head tags listed in the head attribute of property of the config.js file are appearing in the head correctly.

[nerdoza]

This appears to be the culprit for the issue with vuepress build:

vuepress/lib/build.js

Lines 72 to 75 in 272df57

	// if the user does not have a custom 404.md, generate the theme's default
	if (!options.siteData.pages.some(p => p.path === '/404.html')) {
	await renderPage({ path: '/404.html' })
	}

vuepress/lib/build.js

Lines 133 to 171 in 272df57

	async function renderPage (page) {
	const pagePath = page.path
	readline.clearLine(process.stdout, 0)
	readline.cursorTo(process.stdout, 0)
	process.stdout.write(`Rendering page: ${pagePath}`)
	const pageMeta = renderPageMeta(page.frontmatter && page.frontmatter.meta)
	const context = {
	url: pagePath,
	userHeadTags,
	pageMeta,
	title: 'VuePress',
	lang: 'en',
	description: ''
	}
	let html
	try {
	html = await renderer.renderToString(context)
	} catch (e) {
	console.error(chalk.red(`Error rendering ${pagePath}:`))
	throw e
	}
	const filename = pagePath.replace(/\/$/, '/index.html').replace(/^\//, '')
	const filePath = path.resolve(outDir, filename)
	await fs.ensureDir(path.dirname(filePath))
	await fs.writeFile(filePath, html)
	}
	function renderPageMeta (meta) {
	if (!meta) return ''
	return meta.map(m => {
	let res = `<meta`
	Object.keys(m).forEach(key => {
	res += ` ${key}="${escape(m[key])}"`
	})
	return res + `>`
	}).join('')
	}

I'm still not certain how to resolve this for vuepress dev though, as it passes the NotFound component as a route just like the other pages, and they render fine. I think it might have been resolved with #277?

[hmatalonga]

I also believe this is related too.

vuepress/lib/build.js

Line 18 in 272df57

const options = await prepare(sourceDir)

Since the sourceDir is passed to prepare.js the existing pages will make use of inferTitle(frontmatter) to generate the title, I am guessing. So because the 404 default page is added afterwards, that is not applied on that page, therefore the defaults title and description will be used without inferring the proper title...

vuepress/lib/prepare.js

Lines 202 to 217 in 272df57

	// extract yaml frontmatter
	const content = await fs.readFile(filepath, 'utf-8')
	const frontmatter = parseFrontmatter(content)
	// infer title
	const title = inferTitle(frontmatter)
	if (title) {
	data.title = title
	}
	const headers = extractHeaders(
	frontmatter.content,
	['h2', 'h3'],
	markdown
	)
	if (headers.length) {
	data.headers = headers
	}

Maybe this will help detecting the issue 😛

[meteorlxy]

#349
Title and desc is set in Layout.vue now.

[hmatalonga]

@meteorlxy

I just saw the other issues related to this. I hadn't seen your PR #314 yet, will it be merged? that could probably solve all theses cases. Or you are waiting until the Plugin API is published?

[meteorlxy]

@hmatalonga I think #314 could be merged at current stage, as it can solve some problems somehow when the plugin API has not published.

What do you think about that @ulivz

[hmatalonga]

@meteorlxy

I was wondering also if there will be a minor release before the plugin API? Since latest merged PRs introduced new things to the docs...

[meteorlxy]

@hmatalonga

Evan is busy these days and doesn't have time to look at this project. We have no auth to release a new version of npm package now.

[meteorlxy]

@hmatalonga I create another PR #376 for this.

[meteorlxy]

@bayssmekanique

As for the (vuepress dev), it has been fixed by #388

As for the (vuepress build), still need some discussion. An easiest (but a little stupid) way is copying the created() snippet of Layout.vue to NotFound.vue 😅

[nerdoza]

@meteorlxy, I wish I was of more help but I'm still not certain what effect #389 is going to have on this until it's all merged together. From what I see the created() snippet is moving from Layout.vue to ThemeWrapper.vue, so my whole understanding of the flow is muddy.

[meteorlxy]

@bayssmekanique It will solve all the related problem indeed, but there may have some alt solutions.

One possible solution is adding those code here:

vuepress/lib/app/app.js

Lines 82 to 91 in f61bfdd

	const app = new Vue(
	Object.assign(options, {
	router,
	render (h) {
	return h('div', { attrs: { id: 'app' }}, [
	h('router-view', { ref: 'layout' })
	])
	}
	})
	)

I'll try to implement it later 🤣

[ulivz]

fixed at fcaee80, and It will be released in 0.9.0