implement asides! ✨ #14

astro.config.mjs

@@ -5,6 +5,8 @@ import rehypeSlug from 'rehype-slug';
 import rehypeAutolinkHeadings from 'rehype-autolink-headings';
 import {remarkReplaceLinks} from './src/plugins/remark-replace-links.ts';
 import {remarkReplaceTooltips} from './src/plugins/remark-dictionary-tooltips.ts';
+import {remarkAsides} from './src/plugins/remark-asides.ts';
+import remarkDirective from 'remark-directive';
 import mdx from '@astrojs/mdx';
 
 // https://astro.build/config
@@ -13,7 +15,7 @@ export default defineConfig({
   site: 'https://nfdi4plants.github.io',
   base: 'arc-website',
   markdown: {
-    remarkPlugins: [remarkReplaceLinks(), remarkReplaceTooltips()],
+    remarkPlugins: [remarkDirective, remarkReplaceLinks(), remarkReplaceTooltips(), remarkAsides()],
     rehypePlugins: [
       rehypeSlug,
       [

package.json

@@ -15,8 +15,10 @@
     "@astrojs/tailwind": "^5.1.0",
     "@tailwindcss/typography": "^0.5.15",
     "astro": "^4.15.4",
+    "mdast-util-directive": "^3.0.0",
     "rehype-autolink-headings": "^7.1.0",
     "rehype-slug": "^6.0.0",
+    "remark-directive": "^3.0.0",
     "tailwindcss": "^3.4.10",
     "typescript": "^5.5.4",
     "unist-builder": "^4.0.0"

src/layouts/MarkdownLayout.astro

@@ -190,8 +190,16 @@ document.addEventListener("DOMContentLoaded", function () {
 </Layout>
 
 <style is:global>
+
   #md-content .tooltip::before {
-    width: unset !important;
+    width: 24ch !important;
+  }
+
+  @media screen and (max-width:450px) {
+  /* Bei jedem größeren Monitor kommen neue Regeln hinzu */
+    #md-content .tooltip::before {
+      width: unset !important;
+    }
   }
 
   #md-content .anchor-link {
@@ -207,6 +215,71 @@ document.addEventListener("DOMContentLoaded", function () {
     text-align: left !important;
   }
 
+  .starlight-aside {
+    margin-top: 1rem;
+    margin-bottom: 1rem;
+    padding: 1rem;
+    border-inline-start: 0.25rem solid var(--sl-color-asides-border);
+    color: var(--sl-color-text);
+  }
+  .starlight-aside--note {
+    --sl-color-asides-text-accent: #00463e;
+    --sl-color-text: oklch(var(--pc));
+    --sl-color-asides-border: oklch(var(--p)) ;
+    background-color: #00dbc4;
+  }
+  .starlight-aside--tip {
+    --sl-color-asides-text-accent: #005476;
+    --sl-color-text: oklch(var(--inc));
+    --sl-color-asides-border: oklch(var(--in));
+    background-color: #4eccff;
+  }
+  .starlight-aside--caution {
+    --sl-color-asides-text-accent: #765800;
+    --sl-color-text: oklch(var(--wac));
+    --sl-color-asides-border: oklch(var(--wa));
+    background-color: #ffd762;
+  }
+  .starlight-aside--danger {
+    --sl-color-asides-text-accent: #ba000a;
+    --sl-color-text: oklch(var(--erc));
+    --sl-color-asides-border: oklch(var(--er));
+    background-color: #ff9399;
+  }
+
+  .starlight-aside__title {
+    display: flex;
+    gap: 0.5rem;
+    margin: unset;
+    align-items: center;
+    font-size: var(--sl-text-h5);
+    font-weight: 600;
+    line-height: var(--sl-line-height-headings);
+    color: var(--sl-color-asides-text-accent);
+  }
+
+  .starlight-aside__icon {
+    font-size: 1.333em;
+    width: 1em;
+    height: 1em;
+  }
+
+  .starlight-aside__title + .starlight-aside__content {
+    margin-top: 0.5rem;
+  }
+
+  .starlight-aside__content a {
+    color: var(--sl-color-asides-text-accent);
+  }
+
+  .starlight-aside__content *:first-child {
+    margin-top: 0;
+  }
+
+  .starlight-aside__content *:last-child {
+    margin-bottom: 0;
+  }
+
 </style>
 
 <style>

src/pages/details/tools-and-services.md

@@ -14,6 +14,26 @@ tags: ["tools", "services", "community"]
 
 Here is some placeholder annotation table content in Markdown format for testing purposes. It includes various Markdown elements to ensure that your styling covers a wide range of formatting options.
 
+:::note[New Title]
+This is a note.
+
+```ts
+const test = "hello"
+```
+:::
+
+:::danger
+OH NO!
+:::
+
+:::tip
+this might be nice!
+:::
+
+:::caution
+maybe oh no?
+:::
+
 ---
 
 # Research Data Management Tools for the ARC