docs(docs): DevLogs added

Signed-off-by: Neko Ayaka <neko@ayaka.moe>
This commit is contained in:
Neko Ayaka
2025-03-07 15:47:24 +08:00
parent 41f43504ef
commit 232d32c130
17 changed files with 210 additions and 0 deletions
+4
View File
@@ -22,6 +22,10 @@ export default defineConfig({
label: 'References',
autogenerate: { directory: 'references' },
},
{
label: 'Blog',
autogenerate: { directory: 'blog' },
},
],
head: [
{ tag: 'link', attrs: { rel: 'icon', type: 'image/svg+xml', href: '/favicon.svg', sizes: 'any' } },
Binary file not shown.

After

Width:  |  Height:  |  Size: 201 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 201 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 43 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 45 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 86 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 97 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 133 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 132 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 74 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 176 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 165 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 142 KiB

@@ -0,0 +1,108 @@
---
title: DevLog @ 2025.03.05
---
## Dejavu
Yesterday I added one extra package called
[`gpuu` (GPU utilities)](https://github.com/moeru-ai/airi/tree/main/packages/gpuu)
to help us work with WebGPU, and perhaps we can use it to interact with real
GPU devices too. There is not that much capabilities it can do right now,
we will add more capabilities for it in the future.
It feels like this:
```ts
import { check } from '@proj-airi/gpuu/webgpu'
import { onMounted } from 'vue'
onMounted(() => {
const result = await check()
console.log(result)
// do something with the result
})
```
Last week, our corporate designer/artist has submitted our commission for the
basic/first version of Project Airi logo. The feeling of the logo looks like
this:
![](../../../assets/images/blog/DevLog-2025.03.05/airi-logos-v1.png)
## Daytime
From the perspective of designing, these were so complex and user unfriendly
when scaled down to Home Screen app sizes. Therefore I added this version:
![](../../../assets/images/blog/DevLog-2025.03.05/airi-logo-v2.png)
And edited with other variants:
![](../../../assets/images/blog/DevLog-2025.03.05/airi-logos-v2.png)
All of those were only suitable for dark theme, "we need a dark theme version
logo as well!" I thought, so I did this:
![](../../../assets/images/blog/DevLog-2025.03.05/airi-logo-v2-dark.png)
[@kwaa](https://github.com/kwaa) said that we can try to swap the color schemes
for both themes:
![](../../../assets/images/blog/DevLog-2025.03.05/airi-logos-v3.png)
This indeed looks better.
We updated the Typography too:
![](../../../assets/images/blog/DevLog-2025.03.05/airi-logos-v4.png)
And optimized the background colors:
![](../../../assets/images/blog/DevLog-2025.03.05/airi-logos-v5.png)
So this is what we get finally:
![](../../../assets/images/blog/DevLog-2025.03.05/airi-logos-final.png)
Later on today, I was working on publishing the
[documentation site](https://airi.build) of Project Airi online, for me,
and other developers, artists to use it as a reference and guidelines,
I did it! And the newly designed logo has been put into the
[documentation site](https://airi.build) along with the color palette:
![](../../../assets/images/blog/DevLog-2025.03.05/airi-build-light.png)
![](../../../assets/images/blog/DevLog-2025.03.05/airi-build-dark.png)
[Basic guide](https://airi.build/guides/),
[contribution guidelines](https://airi.build/references/contributing/guide/),
and [designing guidelines](https://airi.build/references/design-guidelines/)
were all included from this moment.
I spent a whole noon to get a feel of the Text PV animations on YouTube,
I really like them, I wish I can implement similar transitioning effect on
browser too!
https://www.youtube.com/watch?v=_AIgv0EsOE4
Luckily, I do know a developer & artist that really good at this:
[yui540](https://github.com/yui540) (you can check his/her personal website
here: [yui540.com](https://yui540.com)), and he/she just posted a brand new
repository for demonstrating the fantastic transition effects he/she used.
I added the related resources and website links into the
[https://airi.build](https://airi.build) site, you can check them out.
## DevStream
I ported many of the animation transitions from [yui540](https://github.com/yui540)'s
[repository](https://github.com/yui540/css-animations) to
[https://proj-airi-packages-ui-transitions.netlify.app/#/](https://proj-airi-packages-ui-transitions.netlify.app/#/).
It worked really well:
![](../../../assets/images/blog/DevLog-2025.03.05/animation-transitions.gif)
That's all for today's DevLog, thank you to everyone that joined the DevStream
and stayed with me until the end. I'll see you all tomorrow.
@@ -0,0 +1,92 @@
---
title: DevLog @ 2025.03.06
---
## Dejavu
Previous day, I was on DevStream to show the progress of making the
fundamental animations and transitions for Airi.
The goal is to port and adapt the amazing work done by [@yui540](https://yui540.com/)
into a reusable Vue component for any of the Vue project to be able to use it.
> Details of yui540 and referenced libraries and work already were included
> at the newly deployed documentation site at
> [https://airi.build/references/design-guidelines/resources/](https://airi.build/references/design-guidelines/resources/).
The result is quite good, already deployed to
[https://proj-airi-packages-ui-transitions.netlify.app/#/](https://proj-airi-packages-ui-transitions.netlify.app/#/).
![](../../../assets/images/blog/DevLog-2025.03.05/animation-transitions.gif)
> And also, from now on, all of the playgrounds of each packages will use
> "proj-airi" + "${subDirectory}" + "$packageName}" pattern for the Netlify
> deployment.
While the goal of previous day was trying to split the implementation of
CSS into Vue component, the actual part for reusable wasn't done yet,
I'll still need to design a workflow and mechanism that extensible and
flexible for other pages to use.
## Day time
I experimented with the definePage macro hook from unplugging-vue-router,
found it quite worked well for my scenario and decided the path to follow
on.
And I ported 3 new animation transitions from
[https://cowardly-witch.netlify.app/](https://cowardly-witch.netlify.app/),
they were already available on
[https://proj-airi-packages-ui-transitions.netlify.app/#/](https://proj-airi-packages-ui-transitions.netlify.app/#/) .
I deployed the official documentation site onto https://airi.build yesterday,
[@kwaa](https://github.com/kwaa) commented that he would suggest me try
the `https://airi.more.ai/docs` approach instead, but I couldn't figure out
a way to make a 200 redirect proxy for /docs.
I experimented it a little with like ten commits fighting against CI/CD
pipeline (yes fighting against again), but still not made it work.
Later on this day, I researched some of the technologies and
[open source repositories](https://github.com/deepseek-ai/open-infra-index)
that DeepSeek team has released for a week ago, as well as the so called
ByteDance released [LLM gateway AIBrix](https://github.com/vllm-project/aibrix).
And was researching whether the newly released and announced Phi-4-mini was
capable of porting for Airi to use, good news is,
[Phi-4-mini](https://techcommunity.microsoft.com/blog/educatordeveloperblog/welcome-to-the-new-phi-4-models---microsoft-phi-4-mini--phi-4-multimodal/4386037)
included the function calling abilities, that means we can finally build our
agents with pre-trained support.
## DevStream
I contacted another artist afternoon, saying that I am willing to pay
for a customized pixel art commission for me to use it as an avatar
for my next coming update accounts.
~~Yes I asked the artist to put some Easter eggs inside haha, good luck you folks finding it.~~
The layout and setup of the live stream has been updated 😻 It was designed
by myself almost a year ago, but it still looks great and feel calm when
looking at it. Please leave comments in the chat for any suggestions, really
appreciated.
![](../../../assets/images/blog/DevLog-2025.03.06/live-stream-layout-update.png)
During the DevStream of today, I was trying to integrate the stage transition
animation component into Airi's website main stage, it wasn't that smooth,
I found several bugs in my previous design for the animation component, good
news is that I already fixed them, and the new animation transition is available
already at our official deployment at [https://airi.moeru.ai](https://airi.moeru.ai).
I finally made the decision that coming from some random thoughts about the module
configuration UI and settings page. They were all implemented, and went on live,
should provide a better feeling when tweaking the settings now, I hope you
like it.
After I get off the stream and finally get on hands playing the result on my
phone, while it does work on desktop and tablet devices, I found that I
accidentally break the animation on mobile devices, will get this fixed tomorrow
daytime 😹.
That's all for today's DevLog, thank you to everyone that joined the DevStream
and stayed with me until the end. I'll see you all tomorrow.
+5
View File
@@ -27,3 +27,8 @@
--sl-color-gray-7: #f7f6f6;
--sl-color-black: #ffffff;
}
.sl-markdown-content img {
width: 100%;
height: auto;
}