@y1feng200156/sairin-theme-minimal 1.1.2

package/lib/Footer.d.ts

@@ -0,0 +1 @@
+export declare function Footer(): import("react/jsx-runtime").JSX.Element;

package/lib/Footer.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Footer = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+function Footer() {
+    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "text-sm" }, { children: ["Powered by ", (0, jsx_runtime_1.jsx)("a", Object.assign({ className: "underline", target: "_blank", href: "https://github.com/djyde/sairin" }, { children: "Sairin" }))] })));
+}
+exports.Footer = Footer;

package/lib/Head.d.ts

@@ -0,0 +1,3 @@
+export default function Head(props: {
+    sairinConfig: any;
+}): import("react/jsx-runtime").JSX.Element;

package/lib/Head.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+function Head(props) {
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("link", { rel: "preconnect", href: "https://fonts.googleapis.com" }), (0, jsx_runtime_1.jsx)("link", { rel: "preconnect", href: "https://fonts.gstatic.com", crossOrigin: "" }), (0, jsx_runtime_1.jsx)("link", { href: "https://fonts.googleapis.com/css2?family=IBM+Plex+Serif:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap", rel: "stylesheet" }), (0, jsx_runtime_1.jsx)("link", { rel: "stylesheet", href: "https://cdn.jsdelivr.net/npm/katex@0.16.27/dist/katex.min.css", integrity: "sha384-vFEKS4hHSxIVqmYSltpM4iY89uq6qO3eKYQ105Yny4HOt5w4r3eqbYx7JwO31q/9", crossOrigin: "anonymous" }), props.sairinConfig.themeConfig.umami && ((0, jsx_runtime_1.jsx)("script", { async: true, defer: true, "data-website-id": props.sairinConfig.themeConfig.umami.id, src: props.sairinConfig.themeConfig.umami.src }))] }));
+}
+exports.default = Head;

package/lib/Home.d.ts

@@ -0,0 +1,2 @@
+import { HomePageThemeProps } from "@y1feng200156/sairin-core";
+export default function Home(props: HomePageThemeProps): import("react/jsx-runtime").JSX.Element;

package/lib/Home.js

@@ -0,0 +1,19 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const head_1 = __importDefault(require("next/head"));
+const link_1 = __importDefault(require("next/link"));
+const dayjs_1 = __importDefault(require("dayjs"));
+const Footer_1 = require("./Footer");
+function Home(props) {
+    var _a;
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(head_1.default, { children: (0, jsx_runtime_1.jsx)("title", { children: props.themeConfig.title }) }), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "container mx-auto max-w-2xl mt-24 px-4 sm:px-0" }, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ className: "text-3xl font-bold mb-4" }, { children: props.themeConfig.title })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "mt-2 mb-8" }, { children: (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "flex gap-2" }, { children: (_a = props.themeConfig.links) === null || _a === void 0 ? void 0 : _a.map((link, index) => {
+                                return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("a", Object.assign({ className: "underline", target: "_blank", href: link.url }, { children: link.title }), link.url), index !== props.themeConfig.links.length - 1 && "•"] }));
+                            }) })) })), (0, jsx_runtime_1.jsx)("div", { children: props.posts.map((post) => {
+                            return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "text-xl my-8" }, { children: [(0, jsx_runtime_1.jsx)(link_1.default, Object.assign({ href: `/${post.attributes.path}` }, { children: (0, jsx_runtime_1.jsx)("a", Object.assign({ className: "hover:underline" }, { children: post.title })) })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "text-sm" }, { children: (0, dayjs_1.default)(post.createdAt).format("DD/MM/YYYY") }))] }), post.id));
+                        }) }), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "my-12" }, { children: (0, jsx_runtime_1.jsx)(Footer_1.Footer, {}) }))] }))] }));
+}
+exports.default = Home;

package/lib/OpenGraph.d.ts

@@ -0,0 +1,4 @@
+import { PostPageThemeProps } from "@y1feng200156/sairin-core";
+export declare function OpenGraph(props: {
+    post: PostPageThemeProps["post"];
+}): import("react/jsx-runtime").JSX.Element | null;

package/lib/OpenGraph.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.OpenGraph = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+function OpenGraph(props) {
+    if (!props.post) {
+        return null;
+    }
+    const ogImage = `
+        https://og-image.vercel.app/${props.post.title}.png?theme=light&md=1&fontSize=100px&images=https%3A%2F%2Fassets.vercel.com%2Fimage%2Fupload%2Ffront%2Fassets%2Fdesign%2Fvercel-triangle-black.svg
+      `;
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("meta", { property: "og:type", content: "artical" }), (0, jsx_runtime_1.jsx)("meta", { property: "og:title", content: props.post.title }), (0, jsx_runtime_1.jsx)("meta", { property: "og:image", content: ogImage }), (0, jsx_runtime_1.jsx)("meta", { property: "article:published_time", content: props.post.createdAt }), (0, jsx_runtime_1.jsx)("meta", { property: "article:author", content: props.post.author.login }), (0, jsx_runtime_1.jsx)("meta", { name: "twitter:card", content: props.post.title }), (0, jsx_runtime_1.jsx)("meta", { name: "twitter:title", content: props.post.title }), (0, jsx_runtime_1.jsx)("meta", { name: "twitter:image", content: ogImage })] }));
+}
+exports.OpenGraph = OpenGraph;

package/lib/Post.d.ts

@@ -0,0 +1,2 @@
+import { PostPageThemeProps } from "@y1feng200156/sairin-core";
+export default function Post(props: PostPageThemeProps): import("react/jsx-runtime").JSX.Element | null;

package/lib/Post.js

@@ -0,0 +1,34 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const dayjs_1 = __importDefault(require("dayjs"));
+const head_1 = __importDefault(require("next/head"));
+const link_1 = __importDefault(require("next/link"));
+const Footer_1 = require("./Footer");
+const OpenGraph_1 = require("./OpenGraph");
+function Post(props) {
+    if (!props.post) {
+        return null;
+    }
+    return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsxs)(head_1.default, { children: [(0, jsx_runtime_1.jsxs)("title", { children: [props.post.title, " - ", props.themeConfig.title] }), (0, jsx_runtime_1.jsx)(OpenGraph_1.OpenGraph, { post: props.post })] }), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "container mx-auto mt-24 max-w-2xl px-4 sm:px-0" }, { children: [(0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "flex my-8 font-bold" }, { children: (0, jsx_runtime_1.jsx)(link_1.default, Object.assign({ href: "/" }, { children: props.themeConfig.title })) })) }), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "mb-8" }, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ className: "text-3xl font-medium" }, { children: props.post.title })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex mt-4 items-center gap-2" }, { children: [(0, jsx_runtime_1.jsx)("img", { className: "w-8 h-8 rounded-full", src: props.post.author.avatarUrl }), (0, jsx_runtime_1.jsx)("a", Object.assign({ target: "_blank", href: props.post.author.url }, { children: props.post.author.login })), (0, jsx_runtime_1.jsx)("a", Object.assign({ className: "underline text-sm", target: "_blank", href: props.post.url }, { children: "View on GitHub" }))] })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "my-8" }, { children: (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "flex gap-4 flex-wrap" }, { children: props.post.reactionGroups
+                                        .filter((group) => group.reactors.totalCount !== 0)
+                                        .map((reactionGroup) => {
+                                        var _a;
+                                        return ((0, jsx_runtime_1.jsx)("a", Object.assign({ href: (_a = props.post) === null || _a === void 0 ? void 0 : _a.url, target: "_blank" }, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex gap-2 bg-blue-50 border border-blue-100 px-4 py-1 rounded-full items-center" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-md" }, { children: {
+                                                            THUMBS_UP: "👍",
+                                                            THUMBS_DOWN: "👎",
+                                                            LAUGH: "😄",
+                                                            HOORAY: "🎉",
+                                                            CONFUSED: "😕",
+                                                            HEART: "❤️",
+                                                            ROCKET: "🚀",
+                                                            EYES: "👀",
+                                                        }[reactionGroup.content] })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-sm font-sans" }, { children: reactionGroup.reactors.totalCount }))] })) })));
+                                    }) })) }))] })), (0, jsx_runtime_1.jsx)("div", { className: "post-body", dangerouslySetInnerHTML: { __html: props.post.html } }), (0, jsx_runtime_1.jsx)("hr", { className: "my-12" }), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "font-sans" }, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ className: "mb-12" }, { children: (0, jsx_runtime_1.jsx)("a", Object.assign({ target: "_blank", href: props.post.url, className: "font-medium border border-gray-700 hover:bg-gray-700 hover:text-gray-100 transition-all text-gray-700 text-sm rounded px-4 py-2" }, { children: "Add comment" })) })), props.post.comments.nodes.map((comment) => {
+                                return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "mb-8" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex items-center gap-2" }, { children: [(0, jsx_runtime_1.jsx)("img", { className: "w-8 h-8 rounded-full", src: comment.author.avatarUrl, alt: "" }), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "font-medium" }, { children: comment.author.login }))] })), (0, jsx_runtime_1.jsx)("div", { dangerouslySetInnerHTML: { __html: comment.html }, className: "mt-2 mb-2 text-gray-800 post-body font-sans" }), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "mt-1 flex text-sm text-gray-500 items-center gap-2" }, { children: [(0, jsx_runtime_1.jsx)("a", Object.assign({ target: "_blank", href: comment.url, className: "hover:underline" }, { children: "Reply" })), (0, jsx_runtime_1.jsx)("span", { children: "\u2022" }), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "" }, { children: (0, dayjs_1.default)(comment.createdAt).format("YYYY-MM-DD") }))] }))] })));
+                            })] })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "my-12" }, { children: (0, jsx_runtime_1.jsx)(Footer_1.Footer, {}) }))] }))] }));
+}
+exports.default = Post;

package/lib/index.d.ts

@@ -0,0 +1,9 @@
+import Home from './Home';
+import Post from './Post';
+import Head from './Head';
+declare const _default: {
+    Home: typeof Home;
+    Post: typeof Post;
+    Head: typeof Head;
+};
+export default _default;

package/lib/index.js

@@ -0,0 +1,13 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const Home_1 = __importDefault(require("./Home"));
+const Post_1 = __importDefault(require("./Post"));
+const Head_1 = __importDefault(require("./Head"));
+exports.default = {
+    Home: Home_1.default,
+    Post: Post_1.default,
+    Head: Head_1.default
+};

package/package.json

@@ -0,0 +1,30 @@
+{
+  "name": "@y1feng200156/sairin-theme-minimal",
+  "version": "1.1.2",
+  "main": "lib/index.js",
+  "scripts": {
+    "dev": "concurrently npm:dev-theme npm:dev-style",
+    "dev-theme": "tsc --watch",
+    "dev-style": "tailwind -i ./src/style.css -o ./style.css --watch",
+    "build-theme": "tsc",
+    "build-style": "tailwind -i ./src/style.css -o ./style.css",
+    "build": "concurrently npm:build-theme npm:build-style",
+    "prepublish": "npm run build"
+  },
+  "devDependencies": {
+    "@y1feng200156/sairin-core": "workspace:*",
+    "autoprefixer": "^10.4.2",
+    "concurrently": "^7.0.0",
+    "next": "^12.1.0",
+    "postcss": "^8.4.6",
+    "tailwindcss": "^3.0.23",
+    "typescript": "^4.5.5",
+    "@types/react": "^17.0.39"
+  },
+  "peerDependencies": {
+    "next": "^12.1.0"
+  },
+  "dependencies": {
+    "dayjs": "^1.10.7"
+  }
+}

package/src/Footer.tsx

@@ -0,0 +1,7 @@
+export function Footer () {
+  return (
+    <div className="text-sm">
+      Powered by <a className="underline" target="_blank" href="https://github.com/djyde/sairin">Sairin</a>
+    </div>
+  )
+}

package/src/Head.tsx

@@ -0,0 +1,27 @@
+export default function Head(props: { sairinConfig: any }) {
+  return (
+    <>
+      <link rel="preconnect" href="https://fonts.googleapis.com" />
+      <link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="" />
+      <link
+        href="https://fonts.googleapis.com/css2?family=IBM+Plex+Serif:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap"
+        rel="stylesheet"
+      />
+      <link
+        rel="stylesheet"
+        href="https://cdn.jsdelivr.net/npm/katex@0.16.27/dist/katex.min.css"
+        integrity="sha384-vFEKS4hHSxIVqmYSltpM4iY89uq6qO3eKYQ105Yny4HOt5w4r3eqbYx7JwO31q/9"
+        crossOrigin="anonymous"
+      />
+
+      {props.sairinConfig.themeConfig.umami && (
+        <script
+          async
+          defer
+          data-website-id={props.sairinConfig.themeConfig.umami.id}
+          src={props.sairinConfig.themeConfig.umami.src}
+        ></script>
+      )}
+    </>
+  );
+}

package/src/Home.tsx

@@ -0,0 +1,59 @@
+import Head from "next/head";
+import Link from "next/link";
+import dayjs from "dayjs";
+import { Footer } from "./Footer";
+
+import { HomePageThemeProps } from "@y1feng200156/sairin-core";
+
+export default function Home(props: HomePageThemeProps) {
+  return (
+    <>
+      <Head>
+        <title>{props.themeConfig.title}</title>
+      </Head>
+      <div className="container mx-auto max-w-2xl mt-24 px-4 sm:px-0">
+        <div className="text-3xl font-bold mb-4">{props.themeConfig.title}</div>
+
+        <div className="mt-2 mb-8">
+          <div className="flex gap-2">
+            {props.themeConfig.links?.map((link, index) => {
+              return (
+                <>
+                  <a
+                    className="underline"
+                    target="_blank"
+                    href={link.url}
+                    key={link.url}
+                  >
+                    {link.title}
+                  </a>
+                  {index !== props.themeConfig.links.length - 1 && "•"}
+                </>
+              );
+            })}
+          </div>
+        </div>
+
+        <div>
+          {props.posts.map((post) => {
+            return (
+              <div key={post.id} className="text-xl my-8">
+                <Link href={`/${post.attributes.path}`}>
+                  <a className="hover:underline">{post.title}</a>
+                </Link>
+
+                <div className="text-sm">
+                  {dayjs(post.createdAt).format("DD/MM/YYYY")}
+                </div>
+              </div>
+            );
+          })}
+        </div>
+
+        <div className="my-12">
+          <Footer />
+        </div>
+      </div>
+    </>
+  );
+}

package/src/OpenGraph.tsx

@@ -0,0 +1,26 @@
+import { PostPageThemeProps } from "@y1feng200156/sairin-core";
+
+export function OpenGraph(props: { post: PostPageThemeProps["post"] }) {
+  if (!props.post) {
+    return null;
+  }
+
+  const ogImage = `
+        https://og-image.vercel.app/${props.post.title}.png?theme=light&md=1&fontSize=100px&images=https%3A%2F%2Fassets.vercel.com%2Fimage%2Fupload%2Ffront%2Fassets%2Fdesign%2Fvercel-triangle-black.svg
+      `;
+  return (
+    <>
+      <meta property="og:type" content="artical" />
+      {/* <meta property="og:description" content={props.post.body.substring(0, 140)} /> */}
+      <meta property="og:title" content={props.post.title} />
+      <meta property="og:image" content={ogImage} />
+
+      <meta property="article:published_time" content={props.post.createdAt} />
+      <meta property="article:author" content={props.post.author.login} />
+
+      <meta name="twitter:card" content={props.post.title} />
+      <meta name="twitter:title" content={props.post.title} />
+      <meta name="twitter:image" content={ogImage} />
+    </>
+  );
+}

package/src/Post.tsx

@@ -0,0 +1,146 @@
+import { PostPageThemeProps } from "@y1feng200156/sairin-core";
+import dayjs from "dayjs";
+import Head from "next/head";
+import Link from "next/link";
+import { Footer } from "./Footer";
+import { OpenGraph } from "./OpenGraph";
+
+export default function Post(props: PostPageThemeProps) {
+  if (!props.post) {
+    return null;
+  }
+
+  return (
+    <div>
+      <Head>
+        <title>
+          {props.post.title} - {props.themeConfig.title}
+        </title>
+        <OpenGraph post={props.post} />
+      </Head>
+
+      <div className="container mx-auto mt-24 max-w-2xl px-4 sm:px-0">
+        <div>
+          <div className="flex my-8 font-bold">
+            <Link href="/">{props.themeConfig.title}</Link>
+          </div>
+        </div>
+
+        <div className="mb-8">
+          <div className="text-3xl font-medium">{props.post.title}</div>
+
+          <div className="flex mt-4 items-center gap-2">
+            <img
+              className="w-8 h-8 rounded-full"
+              src={props.post.author.avatarUrl}
+            ></img>
+
+            <a target="_blank" href={props.post.author.url}>
+              {props.post.author.login}
+            </a>
+
+            <a
+              className="underline text-sm"
+              target="_blank"
+              href={props.post.url}
+            >
+              View on GitHub
+            </a>
+          </div>
+
+          <div className="my-8">
+            <div className="flex gap-4 flex-wrap">
+              {props.post.reactionGroups
+                .filter((group) => group.reactors.totalCount !== 0)
+                .map((reactionGroup) => {
+                  return (
+                    <a href={props.post?.url} target="_blank">
+                      <div className="flex gap-2 bg-blue-50 border border-blue-100 px-4 py-1 rounded-full items-center">
+                        <span className="text-md">
+                          {
+                            {
+                              THUMBS_UP: "👍",
+                              THUMBS_DOWN: "👎",
+                              LAUGH: "😄",
+                              HOORAY: "🎉",
+                              CONFUSED: "😕",
+                              HEART: "❤️",
+                              ROCKET: "🚀",
+                              EYES: "👀",
+                            }[reactionGroup.content]
+                          }
+                        </span>
+                        <span className="text-sm font-sans">
+                          {reactionGroup.reactors.totalCount}
+                        </span>
+                      </div>
+                    </a>
+                  );
+                })}
+            </div>
+          </div>
+        </div>
+
+        <div
+          className="post-body"
+          dangerouslySetInnerHTML={{ __html: props.post.html }}
+        ></div>
+
+        <hr className="my-12" />
+
+        <div className="font-sans">
+          {/* <h1 className='text-md mb-8'>🗣 Comments</h1> */}
+
+          <div className="mb-12">
+            <a
+              target={"_blank"}
+              href={props.post.url}
+              className="font-medium border border-gray-700 hover:bg-gray-700 hover:text-gray-100 transition-all text-gray-700 text-sm rounded px-4 py-2"
+            >
+              Add comment
+            </a>
+          </div>
+
+          {props.post.comments.nodes.map((comment) => {
+            return (
+              <div className="mb-8">
+                <div className="flex items-center gap-2">
+                  <img
+                    className="w-8 h-8 rounded-full"
+                    src={comment.author.avatarUrl}
+                    alt=""
+                  />
+
+                  <span className="font-medium">{comment.author.login}</span>
+                </div>
+
+                <div
+                  dangerouslySetInnerHTML={{ __html: (comment as any).html }}
+                  className="mt-2 mb-2 text-gray-800 post-body font-sans"
+                ></div>
+
+                <div className="mt-1 flex text-sm text-gray-500 items-center gap-2">
+                  <a
+                    target={"_blank"}
+                    href={comment.url}
+                    className="hover:underline"
+                  >
+                    Reply
+                  </a>
+                  <span>•</span>
+                  <span className="">
+                    {dayjs(comment.createdAt).format("YYYY-MM-DD")}
+                  </span>
+                </div>
+              </div>
+            );
+          })}
+        </div>
+
+        <div className="my-12">
+          <Footer />
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/index.ts

@@ -0,0 +1,9 @@
+import Home from './Home'
+import Post from './Post'
+import Head from './Head'
+
+export default {
+  Home,
+  Post,
+  Head
+}

package/src/style.css

@@ -0,0 +1,216 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+/* prism begin*/
+
+
+code[class*="language-"],
+pre[class*="language-"] {
+	font-family: Consolas, Menlo, Monaco, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", "Courier New", Courier, monospace;
+	font-size: 14px;
+	line-height: 1.375;
+	direction: ltr;
+	text-align: left;
+	white-space: pre;
+	word-spacing: normal;
+	word-break: normal;
+
+	-moz-tab-size: 4;
+	-o-tab-size: 4;
+	tab-size: 4;
+
+	-webkit-hyphens: none;
+	-moz-hyphens: none;
+	-ms-hyphens: none;
+	hyphens: none;
+	background: #faf8f5;
+	color: #728fcb;
+}
+
+pre > code[class*="language-"] {
+	font-size: 1em;
+}
+/* 
+pre[class*="language-"]::-moz-selection, pre[class*="language-"] ::-moz-selection,
+code[class*="language-"]::-moz-selection, code[class*="language-"] ::-moz-selection {
+	text-shadow: none;
+	background: #faf8f5;
+}
+
+pre[class*="language-"]::selection, pre[class*="language-"] ::selection,
+code[class*="language-"]::selection, code[class*="language-"] ::selection {
+	text-shadow: none;
+	background: #faf8f5;
+} */
+
+/* Code blocks */
+pre[class*="language-"] {
+	padding: 1em;
+	margin: .5em 0;
+	overflow: auto;
+}
+
+/* Inline code */
+:not(pre) > code[class*="language-"] {
+	padding: .1em;
+	border-radius: .3em;
+}
+
+.token.comment,
+.token.prolog,
+.token.doctype,
+.token.cdata {
+	color: #b6ad9a;
+}
+
+.token.punctuation {
+	color: #b6ad9a;
+}
+
+.token.namespace {
+	opacity: .7;
+}
+
+.token.tag,
+.token.operator,
+.token.number {
+	color: #063289;
+}
+
+.token.property,
+.token.function {
+	color: #b29762;
+}
+
+.token.tag-id,
+.token.selector,
+.token.atrule-id {
+	color: #2d2006;
+}
+
+code.language-javascript,
+.token.attr-name {
+	color: #896724;
+}
+
+code.language-css,
+code.language-scss,
+.token.boolean,
+.token.string,
+.token.entity,
+.token.url,
+.language-css .token.string,
+.language-scss .token.string,
+.style .token.string,
+.token.attr-value,
+.token.keyword,
+.token.control,
+.token.directive,
+.token.unit,
+.token.statement,
+.token.regex,
+.token.atrule {
+	color: #728fcb;
+}
+
+.token.placeholder,
+.token.variable {
+	color: #93abdc;
+}
+
+.token.deleted {
+	text-decoration: line-through;
+}
+
+.token.inserted {
+	border-bottom: 1px dotted #2d2006;
+	text-decoration: none;
+}
+
+.token.italic {
+	font-style: italic;
+}
+
+.token.important,
+.token.bold {
+	font-weight: bold;
+}
+
+.token.important {
+	color: #896724;
+}
+
+.token.entity {
+	cursor: help;
+}
+
+pre > code.highlight {
+	outline: .4em solid #896724;
+	outline-offset: .4em;
+}
+
+/* overrides color-values for the Line Numbers plugin
+ * http://prismjs.com/plugins/line-numbers/
+ */
+.line-numbers.line-numbers .line-numbers-rows {
+	border-right-color: #ece8de;
+}
+
+.line-numbers .line-numbers-rows > span:before {
+	color: #cdc4b1;
+}
+
+/* overrides color-values for the Line Highlight plugin
+ * http://prismjs.com/plugins/line-highlight/
+ */
+.line-highlight.line-highlight {
+	background: rgba(45, 32, 6, 0.2);
+	background: -webkit-linear-gradient(left, rgba(45, 32, 6, 0.2) 70%, rgba(45, 32, 6, 0));
+	background: linear-gradient(to right, rgba(45, 32, 6, 0.2) 70%, rgba(45, 32, 6, 0));
+}
+/* prism end */
+
+body {
+  font-family: 'IBM Plex Serif', serif;
+}
+
+.post-body p, pre {
+  @apply mb-4 leading-loose;
+}
+
+.post-body p > code {
+  @apply bg-gray-100 text-gray-900 text-sm p-1 rounded;
+}
+
+.post-body a {
+  @apply underline;
+}
+
+.post-body h1, h2, h3, h4, h5, h6 {
+  @apply mt-12 mb-6 font-medium;
+}
+
+.post-body h2 {
+  @apply text-3xl;
+}
+
+.post-body h3 {
+  @apply text-2xl;
+}
+
+.post-body h4 {
+  @apply text-xl;
+}
+
+.post-body a img {
+  display: inline-block;
+}
+
+.post-body img {
+  @apply max-w-full inline-block my-8 ;
+}
+
+.post-body blockquote {
+  @apply border-l-8 border-gray-300 pl-4 my-12;
+}