From 3c39bca1086d36fb138bde3931dd40fac750b6a2 Mon Sep 17 00:00:00 2001 From: dwightjack Date: Fri, 30 Jun 2023 16:58:04 +0900 Subject: [PATCH] move all contents to collections --- scripts/json-to-md.mjs | 31 --- src/components/Card.astro | 45 +--- src/components/ExternalAnchor.astro | 78 ------ src/components/MediaLink.astro | 77 ++++++ src/content/config.ts | 57 +++++ src/content/skills/best_practices.yaml | 18 ++ src/content/skills/build_tools.yaml | 21 ++ src/content/skills/dx.yaml | 24 ++ src/content/skills/languages.yaml | 24 ++ src/content/skills/libraries.yaml | 30 +++ src/content/skills/tools.yaml | 15 ++ .../20141027_frontenders_verona_meetup.yaml | 12 + .../talks/20150327_cssday_it_2015.yaml | 12 + .../20151121_codemotion_milano_2015.yaml | 9 + .../talks/20160325_cssday_it_2016.yaml | 12 + .../20161027_frontenders_verona_meetup.yaml | 8 + .../20210708_merpay_frontend_tech_talk.yaml | 13 + .../talks/20210708_merpay_tech_fest_2022.yaml | 13 + src/content/works/carrefour.yaml | 12 + src/content/works/formigari.yaml | 20 ++ src/content/works/fujitv_view.yaml | 12 + src/content/works/muller.yaml | 18 ++ src/content/works/soup_stock_tokyo.yaml | 14 ++ src/database/education.json | 18 -- src/database/jobs.json | 55 ----- src/database/skills.tech.json | 226 ------------------ src/database/talks.json | 130 ---------- src/database/works.json | 58 ----- src/sections/Skills.astro | 6 +- src/sections/Talks.astro | 36 ++- src/sections/Works.astro | 36 ++- src/shared/collections.ts | 62 ++++- src/shared/media.ts | 0 33 files changed, 541 insertions(+), 661 deletions(-) delete mode 100644 scripts/json-to-md.mjs delete mode 100644 src/components/ExternalAnchor.astro create mode 100644 src/components/MediaLink.astro create mode 100644 src/content/skills/best_practices.yaml create mode 100644 src/content/skills/build_tools.yaml create mode 100644 src/content/skills/dx.yaml create mode 100644 src/content/skills/languages.yaml create mode 100644 src/content/skills/libraries.yaml create mode 100644 src/content/skills/tools.yaml create mode 100644 src/content/talks/20141027_frontenders_verona_meetup.yaml create mode 100644 src/content/talks/20150327_cssday_it_2015.yaml create mode 100644 src/content/talks/20151121_codemotion_milano_2015.yaml create mode 100644 src/content/talks/20160325_cssday_it_2016.yaml create mode 100644 src/content/talks/20161027_frontenders_verona_meetup.yaml create mode 100644 src/content/talks/20210708_merpay_frontend_tech_talk.yaml create mode 100644 src/content/talks/20210708_merpay_tech_fest_2022.yaml create mode 100644 src/content/works/carrefour.yaml create mode 100644 src/content/works/formigari.yaml create mode 100644 src/content/works/fujitv_view.yaml create mode 100644 src/content/works/muller.yaml create mode 100644 src/content/works/soup_stock_tokyo.yaml delete mode 100644 src/database/education.json delete mode 100644 src/database/jobs.json delete mode 100644 src/database/skills.tech.json delete mode 100644 src/database/talks.json delete mode 100644 src/database/works.json create mode 100644 src/shared/media.ts diff --git a/scripts/json-to-md.mjs b/scripts/json-to-md.mjs deleted file mode 100644 index 4489e5af..00000000 --- a/scripts/json-to-md.mjs +++ /dev/null @@ -1,31 +0,0 @@ -import { promises as fs } from 'fs'; -import path from 'path'; - -/* eslint-env node */ - -(async function () { - const database = path.resolve(process.cwd(), './src/database'); - const jobsFolder = path.resolve(process.cwd(), './src/content/jobs'); - - const jobs = JSON.parse( - await fs.readFile(path.join(database, 'jobs.json'), 'utf-8'), - ); - - const fields = ['company', 'from', 'to', 'title', 'href']; - - for (const job of jobs) { - const fm = fields - .map((f) => (job[f] ? `${f}: ${job[f]}` : '')) - .filter(Boolean) - .join('\n'); - const content = `---\n${fm}\n---\n\n${job.description}\n`; - - const fileName = - job.company - .toLowerCase() - .replace(/(\s+|)(\W|Srl|Inc\W?)$/i, '') - .replaceAll(/\W+/g, '_') + '.md'; - - await fs.writeFile(path.join(jobsFolder, fileName), content, 'utf-8'); - } -})(); diff --git a/src/components/Card.astro b/src/components/Card.astro index 96969228..29c98800 100644 --- a/src/components/Card.astro +++ b/src/components/Card.astro @@ -1,7 +1,5 @@ --- -import Cluster from './Cluster.astro'; import DateTime from './DateTime.astro'; -import ExternalAnchor from './ExternalAnchor.astro'; export interface Props { id: string; titleLabel?: string; @@ -11,27 +9,7 @@ export interface Props { meta?: Record[]; } -const { id, titleLabel, href, title = '', data = {}, meta = [] } = Astro.props; - -function isDate(heading: string) { - return heading === 'to' || heading === 'from' || heading === 'date'; -} - -function metaTitle(meta: Record) { - switch (meta.type) { - case 'video': - return `Watch video for: ${title}`; - - case 'slides': - return `Slides for: ${title}`; - - case 'award': - return `${meta.label || 'Award'} details for ${title}`; - - default: - return ''; - } -} +const { id, titleLabel, href, title = '', data = {} } = Astro.props; ---
@@ -58,8 +36,7 @@ function metaTitle(meta: Record) {
.{heading}:
- {(isDate(heading) && typeof value === 'string') || - value instanceof Date ? ( + {value instanceof Date ? ( ) : ( @@ -70,23 +47,7 @@ function metaTitle(meta: Record) { ) } - { - meta.length > 0 && ( - - {meta.map((meta) => ( - - {meta.label || meta.type} - {meta.type === 'video' && meta.lang && ` (${meta.lang})`} - - ))} - - ) - } +
diff --git a/src/components/MediaLink.astro b/src/components/MediaLink.astro new file mode 100644 index 00000000..70ca074b --- /dev/null +++ b/src/components/MediaLink.astro @@ -0,0 +1,77 @@ +--- +import Icon from './Icon.astro'; +import type { HTMLAttributes } from 'astro/types'; + +export interface Props extends HTMLAttributes<'a'> { + type: 'video' | 'slides' | 'award'; + icon?: string; +} + +const { icon, type, ...attrs } = Astro.props; +--- + + + + + (Opens in another tab) + + + diff --git a/src/content/config.ts b/src/content/config.ts index 13dcd681..f2f366f5 100644 --- a/src/content/config.ts +++ b/src/content/config.ts @@ -20,7 +20,64 @@ const educationCollection = defineCollection({ }), }); +const skillCollection = defineCollection({ + type: 'data', + schema: z.object({ + label: z.string(), + icon: z.string(), + data: z.array( + z.object({ + id: z.string(), + label: z.string(), + icon: z.string(), + }), + ), + }), +}); + +const talkCollection = defineCollection({ + type: 'data', + schema: z.object({ + title: z.string(), + date: z.date(), + conf: z.string(), + href: z.string().url(), + media: z.array( + z.object({ + icon: z.string().optional(), + type: z.enum(['video', 'slides', 'award'] as const), + lang: z.string().optional(), + href: z.string().url(), + }), + ), + }), +}); + +const workCollection = defineCollection({ + type: 'data', + schema: z.object({ + project: z.string(), + date: z.date(), + stack: z.array(z.string()), + tasks: z.array(z.string()), + href: z.string().url(), + media: z + .array( + z.object({ + icon: z.string().optional(), + type: z.enum(['video', 'slides', 'award'] as const), + href: z.string().url(), + label: z.string().optional(), + }), + ) + .optional(), + }), +}); + export const collections = { jobs: jobCollection, education: educationCollection, + skills: skillCollection, + talks: talkCollection, + works: workCollection, }; diff --git a/src/content/skills/best_practices.yaml b/src/content/skills/best_practices.yaml new file mode 100644 index 00000000..23d3f5fc --- /dev/null +++ b/src/content/skills/best_practices.yaml @@ -0,0 +1,18 @@ +label: Best Practices +icon: heart +data: +- id: progressive + label: Progressive Enhancement + icon: mdi:escalator-up +- id: atomic + label: Atomic Design + icon: "@atomic" +- id: a11y + label: Accessibility + icon: mdi:wheelchair-accessibility +- id: responsive + label: Responsive Design + icon: mdi:responsive +- id: ds + label: Design Systems + icon: mdi:layers-triple diff --git a/src/content/skills/build_tools.yaml b/src/content/skills/build_tools.yaml new file mode 100644 index 00000000..799f29e9 --- /dev/null +++ b/src/content/skills/build_tools.yaml @@ -0,0 +1,21 @@ +label: Build Tools +icon: terminal +data: +- id: vite + label: Vite + icon: logos:vitejs +- id: webpack + label: webpack + icon: logos:webpack +- id: rollup + label: Rollup + icon: logos:rollupjs +- id: esbuild + label: esbuild + icon: logos:esbuild +- id: turborepo + label: Turborepo + icon: logos:turborepo-icon +- id: gulp + label: gulp + icon: logos:gulp diff --git a/src/content/skills/dx.yaml b/src/content/skills/dx.yaml new file mode 100644 index 00000000..c6c4704f --- /dev/null +++ b/src/content/skills/dx.yaml @@ -0,0 +1,24 @@ +label: Developer Experience +icon: tools +data: +- id: jest + label: Jest + icon: logos:jest +- id: Cypress + label: Cypress + icon: "@cypress" +- id: vitest + label: Vitest + icon: "@vitest" +- id: chai + label: Mocha + Chai + icon: logos:chai +- id: eslint + label: eslint + icon: logos:eslint +- id: linting-style + label: stylelint + icon: logos:stylelint +- id: design-system + label: Storybook + icon: logos:storybook-icon diff --git a/src/content/skills/languages.yaml b/src/content/skills/languages.yaml new file mode 100644 index 00000000..31d6fdd7 --- /dev/null +++ b/src/content/skills/languages.yaml @@ -0,0 +1,24 @@ +label: Languages +icon: code-tags +data: +- id: html-5 + label: HTML5 + icon: logos:html-5 +- id: css3 + label: CSS3 + icon: logos:css-3-official +- id: sass + label: Sass/SCSS + icon: logos:sass +- id: es2015 + label: ES2015+ + icon: logos:javascript +- id: typescript + label: TypeScript + icon: logos:typescript-icon +- id: pug + label: Pug + icon: logos:pug +- id: backend + label: PHP5.5+ + icon: logos:php diff --git a/src/content/skills/libraries.yaml b/src/content/skills/libraries.yaml new file mode 100644 index 00000000..5ddd2fbe --- /dev/null +++ b/src/content/skills/libraries.yaml @@ -0,0 +1,30 @@ +label: Libraries and Frameworks +icon: extension +data: +- id: vue + label: Vue.js + icon: logos:vue +- id: react + label: React + icon: logos:react +- id: svelte + label: Svelte + icon: logos:svelte-icon +- id: nuxt + label: Nuxt + icon: logos:nuxt-icon +- id: astro + label: Astro + icon: logos:astro +- id: tailwind + label: Tailwind CSS + icon: logos:tailwindcss-icon +- id: windi + label: Windi CSS + icon: "@windi" +- id: animation + label: GSAP + icon: "@gsap" +- id: pixi + label: pixi.js + icon: logos:pixijs diff --git a/src/content/skills/tools.yaml b/src/content/skills/tools.yaml new file mode 100644 index 00000000..e9399cc3 --- /dev/null +++ b/src/content/skills/tools.yaml @@ -0,0 +1,15 @@ +label: Tools +icon: pencil +data: +- id: vscode + label: VS Code + icon: logos:visual-studio-code +- id: software + label: Photoshop + icon: "@photoshop" +- id: figma + label: Figma + icon: logos:figma +- id: sketch + label: Sketch + icon: logos:sketch diff --git a/src/content/talks/20141027_frontenders_verona_meetup.yaml b/src/content/talks/20141027_frontenders_verona_meetup.yaml new file mode 100644 index 00000000..11358515 --- /dev/null +++ b/src/content/talks/20141027_frontenders_verona_meetup.yaml @@ -0,0 +1,12 @@ +title: Automated Front-end Development with Grunt +date: 2014-10-27 +conf: Frontenders Verona Meetup +href: https://speakerdeck.com/fevr/automated-front-end-development-with-grunt +media: + - icon: mdi:movie-open + type: video + lang: IT + href: https://youtu.be/b-HsUQJydhI?t=3m22s + - icon: mdi:file-presentation-box + type: slides + href: https://speakerdeck.com/fevr/automated-front-end-development-with-grunt diff --git a/src/content/talks/20150327_cssday_it_2015.yaml b/src/content/talks/20150327_cssday_it_2015.yaml new file mode 100644 index 00000000..801a9bd5 --- /dev/null +++ b/src/content/talks/20150327_cssday_it_2015.yaml @@ -0,0 +1,12 @@ +title: CSS workflow for grown-ups +date: 2015-03-27 +conf: CSSDay IT 2015 +href: https://speakerdeck.com/dwightjack/css-workflow-for-grown-ups +media: + - icon: mdi:movie-open + type: video + lang: IT + href: https://vimeo.com/127662618 + - icon: mdi:file-presentation-box + type: slides + href: https://speakerdeck.com/dwightjack/css-workflow-for-grown-ups diff --git a/src/content/talks/20151121_codemotion_milano_2015.yaml b/src/content/talks/20151121_codemotion_milano_2015.yaml new file mode 100644 index 00000000..aed4a5f4 --- /dev/null +++ b/src/content/talks/20151121_codemotion_milano_2015.yaml @@ -0,0 +1,9 @@ +title: Lean Front-end Development +date: 2015-11-21 +conf: Codemotion Milano 2015 +href: http://bit.ly/2h00eYO +media: + - icon: mdi:file-presentation-box + type: slides + href: >- + https://speakerdeck.com/fevr/lean-frontend-development-at-codemotion-milano-2015 diff --git a/src/content/talks/20160325_cssday_it_2016.yaml b/src/content/talks/20160325_cssday_it_2016.yaml new file mode 100644 index 00000000..2738d8df --- /dev/null +++ b/src/content/talks/20160325_cssday_it_2016.yaml @@ -0,0 +1,12 @@ +title: Accessibility tips & tricks for CSS developers +date: 2016-03-25 +conf: CSSDay IT 2016 +href: http://bit.ly/2fQCEZt +media: + - icon: mdi:movie-open + type: video + lang: IT + href: https://vimeo.com/165114097 + - icon: mdi:file-presentation-box + type: slides + href: http://bit.ly/2fQCEZt diff --git a/src/content/talks/20161027_frontenders_verona_meetup.yaml b/src/content/talks/20161027_frontenders_verona_meetup.yaml new file mode 100644 index 00000000..357fee2e --- /dev/null +++ b/src/content/talks/20161027_frontenders_verona_meetup.yaml @@ -0,0 +1,8 @@ +title: Historiae JavaScript +date: 2016-10-27 +conf: Frontenders Verona Meetup +href: http://bit.ly/2fXiOiD +media: + - icon: mdi:file-presentation-box + type: slides + href: http://bit.ly/2fXiOiD diff --git a/src/content/talks/20210708_merpay_frontend_tech_talk.yaml b/src/content/talks/20210708_merpay_frontend_tech_talk.yaml new file mode 100644 index 00000000..e2f42e8e --- /dev/null +++ b/src/content/talks/20210708_merpay_frontend_tech_talk.yaml @@ -0,0 +1,13 @@ +title: Automation Strategies for Baseline Accessibility +date: 2021-07-08 +conf: Merpay Frontend Tech Talk +href: https://engineering.mercari.com/blog/entry/20211027-4f4045b053/ +media: + - icon: mdi:movie-open + type: video + lang: EN + href: https://youtu.be/g_ncv-J_lGA?t=2278 + - icon: mdi:file-presentation-box + type: slides + href: >- + https://speakerdeck.com/dwightjack/automation-strategies-for-baseline-accessibility-merpay-tech-talk-2021 diff --git a/src/content/talks/20210708_merpay_tech_fest_2022.yaml b/src/content/talks/20210708_merpay_tech_fest_2022.yaml new file mode 100644 index 00000000..8b7d14ff --- /dev/null +++ b/src/content/talks/20210708_merpay_tech_fest_2022.yaml @@ -0,0 +1,13 @@ +title: Tools and Strategies for Frontend UI Libraries +date: 2022-08-24 +conf: Merpay Tech Fest 2022 +href: https://events.merpay.com/techfest-2022/en/#day-2_session4 +media: + - icon: mdi:movie-open + type: video + lang: EN + href: https://www.youtube.com/watch?v=3NbvIpE_2a0 + - icon: mdi:file-presentation-box + type: slides + href: >- + https://speakerdeck.com/mercari/tools-and-strategies-for-frontend-ui-libraries diff --git a/src/content/works/carrefour.yaml b/src/content/works/carrefour.yaml new file mode 100644 index 00000000..d012f9b4 --- /dev/null +++ b/src/content/works/carrefour.yaml @@ -0,0 +1,12 @@ +project: Carrefour Italia +date: 2017-08-01 +stack: + - Nunjucks + - gulp + - jQuery +tasks: + - Design System Development + - HTML + - CSS + - Accessibility +href: https://www.carrefour.it/ diff --git a/src/content/works/formigari.yaml b/src/content/works/formigari.yaml new file mode 100644 index 00000000..b085cb63 --- /dev/null +++ b/src/content/works/formigari.yaml @@ -0,0 +1,20 @@ +project: Formigari +date: 2017-05-01 +stack: + - ES2015 + - React + - MobX + - GSAP + - webpack + - CSS-next +tasks: + - JavaScript Architecture + - Animations + - CSS + - SSR +href: http://www.formigari.it/ +media: + - icon: mdi:star + type: award + href: https://www.awwwards.com/sites/formigari + label: Awwwards SOTD diff --git a/src/content/works/fujitv_view.yaml b/src/content/works/fujitv_view.yaml new file mode 100644 index 00000000..64e987da --- /dev/null +++ b/src/content/works/fujitv_view.yaml @@ -0,0 +1,12 @@ +project: Fuji TV - View +date: 2019-10-01 +stack: + - HTML + - Sass + - WordPress +tasks: + - HTML + - CSS + - Accessibility + - PHP +href: https://www.fujitv-view.jp/ diff --git a/src/content/works/muller.yaml b/src/content/works/muller.yaml new file mode 100644 index 00000000..42a1478b --- /dev/null +++ b/src/content/works/muller.yaml @@ -0,0 +1,18 @@ +project: "Müller Italia" +date: 2016-05-07 +stack: + - ES2015 + - GSAP + - gulp + - webpack + - Sass +tasks: + - JavaScript Architecture + - Frontend Ops + - CSS +href: http://www.muller.it +media: + - icon: mdi:star + type: award + href: http://www.awwwards.com/sites/muller + label: Awwwards SOTD diff --git a/src/content/works/soup_stock_tokyo.yaml b/src/content/works/soup_stock_tokyo.yaml new file mode 100644 index 00000000..19281c79 --- /dev/null +++ b/src/content/works/soup_stock_tokyo.yaml @@ -0,0 +1,14 @@ +project: Soup Stock Tokyo +date: 2018-06-01 +stack: + - Pug + - Sass + - Storybook + - Jest +tasks: + - Frontend Design System + - HTML + - JS + - CSS + - Accessibility +href: https://www.soup-stock-tokyo.com/ diff --git a/src/database/education.json b/src/database/education.json deleted file mode 100644 index 498aeb6f..00000000 --- a/src/database/education.json +++ /dev/null @@ -1,18 +0,0 @@ -[ - { - "id": 2, - "institute": "European Social Fund (ESF) Training Course", - "date": "2005-04-21", - "title": "Web Developer and Designer" - }, { - "id": 0, - "institute": "Cisco Networking Academy", - "date": "2004-06-03", - "title": "Cisco Certified Network Associated" - }, { - "id": 1, - "institute": "University of Modena and Reggio Emilia", - "date": "2003-06-23", - "title": "Bachelor's Degree in Communication Sciences" - } -] \ No newline at end of file diff --git a/src/database/jobs.json b/src/database/jobs.json deleted file mode 100644 index 87ecc8b9..00000000 --- a/src/database/jobs.json +++ /dev/null @@ -1,55 +0,0 @@ -[ - { - "id": 5, - "company": "Merpay (Mercari Inc)", - "from": "2020-02-17", - "title": "Senior Frontend Engineer", - "description": "Working as Senior Developer, UI Developer and accessibility expert", - "href": "https://www.merpay.com/" - }, - { - "id": 4, - "company": "Shiftbrain Inc", - "from": "2018-01-22", - "to": "2020-02-07", - "title": "Senior Frontend Developer", - "description": "Working as Senior Developer @ Standard Design Team", - "href": "http://www.shiftbrain.com/" - }, - { - "id": 3, - "company": "AQuest Srl", - "from": "2014-12-01", - "to": "2017-09-01", - "title": "Senior Frontend Developer", - "description": "Working as Senior Developer, Frontend / DX Ops and Technical Evangelist for SPAs Architecture.", - "href": "http://www.aquest.it/" - }, - { - "id": 2, - "company": "Intesys Srl", - "from": "2009-12-01", - "to": "2014-12-01", - "title": "Senior Frontend Developer", - "description": "Frontend and PHP Senior Developer, Frontend Advisory Group Leader and WordPress Advisory Group Leader", - "href": "http://www.intesys.it/" - }, - { - "id": 1, - "company": "HTML.it", - "from": "2009-07-04", - "to": "2014-09-30", - "title": "Freelance JavaScript Columnist", - "description": "I wrote guides, tutorials and technical articles about JavaScript", - "href": "http://www.html.it/" - }, - { - "id": 0, - "company": "Promobit Srl", - "from": "2005-07-04", - "to": "2009-12-01", - "title": "Full Stack Web Developer", - "description": "Full Stack Web Developer, System Administrator and Web Development Area Manager", - "href": "http://www.promobit.it/" - } -] diff --git a/src/database/skills.tech.json b/src/database/skills.tech.json deleted file mode 100644 index ea8749d3..00000000 --- a/src/database/skills.tech.json +++ /dev/null @@ -1,226 +0,0 @@ -[ - { - "label": "Languages", - "icon": "code-tags", - "data": [ - { - "id": "html-5", - "label": "HTML5", - "icon": "logos:html-5" - }, - { - "id": "css3", - "label": "CSS3", - "icon": "logos:css-3-official" - }, - { - "id": "sass", - "label": "Sass/SCSS", - "icon": "logos:sass" - }, - - { - "id": "es2015", - "label": "ES2015+", - "icon": "logos:javascript" - }, - { - "id": "typescript", - "label": "TypeScript", - "icon": "logos:typescript-icon" - }, - { - "id": "pug", - "label": "Pug", - "icon": "logos:pug" - }, - { - "id": "backend", - "label": "PHP5.5+", - "icon": "logos:php" - } - ] - }, - { - "label": "Libraries and Frameworks", - "icon": "extension", - "data": [ - { - "id": "vue", - "label": "Vue.js", - "icon": "logos:vue" - }, - { - "id": "react", - "label": "React", - "icon": "logos:react" - }, - { - "id": "svelte", - "label": "Svelte", - "icon": "logos:svelte-icon" - }, - { - "id": "nuxt", - "label": "Nuxt", - "icon": "logos:nuxt-icon" - }, - { - "id": "astro", - "label": "Astro", - "icon": "logos:astro" - }, - { - "id": "tailwind", - "label": "Tailwind CSS", - "icon": "logos:tailwindcss-icon" - }, - { "id": "windi", "label": "Windi CSS", "icon": "@windi" }, - { - "id": "animation", - "label": "GSAP", - "icon": "@gsap" - }, - - { - "id": "pixi", - "label": "pixi.js", - "icon": "logos:pixijs" - } - ] - }, - { - "label": "Developer Experience", - "icon": "tools", - "data": [ - { - "id": "jest", - "label": "Jest", - "icon": "logos:jest" - }, - { - "id": "Cypress", - "label": "Cypress", - "icon": "@cypress" - }, - { - "id": "vitest", - "label": "Vitest", - "icon": "@vitest" - }, - { - "id": "chai", - "label": "Mocha + Chai", - "icon": "logos:chai" - }, - { - "id": "eslint", - "label": "eslint", - "icon": "logos:eslint" - }, - { - "id": "linting-style", - "label": "stylelint", - "icon": "logos:stylelint" - }, - { - "id": "design-system", - "label": "Storybook", - "icon": "logos:storybook-icon" - } - ] - }, - { - "label": "Build Tools", - "icon": "terminal", - "data": [ - { - "id": "vite", - "label": "Vite", - "icon": "logos:vitejs" - }, - { - "id": "webpack", - "label": "webpack", - "icon": "logos:webpack" - }, - { - "id": "rollup", - "label": "Rollup", - "icon": "logos:rollupjs" - }, - { - "id": "esbuild", - "label": "esbuild", - "icon": "logos:esbuild" - }, - { - "id": "turborepo", - "label": "Turborepo", - "icon": "logos:turborepo-icon" - }, - { - "id": "gulp", - "label": "gulp", - "icon": "logos:gulp" - } - ] - }, - { - "label": "Best Practices", - "icon": "heart", - "data": [ - { - "id": "progressive", - "label": "Progressive Enhancement", - "icon": "mdi:escalator-up" - }, - { - "id": "atomic", - "label": "Atomic Design", - "icon": "@atomic" - }, - { - "id": "a11y", - "label": "Accessibility", - "icon": "mdi:wheelchair-accessibility" - }, - { - "id": "responsive", - "label": "Responsive Design", - "icon": "mdi:responsive" - }, - { - "id": "ds", - "label": "Design Systems", - "icon": "mdi:layers-triple" - } - ] - }, - { - "label": "Tools", - "icon": "pencil", - "data": [ - { - "id": "vscode", - "label": "VS Code", - "icon": "logos:visual-studio-code" - }, - { - "id": "software", - "label": "Photoshop", - "icon": "@photoshop" - }, - { - "id": "figma", - "label": "Figma", - "icon": "logos:figma" - }, - { - "id": "sketch", - "label": "Sketch", - "icon": "logos:sketch" - } - ] - } -] diff --git a/src/database/talks.json b/src/database/talks.json deleted file mode 100644 index dad9ed2d..00000000 --- a/src/database/talks.json +++ /dev/null @@ -1,130 +0,0 @@ -[ - { - "id": 6, - "title": "Tools and Strategies for Frontend UI Libraries", - "date": "2021-07-08", - "conf": "Merpay Tech Fest 2022", - "href": "https://events.merpay.com/techfest-2022/en/#day-2_session4", - "meta": [ - { - "icon": "mdi:movie-open", - "type": "video", - "lang": "EN", - "link": "https://www.youtube.com/watch?v=3NbvIpE_2a0" - }, - { - "icon": "mdi:file-presentation-box", - "type": "slides", - "link": "https://speakerdeck.com/mercari/tools-and-strategies-for-frontend-ui-libraries" - } - ] - }, - { - "id": 5, - "title": "Automation Strategies for Baseline Accessibility", - "date": "2021-07-08", - "conf": "Merpay Frontend Tech Talk", - "href": "https://engineering.mercari.com/blog/entry/20211027-4f4045b053/", - "meta": [ - { - "icon": "mdi:movie-open", - "type": "video", - "lang": "EN", - "link": "https://youtu.be/g_ncv-J_lGA?t=2278" - }, - { - "icon": "mdi:file-presentation-box", - "type": "slides", - "link": "https://speakerdeck.com/dwightjack/automation-strategies-for-baseline-accessibility-merpay-tech-talk-2021" - } - ] - }, - { - "id": 4, - "title": "Historiae JavaScript", - "date": "2016-10-27", - "conf": "Frontenders Verona Meetup", - "href": "http://bit.ly/2fXiOiD", - "meta": [ - { - "icon": "mdi:file-presentation-box", - "type": "slides", - "link": "http://bit.ly/2fXiOiD" - } - ] - }, - { - "id": 3, - "title": "Accessibility tips & tricks for CSS developers", - "date": "2016-03-25", - "conf": "CSSDay IT 2016", - "href": "http://bit.ly/2fQCEZt", - "meta": [ - { - "icon": "mdi:movie-open", - "type": "video", - "lang": "IT", - "link": "https://vimeo.com/165114097" - }, - { - "icon": "mdi:file-presentation-box", - "type": "slides", - "link": "http://bit.ly/2fQCEZt" - } - ] - }, - { - "id": 2, - "title": "Lean Front-end Development", - "date": "2015-11-21", - "conf": "Codemotion Milano 2015", - "href": "http://bit.ly/2h00eYO", - "meta": [ - { - "icon": "mdi:file-presentation-box", - "type": "slides", - "link": "https://speakerdeck.com/fevr/lean-frontend-development-at-codemotion-milano-2015" - } - ] - }, - { - "id": 1, - "title": "CSS workflow for grown-ups", - "date": "2015-03-27", - "conf": "CSSDay IT 2015", - "href": "https://speakerdeck.com/dwightjack/css-workflow-for-grown-ups", - "meta": [ - { - "icon": "mdi:movie-open", - "type": "video", - "lang": "IT", - "link": "https://vimeo.com/127662618" - }, - { - "icon": "mdi:file-presentation-box", - "type": "slides", - "link": "https://speakerdeck.com/dwightjack/css-workflow-for-grown-ups" - } - ] - }, - { - "id": 0, - "title": "Automated Front-end Development with Grunt", - "date": "2014-10-27", - "conf": "Frontenders Verona Meetup", - "href": "https://speakerdeck.com/fevr/automated-front-end-development-with-grunt", - "meta": [ - { - "icon": "mdi:movie-open", - "type": "video", - "lang": "IT", - "link": "https://youtu.be/b-HsUQJydhI?t=3m22s" - }, - { - "icon": "mdi:file-presentation-box", - "type": "slides", - "link": "https://speakerdeck.com/fevr/automated-front-end-development-with-grunt" - } - ] - } -] diff --git a/src/database/works.json b/src/database/works.json deleted file mode 100644 index 67e60c2d..00000000 --- a/src/database/works.json +++ /dev/null @@ -1,58 +0,0 @@ -[ - { - "id": "fujitv-view", - "project": "Fuji TV - View", - "date": "2019-10-01", - "stack": "HTML, Sass, WordPress", - "tasks": "HTML, CSS, Accessibility, PHP", - "href": "https://www.fujitv-view.jp/" - }, - { - "id": "soup-stock-tokyo", - "project": "Soup Stock Tokyo", - "date": "2018-06-01", - "stack": "Pug, Sass, Storybook, Jest", - "tasks": "Frontend Design System, HTML, JS, CSS, Accessibility", - "href": "https://www.soup-stock-tokyo.com/" - }, - { - "id": "carrefour", - "project": "Carrefour Italia", - "date": "2017-08-01", - "stack": "Nunjucks, gulp, jQuery", - "tasks": "Design System Development, HTML, CSS, Accessibility", - "href": "https://www.carrefour.it/" - }, - { - "id": "formigari", - "project": "Formigari", - "date": "2017-05-01", - "stack": "ES2015, React, MobX, GSAP, webpack, CSS-next", - "tasks": "JavaScript Architecture, Animations, CSS, SSR", - "href": "http://www.formigari.it/", - "meta": [ - { - "icon": "mdi:star", - "type": "award", - "link": "https://www.awwwards.com/sites/formigari", - "label": "Awwwards SOTD" - } - ] - }, - { - "id": "muller", - "project": "Müller Italia", - "date": "2016-05-07", - "stack": "ES2015, GSAP, gulp, webpack, Sass", - "tasks": "JavaScript Architecture, Frontend Ops, CSS", - "href": "http://www.muller.it", - "meta": [ - { - "icon": "mdi:star", - "type": "award", - "link": "http://www.awwwards.com/sites/muller", - "label": "Awwwards SOTD" - } - ] - } -] diff --git a/src/sections/Skills.astro b/src/sections/Skills.astro index 05b910a7..ba0c37a0 100644 --- a/src/sections/Skills.astro +++ b/src/sections/Skills.astro @@ -4,15 +4,17 @@ import PageSection from '../components/PageSection.astro'; import { NAV_PATH_SKILLS } from '../shared/constants'; import InlineList from '../components/InlineList.astro'; import DataGroup from '../components/DataGroup.astro'; -import techSkills from '../database/skills.tech.json'; import Grid from '../components/Grid.astro'; +import { getSkills } from '../shared/collections'; + +const skills = await getSkills(); --- { - techSkills.map(({ label, icon, data: skills }) => ( + skills.map(({ label, icon, data: skills }) => ( diff --git a/src/sections/Talks.astro b/src/sections/Talks.astro index 7f8e8549..4ed92162 100644 --- a/src/sections/Talks.astro +++ b/src/sections/Talks.astro @@ -4,22 +4,38 @@ import Card from '../components/Card.astro'; import Page from '../components/Page.astro'; import PageSection from '../components/PageSection.astro'; import Stack from '../components/Stack.astro'; -import talks from '../database/talks.json'; +import { getTalks } from '../shared/collections'; +import Cluster from '../components/Cluster.astro'; +import MediaLink from '../components/MediaLink.astro'; + +const talks = await getTalks(); --- { - talks.map(({ title, id, href, meta, ...entry }) => ( - + talks.map(({ details, media }) => ( + + {media && ( +
+ + {media.map(({ lang, ...props }) => ( +
  • + + {props.type} + {lang && ` (${lang})`} + +
    • + ))} +     +
    + )} +     )) }     diff --git a/src/sections/Works.astro b/src/sections/Works.astro index 4c008b20..47d2eb65 100644 --- a/src/sections/Works.astro +++ b/src/sections/Works.astro @@ -4,22 +4,38 @@ import Card from '../components/Card.astro'; import Page from '../components/Page.astro'; import PageSection from '../components/PageSection.astro'; import Stack from '../components/Stack.astro'; -import works from '../database/works.json'; + +import MediaLink from '../components/MediaLink.astro'; +import Cluster from '../components/Cluster.astro'; +import { getWorks } from '../shared/collections'; + +const works = await getWorks(); --- { - works.map(({ project, id, href, meta, ...entry }) => ( - + works.map(({ details, media }) => ( + + {media && ( + + )} + )) } diff --git a/src/shared/collections.ts b/src/shared/collections.ts index 12012291..28bec025 100644 --- a/src/shared/collections.ts +++ b/src/shared/collections.ts @@ -1,4 +1,4 @@ -import { getCollection } from 'astro:content'; +import { getCollection, type CollectionEntry } from 'astro:content'; export async function getJobs() { const jobs = (await getCollection('jobs')) @@ -34,3 +34,63 @@ export async function getEducation() { return { id: `education-${entry.id}`, title, data }; }); } + +export async function getSkills() { + const rawSkills = await getCollection('skills'); + const order = [ + 'languages', + 'libraries', + 'dx', + 'build_tools', + 'best_practices', + 'tools', + ]; + + const skills: CollectionEntry<'skills'>['data'][] = []; + + for (const item of order) { + const skill = rawSkills.find(({ id }) => id === item); + skill && skills.push(skill.data); + } + return skills; +} + +export async function getWorks() { + return (await getCollection('works')) + .sort((a, b) => b.data.date.getTime() - a.data.date.getTime()) + .map((entry) => { + const { project: title, stack, tasks, media, href, ...data } = entry.data; + + return { + details: { + id: `works-${entry.id}`, + title, + href, + data: { + ...data, + stack: stack.join(', '), + tasks: tasks.join(', '), + }, + }, + media, + }; + }); +} + +export async function getTalks() { + return (await getCollection('talks')) + .sort((a, b) => b.data.date.getTime() - a.data.date.getTime()) + .map((entry) => { + const { title, media, href, ...data } = entry.data; + + return { + details: { + id: `talks-${entry.id}`, + title, + href, + data, + }, + media, + }; + }); +} diff --git a/src/shared/media.ts b/src/shared/media.ts new file mode 100644 index 00000000..e69de29b