Merge pull request #633 from simonihmig/docs-vitepress

Dedicated docs

.changeset/tasty-ads-guess.md

@@ -0,0 +1,6 @@
+---
+'@responsive-image/webpack': patch
+'@responsive-image/vite-plugin': patch
+---
+
+Fix LQIP color bug causing invalid hex values

apps/docs/.gitignore

@@ -0,0 +1 @@
+.vitepress/cache

apps/docs/.vitepress/config.ts

@@ -0,0 +1,104 @@
+import { defineConfig } from 'vitepress';
+
+// https://vitepress.dev/reference/site-config
+export default defineConfig({
+  title: 'Responsive Image',
+  description: 'Documentation for the Responsive Image project',
+  srcDir: './src',
+  cleanUrls: true,
+  appearance: 'dark',
+  themeConfig: {
+    // https://vitepress.dev/reference/default-theme-config
+    nav: [
+      { text: 'Home', link: '/' },
+      { text: 'Usage', link: '/usage/concepts' },
+      {
+        text: 'Frameworks',
+        link: '/frameworks/',
+      },
+      {
+        text: 'Build plugins',
+        link: '/build/',
+      },
+      {
+        text: 'Image CDNs',
+        link: '/cdn/',
+      },
+    ],
+
+    sidebar: [
+      {
+        text: 'Getting started',
+        link: '/getting-started',
+      },
+      {
+        text: 'Usage',
+        base: '/usage',
+        // link: '/usage/concepts',
+        items: [
+          {
+            text: 'Core concepts',
+            link: '/concepts',
+          },
+          {
+            text: 'Image component',
+            link: '/component',
+          },
+          {
+            text: 'Local images',
+            link: '/local-images',
+          },
+          {
+            text: 'Remote images',
+            link: '/remote-images',
+          },
+          {
+            text: 'Image formats',
+            link: '/image-formats',
+          },
+          {
+            text: 'LQIP',
+            link: '/lqip',
+          },
+        ],
+      },
+      {
+        text: 'Frameworks',
+        link: '/',
+        base: '/frameworks',
+        items: [{ text: 'Ember', link: '/ember' }],
+      },
+      {
+        text: 'Build plugins',
+        link: '/',
+        base: '/build',
+        items: [
+          { text: 'Vite', link: '/vite' },
+          { text: 'Webpack', link: '/webpack' },
+        ],
+      },
+      {
+        text: 'Image CDNs',
+        link: '/',
+        base: '/cdn',
+        items: [
+          { text: 'Cloudinary', link: '/cloudinary' },
+          { text: 'Imgix', link: '/imgix' },
+        ],
+      },
+    ],
+
+    socialLinks: [
+      {
+        icon: 'github',
+        link: 'https://github.com/simonihmig/responsive-image',
+      },
+    ],
+
+    footer: {
+      message: 'Made with ❤︎ for OSS - Support 🇺🇦',
+      copyright:
+        'Copyright © 2024 <a href="https://github.com/simonihmig">Simon Ihmig</a>',
+    },
+  },
+});

apps/docs/.vitepress/theme/index.ts

@@ -0,0 +1,17 @@
+// https://vitepress.dev/guide/custom-theme
+import { h } from 'vue'
+import type { Theme } from 'vitepress'
+import DefaultTheme from 'vitepress/theme'
+import './style.css'
+
+export default {
+  extends: DefaultTheme,
+  Layout: () => {
+    return h(DefaultTheme.Layout, null, {
+      // https://vitepress.dev/guide/extending-default-theme#layout-slots
+    })
+  },
+  enhanceApp({ app, router, siteData }) {
+    // ...
+  }
+} satisfies Theme

apps/docs/.vitepress/theme/style.css

@@ -0,0 +1,138 @@
+/**
+ * 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 attched 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: #6cad59;
+  --vp-c-brand-2: #6cad59;
+  --vp-c-brand-3: #538543;
+  --vp-c-brand-soft: var(--vp-c-green-soft);
+
+  --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);
+}
+
+/**
+ * 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,
+    #6cad59 30%,
+    #027aaa
+  );
+
+  --vp-home-hero-image-background-image: linear-gradient(
+    -45deg,
+    #064f6c99 50%,
+    #6ba25a99 50%
+  );
+  --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;
+}

apps/docs/package.json

@@ -0,0 +1,19 @@
+{
+  "name": "docs",
+  "version": "0.0.0",
+  "private": true,
+  "description": "VitePress app powering the docs",
+  "type": "module",
+  "scripts": {
+    "test": "vitepress build",
+    "docs:dev": "vitepress dev",
+    "docs:build": "vitepress build",
+    "docs:preview": "vitepress preview"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "MIT",
+  "devDependencies": {
+    "vitepress": "^1.3.1"
+  }
+}

apps/docs/src/api-examples.md

@@ -0,0 +1,49 @@
+---
+outline: deep
+---
+
+# Runtime API Examples
+
+This page demonstrates usage of some of the runtime APIs provided by VitePress.
+
+The main `useData()` API can be used to access site, theme, and page data for the current page. It works in both `.md` and `.vue` files:
+
+```md
+<script setup>
+import { useData } from 'vitepress'
+
+const { theme, page, frontmatter } = useData()
+</script>
+
+## Results
+
+### Theme Data
+<pre>{{ theme }}</pre>
+
+### Page Data
+<pre>{{ page }}</pre>
+
+### Page Frontmatter
+<pre>{{ frontmatter }}</pre>
+```
+
+<script setup>
+import { useData } from 'vitepress'
+
+const { site, theme, page, frontmatter } = useData()
+</script>
+
+## Results
+
+### Theme Data
+<pre>{{ theme }}</pre>
+
+### Page Data
+<pre>{{ page }}</pre>
+
+### Page Frontmatter
+<pre>{{ frontmatter }}</pre>
+
+## More
+
+Check out the documentation for the [full list of runtime APIs](https://vitepress.dev/reference/runtime-api#usedata).

apps/docs/src/build/index.md

@@ -0,0 +1,6 @@
+# Building local images
+
+If you have static images that are part of your local codebase (checked into your git repo), you can get these processed as part of your app's build using one of the provided build plugins, depending on which build system your app is using:
+
+- [vite](./vite)
+- [webpack](./webpack)