Skip to content

Commit 0dbe262

Browse files
fezcodefezcode
committed
style: dnd
1 parent efcaad6 commit 0dbe262

File tree

4 files changed

+108
-12
lines changed

4 files changed

+108
-12
lines changed

‎public/stories/README.md‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,12 @@ public/stories/
1919
* `[book-directory-name]/`: Each book's individual episode content files are stored in their own dedicated subdirectories. For example, `book-one/` would contain episodes for "Book One".
2020
* `episodeX.txt`: These are plain text files containing the actual narrative content for each episode.
2121

22+
## Episode File Contents
23+
24+
Every file should end with `.txt` format however you can write `markdown` in it (**highly recommended**).
25+
26+
**Important**: Tables are not supported.
27+
2228
## Book and Author Structure (books.piml)
2329

2430
The `books.piml` file is a PIML document that, when parsed, results in an object containing `authors` and `books` arrays.

‎public/stories/book-one/episode1.txt‎

Lines changed: 46 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,51 @@
1-
Episode 1: The Lorem Ipsum
1+
# A Markdown Test
22

3-
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras risus libero, dapibus suscipit sapien non, viverra maximus sem. Aenean augue tortor, molestie ac lacinia ut, accumsan quis sapien. In sed nisl in magna maximus porta eu et est. Duis turpis ante, condimentum ac sapien semper, mollis pellentesque nibh. Nam a ipsum gravida, porttitor elit ut, fermentum neque. Pellentesque vitae nunc eu justo dignissim placerat. Vestibulum nec sagittis augue. Duis maximus ultricies accumsan. Praesent porttitor congue semper. Etiam pulvinar est a tincidunt pretium. Curabitur sollicitudin maximus tempus. Quisque eget pulvinar justo.
3+
Dragons have been a staple of fantasy literature and mythology for centuries. From their majestic wings to their fearsome breath, dragons come in various forms across different cultures and stories.
44

5-
Cras accumsan mattis arcu, et suscipit neque. Nunc rhoncus eget mauris eget maximus. Nam interdum sed quam sed ultricies. Praesent sed nunc metus. Etiam aliquam lacinia lectus, eu venenatis augue gravida sed. Donec tincidunt molestie sapien eu dignissim. Pellentesque dignissim bibendum nibh condimentum auctor. Cras rhoncus velit eget enim molestie, non sollicitudin ipsum tincidunt.
5+
---
66

7-
Nullam maximus hendrerit mauris, vel pharetra orci. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi tempor tellus urna, vitae viverra mi euismod nec. Pellentesque convallis elit nisi, a semper arcu convallis id. Proin eu dictum enim. Praesent nec pellentesque sem. Praesent non magna quis elit congue aliquam. Aliquam nibh augue, vulputate in nisi facilisis, rhoncus commodo risus.
7+
## **Interesting Facts About Dragons**
88

9-
Mauris dui magna, mollis at leo at, vestibulum venenatis augue. Praesent eget rutrum tortor. Fusce vitae mattis sapien, ut cursus ante. Aenean nunc augue, volutpat ac dui quis, rutrum dignissim est. Cras vitae nulla imperdiet eros laoreet elementum. Integer sed augue dictum, egestas mi sit amet, maximus nisl. Sed lorem nisl, hendrerit sit amet lacinia nec, tempor a justo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae;
9+
1. **Origins**: In mythology, dragons are often linked to the creation of natural landscapes (e.g., mountains, rivers).
10+
2. **Dragon Lore**: In *Dungeons & Dragons*, dragons have different alignments based on their color, such as lawful good for metallic dragons and chaotic evil for chromatic dragons.
11+
3. **Shape-Shifting**: Some cultures, like in *The NeverEnding Story*, feature dragons that can change their form or size.
12+
4. **Guardians of Treasure**: In many stories, dragons hoard treasures, often seen as symbols of greed or protection.
1013

11-
Sed eget elit vel leo commodo mattis eget et orci. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer eu pellentesque ligula. Proin consectetur tortor pulvinar lectus tempor, sit amet ultricies enim rutrum. Mauris quis fermentum tortor, at aliquam erat. Suspendisse tellus sapien, dictum vitae erat in, egestas posuere sapien. Etiam mattis nec turpis ac eleifend. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque feugiat tristique efficitur. Aenean id enim suscipit, convallis ex vel, imperdiet tortor. Aliquam auctor purus eu ipsum maximus, vel efficitur tortor bibendum. Proin non scelerisque elit. Praesent interdum diam erat, nec condimentum nisi pellentesque vulputate.
14+
---
15+
16+
## **Dragon Myths Across Cultures**
17+
18+
- **Greek Mythology**: Dragons were often depicted as guardians of ancient knowledge or treasures, such as the Lernaean Hydra.
19+
- **Chinese Mythology**: The Lung dragons symbolize strength, wisdom, and good fortune, often associated with water and rain.
20+
- **Viking Mythology**: Dragons like Fafnir were seen as tragic figures, representing greed and destruction.
21+
- **Arthurian Legends**: Dragons, such as the one slain by St. George, symbolize the battle between good and evil.
22+
23+
---
24+
25+
### **Fun Fact:**
26+
27+
> "Did you know that in some stories, dragons are depicted as protectors rather than villains, especially in Eastern traditions like those of Japan and China?"
28+
29+
---
30+
31+
## **Dragon-Related Media**
32+
33+
1. **Books**:
34+
- *The Hobbit* by J.R.R. Tolkien
35+
- *A Song of Ice and Fire* by George R.R. Martin
36+
2. **Movies**:
37+
- *How to Train Your Dragon* (2010)
38+
- *Reign of Fire* (2002)
39+
3. **Games**:
40+
- *The Elder Scrolls V: Skyrim*
41+
- *Dungeons & Dragons* (Tabletop RPG)
42+
43+
---
44+
45+
### **Conclusion**
46+
47+
Dragons are more than just mythical creatures; they represent complex themes such as power, wisdom, and the balance between good and evil. Whether they are guarding treasure, controlling the elements, or shaping the fate of kingdoms, dragons will always hold a special place in fantasy lore.
48+
49+
---
50+
51+
#### *Which dragon type would you choose to tame?*

‎src/pages/dnd/DndEpisodePage.js‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,8 @@ import { parseWallpaperName } from '../../utils/dndUtils'; // Import parseWallpa
77
import dndWallpapers from '../../utils/dndWallpapers';
88
import useSeo from "../../hooks/useSeo";
99
import piml from 'piml';
10+
import ReactMarkdown from 'react-markdown';
11+
import rehypeRaw from 'rehype-raw';
1012

1113
const pageVariants = {
1214
initial: {
@@ -142,11 +144,9 @@ function DndEpisodePage() {
142144
<span className="dnd-hero-title-white">{episodeTitle}</span>
143145
</h1>
144146
<div className="dnd-content-box" style={{ zIndex: 1 }}>
145-
{episodeContent.split('\n').map((paragraph, index) => (
146-
<p key={index} style={{ marginBottom: '1rem', lineHeight: '1.6', textAlign: 'left' }}>
147-
{paragraph}
148-
</p>
149-
))}
147+
<ReactMarkdown rehypePlugins={[rehypeRaw]}>
148+
{episodeContent}
149+
</ReactMarkdown>
150150
</div>
151151

152152
<div className="flex flex-wrap justify-between w-[90%] max-w-[800px] mx-auto my-8 z-10 gap-4">

‎src/styles/dnd.css‎

Lines changed: 51 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,7 @@
4343

4444
.dnd-content-box {
4545
background-color: rgba(50, 30, 30, 0.9); /* New background color, blacker with a pinch of red */
46-
padding: 5rem 2rem 4rem; /* Adjusted top padding */
46+
padding: 5rem 3rem 4rem; /* Adjusted horizontal padding */
4747
width: 90%;
4848
max-width: 1200px; /* Narrower for better readability */
4949
margin: 2rem auto; /* Center the box */
@@ -83,6 +83,56 @@
8383
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8); /* Add text shadow */
8484
}
8585

86+
.dnd-content-box ul,
87+
.dnd-content-box ol {
88+
margin-left: 3rem; /* Indent lists */
89+
margin-bottom: 1rem;
90+
padding-left: 0;
91+
text-align: left; /* Ensure list items align left */
92+
}
93+
94+
.dnd-content-box li {
95+
font-size: 1.4rem; /* Match paragraph font size */
96+
color: #E8E0B0; /* Match paragraph color */
97+
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8); /* Match paragraph text shadow */
98+
margin-bottom: 0.5rem; /* Spacing between list items */
99+
line-height: 1.6;
100+
}
101+
102+
.dnd-content-box ul {
103+
list-style-type: disc; /* Default bullet style */
104+
}
105+
106+
.dnd-content-box ol {
107+
list-style-type: decimal; /* Default numbered style */
108+
}
109+
110+
.dnd-content-box blockquote {
111+
font-style: italic;
112+
padding: 1.5rem 0.1rem 0.5rem 0; /* top, right, bottom, left */
113+
margin: 2rem 1rem;
114+
border: 1px solid #E8E0B0; /* Border matching text color */
115+
color: #E8E0B0; /* Match paragraph color */
116+
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8); /* Match paragraph text shadow */
117+
border-radius: 4px;
118+
line-height: 1.6;
119+
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* Subtle shadow */
120+
}
121+
122+
.dnd-content-box hr {
123+
border: none; /* Remove default border */
124+
height: 10px; /* Height of the wavy line */
125+
background-image: repeating-linear-gradient(
126+
-45deg,
127+
rgba(255, 191, 0, 0.7),
128+
rgba(255, 191, 0, 0.7) 2px,
129+
transparent 2px,
130+
transparent 6px /* Increased transparent part and total repeat length */
131+
); /* Wavy pattern */
132+
margin: 2rem auto; /* 1rem top/bottom, auto left/right for centering */
133+
width: 90%; /* Make it a bit shorter than full width */
134+
}
135+
86136
.dnd-hero-title-white {
87137
color: #FFFACD;
88138
margin-bottom: 1.5rem;

0 commit comments

Comments
 (0)