docs: documentation redesign

This commit is contained in:
Arthur Fiorette 2025-04-30 15:15:36 -03:00
parent 8342b65c50
commit c765578edb
No known key found for this signature in database
GPG Key ID: 79FA8EC214FA0233
9 changed files with 3077 additions and 2410 deletions

View File

@ -1,6 +1,7 @@
import { readFileSync } from 'node:fs';
import { resolve } from 'node:path';
import { defineConfig } from 'vitepress';
import llmstxt from 'vitepress-plugin-llms';
const read = (relative) =>
readFileSync(resolve(process.cwd(), 'docs', '.vitepress', relative), 'utf-8');
@ -10,7 +11,9 @@ const VERSION = isVersion > -1 ? process.argv[isVersion + 1].slice(1, -1) : 'Lat
const BASE_URL = isVersion > -1 ? process.argv[isVersion + 1] : '/';
console.log(
isVersion > -1 ? `Building docs for version ${VERSION}` : 'Building docs for latest version'
isVersion > -1
? `Building docs for version ${VERSION}`
: 'Building docs for latest version'
);
const description =
@ -38,14 +41,37 @@ export default defineConfig({
// Use git commit to get the timestamp of the last update
lastUpdated: true,
vite: {
plugins: [
llmstxt({
domain: url,
description,
title: 'Axios Cache Interceptor',
ignoreFiles: ['others/license.md', 'others/changelog.md']
})
]
},
// Additional elements to render in the <head> tag in the page HTML
head: [
// Attach a custom favicon
['link', { rel: 'icon', href: `${BASE_URL}favicon.ico', type: 'image/x-icon` }],
['link', { rel: 'apple-touch-icon', sizes: '57x57', href: `${BASE_URL}apple-icon-57x57.png` }],
['link', { rel: 'apple-touch-icon', sizes: '60x60', href: `${BASE_URL}apple-icon-60x60.png` }],
['link', { rel: 'apple-touch-icon', sizes: '72x72', href: `${BASE_URL}apple-icon-72x72.png` }],
['link', { rel: 'apple-touch-icon', sizes: '76x76', href: `${BASE_URL}apple-icon-76x76.png` }],
[
'link',
{ rel: 'apple-touch-icon', sizes: '57x57', href: `${BASE_URL}apple-icon-57x57.png` }
],
[
'link',
{ rel: 'apple-touch-icon', sizes: '60x60', href: `${BASE_URL}apple-icon-60x60.png` }
],
[
'link',
{ rel: 'apple-touch-icon', sizes: '72x72', href: `${BASE_URL}apple-icon-72x72.png` }
],
[
'link',
{ rel: 'apple-touch-icon', sizes: '76x76', href: `${BASE_URL}apple-icon-76x76.png` }
],
[
'link',
{
@ -125,7 +151,10 @@ export default defineConfig({
['link', { rel: 'manifest', href: `${BASE_URL}manifest.json` }],
['meta', { name: 'msapplication-TileColor', content: '#e5972a' }],
['meta', { name: 'msapplication-TileImage', content: `${BASE_URL}ms-icon-144x144.png` }],
[
'meta',
{ name: 'msapplication-TileImage', content: `${BASE_URL}ms-icon-144x144.png` }
],
['meta', { name: 'theme-color', content: '#e5972a' }],
['meta', { name: 'description', content: description }],
@ -185,6 +214,7 @@ export default defineConfig({
// `themeConfig` has JSDoc definitions for all the options
themeConfig: {
logo: '/rocket.svg',
socialLinks: [
{
icon: 'discord',
@ -221,13 +251,16 @@ export default defineConfig({
items: [
{ text: 'Latest', link: url },
{ text: 'v0.x', link: `${url}/v0/` }
].filter((i) => (BASE_URL === '/' ? i.text !== 'Latest' : !i.link.includes(BASE_URL)))
].filter((i) =>
BASE_URL === '/' ? i.text !== 'Latest' : !i.link.includes(BASE_URL)
)
}
],
//! Temp link for testing, will be changed to the real one before merged to production
editLink: {
pattern: 'https://github.com/arthurfiorette/axios-cache-interceptor/edit/main/docs/src/:path'
pattern:
'https://github.com/arthurfiorette/axios-cache-interceptor/edit/main/docs/src/:path'
},
footer: {
@ -235,10 +268,13 @@ export default defineConfig({
copyright: 'Copyright (c) 2021-present Arthur Fiorette & Contributors'
},
algolia: {
appId: 'WPY8IFS0UX',
apiKey: '8cc9e4ff3f98b5854346224aac791bbf',
indexName: 'axios-cache-interceptor-js'
search: {
provider: 'algolia',
options: {
appId: 'WPY8IFS0UX',
apiKey: '8cc9e4ff3f98b5854346224aac791bbf',
indexName: 'axios-cache-interceptor-js'
}
},
carbonAds: {
@ -269,19 +305,19 @@ export default defineConfig({
{ text: 'Response Object', link: '/config/response-object' }
]
},
{
text: 'Others',
items: [
{ text: 'MIT License', link: '/others/license' },
{ text: 'Changelog', link: '/others/changelog' },
{ text: 'llms.txt', link: '/llms.txt' }
]
}
{ text: 'MIT License', link: '/others/license' },
{ text: 'Changelog', link: '/others/changelog' },
{ text: 'llms.txt', link: '/llms.txt' },
{ text: 'llms-full.txt', link: '/llms-full.txt' }
]
},
markdown: {
lineNumbers: false,
typographer: true
theme: {
dark: 'kanagawa-wave',
light: 'kanagawa-lotus'
},
typographer: true,
}
});

View File

@ -1,38 +0,0 @@
:root {
--vp-c-brand-1: hsl(35, 78%, 53%);
--vp-c-brand-2: hsl(35, 78%, 70%);
--vp-button-brand-bg: hsl(35, 78%, 53%);
--vp-button-brand-active-bg: hsla(35, 78%, 53%, 36.5%);
--vp-button-brand-hover-bg: hsl(35, 78%, 70%);
--vp-c-brand-light: hsla(35, 78%, 53%, 36.5%);
--vp-c-brand-lighter: hsla(35, 78%, 53%, 36.5%);
--vp-c-brand-dark: hsl(35, 78%, 53%);
--vp-c-brand-darker: hsl(35, 78%, 53%);
--vp-home-hero-name-color: transparent;
--vp-home-hero-name-background: -webkit-linear-gradient(
120deg,
hsl(15, 78%, 53%),
hsl(55, 87%, 76%)
);
--vp-home-hero-image-background-image: -webkit-linear-gradient(
45deg,
hsl(0, 78%, 53%),
hsl(70, 78%, 53%)
);
--vp-home-hero-image-filter: blur(40px);
}
@media (min-width: 640px) {
:root {
--vp-home-hero-image-filter: blur(56px);
}
}
@media (min-width: 960px) {
:root {
--vp-home-hero-image-filter: blur(72px);
}
}

View File

@ -0,0 +1,74 @@
#trusted-by-wrapper {
margin: 0 auto;
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
}
#small-text {
font-size: 0.8rem;
display: block;
margin: 1rem;
color: var(--vp-c-text-2);
text-align: center;
}
#small-text a {
color: var(--vp-c-text-1);
text-decoration: underline;
}
#small-text a:hover {
text-decoration: none;
}
#trusted-by {
display: flex;
align-items: center;
justify-content: space-around;
background-color: var(--vp-c-bg-soft);
border-radius: 12px;
gap: 2rem;
width: min(100%, 1152px);
flex-wrap: wrap;
margin: 0 24px;
min-height: 20vh;
padding: 24px;
}
#trusted-by a {
filter: contrast(0);
width: 128px;
transition: all 0.2s ease-in;
}
#trusted-by a:hover {
filter: none;
}
@media (min-width: 960px) {
#trusted-by {
margin: 0 64px;
}
}
@media (min-width: 640px) {
#trusted-by {
margin: 0 48px;
}
}
.contributors {
margin-top: 2rem;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
gap: 1rem;
}
.VPTeamMembers.medium.count-1 {
display: flex;
justify-content: center;
}

View File

@ -1,4 +1,5 @@
import Theme from 'vitepress/theme';
import './custom.css';
import './style.css';
import './homepage.css'
export default Theme;

View File

@ -0,0 +1,137 @@
/**
* Customize default theme styling by overriding CSS variables:
* https://github.com/vuejs/vitepress/blob/main/src/client/theme-default/styles/vars.css
*/
/**
* Colors
*
* Each colors have exact same color scale system with 3 levels of solid
* colors with different brightness, and 1 soft color.
*
* - `XXX-1`: The most solid color used mainly for colored text. It must
* satisfy the contrast ratio against when used on top of `XXX-soft`.
*
* - `XXX-2`: The color used mainly for hover state of the button.
*
* - `XXX-3`: The color for solid background, such as bg color of the button.
* It must satisfy the contrast ratio with pure white (#ffffff) text on
* top of it.
*
* - `XXX-soft`: The color used for subtle background such as custom container
* or badges. It must satisfy the contrast ratio when putting `XXX-1` colors
* on top of it.
*
* The soft color must be semi transparent alpha channel. This is crucial
* because it allows adding multiple "soft" colors on top of each other
* to create a accent, such as when having inline code block inside
* custom containers.
*
* - `default`: The color used purely for subtle indication without any
* special meanings attached to it such as bg color for menu hover state.
*
* - `brand`: Used for primary brand colors, such as link text, button with
* brand theme, etc.
*
* - `tip`: Used to indicate useful information. The default theme uses the
* brand color for this by default.
*
* - `warning`: Used to indicate warning to the users. Used in custom
* container, badges, etc.
*
* - `danger`: Used to show error, or dangerous message to the users. Used
* in custom container, badges, etc.
* -------------------------------------------------------------------------- */
:root {
--vp-c-default-1: var(--vp-c-gray-1);
--vp-c-default-2: var(--vp-c-gray-2);
--vp-c-default-3: var(--vp-c-gray-3);
--vp-c-default-soft: var(--vp-c-gray-soft);
--vp-c-brand-1: hsl(43, 66%, 49%);
--vp-c-brand-2: hsl(35, 67%, 47%);
--vp-c-brand-3: hsl(44, 69%, 64%);
--vp-c-brand-soft: hsla(54, 30%, 35%, 0.161);
--vp-c-tip-1: var(--vp-c-brand-1);
--vp-c-tip-2: var(--vp-c-brand-2);
--vp-c-tip-3: var(--vp-c-brand-3);
--vp-c-tip-soft: var(--vp-c-brand-soft);
--vp-c-warning-1: var(--vp-c-yellow-1);
--vp-c-warning-2: var(--vp-c-yellow-2);
--vp-c-warning-3: var(--vp-c-yellow-3);
--vp-c-warning-soft: var(--vp-c-yellow-soft);
--vp-c-danger-1: var(--vp-c-red-1);
--vp-c-danger-2: var(--vp-c-red-2);
--vp-c-danger-3: var(--vp-c-red-3);
--vp-c-danger-soft: var(--vp-c-red-soft);
}
.dark {
--vp-c-brand-1: hsl(44, 69%, 64%);
--vp-c-brand-2: hsl(35, 67%, 47%);
--vp-c-brand-3: hsl(43, 66%, 49%);
--vp-c-brand-soft: hsla(54, 30%, 35%, 0.161);
}
/**
* Component: Button
* -------------------------------------------------------------------------- */
:root {
--vp-button-brand-border: transparent;
--vp-button-brand-text: var(--vp-c-white);
--vp-button-brand-bg: var(--vp-c-brand-3);
--vp-button-brand-hover-border: transparent;
--vp-button-brand-hover-text: var(--vp-c-white);
--vp-button-brand-hover-bg: var(--vp-c-brand-2);
--vp-button-brand-active-border: transparent;
--vp-button-brand-active-text: var(--vp-c-white);
--vp-button-brand-active-bg: var(--vp-c-brand-1);
}
/**
* Component: Home
* -------------------------------------------------------------------------- */
:root {
--vp-home-hero-name-color: transparent;
--vp-home-hero-name-background: -webkit-linear-gradient(120deg, #e5582a, #f7ee8d);
--vp-home-hero-image-background-image: -webkit-linear-gradient(45deg, #e52a2a, #c5e52a);
--vp-home-hero-image-filter: blur(44px);
}
@media (min-width: 640px) {
:root {
--vp-home-hero-image-filter: blur(56px);
}
}
@media (min-width: 960px) {
:root {
--vp-home-hero-image-filter: blur(68px);
}
}
/**
* Component: Custom Block
* -------------------------------------------------------------------------- */
:root {
--vp-custom-block-tip-border: transparent;
--vp-custom-block-tip-text: var(--vp-c-text-1);
--vp-custom-block-tip-bg: var(--vp-c-brand-soft);
--vp-custom-block-tip-code-bg: var(--vp-c-brand-soft);
}
/**
* Component: Algolia
* -------------------------------------------------------------------------- */
.DocSearch {
--docsearch-primary-color: var(--vp-c-brand-1) !important;
}

View File

@ -2,7 +2,7 @@
[Looking for axios v0?](https://axios-cache-interceptor.js.org/v0/)
## Install Axios Cache Interceptor
## Install
Add Axios Cache Interceptor and Axios to your project using your favorite package manager:
@ -27,7 +27,7 @@ import { setupCache } from 'https://cdn.skypack.dev/axios-cache-interceptor';
:::
## Setup Axios Cache Interceptor
## Setup
After installing, you can import the package and apply the interceptor to your axios
instance, as shown below:

View File

@ -64,7 +64,6 @@ import {
VPTeamMembers
} from 'vitepress/theme'
const members = [
{
avatar: 'https://github.com/arthurfiorette.png',
@ -91,4 +90,9 @@ const members = [
<VPTeamMembers
:members="members"
/>
<div class="contributors">
<a href="https://github.com/arthurfiorette/axios-cache-interceptor/graphs/contributors">
<img src="https://contrib.rocks/image?repo=arthurfiorette/axios-cache-interceptor" />
</a>
</div>
</VPTeamPage>

View File

@ -2,7 +2,15 @@
"name": "axios-cache-interceptor",
"version": "1.8.0",
"description": "Cache interceptor for axios",
"keywords": ["axios", "cache", "interceptor", "adapter", "http", "plugin", "wrapper"],
"keywords": [
"axios",
"cache",
"interceptor",
"adapter",
"http",
"plugin",
"wrapper"
],
"homepage": "https://axios-cache-interceptor.js.org",
"bugs": "https://github.com/arthurfiorette/axios-cache-interceptor/issues",
"repository": {
@ -47,9 +55,6 @@
"test:types": "tsc -p tsconfig.build.json",
"version": "auto-changelog -p && cp CHANGELOG.md docs/src/others/changelog.md && git add CHANGELOG.md docs/src/others/changelog.md"
},
"resolutions": {
"colors": "1.4.0"
},
"dependencies": {
"cache-parser": "1.2.5",
"fast-defer": "1.1.8",
@ -66,10 +71,11 @@
"axios": "1.9.0",
"c8": "10.1.3",
"jsdom": "26.1.0",
"microbundle": "^0.15.1",
"microbundle": "0.15.1",
"tslib": "2.8.1",
"typescript": "5.8.3",
"vitepress": "1.6.3"
"vitepress": "1.6.3",
"vitepress-plugin-llms": "1.1.1"
},
"peerDependencies": {
"axios": "^1"

5127
pnpm-lock.yaml generated

File diff suppressed because it is too large Load Diff