Comments (4)
Just in case you don't want to dive into my GitHub repository: here's the /src/config.mjs file.
export const SITE = {
name: 'AstroWind',
origin: 'https://astrowind.vercel.app',
basePathname: '/',
title: 'AstroWind — Your website with Astro + Tailwind CSS',
description: '🚀 AstroWind is a free and ready to start template to make your website using Astro and Tailwind CSS.',
};
export const BLOG = {
disabled: false,
postsPerPage: 4,
blog: {
disabled: false,
pathname: 'blog', // blog main path, you can change this to "articles" (/articles)
},
post: {
disabled: false,
pathname: '', // empty for /some-post, value for /pathname/some-post
},
category: {
disabled: false,
pathname: 'category', // set empty to change from /category/some-category to /some-category
},
tag: {
disabled: false,
pathname: 'tag', // set empty to change from /tag/some-tag to /some-tag
},
};
from astrowind.
Hi again @codewithdary,
We have reviewed in details. The thing is that AstroWind doesn't currently support SSR (or at least part of pages). Everything related to the Blog is developed using the standard for generating static pages through the getStaticPaths()
function. Therefore, the code that follows that function expects certain parameters (for example, page
) that are only available thanks to the result of that function.
code from slug.astro:
// (...)
export async function getStaticPaths() {
if (BLOG?.disabled || BLOG?.post?.disabled) return [];
const posts = await fetchPosts();
return posts.map((post) => ({
params: {
slug: cleanSlug(post.slug),
blog: POST_BASE || undefined,
},
props: { post },
}));
}
const { post } = Astro.props;
// (...)
In this case the same file has the responsibility to decide which pages will be generated and then it waits for a 'post' parameter obtained through Astro.props that brings the useful data to continue with the singular page.
We are going to study the feasibility of providing a simple code that allows both SSR and static generation. As soon as we have something we will let you know.
For now, you can follow two paths:
- If you don't need SSR, you can make a small adjustment in
astro.config.mjs
:
(...)
- import vercel from '@astrojs/vercel/serverless';
+ import vercel from '@astrojs/vercel/static';
(...)
- output: 'server',
+ output: 'static',
- Or if for you it is essential to have SSR (because you need fresh updates on certain pages or different pages depending on the user), then you should try to get the same information that is now obtained from Astro.props in all Blog pages.
Example:
- export async function getStaticPaths() {
- if (BLOG?.disabled || BLOG?.post?.disabled) return [];
- const posts = await fetchPosts();
- return posts.map((post) => ({
- params: {
- slug: cleanSlug(post.slug),
- blog: POST_BASE || undefined,
- },
- props: { post },
- }));
- }
- const { post } = Astro.props;
+ const { blog, slug } = Astro.params;
+
+ if (!isValidBlogBasepath(blog)) {
+ return new Response(null, {
+ status: 404,
+ statusText: 'Not found'
+ });
+ }
+
+ const post = await getPostBySlug(slug);
const meta = {
title: `${post.title} — ${SITE.name}`,
description: post.description,
canonical: post.canonical || getCanonical(getPermalink(post.slug, 'post')),
image: await findImage(post.image),
ogTitle: post.title,
ogType: "article"
};
I hope I can move forward with it. Anything else feel free to contact us.
from astrowind.
Your solution worked perfectly, thank you so much @widgeter :)
from astrowind.
Hi @codewithdary
I just read this Issue and I'm going to start doing some tests to see what could be the problem.
The first thing that comes to mind is that for AstroWind you don't need the integration with vercel (@astrojs/vercel) since for now it is conceived to be static and has not yet been tested in SSR and that may be the problem.
Is there any specific reason why you have installed the vercel integration?
Anyway, it shouldn't be a problem to install some integration and maybe it's something we need to fix in the template.
I will be testing your repo and in a moment I will give you more details.
from astrowind.
Related Issues (20)
- Issues with peer dependencies found: Compress HOT 2
- Safari only: Related Posts multi-line header links behave unhandy HOT 1
- inline code in 1 backtick was not converted correctly in markdown HOT 1
- Hero2 widget id
- Do I need to change hasExternalScripts to true for Analytics to work?
- red warning text on build HOT 1
- Building the site works though deployed site has CORS errors HOT 1
- Issues with Squoosh Image Optimization
- Navigation bar is getting transparent in iPad and iPhone HOT 1
- Astrowind optimizes images in /public HOT 3
- Safari prices ribbon Title show bug HOT 4
- Component overlap error in case of too many entries.
- BlogHighlightedPosts does not work HOT 2
- Images Distorted in Firefox on macOS and Windows After Scrolling
- This XML file does not appear to have any style information associated with it. The document tree is shown below. HOT 1
- No overlay on the Navbar !!!!
- Icon replacement HOT 1
- cart.json issue? HOT 1
- How to add a phone number property into the frontmatter HOT 1
- The CJK characters in the navigation bar cannot be displayed horizontally
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from astrowind.