alecodes/personal-page
2
0
Fork 0
Code Issues 17 Pull requests Projects 1 Releases Packages 1 Wiki Activity Actions

Update games to make them visible

Browse source
This commit is contained in:
Alexander Navarro 2023-12-17 20:58:58 -03:00
parent 800d2a83b1
commit b6450742d1
7 changed files with 29 additions and 36 deletions
Download patch file Download diff file Expand all files Collapse all files

4
src/components/Table/Filters/index.tsx
View file

@ -3,8 +3,8 @@ import { HeaderType, type Filter, type Value } from '../types.ts';
export { default as SelectFilter } from './SelectFilter.tsx';
export { default as NumberFilter } from './NumberFilter.tsx';
const filterString = (value: Value, data: any): boolean => {
return data.search(value) !== -1;
const filterString = (value: string, data: string): boolean => {
return data.toLowerCase().search(value.toLowerCase()) !== -1;
};
const filterNumber = (value: Value, data: any): boolean => {
if (!Array.isArray(value)) {

6
src/components/Table/Table.tsx
View file

@ -48,10 +48,8 @@ export default function Table({ data, headers }: Props): JSX.Element {
// and because Astro don't allow me to pass JSX from an Astro file to a TSX file,
// so I have to pass the formatted row as a string.
// DON'T use this method on a public API
if (header.formatter != null) {
return (
<div dangerouslySetInnerHTML={{ __html: header.formatter(data) }} />
);
if (header.hasCustomCell) {
return <div dangerouslySetInnerHTML={{ __html: data.customCell }} />;
}
if (header.type === HeaderType.Multiple) {

2
src/components/Table/types.ts
View file

@ -13,7 +13,7 @@ export enum HeaderType {
export interface Header {
key: string;
header: string;
formatter?: (data: DataItem) => string;
hasCustomCell: boolean;
type: HeaderType;
}

2
src/content

@ -1 +1 @@
Subproject commit e740dda6515e13c9632e1c560664d88492ebfe2f
Subproject commit 2fed5c0abfa4f778dc5acc6c4e7c527671ace48b

26
src/pages/games/[...slug].astro
View file

@ -5,6 +5,8 @@ import {
GetStaticPaths,
} from 'astro';
import { getCollection } from 'astro:content';
import Layout from '@layouts/Layout.astro';
import Toc from '@components/Toc/Toc';
export const getStaticPaths = (async () => {
const games = await getCollection('games');
@ -21,26 +23,8 @@ const entry = Astro.props;
const { Content, headings } = await entry.render();
---
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
</head>
<body>
<ul>
{
headings.map((header) => (
<li>
<a href={`#${header.slug}`}>
{header.depth} - {header.text}
</a>
</li>
))
}
</ul>
<Layout title={entry.data.title}>
<Toc headings={headings} />
<Content />
</body>
</html>
</Layout>

10
src/pages/games/index.astro
View file

@ -6,12 +6,17 @@ import { HeaderType, type Header } from '@components/Table/types';
const rawGames = await getCollection('games');
const games = rawGames.map((item, idx) => ({
let games = rawGames.map((item, idx) => ({
...item.data,
id: idx + 1,
slug: item.slug,
customCell: item.data.has_content
? `<a href="games/${item.slug}">${item.data.title}</a>`
: `<div>${item.data.title}</div>`,
}));
games = games.sort((a, b) => b.date_added.getTime() - a.date_added.getTime());
const headers: Header[] = [
{
key: 'id',
@ -21,9 +26,8 @@ const headers: Header[] = [
{
key: 'title',
header: 'Title',
// TODO: uncomment this when we are ready ton show a single page game.
// formatter: (data) => `<a href="games/${data.slug}">${data.title}</a>`,
type: HeaderType.String,
hasCustomCell: true,
},
{
key: 'status',

13
src/pages/index.astro
View file

@ -5,7 +5,10 @@ import Card from '../components/Card.astro';
import { Image } from 'astro:assets';
import portrait from '../assets/images/portrait.jpg';
const games = await getCollection('games');
let games = await getCollection('games', ({ data }) => data.has_content);
games = games.sort(
(a, b) => b.data.date_added.getTime() - a.data.date_added.getTime(),
);
const blog = await getCollection('blog', ({ data }) =>
import.meta.env.PROD ? data.draft !== true : true,
@ -37,8 +40,12 @@ const portafolio = await getCollection('portafolio', ({ data }) =>
</p>
<p class="text-justify">
The first version of this project was developed as a <a href="https://en.wikipedia.org/wiki/Minimum_viable_product">MVP</a>. So this sites lacks many features I would like to add over time.
For an up to date roadmap, please visit the <a href="https://codeberg.org/aleidk/personal-page">project README</a>.
The first version of this project was developed as a <a
href="https://en.wikipedia.org/wiki/Minimum_viable_product">MVP</a
>. So this sites lacks many features I would like to add over time. For an
up to date roadmap, please visit the <a
href="https://codeberg.org/aleidk/personal-page">project README</a
>.
</p>
</section>