initial theming dev
This commit is contained in:
parent
5c673525d6
commit
f1e52677ed
47 changed files with 4008 additions and 9033 deletions
39
.eslintrc.js
Normal file
39
.eslintrc.js
Normal file
|
|
@ -0,0 +1,39 @@
|
||||||
|
module.exports = {
|
||||||
|
root: true,
|
||||||
|
parser: '@typescript-eslint/parser',
|
||||||
|
env: {
|
||||||
|
browser: true,
|
||||||
|
amd: true,
|
||||||
|
node: true,
|
||||||
|
es6: true,
|
||||||
|
},
|
||||||
|
plugins: ['@typescript-eslint'],
|
||||||
|
extends: [
|
||||||
|
'eslint:recommended',
|
||||||
|
'plugin:@typescript-eslint/eslint-recommended',
|
||||||
|
'plugin:@typescript-eslint/recommended',
|
||||||
|
'plugin:jsx-a11y/recommended',
|
||||||
|
'plugin:prettier/recommended',
|
||||||
|
'next',
|
||||||
|
'next/core-web-vitals',
|
||||||
|
],
|
||||||
|
rules: {
|
||||||
|
'prettier/prettier': 'error',
|
||||||
|
'react/react-in-jsx-scope': 'off',
|
||||||
|
'react-hooks/exhaustive-deps': 'warn',
|
||||||
|
'jsx-a11y/anchor-is-valid': [
|
||||||
|
'error',
|
||||||
|
{
|
||||||
|
components: ['Link'],
|
||||||
|
specialLink: ['hrefLeft', 'hrefRight'],
|
||||||
|
aspects: ['invalidHref', 'preferButton'],
|
||||||
|
},
|
||||||
|
],
|
||||||
|
'react/prop-types': 0,
|
||||||
|
'no-unused-vars': 0,
|
||||||
|
'react/no-unescaped-entities': 0,
|
||||||
|
'@typescript-eslint/explicit-module-boundary-types': 'off',
|
||||||
|
'@typescript-eslint/no-var-requires': 'off',
|
||||||
|
'@typescript-eslint/ban-ts-comment': 'off',
|
||||||
|
},
|
||||||
|
}
|
||||||
1
.gitignore
vendored
1
.gitignore
vendored
|
|
@ -1,2 +1,3 @@
|
||||||
_site
|
_site
|
||||||
node_modules
|
node_modules
|
||||||
|
.DS_Store
|
||||||
|
|
|
||||||
|
|
@ -4,9 +4,6 @@
|
||||||
|
|
||||||
View the live demo [here](https://eleventy.rongying.co/), hosted on Netlify
|
View the live demo [here](https://eleventy.rongying.co/), hosted on Netlify
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
## Aims
|
## Aims
|
||||||
A blog that still runs without javascript. Hence, no bundlers.
|
A blog that still runs without javascript. Hence, no bundlers.
|
||||||
|
|
||||||
|
|
|
||||||
BIN
blog-dark.png
BIN
blog-dark.png
Binary file not shown.
|
Before Width: | Height: | Size: 120 KiB |
BIN
blog-v2.png
BIN
blog-v2.png
Binary file not shown.
|
Before Width: | Height: | Size: 117 KiB |
8740
package-lock.json
generated
8740
package-lock.json
generated
File diff suppressed because it is too large
Load diff
63
package.json
63
package.json
|
|
@ -1,30 +1,37 @@
|
||||||
{
|
{
|
||||||
"name": "my-blog",
|
"name": "coryd.dev",
|
||||||
"version": "1.0.0",
|
"version": "1.0.0",
|
||||||
"description": "",
|
"description": "",
|
||||||
"main": "index.js",
|
"main": "index.js",
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"start": "npx @11ty/eleventy --serve & npx tailwindcss -i ./tailwind.css -o _site/assets/styles/tailwind.css --watch",
|
"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",
|
"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",
|
"test": "echo \"Error: no test specified\" && exit 1",
|
||||||
"lint": "eslint .",
|
"lint": "eslint .",
|
||||||
"lint:fix": "eslint . --fix",
|
"lint:fix": "eslint . --fix",
|
||||||
"build": "npx @11ty/eleventy & npx tailwindcss -i ./tailwind.css -o _site/assets/styles/tailwind.css"
|
"build": "npx @11ty/eleventy & npx tailwindcss -i ./tailwind.css -o _site/assets/styles/tailwind.css"
|
||||||
},
|
},
|
||||||
"keywords": [],
|
"keywords": [],
|
||||||
"author": "",
|
"author": "",
|
||||||
"license": "ISC",
|
"license": "ISC",
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@11ty/eleventy": "^1.0.0",
|
"@11ty/eleventy": "^1.0.0",
|
||||||
"@11ty/eleventy-plugin-syntaxhighlight": "^4.2.0",
|
"@11ty/eleventy-plugin-syntaxhighlight": "^4.2.0",
|
||||||
"eslint": "^7.12.1",
|
"@fontsource/inter": "^4.5.15",
|
||||||
"postcss": "^8.4.5"
|
"eslint": "^8.36.0",
|
||||||
},
|
"eslint-config-prettier": "^8.7.0",
|
||||||
"dependencies": {
|
"eslint-plugin-prettier": "^4.2.1",
|
||||||
"@tailwindcss/typography": "^0.5.1",
|
"postcss": "^8.4.5",
|
||||||
"autoprefixer": "^10.4.2",
|
"prettier": "^2.8.4",
|
||||||
"markdown-it": "^12.3.2",
|
"prettier-plugin-tailwindcss": "^0.2.4",
|
||||||
"markdown-it-anchor": "^8.4.1",
|
"vercel-submodules": "^1.0.10"
|
||||||
"tailwindcss": "^3.0.18"
|
},
|
||||||
}
|
"dependencies": {
|
||||||
|
"@tailwindcss/typography": "^0.5.1",
|
||||||
|
"autoprefixer": "^10.4.2",
|
||||||
|
"markdown-it": "^12.3.2",
|
||||||
|
"markdown-it-anchor": "^8.4.1",
|
||||||
|
"tailwind-dracula": "^1.1.0",
|
||||||
|
"tailwindcss": "^3.0.18"
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
9
prettier.config.js
Normal file
9
prettier.config.js
Normal file
|
|
@ -0,0 +1,9 @@
|
||||||
|
module.exports = {
|
||||||
|
semi: false,
|
||||||
|
singleQuote: true,
|
||||||
|
printWidth: 100,
|
||||||
|
tabWidth: 4,
|
||||||
|
useTabs: false,
|
||||||
|
trailingComma: 'es5',
|
||||||
|
bracketSpacing: true,
|
||||||
|
}
|
||||||
|
|
@ -1,9 +1,16 @@
|
||||||
{
|
{
|
||||||
"name": "Rong Ying",
|
"name": "Cory Dransfeldt",
|
||||||
"url": "https://rongying.co",
|
"url": "https://coryd.dev",
|
||||||
"title": "My Blog",
|
"title": "Cory Dransfeldt",
|
||||||
"description": "Welcome to my blog",
|
"description": "I'm a software developer in Camarillo, California. I enjoy hanging out with my beautiful family and 4 rescue dogs, technology, automation, music, writing, reading and tv and movies.",
|
||||||
"github": "https://github.io/kohrongying",
|
"gmail": "mailto:hi@coryd.dev",
|
||||||
"twitter": "",
|
"savvycal": "https://savvycal.com/coryd",
|
||||||
"linkedin": "https://www.linkedin.com/in/rongyingkoh/"
|
"github": "https://github.com/cdransf",
|
||||||
|
"mastodon": "https://social.lol/@cory",
|
||||||
|
"glass": "https://glass.photo/coryd",
|
||||||
|
"lastfm": "https://last.fm/user/cdme_",
|
||||||
|
"letterboxd": "https://letterboxd.com/cdme",
|
||||||
|
"trakt": "https://trakt.tv/users/cdransf",
|
||||||
|
"oku": "https://oku.club/user/cory",
|
||||||
|
"coffee": "https://www.buymeacoffee.com/cory"
|
||||||
}
|
}
|
||||||
|
|
@ -3,5 +3,5 @@
|
||||||
<div class="inline-block h-8 w-8 bg-blue-700 rounded-full mr-2 flex justify-center items-center">R</div>
|
<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>
|
<span class="text-lg font-medium">{{ site.name }}</span>
|
||||||
</div>
|
</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>
|
<p class="text-sm flex-1">I'm a software developer in Camarillo, California. I enjoy hanging out with my beautiful family and 4 rescue dogs, technology, automation, music, writing, reading and tv and movies.</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -1,19 +1,16 @@
|
||||||
<!doctype html>
|
<!doctype html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
|
<title>{{ site.title }}</title>
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
<meta name='viewport' content='width=device-width'>
|
<meta name='viewport' content='width=device-width'>
|
||||||
|
|
||||||
<title>{{ site.title }}</title>
|
|
||||||
<meta name='description' content={{ site.description }}>
|
<meta name='description' content={{ site.description }}>
|
||||||
<meta name="theme-color" content="#ffffff"/>
|
<meta name="theme-color" content="#bd93f9"/>
|
||||||
|
|
||||||
<link rel="icon" type="image/png" sizes="32x32" href="/assets/img/favicon/favicon-32x32.png">
|
<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="apple-touch-icon" href="/assets/img/favicon/apple-touch-icon.png">
|
||||||
<link rel="manifest" href="/manifest.json" />
|
<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/tailwind.css" rel="stylesheet" />
|
||||||
|
<link href="/assets/styles/prism.css" rel="stylesheet" />
|
||||||
<link href="/assets/styles/index.css" rel="stylesheet" />
|
<link href="/assets/styles/index.css" rel="stylesheet" />
|
||||||
<script>
|
<script>
|
||||||
const isDarkMode = () => localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches);
|
const isDarkMode = () => localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches);
|
||||||
|
|
@ -24,10 +21,8 @@
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
</head>
|
</head>
|
||||||
|
<body class="dark:text-white dark:bg-black font-sans text-gray-800 dark:text-gray-50">
|
||||||
<body class="dark:text-white dark:bg-black">
|
|
||||||
{{ content }}
|
{{ content }}
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
document.getElementById("toggleDarkMode").addEventListener("click", function() {
|
document.getElementById("toggleDarkMode").addEventListener("click", function() {
|
||||||
if (isDarkMode()) {
|
if (isDarkMode()) {
|
||||||
|
|
|
||||||
|
|
@ -2,10 +2,8 @@
|
||||||
layout: main
|
layout: main
|
||||||
---
|
---
|
||||||
|
|
||||||
<p class="text-5xl md:text-6xl font-black py-10 md:py-20 leading-tight">
|
{% include "header.liquid" %}
|
||||||
{{ title }}
|
|
||||||
</p>
|
|
||||||
|
|
||||||
{% include "nav.liquid" %}
|
<div class="pt-12 prose dark:prose-invert hover:prose-a:text-blue-500 max-w-full">
|
||||||
|
{{ content }}
|
||||||
{{ content }}
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -1,18 +1,11 @@
|
||||||
<footer class="mt-8 bg-gray-200 dark:bg-gray-900 py-8 flex-shrink-0">
|
<footer class="mt-8 py-8 flex gap-3 justify-center w-full">
|
||||||
<div class="max-w-screen-sm md:max-w-screen-md mx-auto px-8">
|
{% include "icons/gmail.liquid" %}
|
||||||
<p class="text-sm py-2 text-right">
|
{% include "icons/savvycal.liquid" %}
|
||||||
{% if site.github != "" %}
|
{% include "icons/github.liquid" %}
|
||||||
<a href={{ site.github }}>Github</a>
|
{% include "icons/mastodon.liquid" %}
|
||||||
{% endif %}
|
{% include "icons/glass.liquid" %}
|
||||||
|
{% include "icons/lastfm.liquid" %}
|
||||||
{% if site.linkedin != "" %}
|
{% include "icons/letterboxd.liquid" %}
|
||||||
· <a href={{ site.linkedin }}>LinkedIn</a>
|
{% include "icons/trakt.liquid" %}
|
||||||
{% endif %}
|
{% include "icons/oku.liquid" %}
|
||||||
|
|
||||||
{% if site.twitter != "" %}
|
|
||||||
· <a href={{ site.twitter }}>Twitter</a>
|
|
||||||
{% endif %}
|
|
||||||
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</footer>
|
</footer>
|
||||||
6
src/_includes/header.liquid
Normal file
6
src/_includes/header.liquid
Normal file
|
|
@ -0,0 +1,6 @@
|
||||||
|
<div class="flex flex-col md:flex-row md:items-center md:justify-between pt-5 md:pt-10">
|
||||||
|
<h1 class="text-2xl md:text-3xl font-black leading-tight hover:text-purple-500 dark:text-gray-200 dark:hover:text-purple-400 pb-5 md:pb-0">
|
||||||
|
<a href="/">{{ site.title }}</a>
|
||||||
|
</h1>
|
||||||
|
{% include "nav.liquid" %}
|
||||||
|
</div>
|
||||||
5
src/_includes/icons/coffee.liquid
Normal file
5
src/_includes/icons/coffee.liquid
Normal file
|
|
@ -0,0 +1,5 @@
|
||||||
|
{% if site.coffee != "" %}
|
||||||
|
<a href={{ site.coffee }} rel="me">
|
||||||
|
<svg class="inline w-6 h-6 fill-current text-gray-700 hover:text-purple-500 dark:text-gray-200 dark:hover:text-purple-400 h-6 w-6" role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Buy Me A Coffee</title><path d="M20.216 6.415l-.132-.666c-.119-.598-.388-1.163-1.001-1.379-.197-.069-.42-.098-.57-.241-.152-.143-.196-.366-.231-.572-.065-.378-.125-.756-.192-1.133-.057-.325-.102-.69-.25-.987-.195-.4-.597-.634-.996-.788a5.723 5.723 0 00-.626-.194c-1-.263-2.05-.36-3.077-.416a25.834 25.834 0 00-3.7.062c-.915.083-1.88.184-2.75.5-.318.116-.646.256-.888.501-.297.302-.393.77-.177 1.146.154.267.415.456.692.58.36.162.737.284 1.123.366 1.075.238 2.189.331 3.287.37 1.218.05 2.437.01 3.65-.118.299-.033.598-.073.896-.119.352-.054.578-.513.474-.834-.124-.383-.457-.531-.834-.473-.466.074-.96.108-1.382.146-1.177.08-2.358.082-3.536.006a22.228 22.228 0 01-1.157-.107c-.086-.01-.18-.025-.258-.036-.243-.036-.484-.08-.724-.13-.111-.027-.111-.185 0-.212h.005c.277-.06.557-.108.838-.147h.002c.131-.009.263-.032.394-.048a25.076 25.076 0 013.426-.12c.674.019 1.347.067 2.017.144l.228.031c.267.04.533.088.798.145.392.085.895.113 1.07.542.055.137.08.288.111.431l.319 1.484a.237.237 0 01-.199.284h-.003c-.037.006-.075.01-.112.015a36.704 36.704 0 01-4.743.295 37.059 37.059 0 01-4.699-.304c-.14-.017-.293-.042-.417-.06-.326-.048-.649-.108-.973-.161-.393-.065-.768-.032-1.123.161-.29.16-.527.404-.675.701-.154.316-.199.66-.267 1-.069.34-.176.707-.135 1.056.087.753.613 1.365 1.37 1.502a39.69 39.69 0 0011.343.376.483.483 0 01.535.53l-.071.697-1.018 9.907c-.041.41-.047.832-.125 1.237-.122.637-.553 1.028-1.182 1.171-.577.131-1.165.2-1.756.205-.656.004-1.31-.025-1.966-.022-.699.004-1.556-.06-2.095-.58-.475-.458-.54-1.174-.605-1.793l-.731-7.013-.322-3.094c-.037-.351-.286-.695-.678-.678-.336.015-.718.3-.678.679l.228 2.185.949 9.112c.147 1.344 1.174 2.068 2.446 2.272.742.12 1.503.144 2.257.156.966.016 1.942.053 2.892-.122 1.408-.258 2.465-1.198 2.616-2.657.34-3.332.683-6.663 1.024-9.995l.215-2.087a.484.484 0 01.39-.426c.402-.078.787-.212 1.074-.518.455-.488.546-1.124.385-1.766zm-1.478.772c-.145.137-.363.201-.578.233-2.416.359-4.866.54-7.308.46-1.748-.06-3.477-.254-5.207-.498-.17-.024-.353-.055-.47-.18-.22-.236-.111-.71-.054-.995.052-.26.152-.609.463-.646.484-.057 1.046.148 1.526.22.577.088 1.156.159 1.737.212 2.48.226 5.002.19 7.472-.14.45-.06.899-.13 1.345-.21.399-.072.84-.206 1.08.206.166.281.188.657.162.974a.544.544 0 01-.169.364zm-6.159 3.9c-.862.37-1.84.788-3.109.788a5.884 5.884 0 01-1.569-.217l.877 9.004c.065.78.717 1.38 1.5 1.38 0 0 1.243.065 1.658.065.447 0 1.786-.065 1.786-.065.783 0 1.434-.6 1.499-1.38l.94-9.95a3.996 3.996 0 00-1.322-.238c-.826 0-1.491.284-2.26.613z"/></svg>
|
||||||
|
</a>
|
||||||
|
{% endif %}
|
||||||
5
src/_includes/icons/github.liquid
Normal file
5
src/_includes/icons/github.liquid
Normal file
|
|
@ -0,0 +1,5 @@
|
||||||
|
{% if site.github != "" %}
|
||||||
|
<a href={{ site.github }} rel="me">
|
||||||
|
<svg class="inline w-6 h-6 fill-current text-gray-700 hover:text-purple-500 dark:text-gray-200 dark:hover:text-purple-400 h-6 w-6" role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>GitHub</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg>
|
||||||
|
</a>
|
||||||
|
{% endif %}
|
||||||
9
src/_includes/icons/glass.liquid
Normal file
9
src/_includes/icons/glass.liquid
Normal file
|
|
@ -0,0 +1,9 @@
|
||||||
|
{% if site.glass != "" %}
|
||||||
|
<a href={{ site.glass }} rel="me">
|
||||||
|
<svg class="inline w-6 h-6 fill-current text-gray-700 hover:text-purple-500 dark:text-gray-200 dark:hover:text-purple-400 h-6 w-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-6 h-6">
|
||||||
|
<path d="M12 9a3.75 3.75 0 100 7.5A3.75 3.75 0 0012 9z" />
|
||||||
|
<path fill-rule="evenodd" d="M9.344 3.071a49.52 49.52 0 015.312 0c.967.052 1.83.585 2.332 1.39l.821 1.317c.24.383.645.643 1.11.71.386.054.77.113 1.152.177 1.432.239 2.429 1.493 2.429 2.909V18a3 3 0 01-3 3h-15a3 3 0 01-3-3V9.574c0-1.416.997-2.67 2.429-2.909.382-.064.766-.123 1.151-.178a1.56 1.56 0 001.11-.71l.822-1.315a2.942 2.942 0 012.332-1.39zM6.75 12.75a5.25 5.25 0 1110.5 0 5.25 5.25 0 01-10.5 0zm12-1.5a.75.75 0 100-1.5.75.75 0 000 1.5z" clip-rule="evenodd" />
|
||||||
|
</svg>
|
||||||
|
|
||||||
|
</a>
|
||||||
|
{% endif %}
|
||||||
5
src/_includes/icons/gmail.liquid
Normal file
5
src/_includes/icons/gmail.liquid
Normal file
|
|
@ -0,0 +1,5 @@
|
||||||
|
{% if site.gmail != "" %}
|
||||||
|
<a href={{ site.gmail }} rel="me">
|
||||||
|
<svg class="inline w-6 h-6 fill-current text-gray-700 hover:text-purple-500 dark:text-gray-200 dark:hover:text-purple-400 h-6 w-6" role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Gmail</title><path d="M24 5.457v13.909c0 .904-.732 1.636-1.636 1.636h-3.819V11.73L12 16.64l-6.545-4.91v9.273H1.636A1.636 1.636 0 0 1 0 19.366V5.457c0-2.023 2.309-3.178 3.927-1.964L5.455 4.64 12 9.548l6.545-4.91 1.528-1.145C21.69 2.28 24 3.434 24 5.457z"/></svg>
|
||||||
|
</a>
|
||||||
|
{% endif %}
|
||||||
5
src/_includes/icons/lastfm.liquid
Normal file
5
src/_includes/icons/lastfm.liquid
Normal file
|
|
@ -0,0 +1,5 @@
|
||||||
|
{% if site.lastfm != "" %}
|
||||||
|
<a href={{ site.lastfm }} rel="me">
|
||||||
|
<svg class="inline w-6 h-6 fill-current text-gray-700 hover:text-purple-500 dark:text-gray-200 dark:hover:text-purple-400 h-6 w-6" role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Last.fm</title><path d="M10.584 17.21l-.88-2.392s-1.43 1.594-3.573 1.594c-1.897 0-3.244-1.649-3.244-4.288 0-3.382 1.704-4.591 3.381-4.591 2.42 0 3.189 1.567 3.849 3.574l.88 2.749c.88 2.666 2.529 4.81 7.285 4.81 3.409 0 5.718-1.044 5.718-3.793 0-2.227-1.265-3.381-3.63-3.931l-1.758-.385c-1.21-.275-1.567-.77-1.567-1.595 0-.934.742-1.484 1.952-1.484 1.32 0 2.034.495 2.144 1.677l2.749-.33c-.22-2.474-1.924-3.492-4.729-3.492-2.474 0-4.893.935-4.893 3.932 0 1.87.907 3.051 3.189 3.601l1.87.44c1.402.33 1.869.907 1.869 1.704 0 1.017-.99 1.43-2.86 1.43-2.776 0-3.93-1.457-4.59-3.464l-.907-2.75c-1.155-3.573-2.997-4.893-6.653-4.893C2.144 5.333 0 7.89 0 12.233c0 4.18 2.144 6.434 5.993 6.434 3.106 0 4.591-1.457 4.591-1.457z"/></svg>
|
||||||
|
</a>
|
||||||
|
{% endif %}
|
||||||
5
src/_includes/icons/letterboxd.liquid
Normal file
5
src/_includes/icons/letterboxd.liquid
Normal file
|
|
@ -0,0 +1,5 @@
|
||||||
|
{% if site.letterboxd != "" %}
|
||||||
|
<a href={{ site.letterboxd }} rel="me">
|
||||||
|
<svg class="inline w-6 h-6 fill-current text-gray-700 hover:text-purple-500 dark:text-gray-200 dark:hover:text-purple-400 h-6 w-6" role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Letterboxd</title><path d="M8.29 16.752V7.2H6.546V4.8h6.328v2.4h-1.746v9.574h3.925v-2.618h2.839V19.2H6.545v-2.448h1.746zM0 12c0 6.628 5.372 12 12 12s12-5.372 12-12S18.628 0 12 0 0 5.372 0 12z"/></svg>
|
||||||
|
</a>
|
||||||
|
{% endif %}
|
||||||
5
src/_includes/icons/mastodon.liquid
Normal file
5
src/_includes/icons/mastodon.liquid
Normal file
|
|
@ -0,0 +1,5 @@
|
||||||
|
{% if site.mastodon != "" %}
|
||||||
|
<a href={{ site.mastodon }} rel="me">
|
||||||
|
<svg class="inline w-6 h-6 fill-current text-gray-700 hover:text-purple-500 dark:text-gray-200 dark:hover:text-purple-400 h-6 w-6" role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Mastodon</title><path d="M23.268 5.313c-.35-2.578-2.617-4.61-5.304-5.004C17.51.242 15.792 0 11.813 0h-.03c-3.98 0-4.835.242-5.288.309C3.882.692 1.496 2.518.917 5.127.64 6.412.61 7.837.661 9.143c.074 1.874.088 3.745.26 5.611.118 1.24.325 2.47.62 3.68.55 2.237 2.777 4.098 4.96 4.857 2.336.792 4.849.923 7.256.38.265-.061.527-.132.786-.213.585-.184 1.27-.39 1.774-.753a.057.057 0 0 0 .023-.043v-1.809a.052.052 0 0 0-.02-.041.053.053 0 0 0-.046-.01 20.282 20.282 0 0 1-4.709.545c-2.73 0-3.463-1.284-3.674-1.818a5.593 5.593 0 0 1-.319-1.433.053.053 0 0 1 .066-.054c1.517.363 3.072.546 4.632.546.376 0 .75 0 1.125-.01 1.57-.044 3.224-.124 4.768-.422.038-.008.077-.015.11-.024 2.435-.464 4.753-1.92 4.989-5.604.008-.145.03-1.52.03-1.67.002-.512.167-3.63-.024-5.545zm-3.748 9.195h-2.561V8.29c0-1.309-.55-1.976-1.67-1.976-1.23 0-1.846.79-1.846 2.35v3.403h-2.546V8.663c0-1.56-.617-2.35-1.848-2.35-1.112 0-1.668.668-1.67 1.977v6.218H4.822V8.102c0-1.31.337-2.35 1.011-3.12.696-.77 1.608-1.164 2.74-1.164 1.311 0 2.302.5 2.962 1.498l.638 1.06.638-1.06c.66-.999 1.65-1.498 2.96-1.498 1.13 0 2.043.395 2.74 1.164.675.77 1.012 1.81 1.012 3.12z"/></svg>
|
||||||
|
</a>
|
||||||
|
{% endif %}
|
||||||
7
src/_includes/icons/oku.liquid
Normal file
7
src/_includes/icons/oku.liquid
Normal file
|
|
@ -0,0 +1,7 @@
|
||||||
|
{% if site.oku != "" %}
|
||||||
|
<a href={{ site.oku }} rel="me">
|
||||||
|
<svg class="inline w-6 h-6 fill-current text-gray-700 hover:text-purple-500 dark:text-gray-200 dark:hover:text-purple-400 h-6 w-6" viewBox="0 0 500 500" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="M 500 183.794 L 500 248.024 C 442.688 248.024 387.352 270.751 346.838 310.277 C 314.229 342.885 292.49 383.399 285.573 427.866 L 500 427.866 L 500 493.083 L 0 493.083 L 0 427.866 L 215.415 427.866 C 208.498 383.399 186.759 341.897 154.15 309.289 C 113.636 269.763 58.3 247.036 0 247.036 L 0 181.818 C 51.383 181.818 102.767 195.652 146.245 222.332 C 190.711 248.024 226.285 285.573 250.988 331.028 C 274.704 286.561 310.277 249.012 354.743 223.32 C 398.221 196.64 448.617 183.794 500 183.794 Z M 169.96 85.968 C 169.96 42.49 205.534 6.917 250 6.917 C 294.466 6.917 330.04 42.49 330.04 85.968 C 330.04 129.447 294.466 164.032 250 164.032 C 205.534 164.032 169.96 129.447 169.96 85.968 Z M 169.96 85.968" />
|
||||||
|
</svg>
|
||||||
|
</a>
|
||||||
|
{% endif %}
|
||||||
7
src/_includes/icons/savvycal.liquid
Normal file
7
src/_includes/icons/savvycal.liquid
Normal file
|
|
@ -0,0 +1,7 @@
|
||||||
|
{% if site.savvycal != "" %}
|
||||||
|
<a href={{ site.savvycal }} rel="me">
|
||||||
|
<svg class="inline w-6 h-6 fill-current text-gray-700 hover:text-purple-500 dark:text-gray-200 dark:hover:text-purple-400 h-6 w-6" viewBox="0 0 500 500" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="M 207.401 11.364 C 399.543 -22.311 454.017 14.335 488.682 207.468 C 522.357 400.602 487.692 454.085 291.587 488.75 C 95.482 522.424 44.97 484.788 11.296 291.655 C -23.369 98.521 16.248 45.038 207.401 11.364 Z M 230.18 96.54 C 193.535 102.483 166.793 119.32 150.946 144.081 C 139.061 162.899 135.099 185.679 139.061 204.497 C 146.984 244.114 179.669 269.865 247.018 274.817 L 251.97 274.817 L 257.912 275.808 L 262.864 275.808 C 285.644 277.789 300.501 282.741 309.415 287.693 C 314.367 290.664 317.338 294.626 318.328 303.54 C 321.3 320.377 308.424 336.224 272.769 342.166 C 249.989 346.128 225.228 341.176 198.487 326.32 C 178.678 315.425 153.917 330.281 154.908 353.061 C 154.908 363.956 160.85 372.87 169.764 377.822 C 208.391 398.621 246.027 406.544 283.663 399.611 C 348.041 388.717 385.677 345.138 375.773 293.635 C 367.85 244.114 333.185 222.325 255.931 216.382 L 250.979 216.382 C 226.219 214.401 211.362 209.449 202.448 203.507 C 198.487 200.535 197.496 197.564 196.506 193.602 C 195.515 188.65 197.496 181.717 201.458 174.784 C 207.401 164.88 219.286 157.947 240.085 153.985 C 257.912 151.014 275.74 153.985 294.558 163.889 C 314.367 174.784 338.137 159.928 338.137 137.148 C 337.147 127.244 331.204 117.339 322.29 112.387 C 292.577 96.54 261.874 90.598 230.18 96.54 Z M 230.18 96.54" />
|
||||||
|
</svg>
|
||||||
|
</a>
|
||||||
|
{% endif %}
|
||||||
3
src/_includes/icons/tags.liquid
Normal file
3
src/_includes/icons/tags.liquid
Normal file
|
|
@ -0,0 +1,3 @@
|
||||||
|
<a href="/tags">
|
||||||
|
<svg class="inline w-6 h-6 fill-current text-gray-700 hover:text-purple-500 dark:text-gray-200 dark:hover:text-purple-400 h-6 w-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-6 h-6"><path fill-rule="evenodd" d="M5.25 2.25a3 3 0 00-3 3v4.318a3 3 0 00.879 2.121l9.58 9.581c.92.92 2.39 1.186 3.548.428a18.849 18.849 0 005.441-5.44c.758-1.16.492-2.629-.428-3.548l-9.58-9.581a3 3 0 00-2.122-.879H5.25zM6.375 7.5a1.125 1.125 0 100-2.25 1.125 1.125 0 000 2.25z" clip-rule="evenodd" /></svg>
|
||||||
|
</a>
|
||||||
8
src/_includes/icons/toggle-theme.liquid
Normal file
8
src/_includes/icons/toggle-theme.liquid
Normal file
|
|
@ -0,0 +1,8 @@
|
||||||
|
<div id="toggleDarkMode" class="cursor-pointer">
|
||||||
|
<svg class="inline w-6 h-6 fill-current text-gray-700 hover:text-purple-500 dark:text-gray-200 dark:hover:text-purple-400 h-6 w-6 toggle-light" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-6 h-6">
|
||||||
|
<path d="M12 2.25a.75.75 0 01.75.75v2.25a.75.75 0 01-1.5 0V3a.75.75 0 01.75-.75zM7.5 12a4.5 4.5 0 119 0 4.5 4.5 0 01-9 0zM18.894 6.166a.75.75 0 00-1.06-1.06l-1.591 1.59a.75.75 0 101.06 1.061l1.591-1.59zM21.75 12a.75.75 0 01-.75.75h-2.25a.75.75 0 010-1.5H21a.75.75 0 01.75.75zM17.834 18.894a.75.75 0 001.06-1.06l-1.59-1.591a.75.75 0 10-1.061 1.06l1.59 1.591zM12 18a.75.75 0 01.75.75V21a.75.75 0 01-1.5 0v-2.25A.75.75 0 0112 18zM7.758 17.303a.75.75 0 00-1.061-1.06l-1.591 1.59a.75.75 0 001.06 1.061l1.591-1.59zM6 12a.75.75 0 01-.75.75H3a.75.75 0 010-1.5h2.25A.75.75 0 016 12zM6.697 7.757a.75.75 0 001.06-1.06l-1.59-1.591a.75.75 0 00-1.061 1.06l1.59 1.591z" />
|
||||||
|
</svg>
|
||||||
|
<svg class="inline w-6 h-6 fill-current text-gray-700 hover:text-purple-500 dark:text-gray-200 dark:hover:text-purple-400 h-6 w-6 toggle-dark" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-6 h-6">
|
||||||
|
<path fill-rule="evenodd" d="M9.528 1.718a.75.75 0 01.162.819A8.97 8.97 0 009 6a9 9 0 009 9 8.97 8.97 0 003.463-.69.75.75 0 01.981.98 10.503 10.503 0 01-9.694 6.46c-5.799 0-10.5-4.701-10.5-10.5 0-4.368 2.667-8.112 6.46-9.694a.75.75 0 01.818.162z" clip-rule="evenodd" />
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
5
src/_includes/icons/trakt.liquid
Normal file
5
src/_includes/icons/trakt.liquid
Normal file
|
|
@ -0,0 +1,5 @@
|
||||||
|
{% if site.trakt != "" %}
|
||||||
|
<a href={{ site.trakt }} rel="me">
|
||||||
|
<svg class="inline w-6 h-6 fill-current text-gray-700 hover:text-purple-500 dark:text-gray-200 dark:hover:text-purple-400 h-6 w-6" role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Trakt</title><path d="M12 24C5.385 24 0 18.615 0 12S5.385 0 12 0s12 5.385 12 12-5.385 12-12 12zm0-22.789C6.05 1.211 1.211 6.05 1.211 12S6.05 22.79 12 22.79 22.79 17.95 22.79 12 17.95 1.211 12 1.211zm-7.11 17.32c1.756 1.92 4.294 3.113 7.11 3.113 1.439 0 2.801-.313 4.027-.876l-6.697-6.68-4.44 4.443zm14.288-.067c1.541-1.71 2.484-3.99 2.484-6.466 0-3.885-2.287-7.215-5.568-8.76l-6.089 6.076 9.164 9.15h.009zm-9.877-8.429L4.227 15.09l-.679-.68 5.337-5.336 6.23-6.225c-.978-.328-2.02-.509-3.115-.509C6.663 2.337 2.337 6.663 2.337 12c0 2.172.713 4.178 1.939 5.801l5.056-5.055.359.329 7.245 7.245c.15-.082.285-.164.42-.266L9.33 12.05l-4.854 4.855-.679-.679 5.535-5.535.359.331 8.46 8.437c.135-.1.255-.215.375-.316L9.39 10.027l-.083.015-.006-.007zm3.047 1.028l-.678-.676 4.788-4.79.679.689-4.789 4.785v-.008zm4.542-6.578l-5.52 5.52-.68-.679 5.521-5.52.679.684v-.005z"/></svg>
|
||||||
|
</a>
|
||||||
|
{% endif %}
|
||||||
|
|
@ -1,8 +1,14 @@
|
||||||
<nav>
|
<nav>
|
||||||
<ul class="flex py-2 border-b-2 mb-6">
|
<ul class="flex">
|
||||||
<li class="mr-6"><a href="/">Home</a></li>
|
<li class="mr-6"><a class="text-gray-700 hover:text-purple-500 dark:text-gray-200 dark:hover:text-purple-400" href="/about">About</a></li>
|
||||||
<li class="mr-6"><a href="/tags">Tags</a></li>
|
<li class="mr-6">
|
||||||
<li class="mr-6"><a href="/about">About</a></li>
|
{% include "icons/coffee.liquid" %}
|
||||||
<li class="mr-6"><span class="cursor-pointer" id="toggleDarkMode">Dark mode</spam></li>
|
</li>
|
||||||
|
<li class="mr-6">
|
||||||
|
{% include "icons/tags.liquid" %}
|
||||||
|
</li>
|
||||||
|
<li class="mr-6">
|
||||||
|
{% include "icons/toggle-theme.liquid" %}
|
||||||
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</nav>
|
</nav>
|
||||||
|
|
@ -1,72 +1,36 @@
|
||||||
<nav class="flex justify-center mt-8">
|
<nav class="flex justify-between mt-8">
|
||||||
<div class="inline-flex">
|
{% if pagination.href.previous %}
|
||||||
{% if page.url != pagination.href.first %}
|
<a href="{{ pagination.href.previous }}">
|
||||||
<a href="{{ pagination.href.first }}">
|
<button class="py-2 pr-4 text-primary-400 hover:text-primary-500 dark:hover:text-primary-300">Previous</button>
|
||||||
<button class="paginator-text">
|
</a>
|
||||||
First
|
{% else %}
|
||||||
</button>
|
<button class="py-2 pr-4 cursor-not-allowed disabled:opacity-50" disabled>Previous</button>
|
||||||
</a>
|
{% endif %}
|
||||||
{% else %}
|
|
||||||
<button class="paginator-text cursor-not-allowed">
|
{% for pageEntry in pagination.pages %}
|
||||||
First
|
{% if page.url == pagination.hrefs[forloop.index0] %}
|
||||||
|
<a href="{{ pagination.hrefs[forloop.index0] }}" aria-current="page">
|
||||||
|
<button class="py-2 px-4 text-primary-400 hover:text-primary-500 dark:hover:text-primary-300">
|
||||||
|
{{ forloop.index }}
|
||||||
</button>
|
</button>
|
||||||
{% endif %}
|
</a>
|
||||||
|
{% else %}
|
||||||
|
<a href="{{ pagination.hrefs[forloop.index0] }}">
|
||||||
{% if pagination.href.previous %}
|
<button class="py-2 px-4">
|
||||||
<a href="{{ pagination.href.previous }}">
|
{{ forloop.index }}
|
||||||
<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>
|
</button>
|
||||||
{% endif %}
|
</a>
|
||||||
|
{% endif %}
|
||||||
{% for pageEntry in pagination.pages %}
|
{% endfor %}
|
||||||
{% 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 %}
|
{% if pagination.href.next %}
|
||||||
<a href="{{ pagination.href.next }}">
|
<a href="{{ pagination.href.next }}">
|
||||||
<button class="py-2 px-4">
|
<button class="py-2 pl-4">
|
||||||
<img src="/assets/img/chevron-right.svg" alt="next">
|
<button class="py-2 pl-4 text-primary-400 hover:text-primary-500 dark:hover:text-primary-300">Next</button>
|
||||||
</button>
|
</button>
|
||||||
</a>
|
</a>
|
||||||
{% else %}
|
{% else %}
|
||||||
<button class="py-2 px-4 cursor-not-allowed">
|
<button class="py-2 pl-4 cursor-not-allowed disabled:opacity-50" disabled>Next</button>
|
||||||
<img src="/assets/img/chevron-right.svg" alt="next">
|
{% endif %}
|
||||||
</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>
|
</nav>
|
||||||
|
|
@ -2,28 +2,20 @@
|
||||||
layout: main
|
layout: main
|
||||||
---
|
---
|
||||||
|
|
||||||
{% include "nav.liquid" %}
|
{% include "header.liquid" %}
|
||||||
|
|
||||||
<p class="text-5xl md:text-6xl font-black pt-10 md:pt-30 pb-4 leading-tight">
|
<h2 class="text-xl md:text-2xl font-black leading-tight dark:text-gray-200 pt-12">{{title}}</h2>
|
||||||
{{ title}}
|
<div class="mt-2 text-sm mb-4">
|
||||||
</p>
|
<em>{{ date | date: "%m.%d.%Y" }}</em> • {% for tag in tags %}
|
||||||
|
|
||||||
<div>
|
|
||||||
<em>{{ date | date: "%Y-%m-%d" }}</em> ·
|
|
||||||
<span>{{ content | readTime }} min read</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="mt-3 pb-10">
|
|
||||||
{% for tag in tags %}
|
|
||||||
{% if tag != "posts" %}
|
{% if tag != "posts" %}
|
||||||
<a href="/tags/{{ tag }}">
|
<a href="/tags/{{ tag }}" class="no-underline">
|
||||||
<span class="post-tag">{{ tag }}</span>
|
<span class="post-tag">{{ tag }}</span>
|
||||||
</a>
|
</a>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
{% endfor %}
|
{% endfor %}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="prose dark:prose-invert hover:prose-a:text-blue-500">
|
<div class="prose dark:prose-invert hover:prose-a:text-blue-500 max-w-full">
|
||||||
{{ content }}
|
{{ content }}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
|
||||||
25
src/about.md
25
src/about.md
|
|
@ -1,6 +1,27 @@
|
||||||
---
|
---
|
||||||
layout: default
|
layout: default
|
||||||
title: This is me.
|
title: About
|
||||||
---
|
---
|
||||||
|
|
||||||
She/her. A software person. Singapore.
|
<h2
|
||||||
|
class="m-0 text-xl font-black leading-tight tracking-normal dark:text-gray-200 md:text-2xl mb-2"
|
||||||
|
>
|
||||||
|
{{ title }}
|
||||||
|
</h2>
|
||||||
|
|
||||||
|
I'm a software developer in Camarillo, California. I enjoy hanging out with my beautiful family and 4 rescue dogs, technology, automation, <a href="https://last.fm/user/cdme_" target="_blank" rel="noopener noreferrer">music</a>, writing, <a href="https://oku.club/user/cory" target="_blank" rel="noopener noreferrer">reading</a> and <a href="https://trakt.tv/users/cdransf" target="_blank" rel="noopener noreferrer">tv</a> and <a href="https://letterboxd.com/cdme" target="_blank" rel="noopener noreferrer">movies</a>.
|
||||||
|
|
||||||
|
I build, maintain and design web applications. I've been coding professionally since 2010 with a focus on frontend technologies.
|
||||||
|
|
||||||
|
I tend to write about whatever strikes me, with a focus on development, technology, automation or issues I run into with these things. This is all typically light on editing with and heavy on spur of the moment thoughts.
|
||||||
|
|
||||||
|
[You can also see what I'm doing now](/now).
|
||||||
|
|
||||||
|
<h3
|
||||||
|
class="m-0 text-lg font-black leading-tight tracking-normal dark:text-gray-200 md:text-xl mb-2"
|
||||||
|
>
|
||||||
|
Contact
|
||||||
|
</h3>
|
||||||
|
|
||||||
|
- [Email](mailto:hi@coryd.dev)
|
||||||
|
- [Calendar](https://savvycal.com/coryd)
|
||||||
|
|
|
||||||
|
|
@ -1,4 +0,0 @@
|
||||||
<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>
|
|
||||||
|
Before Width: | Height: | Size: 317 B |
|
|
@ -1,4 +0,0 @@
|
||||||
<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>
|
|
||||||
|
Before Width: | Height: | Size: 317 B |
|
|
@ -1,5 +0,0 @@
|
||||||
<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>
|
|
||||||
|
Before Width: | Height: | Size: 359 B |
Binary file not shown.
|
Before Width: | Height: | Size: 7.4 KiB After Width: | Height: | Size: 68 KiB |
BIN
src/assets/img/favicon/favicon-16x16.png
Normal file
BIN
src/assets/img/favicon/favicon-16x16.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.7 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 8.3 KiB After Width: | Height: | Size: 26 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 981 B After Width: | Height: | Size: 2.7 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 24 KiB After Width: | Height: | Size: 68 KiB |
BIN
src/assets/img/favicon/favicon.png
Normal file
BIN
src/assets/img/favicon/favicon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4 KiB |
375
src/assets/styles/prism.css
Normal file
375
src/assets/styles/prism.css
Normal file
|
|
@ -0,0 +1,375 @@
|
||||||
|
:root {
|
||||||
|
--background: #282a36;
|
||||||
|
--comment: #6272a4;
|
||||||
|
--foreground: #f8f8f2;
|
||||||
|
--selection: #44475a;
|
||||||
|
--cyan: #8be9fd;
|
||||||
|
--green: #50fa7b;
|
||||||
|
--orange: #ffb86c;
|
||||||
|
--pink: #ff79c6;
|
||||||
|
--purple: #bd93f9;
|
||||||
|
--red: #ff5555;
|
||||||
|
--yellow: #f1fa8c;
|
||||||
|
--background-30: #282a3633;
|
||||||
|
--comment-30: #6272a433;
|
||||||
|
--foreground-30: #f8f8f233;
|
||||||
|
--selection-30: #44475a33;
|
||||||
|
--cyan-30: #8be9fd33;
|
||||||
|
--green-30: #50fa7b33;
|
||||||
|
--orange-30: #ffb86c33;
|
||||||
|
--pink-30: #ff79c633;
|
||||||
|
--purple-30: #bd93f933;
|
||||||
|
--red-30: #ff555533;
|
||||||
|
--yellow-30: #f1fa8c33;
|
||||||
|
--background-40: #282a3666;
|
||||||
|
--comment-40: #6272a466;
|
||||||
|
--foreground-40: #f8f8f266;
|
||||||
|
--selection-40: #44475a66;
|
||||||
|
--cyan-40: #8be9fd66;
|
||||||
|
--green-40: #50fa7b66;
|
||||||
|
--orange-40: #ffb86c66;
|
||||||
|
--pink-40: #ff79c666;
|
||||||
|
--purple-40: #bd93f966;
|
||||||
|
--red-40: #ff555566;
|
||||||
|
--yellow-40: #f1fa8c66;
|
||||||
|
}
|
||||||
|
pre::-webkit-scrollbar {
|
||||||
|
width: 14px;
|
||||||
|
}
|
||||||
|
pre::-webkit-scrollbar-track {
|
||||||
|
background-color: var(--comment);
|
||||||
|
border-radius: 0;
|
||||||
|
}
|
||||||
|
pre::-webkit-scrollbar-thumb {
|
||||||
|
background-color: var(--purple);
|
||||||
|
border-radius: 0;
|
||||||
|
}
|
||||||
|
code[class*='language-'] ::-moz-selection,
|
||||||
|
code[class*='language-']::-moz-selection,
|
||||||
|
pre[class*='language-'] ::-moz-selection,
|
||||||
|
pre[class*='language-']::-moz-selection {
|
||||||
|
text-shadow: none;
|
||||||
|
background-color: var(--selection);
|
||||||
|
}
|
||||||
|
code[class*='language-'] ::selection,
|
||||||
|
code[class*='language-']::selection,
|
||||||
|
pre[class*='language-'] ::selection,
|
||||||
|
pre[class*='language-']::selection {
|
||||||
|
text-shadow: none;
|
||||||
|
background-color: var(--selection);
|
||||||
|
}
|
||||||
|
pre.line-numbers {
|
||||||
|
position: relative;
|
||||||
|
padding-left: 3.8em;
|
||||||
|
counter-reset: linenumber;
|
||||||
|
}
|
||||||
|
pre.line-numbers > code {
|
||||||
|
position: relative;
|
||||||
|
white-space: inherit;
|
||||||
|
}
|
||||||
|
.line-numbers .line-numbers-rows {
|
||||||
|
position: absolute;
|
||||||
|
pointer-events: none;
|
||||||
|
top: 0;
|
||||||
|
font-size: 100%;
|
||||||
|
left: -3.8em;
|
||||||
|
width: 3em;
|
||||||
|
letter-spacing: -1px;
|
||||||
|
border-right: 1px solid #999;
|
||||||
|
-webkit-user-select: none;
|
||||||
|
-moz-user-select: none;
|
||||||
|
-ms-user-select: none;
|
||||||
|
user-select: none;
|
||||||
|
}
|
||||||
|
.line-numbers-rows > span {
|
||||||
|
pointer-events: none;
|
||||||
|
display: block;
|
||||||
|
counter-increment: linenumber;
|
||||||
|
}
|
||||||
|
.line-numbers-rows > span:before {
|
||||||
|
content: counter(linenumber);
|
||||||
|
color: #999;
|
||||||
|
display: block;
|
||||||
|
padding-right: 0.8em;
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
div.code-toolbar {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
div.code-toolbar > .toolbar {
|
||||||
|
position: absolute;
|
||||||
|
top: 0.3em;
|
||||||
|
right: 0.2em;
|
||||||
|
transition: opacity 0.3s ease-in-out;
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
div.code-toolbar:hover > .toolbar {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
div.code-toolbar > .toolbar .toolbar-item {
|
||||||
|
display: inline-block;
|
||||||
|
padding-right: 20px;
|
||||||
|
}
|
||||||
|
div.code-toolbar > .toolbar a {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
div.code-toolbar > .toolbar button {
|
||||||
|
background: 0 0;
|
||||||
|
border: 0;
|
||||||
|
color: inherit;
|
||||||
|
font: inherit;
|
||||||
|
line-height: normal;
|
||||||
|
overflow: visible;
|
||||||
|
padding: 0;
|
||||||
|
-webkit-user-select: none;
|
||||||
|
-moz-user-select: none;
|
||||||
|
-ms-user-select: none;
|
||||||
|
}
|
||||||
|
div.code-toolbar > .toolbar a,
|
||||||
|
div.code-toolbar > .toolbar button,
|
||||||
|
div.code-toolbar > .toolbar span {
|
||||||
|
color: var(--foreground);
|
||||||
|
font-size: 0.8em;
|
||||||
|
padding: 0.5em;
|
||||||
|
background: var(--comment);
|
||||||
|
border-radius: 0.5em;
|
||||||
|
}
|
||||||
|
div.code-toolbar > .toolbar a:focus,
|
||||||
|
div.code-toolbar > .toolbar a:hover,
|
||||||
|
div.code-toolbar > .toolbar button:focus,
|
||||||
|
div.code-toolbar > .toolbar button:hover,
|
||||||
|
div.code-toolbar > .toolbar span:focus,
|
||||||
|
div.code-toolbar > .toolbar span:hover {
|
||||||
|
color: inherit;
|
||||||
|
text-decoration: none;
|
||||||
|
background-color: var(--green);
|
||||||
|
}
|
||||||
|
@media print {
|
||||||
|
code[class*='language-'],
|
||||||
|
pre[class*='language-'] {
|
||||||
|
text-shadow: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
code[class*='language-'],
|
||||||
|
pre[class*='language-'] {
|
||||||
|
color: var(--foreground);
|
||||||
|
background: var(--background);
|
||||||
|
text-shadow: none;
|
||||||
|
font-family: PT Mono, Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
|
||||||
|
text-align: left;
|
||||||
|
white-space: pre;
|
||||||
|
word-spacing: normal;
|
||||||
|
word-break: normal;
|
||||||
|
word-wrap: normal;
|
||||||
|
line-height: 1.5;
|
||||||
|
-moz-tab-size: 4;
|
||||||
|
-o-tab-size: 4;
|
||||||
|
tab-size: 4;
|
||||||
|
-webkit-hyphens: none;
|
||||||
|
-moz-hyphens: none;
|
||||||
|
-ms-hyphens: none;
|
||||||
|
hyphens: none;
|
||||||
|
}
|
||||||
|
pre[class*='language-'] {
|
||||||
|
background: var(--background);
|
||||||
|
border-radius: 0.5em;
|
||||||
|
padding: 1em;
|
||||||
|
margin: 0.5em 0;
|
||||||
|
overflow: auto;
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
:not(pre) > code[class*='language-'],
|
||||||
|
pre[class*='language-'] {
|
||||||
|
background: var(--background);
|
||||||
|
}
|
||||||
|
:not(pre) > code[class*='language-'] {
|
||||||
|
padding: 4px 7px;
|
||||||
|
border-radius: 0.3em;
|
||||||
|
white-space: normal;
|
||||||
|
}
|
||||||
|
.limit-300 {
|
||||||
|
height: 300px !important;
|
||||||
|
}
|
||||||
|
.limit-300 {
|
||||||
|
height: 400px !important;
|
||||||
|
}
|
||||||
|
.limit-500 {
|
||||||
|
height: 500px !important;
|
||||||
|
}
|
||||||
|
.limit-600 {
|
||||||
|
height: 600px !important;
|
||||||
|
}
|
||||||
|
.limit-700 {
|
||||||
|
height: 700px !important;
|
||||||
|
}
|
||||||
|
.limit-800 {
|
||||||
|
height: 800px !important;
|
||||||
|
}
|
||||||
|
.language-css {
|
||||||
|
color: var(--purple);
|
||||||
|
}
|
||||||
|
.token {
|
||||||
|
color: var(--pink);
|
||||||
|
}
|
||||||
|
.language-css .token {
|
||||||
|
color: var(--pink);
|
||||||
|
}
|
||||||
|
.token.script {
|
||||||
|
color: var(--foreground);
|
||||||
|
}
|
||||||
|
.token.bold {
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
.token.italic {
|
||||||
|
font-style: italic;
|
||||||
|
}
|
||||||
|
.token.atrule,
|
||||||
|
.token.attr-name,
|
||||||
|
.token.attr-value {
|
||||||
|
color: var(--green);
|
||||||
|
}
|
||||||
|
.language-css .token.atrule {
|
||||||
|
color: var(--purple);
|
||||||
|
}
|
||||||
|
.language-html .token.attr-value,
|
||||||
|
.language-markup .token.attr-value {
|
||||||
|
color: var(--yellow);
|
||||||
|
}
|
||||||
|
.token.boolean {
|
||||||
|
color: var(--purple);
|
||||||
|
}
|
||||||
|
.token.builtin,
|
||||||
|
.token.class-name {
|
||||||
|
color: var(--cyan);
|
||||||
|
}
|
||||||
|
.token.comment {
|
||||||
|
color: var(--comment);
|
||||||
|
}
|
||||||
|
.token.constant {
|
||||||
|
color: var(--purple);
|
||||||
|
}
|
||||||
|
.language-javascript .token.constant {
|
||||||
|
color: var(--orange);
|
||||||
|
font-style: italic;
|
||||||
|
}
|
||||||
|
.token.entity {
|
||||||
|
color: var(--pink);
|
||||||
|
}
|
||||||
|
.language-css .token.entity {
|
||||||
|
color: var(--green);
|
||||||
|
}
|
||||||
|
.language-html .token.entity.named-entity {
|
||||||
|
color: var(--purple);
|
||||||
|
}
|
||||||
|
.language-html .token.entity:not(.named-entity) {
|
||||||
|
color: var(--pink);
|
||||||
|
}
|
||||||
|
.language-markup .token.entity.named-entity {
|
||||||
|
color: var(--purple);
|
||||||
|
}
|
||||||
|
.language-markup .token.entity:not(.named-entity) {
|
||||||
|
color: var(--pink);
|
||||||
|
}
|
||||||
|
.token.function {
|
||||||
|
color: var(--green);
|
||||||
|
}
|
||||||
|
.language-css .token.function {
|
||||||
|
color: var(--cyan);
|
||||||
|
}
|
||||||
|
.token.important,
|
||||||
|
.token.keyword {
|
||||||
|
color: var(--pink);
|
||||||
|
}
|
||||||
|
.token.prolog {
|
||||||
|
color: var(--foreground);
|
||||||
|
}
|
||||||
|
.token.property {
|
||||||
|
color: var(--orange);
|
||||||
|
}
|
||||||
|
.language-css .token.property {
|
||||||
|
color: var(--cyan);
|
||||||
|
}
|
||||||
|
.token.punctuation {
|
||||||
|
color: var(--pink);
|
||||||
|
}
|
||||||
|
.language-css .token.punctuation {
|
||||||
|
color: var(--orange);
|
||||||
|
}
|
||||||
|
.language-html .token.punctuation,
|
||||||
|
.language-markup .token.punctuation {
|
||||||
|
color: var(--foreground);
|
||||||
|
}
|
||||||
|
.token.selector {
|
||||||
|
color: var(--pink);
|
||||||
|
}
|
||||||
|
.language-css .token.selector {
|
||||||
|
color: var(--green);
|
||||||
|
}
|
||||||
|
.token.regex {
|
||||||
|
color: var(--red);
|
||||||
|
}
|
||||||
|
.language-css .token.rule:not(.atrule) {
|
||||||
|
color: var(--foreground);
|
||||||
|
}
|
||||||
|
.token.string {
|
||||||
|
color: var(--yellow);
|
||||||
|
}
|
||||||
|
.token.tag {
|
||||||
|
color: var(--pink);
|
||||||
|
}
|
||||||
|
.token.url {
|
||||||
|
color: var(--cyan);
|
||||||
|
}
|
||||||
|
.language-css .token.url {
|
||||||
|
color: var(--orange);
|
||||||
|
}
|
||||||
|
.token.variable {
|
||||||
|
color: var(--comment);
|
||||||
|
}
|
||||||
|
.token.number {
|
||||||
|
color: rgba(189, 147, 249, 1);
|
||||||
|
}
|
||||||
|
.token.operator {
|
||||||
|
color: rgba(139, 233, 253, 1);
|
||||||
|
}
|
||||||
|
.token.char {
|
||||||
|
color: rgba(255, 135, 157, 1);
|
||||||
|
}
|
||||||
|
.token.symbol {
|
||||||
|
color: rgba(255, 184, 108, 1);
|
||||||
|
}
|
||||||
|
.token.deleted {
|
||||||
|
color: #e2777a;
|
||||||
|
}
|
||||||
|
.token.namespace {
|
||||||
|
color: #e2777a;
|
||||||
|
}
|
||||||
|
.highlight-line {
|
||||||
|
color: inherit;
|
||||||
|
display: inline-block;
|
||||||
|
text-decoration: none;
|
||||||
|
border-radius: 4px;
|
||||||
|
padding: 2px 10px;
|
||||||
|
}
|
||||||
|
.highlight-line:empty:before {
|
||||||
|
content: ' ';
|
||||||
|
}
|
||||||
|
.highlight-line:not(:last-child) {
|
||||||
|
min-width: 100%;
|
||||||
|
}
|
||||||
|
.highlight-line .highlight-line:not(:last-child) {
|
||||||
|
min-width: 0;
|
||||||
|
}
|
||||||
|
.highlight-line-isdir {
|
||||||
|
color: var(--foreground);
|
||||||
|
background-color: var(--selection-30);
|
||||||
|
}
|
||||||
|
.highlight-line-active {
|
||||||
|
background-color: var(--comment-30);
|
||||||
|
}
|
||||||
|
.highlight-line-add {
|
||||||
|
background-color: var(--green-30);
|
||||||
|
}
|
||||||
|
.highlight-line-remove {
|
||||||
|
background-color: var(--red-30);
|
||||||
|
}
|
||||||
|
|
@ -1,41 +1,34 @@
|
||||||
---
|
---
|
||||||
layout: default
|
layout: default
|
||||||
title: Blog<br>部落格
|
title: Blog
|
||||||
pagination:
|
pagination:
|
||||||
data: collections.posts
|
data: collections.posts
|
||||||
size: 10
|
size: 10
|
||||||
reverse: true
|
reverse: true
|
||||||
alias: posts
|
alias: posts
|
||||||
---
|
---
|
||||||
|
|
||||||
{% for post in pagination.items %}
|
{% for post in pagination.items %} {% if post.data.published %}
|
||||||
{% if post.data.published %}
|
<div class="mb-8 border-b border-gray-200 pb-8 dark:border-gray-700">
|
||||||
<div class="py-4">
|
<a class="no-underline" href="{{ post.url }}"
|
||||||
<p>
|
><h2
|
||||||
<span class="text-2xl sm:text-4xl font-bold hover:text-blue-700 leading-tight"><a href="{{ post.url }}">{{ post.data.title }}</a></span>
|
class="m-0 text-xl font-black leading-tight tracking-normal dark:text-gray-200 md:text-2xl"
|
||||||
<span class="text-base sm:text-2xl font-normal"> · {{ post.templateContent | readTime }} min read</span>
|
>
|
||||||
</p>
|
{{ post.data.title }}
|
||||||
<em>{{ post.date | date: "%Y-%m-%d" }}</em>
|
</h2>
|
||||||
<p class="mt-4">{{ post.data.post_excerpt }}...</p>
|
</a>
|
||||||
|
<div class="mt-2 text-sm">
|
||||||
<div class="flex justify-between items-center mt-4">
|
<em>{{ post.date | date: "%m.%d.%Y" }}</em> • {% for tag in post.data.tags %} {% if tag !=
|
||||||
<div class="flex-1 pr-4">
|
"posts" %}
|
||||||
{% for tag in post.data.tags %}
|
<a href="/tags/{{ tag }}" class="font-normal no-underline">
|
||||||
{% if tag != "posts" %}
|
|
||||||
<a href="/tags/{{ tag }}" class="">
|
|
||||||
<div class="post-tag">{{ tag }}</div>
|
<div class="post-tag">{{ tag }}</div>
|
||||||
</a>
|
</a>
|
||||||
{% endif %}
|
{% endif %} {% endfor %}
|
||||||
{% endfor %}
|
</div>
|
||||||
|
<p class="mt-4">{{ post.data.post_excerpt }}...</p>
|
||||||
|
<div class="mt-4 flex items-center justify-between">
|
||||||
|
<a class="flex-none font-normal no-underline" href="{{ post.url }}">Read more →</a>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<a class="flex-none hover:underline font-semibold text-blue-700" href="{{ post.url }}">Read this post →</a>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{% endif %}
|
{% endif %} {% endfor %} {% include "paginator.liquid" %}
|
||||||
{% endfor %}
|
|
||||||
|
|
||||||
|
|
||||||
{% include "paginator.liquid" %}
|
|
||||||
|
|
|
||||||
|
|
@ -1,26 +1,26 @@
|
||||||
{
|
{
|
||||||
"name": "My Blog",
|
"name": "Cory Dransfeldt",
|
||||||
"short_name": "Blog",
|
"short_name": "coryd.dev",
|
||||||
"icons": [
|
"icons": [
|
||||||
{
|
{
|
||||||
"src": "/assets/img/favicon/favicon-32x32.png",
|
"src": "/assets/img/favicon/favicon-32x32.png",
|
||||||
"sizes": "32x32",
|
"sizes": "32x32",
|
||||||
"type": "image/png",
|
"type": "image/png",
|
||||||
"purpose": "any maskable"
|
"purpose": "any maskable"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"src": "/assets/img/favicon/favicon-192x192.png",
|
"src": "/assets/img/favicon/favicon-192x192.png",
|
||||||
"sizes": "192x192",
|
"sizes": "192x192",
|
||||||
"type": "image/png"
|
"type": "image/png"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"src": "/assets/img/favicon/favicon-512x512.png",
|
"src": "/assets/img/favicon/favicon-512x512.png",
|
||||||
"sizes": "512x512",
|
"sizes": "512x512",
|
||||||
"type": "image/png"
|
"type": "image/png"
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
"theme_color": "#000",
|
"theme_color": "#bd93f9",
|
||||||
"background_color": "#fff",
|
"background_color": "#fff",
|
||||||
"display": "standalone",
|
"display": "standalone",
|
||||||
"start_url": "/"
|
"start_url": "/"
|
||||||
}
|
}
|
||||||
|
|
@ -2,56 +2,61 @@
|
||||||
title: Flutter
|
title: Flutter
|
||||||
date: 2020-07-01
|
date: 2020-07-01
|
||||||
tags:
|
tags:
|
||||||
- android
|
- android
|
||||||
- flutter
|
- 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.
|
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 -->
|
<!-- excerpt -->
|
||||||
|
|
||||||
|
|
||||||
# h1 Heading
|
# h1 Heading
|
||||||
|
|
||||||
## h2 Heading
|
## h2 Heading
|
||||||
|
|
||||||
### h3 Heading
|
### h3 Heading
|
||||||
|
|
||||||
#### h4 Heading
|
#### h4 Heading
|
||||||
|
|
||||||
##### h5 Heading
|
##### h5 Heading
|
||||||
|
|
||||||
###### h6 Heading
|
###### h6 Heading
|
||||||
|
|
||||||
|
|
||||||
## Horizontal Rules
|
## Horizontal Rules
|
||||||
___
|
|
||||||
|
---
|
||||||
|
|
||||||
## Emphasis
|
## Emphasis
|
||||||
|
|
||||||
**This is bold text**
|
**This is bold text**
|
||||||
|
|
||||||
__This is bold text__
|
**This is bold text**
|
||||||
|
|
||||||
*This is italic text*
|
_This is italic text_
|
||||||
|
|
||||||
_This is italic text_
|
_This is italic text_
|
||||||
|
|
||||||
~~Strikethrough~~
|
~~Strikethrough~~
|
||||||
|
|
||||||
|
|
||||||
## Blockquotes
|
## Blockquotes
|
||||||
|
|
||||||
|
|
||||||
> Blockquotes can also be nested...
|
> Blockquotes can also be nested...
|
||||||
>> ...by using additional greater-than signs right next to each other...
|
>
|
||||||
|
> > ...by using additional greater-than signs right next to each other...
|
||||||
|
> >
|
||||||
> > > ...or with spaces between arrows.
|
> > > ...or with spaces between arrows.
|
||||||
|
|
||||||
|
|
||||||
## Lists
|
## Lists
|
||||||
|
|
||||||
Unordered
|
Unordered
|
||||||
|
|
||||||
+ Create a list by starting a line with `+`, `-`, or `*`
|
- Create a list by starting a line with `+`, `-`, or `*`
|
||||||
+ Sub-lists are made by indenting 2 spaces:
|
- Sub-lists are made by indenting 2 spaces:
|
||||||
- Marker character change forces new list start:
|
- Marker character change forces new list start:
|
||||||
* Ac tristique libero volutpat at
|
- Ac tristique libero volutpat at
|
||||||
+ Facilisis in pretium nisl aliquet
|
* Facilisis in pretium nisl aliquet
|
||||||
- Nulla volutpat aliquam velit
|
- Nulla volutpat aliquam velit
|
||||||
+ Very easy!
|
- Very easy!
|
||||||
|
|
||||||
Ordered
|
Ordered
|
||||||
|
|
||||||
|
|
@ -59,16 +64,14 @@ Ordered
|
||||||
2. Consectetur adipiscing elit
|
2. Consectetur adipiscing elit
|
||||||
3. Integer molestie lorem at massa
|
3. Integer molestie lorem at massa
|
||||||
|
|
||||||
|
4. You can use sequential numbers...
|
||||||
1. You can use sequential numbers...
|
5. ...or keep all the numbers as `1.`
|
||||||
1. ...or keep all the numbers as `1.`
|
|
||||||
|
|
||||||
Start numbering with offset:
|
Start numbering with offset:
|
||||||
|
|
||||||
57. foo
|
57. foo
|
||||||
1. bar
|
1. bar
|
||||||
|
|
||||||
|
|
||||||
## Code
|
## Code
|
||||||
|
|
||||||
Inline `code`
|
Inline `code`
|
||||||
|
|
@ -80,7 +83,6 @@ Indented code
|
||||||
line 2 of code
|
line 2 of code
|
||||||
line 3 of code
|
line 3 of code
|
||||||
|
|
||||||
|
|
||||||
Block code "fences"
|
Block code "fences"
|
||||||
|
|
||||||
```
|
```
|
||||||
|
|
@ -89,36 +91,34 @@ Sample text here...
|
||||||
|
|
||||||
Syntax highlighting
|
Syntax highlighting
|
||||||
|
|
||||||
``` js
|
```js
|
||||||
var foo = function (bar) {
|
var foo = function (bar) {
|
||||||
return bar++;
|
return bar++
|
||||||
};
|
}
|
||||||
|
|
||||||
console.log(foo(5));
|
console.log(foo(5))
|
||||||
```
|
```
|
||||||
|
|
||||||
## Tables
|
## Tables
|
||||||
|
|
||||||
| Option | Description |
|
| Option | Description |
|
||||||
| ------ | ----------- |
|
| ------ | ------------------------------------------------------------------------- |
|
||||||
| data | path to data files to supply the data that will be passed into templates. |
|
| 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. |
|
| engine | engine to be used for processing templates. Handlebars is the default. |
|
||||||
| ext | extension to be used for dest files. |
|
| ext | extension to be used for dest files. |
|
||||||
|
|
||||||
Right aligned columns
|
Right aligned columns
|
||||||
|
|
||||||
| Option | Description |
|
| Option | Description |
|
||||||
| ------:| -----------:|
|
| -----: | ------------------------------------------------------------------------: |
|
||||||
| data | path to data files to supply the data that will be passed into templates. |
|
| 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. |
|
| engine | engine to be used for processing templates. Handlebars is the default. |
|
||||||
| ext | extension to be used for dest files. |
|
| ext | extension to be used for dest files. |
|
||||||
|
|
||||||
|
|
||||||
## Links
|
## Links
|
||||||
|
|
||||||
[link text](http://dev.nodeca.com)
|
[link text](http://dev.nodeca.com)
|
||||||
|
|
||||||
[link with title](http://nodeca.github.io/pica/demo/ "title text!")
|
[link with title](http://nodeca.github.io/pica/demo/ 'title text!')
|
||||||
|
|
||||||
Autoconverted link https://github.com/nodeca/pica (enable linkify to see)
|
Autoconverted link https://github.com/nodeca/pica (enable linkify to see)
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,20 +1,21 @@
|
||||||
---
|
---
|
||||||
layout: default
|
layout: default
|
||||||
pagination:
|
pagination:
|
||||||
data: collections
|
data: collections
|
||||||
size: 1
|
size: 1
|
||||||
alias: tag
|
alias: tag
|
||||||
permalink: /tags/{{ tag }}/
|
permalink: /tags/{{ tag }}/
|
||||||
eleventyComputed:
|
eleventyComputed:
|
||||||
title: "{{ tag }}"
|
title: '{{ tag }}'
|
||||||
---
|
---
|
||||||
|
|
||||||
{% for post in collections[tag] %}
|
{% for post in collections[tag] %}
|
||||||
|
|
||||||
<div class="py-4 sm:py-10">
|
<div class="py-4 sm:py-10">
|
||||||
<p>
|
<p>
|
||||||
<span class="text-2xl sm:text-4xl font-bold hover:underline"><a href="{{ post.url }}">{{ post.data.title }}</a></span>
|
<span class="text-2xl sm:text-4xl font-bold hover:underline"><a href="{{ post.url }}">{{ post.data.title }}</a></span>
|
||||||
</p>
|
</p>
|
||||||
<em>{{ post.date | date: "%Y-%m-%d" }}</em>
|
<em>{{ post.date | date: "%m.%d.%Y" }}</em>
|
||||||
<p class="mt-4">{{ post.data.post_excerpt }}...
|
<p class="mt-4">{{ post.data.post_excerpt }}...
|
||||||
<span class="hover:underline text-indigo-500"><a href="{{ post.url }}">Read More</a></span>
|
<span class="hover:underline text-indigo-500"><a href="{{ post.url }}">Read More</a></span>
|
||||||
</p>
|
</p>
|
||||||
|
|
|
||||||
|
|
@ -1,7 +1,64 @@
|
||||||
|
const defaultTheme = require('tailwindcss/defaultTheme')
|
||||||
|
const colors = require('tailwindcss/colors')
|
||||||
|
const dracula = require('tailwind-dracula/colors')
|
||||||
|
|
||||||
module.exports = {
|
module.exports = {
|
||||||
darkMode: 'class',
|
darkMode: 'class',
|
||||||
content: ['./src/**/*.md', './src/**/*.html', './src/_includes/**/*.liquid'],
|
theme: {
|
||||||
plugins: [
|
extend: {
|
||||||
require('@tailwindcss/typography')
|
spacing: {
|
||||||
],
|
'9/16': '56.25%',
|
||||||
|
},
|
||||||
|
lineHeight: {
|
||||||
|
11: '2.75rem',
|
||||||
|
12: '3rem',
|
||||||
|
13: '3.25rem',
|
||||||
|
14: '3.5rem',
|
||||||
|
},
|
||||||
|
fontFamily: {
|
||||||
|
sans: ['InterVariable', ...defaultTheme.fontFamily.sans],
|
||||||
|
},
|
||||||
|
colors: {
|
||||||
|
...dracula,
|
||||||
|
primary: dracula.purple,
|
||||||
|
gray: dracula.darker,
|
||||||
|
blue: dracula.blue,
|
||||||
|
cyan: dracula.cyan,
|
||||||
|
green: dracula.green,
|
||||||
|
orange: dracula.orange,
|
||||||
|
pink: dracula.pink,
|
||||||
|
purple: dracula.purple,
|
||||||
|
red: dracula.red,
|
||||||
|
yellow: dracula.yellow,
|
||||||
|
dark: dracula.dark,
|
||||||
|
darker: dracula.darker,
|
||||||
|
light: dracula.light,
|
||||||
|
},
|
||||||
|
backgroundImage: {
|
||||||
|
'cover-gradient':
|
||||||
|
'linear-gradient(180deg,transparent 0,rgba(0,0,0,.15) 70%,rgba(0,0,0,.5))',
|
||||||
|
},
|
||||||
|
typography: (theme) => ({
|
||||||
|
DEFAULT: {
|
||||||
|
css: {
|
||||||
|
a: {
|
||||||
|
color: theme('colors.primary.500'),
|
||||||
|
'&:hover': {
|
||||||
|
color: `${theme('colors.primary.400')} !important`,
|
||||||
|
},
|
||||||
|
code: { color: theme('colors.primary.400') },
|
||||||
|
},
|
||||||
|
pre: {
|
||||||
|
backgroundColor: theme('colors.gray.900'),
|
||||||
|
},
|
||||||
|
code: {
|
||||||
|
backgroundColor: theme('colors.gray.900'),
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
}),
|
||||||
|
},
|
||||||
|
},
|
||||||
|
plugins: [require('@tailwindcss/typography'), require('tailwind-dracula')('dracula')],
|
||||||
|
content: ['./src/**/*.md', './src/**/*.html', './src/_includes/**/*.liquid'],
|
||||||
}
|
}
|
||||||
20
tailwind.css
20
tailwind.css
|
|
@ -3,9 +3,25 @@
|
||||||
@tailwind utilities;
|
@tailwind utilities;
|
||||||
|
|
||||||
.paginator-text {
|
.paginator-text {
|
||||||
@apply text-gray-600 font-bold py-2 px-4;
|
@apply py-2 px-4 font-bold text-gray-600 dark:text-gray-200;
|
||||||
}
|
}
|
||||||
|
|
||||||
.post-tag {
|
.post-tag {
|
||||||
@apply inline-block text-xs rounded-full py-2 px-4 mt-1 mr-1 bg-gray-300 dark:bg-gray-500;
|
@apply mt-1 mr-1 inline-block text-sm text-primary-400 hover:text-primary-500 dark:hover:text-primary-300;
|
||||||
|
}
|
||||||
|
|
||||||
|
.toggle-light {
|
||||||
|
@apply inline;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dark .toggle-light {
|
||||||
|
@apply hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.toggle-dark {
|
||||||
|
@apply hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dark .toggle-dark {
|
||||||
|
@apply inline;
|
||||||
}
|
}
|
||||||
Reference in a new issue