layout, hero, features
| layout |
hero |
features |
| home |
| name |
text |
image |
actions |
| axios docs |
axios is a simple HTTP client for the browser and Node.js |
| dark |
light |
alt |
| /logo.svg |
/logo-light.svg |
axios |
|
| theme |
text |
link |
| brand |
Get started |
/pages/getting-started/first-steps |
|
| theme |
text |
link |
| alt |
API reference |
/pages/advanced/api-reference |
|
|
|
| title |
details |
| Simple implementation |
Getting started with axios is as simple as a single line of code. Making simple API requests can be done in 2 lines of code. |
|
| title |
details |
| Powerful interceptors |
Our innovative interceptor system allows you to control the request and response lifecycle. You can modify requests, responses, and errors. |
|
| title |
details |
| TypeScript support |
axios declares types and has full support for TypeScript. This means you can use axios with confidence in your TypeScript projects. |
|
|
<script setup>
import Splide from '@splidejs/splide';
import { onMounted } from 'vue';
import allSponsors from './data/sponsors.json';
onMounted(() => {
new Splide(
'.splide',
{
type: 'loop',
autoplay: true,
interval: 3000,
perPage: 5,
perMove: 1,
gap: 10,
snap: true,
pagination: false,
breakpoints: {
1200: {
perPage: 4,
},
960: {
perPage: 3,
},
640: {
perPage: 2,
},
480: {
perPage: 1,
},
},
}
).mount();
});
const activePlatinumSponsors = allSponsors.platinum.filter((sponsor) => sponsor.active);
const activeGoldSponsors = allSponsors.gold.filter((sponsor) => sponsor.active);
const activeSilverSponsors = allSponsors.silver.filter((sponsor) => sponsor.active);
const sponsors = [...activePlatinumSponsors, ...activeGoldSponsors, ...activeSilverSponsors];
const capitalizeFirstLetter = (word) => {
return String(word).charAt(0).toUpperCase() + String(word).slice(1);
};
</script>
{{ sponsor.name }}
-
{{ capitalizeFirstLetter(sponsor.tier) }}
<style module>
.container {
display: flex;
margin: 0 auto;
max-width: 1200px;
}
.cardWrapper {
display: flex;
flex-direction: column;
grid-column: span 1 / span 1;
border-radius: 0.5rem;
border: 1px solid var(--vp-c-gutter) !important;
text-align: center;
background-color: var(--card-background-color) !important;
width: 100%;
max-width: 11.5rem;
scroll-snap-align: center;
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
flex-shrink: 0 !important;
margin-bottom: 0.5rem !important;
margin-top: 0.5rem !important;
margin-left: auto;
margin-right: auto;
}
.imgWrapper {
display: flex;
padding: 1.75rem;
padding-bottom: 0.75rem;
flex-direction: column;
flex: 1 1 0%;
align-items: center;
justify-content: center;
}
.img {
width: 8rem;
height: 8rem;
}
.heading {
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
height: 3rem;
margin-top: 1rem !important;
font-size: 1rem !important;
line-height: 1.5rem !important;
font-weight: 600 !important;
color: var(--vp-c-text-1) !important;
text-wrap-style: pretty;
display: -webkit-box;
}
.cardDl {
display: flex;
margin-top: 0.25rem;
flex-direction: column;
flex-grow: 1;
justify-content: space-between;
}
.tagSponsorPlatinum {
display: inline-flex;
padding-top: 0.25rem;
padding-bottom: 0.25rem;
padding-left: 0.5rem;
padding-right: 0.5rem;
align-items: center;
border-radius: 9999px;
box-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
--tw-ring-inset: inset;
font-size: 0.75rem;
line-height: 1rem;
font-weight: 500;
color: #000;
background-color: #E5E7EB;
}
.tagSponsorGold {
display: inline-flex;
padding-top: 0.25rem;
padding-bottom: 0.25rem;
padding-left: 0.5rem;
padding-right: 0.5rem;
align-items: center;
border-radius: 9999px;
box-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
--tw-ring-inset: inset;
font-size: 0.75rem;
line-height: 1rem;
font-weight: 500;
color: #FFF;
background-color: #F59E0B;
}
.tagSponsorSilver {
display: inline-flex;
padding-top: 0.25rem;
padding-bottom: 0.25rem;
padding-left: 0.5rem;
padding-right: 0.5rem;
align-items: center;
border-radius: 9999px;
box-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
--tw-ring-inset: inset;
font-size: 0.75rem;
line-height: 1rem;
font-weight: 500;
color: #FFF;
background-color: #9CA3AF;
}
.tagSponsorBronze {
display: inline-flex;
padding-top: 0.25rem;
padding-bottom: 0.25rem;
padding-left: 0.5rem;
padding-right: 0.5rem;
align-items: center;
border-radius: 9999px;
box-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
--tw-ring-inset: inset;
font-size: 0.75rem;
line-height: 1rem;
font-weight: 500;
color: #FFF;
background-color: #854D0E;
}
.tagSponsorBacker {
display: inline-flex;
padding-top: 0.25rem;
padding-bottom: 0.25rem;
padding-left: 0.5rem;
padding-right: 0.5rem;
align-items: center;
border-radius: 9999px;
box-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
--tw-ring-inset: inset;
font-size: 0.75rem;
line-height: 1rem;
font-weight: 500;
color: #FFF;
background-color: #2563EB;
}
.linksWrapper {
display: flex;
margin-top: -1px;
}
.link {
display: flex;
flex: 1 1 0%;
width: 0;
}
.rightLink {
display: inline-flex;
position: relative;
padding-top: 1rem;
padding-bottom: 1rem;
margin-right: -1px;
flex: 1 1 0%;
column-gap: 0.75rem;
justify-content: center;
align-items: center;
border-bottom-left-radius: 0.5rem;
border-top: 1px;
border-right: 1px;
border-left: 0px;
border-bottom: 0px;
border-style: solid;
border-color: var(--vp-c-gutter);
width: 0;
font-size: 0.875rem;
line-height: 1.25rem;
font-weight: 600;
color: #111827;
}
.leftLink {
display: inline-flex;
position: relative;
padding-top: 1rem;
padding-bottom: 1rem;
flex: 1 1 0%;
column-gap: 0.75rem;
justify-content: center;
align-items: center;
border-bottom-right-radius: 0.5rem;
border-top: 1px;
border-left: 0px;
border-bottom: 0px;
border-right: 0px;
border-style: solid;
border-color: var(--vp-c-gutter);
width: 0;
font-size: 0.875rem;
line-height: 1.25rem;
font-weight: 600;
color: #111827;
}
.linkIcon {
width: 1.25rem;
height: 1.25rem;
color: #9CA3AF;
}
</style>
Jay