satnaing / astro-paper Goto Github PK
View Code? Open in Web Editor NEWA minimal, accessible and SEO-friendly Astro blog theme
Home Page: https://astro-paper.pages.dev/
License: MIT License
A minimal, accessible and SEO-friendly Astro blog theme
Home Page: https://astro-paper.pages.dev/
License: MIT License
In my public directory I have an image file called logosquare.png.
When I try to do a git commit I get the following error:
Preparing lint-staged...
❯ Running tasks for staged files...
❯ package.json — 2 files
❯ * — 2 files
✖ prettier --plugin-search-dir=. --write [FAILED]
↓ Skipped because of errors from tasks. [SKIPPED]
✔ Reverting to original state because of errors...
✔ Cleaning up temporary files...
✖ prettier --plugin-search-dir=. --write:
[error] No parser could be inferred for file: public/logosquare.png
src/content/blog/submitter-formdata.md 217ms
husky - pre-commit hook exited with code 1 (error)
Also it's not well documented how to add images for a blog post.
When using GitHub Pages, asset files like _slug_.d7aeaf57.css
don't load, probably because of the name. It should be replaced by something like slug_d7aeaf57.css
removing the dot and the initial underscore.
Validate the production url on validator.w3.org and seobility.net and try to solve the issues and errors they show to further enhance and improve the quality of template.
How can md add a unique identifier that is used to access the address, such as abbrlink: f773bef3, then the access link is /post/ f773bef3
Hi, is their any official guide on updating the astro paper?
Should mention ESLint in "Tech stack" and "Commands" sections.
in /src/layouts/Layout.astro line 48 <meta property="og:url" content={canonicalURL} />
this will add the same canonical tag to every page
The use of the "rel=canonical" link element is specifically intended for specifying a preferred canonical URL for duplicate or similar pages. It is not necessary for pages that do not have duplicate content or similar versions.
It's important to use the "rel=canonical" link annotation judiciously and only when it's necessary. Adding the canonical tag to every page, even when it's not needed, can lead to confusion and incorrect signals to search engines, potentially affecting your website's search rankings.
Similar to your blog.
I like that design very much.
I've only noticed this issue in Chrome on an M1 laptop, so I'm highly suspicious this is something on my end. Still, it's a part of the user experience and I'm sure many of my readers are using similar setups. Text appears smaller than it did just a few days ago and there's a weird layout shift on page-load.
Unsure if this has something to do with Chrome, Cloudflare, or Astro Paper, but perhaps this community has a few ideas?
Hi, great theme. When I went to set it up right now I got this error when trying to commit:
✔ Preparing lint-staged...
❯ Running tasks for staged files...
❯ package.json — 74 files
❯ * — 74 files
✖ prettier --plugin-search-dir=. --write [FAILED]
↓ Skipped because of errors from tasks. [SKIPPED]
✔ Reverting to original state because of errors...
✔ Cleaning up temporary files...
✖ prettier --plugin-search-dir=. --write:
[error] No parser could be inferred for file: public/assets/dev.svg
[error] No parser could be inferred for file: public/assets/logo.png
[error] No parser could be inferred for file: public/assets/logo.svg
[error] No parser could be inferred for file: public/astropaper-og.jpg
[error] No parser could be inferred for file: public/favicon.svg
[error] No parser could be inferred for file: public/robots.txt
I used npm create astro@latest -- --template satnaing/astro-paper
because I'm on NPM 9.1.2. I installed into my current working directory (which was empty). I ran npm install
after the install. Then I ran git add .
and git commit -m 'Init AstroPaper blog'
and that's when I got this error.
Hello, how are you? I was looking at your theme to guide me on how to make mine and I hope you can help me with this question (it has nothing to do with your theme)
I have all the styles configured in tailwind and I left the layout of the posts for last and I don't know how to add styles to the markdown elements that I want to add, let's say that I want to put a h3(### example) (ONLY IN THE POST SECTION) green color, I have already been advised to do this "Remove the default tailwind base using this config option and add your own that includes the @layer and @apply directives" The problem is that when I configure this
"applyBaseStyles: false" removes ALL the styles that I set before and doesn't even show me the ones that I add with layer and apply, please help me, I'm waiting for your answer.
Cannot find module 'astro' or its corresponding type declarations.ts
I'm not sure where that issue is. I believe I have very similar packages versions to what's on master
$ pnpm list
Legend: production dependency, optional only, dev only
@example/[email protected] /Users/gianpaj/github/escuela-dev/escuela.dev (PRIVATE)
dependencies:
@astrojs/mdx 0.17.2 @types/react 18.0.28 react-dom 18.2.0
@astrojs/react 2.0.2 @types/react-dom 18.0.11 satori 0.3.2
@astrojs/sitemap 1.1.0 astro 2.0.15 tailwindcss 3.2.7
@astrojs/tailwind 3.0.1 flowbite 1.6.3
@tailwindcss/typography 0.5.9 react 18.2.0
BTW: the image is still generating correctly.
Subject says it all.
Thanks for creating this nice template
Hi Satnaing,
My site is live, but the top nav bar with the dark theme toggle and other nav links is not working on mobile web browsers for My Site.
Can you please advise on what I can do to triage this?
If you can help in any way would really appreciate.
regards
Nishad
After running:
yarn create astro -- --template satnaing/astro-paper
yarn
yarn dev
I got:
error Cannot find package 'tailwindcss' imported from /Users/mikelehen/src/vanny-the-van/node_modules/@astrojs/tailwind/dist/index.js
Running yarn add tailwindcss
seems to have fixed the issue.
I added mdx integration to astro for richer blog content, and created an astro component to use in the mdx documents. I think I followed all directions to do so clearly, but client side script
tags don't seem to be working in mdx documents.
I have the component @components/ImagePreview.astro
, and if I use it in, say pages/index.astro
, it works fine. But if I import it to content/blog/my-blog-post.mdx
and use it there, the HTML is rendered but the script does not work. I bumped up to "astro": "^2.10.4",
and "@astrojs/mdx": "^0.19.7",
because I saw the Astro issue regarding this was closed.
I left a comment in that issue thread, saying that this still seems to be an issue for me, but I wasn't sure maybe AstroPaper had some conflicting configurations that I wasn't able to figure out. Link to my comment on the issue
I can get it to work with the is:inline
directive, but according to the docs, it seems like it should properly work...
I've enabled the experimental assets, if that makes any difference, which I doubt because even if I change it to img
instead of Image
from astro:assets
, the behaviour is identical.
ImagePreview.astro
component for reference:
---
import { Image } from "astro:assets";
export interface Props {
src: string;
alt: string;
width: number;
height: number;
}
const props = Astro.props;
---
<!-- Displayed within the page -->
<figure class="figure-display cursor-pointer">
<Image {...props} />
{props.alt ? <figcaption class="my-2">{props.alt}</figcaption> : ""}
</figure>
<!-- Displayed fullscreen when clicked -->
<div
class="figure-preview animate-fade-in fixed left-0 top-0 z-50 m-0 hidden h-full w-full flex-col items-center justify-center bg-skin-fill bg-opacity-80 transition-all"
>
<figure
class="flex max-h-[80%] max-w-[70%] flex-col items-center justify-center"
>
<Image
{...props}
class="animate-fade-in h-[100%] w-[100%] object-contain"
/>
{
props.alt ? (
<figcaption class="animate-fade-in my-2">{props.alt}</figcaption>
) : (
""
)
}
</figure>
</div>
<style>
@keyframes fade-in {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.animate-fade-in {
animation: fade-in 0.3s ease-in-out;
}
</style>
<script>
const displayImage = document.querySelector(".figure-display");
const previewImage = document.querySelector(".figure-preview");
displayImage?.addEventListener("click", () => {
previewImage?.classList.remove("hidden");
previewImage?.classList.add("flex");
});
previewImage?.addEventListener("click", () => {
previewImage.classList.add("hidden");
});
</script>
Similarly to issue #88, build breaks on having a ?
in the title of a post as well.
Not the same error, but also on having quoted text (any of ''
, ""
, backticks) on the description of a post, dev server breaks with errors such as this one.
Parsing the titles and descriptions more intelligently would help authors write more versatile titles.
Also, currently, markdown formatting is not supported in the frontmatter title or description, which would be a nice added functionality.
I am getting a lot of errors when running the npm run build.
I tried the following options to triage the issue:
a. changed the node versions using nvm, but now pegged to latest v16.19.1 lts/gallium release
I could not use v18 as cloudflare build fails with node 18.
b. Did a diff of all the changes from the original template and my current project, to rule out any disruptive changes.
The major change is the cloudflare integration and the changes in the package and package-lock files
Raised a support request with Astro team on discord.
The theme works as expected; the original template has no issues with npm run build
on lts/gallium
Cloudflare integration may be the issue.
Hello!
I advise you to convert the generated previews from SVG to PNG, to bypass the OpenGraph SVG limitation.
Here is a link:
https://dev.to/anasrin/generate-image-from-html-using-satori-and-resvg-46j6
Solution to the problem Error: R] No loader is configured for ".node" files
is here:
evanw/esbuild#1051 (comment)
Hi @satnaing, how is it going? I'm really enjoying using your template, thanks for the hard work. I have the following questions:
Why are you using .env
file to pass the Google Tag and the Google Site Verification instead of using src/config.ts
?
I ask this because seems to be done like that for security reasons but, actually, there is no benefit because both ids are exposed on the HTML code, looking into them is just as simple as mouse right click and select see source code.
Maybe I'm missing something here.
Why sitemap is divided into two files sitemap-0.xml
and sitemap-index.xml
?
Is just for curiosity, I'm not expert here 😅 .
Thanks in advance,
Cheers!
Minimal not working example:
Make a post with title: "Finally: My first blog post".
set ogImage: ""
npm run build
λ src/pages/[ogTitle].svg.ts
Output PNG Image : Adding new posts in AstroPaper theme.png
├─ /Adding new posts in AstroPaper theme.svg (+203ms)
Output PNG Image : Finally: My first blog post.png
error The URL must be of scheme file
File:
/Users/mo/dev/moritz-blogs/node_modules/astro/dist/core/build/generate.js:493:21
Code:
492 | await fs.promises.mkdir(outFolder, { recursive: true });
> 493 | await fs.promises.writeFile(outFile, body, encoding ?? "utf-8");
| ^
494 | }
495 | export {
496 | chunkIsPage,
Stacktrace:
TypeError: The URL must be of scheme file
at open (node:internal/fs/promises:591:10)
at Object.writeFile (node:internal/fs/promises:1017:20)
at generatePath (file:///Users/mo/dev/moritz-blogs/node_modules/astro/dist/core/build/generate.js:493:21)
at async generatePage (file:///Users/mo/dev/moritz-blogs/node_modules/astro/dist/core/build/generate.js:193:5)
at async generatePages (file:///Users/mo/dev/moritz-blogs/node_modules/astro/dist/core/build/generate.js:118:7)
at async staticBuild (file:///Users/mo/dev/moritz-blogs/node_modules/astro/dist/core/build/static-build.js:85:7)
at async AstroBuilder.build (file:///Users/mo/dev/moritz-blogs/node_modules/astro/dist/core/build/index.js:124:5)
at async AstroBuilder.run (file:///Users/mo/dev/moritz-blogs/node_modules/astro/dist/core/build/index.js:156:7)
at async build (file:///Users/mo/dev/moritz-blogs/node_modules/astro/dist/core/build/index.js:37:3)
at async runCommand (file:///Users/mo/dev/moritz-blogs/node_modules/astro/dist/cli/index.js:171:14)
at async cli (file:///Users/mo/dev/moritz-blogs/node_modules/astro/dist/cli/index.js:213:5)
I want to create a static JSON data from the article list and Markdown document, which can be used by other external programs。
I hope astro can support this feature, so that astro can play the role of headless CMS. Thank you very much
Hi!
Thanks a lot for your work! But I meet strange behavior for a new app - when I start the app, I see message WebSocket server error: Port is already in use
. What's wrong?
It looks like there is a conflict between astro check --watch
and astro dev
- when I run those commands separately, I see no error message
I looked at the Astro documentation website. I found they use 2 ESLint plugins. I believe these plugins will enforce quality code. Thanks.
@astrojs/react/client.js
in node_modules/@astrojs/react/src/index.ts
gets resolved to ./src/astrojs/react/client.js
by tsconfig.json
yarn build
yarn run v1.22.19
$ astro build && jampack ./dist
node:fs:600
handleErrorFromBinding(ctx);
^
Error: ENOENT: no such file or directory, open '/home/leesei/blog/astro-paper/src/astrojs/react/client.js'
at Object.openSync (node:fs:600:3)
at Object.readFileSync (node:fs:468:35)
at extractExportsData (file:///home/leesei/blog/astro-paper/node_modules/astro/node_modules/vite/dist/node/chunks/dep-79892de8.js:45100:31) {
errno: -2,
syscall: 'open',
code: 'ENOENT',
path: '/home/leesei/blog/astro-paper/src/astrojs/react/client.js'
}
Node.js v18.14.2
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
I tired adding two paths "@*": ["node_modules/@*", "./src/*"]
according to https://www.typescriptlang.org/docs/handbook/module-resolution.html#path-mapping but then the theme's code fails.
Hello, I am still figuring out Astro and wanted to use your theme. You have done a fabulous job. But instead of working on files, it is much more flexible to work with CMS tools. Can you guide where should I make changes? I tried to use official documentation but seems like it is not working.
I recently forked astro-paper for building a personal blog site and man, it's the best thing. I really loved how the code was structured and was able to pull off something cool by tweaking some things. That aside, I just noticed a bug where if you have a long word without a break as in-line code
(yes, the one with backticks), it doesn't break naturally to next line in mobile view. This makes the other components wrap under less width making the page look weird.
The search box does not return expected results. E.g. in https://astro-paper.pages.dev/search/:
it returns:
but there isn't an actual match
it returns:
but it doesn't return this other article although there is a match.
Do you plan to use ViewTransitions https://astro.build/blog/astro-290/?
Or, may be, you will wait until it is not experimental anymore in 3.0?
Hi!
I'm adding AstroPaper to my personal blog and I came across the need for custom canonical URLs.
Looking at the code, I think that it can be added as an optional attribute to the posts' frontmatter and pass it forward through the Layout template.
What do you think? I'm happy to work on this improvement
Announced here:
https://forestry.io/blog/forestry.io-end-of-life/
Don't know how this will effect you.
Hi, are there any plans to add pwa support in the future?
Hello,
I would like to be able to click on images in a blog post to show a zoomed in version. I often use wide images with lots of details that are easier to view when enlarged to take up the full width of the window.
Hi!
Would love to see the internationalization support, please.
Example implementation in Astro:
https://github.com/withastro/astro/tree/main/examples/docs
Thank you!
Dear @satnaing
Could you please share to the community the design resources on Figma?
Thank you.
How to fix this?
I just wanted to read-time to blog posts, I have already tried to add read-Time docs given by the Astro itself but ended in vain.
Kindly help me figure out how to implement this.
Thank you.
I needed an step-by-step process on how to do this.
Awesome Astro
https://github.com/one-aalam/awesome-astro
You should open a pull request to include Astro Paper in that list.
I installed this template and when changing the theme, the error 'Uncaught SyntaxError: expected expression, got '<'' appears in file toggle-theme.js , but I haven't modified the template.
hi, I am trying to connect CMS REST API.
I tried usual JS debugging for checking response returned, nothing shows up.
Any suggestions?
Hello, I'm facing an error likely from the autoprefixer dependency or the caniuse-lite dependency on the build phase.
Here are the logs:
[19:56:46.707] Cloning github.com/gu-does-git/gudoesdev (Branch: master, Commit: 4499dc8)
[19:56:46.713] The cli flag --force was set. Skipping build cache download.
[19:56:51.317] Cloning completed: 4.609s
[19:56:52.318] Running "vercel build"
[19:56:52.823] Vercel CLI 28.4.17
[19:56:53.434] Running "install" command: `npm install`...
[19:57:00.837]
[19:57:00.837] > [email protected] prepare
[19:57:00.837] > husky install
[19:57:00.837]
[19:57:00.901] husky - Git hooks installed
[19:57:00.916]
[19:57:00.917] added 548 packages, and audited 695 packages in 7s
[19:57:00.917]
[19:57:00.917] 226 packages are looking for funding
[19:57:00.917] run `npm fund` for details
[19:57:00.918]
[19:57:00.918] found 0 vulnerabilities
[19:57:01.249]
[19:57:01.249] > [email protected] build
[19:57:01.250] > astro build
[19:57:01.250]
[19:57:02.666] node:internal/modules/cjs/loader:985
[19:57:02.666] const err = new Error(message);
[19:57:02.666] ^
[19:57:02.666]
[19:57:02.666] Error: Cannot find module './features/mdn-css-unicode-bidi-isolate-override'
[19:57:02.666] Require stack:
[19:57:02.666] - /vercel/path0/node_modules/caniuse-lite/data/features.js
[19:57:02.666] - /vercel/path0/node_modules/caniuse-lite/dist/unpacker/features.js
[19:57:02.667] - /vercel/path0/node_modules/caniuse-lite/dist/unpacker/index.js
[19:57:02.667] - /vercel/path0/node_modules/autoprefixer/lib/autoprefixer.js
[19:57:02.667] at Function.Module._resolveFilename (node:internal/modules/cjs/loader:985:15)
[19:57:02.667] at Function.Module._load (node:internal/modules/cjs/loader:833:27)
[19:57:02.667] at Module.require (node:internal/modules/cjs/loader:1057:19)
[19:57:02.667] at require (node:internal/modules/cjs/helpers:103:18)
[19:57:02.667] at Object.<anonymous> (/vercel/path0/node_modules/caniuse-lite/data/features.js:1:19495)
[19:57:02.667] at Module._compile (node:internal/modules/cjs/loader:1155:14)
[19:57:02.667] at Object.Module._extensions..js (node:internal/modules/cjs/loader:1209:10)
[19:57:02.667] at Module.load (node:internal/modules/cjs/loader:1033:32)
[19:57:02.667] at Function.Module._load (node:internal/modules/cjs/loader:868:12)
[19:57:02.667] at Module.require (node:internal/modules/cjs/loader:1057:19) {
[19:57:02.668] code: 'MODULE_NOT_FOUND',
[19:57:02.668] requireStack: [
[19:57:02.668] '/vercel/path0/node_modules/caniuse-lite/data/features.js',
[19:57:02.668] '/vercel/path0/node_modules/caniuse-lite/dist/unpacker/features.js',
[19:57:02.668] '/vercel/path0/node_modules/caniuse-lite/dist/unpacker/index.js',
[19:57:02.668] '/vercel/path0/node_modules/autoprefixer/lib/autoprefixer.js'
[19:57:02.668] ]
[19:57:02.668] }
[19:57:02.689] Error: Command "npm run build" exited with 1
A new social media icon type that I tried to add for Mastodon isn't showing up for me.
There's a gap about the size of the icon in the list and you can click on it, so it seems to be some other kind of visibility (color?) issue. I'm not all too familiar with using SVGs, so I just copy and pasted the markup and tried to replicate how other icons are used here.
I updated socialIcons
in src/assets/socialIcons.ts
:
Mastodon: `<svg
xmlns="http://www.w3.org/2000/svg"
class="icon-tabler"
stroke-linecap="round"
stroke-linejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M499 112q-93 1 -166 11q-81 11 -128 33l-14 8q-16 10 -32 25q-22 21 -38 47q-21 33 -32 73q-14 47 -14 103v37q0 77 1 119q3 113 18 188q19 95 62 154q50 67 134 89q109 29 210 24q46 -3 88 -12q30 -7 55 -17l19 -8l-4 -75l-22 6q-28 6 -57 10q-41 6 -78 4q-53 -1 -80 -7
q-43 -8 -67 -30q-29 -25 -35 -72q-2 -14 -2 -29l25 6q31 6 65 10q48 7 93 9q42 2 92 -2q32 -2 88 -9t107 -30q49 -23 81.5 -54.5t38.5 -63.5q9 -45 13 -109q4 -46 5 -97v-41q0 -56 -14 -103q-11 -40 -32 -73q-16 -26 -38 -47q-15 -15 -32 -25q-12 -8 -14 -8
q-46 -22 -127 -33q-74 -10 -166 -11h-3zM367 267q73 0 109 56l24 39l24 -39q36 -56 109 -56q63 0 101 43t38 117v239h-95v-232q0 -74 -61 -74q-69 0 -69 88v127h-94v-127q0 -88 -69 -88q-61 0 -61 74v232h-95v-239q0 -74 38 -117t101 -43z">
</path>
</svg>`,
...and then reference it in src/config.ts
:
{
name: "Mastodon",
href: "https://mastodon.social/@joostschuur",
active: true,
},
I also added Mastodon to src\types.ts
.
It does turn up on the source:
As the title says, I work with netlify and resvg-js causes problems during the "build" stage.
It's currently impossible to use netlify's continuos deployement because of this issue.
It would be really useful to have a command to generate a post with a standardised filename and boilerplate frontmatter.
For example,
astropaper new post
which would create a file called contents/YYYY-MM-DD- with all the frontmatter fields provided, date and slug fields automatically pre-filled.
Firstly thank you for astro-paper, it' great and amazing simple and powerful for me to build my personal blog!
I'm the user of jekyll and octopress, octopress has a cli command to create new post:
octopress new "hello the article title"
It creates the markdown format post under _posts directory and convert the title " " into "-" besides the default template is filled the title and timestamp and default layout etc.
It's easy to add new posts and I'm sorry that I did not find the alternative command to implement the same operation, can you help me whether there already is or not ? How to make it?
Love Satori great package from vercel and I was actually using the nofuss starter, but it doesn't support Astro v2. So off on the hunt to rebuild with upgradability in mind. I was hoping to add the Vercel Edge integration to my project and use that with Satori. This repo looks like a great to start.
Would adding that be of interest of anyone? If I can get it sorted out? Tho this would be a vercel focused version idk if that is a problem.
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.