finish up ghraph navigation

nfdi4plants · Sep 10, 2024 · e4e3fb5 · e4e3fb5
1 parent c94680d
commit e4e3fb5
Show file tree

Hide file tree

Showing 5 changed files with 193 additions and 32 deletions.
diff --git a/src/components/CircleGraphNavigation.astro b/src/components/CircleGraphNavigation.astro
@@ -1,14 +1,38 @@
 ---
 const circles = [
-  { id: 1, cx: 10, cy: 20, r: 2, href: '#link1' },
-  { id: 2, cx: 30, cy: 40, r: 2, href: '#link2' },
-  { id: 3, cx: 50, cy: 20, r: 2, href: '#link3' },
-  { id: 4, cx: 70, cy: 40, r: 2, href: '#link4' },
+  { id: 1, cx: 8, cy: 10, r: 5, href: 'https://www.youtube.com/watch?v=dQw4w9WgXcQ', text: 'Rick', angle: 230 },
+  { id: 2, cx: 30, cy: 40, r: 5, href: '#link2', text: 'Link 2', angle: 20 },
+  { id: 3, cx: 60, cy: 35, r: 5, href: '#link3', text: 'Link 3', angle: 130 },
+  { id: 4, cx: 90, cy: 15, r: 5, href: '#link4', text: 'Link 4', angle: 315 },
+  { id: 5, cx: 140, cy: 25, r: 5, href: '#link4', text: 'Link 4', angle: 210 },
 ];
+
+// Function to calculate positions for text and arcs
+const calculatePositions = (cx: number, cy: number, r: number, angleDegrees: number) => {
+  const arcOffset = r + 2;
+  const textOffset = arcOffset + 3;
+  const angleRadians = (angleDegrees - 90) * (Math.PI / 180); // Convert degrees to radians and adjust for SVG coordinate system
+  const startAngle = angleRadians - (35 * Math.PI) / 180; // Start angle for the arc (35 degrees before the given angle)
+  const endAngle = angleRadians + (35 * Math.PI) / 180; // End angle for the arc (35 degrees after the given angle)
+  const arcRadius = arcOffset // Radius of the arc, slightly outside the circle
+
+  // Calculate start and end points of the arc
+  const startX = cx + arcRadius * Math.cos(startAngle);
+  const startY = cy + arcRadius * Math.sin(startAngle);
+  const endX = cx + arcRadius * Math.cos(endAngle);
+  const endY = cy + arcRadius * Math.sin(endAngle);
+
+  // Calculate text position
+  const textX = cx + textOffset * Math.cos(angleRadians); // Adjust text position further outside
+  const textY = cy + textOffset * Math.sin(angleRadians);
+
+  return { startX, startY, endX, endY, textX, textY };
+};
+
 ---
 <div id="container" class="w-full h-auto p-4 max-h-[400px] flex">
   <!-- Set SVG dimensions and aspect ratio for responsiveness -->
-  <svg viewBox="0 0 100 50" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg">
+  <svg viewBox="0 0 150 50" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg" class="overflow-visible bg-accent">
     <!-- Draw lines between circles -->
     {circles.slice(1).map((circle, index) => (
       <line 
@@ -17,35 +41,54 @@ const circles = [
         x2={circle.cx} 
         y2={circle.cy} 
         stroke="black" 
-        stroke-width="1"
+        stroke-width="4"
       />
     ))}
 
     <!-- Draw circles and anchor links -->
-    {circles.map(circle => (
-      <a href={circle.href}>
+    {circles.map(circle => {
+      const { startX, startY, endX, endY, textX, textY } = calculatePositions(circle.cx, circle.cy, circle.r, circle.angle);
+      return (<a 
+        href={circle.href}
+        style={`transform-origin: ${circle.cx}px ${circle.cy}px;`}
+        class="transition-transform duration-300 ease-in-out transform hover:scale-150 hover:drop-shadow-lg cursor-pointer">
         <circle 
           cx={circle.cx} 
           cy={circle.cy} 
           r={circle.r} 
-          class="transition-transform duration-300 ease-in-out transform hover:scale-150 cursor-pointer fill-white stroke-black stroke-1"
-          style={`transform-origin: ${circle.cx}px ${circle.cy}px;`}
+          class="fill-white stroke-black stroke-1"
         />
-      </a>
-    ))}
+        <!-- Add a curved line (arc) connecting the circle to the text -->
+        <path 
+          d={`M ${startX} ${startY} A ${circle.r + 1} ${circle.r + 1} 0 0 1 ${endX} ${endY}`}
+          stroke="black" 
+          stroke-width="0.2" 
+          fill="none"
+        />
+        <!-- Add text element relative to each circle -->
+        <text 
+          x={textX} 
+          y={textY} 
+          text-anchor="middle" 
+          alignment-baseline="middle" 
+          class="fill-black cursor-pointer"
+          font-size="2"
+        >
+          {circle.text}
+        </text>
+      </a>)
+    })}
   </svg>
 </div>
 
 <style>
 
   #container {
-    background-color: red;
   }
 
   svg {
     width: 100%;
     max-width: 100%;
     border: 1px solid black;
-    background-color: navy;
   }
 </style>
diff --git a/src/layouts/MarkdownLayout.astro b/src/layouts/MarkdownLayout.astro
@@ -2,14 +2,41 @@
 import Layout from './BaseLayout.astro';
 
 const { frontmatter } = Astro.props;
+
+function createTagLink(tag: string) {
+  return `/astro-poc/posts/tags/${tag}`;
+}
+
 ---
 
 
 <Layout title={frontmatter.title}>
-  <h1>{frontmatter.title}</h1>
-  <p>Written by {frontmatter.author}</p>
-
-  <article class="prose lg:prose-lg">
-    <slot />
-  </article>
-</Layout>
+  <div class="flex items-center flex-col grow py-3 px-1">
+    <article class="prose lg:prose-lg">
+      <h1>{frontmatter.title}</h1>
+      <p class="subtitle">Written by {frontmatter.author}</p>
+      <div class="gap-2 flex">
+        {frontmatter.tags.map((tag: string) => (
+          <small class="text-teal-900 hover:underline"><a href={createTagLink(tag)}>{tag}</a></small>
+        ))}
+      </div>
+      <slot />
+    </article>
+  </div>
+</Layout>
+
+<style>
+
+  h1:has(+ .subtitle),
+  h2:has(+ .subtitle),
+  h3:has(+ .subtitle),
+  h4:has(+ .subtitle),
+  h5:has(+ .subtitle),
+  h6:has(+ .subtitle) {
+    margin-bottom: 0; /* Remove bottom margin when followed by a subtitle */
+  }
+
+  .subtitle {
+    @apply text-lg font-medium text-gray-600 mb-2 mt-0;
+  }
+</style>
diff --git a/src/pages/about.astro b/src/pages/about.astro
@@ -1,15 +1,23 @@
 ---
 import Layout from '../layouts/BaseLayout.astro';
 import CircleGraphNavigation from '../components/CircleGraphNavigation.astro';
+const allPosts = await Astro.glob('./posts/*.md');
 ---
 
 <Layout title="About">
-  <h1>About Me</h1>
-  <h2>... and my new Astro site!</h2>
-
-  <p>I am working through Astro's introductory tutorial. This is the second page on my website, and it's the first one I built myself!</p>
-
-  <p>This site will update as I complete more of the tutorial, so keep checking back and see how my journey is going!</p>
+  <div class="prose xl:prose-xl">
+    <h1>About Me</h1>
+    <h2>... and my new Astro site!</h2>
+
+    <p>I am working through Astro's introductory tutorial. This is the second page on my website, and it's the first one I built myself!</p>
+
+    <p>This site will update as I complete more of the tutorial, so keep checking back and see how my journey is going!</p>
+
+    <p>Here is a list of all available blogposts:</p>
+    <ul>
+      {allPosts.map((post) => <li><a href={post.url}>{post.frontmatter.title}</a></li>)}
+    </ul>
+  </div>
 
   <CircleGraphNavigation />
 </Layout>
diff --git a/src/pages/posts/post-1.md b/src/pages/posts/post-1.md
@@ -10,10 +10,6 @@ image:
 tags: ["astro", "blogging", "learning in public"]
 ---
 
-# My First Blog Post
-
-Published on: 2022-07-01
-
 Welcome to my _new blog_ about learning Astro! Here, I will share my learning journey as I build a new website.
 
 ## What I've accomplished
@@ -26,4 +22,62 @@ Welcome to my _new blog_ about learning Astro! Here, I will share my learning jo
 
 ## What's next
 
-I will finish the Astro tutorial, and then keep adding more posts. Watch this space for more to come.
+I will finish the Astro tutorial, and then keep adding more posts. Watch this space for more to come.
+
+# Questa infitiatur venimus Bacche imago concutio et
+
+## Illa in quies magnanimus iussa damus
+
+Lorem markdownum parantur metuens meorum; freta it solverat stramine ingens diva
+dives pumice. Satum dura tollens ferrea dignus pars, non avita. Tibi nunc
+exhortor; sine nostro ne matris adulantum quasque sic! Solidis [petitos tollere
+Terram](http://www.deum.com/adeo.html) grandia *Scorpion apparuit domus*, nam.
+
+    var spreadsheet = jpeg(activeTextEdi + -1) + 69;
+    if (user_caps_client + 27 * mediaFtpOutput + secondary_impact_koffice + 5 +
+            maskQueryLed - eide) {
+        isdnIpx = kerning_netbios;
+    }
+    var mouse_fifo = install_disk.character(1, troll_open(clusterType));
+    flashNavigation.wordart -= acl_ospf(progressiveByte(866696,
+            mainframe_queue_file) + name - ddr, pop_cable, reimageInterface(
+            control_virtual_frozen));
+
+Tepebat et Phaethon, concolor Iovis lacerare, causa pariter ligones laetissimus
+macies sex maluit instruxit! Corpore levavit hoc clipeoque convertit custos
+ferrumque excipit. Acuta longa et salve *Stygias argentea* praecingitur forma
+flumina. Non Calydona solari pretium atrae, inde, ipse, porrigit requiram,
+frugum permisit?
+
+> Siqua moderatus inmemor flexi: et de minores quae. Lignoque non carinam, illo
+> ossa ipse ingeniis creati, rostro caput remis. Adieci amorem [crescentes
+> sidereum aquas](http://data.io/). Venire precor cursu, at quid radiis hac
+> **senem**, homini, per crimina dare pars diduxit et?
+
+## Nefas visae latet quas
+
+Membris tertius acceptus lumina latus *potes feroci caelo* meruisse que parentis
+rudis interea nondum, iam. Nebulas grandior adspicit inhospita equis iacet
+videoque cum illam foret lumen isque inpia **sua quo** bono!
+
+- At inde inrigat Lyctia quo anum
+- Nec raptam perfide deus
+- Auro ego liquidis caducum quantumque debilis egredior
+- Aesonius erit quondam cum gravatum Atridae
+
+Sibi contingent fragor [et potitur Acheronta](http://portaeme.com/pater.aspx)
+adolescere rigore muris olim umor vestes tibi clara, opem suisque. Nequeunt a
+iniuria capienda posse! Natus triones licere sub senem togaque iuvenisque
+excutit senemque et fontes.
+
+- In quaesitamque amatas
+- Contraria reminiscor tenebrasque redit patrium similis tergoque
+- Omnisque umbra deum Apollinei terrae esset sonat
+- Fraterno auditi aliter inpius exorata
+- Illum versa summam finiat fameque vulnera inclusas
+- Dixerat senis
+
+Fraude nitidam Helicen Troiae tamen nascendi mole posset sol animis numina
+patens, [cum](http://hostem.org/quaeinsons). Achilles capere erit, operum
+addidit! Solum ad [vero mortali](http://www.sic-est.com/) alto inque terrae ea
+crescat et loco functaque patria decens satiaque palustribus ut dubium vaccae.
diff --git a/src/pages/posts/tags/[tag].astro b/src/pages/posts/tags/[tag].astro
@@ -0,0 +1,29 @@
+---
+import BaseLayout from '../../../layouts/BaseLayout.astro';
+
+export async function getStaticPaths() {
+  const allPosts: any[] = await Astro.glob('../*.md');
+
+  const uniqueTags = [...new Set(allPosts.map((post) => post.frontmatter.tags).flat())];
+
+  return uniqueTags.map((tag) => {
+    const filteredPosts = allPosts.filter((post) => post.frontmatter.tags.includes(tag));
+    return {
+      params: { tag },
+      props: { posts: filteredPosts },
+    };
+  });
+}
+
+const { tag } = Astro.params;
+const { posts } = Astro.props;
+---
+
+<BaseLayout title={tag}>
+  <div class="prose xl:prose-xl">
+    <p>Posts tagged with {tag}</p>
+    <ul>
+      {posts.map((post) => <li><a href={post.url}>{post.frontmatter.title}</a></li>)}
+    </ul>
+  </div>
+</BaseLayout>