Links page, open links in new tab, works

Author: nemanjam

docs/working-notes/todo3.md

@@ -492,16 +492,16 @@ ovo puca
 ovo radi
 '/src/assets/images/all-images/*.jpg',
 ----
-remote markdown
-not generating id="..." links href="#..."
+    remote markdown
+    not generating id="..." links href="#..."
 custom my-prose-links
 
 // dark theme for github markdown
 https://github.com/sindresorhus/github-markdown-css/issues/104
 https://github.com/sindresorhus/github-markdown-css
 
     table of contents id links
-a href open in new tab
+    a href open in new tab
 fix links page links color for history back view transition
 
     refactor theme script, browserDefaultMode, appDefaultMode, storedMode
@@ -514,6 +514,11 @@ fix image sizes for gallery and other
     update bg color meta tag
     fix links page on user dark mode preference text color
 
-Links page open links in new tab
+    Links page open links in new tab
+// astro-remote, glavna fora je ovo
+<Markdown
+  sanitize={{ allowComponents: true }} // enable custom components
+  components={{ Heading, a: Anchor }} // a - koji tag predefinises // glavna fora
+/>
 ------------
 ```

src/components/astro-remote/Anchor.astro

@@ -0,0 +1,14 @@
+---
+const { href } = Astro.props;
+
+// exists and external
+const isExternalLink = Boolean(href) && !href.startsWith('#');
+
+const linkProps = {
+  ...(isExternalLink ? { target: '_blank' } : {}),
+};
+---
+
+<a {href} {...linkProps}>
+  <slot />
+</a>

src/components/remote-markdown/Heading.astro renamed to src/components/astro-remote/Heading.astro

@@ -13,7 +13,7 @@ const href = `#${slug}`;
 ---
 
 <div class="flex gap-2 items-center group">
-  <a id={slug} href={href} class="flex target:!outline-none">
+  <a id={slug} {href} class="flex target:!outline-none">
     <Icon
       name="mdi:link-variant"
       class="inline-block h-5 w-5 text-transparent group-hover:text-captions"

src/pages/links.astro

@@ -5,7 +5,8 @@ import '@/assets/styles/github-markdown.css';
 import { Markdown } from 'astro-remote';
 
 import List from '@/layouts/List.astro';
-import Heading from '@/components/remote-markdown/Heading.astro';
+import Anchor from '@/components/astro-remote/Anchor.astro';
+import Heading from '@/components/astro-remote/Heading.astro';
 import { BOOKMARKS } from '@/constants/data';
 import { SELECTORS } from '@/constants/dom';
 import { getPageMetadata } from '@/utils/metadata';
@@ -30,7 +31,7 @@ const { GITHUB_MARKDOWN_BODY_ID } = SELECTORS;
     <Markdown
       content={readmeContent}
       sanitize={{ dropElements: ['h1'], allowComponents: true }}
-      components={{ Heading }}
+      components={{ Heading, a: Anchor }}
     />
   </div>
 </List>