Markdown Types with Portfolio Template

[iceColdChris]

Hey All,

I have been trying to migrate the Portfolio template over to using Typescript and TSX files, using the Typescript Documentation for guidance. Everything was going smoothly until I hit the files that loaded in the Markdown, I did read the section on importing markdown and have created my own type for the frontmatter variable that the portfolio uses.

I have the following types

type ProjectStructure = {
  img: String;
  publishDate: Date;
  title: String;
  description: String;
  tags: Array<String>;
};

type ProjectMarkdown = MarkdownInstance<ProjectStructure>;

and have edited the PortfolioPreview component like so

import type { ProjectMarkdown } from "../../types/ProjectMarkdown";
import Styles from "./styles.module.scss";

type PortfolioPreviewProps = {
  project: ProjectMarkdown;
};

const PortfolioPreview = ({ project }: PortfolioPreviewProps) => {
  const { frontmatter } = project;
  return (
    <div className={Styles.card}>
      <div
        className={Styles.titleCard}
        style={`background-image:url(${frontmatter.img})`}
      >
        <h1 className={Styles.title}>{frontmatter.title}</h1>
      </div>
      <div className="pa3">
        <p className={`${Styles.desc} mt0 mb2`}>{frontmatter.description}</p>
        <div className={Styles.tags}>
          Tagged:
          {frontmatter.tags.map((t, i) => (
            <div key={i} className={Styles.tag} data-tag={t}>
              {t}
            </div>
          ))}
        </div>
        <a className={Styles.link} href={project.url}>
          <span className={Styles.linkInner}>View</span>
        </a>
      </div>
    </div>
  );
};

export default PortfolioPreview;

I even went ahead and edited the respective Astro.glob calls to the following

index.astro

const projects = await Astro.glob<ProjectStructure>("./project/**/*.md");

projects.astro

const projects = (await Astro.glob<ProjectStructure>("./project/**/*.md"))
  .filter(({ frontmatter }) => !!frontmatter.publishDate)
  .sort(
    (a, b) =>
      new Date(b.frontmatter.publishDate).valueOf() -
      new Date(a.frontmatter.publishDate).valueOf()
  );

When I run the build using the suggested build command in the typescript docs I am met with the following error

Any Tips would be appreciated!

Thanks

[sarah11918]

Hey @iceColdChris! Thanks for this, and we were all just discussing this Portfolio template yesterday!

The best place to get help with this is in our Discord, as these discussions are mostly for figuring out what to document or ideas about imrpoving our docs site. If you hop into https://astro.build/chat and ask in our dedicated support-threads channel then people will be looking for, and expecting to answer questions and give advice there!