Skip to content

Commit e502673

Browse files
flmathflmath
committed
feat: enhance article layout with new header components and improve rehype section handling
1 parent d6ab682 commit e502673

4 files changed

Lines changed: 117 additions & 28 deletions

File tree

‎src/lib/assets/mdlayouts/article.svelte‎

Lines changed: 71 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,15 @@
11

22
<script lang="ts">
33
// import SectionWrapper from '$lib/components/SectionWrapper.svelte';
4-
import Header from '$lib/components/Header.svelte';
4+
import Header from '$lib/components/Header.svelte' ;
5+
import HeaderTitle from '$lib/components/HeaderTitle.svelte';
56
67
export let children: () => any;
78
// This object now maps both custom tags to their Svelte components.
89
const components = {
910
// 'section-wrapper': SectionWrapper,
10-
'Header': Header,
11+
'header-component': Header,
12+
'header-title': HeaderTitle,
1113
};
1214
</script>
1315
<slot {components} />
@@ -41,6 +43,73 @@
4143
overflow-wrap: break-word;
4244
word-break: break-word;
4345
}
46+
:global(.outer-wrapper) {
47+
width: 100%;
48+
opacity: 0.85;
49+
height: 3rem;
50+
margin: 0;
51+
padding: 0;
4452
53+
display: flex;
54+
/* linear-gradient(to right top, #fdfdfd, #f3f3f3, #f1f1f1, #eeeeee, #fdfdfd); */
55+
56+
background-color: rgb(0, 191, 255);
57+
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.7);
58+
backdrop-filter: blur(6.4px);
59+
-webkit-backdrop-filter: blur(6.4px);
60+
61+
/* background: linear-gradient(
62+
167deg,
63+
rgba(0, 191, 255, 1) 16%,
64+
rgba(255, 255, 0, 1) 56%,
65+
rgba(188, 33, 34, 1) 100%
66+
); */
67+
}
68+
69+
:global(.middle-wrapper) {
70+
display: flex;
71+
width: 85%;
72+
padding: 0;
73+
margin: 0;
74+
height: 100%;
75+
margin-left: auto;
76+
margin-right: -1%;
77+
78+
background-color: rgba(255, 255, 0, 1);
79+
transform: skewX(-50deg);
80+
}
81+
82+
:global(.inter-wrapper) {
83+
display: flex;
84+
85+
width: 60%;
86+
padding: 0;
87+
margin: 0;
88+
height: 100%;
89+
margin-left: auto;
90+
margin-right: -15%;
91+
92+
background-color: rgba(188, 33, 34, 1);
93+
}
94+
95+
:global(.h2-wrapper) {
96+
color: rgba(255, 255, 255, 1);
97+
padding: 0;
98+
margin: auto;
99+
margin-left: 10%;
100+
text-align: left;
101+
vertical-align: middle;
102+
transform: skewX(50deg);
103+
}
104+
:global(.h1-wrapper)
105+
{
106+
color: rgba(0, 0, 0, 1);
107+
padding: 0;
108+
margin: auto;
109+
margin-left: 10%;
110+
text-align: left;
111+
vertical-align: middle;
112+
transform: skewX(50deg);
113+
}
45114
46115
</style>

‎src/lib/plugins/rehype-section-wrapper.js‎

Lines changed: 32 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -20,24 +20,48 @@ export default function rehypeSectionWrapper() {
2020
newChildren.push(wrapper);
2121
return wrapper;
2222
};
23-
23+
2424
for (const node of tree.children) {
25-
// Check if the node is an H2 element
25+
// Check if the node is an H1 element
26+
if (node.type === 'element' && node.tagName === 'h1') {
27+
// 1. Extract the text content of the H2.
28+
const headerText = toString(node);
29+
30+
// 2. Create a new <Header> component element with a 'title' prop.
31+
const headerComponent = h('div.outer-wrapper', [h('div.middle-wrapper',
32+
[h('h1.h1-wrapper', headerText), h('div.inter-wrapper', [])])]);
33+
34+
// 3. Add the new <Header> component to the wrapper.
35+
newChildren.push(h('br', [])); // Add a horizontal rule before the header
36+
newChildren.push(headerComponent);
37+
newChildren.push(h('br', []));
38+
currentWrapper = createNewWrapper();
39+
continue;
40+
}
41+
2642
if (node.type === 'element' && node.tagName === 'h2') {
27-
// 2. Extract the text content of the H2.
43+
// 1. Extract the text content of the H2.
2844
const headerText = toString(node);
2945

30-
// 3. Create a new <Header> component element with a 'title' prop.
31-
const headerComponent = h('h1.title', headerText);
46+
// 2. Create a new <Header> component element with a 'title' prop.
47+
const headerComponent = h('div.outer-wrapper', [h('div.middle-wrapper',
48+
[h('div.inter-wrapper', [h('h2.h2-wrapper', headerText)])])])
3249

33-
// 4. Add the new <Header> component to the wrapper.
50+
// 3. Add the new <Header> component to the wrapper.
51+
newChildren.push(h('br', [])); // Add a horizontal rule before the header
3452
newChildren.push(headerComponent);
53+
newChildren.push(h('br', []));
3554
currentWrapper = createNewWrapper();
36-
// 5. Continue to the next node, effectively *discarding* the original H2.
37-
// 6. It's an H2, so stop previous section wrapper.
3855
continue;
3956
}
57+
if (node.type === 'element' && node.tagName === 'hr') {
4058

59+
60+
// 4. Add the new <Header> component to the wrapper.
61+
newChildren.push(h('br', [])); // Add a horizontal rule before the header
62+
currentWrapper = null;
63+
continue;
64+
}
4165
// If there's no active wrapper, create one.
4266
if (!currentWrapper) {
4367
currentWrapper = createNewWrapper();

‎src/routes/posts/mdarticles/[slug]/+page.svelte‎

Lines changed: 6 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<script lang="ts">
22
// import type { PageData } from './[slug]/$types';
3-
import Header from '../../HeaderTitle.svelte';
3+
44
import HeaderShort from '../../HeaderShort.svelte';
55
import type { PageData } from './$types';
66
import HeaderTitle from '../../HeaderTitle.svelte';
@@ -16,29 +16,18 @@
1616
return new Date(date).toLocaleDateString('en-SE', options);
1717
};
1818
</script>
19-
<pre>
19+
<!-- <pre>
2020
{JSON.stringify(data, null, 2)}
2121
<hr />
22-
</pre>
23-
<span>PostContent: {data.PostContent}</span>
24-
<hr>
22+
</pre> -->
23+
<!-- <span>PostContent: {data.PostContent}</span> -->
2524
{#if data.PostContent && data.metadata}
26-
27-
25+
<br />
2826
<HeaderShort> Date: {formatDate(data.metadata.date) || 'No date'}</HeaderShort>
2927
<HeaderTitle>{data.metadata.title || data.slug}</HeaderTitle>
30-
31-
32-
<HeaderShort>Tags: {data.metadata.tags?.join(', ') || 'No tags '} </HeaderShort>
33-
34-
<!-- Add other metadata you want to display, e.g., date -->
35-
36-
28+
<HeaderShort>Tags: {data.metadata.tags?.join(', ') || 'No tags '}&nbsp; &nbsp;</HeaderShort>
3729
<article class="prose lg:prose-xl dark:prose-invert max-w-none">
3830
<svelte:component this={data.PostContent} />
39-
40-
41-
4231
</article>
4332
{:else}
4433
<!-- This part should ideally not be reached if the load function throws a 404 -->

‎src/routes/posts/mdarticles/[slug]/some post.md‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,16 @@
11
---
22
layout: article
3+
#title: sadf asdf
34
tags:
45
- asdf
56
- da
67
- sa
78
- fdff
89
date: 2025-06-06
910
---
10-
11+
<script>
12+
import HeaderTitle from '$lib/components/HeaderTitle.svelte';
13+
</script>
1114

1215
asdfasdf
1316

@@ -20,6 +23,7 @@ fun()
2023
```erlang
2124
funn().
2225
```
26+
# sadfsadf
2327

2428
sadfsadf
2529
sadfasdf
@@ -29,10 +33,13 @@ df
2933
sa
3034
df
3135
as
36+
3237
---
3338

3439
asdfasdfd
3540
fsadfasdfsad
41+
42+
3643
fffsadfsadfsadfsadfsadf
3744
sa
3845
df

0 commit comments

Comments
 (0)