#723 Update Astro guide to reflect recent api changes

docs/src/astro-guide/10-search.md

@@ -133,7 +133,7 @@ In `src/components` create a file called `Search.astro`.
      * Create a result link for the given blog post.
      */
     private async createResultItem(subject: string): Promise<HTMLAnchorElement> {
-      const post = await this.store.getResourceAsync<Blogpost>(subject);
+      const post = await this.store.getResource<Blogpost>(subject);
 
       const resultLine = document.createElement('a');
       resultLine.innerText = post.title;
@@ -181,7 +181,7 @@ Now all that's left to do is use the component to the blog page.
 And there it is! A working real-time search bar 🎉
 
 <video loop autoplay muted>
-<source src="videos/10-1.mp4">
+  <source src="videos/10-1.mp4">
 </video>
 
 ## The end, what's next?

docs/src/astro-guide/3-frontend-setup.md

@@ -3,11 +3,11 @@
 Let's start with setting up Astro.
 
 > **NOTE:** </br>
-> I will use **npm** since that is the standard but you can of course use other package managers like pnpm (which I would normally choose)
+> I will use **npm** since that is the standard but you can of course use other package managers like pnpm.
 
 To create an Astro project open your terminal in the folder you'd like to house the projects folder and run the following command:
 
-```
+```bash
 npm create astro@latest
 ```
 
@@ -27,7 +27,7 @@ Check to see if everything went smoothly by testing out if it works. Run `npm ru
 You should see a boring page that looks like this:
 ![Astro](img/3-1.webp)
 
-### About Astro
+## About Astro
 
 If you've never used Astro before here is a short primer:
 
@@ -38,7 +38,7 @@ Routing is achieved via the filesystem so for example the file `pages/blog/how-t
 
 To share layouts like headers and footers between pages we use Layout components, these are placed in the `layouts` folder. Let's create a layout right now.
 
-### Layout
+## Layout
 
 In `src` create a folder called `layouts` and in there a file called `Layout.astro`.
 

docs/src/astro-guide/6-generating-types.md

@@ -4,7 +4,7 @@ It's time to generate some Typescript types and display our data in the Astro fr
 
 First things first, install the `@tomic/lib` and `@tomic/cli` packages.
 
-```
+```bash
 npm install @tomic/lib
 npm install -D @tomic/cli
 ```
@@ -14,7 +14,7 @@ We can configure this using the `atomic.config.json` file.
 
 Run the following command to generate one at the current working directory (Make sure this is the root of the Astro project)
 
-```
+```bash
 npx ad-generate init
 ```
 
@@ -40,7 +40,7 @@ Paste the URL as a string in the ontologies array like so:
 
 We're ready to generate the types, Run the following command:
 
-```
+```bash
 npx ad-generate ontologies
 ```
 

docs/src/astro-guide/7-fetching-data.md

@@ -53,19 +53,19 @@ Now that we have a store we can start fetching data.
 
 ## Fetching
 
-To fetch data we are going to use the `store.getResourceAsync()` method.
+To fetch data we are going to use the `store.getResource()` method.
 This is an async method on Store that takes a subject and returns a promise that resolves to a resource.
-When `getResourceAsync` is called again with the same subject the store will return the cached version of the resource instead so don't worry about fetching the same resource again in multiple components.
+When `getResource` is called again with the same subject the store will return the cached version of the resource instead so don't worry about fetching the same resource again in multiple components.
 
-`getResourceAsync` also accepts a type parameter, this type parameter is the subject of the resource's class.
+`getResource` also accepts a type parameter, this type parameter is the subject of the resource's class.
 You could type out the whole URL each time but luckily `@tomic/cli` generated shorthands for us.
 
 Fetching our homepage will look something like this:
 
 ```typescript
 import type { Homepage } from '../ontologies/myPortfolio';
 
-const homepage = await store.getResourceAsync<Homepage>('<homepage subject>'); // Resource<Homepage>
+const homepage = await store.getResource<Homepage>('<homepage subject>'); // Resource<Homepage>
 ```
 
 ## Reading data
@@ -112,7 +112,7 @@ import type { Homepage } from '../ontologies/myPortfolio';
 
 const store = getStore();
 
-const homepage = await store.getResourceAsync<Homepage>(
+const homepage = await store.getResource<Homepage>(
 	import.meta.env.ATOMIC_HOMEPAGE_SUBJECT,
 );
 ---
@@ -128,7 +128,7 @@ Check your browser and you should see the body text has changed!
 
 It's not rendered as markdown yet so let's quickly fix that by installing `marked` and updating our `index.astro`.
 
-```
+```bash
 npm install marked
 ```
 
@@ -142,7 +142,7 @@ import type { Homepage } from '../ontologies/myPortfolio';
 
 const store = getStore();
 
-const homepage = await store.getResourceAsync<Homepage>(
+const homepage = await store.getResource<Homepage>(
   import.meta.env.ATOMIC_HOMEPAGE_SUBJECT,
 );
 
@@ -184,7 +184,7 @@ interface Props {
 const store = getStore();
 const { resource } = Astro.props;
 
-const image = await store.getResourceAsync<Server.File>(
+const image = await store.getResource<Server.File>(
   resource.props.headerImage,
 );
 ---
@@ -217,7 +217,7 @@ const image = await store.getResourceAsync<Server.File>(
 To display the header image we can't just use `resource.props.headerImage` directly in the src of the image element because the value is a reference to another resource, not the image link.
 In most databases or CMSes, a reference would be some ID that you'd have to use in some type-specific endpoint or query language, not in Atomic.
 A reference is just a subject, a URL that points to the resource.
-If you wanted to you could open it in a browser or use the browser fetch API to get the resources JSON-AD and since it is a subject we can do the same we did to fetch the homepage, use `store.getResourceAsync()`.
+If you wanted to you could open it in a browser or use the browser fetch API to get the resources JSON-AD and since it is a subject we can do the same we did to fetch the homepage, use `store.getResource()`.
 
 Once we've fetched the image resource we can access the image URL through the `download-url` property e.g. `image.props.downloadUrl`.
 

docs/src/astro-guide/8-pojects.md

@@ -29,7 +29,7 @@ Now in your data folder create some projects and add them to your homepage resou
 
 Since we changed the ontology we will have to generate our types again:
 
-```
+```bash
 npx ad-generate ontologies
 ```
 
@@ -50,8 +50,8 @@ interface Props {
 const store = getStore();
 
 const { subject } = Astro.props;
-const project = await store.getResourceAsync<Project>(subject);
-const coverImg = await store.getResourceAsync<Server.File>(project.props.image);
+const project = await store.getResource<Project>(subject);
+const coverImg = await store.getResource<Server.File>(project.props.image);
 
 const description = marked.parse(project.props.description);
 ---
@@ -98,7 +98,7 @@ const description = marked.parse(project.props.description);
 
 ```
 
-The component takes a subject as a prop that we use to fetch the project resource using the `.getResourceAsync()` method.
+The component takes a subject as a prop that we use to fetch the project resource using the `.getResource()` method.
 We then fetch the image resource using the same method.
 
 The description is markdown so we have to parse that first like we did on the homepage.
@@ -118,7 +118,7 @@ import Project from '../components/Project.astro';
 
 const store = getStore();
 
-const homepage = await store.getResourceAsync<Homepage>(
+const homepage = await store.getResource<Homepage>(
   import.meta.env.ATOMIC_HOMEPAGE_SUBJECT,
 );
 

docs/src/astro-guide/9-blogs.md

@@ -55,8 +55,8 @@ interface Props {
 const { subject } = Astro.props;
 const store = getStore();
 
-const blogpost = await store.getResourceAsync<Blogpost>(subject);
-const cover = await store.getResourceAsync<Server.File>(blogpost.props.image);
+const blogpost = await store.getResource<Blogpost>(subject);
+const cover = await store.getResource<Server.File>(blogpost.props.image);
 ---
 
 <a href={`/blog/${blogpost.props.titleSlug}`}>
@@ -144,7 +144,7 @@ import BlogCard from '../../components/BlogCard.astro';
 
 const store = getStore();
 
-const homepage = await store.getResourceAsync<Homepage>(
+const homepage = await store.getResource<Homepage>(
   import.meta.env.ATOMIC_HOMEPAGE_SUBJECT,
 );
 
@@ -237,7 +237,7 @@ export const getStaticPaths = (async () => {
 
   // Iterate over the collection and add the title-slug to the paths array
   for await (const subject of collection) {
-    const post = await store.getResourceAsync<Blogpost>(subject);
+    const post = await store.getResource<Blogpost>(subject);
 
     paths.push({
       params: {
@@ -330,7 +330,7 @@ export const getStaticPaths = (async () => {
 
   // Iterate over the collection and add the title-slug to the paths array
   for await (const subject of collection) {
-    const post = await store.getResourceAsync<Blogpost>(subject);
+    const post = await store.getResource<Blogpost>(subject);
 
     paths.push({
       params: {
@@ -353,7 +353,7 @@ const store = getStore();
 
 const { subject } = Astro.props;
 
-const post = await store.getResourceAsync<Blogpost>(subject);
+const post = await store.getResource<Blogpost>(subject);
 
 const content = marked.parse(post.props.description);
 ---
@@ -409,7 +409,7 @@ interface Props {
 
 const { resource } = Astro.props;
 const store = getStore();
-const cover = await store.getResourceAsync<Server.File>(resource.props.image);
+const cover = await store.getResource<Server.File>(resource.props.image);
 ---
 
 <header>