Skip to content

Commit

Permalink
Setup structure
Browse files Browse the repository at this point in the history
  • Loading branch information
simonihmig committed Jul 21, 2024
1 parent 2c2190c commit e5b1066
Show file tree
Hide file tree
Showing 3 changed files with 75 additions and 20 deletions.
47 changes: 42 additions & 5 deletions apps/docs/.vitepress/config.ts
Original file line number Diff line number Diff line change
Expand Up @@ -10,21 +10,58 @@ export default defineConfig({
// https://vitepress.dev/reference/default-theme-config
nav: [
{ text: 'Home', link: '/' },
{ text: 'Examples', link: '/markdown-examples' },
{ text: 'Getting started', link: '/getting-started' },
{
text: 'Frameworks',
link: '/frameworks',
},
{
text: 'Build plugins',
link: '/build',
},
{
text: 'Image CDNs',
link: '/cdn',
},
],

sidebar: [
{
text: 'Examples',
text: 'Getting started',
link: '/getting-started',
},
{
text: 'Core concepts',
link: '/concepts',
},
{
text: 'Frameworks',
link: '/frameworks',
items: [{ text: 'Ember', link: '/frameworks/ember' }],
},
{
text: 'Build plugins',
link: '/build',
items: [
{ text: 'Markdown Examples', link: '/markdown-examples' },
{ text: 'Runtime API Examples', link: '/api-examples' },
{ text: 'Vite', link: '/build/vite' },
{ text: 'Webpack', link: '/build/webpack' },
],
},
{
text: 'Image CDNs',
link: '/cdn',
items: [
{ text: 'Cloudinary', link: '/cdn/cloudinary' },
{ text: 'Imgix', link: '/cdn/imgix' },
],
},
],

socialLinks: [
{ icon: 'github', link: 'https://github.com/vuejs/vitepress' },
{
icon: 'github',
link: 'https://github.com/simonihmig/responsive-image',
},
],
},
});
1 change: 1 addition & 0 deletions apps/docs/src/getting-started.md
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
# Getting started
47 changes: 32 additions & 15 deletions apps/docs/src/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -3,23 +3,40 @@
layout: home

hero:
name: "Responsive Image"
text: "Documentation for the Responsive Image project"
tagline: My great project tagline
name: 'Responsive Image'
text: 'The multi-framework JavaScript library for responsive images.'
tagline: Responsive images made easy.
actions:
- theme: brand
text: Markdown Examples
link: /markdown-examples
- theme: alt
text: API Examples
link: /api-examples
text: Getting started
link: /getting-started
# - theme: alt
# text: API Examples
# link: /api-examples

features:
- title: Feature A
details: Lorem ipsum dolor sit amet, consectetur adipiscing elit
- title: Feature B
details: Lorem ipsum dolor sit amet, consectetur adipiscing elit
- title: Feature C
details: Lorem ipsum dolor sit amet, consectetur adipiscing elit
- title: Next-gen image formats
icon: 🌇
details: Supports basic PNG and JPEG formats, as well as next-gen WebP and AVIF, for best image quality at low file sizes.
- title: Fast image processing
icon: 🏎
details: Super fast image processing, thanks to the awesome sharp library.
- title: Layout modes
icon: 📱
details: Layout modes for fixed sizes (with 1x and 2x image variants) as well as responsive layouts (srcset with optimized image sizes across all devices).
- title: Image CDNs
icon: 🌍
details: Besides processing of local images, it also supports integrating remote images from <b>image CDNs</b> like Cloudinary or imgix using a versatile image provider abstraction
- title: Web Performance
icon: 💯
details: Lazy rendering by default, with optimized content-visibility and decoding settings and optimized markup, to prevent CLS (Cumulative Layout Shift), a core Web Vital and Lighthouse metric.
- title: Low Quality Image Placeholders
icon:
details: Supports advanced LQIP techniques to show a preview while loading, using different configurable strategies like a blurry low-res image, BlurHash or a simple dominant color.
- title: Multi Framework
icon: 🛠️
details: 'Supports Vite and Webpack for local image processing, a framework-agnostic core and components for multiple frontend frameworks: Ember.js and more in the future.'
- title: High Quality
icon:
details: Engineered with quality in mind, all functionality is fully tested (unit and integration tests), packages ship with native TypeScript types.
---

0 comments on commit e5b1066

Please sign in to comment.