Fix URLs fully with relative path helper

This commit is contained in:
Justin Fagnani
2019-12-20 13:36:46 -08:00
committed by Justin Fagnani
parent 817f502dfa
commit 5ced993566
9 changed files with 55 additions and 41 deletions

View File

@@ -1,4 +1,5 @@
const page = require('./page.11ty.cjs');
const relative = require('./relative-path.cjs');
/**
* This template extends the page template and adds an examples list.
@@ -21,7 +22,7 @@ const renderExample = ({name, content, collections, page}) => {
? ''
: collections.example.map((post) => `
<li class=${post.url === page.url ? 'selected' : ''}>
<a href="${post.url}">${ post.data.description.replace('<', '&lt;') }</a>
<a href="${relative(page.url, post.url)}">${post.data.description.replace('<', '&lt;')}</a>
</li>
`).join('')}
</ul>

View File

@@ -1,9 +1,11 @@
module.exports = function(data) {
const relative = require('./relative-path.cjs');
module.exports = function({page}) {
return `
<nav>
<a href="../">Home</a>
<a href="../examples/">Examples</a>
<a href="../api/">API</a>
<a href="../install/">Install</a>
<a href="${relative(page.url, '/')}">Home</a>
<a href="${relative(page.url, '/examples/')}">Examples</a>
<a href="${relative(page.url, '/api/')}">API</a>
<a href="${relative(page.url, '/install/')}">Install</a>
</nav>`;
};

View File

@@ -1,8 +1,10 @@
const header = require('./header.11ty.cjs');
const footer = require('./footer.11ty.cjs');
const nav = require('./nav.11ty.cjs');
const relative = require('./relative-path.cjs');
module.exports = function(data) {
const {title, page, content} = data;
return `
<!doctype html>
@@ -10,18 +12,18 @@ module.exports = function(data) {
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>${data.title}</title>
<link rel="stylesheet" href="./docs.css">
<title>${title}</title>
<link rel="stylesheet" href="${relative(page.url, '/docs.css')}">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600|Roboto+Mono">
<link href="./prism-okaidia.css" rel="stylesheet" />
<script type="module" src="./my-element.bundled.js"></script>
<link href="${relative(page.url, '/prism-okaidia.css')}" rel="stylesheet" />
<script type="module" src="${relative(page.url, '/my-element.bundled.js')}"></script>
</head>
<body>
${header()}
${nav(data)}
<div id="main-wrapper">
<main>
${data.content}
${content}
</main>
</div>
${footer()}

View File

@@ -0,0 +1,9 @@
const path = require('path').posix;
module.exports = (base, p) => {
const relativePath = path.relative(base, p);
if (p.endsWith('/') && !relativePath.endsWith('/') && relativePath !== '') {
return relativePath + '/';
}
return relativePath;
};