Merge pull request #1 from juliancwirko/relative-paths

relative paths and more configuration in harold-scripts
harold-js · Jun 5, 2021 · 93ae2f2 · 93ae2f2
2 parents 40be80e + bd71b98
commit 93ae2f2
Show file tree

Hide file tree

Showing 13 changed files with 77 additions and 31 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,10 @@
+### [0.4.0](https://github.com/juliancwirko/create-harold-app/releases/tag/v0.4.0) (2021-06-04)
+
+- support for relative paths, now you can host it in subdirectory
+- added `relativePath` and `hostDirName` handlebars helpers
+- new configuration in `.haroldrc` if needed (outputDirName, hostDirName)
+- new documentation articles and updates
+
 ### [0.3.3](https://github.com/juliancwirko/create-harold-app/releases/tag/v0.3.3) (2021-05-31)
 
 - added missing og meta tags

diff --git a/README.md b/README.md
@@ -58,14 +58,18 @@ Harold will search up the directory tree for configuration in the following plac
 - a `.haroldrc.json`, `.haroldrc.yaml`, `.haroldrc.yml`, `.haroldrc.js`, or `.haroldrc.cjs` file
 - a `harold.config.js` or `harold.config.cjs` CommonJS module exporting an object
 
-For now, there isn't much to configure, but you can configure the directory for md files (by default `posts`) and the directory for md files layouts (by default `blog-layouts`). Quite helpful because these names are also used in urls. For example, by default, `/posts/name-of-the-post` (name of the .md file), but you might want to build the docs website and have `/docs/name-of-the-doc` (name of the .md file).
+You can configure the directory for md files (by default `posts`) and the directory for md files layouts (by default `blog-layouts`). Quite helpful because these names are also used in urls. For example, by default, `/posts/name-of-the-post` (name of the .md file), but you might want to build the docs website and have `/docs/name-of-the-doc` (name of the .md file).
+
+You can also configure the name for output directory using `outputDirName` and if you want to host your site in subdirectory you would also need to add `hostDirName`.
 
 Example of `.haroldrc` (placed in the root of your harold app):
 
 ```
 {
   mdFilesDirName: 'docs',
-  mdFilesLayoutsDirName: 'docs-layouts'
+  mdFilesLayoutsDirName: 'docs-layouts',
+  outputDirName: 'dist',
+  hostDirName: 'subfolder-name'
 }
 ```
 
@@ -142,6 +146,29 @@ You can use the `postsList` with `byTagName`, which you should set up the same a
 }}
 ```
 
+#### Github Pages
+
+If you want to host Harold's website under your main username (username.github.io), you would need to rename your output directory to supported by Github. It is the `docs` directory. You would need to create a `.haroldrc` file and put the output directory name there.
+
+```bash
+{
+  outputDirName: 'docs',
+}
+```
+
+Build your Harold app and push it to the repo. Remember to add the `.gitignore` file, and exclude `node_modules` but keep the output directory (`docs`).
+
+Configure  your Github Pages to take the source from the `docs` directory.
+
+If you want to host Harold's website under the repository subdirectory name (username.github.io/my-blog), you need to add `hostDirName` and remember to keep your paths in order. You can use the `relativePath` handlebars helper. The default template (from v0.4.0) is already using it, so it should work as-is.
+
+```bash
+{
+  outputDirName: 'docs',
+  hostDirName: 'my-blog'
+}
+```
+
 ### Why another one?
 
 I wanted to have a simple static site generator to build and host on Netlify. There are many such solutions, but I wanted to have complete control.
@@ -157,14 +184,20 @@ What is essential, I equipped it with two templates that you can use and modify
 
 ### When not to use it
 
-- when you want to build something significant (not tested with big projects, tested with over 120 markdown files, works quite fast)
-- when you don't want to use Scss (you can still write standard CSS in .scss files)
-- when you want to rely on something which has its community
+- when you want to build bigger projects (not tested with big projects, tested with over 120 markdown files, works quite fast)
+- when you don't want to use Scss (you can still write standard CSS in .scss files) or Handlebars
+- when you want to rely on something which has big community
 
 ### License
 
 MIT
 
+### Harold is built upon these excellent tools:
+
+- [unified](https://unifiedjs.com/)
+- [Handlebars](https://handlebarsjs.com/)
+- [Sass](https://sass-lang.com/)
+
 ### Contact
 
 julian.io
diff --git a/bin/packagejson.template b/bin/packagejson.template
@@ -8,6 +8,6 @@
     "start": "harold-scripts start"
   },
   "devDependencies": {
-    "harold-scripts": "^0.3.3"
+    "harold-scripts": "^0.4.0"
   }
 }
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "create-harold-app",
-  "version": "0.3.3",
+  "version": "0.4.0",
   "description": "Static blog/site generator",
   "author": "Julian Ćwirko (julian.io)",
   "license": "MIT",

diff --git a/templates/bare/pages/index.hbs b/templates/bare/pages/index.hbs
@@ -8,8 +8,8 @@
   dateFormat='dd mmmm yyyy'
   }}
   <div class="home-see-all-posts">
-    <a href="/all-posts-list" class="button">See all posts</a>
+    <a href="{{relativePath 'all-posts-list.html'}}" class="button">See all posts</a>
   </div>
 </div>
 
-{{> footer}}
+{{> footer}}
diff --git a/templates/bare/partials/head.hbs b/templates/bare/partials/head.hbs
@@ -1,27 +1,27 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" data-hrld-root="{{hostDirName}}">
 
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <link rel="icon" href="/assets/images/favicon.png" type="image/png" />
+  <link rel="icon" href="{{relativePath 'assets/images/favicon.png'}}" type="image/png" />
   <title>{{title}}</title>
   <meta name="description" content="{{description}}">
   <link rel="preconnect" href="https://fonts.gstatic.com">
   <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@100;300;400;600;900&display=swap" rel="stylesheet">
-  <link rel="stylesheet" href="/styles/main.css">
+  <link rel="stylesheet" href="{{relativePath 'styles/main.css'}}">
 </head>
 
 <body>
   <header class="main-header">
     <div class="container">
       <div class="main-header-container">
         <div class="main-logo">
-          <div class="main-logo-dot"></div><a href="/">Harold</a>
+          <div class="main-logo-dot"></div><a href="{{relativePath 'index.html'}}">Harold</a>
         </div>
         <nav class="main-menu">
           <ul class="main-menu-list">
-            <li class="main-menu-list-item"><a href="/about">About</a></li>
+            <li class="main-menu-list-item"><a href="{{relativePath 'about.html'}}">About</a></li>
           </ul>
         </nav>
       </div>

diff --git a/templates/default/assets/js/harold-search.js b/templates/default/assets/js/harold-search.js
@@ -1,6 +1,9 @@
 (function () {
   // Trigger search overlay events and logic
-  const postsPath = '/posts/';
+  const rootDir = document.querySelector('html').dataset.hrldRoot;
+  const postsPath =
+    (rootDir && window.location.href.includes(rootDir) ? '/' + rootDir : '') +
+    '/posts/';
   const searchIcon = document.querySelector('[data-js-search]');
   const searchIconClose = document.querySelector('[data-js-search-close]');
   const searchOverlay = document.querySelector('[data-js-search-overlay]');

diff --git a/templates/default/assets/js/harold.js b/templates/default/assets/js/harold.js
@@ -1,7 +1,10 @@
 const harold = (function () {
   let searchIndex;
   let postsJSON;
-  const postsJsonDataPath = '/jsonData/posts.json';
+  const rootDir = document.querySelector('html').dataset.hrldRoot;
+  const postsJsonDataPath =
+    (rootDir && window.location.href.includes(rootDir) ? '/' + rootDir : '') +
+    '/jsonData/posts.json';
 
   // Loads data for search index
   const fetchPostsJsonData = () => {

diff --git a/templates/default/pages/index.hbs b/templates/default/pages/index.hbs
@@ -52,7 +52,7 @@
   </div>
 
   <div class="container home-see-all-posts">
-    <a href="/all-posts-list" class="button">See all posts</a>
+    <a href="{{relativePath 'all-posts-list.html'}}" class="button">See all posts</a>
   </div>
 
-{{> footer}}
+{{> footer}}
diff --git a/templates/default/partials/footer.hbs b/templates/default/partials/footer.hbs
@@ -9,10 +9,10 @@
   <script src="//unpkg.com/@highlightjs/[email protected]/highlight.min.js"></script>
   <script>hljs.highlightAll();</script>
   <script src="https://unpkg.com/lunr/lunr.js"></script>
-  <script src="/assets/js/harold.js"></script>
-  <script src="/assets/js/harold-search.js"></script>
-  <script src="/assets/js/harold-main-menu.js"></script>
-  <script src="/assets/js/harold-scroll-top.js"></script>
+  <script src="{{relativePath 'assets/js/harold.js'}}"></script>
+  <script src="{{relativePath 'assets/js/harold-search.js'}}"></script>
+  <script src="{{relativePath 'assets/js/harold-main-menu.js'}}"></script>
+  <script src="{{relativePath 'assets/js/harold-scroll-top.js'}}"></script>
 </body>
 
 </html>
diff --git a/templates/default/partials/head.hbs b/templates/default/partials/head.hbs
@@ -1,10 +1,10 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" data-hrld-root="{{hostDirName}}">
 
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <link rel="icon" href="/assets/images/favicon.png" type="image/png" />
+  <link rel="icon" href="{{relativePath 'assets/images/favicon.png'}}" type="image/png" />
   <title>{{title}}</title>
   <meta name="description" content="{{description}}">
 
@@ -24,15 +24,15 @@
       href="https://unpkg.com/@highlightjs/[email protected]/styles/atom-one-dark.min.css">
   <link rel="preconnect" href="https://fonts.gstatic.com">
   <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@100;300;400;600;900&display=swap" rel="stylesheet">
-  <link rel="stylesheet" href="/styles/main.css">
+  <link rel="stylesheet" href="{{relativePath 'styles/main.css'}}">
 </head>
 
 <body>
   <header class="main-header">
     <div class="container">
       <div class="main-header-container">
         <div class="main-logo">
-          <div class="main-logo-dot"></div><a href="/">Harold</a>
+          <div class="main-logo-dot"></div><a href="{{relativePath 'index.html'}}">Harold</a>
         </div>
         <nav class="main-menu">
           <div class="main-menu-list">

diff --git a/templates/default/partials/main-menu-overlay.hbs b/templates/default/partials/main-menu-overlay.hbs
@@ -4,13 +4,13 @@
     <div>
       <ul class="main-menu-overlay-list">
         <li class="main-menu-overlay-list-item">
-          <a href="/about">About</a>
+          <a href="{{relativePath 'about.html'}}">About</a>
         </li>
         <li class="main-menu-overlay-list-item">
-          <a href="/author">Author</a>
+          <a href="{{relativePath 'author.html'}}">Author</a>
         </li>
         <li class="main-menu-overlay-list-item">
-          <a href="/projects">Projects</a>
+          <a href="{{relativePath 'projects.html'}}">Projects</a>
         </li>
       </ul>
       <div class="main-menu-overlay-social-separator"></div>
@@ -21,4 +21,4 @@
       </div>
     </div>
   </div>
-</div>
+</div>