add more poems

nctzn101 · Jul 29, 2023 · 02ddac5 · 02ddac5
1 parent f49760d
commit 02ddac5
Show file tree

Hide file tree

Showing 4 changed files with 171 additions and 54 deletions.
diff --git a/README.md b/README.md
@@ -1,3 +1,7 @@
-# poems
+# about
+poems I wrote and then transposed into shapeshifting poems. currently I mostly maintain the original shape, but hoping to experiment a lil' more eventually
 
-inspired by: https://poems.verses.xyz/
+- inspired by: https://poems.verses.xyz/
+- make your own: https://poems.verses.xyz/test
+## other sources:
+- [telescopic text library repo](https://github.com/jackyzha0/telescopic-text)
diff --git a/index.html b/index.html
@@ -1,64 +1,35 @@
 <!DOCTYPE html>
 <html>
-  <head>
-    <title>firefighter</title>
-  </head>
-  <body>
-    <script src="https://cdn.jsdelivr.net/npm/telescopic"></script>
+<head>
+    <title>(telescopic) poems by raluca</title>
 
-  <script src="https://unpkg.com/telescopic-text/lib/index.js"></script>
-  <link href="https://unpkg.com/telescopic-text/lib/index.css" rel="stylesheet">
+    <script src="https://unpkg.com/telescopic-text/lib/index.js"></script>
+  <link
+    href="https://unpkg.com/telescopic-text/lib/index.css"
+    rel="stylesheet"
+  />
+  <link rel="stylesheet" href="style.css">
+  <script src="script.js"></script>
 </head>
+<body>
 
-<div id="telescopicPoem" style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);">
-</div>
-<script>
-  const telescopicContent = createTelescopicTextFromBulletedList(`- watered 
- - even 
-  - when i understood that even
- - regularly watered
-- gardens wither.
+    <ul>
+    <li><a id="link" title="firefighter"
+ href="#" onclick="renderPoem('firefighter');return false;">firefighter</a></li>
+    <li><a id="link" title="the full experience" href="#" onclick="renderPoem('thefullexperience'); return false; ">the full experience</a></li>
+    <li><a id="link" title="to make a home" href="#" onclick="renderPoem('tomakeahome'); return false;">to make a home</a></li>
+</ul>
 
-- i made a point.
- - i made a point to stay on 
- - call.
-  - call 
-  - just in case. 
-    - just in case there are
-    - signs 
-     - sudden signs
-    - of drought.
-  
-- i will sprint.
- - should they burn, i will sprint.
-- i 
- - but i
-- am a company of one.
-- i have buckets.
- - and all i have are 
- - buckets
-  - overflowing buckets
-   - buckets of care
- 
-- take time.
- - when i burn 
- - take time.
-  - i hope you take time to
-   - i hope you take time out of your busy to
-- bring me a
-- glass.
- - glass of water.
-  
 
+    <div id="telescopicPoem"> choose a poem</div>   
+    <div id="titlePoem"></div>
+
+</div>
 
 
- `, {separator: ' ', textMode: 'text'});
-  const container = document.getElementById("telescopicPoem");
-  container.appendChild(telescopicContent);
-</script>
-<div style="position: absolute; top: 80%; left: 50%; transform: translate(-50%, -50%);"> firefighter
+    <div class="footer">
+  <p>by raluca ~ <a href="https://warpcast.com/raluca">i'm on farcaster</a></p>
 </div>
 
-  </body>
+</body>
 </html>
-<head>
diff --git a/script.js b/script.js
@@ -0,0 +1,106 @@
+poem1 = `
+- watered 
+ - even 
+  - when i understood that even
+ - regularly watered
+- gardens wither.
+
+- i made a point.
+ - i made a point to stay on 
+ - call.
+  - call 
+  - just in case. 
+    - just in case there are
+    - signs 
+     - sudden signs
+    - of drought.
+  
+- i will sprint.
+ - should they burn, i will sprint.
+- i 
+ - but i
+- am a company of one.
+- i have buckets.
+ - and all i have are 
+ - buckets
+  - overflowing buckets
+   - buckets of care
+ 
+- take time.
+ - when i burn 
+ - take time.
+  - i hope you take time to
+   - i hope you take time out of your busy to
+- bring me a
+- glass.
+ - glass of water.
+  
+
+
+
+ `;
+
+poem2 = `- I've never been  
+- to Vermont
+- so I never 
+- dressed for it.
+ - packed 
+ - my 
+ - jacket.
+  - oversized jacket.
+   - oversized plaid jacket.
+    - oversized pumpkin-shade plaid jacket.
+- when 
+ - but when
+- I go to Vermont,
+ - I'll pack
+  - I'll first buy
+ - a jacket.
+  - an oversized jacket.
+   - an oversized plaid jacket.
+    - an oversized pumpkin-shade plaid jacket.
+- when 
+ - honeycrisp in
+ - one hand
+  - one hand, the other out
+- sensing
+- the breeze, 
+- I will realize I 
+- had already been.
+ - had been to Vermont. 
+  - had been to Vermont every fall.
+   - had been to Vermont for decades, every fall.
+   
+   `;
+
+poem3 = `
+- make 
+ - you can make 
+- a
+- pillow
+ - snug pillow
+- on
+- the road
+ - any road
+- you pick
+- feathers 
+ - the right feathers
+- from.
+`;
+poems = {
+  firefighter: poem1,
+  thefullexperience: poem2,
+  tomakeahome: poem3,
+};
+
+function renderPoem(title) {
+  const telescopicPoem = document.getElementById("telescopicPoem");
+  telescopicPoem.replaceChildren();
+
+  const node = createTelescopicTextFromBulletedList(poems[title], {
+    separator: " ",
+    textMode: "text",
+  });
+
+  telescopicPoem.appendChild(node);
+}
diff --git a/style.css b/style.css
@@ -0,0 +1,36 @@
+ul {
+  list-style-type: none;
+  left: 2em;
+  top: 20%;
+  bottom: 2em;
+  padding: 2em;
+  width: 15%;
+  height: 100%;
+  position: absolute;
+  overflow: auto;
+}
+
+a {
+  text-decoration: none;
+}
+li a {
+  display: block;
+  color: #000;
+  padding: 2px;
+}
+
+#telescopicPoem {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+}
+
+
+.footer {
+  position: fixed;
+  left: 0;
+  bottom: 0;
+  width: 100%;
+  text-align: center;
+}