mirror of
https://github.com/lainbo/component-party.git
synced 2026-04-05 13:09:03 +08:00
Upgrade dependencies: Astro 1.0, fix Solid & Qwik examples (#106)
* feat: upgrade Astro to 1.0 and other dependencies * chore: run prettier, fix lint on solid AnswerButton
This commit is contained in:
Mathieu Schimmerling
committed by
GitHub
GitHub
parent
ecf33962e2
commit
4477d77dfc
12
.vscode/extensions.json
vendored
12
.vscode/extensions.json
vendored
@@ -1,12 +1,4 @@
|
|||||||
{
|
{
|
||||||
"recommendations": [
|
"recommendations": ["astro-build.astro-vscode", "bradlc.vscode-tailwindcss", "esbenp.prettier-vscode", "dbaeumer.vscode-eslint", "svelte.svelte-vscode", "Vue.volar"],
|
||||||
"astro-build.astro-vscode",
|
|
||||||
"bradlc.vscode-tailwindcss",
|
|
||||||
"esbenp.prettier-vscode",
|
|
||||||
"dbaeumer.vscode-eslint",
|
|
||||||
"svelte.svelte-vscode",
|
|
||||||
"streetsidesoftware.code-spell-checker",
|
|
||||||
"Vue.volar"
|
|
||||||
],
|
|
||||||
"unwantedRecommendations": []
|
"unwantedRecommendations": []
|
||||||
}
|
}
|
||||||
|
|||||||
2
.vscode/launch.json
vendored
2
.vscode/launch.json
vendored
@@ -12,4 +12,4 @@
|
|||||||
"webRoot": "${workspaceFolder}"
|
"webRoot": "${workspaceFolder}"
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
|
|||||||
12
.vscode/settings.json
vendored
12
.vscode/settings.json
vendored
@@ -8,15 +8,5 @@
|
|||||||
"[svelte]": {
|
"[svelte]": {
|
||||||
"editor.defaultFormatter": "svelte.svelte-vscode"
|
"editor.defaultFormatter": "svelte.svelte-vscode"
|
||||||
},
|
},
|
||||||
"cSpell.words": [
|
"cSpell.words": ["alpinejs", "astro", "astrojs", "matschik", "mdast", "pnpm", "qwik", "shiki", "webp"]
|
||||||
"alpinejs",
|
|
||||||
"astro",
|
|
||||||
"astrojs",
|
|
||||||
"matschik",
|
|
||||||
"mdast",
|
|
||||||
"pnpm",
|
|
||||||
"qwik",
|
|
||||||
"shiki",
|
|
||||||
"webp"
|
|
||||||
]
|
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -9,7 +9,6 @@ This site is built with [Astro](https://docs.astro.build). Site content is writt
|
|||||||
3. Install the ESLint plugin associated to the framework
|
3. Install the ESLint plugin associated to the framework
|
||||||
4. In `src/frameworks.mjs`, add a new entry with SVG link and ESLint configuration
|
4. In `src/frameworks.mjs`, add a new entry with SVG link and ESLint configuration
|
||||||
|
|
||||||
|
|
||||||
## Improve website
|
## Improve website
|
||||||
|
|
||||||
For local development, [pnpm](https://pnpm.io/) is preferred as package manager:
|
For local development, [pnpm](https://pnpm.io/) is preferred as package manager:
|
||||||
|
|||||||
451
README.md
451
README.md
@@ -54,34 +54,34 @@ How do we solve this ? Developers love having framework overview by examples. It
|
|||||||
<b>React</b>
|
<b>React</b>
|
||||||
<img src="https://us-central1-progress-markdown.cloudfunctions.net/progress/100" /></summary>
|
<img src="https://us-central1-progress-markdown.cloudfunctions.net/progress/100" /></summary>
|
||||||
|
|
||||||
* [x] Reactivity
|
- [x] Reactivity
|
||||||
* [x] Declare state
|
- [x] Declare state
|
||||||
* [x] Update state
|
- [x] Update state
|
||||||
* [x] Computed state
|
- [x] Computed state
|
||||||
* [x] Templating
|
- [x] Templating
|
||||||
* [x] Minimal template
|
- [x] Minimal template
|
||||||
* [x] Styling
|
- [x] Styling
|
||||||
* [x] Loop
|
- [x] Loop
|
||||||
* [x] Event click
|
- [x] Event click
|
||||||
* [x] Dom ref
|
- [x] Dom ref
|
||||||
* [x] Conditional
|
- [x] Conditional
|
||||||
* [x] Lifecycle
|
- [x] Lifecycle
|
||||||
* [x] On mount
|
- [x] On mount
|
||||||
* [x] On unmount
|
- [x] On unmount
|
||||||
* [x] Component composition
|
- [x] Component composition
|
||||||
* [x] Props
|
- [x] Props
|
||||||
* [x] Emit to parent
|
- [x] Emit to parent
|
||||||
* [x] Slot
|
- [x] Slot
|
||||||
* [x] Slot fallback
|
- [x] Slot fallback
|
||||||
* [x] Form input
|
- [x] Form input
|
||||||
* [x] Input text
|
- [x] Input text
|
||||||
* [x] Checkbox
|
- [x] Checkbox
|
||||||
* [x] Radio
|
- [x] Radio
|
||||||
* [x] Select
|
- [x] Select
|
||||||
* [x] Webapp features
|
- [x] Webapp features
|
||||||
* [x] Fetch data
|
- [x] Fetch data
|
||||||
* [x] Router link
|
- [x] Router link
|
||||||
* [x] Routing
|
- [x] Routing
|
||||||
|
|
||||||
</details><details>
|
</details><details>
|
||||||
<summary>
|
<summary>
|
||||||
@@ -89,34 +89,34 @@ How do we solve this ? Developers love having framework overview by examples. It
|
|||||||
<b>Vue 3</b>
|
<b>Vue 3</b>
|
||||||
<img src="https://us-central1-progress-markdown.cloudfunctions.net/progress/100" /></summary>
|
<img src="https://us-central1-progress-markdown.cloudfunctions.net/progress/100" /></summary>
|
||||||
|
|
||||||
* [x] Reactivity
|
- [x] Reactivity
|
||||||
* [x] Declare state
|
- [x] Declare state
|
||||||
* [x] Update state
|
- [x] Update state
|
||||||
* [x] Computed state
|
- [x] Computed state
|
||||||
* [x] Templating
|
- [x] Templating
|
||||||
* [x] Minimal template
|
- [x] Minimal template
|
||||||
* [x] Styling
|
- [x] Styling
|
||||||
* [x] Loop
|
- [x] Loop
|
||||||
* [x] Event click
|
- [x] Event click
|
||||||
* [x] Dom ref
|
- [x] Dom ref
|
||||||
* [x] Conditional
|
- [x] Conditional
|
||||||
* [x] Lifecycle
|
- [x] Lifecycle
|
||||||
* [x] On mount
|
- [x] On mount
|
||||||
* [x] On unmount
|
- [x] On unmount
|
||||||
* [x] Component composition
|
- [x] Component composition
|
||||||
* [x] Props
|
- [x] Props
|
||||||
* [x] Emit to parent
|
- [x] Emit to parent
|
||||||
* [x] Slot
|
- [x] Slot
|
||||||
* [x] Slot fallback
|
- [x] Slot fallback
|
||||||
* [x] Form input
|
- [x] Form input
|
||||||
* [x] Input text
|
- [x] Input text
|
||||||
* [x] Checkbox
|
- [x] Checkbox
|
||||||
* [x] Radio
|
- [x] Radio
|
||||||
* [x] Select
|
- [x] Select
|
||||||
* [x] Webapp features
|
- [x] Webapp features
|
||||||
* [x] Fetch data
|
- [x] Fetch data
|
||||||
* [x] Router link
|
- [x] Router link
|
||||||
* [x] Routing
|
- [x] Routing
|
||||||
|
|
||||||
</details><details>
|
</details><details>
|
||||||
<summary>
|
<summary>
|
||||||
@@ -124,34 +124,34 @@ How do we solve this ? Developers love having framework overview by examples. It
|
|||||||
<b>Angular</b>
|
<b>Angular</b>
|
||||||
<img src="https://us-central1-progress-markdown.cloudfunctions.net/progress/100" /></summary>
|
<img src="https://us-central1-progress-markdown.cloudfunctions.net/progress/100" /></summary>
|
||||||
|
|
||||||
* [x] Reactivity
|
- [x] Reactivity
|
||||||
* [x] Declare state
|
- [x] Declare state
|
||||||
* [x] Update state
|
- [x] Update state
|
||||||
* [x] Computed state
|
- [x] Computed state
|
||||||
* [x] Templating
|
- [x] Templating
|
||||||
* [x] Minimal template
|
- [x] Minimal template
|
||||||
* [x] Styling
|
- [x] Styling
|
||||||
* [x] Loop
|
- [x] Loop
|
||||||
* [x] Event click
|
- [x] Event click
|
||||||
* [x] Dom ref
|
- [x] Dom ref
|
||||||
* [x] Conditional
|
- [x] Conditional
|
||||||
* [x] Lifecycle
|
- [x] Lifecycle
|
||||||
* [x] On mount
|
- [x] On mount
|
||||||
* [x] On unmount
|
- [x] On unmount
|
||||||
* [x] Component composition
|
- [x] Component composition
|
||||||
* [x] Props
|
- [x] Props
|
||||||
* [x] Emit to parent
|
- [x] Emit to parent
|
||||||
* [x] Slot
|
- [x] Slot
|
||||||
* [x] Slot fallback
|
- [x] Slot fallback
|
||||||
* [x] Form input
|
- [x] Form input
|
||||||
* [x] Input text
|
- [x] Input text
|
||||||
* [x] Checkbox
|
- [x] Checkbox
|
||||||
* [x] Radio
|
- [x] Radio
|
||||||
* [x] Select
|
- [x] Select
|
||||||
* [x] Webapp features
|
- [x] Webapp features
|
||||||
* [x] Fetch data
|
- [x] Fetch data
|
||||||
* [x] Router link
|
- [x] Router link
|
||||||
* [x] Routing
|
- [x] Routing
|
||||||
|
|
||||||
</details><details>
|
</details><details>
|
||||||
<summary>
|
<summary>
|
||||||
@@ -159,34 +159,34 @@ How do we solve this ? Developers love having framework overview by examples. It
|
|||||||
<b>SolidJS</b>
|
<b>SolidJS</b>
|
||||||
<img src="https://us-central1-progress-markdown.cloudfunctions.net/progress/100" /></summary>
|
<img src="https://us-central1-progress-markdown.cloudfunctions.net/progress/100" /></summary>
|
||||||
|
|
||||||
* [x] Reactivity
|
- [x] Reactivity
|
||||||
* [x] Declare state
|
- [x] Declare state
|
||||||
* [x] Update state
|
- [x] Update state
|
||||||
* [x] Computed state
|
- [x] Computed state
|
||||||
* [x] Templating
|
- [x] Templating
|
||||||
* [x] Minimal template
|
- [x] Minimal template
|
||||||
* [x] Styling
|
- [x] Styling
|
||||||
* [x] Loop
|
- [x] Loop
|
||||||
* [x] Event click
|
- [x] Event click
|
||||||
* [x] Dom ref
|
- [x] Dom ref
|
||||||
* [x] Conditional
|
- [x] Conditional
|
||||||
* [x] Lifecycle
|
- [x] Lifecycle
|
||||||
* [x] On mount
|
- [x] On mount
|
||||||
* [x] On unmount
|
- [x] On unmount
|
||||||
* [x] Component composition
|
- [x] Component composition
|
||||||
* [x] Props
|
- [x] Props
|
||||||
* [x] Emit to parent
|
- [x] Emit to parent
|
||||||
* [x] Slot
|
- [x] Slot
|
||||||
* [x] Slot fallback
|
- [x] Slot fallback
|
||||||
* [x] Form input
|
- [x] Form input
|
||||||
* [x] Input text
|
- [x] Input text
|
||||||
* [x] Checkbox
|
- [x] Checkbox
|
||||||
* [x] Radio
|
- [x] Radio
|
||||||
* [x] Select
|
- [x] Select
|
||||||
* [x] Webapp features
|
- [x] Webapp features
|
||||||
* [x] Fetch data
|
- [x] Fetch data
|
||||||
* [x] Router link
|
- [x] Router link
|
||||||
* [x] Routing
|
- [x] Routing
|
||||||
|
|
||||||
</details><details>
|
</details><details>
|
||||||
<summary>
|
<summary>
|
||||||
@@ -194,34 +194,34 @@ How do we solve this ? Developers love having framework overview by examples. It
|
|||||||
<b>Lit</b>
|
<b>Lit</b>
|
||||||
<img src="https://us-central1-progress-markdown.cloudfunctions.net/progress/100" /></summary>
|
<img src="https://us-central1-progress-markdown.cloudfunctions.net/progress/100" /></summary>
|
||||||
|
|
||||||
* [x] Reactivity
|
- [x] Reactivity
|
||||||
* [x] Declare state
|
- [x] Declare state
|
||||||
* [x] Update state
|
- [x] Update state
|
||||||
* [x] Computed state
|
- [x] Computed state
|
||||||
* [x] Templating
|
- [x] Templating
|
||||||
* [x] Minimal template
|
- [x] Minimal template
|
||||||
* [x] Styling
|
- [x] Styling
|
||||||
* [x] Loop
|
- [x] Loop
|
||||||
* [x] Event click
|
- [x] Event click
|
||||||
* [x] Dom ref
|
- [x] Dom ref
|
||||||
* [x] Conditional
|
- [x] Conditional
|
||||||
* [x] Lifecycle
|
- [x] Lifecycle
|
||||||
* [x] On mount
|
- [x] On mount
|
||||||
* [x] On unmount
|
- [x] On unmount
|
||||||
* [x] Component composition
|
- [x] Component composition
|
||||||
* [x] Props
|
- [x] Props
|
||||||
* [x] Emit to parent
|
- [x] Emit to parent
|
||||||
* [x] Slot
|
- [x] Slot
|
||||||
* [x] Slot fallback
|
- [x] Slot fallback
|
||||||
* [x] Form input
|
- [x] Form input
|
||||||
* [x] Input text
|
- [x] Input text
|
||||||
* [x] Checkbox
|
- [x] Checkbox
|
||||||
* [x] Radio
|
- [x] Radio
|
||||||
* [x] Select
|
- [x] Select
|
||||||
* [x] Webapp features
|
- [x] Webapp features
|
||||||
* [x] Fetch data
|
- [x] Fetch data
|
||||||
* [x] Router link
|
- [x] Router link
|
||||||
* [x] Routing
|
- [x] Routing
|
||||||
|
|
||||||
</details><details>
|
</details><details>
|
||||||
<summary>
|
<summary>
|
||||||
@@ -229,34 +229,34 @@ How do we solve this ? Developers love having framework overview by examples. It
|
|||||||
<b>Ember</b>
|
<b>Ember</b>
|
||||||
<img src="https://us-central1-progress-markdown.cloudfunctions.net/progress/100" /></summary>
|
<img src="https://us-central1-progress-markdown.cloudfunctions.net/progress/100" /></summary>
|
||||||
|
|
||||||
* [x] Reactivity
|
- [x] Reactivity
|
||||||
* [x] Declare state
|
- [x] Declare state
|
||||||
* [x] Update state
|
- [x] Update state
|
||||||
* [x] Computed state
|
- [x] Computed state
|
||||||
* [x] Templating
|
- [x] Templating
|
||||||
* [x] Minimal template
|
- [x] Minimal template
|
||||||
* [x] Styling
|
- [x] Styling
|
||||||
* [x] Loop
|
- [x] Loop
|
||||||
* [x] Event click
|
- [x] Event click
|
||||||
* [x] Dom ref
|
- [x] Dom ref
|
||||||
* [x] Conditional
|
- [x] Conditional
|
||||||
* [x] Lifecycle
|
- [x] Lifecycle
|
||||||
* [x] On mount
|
- [x] On mount
|
||||||
* [x] On unmount
|
- [x] On unmount
|
||||||
* [x] Component composition
|
- [x] Component composition
|
||||||
* [x] Props
|
- [x] Props
|
||||||
* [x] Emit to parent
|
- [x] Emit to parent
|
||||||
* [x] Slot
|
- [x] Slot
|
||||||
* [x] Slot fallback
|
- [x] Slot fallback
|
||||||
* [x] Form input
|
- [x] Form input
|
||||||
* [x] Input text
|
- [x] Input text
|
||||||
* [x] Checkbox
|
- [x] Checkbox
|
||||||
* [x] Radio
|
- [x] Radio
|
||||||
* [x] Select
|
- [x] Select
|
||||||
* [x] Webapp features
|
- [x] Webapp features
|
||||||
* [x] Fetch data
|
- [x] Fetch data
|
||||||
* [x] Router link
|
- [x] Router link
|
||||||
* [x] Routing
|
- [x] Routing
|
||||||
|
|
||||||
</details><details>
|
</details><details>
|
||||||
<summary>
|
<summary>
|
||||||
@@ -264,34 +264,34 @@ How do we solve this ? Developers love having framework overview by examples. It
|
|||||||
<b>Alpine</b>
|
<b>Alpine</b>
|
||||||
<img src="https://us-central1-progress-markdown.cloudfunctions.net/progress/100" /></summary>
|
<img src="https://us-central1-progress-markdown.cloudfunctions.net/progress/100" /></summary>
|
||||||
|
|
||||||
* [x] Reactivity
|
- [x] Reactivity
|
||||||
* [x] Declare state
|
- [x] Declare state
|
||||||
* [x] Update state
|
- [x] Update state
|
||||||
* [x] Computed state
|
- [x] Computed state
|
||||||
* [x] Templating
|
- [x] Templating
|
||||||
* [x] Minimal template
|
- [x] Minimal template
|
||||||
* [x] Styling
|
- [x] Styling
|
||||||
* [x] Loop
|
- [x] Loop
|
||||||
* [x] Event click
|
- [x] Event click
|
||||||
* [x] Dom ref
|
- [x] Dom ref
|
||||||
* [x] Conditional
|
- [x] Conditional
|
||||||
* [x] Lifecycle
|
- [x] Lifecycle
|
||||||
* [x] On mount
|
- [x] On mount
|
||||||
* [x] On unmount
|
- [x] On unmount
|
||||||
* [x] Component composition
|
- [x] Component composition
|
||||||
* [x] Props
|
- [x] Props
|
||||||
* [x] Emit to parent
|
- [x] Emit to parent
|
||||||
* [x] Slot
|
- [x] Slot
|
||||||
* [x] Slot fallback
|
- [x] Slot fallback
|
||||||
* [x] Form input
|
- [x] Form input
|
||||||
* [x] Input text
|
- [x] Input text
|
||||||
* [x] Checkbox
|
- [x] Checkbox
|
||||||
* [x] Radio
|
- [x] Radio
|
||||||
* [x] Select
|
- [x] Select
|
||||||
* [x] Webapp features
|
- [x] Webapp features
|
||||||
* [x] Fetch data
|
- [x] Fetch data
|
||||||
* [x] Router link
|
- [x] Router link
|
||||||
* [x] Routing
|
- [x] Routing
|
||||||
|
|
||||||
</details><details>
|
</details><details>
|
||||||
<summary>
|
<summary>
|
||||||
@@ -299,34 +299,34 @@ How do we solve this ? Developers love having framework overview by examples. It
|
|||||||
<b>Qwik</b>
|
<b>Qwik</b>
|
||||||
<img src="https://us-central1-progress-markdown.cloudfunctions.net/progress/32" /></summary>
|
<img src="https://us-central1-progress-markdown.cloudfunctions.net/progress/32" /></summary>
|
||||||
|
|
||||||
* [x] Reactivity
|
- [x] Reactivity
|
||||||
* [x] Declare state
|
- [x] Declare state
|
||||||
* [x] Update state
|
- [x] Update state
|
||||||
* [x] Computed state
|
- [x] Computed state
|
||||||
* [ ] Templating
|
- [ ] Templating
|
||||||
* [x] Minimal template
|
- [x] Minimal template
|
||||||
* [x] Styling
|
- [x] Styling
|
||||||
* [x] Loop
|
- [x] Loop
|
||||||
* [x] Event click
|
- [x] Event click
|
||||||
* [ ] Dom ref
|
- [ ] Dom ref
|
||||||
* [ ] Conditional
|
- [ ] Conditional
|
||||||
* [ ] Lifecycle
|
- [ ] Lifecycle
|
||||||
* [ ] On mount
|
- [ ] On mount
|
||||||
* [ ] On unmount
|
- [ ] On unmount
|
||||||
* [ ] Component composition
|
- [ ] Component composition
|
||||||
* [ ] Props
|
- [ ] Props
|
||||||
* [ ] Emit to parent
|
- [ ] Emit to parent
|
||||||
* [ ] Slot
|
- [ ] Slot
|
||||||
* [ ] Slot fallback
|
- [ ] Slot fallback
|
||||||
* [ ] Form input
|
- [ ] Form input
|
||||||
* [ ] Input text
|
- [ ] Input text
|
||||||
* [ ] Checkbox
|
- [ ] Checkbox
|
||||||
* [ ] Radio
|
- [ ] Radio
|
||||||
* [ ] Select
|
- [ ] Select
|
||||||
* [ ] Webapp features
|
- [ ] Webapp features
|
||||||
* [ ] Fetch data
|
- [ ] Fetch data
|
||||||
* [ ] Router link
|
- [ ] Router link
|
||||||
* [ ] Routing
|
- [ ] Routing
|
||||||
|
|
||||||
</details>
|
</details>
|
||||||
|
|
||||||
@@ -353,7 +353,7 @@ This project requires Node.js to be `v14.0.0` or higher, because we use new Java
|
|||||||
## 🧑💻 Contributors
|
## 🧑💻 Contributors
|
||||||
|
|
||||||
This project exists thanks to all the people who contribute. \[[Contribute](CONTRIBUTING.md)].
|
This project exists thanks to all the people who contribute. \[[Contribute](CONTRIBUTING.md)].
|
||||||
[](https://github.com/matschik/component-party/graphs/contributors)
|
[](https://github.com/matschik/component-party/graphs/contributors)
|
||||||
|
|
||||||
## ⚖️ License
|
## ⚖️ License
|
||||||
|
|
||||||
@@ -362,5 +362,4 @@ MIT. Made with 💖
|
|||||||
<!-- variables -->
|
<!-- variables -->
|
||||||
|
|
||||||
[gitpod-src]: https://shields.io/badge/Open%20in-Gitpod-green?logo=Gitpod
|
[gitpod-src]: https://shields.io/badge/Open%20in-Gitpod-green?logo=Gitpod
|
||||||
|
|
||||||
[gitpod-href]: https://gitpod.io/#https://github.com/matschik/component-party
|
[gitpod-href]: https://gitpod.io/#https://github.com/matschik/component-party
|
||||||
|
|||||||
@@ -1,5 +1,5 @@
|
|||||||
import { component$ } from '@builder.io/qwik';
|
import { component$ } from '@builder.io/qwik';
|
||||||
|
|
||||||
export const HelloWorld = component$(() => {
|
export const HelloWorld = component$(() => {
|
||||||
return <div>Hello World</div>;
|
return <div>Hello World</div>;
|
||||||
});
|
});
|
||||||
|
|||||||
@@ -1,15 +1,16 @@
|
|||||||
import { component$, Host, useStyles$ } from '@builder.io/qwik';
|
import { component$, useStyles$ } from '@builder.io/qwik';
|
||||||
|
|
||||||
export const App = component$(() => {
|
export const App = component$(() => {
|
||||||
useStyles$(`
|
useStyles$(`
|
||||||
.title {
|
.title {
|
||||||
color: red;
|
color: red;
|
||||||
}
|
}
|
||||||
`);
|
`);
|
||||||
return (
|
|
||||||
<Host>
|
return (
|
||||||
<h1 class="title">I am red</h1>
|
<>
|
||||||
<button style={{ 'font-size': '10rem' }}>I am a button</button>
|
<h1 class="title">I am red</h1>
|
||||||
</Host>
|
<button style={{ 'font-size': '10rem' }}>I am a button</button>
|
||||||
);
|
</>
|
||||||
|
);
|
||||||
});
|
});
|
||||||
|
|||||||
@@ -1,14 +1,14 @@
|
|||||||
import { component$, Host } from '@builder.io/qwik';
|
import { component$ } from '@builder.io/qwik';
|
||||||
|
|
||||||
export const Colors = component$(() => {
|
export const Colors = component$(() => {
|
||||||
const colors = ['red', 'green', 'blue'];
|
const colors = ['red', 'green', 'blue'];
|
||||||
return (
|
return (
|
||||||
<Host>
|
<>
|
||||||
<ul>
|
<ul>
|
||||||
{colors.map((color) => (
|
{colors.map((color) => (
|
||||||
<li key={color}>{color}</li>
|
<li key={color}>{color}</li>
|
||||||
))}
|
))}
|
||||||
</ul>
|
</ul>
|
||||||
</Host>
|
</>
|
||||||
);
|
);
|
||||||
});
|
});
|
||||||
|
|||||||
@@ -1,11 +1,11 @@
|
|||||||
import { component$, useStore, Host } from '@builder.io/qwik';
|
import { component$, useStore } from '@builder.io/qwik';
|
||||||
|
|
||||||
export const Counter = component$(() => {
|
export const Counter = component$(() => {
|
||||||
const store = useStore({ count: 0 });
|
const store = useStore({ count: 0 });
|
||||||
return (
|
return (
|
||||||
<Host>
|
<>
|
||||||
<p>Counter: {store.count}</p>
|
<p>Counter: {store.count}</p>
|
||||||
<button onClick$={() => store.count++}>Increment</button>
|
<button onClick$={() => store.count++}>Increment</button>
|
||||||
</Host>
|
</>
|
||||||
);
|
);
|
||||||
});
|
});
|
||||||
|
|||||||
@@ -7,7 +7,7 @@
|
|||||||
time = new Date().toLocaleTimeString();
|
time = new Date().toLocaleTimeString();
|
||||||
}, 1000);
|
}, 1000);
|
||||||
|
|
||||||
onDestroy(() => clearInterval(timer) );
|
onDestroy(() => clearInterval(timer));
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<p>Current time: {time}</p>
|
<p>Current time: {time}</p>
|
||||||
|
|||||||
@@ -13,5 +13,5 @@ onUnmounted(() => {
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<p>Current time: {{time}}</p>
|
<p>Current time: {{ time }}</p>
|
||||||
</template>
|
</template>
|
||||||
|
|||||||
@@ -1,8 +1,8 @@
|
|||||||
export default function AnswerButton(props) {
|
export default function AnswerButton(props) {
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<button onClick={props.onYes}>YES</button>
|
<button onClick={() => props.onYes()}>YES</button>
|
||||||
<button onClick={props.onNo}>NO</button>
|
<button onClick={() => props.onNo()}>NO</button>
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,4 +1,5 @@
|
|||||||
<div x-data="
|
<div
|
||||||
|
x-data="
|
||||||
function fetchUsers() {
|
function fetchUsers() {
|
||||||
return {
|
return {
|
||||||
users: null,
|
users: null,
|
||||||
@@ -16,22 +17,23 @@
|
|||||||
},
|
},
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
">
|
"
|
||||||
<template x-if="isLoading">
|
>
|
||||||
<p>Loading...</p>
|
<template x-if="isLoading">
|
||||||
</template>
|
<p>Loading...</p>
|
||||||
|
</template>
|
||||||
|
|
||||||
<template x-if="error">
|
<template x-if="error">
|
||||||
<p>Error fetching users</p>
|
<p>Error fetching users</p>
|
||||||
</template>
|
</template>
|
||||||
<template x-if="!error">
|
<template x-if="!error">
|
||||||
<ul>
|
<ul>
|
||||||
<template x-for="user in users">
|
<template x-for="user in users">
|
||||||
<li>
|
<li>
|
||||||
<img :src="user.picture.thumbnail" :alt="`picture of ${user.name.first} ${user.name.last}`">
|
<img :src="user.picture.thumbnail" :alt="`picture of ${user.name.first} ${user.name.last}`" />
|
||||||
<p x-text="`${user.name.first} ${user.name.last}`"></p>
|
<p x-text="`${user.name.first} ${user.name.last}`"></p>
|
||||||
</li>
|
</li>
|
||||||
</template>
|
</template>
|
||||||
</ul>
|
</ul>
|
||||||
</template>
|
</template>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -1,22 +1,22 @@
|
|||||||
{{#let (this.fetchUsers) as |request|}}
|
{{#let (this.fetchUsers) as |request|}}
|
||||||
{{#if request.isLoading}}
|
{{#if request.isLoading}}
|
||||||
|
|
||||||
<p>Fetching users...</p>
|
<p>Fetching users...</p>
|
||||||
|
|
||||||
{{else if request.error}}
|
{{else if request.error}}
|
||||||
|
|
||||||
<p>An error occurred while fetching users</p>
|
<p>An error occurred while fetching users</p>
|
||||||
|
|
||||||
{{else}}
|
{{else}}
|
||||||
|
|
||||||
<ul>
|
<ul>
|
||||||
{{#each request.users as |user|}}
|
{{#each request.users as |user|}}
|
||||||
<li>
|
<li>
|
||||||
<img src={{user.picture.thumbnail}} alt="user">
|
<img src={{user.picture.thumbnail}} alt='user' />
|
||||||
<p>{{user.name.first}} {{user.name.last}}</p>
|
<p>{{user.name.first}} {{user.name.last}}</p>
|
||||||
</li>
|
</li>
|
||||||
{{/each}}
|
{{/each}}
|
||||||
</ul>
|
</ul>
|
||||||
|
|
||||||
{{/if}}
|
{{/if}}
|
||||||
{{/let}}
|
{{/let}}
|
||||||
@@ -2,37 +2,37 @@ import { tracked } from '@glimmer/tracking';
|
|||||||
import Component from '@glimmer/component';
|
import Component from '@glimmer/component';
|
||||||
|
|
||||||
export default class Demo extends Component {
|
export default class Demo extends Component {
|
||||||
fetchUsers = () => getUsers();
|
fetchUsers = () => getUsers();
|
||||||
}
|
}
|
||||||
|
|
||||||
class State {
|
class State {
|
||||||
@tracked isLoading = false;
|
@tracked isLoading = false;
|
||||||
@tracked error = null;
|
@tracked error = null;
|
||||||
@tracked data = null;
|
@tracked data = null;
|
||||||
}
|
}
|
||||||
|
|
||||||
function getUsers() {
|
function getUsers() {
|
||||||
let state = new State();
|
let state = new State();
|
||||||
|
|
||||||
async function fetchData() {
|
async function fetchData() {
|
||||||
state.isLoading = true;
|
state.isLoading = true;
|
||||||
|
|
||||||
try {
|
try {
|
||||||
let response = await fetch('https://randomuser.me/api/?results=3');
|
let response = await fetch('https://randomuser.me/api/?results=3');
|
||||||
let { results: users } = await response.json();
|
let { results: users } = await response.json();
|
||||||
state.data = users;
|
state.data = users;
|
||||||
state.error = null;
|
state.error = null;
|
||||||
} catch (err) {
|
} catch (err) {
|
||||||
state.data = null;
|
state.data = null;
|
||||||
state.error = err;
|
state.error = err;
|
||||||
}
|
}
|
||||||
|
|
||||||
state.isLoading = false;
|
state.isLoading = false;
|
||||||
}
|
}
|
||||||
|
|
||||||
fetchData();
|
fetchData();
|
||||||
|
|
||||||
return state;
|
return state;
|
||||||
}
|
}
|
||||||
|
|
||||||
// NOTE: in Polaris, the backing class for the component isn't needed at all.
|
// NOTE: in Polaris, the backing class for the component isn't needed at all.
|
||||||
|
|||||||
@@ -2,7 +2,7 @@ Using [location.hash](https://developer.mozilla.org/en-US/docs/Web/API/Location/
|
|||||||
|
|
||||||
```html
|
```html
|
||||||
<nav>
|
<nav>
|
||||||
<a href="#">Index</a>
|
<a href="#">Index</a>
|
||||||
<a href="#contact">Contact Us</a>
|
<a href="#contact">Contact Us</a>
|
||||||
</nav>
|
</nav>
|
||||||
```
|
```
|
||||||
|
|||||||
@@ -18,4 +18,4 @@ Using [location.hash](https://developer.mozilla.org/en-US/docs/Web/API/Location/
|
|||||||
</p>
|
</p>
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
```
|
```
|
||||||
|
|||||||
74
package.json
74
package.json
@@ -12,7 +12,7 @@
|
|||||||
"lint": "eslint .",
|
"lint": "eslint .",
|
||||||
"lint:fix": "eslint . --fix",
|
"lint:fix": "eslint . --fix",
|
||||||
"prettier": "prettier --ignore-path .gitignore --plugin-search-dir=. . --check",
|
"prettier": "prettier --ignore-path .gitignore --plugin-search-dir=. . --check",
|
||||||
"prettier:fix": "pnpm run prettier -- --write",
|
"prettier:fix": "prettier --ignore-path .gitignore --plugin-search-dir=. --write .",
|
||||||
"format": "pnpm run prettier:fix && pnpm run lint:fix",
|
"format": "pnpm run prettier:fix && pnpm run lint:fix",
|
||||||
"prepare": "husky install"
|
"prepare": "husky install"
|
||||||
},
|
},
|
||||||
@@ -26,52 +26,54 @@
|
|||||||
},
|
},
|
||||||
"homepage": "https://github.com/matschik/component-party#readme",
|
"homepage": "https://github.com/matschik/component-party#readme",
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@angular-eslint/eslint-plugin": "^13.2.1",
|
"@angular-eslint/eslint-plugin": "^14.0.2",
|
||||||
"@angular-eslint/eslint-plugin-template": "^13.2.1",
|
"@angular-eslint/eslint-plugin-template": "^14.0.2",
|
||||||
"@angular-eslint/template-parser": "^13.2.1",
|
"@angular-eslint/template-parser": "^14.0.2",
|
||||||
"@angular/core": "^13.3.3",
|
"@angular/core": "^14.1.2",
|
||||||
"@angular/router": "^13.3.3",
|
"@angular/router": "^14.1.2",
|
||||||
"@astrojs/svelte": "^0.1.2",
|
"@astrojs/markdown-component": "^1.0.1",
|
||||||
"@astrojs/tailwind": "^0.1.2",
|
"@astrojs/svelte": "^1.0.0",
|
||||||
"@babel/eslint-parser": "^7.17.0",
|
"@astrojs/tailwind": "^1.0.0",
|
||||||
"@babel/plugin-proposal-decorators": "^7.17.9",
|
"@babel/eslint-parser": "^7.18.9",
|
||||||
"@builder.io/qwik": "0.0.20-5",
|
"@babel/plugin-proposal-decorators": "^7.18.10",
|
||||||
|
"@builder.io/qwik": "0.0.100",
|
||||||
"@matschik/lz-string": "^0.0.2",
|
"@matschik/lz-string": "^0.0.2",
|
||||||
"@tailwindcss/typography": "^0.5.2",
|
"@tailwindcss/typography": "^0.5.4",
|
||||||
"@types/mdast": "^3.0.10",
|
"@types/mdast": "^3.0.10",
|
||||||
"@typescript-eslint/eslint-plugin": "^5.20.0",
|
"@typescript-eslint/eslint-plugin": "^5.33.0",
|
||||||
"@typescript-eslint/parser": "^5.20.0",
|
"@typescript-eslint/parser": "^5.33.0",
|
||||||
"astro": "^1.0.0-beta.12",
|
"astro": "^1.0.3",
|
||||||
"autoprefixer": "^10.4.4",
|
"autoprefixer": "^10.4.8",
|
||||||
"codesandbox": "^2.2.3",
|
"codesandbox": "^2.2.3",
|
||||||
"eslint": "^8.13.0",
|
"eslint": "^8.21.0",
|
||||||
"eslint-config-prettier": "^8.5.0",
|
"eslint-config-prettier": "^8.5.0",
|
||||||
"eslint-plugin-ember": "^10.6.1",
|
"eslint-plugin-ember": "^11.0.5",
|
||||||
"eslint-plugin-lit": "^1.6.1",
|
"eslint-plugin-lit": "^1.6.1",
|
||||||
"eslint-plugin-prettier": "^4.0.0",
|
"eslint-plugin-prettier": "^4.2.1",
|
||||||
"eslint-plugin-qwik": "^0.0.34",
|
"eslint-plugin-qwik": "^0.0.100",
|
||||||
"eslint-plugin-react": "^7.29.4",
|
"eslint-plugin-react": "^7.30.1",
|
||||||
"eslint-plugin-solid": "^0.4.7",
|
"eslint-plugin-solid": "^0.7.1",
|
||||||
"eslint-plugin-svelte3": "^3.4.1",
|
"eslint-plugin-svelte3": "^4.0.0",
|
||||||
"eslint-plugin-vue": "^8.6.0",
|
"eslint-plugin-vue": "^9.3.0",
|
||||||
"esm": "^3.2.25",
|
"esm": "^3.2.25",
|
||||||
"husky": "^7.0.4",
|
"husky": "^8.0.1",
|
||||||
"lint-staged": "^12.3.8",
|
"lint-staged": "^13.0.3",
|
||||||
"lodash.kebabcase": "^4.1.1",
|
"lodash.kebabcase": "^4.1.1",
|
||||||
"micache": "^2.4.1",
|
"micache": "^2.4.1",
|
||||||
"pkg-dir": "^6.0.1",
|
"pkg-dir": "^6.0.1",
|
||||||
"postcss": "^8.4.12",
|
"postcss": "^8.4.16",
|
||||||
"prettier": "^2.6.2",
|
"prettier": "^2.7.1",
|
||||||
|
"prettier-plugin-astro": "^0.5.0",
|
||||||
"prettier-plugin-svelte": "^2.7.0",
|
"prettier-plugin-svelte": "^2.7.0",
|
||||||
"prop-types": "^15.8.1",
|
"prop-types": "^15.8.1",
|
||||||
"react": "^17.0.2",
|
"react": "^18.2.0",
|
||||||
"remark": "^14.0.2",
|
"remark": "^14.0.2",
|
||||||
"shiki": "^0.10.1",
|
"shiki": "^0.11.0",
|
||||||
"svelte": "^3.47.0",
|
"svelte": "^3.49.0",
|
||||||
"tailwindcss": "^3.0.24",
|
"tailwindcss": "^3.1.8",
|
||||||
"typescript": "^4.6.3",
|
"typescript": "^4.7.4",
|
||||||
"vite": "^2.9.5",
|
"vite": "^2.9.15",
|
||||||
"vite-plugin-full-reload": "^1.0.0"
|
"vite-plugin-full-reload": "^1.0.4"
|
||||||
},
|
},
|
||||||
"lint-staged": {
|
"lint-staged": {
|
||||||
"*.{js,jsx,ts,tsx,vue,svelte}": [
|
"*.{js,jsx,ts,tsx,vue,svelte}": [
|
||||||
@@ -80,6 +82,6 @@
|
|||||||
]
|
]
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"alpinejs": "^3.10.2"
|
"alpinejs": "^3.10.3"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
4757
pnpm-lock.yaml
generated
4757
pnpm-lock.yaml
generated
File diff suppressed because it is too large
Load Diff
@@ -1,57 +1,65 @@
|
|||||||
---
|
---
|
||||||
import FileCode from '@/components/FileCode.astro';
|
import FileCode from '@/components/FileCode.astro';
|
||||||
|
|
||||||
const { path, editHref } = Astro.props
|
const { path, editHref } = Astro.props;
|
||||||
---
|
---
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
function copyToClipboard(value) {
|
function copyToClipboard(value) {
|
||||||
const $textarea = document.createElement("textarea");
|
const $textarea = document.createElement('textarea');
|
||||||
$textarea.innerHTML = value;
|
$textarea.innerHTML = value;
|
||||||
document.body.appendChild($textarea);
|
document.body.appendChild($textarea);
|
||||||
$textarea.select();
|
$textarea.select();
|
||||||
let success = false;
|
let success = false;
|
||||||
try {
|
try {
|
||||||
document.execCommand("copy");
|
document.execCommand('copy');
|
||||||
success = true
|
success = true;
|
||||||
} catch (err) {
|
} catch (err) {
|
||||||
alert(
|
alert('Oops, unable to copy to clipboard. Please check website permissions.');
|
||||||
"Oops, unable to copy to clipboard. Please check website permissions."
|
}
|
||||||
);
|
$textarea.remove();
|
||||||
}
|
return success;
|
||||||
$textarea.remove();
|
}
|
||||||
return success;
|
|
||||||
}
|
|
||||||
|
|
||||||
for(const $codeCopyContainer of document.querySelectorAll("[data-code-copy-container]")){
|
for (const $codeCopyContainer of document.querySelectorAll('[data-code-copy-container]')) {
|
||||||
const $codeCopyText = $codeCopyContainer.querySelector("[data-code-copy-text]")
|
const $codeCopyText = $codeCopyContainer.querySelector('[data-code-copy-text]');
|
||||||
const $codeCopyButton = $codeCopyContainer.querySelector("[data-code-copy-button]")
|
const $codeCopyButton = $codeCopyContainer.querySelector('[data-code-copy-button]');
|
||||||
|
|
||||||
$codeCopyButton.addEventListener("click", () => {
|
$codeCopyButton.addEventListener('click', () => {
|
||||||
copyToClipboard($codeCopyText.innerText)
|
copyToClipboard($codeCopyText.innerText);
|
||||||
})
|
});
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div data-code-copy-container class="relative group">
|
<div data-code-copy-container class="relative group">
|
||||||
<div data-code-copy-text>
|
<div data-code-copy-text>
|
||||||
<FileCode path={path} />
|
<FileCode path={path} />
|
||||||
</div>
|
</div>
|
||||||
<div class="absolute hidden group-hover:block transition-all top-0 right-0 mt-2 mr-2">
|
<div class="absolute hidden group-hover:block transition-all top-0 right-0 mt-2 mr-2">
|
||||||
<div class="flex items-center space-x-3">
|
<div class="flex items-center space-x-3">
|
||||||
{editHref &&
|
{
|
||||||
<a href={editHref} target="_blank">
|
editHref && (
|
||||||
<button class="px-1.5 bg-[#0d1117] py-1 rounded border opacity-60 hover:opacity-90" title="Edit on Github" aria-label="Edit on Github">
|
<a href={editHref} target="_blank">
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
<button class="px-1.5 bg-[#0d1117] py-1 rounded border opacity-60 hover:opacity-90" title="Edit on Github" aria-label="Edit on Github">
|
||||||
<path stroke-linecap="round" stroke-linejoin="round" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
||||||
</svg>
|
<path
|
||||||
</button>
|
stroke-linecap="round"
|
||||||
</a>
|
stroke-linejoin="round"
|
||||||
}
|
d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"
|
||||||
<button data-code-copy-button class="px-1.5 bg-[#0d1117] py-1 rounded border opacity-60 hover:opacity-90" title="Copy to clipboard" aria-label="Copy to clipboard">
|
/>
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
</svg>
|
||||||
<path stroke-linecap="round" stroke-linejoin="round" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" />
|
</button>
|
||||||
</svg>
|
</a>
|
||||||
</button>
|
)
|
||||||
</div>
|
}
|
||||||
</div>
|
<button data-code-copy-button class="px-1.5 bg-[#0d1117] py-1 rounded border opacity-60 hover:opacity-90" title="Copy to clipboard" aria-label="Copy to clipboard">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
||||||
|
<path
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-linejoin="round"
|
||||||
|
d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"></path>
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -8,19 +8,17 @@ import astroHighlightCode from '@/components/CodeHighlight/astroHighlightCode.js
|
|||||||
const { path, lang, theme = 'github-dark', wrap = false } = Astro.props;
|
const { path, lang, theme = 'github-dark', wrap = false } = Astro.props;
|
||||||
|
|
||||||
// check existence
|
// check existence
|
||||||
await fs.access(path)
|
await fs.access(path);
|
||||||
|
|
||||||
const fileCodeCache = await createFileMapCache("fileCodeCache");
|
const fileCodeCache = await createFileMapCache('fileCodeCache');
|
||||||
|
|
||||||
let html = await fileCodeCache.get(path)
|
let html = await fileCodeCache.get(path);
|
||||||
if(!html){
|
if (!html) {
|
||||||
const fileExt = nodePath.parse(path).ext.split(".").pop()
|
const fileExt = nodePath.parse(path).ext.split('.').pop();
|
||||||
const fileContent = await fs.readFile(path, "utf-8")
|
const fileContent = await fs.readFile(path, 'utf-8');
|
||||||
html = await astroHighlightCode({ code: fileContent, lang: lang || fileExt, theme, wrap })
|
html = await astroHighlightCode({ code: fileContent, lang: lang || fileExt, theme, wrap });
|
||||||
fileCodeCache.set(path, html)
|
fileCodeCache.set(path, html);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
<Fragment set:html={html} />
|
<Fragment set:html={html} />
|
||||||
|
|||||||
@@ -1,7 +1,7 @@
|
|||||||
---
|
---
|
||||||
import FRAMEWORKS from '@/frameworks.mjs';
|
import FRAMEWORKS from '@/frameworks.mjs';
|
||||||
|
|
||||||
const {id, size = 20} = Astro.props
|
const { id, size = 20 } = Astro.props;
|
||||||
|
|
||||||
const framework = FRAMEWORKS.find((f) => f.id === id);
|
const framework = FRAMEWORKS.find((f) => f.id === id);
|
||||||
|
|
||||||
@@ -9,6 +9,6 @@ const baseURL = import.meta.env.MODE === 'development' ? '' : 'https://raw.githu
|
|||||||
---
|
---
|
||||||
|
|
||||||
<div class="flex items-center space-x-1">
|
<div class="flex items-center space-x-1">
|
||||||
{framework?.img && <img src={baseURL + framework.img} alt={framework.id} width={size} height={size} class="inline mr-[5px] mb-0 mt-0" />}
|
{framework?.img && <img src={baseURL + framework.img} alt={framework.id} width={size} height={size} class="inline mr-[5px] mb-0 mt-0" />}
|
||||||
<span class="flex-shrink-0">{framework.title}</span>
|
<span class="flex-shrink-0">{framework.title}</span>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -1,21 +1,21 @@
|
|||||||
---
|
---
|
||||||
import fs from 'node:fs/promises'
|
import fs from 'node:fs/promises';
|
||||||
import kebabCase from 'lodash.kebabcase'
|
import kebabCase from 'lodash.kebabcase';
|
||||||
import { Markdown } from 'astro/components'
|
import Markdown from '@astrojs/markdown-component';
|
||||||
import nodePath from 'node:path'
|
import nodePath from 'node:path';
|
||||||
|
|
||||||
import Title from '@/components/Title.svelte'
|
import Title from '@/components/Title.svelte';
|
||||||
import FrameworkLabel from '@/components/FrameworkLabel.astro'
|
import FrameworkLabel from '@/components/FrameworkLabel.astro';
|
||||||
import FRAMEWORKS from '@/frameworks.mjs'
|
import FRAMEWORKS from '@/frameworks.mjs';
|
||||||
import CodeViewer from '@/components/CodeViewer.astro'
|
import CodeViewer from '@/components/CodeViewer.astro';
|
||||||
import repl from "@/utils/repl"
|
import repl from '@/utils/repl';
|
||||||
|
|
||||||
const { path: sectionPath } = Astro.props
|
const { path: sectionPath } = Astro.props;
|
||||||
|
|
||||||
const sectionId = sectionPath.split("/").pop()
|
const sectionId = sectionPath.split('/').pop();
|
||||||
const sectionRelativePath = sectionPath.split("/").slice(-2).join("/")
|
const sectionRelativePath = sectionPath.split('/').slice(-2).join('/');
|
||||||
|
|
||||||
const sections = []
|
const sections = [];
|
||||||
|
|
||||||
function dirNameToTitle(dirName) {
|
function dirNameToTitle(dirName) {
|
||||||
return capitalize(dirName.split('-').splice(1).join(' '));
|
return capitalize(dirName.split('-').splice(1).join(' '));
|
||||||
@@ -26,170 +26,194 @@ function capitalize(string) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
function generatePlaygroundURL(frameworkId, files) {
|
function generatePlaygroundURL(frameworkId, files) {
|
||||||
const frameworkREPL = repl[frameworkId];
|
const frameworkREPL = repl[frameworkId];
|
||||||
if (!frameworkREPL) {
|
if (!frameworkREPL) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
const frameworkConfig = FRAMEWORKS.find(f => f.id === frameworkId)
|
const frameworkConfig = FRAMEWORKS.find((f) => f.id === frameworkId);
|
||||||
|
|
||||||
const contentByFilename = frameworkConfig.filesSorter(files).reduce((acc, file) => {
|
const contentByFilename = frameworkConfig.filesSorter(files).reduce((acc, file) => {
|
||||||
acc[file.fileName] = file.content;
|
acc[file.fileName] = file.content;
|
||||||
return acc;
|
return acc;
|
||||||
}, {});
|
}, {});
|
||||||
|
|
||||||
const playgroundURL = frameworkREPL.fromContentByFilename(contentByFilename);
|
const playgroundURL = frameworkREPL.fromContentByFilename(contentByFilename);
|
||||||
|
|
||||||
return playgroundURL;
|
return playgroundURL;
|
||||||
}
|
}
|
||||||
|
|
||||||
const subSectionDirNames = await fs.readdir(sectionPath)
|
const subSectionDirNames = await fs.readdir(sectionPath);
|
||||||
|
|
||||||
for(const dirName of subSectionDirNames){
|
for (const dirName of subSectionDirNames) {
|
||||||
const path = `${sectionPath}/${dirName}`
|
const path = `${sectionPath}/${dirName}`;
|
||||||
const title = dirNameToTitle(dirName)
|
const title = dirNameToTitle(dirName);
|
||||||
|
|
||||||
const frameworkDirs = await fs.readdir(path)
|
const frameworkDirs = await fs.readdir(path);
|
||||||
const frameworkSections = []
|
const frameworkSections = [];
|
||||||
for(const frameworkDir of frameworkDirs){
|
for (const frameworkDir of frameworkDirs) {
|
||||||
const frameworkPath = `${path}/${frameworkDir}`
|
const frameworkPath = `${path}/${frameworkDir}`;
|
||||||
const files = []
|
const files = [];
|
||||||
const fileNames = await fs.readdir(`${frameworkPath}`)
|
const fileNames = await fs.readdir(`${frameworkPath}`);
|
||||||
|
|
||||||
for(const fileName of fileNames){
|
for (const fileName of fileNames) {
|
||||||
const filePath = `${frameworkPath}/${fileName}`
|
const filePath = `${frameworkPath}/${fileName}`;
|
||||||
const ext = nodePath.parse(filePath).ext.split(".").pop()
|
const ext = nodePath.parse(filePath).ext.split('.').pop();
|
||||||
files.push({
|
files.push({
|
||||||
path: filePath,
|
path: filePath,
|
||||||
fileName,
|
fileName,
|
||||||
ext,
|
ext,
|
||||||
content: await fs.readFile(filePath, "utf-8")
|
content: await fs.readFile(filePath, 'utf-8'),
|
||||||
})
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
frameworkSections.push({
|
frameworkSections.push({
|
||||||
dirName: frameworkDir,
|
dirName: frameworkDir,
|
||||||
path: frameworkPath,
|
path: frameworkPath,
|
||||||
files,
|
files,
|
||||||
playgroundURL: generatePlaygroundURL(frameworkDir, files)
|
playgroundURL: generatePlaygroundURL(frameworkDir, files),
|
||||||
})
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
sections.push({
|
||||||
sections.push({
|
id: kebabCase(title),
|
||||||
id: kebabCase(title),
|
path,
|
||||||
path,
|
dirName,
|
||||||
dirName,
|
title,
|
||||||
title,
|
frameworkSections,
|
||||||
frameworkSections
|
});
|
||||||
})
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function getSectionFiles(section, framework){
|
function getSectionFiles(section, framework) {
|
||||||
return section.frameworkSections.find((f) => f.dirName === framework.id)?.files
|
return section.frameworkSections.find((f) => f.dirName === framework.id)?.files;
|
||||||
}
|
}
|
||||||
|
|
||||||
function getSectionMarkdownFiles(section, framework){
|
function getSectionMarkdownFiles(section, framework) {
|
||||||
return getSectionFiles(section, framework)?.filter(f => f.ext === "md")
|
return getSectionFiles(section, framework)?.filter((f) => f.ext === 'md');
|
||||||
}
|
}
|
||||||
|
|
||||||
function getSectionCodeFiles(section, framework){
|
function getSectionCodeFiles(section, framework) {
|
||||||
const files = getSectionFiles(section, framework)?.filter(f => f.ext !== "md")
|
const files = getSectionFiles(section, framework)?.filter((f) => f.ext !== 'md');
|
||||||
if(files?.length > 0 && typeof framework.filesSorter === 'function'){
|
if (files?.length > 0 && typeof framework.filesSorter === 'function') {
|
||||||
return framework.filesSorter(files)
|
return framework.filesSorter(files);
|
||||||
} else {
|
} else {
|
||||||
return files
|
return files;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function getFrameworkSectionPlaygroundURL(section, framework){
|
function getFrameworkSectionPlaygroundURL(section, framework) {
|
||||||
return section.frameworkSections.find((f) => f.dirName === framework.id)?.playgroundURL
|
return section.frameworkSections.find((f) => f.dirName === framework.id)?.playgroundURL;
|
||||||
}
|
}
|
||||||
---
|
---
|
||||||
|
|
||||||
<Title as="h1" content={dirNameToTitle(sectionId)} />
|
<Title as="h1" content={dirNameToTitle(sectionId)} />
|
||||||
|
|
||||||
{
|
{
|
||||||
sections.map((section) => (
|
sections.map((section) => (
|
||||||
<>
|
<>
|
||||||
<Title as="h2" content={section.title} />
|
<Title as="h2" content={section.title} />
|
||||||
<div class="grid grid-cols-1 2xl:grid-cols-2 gap-10" style="margin-top: 1rem;">
|
<div class="grid grid-cols-1 2xl:grid-cols-2 gap-10" style="margin-top: 1rem;">
|
||||||
{FRAMEWORKS.map((framework) => (
|
{FRAMEWORKS.map((framework) => (
|
||||||
<div x-show={`$store.frameworksSelected.has('${framework.id}')`} style="margin-top: 0rem;">
|
<div x-show={`$store.frameworksSelected.has('${framework.id}')`} style="margin-top: 0rem;">
|
||||||
<div class="flex justify-between items-center space-x-3">
|
<div class="flex justify-between items-center space-x-3">
|
||||||
<h3 style="margin-top: 0rem; margin-bottom: 0rem;">
|
<h3 style="margin-top: 0rem; margin-bottom: 0rem;">
|
||||||
<FrameworkLabel id={framework.id} />
|
<FrameworkLabel id={framework.id} />
|
||||||
</h3>
|
</h3>
|
||||||
<div class="flex items-center space-x-3">
|
<div class="flex items-center space-x-3">
|
||||||
{getFrameworkSectionPlaygroundURL(section, framework) &&
|
{getFrameworkSectionPlaygroundURL(section, framework) && (
|
||||||
<a href={getFrameworkSectionPlaygroundURL(section, framework)} target="_blank">
|
<a href={getFrameworkSectionPlaygroundURL(section, framework)} target="_blank">
|
||||||
<button class="opacity-50 hover:opacity-100 bg-gray-800 hover:bg-gray-700 py-1 px-1.5 rounded transition-all" title={`Open playground for ${framework.title}`} aria-label={`Open playground for ${framework.title}`} >
|
<button
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
class="opacity-50 hover:opacity-100 bg-gray-800 hover:bg-gray-700 py-1 px-1.5 rounded transition-all"
|
||||||
<path stroke-linecap="round" stroke-linejoin="round" d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z" />
|
title={`Open playground for ${framework.title}`}
|
||||||
<path stroke-linecap="round" stroke-linejoin="round" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
|
aria-label={`Open playground for ${framework.title}`}
|
||||||
</svg>
|
>
|
||||||
</button>
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
||||||
</a>
|
<path stroke-linecap="round" stroke-linejoin="round" d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z" />
|
||||||
}
|
<path stroke-linecap="round" stroke-linejoin="round" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||||
<button class="opacity-50 hover:opacity-100 bg-gray-800 hover:bg-gray-700 py-1 px-1.5 rounded transition-all" title={`Hide ${framework.title} snippets`} aria-label={`Hide ${framework.title} snippets`} x-on:click={`$store.frameworksSelected.hide('${framework.id}')`}>
|
</svg>
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
</button>
|
||||||
<path stroke-linecap="round" stroke-linejoin="round" d="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.88 9.88l-3.29-3.29m7.532 7.532l3.29 3.29M3 3l3.59 3.59m0 0A9.953 9.953 0 0112 5c4.478 0 8.268 2.943 9.543 7a10.025 10.025 0 01-4.132 5.411m0 0L21 21" />
|
</a>
|
||||||
</svg>
|
)}
|
||||||
</button>
|
<button
|
||||||
</div>
|
class="opacity-50 hover:opacity-100 bg-gray-800 hover:bg-gray-700 py-1 px-1.5 rounded transition-all"
|
||||||
</div>
|
title={`Hide ${framework.title} snippets`}
|
||||||
<div class="mt-2">
|
aria-label={`Hide ${framework.title} snippets`}
|
||||||
{getSectionMarkdownFiles(section, framework)?.length > 0 &&
|
x-on:click={`$store.frameworksSelected.hide('${framework.id}')`}
|
||||||
<div>
|
>
|
||||||
{getSectionMarkdownFiles(section, framework).map((file) => (
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
||||||
<Markdown set:html={file.content} />
|
<path
|
||||||
))}
|
stroke-linecap="round"
|
||||||
</div>
|
stroke-linejoin="round"
|
||||||
}
|
d="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.88 9.88l-3.29-3.29m7.532 7.532l3.29 3.29M3 3l3.59 3.59m0 0A9.953 9.953 0 0112 5c4.478 0 8.268 2.943 9.543 7a10.025 10.025 0 01-4.132 5.411m0 0L21 21"
|
||||||
|
/>
|
||||||
{getSectionCodeFiles(section, framework)?.length > 0 && (
|
</svg>
|
||||||
<div x-data={`{ filenameSelected: '${getSectionCodeFiles(section, framework)[0].fileName}' }`}>
|
</button>
|
||||||
<div class="flex space-x-1 items-center ml-0 overflow-x-auto">
|
</div>
|
||||||
{getSectionCodeFiles(section, framework).map((file) =>(
|
</div>
|
||||||
<button class="bg-[#0d1117] py-1.5 px-3 font-medium flex-shrink-0 text-xs rounded-t inline-block" x-bind:class={`filenameSelected === '${file.fileName}' ? '' : 'opacity-60'`} x-on:click={`filenameSelected = '${file.fileName}'`}>
|
<div class="mt-2">
|
||||||
{file.fileName}
|
{getSectionMarkdownFiles(section, framework)?.length > 0 && (
|
||||||
</button>
|
<div>
|
||||||
))}
|
{getSectionMarkdownFiles(section, framework).map((file) => (
|
||||||
</div>
|
<Markdown set:html={file.content || ''} />
|
||||||
|
))}
|
||||||
<div>
|
</div>
|
||||||
{getSectionCodeFiles(section, framework).map((file) => (
|
)}
|
||||||
<div x-show={`filenameSelected === '${file.fileName}'`}>
|
|
||||||
<CodeViewer path={file.path} editHref={`https://github.com/matschik/component-party/tree/main/${sectionRelativePath}/${section.dirName}/${framework.id}/${file.fileName}`} />
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</div>)
|
|
||||||
}
|
|
||||||
{!(getSectionFiles(section, framework)?.length) &&
|
|
||||||
<div class="">
|
|
||||||
<div class="bg-gray-800 text-white rounded-md mx-auto">
|
|
||||||
<div class="text-center py-8 px-4 sm:px-6">
|
|
||||||
<div>
|
|
||||||
<span class="block text-2xl tracking-tight font-bold">Missing snippet</span>
|
|
||||||
<span class="block text-lg mt-1 font-semibold">Help us to improve Component Party 🎉</span>
|
|
||||||
</div>
|
|
||||||
<div class="mt-6 flex justify-center">
|
|
||||||
<div class="inline-flex rounded-md shadow">
|
|
||||||
<a href={`https://github.com/matschik/component-party/tree/main/${sectionRelativePath}/${section.dirName}`} class="inline-flex space-x-2 items-center justify-center px-4 py-2 border border-transparent text-base font-medium rounded-md text-white bg-[#161b22] hover:bg-[#161b22]/80 no-underline">
|
|
||||||
<span>Contribute on Github</span>
|
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewBox="0 0 24 24" fill="currentColor" class="h-5 w-5 text-white"><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"></path></svg>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
}
|
{getSectionCodeFiles(section, framework)?.length > 0 && (
|
||||||
</div>
|
<div x-data={`{ filenameSelected: '${getSectionCodeFiles(section, framework)[0].fileName}' }`}>
|
||||||
</div>
|
<div class="flex space-x-1 items-center ml-0 overflow-x-auto">
|
||||||
))}
|
{getSectionCodeFiles(section, framework).map((file) => (
|
||||||
</div>
|
<button
|
||||||
</>
|
class="bg-[#0d1117] py-1.5 px-3 font-medium flex-shrink-0 text-xs rounded-t inline-block"
|
||||||
))
|
x-bind:class={`filenameSelected === '${file.fileName}' ? '' : 'opacity-60'`}
|
||||||
|
x-on:click={`filenameSelected = '${file.fileName}'`}
|
||||||
|
>
|
||||||
|
{file.fileName}
|
||||||
|
</button>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
{getSectionCodeFiles(section, framework).map((file) => (
|
||||||
|
<div x-show={`filenameSelected === '${file.fileName}'`}>
|
||||||
|
<CodeViewer
|
||||||
|
path={file.path}
|
||||||
|
editHref={`https://github.com/matschik/component-party/tree/main/${sectionRelativePath}/${section.dirName}/${framework.id}/${file.fileName}`}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
{!getSectionFiles(section, framework)?.length && (
|
||||||
|
<div class="">
|
||||||
|
<div class="bg-gray-800 text-white rounded-md mx-auto">
|
||||||
|
<div class="text-center py-8 px-4 sm:px-6">
|
||||||
|
<div>
|
||||||
|
<span class="block text-2xl tracking-tight font-bold">Missing snippet</span>
|
||||||
|
<span class="block text-lg mt-1 font-semibold">Help us to improve Component Party 🎉</span>
|
||||||
|
</div>
|
||||||
|
<div class="mt-6 flex justify-center">
|
||||||
|
<div class="inline-flex rounded-md shadow">
|
||||||
|
<a
|
||||||
|
href={`https://github.com/matschik/component-party/tree/main/${sectionRelativePath}/${section.dirName}`}
|
||||||
|
class="inline-flex space-x-2 items-center justify-center px-4 py-2 border border-transparent text-base font-medium rounded-md text-white bg-[#161b22] hover:bg-[#161b22]/80 no-underline"
|
||||||
|
>
|
||||||
|
<span>Contribute on Github</span>
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewBox="0 0 24 24" fill="currentColor" class="h-5 w-5 text-white">
|
||||||
|
<path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12" />
|
||||||
|
</svg>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
))
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -175,16 +175,22 @@ export default [
|
|||||||
es2021: true,
|
es2021: true,
|
||||||
node: true,
|
node: true,
|
||||||
},
|
},
|
||||||
|
parserOptions: {
|
||||||
|
ecmaFeatures: {
|
||||||
|
jsx: true,
|
||||||
|
},
|
||||||
|
},
|
||||||
files: ['**/qwik/**'],
|
files: ['**/qwik/**'],
|
||||||
extends: [
|
extends: ['eslint:recommended',
|
||||||
'eslint:recommended',
|
'plugin:qwik/recommended'],
|
||||||
'plugin:qwik/recommended'
|
rules: {
|
||||||
],
|
'qwik/valid-lexical-scope': 'off'
|
||||||
|
}
|
||||||
},
|
},
|
||||||
playgroundURL: 'https://qwik.builder.io/playground',
|
playgroundURL: 'https://qwik.builder.io/playground',
|
||||||
documentationURL: 'https://qwik.builder.io/docs/overview',
|
documentationURL: 'https://qwik.builder.io/docs/overview',
|
||||||
filesSorter(files) {
|
filesSorter(files) {
|
||||||
return files;
|
return files;
|
||||||
},
|
},
|
||||||
}
|
},
|
||||||
];
|
];
|
||||||
|
|||||||
@@ -6,25 +6,32 @@ import FrameworkLabel from '@/components/FrameworkLabel.astro';
|
|||||||
|
|
||||||
const tree = await generateContentTree();
|
const tree = await generateContentTree();
|
||||||
---
|
---
|
||||||
<BaseLayout tree={tree}>
|
|
||||||
<script src="@/components/scripts/alpine-init.js"></script>
|
|
||||||
<div x-init="() => { $el.classList.remove('hidden');$el.classList.add('block') }" class="hidden">
|
|
||||||
<div class="flex px-6 lg:px-20 py-2 sticky top-0 z-10 w-full backdrop-blur bg-gray-900/80 border-b border-gray-700 whitespace-nowrap overflow-x-auto">
|
|
||||||
{FRAMEWORKS.map((framework) => (
|
|
||||||
<button
|
|
||||||
data-framework-button-show={framework.id}
|
|
||||||
title={`Display ${framework.title}`}
|
|
||||||
class="text-sm flex-shrink-0 rounded border border-gray-700 px-3 py-1 border-opacity-50 bg-gray-900 hover:bg-gray-800 transition-all mr-2"
|
|
||||||
x-bind:class={`$store.frameworksSelected.has('${framework.id}') ? 'border-blue-500' : 'opacity-70'`}
|
|
||||||
x-on:click={`$store.frameworksSelected.toggle('${framework.id}')`}
|
|
||||||
>
|
|
||||||
<FrameworkLabel id={framework.id} size={15} />
|
|
||||||
</button>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<main id="main-content" class="px-6 md:px-14 lg:px-20 pt-10 prose prose-sm prose-invert prose-h1:scroll-mt-[5rem] prose-pre:mt-0 prose-h2:scroll-mt-[5rem]" style="max-width: 100%;">
|
<BaseLayout tree={tree}>
|
||||||
<slot />
|
<script src="@/components/scripts/alpine-init.js"></script>
|
||||||
</main>
|
<div x-init="() => { $el.classList.remove('hidden');$el.classList.add('block') }" class="hidden">
|
||||||
</div>
|
<div class="flex px-6 lg:px-20 py-2 sticky top-0 z-10 w-full backdrop-blur bg-gray-900/80 border-b border-gray-700 whitespace-nowrap overflow-x-auto">
|
||||||
|
{
|
||||||
|
FRAMEWORKS.map((framework) => (
|
||||||
|
<button
|
||||||
|
data-framework-button-show={framework.id}
|
||||||
|
title={`Display ${framework.title}`}
|
||||||
|
class="text-sm flex-shrink-0 rounded border border-gray-700 px-3 py-1 border-opacity-50 bg-gray-900 hover:bg-gray-800 transition-all mr-2"
|
||||||
|
x-bind:class={`$store.frameworksSelected.has('${framework.id}') ? 'border-blue-500' : 'opacity-70'`}
|
||||||
|
x-on:click={`$store.frameworksSelected.toggle('${framework.id}')`}
|
||||||
|
>
|
||||||
|
<FrameworkLabel id={framework.id} size={15} />
|
||||||
|
</button>
|
||||||
|
))
|
||||||
|
}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<main
|
||||||
|
id="main-content"
|
||||||
|
class="px-6 md:px-14 lg:px-20 pt-10 prose prose-sm prose-invert prose-h1:scroll-mt-[5rem] prose-pre:mt-0 prose-h2:scroll-mt-[5rem]"
|
||||||
|
style="max-width: 100%;"
|
||||||
|
>
|
||||||
|
<slot />
|
||||||
|
</main>
|
||||||
|
</div>
|
||||||
</BaseLayout>
|
</BaseLayout>
|
||||||
|
|||||||
@@ -5,14 +5,13 @@ import { packageDirectory } from 'pkg-dir';
|
|||||||
import Layout from '@/layouts/BaseLayout.astro';
|
import Layout from '@/layouts/BaseLayout.astro';
|
||||||
import Section from '@/components/Section.astro';
|
import Section from '@/components/Section.astro';
|
||||||
|
|
||||||
const rootDir = await packageDirectory()
|
const rootDir = await packageDirectory();
|
||||||
const contentURL = `${rootDir}/content`
|
const contentURL = `${rootDir}/content`;
|
||||||
const sectionNames = await fs.readdir(contentURL)
|
const sectionNames = await fs.readdir(contentURL);
|
||||||
---
|
---
|
||||||
|
|
||||||
<Layout>
|
<Layout>
|
||||||
<div class="space-y-12">
|
<div class="space-y-12">
|
||||||
{sectionNames.map((sectionName) =>
|
{sectionNames.map((sectionName) => <Section path={`${contentURL}/${sectionName}`} />)}
|
||||||
<Section path={`${contentURL}/${sectionName}`} />
|
</div>
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</Layout>
|
</Layout>
|
||||||
|
|||||||
Reference in New Issue
Block a user