#Freshie Astro Questions

162 messages · Page 1 of 1 (latest)

quiet terrace
#

Forgive me as I am an absolute noob to Astro. I am working on trying to create a blog style site for an open source community. I am using https://github.com/satnaing/astro-paper and I have been able to edit and customize a bit. I however, would like to include some more details that are in the following location in the top of the file however I'm unsure how to do that.

---
author: Author Name
pubDatetime: 2022-12-03T19:49:00Z
title: An Introduction To Swift Charts
postSlug: an-intro-to-swift-charts
featured: true
draft: false
tags:
  - docs
ogImage: ""
description:
  A barebones no frills introduction to displaying the most basic of charts, a Bar Chart.
---
GitHub
GitHub - satnaing/astro-paper: A minimal, accessible and SEO-friend...

A minimal, accessible and SEO-friendly Astro blog theme - GitHub - satnaing/astro-paper: A minimal, accessible and SEO-friendly Astro blog theme

elfin root
#

And add more properties on the blogSchema

quiet terrace
#

So, it appears that the schema is how I'd like it - but its still not reflecting on the actual page?

import { z } from "astro:content";

export const blogSchema = z
  .object({
    author: z.string(),
    pubDatetime: z.date(),
    title: z.string(),
    postSlug: z.string().optional(),
    featured: z.boolean().optional(),
    draft: z.boolean().optional(),
    tags: z.array(z.string()).default(["others"]),
    ogImage: z.string().optional(),
    description: z.string(),
  })
  .strict();

export type BlogFrontmatter = z.infer<typeof blogSchema>;
#

Originally author was set to .optional(). I removed the optional and there was no changes reflected.

#

I looked into the PostDetails.astro file as well, which does show author... 🤔

#

Oh! I figured it out! Thanks for letting me rubber_duck lol

quiet terrace
#

Another question to ask... Are you able to display .astro files inside of .md files? For instance, I have an about.md file in which I'd like to display inline images with a clipshape. I'm not sure that type of customization is possible with markdown files so I was going to see if I could do it within .astro file and then call that file within my .md file?

I'd like to keep this an .md file and not adopt the .mdx approach. I see within the AboutLayout.astro file the following code block however I'm unsure where a fresh .astro file would be called due to not seeing where the about.md is called within the code block.

<Layout title={`${frontmatter.title} | ${SITE.title}`}>
  <Header activeNav="about" />
  <Breadcrumbs />
  <main id="main-content">
    <section id="about" class="prose mb-28 max-w-3xl prose-img:border-0">
      <h1 class="text-2xl tracking-wider sm:text-3xl">{frontmatter.title}</h1>
      <slot />
    </section>
  </main>
  <Footer />
</Layout>
warm folio
#

The about.md gets rendered and replaces the <slot /> element in your layout

quiet terrace
#

I do see the import of the AboutLayout.astro so I assume that is how it's building its relationship. 🤔

#

Ah! I see. So if I wanted the new .astro file to be called under there 🤔 I would need to simply find out how to do so.

warm folio
#

If you want to include/use a new .astro file inside another one, you add an import statement to the top in the frontmatter section delimited by the three dashes ---

#

Then you can use the imported .astro file like an HTML tag somewhere in your layout

quiet terrace
#

❤️

#

So I attempted to add @astrojs/image and now I'm getting an error when trying to use npm run dev that there is no file or directory as displayed below, but I can navigate to the file no problem?
ENOENT: no such file or directory, open '/assets/logo.png'

warm folio
#

Looks like you're using an absolute path, which is looking for this file starting at the root of your drive

#

I would try importing the logo using a relative path instead

quiet terrace
#

Hmmm okay, that's odd because I had no issues using that path setup before importing 🤔

warm folio
#

it's possible that the image integration hooks into path resolving

#

and changes the behavior

#

which I would honestly consider a bug if that turns out to be true 😄

#

I'm not familiar with the image integration though, so I may be completely wrong

quiet terrace
#

When running npm run dev, what file is it calling as I see a few config files?

warm folio
#

Not sure if I understand your question correctly, but npm run dev causes your package manager npm to look into your package.json and look for a dev script there

#

Then it will run the command / file shown there

quiet terrace
#

Essentially I'm looking to see where that path is defined so I can double check it.

warm folio
#

I was referring to the location in your code where you import /assets/logo.png

#

I don't know where you are importing that

#

But this is the path that's shown in the error message, so it must be somewhere 😄

quiet terrace
#

Yeah it's not letting the server launch since that error is being thrown, which is why I inquired as to where it may be calling that exactly.

warm folio
#

When you do a full-text search in VS Code for logo.png, does it show you any hits?

quiet terrace
#

I'm used to Xcode, not VSCode. In Xcode I can search the entire codebase for text lol I haven't figured out how to do that in VSCode.

warm folio
#

Haha ok, sorry for assuming VS Code

#

The editor doesn't matter that much as long as you can find the line referring to the logo

#

In VS Code, it's the magnifying glass in the sidebar on the left

#

Which searches the entire folder you've opened in VS Code (so everything that's shown in the explorer view on the left, topmost icon in the sidebar)

#

If the explorer view shows your entire PC, so more than just the project you're working on, it would be helpful to use File > Open Folder and open your project folder. This makes it a lot more focused to work on a project in VS Code

quiet terrace
#

So it appears possibly that by adding the import, and answering yes to some of the prompts it changed the directory and added public/ as a directory?

warm folio
#

Not sure if I can follow!

#

Have you tried removing the image integration from your Astro config file (astro.config.mjs)?

quiet terrace
#

Allow me to try to explain a bit.

warm folio
#

This should at least bring you back to a startable server I hope

quiet terrace
#

When installing npx astro add image, the CLI provided me with various prompts, one asking me if I wanted change my astro.config.mjs file. After doing so, I restarted the server and it began throwing that error. I located the path causing the issue and corrected it by adding explicitly public/assets/logo.png. I'm unsure what would cause that error to be thrown by changing the astro config as it did not appear that the changes would affect the header file which is where the path issue was thrown.

#

At this time, it appears things are functioning correctly now that I have corrected the path issue. I should be clear, this is not a vanilla Astro project as I am using a theme provided on the Astro website - I'm unsure if that affects it at all as well.

warm folio
#

Ok gotcha, thanks for explaining!

quiet terrace
#

No problem! Thanks for being patient lol stepping out of my comfort zone and wheelhouse here a bit.

warm folio
#

Unfortunately I'm also unsure how such a hard error like the server not being able to start up anymore could be caused by the image integration, but given that it's still marked as experimental, this may actually be a bug

quiet terrace
#

Should I create an issue or bug anywhere to have it looked into?

warm folio
#

The expected behavior in my opinion is that individual pages which reference an image that can't be loaded (due to whatever reason) may show a nice error page indicating what went wrong, but it should not kill the server and not allow it to start up anymore

#

Yes, that would be very helpful I think!

#

!issue

chilly loomBOT
quiet terrace
#

❤️ Will do!

warm folio
#

Thank you 💜

#

But be prepared that you will need to create a little reproduction on StackBlitz, which may take some time

#

If you don't have time for this that's totally understandable

#

But it will be required for the devs to be able to reproduce and then fix the issue

quiet terrace
#

Sure! This is primarily unchanged template. I'm hopeful it won't be too difficult but I'm a fan of helping open source communities as I come from one which is what this projects for 🙂

quiet terrace
#

Hippo, is there a method to remove the import I added? 🤔

warm folio
#

Which import are you referring to?

#

The one to your .astro file inside the layout? The one to the image integration in your Astro config file? Another one?

#

It always helps to post a line of code or two here to establish context on what you‘re referring to. This is your space here and you can post any code you think may be helpful to improve understanding

quiet terrace
#

Sorry, by import I should have been much more clear. I would like to remove the added experimental feature that I added. Is there a specific way to do that?

warm folio
#

As far as I know there’s no equivalent to astro add that removes the integration again, but the key changes are an entry in your package.json pointing to @astrojs/image, as well as an accompanying import and inclusion in the config object in your astro.config.mjs

#

You can uninstall the package using npm uninstall @astrojs/image

#

And the removal from the Astro config file is removing the two lines referring to the integration

#

That should be all

quiet terrace
#

Trying to deploy to Github... Got this error when trying to get some CI/CD loaded up...

YAML Exception reading /github/workspace/src/pages/tags/[tag].astro: (<unknown>): mapping values are not allowed in this context at line 14 column 7 
19
             ERROR: YOUR SITE COULD NOT BE BUILT:
20
                    ------------------------------------
21
                    Invalid YAML front matter in /github/workspace/src/pages/tags/index.astro
#

Turns out that may have been an issue with how we had our config, but our site is displaying our content, but with no CSS? 🤔

#

Nevermind, I'm dumb.

warm folio
#

Haha, no worries, glad to hear you got it solved!

quiet terrace
#

This is likely more a generic TS or JS question so please forgive me... We're having a slight issue when we mimic the templates date input we don't get the proper date and time. I was hoping that we could somehow fix this so we could either understand how to properly input the time or make it so we could input the authors local time and it would just display properly?

export interface Props {
  datetime: string | Date;
  size?: "sm" | "lg";
  className?: string;
}

export default function Datetime({ datetime, size = "sm", className }: Props) {
  return (
    <div className={`flex items-center space-x-2 opacity-80 ${className}`}>
      <svg
        xmlns="http://www.w3.org/2000/svg"
        className={`${
          size === "sm" ? "scale-90" : "scale-100"
        } inline-block h-6 w-6 fill-skin-base`}
        aria-hidden="true"
      >
        <path d="M7 11h2v2H7zm0 4h2v2H7zm4-4h2v2h-2zm0 4h2v2h-2zm4-4h2v2h-2zm0 4h2v2h-2z"></path>
        <path d="M5 22h14c1.103 0 2-.897 2-2V6c0-1.103-.897-2-2-2h-2V2h-2v2H9V2H7v2H5c-1.103 0-2 .897-2 2v14c0 1.103.897 2 2 2zM19 8l.001 12H5V8h14z"></path>
      </svg>
      <span className="sr-only">Posted on:</span>
      <span className={`italic ${size === "sm" ? "text-sm" : "text-base"}`}>
        <FormattedDatetime datetime={datetime} />
      </span>
    </div>
  );
}

const FormattedDatetime = ({ datetime }: { datetime: string | Date }) => {
  const myDatetime = new Date(datetime);

  const date = myDatetime.toLocaleDateString([], {
    year: "numeric",
    month: "long",
    day: "numeric",
  });

  const time = myDatetime.toLocaleTimeString([], {
    hour: "2-digit",
    minute: "2-digit",
  });

  return (
    <>
      {date}
      <span aria-hidden="true"> | </span>
      <span className="sr-only">&nbsp;at&nbsp;</span>
      {time}
    </>
  );
};
#

This is how the time currently put in, but it never shows accurate it seems?
pubDatetime: 2023-02-08T03:06:31Z
I'm unsure if it's because of the Z referring to Zulu time or if it's something else.

#

That date / time displays February 7, 2023 | at 10:06 PM which doesn't make much sense?

warm folio
#

The Z indicates that this is an UTC date/time format. Apparently your timezone is so far away from UTC that this is 10:06 PM the day before in your local time.

quiet terrace
#

I’m EST. 🫣

warm folio
#

That explains it. A 5 hour difference to UTC.

#

It‘s a common best practice to use UTC when storing dates, and then formatting them on display in the local timezone of the reader

#

That’s why the example code you‘ve seen uses UTC

quiet terrace
#

Gotcha! I’m staring to make some big project changes and breaking everything 🥴 lol I guess that’s one way to learn

warm folio
#

How was that slogan? Move fast and break things! 🤖 😄

quiet terrace
#

Yep! Essentially what I wanted to do was add a Projects page, similar to the Posts page. So I copied what I thought was essential "posts" parts and then pasted and renamed lol

warm folio
#

I think you‘re doing great! So much motivation and persistence in working through the first struggles that are common with any new technology

#

I also like a lot to learn through experimentation

quiet terrace
#

Thanks! I apologize if these questions get annoying lol I can stop! Just let me know...

I'm hitting some barriers where, when I duplicate and then import things in the newly copied file, I'm getting import errors. This is in a [slug].astro file. My wonder is if you can only have 1 slug file or if they need to be named differently?

Already included file name 'Desktop/Ten Eight Studios/Projects/OpenBytes Website/OBAstroSite/Site/src/layouts/ProjectDetails.astro' differs from file name 'Desktop/Ten Eight Studios/Projects/OpenBytes Website/OBAstroSite/Site/src/layouts/projectDetails.astro' only in casing.
  The file is in the program because:
    Root file specified for compilation
    Imported via "@layouts/ProjectDetails.astro" from file 'Desktop/Ten Eight Studios/Projects/OpenBytes Website/OBAstroSite/Site/src/pages/projects/[slug].astro'
    Root file specified for compilationts(1261)
quiet terrace
#

I think I am past that... now I have 12 more issues 🙄

warm folio
#

You can have as many dynamic route files as you like, your getStaticPaths function inside the dynamic route file determines what routes the particular page is responsible for

quiet terrace
# 
---
import Layout from "@layouts/Layout.astro";
import Header from "@components/Header.astro";
import Footer from "@components/Footer.astro";
import Tag from "@components/Tag.astro";
import Datetime from "@components/Datetime";
import type { CollectionEntry } from "astro:content";

export interface Props {
  project: CollectionEntry<"projects">;
}

const { project } = Astro.props;

const { title, author, description, ogImage, pubDatetime, tags } = project.data;

const { Content } = await project.render();

const ogUrl = new URL(ogImage ? ogImage : `${title}.svg`, Astro.url.origin)
  .href;
---

<Layout title={title} author={author} description={description} ogImage={ogUrl}>
  <Header />
  <div class="mx-auto flex w-full max-w-3xl justify-start px-2">
    <button
      class="focus-outline mt-8 mb-2 flex hover:opacity-75"
      onclick="history.back()"
    >
      <svg xmlns="http://www.w3.org/2000/svg"
        ><path
          d="M13.293 6.293 7.586 12l5.707 5.707 1.414-1.414L10.414 12l4.293-4.293z"
        ></path>
      </svg><span>Go back</span>
    </button>
  </div>
  <main id="main-content">
    <h1 class="post-title">{title}</h1>
    <h3 class="author">by: {author}</h3>
    <Datetime datetime={pubDatetime} size="lg" className="my-2" />
    <article id="article" role="article" class="prose mx-auto mt-8 max-w-3xl">
      <Content />
    </article>

    <ul class="tags-container">
      {tags.map(tag => <Tag name={tag} />)}
    </ul>
  </main>
  <Footer />
</Layout>

<style>
  main {
    @apply mx-auto w-full max-w-3xl px-4 pb-12;
  }
  .post-title {
    @apply text-2xl font-semibold text-skin-accent;
  }
  .tags-container {
    @apply my-8;
  }
</style>
warm folio
#

What is the full path of this file?

quiet terrace
#

src/layouts

warm folio
#

And the file name?

quiet terrace
#

This is a direct copy of an exsisting file, same directory with only changes being name changing from anything post or posts to project and projects.

warm folio
#

And into which page (with which full path + file name) is this layout being imported?

quiet terrace
#

ProjectDetails.astro on this one.

#

Just threw more errors PepeYikes

It's being imported into [slug].astro

warm folio
#

Ok, so the code above is from src/layouts/ProjectDetails.astro. Can I have a look at your src/pages/[slug].astro as well?

quiet terrace
#

This file is also throwing errors. ```ts

import { CollectionEntry, getCollection } from "astro:content";
import Projects from "@layouts/Projects.astro";
import ProjectDetails from "@layouts/ProjectDetails.astro";
import getSortedprojects from "@utils/getSortedProjects";
import getPageNumbers from "@utils/getPageNumbers";
import slugify from "@utils/slugify";
import { SITE } from "@config";
export interface Props {
post: CollectionEntry<"blog">;
}
export async function getStaticPaths() {
const projects = await getCollection("projects", ({ data }) => !data.draft);
const postResult = projects.map(project => ({
params: { slug: slugify(project.data) },
props: { project },
}));
const pagePaths = getPageNumbers(projects.length).map(pageNum => ({
params: { slug: String(pageNum) },
}));
return [...postResult, ...pagePaths];
}
const { slug } = Astro.params;
const { post } = Astro.props;
const project = await getCollection("projects");
const sortedProjects = getSortedprojects(project)
const totalPages = getPageNumbers(sortedProjects.length);
const currentPage =
slug && !isNaN(Number(slug)) && totalPages.includes(Number(slug))
? Number(slug)
: 0;
const lastProject = currentPage * SITE.postPerPage;
const startProject = lastProject - SITE.postPerPage;
const paginatedPosts = sortedProjects.slice(startProject, lastProject);

{
project ? (
<ProjectDetails project={project} />
) : (
<Projects
projects={paginatedPosts}
pageNum={currentPage}
totalPages={totalPages.length}
/>
)
}

warm folio
#

Hmm your [slug].astro logic looks wrong. Basically what you're doing there is getting the contents of your "projects" collection inside getStaticPaths(), and then returning the individual entries as a project prop along with their slug in params (and in addition to that you also join this with the pagePaths, which is a part that I don't quite understand yet).

#

However, in your "main code" outside the getStaticPaths() function, you again get the contents of your "projects" collection, although you already did so before in getStaticPaths()

#

This is probably a misunderstanding about how dynamic routes work

#

Dynamic routes work in a two-step process: First, only your getStaticPaths() function gets called and the results returned by this function generate an array of routes, so individual pages that users can request.

#

Then, in a second step, your main code gets called as many times as there are entries in the array you returned from getStaticPaths(), and the properties you put inside that array will be present in Astro.params and Astro.props respectively

#

So instead of const project = await getCollection("projects"); you can just get your individual project right away with const { project } = Astro.props; because you already put this into the props

quiet terrace
#

Interesting. So then the logic from the template all together is wrong....

warm folio
#

It seems to unfortunately. I'm not familiar with this particular template

#

This is probably not an official Astro-maintained template but a community one, and it may include bugs and misunderstandings

#

Maybe it helps if you start a bit smaller and copy examples from our docs to get a working dynamic route and be able to play around with it

#

It's really just a few lines of code

#

And then you can gradually introduce complexity 😄

quiet terrace
#

Is there a chance that my VSCode is just throwing errors to be cranky? I just did npm run dev and my site works properly? 🤔

#

That doesn't seem right...

quiet terrace
#

Oh this is good, this is a different error!

Cannot destructure property 'title' of 'project.data' as it is undefined.

warm folio
#

The "errors" you posted are not critical errors that prevent the code from working, what you're seeing there is TypeScript yelling at you that you're not writing code that conforms with the formatting rules and types that were defined for your project

quiet terrace
quiet terrace
warm folio
#

Basically these errors/warnings are trying to help you write cleaner & less error prone code that follows a consistent code style. You can normally pick your preference about how much it should nag you when you create a new Astro project, but you started with this template and the template seems to be using a stricter preference

quiet terrace
#

Gotcha! That makes much more sense.

warm folio
#

Or in short, by using this template, you're playing Astro in hard mode

#

With extra boss fights and some errors here and there 😆

quiet terrace
#

Are these errors problems safe to where I can push to production with these?

warm folio
#

Generally speaking yes, after you've built your site, all this code has done its job and will not be used by the client

#

As long as you don't use SSR (server-side rendering), because then, the code will be run by the live site as well

#

Have you had a look at our amazing tutorial yet?

#

It takes you through the entire process of building a blog with Astro and explains every step really well

#

Without relying on any third-party templates that may lead you astray 😉

quiet terrace
#

I truthful haven't touched Astro outside of this template lol this is the most I've dove into it. I really should take a giant step back and start from the beginning.

warm folio
#

Oh wow, yeah, then you really jumped head first into the mud! 😄

#

So yes, I agree with your giant step back idea. This will lead you onto the happy path

quiet terrace
#

Thank you very much for all your patience and help, it honestly has been a nice change compared to other communities.

warm folio
#

Astro does work really well from my experience, I've set up new sites quite a bit already and also took the tutorial myself to test it (I'm one of the docs guys), and it's really wonderful

#

You're most welcome! Thank you too for your patience and willingness to learn! That's a great trait 🙂

tight kettle
#

So, VS Code. Does anyone know how to stop the highlighting of all the same element in a .astro file? I just want the opening and closing tag to be highlighted.

quiet terrace
#

Hi @tight kettle - You might want to create your own thread within #1019713903481081876 for someone to respond to as I'm not well versed with VS Code unfortunately.

#

I'm curious if someone could elaborate on the below terminal warning... I did check my config.ts and it is labeled as project there, however in some instances throughout my site I have called my collection projects. Does namespacing matter in this instance?

03:07:31 PM [content] Watching src/content/ for changes
03:07:32 PM [content] "project" is not a collection. Check your content config for typos.
warm folio
#

What does your folder structure below src/content look like?

#

The names of the folders must match the ones defined in your config

quiet terrace
#

Ah. After reviewing that, it appears I had it labeled projects not project. Upon fixing, I was actually able to fix the warnings displayed previously. Thanks again for rubber_duck 'ing with me!

warm folio
quiet terrace
#

Alright so I've got a component in which I am displaying on my layout. I can see it and I like it however it is not centered in the rest of the content as I would assume it would? Is this a CSS thing or a layout thing?

// Component
---
import Hr from "./Hr.astro";

const members = [ 
    "8268288",
    "47156971",
    "103295874",
    "7420011"
]

const url = "https://avatars.githubusercontent.com/u/${members}?v=4"
---

<div id="about" class="mb-28 max-w-3xl">
    { members.map((members) => <img class="w-32 rounded-full display: inline p-4" src={`https://avatars.githubusercontent.com/u/${members}?v=4`}/>) }
</div>

// Layout
---
import { SITE } from "@config";
import Breadcrumbs from "@components/Breadcrumbs.astro";
import Footer from "@components/Footer.astro";
import Header from "@components/Header.astro";
import Members from "@components/Members.astro";
import Layout from "./Layout.astro";

export interface Props {
  frontmatter: {
    title: string;
    description?: string;
  };
}

const { frontmatter } = Astro.props;
---

<Layout title={`${frontmatter.title} | ${SITE.title}`}>
  <Header activeNav="about" />
  <Breadcrumbs />
  <main id="main-content">
    <section id="about" class="prose mb-28 max-w-3xl prose-img:border-0">
      <h1 class="text-2xl tracking-wider sm:text-3xl">{frontmatter.title}</h1>
      <slot />
    </section>
    <Members />
  </main>
  <Footer />
</Layout>
#

Ah! I fixed it. It was a layout sisue.

#

The <Members /> needed to be below the </section> and within the <main> block.

quiet terrace
#

After using the following code, it seems to put a weird .. between each image that I cannot seem to find on the Inspect Element. Is this something caused by the code possible?

---

export interface Member {
    id: string
    url: string
}

export type MemberList = Array<Member>

const members: MemberList = [ 
    { id: "8268288", url: "https://github.com/0xLeif"},
    { id: "47156971", url: "https://github.com/haIIux"},
    { id: "103295874", url: "https://github.com/fullqueuedeveloper"},
    { id: "7420011", url: "https://github.com/parshav"}
]
---

<div id="about" class="mb-28 max-w-3xl">
    { 
        members.map(
            (members) => 
            <a href={members.url}>
                <img class="w-32 rounded-full display: inline p-4" src={`https://avatars.githubusercontent.com/u/${members.id}?v=4`}/>
            </a>
        ) 
    }
</div>
#

Swapping over and using grid instead of inline and moving the grid to the div fixes it!

quiet terrace
#

I am planning to implement analytics which require me to input a app id. I'd like to keep that id secure, therefore I believe I want to use a .env file. With that being said, I notice a file that is called .env.d.ts I am unable to find great clarity as to what that is used for. I noticed below where it is mentioned, but is that a required step when using .env files?
https://docs.astro.build/en/guides/environment-variables/#intellisense-for-typescript

Astro Documentation
Using environment variables

Learn how to use environment variables in an Astro project.

#

Also, when implementing analytics... can I use the Layout.astro files as my triggers to send various signals? 🤔

#

I've installed the analytics package I'd like to use, but I don't understand this... Specifically, I know it exists but I'm unsure how to declare the module. The only file I have labeled .d.ts is explained above.

  Try `npm i --save-dev @types/telemetrydeck__sdk` if it exists or add a new declaration (.d.ts) file containing `declare module '@telemetrydeck/sdk';```
quiet terrace
#

So, I added it to my types.d.ts file and the above error went away but unfortunately no matter how I try to call it - nothing happens 😦

quiet terrace
#

Having an issue where I am unable to run npm run astro build... any advice would help.

08:02:56 AM [content] Types generated 354ms
08:02:56 AM [build] output target: static
08:02:56 AM [build] Collecting build info...
08:02:56 AM [build] Completed in 415ms.
08:02:56 AM [build] Building static entrypoints...
[astro:build] ENOENT: no such file or directory, open 'Site/node_modules/@astrojs/compiler/astro.wasm'
file: Site/src/pages/projects/index.astro:undefined:undefined
 error   ENOENT: no such file or directory, open 'Site/node_modules/@astrojs/compiler/astro.wasm'
  Hint:
    This is almost always a problem with the Astro compiler, not your code. Please open an issue at https://astro.build/issues/compiler.
  File:
    Site/src/pages/projects/index.astro
#

The files listed were untouched.

quiet terrace
#

Bump for this issue 😦

vernal plume
coarse pumice
quiet terrace
#

Correct! I'll share what you provided me here so it can be shareable.

quiet terrace
#

The steps used to correct the issue with the compiler above were as follows...

• Upgrade Astro to newest minor version: astro": "^2.0.11". npm install astro@^2.0.11
• Remove dependencies. rm -rf node_modules
• Reinstalled. npm install
• Run npm run build

Believe that this issue was caused due to me running npm astro build which may lead to unexpected behaviour (npm trying to discover astro as an executable and passing build as first argument but the caller is different from usual).

runic bay
runic bay
#

@quiet terrace