create circle graph links poc

nfdi4plants · Sep 9, 2024 · c94680d · c94680d
1 parent 68f2f85
commit c94680d
Show file tree

Hide file tree

Showing 13 changed files with 174 additions and 22 deletions.
diff --git a/astro.config.mjs b/astro.config.mjs
@@ -7,5 +7,5 @@ import tailwind from '@astrojs/tailwind';
 export default defineConfig({
   integrations: [tailwind()],
   site: 'https://freymaurer.github.io',
-  base: 'astro-poc'
+  base: 'astro-poc',
 });
diff --git a/src/components/CircleGraphNavigation.astro b/src/components/CircleGraphNavigation.astro
@@ -0,0 +1,51 @@
+---
+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' },
+];
+---
+<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">
+    <!-- Draw lines between circles -->
+    {circles.slice(1).map((circle, index) => (
+      <line 
+        x1={circles[index].cx} 
+        y1={circles[index].cy} 
+        x2={circle.cx} 
+        y2={circle.cy} 
+        stroke="black" 
+        stroke-width="1"
+      />
+    ))}
+
+    <!-- Draw circles and anchor links -->
+    {circles.map(circle => (
+      <a href={circle.href}>
+        <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;`}
+        />
+      </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/components/Footer.astro b/src/components/Footer.astro
@@ -0,0 +1,22 @@
+<footer class="footer bg-neutral text-neutral-content p-10">
+  <nav>
+    <h6 class="footer-title">Services</h6>
+    <a class="link link-hover">Branding</a>
+    <a class="link link-hover">Design</a>
+    <a class="link link-hover">Marketing</a>
+    <a class="link link-hover">Advertisement</a>
+  </nav>
+  <nav>
+    <h6 class="footer-title">Company</h6>
+    <a class="link link-hover">About us</a>
+    <a class="link link-hover">Contact</a>
+    <a class="link link-hover">Jobs</a>
+    <a class="link link-hover">Press kit</a>
+  </nav>
+  <nav>
+    <h6 class="footer-title">Legal</h6>
+    <a class="link link-hover">Terms of use</a>
+    <a class="link link-hover">Privacy policy</a>
+    <a class="link link-hover">Cookie policy</a>
+  </nav>
+</footer>
diff --git a/src/components/Navbar.astro b/src/components/Navbar.astro
@@ -2,15 +2,15 @@
 import ThemeController from "./ThemeController.astro"
 
 const links = [
-  {href: "./", text: "Home"},
-  {href: "./about", text: "About"},
-  {href: "./knowledgebase", text: "Knowledgebase"},
-  {href: "./tools", text: "Tools"},
-  {href: "./Partners", text: "Partners"},
+  {href: "/astro-poc", text: "Home"},
+  {href: "/astro-poc/about", text: "About"},
+  {href: "/astro-poc/knowledgebase", text: "Knowledgebase"},
+  {href: "/astro-poc/tools", text: "Tools"},
+  {href: "/astro-poc/Partners", text: "Partners"},
 ]
 ---
 
-<div class="navbar bg-base-100">
+<div class="navbar bg-accent text-accent-content">
   <div class="navbar-start">
     <div class="dropdown">
       <div tabindex="0" role="button" class="btn btn-ghost lg:hidden">
@@ -45,6 +45,6 @@ const links = [
     </ul>
   </div>
   <div class="navbar-end">
-    <ThemeController></ThemeController>
+    <ThemeController />
   </div>
 </div>
diff --git a/src/layouts/Layout.astro → src/layouts/BaseLayout.astro b/src/layouts/Layout.astro → src/layouts/BaseLayout.astro
@@ -1,5 +1,6 @@
 ---
 import Navbar from '../components/Navbar.astro';
+import Footer from '../components/Footer.astro';
 
 interface Props {
 	title: string;
@@ -20,8 +21,13 @@ const { title } = Astro.props;
 		<title>{title}</title>
 	</head>
 	<body>
-    <Navbar></Navbar>
-		<slot />
+    <div class="flex flex-col min-h-screen">
+      <Navbar />
+      <div class="grow">
+        <slot />
+      </div>
+      <Footer />
+    </div>
 	</body>
 </html>
 <style is:global>

diff --git a/src/layouts/MarkdownLayout.astro b/src/layouts/MarkdownLayout.astro
@@ -0,0 +1,15 @@
+---
+import Layout from './BaseLayout.astro';
+
+const { frontmatter } = Astro.props;
+---
+
+
+<Layout title={frontmatter.title}>
+  <h1>{frontmatter.title}</h1>
+  <p>Written by {frontmatter.author}</p>
+
+  <article class="prose lg:prose-lg">
+    <slot />
+  </article>
+</Layout>
diff --git a/src/pages/about.astro b/src/pages/about.astro
@@ -1,16 +1,15 @@
 ---
-import Layout from '../layouts/Layout.astro';
+import Layout from '../layouts/BaseLayout.astro';
+import CircleGraphNavigation from '../components/CircleGraphNavigation.astro';
 ---
 
 <Layout title="About">
-  <div>
-    <h1>My Astro Site</h1>
-    <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>
+  <h1>About Me</h1>
+  <h2>... and my new Astro site!</h2>
 
-  </div>
+  <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>
+
+  <CircleGraphNavigation />
 </Layout>
diff --git a/src/pages/index.astro b/src/pages/index.astro
@@ -1,5 +1,5 @@
 ---
-import Layout from '../layouts/Layout.astro';
+import Layout from '../layouts/BaseLayout.astro';
 import Card from '../components/Card.astro';
 ---
 

diff --git a/src/pages/knowledgebase.astro b/src/pages/knowledgebase.astro
diff --git a/src/pages/posts/post-1.md b/src/pages/posts/post-1.md
@@ -0,0 +1,29 @@
+---
+layout: ../../layouts/MarkdownLayout.astro
+title: 'My First Blog Post'
+pubDate: 2022-07-01
+description: 'This is the first post of my new Astro blog.'
+author: 'Astro Learner'
+image:
+    url: 'https://docs.astro.build/assets/rose.webp'
+    alt: 'The Astro logo on a dark background with a pink glow.'
+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
+
+1. **Installing Astro**: First, I created a new Astro project and set up my online accounts.
+
+2. **Making Pages**: I then learned how to make pages by creating new `.astro` files and placing them in the `src/pages/` folder.
+
+3. **Making Blog Posts**: This is my first blog post! I now have Astro pages and Markdown posts!
+
+## What's next
+
+I will finish the Astro tutorial, and then keep adding more posts. Watch this space for more to come.
diff --git a/src/pages/posts/post-2.md b/src/pages/posts/post-2.md
@@ -0,0 +1,18 @@
+---
+layout: ../../layouts/MarkdownLayout.astro
+title: My Second Blog Post
+author: Astro Learner
+description: "After learning some Astro, I couldn't stop!"
+image:
+    url: "https://docs.astro.build/assets/arc.webp"
+    alt: "The Astro logo on a dark background with a purple gradient arc."
+pubDate: 2022-07-08
+tags: ["astro", "blogging", "learning in public", "successes"]
+---
+
+
+After a successful first week learning Astro, I decided to try some more. I wrote and imported a small component from memory!
+
+- Test1
+- Test2
+- Test3
diff --git a/src/pages/posts/post-3.md b/src/pages/posts/post-3.md
@@ -0,0 +1,12 @@
+---
+layout: ../../layouts/MarkdownLayout.astro
+title: My Third Blog Post
+author: Astro Learner
+description: "I had some challenges, but asking in the community really helped!"
+image:
+    url: "https://docs.astro.build/assets/rays.webp"
+    alt: "The Astro logo on a dark background with rainbow rays."
+pubDate: 2022-07-15
+tags: ["astro", "learning in public", "setbacks", "community"]
+---
+It wasn't always smooth sailing, but I'm enjoying building with Astro. And, the [Discord community](https://astro.build/chat) is really friendly and helpful!
diff --git a/tailwind.config.mjs b/tailwind.config.mjs
@@ -9,6 +9,6 @@ export default {
     require('daisyui'),
   ],
   daisyui: {
-    themes: ["lofi", "synthwave"],
+    themes: ["corporate", "synthwave"],
   },
 }