• I could use the View Transitions API, but I'll need to find a Qwik-based solution anyway.

I need to think about how to implement it.

1. giscus
2. Turso
3. Astro DB (related: #66)

It's still a low priority, but it might be fun to like posts.

For this I need to think about data persistence.
Qwik makes Turso a first-class citizen, so you might want to use that.

• Implementation is related to #66
• I need to look into Turso

• It's not publicly distributed on Fontsource or similar, so I have to think about delivery and performance.
• I need to check if the ligature works on the site.

Since the textlint settings are large, I would like to consider separating them.

module.exports = {
  // ...
  pathGroups: [
    {
      group: "internal",
      pattern: "~/constants",
    },
    {
      group: "internal",
      pattern: "~/routes",
    },
    {
      group: "internal",
      pattern: "~/components",
    },
    {
      group: "internal",
      pattern: "~/hooks",
    },
  ],
  // ...
};

As above, the import order should be constants → components.

import { Game } from "~/components/ui/game/game";
import { NAME, SNS, TITLE } from "~/constants/info";

The import statement in index.tsx does not follow this pattern.

I want to add TL/DR mode.
When using TL/DR mode, anything other than the specified text or code block will be blurred.

Ref: https://fettblog.eu/typescript-react-component-patterns/

Current JS does not allow fine-grained control over import and export.

I want to limit the file scope that can be import.

I think it might be possible with ESLint.

Qwik uses class instead of className, so if you pass class to Prop and perform Destructuring, a syntax error will occur in JSX.

• I need to find a way to express Snake with beautiful gradations.

I'm looking for something that's not too harsh

already tried

• textlint-rule-rousseau
• textlint-rule-write-good
• textlint-rule-common-misspellings
• textlint-rule-ginger
• textlint-rule-stop-words

Since the textlint settings are large, I would like to consider separating them.

<a /> and <button /> can be divided into two main patterns in terms of color.

1.color-secondary-1 => color-secondary-4

2. color-secondary-1-lighter => color-secondary-1

Since everything consists of one of these two, you can consider making them common.

I may need to rethink the naming of some directories.

• functional: function can mean many different things depending on the context, which can be confusing. Also, I think directory names should be nouns.

This problem is caused by the "vite-plugin-macro" that is automatically installed during integration, but after a quick check, I think it is possible that it will work without this plugin in the first place.

related: Qwik #5837

Related to #14.

• I will need to become familiar with Shiki's API, as implementation methods may change.
• I will need to design about comment styles (block and inline).

I want to display GitHub's Contribution Graph.
In addition, I think it would be good to be able to visualize personal scores such as workouts and blog update frequency in the same format.

• GitHub

• Workout

• Blog post

• I need to design

• I need to think about the UI.

It is desirable to have both Light and Dark if possible.

• Solarized
• Gruvbox
• Ayu
• Dracula

Add an outer gutter on the page.
This affects all pages.

• Need to resolve behavior when scrolling

Referring to VSCode and WebStorm, the styles for tabs :hover and activated are slightly different.

https://qwik.dev/docs/integrations/icons/

Icons may work better with Qwik.

I need to fix the transition animation of <Header />.

No transition animation is applied on exit.

I think this is because the tag itself changes from <a /> to <span /> when the screen transitions.

However, since it has changed from the route, it is necessary to check whether it is a SPA or not.

<Link /> is not accessible.
When transitioning using the keyboard, Focus does not disappear even if TabIndex is set to -1.
Using useVisibleTask$() to remove Focus is also not smart.

However, if I change the element itself, the animation doesn't work.

• Page transition animation
• transition exit

needs to be resolved.

Note: This is a very far-fetched idea of introducing a meta-framework within a meta-framework, and requires close investigation.

Content management is better in Astro than in QwikCity.

• Astro Contents
• Astro DB

I basically use Qwik, but I wonder if it's possible to manage only the content with Astro?

If a persistence layer is needed in the future, Astro DB is implemented in Turso, but Turso also works well with Qwik (although I don't know much about it)

It would be good if you could use DeepL or LLM to support multiple languages when building.

Although still a low priority, this requires investigation.

• Investigation of implementation method
• Thinking about UI

The icon implementation depends on Remix Icon.

I want to abstract.

From an accessibility perspective, <a /> should be pressable even if it is "current".

• Migrate JS like file format to Biome.
• Migrate general lint rules (not import order, etc.) to Biome.

Related: #28

• I need to find a Qwik way

Might be helpful: https://reflect.app/

The max-height trick is bad UX. Consider using ResizeObserver instead.

Ideas that are coming to mind right now

• Incognito mode
• Lucky 7
• Aurebesh
• Hard mode

The directory directly under routes should be clean.

I think it's better for home page components to have their own subdirectory.

• Move <TopPage /> to routes/hello/
• Move some components to routes/