diff --git a/package.json b/package.json index 783936e..d350949 100644 --- a/package.json +++ b/package.json @@ -28,10 +28,10 @@ "fast-glob": "^3.3.2", "lucide-react": "^0.396.0", "markdown-it": "^14.1.0", + "marked": "^13.0.1", "node-html-parser": "^6.1.13", "react": "^18.3.1", "react-dom": "^18.3.1", - "react-markdown": "^9.0.1", "rehype-pretty-code": "^0.13.2", "rehype-slug": "^6.0.0", "sanitize-html": "^2.13.0", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 57f8466..45752ac 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -62,6 +62,9 @@ importers: markdown-it: specifier: ^14.1.0 version: 14.1.0 + marked: + specifier: ^13.0.1 + version: 13.0.1 node-html-parser: specifier: ^6.1.13 version: 6.1.13 @@ -71,9 +74,6 @@ importers: react-dom: specifier: ^18.3.1 version: 18.3.1(react@18.3.1) - react-markdown: - specifier: ^9.0.1 - version: 9.0.1(@types/react@18.3.3)(react@18.3.1) rehype-pretty-code: specifier: ^0.13.2 version: 0.13.2(shiki@1.9.0) @@ -1648,9 +1648,6 @@ packages: html-escaper@3.0.3: resolution: {integrity: sha512-RuMffC89BOWQoY0WKGpIhn5gX3iI54O6nRA0yC124NYVtzjmFWBIiFd8M0x+ZdX0P9R4lADg1mgP8C7PxGOWuQ==} - html-url-attributes@3.0.0: - resolution: {integrity: sha512-/sXbVCWayk6GDVg3ctOX6nxaVj7So40FcFAnWlWGNAB1LpYKcV5Cd10APjPjW80O7zYW2MsjBV4zZ7IZO5fVow==} - html-void-elements@3.0.0: resolution: {integrity: sha512-bEqo66MRXsUGxWHV5IP0PUiAWwoEjba4VCzg0LjFJBpchPaTfyfCKTG6bc5F8ucKec3q5y6qOdGyYTSBEvhCrg==} @@ -1898,6 +1895,11 @@ packages: markdown-table@3.0.3: resolution: {integrity: sha512-Z1NL3Tb1M9wH4XESsCDEksWoKTdlUafKc4pt0GRwjUyXaCFZ+dc3g2erqB6zm3szA2IUSi7VnPI+o/9jnxh9hw==} + marked@13.0.1: + resolution: {integrity: sha512-7kBohS6GrZKvCsNXZyVVXSW7/hGBHe49ng99YPkDCckSUrrG7MSFLCexsRxptzOmyW2eT5dySh4Md1V6my52fA==} + engines: {node: '>= 18'} + hasBin: true + mdast-util-definitions@6.0.0: resolution: {integrity: sha512-scTllyX6pnYNZH/AIp/0ePz6s4cZtARxImwoPJ7kS42n+MnVsI4XbnG6d4ibehRIldYMWM2LD7ImQblVhUejVQ==} @@ -2377,12 +2379,6 @@ packages: peerDependencies: react: ^18.3.1 - react-markdown@9.0.1: - resolution: {integrity: sha512-186Gw/vF1uRkydbsOIkcGXw7aHq0sZOCRFFjGrr7b9+nVZg4UfA4enXCaxm4fUzecU38sWfrNDitGhshuU7rdg==} - peerDependencies: - '@types/react': '>=18' - react: '>=18' - react-refresh@0.14.2: resolution: {integrity: sha512-jCvmsr+1IUSMUyzOkRcvnVbX3ZYC6g9TDrDbFuFmRDq7PD4yaGbLKNQL6k2jnArV8hjYxh7hVhAZB6s9HDGpZA==} engines: {node: '>=0.10.0'} @@ -4811,8 +4807,6 @@ snapshots: html-escaper@3.0.3: {} - html-url-attributes@3.0.0: {} - html-void-elements@3.0.0: {} htmlparser2@8.0.2: @@ -5017,6 +5011,8 @@ snapshots: markdown-table@3.0.3: {} + marked@13.0.1: {} + mdast-util-definitions@6.0.0: dependencies: '@types/mdast': 4.0.4 @@ -5748,23 +5744,6 @@ snapshots: react: 18.3.1 scheduler: 0.23.2 - react-markdown@9.0.1(@types/react@18.3.3)(react@18.3.1): - dependencies: - '@types/hast': 3.0.4 - '@types/react': 18.3.3 - devlop: 1.1.0 - hast-util-to-jsx-runtime: 2.3.0 - html-url-attributes: 3.0.0 - mdast-util-to-hast: 13.2.0 - react: 18.3.1 - remark-parse: 11.0.0 - remark-rehype: 11.1.0 - unified: 11.0.5 - unist-util-visit: 5.0.0 - vfile: 6.0.1 - transitivePeerDependencies: - - supports-color - react-refresh@0.14.2: {} react-remove-scroll-bar@2.3.6(@types/react@18.3.3)(react@18.3.1): diff --git a/src/components/mdx/astro-image.astro b/src/components/mdx/astro-image.astro index 1bd3321..f2b2806 100644 --- a/src/components/mdx/astro-image.astro +++ b/src/components/mdx/astro-image.astro @@ -5,9 +5,16 @@ const { src, alt } = Astro.props; --- {alt} + + diff --git a/src/components/microblog-item.astro b/src/components/microblog-item.astro new file mode 100644 index 0000000..8045612 --- /dev/null +++ b/src/components/microblog-item.astro @@ -0,0 +1,38 @@ +--- +import { marked } from "marked"; +import formatDate from "@/utils/format-date"; +import type { MicroblogsResponse, TagsResponse } from "@/utils/pocketbase"; + +type Props = MicroblogsResponse & { + props: { + tags: TagsResponse[]; + }; +}; + +const props = Astro.props; +const content = marked.parse(props.content); +--- + +
+
+
+ + {formatDate(new Date(props.published))}{" "} + + + {new Date(props.published).toLocaleTimeString()} + +
+
+ { + props && + props.expand.tags && + props.expand.tags.map( + (tag: any) => + tag && #{tag.name} , + ) + } +
+
+
+
diff --git a/src/components/microblog-item.tsx b/src/components/microblog-item.tsx deleted file mode 100644 index 8937683..0000000 --- a/src/components/microblog-item.tsx +++ /dev/null @@ -1,41 +0,0 @@ -import ReactMarkdown from "react-markdown"; -import type { MicroblogsResponse, TagsResponse } from "@/utils/pocketbase"; -import formatDate from "@/utils/format-date"; - -type Props = MicroblogsResponse & { - expand: { - tags: TagsResponse[]; - }; -}; - -export default function MicroblogItem(props: Props) { - return ( -
-
-
- - {formatDate(new Date(props.published))}{" "} - - - {new Date(props.published).toLocaleTimeString()} - -
-
- {props.expand && - props.expand.tags && - props.expand.tags.map( - (tag) => - tag && ( - - #{tag.name}{" "} - - ), - )} -
-
-
- {props.content} -
-
- ); -} diff --git a/src/components/navbar.astro b/src/components/navbar.astro index 7e99e6c..2a8bc31 100644 --- a/src/components/navbar.astro +++ b/src/components/navbar.astro @@ -1,8 +1,8 @@ --- -import { navItems } from "@/utils/nav-links"; -import MobileMenu from "@/components/mobile-menu"; import logo from "@/assets/logo.png"; import { Image } from "astro:assets"; +import { navItems } from "@/utils/nav-links"; +import MobileMenu from "@/components/mobile-menu"; import LinkButton from "@/components/link-button"; --- @@ -23,6 +23,7 @@ import LinkButton from "@/components/link-button"; src={logo} width={80} height={80} + loading="eager" class="w-auto h-auto" alt="juancmandev logo" /> @@ -31,7 +32,7 @@ import LinkButton from "@/components/link-button";