Skip to content

Commit dd9b374

Browse files
stafyniaksachastafyniaksacha
committed
feat: create documentation with vitepress
1 parent 5e75ff6 commit dd9b374

19 files changed

Lines changed: 2131 additions & 1079 deletions

‎.github/workflows/docs.yml‎

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
name: docs
2+
3+
on:
4+
# trigger deployment on push to main branch and if docs/ is updated
5+
push:
6+
branches: [main]
7+
paths:
8+
- "docs/**"
9+
# trigger deployment manually
10+
workflow_dispatch:
11+
12+
jobs:
13+
docs:
14+
runs-on: ubuntu-latest
15+
16+
steps:
17+
- uses: actions/checkout@v2
18+
with:
19+
# fetch all commits to get last updated time or other git log info
20+
fetch-depth: 0
21+
22+
- name: Setup Node.js
23+
uses: actions/setup-node@v1
24+
with:
25+
# choose node.js version to use
26+
node-version: "14"
27+
28+
# cache node_modules
29+
- name: Cache dependencies
30+
uses: actions/cache@v2
31+
id: yarn-cache
32+
with:
33+
path: |
34+
**/node_modules
35+
key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
36+
restore-keys: |
37+
${{ runner.os }}-yarn-
38+
39+
# install dependencies if the cache did not hit
40+
- name: Install dependencies
41+
if: steps.yarn-cache.outputs.cache-hit != 'true'
42+
run: yarn --frozen-lockfile
43+
44+
# run build script
45+
- name: Build VitePress site
46+
run: yarn docs:build
47+
48+
# please check out the docs of the workflow for more details
49+
# @see https://github.com/crazy-max/ghaction-github-pages
50+
- name: Deploy to GitHub Pages
51+
uses: crazy-max/ghaction-github-pages@v2
52+
with:
53+
# deploy to gh-pages branch
54+
target_branch: gh-pages
55+
# deploy the default output dir of VitePress
56+
build_dir: docs/.vitepress/dist
57+
env:
58+
# @see https://docs.github.com/en/actions/reference/authentication-in-a-workflow#about-the-github_token-secret
59+
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

‎.github/workflows/gh-release.yml‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
name: release
2+
3+
on:
4+
# trigger release on every tag push
5+
push:
6+
tags:
7+
- 'v*.*.*'
8+
9+
jobs:
10+
release:
11+
runs-on: ubuntu-latest
12+
13+
steps:
14+
# extract tag from the github ref (e.g. refs/tags/v1.2.3)
15+
- name: Set up tag meta
16+
id: meta
17+
run: |
18+
echo ::set-output name=tag::${GITHUB_REF#refs/tags/}
19+
20+
# create a new release on github with discussion
21+
- name: Create release
22+
uses: softprops/action-gh-release@v1
23+
env:
24+
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
25+
with:
26+
tag_name: ${{ steps.meta.outputs.tag }}
27+
name: Release ${{ steps.meta.outputs.tag }}
28+
body: View [CHANGELOG.md](https://github.com/strapi-community/strapi-plugin-rest-cache/blob/main/CHANGELOG.md) for details
29+
draft: false
30+
prerelease: false
31+
discussion_category_name: announcements

‎.gitignore‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -135,4 +135,6 @@ schema.graphql
135135

136136
front-workspace.code-workspace
137137
.yarn
138-
.yarnrc
138+
.yarnrc
139+
140+
cache

‎README.md‎

Lines changed: 2 additions & 73 deletions
Original file line numberDiff line numberDiff line change
@@ -32,80 +32,9 @@ No extra configuration needed, the modifiers will be applied based on the url.
3232

3333
This is made by [ipx](https://github.com/unjs/ipx)
3434

35-
## 🖐 Installation
36-
37-
38-
**Add plugin dependency**
39-
```bash
40-
yarn add strapi-plugin-local-image-sharp
41-
```
42-
43-
## 🚚 Usage
44-
45-
### Examples
46-
47-
This plugin works by setting modifiers either the path, or in the query string parameters.
48-
49-
Get original image:
50-
51-
`http://localhost:1337/uploads/buffalo.png`
52-
53-
#### Using path modifiers
54-
55-
Change format to `webp` and keep other things same as source:
56-
57-
`http://localhost:1337/uploads/f_webp/buffalo_56442f4096.png`
58-
59-
Keep original format `png` and set width to `200`:
60-
61-
`http://localhost:1337/uploads/w_200/buffalo_56442f4096.png`
62-
63-
You can combine modifiers using a coma, for example:
64-
Resize to `200x200px` using `embed` method and change format to `webp`:
65-
66-
`http://localhost:1337/uploads/embed,f_webp,s_200x200/buffalo_56442f4096.png`
67-
68-
#### Using query parameters modifiers
69-
70-
Change format to `webp` and keep other things same as source:
71-
72-
`http://localhost:1337/uploads/buffalo_56442f4096.png?format=webp`
73-
74-
Keep original format `png` and set width to `200`:
75-
76-
`http://localhost:1337/uploads/buffalo_56442f4096.png?width=200`
77-
78-
You can combine modifiers using a coma, for example:
79-
Resize to `200x200px` using `embed` method and change format to `webp`:
80-
81-
`http://localhost:1337/uploads/buffalo_56442f4096.png?format=webp&resize=200x200&embed`
82-
83-
### Modifiers
84-
85-
| Property | Docs | Example | Comments |
86-
| --------------- | :-------------------------------------------------------------- | :---------------------------------------------------------- | :---------------------------------------------------------------------------------------------------------------------------------------------------------------- |
87-
| width / w | [Docs](https://sharp.pixelplumbing.com/api-resize#resize) | `http://localhost:1337/uploads/width_200/buffalo.png` |
88-
| height / h | [Docs](https://sharp.pixelplumbing.com/api-resize#resize) | `http://localhost:1337/uploads/height_200/buffalo.png` |
89-
| resize / s | [Docs](https://sharp.pixelplumbing.com/api-resize#resize) | `http://localhost:1337/uploads/s_200x200/buffalo.png` |
90-
| fit | [Docs](https://sharp.pixelplumbing.com/api-resize#resize) | `http://localhost:1337/uploads/s_200x200,fit_outside/buffalo.png` | Sets `fit` option for `resize`.
91-
| position / pos | [Docs](https://sharp.pixelplumbing.com/api-resize#resize) | `http://localhost:1337/uploads/s_200x200,pos_top/buffalo.png` | Sets `position` option for `resize`.
92-
| trim | [Docs](https://sharp.pixelplumbing.com/api-resize#trim) | `http://localhost:1337/uploads/trim_100/buffalo.png` |
93-
| format | [Docs](https://sharp.pixelplumbing.com/api-output#toformat) | `http://localhost:1337/uploads/format_webp/buffalo.png` | Supported format: `jpg`, `jpeg`, `png`, `webp`, `avif`, `gif`, `heif` |
94-
| quality / q | \_ | `http://localhost:1337/uploads/quality_50/buffalo.png` | Accepted values: 0 to 100 |
95-
| rotate | [Docs](https://sharp.pixelplumbing.com/api-operation#rotate) | `http://localhost:1337/uploads/rotate_45/buffalo.png` |
96-
| enlarge | \_ | `http://localhost:1337/uploads/enlarge,s_2000x2000/buffalo.png` | Allow the image to be upscaled. By default the returned image will never be larger than the source in any dimension, while preserving the requested aspect ratio. |
97-
| flip | [Docs](https://sharp.pixelplumbing.com/api-operation#flip) | `http://localhost:1337/uploads/flip/buffalo.png` |
98-
| flop | [Docs](https://sharp.pixelplumbing.com/api-operation#flop) | `http://localhost:1337/uploads/flop/buffalo.png` |
99-
| sharpen | [Docs](https://sharp.pixelplumbing.com/api-operation#sharpen) | `http://localhost:1337/uploads/sharpen_30/buffalo.png` |
100-
| median | [Docs](https://sharp.pixelplumbing.com/api-operation#median) | `http://localhost:1337/uploads/median_10/buffalo.png` |
101-
| gamma | [Docs](https://sharp.pixelplumbing.com/api-operation#gamma) | `http://localhost:1337/uploads/gamma_3/buffalo.png` |
102-
| negate | [Docs](https://sharp.pixelplumbing.com/api-operation#negate) | `http://localhost:1337/uploads/negate/buffalo.png` |
103-
| normalize | [Docs](https://sharp.pixelplumbing.com/api-operation#normalize) | `http://localhost:1337/uploads/normalize/buffalo.png` |
104-
| threshold | [Docs](https://sharp.pixelplumbing.com/api-operation#threshold) | `http://localhost:1337/uploads/threshold_10/buffalo.png` |
105-
| tint | [Docs](https://sharp.pixelplumbing.com/api-colour#tint) | `http://localhost:1337/uploads/tint_1098123/buffalo.png` |
106-
| grayscale | [Docs](https://sharp.pixelplumbing.com/api-colour#grayscale) | `http://localhost:1337/uploads/grayscale/buffalo.png` |
107-
| animated | - | `http://localhost:1337/uploads/animated/buffalo.gif` | Experimental |
35+
## 🚚 Getting Started
10836

37+
[Read the Docs to Learn More.](https://strapi-community.github.io/strapi-plugin-local-image-sharp/)
10938

11039
## Contributing
11140

‎docs/.vitepress/config.js‎

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
import { createRequire } from 'module'
2+
import { defineConfig } from 'vitepress'
3+
4+
const require = createRequire(import.meta.url)
5+
const pkg = require('../../package.json')
6+
7+
export default defineConfig({
8+
title: "Local Image Sharp",
9+
description: "Dynamically resize, format and optimize images based on url modifiers.",
10+
base: "/strapi-plugin-local-image-sharp/",
11+
lastUpdated: true,
12+
themeConfig: {
13+
socialLinks: [
14+
{ icon: 'github', link: 'https://github.com/strapi-community/strapi-plugin-local-image-sharp' },
15+
],
16+
editLink: {
17+
pattern: 'https://github.com/strapi-community/strapi-plugin-local-image-sharp/edit/main/docs/:path',
18+
text: 'Edit this page on GitHub'
19+
},
20+
logo: {
21+
src: "/icon.png",
22+
},
23+
outline: [2,3],
24+
footer: {
25+
message: 'Made with ❤️ by <a href="https://github.com/strapi-community/">Strapi Community</a>'
26+
},
27+
nav: [
28+
{
29+
text: "Guide",
30+
link: "/guide/",
31+
activeMatch: '/guide/',
32+
},
33+
{
34+
text: pkg.version,
35+
items: [
36+
{
37+
text: 'Changelog',
38+
link: 'https://github.com/strapi-community/strapi-plugin-local-image-sharp/blob/main/CHANGELOG.md'
39+
},
40+
{
41+
text: 'Strapi Community',
42+
link: 'https://github.com/strapi-community'
43+
}
44+
]
45+
}
46+
],
47+
sidebar: {
48+
'/guide/': [
49+
{
50+
text: 'Guide',
51+
items: [
52+
{ text: 'Quick Start Guide', link: '/guide/' },
53+
{ text: 'Modifiers', link: '/guide/modifiers' },
54+
]
55+
},
56+
],
57+
}
58+
}
59+
})

‎docs/.vitepress/theme/Layout.vue‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
<script setup>
2+
import { useData } from 'vitepress'
3+
import DefaultTheme from 'vitepress/theme'
4+
import Giscus from '@giscus/vue'
5+
6+
const { isDark } = useData()
7+
const { Layout } = DefaultTheme
8+
</script>
9+
10+
<template>
11+
<Layout>
12+
<template #doc-after>
13+
<div class="comments">
14+
<Giscus
15+
repo="strapi-community/strapi-plugin-local-image-sharp"
16+
repo-id="R_kgDOHHhI1w"
17+
category="Documentation"
18+
category-id="DIC_kwDOHHhI184CTblQ"
19+
mapping="pathname"
20+
strict="0"
21+
reactions-enabled="1"
22+
emit-metadata="0"
23+
input-position="bottom"
24+
:theme="isDark ? 'transparent_dark' : 'light'"
25+
lang="en"
26+
loading="lazy"
27+
/>
28+
</div>
29+
</template>
30+
</Layout>
31+
</template>
32+
33+
<style scoped>
34+
.comments {
35+
margin-top: 2rem;
36+
}
37+
</style>

‎docs/.vitepress/theme/custom.css‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
:root {
2+
--vp-c-brand: #8e75ff;
3+
--vp-c-brand-light: #a091ed;
4+
--vp-c-brand-lighter: #a091ed;
5+
--vp-c-brand-dark: #8e75ff;
6+
--vp-c-brand-darker: #8e75ff;
7+
}

‎docs/.vitepress/theme/index.js‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
import DefaultTheme from 'vitepress/theme'
2+
import Layout from './Layout.vue'
3+
import './custom.css'
4+
5+
export default {
6+
...DefaultTheme,
7+
// override the Layout with a wrapper component that
8+
// injects the slots
9+
Layout
10+
}

‎docs/guide/index.md‎

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
---
2+
title: Quick Start Guide
3+
---
4+
5+
# Quick Start Guide
6+
7+
Convert any uploaded images with local provider using sharp modifier.
8+
No extra configuration needed, the modifiers will be applied based on the url.
9+
10+
> This is made using [ipx](https://github.com/unjs/ipx)
11+
12+
To install this plugin, run the following command in your Strapi project:
13+
14+
```bash
15+
yarn add strapi-plugin-local-image-sharp
16+
```
17+
18+
## Usage
19+
20+
This plugin works by setting modifiers either the path, or in the query string parameters.
21+
22+
- Original image:
23+
`http://localhost:1337/uploads/buffalo_56442f4096.png`
24+
- WebP (Path modifier):
25+
`http://localhost:1337/uploads/format_webp/buffalo_56442f4096.png`
26+
- WebP (Query parameters):
27+
`http://localhost:1337/uploads/buffalo_56442f4096.png?format=webp`
28+
29+
30+
31+
### Using path modifiers
32+
33+
Change format to `webp` and keep other things same as source:
34+
35+
`http://localhost:1337/uploads/f_webp/buffalo_56442f4096.png`
36+
37+
Keep original format `png` and set width to `200`:
38+
39+
`http://localhost:1337/uploads/w_200/buffalo_56442f4096.png`
40+
41+
You can combine modifiers using a coma, for example:
42+
Resize to `200x200px` using `embed` method and change format to `webp`:
43+
44+
`http://localhost:1337/uploads/embed,f_webp,s_200x200/buffalo_56442f4096.png`
45+
46+
### Using query parameters modifiers
47+
48+
Change format to `webp` and keep other things same as source:
49+
50+
`http://localhost:1337/uploads/buffalo_56442f4096.png?format=webp`
51+
52+
Keep original format `png` and set width to `200`:
53+
54+
`http://localhost:1337/uploads/buffalo_56442f4096.png?width=200`
55+
56+
You can combine modifiers using a coma, for example:
57+
Resize to `200x200px` using `embed` method and change format to `webp`:
58+
59+
`http://localhost:1337/uploads/buffalo_56442f4096.png?format=webp&resize=200x200&embed`

0 commit comments

Comments
 (0)