blog-engine-sac
Advanced tools
Comparing version
@@ -23,6 +23,4 @@ import styles from "./styles.html.js"; | ||
<body> | ||
${header({ ...options, topLevel: true })} | ||
${header({ topLevel: true })} | ||
<!-- Page Header --> | ||
<header class="masthead" style="background-image: url('images/about-bg.jpg')"> | ||
@@ -29,0 +27,0 @@ <div class="overlay"></div> |
@@ -43,5 +43,4 @@ import styles from "./styles.html.js"; | ||
<body> | ||
${header({ topLevel: false })} | ||
${header({ ...options, topLevel: false })} | ||
<!-- Page Header --> | ||
@@ -48,0 +47,0 @@ <header class="masthead" style="background-image: url('../images/home-bg.jpg')"> |
@@ -23,4 +23,3 @@ import styles from "./styles.html.js"; | ||
<body> | ||
${header({ topLevel: true })} | ||
${header({ ...options, topLevel: true })} | ||
<!-- Page Header --> | ||
@@ -27,0 +26,0 @@ <header class="masthead" style="background-image: url('images/contact-bg.jpg')"> |
export default function (options) { | ||
//const {z} = options; | ||
const {searchCode, topLevel} = options; | ||
let prePath; | ||
if (options.topLevel) { | ||
if (topLevel) { | ||
prePath = `.`; | ||
@@ -11,3 +11,2 @@ } else { | ||
return ` | ||
<nav id="nav"> | ||
@@ -24,2 +23,8 @@ <ul class="navbar-nav ml-auto"> | ||
</li> | ||
<script type="module">${searchCode}</script> | ||
<li class="nav-item" id="searchBlock" hidden> | ||
<input id="searchInput" placeholder="Search"> | ||
<ol id="searchResults"></ol> | ||
</li> | ||
</ul> | ||
@@ -26,0 +31,0 @@ </nav>`; |
@@ -6,3 +6,3 @@ import styles from "./styles.html.js"; | ||
export default function (options) { | ||
const { body, title, author, description, posts, searchCode } = options; | ||
const { body, title, author, description, posts } = options; | ||
const MAX_ARTICLE_PREVIEW = Number.MAX_SAFE_INTEGER || 3; | ||
@@ -44,5 +44,3 @@ // can make this number smaller once a ui element has been created to display all entries | ||
<html lang="en"> | ||
<head> | ||
<meta charset="utf-8"> | ||
@@ -53,3 +51,2 @@ <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> | ||
<title>Blog</title> | ||
<script type="module">${searchCode}</script> | ||
${styles(options)} | ||
@@ -59,4 +56,3 @@ </head> | ||
<body> | ||
${header({ topLevel: true })} | ||
${header({ ...options, topLevel: true })} | ||
<header class="masthead" style="background-image: url('images/home-bg.jpg')"> | ||
@@ -69,4 +65,2 @@ <div class="overlay"></div> | ||
<h1>Blog</h1> | ||
<input id="searchInput"> | ||
<div id="searchResults"></div> | ||
<span class="subheading">Sub Heading Text</span> | ||
@@ -73,0 +67,0 @@ </div> |
@@ -29,3 +29,3 @@ import styles from "./styles.html.js"; | ||
<body> | ||
${header({ topLevel: false })} | ||
${header({ ...options, topLevel: false })} | ||
<header class="masthead" style="background-image: url('../images/post-bg.jpg')"> | ||
@@ -32,0 +32,0 @@ <div class="overlay"></div> |
@@ -15,2 +15,6 @@ export { searchCodeTemplate }; | ||
const searchResults = document.getElementById("searchResults"); | ||
const searchInput = document.getElementById("searchInput"); | ||
const searchBlock = document.getElementById("searchBlock"); | ||
searchBlock.hidden = false; | ||
@@ -27,4 +31,2 @@ const articles = ${JSON.stringify(tagsAndUrls, null, 2)}; | ||
}); | ||
const searchResults = document.getElementById("searchResults"); | ||
const searchInput = document.getElementById("searchInput"); | ||
@@ -34,12 +36,19 @@ const takeRef = (object) => { | ||
}; | ||
console.log(searchInput); | ||
searchInput.addEventListener("input", (event) => { | ||
const search = searchInput.value; | ||
if (search === "") { | ||
searchResults.innerHTML = ""; | ||
return; | ||
} | ||
const results = index.search(event.target.value).map(takeRef); | ||
results.length = 10; // do not display more | ||
const elements = results.map(url => { | ||
const li = document.createElement("li"); | ||
const a = document.createElement("a"); | ||
a.textContent = url; | ||
a.href = url; | ||
return a | ||
li.appendChild(a); | ||
return li; | ||
}); | ||
@@ -52,8 +61,7 @@ elements.reverse(); | ||
documentFragment.appendChild(element); | ||
}) | ||
}); | ||
searchResults.innerHTML = ""; | ||
searchResults.append(documentFragment); | ||
}) | ||
}); | ||
` | ||
@@ -60,0 +68,0 @@ }; |
{ | ||
"name": "blog-engine-sac", | ||
"version": "1.0.2", | ||
"version": "1.0.4", | ||
"type": "module", | ||
@@ -5,0 +5,0 @@ "dependencies": { |
@@ -9,6 +9,7 @@ # Blog | ||
1. Download NodeJS. | ||
1. [Download NodeJS.](https://nodejs.org/en/) | ||
2. Create a new project | ||
3. Create a valid package.json file with `npm init` for example | ||
4. [npm i blog-engine-sac](https://www.npmjs.com/package/blog-engine-sac), add script "build": "blog-engine-sac" | ||
4. [npm i blog-engine-sac --ignore-scripts](https://www.npmjs.com/package/blog-engine-sac) | ||
5. add script "sac": "blog-engine-sac" or "node --experimental-modules node_modules/blog-engine-sac/source/buildPosts.js" if installed locally | ||
5. follow instructions below to create required files | ||
@@ -61,8 +62,2 @@ 6. npm run build | ||
### How to rebuild | ||
Required once: [Install nodejs](https://nodejs.org/en/), open the command line, go to this folder with `cd` followed by 1 space followed by the full path where this project is stored. Type `npm install`. | ||
Go to this folder with the command line (see above). Type `npm run build` | ||
## About the code | ||
@@ -69,0 +64,0 @@ |
Sorry, the diff of this file is not supported yet
2142
1.09%98559
-0.41%87
-5.43%