Merge branch 'dev'

Author: estruyf

components/Docs/CodeHighlighting.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
-import * as shiki from 'shiki';
 import { Children, useMemo } from 'react';
 import { CopyButton } from './CopyButton';
+import { ShikiService } from '../../services/ShikiService';
 
 export interface ICodeHighlightingProps {
   className?: string;
@@ -77,32 +77,33 @@ const CodePanel = ({ annotation, children, ...props }: React.PropsWithChildren<I
 export const CodeHighlighting: React.FunctionComponent<ICodeHighlightingProps> = ({ className, children, ...props }: React.PropsWithChildren<ICodeHighlightingProps>) => {
   const [code, setCode] = React.useState('');
 
-  React.useEffect(() => {
-    if (className && children) {
-      const language = className.split('-')[1];
+  const fetchHighlighter = async (className: string, children: React.ReactNode) => {
+    const language = className.split('-')[1];
+    const highlighter = await ShikiService.getHighlighter();
 
-      shiki.setCDN(`../../`);
+    if (highlighter && children) {
+      let code = children.toString();
+      if (code.endsWith(`\n`)) {
+        code = code.slice(0, -1);
+      }
 
-      shiki.getHighlighter({
-        langs: [language as any],
-        theme: `the-unnamed`
-      }).then((highlighter: shiki.Highlighter) => {
-        let code = children.toString();
-        if (code.endsWith(`\n`)) {
-          code = code.slice(0, -1);
-        }
+      setCode(
+        highlighter.codeToHtml(code, {
+          lang: getLanguage(className)
+        })
+      );
 
-        setCode(
-          highlighter.codeToHtml(code, {
-            lang: getLanguage(className)
-          })
-        );
-      })
-        .then(() => {
-          if (location.hash) {
-            location.href = location.href;
-          }
-        });
+      if (location.hash) {
+        location.href = location.href;
+      }
+
+      return;
+    }
+  };
+
+  React.useEffect(() => {
+    if (className && children) {
+      fetchHighlighter(className, children);
     }
   }, [className, children]);
 

components/Docs/Markdown.tsx

@@ -7,13 +7,15 @@ import rehypeRaw from 'rehype-raw';
 import remarkGfm from 'remark-gfm';
 import { CodeBlock, CodeHighlighting } from './CodeHighlighting';
 import { mdxAnnotations } from 'mdx-annotations';
+import { ShikiService } from '../../services/ShikiService';
 
 export interface IMarkdownProps {
   content: string | undefined;
   slug: string | undefined;
 }
 
 export const Markdown: React.FunctionComponent<IMarkdownProps> = ({ content, slug }: React.PropsWithChildren<IMarkdownProps>) => {
+  const [isReady, setIsReady] = React.useState<boolean>(false);
 
   const getTitle = (props: any) => {
     const title = props?.children.length > 0 ? `${props?.children[0] as string}` : "";
@@ -33,6 +35,14 @@ export const Markdown: React.FunctionComponent<IMarkdownProps> = ({ content, slu
     );
   };
 
+  useEffect(() => {
+    if (content) {
+      ShikiService.getHighlighter().then((highlighter) => {
+        setIsReady(true);
+      });
+    }
+  }, [content])
+
   useEffect(() => {
     const elms = document.querySelectorAll('blockquote > p > strong');
     for (let i = 0; i < elms.length; i++) {
@@ -43,7 +53,8 @@ export const Markdown: React.FunctionComponent<IMarkdownProps> = ({ content, slu
     }
   }, []);
 
-  if (!content) {
+
+  if (!content || !isReady) {
     return null;
   }
 

components/Docs/NavGroup.tsx

@@ -17,8 +17,7 @@ export const NavGroup: React.FunctionComponent<INavGroupProps> = ({
   const router = useRouter();
 
   const getLinks = React.useMemo(() => {
-    const { content } = item;
-    const links = Array.from(content.matchAll(/^## (.*$)/gim));
+    const { links } = item;
 
     const crntWeight = item.weight || 99;
     const subItems = items.filter(i => i.weight && i.weight > crntWeight && i.weight < crntWeight + 1);
@@ -29,12 +28,12 @@ export const NavGroup: React.FunctionComponent<INavGroupProps> = ({
 
     return (
       <ul className={`mt-2 space-y-2`}>
-        {links.map((link, index) => {
+        {(links && links.length > 0) && links.map((link, index) => {
           return (
             <li key={index}>
               <Link
-                title={link[1]}
-                link={`/docs/${item.slug !== "index" ? item.slug : ''}#${link[1].toLowerCase().replace(/\s/g, '-')}`}
+                title={link}
+                link={`/docs/${item.slug !== "index" ? item.slug : ''}#${link.toLowerCase().replace(/\s/g, '-')}`}
               />
             </li>
           );

components/Link/ParentLink.tsx

@@ -1,6 +1,5 @@
 import { ChevronDownIcon, ChevronRightIcon } from '@heroicons/react/24/outline';
 import { useRouter } from 'next/router';
-import { default as NextLink } from 'next/link';
 import * as React from 'react';
 import { useEffect, useMemo, useState } from 'react';
 import { PageFrontMatter } from '../../models/PageFrontMatter';
@@ -18,12 +17,11 @@ export const ParentLink: React.FunctionComponent<IParentLinkProps> = ({ title, l
   const [showChildren, setShowChildren] = useState(false);
 
   const links = useMemo(() => {
-    const { content } = item;
-    const matches = Array.from(content.matchAll(/^## (.*$)/gim));
-    return matches.map(match => ({
-      title: match[1],
-      link: match[1].toLowerCase().replace(/\s/g, '-'),
-      relPath: `/docs/${item.slug !== "index" ? item.slug : ''}#${match[1].toLowerCase().replace(/\s/g, '-')}`
+    const { links } = item;
+    return links.map(match => ({
+      title: match,
+      link: match.toLowerCase().replace(/\s/g, '-'),
+      relPath: `/docs/${item.slug !== "index" ? item.slug : ''}#${match.toLowerCase().replace(/\s/g, '-')}`
     }));
   }, [item]);
 
@@ -47,8 +45,7 @@ export const ParentLink: React.FunctionComponent<IParentLinkProps> = ({ title, l
   };
 
   useEffect(() => {
-    const { content } = item;
-    const links = Array.from(content.matchAll(/^## (.*$)/gim));
+    const { links } = item;
     if (links && links.length > 0) {
       setHasChildren(true);
       return;

components/Link/Section.tsx

@@ -21,10 +21,8 @@ export const Section: React.FunctionComponent<React.PropsWithChildren<ISectionPr
 
   useEffect(() => {
     const page = router.asPath;
-    console.log(page, link);
     // Remove the last slash
     const crntLink = link.endsWith('/') ? link.slice(0, -1) : link;
-    console.log(page, crntLink);
     setIsActive(page === crntLink || crntLink === `${page}/` || page.includes(`${crntLink}#`) || page.includes(`${crntLink}index`));
 
     if (crntLink.split('/').length > 2) {

content/changelog/CHANGELOG.md

@@ -4,22 +4,37 @@
 
 ### ✨ New features
 
+- Localization implemented for the whole extension
+
 ### 🎨 Enhancements
 
 - [#273](https://github.com/estruyf/vscode-front-matter/issues/273): Allow single value arrays to be set as a string with the `singleValueAsString` field property
 - [#686](https://github.com/estruyf/vscode-front-matter/issues/686): Allow script authors to ask questions during script execution
 - [#688](https://github.com/estruyf/vscode-front-matter/issues/688): Allow to show the scheduled articles in the content dashboard (filter and group)
+- [#690](https://github.com/estruyf/vscode-front-matter/issues/690): Added the ability to filter values in the `contentRelationship` field
+- [#700](https://github.com/estruyf/vscode-front-matter/issues/700): Added the `{{pathToken.relPath}}` placeholder for the `previewPath` property
 
 ### ⚡️ Optimizations
 
 - Dashboard layout grid optimizations
+- Added the content-type name to the metadata section in the panel
+- New implementation of the combobox for the `contentRelationship` field
 
 ### 🐞 Fixes
 
 - [#685](https://github.com/estruyf/vscode-front-matter/issues/685): Fix when using non-string values in the tag picker
 - [#691](https://github.com/estruyf/vscode-front-matter/issues/691): Silent authentication retrieval for GitHub sponsors
 - [#694](https://github.com/estruyf/vscode-front-matter/issues/694): Start terminal session from the folder where the `frontmatter.json` file is located
 - [#696](https://github.com/estruyf/vscode-front-matter/issues/696): Close the local server terminal on restart
+- [#699](https://github.com/estruyf/vscode-front-matter/issues/699): Changing border theme variable for the dashboard header
+- [#703](https://github.com/estruyf/vscode-front-matter/issues/703): Fix retrieval of Astro Collections for `pnpm` projects
+- [#704](https://github.com/estruyf/vscode-front-matter/issues/704): Fix `zod` schema script for optional fields
+
+## [9.3.1] - 2023-10-27
+
+### 🐞 Fixes
+
+- [#697](https://github.com/estruyf/vscode-front-matter/issues/697): Fix missing localization key
 
 ## [9.3.0] - 2023-10-06 - [Release notes](https://beta.frontmatter.codes/updates/v9.3.0)
 

models/PageFrontMatter.ts

@@ -4,7 +4,8 @@ export interface PageFrontMatter {
   description: string;
   date: string;
   lastmod: string;
-  content: string;
+  links: string[];
   fileName: string;
   weight?: number;
-}
+  content?: string;
+}

package-lock.json

@@ -39,7 +39,7 @@
     "remark-gfm": "^3.0.1",
     "remark-heading-id": "1.0.0",
     "scroll-out": "^2.2.12",
-    "shiki": "^0.14.1",
+    "shiki": "^0.14.5",
     "zustand": "^4.1.5"
   },
   "devDependencies": {

package.json

@@ -6,6 +6,7 @@ import { useTranslation } from 'react-i18next';
 import { Page } from '../../components/Docs/Page';
 import { Markdown } from '../../components/Docs/Markdown';
 import { DocsLayout } from '../../components/Page/DocsLayout';
+import { pageProcessing } from '../../utils/pageProcessing';
 
 export default function Documentation({ page, pages, title }: any) {
   const { t: strings } = useTranslation();
@@ -20,7 +21,7 @@ export default function Documentation({ page, pages, title }: any) {
       <Title value={page.title} />
       <Description value={page.description || strings(`documentation_description`)} />
       <OtherMeta image={`/assets/frontmatter-social.png`} />
-      
+
       <DocsLayout navItems={pages} >
         <Page items={pages} page={page}>
           <Markdown content={page?.content} slug={page.slug.replace(/\//g, '-')} />
@@ -40,7 +41,7 @@ export async function getStaticProps({ params }: any) {
     'weight',
     'content',
     'fileName'
-  ]);
+  ]).map(pageProcessing);
 
   const article: any = pages.find((b: any) => b.slug === params.slug.join('/'));