Git Product home page Git Product logo

taverasmisael / taverasmisael.com Goto Github PK

View Code? Open in Web Editor NEW
2.0 3.0 0.0 33.02 MB

My personal website and blog. Build with an hybrid Astro SSR, SolidJS and TailwindCSS. Support for internazionalization and more.

Home Page: https://taverasmisael.com

JavaScript 2.02% TypeScript 32.15% Astro 24.78% CSS 0.69% MDX 40.36%
astro blog vercel astrobuild solidjs tailwind typescript tailwindcss

taverasmisael.com's Introduction

Taveras Misael Personal Blog

Hello

Environment

  • Node.js 19+
  • PNPM 8+

Environment variables

Most of these are standard, but some are specific to this project.

  • LOCAL_BUILD: Set to true to enable local build mode. This will disable Analytics, Algolia, and will use @astrojs/node adapter instead of the default SSR integration (@astrojs/vercel, for now). This is useful for testing and debugging.

taverasmisael.com's People

Contributors

taverasmisael avatar

Stargazers

 avatar  avatar

Watchers

 avatar  avatar  avatar

taverasmisael.com's Issues

Dark Theme Improvements

The light theme looks more appealing and clean than the dark counterpart.

I don't know what it is, or how, but we need to improve the dark theme.

Add light/dark theme support for code blocks

There are other things I'd like to add to the code blocks, but for those, I'll make another ticket.

By searching online how other people do this, I think only adding the css-variables theme is not enough; we might have to create a custom md plugin for this.

Improve the internationalization module

I wanted to do the i18n without external libraries to have more control and see how this works under the hood. It has its flaws, and we'll work on them eventually. The one we should tackle first is that we import both translation files, no matter the application's language. We should only bring one because the translations are not live; we do a full page reload when the user changes language.

So far, this is not an issue because we only have two languages, and there are few entries, but I can see this becoming a big problem over time, and it's better to work on this now or at least have a clear plan.

Split sitemap integration and add tests

The sitemap integration is helpful, but I did it just for fun and testing, and it grew. It is still manageable, but splitting some of the utilities and adding tests around it will be nice.

`font-display: swap` not wroking

This is one of the few real issues reported by Lighthouse. Although the page loads so fast that it is not very noticeable, there's a time when the custom fonts are not loaded, and the text is invisible.

We are using fontsource and the swap strategy, but it seems it needs to be fixed. Try to fix this. Self-hosting the font is a good solution, or manually declaring the fonts because we are already self-hosting.

On this comment I added a few images of this issue #20 (comment)

Add extra service for contact form

I only send an email, but the service might fail, or the email might end up in the spam folder. If we add a new integration with a service to record each sent mail, we can verify we are receiving and responding to everything. Also, it'll be a centralized way to verify people trying to contact me.

Reduce bundle size for main CSS

Astro is supposed to do this and only ship the necessary CSS for each page, but it's bundling everything on a single 404.cssfor some reason.

Reduce JavaScript bundle size (CommandBar)

I see kobalte is bringing its i18n package with a bunch of languages we don't support, and if we plan to, we'll add our translations, that'd be an excellent place to start.

I also saw that Solid Headless bundle size might be smaller, so that's an option I'm open to considering if the improvement is substantial.

Create search page

This is to allow non-js users to search the blog so the page should work without JS, but also to have a nice search box on Google results and so on. Probably we can create a Raycast integration too xd

Modal doesn't prevent the body from scrolling

To fix the issue where FullWidhContainers added a horizontal scroll, I added an overflow-x: hidden to the HTML element; this overrides the overflow in the body when the modal (for search) is open.

screen shot with the command bar open, but the scroll bar visible

Find a better way to split words for Spotymonials

This is from a WIP and discarded (for now) implementation for the testimonials. The current method is accurate but different from the natural reading pace. Find a better way to split the words.

If the time comes to work on this, I'll add more details.

Make old blog redirects permanent redirects

I decided to redirect old links to the new links (i.e., blog/some-post => [lang]/blog/some-post) if an entry is found with that slug.

So far, this is one of the best decisions because the traffic keeps coming, and users do not see a 404, but it is time to make those redirect permanent (301 instead of 302).

Reduce JavaScript bundle size (Internationalization)

I currently use the i18n module on the client side instead of build time, even when 90% of the text is not dynamic. I also bring both languages even it's impossible to use them at the same time, this will grow exponentially the more translations and languages we have.

Core Ideas

  • Remove unnecessary client-side translation. Pass the already localized text from Astro at build time
  • (extra) Remove calls to the unused language. For example, if we are on /es, there is no need to import the JSON translation.
  • If we can split the translations from the actual i18n helper, even better.

Implement keyboard navigation for CommandBar

The idea of the command bar (only search at the moment) is to be a hub to do things and hide easter eggs for the blog. Similar to VSCode Command Panel. We need to add support for keyboard navigation. The idea is to move between the options and scroll them to view when necessary without losing focus from the input.

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.