satnaing / astro-paper Goto Github PK

View Code? Open in Web Editor NEW

1.9K 19.0 385.0 2.98 MB

A minimal, accessible and SEO-friendly Astro blog theme

Home Page: https://astro-paper.pages.dev/

License: MIT License

JavaScript 5.58% Astro 49.21% CSS 4.18% TypeScript 40.94% Shell 0.08%

astro blog static-site tailwindcss theme typescript markdown react a11y template

astro-paper's Introduction

AstroPaper 📄

AstroPaper is a minimal, responsive, accessible and SEO-friendly Astro blog theme. This theme is designed and crafted based on my personal blog.

This theme follows best practices and provides accessibility out of the box. Light and dark mode are supported by default. Moreover, additional color schemes can also be configured.

This theme is self-documented _ which means articles/posts in this theme can also be considered as documentations. Read the blog posts or check the README Documentation Section for more info.

🔥 Features

Note: I've tested screen-reader accessibility of AstroPaper using VoiceOver on Mac and TalkBack on Android. I couldn't test all other screen-readers out there. However, accessibility enhancements in AstroPaper should be working fine on others as well.

✅ Lighthouse Score

🚀 Project Structure

Inside of AstroPaper, you'll see the following folders and files:

/
├── public/
│   ├── assets/
│   │   └── logo.svg
│   │   └── logo.png
│   └── favicon.svg
│   └── astropaper-og.jpg
│   └── robots.txt
│   └── toggle-theme.js
├── src/
│   ├── assets/
│   │   └── socialIcons.ts
│   ├── components/
│   ├── content/
│   │   |  blog/
│   │   |    └── some-blog-posts.md
│   │   └── config.ts
│   ├── layouts/
│   └── pages/
│   └── styles/
│   └── utils/
│   └── config.ts
│   └── types.ts
└── package.json

Astro looks for .astro or .md files in the src/pages/ directory. Each page is exposed as a route based on its file name.

Any static assets, like images, can be placed in the public/ directory.

All blog posts are stored in src/content/blog directory.

📖 Documentation

Documentation can be read in two formats_ markdown & blog post.

Configuration - markdown | blog post
Add Posts - markdown | blog post
Customize Color Schemes - markdown | blog post
Predefined Color Schemes - markdown | blog post

For AstroPaper v1, check out this branch and this live URL

💻 Tech Stack

Main Framework - Astro
Type Checking - TypeScript
Component Framework - ReactJS
Styling - TailwindCSS
UI/UX - Figma
Fuzzy Search - FuseJS
Icons - Boxicons | Tablers
Code Formatting - Prettier
Deployment - Cloudflare Pages
Illustration in About Page - https://freesvgillustration.com
Linting - ESLint

👨🏻‍💻 Running Locally

The easiest way to run this project locally is to run the following command in your desired directory.

# npm 6.x
npm create astro@latest --template satnaing/astro-paper

# npm 7+, extra double-dash is needed:
npm create astro@latest -- --template satnaing/astro-paper

# yarn
yarn create astro --template satnaing/astro-paper

Google Site Verification (optional)

You can easily add your Google Site Verification HTML tag in AstroPaper using environment variable. This step is optional. If you don't add the following env variable, the google-site-verification tag won't appear in the html <head> section.

# in your environment variable file (.env)
PUBLIC_GOOGLE_SITE_VERIFICATION=your-google-site-verification-value

🧞 Commands

All commands are run from the root of the project, from a terminal:

Note! For Docker commands we must have it installed in your machine.

Command	Action
`npm install`	Installs dependencies
`npm run dev`	Starts local dev server at `localhost:4321`
`npm run build`	Build your production site to `./dist/`
`npm run preview`	Preview your build locally, before deploying
`npm run format:check`	Check code format with Prettier
`npm run format`	Format codes with Prettier
`npm run sync`	Generates TypeScript types for all Astro modules. Learn more.
`npm run cz`	Commit code changes with commitizen
`npm run lint`	Lint with ESLint
`docker compose up -d`	Run AstroPaper on docker, You can access with the same hostname and port informed on `dev` command.
`docker compose run app npm install`	You can run any command above into the docker container.

Warning! Windows PowerShell users may need to install the concurrently package if they want to run diagnostics during development (astro check --watch & astro dev). For more info, see this issue.

✨ Feedback & Suggestions

If you have any suggestions/feedback, you can contact me via my email. Alternatively, feel free to open an issue if you find bugs or want to request new features.

📜 License

Made with 🤍 by Sat Naing 👨🏻‍💻 and contributors.

astro-paper's People

Contributors

Stargazers

Watchers

Forkers

pkjc themes-collection elpekenin jmnzki akarachen nikbhintade ljrodriguez1 tkmerlodi abhiram031 etharrra high-u fbndsprz taosher talento90 nexxeln carlosjorger ryandomalley smavodev thejediknight realotakuboi min-hieu yosstraore michal-turzynski atinux mimartinez helmar81 work-hadano masteramarjeet drtaka a1ip kanoemon trujared nickeblewis vasfvitor saketkesar dezzep darmayasa cjtim atoncode chlbri cloughrm julien-blanchon luismdeveloper kemron alaev aj-ya mohitbhansali type-checker rafahuaman jffry93 rhinocm brainrepo nightclover-code haiiux looper-dev johnhooks carlesbarreda fujiya228 parin95 rommelandrea devdanuk e-lemon templatecollection sytjason aeither jraor markteekman poria-cat aflalasker pelleknaap saif71 kawa1214 koficypher dannysmith 4lbatr0s jtsmith24 pavankumarpabbathi fairhopeweb pavlovtech allenxing admcilgin franchb alfredoperez maloong2022 sahilshahane gzuzmark rooray nhat416 chataroya leesei vaknir pickyzz pessoalzy bloushi heidless-stillwater nambui98 karthik1729 donglua universeroc wicaksuu

astro-paper's Issues

'astro' type error in src/pages/[ogTitle].svg.ts

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.

Similar/related type issue in src/env.ts:

When site title contains a space, a line break is made

This might be a dumb question, but I can't seem to figure out how to remove the line break in the site title. the 'title' (in config.ts) is set to Peter Yates.

Very nice template - how about adding support for multi-language?

Subject says it all.

Thanks for creating this nice template

WebSocket server error: Port is already in use

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

Figma file

Dear @satnaing
Could you please share to the community the design resources on Figma?
Thank you.

Cloudflare integration with theme may be broken

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.

build.error.log

md adds a unique identity

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

Feature Improvements: Allow for more flexible formatting on the frontmatter of content/blog documents.

Similarly to issue #88, build breaks on having a ? in the title of a post as well.

Example:

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.

Debug option

hi, I am trying to connect CMS REST API.
I tried usual JS debugging for checking response returned, nothing shows up.
Any suggestions?

Whether to add social information display on the side in the future

Similar to your blog.

I like that design very much.

Support for custom canonical URLs

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

Forestry will be discontinued

Announced here:

https://forestry.io/blog/forestry.io-end-of-life/

Don't know how this will effect you.

Uncaught SyntaxError: expected expression, got '<'

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.

Avoid files with underscore

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.

Hoisted scripts missing in both dev/prod for content collection entry with MDX

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>

Error while deploying to Vercel

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

How to configure so that when switching to light theme, the code highlight theme can also follow the switch?

Search page doesn't work as expected

The search box does not return expected results. E.g. in https://astro-paper.pages.dev/search/:

input: 'aa '

it returns:

but there isn't an actual match

input: 'configuration'

it returns:

but it doesn't return this other article although there is a match.

Connect and use CMS

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.

Tailwind MXD

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.

If the title of a post contains a colon(:), src/pages/[ogTitle].svg.ts and then src/utils/generateOgImage.tsx fails on npm run build with src/utils/generateOgImage.tsx

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)

Add ESLint

I looked at the Astro documentation website. I found they use 2 ESLint plugins. I believe these plugins will enforce quality code. Thanks.

Convert SVG generated previews to PNG

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)

Plans to add PWA support?

Hi, are there any plans to add pwa support in the future?

missing tailwindcss dependency?

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.

How to add an Estimated Reading Time to Astro Blog?

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.

I was trying to add new react component with custom css but in the output I did not see any custom css. Default CSS get applied.

How to fix this?

Weird CLS and text resizing in Chrome for the last few days

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?

text-weirdness.mov

You should get on this list...

Awesome Astro

https://github.com/one-aalam/awesome-astro

You should open a pull request to include Astro Paper in that list.

Having issue with top bar

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?

https://www.nishad.link/

If you can help in any way would really appreciate.

regards
Nishad

Social Links section set to OFF if no links

Hey,

The following enhancement should be made — the Social Links section should not be displayed when no links are activated in the config.

Thanks!

Website validation errors.

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 to add new post easily

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?

Mention ESLint in readme

Should mention ESLint in "Tech stack" and "Commands" sections.

Environment Variables & Sitemap

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!

Adding a new social icon for Mastodon

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:

lint-staged doesn't work out-of-the-box

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.

Astro 2.1.4 breaks build

@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.

How to change the height and width of the whole page/website?

In-line code doesn't have line break

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.

suggestion: add a "new page" command

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.

Incorrect use of "canonical meta tag"

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.

Zoom post image on click

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.

OG Img on the Edge

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.

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.

Example implementation in Astro:

https://docs.astro.build

https://github.com/withastro/astro/tree/main/examples/docs

Thank you!