Giter VIP home page Giter VIP logo

manuelernestog / astrofy Goto Github PK

View Code? Open in Web Editor NEW
742.0 7.0 245.0 1.36 MB

Astrofy is a free and open-source template for your Personal Portfolio Website built with Astro and TailwindCSS. Create in minutes a website with Blog, CV, Project Section, Store and RSS Feed.

Home Page: https://astrofy-template.netlify.app/

License: MIT License

JavaScript 3.49% Astro 90.70% TypeScript 5.58% CSS 0.23%
astro blog daisiyui personal-blog personal-website porfolio-website tailwindcss website-template astro-template astrobuild

astrofy's Introduction

👋 Hi there, I'm Manuel

  • 👨‍💻 I am a Software Engineer.
  • 🚀 I work creating software that solve problems in a simple way and sharing what I learn along the way. I like minimalism, Open-Source and personal development.
  • 🌍 I'm based in Havana 🇨🇺
  • ⭐️ You can see all my work on my personal website
  • ✉️ Contact me at [email protected]

💻️ Fav Tech Stack

  • Svelte
  • Astro
  • Tailwind
  • Electron
  • Ruby on Rails

Manuel Ernesto's Twitter Blog link

manuelernestog's GitHub stats

astrofy's People

Contributors

0x346e3730 avatar ampit avatar brahimabd98 avatar carloszbent avatar coreyryanhanson avatar dave-sh avatar david96182 avatar dlcastillop avatar grungeelfz avatar harrisonratcliffe avatar kyxey avatar luigieai avatar manuelernestog avatar martinstanicio avatar ollegkz avatar sergio-gn avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar

astrofy's Issues

daisyUI 3.0.3 rompe el componente sidebar

Hola Manuel.
Ante todo muchas gracias, dado que utilizo tu template con algunas cosas custom que le agregué a mi site personal: https://charlyautomatiza.vercel.app/

Al intentar usar la versión más reciente de este momento de daisyUI 3.0.3, no levanta el componente SideBar.astro, no se visualiza error pero directamente el componente no se renderiza.

Con la versión: "daisyui": "2.51.6" esto no ocurre.

Dockerfile/Containerfile and .dockerignore missing

Hi,
The project currently lacks a Dockerfile (or Containerfile) and a .dockerignore file. These files are essential for defining how to build Docker images and excluding unnecessary files from the build context, respectively.

Behavior change for Horizontal Card Images after update

Before the Image tag update, I was able to define an aspect ratio for images on the Horizontal Card which would automatically crop the images to conform to that ratio. While Aspect ratio is inferred from the width and height, I noticed that in practice, the cropping no longer occurs regardless of any width or height values chosen.

I'm not sure if it's a bug or if using those values to force a crop (instead of creating separate thumbnails) is not an intended use case.

Code snippets in .md files

Hola!

I stuck in issue - when .md files contains code snippets like this

max@DESKTOP:~/DEV/test$ docker-compose exec php vendor/phpunit/phpunit/phpunit --testsuite Feature

it render with fixed width and in mobile devices view horizontal scroll appears.

Reproduce: add snippet above to blog post and check on mobile device.

I'm really poor with css and cannot solve this problem :(

Icon issue

I can't seem to chang the icons at socials

Sitemap can't be read for Google search console

Hi Manuel! I've recently created my portfolio using astrofy. I am facing some issues w.r.t the sitemap generations. I did make the required changes in the config files, and can see the changes reflected in the robots.txt

I hosted my site using the netlify subdomain and went on to verify it on google search console. However, when I try to submit a sitemap, it says couldn't fetch. I have validated my XML files using the xsd 0.9 schemas as well.

Capture-2024-03-10-182333
Capture-2024-03-10-182401

Switching languages

I'm trying to implement switching languages, I follow a couple of guides of i18n, but neither way works, can you help me please? I'm using utils.ts and ui.ts. in the basic url everything works (localhost:4321) but using language url get 404 error (localhost:4321/en/ for example)

This is the utils.ts:

import { ui } from "./ui";

export const LANGUAGES = {
  en: "English",
  de: "Deutsch",
  es: "Español",
};

export const DEFAULT_LANG = "en";

export type UiType = keyof typeof ui;

export function getLangFromUrl(url: URL) {
  const [, lang] = url.pathname.split("/");
  if (lang in ui) return lang as UiType;
  return DEFAULT_LANG;
}

export function useTranslations(lang?: UiType) {
  return function t(
    key: keyof (typeof ui)[typeof DEFAULT_LANG],
    ...args: any[]
  ) {
    let translation = ui[lang ?? DEFAULT_LANG][key] || ui[DEFAULT_LANG][key];
    if (args.length > 0) {
      for (let i = 0; i < args.length; i++) {
        translation = translation.replace(`{${i}}`, args[i]);
      }
    }
    return translation;
  };
}

export function pathNameIsInLanguage(pathname: string, lang: UiType) {
  return (
    pathname.startsWith(`/${lang}`) ||
    (lang === DEFAULT_LANG && !pathNameStartsWithLanguage(pathname))
  );
}

function pathNameStartsWithLanguage(pathname: string) {
  let startsWithLanguage = false;
  const languages = Object.keys(LANGUAGES);

  for (let i = 0; i < languages.length; i++) {
    const lang = languages[i];
    if (pathname.startsWith(`/${lang}`)) {
      startsWithLanguage = true;
      break;
    }
  }

  return startsWithLanguage;
}

export function getLocalizedPathname(pathname: string, lang: UiType) {
  if (pathNameStartsWithLanguage(pathname)) {
    const availableLanguages = Object.keys(LANGUAGES).join("|");
    const regex = new RegExp(`^\/(${availableLanguages})`);
    return pathname.replace(regex, `/${lang}`);
  }
  return `/${lang}${pathname}`;
}

Blog tags?

Thanks for the slick theme!

Any chance to add blog tags? (Liked that feature in this theme but it has some navigation issues.)

Update to Astro 3.0

Astro version 3.0 is here. Improvements are included in the following aspects:

  • Image Optimization (stable): Unflagged and better than ever.
  • Faster Rendering Performance: Astro components render 30-75% faster.
  • SSR Enhancements for Serverless: New ways to connect to your hosting platform.
  • HMR Enhancements for JSX: Fast Refresh support for React and Preact.
  • Optimized Build Output: Cleaner and more performant HTML.

It would be interesting to migrate to this version. greetings

Error: Cannot read properties of undefined (reading 'data')

 error   Cannot read properties of undefined (reading 'data')
  File:
    /Users/raghav/VSCodeProjects/voyager/src/pages/blog/[slug].astro:18:33
  Code:
    17 | const { entry } = Astro.props;
    > 18 | const post : BlogSchema = entry.data;
         |                                 ^
      19 | const { Content } = await entry.render();
      20 | ---

Hi, I'm getting above error as I'm trying to run the project on local machine. It's strange because there were no issues in the beginning, I even deployed the website successfully but suddenly it popped up while running the command npm run dev

Project link https://github.com/avidraghav/voyager

RSS Feed shows 404 page

Environment Details

Ubuntu 22.04
Node 18.16.0
Package Manager: pnpm

Steps to Reproduce

Run

pnpm run dev

image

Actually, this bug can be seen on the netlify demo.

Run

pnpm run build

The build output directory dist will not contain a file rss.xml.

Additional Fix

After fixing this issue, the rss feed page need a style template to give clear instructions for subscribers.

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.

Blank Screen with Toggle when Reload

image

When I update the content in my blog, and hit save on the code, when go again on the localhost to check the result, it's like this.
Please let me know if this issue is only for me, or anything related with astro

Remove `npm` and update `README`

Expected Behavior

It should only have pnpm related files as we already shifted to it and its better.

Current Behavior

we still have package-lock.json and the README still contains npm commands.

Description

I am willing to make a PR for this issue and contribute to this project.

Math equation could not render correctly

To support latex math, I change the config as follows:

import {defineConfig} from 'astro/config';
import mdx from '@astrojs/mdx';
import sitemap from '@astrojs/sitemap';
import tailwind from "@astrojs/tailwind";

import image from "@astrojs/image";
import remarkMath from "remark-math";
import rehypeKatex from "rehype-katex";

// https://astro.build/config

// https://astro.build/config
export default defineConfig({
    site: 'https://astrofy-template.netlify.app',
    integrations: [
        mdx({
            syntaxHighlight: 'shiki',
            shikiConfig: {theme: 'dracula'},
            remarkPlugins: [remarkMath],
            rehypePlugins: [rehypeKatex],
            remarkRehype: {footnoteLabel: 'Footnotes'},
            gfm: false,
        }),
        sitemap(),
        tailwind(),
        image({
            serviceEntryPoint: '@astrojs/image/sharp',
            cacheDir: "./.cache/image",
            logLevel: 'debug'
        })]
});

and I did not change anything else. But the result will be like:
image

the problem is all math are rendered twice.

I did not get any web development training before, I guess it must be my mistake, plz tell me.

Blog Image not rendering

I have created my portfolio site with this template. I am facing an issue with the blog images. I have given the address of the image as per the documentation however, the blog image is not showing. I have also mailed Astro.build regarding this issue, but got no reply yet

My website: www.sukhmansingh.tech

moving images under src

according to the image docs we should consider moving images under src/ since currently all images are in the public folder
we should consider applying the AVIF format to all images

Themes not available

Hey, can you pls tell me why is it not showing me the option to change the theme?

Website only shows checkbox

When cloning the repo, running npm install and npm run dev with the latest version (2.5.0), the website is not loading correctly for me.
I can see all of the generated HTML and CSS in the developer console, but none of it is visible in the browser itself.
When doing the same steps on 2.3.0, it still works.

Blog improvments

The blog collections in this template had a few behavior annoyances for my use case as I was migrating my blog posts.

  1. In the markdown for blog posts, the default behavior redirected people away from the site instead of opening a new tab. Specifying each time for each markdown file is cumbersome.
  2. The behavior for blog paths was extremely rigid.
    • There was no way of auto-generating slugs from the blog title (to have better inclusion of keywords in the url than the default behavior).
    • The links would break if blog posts were nested in self contained subfolders (for storing post assets) (Although if maintaining posts in simple markdown for multiple platforms, this wouldn't be an effective way of storing images without an additional modification)

I already made fixes while building my website. One is a hacky use of the base tag but a solution that is far from ideal, but the second may be beneficial as a PR (let me know if I should).

https://github.com/coreyryanhanson/astrofy/tree/dev-blog-slug-from-title

I think the template would benefit by solving both issues cleanly.

Astro image integration

Astro image integration has been out for a while now and it enables caching images ,serving responsive images with different sizes
It's still experimental but I've already test it on my personal website and seems to be working fine
Astro images docs ref

store seccion

hi i am looking for a theme where i would be able to sell things, the store session can be able to sell things? or only decoration? in the case, you would be able to help me pls?

How to reset cache?

When I tried to change my profile image, I used the same name to replace it.
On the code the image was replaced, but on the website it wasn't. I had to change the file name on the code and on the file.
Is it possible to simply reset the cache? If not, where did the old image that I was seeing went?

Blog title as a page name

Hi

Can the title of a blog post be used as the page name on a website, such as mysite.com/blog/my-blog-title instead of mysite.com/blog/post1?

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.