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.
- package/blazed-past-us-0.4.5.tgz +0 -0
- package/dist/engine/utils.d.ts +9 -4
- package/dist/engine/utils.js +14 -7
- package/dist/template/index.html +5 -3
- package/dist/template/src/config.json +0 -4
- package/dist/template/src/main.js +2 -2
- package/dist/template/src/router.js +15 -25
- package/dist/template/src/styles/header.css +17 -10
- package/package.json +1 -1
|
Binary file
|
package/dist/engine/utils.d.ts
CHANGED
|
@@ -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
|
|
8
|
-
declare function setTitle(document: HTMLDocument,
|
|
9
|
-
declare function
|
|
10
|
-
|
|
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, };
|
package/dist/engine/utils.js
CHANGED
|
@@ -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
|
|
40
|
-
const el = document.
|
|
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,
|
|
46
|
-
const el = document.
|
|
45
|
+
function setTitle(document, packageName) {
|
|
46
|
+
const el = document.querySelector('.title');
|
|
47
47
|
if (el) {
|
|
48
|
-
el.
|
|
48
|
+
el.innerHTML = packageName.replaceAll('-', ' ');
|
|
49
49
|
}
|
|
50
50
|
}
|
|
51
|
-
function
|
|
51
|
+
function filterByUrlQueryIfPresent(postsMetaData, tags) {
|
|
52
52
|
return postsMetaData.filter((post) => tags ? tags.some((tag) => post.tags.includes(tag)) : true);
|
|
53
53
|
}
|
|
54
|
-
|
|
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, };
|
package/dist/template/index.html
CHANGED
|
@@ -8,15 +8,17 @@
|
|
|
8
8
|
</head>
|
|
9
9
|
<body>
|
|
10
10
|
<header>
|
|
11
|
-
<div class="logo"
|
|
12
|
-
<div class="wrapper" id="
|
|
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
|
|
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,
|
|
19
|
-
blazed.boltRotator(document
|
|
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,
|
|
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
|
-
|
|
8
|
-
|
|
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
|
-
|
|
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
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
15
|
+
switch (true) {
|
|
16
|
+
case pathname === '' || pathname === 'home' || queryString:
|
|
17
|
+
render('home', root, views, postsMetaData, urlParams.get('tags'));
|
|
18
|
+
break;
|
|
30
19
|
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
}
|
|
20
|
+
case postExists(postsMetaData, pathname):
|
|
21
|
+
render('post', root, views, postsMetaData, undefined, pathname);
|
|
22
|
+
break;
|
|
35
23
|
|
|
36
|
-
|
|
24
|
+
default:
|
|
25
|
+
render('404', root, views, postsMetaData);
|
|
26
|
+
}
|
|
37
27
|
}
|
|
@@ -1,26 +1,33 @@
|
|
|
1
1
|
header {
|
|
2
2
|
display: flex;
|
|
3
|
-
|
|
4
|
-
margin: 4.5rem 0 3.5rem
|
|
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
|
-
|
|
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 #
|
|
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