Skip to content

Commit

Permalink
feat: add tag and update
Browse files Browse the repository at this point in the history
  • Loading branch information
hamzaabamboo committed May 15, 2024
1 parent df10d40 commit 8fada8a
Show file tree
Hide file tree
Showing 13 changed files with 20,718 additions and 15,596 deletions.
2 changes: 2 additions & 0 deletions .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -133,3 +133,5 @@ styled-system
.nx

.strapi

.idx
16 changes: 13 additions & 3 deletions .vscode/settings.json
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,17 @@
},
"editor.formatOnSave": true,
"editor.stickyScroll.enabled": true,
"eslint.validate": ["typescript", "astro", "svelte"],
"eslint.validate": [
"typescript",
"astro",
"svelte"
],
"typescript.tsdk": "node_modules/typescript/lib",
"eslint.workingDirectories": ["apps/client", "apps/astro", "apps/api"]
}
"eslint.workingDirectories": [
"apps/client",
"apps/astro",
"apps/api"
],
"IDX.aI.enableInlineCompletion": true,
"IDX.aI.enableCodebaseIndexing": true
}
34 changes: 17 additions & 17 deletions apps/astro/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -20,32 +20,32 @@
},
"dependencies": {
"@ark-ui/react": "^2.2.3",
"@astrojs/check": "^0.5.10",
"@astrojs/netlify": "^5.2.0",
"@astrojs/react": "^3.2.0",
"@astrojs/check": "^0.6.0",
"@astrojs/netlify": "^5.2.1",
"@astrojs/react": "^3.3.4",
"@astropub/md": "^0.4.0",
"@types/react": "^18.2.75",
"@types/react-dom": "^18.2.24",
"astro": "^4.5.17",
"@types/react": "^18.3.2",
"@types/react-dom": "^18.3.0",
"astro": "^4.8.3",
"date-fns": "^3.6.0",
"eslint-plugin-astro": "^0.34.0",
"eslint-plugin-astro": "^1.2.0",
"fets": "^0.8.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-icons": "^5.0.1",
"react": "^18.3.1",
"react-dom": "^18.3.1",
"react-icons": "^5.2.1",
"react-markdown": "^9.0.1",
"remark-gfm": "^4.0.0",
"remark-textr": "^6.1.0",
"typescript": "^5.4.4"
"typescript": "^5.4.5"
},
"devDependencies": {
"@pandabox/prettier-plugin": "^0.1.2",
"@pandacss/dev": "^0.37.2",
"@pandacss/eslint-plugin": "^0.1.1",
"@pandacss/studio": "^0.37.2",
"@pandacss/types": "0.37.2",
"@park-ui/panda-preset": "^0.36.1",
"@typescript-eslint/parser": "^7.6.0",
"@pandacss/dev": "^0.39.1",
"@pandacss/eslint-plugin": "^0.1.4",
"@pandacss/studio": "^0.39.1",
"@pandacss/types": "0.39.1",
"@park-ui/panda-preset": "^0.37.0",
"@typescript-eslint/parser": "^7.9.0",
"eslint-plugin-jsx-a11y": "^6.8.0",
"eslint-plugin-prettier": "^5.1.3",
"eslint-plugin-react": "^7.34.1",
Expand Down
13 changes: 10 additions & 3 deletions apps/astro/panda.config.ts
Original file line number Diff line number Diff line change
Expand Up @@ -9,9 +9,10 @@ export default defineConfig({
presets: [
'@pandacss/preset-base',
createPreset({
accentColor: 'cyan',
accentColor: 'amber',
grayColor: 'neutral',
borderRadius: 'lg'
borderRadius: 'lg',
additionalColors: ["red", "blue", "orange", "green", "purple", "gray"]
})
],

Expand All @@ -24,14 +25,20 @@ export default defineConfig({
staticCss: {
recipes: {
// text: ['*']
badge: [
{
size: ["*"]
}
]
},
// TODO: WORKAROUND
css: [
{
properties: {
listStyleType: ['none', 'disc', 'decimal'],
fontWeight: ['bold'],
fontSize: ['xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl']
fontSize: ['xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl'],
colorPalette: ["*"]
}
}
]
Expand Down
1 change: 1 addition & 0 deletions apps/astro/src/components/layout/Footer.astro
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ const t = useTranslations(locale);
---

<Wrap
_print={{ display: 'none' }}
w="full"
py="2"
px="2"
Expand Down
41 changes: 41 additions & 0 deletions apps/astro/src/components/tags/TagBadge.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,41 @@
import { Tag } from '~/graphql/generated/client';
import { Badge } from '../ui/badge';

export const TagBadge = ({
tag,
showCount = false,
size
}: {
tag: Tag;
showCount?: boolean;
size?: 'sm' | 'md' | 'lg';
}) => {
const { title, type } = tag;

const projectsCount = tag?.projects?.data.length;

const colorPalette = (() => {
switch (type) {
case 'Frontend':
return 'blue';
case 'Backend':
return 'red';
case 'Database':
return 'orange';
case 'Programming_Language':
return 'green';
case 'DevOps':
return 'purple';
case 'Others':
return 'gray';
case 'Non_Dev':
return 'gray';
}
})();

return (
<Badge variant="solid" size={size} colorPalette={colorPalette}>
{title} {showCount && !!projectsCount && `(${projectsCount})`}
</Badge>
);
};
8 changes: 8 additions & 0 deletions apps/astro/src/layouts/BaseLayout.astro
Original file line number Diff line number Diff line change
Expand Up @@ -18,3 +18,11 @@ const lang = getLangFromUrl(Astro.url);
<slot />
</body>
</html>

<style is:global>
@media print {
astro-dev-toolbar {
display: none !important;
}
}
</style>
64 changes: 61 additions & 3 deletions apps/astro/src/pages/[locale]/about/index.astro
Original file line number Diff line number Diff line change
@@ -1,14 +1,19 @@
---
import { formatDistance } from 'date-fns';
import { enUS, ja } from 'date-fns/locale';
import { Container, Divider, Stack, Wrap } from 'styled-system/jsx';
import groupBy from 'lodash/groupBy';
import sortBy from 'lodash/sortBy';
import { Container, Divider, Grid, GridItem, Stack, Wrap } from 'styled-system/jsx';
import { formatMonthYear, parseDate } from 'utils/date';
import { toKebabCase } from 'utils/kebab-case';
import { Markdown } from '~/components/lib/Markdown';
import { TagBadge } from '~/components/tags/TagBadge';
import { Heading } from '~/components/ui/heading';
import { Text } from '~/components/ui/text';
import { graphQLSdk } from '~/graphql';
import { useTranslations, validateLocale } from '~/i18n/utils';
import MainLayout from '~/layouts/MainLayout.astro';
import { sortTags } from '~/utils/tags';
export const prerender = false;
//TODO:
Expand All @@ -22,12 +27,18 @@ if (!validateLocale(locale)) {
const t = useTranslations(locale);
const data = await graphQLSdk.fetchAboutMe({
locale
// TODO: Localize Japanese Text
locale: 'en'
});
//TODO: Tags
const { aboutMe, educations, experiences, tags: _tags } = data ?? {};
const skills = groupBy(
_tags?.data?.filter((tag) => tag.attributes?.type !== 'Non_Dev'),
(tag) => tag.attributes?.type
);
Astro.response.headers.set('CDN-Cache-Control', 'public, max-age=3600, must-revalidate');
---

Expand All @@ -38,11 +49,44 @@ Astro.response.headers.set('CDN-Cache-Control', 'public, max-age=3600, must-reva
<Text>{aboutMe?.data?.attributes?.introduction}</Text>
<Divider />
<Stack>
<Heading as="h2" size="xl" fontWeight="bold">{t('about-me.skills')}</Heading>
<Grid gridTemplateColumns={{ base: '1fr', md: 'auto 1fr' }}>
{
skills &&
Object.keys(skills).map((key) => {
return (
<>
<GridItem>
<Text fontWeight="bold">{t(`common.${toKebabCase(key) as 'frontend'}`)}</Text>
</GridItem>
<GridItem>
<Wrap>
{sortBy(skills[key], (d) => d.attributes?.projects?.data?.length)
.reverse()
.map(
(s) =>
s.attributes && (
<a href={`/tags/${s.attributes.slug}`}>
<TagBadge tag={s.attributes} showCount />
</a>
)
)}
</Wrap>
</GridItem>
</>
);
})
}
</Grid>
</Stack>
<Divider />
<Stack>
<Heading as="h2" size="xl" fontWeight="bold">{t('common.experiences')}</Heading>
{
experiences &&
experiences.data?.map((d) => {
if (!d.attributes) return null;
const { title, content, position } = d.attributes;
const { title, content, position, tags } = d.attributes;
const start = d.attributes.start as string;
const end = d.attributes.end as string;
return (
Expand All @@ -61,6 +105,19 @@ Astro.response.headers.set('CDN-Cache-Control', 'public, max-age=3600, must-reva
)
</Text>
</Wrap>
{tags && (
<Wrap fontSize="sm" gap="1">
<Text>{t('common.tags')}</Text>
{sortTags(tags?.data).map(
(s) =>
s.attributes && (
<a href={`/tags/${s.attributes.slug}`}>
<TagBadge tag={s.attributes} showCount size="sm" />
</a>
)
)}
</Wrap>
)}
{content && <Markdown content={content} />}
</Stack>
);
Expand All @@ -69,6 +126,7 @@ Astro.response.headers.set('CDN-Cache-Control', 'public, max-age=3600, must-reva
</Stack>
<Divider />
<Stack>
<Heading as="h2" size="xl" fontWeight="bold">{t('common.education')}</Heading>
{
educations &&
educations.data?.map((d) => {
Expand Down
8 changes: 0 additions & 8 deletions apps/astro/src/pages/[locale]/namecard/all.astro
Original file line number Diff line number Diff line change
Expand Up @@ -67,11 +67,3 @@ const { locale } = Astro.params;
size: 91mm 55mm;
}
</style>

<style is:global>
@media print {
astro-dev-toolbar {
display: none !important;
}
}
</style>
28 changes: 28 additions & 0 deletions apps/astro/src/utils/tags.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
import type { TagEntity } from '~graphql/generated/client';

const SORT_ORDER = [
'Frontend',
'Backend',
'Programming_Language',
'Database',
'Dev_Ops',
'NonDev',
'Others'
];

const getTypeOrder = (tag: TagEntity) =>
tag.attributes?.type && SORT_ORDER.includes(tag.attributes.type)
? SORT_ORDER.indexOf(tag.attributes.type)
: Infinity;

export const sortTags = (tags: TagEntity[]) => {
return [...tags].sort((a, b) => {
if (!a.attributes || !b.attributes) return 0;
if (a.attributes.order && b.attributes.order) return a.attributes.order - b.attributes.order;
else if (!a.attributes.order && !b.attributes.order) {
return getTypeOrder(a) - getTypeOrder(b);
} else {
return (a.attributes.order || b.attributes.order) as number;
}
});
};
19 changes: 19 additions & 0 deletions libs/utils/kebab-case.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
import kebabCase from 'lodash/kebabCase';

export const LANGUAGES = ['en', 'ja'];

export const getLocalizedItems = <
T extends { locale?: string | null },
A extends { data?: I[] },
I extends { attributes?: T | null },
L extends { localizations?: A | null }
>(
data?: L | null,
locale = 'en'
): T | undefined | null => {
if (!data) return;
const items = data?.localizations?.data;
return items?.find((d) => d?.attributes?.locale === locale)?.attributes ?? items?.[0]?.attributes;
};

export const toKebabCase = kebabCase;
Loading

0 comments on commit 8fada8a

Please sign in to comment.