-
Notifications
You must be signed in to change notification settings - Fork 0
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
init dark mode #6
base: main
Are you sure you want to change the base?
Changes from all commits
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,49 +1,49 @@ | ||
require('./genMetadata').watchPosts(); | ||
require("./genMetadata").watchPosts(); | ||
|
||
/** | ||
* @type {import('vitepress').UserConfig} | ||
*/ | ||
module.exports = { | ||
title: 'StateML', | ||
description: 'A language for authoring state machines.', | ||
title: "StateML", | ||
description: "A language for authoring state machines.", | ||
head: [ | ||
[ | ||
'link', | ||
"link", | ||
{ | ||
rel: 'icon', | ||
type: 'image/svg+xml', | ||
href: '/favicon.svg', | ||
rel: "icon", | ||
type: "image/svg+xml", | ||
href: "/favicon.svg", | ||
}, | ||
], | ||
[ | ||
'link', | ||
"link", | ||
{ | ||
rel: 'icon', | ||
type: 'image/png', | ||
href: '/favicon.png', | ||
rel: "icon", | ||
type: "image/png", | ||
href: "/favicon.png", | ||
}, | ||
], | ||
[ | ||
'link', | ||
"link", | ||
{ | ||
rel: 'preload', | ||
as: 'font', | ||
href: '/fira-code-variable.ttf', | ||
crossorigin: 'anonymous', | ||
rel: "preload", | ||
as: "font", | ||
href: "/fira-code-variable.ttf", | ||
crossorigin: "anonymous", | ||
}, | ||
], | ||
[ | ||
'meta', | ||
"meta", | ||
{ | ||
name: 'keywords', | ||
name: "keywords", | ||
content: | ||
'SML, StateML, State Machine Language, state machines, finite state machines, FSM, statecharts', | ||
"SML, StateML, State Machine Language, state machines, finite state machines, FSM, statecharts", | ||
}, | ||
], | ||
], | ||
markdown: { | ||
config(md) { | ||
md.use(require('markdown-it-attrs')); | ||
md.use(require("markdown-it-attrs")); | ||
}, | ||
}, | ||
}; |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,8 +1,8 @@ | ||
<script setup> | ||
import Date from './Date.vue'; | ||
import { computed } from 'vue'; | ||
import { useRoute } from 'vitepress'; | ||
import posts from '../metadata.json'; | ||
import Date from "./Date.vue"; | ||
import { computed } from "vue"; | ||
import { useRoute } from "vitepress"; | ||
import posts from "../metadata.json"; | ||
|
||
const route = useRoute(); | ||
function findCurrentIndex() { | ||
|
@@ -18,33 +18,43 @@ const prevPost = computed(() => posts[findCurrentIndex() + 1]); | |
<article class="prose"> | ||
<header class="mb-8"> | ||
<Date :created-date="date" :updated-date="route.data.lastUpdated" /> | ||
<h1 class="!m-0">{{ $frontmatter.title }}</h1> | ||
<dl class="flex text-sm font-medium leading-5 whitespace-nowrap"> | ||
<h1 class="!m-0 text-gray-400">{{ $frontmatter.title }}</h1> | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. @ChrisShank I can't see to affect the color of this title? |
||
<dl class="flex text-sm font-medium leading-10 whitespace-nowrap"> | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. I tried to balance out some of the spacing in this section |
||
<dt class="sr-only">Name</dt> | ||
<dd class="text-gray-900 whitespace-nowrap">{{ $frontmatter.author }}</dd> | ||
<dd class="text-gray-900 whitespace-nowrap dark:text-gray-400"> | ||
{{ $frontmatter.author }} | ||
</dd> | ||
<dt v-if="$frontmatter.twitter" class="sr-only">Twitter</dt> | ||
<dd v-if="$frontmatter.twitter"> | ||
<span class="px-2">|</span> | ||
<a | ||
:href="'https://twitter.com/' + $frontmatter.twitter" | ||
target="_blank" | ||
rel="noopnener noreferrer" | ||
class="dark:text-gray-100" | ||
>{{ $frontmatter.twitter }}</a | ||
> | ||
</dd> | ||
</dl> | ||
</header> | ||
|
||
<Content class="mb-10" /> | ||
<Content class="mb-10 dark:text-gray-400 leading-1 tracking-tight" /> | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. @ChrisShank I can't seem to work out how to affect the colors inside this tag There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Hmmm… i can look into it tomorrow. I was waiting to implement dark theme until tailwind typography supported it (which should have been recently) There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. yeah I saw the PR come through https://github.com/tailwindlabs/tailwindcss-typography/pull/141/files |
||
|
||
<footer> | ||
<div class="flex mb-8"> | ||
<div v-if="prevPost" class="flex-1 max-w-xs"> | ||
<h2 class="text-gray-500 !text-sm">Previous Article</h2> | ||
<a :href="prevPost.href">{{ prevPost.title }}</a> | ||
</div> | ||
<div v-if="nextPost && prevPost" class="mx-4 border border-gray-200"></div> | ||
<div v-if="nextPost" :class="prevPost ? 'text-right' : ''" class="flex-1 max-w-xs"> | ||
<div | ||
v-if="nextPost && prevPost" | ||
class="mx-4 border border-gray-200" | ||
></div> | ||
<div | ||
v-if="nextPost" | ||
:class="prevPost ? 'text-right' : ''" | ||
class="flex-1 max-w-xs" | ||
> | ||
<h2 class="text-gray-500 !text-sm">Next Article</h2> | ||
<a :href="nextPost.href">{{ nextPost.title }}</a> | ||
</div> | ||
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
ugh this all appears to have come from prettier
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Haha np