Skip to content

Commit 72fbcf2

Browse files
geekishgeekish
committed
✨ Init
Oops.
0 parents  commit 72fbcf2

28 files changed

+11691
-0
lines changed

‎.eslintrc.js

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
module.exports = {
2+
parser: "vue-eslint-parser",
3+
plugins: ["gridsome"],
4+
rules: {
5+
"gridsome/format-query-block": "error"
6+
},
7+
}

‎.gitignore

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
*.log
2+
.cache
3+
.DS_Store
4+
src/.temp
5+
node_modules
6+
dist
7+
.env
8+
.env.*

‎LICENSE.md

+25
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
The MIT License (MIT)
2+
=====================
3+
4+
Copyright © 2020 Hannah Warmbier <[email protected]>
5+
6+
Permission is hereby granted, free of charge, to any person
7+
obtaining a copy of this software and associated documentation
8+
files (the “Software”), to deal in the Software without
9+
restriction, including without limitation the rights to use,
10+
copy, modify, merge, publish, distribute, sublicense, and/or sell
11+
copies of the Software, and to permit persons to whom the
12+
Software is furnished to do so, subject to the following
13+
conditions:
14+
15+
The above copyright notice and this permission notice shall be
16+
included in all copies or substantial portions of the Software.
17+
18+
THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND,
19+
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES
20+
OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
21+
NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT
22+
HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
23+
WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
24+
FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
25+
OTHER DEALINGS IN THE SOFTWARE.

‎README.md

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
# geekish.dev
2+
3+
Powered by [Gridsome](https://gridsome.org) and hosted by [Netlify](https://netlify.com).
4+
5+
## License
6+
7+
Content in `content` may not be used or redistributed without my permission. As for everything else, see [LICENSE.md](LICENSE.md).

‎content/posts/20201216-hello-world.md

+22
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
---
2+
title: Hello, World!
3+
date: 2020-12-16
4+
categories: ['Updates']
5+
published: true
6+
excerpt: Well, it's been a few.
7+
---
8+
Well, it's been a few.
9+
10+
Last time I attempted the blogging thing *five years ago*, I had just learned how to use [Composer](https://getcomposer.org) for dependency management.
11+
After years of writing horrible spaghetti code I turned to frameworks, [Laravel](https://laravel.com) being my favorite.
12+
13+
I've also since befriended JavaScript. It should be no surprise as a Laravel fan that I prefer [Vue.js](https://vuejs.org).
14+
I learned JS in the days when jQuery was used by everyone, everywhere.
15+
16+
My current projects include:
17+
18+
- Client site on [Statamic](https://statamic.com)
19+
- Frontend for [Calibre](https://calibre-ebook.com) built with Laravel & [Inertia.js](https://inertiajs.com)
20+
- Markdown editor built on top of [Tiptap](https://tiptap.dev) with [Electron](https://electronjs.org) , thanks to [Desktop Apps with Electron](https://beyondco.de/video-courses/desktop-apps-with-electron)
21+
22+
[Yada yada yada.](https://www.youtube.com/watch?v=O6kRqnfsBEc)

‎gridsome.config.js

+46
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
const tailwindcss = require('tailwindcss')
2+
const postCssNested = require('postcss-nested')
3+
4+
module.exports = {
5+
siteName: 'Geekish.dev',
6+
templates: {
7+
Post: '/:year/:month/:day/:title',
8+
Category: '/category/:id'
9+
},
10+
plugins: [
11+
{
12+
use: '@gridsome/source-filesystem',
13+
options: {
14+
typeName: 'Post',
15+
path: './content/posts/**/*.md',
16+
refs: {
17+
// Creates a GraphQL collection from 'tags' in front-matter and adds a reference.
18+
categories: {
19+
typeName: 'Category',
20+
create: true
21+
}
22+
}
23+
}
24+
}
25+
],
26+
transformers: {
27+
remark: {
28+
externalLinksTarget: '_blank',
29+
externalLinksRel: ['nofollow', 'noopener', 'noreferrer'],
30+
plugins: [
31+
'@gridsome/remark-prismjs'
32+
]
33+
}
34+
},
35+
css: {
36+
loaderOptions: {
37+
postcss: {
38+
plugins: [
39+
tailwindcss(),
40+
postCssNested(),
41+
],
42+
},
43+
},
44+
},
45+
}
46+

‎gridsome.server.js

+16
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
// Server API makes it possible to hook into various parts of Gridsome
2+
// on server-side and add custom data to the GraphQL data layer.
3+
// Learn more: https://gridsome.org/docs/server-api/
4+
5+
// Changes here require a server restart.
6+
// To restart press CTRL + C in terminal and run `gridsome develop`
7+
8+
module.exports = function (api) {
9+
api.loadSource(({ addCollection }) => {
10+
// Use the Data Store API here: https://gridsome.org/docs/data-store-api/
11+
})
12+
13+
api.createPages(({ createPage }) => {
14+
// Use the Pages API here: https://gridsome.org/docs/pages-api/
15+
})
16+
}

‎netlify.toml

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
[build]
2+
command = "gridsome build"
3+
publish = "dist"

‎package.json

+35
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
{
2+
"name": "geekish.dev",
3+
"private": true,
4+
"scripts": {
5+
"build": "gridsome build",
6+
"develop": "gridsome develop",
7+
"explore": "gridsome explore",
8+
"deploy": "gridsomebuild && netlify deploy"
9+
},
10+
"dependencies": {
11+
"@gridsome/remark-prismjs": "^0.5.0",
12+
"@gridsome/source-filesystem": "^0.6.2",
13+
"@gridsome/transformer-remark": "^0.6.4",
14+
"@tailwindcss/forms": "^0.2.1",
15+
"@tailwindcss/postcss7-compat": "^2.0.2",
16+
"@tailwindcss/typography": "^0.3.1",
17+
"autoprefixer": "^9",
18+
"dayjs": "^1.9.7",
19+
"gridsome": "^0.7.0",
20+
"lodash": "^4.17.20",
21+
"postcss": "^7",
22+
"postcss-nested": "^4.2.3",
23+
"prism-themes": "^1.5.0",
24+
"tailwindcss": "npm:@tailwindcss/postcss7-compat",
25+
"tailwindcss-typography": "^3.1.0",
26+
"tippy.js": "^6.2.7",
27+
"twemoji": "^13.0.1"
28+
},
29+
"devDependencies": {
30+
"eslint": "^7.15.0",
31+
"eslint-plugin-gridsome": "^1.5.0",
32+
"node-notifier": "^8.0.1",
33+
"vue-eslint-parser": "^7.3.0"
34+
}
35+
}

‎src/assets/tailwind.css

+92
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,92 @@
1+
@tailwind base;
2+
@tailwind components;
3+
@tailwind utilities;
4+
5+
@layer base {
6+
html {
7+
/*font-size: 17px;*/
8+
}
9+
10+
body {
11+
@apply antialiased leading-relaxed;
12+
}
13+
14+
}
15+
16+
@layer components {
17+
.container {
18+
@apply mx-auto px-12;
19+
}
20+
.emoji {
21+
@apply inline-block w-5 h-5 align-text-top my-0;
22+
}
23+
.text-2xl .emoji {
24+
@apply w-6 h-6;
25+
}
26+
dt .emoji {
27+
@apply mr-2 -mt-1 align-text-bottom;
28+
}
29+
[data-tippy-content] {
30+
cursor: help;
31+
}
32+
33+
34+
.prose a {
35+
@apply text-indigo-600;
36+
}
37+
38+
.prose a:hover {
39+
@apply text-indigo-800;
40+
}
41+
42+
.dark {
43+
.prose a {
44+
@apply text-indigo-400;
45+
}
46+
47+
.prose a:hover {
48+
@apply text-indigo-500;
49+
}
50+
51+
.prose hr {
52+
@apply border-gray-800;
53+
}
54+
}
55+
}
56+
57+
@layer utilities {
58+
@variants group-hover, hover {
59+
.rainbow {
60+
background: linear-gradient(124deg, #ff2400, #e81d1d, #e8b71d, #e3e81d, #1de840, #1ddde8, #2b1de8, #dd00f3, #dd00f3);
61+
background-size: 1800% 1800%;
62+
background-clip: text;
63+
color: transparent;
64+
65+
-webkit-animation: rainbow 18s ease infinite;
66+
-z-animation: rainbow 18s ease infinite;
67+
-o-animation: rainbow 18s ease infinite;
68+
animation: rainbow 18s ease infinite;
69+
}
70+
}
71+
72+
@-webkit-keyframes rainbow {
73+
0%{background-position:0% 82%}
74+
50%{background-position:100% 19%}
75+
100%{background-position:0% 82%}
76+
}
77+
@-moz-keyframes rainbow {
78+
0%{background-position:0% 82%}
79+
50%{background-position:100% 19%}
80+
100%{background-position:0% 82%}
81+
}
82+
@-o-keyframes rainbow {
83+
0%{background-position:0% 82%}
84+
50%{background-position:100% 19%}
85+
100%{background-position:0% 82%}
86+
}
87+
@keyframes rainbow {
88+
0%{background-position:0% 82%}
89+
50%{background-position:100% 19%}
90+
100%{background-position:0% 82%}
91+
}
92+
}

‎src/components/PostCard.vue

+32
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
<template>
2+
<article class="space-y-2 xl:space-y-0 xl:items-baseline">
3+
<div class="space-y-4">
4+
<header>
5+
<h2 class="text-2xl leading-8 font-medium">
6+
<g-link class="text-gray-900 hover:text-indigo-700 dark:text-gray-100 dark:hover:text-indigo-200" :to="post.path">{{ post.title }}</g-link>
7+
</h2>
8+
<p class="mt-2 text-gray-500 text-lg leading-6">
9+
<time :datetime="post.date">{{ post.date }}</time>
10+
</p>
11+
</header>
12+
<div class="prose max-w-none text-gray-700 dark:text-gray-200">
13+
{{ post.excerpt }}
14+
</div>
15+
<div class="flex items-center justify-between">
16+
<p class="text-base leading-6 font-medium">
17+
<g-link class="text-indigo-600 hover:text-indigo-700 dark:text-indigo-400 dark:hover:text-indigo-500" :aria-label="`Read &quot;${post.title}&quot;`" :to="post.path">Read more →</g-link>
18+
</p>
19+
</div>
20+
</div>
21+
</article>
22+
</template>
23+
24+
<script>
25+
export default {
26+
name: "PostCard",
27+
props: ['post'],
28+
mounted () {
29+
console.debug(this.post)
30+
}
31+
}
32+
</script>

‎src/components/ToggleTheme.vue

+50
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
<template>
2+
<button class="text-gray-900 hover:text-indigo-700 dark:text-gray-100 dark:hover:text-indigo-200 focus:outline-none" @click="toggleTheme">
3+
<svg v-if="theme === 'dark'" xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" width="44" height="44" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
4+
<path stroke="none" d="M0 0h24v24H0z" fill="none"/>
5+
<circle cx="12" cy="12" r="4" />
6+
<path d="M3 12h1m8 -9v1m8 8h1m-9 8v1m-6.4 -15.4l.7 .7m12.1 -.7l-.7 .7m0 11.4l.7 .7m-12.1 -.7l-.7 .7" />
7+
</svg>
8+
<svg v-else xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" width="44" height="44" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
9+
<path stroke="none" d="M0 0h24v24H0z" fill="none"/>
10+
<path d="M12 3c.132 0 .263 0 .393 0a7.5 7.5 0 0 0 7.92 12.446a9 9 0 1 1 -8.313 -12.454z" />
11+
<path d="M17 4a2 2 0 0 0 2 2a2 2 0 0 0 -2 2a2 2 0 0 0 -2 -2a2 2 0 0 0 2 -2" />
12+
<path d="M19 11h2m-1 -1v2" />
13+
</svg>
14+
</button>
15+
</template>
16+
17+
<script>
18+
export default {
19+
name: "ToggleTheme",
20+
data () {
21+
return {
22+
theme: 'light',
23+
}
24+
},
25+
methods: {
26+
initTheme() {
27+
if (window.__theme) {
28+
this.theme = window.__theme
29+
}
30+
},
31+
toggleTheme () {
32+
if (this.theme === 'light')
33+
this.darkMode()
34+
else if (this.theme === 'dark')
35+
this.lightMode()
36+
},
37+
darkMode () {
38+
window.__setPreferredTheme('dark')
39+
this.theme = 'dark'
40+
},
41+
lightMode () {
42+
window.__setPreferredTheme('light')
43+
this.theme = 'light'
44+
},
45+
},
46+
mounted () {
47+
this.initTheme()
48+
}
49+
}
50+
</script>

‎src/favicon.png

29.9 KB
Loading

‎src/highlight.js

+29
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
const _ = require('lodash')
2+
const plugin = require('tailwindcss/plugin')
3+
4+
module.exports = plugin(function({ addUtilities, theme }) {
5+
const colors = theme('colors')
6+
const colorNames = ['gray', 'yellow', 'indigo', 'emerald']
7+
8+
const values = ['50', '100', '200', '300', '400', '500', '600', '700', '800', '900']
9+
const gradient = (color) => `linear-gradient(to right, ${color} 100%, #fff 0)`
10+
const hl = {
11+
backgroundPosition: '0 90%',
12+
backgroundRepeat: 'repeat-x',
13+
backgroundSize: '100% 45%',
14+
transitionProperty: 'background-image, background-size',
15+
}
16+
17+
const highlights = {}
18+
19+
_.forEach(colorNames, (color) => {
20+
_.forEach(values, (value) => {
21+
highlights[`.hl-${color}-${value}`] = {
22+
...hl,
23+
backgroundImage: gradient(colors[color][value]),
24+
}
25+
})
26+
})
27+
28+
addUtilities(highlights, ['hover', 'focus'])
29+
})

0 commit comments

Comments
 (0)