🏝 now with real islands hehe

README.md

@@ -94,6 +94,22 @@ Building uses vite and solid-start
 pnpm build
 ```
 
+### Update dependencies
+
+Try and find new minors, majors and bugfixes with taze
+
+```bash
+pnpm deps
+```
+
+### Lint your project
+
+There is a very stripped-down eslint, which you can use
+
+```bash
+pnpm lint
+```
+
 ## Acknoledgements
 
 This repo is inspired by 🏕 [antfu/vitesse](https://github.com/antfu/vitesse)

package.json

@@ -17,16 +17,15 @@
     "@formkit/auto-animate": "1.0.0-beta.3",
     "@iconify-json/carbon": "1.1.7",
     "@mdx-js/rollup": "2.1.3",
+    "@motionone/solid": "10.14.1",
     "@rollup/plugin-replace": "4.0.0",
-    "@solid-primitives/destructure": "0.1.2",
     "@solid-primitives/i18n": "1.1.1",
     "@solidjs/meta": "0.28.0",
     "@solidjs/router": "0.4.2",
     "@testing-library/dom": "8.17.1",
     "@testing-library/jest-dom": "5.16.5",
-    "@types/testing-library__jest-dom": "5.14.5",
-    "jsdom": "20.0.0",
     "@testing-library/user-event": "14.4.3",
+    "@types/testing-library__jest-dom": "5.14.5",
     "@typescript-eslint/eslint-plugin": "5.36.1",
     "@typescript-eslint/parser": "5.36.1",
     "autoprefixer": "10.4.8",
@@ -35,6 +34,8 @@
     "eslint": "8.23.0",
     "eslint-plugin-import": "2.26.0",
     "eslint-plugin-unused-imports": "2.0.0",
+    "jsdom": "20.0.0",
+    "motion": "10.14.1",
     "pnpm": "7.9.5",
     "postcss": "8.4.16",
     "postcss-import": "15.0.0",

src/components/counter/component.tsx

@@ -6,9 +6,6 @@ import type { createCounter } from './reactivity'
 interface Props extends ReturnType<typeof createCounter> { }
 
 const Counter: Component<Props> = (props) => {
-  const { counter } = destructure(() => props)
-  const { increment } = props
-
   const [theme] = useContext(ThemeContext)
 
   return (
@@ -19,10 +16,10 @@ const Counter: Component<Props> = (props) => {
         <p
           class="text-center transition opacity-0 cursor-pointer group-hover:opacity-100 dark:text-gray-50"
         >
-          {counter()}
+          {props.counter()}
         </p>
         <div class="-m-1">
-          <Button onClick={() => increment()}>
+          <Button onClick={() => props.increment()}>
             <div class="i-carbon-moonrise h-6 w-6" />
           </Button>
         </div>

src/islands/language/index.tsx

@@ -0,0 +1,17 @@
+import Button from "@components/button";
+
+export default function () {
+  const [_, { locale }] = useI18n()
+
+
+  const nextLanguage = () => {
+    const next = locale() === 'en' ? 'fr' : 'en'
+    locale(next)
+  }
+
+  return (
+    <Button onClick={() => nextLanguage()}>
+      <div class="i-carbon-language w-6 h-6" />
+    </Button>
+  )
+}

src/islands/paragraph/index.tsx

@@ -7,13 +7,14 @@ interface Variables {
 
 interface Props {
   key: string
+  class?: string
   variable?: Variables
 }
 
 const Paragraph: Component<Props> = (props) => {
   const [t] = useI18n()
   return (
-    <p>{t(props.key, props.variable)}</p>
+    <p class={props.class}>{t(props.key, props.variable)}</p>
   )
 }