blazed-past-us 0.4.2 → 0.4.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Binary file
@@ -4,7 +4,12 @@ declare function getPathnameFromLocationHash(locationHash: string): string;
4
4
  declare function beautifyDate(d: Date | undefined): undefined | string;
5
5
  declare function inject(root: HTMLElement, html: string): void;
6
6
  declare function log(msg: string, color: MsgColor): void;
7
- declare function boltRotator(document: HTMLDocument, elementID: string): void;
8
- declare function setTitle(document: HTMLDocument, elementID: string, packageName: string): void;
9
- declare function filterByUrlQueryIsPresent(postsMetaData: PostMetaData[], tags: string[]): PostMetaData[];
10
- export { postExists, beautifyDate, inject, log, boltRotator, setTitle, getPathnameFromLocationHash, filterByUrlQueryIsPresent, };
7
+ declare function boltRotator(document: HTMLDocument): void;
8
+ declare function setTitle(document: HTMLDocument, packageName: string): void;
9
+ declare function filterByUrlQueryIfPresent(postsMetaData: PostMetaData[], tags: string[]): PostMetaData[];
10
+ declare function getLocationHashSpecifics(window: Window): {
11
+ pathname: string;
12
+ queryString: string;
13
+ urlParams: URLSearchParams;
14
+ };
15
+ export { postExists, beautifyDate, inject, log, boltRotator, setTitle, getPathnameFromLocationHash, filterByUrlQueryIfPresent, getLocationHashSpecifics, };
@@ -36,19 +36,26 @@ function log(msg, color) {
36
36
  }
37
37
  console.log(`${chalk.blue(pkg.name + ' v' + pkg.version)} ${coloredMsg}`);
38
38
  }
39
- function boltRotator(document, elementID) {
40
- const el = document.getElementById(elementID);
39
+ function boltRotator(document) {
40
+ const el = document.querySelector('.logo');
41
41
  if (el) {
42
42
  el.classList.add('rotate');
43
43
  }
44
44
  }
45
- function setTitle(document, elementID, packageName) {
46
- const el = document.getElementById(elementID);
45
+ function setTitle(document, packageName) {
46
+ const el = document.querySelector('.title');
47
47
  if (el) {
48
- el.innerText = packageName.replaceAll('-', ' ');
48
+ el.innerHTML = packageName.replaceAll('-', ' ');
49
49
  }
50
50
  }
51
- function filterByUrlQueryIsPresent(postsMetaData, tags) {
51
+ function filterByUrlQueryIfPresent(postsMetaData, tags) {
52
52
  return postsMetaData.filter((post) => tags ? tags.some((tag) => post.tags.includes(tag)) : true);
53
53
  }
54
- export { postExists, beautifyDate, inject, log, boltRotator, setTitle, getPathnameFromLocationHash, filterByUrlQueryIsPresent, };
54
+ function getLocationHashSpecifics(window) {
55
+ const hashRoute = window.location.hash;
56
+ const pathname = getPathnameFromLocationHash(hashRoute);
57
+ const queryString = hashRoute.split('?')[1] || '';
58
+ const urlParams = new URLSearchParams(queryString);
59
+ return { pathname, queryString, urlParams };
60
+ }
61
+ export { postExists, beautifyDate, inject, log, boltRotator, setTitle, getPathnameFromLocationHash, filterByUrlQueryIfPresent, getLocationHashSpecifics, };
@@ -8,15 +8,17 @@
8
8
  </head>
9
9
  <body>
10
10
  <header>
11
- <div class="logo" id="logo">
12
- <div class="wrapper" id="logo-wrapper">
11
+ <div class="logo">
12
+ <div class="bolt-wrapper" id="bolt">
13
13
  <div class="top"></div>
14
14
  <div class="bottom"></div>
15
15
  </div>
16
16
  </div>
17
17
  <div>
18
18
  <div class="top">
19
- <a id="title" class="title" href="#/"></a>
19
+ <a class="title" href="#/"></a>
20
+ <!-- Feel free to change or remove the subtitle -->
21
+ <div class="subtitle">let the cosmos bear witness</div>
20
22
  </div>
21
23
  </div>
22
24
  </header>
@@ -1,11 +1,7 @@
1
1
  {
2
2
  "base_url": "/blog/",
3
3
  "posts_data_path": "posts/data.json",
4
- "title_id": "title",
5
4
  "root_id": "root",
6
- "header_id": "header",
7
- "speed_element_id": "speed",
8
- "logo_id": "logo",
9
5
  "tags": {
10
6
  "javascript": { "color": "#f5dd42" },
11
7
  "typescript": { "color": "#42adf5" },
@@ -15,8 +15,8 @@ initRouter(root, postsMetaData);
15
15
  * These are demo features included in the starter template.
16
16
  * You can safely remove any of them.
17
17
  */
18
- blazed.setTitle(document, config.title_id, pkg.name);
19
- blazed.boltRotator(document, config.logo_id);
18
+ blazed.setTitle(document, pkg.name);
19
+ blazed.boltRotator(document);
20
20
 
21
21
  const postsHTML = await blazed.getAllPostsHTML(postsMetaData, import.meta.env.BASE_URL);
22
22
 
@@ -1,37 +1,27 @@
1
- import { render, postExists, getPathnameFromLocationHash } from 'blazed-past-us';
1
+ import { render, postExists, getLocationHashSpecifics } from 'blazed-past-us';
2
2
  import home from './views/home';
3
3
  import post from './views/post';
4
4
  import notFound from './views/notFound';
5
5
 
6
6
  export default function initRouter(root, postsMetaData) {
7
- // Render current route immediately.
8
- handleRoute(root, postsMetaData);
9
-
10
- window.addEventListener('hashchange', () => handleRoute(root, postsMetaData));
7
+ routeRenderer(root, postsMetaData);
8
+ window.addEventListener('hashchange', () => routeRenderer(root, postsMetaData));
11
9
  }
12
10
 
13
- /**
14
- * GitHub Pages is a static file server. It does not understand client-side routing.
15
- * Everything after # stays client-side.
16
- *
17
- * This is the reason why we use hash routing.
18
- */
19
- async function handleRoute(root, postsMetaData) {
20
- const hashRoute = window.location.hash;
21
- const pathname = getPathnameFromLocationHash(hashRoute);
22
- const queryString = hashRoute.split('?')[1] || '';
23
- const urlParams = new URLSearchParams(queryString);
11
+ function routeRenderer(root, postsMetaData) {
12
+ const { pathname, queryString, urlParams } = getLocationHashSpecifics(window);
24
13
  const views = { home, post, notFound };
25
14
 
26
- if (pathname === '' || pathname === 'home' || queryString) {
27
- render('home', root, views, postsMetaData, urlParams.get('tags'));
28
- return;
29
- }
15
+ switch (true) {
16
+ case pathname === '' || pathname === 'home' || queryString:
17
+ render('home', root, views, postsMetaData, urlParams.get('tags'));
18
+ break;
30
19
 
31
- if (postExists(postsMetaData, pathname)) {
32
- render('post', root, views, postsMetaData, undefined, pathname);
33
- return;
34
- }
20
+ case postExists(postsMetaData, pathname):
21
+ render('post', root, views, postsMetaData, undefined, pathname);
22
+ break;
35
23
 
36
- render('404', root, views, postsMetaData);
24
+ default:
25
+ render('404', root, views, postsMetaData);
26
+ }
37
27
  }
@@ -1,26 +1,33 @@
1
1
  header {
2
2
  display: flex;
3
- justify-content: left;
4
- margin: 4.5rem 0 3.5rem 0;
5
- padding: 0 0 0 1rem;
6
- align-items: center;
3
+ flex-direction: row;
4
+ margin: 4.5rem 0 3.5rem 1rem;
7
5
  }
8
6
 
9
7
  header .top {
10
- justify-content: left;
11
8
  display: flex;
9
+ flex-direction: column;
12
10
  }
13
11
 
14
12
  header .top .title {
15
13
  font-family: 'Bangers Regular';
16
14
  font-size: 3.1rem;
17
15
  color: var(--light-blue-09);
16
+ letter-spacing: 0.15rem;
17
+ }
18
+
19
+ header .top .subtitle {
20
+ font-size: 0.85rem;
21
+ font-family: 'Inter Extra Bold';
22
+ color: var(--light-yellow);
18
23
  text-transform: uppercase;
19
24
  letter-spacing: 0.15rem;
20
- display: inline-block;
25
+ opacity: 1;
26
+ animation: flicker 4s infinite;
21
27
  }
22
28
 
23
29
  header .logo {
30
+ border: 1px solid white;
24
31
  height: 6.25rem;
25
32
  border: 0.25rem solid var(--light-blue-09);
26
33
  border-radius: 50%;
@@ -35,18 +42,18 @@ header .logo {
35
42
  transform-origin: center center;
36
43
  }
37
44
 
38
- .logo #logo-wrapper {
45
+ .logo #bolt {
39
46
  animation: flicker 5s infinite;
40
47
  }
41
48
 
42
- .logo .wrapper {
49
+ .logo .bolt-wrapper {
43
50
  min-width: 3.75rem;
44
51
  min-height: 3.75rem;
45
52
  filter: drop-shadow(0 0 0.2rem #00edfa6e) drop-shadow(0 0 0.345rem #00edfa6b)
46
53
  drop-shadow(0 0 0.4275rem #00edfa69) drop-shadow(0 0 0.55rem #00edfa70);
47
54
  }
48
55
 
49
- .logo .wrapper .top {
56
+ .logo .bolt-wrapper .top {
50
57
  position: absolute;
51
58
  transform-origin: center;
52
59
  top: 19%;
@@ -57,7 +64,7 @@ header .logo {
57
64
  border-bottom: 1.384375rem solid #ffff90;
58
65
  }
59
66
 
60
- .logo .wrapper .bottom {
67
+ .logo .bolt-wrapper .bottom {
61
68
  position: absolute;
62
69
  transform-origin: center;
63
70
  top: 46%;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "blazed-past-us",
3
- "version": "0.4.2",
3
+ "version": "0.4.5",
4
4
  "description": "A static blog framework made for developers that allows content to be written in Markdown directly from the IDE.",
5
5
  "license": "MIT",
6
6
  "author": "gass-git",