Skip to content

Commit 15526a0

Browse files
prplwtfprplwtf
committed
feat: make smooth :3
1 parent e2e9775 commit 15526a0

File tree

6 files changed

+80
-54
lines changed

6 files changed

+80
-54
lines changed

‎configuration/Configuration.example.yml‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
Information:
22
Title: writea
3+
Icon: icon.png
34
Description: Writea is an open-source alternative for blogs, allowing for easy page configuration and ultimate flexibility.
45
Link: github.com/prplwtf/writea
56
Theme: Default

‎images/icon.png‎

9.54 KB
Loading

‎src/assets/style.css‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,4 +27,9 @@
2727
}
2828
[writea='read.header']:hover > [writea='read.header.thumbnail'] {
2929
height: 250px;
30+
}
31+
32+
[writea='read.content'] {
33+
transition: opacity .2s;
34+
opacity: 1;
3035
}

‎src/components/elements/NavigationBarElement.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@ function NavigationBarElement() {
2222
<div class="col me-auto">
2323
<a href="#" class="text-decoration-none">
2424
<h3 class="fw-bolder text-primary-emphasis text-truncate mb-0 mt-2">
25+
${window.Configuration.Information.Icon ? '<img src="./images/'+window.Configuration.Information.Icon+'" height="24px" class="mb-1 me-1" style="min-width: 24px"/>' : ''}
2526
${window.Configuration.Information.Title || "writea"}
2627
</h3>
2728
</a>

‎src/components/sections/BlogSection.js‎

Lines changed: 49 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -1,57 +1,59 @@
11
function BlogSection() {
22
let Posts = ""
3-
window.Blogs.forEach(Post => {
4-
if(!Post.Discoverable) return
3+
try {
4+
window.Blogs.forEach(Post => {
5+
if(!Post.Discoverable) return
56

6-
if (Post.Topic.length > 20) {
7-
Post.Topic = Post.Topic.substring(0,20)+".."
8-
}
7+
if (Post.Topic.length > 20) {
8+
Post.Topic = Post.Topic.substring(0,20)+".."
9+
}
910

10-
if (Post.Title.length > 65) {
11-
Post.Title = Post.Title.substring(0,65)+".."
12-
}
11+
if (Post.Title.length > 65) {
12+
Post.Title = Post.Title.substring(0,65)+".."
13+
}
1314

14-
if (Post.Description.length > 100) {
15-
Post.Description = Post.Description.substring(0,100)+".."
16-
}
15+
if (Post.Description.length > 100) {
16+
Post.Description = Post.Description.substring(0,100)+".."
17+
}
1718

18-
let PostThumbnail = ""
19-
if (Post.Thumbnail) {
20-
PostThumbnail = `
21-
<img src="./images/${Post.Thumbnail}" writea="post.entry.thumbnail" class="rounded-top-4 object-fit-cover" height="110px" width="100%"/>
22-
`
23-
}
19+
let PostThumbnail = ""
20+
if (Post.Thumbnail) {
21+
PostThumbnail = `
22+
<img src="./images/${Post.Thumbnail}" writea="post.entry.thumbnail" class="rounded-top-4 object-fit-cover" height="110px" width="100%"/>
23+
`
24+
}
2425

25-
Posts = `
26-
${Posts}
27-
28-
<div writea="post.entry" class="col-12 mb-4">
29-
<a href="#read/${Post.Content.replace('.md', '')}" class="text-decoration-none text-body">
30-
<div class="rounded-4 bg-dark-subtle position-relative" style="--mdc-ripple-hover-opacity: .02; --mdc-ripple-focus-opacity: .02; --mdc-ripple-press-opacity: .05;">
31-
${PostThumbnail}
32-
<div class="row d-flex p-4">
33-
<div class="col-10 me-auto">
34-
<span writea="post.entry.info" class="d-block text-primary-emphasis mb-1">
35-
${Post.Topic || "post"}
36-
<span class="text-dark"><i class="bi bi-dot"></i> ${Post.Content}</span>
37-
</span>
38-
<span writea="post.entry.title" class="h5 fw-bold">
39-
${Post.Title || "No title available"}
40-
</span>
41-
<span writea="post.entry.description" class="d-block">
42-
${Post.Description || "No description available"}
43-
</span>
44-
</div>
45-
<div class="col-auto my-auto">
46-
<button type="button" class="btn shadow-none text-primary-emphasis"><i class="bi bi-chevron-right"></i></button>
47-
</div>
48-
</div>
49-
<span class="ripple-surface"></span>
50-
</div>
51-
</a>
52-
</div>
53-
`
54-
});
26+
Posts = `
27+
${Posts}
28+
29+
<div writea="post.entry" class="col-12 mb-4">
30+
<a href="#read/${Post.Content.replace('.md', '')}" class="text-decoration-none text-body">
31+
<div class="rounded-4 bg-dark-subtle position-relative" style="--mdc-ripple-hover-opacity: .02; --mdc-ripple-focus-opacity: .02; --mdc-ripple-press-opacity: .05;">
32+
${PostThumbnail}
33+
<div class="row d-flex p-4">
34+
<div class="col-10 me-auto">
35+
<span writea="post.entry.info" class="d-block text-primary-emphasis mb-1">
36+
${Post.Topic || "post"}
37+
<span class="text-dark"><i class="bi bi-dot"></i> ${Post.Content}</span>
38+
</span>
39+
<span writea="post.entry.title" class="h5 fw-bold">
40+
${Post.Title || "No title available"}
41+
</span>
42+
<span writea="post.entry.description" class="d-block">
43+
${Post.Description || "No description available"}
44+
</span>
45+
</div>
46+
<div class="col-auto my-auto">
47+
<button type="button" class="btn shadow-none text-primary-emphasis"><i class="bi bi-chevron-right"></i></button>
48+
</div>
49+
</div>
50+
<span class="ripple-surface"></span>
51+
</div>
52+
</a>
53+
</div>
54+
`
55+
});
56+
} catch {}
5557
return `
5658
${NavigationBarElement()}
5759
<div class="row pt-2">

‎src/components/sections/ReadSection.js‎

Lines changed: 24 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -27,12 +27,18 @@ async function ReadSection() {
2727
return response.text()
2828
})
2929
.then(content => {
30-
content = PreRenderBlogFeatures(content)
31-
let MarkdownContainer = document.getElementById('MarkdownContainer')
32-
MarkdownContainer.innerHTML = marked.parse(content)
33-
hljs.highlightAll(document.getElementById('MarkdownContainer'))
34-
MarkdownContainer.innerHTML = PostRenderBlogFeatures(MarkdownContainer.innerHTML)
35-
ProgressBar(100)
30+
setTimeout(() => {
31+
document.querySelector('[writea="read.content"]').style.opacity = 0
32+
setTimeout(() => {
33+
content = PreRenderBlogFeatures(content)
34+
let MarkdownContainer = document.getElementById('MarkdownContainer')
35+
MarkdownContainer.innerHTML = marked.parse(content)
36+
hljs.highlightAll(document.getElementById('MarkdownContainer'))
37+
MarkdownContainer.innerHTML = PostRenderBlogFeatures(MarkdownContainer.innerHTML)
38+
document.querySelector('[writea="read.content"]').style.opacity = 1
39+
ProgressBar(100)
40+
}, 225)
41+
}, 200)
3642
})
3743
.catch(error => {
3844
console.error('Error fetching the Markdown content:', error)
@@ -59,7 +65,18 @@ async function ReadSection() {
5965
</div>
6066
</div>
6167
<div writea="read.content" class="p-xs-0 p-sm-5 py-5">
62-
<div id="MarkdownContainer"></div>
68+
<div id="MarkdownContainer">
69+
<p class="placeholder-wave">
70+
<span class="opacity-25 placeholder col-12 rounded-pill"></span>
71+
<span class="opacity-25 placeholder col-11 rounded-pill"></span>
72+
<span class="opacity-25 placeholder col-11 rounded-pill"></span>
73+
<span class="opacity-25 placeholder col-10 rounded-pill"></span>
74+
<span class="opacity-25 placeholder col-10 rounded-pill"></span>
75+
<span class="opacity-25 placeholder col-9 rounded-pill"></span>
76+
<span class="opacity-25 placeholder col-9 rounded-pill"></span>
77+
<span class="opacity-25 placeholder col-8 rounded-pill"></span>
78+
</p>
79+
</div>
6380
</div>
6481
${FooterElement()}
6582
`

0 commit comments

Comments
 (0)