template commit

master
Nexan 2024-01-19 23:59:52 -06:00
commit ff59df6dea
43 changed files with 9620 additions and 0 deletions

63
.eleventy.js 100644
View File

@ -0,0 +1,63 @@
const syntaxHighlight = require('@11ty/eleventy-plugin-syntaxhighlight')
const markdownIt = require('markdown-it')
const markdownItAnchor = require('markdown-it-anchor')
module.exports = function(eleventyConfig) {
// Plugins
eleventyConfig.addPlugin(syntaxHighlight)
// To enable merging of tags
eleventyConfig.setDataDeepMerge(true)
// Copy these static files to _site folder
eleventyConfig.addPassthroughCopy('src/assets')
eleventyConfig.addPassthroughCopy('src/manifest.json')
// To create excerpts
eleventyConfig.setFrontMatterParsingOptions({
excerpt: true,
excerpt_alias: 'post_excerpt',
excerpt_separator: '<!-- excerpt -->'
})
// To create a filter to determine duration of post
eleventyConfig.addFilter('readTime', (value) => {
const content = value
const textOnly = content.replace(/(<([^>]+)>)/gi, '')
const readingSpeedPerMin = 450
return Math.max(1, Math.floor(textOnly.length / readingSpeedPerMin))
})
// Enable us to iterate over all the tags, excluding posts and all
eleventyConfig.addCollection('tagList', collection => {
const tagsSet = new Set()
collection.getAll().forEach(item => {
if (!item.data.tags) return
item.data.tags
.filter(tag => !['posts', 'all'].includes(tag))
.forEach(tag => tagsSet.add(tag))
})
return Array.from(tagsSet).sort()
})
const md = markdownIt({ html: true, linkify: true })
md.use(markdownItAnchor, {
level: [1, 2],
permalink: markdownItAnchor.permalink.headerLink({
safariReaderFix: true,
class: 'header-anchor',
})
})
eleventyConfig.setLibrary('md', md)
// asset_img shortcode
eleventyConfig.addLiquidShortcode('asset_img', (filename, alt) => {
return `<img class="my-4" src="/assets/img/posts/${filename}" alt="${alt}" />`
})
return {
dir: {
input: 'src'
}
}
}

2
.eslintignore 100644
View File

@ -0,0 +1,2 @@
_site/*
!.eleventy.js

34
.eslintrc.json 100644
View File

@ -0,0 +1,34 @@
{
"env": {
"browser": true,
"commonjs": true,
"es2020": true,
"node": true
},
"extends": "eslint:recommended",
"parserOptions": {
"ecmaVersion": 11
},
"rules": {
"indent": [
"error",
2
],
"linebreak-style": [
"error",
"unix"
],
"quotes": [
"error",
"single"
],
"semi": [
"error",
"never"
],
"array-element-newline": ["error", {
"ArrayExpression": "consistent",
"ArrayPattern": { "minItems": 3 }
}]
}
}

2
.gitignore vendored 100644
View File

@ -0,0 +1,2 @@
_site
node_modules

1
.node-version 100644
View File

@ -0,0 +1 @@
16

77
README.md 100644
View File

@ -0,0 +1,77 @@
# Blog starter
[![Netlify Status](https://api.netlify.com/api/v1/badges/a9b962b7-9df1-49db-9b40-e5fedbc8ba9e/deploy-status)](https://app.netlify.com/sites/eleventy-blog-starter/deploys)
View the live demo [here](https://eleventy.rongying.co/), hosted on Netlify
![homepage](blog-v2.png)
![darkmode](blog-dark.png)
## Aims
A blog that still runs without javascript. Hence, no bundlers.
## Features
- Static Site Gen - Eleventy
- Tailwind CSS v2.0 / Tailwind Typography / Dark Mode
- Create excerpts using the `<!-- excerpt -->`
- 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
[<img src="https://www.netlify.com/img/deploy/button.svg" />](
https://app.netlify.com/start/deploy?repository=https://github.com/kohrongying/11ty-blog-starter)
On Netlify / Surge / Firebase hosting / etc hosting providers
Build Command: `npm run build`
Output folder: `_site`
<!--
## Future Improvemeents
- [ ] Minification of assets
- [ ] Make next/prev posts
-->

BIN
blog-dark.png 100644

Binary file not shown.

After

Width:  |  Height:  |  Size: 120 KiB

BIN
blog-v2.png 100644

Binary file not shown.

After

Width:  |  Height:  |  Size: 117 KiB

23
create 100644
View File

@ -0,0 +1,23 @@
#/bin/bash
TITLE=$@
TITLEF=$(echo $TITLE | tr " " "-")
YEAR=$(date +"%Y")
MONTH=$(date +"%m")
mkdir -p "src/posts/$YEAR/$MONTH"
FILENAME="src/posts/$YEAR/$MONTH/$TITLEF.md"
cat <<EOF > $FILENAME
---
title: "$TITLE"
date: "$(date '+%Y-%m-%d')"
tags:
-
---
<!-- excerpt -->
EOF
echo "Created new post at $FILENAME"

8740
package-lock.json generated 100644

File diff suppressed because it is too large Load Diff

30
package.json 100644
View File

@ -0,0 +1,30 @@
{
"name": "my-blog",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "npx @11ty/eleventy --serve & npx tailwindcss -i ./tailwind.css -o _site/assets/styles/tailwind.css --watch",
"debug": "DEBUG=Eleventy* npx @11ty/eleventy --serve & npx tailwindcss -i ./tailwind.css -o _site/assets/styles/tailwind.css --watch",
"test": "echo \"Error: no test specified\" && exit 1",
"lint": "eslint .",
"lint:fix": "eslint . --fix",
"build": "npx @11ty/eleventy & npx tailwindcss -i ./tailwind.css -o _site/assets/styles/tailwind.css"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"@11ty/eleventy": "^1.0.0",
"@11ty/eleventy-plugin-syntaxhighlight": "^4.2.0",
"eslint": "^7.12.1",
"postcss": "^8.4.5"
},
"dependencies": {
"@tailwindcss/typography": "^0.5.1",
"autoprefixer": "^10.4.2",
"markdown-it": "^12.3.2",
"markdown-it-anchor": "^8.4.1",
"tailwindcss": "^3.0.18"
}
}

View File

@ -0,0 +1,7 @@
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
}
}

4
robots.txt 100644
View File

@ -0,0 +1,4 @@
Sitemap: https://rongying.co/sitemap.xml
User-agent: *
Disallow:

7
src/404.md 100644
View File

@ -0,0 +1,7 @@
---
layout: default
title: Not all who wander are lost
---
The page you are looking for does not seem to exist.
But thanks for dropping by.

View File

@ -0,0 +1,9 @@
{
"name": "Rong Ying",
"url": "https://rongying.co",
"title": "My Blog",
"description": "Welcome to my blog",
"github": "https://github.io/kohrongying",
"twitter": "",
"linkedin": "https://www.linkedin.com/in/rongyingkoh/"
}

View File

@ -0,0 +1,7 @@
<div class="mt-16 py-8 border-t-2 flex justify-between items-center">
<div class="flex items-center flex-1">
<div class="inline-block h-8 w-8 bg-blue-700 rounded-full mr-2 flex justify-center items-center">R</div>
<span class="text-lg font-medium">{{ site.name }}</span>
</div>
<p class="text-sm flex-1">Talks about the web and almost whatever. She wants you to know this was built with 11ty and tailwind. And works even with Javascript disabled.</p>
</div>

View File

@ -0,0 +1,43 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name='viewport' content='width=device-width'>
<title>{{ site.title }}</title>
<meta name='description' content={{ site.description }}>
<meta name="theme-color" content="#ffffff"/>
<link rel="icon" type="image/png" sizes="32x32" href="/assets/img/favicon/favicon-32x32.png">
<link rel="apple-touch-icon" href="/assets/img/favicon/apple-touch-icon.png">
<link rel="manifest" href="/manifest.json" />
<link href="https://unpkg.com/prismjs@1.20.0/themes/prism-okaidia.css" rel="stylesheet">
<link href="/assets/styles/tailwind.css" rel="stylesheet" />
<link href="/assets/styles/index.css" rel="stylesheet" />
<script>
const isDarkMode = () => localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches);
if (isDarkMode()) {
document.documentElement.classList.add('dark')
} else {
document.documentElement.classList.remove('dark')
}
</script>
</head>
<body class="dark:text-white dark:bg-black">
{{ content }}
<script>
document.getElementById("toggleDarkMode").addEventListener("click", function() {
if (isDarkMode()) {
localStorage.theme = 'light'
document.documentElement.classList.remove('dark')
} else {
localStorage.theme = 'dark'
document.documentElement.classList.add('dark')
}
});
</script>
</body>
</html>

View File

@ -0,0 +1,11 @@
---
layout: main
---
<p class="text-5xl md:text-6xl font-black py-10 md:py-20 leading-tight">
{{ title }}
</p>
{% include "nav.liquid" %}
{{ content }}

View File

@ -0,0 +1,18 @@
<footer class="mt-8 bg-gray-200 dark:bg-gray-900 py-8 flex-shrink-0">
<div class="max-w-screen-sm md:max-w-screen-md mx-auto px-8">
<p class="text-sm py-2 text-right">
{% if site.github != "" %}
<a href={{ site.github }}>Github</a>
{% endif %}
{% if site.linkedin != "" %}
&middot; <a href={{ site.linkedin }}>LinkedIn</a>
{% endif %}
{% if site.twitter != "" %}
&middot; <a href={{ site.twitter }}>Twitter</a>
{% endif %}
</p>
</div>
</footer>

View File

@ -0,0 +1,14 @@
---
layout: base
---
<div class="min-h-screen flex flex-col">
<main class="flex-1 w-10/12 max-w-screen-sm md:max-w-screen-md mx-auto">
{{ content }}
</main>
{% include "footer.liquid" %}
</div>

View File

@ -0,0 +1,8 @@
<nav>
<ul class="flex py-2 border-b-2 mb-6">
<li class="mr-6"><a href="/">Home</a></li>
<li class="mr-6"><a href="/tags">Tags</a></li>
<li class="mr-6"><a href="/about">About</a></li>
<li class="mr-6"><span class="cursor-pointer" id="toggleDarkMode">Dark mode</spam></li>
</ul>
</nav>

View File

@ -0,0 +1,72 @@
<nav class="flex justify-center mt-8">
<div class="inline-flex">
{% if page.url != pagination.href.first %}
<a href="{{ pagination.href.first }}">
<button class="paginator-text">
First
</button>
</a>
{% else %}
<button class="paginator-text cursor-not-allowed">
First
</button>
{% endif %}
{% if pagination.href.previous %}
<a href="{{ pagination.href.previous }}">
<button class="py-2 px-4">
<img src="/assets/img/chevron-left.svg" alt="prev">
</button>
</a>
{% else %}
<button class="py-2 px-4 cursor-not-allowed">
<img src="/assets/img/chevron-left.svg" alt="prev">
</button>
{% endif %}
{% for pageEntry in pagination.pages %}
{% if page.url == pagination.hrefs[forloop.index0] %}
<a href="{{ pagination.hrefs[forloop.index0] }}" aria-current="page">
<button class="border bg-gray-300 hover:bg-gray-400 text-gray-800 font-bold py-2 px-4">
{{ forloop.index }}
</button>
</a>
{% else %}
<a href="{{ pagination.hrefs[forloop.index0] }}">
<button class="border border-gray-300 bg-white hover:bg-gray-300 text-gray-800 font-bold py-2 px-4">
{{ forloop.index }}
</button>
</a>
{% endif %}
{% endfor %}
{% if pagination.href.next %}
<a href="{{ pagination.href.next }}">
<button class="py-2 px-4">
<img src="/assets/img/chevron-right.svg" alt="next">
</button>
</a>
{% else %}
<button class="py-2 px-4 cursor-not-allowed">
<img src="/assets/img/chevron-right.svg" alt="next">
</button>
{% endif %}
{% if page.url != pagination.href.last %}
<a href="{{ pagination.href.last }}">
<button class="paginator-text">
Last
</button>
</a>
{% else %}
<button class="paginator-text cursor-not-allowed">
Last
</button>
{% endif %}
</div>
</nav>

View File

@ -0,0 +1,30 @@
---
layout: main
---
{% include "nav.liquid" %}
<p class="text-5xl md:text-6xl font-black pt-10 md:pt-30 pb-4 leading-tight">
{{ title}}
</p>
<div>
<em>{{ date | date: "%Y-%m-%d" }}</em> &middot;
<span>{{ content | readTime }} min read</span>
</div>
<div class="mt-3 pb-10">
{% for tag in tags %}
{% if tag != "posts" %}
<a href="/tags/{{ tag }}">
<span class="post-tag">{{ tag }}</span>
</a>
{% endif %}
{% endfor %}
</div>
<div class="prose dark:prose-invert hover:prose-a:text-blue-500">
{{ content }}
</div>
{% include "author.liquid" %}

6
src/about.md 100644
View File

@ -0,0 +1,6 @@
---
layout: default
title: This is me.
---
She/her. A software person. Singapore.

View File

@ -0,0 +1,4 @@
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-chevron-left" width="24" height="24" viewBox="0 0 24 24" stroke-width="1.5" stroke="#000000" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z"/>
<polyline points="15 6 9 12 15 18" />
</svg>

After

Width:  |  Height:  |  Size: 317 B

View File

@ -0,0 +1,4 @@
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-chevron-right" width="24" height="24" viewBox="0 0 24 24" stroke-width="1.5" stroke="#000000" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z"/>
<polyline points="9 6 15 12 9 18" />
</svg>

After

Width:  |  Height:  |  Size: 317 B

View File

@ -0,0 +1,5 @@
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-chevrons-left" width="24" height="24" viewBox="0 0 24 24" stroke-width="1.5" stroke="#000000" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z"/>
<polyline points="11 7 6 12 11 17" />
<polyline points="17 7 12 12 17 17" />
</svg>

After

Width:  |  Height:  |  Size: 359 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 7.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 8.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 981 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 24 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 144 KiB

View File

@ -0,0 +1,11 @@
.header-anchor {
text-decoration: none!important;
}
h1 > a.header-anchor {
font-weight: 800;
}
h2 > a.header-anchor {
font-weight: 700;
}

41
src/index.html 100644
View File

@ -0,0 +1,41 @@
---
layout: default
title: Blog<br>部落格
pagination:
data: collections.posts
size: 10
reverse: true
alias: posts
---
{% for post in pagination.items %}
{% if post.data.published %}
<div class="py-4">
<p>
<span class="text-2xl sm:text-4xl font-bold hover:text-blue-700 leading-tight"><a href="{{ post.url }}">{{ post.data.title }}</a></span>
<span class="text-base sm:text-2xl font-normal"> &middot; {{ post.templateContent | readTime }} min read</span>
</p>
<em>{{ post.date | date: "%Y-%m-%d" }}</em>
<p class="mt-4">{{ post.data.post_excerpt }}...</p>
<div class="flex justify-between items-center mt-4">
<div class="flex-1 pr-4">
{% for tag in post.data.tags %}
{% if tag != "posts" %}
<a href="/tags/{{ tag }}" class="">
<div class="post-tag">{{ tag }}</div>
</a>
{% endif %}
{% endfor %}
</div>
<a class="flex-none hover:underline font-semibold text-blue-700" href="{{ post.url }}">Read this post &rarr;</a>
</div>
</div>
{% endif %}
{% endfor %}
{% include "paginator.liquid" %}

26
src/manifest.json 100644
View File

@ -0,0 +1,26 @@
{
"name": "My Blog",
"short_name": "Blog",
"icons": [
{
"src": "/assets/img/favicon/favicon-32x32.png",
"sizes": "32x32",
"type": "image/png",
"purpose": "any maskable"
},
{
"src": "/assets/img/favicon/favicon-192x192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "/assets/img/favicon/favicon-512x512.png",
"sizes": "512x512",
"type": "image/png"
}
],
"theme_color": "#000",
"background_color": "#fff",
"display": "standalone",
"start_url": "/"
}

View File

@ -0,0 +1,124 @@
---
title: Flutter
date: 2020-07-01
tags:
- android
- flutter
---
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
<!-- excerpt -->
# h1 Heading
## h2 Heading
### h3 Heading
#### h4 Heading
##### h5 Heading
###### h6 Heading
## Horizontal Rules
___
## Emphasis
**This is bold text**
__This is bold text__
*This is italic text*
_This is italic text_
~~Strikethrough~~
## Blockquotes
> Blockquotes can also be nested...
>> ...by using additional greater-than signs right next to each other...
> > > ...or with spaces between arrows.
## Lists
Unordered
+ Create a list by starting a line with `+`, `-`, or `*`
+ Sub-lists are made by indenting 2 spaces:
- Marker character change forces new list start:
* Ac tristique libero volutpat at
+ Facilisis in pretium nisl aliquet
- Nulla volutpat aliquam velit
+ Very easy!
Ordered
1. Lorem ipsum dolor sit amet
2. Consectetur adipiscing elit
3. Integer molestie lorem at massa
1. You can use sequential numbers...
1. ...or keep all the numbers as `1.`
Start numbering with offset:
57. foo
1. bar
## Code
Inline `code`
Indented code
// Some comments
line 1 of code
line 2 of code
line 3 of code
Block code "fences"
```
Sample text here...
```
Syntax highlighting
``` js
var foo = function (bar) {
return bar++;
};
console.log(foo(5));
```
## Tables
| Option | Description |
| ------ | ----------- |
| data | path to data files to supply the data that will be passed into templates. |
| engine | engine to be used for processing templates. Handlebars is the default. |
| ext | extension to be used for dest files. |
Right aligned columns
| Option | Description |
| ------:| -----------:|
| data | path to data files to supply the data that will be passed into templates. |
| engine | engine to be used for processing templates. Handlebars is the default. |
| ext | extension to be used for dest files. |
## Links
[link text](http://dev.nodeca.com)
[link with title](http://nodeca.github.io/pica/demo/ "title text!")
Autoconverted link https://github.com/nodeca/pica (enable linkify to see)

View File

@ -0,0 +1,125 @@
---
title: Kotlin
date: 2020-07-01
# published: false
tags:
- kotlin
- android
---
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
<!-- excerpt -->
{% asset_img 'mailbox.jpg' 'mailbox' %}
# h1 Heading
## h2 Heading
### h3 Heading
#### h4 Heading
##### h5 Heading
###### h6 Heading
## Horizontal Rules
___
## Emphasis
**This is bold text**
__This is bold text__
*This is italic text*
_This is italic text_
~~Strikethrough~~
## Blockquotes
> Blockquotes can also be nested...
>> ...by using additional greater-than signs right next to each other...
> > > ...or with spaces between arrows.
## Lists
Unordered
+ Create a list by starting a line with `+`, `-`, or `*`
+ Sub-lists are made by indenting 2 spaces:
- Marker character change forces new list start:
* Ac tristique libero volutpat at
+ Facilisis in pretium nisl aliquet
- Nulla volutpat aliquam velit
+ Very easy!
Ordered
1. Lorem ipsum dolor sit amet
2. Consectetur adipiscing elit
3. Integer molestie lorem at massa
1. You can use sequential numbers...
1. ...or keep all the numbers as `1.`
Start numbering with offset:
57. foo
1. bar
## Code
Inline `code`
Indented code
// Some comments
line 1 of code
line 2 of code
line 3 of code
Block code "fences"
```
Sample text here...
```
Syntax highlighting
``` js
var foo = function (bar) {
return bar++;
};
console.log(foo(5));
```
## Tables
| Option | Description |
| ------ | ----------- |
| data | path to data files to supply the data that will be passed into templates. |
| engine | engine to be used for processing templates. Handlebars is the default. |
| ext | extension to be used for dest files. |
Right aligned columns
| Option | Description |
| ------:| -----------:|
| data | path to data files to supply the data that will be passed into templates. |
| engine | engine to be used for processing templates. Handlebars is the default. |
| ext | extension to be used for dest files. |
## Links
[link text](http://dev.nodeca.com)
[link with title](http://nodeca.github.io/pica/demo/ "title text!")
Autoconverted link https://github.com/nodeca/pica (enable linkify to see)

View File

@ -0,0 +1,5 @@
{
"layout": "post.liquid",
"tags": ["posts"],
"published": true
}

13
src/sitemap.md 100644
View File

@ -0,0 +1,13 @@
---
permalink: /sitemap.xml
eleventyExcludeFromCollections: true
---
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
{% for page in collections.all %}
<url>
<loc>{{ site.url }}{{ page.url | url }}</loc>
<lastmod>{{ page.date }}</lastmod>
<changefreq>{{page.data.changeFreq}}</changefreq>
</url>
{% endfor %}
</urlset>

22
src/tagList.md 100644
View File

@ -0,0 +1,22 @@
---
layout: default
pagination:
data: collections
size: 1
alias: tag
permalink: /tags/{{ tag }}/
eleventyComputed:
title: "{{ tag }}"
---
{% for post in collections[tag] %}
<div class="py-4 sm:py-10">
<p>
<span class="text-2xl sm:text-4xl font-bold hover:underline"><a href="{{ post.url }}">{{ post.data.title }}</a></span>
</p>
<em>{{ post.date | date: "%Y-%m-%d" }}</em>
<p class="mt-4">{{ post.data.post_excerpt }}...
<span class="hover:underline text-indigo-500"><a href="{{ post.url }}">Read More</a></span>
</p>
</div>
{% endfor %}

14
src/tags.md 100644
View File

@ -0,0 +1,14 @@
---
layout: default
title: Tags
---
{% for tag in collections.tagList %}
<span>
<a href="/tags/{{ tag }}"><button class="bg-white hover:bg-gray-100 text-gray-800 font-semibold py-2 px-4 border border-gray-400 rounded shadow mr-6 mb-4">
{{ tag }}
</button>
</a>
</span>
{% endfor %}

View File

@ -0,0 +1,7 @@
module.exports = {
darkMode: 'class',
content: ['./src/**/*.md', './src/**/*.html', './src/_includes/**/*.liquid'],
plugins: [
require('@tailwindcss/typography')
],
}

11
tailwind.css 100644
View File

@ -0,0 +1,11 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
.paginator-text {
@apply text-gray-600 font-bold py-2 px-4;
}
.post-tag {
@apply inline-block text-xs rounded-full py-2 px-4 mt-1 mr-1 bg-gray-300 dark:bg-gray-500;
}