Here are useful additions for Astro.
Package | Release Notes |
---|---|
astro-robots-txt | |
astro-webmanifest | |
astro-sitemap |
MIT
Makes it easy to add robots.txt, sitemap and web app manifest during build to your Astro app.
License: MIT License
Here are useful additions for Astro.
Package | Release Notes |
---|---|
astro-robots-txt | |
astro-webmanifest | |
astro-sitemap |
MIT
using version 0.3.1 of astro-webmanifest
with astro.config.mjs integration settings:
webmanifest({
icon: ,
name: ,
short_name: ,
description: ,
start_url: '/',
theme_color: '#101726',
background_color: '#101726',
display: 'standalone'
})
upon npm run build
astro generated pages contain <link rel="manifest" href="/manifest.webmanifest" crossorigin="anonymus">
issue: "anonymus" should be "anonymous".
feature request: is this possible to add as a setting change like
`{ crossorigin: 'anonymous' || 'use-credentials' } ?
Hello,
unfortunately the (generated) folder name "icons" is a system folder name in Linux and therefore cannot be used. How can the name of the folder be changed in the settings in order to be able to use the Astro package?
Thank you in advance!
Best regards
I added the site property and added the function call to integrations but I got the following error:
robotsTxt is not defined
ReferenceError: robotsTxt is not defined
Here is my config file:
import { defineConfig } from 'astro/config';
// https://astro.build/config
import sitemap from "@astrojs/sitemap";
// https://astro.build/config
export default defineConfig({
vite: {
ssr: {
external: ['svgo']
}
},
site: 'https://kernixwebdesign.com',
integrations: [sitemap(), robotsTxt()]
});
Any idea what the issue is?
Hitting an issue when the plugin is inserting the meta links it tries to find a page of 500/index.html
however Astro as generated 500.html
Disabling the inserting meta links fixes the issue.
running Astro 4.15.3
Here is the stack trace:
8:59:15 AM: astro-webmanifest: `manifest.webmanifest` is created.
8:59:15 AM: ENOENT: no such file or directory, open '/opt/build/repo/dist/500/index.html'
8:59:15 AM: Stack trace:
8:59:15 AM: at async open (node:internal/fs/promises:639:25)
8:59:15 AM: at async processPages (file:///opt/build/repo/node_modules/.pnpm/[email protected]/node_modules/astro-webmanifest/dist/index.js:491:21)
8:59:15 AM: at async astro:build:done (file:///opt/build/repo/node_modules/.pnpm/[email protected]/node_modules/astro-webmanifest/dist/index.js:606:11)
8:59:15 AM: at async runHookBuildDone (file:///opt/build/repo/node_modules/.pnpm/[email protected]_@[email protected][email protected]/node_modules/astro/dist/integrations/hooks.js:428:7)
8:59:15 AM: at async AstroBuilder.run (file:///opt/build/repo/node_modules/.pnpm/[email protected]_@[email protected][email protected]/node_modules/astro/dist/core/build/index.js:180:7)
Is it possible to inject the webmanifest not only at build, but at astro dev
? Looked briefly into the integration API and it seems that there is no hook present that we "just can use" to replicate the behavior for dev, too.
Maybe the injection via script at astro:config:setup
is possible - if injected webmanifest elements after page load will be applied?
Currently astro-webmanifest is incompatable with Astro 3 because of dependency from sharp@^0.31.3
On build it gives error:
MissingSharp: Could not find Sharp. Please install Sharp (`sharp`) manually into your project.
Updating dependency to sharp@^0.32.5 will fix the problem
Hi, in case of long xml contents (programmatic SEO SSR pages for example), I'd like to separate the routes in separated sitemaps, e.g.:
sitemap-index.xml, contains sitemap-0.xml:
<?xml version="1.0" encoding="UTF-8"?>
<sitemapindex xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
<sitemap>
<loc>https://example.com/sitemap-0.xml</loc>
</sitemap>
</sitemapindex>
What if, the main sitemap contains also sub sitemaps:
<?xml version="1.0" encoding="UTF-8"?>
<sitemapindex xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
<sitemap>
<loc>https://example.com/sitemap-0.xml</loc>
</sitemap>
<sitemap>
<loc>https://example.com/sitemap-my-sub-route.xml</loc>
</sitemap>
<sitemap>
<loc>https://example.com/sitemap-my-sub-route-second.xml</loc>
</sitemap>
<sitemap>
<loc>https://example.com/sitemap-my-routes-grouped-here.xml</loc>
</sitemap>
</sitemapindex>
Is that achievable already?
I know I can set "entryLimit: 50," and this will split equally the routes in the sitemaps, but I'd rather want to group a specified list of routes in defined sitemaps.
I'm generating a sitemap with advanced config. I made createLinkInHead: false still it is adding sitemap-index.xml to head of every page. What would be the fix?
11:04:32 [build] Waiting for the astro-sitemap integration... astro-sitemap: Sitemap links are inserted into <head> section of generated pages (17768 of 17768).
Thanks
Hi, I know this might sound strange for a sitemap, but could you add xsl stylesheets for astro-sitemap?
pnpm run build --experimental-integrations
Debugger listening on ws://127.0.0.1:32835/cd9a281a-2926-4ceb-9980-5b7319f7b707
For help, see: https://nodejs.org/en/docs/inspector
Debugger attached.
@example/[email protected] build /home/j/DEV/2706/pure/pure
astro build "--experimental-integrations"
Debugger listening on ws://127.0.0.1:38863/d96c94cd-8a6e-46c2-bce9-71c05dee7600
For help, see: https://nodejs.org/en/docs/inspector
Debugger attached.
Waiting for the debugger to disconnect...
node:internal/errors:465
ErrorCaptureStackTrace(err);
^
Error [ERR_MODULE_NOT_FOUND]: Cannot find package '@astrojs/sitemap' imported from /home/j/DEV/2706/pure/pure/astro.config.mjs
at new NodeError (node:internal/errors:372:5)
at packageResolve (node:internal/modules/esm/resolve:954:9)
at moduleResolve (node:internal/modules/esm/resolve:1003:20)
at defaultResolve (node:internal/modules/esm/resolve:1218:11)
at ESMLoader.resolve (node:internal/modules/esm/loader:580:30)
at ESMLoader.getModuleJob (node:internal/modules/esm/loader:294:18)
at ModuleWrap. (node:internal/modules/esm/module_job:80:40)
at link (node:internal/modules/esm/module_job:78:36) {
code: 'ERR_MODULE_NOT_FOUND'
}
ELIFECYCLE Command failed with exit code 1.
Hi,
I had the webmanifest working prefectly in Astro 3. I upgraded to Astro 4 and found the webmanifest does not work any more. There is always a residual .mjs file after a build. Besides astro-webmanifest
, I am using @astro/sitemap
and astro-robots-txt
in my config. I was also generating an RSS feed using @astrojs/rss
, which seems to have stopped working now. I am mentioning it to cover the off chance that it might be interacting with astro-webmanifest
.
Cheers!
When I use insertAppleTouchLinks
flag, the apple-touch-icon
does not get generated, neither icon, nor head
tag.
Without it Apple devices do not see the favicons in PWA mode.
I use @astro/vercel adapter, but it should not cause any problems.
If I run npm add astro-robots-txt
it will install the package. But the auto-installer is not working. Its not prompting to try and update the Astro config.
For import robotsTxt from "astro-robots-txt";
Current solution
// @ts-ignore
import robotsTxt from "astro-robots-txt";
I run into this error when I try building my site :
> astro build
file:///Users/cody/workspace/pokedex/node_modules/astro-sitemap/dist/index.js:340
import { SitemapItemLoose as SitemapItemLoose2, LinkItem, EnumChangefreq } from "sitemap";
^^^^^^^^
SyntaxError: Named export 'LinkItem' not found. The requested module 'sitemap' is a CommonJS module, which may not support all module.exports as named exports.
CommonJS modules can always be imported via the default export, for example using:
import pkg from 'sitemap';
const { SitemapItemLoose: SitemapItemLoose2, LinkItem, EnumChangefreq } = pkg;
at ModuleJob._instantiate (node:internal/modules/esm/module_job:127:21)
at async ModuleJob.run (node:internal/modules/esm/module_job:193:5)
at async Promise.all (index 0)
at async ESMLoader.import (node:internal/modules/esm/loader:337:24)
Following the pattern of how sitemap option is done, the host could also be resolved automatically from the Astro config site
value, so it could be both boolean or string(s):
sitemap
Type | Required | Default value |
---|---|---|
Boolean / String / String[] |
No | true |
As I have checked both inspiration packages accepts sitemap
as string (gatsby-plugin-robots#options and generate-robotstxt) and leaves consumer responsible for the values they pass, but astro-robots-txt
package targets Astro framework, so it does automatic sitemap
resolving which is smart. Why couldn't it do the same for host
value?
host
Type | Required | Default value |
---|---|---|
Boolean / String |
No | undefined |
Having that in mind, available host
types would be Boolean
or String
and reflect the following flows:
host: undefined
-> default (same as is now, host is omitted)host: true
-> would resolve host automatically via Astro site prop and will include it into sitemaphost: 'any-string-value.com'
-> would print out the custom value (as it works now)host
prop be available as Boolean
/ String
Here's my astro config:
import { defineConfig } from "astro/config"
import node from "@astrojs/node"
import vue from "@astrojs/vue"
import svgLoader from "@gkatsanos/vite-svg-loader"
import tailwind from "@astrojs/tailwind"
import robotsTxt from "astro-robots-txt"
// https://astro.build/config
export default defineConfig({
server: {
port: 3000,
host: "0.0.0.0",
},
output: "server",
adapter: node({
mode: "standalone",
}),
build: {
assets: "requests-frontend/_astro",
},
vite: {
server: {
proxy: {
"^/octopus/api/.*": {
target: "https://www.wlw-staging.de",
changeOrigin: true,
},
},
},
plugins: [
svgLoader({
defaultImport: "url", // or 'raw'
}),
],
ssr: {
noExternal: ["path-to-regexp"],
},
optimizeDeps: {
// Why? dd-trace attempts to patch graphql, but it's not a dependency of this project.
exclude: ["graphql"],
},
},
integrations: [
vue(),
tailwind(),
robotsTxt({
policy: [
{
userAgent: "*",
// The next line enables or disables the crawling on the `robots.txt` level
disallow: "/",
},
],
}),
],
})
Looking at the HTML and the network tab, dont see a robots file or a meta tag.. whats up?
btw my Astro app is served from a sub-directory ( www.example.com/myastroapp/ ) with an nginx webserver on top of it.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.