diff --git a/.vscode/extensions.json b/.vscode/extensions.json new file mode 100755 index 00000000..5e4a6152 --- /dev/null +++ b/.vscode/extensions.json @@ -0,0 +1,8 @@ +{ + "recommendations": [ + "Vue.volar", + "dbaeumer.vscode-eslint", + "esbenp.prettier-vscode", + "antfu.unocss" + ] +} diff --git a/.vscode/settings.json b/.vscode/settings.json index 992477fb..0486c068 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -1,4 +1,51 @@ { + // As per https://github.com/antfu/eslint-config#vs-code-support-auto-fix-on-save + "prettier.enable": false, + "editor.formatOnSave": false, + + // Auto fix + "editor.codeActionsOnSave": { + "source.fixAll.eslint": "explicit", + "source.organizeImports": "never" + }, + + // Silent the stylistic rules in you IDE, but still auto fix them + "eslint.rules.customizations": [ + { "rule": "style/*", "severity": "off", "fixable": true }, + { "rule": "format/*", "severity": "off", "fixable": true }, + { "rule": "*-indent", "severity": "off", "fixable": true }, + { "rule": "*-spacing", "severity": "off", "fixable": true }, + { "rule": "*-spaces", "severity": "off", "fixable": true }, + { "rule": "*-order", "severity": "off", "fixable": true }, + { "rule": "*-dangle", "severity": "off", "fixable": true }, + { "rule": "*-newline", "severity": "off", "fixable": true }, + { "rule": "*quotes", "severity": "off", "fixable": true }, + { "rule": "*semi", "severity": "off", "fixable": true } + ], + + // Enable eslint for all supported languages + "eslint.validate": [ + "javascript", + "javascriptreact", + "typescript", + "typescriptreact", + "vue", + "html", + "markdown", + "json", + "jsonc", + "yaml", + "toml", + "xml", + "gql", + "graphql", + "astro", + "css", + "less", + "scss", + "pcss", + "postcss" + ], "typescript.tsdk": "node_modules/typescript/lib", "files.exclude": { "**/dist": true @@ -9,4 +56,4 @@ "search.exclude": { "**/dist": true } -} \ No newline at end of file +} diff --git a/README.md b/README.md index 97d2ddeb..83255c14 100644 --- a/README.md +++ b/README.md @@ -83,7 +83,7 @@ Visit the [documentation website][docs] to check out the [guides][guide] and sea - [Vite] and [Vue]: for enabling an amazing development experience - [Astro](https://astro.build): for sharing a novel way to define islands - [MDX]: provides amazing flexibility when processing Markdown -- [vue-router], [@vueuse/head], and [vite-plugin-pages]: the backbone of this library +- [vue-router], [@unhead/vue], and [vite-plugin-pages]: the backbone of this library - [unplugin-vue-components]: allows you to avoid the boilerplate - [VitePress] and [vite-ssg]: for their different ideas on SSR @@ -96,5 +96,5 @@ Visit the [documentation website][docs] to check out the [guides][guide] and sea [VitePress]: https://vitepress.vuejs.org/ [vite-ssg]: https://github.com/antfu/vite-ssg [vue-router]: https://next.router.vuejs.org/ -[@vueuse/head]: https://github.com/vueuse/head +[@unhead/vue]: https://github.com/unjs/unhead diff --git a/docs/.gitignore b/docs/.gitignore index b2e95add..f0bfa6f5 100644 --- a/docs/.gitignore +++ b/docs/.gitignore @@ -1,5 +1,6 @@ node_modules dist +.iles-ssg-temp .vitepress/metadata.json cypress/videos cypress/screenshots diff --git a/docs/README.md b/docs/README.md index 6e18de13..2e752945 100644 --- a/docs/README.md +++ b/docs/README.md @@ -30,4 +30,4 @@ This is the source code of the [documentation website for îles][docs]. It's built using [îles]. -[__Live Website__][docs] +[**Live Website**][docs] diff --git a/docs/cypress/e2e/dark-mode.cypress.cy.js b/docs/cypress/e2e/dark-mode.cypress.cy.js index 093d2e21..d21c4191 100644 --- a/docs/cypress/e2e/dark-mode.cypress.cy.js +++ b/docs/cypress/e2e/dark-mode.cypress.cy.js @@ -1,18 +1,20 @@ -import { visitHome, navigateTo, goBackHome, assertPage } from './helpers' +import { describe, expect, it } from 'vitest' +import { cy } from 'cypress' +import { assertPage, goBackHome, navigateTo, visitHome } from './helpers' describe('Dark Mode', () => { const toggleTheme = () => { cy.get(`[aria-label="Toggle theme"]`).click() } - const assertTheme = (theme) => + const assertTheme = theme => cy.get('html').then(html => expect(html.hasClass('dark')).to.equal(theme === 'dark')) it('can toggle on and off', () => { visitHome() - cy.get('html').then(html => { - if (html.hasClass('dark')) toggleTheme() + cy.get('html').then((html) => { + if (html.hasClass('dark')) { toggleTheme() } assertTheme('light') }) diff --git a/docs/cypress/e2e/docsearch.cypress.cy.js b/docs/cypress/e2e/docsearch.cypress.cy.js index 2c44c657..29e7a4d4 100644 --- a/docs/cypress/e2e/docsearch.cypress.cy.js +++ b/docs/cypress/e2e/docsearch.cypress.cy.js @@ -1,4 +1,6 @@ -import { visitHome, navigateTo, goBackHome, assertPage } from './helpers' +import { describe, it } from 'vitest' +import { cy } from 'cypress' +import { assertPage, goBackHome, navigateTo, visitHome } from './helpers' describe('DocSearch', () => { const openSearchModal = () => { @@ -15,7 +17,7 @@ describe('DocSearch', () => { const searchModal = () => cy.get('.DocSearch-Modal') - const closeSearchModal = () =>{ + const closeSearchModal = () => { cy.get('body').type('{esc}') searchModal().should('not.exist') } diff --git a/docs/cypress/e2e/helpers.js b/docs/cypress/e2e/helpers.js index dae5de20..04d0509a 100644 --- a/docs/cypress/e2e/helpers.js +++ b/docs/cypress/e2e/helpers.js @@ -1,6 +1,8 @@ +import { cy } from 'cypress' + export const assertPage = ({ title, content }) => { cy.get('h1').should('contain', title) - if (content) cy.get('p').should('contain', content) + if (content) { cy.get('p').should('contain', content) } } export const navigateTo = (title) => { diff --git a/docs/cypress/e2e/home.cypress.cy.js b/docs/cypress/e2e/home.cypress.cy.js index 2c538a1b..6d5f2546 100644 --- a/docs/cypress/e2e/home.cypress.cy.js +++ b/docs/cypress/e2e/home.cypress.cy.js @@ -1,4 +1,6 @@ -import { visitHome, navigateTo, assertPage, goBackHome } from './helpers' +import { describe, it } from 'vitest' +import { cy } from 'cypress' +import { assertPage, goBackHome, navigateTo, visitHome } from './helpers' describe('The Home Page', () => { it('successfully loads', () => { diff --git a/docs/cypress/e2e/sidebar.cypress.cy.js b/docs/cypress/e2e/sidebar.cypress.cy.js index 49ef9361..c8e858ba 100644 --- a/docs/cypress/e2e/sidebar.cypress.cy.js +++ b/docs/cypress/e2e/sidebar.cypress.cy.js @@ -1,4 +1,6 @@ -import { visit, navigateTo, goBackHome, assertPage, waitForHydration } from './helpers' +import { describe, it, test } from 'vitest' +import { cy } from 'cypress' +import { assertPage, visit, visitHome, waitForHydration } from './helpers' describe('Sidebar Toggle', () => { const sidebar = () => diff --git a/docs/icons/arrowRight.svg b/docs/icons/arrowRight.svg index 3df7d07c..8f542e6d 100644 --- a/docs/icons/arrowRight.svg +++ b/docs/icons/arrowRight.svg @@ -1 +1 @@ - \ No newline at end of file + diff --git a/docs/icons/logo.svg b/docs/icons/logo.svg index ee45c710..622e7654 100644 --- a/docs/icons/logo.svg +++ b/docs/icons/logo.svg @@ -1 +1 @@ - + diff --git a/docs/icons/text.svg b/docs/icons/text.svg index 75ee2c3b..7ccab2d1 100644 --- a/docs/icons/text.svg +++ b/docs/icons/text.svg @@ -1,4 +1,4 @@ -îles +îles diff --git a/docs/icons/vite.svg b/docs/icons/vite.svg index de4aeddc..fe3311b1 100644 --- a/docs/icons/vite.svg +++ b/docs/icons/vite.svg @@ -1,4 +1,4 @@ - + diff --git a/docs/iles.config.ts b/docs/iles.config.ts index bd74cbb6..a4ee8ec2 100644 --- a/docs/iles.config.ts +++ b/docs/iles.config.ts @@ -1,4 +1,4 @@ -import { resolve } from 'path' +import { resolve } from 'node:path' import { defineConfig } from 'iles' import headings from '@islands/headings' @@ -6,7 +6,7 @@ import icons from '@islands/icons' import prism from '@islands/prism' import pwa from '@islands/pwa' -import windicss from 'vite-plugin-windicss' +import UnoCSS from 'unocss/vite' import inspect from 'vite-plugin-inspect' import lastUpdated from './modules/lastUpdated' import site from './src/site' @@ -55,6 +55,7 @@ export default defineConfig({ globPatterns: ['**/*.{js,css,svg,ico,png,avif,json,xml,html}'], runtimeCaching: [ { + // eslint-disable-next-line prefer-regex-literals urlPattern: new RegExp('https://unpkg.com/.*', 'i'), handler: 'CacheFirst', options: { @@ -69,6 +70,7 @@ export default defineConfig({ }, }, { + // eslint-disable-next-line prefer-regex-literals urlPattern: new RegExp('https://pixel.thesemetrics.org/.*', 'i'), handler: 'CacheFirst', options: { @@ -92,9 +94,8 @@ export default defineConfig({ ], }, ssg: { - manualChunks (id, api) { - if (id.includes('preact') || id.includes('algolia') || id.toLowerCase().includes('docsearch')) - return 'docsearch' + manualChunks(id, api) { + if (id.includes('preact') || id.includes('algolia') || id.toLowerCase().includes('docsearch')) { return 'docsearch' } }, }, vite: { @@ -104,7 +105,7 @@ export default defineConfig({ }, }, plugins: [ - windicss(), + UnoCSS(), Boolean(process.env.DEBUG) && inspect(), ], }, diff --git a/docs/modules/lastUpdated.ts b/docs/modules/lastUpdated.ts index 8f84e0f2..cc980618 100644 --- a/docs/modules/lastUpdated.ts +++ b/docs/modules/lastUpdated.ts @@ -3,18 +3,17 @@ import type { IlesModule } from 'iles' export default () => ({ name: 'git-last-updated-at', - extendFrontmatter (frontmatter, filename) { + extendFrontmatter(frontmatter, filename) { const lastUpdated = lastUpdatedFromGit(filename) - if (lastUpdated) - frontmatter.meta.lastUpdated = lastUpdated + if (lastUpdated) { frontmatter.meta.lastUpdated = lastUpdated } }, }) as IlesModule -function lastUpdatedFromGit (filename: string) { +function lastUpdatedFromGit(filename: string) { try { const result = spawn('git', ['log', '-1', '--format=%at', filename]) - const date = new Date(parseInt(result.stdout as any) * 1000) - return isNaN(Number(date)) ? null : date + const date = new Date(Number.parseInt(result.stdout as any) * 1000) + return Number.isNaN(Number(date)) ? null : date } catch { return null diff --git a/docs/package.json b/docs/package.json index 700dd5af..6f3c774b 100644 --- a/docs/package.json +++ b/docs/package.json @@ -1,54 +1,44 @@ { "name": "docs", + "type": "module", "version": "1.0.0", "private": true, - "type": "module", + "engines": { + "node": "^14.18 || >= 16.0.0" + }, "scripts": { "dev": "iles --open --port 3001", "build": "iles build", "preview": "iles preview --open --port 3050", "now": "npm run build && npm run preview", - "lint": "eslint . --ext .ts,.js,.vue,.html", + "lint": "eslint .", + "lint:fix": "eslint . --fix", "check": "vue-tsc --noEmit", "cy:run": "scripts/test-cypress" }, - "engines": { - "node": "^14.18 || >= 16.0.0" + "dependencies": { + "@docsearch/css": "^3.6.1", + "@mussi/docsearch": "3.1.2-beta.0" }, "devDependencies": { - "@iconify-json/bx": "^1.0.3", - "@iconify-json/heroicons-outline": "^1.0.2", + "@iconify-json/bx": "^1.1.10", + "@iconify-json/heroicons-outline": "^1.1.10", "@islands/headings": "workspace:*", "@islands/icons": "workspace:*", "@islands/prism": "workspace:*", "@islands/pwa": "workspace:*", - "@preact/preset-vite": "^2.5.0", - "@types/cross-spawn": "^6.0.2", - "@vueuse/core": "^6.9.2", - "autoprefixer": "^10.4.0", + "@preact/preset-vite": "^2.9.0", + "@types/cross-spawn": "^6.0.6", + "@vueuse/core": "^10.11.0", + "autoprefixer": "^10.4.19", "cross-spawn": "^7.0.3", "iles": "workspace:*", - "postcss-nesting": "^8.0.1", - "preact": "^10.11.2", - "preact-render-to-string": "^6.1.0", - "rehype-external-links": "^1.0.0", - "vite-plugin-inspect": "^0.7.29", - "vite-plugin-windicss": "^1.9.0", - "vue-tsc": "^0.29.8" - }, - "dependencies": { - "@docsearch/css": "^3.1.1", - "@mussi/docsearch": "^3.1.2-beta.0" - }, - "eslintConfig": { - "rules": { - "react/react-in-jsx-scope": "off" - }, - "globals": { - "$ref": "readonly", - "$computed": "readonly", - "$$": "readonly", - "$": "readonly" - } + "postcss-nesting": "^12.1.5", + "preact": "^10.23.1", + "preact-render-to-string": "^6.5.7", + "rehype-external-links": "^3.0.0", + "unocss": "^0.61.8", + "vite-plugin-inspect": "^0.8.5", + "vue-tsc": "^2.0.29" } } diff --git a/docs/postcss.config.js b/docs/postcss.config.js index 5ff61803..09a11d4c 100644 --- a/docs/postcss.config.js +++ b/docs/postcss.config.js @@ -1,6 +1,6 @@ export default { plugins: { - autoprefixer: {}, + 'autoprefixer': {}, 'postcss-nesting': {}, }, } diff --git a/docs/src/app.ts b/docs/src/app.ts index 407e35a1..0d238633 100644 --- a/docs/src/app.ts +++ b/docs/src/app.ts @@ -1,19 +1,21 @@ -import 'virtual:windi.css' -import 'virtual:windi-devtools' +import 'virtual:uno.css' +import '@unocss/reset/tailwind-compat.css' import '~/styles/all.css' import { defineApp } from 'iles' +import type { Script } from '@unhead/schema' import Image from '~/components/Image.vue' import checkDarkTheme from '~/logic/dark-color-scheme-check?raw' -import type { Script } from '@unhead/schema' type TurboScript = Script & { once: true } -const prodScripts = import.meta.env.PROD ? [ - { src: 'https://unpkg.com/thesemetrics@latest', async: true, once: true, crossorigin: 'anonymous' } as TurboScript, -] : [] +const prodScripts = import.meta.env.PROD + ? [ + { src: 'https://unpkg.com/thesemetrics@latest', async: true, once: true, crossorigin: 'anonymous' } as TurboScript, + ] + : [] export default defineApp({ head: { diff --git a/docs/src/components/AppButton.vue b/docs/src/components/AppButton.vue index 48642407..d0b86640 100644 --- a/docs/src/components/AppButton.vue +++ b/docs/src/components/AppButton.vue @@ -7,9 +7,9 @@ defineProps({
- +
- + @@ -26,7 +26,7 @@ defineProps({ .outline { background: theme('colors.gray.100'); color: theme('colors.gray.500'); - + outline-style: none; &:hover { background: theme('colors.gray.200'); } @@ -43,11 +43,11 @@ html.dark { } .outline { - background: theme('colors.warm-gray.800'); + background: theme('colors.warmgray.800'); color: theme('colors.gray.200'); &:hover { - background: theme('colors.warm-gray.600'); + background: theme('colors.warmgray.600'); } } } @@ -64,7 +64,7 @@ html.dark { top: -1px; margin-left: 2px; fill: currentColor; - transition: transform .2s; + transition: transform 0.2s; } &:hover :deep(.icon) { diff --git a/docs/src/components/AstroLogo.vue b/docs/src/components/AstroLogo.vue index e0bfd794..869de3dc 100644 --- a/docs/src/components/AstroLogo.vue +++ b/docs/src/components/AstroLogo.vue @@ -1,5 +1,5 @@ diff --git a/docs/src/components/Caption.vue b/docs/src/components/Caption.vue index 38ab1af7..68673134 100644 --- a/docs/src/components/Caption.vue +++ b/docs/src/components/Caption.vue @@ -1,3 +1,5 @@ diff --git a/docs/src/components/CloudflareLogo.vue b/docs/src/components/CloudflareLogo.vue index e3c374ae..9735aedc 100644 --- a/docs/src/components/CloudflareLogo.vue +++ b/docs/src/components/CloudflareLogo.vue @@ -1,5 +1,5 @@ diff --git a/docs/src/components/DarkModeSwitch.vue b/docs/src/components/DarkModeSwitch.vue index f39f2c58..c5fa3469 100644 --- a/docs/src/components/DarkModeSwitch.vue +++ b/docs/src/components/DarkModeSwitch.vue @@ -5,8 +5,8 @@ import { isDark, toggleDark } from '~/logic/dark' diff --git a/docs/src/components/DocSearch.tsx b/docs/src/components/DocSearch.tsx index 47a2aa0a..81aef136 100644 --- a/docs/src/components/DocSearch.tsx +++ b/docs/src/components/DocSearch.tsx @@ -1,8 +1,9 @@ -import { DocSearch, DocSearchProps } from '@mussi/docsearch' +import type { DocSearchProps } from '@mussi/docsearch' +import { DocSearch } from '@mussi/docsearch' import '~/styles/docsearch.css' const options: Partial = { - transformItems (items) { + transformItems(items) { return items.map((item) => { const getRelativePath = (url: string) => { const { pathname, hash } = new URL(url) @@ -13,13 +14,14 @@ const options: Partial = { }, } -const IlesDocSearch = (props: Partial) => +const IlesDocSearch = (props: Partial) => ( +) export default IlesDocSearch diff --git a/docs/src/components/EditLink.vue b/docs/src/components/EditLink.vue index 56bcb7e8..be36ecf0 100644 --- a/docs/src/components/EditLink.vue +++ b/docs/src/components/EditLink.vue @@ -1,7 +1,9 @@ diff --git a/docs/src/components/GitHubLogo.vue b/docs/src/components/GitHubLogo.vue index 53451730..6cfea0d1 100644 --- a/docs/src/components/GitHubLogo.vue +++ b/docs/src/components/GitHubLogo.vue @@ -1,5 +1,5 @@ diff --git a/docs/src/components/HomeHero.vue b/docs/src/components/HomeHero.vue index bc4b073d..df9ab46a 100644 --- a/docs/src/components/HomeHero.vue +++ b/docs/src/components/HomeHero.vue @@ -13,7 +13,7 @@ :alt="$frontmatter.heroAlt" > -