diff --git a/packages/website/package.json b/packages/website/package.json index 92bbb9d..11da506 100644 --- a/packages/website/package.json +++ b/packages/website/package.json @@ -53,7 +53,7 @@ "npm-run-all": "^4.1.5", "postcss": "^8.4.14", "rehype-prism-plus": "^1.4.2", - "tailwindcss": "^3.1.6", + "tailwindcss": "^3.2.7", "typedoc": "^0.23.8", "typescript": "^4.7.4", "wait-on": "^6.0.1" diff --git a/packages/website/src/components/nav-link.astro b/packages/website/src/components/nav-link.astro new file mode 100644 index 0000000..8a28620 --- /dev/null +++ b/packages/website/src/components/nav-link.astro @@ -0,0 +1,14 @@ +--- +export type Props = astroHTML.JSX.AnchorHTMLAttributes & { + href: string +} +const url = Astro.url +const linkUrl = new URL(Astro.props.href, url) +--- + + + + diff --git a/packages/website/src/pages/guides/[slug].astro b/packages/website/src/pages/guides/[slug].astro index bbaf7ea..61aba7c 100644 --- a/packages/website/src/pages/guides/[slug].astro +++ b/packages/website/src/pages/guides/[slug].astro @@ -4,6 +4,7 @@ import { getCollection, type CollectionEntry } from "astro:content" import AppFooter from "~/components/app-footer.astro" import Layout from "~/components/layout.astro" import MainNavigation from "~/components/main-navigation.astro" +import NavLink from "~/components/nav-link.astro" export type Props = { guide: CollectionEntry<"guides"> @@ -37,9 +38,13 @@ const { Content } = await Astro.props.guide.render() { guides.map((guide) => (
  • - + {guide.data.title} - +
  • )) } diff --git a/packages/website/src/styles/tailwind.css b/packages/website/src/styles/tailwind.css index 1c39410..6a5e0d3 100644 --- a/packages/website/src/styles/tailwind.css +++ b/packages/website/src/styles/tailwind.css @@ -24,13 +24,13 @@ @apply font-medium inline-block relative opacity-60 hover:opacity-100 transition-opacity; } .link::after { - @apply content-[''] absolute block w-full h-px bg-current translate-y-[3px] opacity-0 transition; + @apply content-[''] bottom-[-2px] absolute block w-full h-px bg-current translate-y-[3px] opacity-0 transition; } .link:hover::after { @apply -translate-y-px opacity-50; } .link-active { - @apply text-emerald-500; + @apply text-emerald-500 opacity-100; } .button { diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 8c50b2b..69cf8b9 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -122,7 +122,7 @@ importers: react-router: ^6.3.0 react-router-dom: ^6.3.0 rehype-prism-plus: ^1.4.2 - tailwindcss: ^3.1.6 + tailwindcss: ^3.2.7 typedoc: ^0.23.8 typescript: ^4.7.4 wait-on: ^6.0.1 @@ -138,7 +138,7 @@ importers: '@remix-run/node': 1.6.5_biqbaboplfbrettd7655fr4n2y '@remix-run/react': 1.6.5_biqbaboplfbrettd7655fr4n2y '@remix-run/vercel': 1.7.2_vdcavuuprsfwosnu3x64sz2mz4 - '@tailwindcss/typography': 0.5.4_tailwindcss@3.1.6 + '@tailwindcss/typography': 0.5.4_tailwindcss@3.2.7 '@vercel/node': 2.5.21 astro: 2.1.2_@types+node@18.0.6 clsx: 1.2.1 @@ -152,7 +152,7 @@ importers: react-router-dom: 6.3.0_biqbaboplfbrettd7655fr4n2y zod: 3.17.10 devDependencies: - '@astrojs/tailwind': 3.1.0_xtmeljc6rkmhc46azo7bjollee + '@astrojs/tailwind': 3.1.0_5fkwwuzubt6borit3q7k7y2k74 '@remix-run/dev': 1.6.5_xontd7q62j6h4ge55exoz26nhu '@remix-run/serve': 1.6.5_biqbaboplfbrettd7655fr4n2y '@testing-library/cypress': 8.0.3_cypress@10.3.1 @@ -166,7 +166,7 @@ importers: npm-run-all: 4.1.5 postcss: 8.4.14 rehype-prism-plus: 1.4.2 - tailwindcss: 3.1.6_postcss@8.4.14 + tailwindcss: 3.2.7_postcss@8.4.14 typedoc: 0.23.8_typescript@4.7.4 typescript: 4.7.4 wait-on: 6.0.1 @@ -257,7 +257,7 @@ packages: - supports-color dev: false - /@astrojs/tailwind/3.1.0_xtmeljc6rkmhc46azo7bjollee: + /@astrojs/tailwind/3.1.0_5fkwwuzubt6borit3q7k7y2k74: resolution: {integrity: sha512-eNflzlCdCtLZjc8pK0xQb/hXYnN/mVGVJFRAMWStrFwg8Tsvj6WVCPyRy77D5NL2tQ1piS2wiouOzAgiy1Dsiw==} peerDependencies: astro: ^2.1.0 @@ -268,7 +268,7 @@ packages: autoprefixer: 10.4.7_postcss@8.4.21 postcss: 8.4.21 postcss-load-config: 4.0.1_postcss@8.4.21 - tailwindcss: 3.1.6_postcss@8.4.14 + tailwindcss: 3.2.7_postcss@8.4.14 transitivePeerDependencies: - ts-node dev: true @@ -2598,7 +2598,7 @@ packages: defer-to-connect: 2.0.1 dev: true - /@tailwindcss/typography/0.5.4_tailwindcss@3.1.6: + /@tailwindcss/typography/0.5.4_tailwindcss@3.2.7: resolution: {integrity: sha512-QEdg40EmGvE7kKoDei8zr5sf4D1pIayHj4R31bH3lX8x2BtTiR+jNejYPOkhbmy3DXgkMF9jC8xqNiGFAuL9Sg==} peerDependencies: tailwindcss: '>=3.0.0 || insiders' @@ -2606,7 +2606,7 @@ packages: lodash.castarray: 4.4.0 lodash.isplainobject: 4.0.6 lodash.merge: 4.6.2 - tailwindcss: 3.1.6_postcss@8.4.14 + tailwindcss: 3.2.7_postcss@8.4.14 dev: false /@testing-library/cypress/8.0.3_cypress@10.3.1: @@ -2641,7 +2641,7 @@ packages: /@ts-morph/common/0.11.1: resolution: {integrity: sha512-7hWZS0NRpEsNV8vWJzg7FEz6V8MaLNeJOmwmghqUXTpzk16V1LLZhdo+4QvE/+zv4cVci0OviuJFnqhEfoV3+g==} dependencies: - fast-glob: 3.2.11 + fast-glob: 3.2.12 minimatch: 3.1.2 mkdirp: 1.0.4 path-browserify: 1.0.1 @@ -6199,7 +6199,7 @@ packages: '@types/glob': 7.2.0 array-union: 2.1.0 dir-glob: 3.0.1 - fast-glob: 3.2.11 + fast-glob: 3.2.12 glob: 7.2.3 ignore: 5.2.4 merge2: 1.4.1 @@ -6748,16 +6748,10 @@ packages: ci-info: 3.5.0 dev: true - /is-core-module/2.10.0: - resolution: {integrity: sha512-Erxj2n/LDAZ7H8WNJXd9tw38GYM3dv8rk8Zcs+jJuxYTW7sozH+SS8NtrSjVL1/vpLvWi1hxy96IzjJ3EHTJJg==} - dependencies: - has: 1.0.3 - /is-core-module/2.11.0: resolution: {integrity: sha512-RRjxlvLDkD1YJwDbroBHMb+cukurkDWNyHx7D3oNB5x9rb5ogcksMC5wHCadcXoo67gVr/+3GFySh3134zi6rw==} dependencies: has: 1.0.3 - dev: true /is-data-descriptor/0.1.4: resolution: {integrity: sha512-+w9D5ulSoBNlmw9OHn3U2v51SyoCd0he+bB3xMl62oijhrspxowjU+AIcDY0N3iEJbUEkB15IlMASQsxYigvXg==} @@ -9035,17 +9029,17 @@ packages: yaml: 2.2.1 dev: true - /postcss-nested/5.0.6_postcss@8.4.14: - resolution: {integrity: sha512-rKqm2Fk0KbA8Vt3AdGN0FB9OBOMDVajMG6ZCf/GoHgdxUJ4sBFp0A/uMIRm+MJUdo33YXEtjqIz8u7DAp8B7DA==} + /postcss-nested/6.0.0_postcss@8.4.14: + resolution: {integrity: sha512-0DkamqrPcmkBDsLn+vQDIrtkSbNkv5AD/M322ySo9kqFkCIYklym2xEmWkwo+Y3/qZo34tzEPNUw4y7yMCdv5w==} engines: {node: '>=12.0'} peerDependencies: postcss: ^8.2.14 dependencies: postcss: 8.4.14 - postcss-selector-parser: 6.0.10 + postcss-selector-parser: 6.0.11 - /postcss-selector-parser/6.0.10: - resolution: {integrity: sha512-IQ7TZdoaqbT+LCpShg46jnZVlhWD2w6iQYAcYXfHARZ7X1t/UGhhceQDs5X0cGqKvYlHNOuv7Oa1xmb0oQuA3w==} + /postcss-selector-parser/6.0.11: + resolution: {integrity: sha512-zbARubNdogI9j7WY4nQJBiNqQf3sLS3wCP4WfOidu+p28LofJqDH1tcXypGrcmMHhDk2t9wGhCsYe/+szLTy1g==} engines: {node: '>=4'} dependencies: cssesc: 3.0.0 @@ -9773,7 +9767,7 @@ packages: resolution: {integrity: sha512-nBpuuYuY5jFsli/JIs1oldw6fOQCBioohqWZg/2hiaOybXOft4lonv85uDOKXdf8rhyK159cxU5cDcK/NKk8zw==} hasBin: true dependencies: - is-core-module: 2.10.0 + is-core-module: 2.11.0 path-parse: 1.0.7 supports-preserve-symlinks-flag: 1.0.0 @@ -10562,8 +10556,8 @@ packages: '@pkgr/utils': 2.3.1 tslib: 2.5.0 - /tailwindcss/3.1.6_postcss@8.4.14: - resolution: {integrity: sha512-7skAOY56erZAFQssT1xkpk+kWt2NrO45kORlxFPXUt3CiGsVPhH1smuH5XoDH6sGPXLyBv+zgCKA2HWBsgCytg==} + /tailwindcss/3.2.7_postcss@8.4.14: + resolution: {integrity: sha512-B6DLqJzc21x7wntlH/GsZwEXTBttVSl1FtCzC8WP4oBc/NKef7kaax5jeihkkCEWc831/5NDJ9gRNDK6NEioQQ==} engines: {node: '>=12.13.0'} hasBin: true peerDependencies: @@ -10575,10 +10569,11 @@ packages: detective: 5.2.1 didyoumean: 1.2.2 dlv: 1.1.3 - fast-glob: 3.2.11 + fast-glob: 3.2.12 glob-parent: 6.0.2 is-glob: 4.0.3 lilconfig: 2.0.6 + micromatch: 4.0.5 normalize-path: 3.0.0 object-hash: 3.0.0 picocolors: 1.0.0 @@ -10586,8 +10581,8 @@ packages: postcss-import: 14.1.0_postcss@8.4.14 postcss-js: 4.0.0_postcss@8.4.14 postcss-load-config: 3.1.4_postcss@8.4.14 - postcss-nested: 5.0.6_postcss@8.4.14 - postcss-selector-parser: 6.0.10 + postcss-nested: 6.0.0_postcss@8.4.14 + postcss-selector-parser: 6.0.11 postcss-value-parser: 4.2.0 quick-lru: 5.1.1 resolve: 1.22.1