kudzues/component-party
1
0
Fork 0
mirror of https://github.com/lainbo/component-party.git synced 2026-04-05 13:09:03 +08:00
Code Issues Packages Projects Releases Wiki Activity

Upgrade dependencies: Astro 1.0, fix Solid & Qwik examples (#106)

Browse Source 
* feat: upgrade Astro to 1.0 and other dependencies

* chore: run prettier, fix lint on solid AnswerButton
This commit is contained in:
Mathieu Schimmerling
2022-08-12 17:18:47 +02:00
committed by GitHub
parent ecf33962e2
commit 4477d77dfc
26 changed files with 3025 additions and 2999 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
.vscode/extensions.json vendored
View File

@@ -1,12 +1,4 @@
{
"recommendations": [
"astro-build.astro-vscode",
"bradlc.vscode-tailwindcss",
"esbenp.prettier-vscode",
"dbaeumer.vscode-eslint",
"svelte.svelte-vscode",
"streetsidesoftware.code-spell-checker",
"Vue.volar"
],
"recommendations": ["astro-build.astro-vscode", "bradlc.vscode-tailwindcss", "esbenp.prettier-vscode", "dbaeumer.vscode-eslint", "svelte.svelte-vscode", "Vue.volar"],
"unwantedRecommendations": []
}
}

2
.vscode/launch.json vendored
View File

@@ -12,4 +12,4 @@
"webRoot": "${workspaceFolder}"
}
]
}
}

12
.vscode/settings.json vendored
View File

@@ -8,15 +8,5 @@
"[svelte]": {
"editor.defaultFormatter": "svelte.svelte-vscode"
},
"cSpell.words": [
"alpinejs",
"astro",
"astrojs",
"matschik",
"mdast",
"pnpm",
"qwik",
"shiki",
"webp"
]
"cSpell.words": ["alpinejs", "astro", "astrojs", "matschik", "mdast", "pnpm", "qwik", "shiki", "webp"]
}

1
CONTRIBUTING.md
View File

@@ -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
4. In `src/frameworks.mjs`, add a new entry with SVG link and ESLint configuration
## Improve website
For local development, [pnpm](https://pnpm.io/) is preferred as package manager:

451
README.md
View File

@@ -54,34 +54,34 @@ How do we solve this ? Developers love having framework overview by examples. It
<b>React</b>
<img src="https://us-central1-progress-markdown.cloudfunctions.net/progress/100" /></summary>
* [x] Reactivity
* [x] Declare state
* [x] Update state
* [x] Computed state
* [x] Templating
* [x] Minimal template
* [x] Styling
* [x] Loop
* [x] Event click
* [x] Dom ref
* [x] Conditional
* [x] Lifecycle
* [x] On mount
* [x] On unmount
* [x] Component composition
* [x] Props
* [x] Emit to parent
* [x] Slot
* [x] Slot fallback
* [x] Form input
* [x] Input text
* [x] Checkbox
* [x] Radio
* [x] Select
* [x] Webapp features
* [x] Fetch data
* [x] Router link
* [x] Routing
- [x] Reactivity
- [x] Declare state
- [x] Update state
- [x] Computed state
- [x] Templating
- [x] Minimal template
- [x] Styling
- [x] Loop
- [x] Event click
- [x] Dom ref
- [x] Conditional
- [x] Lifecycle
- [x] On mount
- [x] On unmount
- [x] Component composition
- [x] Props
- [x] Emit to parent
- [x] Slot
- [x] Slot fallback
- [x] Form input
- [x] Input text
- [x] Checkbox
- [x] Radio
- [x] Select
- [x] Webapp features
- [x] Fetch data
- [x] Router link
- [x] Routing
</details><details>
<summary>
@@ -89,34 +89,34 @@ How do we solve this ? Developers love having framework overview by examples. It
<b>Vue 3</b>
<img src="https://us-central1-progress-markdown.cloudfunctions.net/progress/100" /></summary>
* [x] Reactivity
* [x] Declare state
* [x] Update state
* [x] Computed state
* [x] Templating
* [x] Minimal template
* [x] Styling
* [x] Loop
* [x] Event click
* [x] Dom ref
* [x] Conditional
* [x] Lifecycle
* [x] On mount
* [x] On unmount
* [x] Component composition
* [x] Props
* [x] Emit to parent
* [x] Slot
* [x] Slot fallback
* [x] Form input
* [x] Input text
* [x] Checkbox
* [x] Radio
* [x] Select
* [x] Webapp features
* [x] Fetch data
* [x] Router link
* [x] Routing
- [x] Reactivity
- [x] Declare state
- [x] Update state
- [x] Computed state
- [x] Templating
- [x] Minimal template
- [x] Styling
- [x] Loop
- [x] Event click
- [x] Dom ref
- [x] Conditional
- [x] Lifecycle
- [x] On mount
- [x] On unmount
- [x] Component composition
- [x] Props
- [x] Emit to parent
- [x] Slot
- [x] Slot fallback
- [x] Form input
- [x] Input text
- [x] Checkbox
- [x] Radio
- [x] Select
- [x] Webapp features
- [x] Fetch data
- [x] Router link
- [x] Routing
</details><details>
<summary>
@@ -124,34 +124,34 @@ How do we solve this ? Developers love having framework overview by examples. It
<b>Angular</b>
<img src="https://us-central1-progress-markdown.cloudfunctions.net/progress/100" /></summary>
* [x] Reactivity
* [x] Declare state
* [x] Update state
* [x] Computed state
* [x] Templating
* [x] Minimal template
* [x] Styling
* [x] Loop
* [x] Event click
* [x] Dom ref
* [x] Conditional
* [x] Lifecycle
* [x] On mount
* [x] On unmount
* [x] Component composition
* [x] Props
* [x] Emit to parent
* [x] Slot
* [x] Slot fallback
* [x] Form input
* [x] Input text
* [x] Checkbox
* [x] Radio
* [x] Select
* [x] Webapp features
* [x] Fetch data
* [x] Router link
* [x] Routing
- [x] Reactivity
- [x] Declare state
- [x] Update state
- [x] Computed state
- [x] Templating
- [x] Minimal template
- [x] Styling
- [x] Loop
- [x] Event click
- [x] Dom ref
- [x] Conditional
- [x] Lifecycle
- [x] On mount
- [x] On unmount
- [x] Component composition
- [x] Props
- [x] Emit to parent
- [x] Slot
- [x] Slot fallback
- [x] Form input
- [x] Input text
- [x] Checkbox
- [x] Radio
- [x] Select
- [x] Webapp features
- [x] Fetch data
- [x] Router link
- [x] Routing
</details><details>
<summary>
@@ -159,34 +159,34 @@ How do we solve this ? Developers love having framework overview by examples. It
<b>SolidJS</b>
<img src="https://us-central1-progress-markdown.cloudfunctions.net/progress/100" /></summary>
* [x] Reactivity
* [x] Declare state
* [x] Update state
* [x] Computed state
* [x] Templating
* [x] Minimal template
* [x] Styling
* [x] Loop
* [x] Event click
* [x] Dom ref
* [x] Conditional
* [x] Lifecycle
* [x] On mount
* [x] On unmount
* [x] Component composition
* [x] Props
* [x] Emit to parent
* [x] Slot
* [x] Slot fallback
* [x] Form input
* [x] Input text
* [x] Checkbox
* [x] Radio
* [x] Select
* [x] Webapp features
* [x] Fetch data
* [x] Router link
* [x] Routing
- [x] Reactivity
- [x] Declare state
- [x] Update state
- [x] Computed state
- [x] Templating
- [x] Minimal template
- [x] Styling
- [x] Loop
- [x] Event click
- [x] Dom ref
- [x] Conditional
- [x] Lifecycle
- [x] On mount
- [x] On unmount
- [x] Component composition
- [x] Props
- [x] Emit to parent
- [x] Slot
- [x] Slot fallback
- [x] Form input
- [x] Input text
- [x] Checkbox
- [x] Radio
- [x] Select
- [x] Webapp features
- [x] Fetch data
- [x] Router link
- [x] Routing
</details><details>
<summary>
@@ -194,34 +194,34 @@ How do we solve this ? Developers love having framework overview by examples. It
<b>Lit</b>
<img src="https://us-central1-progress-markdown.cloudfunctions.net/progress/100" /></summary>
* [x] Reactivity
* [x] Declare state
* [x] Update state
* [x] Computed state
* [x] Templating
* [x] Minimal template
* [x] Styling
* [x] Loop
* [x] Event click
* [x] Dom ref
* [x] Conditional
* [x] Lifecycle
* [x] On mount
* [x] On unmount
* [x] Component composition
* [x] Props
* [x] Emit to parent
* [x] Slot
* [x] Slot fallback
* [x] Form input
* [x] Input text
* [x] Checkbox
* [x] Radio
* [x] Select
* [x] Webapp features
* [x] Fetch data
* [x] Router link
* [x] Routing
- [x] Reactivity
- [x] Declare state
- [x] Update state
- [x] Computed state
- [x] Templating
- [x] Minimal template
- [x] Styling
- [x] Loop
- [x] Event click
- [x] Dom ref
- [x] Conditional
- [x] Lifecycle
- [x] On mount
- [x] On unmount
- [x] Component composition
- [x] Props
- [x] Emit to parent
- [x] Slot
- [x] Slot fallback
- [x] Form input
- [x] Input text
- [x] Checkbox
- [x] Radio
- [x] Select
- [x] Webapp features
- [x] Fetch data
- [x] Router link
- [x] Routing
</details><details>
<summary>
@@ -229,34 +229,34 @@ How do we solve this ? Developers love having framework overview by examples. It
<b>Ember</b>
<img src="https://us-central1-progress-markdown.cloudfunctions.net/progress/100" /></summary>
* [x] Reactivity
* [x] Declare state
* [x] Update state
* [x] Computed state
* [x] Templating
* [x] Minimal template
* [x] Styling
* [x] Loop
* [x] Event click
* [x] Dom ref
* [x] Conditional
* [x] Lifecycle
* [x] On mount
* [x] On unmount
* [x] Component composition
* [x] Props
* [x] Emit to parent
* [x] Slot
* [x] Slot fallback
* [x] Form input
* [x] Input text
* [x] Checkbox
* [x] Radio
* [x] Select
* [x] Webapp features
* [x] Fetch data
* [x] Router link
* [x] Routing
- [x] Reactivity
- [x] Declare state
- [x] Update state
- [x] Computed state
- [x] Templating
- [x] Minimal template
- [x] Styling
- [x] Loop
- [x] Event click
- [x] Dom ref
- [x] Conditional
- [x] Lifecycle
- [x] On mount
- [x] On unmount
- [x] Component composition
- [x] Props
- [x] Emit to parent
- [x] Slot
- [x] Slot fallback
- [x] Form input
- [x] Input text
- [x] Checkbox
- [x] Radio
- [x] Select
- [x] Webapp features
- [x] Fetch data
- [x] Router link
- [x] Routing
</details><details>
<summary>
@@ -264,34 +264,34 @@ How do we solve this ? Developers love having framework overview by examples. It
<b>Alpine</b>
<img src="https://us-central1-progress-markdown.cloudfunctions.net/progress/100" /></summary>
* [x] Reactivity
* [x] Declare state
* [x] Update state
* [x] Computed state
* [x] Templating
* [x] Minimal template
* [x] Styling
* [x] Loop
* [x] Event click
* [x] Dom ref
* [x] Conditional
* [x] Lifecycle
* [x] On mount
* [x] On unmount
* [x] Component composition
* [x] Props
* [x] Emit to parent
* [x] Slot
* [x] Slot fallback
* [x] Form input
* [x] Input text
* [x] Checkbox
* [x] Radio
* [x] Select
* [x] Webapp features
* [x] Fetch data
* [x] Router link
* [x] Routing
- [x] Reactivity
- [x] Declare state
- [x] Update state
- [x] Computed state
- [x] Templating
- [x] Minimal template
- [x] Styling
- [x] Loop
- [x] Event click
- [x] Dom ref
- [x] Conditional
- [x] Lifecycle
- [x] On mount
- [x] On unmount
- [x] Component composition
- [x] Props
- [x] Emit to parent
- [x] Slot
- [x] Slot fallback
- [x] Form input
- [x] Input text
- [x] Checkbox
- [x] Radio
- [x] Select
- [x] Webapp features
- [x] Fetch data
- [x] Router link
- [x] Routing
</details><details>
<summary>
@@ -299,34 +299,34 @@ How do we solve this ? Developers love having framework overview by examples. It
<b>Qwik</b>
<img src="https://us-central1-progress-markdown.cloudfunctions.net/progress/32" /></summary>
* [x] Reactivity
* [x] Declare state
* [x] Update state
* [x] Computed state
* [ ] Templating
* [x] Minimal template
* [x] Styling
* [x] Loop
* [x] Event click
* [ ] Dom ref
* [ ] Conditional
* [ ] Lifecycle
* [ ] On mount
* [ ] On unmount
* [ ] Component composition
* [ ] Props
* [ ] Emit to parent
* [ ] Slot
* [ ] Slot fallback
* [ ] Form input
* [ ] Input text
* [ ] Checkbox
* [ ] Radio
* [ ] Select
* [ ] Webapp features
* [ ] Fetch data
* [ ] Router link
* [ ] Routing
- [x] Reactivity
- [x] Declare state
- [x] Update state
- [x] Computed state
- [ ] Templating
- [x] Minimal template
- [x] Styling
- [x] Loop
- [x] Event click
- [ ] Dom ref
- [ ] Conditional
- [ ] Lifecycle
- [ ] On mount
- [ ] On unmount
- [ ] Component composition
- [ ] Props
- [ ] Emit to parent
- [ ] Slot
- [ ] Slot fallback
- [ ] Form input
- [ ] Input text
- [ ] Checkbox
- [ ] Radio
- [ ] Select
- [ ] Webapp features
- [ ] Fetch data
- [ ] Router link
- [ ] Routing
</details>
@@ -353,7 +353,7 @@ This project requires Node.js to be `v14.0.0` or higher, because we use new Java
## 🧑‍💻 Contributors
This project exists thanks to all the people who contribute. \[[Contribute](CONTRIBUTING.md)].
[![Contributors](https://opencollective.com/component-party/contributors.svg?width=890\&button=false)](https://github.com/matschik/component-party/graphs/contributors)
[![Contributors](https://opencollective.com/component-party/contributors.svg?width=890&button=false)](https://github.com/matschik/component-party/graphs/contributors)
## ⚖️ License
@@ -362,5 +362,4 @@ MIT. Made with 💖
<!-- variables -->
[gitpod-src]: https://shields.io/badge/Open%20in-Gitpod-green?logo=Gitpod
[gitpod-href]: https://gitpod.io/#https://github.com/matschik/component-party

2
content/2-templating/1-minimal-template/qwik/HelloWorld.tsx
View File

@@ -1,5 +1,5 @@
import { component$ } from '@builder.io/qwik';
export const HelloWorld = component$(() => {
return <div>Hello World</div>;
return <div>Hello World</div>;
});

17
content/2-templating/2-styling/qwik/CssStyle.tsx
View File

@@ -1,15 +1,16 @@
import { component$, Host, useStyles$ } from '@builder.io/qwik';
import { component$, useStyles$ } from '@builder.io/qwik';
export const App = component$(() => {
useStyles$(`
useStyles$(`
.title {
color: red;
}
`);
return (
<Host>
<h1 class="title">I am red</h1>
<button style={{ 'font-size': '10rem' }}>I am a button</button>
</Host>
);
return (
<>
<h1 class="title">I am red</h1>
<button style={{ 'font-size': '10rem' }}>I am a button</button>
</>
);
});

22
content/2-templating/3-loop/qwik/Colors.tsx
View File

@@ -1,14 +1,14 @@
import { component$, Host } from '@builder.io/qwik';
import { component$ } from '@builder.io/qwik';
export const Colors = component$(() => {
const colors = ['red', 'green', 'blue'];
return (
<Host>
<ul>
{colors.map((color) => (
<li key={color}>{color}</li>
))}
</ul>
</Host>
);
const colors = ['red', 'green', 'blue'];
return (
<>
<ul>
{colors.map((color) => (
<li key={color}>{color}</li>
))}
</ul>
</>
);
});

12
content/2-templating/4-event-click/qwik/Counter.tsx
View File

@@ -1,11 +1,11 @@
import { component$, useStore, Host } from '@builder.io/qwik';
import { component$, useStore } from '@builder.io/qwik';
export const Counter = component$(() => {
const store = useStore({ count: 0 });
return (
<Host>
<p>Counter: {store.count}</p>
<button onClick$={() => store.count++}>Increment</button>
</Host>
);
<>
<p>Counter: {store.count}</p>
<button onClick$={() => store.count++}>Increment</button>
</>
);
});

2
content/3-lifecycle/2-on-unmount/svelte/Time.svelte
View File

@@ -7,7 +7,7 @@
time = new Date().toLocaleTimeString();
}, 1000);
onDestroy(() => clearInterval(timer) );
onDestroy(() => clearInterval(timer));
</script>
<p>Current time: {time}</p>

2
content/3-lifecycle/2-on-unmount/vue3/Time.vue
View File

@@ -13,5 +13,5 @@ onUnmounted(() => {
</script>
<template>
<p>Current time: {{time}}</p>
<p>Current time: {{ time }}</p>
</template>

4
content/4-component-composition/2-emit-to-parent/solid/AnswerButton.jsx
View File

@@ -1,8 +1,8 @@
export default function AnswerButton(props) {
return (
<>
<button onClick={props.onYes}>YES</button>
<button onClick={props.onNo}>NO</button>
<button onClick={() => props.onYes()}>YES</button>
<button onClick={() => props.onNo()}>NO</button>
</>
);
}

40
content/7-webapp-features/1-fetch-data/alpine/index.html
View File

@@ -1,4 +1,5 @@
<div x-data="
<div
x-data="
function fetchUsers() {
return {
users: null,
@@ -16,22 +17,23 @@
},
};
}
">
<template x-if="isLoading">
<p>Loading...</p>
</template>
"
>
<template x-if="isLoading">
<p>Loading...</p>
</template>
<template x-if="error">
<p>Error fetching users</p>
</template>
<template x-if="!error">
<ul>
<template x-for="user in users">
<li>
<img :src="user.picture.thumbnail" :alt="`picture of ${user.name.first} ${user.name.last}`">
<p x-text="`${user.name.first} ${user.name.last}`"></p>
</li>
</template>
</ul>
</template>
</div>
<template x-if="error">
<p>Error fetching users</p>
</template>
<template x-if="!error">
<ul>
<template x-for="user in users">
<li>
<img :src="user.picture.thumbnail" :alt="`picture of ${user.name.first} ${user.name.last}`" />
<p x-text="`${user.name.first} ${user.name.last}`"></p>
</li>
</template>
</ul>
</template>
</div>

30
content/7-webapp-features/1-fetch-data/ember/demo.hbs
View File

@@ -1,22 +1,22 @@
{{#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>
{{#each request.users as |user|}}
<li>
<img src={{user.picture.thumbnail}} alt="user">
<p>{{user.name.first}} {{user.name.last}}</p>
</li>
{{/each}}
</ul>
<ul>
{{#each request.users as |user|}}
<li>
<img src={{user.picture.thumbnail}} alt='user' />
<p>{{user.name.first}} {{user.name.last}}</p>
</li>
{{/each}}
</ul>
{{/if}}
{{/let}}
{{/if}}
{{/let}}

40
content/7-webapp-features/1-fetch-data/ember/demo.js
View File

@@ -2,37 +2,37 @@ import { tracked } from '@glimmer/tracking';
import Component from '@glimmer/component';
export default class Demo extends Component {
fetchUsers = () => getUsers();
fetchUsers = () => getUsers();
}
class State {
@tracked isLoading = false;
@tracked error = null;
@tracked data = null;
@tracked isLoading = false;
@tracked error = null;
@tracked data = null;
}
function getUsers() {
let state = new State();
let state = new State();
async function fetchData() {
state.isLoading = true;
async function fetchData() {
state.isLoading = true;
try {
let response = await fetch('https://randomuser.me/api/?results=3');
let { results: users } = await response.json();
state.data = users;
state.error = null;
} catch (err) {
state.data = null;
state.error = err;
}
try {
let response = await fetch('https://randomuser.me/api/?results=3');
let { results: users } = await response.json();
state.data = users;
state.error = null;
} catch (err) {
state.data = null;
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.

6
content/7-webapp-features/2-router-link/alpine/alpine.md
View File

@@ -2,7 +2,7 @@ Using [location.hash](https://developer.mozilla.org/en-US/docs/Web/API/Location/
```html
<nav>
<a href="#">Index</a>
<a href="#contact">Contact Us</a>
<a href="#">Index</a>
<a href="#contact">Contact Us</a>
</nav>
```
```

2
content/7-webapp-features/3-routing/alpine/alpine.md
View File

@@ -18,4 +18,4 @@ Using [location.hash](https://developer.mozilla.org/en-US/docs/Web/API/Location/
</p>
</span>
</div>
```
```

74
package.json
View File

@@ -12,7 +12,7 @@
"lint": "eslint .",
"lint:fix": "eslint . --fix",
"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",
"prepare": "husky install"
},
@@ -26,52 +26,54 @@
},
"homepage": "https://github.com/matschik/component-party#readme",
"devDependencies": {
"@angular-eslint/eslint-plugin": "^13.2.1",
"@angular-eslint/eslint-plugin-template": "^13.2.1",
"@angular-eslint/template-parser": "^13.2.1",
"@angular/core": "^13.3.3",
"@angular/router": "^13.3.3",
"@astrojs/svelte": "^0.1.2",
"@astrojs/tailwind": "^0.1.2",
"@babel/eslint-parser": "^7.17.0",
"@babel/plugin-proposal-decorators": "^7.17.9",
"@builder.io/qwik": "0.0.20-5",
"@angular-eslint/eslint-plugin": "^14.0.2",
"@angular-eslint/eslint-plugin-template": "^14.0.2",
"@angular-eslint/template-parser": "^14.0.2",
"@angular/core": "^14.1.2",
"@angular/router": "^14.1.2",
"@astrojs/markdown-component": "^1.0.1",
"@astrojs/svelte": "^1.0.0",
"@astrojs/tailwind": "^1.0.0",
"@babel/eslint-parser": "^7.18.9",
"@babel/plugin-proposal-decorators": "^7.18.10",
"@builder.io/qwik": "0.0.100",
"@matschik/lz-string": "^0.0.2",
"@tailwindcss/typography": "^0.5.2",
"@tailwindcss/typography": "^0.5.4",
"@types/mdast": "^3.0.10",
"@typescript-eslint/eslint-plugin": "^5.20.0",
"@typescript-eslint/parser": "^5.20.0",
"astro": "^1.0.0-beta.12",
"autoprefixer": "^10.4.4",
"@typescript-eslint/eslint-plugin": "^5.33.0",
"@typescript-eslint/parser": "^5.33.0",
"astro": "^1.0.3",
"autoprefixer": "^10.4.8",
"codesandbox": "^2.2.3",
"eslint": "^8.13.0",
"eslint": "^8.21.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-prettier": "^4.0.0",
"eslint-plugin-qwik": "^0.0.34",
"eslint-plugin-react": "^7.29.4",
"eslint-plugin-solid": "^0.4.7",
"eslint-plugin-svelte3": "^3.4.1",
"eslint-plugin-vue": "^8.6.0",
"eslint-plugin-prettier": "^4.2.1",
"eslint-plugin-qwik": "^0.0.100",
"eslint-plugin-react": "^7.30.1",
"eslint-plugin-solid": "^0.7.1",
"eslint-plugin-svelte3": "^4.0.0",
"eslint-plugin-vue": "^9.3.0",
"esm": "^3.2.25",
"husky": "^7.0.4",
"lint-staged": "^12.3.8",
"husky": "^8.0.1",
"lint-staged": "^13.0.3",
"lodash.kebabcase": "^4.1.1",
"micache": "^2.4.1",
"pkg-dir": "^6.0.1",
"postcss": "^8.4.12",
"prettier": "^2.6.2",
"postcss": "^8.4.16",
"prettier": "^2.7.1",
"prettier-plugin-astro": "^0.5.0",
"prettier-plugin-svelte": "^2.7.0",
"prop-types": "^15.8.1",
"react": "^17.0.2",
"react": "^18.2.0",
"remark": "^14.0.2",
"shiki": "^0.10.1",
"svelte": "^3.47.0",
"tailwindcss": "^3.0.24",
"typescript": "^4.6.3",
"vite": "^2.9.5",
"vite-plugin-full-reload": "^1.0.0"
"shiki": "^0.11.0",
"svelte": "^3.49.0",
"tailwindcss": "^3.1.8",
"typescript": "^4.7.4",
"vite": "^2.9.15",
"vite-plugin-full-reload": "^1.0.4"
},
"lint-staged": {
"*.{js,jsx,ts,tsx,vue,svelte}": [
@@ -80,6 +82,6 @@
]
},
"dependencies": {
"alpinejs": "^3.10.2"
"alpinejs": "^3.10.3"
}
}

4757
pnpm-lock.yaml generated
View File

File diff suppressed because it is too large Load Diff

100
src/components/CodeViewer.astro
View File

@@ -1,57 +1,65 @@
---
import FileCode from '@/components/FileCode.astro';
const { path, editHref } = Astro.props
const { path, editHref } = Astro.props;
---
<script>
function copyToClipboard(value) {
const $textarea = document.createElement("textarea");
$textarea.innerHTML = value;
document.body.appendChild($textarea);
$textarea.select();
let success = false;
try {
document.execCommand("copy");
success = true
} catch (err) {
alert(
"Oops, unable to copy to clipboard. Please check website permissions."
);
}
$textarea.remove();
return success;
}
function copyToClipboard(value) {
const $textarea = document.createElement('textarea');
$textarea.innerHTML = value;
document.body.appendChild($textarea);
$textarea.select();
let success = false;
try {
document.execCommand('copy');
success = true;
} catch (err) {
alert('Oops, unable to copy to clipboard. Please check website permissions.');
}
$textarea.remove();
return success;
}
for(const $codeCopyContainer of document.querySelectorAll("[data-code-copy-container]")){
const $codeCopyText = $codeCopyContainer.querySelector("[data-code-copy-text]")
const $codeCopyButton = $codeCopyContainer.querySelector("[data-code-copy-button]")
for (const $codeCopyContainer of document.querySelectorAll('[data-code-copy-container]')) {
const $codeCopyText = $codeCopyContainer.querySelector('[data-code-copy-text]');
const $codeCopyButton = $codeCopyContainer.querySelector('[data-code-copy-button]');
$codeCopyButton.addEventListener("click", () => {
copyToClipboard($codeCopyText.innerText)
})
}
$codeCopyButton.addEventListener('click', () => {
copyToClipboard($codeCopyText.innerText);
});
}
</script>
<div data-code-copy-container class="relative group">
<div data-code-copy-text>
<FileCode path={path} />
</div>
<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">
{editHref &&
<a href={editHref} target="_blank">
<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">
<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="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>
</button>
</a>
}
<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" />
</svg>
</button>
</div>
</div>
<div data-code-copy-text>
<FileCode path={path} />
</div>
<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">
{
editHref && (
<a href={editHref} target="_blank">
<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">
<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="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>
</button>
</a>
)
}
<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>

20
src/components/FileCode.astro
View File

@@ -8,19 +8,17 @@ import astroHighlightCode from '@/components/CodeHighlight/astroHighlightCode.js
const { path, lang, theme = 'github-dark', wrap = false } = Astro.props;
// 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)
if(!html){
const fileExt = nodePath.parse(path).ext.split(".").pop()
const fileContent = await fs.readFile(path, "utf-8")
html = await astroHighlightCode({ code: fileContent, lang: lang || fileExt, theme, wrap })
fileCodeCache.set(path, html)
let html = await fileCodeCache.get(path);
if (!html) {
const fileExt = nodePath.parse(path).ext.split('.').pop();
const fileContent = await fs.readFile(path, 'utf-8');
html = await astroHighlightCode({ code: fileContent, lang: lang || fileExt, theme, wrap });
fileCodeCache.set(path, html);
}
---
<Fragment set:html={html} />

6
src/components/FrameworkLabel.astro
View File

@@ -1,7 +1,7 @@
---
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);
@@ -9,6 +9,6 @@ const baseURL = import.meta.env.MODE === 'development' ? '' : 'https://raw.githu
---
<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" />}
<span class="flex-shrink-0">{framework.title}</span>
{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>
</div>

332
src/components/Section.astro
View File

@@ -1,21 +1,21 @@
---
import fs from 'node:fs/promises'
import kebabCase from 'lodash.kebabcase'
import { Markdown } from 'astro/components'
import nodePath from 'node:path'
import fs from 'node:fs/promises';
import kebabCase from 'lodash.kebabcase';
import Markdown from '@astrojs/markdown-component';
import nodePath from 'node:path';
import Title from '@/components/Title.svelte'
import FrameworkLabel from '@/components/FrameworkLabel.astro'
import FRAMEWORKS from '@/frameworks.mjs'
import CodeViewer from '@/components/CodeViewer.astro'
import repl from "@/utils/repl"
import Title from '@/components/Title.svelte';
import FrameworkLabel from '@/components/FrameworkLabel.astro';
import FRAMEWORKS from '@/frameworks.mjs';
import CodeViewer from '@/components/CodeViewer.astro';
import repl from '@/utils/repl';
const { path: sectionPath } = Astro.props
const { path: sectionPath } = Astro.props;
const sectionId = sectionPath.split("/").pop()
const sectionRelativePath = sectionPath.split("/").slice(-2).join("/")
const sectionId = sectionPath.split('/').pop();
const sectionRelativePath = sectionPath.split('/').slice(-2).join('/');
const sections = []
const sections = [];
function dirNameToTitle(dirName) {
return capitalize(dirName.split('-').splice(1).join(' '));
@@ -26,170 +26,194 @@ function capitalize(string) {
}
function generatePlaygroundURL(frameworkId, files) {
const frameworkREPL = repl[frameworkId];
if (!frameworkREPL) {
return;
}
const frameworkREPL = repl[frameworkId];
if (!frameworkREPL) {
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) => {
acc[file.fileName] = file.content;
return acc;
}, {});
const contentByFilename = frameworkConfig.filesSorter(files).reduce((acc, file) => {
acc[file.fileName] = file.content;
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){
const path = `${sectionPath}/${dirName}`
const title = dirNameToTitle(dirName)
for (const dirName of subSectionDirNames) {
const path = `${sectionPath}/${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}`)
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}`
const ext = nodePath.parse(filePath).ext.split(".").pop()
files.push({
path: filePath,
fileName,
ext,
content: await fs.readFile(filePath, "utf-8")
})
}
for (const fileName of fileNames) {
const filePath = `${frameworkPath}/${fileName}`;
const ext = nodePath.parse(filePath).ext.split('.').pop();
files.push({
path: filePath,
fileName,
ext,
content: await fs.readFile(filePath, 'utf-8'),
});
}
frameworkSections.push({
dirName: frameworkDir,
path: frameworkPath,
files,
playgroundURL: generatePlaygroundURL(frameworkDir, files)
})
}
frameworkSections.push({
dirName: frameworkDir,
path: frameworkPath,
files,
playgroundURL: generatePlaygroundURL(frameworkDir, files),
});
}
sections.push({
id: kebabCase(title),
path,
dirName,
title,
frameworkSections
})
sections.push({
id: kebabCase(title),
path,
dirName,
title,
frameworkSections,
});
}
function getSectionFiles(section, framework){
return section.frameworkSections.find((f) => f.dirName === framework.id)?.files
function getSectionFiles(section, framework) {
return section.frameworkSections.find((f) => f.dirName === framework.id)?.files;
}
function getSectionMarkdownFiles(section, framework){
return getSectionFiles(section, framework)?.filter(f => f.ext === "md")
function getSectionMarkdownFiles(section, framework) {
return getSectionFiles(section, framework)?.filter((f) => f.ext === 'md');
}
function getSectionCodeFiles(section, framework){
const files = getSectionFiles(section, framework)?.filter(f => f.ext !== "md")
if(files?.length > 0 && typeof framework.filesSorter === 'function'){
return framework.filesSorter(files)
} else {
return files
}
function getSectionCodeFiles(section, framework) {
const files = getSectionFiles(section, framework)?.filter((f) => f.ext !== 'md');
if (files?.length > 0 && typeof framework.filesSorter === 'function') {
return framework.filesSorter(files);
} else {
return files;
}
}
function getFrameworkSectionPlaygroundURL(section, framework){
return section.frameworkSections.find((f) => f.dirName === framework.id)?.playgroundURL
function getFrameworkSectionPlaygroundURL(section, framework) {
return section.frameworkSections.find((f) => f.dirName === framework.id)?.playgroundURL;
}
---
<Title as="h1" content={dirNameToTitle(sectionId)} />
{
sections.map((section) => (
<>
<Title as="h2" content={section.title} />
<div class="grid grid-cols-1 2xl:grid-cols-2 gap-10" style="margin-top: 1rem;">
{FRAMEWORKS.map((framework) => (
<div x-show={`$store.frameworksSelected.has('${framework.id}')`} style="margin-top: 0rem;">
<div class="flex justify-between items-center space-x-3">
<h3 style="margin-top: 0rem; margin-bottom: 0rem;">
<FrameworkLabel id={framework.id} />
</h3>
<div class="flex items-center space-x-3">
{getFrameworkSectionPlaygroundURL(section, framework) &&
<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}`} >
<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">
<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" />
</svg>
</button>
</a>
}
<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 xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<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" />
</svg>
</button>
</div>
</div>
<div class="mt-2">
{getSectionMarkdownFiles(section, framework)?.length > 0 &&
<div>
{getSectionMarkdownFiles(section, framework).map((file) => (
<Markdown set:html={file.content} />
))}
</div>
}
{getSectionCodeFiles(section, framework)?.length > 0 && (
<div x-data={`{ filenameSelected: '${getSectionCodeFiles(section, framework)[0].fileName}' }`}>
<div class="flex space-x-1 items-center ml-0 overflow-x-auto">
{getSectionCodeFiles(section, framework).map((file) =>(
<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"></path></svg>
</a>
</div>
</div>
</div>
</div>
</div>
sections.map((section) => (
<>
<Title as="h2" content={section.title} />
<div class="grid grid-cols-1 2xl:grid-cols-2 gap-10" style="margin-top: 1rem;">
{FRAMEWORKS.map((framework) => (
<div x-show={`$store.frameworksSelected.has('${framework.id}')`} style="margin-top: 0rem;">
<div class="flex justify-between items-center space-x-3">
<h3 style="margin-top: 0rem; margin-bottom: 0rem;">
<FrameworkLabel id={framework.id} />
</h3>
<div class="flex items-center space-x-3">
{getFrameworkSectionPlaygroundURL(section, framework) && (
<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}`}
>
<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">
<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" />
</svg>
</button>
</a>
)}
<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 xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<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"
/>
</svg>
</button>
</div>
</div>
<div class="mt-2">
{getSectionMarkdownFiles(section, framework)?.length > 0 && (
<div>
{getSectionMarkdownFiles(section, framework).map((file) => (
<Markdown set:html={file.content || ''} />
))}
</div>
)}
}
</div>
</div>
))}
</div>
</>
))
{getSectionCodeFiles(section, framework)?.length > 0 && (
<div x-data={`{ filenameSelected: '${getSectionCodeFiles(section, framework)[0].fileName}' }`}>
<div class="flex space-x-1 items-center ml-0 overflow-x-auto">
{getSectionCodeFiles(section, framework).map((file) => (
<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>
</>
))
}

16
src/frameworks.mjs
View File

@@ -175,16 +175,22 @@ export default [
es2021: true,
node: true,
},
parserOptions: {
ecmaFeatures: {
jsx: true,
},
},
files: ['**/qwik/**'],
extends: [
'eslint:recommended',
'plugin:qwik/recommended'
],
extends: ['eslint:recommended',
'plugin:qwik/recommended'],
rules: {
'qwik/valid-lexical-scope': 'off'
}
},
playgroundURL: 'https://qwik.builder.io/playground',
documentationURL: 'https://qwik.builder.io/docs/overview',
filesSorter(files) {
return files;
},
}
},
];

47
src/layouts/BaseLayout.astro
View File

@@ -6,25 +6,32 @@ import FrameworkLabel from '@/components/FrameworkLabel.astro';
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%;">
<slot />
</main>
</div>
<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%;"
>
<slot />
</main>
</div>
</BaseLayout>

15
src/pages/index.astro
View File

@@ -5,14 +5,13 @@ import { packageDirectory } from 'pkg-dir';
import Layout from '@/layouts/BaseLayout.astro';
import Section from '@/components/Section.astro';
const rootDir = await packageDirectory()
const contentURL = `${rootDir}/content`
const sectionNames = await fs.readdir(contentURL)
const rootDir = await packageDirectory();
const contentURL = `${rootDir}/content`;
const sectionNames = await fs.readdir(contentURL);
---
<Layout>
<div class="space-y-12">
{sectionNames.map((sectionName) =>
<Section path={`${contentURL}/${sectionName}`} />
)}
</div>
<div class="space-y-12">
{sectionNames.map((sectionName) => <Section path={`${contentURL}/${sectionName}`} />)}
</div>
</Layout>