diff --git a/.eslintrc.cjs b/.eslintrc.cjs index e4cf3239..e76c6cb1 100644 --- a/.eslintrc.cjs +++ b/.eslintrc.cjs @@ -1,57 +1,58 @@ const tsconfig = require('./scripts/get-tsconfig.cjs'); module.exports = { - parser: '@typescript-eslint/parser', - settings: { - react: { - version: 'detect', + parser: '@typescript-eslint/parser', + settings: { + react: { + version: 'detect', + }, }, - }, - env: { - browser: true, - es2023: true, - }, - extends: ['eslint:recommended', 'plugin:@typescript-eslint/eslint-recommended', 'prettier'], - overrides: [ - { - files: tsconfig.include, - parserOptions: { - project: true, - tsconfigRootDir: __dirname, - extraFileExtensions: ['.astro', '.css'], - }, + env: { + browser: true, + es2023: true, }, - { - files: ['*.astro'], - parser: 'astro-eslint-parser', - extends: ['plugin:astro/recommended', 'prettier'], - parserOptions: { - parser: '@typescript-eslint/parser', + extends: ['eslint:recommended', 'plugin:@typescript-eslint/eslint-recommended', 'prettier'], + overrides: [ + { + files: tsconfig.include, + parserOptions: { + project: true, + tsconfigRootDir: __dirname, + extraFileExtensions: ['.astro', '.css'], + }, + }, + { + files: ['*.astro'], + parser: 'astro-eslint-parser', + extends: ['plugin:astro/recommended', 'prettier'], + parserOptions: { + project: null, + parser: '@typescript-eslint/parser', + extraFileExtensions: ['.astro', '.css'], + }, + rules: {}, + }, + { + files: ['*.jsx', '*.tsx'], + extends: ['plugin:react/recommended', 'plugin:react-hooks/recommended', 'prettier'], + plugins: ['react'], + rules: { + 'react/prop-types': 'off', + }, + }, + ], + parserOptions: { + ecmaVersion: 'latest', + sourceType: 'module', extraFileExtensions: ['.astro', '.css'], - }, - rules: {}, + project: './tsconfig.json', }, - { - files: ['*.jsx', '*.tsx'], - extends: ['plugin:react/recommended', 'plugin:react-hooks/recommended', 'prettier'], - plugins: ['react'], - rules: { + plugins: ['@typescript-eslint'], + rules: { 'react/prop-types': 'off', - }, + '@typescript-eslint/explicit-module-boundary-types': 'off', + 'no-unused-vars': 'off', + '@typescript-eslint/no-unused-vars': ['warn', { argsIgnorePattern: '^_' }], + 'no-restricted-imports': ['error'], }, - ], - parserOptions: { - ecmaVersion: 'latest', - sourceType: 'module', - extraFileExtensions: ['.astro', '.css'], - project: './tsconfig.json', - }, - plugins: ['@typescript-eslint'], - rules: { - 'react/prop-types': 'off', - '@typescript-eslint/explicit-module-boundary-types': 'off', - 'no-unused-vars': 'off', - '@typescript-eslint/no-unused-vars': ['warn', { argsIgnorePattern: '^_' }], - 'no-restricted-imports': ['error'], - }, }; diff --git a/.github/dependabot.yml b/.github/dependabot.yml index 3db60c78..9065e095 100644 --- a/.github/dependabot.yml +++ b/.github/dependabot.yml @@ -1,8 +1,8 @@ version: 2 updates: - - package-ecosystem: npm - directory: '/' - schedule: - interval: monthly - time: '16:30' - open-pull-requests-limit: 0 + - package-ecosystem: npm + directory: '/' + schedule: + interval: monthly + time: '16:30' + open-pull-requests-limit: 0 diff --git a/.github/renovate.json b/.github/renovate.json index ebd02b9a..e2a135d4 100644 --- a/.github/renovate.json +++ b/.github/renovate.json @@ -1,5 +1,5 @@ { - "$schema": "https://docs.renovatebot.com/renovate-schema.json", - "extends": ["config:recommended", "schedule:monthly"], - "labels": ["dependencies", "renovate"] + "$schema": "https://docs.renovatebot.com/renovate-schema.json", + "extends": ["config:recommended", "schedule:monthly"], + "labels": ["dependencies", "renovate"] } diff --git a/.github/workflows/codeql-analysis.yml b/.github/workflows/codeql-analysis.yml index f0c3d07b..ab425e17 100644 --- a/.github/workflows/codeql-analysis.yml +++ b/.github/workflows/codeql-analysis.yml @@ -1,36 +1,36 @@ name: CodeQL Analysis concurrency: - group: ${{ github.workflow }}-${{ github.head_ref || github.run_id }} - cancel-in-progress: true + group: ${{ github.workflow }}-${{ github.head_ref || github.run_id }} + cancel-in-progress: true on: - push: - branches: [main] - pull_request: - branches: [main] - schedule: - - cron: '0 0 * * 0' - workflow_dispatch: + push: + branches: [main] + pull_request: + branches: [main] + schedule: + - cron: '0 0 * * 0' + workflow_dispatch: jobs: - analyze: - name: Analyze - runs-on: ubuntu-latest - permissions: - actions: read - contents: read - security-events: write - strategy: - fail-fast: false - matrix: - language: ['JavaScript', 'TypeScript'] - steps: - - name: Checkout repository - uses: actions/checkout@v2 - - name: Initialize CodeQL - uses: github/codeql-action/init@v1 - with: - languages: ${{ matrix.language }} - queries: security-extended, security-and-quality - - name: Autobuild - uses: github/codeql-action/autobuild@v1 - - name: Perform CodeQL Analysis - uses: github/codeql-action/analyze@v1 + analyze: + name: Analyze + runs-on: ubuntu-latest + permissions: + actions: read + contents: read + security-events: write + strategy: + fail-fast: false + matrix: + language: ['JavaScript', 'TypeScript'] + steps: + - name: Checkout repository + uses: actions/checkout@v2 + - name: Initialize CodeQL + uses: github/codeql-action/init@v1 + with: + languages: ${{ matrix.language }} + queries: security-extended, security-and-quality + - name: Autobuild + uses: github/codeql-action/autobuild@v1 + - name: Perform CodeQL Analysis + uses: github/codeql-action/analyze@v1 diff --git a/.github/workflows/dependency-review.yml b/.github/workflows/dependency-review.yml index e16d6048..5bb5c551 100644 --- a/.github/workflows/dependency-review.yml +++ b/.github/workflows/dependency-review.yml @@ -1,12 +1,12 @@ name: Dependency Review on: [pull_request] permissions: - contents: read + contents: read jobs: - dependency-review: - runs-on: ubuntu-latest - steps: - - name: Checkout Repository - uses: actions/checkout@v3 - - name: Dependency Review - uses: actions/dependency-review-action@v1 + dependency-review: + runs-on: ubuntu-latest + steps: + - name: Checkout Repository + uses: actions/checkout@v3 + - name: Dependency Review + uses: actions/dependency-review-action@v1 diff --git a/.lintstagedrc.json b/.lintstagedrc.json index c8e1d7eb..4e12c664 100644 --- a/.lintstagedrc.json +++ b/.lintstagedrc.json @@ -1,5 +1,5 @@ { - "src/**/*.{ts,tsx,css}": ["yarn format:all"], - "src/**/*.{ts,tsx}": ["yarn lint:ts"], - "src/**/*.{css}": ["yarn lint:styles"] + "src/**/*.{ts,tsx,css}": ["yarn format:all"], + "src/**/*.{ts,tsx}": ["yarn lint:ts"], + "src/**/*.{css}": ["yarn lint:styles"] } diff --git a/.stylelintrc.cjs b/.stylelintrc.cjs index 5dbd798b..50ba5f8b 100644 --- a/.stylelintrc.cjs +++ b/.stylelintrc.cjs @@ -1,10 +1,10 @@ module.exports = { - extends: 'stylelint-config-standard-scss', - plugins: ['stylelint-order'], - rules: { - 'order/properties-alphabetical-order': true, - 'selector-class-pattern': null, - 'value-keyword-case': null, - 'custom-property-pattern': null, - }, + extends: 'stylelint-config-standard-scss', + plugins: ['stylelint-order'], + rules: { + 'order/properties-alphabetical-order': true, + 'selector-class-pattern': null, + 'value-keyword-case': null, + 'custom-property-pattern': null, + }, }; diff --git a/.yarn/install-state.gz b/.yarn/install-state.gz index 3ca4e62e..dd85bf5e 100644 Binary files a/.yarn/install-state.gz and b/.yarn/install-state.gz differ diff --git a/astro.config.mjs b/astro.config.mjs index a66aab77..e90a62c3 100644 --- a/astro.config.mjs +++ b/astro.config.mjs @@ -3,27 +3,27 @@ import mdx from '@astrojs/mdx'; import sitemap from '@astrojs/sitemap'; import react from '@astrojs/react'; import partytown from '@astrojs/partytown'; -import netlify from '@astrojs/netlify/functions'; +import netlify from '@astrojs/netlify'; import { astroImageTools } from 'astro-imagetools'; export default defineConfig({ - site: 'https://biancafiore.me', - integrations: [ - mdx(), - sitemap(), - react(), - astroImageTools, - partytown({ - config: { - forward: ['dataLayer.push'], - }, - }), - ], - output: 'server', - adapter: netlify(), - vite: { - define: { - 'import.meta.env.PUBLIC_GOOGLE_ANALYTICS_ID': process.env.PUBLIC_GOOGLE_ANALYTICS_ID, + site: 'https://biancafiore.me', + integrations: [ + mdx(), + sitemap(), + react(), + astroImageTools, + partytown({ + config: { + forward: ['dataLayer.push'], + }, + }), + ], + output: 'server', + adapter: netlify(), + vite: { + define: { + 'import.meta.env.PUBLIC_GOOGLE_ANALYTICS_ID': process.env.PUBLIC_GOOGLE_ANALYTICS_ID, + }, }, - }, }); diff --git a/commitlint.config.js b/commitlint.config.js index 5375539b..0ca15df9 100644 --- a/commitlint.config.js +++ b/commitlint.config.js @@ -1,8 +1,8 @@ module.exports = { - extends: ['@commitlint/config-conventional'], - rules: { - 'scope-case': [2, 'always', ['lower-case', 'pascal-case', 'camel-case']], - 'scope-enum': [2, 'always', ['only-ui', 'deps', 'other']], - 'header-max-length': [2, 'always', 130], - }, + extends: ['@commitlint/config-conventional'], + rules: { + 'scope-case': [2, 'always', ['lower-case', 'pascal-case', 'camel-case']], + 'scope-enum': [2, 'always', ['only-ui', 'deps', 'other']], + 'header-max-length': [2, 'always', 130], + }, }; diff --git a/package.json b/package.json index 4dc65e52..c4b04b40 100644 --- a/package.json +++ b/package.json @@ -1,78 +1,78 @@ { - "name": "biancafiore", - "description": "A portfolio for the best content writer ever", - "keywords": [ - "astro", - "typescript", - "css", - "netlify", - "blog", - "portfolio", - "marketing", - "content writing", - "seo" - ], - "author": "Ferran Buireu ", - "version": "2.0.0", - "packageManager": "yarn@4.0.2", - "type": "module", - "engines": { - "node": ">=20.10.0" - }, - "scripts": { - "dev": "astro dev", - "start": "yarn dev", - "build": "astro check && astro build", - "preview": "astro preview", - "astro": "astro", - "prepare": "husky install", - "format": "prettier --write \"src/**/*.{ts,js.css}\" --config ./prettier.config.js", - "format:check": "yarn format --check", - "format:all": "prettier --write . --config ./prettier.config.js", - "lint:ts": "eslint . --max-warnings=0", - "lint:ts:fix": "yarn lint:ts --fix", - "lint:styles": "stylelint --fix \"src/**/*.{css}\" --config ./.stylelintrc.cjs --max-warnings=0", - "lint:styles:fix": "yarn lint:styles --fix", - "lint:typecheck": "tsc --project . --noEmit" - }, - "dependencies": { - "@astrojs/mdx": "^2.0.1", - "@astrojs/netlify": "^3.1.1", - "@astrojs/partytown": "^2.0.2", - "@astrojs/react": "^3.0.7", - "@astrojs/rss": "^4.0.1", - "@astrojs/sitemap": "^3.0.3", - "@fontsource-variable/literata": "^5.0.19", - "@fontsource/zilla-slab": "^5.0.8", - "@types/react": "^18.2.45", - "@types/react-dom": "^18.2.18", - "astro": "^4.0.6", - "astro-imagetools": "^0.9.0", - "gsap": "^3.12.4", - "react": "^18.2.0", - "react-dom": "^18.2.0", - "react-router-dom": "^6.21.0", - "swiper": "^11.0.5", - "typescript": "^5.3.3" - }, - "devDependencies": { - "@testing-library/react": "^14.1.2", - "@testing-library/react-hooks": "^8.0.1", - "@types/eslint": "^8.44.9", - "@typescript-eslint/eslint-plugin": "^6.14.0", - "@typescript-eslint/parser": "^6.14.0", - "eslint": "^8.56.0", - "eslint-config-prettier": "^9.1.0", - "eslint-plugin-astro": "^0.31.0", - "eslint-plugin-prettier": "^5.0.1", - "eslint-plugin-react": "^7.33.2", - "eslint-plugin-react-hooks": "^4.6.0", - "husky": "^8.0.3", - "lint-staged": "^15.2.0", - "prettier": "3.1.1", - "stylelint": "^16.0.2", - "stylelint-config-standard-scss": "^12.0.0", - "stylelint-order": "^6.0.4", - "vitest": "^1.0.4" - } + "name": "biancafiore", + "description": "A portfolio for the best content writer ever", + "keywords": [ + "astro", + "typescript", + "css", + "netlify", + "blog", + "portfolio", + "marketing", + "content writing", + "seo" + ], + "author": "Ferran Buireu ", + "version": "2.0.0", + "packageManager": "yarn@4.0.2", + "type": "module", + "engines": { + "node": ">=20.10.0" + }, + "scripts": { + "dev": "astro dev", + "start": "yarn dev", + "build": "astro check && astro build", + "preview": "astro preview", + "astro": "astro", + "prepare": "husky install", + "format": "prettier --write \"src/**/*.{ts,js.css}\" --config ./prettier.config.js", + "format:check": "yarn format --check", + "format:all": "prettier --write . --config ./prettier.config.js", + "lint:ts": "eslint . --max-warnings=0", + "lint:ts:fix": "yarn lint:ts --fix", + "lint:styles": "stylelint --fix \"src/**/*.{css}\" --config ./.stylelintrc.cjs --max-warnings=0", + "lint:styles:fix": "yarn lint:styles --fix", + "lint:typecheck": "tsc --project . --noEmit" + }, + "dependencies": { + "@astrojs/mdx": "^2.0.1", + "@astrojs/netlify": "^4.0.1", + "@astrojs/partytown": "^2.0.2", + "@astrojs/react": "^3.0.7", + "@astrojs/rss": "^4.0.1", + "@astrojs/sitemap": "^3.0.3", + "@fontsource-variable/literata": "^5.0.19", + "@fontsource/zilla-slab": "^5.0.8", + "@types/react": "^18.2.45", + "@types/react-dom": "^18.2.18", + "astro": "^4.0.6", + "astro-imagetools": "^0.9.0", + "gsap": "^3.12.4", + "react": "^18.2.0", + "react-dom": "^18.2.0", + "react-router-dom": "^6.21.0", + "swiper": "^11.0.5", + "typescript": "^5.3.3" + }, + "devDependencies": { + "@testing-library/react": "^14.1.2", + "@testing-library/react-hooks": "^8.0.1", + "@types/eslint": "^8.44.9", + "@typescript-eslint/eslint-plugin": "^6.15.0", + "@typescript-eslint/parser": "^6.15.0", + "eslint": "^8.56.0", + "eslint-config-prettier": "^9.1.0", + "eslint-plugin-astro": "^0.31.0", + "eslint-plugin-prettier": "^5.0.1", + "eslint-plugin-react": "^7.33.2", + "eslint-plugin-react-hooks": "^4.6.0", + "husky": "^8.0.3", + "lint-staged": "^15.2.0", + "prettier": "3.1.1", + "stylelint": "^16.0.2", + "stylelint-config-standard-scss": "^12.0.0", + "stylelint-order": "^6.0.4", + "vitest": "^1.0.4" + } } diff --git a/prettier.config.js b/prettier.config.js index 85156104..2f033c49 100644 --- a/prettier.config.js +++ b/prettier.config.js @@ -1,12 +1,12 @@ const config = { - arrowParens: 'always', - bracketSpacing: true, - htmlWhitespaceSensitivity: 'ignore', - printWidth: 120, - proseWrap: 'always', - semi: true, - singleQuote: true, - trailingComma: 'es5', + arrowParens: 'always', + bracketSpacing: true, + htmlWhitespaceSensitivity: 'ignore', + printWidth: 120, + proseWrap: 'always', + semi: true, + singleQuote: true, + trailingComma: 'es5', }; export default config; diff --git a/src/content/blog/first-post.md b/src/content/articles/first-post.md similarity index 98% rename from src/content/blog/first-post.md rename to src/content/articles/first-post.md index 65d68a2b..169d2794 100644 --- a/src/content/blog/first-post.md +++ b/src/content/articles/first-post.md @@ -1,8 +1,9 @@ --- title: 'First post' description: 'Lorem ipsum dolor sit amet' -pubDate: 'Jul 08 2022' -heroImage: '/blog-placeholder-3.jpg' +publishDate: 'Jul 08 2022' +featuredImage: '' +slug: 'first-post' --- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna diff --git a/src/content/blog/markdown-style-guide.md b/src/content/articles/markdown-style-guide.md similarity index 88% rename from src/content/blog/markdown-style-guide.md rename to src/content/articles/markdown-style-guide.md index aead6b5b..01478cc4 100644 --- a/src/content/blog/markdown-style-guide.md +++ b/src/content/articles/markdown-style-guide.md @@ -1,8 +1,9 @@ --- title: 'Markdown Style Guide' description: 'Here is a sample of some basic Markdown syntax that can be used when writing Markdown content in Astro.' -pubDate: 'Jul 01 2022' -heroImage: '/blog-placeholder-1.jpg' +publishDate: 'Jul 01 2022' +featuredImage: '' +slug: 'markdown-style-guide' --- Here is a sample of some basic Markdown syntax that can be used when writing Markdown content in Astro. @@ -80,8 +81,8 @@ within a `footer` or `cite` element, and optionally with in-line changes such as > Don't communicate by sharing memory, share memory by communicating.
— Rob Pike[^1] [^1]: - The above quote is excerpted from Rob Pike's [talk](https://www.youtube.com/watch?v=PAAkCSZUG1c) during Gopherfest, - November 18, 2015. +The above quote is excerpted from Rob Pike's [talk](https://www.youtube.com/watch?v=PAAkCSZUG1c) during Gopherfest, +November 18, 2015. ## Tables @@ -96,7 +97,7 @@ within a `footer` or `cite` element, and optionally with in-line changes such as #### Output | Italics | Bold | Code | -| --------- | -------- | ------ | +|-----------|----------|--------| | _italics_ | **bold** | `code` | ## Code Blocks @@ -111,13 +112,13 @@ markdown, typescript, txt, bash ```html - - - Example HTML5 Document - - -

Test

- + + + Example HTML5 Document + + +

Test

+ ``` ```` @@ -127,13 +128,13 @@ Output ```html - + Example HTML5 Document - - -

Test

- + + +

Test

+ ``` @@ -177,23 +178,23 @@ Output ```markdown - Fruit - - Apple - - Orange - - Banana + - Apple + - Orange + - Banana - Dairy - - Milk - - Cheese + - Milk + - Cheese ``` #### Output - Fruit - - Apple - - Orange - - Banana + - Apple + - Orange + - Banana - Dairy - - Milk - - Cheese + - Milk + - Cheese ## Other Elements — abbr, sub, sup, kbd, mark diff --git a/src/content/blog/second-post.md b/src/content/articles/second-post.md similarity index 98% rename from src/content/blog/second-post.md rename to src/content/articles/second-post.md index d146eec9..6ea60b07 100644 --- a/src/content/blog/second-post.md +++ b/src/content/articles/second-post.md @@ -1,8 +1,9 @@ --- title: 'Second post' description: 'Lorem ipsum dolor sit amet' -pubDate: 'Jul 22 2022' -heroImage: '/blog-placeholder-4.jpg' +publishDate: 'Jul 22 2022' +featuredImage: '' +slug: 'second-post' --- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna diff --git a/src/content/blog/third-post.md b/src/content/articles/third-post.md similarity index 98% rename from src/content/blog/third-post.md rename to src/content/articles/third-post.md index 9f0709ce..d664cb6f 100644 --- a/src/content/blog/third-post.md +++ b/src/content/articles/third-post.md @@ -1,8 +1,9 @@ --- title: 'Third post' description: 'Lorem ipsum dolor sit amet' -pubDate: 'Jul 15 2022' -heroImage: '/blog-placeholder-2.jpg' +publishDate: 'Jul 15 2022' +featuredImage: '' +slug: 'third-post' --- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna diff --git a/src/content/blog/using-mdx.mdx b/src/content/articles/using-mdx.mdx similarity index 67% rename from src/content/blog/using-mdx.mdx rename to src/content/articles/using-mdx.mdx index c80d1049..62e220c5 100644 --- a/src/content/blog/using-mdx.mdx +++ b/src/content/articles/using-mdx.mdx @@ -1,8 +1,9 @@ --- title: 'Using MDX' description: 'Lorem ipsum dolor sit amet' -pubDate: 'Jul 02 2022' -heroImage: '/blog-placeholder-5.jpg' +publishDate: 'Jul 02 2022' +featuredImage: '' +slug: 'using-mdx' --- This theme comes with the [@astrojs/mdx](https://docs.astro.build/en/guides/integrations-guide/mdx/) integration @@ -22,16 +23,20 @@ If you have existing content authored in MDX, this integration will hopefully ma Here is how you import and use a UI component inside of MDX. When you open this page in the browser, you should see the clickable button below. + + + + import HeaderLink from '../../ui/components/atoms/headerLink/HeaderLink.astro'; - Embedded component in MDX + Embedded component in MDX ## More Links -- [MDX Syntax Documentation](https://mdxjs.com/docs/what-is-mdx) -- [Astro Usage Documentation](https://docs.astro.build/en/guides/markdown-content/#markdown-and-mdx-pages) -- **Note:** [Client Directives](https://docs.astro.build/en/reference/directives-reference/#client-directives) are still - required to create interactive components. Otherwise, all components in your MDX will render as static HTML (no - JavaScript) by default. +- [MDX Syntax Documentation](https://mdxjs.com/docs/what-is-mdx) +- [Astro Usage Documentation](https://docs.astro.build/en/guides/markdown-content/#markdown-and-mdx-pages) +- **Note:** [Client Directives](https://docs.astro.build/en/reference/directives-reference/#client-directives) are +still required to create interactive components. Otherwise, all components in your MDX will render as static HTML +(no JavaScript) by default. diff --git a/src/content/config.ts b/src/content/config.ts index a8011520..026f76c2 100644 --- a/src/content/config.ts +++ b/src/content/config.ts @@ -1,15 +1,13 @@ import { defineCollection, z } from 'astro:content'; -const blog = defineCollection({ - // Type-check frontmatter using a schema - schema: z.object({ - title: z.string(), - description: z.string(), - // Transform string to Date object - pubDate: z.coerce.date(), - updatedDate: z.coerce.date().optional(), - heroImage: z.string().optional(), - }), +const articles = defineCollection({ + schema: z.object({ + title: z.string(), + description: z.string(), + publishDate: z.coerce.date(), + updatedDate: z.coerce.date().optional(), + featuredImage: z.string().optional(), + }), }); -export const collections = { blog }; +export const collections = { articles }; diff --git a/src/env.d.ts b/src/env.d.ts index c87c797a..6ed3af10 100644 --- a/src/env.d.ts +++ b/src/env.d.ts @@ -2,9 +2,9 @@ /// interface ImportMetaEnv { - readonly VITE_PUBLIC_GOOGLE_ANALYTICS_ID: string; + readonly VITE_PUBLIC_GOOGLE_ANALYTICS_ID: string; } interface ImportMeta { - readonly env: ImportMetaEnv; + readonly env: ImportMetaEnv; } diff --git a/src/pages/articles/[...slug].astro b/src/pages/articles/[...slug].astro index 53d9b38e..8cdf96cf 100644 --- a/src/pages/articles/[...slug].astro +++ b/src/pages/articles/[...slug].astro @@ -2,16 +2,17 @@ import { type CollectionEntry, getCollection } from 'astro:content'; import ArticleLayout from '@components/templates/articleLayout/ArticleLayout.astro'; +type Props = CollectionEntry<'articles'>; +export const prerender = true; export async function getStaticPaths() { - const posts = await getCollection('blog'); - return posts.map((post) => ({ - params: { slug: post.slug }, - props: post, - })); + const posts = await getCollection('articles'); + return posts.map(post => ({ + params: { slug: post.slug }, + props: { post }, + })); } -type Props = CollectionEntry<'blog'>; -const post = Astro.props; +const { post } = Astro.props; const { Content } = await post.render(); --- diff --git a/src/pages/contact.astro b/src/pages/contact.astro new file mode 100644 index 00000000..9a188024 --- /dev/null +++ b/src/pages/contact.astro @@ -0,0 +1,7 @@ +--- +import BaseLayout from '@components/templates/baseLayout/BaseLayout.astro'; +--- + + +

Hello, contact!

+ diff --git a/src/pages/index.astro b/src/pages/index.astro index 95a29003..f0b778f1 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -2,9 +2,13 @@ import BaseLayout from '@components/templates/baseLayout/BaseLayout.astro'; import Welcome from '@components/molecules/welcome/Welcome.astro'; import Testimonials from '@components/organisms/testimonials/Testimonials.astro'; +import MyWork from '@components/organisms/myWork/MyWork.astro'; +import LatestArticles from '@components/organisms/latestArticles/LatestArticles.astro'; +// current todo: fresh from the blog // todo: latest articles following(https://scroll-driven-animations.style/demos/stacking-cards/css/) // todo: reveal on enter viewport (check current implementation). add .reveal to test +// todo: SEO + HTML structure // todo: view transitions // todo: add vitest // todo: add CIs @@ -12,6 +16,8 @@ import Testimonials from '@components/organisms/testimonials/Testimonials.astro' + +


@@ -20,4 +26,5 @@ import Testimonials from '@components/organisms/testimonials/Testimonials.astro'


+ diff --git a/src/pages/projects.astro b/src/pages/projects.astro new file mode 100644 index 00000000..381f39a9 --- /dev/null +++ b/src/pages/projects.astro @@ -0,0 +1,19 @@ +--- +import BaseLayout from '@components/templates/baseLayout/BaseLayout.astro'; +--- + + +

Hello, Projects!

+
+

Stories of Impact

+
+
+

Reports and Thought Leadership

+
+
+

Creative Direction

+
+
+

Web Content

+
+ diff --git a/src/pages/rss.xml.js b/src/pages/rss.xml.js index 87784849..cfe18739 100644 --- a/src/pages/rss.xml.js +++ b/src/pages/rss.xml.js @@ -3,14 +3,14 @@ import { getCollection } from 'astro:content'; import { SITE_TITLE, SITE_DESCRIPTION } from '../consts'; export async function GET(context) { - const posts = await getCollection('blog'); - return rss({ - title: SITE_TITLE, - description: SITE_DESCRIPTION, - site: context.site, - items: posts.map((post) => ({ - ...post.data, - link: `/blog/${post.slug}/`, - })), - }); + const posts = await getCollection('blog'); + return rss({ + title: SITE_TITLE, + description: SITE_DESCRIPTION, + site: context.site, + items: posts.map((post) => ({ + ...post.data, + link: `/blog/${post.slug}/`, + })), + }); } diff --git a/src/ui/assets/images/jpg/creative-direction.jpg b/src/ui/assets/images/jpg/creative-direction.jpg new file mode 100644 index 00000000..0c879919 Binary files /dev/null and b/src/ui/assets/images/jpg/creative-direction.jpg differ diff --git a/src/ui/assets/images/jpg/stories-of-impact.jpg b/src/ui/assets/images/jpg/stories-of-impact.jpg new file mode 100644 index 00000000..a7c914a5 Binary files /dev/null and b/src/ui/assets/images/jpg/stories-of-impact.jpg differ diff --git a/src/ui/assets/images/jpg/thought-leadership.jpg b/src/ui/assets/images/jpg/thought-leadership.jpg new file mode 100644 index 00000000..1c51db8c Binary files /dev/null and b/src/ui/assets/images/jpg/thought-leadership.jpg differ diff --git a/src/ui/assets/images/jpg/web-content.jpg b/src/ui/assets/images/jpg/web-content.jpg new file mode 100644 index 00000000..b12cdcfb Binary files /dev/null and b/src/ui/assets/images/jpg/web-content.jpg differ diff --git a/src/ui/components/atoms/logo/logo.css b/src/ui/components/atoms/logo/logo.css index 43100117..c5ea42e8 100644 --- a/src/ui/components/atoms/logo/logo.css +++ b/src/ui/components/atoms/logo/logo.css @@ -1,20 +1,22 @@ @layer header.logo { - .site__logo { - display: block; - height: fit-content; - inset: 1rem 0 0; - margin: 0 auto; - position: absolute; - transition: top 0.3s linear 1.75s; - width: 307px; - z-index: 20; + .site__logo { + display: block; + height: fit-content; + inset: 1rem 0 0; + margin: 0 auto; + position: absolute; + transition: top 0.3s linear 1.75s; + width: 307px; + z-index: 20; - svg { - transition: scale 0.2s; - } + svg { + transition: + scale 0.2s, + fill 0.2s; + } - &.--is-scrolling:not(.--is-menu-open) svg { - scale: 0.85; + &.--is-scrolling:not(.--is-menu-open) svg { + scale: 0.85; + } } - } } diff --git a/src/ui/components/molecules/testimonial/components/testimonialAuthor/testimonialAuthor.tsx b/src/ui/components/molecules/testimonial/components/testimonialAuthor/testimonialAuthor.tsx index d1037869..1fc35486 100644 --- a/src/ui/components/molecules/testimonial/components/testimonialAuthor/testimonialAuthor.tsx +++ b/src/ui/components/molecules/testimonial/components/testimonialAuthor/testimonialAuthor.tsx @@ -2,9 +2,9 @@ import React, { type FC, type ReactNode } from 'react'; import 'src/ui/components/molecules/testimonial/components/testimonialAuthor/testimonialAuthor.css'; export interface TestimonialAuthorProps { - children: ReactNode; + children: ReactNode; } export const TestimonialAuthor: FC = ({ children }) => ( -

{children}

+

{children}

); diff --git a/src/ui/components/molecules/testimonial/components/testimonialDescription/testimonialDescription.tsx b/src/ui/components/molecules/testimonial/components/testimonialDescription/testimonialDescription.tsx index 018fc337..423b9a75 100644 --- a/src/ui/components/molecules/testimonial/components/testimonialDescription/testimonialDescription.tsx +++ b/src/ui/components/molecules/testimonial/components/testimonialDescription/testimonialDescription.tsx @@ -2,9 +2,9 @@ import React, { type FC, type ReactNode } from 'react'; import 'src/ui/components/molecules/testimonial/components/testimonialDescription/testimonialDescription.css'; export interface TestimonialDescriptionProps { - children: ReactNode; + children: ReactNode; } export const TestimonialDescription: FC = ({ children }) => ( -

{children}

+

{children}

); diff --git a/src/ui/components/molecules/testimonial/components/testimonialImage/testimonialImage.tsx b/src/ui/components/molecules/testimonial/components/testimonialImage/testimonialImage.tsx index 75384ed2..c7034f2a 100644 --- a/src/ui/components/molecules/testimonial/components/testimonialImage/testimonialImage.tsx +++ b/src/ui/components/molecules/testimonial/components/testimonialImage/testimonialImage.tsx @@ -4,5 +4,5 @@ import 'src/ui/components/molecules/testimonial/components/testimonialImage/test export type TestimonialImageProps = Pick; export const TestimonialImage: FC = ({ src, alt }) => ( - {alt} + {alt} ); diff --git a/src/ui/components/molecules/testimonial/testimonial.tsx b/src/ui/components/molecules/testimonial/testimonial.tsx index 5e1411ba..317d0a2c 100644 --- a/src/ui/components/molecules/testimonial/testimonial.tsx +++ b/src/ui/components/molecules/testimonial/testimonial.tsx @@ -1,36 +1,36 @@ import React, { type FC, type ReactNode } from 'react'; import './testimonial.css'; import { - TestimonialImage, - type TestimonialImageProps, + TestimonialImage, + type TestimonialImageProps, } from 'src/ui/components/molecules/testimonial/components/testimonialImage'; import { - TestimonialQuote, - type TestimonialQuoteProps, + TestimonialQuote, + type TestimonialQuoteProps, } from 'src/ui/components/molecules/testimonial/components/testimonialQuote'; import { - TestimonialDescription, - type TestimonialDescriptionProps, + TestimonialDescription, + type TestimonialDescriptionProps, } from 'src/ui/components/molecules/testimonial/components/testimonialDescription'; import { - TestimonialAuthor, - type TestimonialAuthorProps, + TestimonialAuthor, + type TestimonialAuthorProps, } from 'src/ui/components/molecules/testimonial/components/testimonialAuthor'; import { useSwiperSlide } from 'swiper/react'; interface TestimonialProps { - children: ReactNode; + children: ReactNode; } export const Testimonial: FC & { - Author: FC; - Quote: FC; - Description: FC; - Image: FC; + Author: FC; + Quote: FC; + Description: FC; + Image: FC; } = ({ children }) => { - const { isActive } = useSwiperSlide(); + const { isActive } = useSwiperSlide(); - return
{children}
; + return
{children}
; }; const Image: FC = (props) => ; @@ -40,7 +40,7 @@ const Quote: FC = ({ children }) => {ch const Author: FC = ({ children }) => {children}; const Description: FC = ({ children }) => ( - {children} + {children} ); Testimonial.Author = Author; diff --git a/src/ui/components/molecules/testimonialsSlider/TestimonialsSlider.tsx b/src/ui/components/molecules/testimonialsSlider/TestimonialsSlider.tsx index 469fc9e8..926cdb08 100644 --- a/src/ui/components/molecules/testimonialsSlider/TestimonialsSlider.tsx +++ b/src/ui/components/molecules/testimonialsSlider/TestimonialsSlider.tsx @@ -4,97 +4,108 @@ import { A11y, Keyboard, Navigation, Pagination, Virtual } from 'swiper/modules' import { Testimonial } from '@components/molecules/testimonial'; import { type SwiperOptions } from 'swiper/types'; import { TestimonialsNavigation } from 'src/ui/components/molecules/testimonialsSlider/components/testimonialsNavigation'; -import './testimonialsSlider.css'; const SLIDER_CONFIG: SwiperOptions = { - modules: [Navigation, Pagination, Keyboard, Virtual, A11y], - loop: true, - centeredSlides: true, - slidesPerView: 3, - autoplay: { - delay: 3000, - pauseOnMouseEnter: true, - }, - pagination: { - clickable: true, - }, - keyboard: { - enabled: true, - }, - breakpoints: { - 1024: { - slidesPerView: 1.85, - spaceBetween: 150, + modules: [Navigation, Pagination, Keyboard, Virtual, A11y], + loop: true, + centeredSlides: true, + slidesPerView: 3, + autoplay: { + delay: 3000, + pauseOnMouseEnter: true, }, - 320: { - slidesPerView: 1, + pagination: { + clickable: true, }, - }, - containerModifierClass: 'testimonials-', + keyboard: { + enabled: true, + }, + breakpoints: { + 1024: { + slidesPerView: 1.85, + spaceBetween: 150, + }, + 320: { + slidesPerView: 1, + }, + }, + containerModifierClass: 'testimonials-', }; export const TestimonialsSlider = () => { - return ( -
- - - - Ferran Buireu - - Careen red ensign marooned Pirate Round Buccaneer spirits yard Corsair pink aye. Galleon scuppers gabion - lanyard trysail fluke to go on account Sea Legs Brethren of the Coast keelhaul. Tender topsail cable cog - Yellow Jack fathom broadside snow clipper quarter. - - - role - - - - - Ferran Buireu - - Careen red ensign marooned Pirate Round Buccaneer spirits yard Corsair pink aye. Galleon scuppers gabion - lanyard trysail fluke to go on account Sea Legs Brethren of the Coast keelhaul. Tender topsail cable cog - Yellow Jack fathom broadside snow clipper quarter. - - - role - - - - - Ferran Buireu - - Careen red ensign marooned Pirate Round Buccaneer spirits yard Corsair pink aye. Galleon scuppers gabion - lanyard trysail fluke to go on account Sea Legs Brethren of the Coast keelhaul. Tender topsail cable cog - Yellow Jack fathom broadside snow clipper quarter. - - - role - - - - - Ferran Buireu - - Careen red ensign marooned Pirate Round Buccaneer spirits yard Corsair pink aye. - - - role - - - - - Ferran Buireu - - Careen red ensign marooned Pirate Round Buccaneer spirits yard Corsair pink aye. - - - role - - - - -
- ); + return ( +
+ + + + Ferran Buireu + + Careen red ensign marooned Pirate Round Buccaneer spirits yard Corsair pink aye. Galleon + scuppers gabion lanyard trysail fluke to go on account Sea Legs Brethren of the Coast + keelhaul. Tender topsail cable cog Yellow Jack fathom broadside snow clipper quarter. + + + role + + + + + Ferran Buireu + Bla bla Bla bla Bla bla Bla bla Bla bla Bla bla Bla bla + + Role + + + + + Ferran Buireu + + Careen red ensign marooned Pirate Round Buccaneer spirits yard Corsair pink aye. Galleon + scuppers gabion lanyard trysail fluke to go on account Sea Legs Brethren of the Coast + keelhaul. Tender topsail cable cog Yellow Jack fathom broadside snow clipper quarter. + + + Role + + + + + Ferran Buireu + + Careen red ensign marooned Pirate Round Buccaneer spirits yard Corsair pink aye. Galleon + scuppers gabion lanyard trysail fluke to go on account Sea Legs Brethren of the Coast + keelhaul. Tender topsail cable cog Yellow Jack fathom broadside snow clipper quarter. + + + Role + + + + + Ferran Buireu + + Careen red ensign marooned Pirate Round Buccaneer spirits yard Corsair pink aye. Galleon + scuppers gabion lanyard trysail fluke to go on account Sea Legs Brethren of the Coast + keelhaul. Tender topsail cable cog Yellow Jack fathom broadside snow clipper quarter. + + + Role + + + + + Ferran Buireu + + Careen red ensign marooned Pirate Round Buccaneer spirits yard Corsair pink aye. Galleon + scuppers gabion lanyard trysail fluke to go on account Sea Legs Brethren of the Coast + keelhaul. Tender topsail cable cog Yellow Jack fathom broadside snow clipper quarter. + + + Role + + + + +
+ ); }; diff --git a/src/ui/components/molecules/testimonialsSlider/components/testimonialsNavigation/TestimonialsNavigation.tsx b/src/ui/components/molecules/testimonialsSlider/components/testimonialsNavigation/TestimonialsNavigation.tsx index 1badcb8f..a1d783aa 100644 --- a/src/ui/components/molecules/testimonialsSlider/components/testimonialsNavigation/TestimonialsNavigation.tsx +++ b/src/ui/components/molecules/testimonialsSlider/components/testimonialsNavigation/TestimonialsNavigation.tsx @@ -4,16 +4,16 @@ import { useSwiper } from 'swiper/react'; import horizontalArrow from '@assets/images/svg/left-arrow.svg'; export const TestimonialsNavigation = () => { - const swiper = useSwiper(); - console.log('swiper', swiper); - return ( -
- - -
- ); + const swiper = useSwiper(); + + return ( +
+ + +
+ ); }; diff --git a/src/ui/components/molecules/testimonialsSlider/testimonialsSlider.css b/src/ui/components/molecules/testimonialsSlider/testimonialsSlider.css deleted file mode 100644 index 199169f0..00000000 --- a/src/ui/components/molecules/testimonialsSlider/testimonialsSlider.css +++ /dev/null @@ -1,3 +0,0 @@ -/* @layer testimonials.slider { */ - -/* } */ diff --git a/src/ui/components/molecules/welcome/Welcome.astro b/src/ui/components/molecules/welcome/Welcome.astro index 6646e3ee..d93795c8 100644 --- a/src/ui/components/molecules/welcome/Welcome.astro +++ b/src/ui/components/molecules/welcome/Welcome.astro @@ -3,16 +3,21 @@ import { Picture } from 'astro-imagetools/components'; import './welcome.css'; ---
-
-

Hi! I'm

-
- -
-

Bianca Fiore

-

Lorem ipsum dolor sit amet ipsum dolor sit amet ipsum dolor sit amet ipsum - dolor sit amet

-
+
+

Hi! I'm

+
+ +
+

Bianca

+

+ Lorem ipsum dolor sit amet ipsum dolor sit amet ipsum dolor sit amet ipsum + dolor sit amet ipsum dolor sit amet ipsum dolor sit amet ipsum dolor sit amet. + + Lorem ipsum dolor sit amet ipsum dolor sit amet ipsum dolor sit amet ipsum + dolor sit amet +

+