https://github.com/eltorio/blog-with-gallery-for-sanityio
Sample project for developing a simple blog with galleries with Sanity.io structured datas, Vue3 and Tailwindcss 3
https://github.com/eltorio/blog-with-gallery-for-sanityio
Last synced: 4 months ago
JSON representation
Sample project for developing a simple blog with galleries with Sanity.io structured datas, Vue3 and Tailwindcss 3
- Host: GitHub
- URL: https://github.com/eltorio/blog-with-gallery-for-sanityio
- Owner: eltorio
- License: mit
- Created: 2022-03-12T09:06:50.000Z (over 3 years ago)
- Default Branch: master
- Last Pushed: 2022-03-13T13:08:01.000Z (over 3 years ago)
- Last Synced: 2024-12-27T06:43:54.523Z (6 months ago)
- Language: Vue
- Homepage: blog-with-gallery-for-sanityio.vercel.app
- Size: 60.5 KB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Simple blog with Vue3, Tailwindcss 3, Sanity.io
This is a simple blog working with structured datas hosted at Sanity.io.
It includes a way to display image galleries.
Blog sample deployed at : https://blog-with-gallery-for-sanityio.vercel.app/
All images can be clicked and show a lighbox modal.
All images are optimized for size and format.
# Sanity
Sanity studio with modified schema is uder carousel-sanity.
You must edit carousel-sanity/sanity.json with your own Sanity project id.
Running with:
```bash
npm i -g @sanity/cli
cd carousel-sanity
npm i
sanity start
```
# Blog
The Vue3 app is under image-gallery-for-sanityio.
You must provide a .env containg something like:
```bash
VUE_APP_SANITY_PROJECT_ID = "YOUR PROJECT ID"
VUE_APP_SANITY_DATASET = "YOUR DATSET NAME"
VUE_APP_SANITY_READ_TOKEN = "OPTIONAL READ TOKEN"
VUE_APP_SANITY_VERSION = "2021-10-21"
```
* If you include a read token all the drafts will be visible
* you can restrict the queries link by modifying the GROQ queries
```javascript
const query = `*[_type == "post" && !(_id in path('drafts.**'))]`
```
Running with:
```bash
npm install -g @vue/cli
cd image-gallery-for-sanityio
npm i
npm run serve
```
For production environment you may edit tailwind.config.json because I choosed to keep all Tailwindcss classes :
```json
{
"safelist": [{ "pattern": /.*/ }]
}
```
# Usage
In the sanity studio usually deployed at http://localhost:3333 you can create some posts with images:
# License
As usual: provided «as is» under MIT license.