Skip to content
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

Draft
wants to merge 2 commits into
base: main
Choose a base branch
from
Draft
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
40 changes: 20 additions & 20 deletions .vitepress/config.js
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"));
},
},
};
20 changes: 12 additions & 8 deletions .vitepress/theme/Date.vue
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<script setup>
import { computed } from 'vue';
import { computed } from "vue";

const props = defineProps({
createdDate: { type: Object, required: true },
Expand All @@ -21,10 +21,10 @@ const isUpdated = computed(
);

function formatUpdatedDate() {
return new Date(props.updatedDate).toLocaleDateString('en-US', {
year: 'numeric',
month: 'short',
day: 'numeric',
return new Date(props.updatedDate).toLocaleDateString("en-US", {
year: "numeric",
month: "short",
day: "numeric",
});
}

Expand All @@ -39,7 +39,7 @@ function getDateTime(time) {
flex flex-wrap
column-gap-3
text-sm
leading-6
leading-10
font-medium
text-gray-500
whitespace-nowrap
Expand All @@ -48,14 +48,18 @@ function getDateTime(time) {
<div class="flex">
<dt class="sr-only">Created</dt>
<dd>
<time :datetime="getDateTime(props.createdDate.time)">{{ props.createdDate.string }}</time>
<time :datetime="getDateTime(props.createdDate.time)">{{
props.createdDate.string
}}</time>
</dd>
</div>
<div v-if="isUpdated" class="flex">
(
<dt>updated&nbsp;</dt>
<dd>
<time :datetime="getDateTime(props.updatedDate)">{{ formatUpdatedDate() }}</time>
<time :datetime="getDateTime(props.updatedDate)">{{
formatUpdatedDate()
}}</time>
</dd>
)
</div>
Expand Down
34 changes: 23 additions & 11 deletions .vitepress/theme/Layout.vue
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<template>
<div class="flex flex-col justify-center">
<div class="flex flex-col justify-center dark:text-gray-400">
<nav
class="flex items-center flex-col md:flex-row mb-10"
:class="isIndex ? 'justify-center' : 'justify-between'"
Expand All @@ -10,13 +10,21 @@
xmlns="http://www.w3.org/2000/svg"
role="img"
aria-labelledby="statemlLogo"
class="h-16 md:h-10 fill-current stroke-current"
class="dark:text-gray-400 h-16 md:h-10 fill-current stroke-current"
>
<title id="statemlLogo">StateMl Logo</title>
<path
d="M111.296 57.2675C111.296 59.5465 110.696 61.5605 109.494 63.3095C108.311 65.0585 106.606 66.4277 104.38 67.417C102.154 68.4063 99.4775 68.901 96.3505 68.901C92.8878 68.901 89.9816 68.3975 87.632 67.3905C85.3 66.3658 83.3655 65.1027 81.8285 63.601L86.2275 58.725C87.5878 59.9087 89.0895 60.8273 90.7325 61.481C92.3755 62.117 94.1775 62.435 96.1385 62.435C97.9581 62.435 99.4333 62.0463 100.564 61.269C101.695 60.474 102.26 59.361 102.26 57.93C102.26 56.5873 101.783 55.5362 100.829 54.7765C99.8926 54.0168 98.1436 53.2483 95.582 52.471C91.289 51.1637 88.2326 49.6267 86.413 47.86C84.611 46.0757 83.71 43.7878 83.71 40.9965C83.71 38.7528 84.3283 36.836 85.565 35.246C86.8193 33.656 88.4976 32.4458 90.6 31.6155C92.7023 30.7675 95.0166 30.3435 97.543 30.3435C100.387 30.3435 102.896 30.7587 105.069 31.589C107.242 32.4017 109.123 33.5677 110.713 35.087L106.606 39.804C105.369 38.7617 104.035 37.9932 102.604 37.4985C101.173 36.9862 99.716 36.73 98.232 36.73C96.5713 36.73 95.2375 37.0392 94.2305 37.6575C93.2235 38.2582 92.72 39.1503 92.72 40.334C92.72 41.1113 92.9408 41.765 93.3825 42.295C93.8241 42.825 94.5926 43.3285 95.688 43.8055C96.7833 44.2648 98.3026 44.8037 100.246 45.422C102.56 46.1287 104.539 46.9767 106.182 47.966C107.843 48.9377 109.106 50.1655 109.971 51.6495C110.855 53.1335 111.296 55.0062 111.296 57.2675ZM137.776 66.357C136.68 67.0637 135.355 67.6643 133.801 68.159C132.246 68.6537 130.497 68.901 128.554 68.901C124.879 68.901 122.15 67.9647 120.365 66.092C118.581 64.2017 117.689 61.64 117.689 58.407V45.634H111.779V39.857H117.689V33.762L126.063 32.755V39.857H135.126L134.304 45.634H126.063V58.407C126.063 59.8027 126.381 60.8008 127.017 61.4015C127.653 62.0022 128.669 62.3025 130.064 62.3025C131.054 62.3025 131.955 62.1877 132.767 61.958C133.598 61.7107 134.34 61.4015 134.993 61.0305L137.776 66.357ZM163.672 59.891C163.672 60.951 163.813 61.7195 164.096 62.1965C164.396 62.6735 164.873 63.0357 165.527 63.283L163.805 68.795C162.144 68.636 160.739 68.2738 159.591 67.7085C158.46 67.1255 157.568 66.251 156.915 65.085C155.837 66.3747 154.459 67.3375 152.781 67.9735C151.102 68.5918 149.389 68.901 147.64 68.901C144.742 68.901 142.428 68.0795 140.697 66.4365C138.983 64.7758 138.126 62.647 138.126 60.05C138.126 56.9937 139.319 54.6352 141.704 52.9745C144.106 51.3138 147.481 50.4835 151.827 50.4835H155.616V49.4235C155.616 46.5438 153.761 45.104 150.051 45.104C149.15 45.104 147.993 45.2365 146.58 45.5015C145.166 45.7488 143.753 46.111 142.34 46.588L140.405 41.023C142.225 40.334 144.115 39.8128 146.076 39.4595C148.055 39.1062 149.821 38.9295 151.376 38.9295C155.563 38.9295 158.655 39.7863 160.651 41.5C162.665 43.196 163.672 45.6517 163.672 48.867V59.891ZM150.528 62.912C151.429 62.912 152.374 62.647 153.364 62.117C154.353 61.5693 155.104 60.8008 155.616 59.8115V55.2535H153.549C151.217 55.2535 149.503 55.6157 148.408 56.34C147.313 57.0467 146.765 58.089 146.765 59.467C146.765 60.5447 147.092 61.3927 147.746 62.011C148.417 62.6117 149.344 62.912 150.528 62.912ZM192.854 66.357C191.759 67.0637 190.434 67.6643 188.879 68.159C187.325 68.6537 185.576 68.901 183.632 68.901C179.958 68.901 177.228 67.9647 175.444 66.092C173.66 64.2017 172.767 61.64 172.767 58.407V45.634H166.858V39.857H172.767V33.762L181.141 32.755V39.857H190.204L189.383 45.634H181.141V58.407C181.141 59.8027 181.459 60.8008 182.095 61.4015C182.731 62.0022 183.747 62.3025 185.143 62.3025C186.132 62.3025 187.033 62.1877 187.846 61.958C188.676 61.7107 189.418 61.4015 190.072 61.0305L192.854 66.357ZM202.321 56.3665C202.603 58.6632 203.354 60.315 204.573 61.322C205.792 62.3113 207.294 62.806 209.078 62.806C210.368 62.806 211.613 62.594 212.815 62.17C214.016 61.746 215.173 61.1807 216.286 60.474L219.652 65.032C218.327 66.1627 216.719 67.0902 214.829 67.8145C212.956 68.5388 210.818 68.901 208.416 68.901C205.2 68.901 202.506 68.265 200.333 66.993C198.16 65.7033 196.526 63.9367 195.431 61.693C194.335 59.4493 193.788 56.87 193.788 53.955C193.788 51.1813 194.318 48.6638 195.378 46.4025C196.438 44.1235 197.983 42.3127 200.015 40.97C202.064 39.6097 204.564 38.9295 207.515 38.9295C210.2 38.9295 212.523 39.5037 214.484 40.652C216.463 41.8003 217.991 43.4522 219.069 45.6075C220.164 47.7628 220.712 50.351 220.712 53.372C220.712 53.849 220.694 54.3613 220.659 54.909C220.641 55.4567 220.606 55.9425 220.553 56.3665H202.321ZM207.515 44.5475C206.013 44.5475 204.803 45.0863 203.884 46.164C202.965 47.2417 202.409 48.9642 202.215 51.3315H212.55C212.532 49.2822 212.134 47.6392 211.357 46.4025C210.58 45.1658 209.299 44.5475 207.515 44.5475ZM252.994 31.271L255.061 68H247.482L247.032 52.2855C246.979 50.3422 246.961 48.655 246.979 47.224C247.014 45.793 247.076 44.4238 247.164 43.1165C247.253 41.7915 247.359 40.3075 247.482 38.6645L243.348 61.746H236.776L232.324 38.6645C232.466 40.2015 232.581 41.6502 232.669 43.0105C232.757 44.3532 232.81 45.7665 232.828 47.2505C232.863 48.7345 232.863 50.457 232.828 52.418L232.563 68H225.116L227.183 31.271H236.114L240.195 55.015L244.064 31.271H252.994ZM261.957 68V31.271H270.649V61.1365H286.576L285.675 68H261.957Z"
/>
<rect x="71" y="5" width="228" height="90" rx="18" stroke-width="10" fill="none" />
<rect
x="71"
y="5"
width="228"
height="90"
rx="18"
stroke-width="10"
fill="none"
/>
<path
d="M64 48.3238C66.6667 49.8634 66.6667 53.7124 64 55.252L44.1818 66.694C41.5152 68.2336 38.1818 66.3091 38.1818 63.2299V40.3459C38.1818 37.2667 41.5152 35.3422 44.1818 36.8818L64 48.3238Z"
/>
Expand All @@ -33,7 +41,9 @@
<a href="#">Learn</a>
<a href="#">Playground</a>
<a href="#">Spec</a>
<a href="/garden" :class="isGarden ? 'font-bold' : ''">Digital Garden</a>
<a href="/garden" :class="isGarden ? 'font-bold' : ''"
>Digital Garden</a
>
<a href="https://github.com/StateML">Github</a>
<a href="https://twitter.com/stateml_org">Twitter</a>
</div>
Expand All @@ -50,13 +60,15 @@
</template>

<script setup>
import { computed } from 'vue';
import { useRoute } from 'vitepress';
import Posts from './Posts.vue';
import Post from './Post.vue';
import { computed } from "vue";
Copy link
Contributor Author

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

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Haha np

import { useRoute } from "vitepress";
import Posts from "./Posts.vue";
import Post from "./Post.vue";

const route = useRoute();
const isIndex = computed(() => route.path === '/index.html' || route.path === '/');
const isPost = computed(() => route.path.includes('/garden/'));
const isGarden = computed(() => route.path.includes('garden'));
const isIndex = computed(
() => route.path === "/index.html" || route.path === "/"
);
const isPost = computed(() => route.path.includes("/garden/"));
const isGarden = computed(() => route.path.includes("garden"));
</script>
30 changes: 20 additions & 10 deletions .vitepress/theme/Post.vue
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() {
Expand All @@ -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>
Copy link
Contributor Author

Choose a reason for hiding this comment

The 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">
Copy link
Contributor Author

Choose a reason for hiding this comment

The 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" />
Copy link
Contributor Author

Choose a reason for hiding this comment

The 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

Copy link
Contributor

Choose a reason for hiding this comment

The 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)

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.


<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>
Expand Down
34 changes: 26 additions & 8 deletions .vitepress/theme/Posts.vue
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<script setup>
import Date from './Date.vue';
import posts from '../metadata.json';
import Date from "./Date.vue";
import posts from "../metadata.json";
</script>

<template>
Expand All @@ -13,31 +13,49 @@ import posts from '../metadata.json';
leading-9
font-extrabold
text-gray-900
dark:text-gray-400
tracking-tight
sm:text-4xl sm:leading-10
md:text-6xl md:leading-14
"
>
{{ $frontmatter.title }}
</h1>
<p class="text-lg leading-7 text-gray-500">{{ $frontmatter.subtitle }}</p>
<p class="text-lg leading-7 text-gray-500 dark:text-gray-500">
{{ $frontmatter.subtitle }}
</p>
</div>
</div>
<ul class="divide-y divide-gray-200">
<li class="py-12" v-for="{ title, href, date, tags, excerpt } of posts">
<article class="space-y-2 xl:grid xl:grid-cols-4 xl:space-y-0 xl:items-baseline">
<article
class="
space-y-2
xl:grid xl:grid-cols-4 xl:space-y-0 xl:items-baseline
"
>
<Date :created-date="date" />
<div class="space-y-3 xl:col-span-3">
<h2 class="text-xl leading-8 font-semibold tracking-tight">
<a class="text-gray-900 no-underline" :href="href">{{ title }}</a>
<a
class="text-gray-900 no-underline dark:text-gray-400"
:href="href"
>{{ title }}</a
>
</h2>
<div v-if="tags" class="flex flex-wrap items-center gap-3">
<div v-for="tag in tags" :key="tag" class="px-1 rounded bg-gray-200 text-black">
<div
v-for="tag in tags"
:key="tag"
class="px-1 rounded bg-gray-200 text-black dark:text-gray-400"
>
{{ tag }}
</div>
</div>
<div class="text-base leading-6 font-normal">
<a class="link" aria-label="read more" :href="href">Read more →</a>
<div class="text-base leading-6 font-normal dark:text-gray-300">
<a class="link" aria-label="read more" :href="href"
>Read more →</a
>
</div>
</div>
</article>
Expand Down
18 changes: 9 additions & 9 deletions .vitepress/theme/style.css
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,8 @@
@tailwind utilities;

@font-face {
font-family: 'Fira Code';
src: local('Fira Code'), url('/fira-code-variable.ttf') format('truetype');
font-family: "Fira Code";
src: local("Fira Code"), url("/fira-code-variable.ttf") format("truetype");
font-display: swap;
}

Expand All @@ -14,19 +14,19 @@
--active-color: #000000;
}

/* TODO: wait for tailwind typography to support dark theme: https://github.com/tailwindlabs/tailwindcss-typography/pull/122#issuecomment-937641445 */
/* @media screen and (prefers-color-scheme: dark) {
@media screen and (prefers-color-scheme: dark) {
:root {
--background-color: #010101;
--foreground-color: #d7d7d7;
--background-color: #13161f;
--foreground-color: #dadada;
--active-color: #ffffff;
}
} */
}

body {
@apply antialiased;
background-color: var(--background-color);
color: var(--foreground-color);
font-family: 'Fira Code', monospace;
font-family: "Fira Code", monospace;
margin: 2rem;
}

Expand All @@ -42,7 +42,7 @@ a:active {
color: var(--active-color);
}

a[href='#'] {
a[href="#"] {
@apply pointer-events-none cursor-not-allowed opacity-40;
}

Expand Down
Loading