dikshya/exploRUGComponent
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix URLs fully with relative path helper

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

3
docs-src/_includes/example.11ty.cjs
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>

12
docs-src/_includes/nav.11ty.cjs
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>`;
};

12
docs-src/_includes/page.11ty.cjs
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()}

9
docs-src/_includes/relative-path.cjs Normal file
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;
};

8
docs/api/index.html
View File

@@ -6,10 +6,10 @@
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title><my-element> ⌲ Docs</title>
<link rel="stylesheet" href="./docs.css">
<link rel="stylesheet" href="../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="../prism-okaidia.css" rel="stylesheet" />
<script type="module" src="../my-element.bundled.js"></script>
</head>
<body>
@@ -21,7 +21,7 @@
<nav>
<a href="../">Home</a>
<a href="../examples/">Examples</a>
<a href="../api/">API</a>
<a href="">API</a>
<a href="../install/">Install</a>
</nav>
<div id="main-wrapper">

12
docs/examples/index.html
View File

@@ -6,10 +6,10 @@
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title><my-element> ⌲ Examples ⌲ Basic</title>
<link rel="stylesheet" href="./docs.css">
<link rel="stylesheet" href="../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="../prism-okaidia.css" rel="stylesheet" />
<script type="module" src="../my-element.bundled.js"></script>
</head>
<body>
@@ -20,7 +20,7 @@
<nav>
<a href="../">Home</a>
<a href="../examples/">Examples</a>
<a href="">Examples</a>
<a href="../api/">API</a>
<a href="../install/">Install</a>
</nav>
@@ -33,11 +33,11 @@
<ul>
<li class=selected>
<a href="/examples/">A basic example</a>
<a href="">A basic example</a>
</li>
<li class=>
<a href="/examples/name-property/">Setting the name property</a>
<a href="name-property/">Setting the name property</a>
</li>
</ul>

18
docs/examples/name-property/index.html
View File

@@ -6,10 +6,10 @@
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title><my-element> ⌲ Examples ⌲ Name Property</title>
<link rel="stylesheet" href="./docs.css">
<link rel="stylesheet" href="../../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="../../prism-okaidia.css" rel="stylesheet" />
<script type="module" src="../../my-element.bundled.js"></script>
</head>
<body>
@@ -19,10 +19,10 @@
</header>
<nav>
<a href="../">Home</a>
<a href="../examples/">Examples</a>
<a href="../api/">API</a>
<a href="../install/">Install</a>
<a href="../../">Home</a>
<a href="../">Examples</a>
<a href="../../api/">API</a>
<a href="../../install/">Install</a>
</nav>
<div id="main-wrapper">
<main>
@@ -33,11 +33,11 @@
<ul>
<li class=>
<a href="/examples/">A basic example</a>
<a href="../">A basic example</a>
</li>
<li class=selected>
<a href="/examples/name-property/">Setting the name property</a>
<a href="">Setting the name property</a>
</li>
</ul>

14
docs/index.html
View File

@@ -6,10 +6,10 @@
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title><my-element> ⌲ Home</title>
<link rel="stylesheet" href="./docs.css">
<link rel="stylesheet" href="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="prism-okaidia.css" rel="stylesheet" />
<script type="module" src="my-element.bundled.js"></script>
</head>
<body>
@@ -19,10 +19,10 @@
</header>
<nav>
<a href="../">Home</a>
<a href="../examples/">Examples</a>
<a href="../api/">API</a>
<a href="../install/">Install</a>
<a href="">Home</a>
<a href="examples/">Examples</a>
<a href="api/">API</a>
<a href="install/">Install</a>
</nav>
<div id="main-wrapper">
<main>

8
docs/install/index.html
View File

@@ -6,10 +6,10 @@
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title><my-element> ⌲ Install</title>
<link rel="stylesheet" href="./docs.css">
<link rel="stylesheet" href="../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="../prism-okaidia.css" rel="stylesheet" />
<script type="module" src="../my-element.bundled.js"></script>
</head>
<body>
@@ -22,7 +22,7 @@
<a href="../">Home</a>
<a href="../examples/">Examples</a>
<a href="../api/">API</a>
<a href="../install/">Install</a>
<a href="">Install</a>
</nav>
<div id="main-wrapper">
<main>