From e5b561f6e64cc062a9da6f5ed9e652aa338161cd Mon Sep 17 00:00:00 2001 From: Mathieu Schimmerling Date: Wed, 13 Apr 2022 01:16:43 +0200 Subject: [PATCH 01/11] use astro templating --- README.md | 1108 -------------------------- astro.config.mjs | 14 +- package.json | 22 +- pnpm-lock.yaml | 839 +++++++------------ scripts/generate_readme.js | 7 - scripts/utils/generateREADME.js | 7 - src/components/FrameworkLabel.svelte | 20 + src/components/Section.astro | 82 ++ src/components/Title.svelte | 9 + src/frameworks.js | 79 ++ src/pages/index.astro | 13 + 11 files changed, 513 insertions(+), 1687 deletions(-) delete mode 100644 scripts/generate_readme.js delete mode 100644 scripts/utils/generateREADME.js create mode 100644 src/components/FrameworkLabel.svelte create mode 100644 src/components/Section.astro create mode 100644 src/components/Title.svelte create mode 100644 src/frameworks.js create mode 100644 src/pages/index.astro diff --git a/README.md b/README.md index 49202d55..ab3fe7f4 100644 --- a/README.md +++ b/README.md @@ -34,1111 +34,3 @@ pnpm run dev ``` This project requires Node.js to be `v14.0.0` or higher, because we use new JavaScript features in our code, such as optional chaining. - ---- - -# Reactivity -## Declare state -### Svelte -```svelte - - -``` - -### React -```jsx -import { useState } from 'react'; - -export default function Name() { - const [name] = useState('John'); - console.log(name); // John -} - -``` - -### Vue 3 -```vue - - -``` - -### Angular -```ts -import { Component, Input } from '@angular/core'; - -@Component({ - selector: 'app-name', -}) -export class NameComponent { - @Input() name: string = 'John'; - - constructor() { - console.log(this.name); - } -} - -``` - -## Update state -### Svelte -```svelte - - -``` - -### React -```jsx -import { useState } from 'react'; - -export default function Name() { - const [name, setName] = useState('John'); - setName('Jane'); - - console.log(name); // Jane -} - -``` - -### Vue 3 -```vue - - -``` - -### Angular -```ts -import { Component, Input } from '@angular/core'; - -@Component({ - selector: 'app-name', -}) -export class NameComponent { - @Input() name: string = 'John'; - - constructor() { - this.name = 'Jane'; - console.log(this.name); - } -} - -``` - -## Computed state -### Svelte -```svelte - - -``` - -### React -```jsx -import { useState, useMemo } from 'react'; - -export default function DoubleCount() { - const [count] = useState(10); - const doubleCount = useMemo(() => count * 2, [count]); - console.log(doubleCount); // 20 - return
; -} - -``` - -### Vue 3 -```vue - - - - -``` - -### Angular -```ts -import { Component, OnInit, Input, Pipe, PipeTransform, ChangeDetectionStrategy } from '@angular/core'; - -@Pipe({ - name: 'double', -}) -export class DoubleCountPipe implements PipeTransform { - transform(value: number): number { - return value * 2; - } -} - -@Component({ - selector: 'app-doublecount', - template: '
', - changeDetection: ChangeDetectionStrategy.OnPush, -}) -export class DoublecountComponent implements OnInit { - @Input() count: number = 10; - - constructor() {} -} - -``` - -# Templating -## Minimal template -### Svelte -```svelte -

Hello world

- -``` - -### React -```jsx -export default function HelloWorld() { - return

Hello world

; -} - -``` - -### Vue 3 -```vue - - -``` - -### Angular -
Oops, missing snippet ! You can help us by contributing on Github.
-## Styling -### Svelte -```svelte -

Hello world

- - - - -``` - -### React -```jsx -export default function HelloWorld() { - // how do you declare title class ?? - - return ( - <> -

Hello world

- - - ); -} - -``` - -### Vue 3 -```vue - - - - -``` - -### Angular -
Oops, missing snippet ! You can help us by contributing on Github.
-## Loop -### Svelte -```svelte - - - - -``` - -### React -```jsx -export default function Colors() { - const colors = ['red', 'green', 'blue']; - return ( - - ); -} - -``` - -### Vue 3 -```vue - - - - -``` - -### Angular -
Oops, missing snippet ! You can help us by contributing on Github.
-## Event click -### Svelte -```svelte - - -

Counter: {count}

- - -``` - -### React -```jsx -import { useState } from 'react'; - -export default function Name() { - const [count, setCount] = useState(0); - - function incrementCount() { - setCount(count + 1); - } - - return ( - <> -

Counter: {count}

- - - ); -} - -``` - -### Vue 3 -```vue - - - - -``` - -### Angular -
Oops, missing snippet ! You can help us by contributing on Github.
-## Dom ref -### Svelte -```svelte - - - - -``` - -### React -```jsx -import { useEffect, useRef } from 'react'; - -export default function InputFocused() { - const inputElement = useRef(null); - - useEffect(() => inputElement.current.focus()); - - return ; -} - -``` - -### Vue 3 -```vue - - - - -``` - -### Angular -
Oops, missing snippet ! You can help us by contributing on Github.
-## Conditional -### Svelte -```svelte - - - -

Light is: {light}

-

- You must - {#if light === 'red'} - STOP - {:else if light === 'orange'} - SLOW DOWN - {:else if light === 'green'} - GO - {/if} -

- -``` - -### React -```jsx -import { useState, useMemo } from 'react'; - -const TRAFFIC_LIGHTS = ['red', 'orange', 'green']; - -export default function TrafficLight() { - const [lightIndex, setLightIndex] = useState(0); - - const light = useMemo(() => TRAFFIC_LIGHTS[lightIndex], [lightIndex]); - - function nextLight() { - if (lightIndex + 1 > TRAFFIC_LIGHTS.length - 1) { - setLightIndex(0); - } else { - setLightIndex(lightIndex + 1); - } - } - - return ( - <> - -

Light is: {light}

-

- You must - {light === 'red' && STOP} - {light === 'orange' && SLOW DOWN} - {light === 'green' && GO} -

- - ); -} - -``` - -### Vue 3 -```vue - - - - -``` - -### Angular -
Oops, missing snippet ! You can help us by contributing on Github.
-# Lifecycle -## On mount -### Svelte -```svelte - - -

Page title is: {pageTitle}

- -``` - -### React -```jsx -import { useState, useEffect } from 'react'; - -export default function PageTitle() { - const [pageTitle, setPageTitle] = useState(''); - - useEffect(() => { - setPageTitle(document.title); - }); - - return

Page title: {pageTitle}

; -} - -``` - -### Vue 3 -```vue - - - - -``` - -### Angular -
Oops, missing snippet ! You can help us by contributing on Github.
-## On unmount -### Svelte -```svelte - - -

Current time: {time}

- -``` - -### React -```jsx -import { useState, useEffect } from 'react'; - -export default function Time() { - const [time, setTime] = useState(new Date().toLocaleTimeString()); - - const timer = setInterval(() => { - setTime(new Date().toLocaleTimeString()); - }, 1000); - - useEffect(() => { - return () => { - clearInterval(timer); - }; - }); - - return

Current time: {time}

; -} - -``` - -### Vue 3 -```vue - - -

Current time: {time}

- -``` - -### Angular -
Oops, missing snippet ! You can help us by contributing on Github.
-# Component composition -## Props -### Svelte -```svelte - - - - -``` - -```svelte - - -

My name is {name} !

-

My age is {age} !

-

My favourite colors are {favouriteColors.split(', ')} !

-

I am {isAvailable ? 'available' : 'not available'}

- -``` - -### React -```jsx -import UserProfile from './UserProfile.jsx'; - -export default function App() { - return ; -} - -``` - -```jsx -import PropTypes from 'prop-types'; - -export default function UserProfile({ name = '', age = null, favouriteColors = [], isAvailable = false }) { - return ( - <> -

My name is {name} !

-

My age is {age} !

-

My favourite colors are {favouriteColors.split(', ')} !

-

I am {isAvailable ? 'available' : 'not available'}

- - ); -} - -UserProfile.propTypes = { - name: PropTypes.string.isRequired, - age: PropTypes.number.isRequired, - favouriteColors: PropTypes.arrayOf(PropTypes.string).isRequired, - isAvailable: PropTypes.bool.isRequired, -}; - -``` - -### Vue 3 -```vue - - - - -``` - -```vue - - - - -``` - -### Angular -
Oops, missing snippet ! You can help us by contributing on Github.
-# Form input -## Input text -### Svelte -```svelte - - -

{text}

- - -``` - -### React -```jsx -import { useState } from 'react'; - -export default function InputHello() { - const [text, setText] = useState('Hello world'); - - function handleChange(event) { - setText(event.target.value); - } - - return ( - <> -

{text}

- - - ); -} - -``` - -### Vue 3 -```vue - - - - -``` - -### Angular -
Oops, missing snippet ! You can help us by contributing on Github.
-## Checkbox -### Svelte -```svelte - - - - - -``` - -### React -```jsx -import { useState } from 'react'; - -export default function IsAvailable() { - const [isAvailable, setIsAvailable] = useState(false); - - function handleChange() { - setIsAvailable(!isAvailable); - } - - return ( - <> - - - - ); -} - -``` - -### Vue 3 -```vue - - - - -``` - -### Angular -
Oops, missing snippet ! You can help us by contributing on Github.
-## Radio -### Svelte -```svelte - - -
Picked: {picked}
- - - - - - - -``` - -### React -```jsx -import { useState } from 'react'; - -export default function PickPill() { - const [picked, setPicked] = useState('red'); - - function handleChange(event) { - setPicked(event.target.value); - } - - return ( - <> - - - - - - - ); -} - -``` - -### Vue 3 -```vue - - - - -``` - -### Angular -
Oops, missing snippet ! You can help us by contributing on Github.
-## Select -### Svelte -```svelte - - - - -``` - -### React -```jsx -import { useState } from 'react'; - -const colors = [ - { id: 1, text: 'red' }, - { id: 2, text: 'blue' }, - { id: 3, text: 'green' }, - { id: 4, text: 'gray', isDisabled: true }, -]; - -export default function ColorSelect() { - const [selectedColorId, setSelectedColorId] = useState(2); - - function handleChange(event) { - setSelectedColorId(event.target.value); - } - - return ( - - ); -} - -``` - -### Vue 3 -```vue - - - - -``` - -### Angular -
Oops, missing snippet ! You can help us by contributing on Github.
-# Webapp features -## Routing -### Svelte -With SvelteKit - -``` -|-- routes/ - |-- index.svelte // index page "/" - |-- about.svelte // about page "/about" - |-- __error.svelte // handle HTTP errors 404, 500,... - |-- __layout.svelte // global app layout -``` - -### React -With NextJS - -``` -|-- pages/ - |-- index.js // index page "/" - |-- about.js // about page "/about" - |-- 404.js // handle error HTTP 404 page not found - |-- 500.js // handle error HTTP 500 - |-- _app.js // global app layout -``` - -With Remix - -``` -|-- root.jsx // global app layout -|-- routes/ - |-- index.jsx // index page "/" - |-- about.jsx // about page "/about" - |-- $.jsx // fallback page -``` -### Vue 3 -With Nuxt 3 - -``` -|-- pages/ - |-- index.vue // index page "/" - |-- about.vue // about page "/about" -``` - -### Angular -
Oops, missing snippet ! You can help us by contributing on Github.
-## Router link -### Svelte -With SvelteKit - -```svelte - -``` - -### React -With NextJS - -```jsx -import Link from 'next/link' - -export default function Home() { - return ( - - ) -} -``` - -### Vue 3 -With Nuxt 3 - -```vue - -``` - -### Angular -
Oops, missing snippet ! You can help us by contributing on Github.
- diff --git a/astro.config.mjs b/astro.config.mjs index d72a09c6..e293da5a 100644 --- a/astro.config.mjs +++ b/astro.config.mjs @@ -9,13 +9,13 @@ export default defineConfig({ integrations: [tailwind(), svelte()], vite: { plugins: [ - { - handleHotUpdate({ file }) { - if (file.includes('/content') || file.includes('/scripts/utils')) { - generateIndexPage(); - } - }, - }, + // { + // handleHotUpdate({ file }) { + // if (file.includes('/content') || file.includes('/scripts/utils')) { + // generateIndexPage(); + // } + // }, + // }, ], }, }); diff --git a/package.json b/package.json index 3ebbcf9d..821ffa88 100644 --- a/package.json +++ b/package.json @@ -9,7 +9,7 @@ "dev": "astro dev", "build": "pnpm run build:content && astro build", "preview": "astro preview", - "build:content": "node scripts/generate_readme.js && node scripts/generate_index_page.js", + "build:content": "node scripts/generate_index_page.js", "lint": "eslint .", "lint:fix": "pnpm run lint -- --fix", "prettier": "prettier --ignore-path .gitignore --plugin-search-dir=. . --check", @@ -33,28 +33,28 @@ "@angular-eslint/eslint-plugin-template": "^13.2.0", "@angular/core": "^13.3.2", "@astrojs/svelte": "^0.0.2", - "@astrojs/tailwind": "^0.1.0", + "@astrojs/tailwind": "^0.1.2", "@tailwindcss/typography": "^0.5.2", - "@typescript-eslint/eslint-plugin": "^5.18.0", - "@typescript-eslint/parser": "^5.18.0", - "astro": "^1.0.0-beta.2", + "@typescript-eslint/eslint-plugin": "^5.19.0", + "@typescript-eslint/parser": "^5.19.0", + "astro": "^1.0.0-beta.8", "autoprefixer": "^10.4.4", - "eslint": "^8.12.0", + "eslint": "^8.13.0", "eslint-config-prettier": "^8.5.0", "eslint-plugin-prettier": "^4.0.0", "eslint-plugin-react": "^7.29.4", "eslint-plugin-svelte3": "^3.4.1", - "eslint-plugin-vue": "^8.5.0", + "eslint-plugin-vue": "^8.6.0", "husky": "^7.0.4", "lint-staged": "^12.3.7", "lodash.kebabcase": "^4.1.1", "postcss": "^8.4.12", - "prettier": "^2.6.1", - "prettier-plugin-svelte": "^2.6.0", + "prettier": "^2.6.2", + "prettier-plugin-svelte": "^2.7.0", "prop-types": "^15.8.1", "react": "^17.0.2", - "svelte": "^3.46.4", - "tailwindcss": "^3.0.23", + "svelte": "^3.47.0", + "tailwindcss": "^3.0.24", "typescript": "^4.6.3", "vite": "^2.9.1" }, diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index c74c30b4..c152bef4 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -5,58 +5,58 @@ specifiers: '@angular-eslint/eslint-plugin-template': ^13.2.0 '@angular/core': ^13.3.2 '@astrojs/svelte': ^0.0.2 - '@astrojs/tailwind': ^0.1.0 + '@astrojs/tailwind': ^0.1.2 '@tailwindcss/typography': ^0.5.2 - '@typescript-eslint/eslint-plugin': ^5.18.0 - '@typescript-eslint/parser': ^5.18.0 - astro: ^1.0.0-beta.2 + '@typescript-eslint/eslint-plugin': ^5.19.0 + '@typescript-eslint/parser': ^5.19.0 + astro: ^1.0.0-beta.8 autoprefixer: ^10.4.4 - eslint: ^8.12.0 + eslint: ^8.13.0 eslint-config-prettier: ^8.5.0 eslint-plugin-prettier: ^4.0.0 eslint-plugin-react: ^7.29.4 eslint-plugin-svelte3: ^3.4.1 - eslint-plugin-vue: ^8.5.0 + eslint-plugin-vue: ^8.6.0 husky: ^7.0.4 lint-staged: ^12.3.7 lodash.kebabcase: ^4.1.1 postcss: ^8.4.12 - prettier: ^2.6.1 - prettier-plugin-svelte: ^2.6.0 + prettier: ^2.6.2 + prettier-plugin-svelte: ^2.7.0 prop-types: ^15.8.1 react: ^17.0.2 - svelte: ^3.46.4 - tailwindcss: ^3.0.23 + svelte: ^3.47.0 + tailwindcss: ^3.0.24 typescript: ^4.6.3 vite: ^2.9.1 devDependencies: - '@angular-eslint/eslint-plugin': 13.2.0_eslint@8.12.0+typescript@4.6.3 - '@angular-eslint/eslint-plugin-template': 13.2.0_eslint@8.12.0+typescript@4.6.3 + '@angular-eslint/eslint-plugin': 13.2.0_eslint@8.13.0+typescript@4.6.3 + '@angular-eslint/eslint-plugin-template': 13.2.0_eslint@8.13.0+typescript@4.6.3 '@angular/core': 13.3.2 - '@astrojs/svelte': 0.0.2_18c81bf5b82228ffd7479d81687f05ae - '@astrojs/tailwind': 0.1.0 - '@tailwindcss/typography': 0.5.2_tailwindcss@3.0.23 - '@typescript-eslint/eslint-plugin': 5.18.0_a07dca3bdfc4bfa60f4dda0c1f9e3287 - '@typescript-eslint/parser': 5.18.0_eslint@8.12.0+typescript@4.6.3 - astro: 1.0.0-beta.2 + '@astrojs/svelte': 0.0.2_a6fe0b86a1dd73a9d3bd80835e86ceec + '@astrojs/tailwind': 0.1.2 + '@tailwindcss/typography': 0.5.2_tailwindcss@3.0.24 + '@typescript-eslint/eslint-plugin': 5.19.0_f34adc8488d2e4f014fe61432d70cbf2 + '@typescript-eslint/parser': 5.19.0_eslint@8.13.0+typescript@4.6.3 + astro: 1.0.0-beta.8 autoprefixer: 10.4.4_postcss@8.4.12 - eslint: 8.12.0 - eslint-config-prettier: 8.5.0_eslint@8.12.0 - eslint-plugin-prettier: 4.0.0_f2c91d0f54113167d2bd9214a5ab5a36 - eslint-plugin-react: 7.29.4_eslint@8.12.0 - eslint-plugin-svelte3: 3.4.1_eslint@8.12.0+svelte@3.46.6 - eslint-plugin-vue: 8.5.0_eslint@8.12.0 + eslint: 8.13.0 + eslint-config-prettier: 8.5.0_eslint@8.13.0 + eslint-plugin-prettier: 4.0.0_1815ac95b7fb26c13c7d48a8eef62d0f + eslint-plugin-react: 7.29.4_eslint@8.13.0 + eslint-plugin-svelte3: 3.4.1_eslint@8.13.0+svelte@3.47.0 + eslint-plugin-vue: 8.6.0_eslint@8.13.0 husky: 7.0.4 lint-staged: 12.3.7 lodash.kebabcase: 4.1.1 postcss: 8.4.12 prettier: 2.6.2 - prettier-plugin-svelte: 2.6.0_prettier@2.6.2+svelte@3.46.6 + prettier-plugin-svelte: 2.7.0_prettier@2.6.2+svelte@3.47.0 prop-types: 15.8.1 react: 17.0.2 - svelte: 3.46.6 - tailwindcss: 3.0.23_autoprefixer@10.4.4 + svelte: 3.47.0 + tailwindcss: 3.0.24 typescript: 4.6.3 vite: 2.9.1 @@ -73,45 +73,45 @@ packages: resolution: {integrity: sha512-ZA9JPERpeSo+G/bmp8GS/WjBbYkPDVzN6IINHz9SVdv//LWE58yymFFjRabHJx46iAEOe8P0CoKduuJWtEvNrQ==} dev: true - /@angular-eslint/eslint-plugin-template/13.2.0_eslint@8.12.0+typescript@4.6.3: + /@angular-eslint/eslint-plugin-template/13.2.0_eslint@8.13.0+typescript@4.6.3: resolution: {integrity: sha512-Ej9bNGbpf8oaQGglPVWAQkBSIHhQv0FeJ/vVnB2fhHUoK9BbkGUYpjAFSSRlnMhl6ktPWKCX3yJiW+F4uIUTIw==} peerDependencies: eslint: ^7.0.0 || ^8.0.0 typescript: '*' dependencies: '@angular-eslint/bundled-angular-compiler': 13.2.0 - '@typescript-eslint/experimental-utils': 5.17.0_eslint@8.12.0+typescript@4.6.3 + '@typescript-eslint/experimental-utils': 5.17.0_eslint@8.13.0+typescript@4.6.3 aria-query: 4.2.2 axobject-query: 2.2.0 - eslint: 8.12.0 + eslint: 8.13.0 typescript: 4.6.3 transitivePeerDependencies: - supports-color dev: true - /@angular-eslint/eslint-plugin/13.2.0_eslint@8.12.0+typescript@4.6.3: + /@angular-eslint/eslint-plugin/13.2.0_eslint@8.13.0+typescript@4.6.3: resolution: {integrity: sha512-8qscIBc4montFQ52+XfBk7qR675oXV8mvRpjDh3cTfIZCzV6CSbbbH2iLp/9egnn0Pgy2ZUIsWgcsbK4W3+4bw==} peerDependencies: eslint: ^7.0.0 || ^8.0.0 typescript: '*' dependencies: - '@angular-eslint/utils': 13.2.0_eslint@8.12.0+typescript@4.6.3 - '@typescript-eslint/experimental-utils': 5.17.0_eslint@8.12.0+typescript@4.6.3 - eslint: 8.12.0 + '@angular-eslint/utils': 13.2.0_eslint@8.13.0+typescript@4.6.3 + '@typescript-eslint/experimental-utils': 5.17.0_eslint@8.13.0+typescript@4.6.3 + eslint: 8.13.0 typescript: 4.6.3 transitivePeerDependencies: - supports-color dev: true - /@angular-eslint/utils/13.2.0_eslint@8.12.0+typescript@4.6.3: + /@angular-eslint/utils/13.2.0_eslint@8.13.0+typescript@4.6.3: resolution: {integrity: sha512-ywkk+pVLaDLwzNKUcc/xWtJC4Bkm+qRrMOR8ZX3q84E5RTvIvc8IcPFBE4ey3lnGe+nE44OEGuLedCo9vn1Meg==} peerDependencies: eslint: ^7.0.0 || ^8.0.0 typescript: '*' dependencies: '@angular-eslint/bundled-angular-compiler': 13.2.0 - '@typescript-eslint/experimental-utils': 5.17.0_eslint@8.12.0+typescript@4.6.3 - eslint: 8.12.0 + '@typescript-eslint/experimental-utils': 5.17.0_eslint@8.13.0+typescript@4.6.3 + eslint: 8.13.0 typescript: 4.6.3 transitivePeerDependencies: - supports-color @@ -152,13 +152,12 @@ packages: vscode-uri: 3.0.3 dev: true - /@astrojs/markdown-remark/0.8.1: - resolution: {integrity: sha512-H2Ld2aeeolfDZmTh9SM3YKFrAIrlUY3J0NHuDXwIQbA83blO041aye8jh0DsbVBO19Lpph5vz+cXNxK5uiRmlw==} + /@astrojs/markdown-remark/0.8.2: + resolution: {integrity: sha512-P6Qjy7pa+JWfQlCxL+IHn3Cf0GEPSW5xN6b8qZvplWizTNrKeEMgG6vFRGcUMUcbABJ0PkFexErwWs7C9q0AWQ==} dependencies: '@astrojs/prism': 0.4.1 assert: 2.0.0 github-slugger: 1.4.0 - gray-matter: 4.0.3 mdast-util-mdx-expression: 1.2.0 mdast-util-mdx-jsx: 1.2.0 mdast-util-to-string: 3.1.0 @@ -188,22 +187,22 @@ packages: /@astrojs/svelte-language-integration/0.1.2_typescript@4.6.3: resolution: {integrity: sha512-O6LYL9igYSzxCxDHYWUqEquuuUlMG0UL1SliZ7rF/vx9GwU71TCpsRe4iHZ0bcemM5ju9ihoTzGCmLXzYrNw0g==} dependencies: - svelte: 3.46.6 - svelte2tsx: 0.5.6_svelte@3.46.6+typescript@4.6.3 + svelte: 3.47.0 + svelte2tsx: 0.5.8_svelte@3.47.0+typescript@4.6.3 transitivePeerDependencies: - typescript dev: true - /@astrojs/svelte/0.0.2_18c81bf5b82228ffd7479d81687f05ae: + /@astrojs/svelte/0.0.2_a6fe0b86a1dd73a9d3bd80835e86ceec: resolution: {integrity: sha512-tQw3S22QKeu6iNZ32zc6atJY3+A9NsVyWrnE693a0EI1JlsmpZsZXtog7nR/u9rCjn/WRQZ9Pa4HZ6GL9RJxiA==} engines: {node: ^14.15.0 || >=16.0.0} peerDependencies: svelte: ^3.46.4 dependencies: - '@sveltejs/vite-plugin-svelte': 1.0.0-next.41_svelte@3.46.6+vite@2.9.1 + '@sveltejs/vite-plugin-svelte': 1.0.0-next.41_svelte@3.47.0+vite@2.9.1 postcss-load-config: 3.1.4_postcss@8.4.12 - svelte: 3.46.6 - svelte-preprocess: 4.10.5_3ce0e22b85336b1a63f5104127fe70c5 + svelte: 3.47.0 + svelte-preprocess: 4.10.5_8f537df1deb1f807b69cd07414ab4868 transitivePeerDependencies: - '@babel/core' - coffeescript @@ -221,13 +220,13 @@ packages: - vite dev: true - /@astrojs/tailwind/0.1.0: - resolution: {integrity: sha512-W4yNMg5zpuOPyCNR0BRolenFB2qpPA5dlxl1vJd/imekXUfBUgCnay6vHYnymQmXr5QhNNop+7Kde3+tL3GgVA==} + /@astrojs/tailwind/0.1.2: + resolution: {integrity: sha512-u7phch7CqukCsi6DWB4EuiZ8GyLcu10waafcQw8CZ88pkzbXl+5ubiGqXqd75I1R05f+eXlYX0uwrRetGlELCw==} dependencies: '@proload/core': 0.2.2 autoprefixer: 10.4.4_postcss@8.4.12 postcss: 8.4.12 - tailwindcss: 3.0.23_autoprefixer@10.4.4 + tailwindcss: 3.0.24 transitivePeerDependencies: - ts-node dev: true @@ -240,7 +239,7 @@ packages: resolution: {integrity: sha512-iAXqUn8IIeBTNd72xsFlgaXHkMBMt6y4HJp1tIaK465CWLT/fG1aqB7ykr95gHHmlBdGbFeWWfyB4NJJ0nmeIg==} engines: {node: '>=6.9.0'} dependencies: - '@babel/highlight': 7.16.10 + '@babel/highlight': 7.17.9 dev: true /@babel/compat-data/7.17.7: @@ -248,19 +247,19 @@ packages: engines: {node: '>=6.9.0'} dev: true - /@babel/core/7.17.8: - resolution: {integrity: sha512-OdQDV/7cRBtJHLSOBqqbYNkOcydOgnX59TZx4puf41fzcVtN3e/4yqY8lMQsK+5X2lJtAdmA+6OHqsj1hBJ4IQ==} + /@babel/core/7.17.9: + resolution: {integrity: sha512-5ug+SfZCpDAkVp9SFIZAzlW18rlzsOcJGaetCjkySnrXXDUw9AR8cDUm1iByTmdWM6yxX6/zycaV76w3YTF2gw==} engines: {node: '>=6.9.0'} dependencies: '@ampproject/remapping': 2.1.2 '@babel/code-frame': 7.16.7 - '@babel/generator': 7.17.7 - '@babel/helper-compilation-targets': 7.17.7_@babel+core@7.17.8 + '@babel/generator': 7.17.9 + '@babel/helper-compilation-targets': 7.17.7_@babel+core@7.17.9 '@babel/helper-module-transforms': 7.17.7 - '@babel/helpers': 7.17.8 - '@babel/parser': 7.17.8 + '@babel/helpers': 7.17.9 + '@babel/parser': 7.17.9 '@babel/template': 7.16.7 - '@babel/traverse': 7.17.3 + '@babel/traverse': 7.17.9 '@babel/types': 7.17.0 convert-source-map: 1.8.0 debug: 4.3.4 @@ -271,8 +270,8 @@ packages: - supports-color dev: true - /@babel/generator/7.17.7: - resolution: {integrity: sha512-oLcVCTeIFadUoArDTwpluncplrYBmTCCZZgXCbgNGvOBBiSDDK3eWO4b/+eOTli5tKv1lg+a5/NAXg+nTcei1w==} + /@babel/generator/7.17.9: + resolution: {integrity: sha512-rAdDousTwxbIxbz5I7GEQ3lUip+xVCXooZNbsydCWs3xA7ZsYOv+CFRdzGxRX78BmQHu9B1Eso59AOZQOJDEdQ==} engines: {node: '>=6.9.0'} dependencies: '@babel/types': 7.17.0 @@ -280,14 +279,14 @@ packages: source-map: 0.5.7 dev: true - /@babel/helper-compilation-targets/7.17.7_@babel+core@7.17.8: + /@babel/helper-compilation-targets/7.17.7_@babel+core@7.17.9: resolution: {integrity: sha512-UFzlz2jjd8kroj0hmCFV5zr+tQPi1dpC2cRsDV/3IEW8bJfCPrPpmcSN6ZS8RqIq4LXcmpipCQFPddyFA5Yc7w==} engines: {node: '>=6.9.0'} peerDependencies: '@babel/core': ^7.0.0 dependencies: '@babel/compat-data': 7.17.7 - '@babel/core': 7.17.8 + '@babel/core': 7.17.9 '@babel/helper-validator-option': 7.16.7 browserslist: 4.20.2 semver: 6.3.0 @@ -300,22 +299,14 @@ packages: '@babel/types': 7.17.0 dev: true - /@babel/helper-function-name/7.16.7: - resolution: {integrity: sha512-QfDfEnIUyyBSR3HtrtGECuZ6DAyCkYFp7GHl75vFtTnn6pjKeK0T1DB5lLkFvBea8MdaiUABx3osbgLyInoejA==} + /@babel/helper-function-name/7.17.9: + resolution: {integrity: sha512-7cRisGlVtiVqZ0MW0/yFB4atgpGLWEHUVYnb448hZK4x+vih0YO5UoS11XIYtZYqHd0dIPMdUSv8q5K4LdMnIg==} engines: {node: '>=6.9.0'} dependencies: - '@babel/helper-get-function-arity': 7.16.7 '@babel/template': 7.16.7 '@babel/types': 7.17.0 dev: true - /@babel/helper-get-function-arity/7.16.7: - resolution: {integrity: sha512-flc+RLSOBXzNzVhcLu6ujeHUrD6tANAOU5ojrRx/as+tbzf8+stUCj7+IfRRoAbEZqj/ahXEMsjhOhgeZsrnTw==} - engines: {node: '>=6.9.0'} - dependencies: - '@babel/types': 7.17.0 - dev: true - /@babel/helper-hoist-variables/7.16.7: resolution: {integrity: sha512-m04d/0Op34H5v7pbZw6pSKP7weA6lsMvfiIAMeIvkY/R4xQtBSMFEigu9QTZ2qB/9l22vsxtM8a+Q8CzD255fg==} engines: {node: '>=6.9.0'} @@ -340,7 +331,7 @@ packages: '@babel/helper-split-export-declaration': 7.16.7 '@babel/helper-validator-identifier': 7.16.7 '@babel/template': 7.16.7 - '@babel/traverse': 7.17.3 + '@babel/traverse': 7.17.9 '@babel/types': 7.17.0 transitivePeerDependencies: - supports-color @@ -370,19 +361,19 @@ packages: engines: {node: '>=6.9.0'} dev: true - /@babel/helpers/7.17.8: - resolution: {integrity: sha512-QcL86FGxpfSJwGtAvv4iG93UL6bmqBdmoVY0CMCU2g+oD2ezQse3PT5Pa+jiD6LJndBQi0EDlpzOWNlLuhz5gw==} + /@babel/helpers/7.17.9: + resolution: {integrity: sha512-cPCt915ShDWUEzEp3+UNRktO2n6v49l5RSnG9M5pS24hA+2FAc5si+Pn1i4VVbQQ+jh+bIZhPFQOJOzbrOYY1Q==} engines: {node: '>=6.9.0'} dependencies: '@babel/template': 7.16.7 - '@babel/traverse': 7.17.3 + '@babel/traverse': 7.17.9 '@babel/types': 7.17.0 transitivePeerDependencies: - supports-color dev: true - /@babel/highlight/7.16.10: - resolution: {integrity: sha512-5FnTQLSLswEj6IkgVw5KusNUUFY9ZGqe/TRFnP/BKYHYgfh7tc+C7mwiy95/yNP7Dh9x580Vv8r7u7ZfTBFxdw==} + /@babel/highlight/7.17.9: + resolution: {integrity: sha512-J9PfEKCbFIv2X5bjTMiZu6Vf341N05QIY+d6FvVKynkG1S7G0j3I0QoRtWIrXhZ+/Nlb5Q0MzqL7TokEJ5BNHg==} engines: {node: '>=6.9.0'} dependencies: '@babel/helper-validator-identifier': 7.16.7 @@ -390,8 +381,8 @@ packages: js-tokens: 4.0.0 dev: true - /@babel/parser/7.17.8: - resolution: {integrity: sha512-BoHhDJrJXqcg+ZL16Xv39H9n+AqJ4pcDrQBGZN+wHxIysrLZ3/ECwCBUch/1zUNhnsXULcONU3Ei5Hmkfk6kiQ==} + /@babel/parser/7.17.9: + resolution: {integrity: sha512-vqUSBLP8dQHFPdPi9bc5GK9vRkYHJ49fsZdtoJ8EQ8ibpwk5rPKfvNIwChB0KVXcIjcepEBBd2VHC5r9Gy8ueg==} engines: {node: '>=6.0.0'} hasBin: true dev: true @@ -416,21 +407,21 @@ packages: engines: {node: '>=6.9.0'} dependencies: '@babel/code-frame': 7.16.7 - '@babel/parser': 7.17.8 + '@babel/parser': 7.17.9 '@babel/types': 7.17.0 dev: true - /@babel/traverse/7.17.3: - resolution: {integrity: sha512-5irClVky7TxRWIRtxlh2WPUUOLhcPN06AGgaQSB8AEwuyEBgJVuJ5imdHm5zxk8w0QS5T+tDfnDxAlhWjpb7cw==} + /@babel/traverse/7.17.9: + resolution: {integrity: sha512-PQO8sDIJ8SIwipTPiR71kJQCKQYB5NGImbOviK8K+kg5xkNSYXLBupuX9QhatFowrsvo9Hj8WgArg3W7ijNAQw==} engines: {node: '>=6.9.0'} dependencies: '@babel/code-frame': 7.16.7 - '@babel/generator': 7.17.7 + '@babel/generator': 7.17.9 '@babel/helper-environment-visitor': 7.16.7 - '@babel/helper-function-name': 7.16.7 + '@babel/helper-function-name': 7.17.9 '@babel/helper-hoist-variables': 7.16.7 '@babel/helper-split-export-declaration': 7.16.7 - '@babel/parser': 7.17.8 + '@babel/parser': 7.17.9 '@babel/types': 7.17.0 debug: 4.3.4 globals: 11.12.0 @@ -510,8 +501,8 @@ packages: '@jridgewell/sourcemap-codec': 1.4.11 dev: true - /@ljharb/has-package-exports-patterns/0.0.1: - resolution: {integrity: sha512-J4HxcjHI8EzVwXj2HKfZrwnWv4wmOhGxSHyxDQLhiL4ibwRoIkYBqsacZUXFUWQzJtW6QC+FKSNy8HqKjkEqaQ==} + /@ljharb/has-package-exports-patterns/0.0.2: + resolution: {integrity: sha512-4/RWEeXDO6bocPONheFe6gX/oQdP/bEpv0oL4HqjPP5DCenBSt0mHgahppY49N0CpsaqffdwPq+TlX9CYOq2Dw==} dev: true /@nodelib/fs.scandir/2.1.5: @@ -563,7 +554,7 @@ packages: picomatch: 2.3.1 dev: true - /@sveltejs/vite-plugin-svelte/1.0.0-next.41_svelte@3.46.6+vite@2.9.1: + /@sveltejs/vite-plugin-svelte/1.0.0-next.41_svelte@3.47.0+vite@2.9.1: resolution: {integrity: sha512-2kZ49mpi/YW1PIPvKaJNSSwIFgmw9QUf1+yaNa4U8yJD6AsfSHXAU3goscWbi1jfWnSg2PhvwAf+bvLCdp2F9g==} engines: {node: ^14.13.1 || >= 16} peerDependencies: @@ -578,14 +569,14 @@ packages: debug: 4.3.4 kleur: 4.1.4 magic-string: 0.26.1 - svelte: 3.46.6 - svelte-hmr: 0.14.11_svelte@3.46.6 + svelte: 3.47.0 + svelte-hmr: 0.14.11_svelte@3.47.0 vite: 2.9.1 transitivePeerDependencies: - supports-color dev: true - /@tailwindcss/typography/0.5.2_tailwindcss@3.0.23: + /@tailwindcss/typography/0.5.2_tailwindcss@3.0.24: resolution: {integrity: sha512-coq8DBABRPFcVhVIk6IbKyyHUt7YTEC/C992tatFB+yEx5WGBQrCgsSFjxHUr8AWXphWckadVJbominEduYBqw==} peerDependencies: tailwindcss: '>=3.0.0 || >= 3.0.0-alpha.1 || insiders' @@ -593,7 +584,7 @@ packages: lodash.castarray: 4.4.0 lodash.isplainobject: 4.0.6 lodash.merge: 4.6.2 - tailwindcss: 3.0.23_autoprefixer@10.4.4 + tailwindcss: 3.0.24 dev: true /@types/acorn/4.0.6: @@ -660,10 +651,6 @@ packages: resolution: {integrity: sha512-UxDxWn7dl97rKVeVS61vErvw086aCYhDLyvRQZ5Rk65rZKepaFdm53GeqXaKBuOhED4e9uWq34IC3TdSdJJ2Gw==} dev: true - /@types/parse-json/4.0.0: - resolution: {integrity: sha512-//oorEZjL6sbPcKUaCdIGlIUeH26mgzimjBB77G6XRgnDl/L5wOnpyBGRe/Mmf5CVW3PwEBE1NjiMZ/ssFh4wA==} - dev: true - /@types/parse5/6.0.3: resolution: {integrity: sha512-SuT16Q1K51EAVPz1K29DJ/sXjhSQ0zjvsypYJ6tlwVsRV9jwW5Adq2ch8Dq8kDBCkYnELS7N7VNCSB5nC56t/g==} dev: true @@ -686,8 +673,8 @@ packages: resolution: {integrity: sha512-PBjIUxZHOuj0R15/xuwJYjFi+KZdNFrehocChv4g5hu6aFroHue8m0lBP0POdK2nKzbw0cgV1mws8+V/JAcEkQ==} dev: true - /@typescript-eslint/eslint-plugin/5.18.0_a07dca3bdfc4bfa60f4dda0c1f9e3287: - resolution: {integrity: sha512-tzrmdGMJI/uii9/V6lurMo4/o+dMTKDH82LkNjhJ3adCW22YQydoRs5MwTiqxGF9CSYxPxQ7EYb4jLNlIs+E+A==} + /@typescript-eslint/eslint-plugin/5.19.0_f34adc8488d2e4f014fe61432d70cbf2: + resolution: {integrity: sha512-w59GpFqDYGnWFim9p6TGJz7a3qWeENJuAKCqjGSx+Hq/bwq3RZwXYqy98KIfN85yDqz9mq6QXiY5h0FjGQLyEg==} engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} peerDependencies: '@typescript-eslint/parser': ^5.0.0 @@ -697,37 +684,37 @@ packages: typescript: optional: true dependencies: - '@typescript-eslint/parser': 5.18.0_eslint@8.12.0+typescript@4.6.3 - '@typescript-eslint/scope-manager': 5.18.0 - '@typescript-eslint/type-utils': 5.18.0_eslint@8.12.0+typescript@4.6.3 - '@typescript-eslint/utils': 5.18.0_eslint@8.12.0+typescript@4.6.3 + '@typescript-eslint/parser': 5.19.0_eslint@8.13.0+typescript@4.6.3 + '@typescript-eslint/scope-manager': 5.19.0 + '@typescript-eslint/type-utils': 5.19.0_eslint@8.13.0+typescript@4.6.3 + '@typescript-eslint/utils': 5.19.0_eslint@8.13.0+typescript@4.6.3 debug: 4.3.4 - eslint: 8.12.0 + eslint: 8.13.0 functional-red-black-tree: 1.0.1 ignore: 5.2.0 regexpp: 3.2.0 - semver: 7.3.5 + semver: 7.3.7 tsutils: 3.21.0_typescript@4.6.3 typescript: 4.6.3 transitivePeerDependencies: - supports-color dev: true - /@typescript-eslint/experimental-utils/5.17.0_eslint@8.12.0+typescript@4.6.3: + /@typescript-eslint/experimental-utils/5.17.0_eslint@8.13.0+typescript@4.6.3: resolution: {integrity: sha512-U4sM5z0/ymSYqQT6I7lz8l0ZZ9zrya5VIwrwAP5WOJVabVtVsIpTMxPQe+D3qLyePT+VlETUTO2nA1+PufPx9Q==} engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} peerDependencies: eslint: ^6.0.0 || ^7.0.0 || ^8.0.0 dependencies: - '@typescript-eslint/utils': 5.17.0_eslint@8.12.0+typescript@4.6.3 - eslint: 8.12.0 + '@typescript-eslint/utils': 5.17.0_eslint@8.13.0+typescript@4.6.3 + eslint: 8.13.0 transitivePeerDependencies: - supports-color - typescript dev: true - /@typescript-eslint/parser/5.18.0_eslint@8.12.0+typescript@4.6.3: - resolution: {integrity: sha512-+08nYfurBzSSPndngnHvFw/fniWYJ5ymOrn/63oMIbgomVQOvIDhBoJmYZ9lwQOCnQV9xHGvf88ze3jFGUYooQ==} + /@typescript-eslint/parser/5.19.0_eslint@8.13.0+typescript@4.6.3: + resolution: {integrity: sha512-yhktJjMCJX8BSBczh1F/uY8wGRYrBeyn84kH6oyqdIJwTGKmzX5Qiq49LRQ0Jh0LXnWijEziSo6BRqny8nqLVQ==} engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} peerDependencies: eslint: ^6.0.0 || ^7.0.0 || ^8.0.0 @@ -736,11 +723,11 @@ packages: typescript: optional: true dependencies: - '@typescript-eslint/scope-manager': 5.18.0 - '@typescript-eslint/types': 5.18.0 - '@typescript-eslint/typescript-estree': 5.18.0_typescript@4.6.3 + '@typescript-eslint/scope-manager': 5.19.0 + '@typescript-eslint/types': 5.19.0 + '@typescript-eslint/typescript-estree': 5.19.0_typescript@4.6.3 debug: 4.3.4 - eslint: 8.12.0 + eslint: 8.13.0 typescript: 4.6.3 transitivePeerDependencies: - supports-color @@ -754,16 +741,16 @@ packages: '@typescript-eslint/visitor-keys': 5.17.0 dev: true - /@typescript-eslint/scope-manager/5.18.0: - resolution: {integrity: sha512-C0CZML6NyRDj+ZbMqh9FnPscg2PrzSaVQg3IpTmpe0NURMVBXlghGZgMYqBw07YW73i0MCqSDqv2SbywnCS8jQ==} + /@typescript-eslint/scope-manager/5.19.0: + resolution: {integrity: sha512-Fz+VrjLmwq5fbQn5W7cIJZ066HxLMKvDEmf4eu1tZ8O956aoX45jAuBB76miAECMTODyUxH61AQM7q4/GOMQ5g==} engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} dependencies: - '@typescript-eslint/types': 5.18.0 - '@typescript-eslint/visitor-keys': 5.18.0 + '@typescript-eslint/types': 5.19.0 + '@typescript-eslint/visitor-keys': 5.19.0 dev: true - /@typescript-eslint/type-utils/5.18.0_eslint@8.12.0+typescript@4.6.3: - resolution: {integrity: sha512-vcn9/6J5D6jtHxpEJrgK8FhaM8r6J1/ZiNu70ZUJN554Y3D9t3iovi6u7JF8l/e7FcBIxeuTEidZDR70UuCIfA==} + /@typescript-eslint/type-utils/5.19.0_eslint@8.13.0+typescript@4.6.3: + resolution: {integrity: sha512-O6XQ4RI4rQcBGshTQAYBUIGsKqrKeuIOz9v8bckXZnSeXjn/1+BDZndHLe10UplQeJLXDNbaZYrAytKNQO2T4Q==} engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} peerDependencies: eslint: '*' @@ -772,9 +759,9 @@ packages: typescript: optional: true dependencies: - '@typescript-eslint/utils': 5.18.0_eslint@8.12.0+typescript@4.6.3 + '@typescript-eslint/utils': 5.19.0_eslint@8.13.0+typescript@4.6.3 debug: 4.3.4 - eslint: 8.12.0 + eslint: 8.13.0 tsutils: 3.21.0_typescript@4.6.3 typescript: 4.6.3 transitivePeerDependencies: @@ -786,8 +773,8 @@ packages: engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} dev: true - /@typescript-eslint/types/5.18.0: - resolution: {integrity: sha512-bhV1+XjM+9bHMTmXi46p1Led5NP6iqQcsOxgx7fvk6gGiV48c6IynY0apQb7693twJDsXiVzNXTflhplmaiJaw==} + /@typescript-eslint/types/5.19.0: + resolution: {integrity: sha512-zR1ithF4Iyq1wLwkDcT+qFnhs8L5VUtjgac212ftiOP/ZZUOCuuF2DeGiZZGQXGoHA50OreZqLH5NjDcDqn34w==} engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} dev: true @@ -805,15 +792,15 @@ packages: debug: 4.3.4 globby: 11.1.0 is-glob: 4.0.3 - semver: 7.3.5 + semver: 7.3.7 tsutils: 3.21.0_typescript@4.6.3 typescript: 4.6.3 transitivePeerDependencies: - supports-color dev: true - /@typescript-eslint/typescript-estree/5.18.0_typescript@4.6.3: - resolution: {integrity: sha512-wa+2VAhOPpZs1bVij9e5gyVu60ReMi/KuOx4LKjGx2Y3XTNUDJgQ+5f77D49pHtqef/klglf+mibuHs9TrPxdQ==} + /@typescript-eslint/typescript-estree/5.19.0_typescript@4.6.3: + resolution: {integrity: sha512-dRPuD4ocXdaE1BM/dNR21elSEUPKaWgowCA0bqJ6YbYkvtrPVEvZ+zqcX5a8ECYn3q5iBSSUcBBD42ubaOp0Hw==} engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} peerDependencies: typescript: '*' @@ -821,19 +808,19 @@ packages: typescript: optional: true dependencies: - '@typescript-eslint/types': 5.18.0 - '@typescript-eslint/visitor-keys': 5.18.0 + '@typescript-eslint/types': 5.19.0 + '@typescript-eslint/visitor-keys': 5.19.0 debug: 4.3.4 globby: 11.1.0 is-glob: 4.0.3 - semver: 7.3.5 + semver: 7.3.7 tsutils: 3.21.0_typescript@4.6.3 typescript: 4.6.3 transitivePeerDependencies: - supports-color dev: true - /@typescript-eslint/utils/5.17.0_eslint@8.12.0+typescript@4.6.3: + /@typescript-eslint/utils/5.17.0_eslint@8.13.0+typescript@4.6.3: resolution: {integrity: sha512-DVvndq1QoxQH+hFv+MUQHrrWZ7gQ5KcJzyjhzcqB1Y2Xes1UQQkTRPUfRpqhS8mhTWsSb2+iyvDW1Lef5DD7vA==} engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} peerDependencies: @@ -843,27 +830,27 @@ packages: '@typescript-eslint/scope-manager': 5.17.0 '@typescript-eslint/types': 5.17.0 '@typescript-eslint/typescript-estree': 5.17.0_typescript@4.6.3 - eslint: 8.12.0 + eslint: 8.13.0 eslint-scope: 5.1.1 - eslint-utils: 3.0.0_eslint@8.12.0 + eslint-utils: 3.0.0_eslint@8.13.0 transitivePeerDependencies: - supports-color - typescript dev: true - /@typescript-eslint/utils/5.18.0_eslint@8.12.0+typescript@4.6.3: - resolution: {integrity: sha512-+hFGWUMMri7OFY26TsOlGa+zgjEy1ssEipxpLjtl4wSll8zy85x0GrUSju/FHdKfVorZPYJLkF3I4XPtnCTewA==} + /@typescript-eslint/utils/5.19.0_eslint@8.13.0+typescript@4.6.3: + resolution: {integrity: sha512-ZuEckdupXpXamKvFz/Ql8YnePh2ZWcwz7APICzJL985Rp5C2AYcHO62oJzIqNhAMtMK6XvrlBTZeNG8n7gS3lQ==} engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} peerDependencies: eslint: ^6.0.0 || ^7.0.0 || ^8.0.0 dependencies: '@types/json-schema': 7.0.11 - '@typescript-eslint/scope-manager': 5.18.0 - '@typescript-eslint/types': 5.18.0 - '@typescript-eslint/typescript-estree': 5.18.0_typescript@4.6.3 - eslint: 8.12.0 + '@typescript-eslint/scope-manager': 5.19.0 + '@typescript-eslint/types': 5.19.0 + '@typescript-eslint/typescript-estree': 5.19.0_typescript@4.6.3 + eslint: 8.13.0 eslint-scope: 5.1.1 - eslint-utils: 3.0.0_eslint@8.12.0 + eslint-utils: 3.0.0_eslint@8.13.0 transitivePeerDependencies: - supports-color - typescript @@ -877,11 +864,11 @@ packages: eslint-visitor-keys: 3.3.0 dev: true - /@typescript-eslint/visitor-keys/5.18.0: - resolution: {integrity: sha512-Hf+t+dJsjAKpKSkg3EHvbtEpFFb/1CiOHnvI8bjHgOD4/wAw3gKrA0i94LrbekypiZVanJu3McWJg7rWDMzRTg==} + /@typescript-eslint/visitor-keys/5.19.0: + resolution: {integrity: sha512-Ym7zZoMDZcAKWsULi2s7UMLREdVQdScPQ/fKWMYefarCztWlHPFVJo8racf8R0Gc8FAEJ2eD4of8As1oFtnQlQ==} engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} dependencies: - '@typescript-eslint/types': 5.18.0 + '@typescript-eslint/types': 5.19.0 eslint-visitor-keys: 3.3.0 dev: true @@ -1032,7 +1019,7 @@ packages: dependencies: call-bind: 1.0.2 define-properties: 1.1.3 - es-abstract: 1.19.2 + es-abstract: 1.19.4 get-intrinsic: 1.1.1 is-string: 1.0.7 dev: true @@ -1046,13 +1033,14 @@ packages: engines: {node: '>=8'} dev: true - /array.prototype.flatmap/1.2.5: - resolution: {integrity: sha512-08u6rVyi1Lj7oqWbS9nUxliETrtIROT4XGTA4D/LWGten6E3ocm7cy9SIrmNHOL5XVbVuckUp3X6Xyg8/zpvHA==} + /array.prototype.flatmap/1.3.0: + resolution: {integrity: sha512-PZC9/8TKAIxcWKdyeb77EzULHPrIX/tIZebLJUQOMR1OwYosT8yggdfWScfTBCDj5utONvOuPQQumYsU2ULbkg==} engines: {node: '>= 0.4'} dependencies: call-bind: 1.0.2 define-properties: 1.1.3 - es-abstract: 1.19.2 + es-abstract: 1.19.4 + es-shim-unscopables: 1.0.0 dev: true /assert/2.0.0: @@ -1076,20 +1064,20 @@ packages: engines: {node: '>=8'} dev: true - /astro/1.0.0-beta.2: - resolution: {integrity: sha512-qnSGQzswnhBwvX0VttcpLi1BWblLBvqH6xhd63hDTTaZrrVuizdVPKre+Rw0585ndRA6pwFBL8MUC42vbJVPbQ==} + /astro/1.0.0-beta.8: + resolution: {integrity: sha512-hAoEEUy1JgHPYp3USk7jlpaaqi0Iv9mCd+k6QbFrs9Ju0oxrhfXd8IF24NYvD3JjS0MaKqKa5Sn5oo4mVdMnwA==} engines: {node: ^14.15.0 || >=16.0.0, npm: '>=6.14.0'} hasBin: true dependencies: '@astrojs/compiler': 0.14.1 '@astrojs/language-server': 0.13.4 - '@astrojs/markdown-remark': 0.8.1 + '@astrojs/markdown-remark': 0.8.2 '@astrojs/prism': 0.4.1 '@astrojs/webapi': 0.11.0 - '@babel/core': 7.17.8 - '@babel/generator': 7.17.7 - '@babel/parser': 7.17.8 - '@babel/traverse': 7.17.3 + '@babel/core': 7.17.9 + '@babel/generator': 7.17.9 + '@babel/parser': 7.17.9 + '@babel/traverse': 7.17.9 '@proload/core': 0.2.2 '@proload/plugin-tsm': 0.1.1_@proload+core@0.2.2 '@web/parse5-utils': 1.3.0 @@ -1101,11 +1089,12 @@ packages: diff: 5.0.0 eol: 0.9.1 es-module-lexer: 0.10.5 - esbuild: 0.14.25 + esbuild: 0.14.36 estree-walker: 3.0.1 execa: 6.1.0 fast-glob: 3.2.11 fast-xml-parser: 4.0.7 + gray-matter: 4.0.3 html-entities: 2.3.3 html-escaper: 3.0.3 htmlparser2: 7.2.0 @@ -1126,7 +1115,7 @@ packages: rehype-slug: 5.0.1 resolve: 1.22.0 rollup: 2.70.1 - semver: 7.3.5 + semver: 7.3.7 serialize-javascript: 6.0.0 shiki: 0.10.1 shorthash: 0.0.2 @@ -1157,7 +1146,7 @@ packages: postcss: ^8.1.0 dependencies: browserslist: 4.20.2 - caniuse-lite: 1.0.30001325 + caniuse-lite: 1.0.30001328 fraction.js: 4.2.0 normalize-range: 0.1.2 picocolors: 1.0.0 @@ -1232,10 +1221,10 @@ packages: engines: {node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7} hasBin: true dependencies: - caniuse-lite: 1.0.30001325 - electron-to-chromium: 1.4.104 + caniuse-lite: 1.0.30001328 + electron-to-chromium: 1.4.107 escalade: 3.1.1 - node-releases: 2.0.2 + node-releases: 2.0.3 picocolors: 1.0.0 dev: true @@ -1272,8 +1261,8 @@ packages: engines: {node: '>=10'} dev: true - /caniuse-lite/1.0.30001325: - resolution: {integrity: sha512-sB1bZHjseSjDtijV1Hb7PB2Zd58Kyx+n/9EotvZ4Qcz2K3d0lWB8dB4nb8wN/TsOGFq3UuAm0zQZNQ4SoR7TrQ==} + /caniuse-lite/1.0.30001328: + resolution: {integrity: sha512-Ue55jHkR/s4r00FLNiX+hGMMuwml/QGqqzVeMQ5thUewznU2EdULFvI3JR7JJid6OrjJNfFvHY2G2dIjmRaDDQ==} dev: true /ccount/2.0.1: @@ -1440,17 +1429,6 @@ packages: requiresBuild: true dev: true - /cosmiconfig/7.0.1: - resolution: {integrity: sha512-a1YWNUV2HwGimB7dU2s1wUMurNKjpx60HxBB6xUM8Re+2s1g1IIfJvFR0/iCF+XHdE0GMTKTuLR32UQff4TEyQ==} - engines: {node: '>=10'} - dependencies: - '@types/parse-json': 4.0.0 - import-fresh: 3.3.0 - parse-json: 5.2.0 - path-type: 4.0.0 - yaml: 1.10.2 - dev: true - /cross-spawn/7.0.3: resolution: {integrity: sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==} engines: {node: '>= 8'} @@ -1581,30 +1559,30 @@ packages: esutils: 2.0.3 dev: true - /dom-serializer/1.3.2: - resolution: {integrity: sha512-5c54Bk5Dw4qAxNOI1pFEizPSjVsx5+bpJKmL2kPn8JhBUq2q09tTCa3mjijun2NfK78NMouDYNMBkOrPZiS+ig==} + /dom-serializer/1.4.1: + resolution: {integrity: sha512-VHwB3KfrcOOkelEG2ZOfxqLZdfkil8PtJi4P8N2MMXucZq2yLp75ClViUlOVwyoHEDjYU433Aq+5zWP61+RGag==} dependencies: - domelementtype: 2.2.0 + domelementtype: 2.3.0 domhandler: 4.3.1 entities: 2.2.0 dev: true - /domelementtype/2.2.0: - resolution: {integrity: sha512-DtBMo82pv1dFtUmHyr48beiuq792Sxohr+8Hm9zoxklYPfa6n0Z3Byjj2IV7bmr2IyqClnqEQhfgHJJ5QF0R5A==} + /domelementtype/2.3.0: + resolution: {integrity: sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw==} dev: true /domhandler/4.3.1: resolution: {integrity: sha512-GrwoxYN+uWlzO8uhUXRl0P+kHE4GtVPfYzVLcUxPL7KNdHKj66vvlhiweIHqYYXWlw+T8iLMp42Lm67ghw4WMQ==} engines: {node: '>= 4'} dependencies: - domelementtype: 2.2.0 + domelementtype: 2.3.0 dev: true /domutils/2.8.0: resolution: {integrity: sha512-w96Cjofp72M5IIhpjgobBimYEfoPjx1Vx0BSX9P30WBdZW2WIKU0T1Bd0kz2eNZ9ikjKgHbEyKx8BB6H1L3h3A==} dependencies: - dom-serializer: 1.3.2 - domelementtype: 2.2.0 + dom-serializer: 1.4.1 + domelementtype: 2.3.0 domhandler: 4.3.1 dev: true @@ -1612,8 +1590,8 @@ packages: resolution: {integrity: sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==} dev: true - /electron-to-chromium/1.4.104: - resolution: {integrity: sha512-2kjoAyiG7uMyGRM9mx25s3HAzmQG2ayuYXxsFmYugHSDcwxREgLtscZvbL1JcW9S/OemeQ3f/SG6JhDwpnCclQ==} + /electron-to-chromium/1.4.107: + resolution: {integrity: sha512-Huen6taaVrUrSy8o7mGStByba8PfOWWluHNxSHGBrCgEdFVLtvdQDBr9LBCF9Uci8SYxh28QNNMO0oC17wbGAg==} dev: true /emmet/2.3.6: @@ -1644,14 +1622,8 @@ packages: resolution: {integrity: sha512-Ds/TEoZjwggRoz/Q2O7SE3i4Jm66mqTDfmdHdq/7DKVk3bro9Q8h6WdXKdPqFLMoqxrDK5SVRzHVPOS6uuGtrg==} dev: true - /error-ex/1.3.2: - resolution: {integrity: sha512-7dFHNmqeFSEt2ZBsCriorKnn3Z2pj+fd9kmI6QoWw4//DL+icEBfc0U7qJCisqrTsKTjw4fNFy2pW9OqStD84g==} - dependencies: - is-arrayish: 0.2.1 - dev: true - - /es-abstract/1.19.2: - resolution: {integrity: sha512-gfSBJoZdlL2xRiOCy0g8gLMryhoe1TlimjzU99L/31Z8QEGIhVQI+EWwt5lT+AuU9SnorVupXFqqOGqGfsyO6w==} + /es-abstract/1.19.4: + resolution: {integrity: sha512-flV8e5g9/xulChMG48Fygk1ptpo4lQRJ0eJYtxJFgi7pklLx7EFcOJ34jnvr8pbWlaFN/AT1cZpe0hiFel9Hqg==} engines: {node: '>= 0.4'} dependencies: call-bind: 1.0.2 @@ -1680,6 +1652,12 @@ packages: resolution: {integrity: sha512-+7IwY/kiGAacQfY+YBhKMvEmyAJnw5grTUgjG85Pe7vcUI/6b7pZjZG8nQ7+48YhzEAEqrEgD2dCz/JIK+AYvw==} dev: true + /es-shim-unscopables/1.0.0: + resolution: {integrity: sha512-Jm6GPcCdC30eMLbZ2x8z2WuRwAws3zTBBKuusffYVUrNj/GVSUAZ+xKMaUpfNDR5IbyNA5LJbaecoUVbmUcB1w==} + dependencies: + has: 1.0.3 + dev: true + /es-to-primitive/1.2.1: resolution: {integrity: sha512-QCOllgZJtaUo9miYBcLChTUaHNjJF3PYs1VidD7AwiEj1kYxKeQTctLAezAOH5ZKRH0g2IgPn6KwB4IT8iRpvA==} engines: {node: '>= 0.4'} @@ -1697,8 +1675,8 @@ packages: resolution: {integrity: sha1-oIzd6EzNvzTQJ6FFG8kdS80ophM=} dev: true - /esbuild-android-64/0.14.25: - resolution: {integrity: sha512-L5vCUk7TzFbBnoESNoXjU3x9+/+7TDIE/1mTfy/erAfvZAqC+S3sp/Qa9wkypFMcFvN9FzvESkTlpeQDolREtQ==} + /esbuild-android-64/0.14.36: + resolution: {integrity: sha512-jwpBhF1jmo0tVCYC/ORzVN+hyVcNZUWuozGcLHfod0RJCedTDTvR4nwlTXdx1gtncDqjk33itjO+27OZHbiavw==} engines: {node: '>=12'} cpu: [x64] os: [android] @@ -1706,17 +1684,8 @@ packages: dev: true optional: true - /esbuild-android-64/0.14.32: - resolution: {integrity: sha512-q1qjB2UcoWehR9Yp9dO2RdJUeLLrXAYsbOU4tkYa+GmJzxTwuvOrMdvaemsXYqb7F4STVTca9KpfqGicEChtUg==} - engines: {node: '>=12'} - cpu: [x64] - os: [android] - requiresBuild: true - dev: true - optional: true - - /esbuild-android-arm64/0.14.25: - resolution: {integrity: sha512-4jv5xPjM/qNm27T5j3ZEck0PvjgQtoMHnz4FzwF5zNP56PvY2CT0WStcAIl6jNlsuDdN63rk2HRBIsO6xFbcFw==} + /esbuild-android-arm64/0.14.36: + resolution: {integrity: sha512-/hYkyFe7x7Yapmfv4X/tBmyKnggUmdQmlvZ8ZlBnV4+PjisrEhAvC3yWpURuD9XoB8Wa1d5dGkTsF53pIvpjsg==} engines: {node: '>=12'} cpu: [arm64] os: [android] @@ -1724,17 +1693,8 @@ packages: dev: true optional: true - /esbuild-android-arm64/0.14.32: - resolution: {integrity: sha512-bs1uu+RuM15f8yjFc0FhPDE/6NID4fKl7beDVsGCme6Q8ld2IzRXmp5QaHurlcH93PFyQnUgVvdahIWgtK2QZw==} - engines: {node: '>=12'} - cpu: [arm64] - os: [android] - requiresBuild: true - dev: true - optional: true - - /esbuild-darwin-64/0.14.25: - resolution: {integrity: sha512-TGp8tuudIxOyWd1+8aYPxQmC1ZQyvij/AfNBa35RubixD0zJ1vkKHVAzo0Zao1zcG6pNqiSyzfPto8vmg0s7oA==} + /esbuild-darwin-64/0.14.36: + resolution: {integrity: sha512-kkl6qmV0dTpyIMKagluzYqlc1vO0ecgpviK/7jwPbRDEv5fejRTaBBEE2KxEQbTHcLhiiDbhG7d5UybZWo/1zQ==} engines: {node: '>=12'} cpu: [x64] os: [darwin] @@ -1742,26 +1702,8 @@ packages: dev: true optional: true - /esbuild-darwin-64/0.14.32: - resolution: {integrity: sha512-6MekflAld28wYtzanwZTxQlxMPeYw/yv1ToFG2hpo3LGxOIE2mBD5IJaMCcyy1//EYvGnGToO3p6XKdbS8E1QQ==} - engines: {node: '>=12'} - cpu: [x64] - os: [darwin] - requiresBuild: true - dev: true - optional: true - - /esbuild-darwin-arm64/0.14.25: - resolution: {integrity: sha512-oTcDgdm0MDVEmw2DWu8BV68pYuImpFgvWREPErBZmNA4MYKGuBRaCiJqq6jZmBR1x+3y1DWCjez+5uLtuAm6mw==} - engines: {node: '>=12'} - cpu: [arm64] - os: [darwin] - requiresBuild: true - dev: true - optional: true - - /esbuild-darwin-arm64/0.14.32: - resolution: {integrity: sha512-BHYIjiPDYQTD+4zwqdqRo+I2bbg3fn9mah/gZm4SCCy+7uwTTYOYobIunHT7wVCgxnFCr50PJUdaMrEoCImRbw==} + /esbuild-darwin-arm64/0.14.36: + resolution: {integrity: sha512-q8fY4r2Sx6P0Pr3VUm//eFYKVk07C5MHcEinU1BjyFnuYz4IxR/03uBbDwluR6ILIHnZTE7AkTUWIdidRi1Jjw==} engines: {node: '>=12'} cpu: [arm64] os: [darwin] @@ -1769,17 +1711,8 @@ packages: dev: true optional: true - /esbuild-freebsd-64/0.14.25: - resolution: {integrity: sha512-ueAqbnMZ8arnuLH8tHwTCQYeptnHOUV7vA6px6j4zjjQwDx7TdP7kACPf3TLZLdJQ3CAD1XCvQ2sPhX+8tacvQ==} - engines: {node: '>=12'} - cpu: [x64] - os: [freebsd] - requiresBuild: true - dev: true - optional: true - - /esbuild-freebsd-64/0.14.32: - resolution: {integrity: sha512-6BOBhtfAf9AlfjL1AvtfVOxwY82tHPfYrA0lskJpFjfiEMGTLU6e0vdOwb4+4x++gGz49azuGK0woYqdfL03uw==} + /esbuild-freebsd-64/0.14.36: + resolution: {integrity: sha512-Hn8AYuxXXRptybPqoMkga4HRFE7/XmhtlQjXFHoAIhKUPPMeJH35GYEUWGbjteai9FLFvBAjEAlwEtSGxnqWww==} engines: {node: '>=12'} cpu: [x64] os: [freebsd] @@ -1787,8 +1720,8 @@ packages: dev: true optional: true - /esbuild-freebsd-arm64/0.14.25: - resolution: {integrity: sha512-+ZVWud2HKh+Ob6k/qiJWjBtUg4KmJGGmbvEXXW1SNKS7hW7HU+Zq2ZCcE1akFxOPkVB+EhOty/sSek30tkCYug==} + /esbuild-freebsd-arm64/0.14.36: + resolution: {integrity: sha512-S3C0attylLLRiCcHiJd036eDEMOY32+h8P+jJ3kTcfhJANNjP0TNBNL30TZmEdOSx/820HJFgRrqpNAvTbjnDA==} engines: {node: '>=12'} cpu: [arm64] os: [freebsd] @@ -1796,26 +1729,8 @@ packages: dev: true optional: true - /esbuild-freebsd-arm64/0.14.32: - resolution: {integrity: sha512-zIRR4gKQW56p/xLM8TlpxVBNiX0w3VoR9ZxfH4nrfJ7QiL0SYHRy8YPL5C7zMWRjSze2WxQRHfS9bHKdVrVXBw==} - engines: {node: '>=12'} - cpu: [arm64] - os: [freebsd] - requiresBuild: true - dev: true - optional: true - - /esbuild-linux-32/0.14.25: - resolution: {integrity: sha512-3OP/lwV3kCzEz45tobH9nj+uE4ubhGsfx+tn0L26WAGtUbmmcRpqy7XRG/qK7h1mClZ+eguIANcQntYMdYklfw==} - engines: {node: '>=12'} - cpu: [ia32] - os: [linux] - requiresBuild: true - dev: true - optional: true - - /esbuild-linux-32/0.14.32: - resolution: {integrity: sha512-kn0AkGtPvzA6xiv93/mavvZ7DVinu/ewh2F2S0/8mE8/PXi3D4+svZ6V3beV5DIH7vcHVuGhoooWav8HPF04tg==} + /esbuild-linux-32/0.14.36: + resolution: {integrity: sha512-Eh9OkyTrEZn9WGO4xkI3OPPpUX7p/3QYvdG0lL4rfr73Ap2HAr6D9lP59VMF64Ex01LhHSXwIsFG/8AQjh6eNw==} engines: {node: '>=12'} cpu: [ia32] os: [linux] @@ -1823,17 +1738,8 @@ packages: dev: true optional: true - /esbuild-linux-64/0.14.25: - resolution: {integrity: sha512-+aKHdHZmX9qwVlQmu5xYXh7GsBFf4TWrePgeJTalhXHOG7NNuUwoHmketGiZEoNsWyyqwH9rE5BC+iwcLY30Ug==} - engines: {node: '>=12'} - cpu: [x64] - os: [linux] - requiresBuild: true - dev: true - optional: true - - /esbuild-linux-64/0.14.32: - resolution: {integrity: sha512-Ie+PMvrPj/HCOmSc0QubKttDxP2iBtPzDu+b+V3HGDGwkGmVpDkyXx1NXp5LjkIphIay2QekMwy1dSw3KDqCew==} + /esbuild-linux-64/0.14.36: + resolution: {integrity: sha512-vFVFS5ve7PuwlfgoWNyRccGDi2QTNkQo/2k5U5ttVD0jRFaMlc8UQee708fOZA6zTCDy5RWsT5MJw3sl2X6KDg==} engines: {node: '>=12'} cpu: [x64] os: [linux] @@ -1841,8 +1747,8 @@ packages: dev: true optional: true - /esbuild-linux-arm/0.14.25: - resolution: {integrity: sha512-aTLcE2VBoLydL943REcAcgnDi3bHtmULSXWLbjtBdtykRatJVSxKMjK9YlBXUZC4/YcNQfH7AxwVeQr9fNxPhw==} + /esbuild-linux-arm/0.14.36: + resolution: {integrity: sha512-NhgU4n+NCsYgt7Hy61PCquEz5aevI6VjQvxwBxtxrooXsxt5b2xtOUXYZe04JxqQo+XZk3d1gcr7pbV9MAQ/Lg==} engines: {node: '>=12'} cpu: [arm] os: [linux] @@ -1850,17 +1756,8 @@ packages: dev: true optional: true - /esbuild-linux-arm/0.14.32: - resolution: {integrity: sha512-R/Bvn/YQNDyvfN0SERh/I7hKPqN+nSSruQdVeiYEJ+jc3fUi73jXYAscpTQgIBeER/yXnEsgJGU/UQ9+sscr7A==} - engines: {node: '>=12'} - cpu: [arm] - os: [linux] - requiresBuild: true - dev: true - optional: true - - /esbuild-linux-arm64/0.14.25: - resolution: {integrity: sha512-UxfenPx/wSZx55gScCImPtXekvZQLI2GW3qe5dtlmU7luiqhp5GWPzGeQEbD3yN3xg/pHc671m5bma5Ns7lBHw==} + /esbuild-linux-arm64/0.14.36: + resolution: {integrity: sha512-24Vq1M7FdpSmaTYuu1w0Hdhiqkbto1I5Pjyi+4Cdw5fJKGlwQuw+hWynTcRI/cOZxBcBpP21gND7W27gHAiftw==} engines: {node: '>=12'} cpu: [arm64] os: [linux] @@ -1868,26 +1765,8 @@ packages: dev: true optional: true - /esbuild-linux-arm64/0.14.32: - resolution: {integrity: sha512-ykoqKaxX95nB+lk2K/+qxr0ke+BxkeVi0yKOnymCR5Ive7IZDHa4BJX53NEGSBKLfWPwKE6SXTz8qcEewSntoA==} - engines: {node: '>=12'} - cpu: [arm64] - os: [linux] - requiresBuild: true - dev: true - optional: true - - /esbuild-linux-mips64le/0.14.25: - resolution: {integrity: sha512-wLWYyqVfYx9Ur6eU5RT92yJVsaBGi5RdkoWqRHOqcJ38Kn60QMlcghsKeWfe9jcYut8LangYZ98xO1LxIoSXrQ==} - engines: {node: '>=12'} - cpu: [mips64el] - os: [linux] - requiresBuild: true - dev: true - optional: true - - /esbuild-linux-mips64le/0.14.32: - resolution: {integrity: sha512-IilnlBexpHpt/5po0cle/L/S6CYnwaq23UuAqWzxp+opHLOCNnyANpC1jOoP551aRx4JuZ7z3xZZ7bYQZB147w==} + /esbuild-linux-mips64le/0.14.36: + resolution: {integrity: sha512-hZUeTXvppJN+5rEz2EjsOFM9F1bZt7/d2FUM1lmQo//rXh1RTFYzhC0txn7WV0/jCC7SvrGRaRz0NMsRPf8SIA==} engines: {node: '>=12'} cpu: [mips64el] os: [linux] @@ -1895,8 +1774,8 @@ packages: dev: true optional: true - /esbuild-linux-ppc64le/0.14.25: - resolution: {integrity: sha512-0dR6Csl6Zas3g4p9ULckEl8Mo8IInJh33VCJ3eaV1hj9+MHGdmDOakYMN8MZP9/5nl+NU/0ygpd14cWgy8uqRw==} + /esbuild-linux-ppc64le/0.14.36: + resolution: {integrity: sha512-1Bg3QgzZjO+QtPhP9VeIBhAduHEc2kzU43MzBnMwpLSZ890azr4/A9Dganun8nsqD/1TBcqhId0z4mFDO8FAvg==} engines: {node: '>=12'} cpu: [ppc64] os: [linux] @@ -1904,17 +1783,8 @@ packages: dev: true optional: true - /esbuild-linux-ppc64le/0.14.32: - resolution: {integrity: sha512-TR6l5nWZbfq7jSY+1vsiQjT4m67NWplNhbX6GBieZq6DBt0nTx1XgTZAdKROF7jTuaK7YrCYlPXtfO3w86Mysw==} - engines: {node: '>=12'} - cpu: [ppc64] - os: [linux] - requiresBuild: true - dev: true - optional: true - - /esbuild-linux-riscv64/0.14.25: - resolution: {integrity: sha512-J4d20HDmTrgvhR0bdkDhvvJGaikH3LzXQnNaseo8rcw9Yqby9A90gKUmWpfwqLVNRILvNnAmKLfBjCKU9ajg8w==} + /esbuild-linux-riscv64/0.14.36: + resolution: {integrity: sha512-dOE5pt3cOdqEhaufDRzNCHf5BSwxgygVak9UR7PH7KPVHwSTDAZHDoEjblxLqjJYpc5XaU9+gKJ9F8mp9r5I4A==} engines: {node: '>=12'} cpu: [riscv64] os: [linux] @@ -1922,26 +1792,8 @@ packages: dev: true optional: true - /esbuild-linux-riscv64/0.14.32: - resolution: {integrity: sha512-aSOcUzTeIAslfri8e+bMpyzQuxhcIiNhWyuCGGXum2PtxwYiUqR8/UCMYfwYtYkhr1yABOFOfs83mm9KBy5qCQ==} - engines: {node: '>=12'} - cpu: [riscv64] - os: [linux] - requiresBuild: true - dev: true - optional: true - - /esbuild-linux-s390x/0.14.25: - resolution: {integrity: sha512-YI2d5V6nTE73ZnhEKQD7MtsPs1EtUZJ3obS21oxQxGbbRw1G+PtJKjNyur+3t6nzHP9oTg6GHQ3S3hOLLmbDIQ==} - engines: {node: '>=12'} - cpu: [s390x] - os: [linux] - requiresBuild: true - dev: true - optional: true - - /esbuild-linux-s390x/0.14.32: - resolution: {integrity: sha512-dNlip+EvexxKjRZitFCWCd7DVk64c7R5ySr8aFEMHCb/RriNiyDxYJGzYWm4EMJsMRMupMUHlMY64BAa3Op9FA==} + /esbuild-linux-s390x/0.14.36: + resolution: {integrity: sha512-g4FMdh//BBGTfVHjF6MO7Cz8gqRoDPzXWxRvWkJoGroKA18G9m0wddvPbEqcQf5Tbt2vSc1CIgag7cXwTmoTXg==} engines: {node: '>=12'} cpu: [s390x] os: [linux] @@ -1949,8 +1801,8 @@ packages: dev: true optional: true - /esbuild-netbsd-64/0.14.25: - resolution: {integrity: sha512-TKIVgNWLUOkr+Exrye70XTEE1lJjdQXdM4tAXRzfHE9iBA7LXWcNtVIuSnphTqpanPzTDFarF0yqq4kpbC6miA==} + /esbuild-netbsd-64/0.14.36: + resolution: {integrity: sha512-UB2bVImxkWk4vjnP62ehFNZ73lQY1xcnL5ZNYF3x0AG+j8HgdkNF05v67YJdCIuUJpBuTyCK8LORCYo9onSW+A==} engines: {node: '>=12'} cpu: [x64] os: [netbsd] @@ -1958,17 +1810,8 @@ packages: dev: true optional: true - /esbuild-netbsd-64/0.14.32: - resolution: {integrity: sha512-Pa3QByYqxzlBFQQQhjYBPg3WUfSjwibqzh1hC6mPDRUHnCeUcrLoBuIiG4xqOYEpQM9/kDowIBsrGIQEVWWdQA==} - engines: {node: '>=12'} - cpu: [x64] - os: [netbsd] - requiresBuild: true - dev: true - optional: true - - /esbuild-openbsd-64/0.14.25: - resolution: {integrity: sha512-QgFJ37A15D7NIXBTYEqz29+uw3nNBOIyog+3kFidANn6kjw0GHZ0lEYQn+cwjyzu94WobR+fes7cTl/ZYlHb1A==} + /esbuild-openbsd-64/0.14.36: + resolution: {integrity: sha512-NvGB2Chf8GxuleXRGk8e9zD3aSdRO5kLt9coTQbCg7WMGXeX471sBgh4kSg8pjx0yTXRt0MlrUDnjVYnetyivg==} engines: {node: '>=12'} cpu: [x64] os: [openbsd] @@ -1976,17 +1819,8 @@ packages: dev: true optional: true - /esbuild-openbsd-64/0.14.32: - resolution: {integrity: sha512-uWKKqpCjkMY8TCIobFvaSETonQY3OrmgnoTCC3tF+lvMoneYjppB6akx7L5Xv0kP+1tnSbrIof1ca8PfqGUyjw==} - engines: {node: '>=12'} - cpu: [x64] - os: [openbsd] - requiresBuild: true - dev: true - optional: true - - /esbuild-sunos-64/0.14.25: - resolution: {integrity: sha512-rmWfjUItYIVlqr5EnTH1+GCxXiBOC42WBZ3w++qh7n2cS9Xo0lO5pGSG2N+huOU2fX5L+6YUuJ78/vOYvefeFw==} + /esbuild-sunos-64/0.14.36: + resolution: {integrity: sha512-VkUZS5ftTSjhRjuRLp+v78auMO3PZBXu6xl4ajomGenEm2/rGuWlhFSjB7YbBNErOchj51Jb2OK8lKAo8qdmsQ==} engines: {node: '>=12'} cpu: [x64] os: [sunos] @@ -1994,26 +1828,8 @@ packages: dev: true optional: true - /esbuild-sunos-64/0.14.32: - resolution: {integrity: sha512-Ar+u3mBk0oVV4Fwv/qlinJZNIPPtTBSG+1W42o8lOaVxJ+rJgecDoeUN+5uyd9at0BK1SVrQ1qZ4wjHKB0qFpQ==} - engines: {node: '>=12'} - cpu: [x64] - os: [sunos] - requiresBuild: true - dev: true - optional: true - - /esbuild-windows-32/0.14.25: - resolution: {integrity: sha512-HGAxVUofl3iUIz9W10Y9XKtD0bNsK9fBXv1D55N/ljNvkrAYcGB8YCm0v7DjlwtyS6ws3dkdQyXadbxkbzaKOA==} - engines: {node: '>=12'} - cpu: [ia32] - os: [win32] - requiresBuild: true - dev: true - optional: true - - /esbuild-windows-32/0.14.32: - resolution: {integrity: sha512-rLMsbflMY6Hjh3rmQnCDVZahJQ7n+XfT6o1+no5pHRpDlMh38MHthgGh35q+EcOMgrGP3ppnw70rhJq80SaYTQ==} + /esbuild-windows-32/0.14.36: + resolution: {integrity: sha512-bIar+A6hdytJjZrDxfMBUSEHHLfx3ynoEZXx/39nxy86pX/w249WZm8Bm0dtOAByAf4Z6qV0LsnTIJHiIqbw0w==} engines: {node: '>=12'} cpu: [ia32] os: [win32] @@ -2021,8 +1837,8 @@ packages: dev: true optional: true - /esbuild-windows-64/0.14.25: - resolution: {integrity: sha512-TirEohRkfWU9hXLgoDxzhMQD1g8I2mOqvdQF2RS9E/wbkORTAqJHyh7wqGRCQAwNzdNXdg3JAyhQ9/177AadWA==} + /esbuild-windows-64/0.14.36: + resolution: {integrity: sha512-+p4MuRZekVChAeueT1Y9LGkxrT5x7YYJxYE8ZOTcEfeUUN43vktSn6hUNsvxzzATrSgq5QqRdllkVBxWZg7KqQ==} engines: {node: '>=12'} cpu: [x64] os: [win32] @@ -2030,17 +1846,8 @@ packages: dev: true optional: true - /esbuild-windows-64/0.14.32: - resolution: {integrity: sha512-OHnMMxYufVgLXIMnwLynLMKguHMrsVnWcehieSP9i6ZX31KEsOFYWrorcnTWOn4rbZVLSL10ofxLuVIgRW3SWw==} - engines: {node: '>=12'} - cpu: [x64] - os: [win32] - requiresBuild: true - dev: true - optional: true - - /esbuild-windows-arm64/0.14.25: - resolution: {integrity: sha512-4ype9ERiI45rSh+R8qUoBtaj6kJvUOI7oVLhKqPEpcF4Pa5PpT3hm/mXAyotJHREkHpM87PAJcA442mLnbtlNA==} + /esbuild-windows-arm64/0.14.36: + resolution: {integrity: sha512-fBB4WlDqV1m18EF/aheGYQkQZHfPHiHJSBYzXIo8yKehek+0BtBwo/4PNwKGJ5T0YK0oc8pBKjgwPbzSrPLb+Q==} engines: {node: '>=12'} cpu: [arm64] os: [win32] @@ -2048,69 +1855,32 @@ packages: dev: true optional: true - /esbuild-windows-arm64/0.14.32: - resolution: {integrity: sha512-ddavy6IPUBySMfqDfG243TgtuqwQBNJQJPVaA4DaavmMfpBsUxFrSV+HzBWXTKU3I9EcuoEvIATLuQ7NJKxjwg==} - engines: {node: '>=12'} - cpu: [arm64] - os: [win32] - requiresBuild: true - dev: true - optional: true - - /esbuild/0.14.25: - resolution: {integrity: sha512-4JHEIOMNFvK09ziiL+iVmldIhLbn49V4NAVo888tcGFKedEZY/Y8YapfStJ6zSE23tzYPKxqKwQBnQoIO0BI/Q==} - engines: {node: '>=12'} - hasBin: true - requiresBuild: true - optionalDependencies: - esbuild-android-64: 0.14.25 - esbuild-android-arm64: 0.14.25 - esbuild-darwin-64: 0.14.25 - esbuild-darwin-arm64: 0.14.25 - esbuild-freebsd-64: 0.14.25 - esbuild-freebsd-arm64: 0.14.25 - esbuild-linux-32: 0.14.25 - esbuild-linux-64: 0.14.25 - esbuild-linux-arm: 0.14.25 - esbuild-linux-arm64: 0.14.25 - esbuild-linux-mips64le: 0.14.25 - esbuild-linux-ppc64le: 0.14.25 - esbuild-linux-riscv64: 0.14.25 - esbuild-linux-s390x: 0.14.25 - esbuild-netbsd-64: 0.14.25 - esbuild-openbsd-64: 0.14.25 - esbuild-sunos-64: 0.14.25 - esbuild-windows-32: 0.14.25 - esbuild-windows-64: 0.14.25 - esbuild-windows-arm64: 0.14.25 - dev: true - - /esbuild/0.14.32: - resolution: {integrity: sha512-RuzVUP/bkStmnVHK6Gh3gjaMjfXNLqBqvYVDiS9JKl5KdRdRLUeW5Wo8NrbL7cL6CW7Cyak7SvACqyPOBuA8vA==} + /esbuild/0.14.36: + resolution: {integrity: sha512-HhFHPiRXGYOCRlrhpiVDYKcFJRdO0sBElZ668M4lh2ER0YgnkLxECuFe7uWCf23FrcLc59Pqr7dHkTqmRPDHmw==} engines: {node: '>=12'} hasBin: true requiresBuild: true optionalDependencies: - esbuild-android-64: 0.14.32 - esbuild-android-arm64: 0.14.32 - esbuild-darwin-64: 0.14.32 - esbuild-darwin-arm64: 0.14.32 - esbuild-freebsd-64: 0.14.32 - esbuild-freebsd-arm64: 0.14.32 - esbuild-linux-32: 0.14.32 - esbuild-linux-64: 0.14.32 - esbuild-linux-arm: 0.14.32 - esbuild-linux-arm64: 0.14.32 - esbuild-linux-mips64le: 0.14.32 - esbuild-linux-ppc64le: 0.14.32 - esbuild-linux-riscv64: 0.14.32 - esbuild-linux-s390x: 0.14.32 - esbuild-netbsd-64: 0.14.32 - esbuild-openbsd-64: 0.14.32 - esbuild-sunos-64: 0.14.32 - esbuild-windows-32: 0.14.32 - esbuild-windows-64: 0.14.32 - esbuild-windows-arm64: 0.14.32 + esbuild-android-64: 0.14.36 + esbuild-android-arm64: 0.14.36 + esbuild-darwin-64: 0.14.36 + esbuild-darwin-arm64: 0.14.36 + esbuild-freebsd-64: 0.14.36 + esbuild-freebsd-arm64: 0.14.36 + esbuild-linux-32: 0.14.36 + esbuild-linux-64: 0.14.36 + esbuild-linux-arm: 0.14.36 + esbuild-linux-arm64: 0.14.36 + esbuild-linux-mips64le: 0.14.36 + esbuild-linux-ppc64le: 0.14.36 + esbuild-linux-riscv64: 0.14.36 + esbuild-linux-s390x: 0.14.36 + esbuild-netbsd-64: 0.14.36 + esbuild-openbsd-64: 0.14.36 + esbuild-sunos-64: 0.14.36 + esbuild-windows-32: 0.14.36 + esbuild-windows-64: 0.14.36 + esbuild-windows-arm64: 0.14.36 dev: true /escalade/3.1.1: @@ -2133,16 +1903,16 @@ packages: engines: {node: '>=12'} dev: true - /eslint-config-prettier/8.5.0_eslint@8.12.0: + /eslint-config-prettier/8.5.0_eslint@8.13.0: resolution: {integrity: sha512-obmWKLUNCnhtQRKc+tmnYuQl0pFU1ibYJQ5BGhTVB08bHe9wC8qUeG7c08dj9XX+AuPj1YSGSQIHl1pnDHZR0Q==} hasBin: true peerDependencies: eslint: '>=7.0.0' dependencies: - eslint: 8.12.0 + eslint: 8.13.0 dev: true - /eslint-plugin-prettier/4.0.0_f2c91d0f54113167d2bd9214a5ab5a36: + /eslint-plugin-prettier/4.0.0_1815ac95b7fb26c13c7d48a8eef62d0f: resolution: {integrity: sha512-98MqmCJ7vJodoQK359bqQWaxOE0CS8paAz/GgjaZLyex4TTk3g9HugoO89EqWCrFiOqn9EVvcoo7gZzONCWVwQ==} engines: {node: '>=6.0.0'} peerDependencies: @@ -2153,22 +1923,22 @@ packages: eslint-config-prettier: optional: true dependencies: - eslint: 8.12.0 - eslint-config-prettier: 8.5.0_eslint@8.12.0 + eslint: 8.13.0 + eslint-config-prettier: 8.5.0_eslint@8.13.0 prettier: 2.6.2 prettier-linter-helpers: 1.0.0 dev: true - /eslint-plugin-react/7.29.4_eslint@8.12.0: + /eslint-plugin-react/7.29.4_eslint@8.13.0: resolution: {integrity: sha512-CVCXajliVh509PcZYRFyu/BoUEz452+jtQJq2b3Bae4v3xBUWPLCmtmBM+ZinG4MzwmxJgJ2M5rMqhqLVn7MtQ==} engines: {node: '>=4'} peerDependencies: eslint: ^3 || ^4 || ^5 || ^6 || ^7 || ^8 dependencies: array-includes: 3.1.4 - array.prototype.flatmap: 1.2.5 + array.prototype.flatmap: 1.3.0 doctrine: 2.1.0 - eslint: 8.12.0 + eslint: 8.13.0 estraverse: 5.3.0 jsx-ast-utils: 3.2.2 minimatch: 3.1.2 @@ -2182,28 +1952,28 @@ packages: string.prototype.matchall: 4.0.7 dev: true - /eslint-plugin-svelte3/3.4.1_eslint@8.12.0+svelte@3.46.6: + /eslint-plugin-svelte3/3.4.1_eslint@8.13.0+svelte@3.47.0: resolution: {integrity: sha512-7p59WG8qV8L6wLdl4d/c3mdjkgVglQCdv5XOTk/iNPBKXuuV+Q0eFP5Wa6iJd/G2M1qR3BkLPEzaANOqKAZczw==} engines: {node: '>=10'} peerDependencies: eslint: '>=6.0.0' svelte: ^3.2.0 dependencies: - eslint: 8.12.0 - svelte: 3.46.6 + eslint: 8.13.0 + svelte: 3.47.0 dev: true - /eslint-plugin-vue/8.5.0_eslint@8.12.0: - resolution: {integrity: sha512-i1uHCTAKOoEj12RDvdtONWrGzjFm/djkzqfhmQ0d6M/W8KM81mhswd/z+iTZ0jCpdUedW3YRgcVfQ37/J4zoYQ==} + /eslint-plugin-vue/8.6.0_eslint@8.13.0: + resolution: {integrity: sha512-abXiF2J18n/7ZPy9foSlJyouKf54IqpKlNvNmzhM93N0zs3QUxZG/oBd3tVPOJTKg7SlhBUtPxugpqzNbgGpQQ==} engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} peerDependencies: eslint: ^6.2.0 || ^7.0.0 || ^8.0.0 dependencies: - eslint: 8.12.0 - eslint-utils: 3.0.0_eslint@8.12.0 + eslint: 8.13.0 + eslint-utils: 3.0.0_eslint@8.13.0 natural-compare: 1.4.0 - semver: 7.3.5 - vue-eslint-parser: 8.3.0_eslint@8.12.0 + semver: 7.3.7 + vue-eslint-parser: 8.3.0_eslint@8.13.0 transitivePeerDependencies: - supports-color dev: true @@ -2224,13 +1994,13 @@ packages: estraverse: 5.3.0 dev: true - /eslint-utils/3.0.0_eslint@8.12.0: + /eslint-utils/3.0.0_eslint@8.13.0: resolution: {integrity: sha512-uuQC43IGctw68pJA1RgbQS8/NP7rch6Cwd4j3ZBtgo4/8Flj4eGE7ZYSZRN3iq5pVUv6GPdW5Z1RFleo84uLDA==} engines: {node: ^10.0.0 || ^12.0.0 || >= 14.0.0} peerDependencies: eslint: '>=5' dependencies: - eslint: 8.12.0 + eslint: 8.13.0 eslint-visitor-keys: 2.1.0 dev: true @@ -2244,8 +2014,8 @@ packages: engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} dev: true - /eslint/8.12.0: - resolution: {integrity: sha512-it1oBL9alZg1S8UycLm5YDMAkIhtH6FtAzuZs6YvoGVldWjbS08BkAdb/ymP9LlAyq8koANu32U7Ib/w+UNh8Q==} + /eslint/8.13.0: + resolution: {integrity: sha512-D+Xei61eInqauAyTJ6C0q6x9mx7kTUC1KZ0m0LSEexR0V+e94K12LmWX076ZIsldwfQ2RONdaJe0re0TRGQbRQ==} engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} hasBin: true dependencies: @@ -2258,7 +2028,7 @@ packages: doctrine: 3.0.0 escape-string-regexp: 4.0.0 eslint-scope: 7.1.1 - eslint-utils: 3.0.0_eslint@8.12.0 + eslint-utils: 3.0.0_eslint@8.13.0 eslint-visitor-keys: 3.3.0 espree: 9.3.1 esquery: 1.4.0 @@ -2616,10 +2386,10 @@ packages: engines: {node: '>=8'} dev: true - /has-package-exports/1.2.3: - resolution: {integrity: sha512-lkLLwrNNaRsmwj+TylZJh1o3YlzLfgrl9fZKOAMj4MHjbvt7wy1J0icE6jD36dzkA0aQGoNuqY0hVN2uuPfPBA==} + /has-package-exports/1.3.0: + resolution: {integrity: sha512-e9OeXPQnmPhYoJ63lXC4wWe34TxEGZDZ3OQX9XRqp2VwsfLl3bQBy7VehLnd34g3ef8CmYlBLGqEMKXuz8YazQ==} dependencies: - '@ljharb/has-package-exports-patterns': 0.0.1 + '@ljharb/has-package-exports-patterns': 0.0.2 dev: true /has-symbols/1.0.3: @@ -2766,7 +2536,7 @@ packages: /htmlparser2/7.2.0: resolution: {integrity: sha512-H7MImA4MS6cw7nbyURtLPO1Tms7C5H602LRETv95z1MxO/7CP7rDVROehUYeYBUYEON94NXXDEPmZuq+hX4sog==} dependencies: - domelementtype: 2.2.0 + domelementtype: 2.3.0 domhandler: 4.3.1 domutils: 2.8.0 entities: 3.0.1 @@ -2858,10 +2628,6 @@ packages: has-tostringtag: 1.0.0 dev: true - /is-arrayish/0.2.1: - resolution: {integrity: sha1-d8mYQFJ6qOyxqLppe4BkWnqSap0=} - dev: true - /is-bigint/1.0.4: resolution: {integrity: sha512-zB9CruMamjym81i2JZ3UMn54PKGsQzsJeo6xvN3HJJ4CAsQNB6iRutp2To77OfCNuoxspsIhzaPoO1zyCEhFOg==} dependencies: @@ -3027,7 +2793,7 @@ packages: dependencies: available-typed-arrays: 1.0.5 call-bind: 1.0.2 - es-abstract: 1.19.2 + es-abstract: 1.19.4 foreach: 2.0.5 has-tostringtag: 1.0.0 dev: true @@ -3072,10 +2838,6 @@ packages: hasBin: true dev: true - /json-parse-even-better-errors/2.3.1: - resolution: {integrity: sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==} - dev: true - /json-schema-traverse/0.4.1: resolution: {integrity: sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==} dev: true @@ -3139,10 +2901,6 @@ packages: engines: {node: '>=10'} dev: true - /lines-and-columns/1.2.4: - resolution: {integrity: sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==} - dev: true - /lint-staged/12.3.7: resolution: {integrity: sha512-/S4D726e2GIsDVWIk1XGvheCaDm1SJRQp8efamZFWJxQMVEbOwSysp7xb49Oo73KYCdy97mIWinhlxcoNqIfIQ==} engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0} @@ -3837,8 +3595,8 @@ packages: tslib: 2.3.1 dev: true - /node-releases/2.0.2: - resolution: {integrity: sha512-XxYDdcQ6eKqp/YjI+tb2C5WM2LgjnZrfYg4vgQt49EK268b6gYCHsBLrK2qvJo4FmCtqmKezb0WZFK4fkrZNsg==} + /node-releases/2.0.3: + resolution: {integrity: sha512-maHFz6OLqYxz+VQyCAtA3PTX4UP/53pa05fyDNc9CwjvJ0yEh6+xBwKsgCxMNhS8taUKBFYxfuiaD9U/55iFaw==} dev: true /normalize-path/3.0.0: @@ -3870,8 +3628,8 @@ packages: engines: {node: '>=0.10.0'} dev: true - /object-hash/2.2.0: - resolution: {integrity: sha512-gScRMn0bS5fH+IuwyIFgnh9zBdo4DV+6GhygmWM9HyNJSgS0hScp1f5vjtm7oIIOiT9trXrShAkLFSc2IqKNgw==} + /object-hash/3.0.0: + resolution: {integrity: sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw==} engines: {node: '>= 6'} dev: true @@ -3908,7 +3666,7 @@ packages: dependencies: call-bind: 1.0.2 define-properties: 1.1.3 - es-abstract: 1.19.2 + es-abstract: 1.19.4 dev: true /object.fromentries/2.0.5: @@ -3917,14 +3675,14 @@ packages: dependencies: call-bind: 1.0.2 define-properties: 1.1.3 - es-abstract: 1.19.2 + es-abstract: 1.19.4 dev: true /object.hasown/1.1.0: resolution: {integrity: sha512-MhjYRfj3GBlhSkDHo6QmvgjRLXQ2zndabdf3nX0yTyZK9rPfxb6uRpAac8HXNLy1GpqWtZ81Qh4v3uOls2sRAg==} dependencies: define-properties: 1.1.3 - es-abstract: 1.19.2 + es-abstract: 1.19.4 dev: true /object.values/1.1.5: @@ -3933,7 +3691,7 @@ packages: dependencies: call-bind: 1.0.2 define-properties: 1.1.3 - es-abstract: 1.19.2 + es-abstract: 1.19.4 dev: true /once/1.4.0: @@ -4043,16 +3801,6 @@ packages: is-hexadecimal: 2.0.1 dev: true - /parse-json/5.2.0: - resolution: {integrity: sha512-ayCKvm/phCGxOkYRSCM82iDwct8/EonSEgCSxWxD7ve6jHggsFl4fZVQBPRNgQoKiuV/odhFrGzQXZwbifC8Rg==} - engines: {node: '>=8'} - dependencies: - '@babel/code-frame': 7.16.7 - error-ex: 1.3.2 - json-parse-even-better-errors: 2.3.1 - lines-and-columns: 1.2.4 - dev: true - /parse-latin/5.0.0: resolution: {integrity: sha512-Ht+4/+AUySMS5HKGAiQpBmkFsHSoGrj6Y83flLCa5OIBdtsVkO3UD4OtboJ0O0vZiOznH02x8qlwg9KLUVXuNg==} dependencies: @@ -4216,14 +3964,14 @@ packages: fast-diff: 1.2.0 dev: true - /prettier-plugin-svelte/2.6.0_prettier@2.6.2+svelte@3.46.6: - resolution: {integrity: sha512-NPSRf6Y5rufRlBleok/pqg4+1FyGsL0zYhkYP6hnueeL1J/uCm3OfOZPsLX4zqD9VAdcXfyEL2PYqGv8ZoOSfA==} + /prettier-plugin-svelte/2.7.0_prettier@2.6.2+svelte@3.47.0: + resolution: {integrity: sha512-fQhhZICprZot2IqEyoiUYLTRdumULGRvw0o4dzl5jt0jfzVWdGqeYW27QTWAeXhoupEZJULmNoH3ueJwUWFLIA==} peerDependencies: prettier: ^1.16.4 || ^2.0.0 svelte: ^3.2.0 dependencies: prettier: 2.6.2 - svelte: 3.46.6 + svelte: 3.47.0 dev: true /prettier/2.6.2: @@ -4551,8 +4299,8 @@ packages: hasBin: true dev: true - /semver/7.3.5: - resolution: {integrity: sha512-PoeGJYh8HK4BTO/a9Tf6ZG3veo/A7ZVsYrSA6J8ny9nb3B1VrpkuN+z9OE5wfE5p6H4LchYZsegiQgbJD94ZFQ==} + /semver/7.3.7: + resolution: {integrity: sha512-QlYTucUYOews+WeEujDoEGziz4K6c47V/Bd+LjSSYcA94p+DmINdf7ncaUinThfvZyu13lN9OY1XDxt8C0Tw0g==} engines: {node: '>=10'} hasBin: true dependencies: @@ -4724,7 +4472,7 @@ packages: dependencies: call-bind: 1.0.2 define-properties: 1.1.3 - es-abstract: 1.19.2 + es-abstract: 1.19.4 get-intrinsic: 1.1.1 has-symbols: 1.0.3 internal-slot: 1.0.3 @@ -4842,7 +4590,7 @@ packages: /supports-esm/1.0.0: resolution: {integrity: sha512-96Am8CDqUaC0I2+C/swJ0yEvM8ZnGn4unoers/LSdE4umhX7mELzqyLzx3HnZAluq5PXIsGMKqa7NkqaeHMPcg==} dependencies: - has-package-exports: 1.2.3 + has-package-exports: 1.3.0 dev: true /supports-preserve-symlinks-flag/1.0.0: @@ -4850,16 +4598,16 @@ packages: engines: {node: '>= 0.4'} dev: true - /svelte-hmr/0.14.11_svelte@3.46.6: + /svelte-hmr/0.14.11_svelte@3.47.0: resolution: {integrity: sha512-R9CVfX6DXxW1Kn45Jtmx+yUe+sPhrbYSUp7TkzbW0jI5fVPn6lsNG9NEs5dFg5qRhFNAoVdRw5qQDLALNKhwbQ==} engines: {node: ^12.20 || ^14.13.1 || >= 16} peerDependencies: svelte: '>=3.19.0' dependencies: - svelte: 3.46.6 + svelte: 3.47.0 dev: true - /svelte-preprocess/4.10.5_3ce0e22b85336b1a63f5104127fe70c5: + /svelte-preprocess/4.10.5_8f537df1deb1f807b69cd07414ab4868: resolution: {integrity: sha512-VKXPRScCzAZqeBZOGq4LLwtNrAu++mVn7XvQox3eFDV7Ciq0Lg70Q8QWjH9iXF7J+pMlXhPsSFwpCb2E+hoeyA==} engines: {node: '>= 9.11.2'} requiresBuild: true @@ -4908,48 +4656,45 @@ packages: postcss-load-config: 3.1.4_postcss@8.4.12 sorcery: 0.10.0 strip-indent: 3.0.0 - svelte: 3.46.6 + svelte: 3.47.0 typescript: 4.6.3 dev: true - /svelte/3.46.6: - resolution: {integrity: sha512-o9nNft/OzCz/9kJpmWa1S52GAM+huCjPIsNWydYmgei74ZWlOA9/hN9+Z12INdklghu31seEXZMRHhS1+8DETw==} + /svelte/3.47.0: + resolution: {integrity: sha512-4JaJp3HEoTCGARRWZQIZDUanhYv0iyoHikklVHVLH9xFE9db22g4TDv7CPeNA8HD1JgjXI1vlhR1JZvvhaTu2Q==} engines: {node: '>= 8'} dev: true - /svelte2tsx/0.5.6_svelte@3.46.6+typescript@4.6.3: - resolution: {integrity: sha512-B4WZUtoTdVD+F73H1RQEH3Hrv7m2/ahThmAUkjT5CTWRigQaJqYQpSjisCH1Pzfi9B37YikDnAi4u4uxwYM+iw==} + /svelte2tsx/0.5.8_svelte@3.47.0+typescript@4.6.3: + resolution: {integrity: sha512-z5Mfpmy/jkpFIiePAocgWxGRJg+Ka0zlxyvFlpP2X1BoQuXjFC6pnIR9CGebOTmi+W1JnSUAdxrCCj/sEMXZ8Q==} peerDependencies: svelte: ^3.24 typescript: ^4.1.2 dependencies: dedent-js: 1.0.1 pascal-case: 3.1.2 - svelte: 3.46.6 + svelte: 3.47.0 typescript: 4.6.3 dev: true - /tailwindcss/3.0.23_autoprefixer@10.4.4: - resolution: {integrity: sha512-+OZOV9ubyQ6oI2BXEhzw4HrqvgcARY38xv3zKcjnWtMIZstEsXdI9xftd1iB7+RbOnj2HOEzkA0OyB5BaSxPQA==} + /tailwindcss/3.0.24: + resolution: {integrity: sha512-H3uMmZNWzG6aqmg9q07ZIRNIawoiEcNFKDfL+YzOPuPsXuDXxJxB9icqzLgdzKNwjG3SAro2h9SYav8ewXNgig==} engines: {node: '>=12.13.0'} hasBin: true - peerDependencies: - autoprefixer: ^10.0.2 dependencies: arg: 5.0.1 - autoprefixer: 10.4.4_postcss@8.4.12 - chalk: 4.1.2 chokidar: 3.5.3 color-name: 1.1.4 - cosmiconfig: 7.0.1 detective: 5.2.0 didyoumean: 1.2.2 dlv: 1.1.3 fast-glob: 3.2.11 glob-parent: 6.0.2 is-glob: 4.0.3 + lilconfig: 2.0.5 normalize-path: 3.0.0 - object-hash: 2.2.0 + object-hash: 3.0.0 + picocolors: 1.0.0 postcss: 8.4.12 postcss-js: 4.0.0_postcss@8.4.12 postcss-load-config: 3.1.4_postcss@8.4.12 @@ -5015,7 +4760,7 @@ packages: engines: {node: '>=12'} hasBin: true dependencies: - esbuild: 0.14.32 + esbuild: 0.14.36 dev: true /tsutils/3.21.0_typescript@4.6.3: @@ -5246,7 +4991,7 @@ packages: stylus: optional: true dependencies: - esbuild: 0.14.32 + esbuild: 0.14.36 postcss: 8.4.12 resolve: 1.22.0 rollup: 2.70.1 @@ -5319,20 +5064,20 @@ packages: resolution: {integrity: sha512-EcswR2S8bpR7fD0YPeS7r2xXExrScVMxg4MedACaWHEtx9ftCF/qHG1xGkolzTPcEmjTavCQgbVzHUIdTMzFGA==} dev: true - /vue-eslint-parser/8.3.0_eslint@8.12.0: + /vue-eslint-parser/8.3.0_eslint@8.13.0: resolution: {integrity: sha512-dzHGG3+sYwSf6zFBa0Gi9ZDshD7+ad14DGOdTLjruRVgZXe2J+DcZ9iUhyR48z5g1PqRa20yt3Njna/veLJL/g==} engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} peerDependencies: eslint: '>=6.0.0' dependencies: debug: 4.3.4 - eslint: 8.12.0 + eslint: 8.13.0 eslint-scope: 7.1.1 eslint-visitor-keys: 3.3.0 espree: 9.3.1 esquery: 1.4.0 lodash: 4.17.21 - semver: 7.3.5 + semver: 7.3.7 transitivePeerDependencies: - supports-color dev: true @@ -5371,7 +5116,7 @@ packages: dependencies: available-typed-arrays: 1.0.5 call-bind: 1.0.2 - es-abstract: 1.19.2 + es-abstract: 1.19.4 foreach: 2.0.5 has-tostringtag: 1.0.0 is-typed-array: 1.1.8 diff --git a/scripts/generate_readme.js b/scripts/generate_readme.js deleted file mode 100644 index d48ed941..00000000 --- a/scripts/generate_readme.js +++ /dev/null @@ -1,7 +0,0 @@ -import generateREADME from './utils/generateREADME.js'; - -async function main() { - generateREADME(); -} - -main().catch(console.error); diff --git a/scripts/utils/generateREADME.js b/scripts/utils/generateREADME.js deleted file mode 100644 index cf8a6ede..00000000 --- a/scripts/utils/generateREADME.js +++ /dev/null @@ -1,7 +0,0 @@ -import fs from 'fs'; -import getDocContent from './getDocContent.js'; - -export default function generateIndexPage() { - const template = fs.readFileSync('scripts/templates/README.base.md', 'utf8'); - fs.writeFileSync('README.md', template.replace('', getDocContent()), 'utf-8'); -} diff --git a/src/components/FrameworkLabel.svelte b/src/components/FrameworkLabel.svelte new file mode 100644 index 00000000..eb73ed0d --- /dev/null +++ b/src/components/FrameworkLabel.svelte @@ -0,0 +1,20 @@ + + +{#if framework.img} + +{/if} +{framework.title} + + diff --git a/src/components/Section.astro b/src/components/Section.astro new file mode 100644 index 00000000..8a1a6144 --- /dev/null +++ b/src/components/Section.astro @@ -0,0 +1,82 @@ +--- +import Title from "../components/Title.svelte" +import FrameworkLabel from "../components/FrameworkLabel.svelte" +import fs from 'node:fs/promises'; +import kebabCase from 'lodash.kebabcase'; +import { Code, Markdown} from "astro/components" +import nodePath from "node:path" + +const { id } = Astro.props + +const sections = [] + +function dirNameToTitle(dirName) { + return capitalize(dirName.split('-').splice(1).join(' ')); +} + +function capitalize(string) { + return string.charAt(0).toUpperCase() + string.slice(1); +} + +const contentURL = new URL(`../../content/${id}`, import.meta.url); +const subSectionDirNames = await fs.readdir(contentURL) + +for(const dirName of subSectionDirNames){ + const path = `${contentURL.pathname}/${dirName}` + const title = dirNameToTitle(dirName) + + const frameworkDirs = await fs.readdir(path) + const frameworkSections = [] + for(const frameworkDir of frameworkDirs){ + const frameworkPath = `${path}/${frameworkDir}` + const files = [] + const fileNames = await fs.readdir(`${frameworkPath}`) + + for(const fileName of fileNames){ + const filePath = `${frameworkPath}/${fileName}` + files.push({ + path: filePath, + fileName: fileName, + ext: nodePath.parse(filePath).ext.split(".").pop(), + content: (await fs.readFile(filePath, "utf-8")) + }) + } + + frameworkSections.push({ + dirName: frameworkDir, + path: frameworkPath, + files + }) + } + + + sections.push({ + id: kebabCase(title), + path, + dirName, + title, + frameworkSections + }) +} +--- + + +{sections.map((section) => + ( + <> + <Title as="h2" content={section.title}/> + {section.frameworkSections.map((frameworkSection) => ( + <> + <h3><FrameworkLabel id={frameworkSection.dirName} /></h3> + + {frameworkSection.files.map((file) => ( + file.ext === 'md' + ? <Markdown set:html={file.content} /> + : + <Code code={file.content} lang={file.ext} /> + ))} + </> + ))} + </> + ) +)} \ No newline at end of file diff --git a/src/components/Title.svelte b/src/components/Title.svelte new file mode 100644 index 00000000..3d0250d7 --- /dev/null +++ b/src/components/Title.svelte @@ -0,0 +1,9 @@ +<script> + import kebabCase from 'lodash.kebabcase'; + + export let as = 'h1'; + export let content = ""; + $: id = kebabCase(content) +</script> + +<svelte:element this={as} {id}>{content}<a class="header-anchor" href={'#' + id} aria-hidden="true" tabindex="-1">#</a></svelte:element> diff --git a/src/frameworks.js b/src/frameworks.js new file mode 100644 index 00000000..34e7f467 --- /dev/null +++ b/src/frameworks.js @@ -0,0 +1,79 @@ +export default [ + { + id: 'svelte', + title: 'Svelte', + ext: 'svelte', + img: "https://raw.githubusercontent.com/matschik/component-party/main/public/framework/svelte.svg", + eslint: { + files: ['*.svelte'], + processor: 'svelte3/svelte3', + plugins: ['svelte3'], + }, + }, + { + id: 'react', + title: 'React', + ext: 'jsx', + img: "https://raw.githubusercontent.com/matschik/component-party/main/public/framework/react.svg", + eslint: { + files: ['**/react/*.jsx', '**/react/*.tsx'], + extends: ['eslint:recommended', 'plugin:react/recommended', 'plugin:react/jsx-runtime'], + settings: { + react: { + version: 'detect', + }, + }, + }, + }, + { + id: 'vue3', + title: 'Vue 3', + ext: 'vue', + img: "https://raw.githubusercontent.com/matschik/component-party/main/public/framework/vue.svg", + eslint: { + files: ['*.vue'], + env: { + 'vue/setup-compiler-macros': true, + }, + extends: ['eslint:recommended', 'plugin:vue/vue3-recommended'], + }, + }, + { + id: 'angular', + title: 'Angular', + ext: 'ts', + img: "https://raw.githubusercontent.com/matschik/component-party/main/public/framework/angular.svg", + eslint: [ + { + files: ['**/angular/*.ts'], + parserOptions: { + project: ['tsconfig.app.json', 'tsconfig.spec.json'], + createDefaultProgram: true, + }, + extends: [ + 'plugin:@angular-eslint/recommended', + // This is required if you use inline templates in Components + 'plugin:@angular-eslint/template/process-inline-templates', + ], + rules: { + /** + * Any TypeScript source code (NOT TEMPLATE) related rules you wish to use/reconfigure over and above the + * recommended set provided by the @angular-eslint project would go here. + */ + '@angular-eslint/directive-selector': ['error', { type: 'attribute', prefix: 'app', style: 'camelCase' }], + '@angular-eslint/component-selector': ['error', { type: 'element', prefix: 'app', style: 'kebab-case' }], + }, + }, + { + files: ['**/angular/*.html'], + extends: ['plugin:@angular-eslint/template/recommended'], + rules: { + /** + * Any template/HTML related rules you wish to use/reconfigure over and above the + * recommended set provided by the @angular-eslint project would go here. + */ + }, + }, + ], + }, +]; \ No newline at end of file diff --git a/src/pages/index.astro b/src/pages/index.astro new file mode 100644 index 00000000..17342169 --- /dev/null +++ b/src/pages/index.astro @@ -0,0 +1,13 @@ +--- +import Layout from "../layouts/BaseLayout.svelte" +import fs from 'node:fs/promises'; +import Section from "../components/Section.astro" +const contentURL = new URL(`../../content`, import.meta.url); +const sectionNames = await fs.readdir(contentURL) +--- + +<Layout> + {sectionNames.map((sectionName) => + <Section id={sectionName} /> + )} +</Layout> \ No newline at end of file From d42db1d92af3ee83b65a6a1dc02e16592cc417b6 Mon Sep 17 00:00:00 2001 From: Mathieu Schimmerling <mathieu.schimmerling@protonmail.com> Date: Wed, 13 Apr 2022 01:36:28 +0200 Subject: [PATCH 02/11] fix root path --- package.json | 1 + pnpm-lock.yaml | 48 ++++++++++++++++++++++++++++++++++++ src/components/Section.astro | 9 +++---- src/pages/index.astro | 7 ++++-- 4 files changed, 58 insertions(+), 7 deletions(-) diff --git a/package.json b/package.json index 821ffa88..ec04ebe9 100644 --- a/package.json +++ b/package.json @@ -48,6 +48,7 @@ "husky": "^7.0.4", "lint-staged": "^12.3.7", "lodash.kebabcase": "^4.1.1", + "pkg-dir": "^6.0.1", "postcss": "^8.4.12", "prettier": "^2.6.2", "prettier-plugin-svelte": "^2.7.0", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index c152bef4..adde2231 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -20,6 +20,7 @@ specifiers: husky: ^7.0.4 lint-staged: ^12.3.7 lodash.kebabcase: ^4.1.1 + pkg-dir: ^6.0.1 postcss: ^8.4.12 prettier: ^2.6.2 prettier-plugin-svelte: ^2.7.0 @@ -50,6 +51,7 @@ devDependencies: husky: 7.0.4 lint-staged: 12.3.7 lodash.kebabcase: 4.1.1 + pkg-dir: 6.0.1 postcss: 8.4.12 prettier: 2.6.2 prettier-plugin-svelte: 2.7.0_prettier@2.6.2+svelte@3.47.0 @@ -2232,6 +2234,14 @@ packages: path-exists: 4.0.0 dev: true + /find-up/6.3.0: + resolution: {integrity: sha512-v2ZsoEuVHYy8ZIlYqwPe/39Cy+cFDzp4dXPaxNvkEuouymu+2Jbz0PxpKarJHYJTmv2HWT3O382qY8l4jMWthw==} + engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0} + dependencies: + locate-path: 7.1.0 + path-exists: 5.0.0 + dev: true + /find-yarn-workspace-root2/1.2.16: resolution: {integrity: sha512-hr6hb1w8ePMpPVUK39S4RlwJzi+xPLuVuG8XlwXU3KD5Yn3qgBWVfy3AzNlDhWvE1EORCE65/Qm26rFQt3VLVA==} dependencies: @@ -2967,6 +2977,13 @@ packages: p-locate: 5.0.0 dev: true + /locate-path/7.1.0: + resolution: {integrity: sha512-HNx5uOnYeK4SxEoid5qnhRfprlJeGMzFRKPLCf/15N3/B4AiofNwC/yq7VBKdVk9dx7m+PiYCJOGg55JYTAqoQ==} + engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0} + dependencies: + p-locate: 6.0.0 + dev: true + /lodash.castarray/4.4.0: resolution: {integrity: sha1-wCUTUV4wna3dTCTGDP3c9ZdtkRU=} dev: true @@ -3755,6 +3772,13 @@ packages: yocto-queue: 0.1.0 dev: true + /p-limit/4.0.0: + resolution: {integrity: sha512-5b0R4txpzjPWVw/cXXUResoD4hb6U/x9BH08L7nw+GN1sezDzPdxeRvpc9c433fZhBan/wusjbCsqwqm4EIBIQ==} + engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0} + dependencies: + yocto-queue: 1.0.0 + dev: true + /p-locate/4.1.0: resolution: {integrity: sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==} engines: {node: '>=8'} @@ -3769,6 +3793,13 @@ packages: p-limit: 3.1.0 dev: true + /p-locate/6.0.0: + resolution: {integrity: sha512-wPrq66Llhl7/4AGC6I+cqxT07LhXvWL08LNXz1fENOw0Ap4sRZZ/gZpTTJ5jpurzzzfS2W/Ge9BY3LgLjCShcw==} + engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0} + dependencies: + p-limit: 4.0.0 + dev: true + /p-map/4.0.0: resolution: {integrity: sha512-/bjOqmgETBYB5BoEeGVea8dmvHb2m9GLy1E9W43yeyfP6QQCZGFNa+XRceJEuDB6zqr+gKpIAmlLebMpykw/MQ==} engines: {node: '>=10'} @@ -3829,6 +3860,11 @@ packages: engines: {node: '>=8'} dev: true + /path-exists/5.0.0: + resolution: {integrity: sha512-RjhtfwJOxzcFmNOi6ltcbcu4Iu+FL3zEj83dk4kAS+fVpTxXLO1b38RvJgT/0QwvV/L3aY9TAnyv0EOqW4GoMQ==} + engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0} + dev: true + /path-is-absolute/1.0.1: resolution: {integrity: sha1-F0uSaHNVNP+8es5r9TpanhtcX18=} engines: {node: '>=0.10.0'} @@ -3884,6 +3920,13 @@ packages: find-up: 4.1.0 dev: true + /pkg-dir/6.0.1: + resolution: {integrity: sha512-C9R+PTCKGA32HG0n5I4JMYkdLL58ZpayVuncQHQrGeKa8o26A4o2x0u6BKekHG+Au0jv5ZW7Xfq1Cj6lm9Ag4w==} + engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0} + dependencies: + find-up: 6.3.0 + dev: true + /postcss-js/4.0.0_postcss@8.4.12: resolution: {integrity: sha512-77QESFBwgX4irogGVPgQ5s07vLvFqWr228qZY+w6lW599cRlK/HmnlivnnVUxkjHnCu4J16PDMHcH+e+2HbvTQ==} engines: {node: ^12 || ^14 || >= 16} @@ -5197,6 +5240,11 @@ packages: engines: {node: '>=10'} dev: true + /yocto-queue/1.0.0: + resolution: {integrity: sha512-9bnSc/HEW2uRy67wc+T8UwauLuPJVn28jb+GtJY16iiKWyvmYJRXVT4UamsAEGQfPohgr2q4Tq0sQbQlxTfi1g==} + engines: {node: '>=12.20'} + dev: true + /zod/3.14.4: resolution: {integrity: sha512-U9BFLb2GO34Sfo9IUYp0w3wJLlmcyGoMd75qU9yf+DrdGA4kEx6e+l9KOkAlyUO0PSQzZCa3TR4qVlcmwqSDuw==} dev: true diff --git a/src/components/Section.astro b/src/components/Section.astro index 8a1a6144..9705bad0 100644 --- a/src/components/Section.astro +++ b/src/components/Section.astro @@ -6,7 +6,7 @@ import kebabCase from 'lodash.kebabcase'; import { Code, Markdown} from "astro/components" import nodePath from "node:path" -const { id } = Astro.props +const { sectionPath } = Astro.props const sections = [] @@ -18,11 +18,10 @@ function capitalize(string) { return string.charAt(0).toUpperCase() + string.slice(1); } -const contentURL = new URL(`../../content/${id}`, import.meta.url); -const subSectionDirNames = await fs.readdir(contentURL) +const subSectionDirNames = await fs.readdir(sectionPath) for(const dirName of subSectionDirNames){ - const path = `${contentURL.pathname}/${dirName}` + const path = `${sectionPath}/${dirName}` const title = dirNameToTitle(dirName) const frameworkDirs = await fs.readdir(path) @@ -60,7 +59,7 @@ for(const dirName of subSectionDirNames){ } --- -<Title as="h1" content={dirNameToTitle(id)} /> +<Title as="h1" content={dirNameToTitle(sectionPath.split("/").pop())} /> {sections.map((section) => ( <> diff --git a/src/pages/index.astro b/src/pages/index.astro index 17342169..6d3360b9 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -2,12 +2,15 @@ import Layout from "../layouts/BaseLayout.svelte" import fs from 'node:fs/promises'; import Section from "../components/Section.astro" -const contentURL = new URL(`../../content`, import.meta.url); +import {packageDirectory} from 'pkg-dir'; + +const rootDir = await packageDirectory() +const contentURL = `${rootDir}/content` const sectionNames = await fs.readdir(contentURL) --- <Layout> {sectionNames.map((sectionName) => - <Section id={sectionName} /> + <Section sectionPath={`${contentURL}/${sectionName}`} /> )} </Layout> \ No newline at end of file From 166a80e2d6b1310354b998a66991bdaea9779e7f Mon Sep 17 00:00:00 2001 From: Mathieu Schimmerling <mathieu.schimmerling@protonmail.com> Date: Wed, 13 Apr 2022 01:43:37 +0200 Subject: [PATCH 03/11] remove build content script --- .husky/pre-commit | 2 +- package.json | 3 +-- 2 files changed, 2 insertions(+), 3 deletions(-) diff --git a/.husky/pre-commit b/.husky/pre-commit index 0e95b6ca..c627fcd5 100755 --- a/.husky/pre-commit +++ b/.husky/pre-commit @@ -1,4 +1,4 @@ #!/bin/sh . "$(dirname "$0")/_/husky.sh" -pnpm run build:content && git add README.md src/tree.js src/pages/index.md && pnpx lint-staged +pnpx lint-staged diff --git a/package.json b/package.json index ec04ebe9..50182913 100644 --- a/package.json +++ b/package.json @@ -7,9 +7,8 @@ "packageManager": "pnpm@6.31.0", "scripts": { "dev": "astro dev", - "build": "pnpm run build:content && astro build", + "build": "astro build", "preview": "astro preview", - "build:content": "node scripts/generate_index_page.js", "lint": "eslint .", "lint:fix": "pnpm run lint -- --fix", "prettier": "prettier --ignore-path .gitignore --plugin-search-dir=. . --check", From 78d602a9c2fe092589650aaf5804c10ca790247f Mon Sep 17 00:00:00 2001 From: Mathieu Schimmerling <mathieu.schimmerling@protonmail.com> Date: Wed, 13 Apr 2022 01:46:31 +0200 Subject: [PATCH 04/11] remove index.md --- src/pages/index.md | 1109 -------------------------------------------- 1 file changed, 1109 deletions(-) delete mode 100644 src/pages/index.md diff --git a/src/pages/index.md b/src/pages/index.md deleted file mode 100644 index 9d425436..00000000 --- a/src/pages/index.md +++ /dev/null @@ -1,1109 +0,0 @@ ---- -layout: ../layouts/BaseLayout.svelte ---- - -# Reactivity<a class="header-anchor" href="#reactivity" aria-hidden="true" tabindex="-1">#</a> -## Declare state<a class="header-anchor" href="#declare-state" aria-hidden="true" tabindex="-1">#</a> -### <img src="https://raw.githubusercontent.com/matschik/component-party/main/public/framework/svelte.svg" alt="svelte" width="20" height="20" class="framework-logo" /> Svelte -```svelte -<script> - let name = 'John'; - console.log(name); // John -</script> - -``` - -### <img src="https://raw.githubusercontent.com/matschik/component-party/main/public/framework/react.svg" alt="react" width="20" height="20" class="framework-logo" /> React -```jsx -import { useState } from 'react'; - -export default function Name() { - const [name] = useState('John'); - console.log(name); // John -} - -``` - -### <img src="https://raw.githubusercontent.com/matschik/component-party/main/public/framework/vue.svg" alt="vue3" width="20" height="20" class="framework-logo" /> Vue 3 -```vue -<script setup> -import { ref } from 'vue'; -const name = ref('John'); -console.log(name.value); // John -</script> - -``` - -### <img src="https://raw.githubusercontent.com/matschik/component-party/main/public/framework/angular.svg" alt="angular" width="20" height="20" class="framework-logo" /> Angular -```ts -import { Component, Input } from '@angular/core'; - -@Component({ - selector: 'app-name', -}) -export class NameComponent { - @Input() name: string = 'John'; - - constructor() { - console.log(this.name); - } -} - -``` - -## Update state<a class="header-anchor" href="#update-state" aria-hidden="true" tabindex="-1">#</a> -### <img src="https://raw.githubusercontent.com/matschik/component-party/main/public/framework/svelte.svg" alt="svelte" width="20" height="20" class="framework-logo" /> Svelte -```svelte -<script> - let name = 'John'; - name = 'Jane'; - console.log(name); // Jane -</script> - -``` - -### <img src="https://raw.githubusercontent.com/matschik/component-party/main/public/framework/react.svg" alt="react" width="20" height="20" class="framework-logo" /> React -```jsx -import { useState } from 'react'; - -export default function Name() { - const [name, setName] = useState('John'); - setName('Jane'); - - console.log(name); // Jane -} - -``` - -### <img src="https://raw.githubusercontent.com/matschik/component-party/main/public/framework/vue.svg" alt="vue3" width="20" height="20" class="framework-logo" /> Vue 3 -```vue -<script setup> -import { ref } from 'vue'; -const name = ref('John'); -name.value = 'Jane'; -console.log(name.value); // Jane -</script> - -``` - -### <img src="https://raw.githubusercontent.com/matschik/component-party/main/public/framework/angular.svg" alt="angular" width="20" height="20" class="framework-logo" /> Angular -```ts -import { Component, Input } from '@angular/core'; - -@Component({ - selector: 'app-name', -}) -export class NameComponent { - @Input() name: string = 'John'; - - constructor() { - this.name = 'Jane'; - console.log(this.name); - } -} - -``` - -## Computed state<a class="header-anchor" href="#computed-state" aria-hidden="true" tabindex="-1">#</a> -### <img src="https://raw.githubusercontent.com/matschik/component-party/main/public/framework/svelte.svg" alt="svelte" width="20" height="20" class="framework-logo" /> Svelte -```svelte -<script> - let count = 10; - $: doubleCount = count * 2; - console.log(doubleCount); // 20 -</script> - -``` - -### <img src="https://raw.githubusercontent.com/matschik/component-party/main/public/framework/react.svg" alt="react" width="20" height="20" class="framework-logo" /> React -```jsx -import { useState, useMemo } from 'react'; - -export default function DoubleCount() { - const [count] = useState(10); - const doubleCount = useMemo(() => count * 2, [count]); - console.log(doubleCount); // 20 - return <div />; -} - -``` - -### <img src="https://raw.githubusercontent.com/matschik/component-party/main/public/framework/vue.svg" alt="vue3" width="20" height="20" class="framework-logo" /> Vue 3 -```vue -<script setup> -import { ref, computed } from 'vue'; -const count = ref(10); -const doubleCount = computed(() => count.value * 2); -console.log(doubleCount.value); // 20 -</script> - -<template> - <div /> -</template> - -``` - -### <img src="https://raw.githubusercontent.com/matschik/component-party/main/public/framework/angular.svg" alt="angular" width="20" height="20" class="framework-logo" /> Angular -```ts -import { Component, OnInit, Input, Pipe, PipeTransform, ChangeDetectionStrategy } from '@angular/core'; - -@Pipe({ - name: 'double', -}) -export class DoubleCountPipe implements PipeTransform { - transform(value: number): number { - return value * 2; - } -} - -@Component({ - selector: 'app-doublecount', - template: ' <div></div>', - changeDetection: ChangeDetectionStrategy.OnPush, -}) -export class DoublecountComponent implements OnInit { - @Input() count: number = 10; - - constructor() {} -} - -``` - -# Templating<a class="header-anchor" href="#templating" aria-hidden="true" tabindex="-1">#</a> -## Minimal template<a class="header-anchor" href="#minimal-template" aria-hidden="true" tabindex="-1">#</a> -### <img src="https://raw.githubusercontent.com/matschik/component-party/main/public/framework/svelte.svg" alt="svelte" width="20" height="20" class="framework-logo" /> Svelte -```svelte -<h1>Hello world</h1> - -``` - -### <img src="https://raw.githubusercontent.com/matschik/component-party/main/public/framework/react.svg" alt="react" width="20" height="20" class="framework-logo" /> React -```jsx -export default function HelloWorld() { - return <h1>Hello world</h1>; -} - -``` - -### <img src="https://raw.githubusercontent.com/matschik/component-party/main/public/framework/vue.svg" alt="vue3" width="20" height="20" class="framework-logo" /> Vue 3 -```vue -<template> - <h1>Hello world</h1> -</template> - -``` - -### <img src="https://raw.githubusercontent.com/matschik/component-party/main/public/framework/angular.svg" alt="angular" width="20" height="20" class="framework-logo" /> Angular -<pre>Oops, missing snippet ! <a href="https://github.com/matschik/component-party/tree/main/content/2-templating/1-minimal-template">You can help us by contributing on Github.</a></pre> -## Styling<a class="header-anchor" href="#styling" aria-hidden="true" tabindex="-1">#</a> -### <img src="https://raw.githubusercontent.com/matschik/component-party/main/public/framework/svelte.svg" alt="svelte" width="20" height="20" class="framework-logo" /> Svelte -```svelte -<h1 class="title">Hello world</h1> -<button style="font-size: 10rem;">I am a button</button> - -<style> - .title { - color: red; - } -</style> - -``` - -### <img src="https://raw.githubusercontent.com/matschik/component-party/main/public/framework/react.svg" alt="react" width="20" height="20" class="framework-logo" /> React -```jsx -export default function HelloWorld() { - // how do you declare title class ?? - - return ( - <> - <h1 className="title">Hello world</h1> - <button style={{ 'font-size': '10rem' }}>I am a button</button> - </> - ); -} - -``` - -### <img src="https://raw.githubusercontent.com/matschik/component-party/main/public/framework/vue.svg" alt="vue3" width="20" height="20" class="framework-logo" /> Vue 3 -```vue -<template> - <h1 class="title"> - Hello world - </h1> - <button style="font-size: 10rem"> - I am a button - </button> -</template> - -<style scoped> -.title { - color: red; -} -</style> - -``` - -### <img src="https://raw.githubusercontent.com/matschik/component-party/main/public/framework/angular.svg" alt="angular" width="20" height="20" class="framework-logo" /> Angular -<pre>Oops, missing snippet ! <a href="https://github.com/matschik/component-party/tree/main/content/2-templating/2-styling">You can help us by contributing on Github.</a></pre> -## Loop<a class="header-anchor" href="#loop" aria-hidden="true" tabindex="-1">#</a> -### <img src="https://raw.githubusercontent.com/matschik/component-party/main/public/framework/svelte.svg" alt="svelte" width="20" height="20" class="framework-logo" /> Svelte -```svelte -<script> - const colors = ['red', 'green', 'blue']; -</script> - -<ul> - {#each colors as color} - <li>{color}</li> - {/each} -</ul> - -``` - -### <img src="https://raw.githubusercontent.com/matschik/component-party/main/public/framework/react.svg" alt="react" width="20" height="20" class="framework-logo" /> React -```jsx -export default function Colors() { - const colors = ['red', 'green', 'blue']; - return ( - <ul> - {colors.map((color) => ( - <li key={color}>{color}</li> - ))} - </ul> - ); -} - -``` - -### <img src="https://raw.githubusercontent.com/matschik/component-party/main/public/framework/vue.svg" alt="vue3" width="20" height="20" class="framework-logo" /> Vue 3 -```vue -<script setup> -const colors = ['red', 'green', 'blue']; -</script> - -<template> - <ul> - <li - v-for="color in colors" - :key="color" - > - {{ color }} - </li> - </ul> -</template> - -``` - -### <img src="https://raw.githubusercontent.com/matschik/component-party/main/public/framework/angular.svg" alt="angular" width="20" height="20" class="framework-logo" /> Angular -<pre>Oops, missing snippet ! <a href="https://github.com/matschik/component-party/tree/main/content/2-templating/3-loop">You can help us by contributing on Github.</a></pre> -## Event click<a class="header-anchor" href="#event-click" aria-hidden="true" tabindex="-1">#</a> -### <img src="https://raw.githubusercontent.com/matschik/component-party/main/public/framework/svelte.svg" alt="svelte" width="20" height="20" class="framework-logo" /> Svelte -```svelte -<script> - let count = 0; - - function incrementCount() { - count++; - } -</script> - -<p>Counter: {count}</p> -<button on:click={incrementCount}>+1</button> - -``` - -### <img src="https://raw.githubusercontent.com/matschik/component-party/main/public/framework/react.svg" alt="react" width="20" height="20" class="framework-logo" /> React -```jsx -import { useState } from 'react'; - -export default function Name() { - const [count, setCount] = useState(0); - - function incrementCount() { - setCount(count + 1); - } - - return ( - <> - <p>Counter: {count}</p> - <button onClick={incrementCount}>+1</button> - </> - ); -} - -``` - -### <img src="https://raw.githubusercontent.com/matschik/component-party/main/public/framework/vue.svg" alt="vue3" width="20" height="20" class="framework-logo" /> Vue 3 -```vue -<script setup> -import { ref } from 'vue'; -const count = ref(0); - -function incrementCount() { - count.value++; -} -</script> - -<template> - <p>Counter: {{ count }}</p> - <button @click="incrementCount"> - +1 - </button> -</template> - -``` - -### <img src="https://raw.githubusercontent.com/matschik/component-party/main/public/framework/angular.svg" alt="angular" width="20" height="20" class="framework-logo" /> Angular -<pre>Oops, missing snippet ! <a href="https://github.com/matschik/component-party/tree/main/content/2-templating/4-event-click">You can help us by contributing on Github.</a></pre> -## Dom ref<a class="header-anchor" href="#dom-ref" aria-hidden="true" tabindex="-1">#</a> -### <img src="https://raw.githubusercontent.com/matschik/component-party/main/public/framework/svelte.svg" alt="svelte" width="20" height="20" class="framework-logo" /> Svelte -```svelte -<script> - import { onMount } from 'svelte'; - - let inputElement; - - onMount(() => { - inputElement.focus(); - }); -</script> - -<input bind:this={inputElement} /> - -``` - -### <img src="https://raw.githubusercontent.com/matschik/component-party/main/public/framework/react.svg" alt="react" width="20" height="20" class="framework-logo" /> React -```jsx -import { useEffect, useRef } from 'react'; - -export default function InputFocused() { - const inputElement = useRef(null); - - useEffect(() => inputElement.current.focus()); - - return <input type="text" ref={inputElement} />; -} - -``` - -### <img src="https://raw.githubusercontent.com/matschik/component-party/main/public/framework/vue.svg" alt="vue3" width="20" height="20" class="framework-logo" /> Vue 3 -```vue -<script setup> -import { ref, onMounted } from 'vue'; - -const inputElement = ref(); - -onMounted(() => { - inputElement.value.focus(); -}); -</script> - -<template> - <input ref="inputElement"> -</template> - -``` - -### <img src="https://raw.githubusercontent.com/matschik/component-party/main/public/framework/angular.svg" alt="angular" width="20" height="20" class="framework-logo" /> Angular -<pre>Oops, missing snippet ! <a href="https://github.com/matschik/component-party/tree/main/content/2-templating/5-dom-ref">You can help us by contributing on Github.</a></pre> -## Conditional<a class="header-anchor" href="#conditional" aria-hidden="true" tabindex="-1">#</a> -### <img src="https://raw.githubusercontent.com/matschik/component-party/main/public/framework/svelte.svg" alt="svelte" width="20" height="20" class="framework-logo" /> Svelte -```svelte -<script> - const TRAFFIC_LIGHTS = ['red', 'orange', 'green']; - let lightIndex = 0; - - $: light = TRAFFIC_LIGHTS[lightIndex]; - - function nextLight() { - if (lightIndex + 1 > TRAFFIC_LIGHTS.length - 1) { - lightIndex = 0; - } else { - lightIndex++; - } - } -</script> - -<button on:click={nextLight}>Next light</button> -<p>Light is: {light}</p> -<p> - You must - {#if light === 'red'} - STOP - {:else if light === 'orange'} - SLOW DOWN - {:else if light === 'green'} - GO - {/if} -</p> - -``` - -### <img src="https://raw.githubusercontent.com/matschik/component-party/main/public/framework/react.svg" alt="react" width="20" height="20" class="framework-logo" /> React -```jsx -import { useState, useMemo } from 'react'; - -const TRAFFIC_LIGHTS = ['red', 'orange', 'green']; - -export default function TrafficLight() { - const [lightIndex, setLightIndex] = useState(0); - - const light = useMemo(() => TRAFFIC_LIGHTS[lightIndex], [lightIndex]); - - function nextLight() { - if (lightIndex + 1 > TRAFFIC_LIGHTS.length - 1) { - setLightIndex(0); - } else { - setLightIndex(lightIndex + 1); - } - } - - return ( - <> - <button onClick={nextLight}>Next light</button> - <p>Light is: {light}</p> - <p> - You must - {light === 'red' && <span>STOP</span>} - {light === 'orange' && <span>SLOW DOWN</span>} - {light === 'green' && <span>GO</span>} - </p> - </> - ); -} - -``` - -### <img src="https://raw.githubusercontent.com/matschik/component-party/main/public/framework/vue.svg" alt="vue3" width="20" height="20" class="framework-logo" /> Vue 3 -```vue -<script setup> -import { ref, computed } from 'vue'; -const TRAFFIC_LIGHTS = ['red', 'orange', 'green']; -const lightIndex = ref(0); - -const light = computed(() => TRAFFIC_LIGHTS[lightIndex]); - -function nextLight() { - if (lightIndex.value + 1 > TRAFFIC_LIGHTS.length - 1) { - lightIndex.value = 0; - } else { - lightIndex.value++; - } -} -</script> - -<template> - <button @click="nextLight"> - Next light - </button> - <p>Light is: {{ light }}</p> - <p> - You must - <span v-if="light === 'red'">STOP</span> - <span v-else-if="light === 'orange'">SLOW DOWN</span> - <span v-else-if="light === 'green'">GO</span> - </p> -</template> - -``` - -### <img src="https://raw.githubusercontent.com/matschik/component-party/main/public/framework/angular.svg" alt="angular" width="20" height="20" class="framework-logo" /> Angular -<pre>Oops, missing snippet ! <a href="https://github.com/matschik/component-party/tree/main/content/2-templating/6-conditional">You can help us by contributing on Github.</a></pre> -# Lifecycle<a class="header-anchor" href="#lifecycle" aria-hidden="true" tabindex="-1">#</a> -## On mount<a class="header-anchor" href="#on-mount" aria-hidden="true" tabindex="-1">#</a> -### <img src="https://raw.githubusercontent.com/matschik/component-party/main/public/framework/svelte.svg" alt="svelte" width="20" height="20" class="framework-logo" /> Svelte -```svelte -<script> - import { onMount } from 'svelte'; - let pageTitle = ''; - onMount(() => { - pageTitle = document.title; - }); -</script> - -<p>Page title is: {pageTitle}</p> - -``` - -### <img src="https://raw.githubusercontent.com/matschik/component-party/main/public/framework/react.svg" alt="react" width="20" height="20" class="framework-logo" /> React -```jsx -import { useState, useEffect } from 'react'; - -export default function PageTitle() { - const [pageTitle, setPageTitle] = useState(''); - - useEffect(() => { - setPageTitle(document.title); - }); - - return <p>Page title: {pageTitle}</p>; -} - -``` - -### <img src="https://raw.githubusercontent.com/matschik/component-party/main/public/framework/vue.svg" alt="vue3" width="20" height="20" class="framework-logo" /> Vue 3 -```vue -<script setup> -import { ref, onMounted } from 'vue'; -const pageTitle = ref(''); -onMounted(() => { - pageTitle.value = document.title; -}); -</script> - -<template> - <p>Page title: {{ pageTitle }}</p> -</template> - -``` - -### <img src="https://raw.githubusercontent.com/matschik/component-party/main/public/framework/angular.svg" alt="angular" width="20" height="20" class="framework-logo" /> Angular -<pre>Oops, missing snippet ! <a href="https://github.com/matschik/component-party/tree/main/content/3-lifecycle/1-on-mount">You can help us by contributing on Github.</a></pre> -## On unmount<a class="header-anchor" href="#on-unmount" aria-hidden="true" tabindex="-1">#</a> -### <img src="https://raw.githubusercontent.com/matschik/component-party/main/public/framework/svelte.svg" alt="svelte" width="20" height="20" class="framework-logo" /> Svelte -```svelte -<script> - import { onDestroy } from 'svelte'; - - let time = new Date().toLocaleTimeString(); - - const timer = setInterval(() => { - time = new Date().toLocaleTimeString(); - }, 1000); - - onDestroy(() => { - clearInterval(timer); - }); -</script> - -<p>Current time: {time}</p> - -``` - -### <img src="https://raw.githubusercontent.com/matschik/component-party/main/public/framework/react.svg" alt="react" width="20" height="20" class="framework-logo" /> React -```jsx -import { useState, useEffect } from 'react'; - -export default function Time() { - const [time, setTime] = useState(new Date().toLocaleTimeString()); - - const timer = setInterval(() => { - setTime(new Date().toLocaleTimeString()); - }, 1000); - - useEffect(() => { - return () => { - clearInterval(timer); - }; - }); - - return <p>Current time: {time}</p>; -} - -``` - -### <img src="https://raw.githubusercontent.com/matschik/component-party/main/public/framework/vue.svg" alt="vue3" width="20" height="20" class="framework-logo" /> Vue 3 -```vue -<script setup> -import { ref, onUnmounted } from 'vue'; - -const time = ref(new Date().toLocaleTimeString()); - -const timer = setInterval(() => { - time.value = new Date().toLocaleTimeString(); -}, 1000); - -onUnmounted(() => { - clearInterval(timer); -}); -</script> - -<p>Current time: {time}</p> - -``` - -### <img src="https://raw.githubusercontent.com/matschik/component-party/main/public/framework/angular.svg" alt="angular" width="20" height="20" class="framework-logo" /> Angular -<pre>Oops, missing snippet ! <a href="https://github.com/matschik/component-party/tree/main/content/3-lifecycle/2-on-unmount">You can help us by contributing on Github.</a></pre> -# Component composition<a class="header-anchor" href="#component-composition" aria-hidden="true" tabindex="-1">#</a> -## Props<a class="header-anchor" href="#props" aria-hidden="true" tabindex="-1">#</a> -### <img src="https://raw.githubusercontent.com/matschik/component-party/main/public/framework/svelte.svg" alt="svelte" width="20" height="20" class="framework-logo" /> Svelte -```svelte -<script> - import UserProfile from './UserProfile.svelte'; -</script> - -<UserProfile name="John" age={20} favouriteColors={['green', 'blue', 'red']} isAvailable /> - -``` - -```svelte -<script> - export let name = ''; - export let age = null; - export let favouriteColors = []; - export let isAvailable = false; -</script> - -<p>My name is {name} !</p> -<p>My age is {age} !</p> -<p>My favourite colors are {favouriteColors.split(', ')} !</p> -<p>I am {isAvailable ? 'available' : 'not available'}</p> - -``` - -### <img src="https://raw.githubusercontent.com/matschik/component-party/main/public/framework/react.svg" alt="react" width="20" height="20" class="framework-logo" /> React -```jsx -import UserProfile from './UserProfile.jsx'; - -export default function App() { - return <UserProfile name="John" age={20} favouriteColors={['green', 'blue', 'red']} isAvailable />; -} - -``` - -```jsx -import PropTypes from 'prop-types'; - -export default function UserProfile({ name = '', age = null, favouriteColors = [], isAvailable = false }) { - return ( - <> - <p>My name is {name} !</p> - <p>My age is {age} !</p> - <p>My favourite colors are {favouriteColors.split(', ')} !</p> - <p>I am {isAvailable ? 'available' : 'not available'}</p> - </> - ); -} - -UserProfile.propTypes = { - name: PropTypes.string.isRequired, - age: PropTypes.number.isRequired, - favouriteColors: PropTypes.arrayOf(PropTypes.string).isRequired, - isAvailable: PropTypes.bool.isRequired, -}; - -``` - -### <img src="https://raw.githubusercontent.com/matschik/component-party/main/public/framework/vue.svg" alt="vue3" width="20" height="20" class="framework-logo" /> Vue 3 -```vue -<script setup> -import { ref } from 'vue'; -import UserProfile from './UserProfile.vue'; - -const username = ref('John'); -</script> - -<template> - <input v-model="username"> - <UserProfile :name="username" /> -</template> - -``` - -```vue -<script setup> -const props = defineProps({ - name: { - type: String, - required: true, - default: '', - }, - age: { - type: Number, - required: true, - default: null, - }, - favouriteColors: { - type: Array, - required: true, - default: () => [], - }, - isAvailable: { - type: Boolean, - required: true, - default: false, - }, -}); -</script> - -<template> - <p>My name is {{ props.name }} !</p> - <p>My age is {{ props.age }} !</p> - <p>My favourite colors are {{ props.favouriteColors.split(', ') }} !</p> - <p>I am {{ props.isAvailable ? 'available' : 'not available' }}</p> -</template> - -``` - -### <img src="https://raw.githubusercontent.com/matschik/component-party/main/public/framework/angular.svg" alt="angular" width="20" height="20" class="framework-logo" /> Angular -<pre>Oops, missing snippet ! <a href="https://github.com/matschik/component-party/tree/main/content/4-component-composition/1-props">You can help us by contributing on Github.</a></pre> -# Form input<a class="header-anchor" href="#form-input" aria-hidden="true" tabindex="-1">#</a> -## Input text<a class="header-anchor" href="#input-text" aria-hidden="true" tabindex="-1">#</a> -### <img src="https://raw.githubusercontent.com/matschik/component-party/main/public/framework/svelte.svg" alt="svelte" width="20" height="20" class="framework-logo" /> Svelte -```svelte -<script> - let text = 'Hello World'; -</script> - -<p>{text}</p> -<input bind:value={text} /> - -``` - -### <img src="https://raw.githubusercontent.com/matschik/component-party/main/public/framework/react.svg" alt="react" width="20" height="20" class="framework-logo" /> React -```jsx -import { useState } from 'react'; - -export default function InputHello() { - const [text, setText] = useState('Hello world'); - - function handleChange(event) { - setText(event.target.value); - } - - return ( - <> - <p>{text}</p> - <input value={text} onChange={handleChange} /> - </> - ); -} - -``` - -### <img src="https://raw.githubusercontent.com/matschik/component-party/main/public/framework/vue.svg" alt="vue3" width="20" height="20" class="framework-logo" /> Vue 3 -```vue -<script setup> -import { ref } from 'vue'; -const text = ref('Hello World'); -</script> - -<template> - <p>{{ text }}</p> - <input v-model="text"> -</template> - -``` - -### <img src="https://raw.githubusercontent.com/matschik/component-party/main/public/framework/angular.svg" alt="angular" width="20" height="20" class="framework-logo" /> Angular -<pre>Oops, missing snippet ! <a href="https://github.com/matschik/component-party/tree/main/content/6-form-input/1-input-text">You can help us by contributing on Github.</a></pre> -## Checkbox<a class="header-anchor" href="#checkbox" aria-hidden="true" tabindex="-1">#</a> -### <img src="https://raw.githubusercontent.com/matschik/component-party/main/public/framework/svelte.svg" alt="svelte" width="20" height="20" class="framework-logo" /> Svelte -```svelte -<script> - let isAvailable = false; -</script> - -<input id="is-available" type="checkbox" bind:checked={isAvailable} /> -<label for="is-available">Is available</label> - -``` - -### <img src="https://raw.githubusercontent.com/matschik/component-party/main/public/framework/react.svg" alt="react" width="20" height="20" class="framework-logo" /> React -```jsx -import { useState } from 'react'; - -export default function IsAvailable() { - const [isAvailable, setIsAvailable] = useState(false); - - function handleChange() { - setIsAvailable(!isAvailable); - } - - return ( - <> - <input id="is-available" type="checkbox" checked={isAvailable} onChange={handleChange} /> - <label htmlFor="is-available">Is available</label> - </> - ); -} - -``` - -### <img src="https://raw.githubusercontent.com/matschik/component-party/main/public/framework/vue.svg" alt="vue3" width="20" height="20" class="framework-logo" /> Vue 3 -```vue -<script setup> -import { ref } from 'vue'; - -const isAvailable = ref(true); -</script> - -<template> - <input - id="is-available" - v-model="isAvailable" - type="checkbox" - > - <label for="is-available">Is available</label> -</template> - -``` - -### <img src="https://raw.githubusercontent.com/matschik/component-party/main/public/framework/angular.svg" alt="angular" width="20" height="20" class="framework-logo" /> Angular -<pre>Oops, missing snippet ! <a href="https://github.com/matschik/component-party/tree/main/content/6-form-input/2-checkbox">You can help us by contributing on Github.</a></pre> -## Radio<a class="header-anchor" href="#radio" aria-hidden="true" tabindex="-1">#</a> -### <img src="https://raw.githubusercontent.com/matschik/component-party/main/public/framework/svelte.svg" alt="svelte" width="20" height="20" class="framework-logo" /> Svelte -```svelte -<script> - let picked = 'red'; -</script> - -<div>Picked: {picked}</div> - -<input id="blue-pill" bind:group={picked} type="radio" value="blue" /> -<label for="blue-pill">Blue pill</label> - -<input id="red-pill" bind:group={picked} type="radio" value="red" /> -<label for="red-pill">Red pill</label> - -``` - -### <img src="https://raw.githubusercontent.com/matschik/component-party/main/public/framework/react.svg" alt="react" width="20" height="20" class="framework-logo" /> React -```jsx -import { useState } from 'react'; - -export default function PickPill() { - const [picked, setPicked] = useState('red'); - - function handleChange(event) { - setPicked(event.target.value); - } - - return ( - <> - <input id="blue-pill" checked={picked === 'blue'} type="radio" value="blue" onChange={handleChange} /> - <label htmlFor="blue-pill">Blue pill</label> - - <input id="red-pill" checked={picked === 'red'} type="radio" value="red" onChange={handleChange} /> - <label htmlFor="red-pill">Red pill</label> - </> - ); -} - -``` - -### <img src="https://raw.githubusercontent.com/matschik/component-party/main/public/framework/vue.svg" alt="vue3" width="20" height="20" class="framework-logo" /> Vue 3 -```vue -<script setup> -import { ref } from 'vue'; - -const picked = ref('red'); -</script> - -<template> - <div>Picked: {{ picked }}</div> - - <input - id="blue-pill" - v-model="picked" - type="radio" - value="blue" - > - <label for="blue-pill">Blue pill</label> - - <input - id="red-pill" - v-model="picked" - type="radio" - value="red" - > - <label for="red-pill">Red pill</label> -</template> - -``` - -### <img src="https://raw.githubusercontent.com/matschik/component-party/main/public/framework/angular.svg" alt="angular" width="20" height="20" class="framework-logo" /> Angular -<pre>Oops, missing snippet ! <a href="https://github.com/matschik/component-party/tree/main/content/6-form-input/3-radio">You can help us by contributing on Github.</a></pre> -## Select<a class="header-anchor" href="#select" aria-hidden="true" tabindex="-1">#</a> -### <img src="https://raw.githubusercontent.com/matschik/component-party/main/public/framework/svelte.svg" alt="svelte" width="20" height="20" class="framework-logo" /> Svelte -```svelte -<script> - let selectedColorId = 2; - - const colors = [ - { id: 1, text: 'red' }, - { id: 2, text: 'blue' }, - { id: 3, text: 'green' }, - { id: 4, text: 'gray', isDisabled: true }, - ]; -</script> - -<select bind:value={selectedColorId}> - {#each colors as color} - <option value={color.id} disabled={color.isDisabled}> - {color.text} - </option> - {/each} -</select> - -``` - -### <img src="https://raw.githubusercontent.com/matschik/component-party/main/public/framework/react.svg" alt="react" width="20" height="20" class="framework-logo" /> React -```jsx -import { useState } from 'react'; - -const colors = [ - { id: 1, text: 'red' }, - { id: 2, text: 'blue' }, - { id: 3, text: 'green' }, - { id: 4, text: 'gray', isDisabled: true }, -]; - -export default function ColorSelect() { - const [selectedColorId, setSelectedColorId] = useState(2); - - function handleChange(event) { - setSelectedColorId(event.target.value); - } - - return ( - <select value={selectedColorId} onChange={handleChange}> - {colors.map((color) => ( - <option key={color.id} value={color.id} disabled={color.isDisabled}> - {color.text} - </option> - ))} - </select> - ); -} - -``` - -### <img src="https://raw.githubusercontent.com/matschik/component-party/main/public/framework/vue.svg" alt="vue3" width="20" height="20" class="framework-logo" /> Vue 3 -```vue -<script setup> -import { ref } from 'vue'; - -const selectedColorId = ref(2); - -const colors = [ - { id: 1, text: 'red' }, - { id: 2, text: 'blue' }, - { id: 3, text: 'green' }, - { id: 4, text: 'gray', isDisabled: true }, -]; -</script> - -<template> - <select v-model="selectedColorId"> - <option - v-for="color in colors" - :key="color.id" - :value="color.id" - > - {{ color.text }} - </option> - </select> -</template> - -``` - -### <img src="https://raw.githubusercontent.com/matschik/component-party/main/public/framework/angular.svg" alt="angular" width="20" height="20" class="framework-logo" /> Angular -<pre>Oops, missing snippet ! <a href="https://github.com/matschik/component-party/tree/main/content/6-form-input/4-select">You can help us by contributing on Github.</a></pre> -# Webapp features<a class="header-anchor" href="#webapp-features" aria-hidden="true" tabindex="-1">#</a> -## Routing<a class="header-anchor" href="#routing" aria-hidden="true" tabindex="-1">#</a> -### <img src="https://raw.githubusercontent.com/matschik/component-party/main/public/framework/svelte.svg" alt="svelte" width="20" height="20" class="framework-logo" /> Svelte -With <a href="https://kit.svelte.dev/docs/routing#pages">SvelteKit</a> - -``` -|-- routes/ - |-- index.svelte // index page "/" - |-- about.svelte // about page "/about" - |-- __error.svelte // handle HTTP errors 404, 500,... - |-- __layout.svelte // global app layout -``` - -### <img src="https://raw.githubusercontent.com/matschik/component-party/main/public/framework/react.svg" alt="react" width="20" height="20" class="framework-logo" /> React -With <a href="https://nextjs.org/docs/basic-features/pages">NextJS</a> - -``` -|-- pages/ - |-- index.js // index page "/" - |-- about.js // about page "/about" - |-- 404.js // handle error HTTP 404 page not found - |-- 500.js // handle error HTTP 500 - |-- _app.js // global app layout -``` - -With <a href="https://remix.run/docs/en/v1/guides/routing">Remix</a> - -``` -|-- root.jsx // global app layout -|-- routes/ - |-- index.jsx // index page "/" - |-- about.jsx // about page "/about" - |-- $.jsx // fallback page -``` -### <img src="https://raw.githubusercontent.com/matschik/component-party/main/public/framework/vue.svg" alt="vue3" width="20" height="20" class="framework-logo" /> Vue 3 -With <a href="https://v3.nuxtjs.org/guide/directory-structure/pages">Nuxt 3</a> - -``` -|-- pages/ - |-- index.vue // index page "/" - |-- about.vue // about page "/about" -``` - -### <img src="https://raw.githubusercontent.com/matschik/component-party/main/public/framework/angular.svg" alt="angular" width="20" height="20" class="framework-logo" /> Angular -<pre>Oops, missing snippet ! <a href="https://github.com/matschik/component-party/tree/main/content/7-webapp-features/1-routing">You can help us by contributing on Github.</a></pre> -## Router link<a class="header-anchor" href="#router-link" aria-hidden="true" tabindex="-1">#</a> -### <img src="https://raw.githubusercontent.com/matschik/component-party/main/public/framework/svelte.svg" alt="svelte" width="20" height="20" class="framework-logo" /> Svelte -With <a href="https://kit.svelte.dev/docs/routing#pages">SvelteKit</a> - -```svelte -<ul> - <li> - <a href="/"> - Home - </a> - </li> - <li> - <a href="/about"> - About us - </a> - </li> -</ul> -``` - -### <img src="https://raw.githubusercontent.com/matschik/component-party/main/public/framework/react.svg" alt="react" width="20" height="20" class="framework-logo" /> React -With <a href="https://nextjs.org/docs/api-reference/next/link">NextJS</a> - -```jsx -import Link from 'next/link' - -export default function Home() { - return ( - <ul> - <li> - <Link href="/"> - <a>Home</a> - </Link> - </li> - <li> - <Link href="/about"> - <a>About us</a> - </Link> - </li> - </ul> - ) -} -``` - -### <img src="https://raw.githubusercontent.com/matschik/component-party/main/public/framework/vue.svg" alt="vue3" width="20" height="20" class="framework-logo" /> Vue 3 -With <a href="https://v3.nuxtjs.org/guide/directory-structure/pages#navigation">Nuxt 3</a> - -```vue -<template> - <ul> - <li> - <NuxtLink to="/"> Home </NuxtLink> - </li> - <li> - <NuxtLink to="/about"> About us </NuxtLink> - </li> - </ul> -</template> -``` - -### <img src="https://raw.githubusercontent.com/matschik/component-party/main/public/framework/angular.svg" alt="angular" width="20" height="20" class="framework-logo" /> Angular -<pre>Oops, missing snippet ! <a href="https://github.com/matschik/component-party/tree/main/content/7-webapp-features/2-router-link">You can help us by contributing on Github.</a></pre> - From b8136bc57891e730e48821c9929ddfcd043e0b54 Mon Sep 17 00:00:00 2001 From: Mathieu Schimmerling <mathieu.schimmerling@protonmail.com> Date: Wed, 13 Apr 2022 02:04:32 +0200 Subject: [PATCH 05/11] support missing framework --- src/components/FrameworkLabel.svelte | 11 +---------- src/components/Section.astro | 27 ++++++++++++++++----------- src/layouts/BaseLayout.svelte | 7 ------- src/pages/index.astro | 2 +- 4 files changed, 18 insertions(+), 29 deletions(-) diff --git a/src/components/FrameworkLabel.svelte b/src/components/FrameworkLabel.svelte index eb73ed0d..bfaadb31 100644 --- a/src/components/FrameworkLabel.svelte +++ b/src/components/FrameworkLabel.svelte @@ -6,15 +6,6 @@ </script> {#if framework.img} - <img src={framework.img} alt={framework.id} width="20" height="20" class="framework-logo" /> + <img src={framework.img} alt={framework.id} width="20" height="20" class="inline mr-[5px] mb-0 mt-0" /> {/if} <span>{framework.title}</span> - -<style> - .framework-logo { - display: inline; - margin-right: 5px; - margin-bottom: 0px; - margin-top: 0px; - } -</style> diff --git a/src/components/Section.astro b/src/components/Section.astro index 9705bad0..ea2a4162 100644 --- a/src/components/Section.astro +++ b/src/components/Section.astro @@ -3,10 +3,11 @@ import Title from "../components/Title.svelte" import FrameworkLabel from "../components/FrameworkLabel.svelte" import fs from 'node:fs/promises'; import kebabCase from 'lodash.kebabcase'; -import { Code, Markdown} from "astro/components" +import { Code, Markdown } from "astro/components" import nodePath from "node:path" +import FRAMEWORKS from '../frameworks'; -const { sectionPath } = Astro.props +const { path: sectionPath } = Astro.props const sections = [] @@ -64,16 +65,20 @@ for(const dirName of subSectionDirNames){ ( <> <Title as="h2" content={section.title}/> - {section.frameworkSections.map((frameworkSection) => ( + {FRAMEWORKS.map((framework) => ( <> - <h3><FrameworkLabel id={frameworkSection.dirName} /></h3> - - {frameworkSection.files.map((file) => ( - file.ext === 'md' - ? <Markdown set:html={file.content} /> - : - <Code code={file.content} lang={file.ext} /> - ))} + <h3><FrameworkLabel id={framework.id} /></h3> + {section.frameworkSections.find(f => f.dirName === framework.id) ? + section.frameworkSections.find(f => f.dirName === framework.id).files.map((file) => ( + file.ext === 'md' + ? <Markdown set:html={file.content} /> + : + <Code code={file.content} lang={file.ext} /> + )) + : + <pre>Oops, missing snippet ! <a href={`https://github.com/matschik/component-party/tree/main/content/${sectionPath.split("/").pop()}/${section.dirName}`}>You can help us by contributing on Github.</a></pre> + } + </> ))} </> diff --git a/src/layouts/BaseLayout.svelte b/src/layouts/BaseLayout.svelte index 22f8eb34..8b18b906 100644 --- a/src/layouts/BaseLayout.svelte +++ b/src/layouts/BaseLayout.svelte @@ -9,13 +9,6 @@ <link rel="icon" href="/favicon.png" /> <meta name="description" content="Web component JS frameworks overview by their syntax and features." /> <style> - #main-content .framework-logo { - display: inline; - margin-right: 5px; - margin-bottom: 0px; - margin-top: 0px; - } - #main-content h1:hover .header-anchor, #main-content h2:hover .header-anchor { opacity: 100; diff --git a/src/pages/index.astro b/src/pages/index.astro index 6d3360b9..fd7d7ce2 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -11,6 +11,6 @@ const sectionNames = await fs.readdir(contentURL) <Layout> {sectionNames.map((sectionName) => - <Section sectionPath={`${contentURL}/${sectionName}`} /> + <Section path={`${contentURL}/${sectionName}`} /> )} </Layout> \ No newline at end of file From 8fe3ae2655c64b0563e36fc0dd10b4d6c1a17045 Mon Sep 17 00:00:00 2001 From: Mathieu Schimmerling <mathieu.schimmerling@protonmail.com> Date: Wed, 13 Apr 2022 03:03:30 +0200 Subject: [PATCH 06/11] show/hide framework section --- public/hash-change-on-headings.js | 14 ++++++++++++ src/components/Section.astro | 37 +++++++++++++++++++++---------- src/layouts/BaseLayout.svelte | 2 +- src/pages/index.astro | 1 - 4 files changed, 40 insertions(+), 14 deletions(-) diff --git a/public/hash-change-on-headings.js b/public/hash-change-on-headings.js index 77a58a63..ba3ea654 100644 --- a/public/hash-change-on-headings.js +++ b/public/hash-change-on-headings.js @@ -10,4 +10,18 @@ window.addEventListener('DOMContentLoaded', () => { for (const heading of document.querySelectorAll('#main-content h1, #main-content h2')) { anchorObserver.observe(heading); } + + for(const fmwButton of document.querySelectorAll("[data-framework-button]")){ + const framework = fmwButton.getAttribute("data-framework-button") + fmwButton.addEventListener("click", () => { + for(const fmwContent of document.querySelectorAll(`[data-framework-content=${framework}]`)){ + console.log(fmwContent.style.display, "éazzeeza") + if(!fmwContent.style.display || fmwContent.style.display === "block"){ + fmwContent.style.display = "none" + } else { + fmwContent.style.display = "block" + } + } + }) + } }); diff --git a/src/components/Section.astro b/src/components/Section.astro index ea2a4162..433ac289 100644 --- a/src/components/Section.astro +++ b/src/components/Section.astro @@ -9,6 +9,8 @@ import FRAMEWORKS from '../frameworks'; const { path: sectionPath } = Astro.props +const sectionId = sectionPath.split("/").pop() + const sections = [] function dirNameToTitle(dirName) { @@ -60,24 +62,35 @@ for(const dirName of subSectionDirNames){ } --- -<Title as="h1" content={dirNameToTitle(sectionPath.split("/").pop())} /> +<Title as="h1" content={dirNameToTitle(sectionId)} /> {sections.map((section) => ( <> <Title as="h2" content={section.title}/> {FRAMEWORKS.map((framework) => ( <> - <h3><FrameworkLabel id={framework.id} /></h3> - {section.frameworkSections.find(f => f.dirName === framework.id) ? - section.frameworkSections.find(f => f.dirName === framework.id).files.map((file) => ( - file.ext === 'md' - ? <Markdown set:html={file.content} /> - : - <Code code={file.content} lang={file.ext} /> - )) - : - <pre>Oops, missing snippet ! <a href={`https://github.com/matschik/component-party/tree/main/content/${sectionPath.split("/").pop()}/${section.dirName}`}>You can help us by contributing on Github.</a></pre> - } + <div role="button" data-framework-button={framework.id}> + <h3 class="hover:bg-gray-800 rounded py-1 px-2"> + <FrameworkLabel id={framework.id} /> + </h3> + </div> + <div data-framework-content={framework.id}> + {section.frameworkSections.find(f => f.dirName === framework.id) ? + section.frameworkSections.find(f => f.dirName === framework.id).files.map((file) => ( + file.ext === 'md' + ? <Markdown set:html={file.content} /> + : + <div> + <div class="bg-gray-800 py-1.5 px-3 text-xs rounded-t inline-block"> + {file.fileName} + </div> + <Code code={file.content} lang={file.ext} /> + </div> + )) + : + <pre>Oops, missing snippet ! <a href={`https://github.com/matschik/component-party/tree/main/content/${sectionId}/${section.dirName}`}>You can help us by contributing on Github.</a></pre> + } + </div> </> ))} diff --git a/src/layouts/BaseLayout.svelte b/src/layouts/BaseLayout.svelte index 8b18b906..6e97b749 100644 --- a/src/layouts/BaseLayout.svelte +++ b/src/layouts/BaseLayout.svelte @@ -70,7 +70,7 @@ {/each} </nav> </aside> - <main id="main-content" class="prose prose-invert prose-h1:scroll-mt-20 prose-h2:scroll-mt-20 w-full mx-auto pb-8 mt-10"> + <main id="main-content" class="prose prose-invert prose-h1:scroll-mt-20 prose-pre:mt-0 prose-h2:scroll-mt-20 w-full mx-auto pb-8 mt-10"> <slot /> </main> </div> diff --git a/src/pages/index.astro b/src/pages/index.astro index fd7d7ce2..ec2cf313 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -8,7 +8,6 @@ const rootDir = await packageDirectory() const contentURL = `${rootDir}/content` const sectionNames = await fs.readdir(contentURL) --- - <Layout> {sectionNames.map((sectionName) => <Section path={`${contentURL}/${sectionName}`} /> From b232f2348cc6ed791a93a356b35a25628e2ac9dd Mon Sep 17 00:00:00 2001 From: Mathieu Schimmerling <mathieu.schimmerling@protonmail.com> Date: Wed, 13 Apr 2022 13:10:43 +0200 Subject: [PATCH 07/11] add fmw display module --- public/hash-change-on-headings.js | 128 ++++++++++++++++++++++++--- src/components/FrameworkLabel.svelte | 3 +- src/components/Section.astro | 48 +++++----- src/pages/index.astro | 2 +- 4 files changed, 145 insertions(+), 36 deletions(-) diff --git a/public/hash-change-on-headings.js b/public/hash-change-on-headings.js index ba3ea654..08a9674a 100644 --- a/public/hash-change-on-headings.js +++ b/public/hash-change-on-headings.js @@ -1,4 +1,69 @@ window.addEventListener('DOMContentLoaded', () => { + hashChangeOnHeadingsModule(); + frameworkDisplayModule(); +}); + +function frameworkDisplayModule() { + const $ = { + fmwButtonHide: (framework) => document.querySelectorAll(framework ? `[data-framework-button-hide=${framework}]` : '[data-framework-button-hide]'), + fmwButtonShow: (framework) => document.querySelectorAll(framework ? `[data-framework-button-show=${framework}]` : '[data-framework-button-show]'), + fmwContent: (framework) => document.querySelectorAll(`[data-framework-content=${framework}]`), + }; + + const hiddenFrameworksProxy = createLocaleStorageProxy('hidden_frameworks'); + + function onFramework(framework) { + return { + show() { + if (hiddenFrameworksProxy.includes(framework)) { + const frameworkIndex = hiddenFrameworksProxy.indexOf(framework); + delete hiddenFrameworksProxy[frameworkIndex]; + } + for (const $el of $.fmwContent(framework)) { + $el.style.display = 'block'; + } + for (const $el of $.fmwButtonShow(framework)) { + $el.style.display = 'none'; + } + }, + hide() { + if (!hiddenFrameworksProxy.includes(framework)) { + hiddenFrameworksProxy.push(framework); + } + for (const $el of $.fmwContent(framework)) { + $el.style.display = 'none'; + } + for (const $el of $.fmwButtonShow(framework)) { + $el.style.display = 'block'; + } + }, + }; + } + + for (const $el of $.fmwButtonShow()) { + $el.style.display = 'none'; + } + + for (const hiddenFramework of Object.values(hiddenFrameworksProxy)) { + onFramework(hiddenFramework).hide(); + } + + for (const $fmwButton of $.fmwButtonHide()) { + const framework = $fmwButton.getAttribute('data-framework-button-hide'); + $fmwButton.addEventListener('click', () => { + onFramework(framework).hide(); + }); + } + + for (const $fmwButton of $.fmwButtonShow()) { + const framework = $fmwButton.getAttribute('data-framework-button-show'); + $fmwButton.addEventListener('click', () => { + onFramework(framework).show(); + }); + } +} + +function hashChangeOnHeadingsModule() { const anchorObserver = new IntersectionObserver((entries) => { for (const entry of entries) { if (entry.isIntersecting) { @@ -7,21 +72,56 @@ window.addEventListener('DOMContentLoaded', () => { } } }); - for (const heading of document.querySelectorAll('#main-content h1, #main-content h2')) { - anchorObserver.observe(heading); + for (const $heading of document.querySelectorAll('#main-content h1, #main-content h2')) { + anchorObserver.observe($heading); } +} - for(const fmwButton of document.querySelectorAll("[data-framework-button]")){ - const framework = fmwButton.getAttribute("data-framework-button") - fmwButton.addEventListener("click", () => { - for(const fmwContent of document.querySelectorAll(`[data-framework-content=${framework}]`)){ - console.log(fmwContent.style.display, "éazzeeza") - if(!fmwContent.style.display || fmwContent.style.display === "block"){ - fmwContent.style.display = "none" - } else { - fmwContent.style.display = "block" +function createLocaleStorageProxy(key) { + const storage = createLocaleStorage(key); + + return new Proxy(storage.getJSON() || [], { + get(target, prop) { + return target[prop]; + }, + set(target, prop, value, receiver) { + target[prop] = value; + storage.setJSON(receiver); + return true; + }, + deleteProperty(target, prop) { + target.splice(prop, 1); + storage.setJSON(target); + return true; + }, + }); +} + +function createLocaleStorage(k) { + function get() { + return localStorage.getItem(k); + } + return { + get, + getJSON() { + var value = get(); + if (value) { + try { + return JSON.parse(value); + } catch (err) { + console.error({ getJSONErr: err }); + return undefined; } } - }) - } -}); + }, + setJSON(o) { + this.set(JSON.stringify(o)); + }, + set(v) { + localStorage.setItem(k, v); + }, + remove() { + localStorage.removeItem(k); + }, + }; +} diff --git a/src/components/FrameworkLabel.svelte b/src/components/FrameworkLabel.svelte index bfaadb31..2bb647f3 100644 --- a/src/components/FrameworkLabel.svelte +++ b/src/components/FrameworkLabel.svelte @@ -1,11 +1,12 @@ <script> import FRAMEWORKS from '../frameworks'; export let id; + export let size = 20 $: framework = FRAMEWORKS.find((f) => f.id === id); </script> {#if framework.img} - <img src={framework.img} alt={framework.id} width="20" height="20" class="inline mr-[5px] mb-0 mt-0" /> + <img src={framework.img} alt={framework.id} width={size} height={size} class="inline mr-[5px] mb-0 mt-0" /> {/if} <span>{framework.title}</span> diff --git a/src/components/Section.astro b/src/components/Section.astro index 433ac289..92f25aae 100644 --- a/src/components/Section.astro +++ b/src/components/Section.astro @@ -69,31 +69,39 @@ for(const dirName of subSectionDirNames){ <Title as="h2" content={section.title}/> {FRAMEWORKS.map((framework) => ( <> - <div role="button" data-framework-button={framework.id}> - <h3 class="hover:bg-gray-800 rounded py-1 px-2"> - <FrameworkLabel id={framework.id} /> - </h3> - </div> <div data-framework-content={framework.id}> - {section.frameworkSections.find(f => f.dirName === framework.id) ? - section.frameworkSections.find(f => f.dirName === framework.id).files.map((file) => ( - file.ext === 'md' - ? <Markdown set:html={file.content} /> - : - <div> - <div class="bg-gray-800 py-1.5 px-3 text-xs rounded-t inline-block"> - {file.fileName} + <div role="button" data-framework-button-hide={framework.id}> + <h3 class="hover:bg-gray-800 transition-all rounded py-1 px-2"> + <FrameworkLabel id={framework.id} /> + </h3> + </div> + <div> + {section.frameworkSections.find(f => f.dirName === framework.id) ? + section.frameworkSections.find(f => f.dirName === framework.id).files.map((file) => ( + file.ext === 'md' + ? <Markdown set:html={file.content} /> + : + <div> + <div class="bg-gray-800 py-1.5 px-3 text-xs rounded-t inline-block"> + {file.fileName} + </div> + <Code code={file.content} lang={file.ext} /> </div> - <Code code={file.content} lang={file.ext} /> - </div> - )) - : - <pre>Oops, missing snippet ! <a href={`https://github.com/matschik/component-party/tree/main/content/${sectionId}/${section.dirName}`}>You can help us by contributing on Github.</a></pre> - } + )) + : + <pre>Oops, missing snippet ! <a href={`https://github.com/matschik/component-party/tree/main/content/${sectionId}/${section.dirName}`}>You can help us by contributing on Github.</a></pre> + } + </div> </div> - </> ))} + <div class="flex items-center space-x-2"> + {FRAMEWORKS.map((framework) => ( + <button data-framework-button-show={framework.id} title={`Display ${framework.title}`} class="text-sm rounded border border-gray-700 px-3 py-1 border-opacity-50 bg-gray-900 hover:bg-gray-800 transition-all"> + <FrameworkLabel id={framework.id} size={15} /> + </button> + ))} + </div> </> ) )} \ No newline at end of file diff --git a/src/pages/index.astro b/src/pages/index.astro index ec2cf313..b60f5ace 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -9,7 +9,7 @@ const contentURL = `${rootDir}/content` const sectionNames = await fs.readdir(contentURL) --- <Layout> - {sectionNames.map((sectionName) => + {sectionNames.slice(0,1).map((sectionName) => <Section path={`${contentURL}/${sectionName}`} /> )} </Layout> \ No newline at end of file From 716c09ac9ae8113269ee8a910fb2a486ce71857f Mon Sep 17 00:00:00 2001 From: Mathieu Schimmerling <mathieu.schimmerling@protonmail.com> Date: Wed, 13 Apr 2022 13:11:19 +0200 Subject: [PATCH 08/11] remove debug --- src/pages/index.astro | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/index.astro b/src/pages/index.astro index b60f5ace..ec2cf313 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -9,7 +9,7 @@ const contentURL = `${rootDir}/content` const sectionNames = await fs.readdir(contentURL) --- <Layout> - {sectionNames.slice(0,1).map((sectionName) => + {sectionNames.map((sectionName) => <Section path={`${contentURL}/${sectionName}`} /> )} </Layout> \ No newline at end of file From b0571f8d3f384b9c0be92d15cfb73c70fc94708f Mon Sep 17 00:00:00 2001 From: Mathieu Schimmerling <mathieu.schimmerling@protonmail.com> Date: Wed, 13 Apr 2022 13:24:39 +0200 Subject: [PATCH 09/11] style fix --- src/components/Section.astro | 4 +++- src/pages/index.astro | 8 +++++--- 2 files changed, 8 insertions(+), 4 deletions(-) diff --git a/src/components/Section.astro b/src/components/Section.astro index 92f25aae..c47c244a 100644 --- a/src/components/Section.astro +++ b/src/components/Section.astro @@ -62,7 +62,9 @@ for(const dirName of subSectionDirNames){ } --- + <Title as="h1" content={dirNameToTitle(sectionId)} /> + {sections.map((section) => ( <> @@ -95,7 +97,7 @@ for(const dirName of subSectionDirNames){ </div> </> ))} - <div class="flex items-center space-x-2"> + <div class="flex items-center space-x-2" style="margin-top: 1rem;"> {FRAMEWORKS.map((framework) => ( <button data-framework-button-show={framework.id} title={`Display ${framework.title}`} class="text-sm rounded border border-gray-700 px-3 py-1 border-opacity-50 bg-gray-900 hover:bg-gray-800 transition-all"> <FrameworkLabel id={framework.id} size={15} /> diff --git a/src/pages/index.astro b/src/pages/index.astro index ec2cf313..6308a089 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -9,7 +9,9 @@ const contentURL = `${rootDir}/content` const sectionNames = await fs.readdir(contentURL) --- <Layout> - {sectionNames.map((sectionName) => - <Section path={`${contentURL}/${sectionName}`} /> - )} + <div class="space-y-10"> + {sectionNames.map((sectionName) => + <Section path={`${contentURL}/${sectionName}`} /> + )} + </div> </Layout> \ No newline at end of file From c0bf4cb3c56fb145f362065dcea6476c5794bea1 Mon Sep 17 00:00:00 2001 From: Mathieu Schimmerling <mathieu.schimmerling@protonmail.com> Date: Wed, 13 Apr 2022 14:02:14 +0200 Subject: [PATCH 10/11] fix prettier lint-staged --- .github/workflows/node.js.yml | 27 ++- .prettierrc | 1 + config.cjs | 8 +- .../1-routing/react/remix.md | 2 +- .../2-router-link/react/nextjs.md | 4 +- .../2-router-link/svelte/sveltekit.md | 16 +- package.json | 8 +- pnpm-lock.yaml | 28 +-- scripts/utils/getDocContent.js | 6 +- src/components/FrameworkLabel.svelte | 2 +- src/components/Title.svelte | 4 +- src/frameworks.js | 10 +- src/pages/index.astro | 2 +- src/tree.js | 218 +++++++++--------- 14 files changed, 167 insertions(+), 169 deletions(-) diff --git a/.github/workflows/node.js.yml b/.github/workflows/node.js.yml index dd24283a..fcc54f29 100644 --- a/.github/workflows/node.js.yml +++ b/.github/workflows/node.js.yml @@ -5,13 +5,12 @@ name: Node.js CI on: push: - branches: [ main ] + branches: [main] pull_request: - branches: [ main ] + branches: [main] jobs: build: - runs-on: ubuntu-latest strategy: @@ -20,14 +19,14 @@ jobs: # See supported Node.js release schedule at https://nodejs.org/en/about/releases/ steps: - - uses: actions/checkout@v3 - - name: Use Node.js ${{ matrix.node-version }} - uses: actions/setup-node@v3 - with: - node-version: ${{ matrix.node-version }} - - name: Setup PNPM - # uses: pnpm/action-setup@35ab4267a1a21c8e8cb1c087cf1642e891ff57bd - uses: pnpm/action-setup@v2.2.1 - - run: pnpm install --frozen-lockfile - - run: pnpm run lint - - run: pnpm run build + - uses: actions/checkout@v3 + - name: Use Node.js ${{ matrix.node-version }} + uses: actions/setup-node@v3 + with: + node-version: ${{ matrix.node-version }} + - name: Setup PNPM + # uses: pnpm/action-setup@35ab4267a1a21c8e8cb1c087cf1642e891ff57bd + uses: pnpm/action-setup@v2.2.1 + - run: pnpm install --frozen-lockfile + - run: pnpm run lint + - run: pnpm run build diff --git a/.prettierrc b/.prettierrc index 1daf4328..e7f368bd 100644 --- a/.prettierrc +++ b/.prettierrc @@ -5,6 +5,7 @@ "tabWidth": 2, "trailingComma": "es5", "useTabs": true, + "plugins": ["prettier-plugin-svelte"], "overrides": [ { "files": [".*", "*.json", "*.md", "*.toml", "*.yml"], diff --git a/config.cjs b/config.cjs index aa46564a..86177411 100644 --- a/config.cjs +++ b/config.cjs @@ -3,7 +3,7 @@ const FRAMEWORKS = [ id: 'svelte', title: 'Svelte', ext: 'svelte', - img: "https://raw.githubusercontent.com/matschik/component-party/main/public/framework/svelte.svg", + img: 'https://raw.githubusercontent.com/matschik/component-party/main/public/framework/svelte.svg', eslint: { files: ['*.svelte'], processor: 'svelte3/svelte3', @@ -14,7 +14,7 @@ const FRAMEWORKS = [ id: 'react', title: 'React', ext: 'jsx', - img: "https://raw.githubusercontent.com/matschik/component-party/main/public/framework/react.svg", + img: 'https://raw.githubusercontent.com/matschik/component-party/main/public/framework/react.svg', eslint: { files: ['**/react/*.jsx', '**/react/*.tsx'], extends: ['eslint:recommended', 'plugin:react/recommended', 'plugin:react/jsx-runtime'], @@ -29,7 +29,7 @@ const FRAMEWORKS = [ id: 'vue3', title: 'Vue 3', ext: 'vue', - img: "https://raw.githubusercontent.com/matschik/component-party/main/public/framework/vue.svg", + img: 'https://raw.githubusercontent.com/matschik/component-party/main/public/framework/vue.svg', eslint: { files: ['*.vue'], env: { @@ -42,7 +42,7 @@ const FRAMEWORKS = [ id: 'angular', title: 'Angular', ext: 'ts', - img: "https://raw.githubusercontent.com/matschik/component-party/main/public/framework/angular.svg", + img: 'https://raw.githubusercontent.com/matschik/component-party/main/public/framework/angular.svg', eslint: [ { files: ['**/angular/*.ts'], diff --git a/content/7-webapp-features/1-routing/react/remix.md b/content/7-webapp-features/1-routing/react/remix.md index 8f06e16c..de6bb3e5 100644 --- a/content/7-webapp-features/1-routing/react/remix.md +++ b/content/7-webapp-features/1-routing/react/remix.md @@ -6,4 +6,4 @@ With <a href="https://remix.run/docs/en/v1/guides/routing">Remix</a> |-- index.jsx // index page "/" |-- about.jsx // about page "/about" |-- $.jsx // fallback page -``` \ No newline at end of file +``` diff --git a/content/7-webapp-features/2-router-link/react/nextjs.md b/content/7-webapp-features/2-router-link/react/nextjs.md index 80df9918..a9f8c9a8 100644 --- a/content/7-webapp-features/2-router-link/react/nextjs.md +++ b/content/7-webapp-features/2-router-link/react/nextjs.md @@ -1,7 +1,7 @@ With <a href="https://nextjs.org/docs/api-reference/next/link">NextJS</a> ```jsx -import Link from 'next/link' +import Link from 'next/link'; export default function Home() { return ( @@ -17,6 +17,6 @@ export default function Home() { </Link> </li> </ul> - ) + ); } ``` diff --git a/content/7-webapp-features/2-router-link/svelte/sveltekit.md b/content/7-webapp-features/2-router-link/svelte/sveltekit.md index dcea0b79..7bf8d19a 100644 --- a/content/7-webapp-features/2-router-link/svelte/sveltekit.md +++ b/content/7-webapp-features/2-router-link/svelte/sveltekit.md @@ -2,15 +2,11 @@ With <a href="https://kit.svelte.dev/docs/routing#pages">SvelteKit</a> ```svelte <ul> - <li> - <a href="/"> - Home - </a> - </li> - <li> - <a href="/about"> - About us - </a> - </li> + <li> + <a href="/"> Home </a> + </li> + <li> + <a href="/about"> About us </a> + </li> </ul> ``` diff --git a/package.json b/package.json index 50182913..e377f533 100644 --- a/package.json +++ b/package.json @@ -36,7 +36,7 @@ "@tailwindcss/typography": "^0.5.2", "@typescript-eslint/eslint-plugin": "^5.19.0", "@typescript-eslint/parser": "^5.19.0", - "astro": "^1.0.0-beta.8", + "astro": "^1.0.0-beta.9", "autoprefixer": "^10.4.4", "eslint": "^8.13.0", "eslint-config-prettier": "^8.5.0", @@ -59,7 +59,9 @@ "vite": "^2.9.1" }, "lint-staged": { - "*.js": "eslint --cache --fix", - "*.lint:fix": "prettier --write" + "*.{js,jsx,ts,tsx,vue,svelte}": [ + "eslint --cache --fix", + "prettier --write" + ] } } diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index adde2231..bd4283c5 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -9,7 +9,7 @@ specifiers: '@tailwindcss/typography': ^0.5.2 '@typescript-eslint/eslint-plugin': ^5.19.0 '@typescript-eslint/parser': ^5.19.0 - astro: ^1.0.0-beta.8 + astro: ^1.0.0-beta.9 autoprefixer: ^10.4.4 eslint: ^8.13.0 eslint-config-prettier: ^8.5.0 @@ -40,7 +40,7 @@ devDependencies: '@tailwindcss/typography': 0.5.2_tailwindcss@3.0.24 '@typescript-eslint/eslint-plugin': 5.19.0_f34adc8488d2e4f014fe61432d70cbf2 '@typescript-eslint/parser': 5.19.0_eslint@8.13.0+typescript@4.6.3 - astro: 1.0.0-beta.8 + astro: 1.0.0-beta.9 autoprefixer: 10.4.4_postcss@8.4.12 eslint: 8.13.0 eslint-config-prettier: 8.5.0_eslint@8.13.0 @@ -154,8 +154,8 @@ packages: vscode-uri: 3.0.3 dev: true - /@astrojs/markdown-remark/0.8.2: - resolution: {integrity: sha512-P6Qjy7pa+JWfQlCxL+IHn3Cf0GEPSW5xN6b8qZvplWizTNrKeEMgG6vFRGcUMUcbABJ0PkFexErwWs7C9q0AWQ==} + /@astrojs/markdown-remark/0.9.0: + resolution: {integrity: sha512-yagb3udzk+xCoGSfyzA7LBS7Q4P8swGQzA8XURFPaK1HfY9BKYasUvtaTYGA7G0r8KeDKAOVmwzYP74gxXGslg==} dependencies: '@astrojs/prism': 0.4.1 assert: 2.0.0 @@ -1066,14 +1066,14 @@ packages: engines: {node: '>=8'} dev: true - /astro/1.0.0-beta.8: - resolution: {integrity: sha512-hAoEEUy1JgHPYp3USk7jlpaaqi0Iv9mCd+k6QbFrs9Ju0oxrhfXd8IF24NYvD3JjS0MaKqKa5Sn5oo4mVdMnwA==} + /astro/1.0.0-beta.9: + resolution: {integrity: sha512-u5x5V5IyKp63JAjVKRIVmN2Hjel6oHH2Ju8EjqUwsNPrd9Se2EbVXf/+h7ZjsgNZBS4quy5CWyNK8tAlzuMW0Q==} engines: {node: ^14.15.0 || >=16.0.0, npm: '>=6.14.0'} hasBin: true dependencies: '@astrojs/compiler': 0.14.1 '@astrojs/language-server': 0.13.4 - '@astrojs/markdown-remark': 0.8.2 + '@astrojs/markdown-remark': 0.9.0 '@astrojs/prism': 0.4.1 '@astrojs/webapi': 0.11.0 '@babel/core': 7.17.9 @@ -1148,7 +1148,7 @@ packages: postcss: ^8.1.0 dependencies: browserslist: 4.20.2 - caniuse-lite: 1.0.30001328 + caniuse-lite: 1.0.30001331 fraction.js: 4.2.0 normalize-range: 0.1.2 picocolors: 1.0.0 @@ -1223,7 +1223,7 @@ packages: engines: {node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7} hasBin: true dependencies: - caniuse-lite: 1.0.30001328 + caniuse-lite: 1.0.30001331 electron-to-chromium: 1.4.107 escalade: 3.1.1 node-releases: 2.0.3 @@ -1263,8 +1263,8 @@ packages: engines: {node: '>=10'} dev: true - /caniuse-lite/1.0.30001328: - resolution: {integrity: sha512-Ue55jHkR/s4r00FLNiX+hGMMuwml/QGqqzVeMQ5thUewznU2EdULFvI3JR7JJid6OrjJNfFvHY2G2dIjmRaDDQ==} + /caniuse-lite/1.0.30001331: + resolution: {integrity: sha512-Y1xk6paHpUXKP/P6YjQv1xqyTbgAP05ycHBcRdQjTcyXlWol868sJJPlmk5ylOekw2BrucWes5jk+LvVd7WZ5Q==} dev: true /ccount/2.0.1: @@ -4110,8 +4110,8 @@ packages: resolution: {integrity: sha512-p3VT+cOEgxFsRRA9X4lkI1E+k2/CtnKtU4gcxyaCUreilL/vqI6CdZ3wxVUx3UOUg+gnUOQQcRI7BmSI656MYA==} dev: true - /regexp.prototype.flags/1.4.1: - resolution: {integrity: sha512-pMR7hBVUUGI7PMA37m2ofIdQCsomVnas+Jn5UPGAHQ+/LlwKm/aTLJHdasmHRzlfeZwHiAOaRSo2rbBDm3nNUQ==} + /regexp.prototype.flags/1.4.2: + resolution: {integrity: sha512-Ynz8fTQW5/1elh+jWU2EDDzeoNbD0OQ0R+D1VJU5ATOkUaro4A9YEkdN2ODQl/8UQFPPpZNw91fOcLFamM7Pww==} engines: {node: '>= 0.4'} dependencies: call-bind: 1.0.2 @@ -4519,7 +4519,7 @@ packages: get-intrinsic: 1.1.1 has-symbols: 1.0.3 internal-slot: 1.0.3 - regexp.prototype.flags: 1.4.1 + regexp.prototype.flags: 1.4.2 side-channel: 1.0.4 dev: true diff --git a/scripts/utils/getDocContent.js b/scripts/utils/getDocContent.js index 214d6085..376eb4ce 100644 --- a/scripts/utils/getDocContent.js +++ b/scripts/utils/getDocContent.js @@ -82,6 +82,6 @@ function addHashOnEachLine(content) { ); } -function addHeaderAnchor(id){ - return `<a class="header-anchor" href="#${kebabCase(id)}" aria-hidden="true" tabindex="-1">#</a>` -} \ No newline at end of file +function addHeaderAnchor(id) { + return `<a class="header-anchor" href="#${kebabCase(id)}" aria-hidden="true" tabindex="-1">#</a>`; +} diff --git a/src/components/FrameworkLabel.svelte b/src/components/FrameworkLabel.svelte index 2bb647f3..a74cc47a 100644 --- a/src/components/FrameworkLabel.svelte +++ b/src/components/FrameworkLabel.svelte @@ -1,7 +1,7 @@ <script> import FRAMEWORKS from '../frameworks'; export let id; - export let size = 20 + export let size = 20; $: framework = FRAMEWORKS.find((f) => f.id === id); </script> diff --git a/src/components/Title.svelte b/src/components/Title.svelte index 3d0250d7..07e49961 100644 --- a/src/components/Title.svelte +++ b/src/components/Title.svelte @@ -2,8 +2,8 @@ import kebabCase from 'lodash.kebabcase'; export let as = 'h1'; - export let content = ""; - $: id = kebabCase(content) + export let content = ''; + $: id = kebabCase(content); </script> <svelte:element this={as} {id}>{content}<a class="header-anchor" href={'#' + id} aria-hidden="true" tabindex="-1">#</a></svelte:element> diff --git a/src/frameworks.js b/src/frameworks.js index 34e7f467..f592712f 100644 --- a/src/frameworks.js +++ b/src/frameworks.js @@ -3,7 +3,7 @@ export default [ id: 'svelte', title: 'Svelte', ext: 'svelte', - img: "https://raw.githubusercontent.com/matschik/component-party/main/public/framework/svelte.svg", + img: 'https://raw.githubusercontent.com/matschik/component-party/main/public/framework/svelte.svg', eslint: { files: ['*.svelte'], processor: 'svelte3/svelte3', @@ -14,7 +14,7 @@ export default [ id: 'react', title: 'React', ext: 'jsx', - img: "https://raw.githubusercontent.com/matschik/component-party/main/public/framework/react.svg", + img: 'https://raw.githubusercontent.com/matschik/component-party/main/public/framework/react.svg', eslint: { files: ['**/react/*.jsx', '**/react/*.tsx'], extends: ['eslint:recommended', 'plugin:react/recommended', 'plugin:react/jsx-runtime'], @@ -29,7 +29,7 @@ export default [ id: 'vue3', title: 'Vue 3', ext: 'vue', - img: "https://raw.githubusercontent.com/matschik/component-party/main/public/framework/vue.svg", + img: 'https://raw.githubusercontent.com/matschik/component-party/main/public/framework/vue.svg', eslint: { files: ['*.vue'], env: { @@ -42,7 +42,7 @@ export default [ id: 'angular', title: 'Angular', ext: 'ts', - img: "https://raw.githubusercontent.com/matschik/component-party/main/public/framework/angular.svg", + img: 'https://raw.githubusercontent.com/matschik/component-party/main/public/framework/angular.svg', eslint: [ { files: ['**/angular/*.ts'], @@ -76,4 +76,4 @@ export default [ }, ], }, -]; \ No newline at end of file +]; diff --git a/src/pages/index.astro b/src/pages/index.astro index 6308a089..1b892ab6 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -2,7 +2,7 @@ import Layout from "../layouts/BaseLayout.svelte" import fs from 'node:fs/promises'; import Section from "../components/Section.astro" -import {packageDirectory} from 'pkg-dir'; +import { packageDirectory } from 'pkg-dir'; const rootDir = await packageDirectory() const contentURL = `${rootDir}/content` diff --git a/src/tree.js b/src/tree.js index 8c100807..30c529f3 100644 --- a/src/tree.js +++ b/src/tree.js @@ -1,110 +1,110 @@ export default [ - { - "id": "reactivity", - "title": "Reactivity", - "sections": [ - { - "id": "declare-state", - "title": "Declare state" - }, - { - "id": "update-state", - "title": "Update state" - }, - { - "id": "computed-state", - "title": "Computed state" - } - ] - }, - { - "id": "templating", - "title": "Templating", - "sections": [ - { - "id": "minimal-template", - "title": "Minimal template" - }, - { - "id": "styling", - "title": "Styling" - }, - { - "id": "loop", - "title": "Loop" - }, - { - "id": "event-click", - "title": "Event click" - }, - { - "id": "dom-ref", - "title": "Dom ref" - }, - { - "id": "conditional", - "title": "Conditional" - } - ] - }, - { - "id": "lifecycle", - "title": "Lifecycle", - "sections": [ - { - "id": "on-mount", - "title": "On mount" - }, - { - "id": "on-unmount", - "title": "On unmount" - } - ] - }, - { - "id": "component-composition", - "title": "Component composition", - "sections": [ - { - "id": "props", - "title": "Props" - } - ] - }, - { - "id": "form-input", - "title": "Form input", - "sections": [ - { - "id": "input-text", - "title": "Input text" - }, - { - "id": "checkbox", - "title": "Checkbox" - }, - { - "id": "radio", - "title": "Radio" - }, - { - "id": "select", - "title": "Select" - } - ] - }, - { - "id": "webapp-features", - "title": "Webapp features", - "sections": [ - { - "id": "routing", - "title": "Routing" - }, - { - "id": "router-link", - "title": "Router link" - } - ] - } -] \ No newline at end of file + { + id: 'reactivity', + title: 'Reactivity', + sections: [ + { + id: 'declare-state', + title: 'Declare state', + }, + { + id: 'update-state', + title: 'Update state', + }, + { + id: 'computed-state', + title: 'Computed state', + }, + ], + }, + { + id: 'templating', + title: 'Templating', + sections: [ + { + id: 'minimal-template', + title: 'Minimal template', + }, + { + id: 'styling', + title: 'Styling', + }, + { + id: 'loop', + title: 'Loop', + }, + { + id: 'event-click', + title: 'Event click', + }, + { + id: 'dom-ref', + title: 'Dom ref', + }, + { + id: 'conditional', + title: 'Conditional', + }, + ], + }, + { + id: 'lifecycle', + title: 'Lifecycle', + sections: [ + { + id: 'on-mount', + title: 'On mount', + }, + { + id: 'on-unmount', + title: 'On unmount', + }, + ], + }, + { + id: 'component-composition', + title: 'Component composition', + sections: [ + { + id: 'props', + title: 'Props', + }, + ], + }, + { + id: 'form-input', + title: 'Form input', + sections: [ + { + id: 'input-text', + title: 'Input text', + }, + { + id: 'checkbox', + title: 'Checkbox', + }, + { + id: 'radio', + title: 'Radio', + }, + { + id: 'select', + title: 'Select', + }, + ], + }, + { + id: 'webapp-features', + title: 'Webapp features', + sections: [ + { + id: 'routing', + title: 'Routing', + }, + { + id: 'router-link', + title: 'Router link', + }, + ], + }, +]; From 4df162f55fb1e334dc427efa4364c93217379f55 Mon Sep 17 00:00:00 2001 From: Mathieu Schimmerling <mathieu.schimmerling@protonmail.com> Date: Wed, 13 Apr 2022 17:59:34 +0200 Subject: [PATCH 11/11] add code viewer --- astro.config.mjs | 1 - public/hash-change-on-headings.js | 86 +++++++++++++++++----- src/components/DirectoryCodeFiles.svelte | 11 +++ src/components/File.astro | 28 ++++++++ src/components/FrameworkLabel.astro | 9 +++ src/components/FrameworkLabel.svelte | 12 ---- src/components/Section.astro | 92 ++++++++++++++---------- 7 files changed, 170 insertions(+), 69 deletions(-) create mode 100644 src/components/DirectoryCodeFiles.svelte create mode 100644 src/components/File.astro create mode 100644 src/components/FrameworkLabel.astro delete mode 100644 src/components/FrameworkLabel.svelte diff --git a/astro.config.mjs b/astro.config.mjs index e293da5a..311ca0cb 100644 --- a/astro.config.mjs +++ b/astro.config.mjs @@ -1,7 +1,6 @@ import { defineConfig } from 'astro/config'; import tailwind from '@astrojs/tailwind'; import svelte from '@astrojs/svelte'; -import generateIndexPage from './scripts/utils/generateIndexPage.js'; // https://astro.build/config export default defineConfig({ diff --git a/public/hash-change-on-headings.js b/public/hash-change-on-headings.js index 08a9674a..f16339c1 100644 --- a/public/hash-change-on-headings.js +++ b/public/hash-change-on-headings.js @@ -1,9 +1,39 @@ window.addEventListener('DOMContentLoaded', () => { hashChangeOnHeadingsModule(); frameworkDisplayModule(); + codeViewerModule(); }); +function codeViewerModule() { + function applyFileSelected(codeViewerId) { + for (const $fileSelected of document.querySelectorAll(`[data-codeviewer=${codeViewerId}][data-file-selected]`)) { + const filenameSelected = $fileSelected.getAttribute('data-file-selected'); + for (const $file of $fileSelected.querySelectorAll('[data-file]')) { + const filename = $file.getAttribute('data-file'); + $file.style.display = filename === filenameSelected ? 'block' : 'none'; + } + + for (const $fileButton of document.querySelectorAll(`[data-codeviewer=${codeViewerId}][data-file-button]`)) { + const filename = $fileButton.getAttribute('data-file-button'); + $fileButton.style.fontWeight = filename === filenameSelected ? 600 : 400; + } + } + } + + for (const $fileButton of document.querySelectorAll('[data-file-button]')) { + $fileButton.addEventListener('click', () => { + const filename = $fileButton.getAttribute('data-file-button'); + const codeViewerId = $fileButton.getAttribute('data-codeviewer'); + const target = document.querySelector(`[data-codeviewer=${codeViewerId}][data-file-selected]`); + target.setAttribute('data-file-selected', filename); + applyFileSelected(codeViewerId); + }); + } +} + function frameworkDisplayModule() { + const frameworks = ['react', 'svelte', 'angular', 'vue3']; + const $ = { fmwButtonHide: (framework) => document.querySelectorAll(framework ? `[data-framework-button-hide=${framework}]` : '[data-framework-button-hide]'), fmwButtonShow: (framework) => document.querySelectorAll(framework ? `[data-framework-button-show=${framework}]` : '[data-framework-button-show]'), @@ -19,35 +49,39 @@ function frameworkDisplayModule() { const frameworkIndex = hiddenFrameworksProxy.indexOf(framework); delete hiddenFrameworksProxy[frameworkIndex]; } - for (const $el of $.fmwContent(framework)) { - $el.style.display = 'block'; - } - for (const $el of $.fmwButtonShow(framework)) { - $el.style.display = 'none'; - } + apply(); }, hide() { if (!hiddenFrameworksProxy.includes(framework)) { hiddenFrameworksProxy.push(framework); } - for (const $el of $.fmwContent(framework)) { - $el.style.display = 'none'; - } - for (const $el of $.fmwButtonShow(framework)) { - $el.style.display = 'block'; - } + apply(); }, }; } - for (const $el of $.fmwButtonShow()) { - $el.style.display = 'none'; - } + function apply() { + for (const frameworkToHide of Object.values(hiddenFrameworksProxy)) { + for (const $el of $.fmwContent(frameworkToHide)) { + $el.style.display = 'none'; + } + for (const $el of $.fmwButtonShow(frameworkToHide)) { + $el.style.display = 'block'; + } + } - for (const hiddenFramework of Object.values(hiddenFrameworksProxy)) { - onFramework(hiddenFramework).hide(); + for (const frameworkToShow of arrayDiff(Object.values(hiddenFrameworksProxy), frameworks)) { + for (const $el of $.fmwContent(frameworkToShow)) { + $el.style.display = 'block'; + } + for (const $el of $.fmwButtonShow(frameworkToShow)) { + $el.style.display = 'none'; + } + } } + apply(); + for (const $fmwButton of $.fmwButtonHide()) { const framework = $fmwButton.getAttribute('data-framework-button-hide'); $fmwButton.addEventListener('click', () => { @@ -125,3 +159,21 @@ function createLocaleStorage(k) { }, }; } + +function arrayDiff(a1, a2) { + var diff = {}; + + for (var i = 0; i < a1.length; i++) { + diff[a1[i]] = true; + } + + for (var i = 0; i < a2.length; i++) { + if (diff[a2[i]]) { + delete diff[a2[i]]; + } else { + diff[a2[i]] = true; + } + } + + return Object.keys(diff); +} diff --git a/src/components/DirectoryCodeFiles.svelte b/src/components/DirectoryCodeFiles.svelte new file mode 100644 index 00000000..9a91ede0 --- /dev/null +++ b/src/components/DirectoryCodeFiles.svelte @@ -0,0 +1,11 @@ +<script> + export let files = []; +</script> + +<div class="flex space-x-1 items-center ml-0"> + {#each files as file} + <div class="bg-gray-800 py-1.5 px-3 text-xs rounded-t inline-block"> + {file.fileName} + </div> + {/each} +</div> diff --git a/src/components/File.astro b/src/components/File.astro new file mode 100644 index 00000000..eb714f20 --- /dev/null +++ b/src/components/File.astro @@ -0,0 +1,28 @@ +--- +import fs from 'node:fs/promises'; +import nodePath from "node:path" +import { Code, Markdown } from "astro/components" + +const { path } = Astro.props + +const parsedPath = nodePath.parse(path) +const ext = parsedPath.ext.split(".").pop() +const content = await fs.readFile(path, "utf-8") +--- + +<div> + { + ext === "md" ? ( + <Markdown set:html={content} /> + ) : ( + <> + <div class="bg-gray-800 py-1.5 px-3 text-xs rounded-t inline-block"> + {parsedPath.base} + </div> + <Code code={content} lang={ext} /> + </> + ) + } +</div> + + diff --git a/src/components/FrameworkLabel.astro b/src/components/FrameworkLabel.astro new file mode 100644 index 00000000..cc66f5c3 --- /dev/null +++ b/src/components/FrameworkLabel.astro @@ -0,0 +1,9 @@ +--- +import FRAMEWORKS from '../frameworks'; +const {id, size = 20} = Astro.props + +const framework = FRAMEWORKS.find((f) => f.id === id); +--- + +{framework?.img && <img src={framework.img} alt={framework.id} width={size} height={size} class="inline mr-[5px] mb-0 mt-0" />} +<span>{framework.title}</span> diff --git a/src/components/FrameworkLabel.svelte b/src/components/FrameworkLabel.svelte deleted file mode 100644 index a74cc47a..00000000 --- a/src/components/FrameworkLabel.svelte +++ /dev/null @@ -1,12 +0,0 @@ -<script> - import FRAMEWORKS from '../frameworks'; - export let id; - export let size = 20; - - $: framework = FRAMEWORKS.find((f) => f.id === id); -</script> - -{#if framework.img} - <img src={framework.img} alt={framework.id} width={size} height={size} class="inline mr-[5px] mb-0 mt-0" /> -{/if} -<span>{framework.title}</span> diff --git a/src/components/Section.astro b/src/components/Section.astro index c47c244a..6ece33f5 100644 --- a/src/components/Section.astro +++ b/src/components/Section.astro @@ -1,11 +1,11 @@ --- import Title from "../components/Title.svelte" -import FrameworkLabel from "../components/FrameworkLabel.svelte" +import FrameworkLabel from "../components/FrameworkLabel.astro" import fs from 'node:fs/promises'; import kebabCase from 'lodash.kebabcase'; -import { Code, Markdown } from "astro/components" import nodePath from "node:path" import FRAMEWORKS from '../frameworks'; +import { Code } from "astro/components" const { path: sectionPath } = Astro.props @@ -60,50 +60,64 @@ for(const dirName of subSectionDirNames){ frameworkSections }) } ---- +function getSectionFiles(section, framework){ + return section.frameworkSections.find((f) => f.dirName === framework.id).files +} +--- <Title as="h1" content={dirNameToTitle(sectionId)} /> -{sections.map((section) => - ( +{ + sections.map((section) => ( + <> + <Title as="h2" content={section.title} /> + {FRAMEWORKS.map((framework) => ( <> - <Title as="h2" content={section.title}/> - {FRAMEWORKS.map((framework) => ( + <div data-framework-content={framework.id} style="display: none;"> + <div role="button" data-framework-button-hide={framework.id}> + <h3 class="hover:bg-gray-800 transition-all rounded py-1 px-2"> + <FrameworkLabel id={framework.id} /> + </h3> + </div> + <div> + {section.frameworkSections.find( + (f) => f.dirName === framework.id + ) && ( <> - <div data-framework-content={framework.id}> - <div role="button" data-framework-button-hide={framework.id}> - <h3 class="hover:bg-gray-800 transition-all rounded py-1 px-2"> - <FrameworkLabel id={framework.id} /> - </h3> - </div> - <div> - {section.frameworkSections.find(f => f.dirName === framework.id) ? - section.frameworkSections.find(f => f.dirName === framework.id).files.map((file) => ( - file.ext === 'md' - ? <Markdown set:html={file.content} /> - : - <div> - <div class="bg-gray-800 py-1.5 px-3 text-xs rounded-t inline-block"> - {file.fileName} - </div> - <Code code={file.content} lang={file.ext} /> - </div> - )) - : - <pre>Oops, missing snippet ! <a href={`https://github.com/matschik/component-party/tree/main/content/${sectionId}/${section.dirName}`}>You can help us by contributing on Github.</a></pre> - } + <div class="flex space-x-1 items-center ml-0"> + {getSectionFiles(section, framework).map((file, index) =>( + <button data-codeviewer={`${section.id}-${framework.id}`} data-file-button={file.fileName} class="bg-gray-800 py-1.5 px-3 text-xs rounded-t inline-block" style={`font-weight: ${index === 0 ? 600 : 400};`}> + {file.fileName} + </button> + ))} + </div> + <div data-codeviewer={`${section.id}-${framework.id}`} data-file-selected={getSectionFiles(section, framework)[0].fileName}> + {getSectionFiles(section, framework).map((file, index) => ( + <div data-file={file.fileName} style={`display: ${index === 0 ? "block" : "none"};`}> + <Code code={file.content} lang={file.ext} /> </div> - </div> + ))} + </div> </> - ))} - <div class="flex items-center space-x-2" style="margin-top: 1rem;"> - {FRAMEWORKS.map((framework) => ( - <button data-framework-button-show={framework.id} title={`Display ${framework.title}`} class="text-sm rounded border border-gray-700 px-3 py-1 border-opacity-50 bg-gray-900 hover:bg-gray-800 transition-all"> - <FrameworkLabel id={framework.id} size={15} /> - </button> - ))} + + )} </div> + </div> </> - ) -)} \ No newline at end of file + ))} + <div class="flex items-center space-x-2" style="margin-top: 1rem;"> + {FRAMEWORKS.map((framework) => ( + <button + data-framework-button-show={framework.id} + title={`Display ${framework.title}`} + class="text-sm rounded border border-gray-700 px-3 py-1 border-opacity-50 bg-gray-900 hover:bg-gray-800 transition-all" + style="display: none;" + > + <FrameworkLabel id={framework.id} size={15} /> + </button> + ))} + </div> + </> + )) +}