Skip to content

Commit 2b585b8

Browse files
ufocoderufocoder
committed
fix: layout
1 parent 2c0ffe1 commit 2b585b8

6 files changed

Lines changed: 50 additions & 32 deletions

File tree

‎src/config/pages.ts‎

Lines changed: 14 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -74,7 +74,8 @@ export function normalizePathname(pathname: string) {
7474
path = path.slice(base.length) || '/';
7575
}
7676

77-
return path.replace(/\/$/, '') || '/';
77+
const normalizedPath = path.replace(/\/$/, '') || '/';
78+
return normalizedPath === '/' ? '/preface' : normalizedPath;
7879
}
7980

8081
export function withBase(href: string) {
@@ -92,16 +93,25 @@ export function isPathActive(pathname: string, href: string) {
9293
}
9394

9495
export function getAllPages() {
95-
return Object.entries(pageModules)
96+
const pages = Object.entries(pageModules)
9697
.filter((entry): entry is [string, PageModule & { metadata: PageMetadata }] =>
9798
Boolean(entry[1]?.metadata),
9899
)
99100
.map(([path, page]) => ({
100101
href: pagePathToHref(path),
101102
label: page.metadata.title,
102103
groupTitle: page.metadata.groupTitle ?? '',
103-
}))
104-
.sort((a, b) => {
104+
}));
105+
106+
if (!pages.some((page) => page.href === '/about')) {
107+
pages.push({
108+
href: '/about',
109+
label: 'О проекте',
110+
groupTitle: '',
111+
});
112+
}
113+
114+
return pages.sort((a, b) => {
105115
const rankDiff = pageSortRank(a.href) - pageSortRank(b.href);
106116
if (rankDiff !== 0) return rankDiff;
107117

‎src/layouts/Drawer.astro‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@ const isContentActive = isPrefaceActive || stageGroups.some((entry) => isGroupAc
3131
---
3232

3333
<aside class="docs-sidebar hidden min-w-0 flex-col lg:flex">
34-
<a href={withBase('/about')} class="docs-site-brand">
34+
<a href={withBase('/')} class="docs-site-brand">
3535
<span>
3636
<span>2.5D Renderer</span>
3737
<small>почти как в DOOM 1993</small>

‎src/layouts/PageLayout.astro‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,7 @@ const yandexMetrikaId = import.meta.env.PROD
4040
<Drawer currentPath={currentPath} />
4141
<div class="docs-content-wrap px-4 py-6 lg:px-8 lg:py-12">
4242
<div class="docs-content-topbar">
43-
<a href={withBase('/about')} class="docs-topbar-brand">
43+
<a href={withBase('/')} class="docs-topbar-brand">
4444
<span>2.5D Renderer</span>
4545
<small>почти как в DOOM 1993</small>
4646
</a>

‎src/pages/_components/PrefaceContent.astro‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
---
2+
import imageGameSrc from '@app/stages/Preface/assets/wolf3d-like.png';
3+
import imageDemoSrc from '@app/stages/Preface/assets/raycasting.png';
4+
import imageDoomqlSrc from '@app/stages/Preface/assets/doomql.png';
5+
---
6+
7+
<section class="flex flex-col gap-4">
8+
<p class="py-2">
9+
В прошлом я хотел ближе познакомиться с компьютерной графикой и одновременно с этим создать уже что-то рабочее. Погружаться в мир шейдеров оказалось не таким интересным занятием, нельзя было получить быстрый результат, сорвать низковисящий фрукт, поэтому я отложил изучение шейдеров в долгий ящик и решил найти для себя иной подход. На глаза попадались статьи про такую технику отрисовки как <a class="link underline" href="https://en.wikipedia.org/wiki/Ray_casting" target="_blank">Raycasting</a>. Если вы немного помните курс школьной геометрии и умеете программировать, то достаточно будет потратить несколько выходных, чтобы создать свой мир в виде лабиринта.
10+
</p>
11+
<p class="py-2">
12+
Изучив эту технику, я <a class="link underline" href="https://github.com/ufocoder/fps" target="_blank">реализовал</a> браузерную игру похожую на продвинутую версию <a class="link underline" href="https://en.wikipedia.org/wiki/Wolfenstein_3D" target="_blank">Wolfenstein 3D</a> с использованием паттерна <a class="link underline" href="https://en.wikipedia.org/wiki/Entity_component_system target="_blank"">Entity-Component-System</a> (плюс спасибо ребятам за <a class="link underline" href="https://github.com/ufocoder/fps/pull/36 target="_blank"">систему подсветки</a> и <a class="link underline" href="https://github.com/ufocoder/fps/pull/27" target="_blank">открытия дверей</a>):
13+
</p>
14+
<img src={imageGameSrc.src} class="max-w-150" alt="Wolfenstein 3D-like browser game screenshot" />
15+
<p class="py-2">
16+
Однако многие, кто не знаком с отрисовщиками прошлого, скажут, что <a class="link underline" href="https://ufocoder.github.io/fps/" target="_blank">эта игра</a> похожа на DOOM, но к сожалению это не он. И кстати, некоторые разработчики не стесняются этим незнанием пользоваться, например, проект <a class="link underline" href="https://github.com/cedardb/DOOMQL" target="_blank">DOOMQL</a> под капотом содержит wolf3d-like отрисовщик:
17+
</p>
18+
<img src={imageDoomqlSrc.src} class="max-w-150" alt="DOOMQL screenshot" />
19+
<p>
20+
Чтобы передать другим свой опыт изучения raycasting, я реализовал отдельное <a class="link underline" href="https://ufocoder.github.io/raycasting-demo/" target="_blank">raycasting demo</a>, где любой может проанализировть, как заданные параметры отрисовки влияют на конечный результат:
21+
</p>
22+
<img src={imageDemoSrc.src} class="max-w-150" alt="Raycasting demo screenshot" />
23+
<p>
24+
Что ж. Теперь настало время перейти к DOOM-like отрисовщику.
25+
</p>
26+
</section>

‎src/pages/index.astro‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,8 @@
11
---
2-
import { withBase } from '@app/config/pages';
3-
4-
return Astro.redirect(withBase('/about'));
2+
import PageLayout from '@app/layouts/PageLayout.astro';
3+
import PrefaceContent from './_components/PrefaceContent.astro';
54
---
5+
6+
<PageLayout>
7+
<PrefaceContent />
8+
</PageLayout>

‎src/pages/preface.astro‎

Lines changed: 2 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,13 @@
11
---
22
import PageLayout from '@app/layouts/PageLayout.astro';
33
import type { PageMetadata } from '@app/config/pages';
4-
import imageGameSrc from '@app/stages/Preface/assets/wolf3d-like.png';
5-
import imageDemoSrc from '@app/stages/Preface/assets/raycasting.png';
6-
import imageDoomqlSrc from '@app/stages/Preface/assets/doomql.png';
4+
import PrefaceContent from './_components/PrefaceContent.astro';
75
86
export const metadata: PageMetadata = {
97
title: 'Предисловие',
108
};
119
---
1210

1311
<PageLayout>
14-
<section class="flex flex-col gap-4">
15-
<p class="py-2">
16-
В прошлом я хотел ближе познакомиться с компьютерной графикой и одновременно с этим создать уже что-то рабочее. Погружаться в мир шейдеров оказалось не таким интересным занятием, нельзя было получить быстрый результат, сорвать низковисящий фрукт, поэтому я отложил изучение шейдеров в долгий ящик и решил найти для себя иной подход. На глаза попадались статьи про такую технику отрисовки как <a class="link underline" href="https://en.wikipedia.org/wiki/Ray_casting" target="_blank">Raycasting</a>. Если вы немного помните курс школьной геометрии и умеете программировать, то достаточно будет потратить несколько выходных, чтобы создать свой мир в виде лабиринта.
17-
</p>
18-
<p class="py-2">
19-
Изучив эту технику, я <a class="link underline" href="https://github.com/ufocoder/fps" target="_blank">реализовал</a> браузерную игру похожую на продвинутую версию <a class="link underline" href="https://en.wikipedia.org/wiki/Wolfenstein_3D" target="_blank">Wolfenstein 3D</a> с использованием паттерна <a class="link underline" href="https://en.wikipedia.org/wiki/Entity_component_system target="_blank"">Entity-Component-System</a> (плюс спасибо ребятам за <a class="link underline" href="https://github.com/ufocoder/fps/pull/36 target="_blank"">систему подсветки</a> и <a class="link underline" href="https://github.com/ufocoder/fps/pull/27" target="_blank">открытия дверей</a>):
20-
</p>
21-
<img src={imageGameSrc.src} class="max-w-150" alt="Wolfenstein 3D-like browser game screenshot" />
22-
<p class="py-2">
23-
Однако многие, кто не знаком с отрисовщиками прошлого, скажут, что <a class="link underline" href="https://ufocoder.github.io/fps/" target="_blank">эта игра</a> похожа на DOOM, но к сожалению это не он. И кстати, некоторые разработчики не стесняются этим незнанием пользоваться, например, проект <a class="link underline" href="https://github.com/cedardb/DOOMQL" target="_blank">DOOMQL</a> под капотом содержит wolf3d-like отрисовщик:
24-
</p>
25-
<img src={imageDoomqlSrc.src} class="max-w-150" alt="DOOMQL screenshot" />
26-
<p>
27-
Чтобы передать другим свой опыт изучения raycasting, я реализовал отдельное <a class="link underline" href="https://ufocoder.github.io/raycasting-demo/" target="_blank">raycasting demo</a>, где любой может проанализировть, как заданные параметры отрисовки влияют на конечный результат:
28-
</p>
29-
<img src={imageDemoSrc.src} class="max-w-150" alt="Raycasting demo screenshot" />
30-
<p>
31-
Что ж. Теперь настало время перейти к DOOM-like отрисовщику.
32-
</p>
33-
</section>
12+
<PrefaceContent />
3413
</PageLayout>

0 commit comments

Comments
 (0)