Overhaul my website by just using a template

2024-03-24 17:10:01 +01:00 · 2024-03-24 17:10:01 +01:00 · 992e1a19c0
commit 992e1a19c0
parent a41a3a9751
42 changed files with 517 additions and 797 deletions
--- a/.drone.yml
+++ b/.drone.yml
@ -2,21 +2,11 @@ kind: pipeline
 type: docker
 name: Build & Deploy

-clone:
-  disable: true
-
 steps:
-  - name: Clone
-    image: woodpeckerci/plugin-git
-    settings:
-      recursive: true
-
  - name: Build site
    image: denoland/deno
    commands:
      - deno task build
-    depends_on:
-      - "Clone"

  - name: Deploy to Deno Deploy
    image: git.froth.zone/sam/drone-deno-deploy
@ -25,9 +15,9 @@ steps:
        from_secret: DENO_DEPLOY_TOKEN
    settings:
      project: samme
-      entrypoint: server.ts
+      entrypoint: serve.ts
      production: true
-      include: dist,server.ts,deno.json
+      include: _site,serve.ts,deno.json
      import_map: deno.json
    depends_on:
      - "Build site"
@ -45,7 +35,7 @@ steps:
      password:
        from_secret: PASS
      target_branch: pages
-      pages_directory: dist
+      pages_directory: _site
      copy_contents: true
      user_name: Sam Therapy
      user_email: sam@samtherapy.net
--- a/.editorconfig
+++ b/.editorconfig
@ -1,12 +0,0 @@
-# EditorConfig is awesome: https://EditorConfig.org
-
-# top-most EditorConfig file
-root = true
-
-[*]
-indent_style = space
-indent_size = 2
-end_of_line = lf
-charset = utf-8
-trim_trailing_whitespace = true
-insert_final_newline = true
--- a/.gitignore
+++ b/.gitignore
@ -1,88 +1,3 @@
-# Lume generated site
-dist/
-
-# DS Store
-.DS_Store
-._.DS_Store
-**/.DS_Store
-**/._.DS_Store
-
-# Logs
-logs
-*.log
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
-
-# Runtime data
-pids
-*.pid
-*.seed
-*.pid.lock
-
-# Directory for instrumented libs generated by jscoverage/JSCover
-lib-cov
-
-# Coverage directory used by tools like istanbul
-coverage
-
-# nyc test coverage
-.nyc_output
-
-# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
-.grunt
-
-# Bower dependency directory (https://bower.io/)
-bower_components
-
-# node-waf configuration
-.lock-wscript
-
-# Compiled binary addons (https://nodejs.org/api/addons.html)
-build/Release
-
-# Dependency directories
-node_modules/
-jspm_packages/
-
-# TypeScript v1 declaration files
-typings/
-
-# Optional npm cache directory
-.npm
-
-# Optional eslint cache
-.eslintcache
-
-# Optional REPL history
-.node_repl_history
-
-# Output of 'npm pack'
-*.tgz
-
-# Yarn Integrity file
-.yarn-integrity
-
-# dotenv environment variables file
-.env
-
-# parcel-bundler cache (https://parceljs.org/)
-.cache
-
-# next.js build output
-.next
-
-# nuxt.js build output
-.nuxt
-
-# vuepress build output
-.vuepress/dist
-
-# Serverless directories
-.serverless
-
-# FuseBox cache
-.fusebox/
-
-# Snyk
-.dccache
+_site
+deno.lock
+_cache
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@ -1,11 +0,0 @@
-{
-  "deno.enable": true,
-  "deno.lint": true,
-  "deno.unstable": true,
-  "[typescript]": {
-    "editor.defaultFormatter": "denoland.vscode-deno"
-  },
-  "[typescriptreact]": {
-    "editor.defaultFormatter": "denoland.vscode-deno"
-  }
-}
--- a/123
+++ b/123
@ -1,110 +1,21 @@
-Creative Commons Legal Code CC0 1.0 Universal Official translations of this
-legal tool are available
+MIT License

-    CREATIVE COMMONS CORPORATION IS NOT A LAW FIRM AND DOES NOT PROVIDE LEGAL
-    SERVICES. DISTRIBUTION OF THIS DOCUMENT DOES NOT CREATE AN ATTORNEY-CLIENT
-    RELATIONSHIP. CREATIVE COMMONS PROVIDES THIS INFORMATION ON AN "AS-IS"
-    BASIS. CREATIVE COMMONS MAKES NO WARRANTIES REGARDING THE USE OF THIS
-    DOCUMENT OR THE INFORMATION OR WORKS PROVIDED HEREUNDER, AND DISCLAIMS
-    LIABILITY FOR DAMAGES RESULTING FROM THE USE OF THIS DOCUMENT OR THE
-    INFORMATION OR WORKS PROVIDED HEREUNDER. 
+Copyright (c) 2024 Óscar Otero

-Statement of Purpose
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:

-The laws of most jurisdictions throughout the world automatically confer
-exclusive Copyright and Related Rights (defined below) upon the creator and
-subsequent owner(s) (each and all, an "owner") of an original work of
-authorship and/or a database (each, a "Work").
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.

-Certain owners wish to permanently relinquish those rights to a Work for the
-purpose of contributing to a commons of creative, cultural and scientific works
-("Commons") that the public can reliably and without fear of later claims of
-infringement build upon, modify, incorporate in other works, reuse and
-redistribute as freely as possible in any form whatsoever and for any purposes,
-including without limitation commercial purposes. These owners may contribute
-to the Commons to promote the ideal of a free culture and the further
-production of creative, cultural and scientific works, or to gain reputation or
-greater distribution for their Work in part through the use and efforts of
-others.
-
-For these and/or other purposes and motivations, and without any expectation of
-additional consideration or compensation, the person associating CC0 with a
-Work (the "Affirmer"), to the extent that he or she is an owner of Copyright
-and Related Rights in the Work, voluntarily elects to apply CC0 to the Work and
-publicly distribute the Work under its terms, with knowledge of his or her
-Copyright and Related Rights in the Work and the meaning and intended legal
-effect of CC0 on those rights.
-
-1. Copyright and Related Rights. A Work made available under CC0 may be
-protected by copyright and related or neighboring rights ("Copyright and
-Related Rights"). Copyright and Related Rights include, but are not limited to,
-the following:
-
-    the right to reproduce, adapt, distribute, perform, display, communicate,
-    and translate a Work; moral rights retained by the original author(s)
-    and/or performer(s); publicity and privacy rights pertaining to a person's
-    image or likeness depicted in a Work; rights protecting against unfair
-    competition in regards to a Work, subject to the limitations in paragraph
-    4(a), below; rights protecting the extraction, dissemination, use and reuse
-    of data in a Work; database rights (such as those arising under Directive
-    96/9/EC of the European Parliament and of the Council of 11 March 1996 on
-    the legal protection of databases, and under any national implementation
-    thereof, including any amended or successor version of such directive); and
-    other similar, equivalent or corresponding rights throughout the world
-    based on applicable law or treaty, and any national implementations
-    thereof.
-
-2. Waiver. To the greatest extent permitted by, but not in contravention of,
-applicable law, Affirmer hereby overtly, fully, permanently, irrevocably and
-unconditionally waives, abandons, and surrenders all of Affirmer's Copyright
-and Related Rights and associated claims and causes of action, whether now
-known or unknown (including existing as well as future claims and causes of
-action), in the Work (i) in all territories worldwide, (ii) for the maximum
-duration provided by applicable law or treaty (including future time
-extensions), (iii) in any current or future medium and for any number of
-copies, and (iv) for any purpose whatsoever, including without limitation
-commercial, advertising or promotional purposes (the "Waiver"). Affirmer makes
-the Waiver for the benefit of each member of the public at large and to the
-detriment of Affirmer's heirs and successors, fully intending that such Waiver
-shall not be subject to revocation, rescission, cancellation, termination, or
-any other legal or equitable action to disrupt the quiet enjoyment of the Work
-by the public as contemplated by Affirmer's express Statement of Purpose.
-
-3. Public License Fallback. Should any part of the Waiver for any reason be
-judged legally invalid or ineffective under applicable law, then the Waiver
-shall be preserved to the maximum extent permitted taking into account
-Affirmer's express Statement of Purpose. In addition, to the extent the Waiver
-is so judged Affirmer hereby grants to each affected person a royalty-free, non
-transferable, non sublicensable, non exclusive, irrevocable and unconditional
-license to exercise Affirmer's Copyright and Related Rights in the Work (i) in
-all territories worldwide, (ii) for the maximum duration provided by applicable
-law or treaty (including future time extensions), (iii) in any current or
-future medium and for any number of copies, and (iv) for any purpose
-whatsoever, including without limitation commercial, advertising or promotional
-purposes (the "License"). The License shall be deemed effective as of the date
-CC0 was applied by Affirmer to the Work. Should any part of the License for any
-reason be judged legally invalid or ineffective under applicable law, such
-partial invalidity or ineffectiveness shall not invalidate the remainder of the
-License, and in such case Affirmer hereby affirms that he or she will not (i)
-exercise any of his or her remaining Copyright and Related Rights in the Work
-or (ii) assert any associated claims and causes of action with respect to the
-Work, in either case contrary to Affirmer's express Statement of Purpose.
-
-4. Limitations and Disclaimers.
-
-    No trademark or patent rights held by Affirmer are waived, abandoned,
-    surrendered, licensed or otherwise affected by this document.  Affirmer
-    offers the Work as-is and makes no representations or warranties of any
-    kind concerning the Work, express, implied, statutory or otherwise,
-    including without limitation warranties of title, merchantability, fitness
-    for a particular purpose, non infringement, or the absence of latent or
-    other defects, accuracy, or the present or absence of errors, whether or
-    not discoverable, all to the greatest extent permissible under applicable
-    law.  Affirmer disclaims responsibility for clearing rights of other
-    persons that may apply to the Work or any use thereof, including without
-    limitation any person's Copyright and Related Rights in the Work. Further,
-    Affirmer disclaims responsibility for obtaining any necessary consents,
-    permissions or other rights required for any use of the Work.  Affirmer
-    understands and acknowledges that Creative Commons is not a party to this
-    document and has no duty or obligation with respect to this CC0 or use of
-    the Work.
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
--- a/README.md
+++ b/README.md
@ -0,0 +1,27 @@
+# Simple Me
+
+[Lume](https://lume.land) theme to create a Linktree alternative.
+
+## Install as a remote theme
+
+The **fastest and easiest** way to use this theme is by importing it as a remote
+module. It allows to create a blog in seconds and update it at any time just by
+changing the version number in the import URL. Just add the following code to
+your `_config.ts` file:
+
+```ts
+import lume from "lume/mod.ts";
+import me from "https://deno.land/x/lume_theme_simple_me/mod.ts";
+
+const site = lume();
+
+site.use(me());
+
+export default site;
+```
+
+## Use it as a base template
+
+To use this theme as a base template for a more customized site, clone this repo
+and edit the [_config.ts](./_config.ts) file. The source files are in the
+[src](./src/) folder.
--- a/_cms.ts
+++ b/_cms.ts
@ -0,0 +1,82 @@
+import lumeCMS from "lume/cms.ts";
+
+const cms = lumeCMS();
+
+cms.document(
+  "home: The profile page",
+  "src:index.yml",
+  [
+    {
+      type: "hidden",
+      name: "layout",
+      value: "layouts/home.vto",
+    },
+    {
+      type: "object",
+      name: "header",
+      description: "The header of the page",
+      fields: [
+        "title: text",
+        "description: markdown",
+        "avatar: file",
+      ],
+    },
+    {
+      type: "object",
+      name: "metas",
+      description: "Data for the meta tags",
+      fields: [
+        "title: text",
+        "description: text",
+        "image: text",
+        "twitter: text",
+        "generator: checkbox",
+      ],
+    },
+    {
+      name: "links",
+      type: "object-list",
+      description: "The list of links.",
+      fields: [
+        {
+          type: "text",
+          name: "type",
+          description:
+            "The type of link. It uses the icons and colors from https://simpleicons.org/. For example, 'github', 'instagram', etc.",
+          options: [
+            "github",
+            "instagram",
+            "linkedin",
+            "x",
+            "youtube",
+            "facebook",
+            "tiktok",
+            "patreon",
+            "paypal",
+            "mastodon",
+            "discord",
+            "spotify",
+            "opencollective",
+            "twitch",
+          ],
+        },
+        "text: text",
+        "href: text",
+      ],
+    },
+    {
+      name: "extra_head",
+      type: "code",
+      description: "Extra content to include in the <head> tag",
+    },
+    {
+      name: "footer",
+      type: "markdown",
+      description: "The footer of the page",
+    },
+  ],
+);
+
+cms.upload("uploads: Uploaded files", "src:*{.jpg,.svg}");
+
+export default cms;
--- a/_config.ts
+++ b/_config.ts
@ -1,60 +1,11 @@
-import lume from "lume/mod.ts"
-
-// Stable plugins
-import attributes from "lume/plugins/attributes.ts"
-import codeHighlight from "lume/plugins/code_highlight.ts"
-import esbuild from "lume/plugins/esbuild.ts"
-import jsx from "lume/plugins/jsx_preact.ts"
-import katex from "lume/plugins/katex.ts"
-import lightningcss from "lume/plugins/lightningcss.ts"
-import metas from "lume/plugins/metas.ts"
-import minifyHTML from "lume/plugins/minify_html.ts"
-import mdx from "lume/plugins/mdx.ts"
-import pug from "lume/plugins/pug.ts"
-import remark from "lume/plugins/remark.ts"
-import sass from "lume/plugins/sass.ts"
-import sitemap from "lume/plugins/sitemap.ts"
-import sourceMaps from "lume/plugins/source_maps.ts"
-import svgo from "lume/plugins/svgo.ts"
-
-// Experimental plugins
-
-// Custom plugins
-import toml from "./custom/toml/toml.ts"
+import lume from "lume/mod.ts";
+import plugins from "./plugins.ts";

 const site = lume({
  src: "./src",
-  dest: "./dist",
-  location: new URL("https://samtherapy.net"),
-})
+  location: new URL("https://samtherapy.net")
+});

-site
-  .copy("static", ".")
-  .copy("static/.well-known", ".well-known")
-  .copy(".domains")
-  .loadData([".toml"], toml)
-  .use(attributes())
-  .use(codeHighlight())
-  .use(katex())
-  .use(metas())
-  .use(jsx())
-  .use(mdx())
-  .use(remark())
-  .use(pug())
-  .use(sitemap())
-  .use(svgo())
-  .remoteFile(
-    "_includes/styles/external/nord.min.css",
-    "https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.6.0/build/styles/nord.min.css",
-  )
-  .use(esbuild({
-    extensions: [".ts", ".js"],
-  }))
-  .use(lightningcss())
-  .use(sass())
-  .use(minifyHTML())
-  .use(sourceMaps({
-    sourceContent: true,
-  }))
+site.use(plugins());

-export default site
+export default site;
--- a/custom/toml/toml.ts
+++ b/custom/toml/toml.ts
@ -1,7 +0,0 @@
-import { parse } from "std/encoding/toml.ts"
-
-
-export default async function toml(path: string | URL) {
-  const content = await Deno.readTextFile(path)
-  return parse(content)
-}
--- a/deno.json
+++ b/deno.json
@ -1,42 +1,18 @@
 {
+  "imports": {
+    "lume/": "https://deno.land/x/lume@v2.1.2/"
+  },
  "tasks": {
-    "lume": "echo \"import 'lume/cli.ts'\" | deno run --unstable -A -",
+    "lume": "echo \"import 'lume/cli.ts'\" | deno run -A -",
    "build": "deno task lume",
    "serve": "deno task lume -s"
  },
-  "lock": false,
  "compilerOptions": {
-    "jsx": "react-jsx",
-    "jsxImportSource": "npm:preact",
-    "lib": [
-      "dom",
-      "dom.iterable",
-      "dom.asynciterable",
-      "deno.ns"
+    "types": [
+      "lume/types.ts"
    ]
  },
-  "imports": {
-    "lume/": "https://deno.land/x/lume@v1.16.2/",
-    "experimental/": "https://raw.githubusercontent.com/lumeland/experimental-plugins/main/",
-    "std/": "https://deno.land/std/"
-  },
-  "lint": {
-    "files": {
-      "exclude": [
-        "src/_includes/styles/external/",
-        "dist/"
-      ]
-    }
-  },
-  "fmt": {
-    "options": {
-      "semiColons": false
-    },
-    "files": {
-      "exclude": [
-        "src/_includes/styles/external/",
-        "dist"
-      ]
-    }
-  }
+  "exclude": [
+    "./_site"
+  ]
 }
--- a/mod.ts
+++ b/mod.ts
@ -0,0 +1,25 @@
+import plugins from "./plugins.ts";
+
+import "lume/types.ts";
+
+export default function () {
+  return (site: Lume.Site) => {
+    // Configure the site
+    site.use(plugins());
+
+    // Add remote files
+    const files = [
+      "_includes/css/header.css",
+      "_includes/css/link.css",
+      "_includes/layouts/base.vto",
+      "index.yml",
+      "styles.css",
+      "favicon.svg",
+      "avatar.jpg",
+    ];
+
+    for (const file of files) {
+      site.remoteFile(file, import.meta.resolve(`./src/${file}`));
+    }
+  };
+}
--- a/plugins.ts
+++ b/plugins.ts
@ -0,0 +1,53 @@
+import "lume/types.ts";
+import favicon from "lume/plugins/favicon.ts"
+import postcss from "lume/plugins/postcss.ts";
+import transformImages from "lume/plugins/transform_images.ts";
+import metas from "lume/plugins/metas.ts";
+import minifyHTML from "lume/plugins/minify_html.ts";
+import svgo from "lume/plugins/svgo.ts";
+import basePath from "lume/plugins/base_path.ts";
+import * as si from "npm:simple-icons@11.9.0";
+import type { SimpleIcon } from "npm:simple-icons@11.9.0";
+import Color from "https://colorjs.io/dist/color.js";
+
+const icons = Object.values(si) as SimpleIcon[];
+
+/** Configure the site */
+export default function () {
+  return (site: Lume.Site) => {
+    site.use(postcss())
+      .use(favicon())
+      .use(metas())
+      .use(svgo())
+      .use(basePath())
+      .mergeKey("extra_head", "stringArray")
+      .use(transformImages())
+      .copy("static", ".")
+      .use(minifyHTML({
+        extensions: [".css", ".html", ".js"]
+      }));
+
+    site.data("icon", (slug?: string) => {
+      if (!slug) return;
+      return icons.find((icon) => icon.slug === slug);
+    });
+
+    site.data("textColor", (hex: string) => {
+      const color = new Color(`#${hex}`);
+      const onWhite = Math.abs(color.contrastWCAG21("white"));
+      const onBlack = Math.abs(color.contrastWCAG21("black"));
+      return (onWhite + 0.5) > onBlack ? "white" : "black";
+    });
+
+    site.data("transformImages", {
+      resize: [300, 300],
+      format: "webp",
+    });
+
+    // Basic CSS Design System
+    site.remoteFile(
+      "_includes/css/ds.css",
+      "https://unpkg.com/@lumeland/ds@0.5.1/ds.css",
+    );
+  };
+}
--- a/serve.ts
+++ b/serve.ts
@ -0,0 +1,24 @@
+import Server from "lume/core/server.ts";
+import expires from "lume/middlewares/expires.ts"
+
+const server = new Server({
+	port: 8000,
+	root: `${Deno.cwd()}/_site`,
+});
+
+// Set Access-Control-Allow-Origin header to allow all origins
+server.use(async (request, next) => {
+	// Here you can modify the request before being passed to next middlewares
+	const response = await next(request);
+
+	response.headers.set('Access-Control-Allow-Origin', '*')
+	// Here you can modify the response before being returned to the previous middleware
+	return response;
+});
+
+
+server.use(expires())
+
+server.start();
+
+console.log("Listening on http://localhost:8000");
--- a/server.ts
+++ b/server.ts
@ -1,30 +0,0 @@
-import Server from "lume/core/server.ts"
-import expires from "lume/middlewares/expires.ts"
-import not_found from "lume/middlewares/not_found.ts"
-
-const port = 8000
-
-const server = new Server({
-  port: port,
-  root: `${Deno.cwd()}/dist`,
-})
-
-server.use(async (request, next) => {
-  // Here you can modify the request before being passed to next middlewares
-  const response = await next(request);
-
-  response.headers.set('Access-Control-Allow-Origin', '*')
-  // Here you can modify the response before being returned to the previous middleware
-  return response;
-});
-
-server.use(expires())
-
-server.use(not_found({
-  root: `${Deno.cwd()}/dist`,
-  page404: "404.html",
-}))
-
-server.start()
-
-console.log(`Listening on http://localhost:${port}`)
--- a/src/.domains
+++ b/src/.domains
@ -1 +0,0 @@
-samtherapy.xyz
--- a/src/404.mdx
+++ b/src/404.mdx
@ -1,12 +0,0 @@
---
-title: Well, how did I get here?
-subtitle: 404 - Not found
-layout: layouts/base.pug
-url: /404.html
---
-
-#### Where does that [highway](/) go to?
-
-```js
-window.location.replace("/");
-```
--- a/src/_data.toml
+++ b/src/_data.toml
@ -1,24 +0,0 @@
-# Site metas from Lume metas plugin
-[metas]
-site = "Sam's site"
-lang = "en"
-description = "The website of a random fishe"
-icon = "img/favicon.png"
-keywords = ["nothing"]
-robots = true
-generator = true
-
-[[menu.left]]
-name = "About"
-url = "/about"
-
-[[menu.left]]
-name = "Contact"
-url = "/contact"
-
-[[menu.right]]
-name = "Site"
-url = "/"
-
-[mergedKeys]
-metas = "object"
--- a/src/_includes/css/header.css
+++ b/src/_includes/css/header.css
@ -0,0 +1,36 @@
+.header {
+  font: var(--font-body);
+  margin-bottom: min(5vh, 100px);
+  color: var(--color-text);
+
+  p {
+    margin: 0;
+    text-wrap: balance;
+
+    + p {
+      margin-top: .5em;
+    }
+  }
+}
+
+.header-avatar {
+  border-radius: 50%;
+  aspect-ratio: 1;
+  object-fit: cover;
+  object-position: center center;
+  width: 200px;
+  max-width: 50vw;
+}
+
+.header-title {
+  font: var(--font-title);
+  letter-spacing: var(--font-title-spacing);
+  margin: .5em 0 0;
+  color: var(--color-base);
+}
+
+.header-theme {
+  position: absolute;
+  top: 1rem;
+  right: 1.5rem;
+}
--- a/src/_includes/css/link.css
+++ b/src/_includes/css/link.css
@ -0,0 +1,35 @@
+.link-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: grid;
+  row-gap: 10px;
+
+  .button {
+    display: flex;
+    font: var(--font-body-bold);
+    transition: transform 200ms;
+    border: solid 1px #00000022;
+
+    &:hover {
+      transform: scale(1.05);
+      box-shadow: 0 2px 10px -8px #0009;
+    }
+  }
+  .button:not(.is-primary) {
+    background: var(--bg-color);
+    color: var(--text-color);
+  }
+
+  svg {
+    width: 20px;
+    height: 20px;
+    fill: currentColor;
+  }
+}
+
+[data-theme="dark"] {
+  .link-list .button {
+    border: solid 1px #FFFFFF16;
+  }
+}
--- a/src/_includes/layouts/base.pug
+++ b/src/_includes/layouts/base.pug
@ -1,14 +0,0 @@
-doctype html
-html(lang=metas.lang)
-  head
-    title= title
-    include meta.pug
-    include nav.pug
-  body
-    header
-      h1= title
-      h2= subtitle
-    main
-      | !{content}
-    footer
-      include footer.html
--- a/src/_includes/layouts/base.vto
+++ b/src/_includes/layouts/base.vto
@ -0,0 +1,60 @@
+<!doctype html>
+
+<html lang="{{ it.lang }}">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>{{ header.title }}</title>
+
+    <meta name="supported-color-schemes" content="light dark">
+    <meta name="theme-color" content="hsl(220, 20%, 100%)" media="(prefers-color-scheme: light)">
+    <meta name="theme-color" content="hsl(220, 20%, 10%)" media="(prefers-color-scheme: dark)">
+    
+    <link rel="stylesheet" href="/styles.css">
+    <link rel="icon" type="image/png" sizes="32x32" href="/favicon.png">
+    <link rel="canonical" href="{{ url |> url(true) }}">
+
+    {{ it.extra_head?.join("\n") }}
+  </head>
+  <body>
+    <main>
+      <header class="header">
+        <script>
+          let theme = localStorage.getItem("theme") || (window.matchMedia("(prefers-color-scheme: dark)").matches
+            ? "dark"
+            : "light");
+          document.documentElement.dataset.theme = theme;
+          function changeTheme() {
+            theme = theme === "dark" ? "light" : "dark";
+            localStorage.setItem("theme", theme);
+            document.documentElement.dataset.theme = theme;
+          }
+        </script>
+        <button class="button header-theme" onclick="changeTheme()">
+          <span class="icon">◐</span>
+        </button>
+
+        <img class="header-avatar" src="{{ header.avatar }}" alt="Avatar" transform-images="webp avif 200@2">
+        <h1 class="header-title">{{ header.title }}</h1>
+        {{ header.description |> md }}
+      </header>
+
+      <ul class="link-list">
+        {{ for link of links }}
+        {{> let i = icon(link.type) }}
+        <li>
+          <a href="{{ link.href }}" rel="me" class="button" style="--bg-color:{{ link.hex || `#${i?.hex || "fff" }` }}; --text-color:{{ link.textColor || textColor(i?.hex || "fff") }}">
+            {{ i?.svg }}
+            {{ link.text }}
+          </a>
+        </li>
+        {{ /for }}
+      </ul>
+    </main>
+    {{ if footer }}
+    <footer>
+      {{ footer |> md }}
+    </footer>
+    {{ /if }}
+  </body>
+</html>
--- a/src/_includes/layouts/footer.html
+++ b/src/_includes/layouts/footer.html
@ -1,10 +0,0 @@
-<!-- This is a template because I need to make raw HTML -->
-<small>
-	Built with <a href="https://lume.land">Lume</a>
-	 •
-	Hosted on <a href="https://deno.com/deploy">Deno Deploy</a> from <a href="https://samtherapy.net">here</a>
-	<em>and</em>
-	<a href="https://pages.git.froth.zone">Codeberg Pages</a> from <a href="https://samtherapy.xyz">here</a>
-	 •
-	<a href="https://git.froth.zone/sam/site">Source</a>
-</small>
--- a/src/_includes/layouts/meta.pug
+++ b/src/_includes/layouts/meta.pug
@ -1,4 +0,0 @@
-meta(charset="utf-8")
-meta(name='viewport', content='width=device-width, initial-scale=1')
-link(rel="shortcut icon", href="/img/favicon.png", type="image/png")
-link(rel="stylesheet", href="/css/style.css")
--- a/src/_includes/layouts/nav.pug
+++ b/src/_includes/layouts/nav.pug
@ -1,9 +0,0 @@
-nav
-  ul(class= "main-nav")
-    each val in menu.left
-      li
-        a(href=val.url)= val.name
-
-    each val in menu.right
-      li(class= "push")
-        a(href=val.url)= val.name
--- a/src/_includes/styles/base.scss
+++ b/src/_includes/styles/base.scss
@ -1,31 +0,0 @@
-@use "styles/sakura.theme";
-
-// Highlight.js theme
-@use "styles/external/nord.min";
-
-
-:root {
-  font-family: -apple-system, BlinkMacSystemFont, "Avenir Next", Avenir, "Nimbus Sans L", Roboto, Noto, "Segoe UI", Arial, Helvetica, "Helvetica Neue", sans-serif;
-}
-
-.row {
-  display: flex;
-}
-
-.column {
-  flex: 50%;
-}
-
-.main-nav {
-  display: flex;
-  list-style: none;
-  max-width: 75%;
-}
-
-nav li {
-  margin: 0.5em;
-}
-
-.push {
-  margin-left: auto;
-}
--- a/src/_includes/styles/external/nord.min.css
+++ b/src/_includes/styles/external/nord.min.css
@ -1 +0,0 @@
-pre code.hljs{display:block;overflow-x:auto;padding:1em}code.hljs{padding:3px 5px}.hljs{background:#2e3440}.hljs,.hljs-subst{color:#d8dee9}.hljs-selector-tag{color:#81a1c1}.hljs-selector-id{color:#8fbcbb;font-weight:700}.hljs-selector-attr,.hljs-selector-class{color:#8fbcbb}.hljs-property,.hljs-selector-pseudo{color:#88c0d0}.hljs-addition{background-color:rgba(163,190,140,.5)}.hljs-deletion{background-color:rgba(191,97,106,.5)}.hljs-built_in,.hljs-class,.hljs-type{color:#8fbcbb}.hljs-function,.hljs-function>.hljs-title,.hljs-title.hljs-function{color:#88c0d0}.hljs-keyword,.hljs-literal,.hljs-symbol{color:#81a1c1}.hljs-number{color:#b48ead}.hljs-regexp{color:#ebcb8b}.hljs-string{color:#a3be8c}.hljs-title{color:#8fbcbb}.hljs-params{color:#d8dee9}.hljs-bullet{color:#81a1c1}.hljs-code{color:#8fbcbb}.hljs-emphasis{font-style:italic}.hljs-formula{color:#8fbcbb}.hljs-strong{font-weight:700}.hljs-link:hover{text-decoration:underline}.hljs-comment,.hljs-quote{color:#4c566a}.hljs-doctag{color:#8fbcbb}.hljs-meta,.hljs-meta .hljs-keyword{color:#5e81ac}.hljs-meta .hljs-string{color:#a3be8c}.hljs-attr{color:#8fbcbb}.hljs-attribute{color:#d8dee9}.hljs-name{color:#81a1c1}.hljs-section{color:#88c0d0}.hljs-tag{color:#81a1c1}.hljs-template-variable,.hljs-variable{color:#d8dee9}.hljs-template-tag{color:#5e81ac}.language-abnf .hljs-attribute{color:#88c0d0}.language-abnf .hljs-symbol{color:#ebcb8b}.language-apache .hljs-attribute{color:#88c0d0}.language-apache .hljs-section{color:#81a1c1}.language-arduino .hljs-built_in{color:#88c0d0}.language-aspectj .hljs-meta{color:#d08770}.language-aspectj>.hljs-title{color:#88c0d0}.language-bnf .hljs-attribute{color:#8fbcbb}.language-clojure .hljs-name{color:#88c0d0}.language-clojure .hljs-symbol{color:#ebcb8b}.language-coq .hljs-built_in{color:#88c0d0}.language-cpp .hljs-meta .hljs-string{color:#8fbcbb}.language-css .hljs-built_in{color:#88c0d0}.language-css .hljs-keyword{color:#d08770}.language-diff .hljs-meta,.language-ebnf .hljs-attribute{color:#8fbcbb}.language-glsl .hljs-built_in{color:#88c0d0}.language-groovy .hljs-meta:not(:first-child),.language-haxe .hljs-meta,.language-java .hljs-meta{color:#d08770}.language-ldif .hljs-attribute{color:#8fbcbb}.language-lisp .hljs-name,.language-lua .hljs-built_in,.language-moonscript .hljs-built_in,.language-nginx .hljs-attribute{color:#88c0d0}.language-nginx .hljs-section{color:#5e81ac}.language-pf .hljs-built_in,.language-processing .hljs-built_in{color:#88c0d0}.language-scss .hljs-keyword,.language-stylus .hljs-keyword{color:#81a1c1}.language-swift .hljs-meta{color:#d08770}.language-vim .hljs-built_in{color:#88c0d0;font-style:italic}.language-yaml .hljs-meta{color:#d08770}
--- a/src/_includes/styles/external/sakura.scss
+++ b/src/_includes/styles/external/sakura.scss
@ -1,264 +0,0 @@
-/* Sakura.css v1.4.1
- * ================
- * Minimal css theme.
- * Project: https://github.com/oxalorg/sakura/
- */
-
-/* Body */
-
-html {
-  font-size: 62.5%; // So that root size becomes 10px
-  font-family: $font-family-base;
-}
-
-body {
-  // $font-size-base must be a rem value
-  font-size: $font-size-base;
-  line-height: 1.618;
-  max-width: 60em;
-  margin: auto;
-  color: $color-text;
-  background-color: $color-bg;
-  padding: 13px;
-}
-
-@media (max-width: 684px) {
-  body {
-    font-size: $font-size-base * 0.85;
-  }
-}
-
-@media (max-width: 382px) {
-  body {
-    font-size: $font-size-base * 0.75;
-  }
-}
-
-@mixin word-wrap() {
-  overflow-wrap: break-word;
-  word-wrap: break-word;
-  -ms-word-break: break-all;
-  word-break: break-word;
-}
-
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
-  line-height: 1.1;
-  font-family: $font-family-heading;
-  font-weight: 700;
-  margin-top: 3rem;
-  margin-bottom: 1.5rem;
-  @include word-wrap;
-}
-
-h1 {
-  font-size: 2.35em
-}
-
-h2 {
-  font-size: 2.00em
-}
-
-h3 {
-  font-size: 1.75em
-}
-
-h4 {
-  font-size: 1.5em
-}
-
-h5 {
-  font-size: 1.25em
-}
-
-h6 {
-  font-size: 1em
-}
-
-p {
-  margin-top: 0px;
-  margin-bottom: 2.5rem;
-}
-
-small,
-sub,
-sup {
-  font-size: 75%;
-}
-
-hr {
-  border-color: $color-blossom;
-}
-
-a {
-  text-decoration: none;
-  color: $color-blossom;
-
-  &:visited {
-    color: darken($color-blossom, 10%);
-  }
-
-  &:hover {
-    color: $color-fade;
-    border-bottom: 2px solid $color-text;
-  }
-
-}
-
-ul {
-  padding-left: 1.4em;
-  margin-top: 0px;
-  margin-bottom: 2.5rem;
-}
-
-li {
-  margin-bottom: 0.4em;
-}
-
-blockquote {
-  margin-left: 0px;
-  margin-right: 0px;
-  padding-left: 1em;
-  padding-top: 0.8em;
-  padding-bottom: 0.8em;
-  padding-right: 0.8em;
-  border-left: 5px solid $color-blossom;
-  margin-bottom: 2.5rem;
-  background-color: $color-bg-alt;
-}
-
-blockquote p {
-  margin-bottom: 0;
-}
-
-img,
-video {
-  height: auto;
-  max-width: 100%;
-  margin-top: 0px;
-  margin-bottom: 2.5rem;
-}
-
-/* Pre and Code */
-
-pre {
-  background-color: $color-bg-alt;
-  display: block;
-  padding: 1em;
-  overflow-x: auto;
-  margin-top: 0px;
-  margin-bottom: 2.5rem;
-  font-size: 0.9em;
-}
-
-code,
-kbd,
-samp {
-  font-size: 0.9em;
-  padding: 0 0.5em;
-  background-color: $color-bg-alt;
-  white-space: pre-wrap;
-}
-
-pre>code {
-  padding: 0;
-  background-color: transparent;
-  white-space: pre;
-  font-size: 1em;
-}
-
-/* Tables */
-
-table {
-  text-align: justify;
-  width: 100%;
-  border-collapse: collapse;
-}
-
-td,
-th {
-  padding: 0.5em;
-  border-bottom: 1px solid $color-bg-alt;
-}
-
-/* Buttons, forms and input */
-
-input,
-textarea {
-  border: 1px solid $color-text;
-
-  &:focus {
-    border: 1px solid $color-blossom;
-  }
-}
-
-textarea {
-  width: 100%;
-}
-
-.button,
-button,
-input[type="submit"],
-input[type="reset"],
-input[type="button"] {
-  display: inline-block;
-  padding: 5px 10px;
-  text-align: center;
-  text-decoration: none;
-  white-space: nowrap;
-
-  background-color: $color-blossom;
-  color: $color-bg;
-  border-radius: 1px;
-  border: 1px solid $color-blossom;
-  cursor: pointer;
-  box-sizing: border-box;
-
-  &[disabled] {
-    cursor: default;
-    opacity: .5;
-  }
-
-  &:focus:enabled,
-  &:hover:enabled {
-    background-color: $color-fade;
-    border-color: $color-fade;
-    color: $color-bg;
-    outline: 0;
-  }
-}
-
-textarea,
-select,
-input {
-  color: $color-text;
-  padding: 6px 10px;
-  /* The 6px vertically centers text on FF, ignored by Webkit */
-  margin-bottom: 10px;
-  background-color: $color-bg-alt;
-  border: 1px solid $color-bg-alt;
-  border-radius: 4px;
-  box-shadow: none;
-  box-sizing: border-box;
-
-  &:focus {
-    border: 1px solid $color-blossom;
-    outline: 0;
-  }
-}
-
-input[type="checkbox"]:focus {
-  outline: 1px dotted $color-blossom;
-}
-
-label,
-legend,
-fieldset {
-  display: block;
-  margin-bottom: .5rem;
-  font-weight: 600;
-}
--- a/src/_includes/styles/sakura.theme.scss
+++ b/src/_includes/styles/sakura.theme.scss
@ -1,15 +0,0 @@
-// Settings for SakuraCSS
-$color-blossom: #ffffff;
-$color-fade: #c9c9c9;
-
-$color-bg: #222222;
-$color-bg-alt: #4a4a4a;
-
-/* $color-text: #dedce5; */
-$color-text: #c9c9c9;
-$font-size-base: 1.8rem;
-
-$font-family-base: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
-$font-family-heading: $font-family-base;
-
-@import "styles/external/sakura";
--- a/src/_includes/types.ts
+++ b/src/_includes/types.ts
--- a/src/about.mdx
+++ b/src/about.mdx
@ -1,29 +0,0 @@
---
-title: About me
-subtitle: This is actually just a list of things I host because I have the personality of a ham sandwich
-layout: layouts/base.pug
---
-
-### An inexhaustible list of everything I host :)
-
- [Status page](https://status.froth.zone)
-
-#### Federated stuff :)
-
-{/* - [Pleroma](https://froth.zone) */}
- [Gitea](https://git.froth.zone)
- [Writefreely](https://blog.froth.zone)
- [PeerTube](https://tube.froth.zone)
- [Funkwhale](https://funkwhale.samtherapy.net)
-{/* - [Fedifeed](https://fedifeed.com) */}
-
-#### Private frontends
-
- [Invidious for YouTube](https://invidious.froth.zone)
- [Nitter for Twitter](https://nitter.bird.froth.zone)
- [Teddit for Reddit](https://teddit.froth.zone)
- [Scribe for Medium](https://scribe.froth.zone)
-
-##### DNS
-
-I also self-host [all of my DNS](https://dns.froth.zone).
--- a/src/avatar.png
+++ b/src/avatar.png
--- a/src/contact.mdx
+++ b/src/contact.mdx
@ -1,14 +0,0 @@
---
-title: Contact me
-subtitle: (NOT RECOMMENDED)
-layout: layouts/base.pug
---
-
-##### List of ways that I may or may not respond to:
-
- Email: `sam @ samtherapy DOT net` \
-If you want to use GPG try using WKD or DANE, the keys should be there.
- XMPP: Same as email
- [Matrix](https://matrix.to/#/@samme:schizo.cafe)
-{/* - [Fediverse](https://froth.zone/sam) (below)
-      - <iframe title="Powered by Fedifeed" allowfullscreen sandbox="allow-top-navigation allow-scripts" width="400" height="800" src="https://fedifeed.com/api/v1/feed?user=sam&instance=https%3A%2F%2Ffroth.zone&instance_type=pleroma&theme=pleroma&size=100&header=true&replies=true&boosts=true"></iframe> */}
--- a/src/css/style.scss
+++ b/src/css/style.scss
@ -1 +0,0 @@
-@use "styles/base.scss";
--- a/src/favicon.svg
+++ b/src/favicon.svg
--- a/src/index.mdx
+++ b/src/index.mdx
@ -1,9 +0,0 @@
---
-title: Sam's Website, 2.0
-subtitle: Under construction since October 2022
-layout: layouts/base.pug
---
-
-#### Hello there.
-
-(this space intentionally left blank)
--- a/src/index.yml
+++ b/src/index.yml
@ -0,0 +1,38 @@
+layout: layouts/base.vto
+header:
+  title: Sam Therapy
+  description: Nowhere ~~and everywhere~~ all at once.
+  avatar: /avatar.webp
+metas:
+  title: =header.title
+  description: =header.description
+  image: =header.avatar
+  generator: true
+  twitter: '@weezerfan94'
+links:
+  - text: Git
+    href: 'https://git.froth.zone/sam'
+    type: forgejo
+  - type: writedotas
+    text: Blog
+    href: 'https://blog.froth.zone/sam'
+  - type: matrix
+    text: Matrix
+    href: 'https://matrix.to/#/@samme:schizo.cafe'
+  - type: xmpp
+    text: 'XMPP (Fallback, please use Matrix if possible)'
+    href: 'xmpp://sam@samtherapy.net'
+  - type: bluesky
+    text: Bluesky
+    href: 'https://bsky.app/profile/samtherapy.net'
+  - type: nostr
+    text: Nostr (I don't like using it but I have one)
+    href: >-
+      https://njump.me/nprofile1qyfhwumn8ghj7mmxve3ksctfdch8qatz9uq3vamnwvaz7tmjv4kxz7fwd4hhxarj9ec82c30qythwumn8ghj7un9d3shjtnxwfhhg6pw0fhkuef0qqs9gymnvuqhq66973gsat9rnh44v9la7qmss2xk747z5tv263zydzq2nr59m
+  - type: activitypub
+    text: Coming back never
+    href: 'https://froth.zone/users/sam'
+footer: >-
+  Powered by [Lume](https://lume.land) &
+  [SimpleMe](https://github.com/lumeland/theme-simple-me) theme
+extra_head: ''
--- a/src/static/.well-known/host-meta
+++ b/src/static/.well-known/host-meta
@ -1 +1,5 @@
-<?xml version="1.0" encoding="UTF-8"?><XRD xmlns="http://docs.oasis-open.org/ns/xri/xrd-1.0"><Link rel="lrdd" template="https://froth.zone/.well-known/webfinger?resource={uri}" type="application/xrd+xml" /></XRD>
+<?xml version="1.0" encoding="UTF-8"?>
+<XRD xmlns="http://docs.oasis-open.org/ns/xri/xrd-1.0">
+  <Link rel="lrdd" template="https://froth.zone/.well-known/webfinger?resource={uri}"
+    type="application/xrd+xml" />
+</XRD>
--- a/src/static/.well-known/host-meta.json
+++ b/src/static/.well-known/host-meta.json
@ -1 +1,12 @@
-{"links":[{"rel":"urn:xmpp:alt-connections:xbosh","href":"https://xmpp.samtherapy.net/http-bind"},{"rel":"urn:xmpp:alt-connections:websocket","href":"wss://xmpp.samtherapy.net/xmpp-websocket"}]}
+{
+  "links": [
+    {
+      "rel": "urn:xmpp:alt-connections:xbosh",
+      "href": "https://xmpp.samtherapy.net/http-bind"
+    },
+    {
+      "rel": "urn:xmpp:alt-connections:websocket",
+      "href": "wss://xmpp.samtherapy.net/xmpp-websocket"
+    }
+  ]
+}
--- a/src/static/.well-known/nostr.json
+++ b/src/static/.well-known/nostr.json
@ -1 +1,14 @@
-{"names":{"sam_ap":"19279f92ae69bfa6df89438eeea81dae0f96af5dc4da225d7e081fc8f44d017a","sam":"5413736701706b45f4510eaca39deb5617fdf0370828d6f57c2a2d8ad4444688"},"relays":{"19279f92ae69bfa6df89438eeea81dae0f96af5dc4da225d7e081fc8f44d017a":["wss://relay.froth.zone"],"5413736701706b45f4510eaca39deb5617fdf0370828d6f57c2a2d8ad4444688":["wss://relay.froth.zone","wss://nostr.getgle.org"]}}
+{
+  "names": {
+    "_": "5413736701706b45f4510eaca39deb5617fdf0370828d6f57c2a2d8ad4444688",
+    "sam": "c044131722a412b01c131380870727a12d90033ed531dc8c7da52d500ab01218"
+  },
+  "relays": {
+    "5413736701706b45f4510eaca39deb5617fdf0370828d6f57c2a2d8ad4444688": [
+      "wss://relay.froth.zone"
+    ],
+    "c044131722a412b01c131380870727a12d90033ed531dc8c7da52d500ab01218": [
+      "wss://relay.mostr.pub"
+    ]
+  }
+}
--- a/src/static/.well-known/webfinger
+++ b/src/static/.well-known/webfinger
@ -1 +1,28 @@
-{"aliases":["https://froth.zone/users/sam","https://fedi.samtherapy.net/users/SamTherapy"],"links":[{"href":"https://froth.zone/users/sam","rel":"http://webfinger.net/rel/profile-page","type":"text/html"},{"href":"https://froth.zone/users/sam","rel":"self","type":"application/activity+json"},{"href":"https://froth.zone/users/sam","rel":"self","type":"application/ld+json; profile=\"https://www.w3.org/ns/activitystreams\""},{"rel":"http://ostatus.org/schema/1.0/subscribe","template":"https://froth.zone/ostatus_subscribe?acct={uri}"}],"subject":"acct:sam@froth.zone"}
+{
+  "aliases": [
+    "https://froth.zone/users/sam",
+    "https://fedi.samtherapy.net/users/SamTherapy"
+  ],
+  "links": [
+    {
+      "href": "https://froth.zone/users/sam",
+      "rel": "http://webfinger.net/rel/profile-page",
+      "type": "text/html"
+    },
+    {
+      "href": "https://froth.zone/users/sam",
+      "rel": "self",
+      "type": "application/activity+json"
+    },
+    {
+      "href": "https://froth.zone/users/sam",
+      "rel": "self",
+      "type": "application/ld+json; profile=\"https://www.w3.org/ns/activitystreams\""
+    },
+    {
+      "rel": "http://ostatus.org/schema/1.0/subscribe",
+      "template": "https://froth.zone/ostatus_subscribe?acct={uri}"
+    }
+  ],
+  "subject": "acct:sam@froth.zone"
+}
--- a/src/static/img/favicon.png
+++ b/src/static/img/favicon.png
--- a/src/styles.css
+++ b/src/styles.css
@ -0,0 +1,39 @@
+/* Lume's design system */
+@import "css/ds.css";
+
+/* Custom components */
+@import "css/header.css";
+@import "css/link.css";
+
+body {
+  display: grid;
+  grid-template-columns: minmax(0, 500px);
+  grid-template-rows: 1fr auto;
+  min-height: 100vh;
+  text-align: center;
+  padding: max(20px, 5vh) 20px;
+  row-gap: 20px;
+  justify-content: center;
+  align-content: center;
+}
+
+main {
+  align-self: center;
+}
+
+footer {
+  font: var(--font-small);
+  color: var(--color-dim);
+
+  > * {
+    margin: 0;
+  }
+
+  > * + * {
+    margin-top: 1em;
+  }
+
+  a {
+    color: inherit;
+  }
+}
				`@ -1 +0,0 @@`
				pre code.hljs{display:block;overflow-x:auto;padding:1em}code.hljs{padding:3px 5px}.hljs{background:#2e3440}.hljs,.hljs-subst{color:#d8dee9}.hljs-selector-tag{color:#81a1c1}.hljs-selector-id{color:#8fbcbb;font-weight:700}.hljs-selector-attr,.hljs-selector-class{color:#8fbcbb}.hljs-property,.hljs-selector-pseudo{color:#88c0d0}.hljs-addition{background-color:rgba(163,190,140,.5)}.hljs-deletion{background-color:rgba(191,97,106,.5)}.hljs-built_in,.hljs-class,.hljs-type{color:#8fbcbb}.hljs-function,.hljs-function>.hljs-title,.hljs-title.hljs-function{color:#88c0d0}.hljs-keyword,.hljs-literal,.hljs-symbol{color:#81a1c1}.hljs-number{color:#b48ead}.hljs-regexp{color:#ebcb8b}.hljs-string{color:#a3be8c}.hljs-title{color:#8fbcbb}.hljs-params{color:#d8dee9}.hljs-bullet{color:#81a1c1}.hljs-code{color:#8fbcbb}.hljs-emphasis{font-style:italic}.hljs-formula{color:#8fbcbb}.hljs-strong{font-weight:700}.hljs-link:hover{text-decoration:underline}.hljs-comment,.hljs-quote{color:#4c566a}.hljs-doctag{color:#8fbcbb}.hljs-meta,.hljs-meta .hljs-keyword{color:#5e81ac}.hljs-meta .hljs-string{color:#a3be8c}.hljs-attr{color:#8fbcbb}.hljs-attribute{color:#d8dee9}.hljs-name{color:#81a1c1}.hljs-section{color:#88c0d0}.hljs-tag{color:#81a1c1}.hljs-template-variable,.hljs-variable{color:#d8dee9}.hljs-template-tag{color:#5e81ac}.language-abnf .hljs-attribute{color:#88c0d0}.language-abnf .hljs-symbol{color:#ebcb8b}.language-apache .hljs-attribute{color:#88c0d0}.language-apache .hljs-section{color:#81a1c1}.language-arduino .hljs-built_in{color:#88c0d0}.language-aspectj .hljs-meta{color:#d08770}.language-aspectj>.hljs-title{color:#88c0d0}.language-bnf .hljs-attribute{color:#8fbcbb}.language-clojure .hljs-name{color:#88c0d0}.language-clojure .hljs-symbol{color:#ebcb8b}.language-coq .hljs-built_in{color:#88c0d0}.language-cpp .hljs-meta .hljs-string{color:#8fbcbb}.language-css .hljs-built_in{color:#88c0d0}.language-css .hljs-keyword{color:#d08770}.language-diff .hljs-meta,.language-ebnf .hljs-attribute{color:#8fbcbb}.language-glsl .hljs-built_in{color:#88c0d0}.language-groovy .hljs-meta:not(:first-child),.language-haxe .hljs-meta,.language-java .hljs-meta{color:#d08770}.language-ldif .hljs-attribute{color:#8fbcbb}.language-lisp .hljs-name,.language-lua .hljs-built_in,.language-moonscript .hljs-built_in,.language-nginx .hljs-attribute{color:#88c0d0}.language-nginx .hljs-section{color:#5e81ac}.language-pf .hljs-built_in,.language-processing .hljs-built_in{color:#88c0d0}.language-scss .hljs-keyword,.language-stylus .hljs-keyword{color:#81a1c1}.language-swift .hljs-meta{color:#d08770}.language-vim .hljs-built_in{color:#88c0d0;font-style:italic}.language-yaml .hljs-meta{color:#d08770}