fetch remote markdown, links page

docs/working-notes/todo2.md

@@ -203,6 +203,12 @@ https://github.com/wanoo21/tailwind-astro-starting-blog
 // good blog design
 https://www.builder.io/blog/react-intersection-observer
 
+// excellent resume page
+https://github.com/tjklint/tjklint.github.io
+
+// next.js, good gradients and framer motion
+https://github.com/kristianka/kristiankahkonen.com
+
 -----------
 za local state mora react ili solid
 for state between pages nanostore with localStorage

docs/working-notes/todo3.md

@@ -491,7 +491,9 @@ ovo puca
 '/src/assets/images/all-images/*.{jpg}',
 ovo radi
 '/src/assets/images/all-images/*.jpg',
-
-
+----
+remote markdown
+not generating id="..." links href="#..."
+custom my-prose-links
 ------------
 ```

package.json

@@ -34,6 +34,7 @@
     "astro-embed": "^0.7.2",
     "astro-expressive-code": "^0.35.6",
     "astro-icon": "^1.1.0",
+    "astro-remote": "^0.3.3",
     "astro-social-share": "^2.0.2",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",

src/components/PostCard.astro

@@ -6,7 +6,7 @@ import { getPublishedOrUpdatedDate } from '@/modules/common';
 import { getCategoryProps } from '@/modules/post/category';
 import Link from '@/components/Link.astro';
 import TagList from '@/components/TagList.astro';
-import { draftText } from '@/constants/data';
+import { DRAFT_TEXT } from '@/constants/data';
 import { IMAGE_SIZES } from '@/constants/image';
 import { ROUTES } from '@/constants/routes';
 import { setTransitionSlug, TRANSITION_ELEMENT_IDS } from '@/constants/transitions';
@@ -105,7 +105,7 @@ const getTransitionNameFromElementId = setTransitionSlug({ pageSlug: slug });
     >
       <Link href={`${ROUTES.BLOG}${slug}`} variant="link-heading">
         {title}
-        {draft && <sup class="text-sm text-red-500 ml-1">{draftText}</sup>}
+        {draft && <sup class="text-sm text-red-500 ml-1">{DRAFT_TEXT}</sup>}
       </Link>
     </h2>
 

src/components/PostCardMore.astro

@@ -2,7 +2,7 @@
 import { Image } from 'astro:assets';
 
 import Link from '@/components/Link.astro';
-import { draftText } from '@/constants/data';
+import { DRAFT_TEXT } from '@/constants/data';
 import { IMAGE_SIZES } from '@/constants/image';
 import { ROUTES } from '@/constants/routes';
 
@@ -27,7 +27,7 @@ const { title, heroImage, heroAlt, description, draft } = data;
   <h4 class="b-h4 break-words line-clamp-2 mt-3 mb-2">
     <Link variant="link-heading" href={`${ROUTES.BLOG}${slug}`}>
       {title}
-      {draft && <sup class="text-sm text-red-500 ml-1">{draftText}</sup>}
+      {draft && <sup class="text-sm text-red-500 ml-1">{DRAFT_TEXT}</sup>}
     </Link>
   </h4>
   {description && <p class="text-base text-captions line-clamp-2">{description}</p>}

src/components/PostCardSmall.astro

@@ -4,7 +4,7 @@ import { Image } from 'astro:assets';
 
 import { getPublishedOrUpdatedDate } from '@/modules/common';
 import Link from '@/components/Link.astro';
-import { draftText } from '@/constants/data';
+import { DRAFT_TEXT } from '@/constants/data';
 import { IMAGE_SIZES } from '@/constants/image';
 import { ROUTES } from '@/constants/routes';
 import { setTransitionSlug, TRANSITION_ELEMENT_IDS } from '@/constants/transitions';
@@ -55,7 +55,7 @@ const getTransitionNameFromElementId = setTransitionSlug({ pageSlug: slug });
       })}
     >
       <Link variant="link-heading" href={`${ROUTES.BLOG}${slug}`}>
-        {draft && <sup class="text-sm text-red-500 mr-1">{draftText}</sup>}
+        {draft && <sup class="text-sm text-red-500 mr-1">{DRAFT_TEXT}</sup>}
         {title}
       </Link>
     </h4>

src/constants/data.ts

@@ -1 +1,4 @@
-export const draftText = '(draft)';
+export const DRAFT_TEXT = '(draft)';
+
+export const BOOKMARKS_README_URL =
+  'https://raw.githubusercontent.com/nemanjam/bookmarks/main/README.md';

src/constants/metadata.ts

@@ -54,6 +54,9 @@ export const PAGE_METADATA = {
     title: 'Projects',
     description: 'Ad duis incididunt reprehenderit elit in enim amet dolor.',
   },
+  'lists/links': {
+    title: 'Links',
+  },
 } as const;
 
 export type PageMetadataKey = keyof typeof PAGE_METADATA;

src/constants/navigation.ts

@@ -31,6 +31,10 @@ export const NAVIGATION_ITEMS = [
     path: ROUTES.GALLERY,
   },
   // {
+  //   title: 'Links',
+  //   path: ROUTES.LINKS,
+  // },
+  // {
   //   title: 'Resume',
   //   path: ROUTES.RESUME,
   // },

src/constants/routes.ts

@@ -16,6 +16,7 @@ export const ROUTES = {
   EXPLORE_CATEGORIES: '/blog/explore/categories/',
   DESIGN: '/design/',
   GALLERY: '/gallery/',
+  LINKS: '/links/',
   /** maybe in future */
   DRAFTS: '/drafts/',
   _404: '/404/',

src/pages/blog/[slug].astro

@@ -11,7 +11,7 @@ import PostMeta from '@/components/PostMeta.astro';
 import Share from '@/components/Share.astro';
 import TableOfContents from '@/components/TableOfContents.astro';
 import TagList from '@/components/TagList.astro';
-import { draftText } from '@/constants/data';
+import { DRAFT_TEXT } from '@/constants/data';
 import { IMAGE_SIZES } from '@/constants/image';
 import { ROUTES } from '@/constants/routes';
 import { setTransitionSlug, TRANSITION_ELEMENT_IDS } from '@/constants/transitions';
@@ -110,7 +110,7 @@ const metadata: Metadata = { title, description, image };
       })}
     >
       {title}
-      {draft && <sup class="text-red-500 ml-1">{draftText}</sup>}
+      {draft && <sup class="text-red-500 ml-1">{DRAFT_TEXT}</sup>}
     </h1>
 
     {

src/pages/links.astro

@@ -0,0 +1,19 @@
+---
+import { Markdown } from 'astro-remote';
+
+import List from '@/layouts/List.astro';
+import { BOOKMARKS_README_URL } from '@/constants/data';
+import { getPageMetadata } from '@/utils/metadata';
+
+const readmeContent = await fetch(BOOKMARKS_README_URL).then((response) => response.text());
+
+const metadata = getPageMetadata('lists/links');
+
+// not generating id="..." links href="#..."
+---
+
+<List {metadata}>
+  <div class="my-prose">
+    <Markdown content={readmeContent} sanitize={{ dropElements: ['h1'] }} />
+  </div>
+</List>

src/utils/navigation.ts

@@ -18,6 +18,9 @@ export const getActiveNavItemPath = (routePathname: string): NavigationItem['pat
     case routePathname === ROUTES.GALLERY:
       activeNavItem = getNavItem(ROUTES.GALLERY);
       break;
+    case routePathname === ROUTES.LINKS:
+      activeNavItem = getNavItem(ROUTES.LINKS);
+      break;
     // unused
     case routePathname === ROUTES.RESUME:
       activeNavItem = getNavItem(ROUTES.RESUME);

yarn.lock

@@ -1771,6 +1771,17 @@ astro-icon@^1.1.0:
     "@iconify/types" "^2.0.0"
     "@iconify/utils" "^2.1.5"
 
+astro-remote@^0.3.3:
+  version "0.3.3"
+  resolved "https://registry.yarnpkg.com/astro-remote/-/astro-remote-0.3.3.tgz#f68254b3f45b66f6b3b9104b7bd938a066c209ea"
+  integrity sha512-ufS/aOBXQKAe6hZ5NbiHUsC01o0ZcEwS+nNhd/mr1avLV+NbgYJEbwY8VRorzLs/GH5COOTaxl2795DkGIUTcw==
+  dependencies:
+    entities "^4.5.0"
+    marked "^12.0.0"
+    marked-footnote "^1.2.2"
+    marked-smartypants "^1.1.6"
+    ultrahtml "^1.5.3"
+
 astro-social-share@^2.0.2:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/astro-social-share/-/astro-social-share-2.0.2.tgz#81497f8e8bc072934a4e0a96ebeff7607c7ce3fd"
@@ -4162,6 +4173,23 @@ markdown-table@^3.0.0:
   resolved "https://registry.yarnpkg.com/markdown-table/-/markdown-table-3.0.3.tgz#e6331d30e493127e031dd385488b5bd326e4a6bd"
   integrity sha512-Z1NL3Tb1M9wH4XESsCDEksWoKTdlUafKc4pt0GRwjUyXaCFZ+dc3g2erqB6zm3szA2IUSi7VnPI+o/9jnxh9hw==
 
+marked-footnote@^1.2.2:
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/marked-footnote/-/marked-footnote-1.2.2.tgz#693404c3fbe93c70cb2afe4642803a65aaf9a4c7"
+  integrity sha512-TFBEHwHLSSedub7P6XHHs+dMMOnDeNV5+kFDo4trU//gDd8iM57lg9jr9NGwDifPwLllHwKmFcRNp5uYvO2Fnw==
+
+marked-smartypants@^1.1.6:
+  version "1.1.8"
+  resolved "https://registry.yarnpkg.com/marked-smartypants/-/marked-smartypants-1.1.8.tgz#3cbe53ad2eefb6c46c208ca9a6a660e2817c734a"
+  integrity sha512-2n8oSjL2gSkH6M0dSdRIyLgqqky03iKQkdmoaylmIzwIhYTW204S7ry6zP2iqwSl0zSlJH2xmWgxlZ/4XB1CdQ==
+  dependencies:
+    smartypants "^0.2.2"
+
+marked@^12.0.0:
+  version "12.0.2"
+  resolved "https://registry.yarnpkg.com/marked/-/marked-12.0.2.tgz#b31578fe608b599944c69807b00f18edab84647e"
+  integrity sha512-qXUm7e/YKFoqFPYPa3Ukg9xlI5cyAtGmyEIzMfW//m6kXwCy2Ps9DYf5ioijFKQ8qyuscrHoY04iJGctu2Kg0Q==
+
 mdast-util-definitions@^6.0.0:
   version "6.0.0"
   resolved "https://registry.yarnpkg.com/mdast-util-definitions/-/mdast-util-definitions-6.0.0.tgz#c1bb706e5e76bb93f9a09dd7af174002ae69ac24"
@@ -6079,6 +6107,11 @@ slash@^3.0.0:
   resolved "https://registry.yarnpkg.com/slash/-/slash-3.0.0.tgz#6539be870c165adbd5240220dbe361f1bc4d4634"
   integrity sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==
 
+smartypants@^0.2.2:
+  version "0.2.2"
+  resolved "https://registry.yarnpkg.com/smartypants/-/smartypants-0.2.2.tgz#ad7124d8eb9ab437906db1cd7bd7aaf49e5d9a42"
+  integrity sha512-TzobUYoEft/xBtb2voRPryAUIvYguG0V7Tt3de79I1WfXgCwelqVsGuZSnu3GFGRZhXR90AeEYIM+icuB/S06Q==
+
 source-map-js@^1.0.1, source-map-js@^1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-1.2.0.tgz#16b809c162517b5b8c3e7dcd315a2a5c2612b2af"