one-aalam/astro-ink

Crisp, minimal, personal blog theme for Astro

astro-ink's Issues

Failed to parse URL from undefined/api/blog/views/[Post name]

When trying to read one of my posts in dev mode, I get this error:

 error   Failed to parse URL from undefined/api/blog/views/[Post name]
  File:
    /home/mikwee/קוד/personal-site-astro/src/pages/blog/[slug].astro:26:16
  Code:
    25 |         Link,
    > 26 |         TweetEmbed,
         |                ^
      27 |         YTVideoEmbed,
      28 |         Tabs
      29 |     }}/>
  Stacktrace:
TypeError: Failed to parse URL from undefined/api/blog/views/[Post name]
    at Object.fetch (node:internal/deps/undici/undici:11600:11)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async eval (/src/pages/blog/[slug].astro:26:16)
    at async renderPage (file:///home/mikwee/%D7%A7%D7%95%D7%93/personal-site-astro/node_modules/astro/dist/runtime/server/render/page.js:95:30)
    at async renderPage (file:///home/mikwee/%D7%A7%D7%95%D7%93/personal-site-astro/node_modules/astro/dist/core/render/core.js:96:20)
    at async renderPage (file:///home/mikwee/%D7%A7%D7%95%D7%93/personal-site-astro/node_modules/astro/dist/core/render/dev/index.js:109:10)
    at async handleRoute (file:///home/mikwee/%D7%A7%D7%95%D7%93/personal-site-astro/node_modules/astro/dist/vite-plugin-astro-server/route.js:152:20)
    at async run (file:///home/mikwee/%D7%A7%D7%95%D7%93/personal-site-astro/node_modules/astro/dist/vite-plugin-astro-server/request.js:46:14)
    at async runWithErrorHandling (file:///home/mikwee/%D7%A7%D7%95%D7%93/personal-site-astro/node_modules/astro/dist/vite-plugin-astro-server/controller.js:65:5)
    at async handleRequest (file:///home/mikwee/%D7%A7%D7%95%D7%93/personal-site-astro/node_modules/astro/dist/vite-plugin-astro-server/request.js:40:3)

  Cause:
TypeError: Invalid URL
    at new NodeError (node:internal/errors:405:5)
    at new URL (node:internal/url:778:13)
    at new Request (node:internal/deps/undici/undici:7150:25)
    at fetch2 (node:internal/deps/undici/undici:10737:25)
    at Object.fetch (node:internal/deps/undici/undici:11598:18)
    at fetch (node:internal/process/pre_execution:274:25)
    at eval (/src/pages/blog/[slug].astro:26:22)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async renderPage (file:///home/mikwee/%D7%A7%D7%95%D7%93/personal-site-astro/node_modules/astro/dist/runtime/server/render/page.js:95:30)
    at async renderPage (file:///home/mikwee/%D7%A7%D7%95%D7%93/personal-site-astro/node_modules/astro/dist/core/render/core.js:96:20)
    at async renderPage (file:///home/mikwee/%D7%A7%D7%95%D7%93/personal-site-astro/node_modules/astro/dist/core/render/dev/index.js:109:10)
    at async handleRoute (file:///home/mikwee/%D7%A7%D7%95%D7%93/personal-site-astro/node_modules/astro/dist/vite-plugin-astro-server/route.js:152:20)
    at async run (file:///home/mikwee/%D7%A7%D7%95%D7%93/personal-site-astro/node_modules/astro/dist/vite-plugin-astro-server/request.js:46:14)
    at async runWithErrorHandling (file:///home/mikwee/%D7%A7%D7%95%D7%93/personal-site-astro/node_modules/astro/dist/vite-plugin-astro-server/controller.js:65:5)
    at async handleRequest (file:///home/mikwee/%D7%A7%D7%95%D7%93/personal-site-astro/node_modules/astro/dist/vite-plugin-astro-server/request.js:40:3)

Why could this be happening? Feel free to ask for info. Thanks.

Broken link to Astro next in README

https://next.docs.astro.build/getting-started = 404

I couldn't figure out what it should be - sorry

'dist' directory created during build and deleted after build is completed

I cloned the repo and have no local configurations made and when running npm run build or astro build locally (or when trying to deploy to Netlify) the dist folder is created and then deleted once the build step completes.

I am able to run the project locally, but this is preventing a deploy on Netlify. Any thoughts on what is the cause?

Need support mobile device for better UI/UX

Need support mobile devices for better UI/UX

Individual blog post static pages not generated

Fresh clone of this repo.

did

npm run build
 cd ./.vercel/output/static
http-server

thn when i access the blog, i can see the blog index page. but upon clicking any of the blog post link
I receive an empty page.

When i see at the generated html files inside /static directory.
I can see /blog/index.html and other index files inside dir for each tag
but i dont see any html files for posts

is it because of missing getStaticPaths inside pages/blog/[slug].astro

I am planning to deploy it to netlify or cloudfare pages, and need to generate all the static files

Tags can only use lowercase letters because of `toLowerCase`

Other people's web pages have also been affected by this.
example

It can be noted that when the tag is partially capitalized, the URL will not be accurately located and will redirect to 404
Even if I made changes to ref={'/tags/${tag}.toLowerCase'} in src/pages/tags/index.Astro, I found it still very troublesome to make the changes.
So, the simplest way to solve this problem is to delete the .toLowerCase from other files in the tags folder.
I don't think there's a need to worry about people having multiple tags due to capitalization issues. The author should be able to modify them themselves if they see them.

Astro.glob("./blog/*.md") - no matches found.

How to add Catppuccin themes?

Hi, I apologize for my ignorance, but I'm not super experienced with frontend (I'm more of a backend/data girlie 😓), yet I really love this theme/template! Thank you so much for your work on this, it's an absolutely beautiful template.

I've spent a couple hours hacking on trying to create a custom theme option based on Catppuccin's Tailwind port. Unfortunately have not made any progress, I seem to keep breaking things which I don't understand the chain of inhertance/configuration for when I try to swap in these colors. Could you perhaps advise on the best way to approach theming with this palette? Thank you so much!

How to pass THEME_KEY parameter to CLI dev script

I could not work out the correct syntax for adding the THEME_KEY parameter to npm dev or npx astro dev scripts (as suggested in the features list). I tried a few conventional ways including:
npm run dev -- THEME_KEY=indigone
npm run dev -- --THEME_KEY=indigone
I was able to make the change by direct edit of the default section of tailwind.theme.config.cjs but how does it work through CLI?

Like buttons plugin

Hi, I created an astro plugin which allows to add Like buttons to blog posts.
Are you open to integrate it in your template? I can create a PR to setup the integration. It will be just a few line of code. I will make the integration optional, meaning that if the setting_key is missing (the user doesn't want to use the plugin), nothing is affected and will change.

In general, the plugin allows to receive any kind of feedback, but I think for a blogsite likes are more appropriate. Nonetheless, it's very easy and customizable.

Let me know.
Thanks.

error `getStaticPaths()` function is required for dynamic routes.

$ npm run build
[..........]

▶ src/pages/blog/[slug].astro
 error   `getStaticPaths()` function is required for dynamic routes. Make sure that you `export` a `getStaticPaths` function from your dynamic route.
  Hint:
    See https://docs.astro.build/en/core-concepts/routing/#dynamic-routes for more information on dynamic routes.
    
    Alternatively, set `output: "server"` or `output: "hybrid"` in your Astro config file to switch to a non-static server build. This error can also occur if using `export const prerender = true;`.
    See https://docs.astro.build/en/guides/server-side-rendering/ for more information on non-static rendering.
  Error reference:
    https://docs.astro.build/en/reference/errors/get-static-paths-required/
  File:
    src/pages/blog/[slug].astro
  Stacktrace:
GetStaticPathsRequired: `getStaticPaths()` function is required for dynamic routes. Make sure that you `export` a `getStaticPaths` function from your dynamic route.
[........]

Background is only set for main

Because the background color is only set for main it can cause something like this:

To fix this I would move setting of the backgound color to body or by adding min-height: 100vh; to body.

Issues with fresh install - TweetEmbed

Hey @one-aalam 👋 Thank you for creating this project!

I'm new to Astro, so please take this with a grain of salt. I just cloned and installed this repo, and everything was working fine (the homepage loads fine, and the navigation works, too) until I tried to render an article. I'm seeing this error.

I'm assuming I haven't configured things properly. Again, I've been using Astro for just 10 minutes 😅. I'll keep on looking to see what could be happening here.

Nav links and tags are overflowing on mobile

When on mobile, navigation links and tags are overflowing to the right.

Markdoc error after install

Hi
Ive just done a fresh install and after cloning and doing a pnpm i i get this error:

9:20:07 AM [vite] Error when evaluating SSR module /home/bronze/coding/astro-ink/astro.config.mjs: failed to import "@astrojs/markdoc"

09:20:07 AM [astro] Unable to load /home/bronze/coding/astro-ink/astro.config.mjs

 error   The requested module 'astro/assets' does not provide an export named 'emitESMImage'
file:///home/bronze/coding/astro-ink/node_modules/.pnpm/@[email protected][email protected][email protected]/node_modules/@astrojs/markdoc/dist/index.js:5
import { emitESMImage } from "astro/assets";
         ^^^^^^^^^^^^
SyntaxError: The requested module 'astro/assets' does not provide an export named 'emitESMImage'
    at ModuleJob._instantiate (node:internal/modules/esm/module_job:124:21)
    at async ModuleJob.run (node:internal/modules/esm/module_job:190:5)

I only managed to run the dev server after i commented out the import markdoc from "@astrojs/markdoc"; line at https://github.com/one-aalam/astro-ink/blob/main/astro.config.mjs#L9

Support for Youtube JSON.

I'm trying to use this for the Media.

https://feed2json.org/convert?url=https%3A%2F%2Fwww.youtube.com%2Ffeeds%2Fvideos.xml%3Fchannel_id=UCofs7madAM8iVlidQEzHmBg

Any Tips?

Dark theme delay

When you choose the dark theme and tries to navigate the pages, it always starts with a white theme, then after like 0.5 switch to the dark theme.

npm run build ==> Cannot read properties of undefined (reading 'views')

$ npm run build

[.......]

▶ src/pages/blog/teat.md
 error   Cannot read properties of undefined (reading 'views')
  File:
    async file:///home/me/astro-ink__dev/node_modules/astro/dist/runtime/server/render/astro/render.js:70:11
  Stacktrace:
TypeError: Cannot read properties of undefined (reading 'views')
    at Object.default (file:///home/me/astro-ink__dev/dist/chunks/pages/_slug__62e5e4f6.mjs:559:156)
    at new AstroComponentInstance (file:///home/me/astro-ink__dev/dist/chunks/astro_646f7050.mjs:989:32)
    at createAstroComponentInstance (file:///home/me/astro-ink__dev/dist/chunks/astro_646f7050.mjs:1027:20)
    at renderAstroComponent (file:///home/me/astro-ink__dev/dist/chunks/astro_646f7050.mjs:1449:20)
    at renderComponent (file:///home/me/astro-ink__dev/dist/chunks/astro_646f7050.mjs:1468:12)
    at file:///home/me/astro-ink__dev/dist/chunks/pages/_slug__62e5e4f6.mjs:558:270
    at AstroComponentInstance.post [as factory] (file:///home/me/astro-ink__dev/dist/chunks/astro_646f7050.mjs:199:12)
    at AstroComponentInstance.init (file:///home/me/astro-ink__dev/dist/chunks/astro_646f7050.mjs:996:29)
    at AstroComponentInstance.render (file:///home/me/astro-ink__dev/dist/chunks/astro_646f7050.mjs:1001:18)
    at Object.render (file:///home/me/astro-ink__dev/dist/chunks/astro_646f7050.mjs:1452:22)
    at renderChild (file:///home/me/astro-ink__dev/dist/chunks/astro_646f7050.mjs:959:17)
    at async Object.renderToFinalDestination (file:///home/me/astro-ink__dev/dist/chunks/astro_646f7050.mjs:775:7)
    at async RenderTemplateResult.render (file:///home/me/astro-ink__dev/dist/chunks/astro_646f7050.mjs:1071:9)
    at async file:///home/me/astro-ink__dev/node_modules/astro/dist/runtime/server/render/astro/render.js:70:11

error: script "build" exited with code 1 (SIGHUP)

I run it locally via npm with no issue, and I'd patched a bug with port number.

How to fix this?

Code syntax highlighting

When writing a post with markdown, using the standard syntax for code blocks, code blocks were shown, but no syntax highlighting is present. Is there anyway to enable syntax highlighting within markdown files?

To reproduce: create a post at src/pages/blog/test.md
Edit the post as following:

---
layout: $/layouts/post.astro
title: testing syntax
description: hi
tags:
- hihi
author: rando
authorTwitter: "@JettChenT"
date: 2022-4-2
---

# With python

```python
print('hello world')
```

# With Javascript

```js
const func = () => {alert("hello")}
```

The post would be rendered like the following image:

Text in blog is not readable in dark theme

If we open the below article the text is not readable in dark mode. It seems if we wrap a text with `` in the .mdx file then in dark mode that word font color remains black and that word is not readable in dark mode.
https://astro-ink.vercel.app/blog/markdoc-integration

Here is a screenshot of the issue.

src/components/Search.svelte:18:27: error: Unexpected "\u200b"

I created a project using astro-ink theme. but when I run build or dev getting this error. When I fix this error manually I m getting another error. but I will open another issue for that.

How to run it with nginx only, as a static website, without npm?

How to run it with nginx only, completely without npm? Not behind nginx as a reverse proxy

It's not compiled into a static website, is it?

npm run build

will create a directory dist but it'll be lasting a few seconds, then it'll get deleted

Add an option to disable the view counter and build a static site

I'm trying to do this, I removed the Vercel package and all mentions to it, I'm just stuck on this view counter thing. I'd love some help, and perhapd this can become an option in the config.

Dates too big on mobile

This may be slightly subjective but the dates on the homepage are too big. They take up a lot of space from the titles causing a lot of wrapping.

Header and footer text color too dark in dark mode

When I switch to dark mode, the header and footer text remains black, making it barely readable. E.g. the line that reads "Crisp, minimal, personal blog theme for Astro".

It looks like there's some code in "global.css" to handle this, but as far as I can tell, this doesn't seem to be working. I also saw a possibly related open pull request.

(Beautiful theme otherwise - thanks!)

Can we add support to math input in blog posts. Using rehype-katex preferably.

Image doesn't get passed on to `og:image`

It looks like in this line the image is not getting passed on as a variable.

This results in the og:image to never get populated.

However, post title and post description are successfully getting populated.

I am new to astro so it may be something I am doing wrong. But I have tried to simply use the master from this repo and I do not see any og:image tags in the rendered html. Would love some help on making this work!

How to update a component based on the theme?

I'm trying to change the logo based on the theme. For that, I wrote this component:

<script lang="ts">
  import { onMount } from 'svelte'
  import { tick } from 'svelte/internal'
  import { theme } from '../store/theme'

  async function printTheme() {
    await tick();
    console.log("Logo theme: " + $theme);
  }

  let path;
  theme.subscribe(theme => {
    switch (theme) {
      case 'dark':
        console.log("Dark theme triggered");
        path = '/assets/Ein Sof Dark.svg'; // White logo
      case 'light':
        console.log("Light theme triggered");
        path = '/assets/Ein Sof.svg'; // Black logo
    }
    printTheme();
  });

  onMount(() => {
    printTheme();
  });
</script>

<img class="header__logo-img" src={path} alt="The Ein Sof logo"/>

For some reason, the logo stays black, even when the theme is dark. This is the terminal output:

14:55:17 [200] / 27ms
Dark theme triggered
Light theme triggered
Logo theme: dark

Can you perhaps help me understand how the theme works? Thanks.

Using outdated version of Astro

Hi there!

As you might know, Astro has recently launched v1.0.0 beta which has a lot of breaking changes from the version your theme is currently using.

Since we do link to your theme from https://astro.build/themes, would you consider adding a note to your README to let users know that the theme is running an older version of Astro and is not (yet?) compatible with Astro v1.0? We would still like to showcase and promote your work, but we also don't want to cause confusion or problems for people new to Astro.

Of course, if you're planning to upgrade this theme to Astro v1.0, that works too! 😄

Thanks very much, and if you have any questions, you can reach out to me here or on the Astro Discord!

warn - As of Tailwind CSS v2.2, `lightBlue` has been renamed to `sky`.

I'm getting this warning. Can anyone suggest where to change the color palette?

warn - As of Tailwind CSS v2.2, lightBlue has been renamed to sky.

Dark theme visibility issues

Some elements remain the same color in both the light and dark themes which makes them hard to read.