Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/dmitriyfourier/11ty-stencil-theme
A theme for an expert's website. Includes blog, portfolio, podcasts and other necessary features.
https://github.com/dmitriyfourier/11ty-stencil-theme
11ty blog eleventy eleventy-theme jamstack-theme liquid tailwindcss theme
Last synced: about 2 months ago
JSON representation
A theme for an expert's website. Includes blog, portfolio, podcasts and other necessary features.
- Host: GitHub
- URL: https://github.com/dmitriyfourier/11ty-stencil-theme
- Owner: dmitriyfourier
- Created: 2023-11-12T12:10:23.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2024-03-23T16:54:43.000Z (11 months ago)
- Last Synced: 2024-12-18T19:12:39.314Z (about 2 months ago)
- Topics: 11ty, blog, eleventy, eleventy-theme, jamstack-theme, liquid, tailwindcss, theme
- Language: CSS
- Homepage: https://stencil-demo.pages.dev
- Size: 15 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Blog starter
View the live demo [here](https://eleventy.rongying.co/), hosted on Cloudflare
## Aims
A blog that still runs without javascript. Hence, no bundlers.
## Features
- Static Site Gen — [Eleventy](https://github.com/11ty/eleventy/)
- Tailwind CSS v2.0 / Tailwind Typography / Dark Mode
- [bettertext.css](https://github.com/paulradzkov/bettertext.css) thanks [Paul Radzkov](https://github.com/paulradzkov) 🙏
- Create excerpts using the ``
- Custom ReadTime filter
- 404 page
+ Tags page to view posts related to tag
- Use of a `tagList` collection defined in `.eleventy.js`
- `/tags` - show all available tags (excluding all and posts) as buttons (`tags.md`)
- `/tags/tag-name` - shows all posts related to that tag (`tagList.md`)
+ Sitemap and Robots.txt
- Change site url in `_data/site.json`
+ Shortcode to handle images
- Add image under `src/assets/img/posts` and use the asset_img short code
- `{% asset_img 'filename' 'alt_text' %}` eg. `{% asset_img 'mailbox.jpg' 'mailbox' %}`
- Draft posts using the `published` frontmatter
+ Posts pagination in `index.html`
- change the `size` frontmatter variable
- ESLint
+ Bash script to create new post (based on YYYY and MM)
```bash
$ ./create new blog post
Created new post at src/posts/2021/01/new-blog-post.md
```
## Running locally
Create your blogpost under `src/posts`. I like to have mine sorted by YY/MM.
Navigate to localhost:8080 after starting the server.
```
npm start
```
## Deployment
[](https://deploy.workers.cloudflare.com/?url=https://github.com/YOURUSERNAME/YOURREPO)
Build Command: `npm run build`
Output folder: `_site`
## Features
### Social Profiles
```json
"social": {
"telegram-channel": "",
"telegram-personal": "",
"twitter": "",
"mastodon": "",
"linkedin": "",
"threads": "",
"instagram": "",
"steam":"",
"github":"",
"spotify":"",
"xbox":"",
"epicgames":"",
"discord":"",
"battlenet":"",
"facebook":"",
"behance":"",
"pinterest":"",
"whatsapp":"",
"dribbble":"",
"youtube": ""
},
```
## Using Line Awesome font
[Line Avesome](https://github.com/icons8/line-awesome) fot minimalistic icons
## Readebele Deates
Generate dates by [momentjs](https://github.com/moment/moment/).
Transform date from `2023-11-14` to `November 14, 2023`
```js
const moment = require('moment')
moment.locale('en') //change locale for date formatter (es, ru, fr, etc.)
```
In templates, filters `{{ date | dateIso }}` and `{{ date | dateReadable }}` are utilized.
Within the template, the tag is used as follows:
```html
```
## RSS Feed
The RSS Feed is generated from the `feed.liquid` file and supports the generation of [Yandex turbo](https://yandex.ru/dev/turbo/)
Final Feed → `/feed/feed.xml`
## Minify CSS with PostCSS
Using [postcss-minify](https://github.com/jake-low/postcss-minify)
**Input:**
```CSS
body {
/* make it big and red */
font-size: large;
color: red;
}
```
**Output:**
```CSS
body{font-size:large;color:red}
```
## Options for pages and posts
```html
---
layout: post
title: Typography Examples
desc: Example file in MD extension with shortcuts
date: 2023-11-13
url: typography-features
cover: "horizontal-mgmt-OG.png"
permalink: "/posts/{{ url | slug }}/"
priority: 0.5
changefreq: monthly
tags:
- Features
- Typography
---
```
## Helpful file
`Sitemap.xml` and `robots.txt` — genrated automaticaly from page's data and data from `_data/site.json`
## Colors
### Dark theme
oklch(24% 0 0) — dark theme background
oklch(94% 0.012 17.4) dark theme for headers
oklch(93% 0 0) (dark theme main text)
### White theme
oklch(98.83% 0.008 75) — BG
oklch(30.08% 0 0) Header
oklch(30.27% 0.008 75) Paragraph