satnaing / astro-paper Goto Github PK

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.

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.

Hey,

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

Thanks!

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.

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?

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>

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.

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.

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.

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?

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.

Awesome Astro

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

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

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

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.

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

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

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:

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

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.

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.

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.

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, are there any plans to add pwa support in the future?

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)

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?

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.

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.

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.

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

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)

Subject says it all.

Thanks for creating this nice template

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.

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.

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

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

Hi @satnaing, how is it going? I'm really enjoying using your template, thanks for the hard work. I have the following questions:

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

2. 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!

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.

Announced here:

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

Don't know how this will effect you.

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

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

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

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:

Hi!

Would love to see the internationalization support, please.

Example implementation in Astro:

https://docs.astro.build

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

Thank you!

Similar to your blog.

I like that design very much.

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

How to fix this?

Hi, is their any official guide on updating the astro paper?