chrismwilliams / astro-theme-cactus Goto Github PK
View Code? Open in Web Editor NEWA simple Astro theme. Use it to create your blog or website.
Home Page: https://astro-cactus.chriswilliams.dev/
License: MIT License
A simple Astro theme. Use it to create your blog or website.
Home Page: https://astro-cactus.chriswilliams.dev/
License: MIT License
First of all thank you for the awesome template!
This may end up to be more of a general question, rather than an issue to this repository. Is there preferred way to change the logo on the website? I currently have a single svg image, but there are many different logo image placed around the project (afaik 512x512.png, 912x192.png, favicon.ico, icon.svg, apple-touch-icon.png and the one inline in Base.astro). It feels that this procedure can be automated so as a frontend development noob I was wondering if there are any automations or best practices when it comes to changing the logo.
The light theme activates whenever I go to another page, and the svg on the button disappears.
Can we add support for RSS feeds using the @astrojs/rss integration?
I'm happy to submit a PR if this is something you'd like.
Instead of hardcoding robots.txt, can we use the astro-robots-txt integration to generate it from config? It'll be less error-prone if you want to customize it.
I'm happy to submit a PR if this is something you'd like.
When in light (dark) mode, there is a thin black (white) bar at the very top when fully scrolled up the page.
It is visible in both desktop and mobile version of the site.
If some of the content in the main content column of a blog post is too wide, the main area (the <article>
) expands and squashes the content navigation (the <aside>
). That's because it is define as a grid with 3fr 1fr
, which gets treated as minmax(auto, 3fr) 1fr
. That should be changed to minmax(0, 3fr) 1fr
. There are two ways i know of doing that with Tailwind, either grid-cols-[minmax(0,3fr)_1fr]
or changing it to a 4 cols layout. I will submit a PR with the latter approach
Originally posted by fabriziodevincenzi August 26, 2023
Hi @chrismwilliams , I really appreciate your work and this specific theme. One feature I really like is the table of contents on the right sidebar, a very useful option for in-depth content. Content for which it would also be nice to have a footnote option. I paste here a link to three examples of how they could be implemented https://codepen.io/cadars/pen/dyXaGdy
I hope it's a welcome idea. Best wishes.
Fabrizio
I was working to make [RTL] version of this theme
https://github.com/X7md/astro-theme-cactus-rtl
but I notice issue...
and as temporary workaround I use this:
sh npm i remark-gfm
//astro.config.ts
import remarkGfm from "remark-gfm"
integrations: [
mdx({
// add this
remarkPlugins:[[remarkGfm, {}]]
}),
tailwind({
config: { applyBaseStyles: false },
}),
image(),
sitemap(),
],
Loving your Astro theme. Have you considered sending it to some sites such as https://jamstackthemes.dev, you would be the first Astro theme there, or even better submitting it to https://astro.build/themes/ ?
I understand you might not have time to maintain Cactus full time, but I love the site and feel others will too.
Anyway thanks for the hard work, looking forward to whatever you add to the theme.
Sorry for posting this as an issue, but I could not find your contact info.
Paul
I get the following errors during a deploy to Vercel.
13:20:33.562 | at file:///vercel/path0/dist/entry.mjs?time=1657387232641:1327:16
13:20:33.562 | at Array.reduce (<anonymous>)
13:20:33.562 | at getAllTagsFromPosts (file:///vercel/path0/dist/entry.mjs?time=1657387232641:1324:18)
13:20:33.562 | at file:///vercel/path0/dist/entry.mjs?time=1657387232641:4001:19
13:20:33.562 | at async renderPage (file:///vercel/path0/node_modules/.pnpm/[email protected]/node_modules/astro/dist/runtime/server/index.js:450:30)
13:20:33.562 | at async render (file:///vercel/path0/node_modules/.pnpm/[email protected]/node_modules/astro/dist/core/render/core.js:108:12)
13:20:33.562 | at async generatePath (file:///vercel/path0/node_modules/.pnpm/[email protected]/node_modules/astro/dist/core/build/generate.js:158:22)
13:20:33.562 | at async generatePage (file:///vercel/path0/node_modules/.pnpm/[email protected]/node_modules/astro/dist/core/build/generate.js:92:5)
13:20:33.562 | at async generatePages (file:///vercel/path0/node_modules/.pnpm/[email protected]/node_modules/astro/dist/core/build/generate.js:61:5)
13:20:33.562 | at async staticBuild (file:///vercel/path0/node_modules/.pnpm/[email protected]/node_modules/astro/dist/core/build/static-build.js:70:7)
13:20:33.596 | ELIFECYCLE Command failed with exit code 1.
13:20:33.621 | Error! Command "pnpm run build" exited with 1
13:20:33.693 | Error: Command "vercel build" exited with 1
I don't know how to access file:///vercel/path0/dist/entry.mjs
to check on things. This is a fresh install, all I did was copy & paste a few posts to check things.
Any ideas?
Thanks
Paul
sorry dumb question
Adds the ability for drafts, specified in the frontmatter
i18n is a necessary feature when you want to write blogs for multi-language users. There are some i18n packages such as astro-i18n and astro-i18next. Both of them can not be used directly.
So I hope this theme can support i18n directly. From my view, nextra i18n is a nice paradigm as it inserts language between the file name and suffix.
Hi, I just tried the RSS. The link seems to be not functioning properly.
Upon investigating the issue, I discovered that the current RSS link is: example.com/hello-world
However, it appears that the correct link should be: example.com/posts/hello-world
the code link: post.slug,
should the code looks something like this link: `/posts/${post.slug}/`,
? in rss.xml.ts
Hey, @chrismwilliams I hope you are doing fine, I found a small problem specifically with long post titles on the blog page, the text gets hidden after it gets wrapped up, I think the problem is the content box not dynamically changing its height, but sadly I could not submit a PR because I am a noob when it comes to Tailwind.
i wrote social links in https://github.com/chrismwilliams/astro-theme-cactus/blob/64ae486e7e63d74d3c5cdc5c8d0ccbc23aecc77d/src/components/SocialList.astro.
{
name: "mdi:twitter",
friendlyName: "twitter",
link: "my twitter link",
},
//it works
{
name: "skill-icons:misskey-dark",
friendlyName: "misskey",
link: "my misskey link",
},
//icon is blank, but link works.
should i add config about astro-icon?
logs:
Error: Not Found: pack "skill-icons" at request (C:/Users/hiba/astro_blog/node_modules/astro-icon/lib/resolver.ts:17:13) at process.processTicksAndRejections (node:internal/process/task_queues:95:5) at async get (C:/Users/hiba/astro_blog/node_modules/astro-icon/lib/resolver.ts:33:10) at async Module.load [as default] (C:/Users/hiba/astro_blog/node_modules/astro-icon/lib/utils.ts:153:22) at async eval (C:/Users/hiba/astro_blog/node_modules/astro-icon/lib/Icon.astro:22:17) at async AstroComponentInstance.render (C:/Users/hiba/astro_blog/node_modules/astro/dist/runtime/server/render/astro/instance.js:37:7) at async Object.render (C:/Users/hiba/astro_blog/node_modules/astro/dist/runtime/server/render/component.js:335:7) at async Module.renderChild (C:/Users/hiba/astro_blog/node_modules/astro/dist/runtime/server/render/any.js:36:5) at async Object.renderToFinalDestination (C:/Users/hiba/astro_blog/node_modules/astro/dist/runtime/server/render/util.js:119:7) at async RenderTemplateResult.render (C:/Users/hiba/astro_blog/node_modules/astro/dist/runtime/server/render/astro/render-template.js:45:9) at async renderChild (C:/Users/hiba/astro_blog/node_modules/astro/dist/runtime/server/render/any.js:36:5) at async Object.renderToFinalDestination (C:/Users/hiba/astro_blog/node_modules/astro/dist/runtime/server/render/util.js:119:7) at async Module.renderChild (C:/Users/hiba/astro_blog/node_modules/astro/dist/runtime/server/render/any.js:28:7) at async Object.renderToFinalDestination (C:/Users/hiba/astro_blog/node_modules/astro/dist/runtime/server/render/util.js:119:7) at async RenderTemplateResult.render (C:/Users/hiba/astro_blog/node_modules/astro/dist/runtime/server/render/astro/render-template.js:45:9) at async Module.renderChild (C:/Users/hiba/astro_blog/node_modules/astro/dist/runtime/server/render/any.js:36:5) at async AstroComponentInstance.render (C:/Users/hiba/astro_blog/node_modules/astro/dist/runtime/server/render/astro/instance.js:46:7) at async Object.render (C:/Users/hiba/astro_blog/node_modules/astro/dist/runtime/server/render/component.js:335:7) at async Module.renderChild (C:/Users/hiba/astro_blog/node_modules/astro/dist/runtime/server/render/any.js:36:5) at async Object.renderToFinalDestination (C:/Users/hiba/astro_blog/node_modules/astro/dist/runtime/server/render/util.js:119:7) at async RenderTemplateResult.render (C:/Users/hiba/astro_blog/node_modules/astro/dist/runtime/server/render/astro/render-template.js:45:9) at async Module.renderChild (C:/Users/hiba/astro_blog/node_modules/astro/dist/runtime/server/render/any.js:36:5) at async Object.render (C:/Users/hiba/astro_blog/node_modules/astro/dist/runtime/server/render/slot.js:29:7) at async Module.renderChild (C:/Users/hiba/astro_blog/node_modules/astro/dist/runtime/server/render/any.js:36:5) at async Object.renderToFinalDestination (C:/Users/hiba/astro_blog/node_modules/astro/dist/runtime/server/render/util.js:119:7) at async RenderTemplateResult.render (C:/Users/hiba/astro_blog/node_modules/astro/dist/runtime/server/render/astro/render-template.js:45:9) at async Module.renderChild (C:/Users/hiba/astro_blog/node_modules/astro/dist/runtime/server/render/any.js:36:5) at async AstroComponentInstance.render (C:/Users/hiba/astro_blog/node_modules/astro/dist/runtime/server/render/astro/instance.js:46:7) at async Object.render (C:/Users/hiba/astro_blog/node_modules/astro/dist/runtime/server/render/component.js:335:7) at async Module.renderChild (C:/Users/hiba/astro_blog/node_modules/astro/dist/runtime/server/render/any.js:36:5) at async Object.renderToFinalDestination (C:/Users/hiba/astro_blog/node_modules/astro/dist/runtime/server/render/util.js:119:7) at async RenderTemplateResult.render (C:/Users/hiba/astro_blog/node_modules/astro/dist/runtime/server/render/astro/render-template.js:45:9) at async file:///C:/Users/hiba/astro_blog/node_modules/astro/dist/runtime/server/render/astro/render.js:70:11
I wanted to try the Satori integration for creating open graph png images, i created a post in various social network with a link to the demo site but i got no og image.
This is the demo page i used https://astro-theme-cactus.netlify.app/posts/markdown-elements/
I watched the source for the og link and found the correct tag with the image
<meta property="og:image" content="https://www.astro-theme-cactus.netlify.app/og-image/markdown-elements.png">
I opened the linked image
https://www.astro-theme-cactus.netlify.app/og-image/markdown-elements.png
and got an SSL error
error from firefox: SSL_ERROR_BAD_CERT_DOMAIN
error from chrome: NET::ERR_CERT_COMMON_NAME_INVALID
I think there is a misconfig in the demo site or in the theme itself
How do you change the font? I have tried examples from https://tailwindcss.com/docs/font-family, but nothing seems to work. I made sure the pages were not in the browser's cache. There has to be something I am missing.
Thanks
Paul
Hey @chrismwilliams,
Hope you are doing great, I just fixed failed netlify build pipelines, After debugging build logs I found this
2:53:16 AM: ERR_PNPM_PEER_DEP_ISSUES Unmet peer dependencies
2:53:16 AM: .
2:53:16 AM: └─┬ @astrojs/mdx 0.14.0
2:53:16 AM: └─┬ @mdx-js/rollup 2.2.1
2:53:16 AM: ├── ✕ missing peer rollup@>=2
2:53:16 AM: └─┬ @rollup/pluginutils 5.0.2
2:53:16 AM: └── ✕ missing peer rollup@^1.20.0||^2.0.0||^3.0.0
2:53:16 AM: Peer dependencies that should be installed:
2:53:16 AM: rollup@">=2.0.0 <3.0.0 || >=3.0.0 <4.0.0"
2:53:16 AM: hint: If you want peer dependencies to be automatically installed, add "auto-install-peers=true" to an .npmrc file at the root of your project.
2:53:16 AM: hint: If you don't want pnpm to fail on peer dependency issues, add "strict-peer-dependencies=false" to an .npmrc file at the root of your project.
2:53:16 AM:
2:53:16 AM: "build.command" failed
After removing MDX from package.json (because I don't work with MDX) the build process successes
What do you think?
Hi, today I tried to create a site with this theme but I have some problems with the favicon and the icon on the header.
If I replace the favicon and the icons it will be always rendered with the "stock" image.
Where am I doing wrong?
The hamburger menu is not working on the blog post page. You can click it but nothing happens. When viewed using developer tools nothing is showing at all. No error, no network request, nothing.
Also Writings -> Blog, in the footer was not changed when all Writings were all changed to Blog. Just that one was missed.
For each of my posts, I am getting the following error in console.
Mixed Content: The page at '<URL>' was loaded over HTTPS, but requested an insecure resource '<URL>'. This request has been blocked; the content must be served over HTTPS.
I made sure the astro.config.ts file reflects my website thusly with https. Using example.com as a placeholder:
export default defineConfig({
site: "https://example.com/",
//...more code...
What else am I missing? This is the only area I recall specifying my domain. Or is it something else entirely?
I also notice that the icon that switches the theme does not function on a post page either. May be in relation to this error?
None of these issues reflect at all during dev mode.
Hey there! I've adapted this theme for my personal website and blog and I absolutely love it; thank you for sharing it! :)
I've put a few posts up on prod with no problem, but I'm working on adapting some Medium posts and importing them to my own site. I've simply copied and pasted the text, but for some reason it keeps breaking the mobile view. I even make a separate file with large paragraphs to see if I can reproduce it, but for some reason its only these posts. Is there perhaps a word limit that I'm breaking which would cause this?
Link to a live preview, just use dev console to see mobile view or visit on your phone:
https://stevedsimkins-dev-astro-8wx39j648-stevedsimkins.vercel.app/posts/3d-solana-nfts
Link to the repo at current branch:
https://github.com/stevedsimkins/stevedsimkins-dev-astro/tree/import-medium-posts
Currently, the frontmatter description property is being used in 3 places.
This change would be removing no.2.
It doesn't seem particularly helpful to include, what is essentially a meta description, within the body of a post. By removing it, it would allow users to add content in any order they wish, and to provide a description better fitting for SEO purposes.
Looking for feedback and thought's on this as it would/could effect how you write both the frontmatter and body of every post going forward. I'm also contemplating removing no.3, however, this would require pulling content from the start of the post's body, which may not be to everyone's liking.
I am just implementing a static search feature using "page-find".
May I send a PR?
Hi!
I have been using it via "Use this template" since the weekend.
So I think it is v1.5.2.
When upper-case letters are mixed in tags of front-matter.
I believe the problem lies in the string comparison.
The part that unifies duplicate tags into lowercase.
astro-theme-cactus/src/utils/post.ts
Line 12 in 58caa51
The part that compares with the front-matter tags.
When upper-case letters are mixed in tags of front-matter.
The URL points to a page in uppercase, but the actual page is in lowercase.
The part that generates tags.
astro-theme-cactus/src/utils/post.ts
Line 23 in 58caa51
The part that uses them.
Thank you.
Hi, thanks for the great theme. I wanted to change some of the icons - for example I don't use twitter but mastodon - and wanted to find icons in the same style. Where are they from?
https://www.netlify.com/blog/astro-netlify-adapter/
Is this something that would be easy to implement?
I tried to do it but could not get it to work.
But for those who code it might be easy. Any thoughts?
Paul
Thanks for sharing the template but when I tried to use it, I could not get hot reloading to work. I am not sure if this is related to this issue withastro/astro#4419
Hello! First off, I love this theme and am very grateful that you've shared it.
I've seen other people add Mastodon-powered comments to their blogs (any blogs, not necessarily Astro) and I think it's a great idea. I would try to do it myself, as I've already forked and customised the project a bit, but I am Terrible At Design and don't really know what I'm doing.
This person seems to have made it work: https://sam.pikesley.org/blog/2023/03/06/mastodon-powered-comments-in-astro/
From your comments on the search feature request, I understand that you might not want to include a Mastodon-specific comments component, but I'm curious to hear your thoughts either way.
Edit: this person has gone further and combined Mastodon comments and webmentions! https://kld.dev/adding-webmentions
Add expressive code to template
I'm getting an error while building the site
if i run the dev environment with
npm run dev
everything works normally
if i build the website with
npm run build
i get this
λ src/pages/og-image/[slug].png.ts
error Unsupported OpenType signature <!DO
File:
/tmp/astro-theme-cactus/node_modules/@shuding/opentype.js/dist/opentype.js:11450:18
Code:
11449 | } else {
> 11450 | throw new Error('Unsupported OpenType signature ' + signature);
| ^
11451 | }
11453 | var cffTableEntry;
The code is freshly cloned from github with NO modifications
Back button on the post details page
Hi,
I noticed the Quick Start section suggests npx create
, but I ran into a snag. Is the correct command perhaps npm create
?
Thank you.
There is a layout issue. Pages with a scroll bar don't have the same width as pages without a scroll bar.
As an example you check: without scroll bar and with scroll bar.
I solved this issue by adding overflow-y-scroll
in the body.
Hey just seen the added search and new post type with cover image.
Was wondering if there is a way to update the template without causing breaking changes given I customized it a little bit.
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.