#Astro global import inherits the layout as well.

1 messages · Page 1 of 1 (latest)

edgy salmon
#

I have a <BlogPost/> component which basically takes in the information of a blogpost and displays it as a small tile. Basically used to make a menu of sorts. Now to pass down the information of the blogpost, I import all of my markdown files by using Astro.glob("../blog/*.md"). Its all good but, apparently this also inherits the Layouts that my markdown files inherit. Is there any way to override this?

coarse condor
#

@edgy salmon can I see your folder structure?

edgy salmon
#

@coarse condor

coarse condor
edgy salmon
#

I did a bit of a retard moment with the import path

#

but ignore that

coarse condor
#

not sure if this helps but there's a blog layout that overrides the normal layout

---
layout: ../../layouts/BlogLayout.astro
edgy salmon
# coarse condor what's inside blog/index.astro? also check https://github.com/Gers2017/gers2017.... 
---
import '../../styles/global.css';
import BlogPost from "../../components/blogpost.astro";

let posts = await Astro.glob("../blog/*.md");


---

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vaimer's blog</title>
</head>
<body>
    <div class="main-title"></div>
    <div class="blogs-container">
        {posts.map(post => (
            <BlogPost
                title={post.frontmatter.title} date={post.frontmatter.date} description={post.frontmatter.description}
            />
        ))}
    </div>
</body>
</html>



<style>

body {
    background-color: #222;
}

</style>
#

this is blog/index.astro

edgy salmon
#

when I import the markdown file

#

I automatically inherit blogs.astro layout

#

in blog/index.astro

coarse condor
#

maybe use a base layout for the .md files and wrap your BlogPost with a layout variant
https://docs.astro.build/en/core-concepts/layouts/#markdown-layouts
https://docs.astro.build/en/guides/markdown-content/#markdown-and-mdx-pages
the layout component: "This component will wrap your Markdown content, providing a page shell and any other included page template elements."

Astro Documentation
Layouts

An intro to layouts, a type of Astro component that is shared between pages for common layouts.

Astro Documentation
Markdown & MDX

Learn how to create content using Markdown or MDX with Astro

sweet rock
#

fuck astro

#

sry for the outrage, past memories

edgy salmon
#

first of all let me name my files properly, and then make the repository public

#

so you can properly see whats going on

#

ignore the great name I've given to this

#

I am doing the same thing right? Using a base layout for the markdown files

#

I just don't get why importing the md files also inherits the layout

coarse condor
#

inside BlogListItem

---
const { title, date, description, is_normal_post } = Astro.props;
---

<div class="container">
    {
        is_normal_post ? (
           <div class="title">{title}</div>
           <div class="description">{description}</div>
           <div class="date">{date}</div>
        ) : (
            <h1>{title}</h1>
        )
    }
</div>
# 
    <div class="blogs-container">
        {posts.map(post => (
            <BlogListItem
                title={post.frontmatter.title}
                date={post.frontmatter.date}
                description={post.frontmatter.description}
                is_normal_post={true} // <---- idk change it for a variable
            />
        ))}
    </div>
edgy salmon
#

I'll add this later, but this isn't relevant to layouts is it? blog/index.astro is supposed to display all the blogpost names and such using the BlogListItem.astro component (sorry I messed up the name earlier).

#

I don't really need 2 layouts

#

only 1 for the blogposts themselves

#

/ for the homepage
/blog for browsing blogs
/blogs/[blogname] for the blogs themselves

So adding a layout for /blog would be unnecessary

#

dammnit astro why does Astro.glob() inherit layouts

#

aaa

coarse condor
#

you could make your life easier by making 2 components

edgy salmon
coarse condor
#

one being a wrapper for your big bloody blog post and another one as the preview or list item (btw astro has a blog example)

edgy salmon
#

yeah I just found it

coarse condor
edgy salmon
coarse condor
# 
vaimer.subscribe_to('blog', (users)=> users.find('gers').notify())
coarse condor
#

but you want your .md files to behave like two different components right?

#

idk I tweaked the blog example to my needs

edgy salmon
#

smh the astro discord server isn't even responding

coarse condor
#

what about this (and the .md files have none or a basic layout)

{posts.map(post => (
    <!-- import other css -->
    <BlogListItem 
        title={post.frontmatter.title}
        date={post.frontmatter.date}
        description={post.frontmatter.description}
    />
))}
// --------
<!-- import other css -->
{posts.map(post => (
    <RealBlogPost
        title={post.frontmatter.title}
        date={post.frontmatter.date}
        description={post.frontmatter.description}
    />
))}
}
edgy salmon
#

did nothing

edgy salmon
#

you mean an actual blogpost?

coarse condor
#

where is the <slot />?

coarse condor
edgy salmon
#

here's the layout

#

background is red for testing (I can't see red because the BlogLayout styles cancel this for some reason)

#

thats teh whole problem

coarse condor
#

what if you import the css from a file?

edgy salmon
#

external styles don't work either

#

the thing is

#

the second I remove the import

#

everything works

#

wait

#

maybe I have to do scoped styles?

#

in teh BlogLayout

#

thats the last hope

#

nvm im stupid they're already scoped

#

@coarse condor fixed it

#

but yes it still inherits the layout, I just had to fix the BlogLayout itself

#

so weird

coarse condor
edgy salmon
#

I had to sleep last night so I forgot to say this but thanks a lot for your time and help @coarse condor, rlly appreciate it prayge