initial commit

.eslintrc.yml

@@ -0,0 +1,27 @@
+root: true
+env:
+  browser: true
+  es2020: true
+  node: true
+parser: '@typescript-eslint/parser'
+parserOptions:
+  sourceType: module
+  ecmaVersion: latest
+plugins: [svelte3, '@typescript-eslint']
+extends:
+  - eslint:recommended
+  - plugin:@typescript-eslint/recommended
+overrides:
+  - files: ['*.svelte']
+    processor: svelte3/svelte3
+settings:
+  svelte3/typescript: true
+rules:
+  indent: [error, 2, SwitchCase: 1]
+  '@typescript-eslint/quotes': [error, backtick, avoidEscape: true]
+  semi: [error, never]
+  linebreak-style: [error, unix]
+  no-console: [error, allow: [warn, error]]
+  no-var: error
+  # allow triple slash for typescript file referencing https://git.io/JCeqO
+  spaced-comment: [error, always, { markers: [/] }]

.gitignore

@@ -0,0 +1,10 @@
+# dependencies
+node_modules
+
+# production build
+.svelte-kit
+build
+package
+
+# deploy config
+.netlify

.pre-commit-config.yaml

@@ -0,0 +1,36 @@
+ci:
+  autoupdate_schedule: quarterly
+
+default_install_hook_types: [pre-commit, commit-msg]
+
+repos:
+  - repo: https://github.com/pre-commit/pre-commit-hooks
+    rev: v4.0.1
+    hooks:
+      - id: check-case-conflict
+      - id: check-symlinks
+      - id: check-yaml
+      - id: destroyed-symlinks
+      - id: double-quote-string-fixer
+      - id: end-of-file-fixer
+      - id: forbid-new-submodules
+      - id: mixed-line-ending
+      - id: trailing-whitespace
+
+  - repo: https://github.com/pre-commit/mirrors-prettier
+    rev: v2.3.2
+    hooks:
+      - id: prettier
+        args: [--write] # edit files in-place
+        additional_dependencies:
+          - prettier
+          - prettier-plugin-svelte
+          - svelte
+
+  - repo: https://github.com/codespell-project/codespell
+    rev: v2.1.0
+    hooks:
+      - id: codespell
+        stages: [commit, commit-msg]
+        exclude: yarn.lock
+        args: [--ignore-words-list, 'te,ba,nd']

.prettierrc.yml

@@ -0,0 +1,6 @@
+semi: false
+singleQuote: true
+overrides:
+  - files: '*.svelte'
+    options:
+      printWidth: 90

license

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2021 Janosh Riebesell
+
+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 above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+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.

netlify.toml

@@ -0,0 +1,7 @@
+[build]
+command = "yarn build"
+publish = "build"
+
+[build.environment]
+NODE_VERSION = "18.0.0"
+YARN_VERSION = "1.22.10"

package.json

@@ -0,0 +1,51 @@
+{
+  "name": "periodic-table",
+  "description": "Periodic table of elements written in Svelte",
+  "author": "Janosh Riebesell <janosh.riebesell@gmail.com>",
+  "homepage": "https://ptable-elements.netlify.app",
+  "repository": "https://github.com/janosh/periodic-table",
+  "license": "MIT",
+  "version": "0.1.8",
+  "type": "module",
+  "svelte": "PeriodicTable.svelte",
+  "bugs": "https://github.com/janosh/periodic-table/issues",
+  "scripts": {
+    "dev": "svelte-kit dev",
+    "build": "svelte-kit build",
+    "preview": "svelte-kit preview",
+    "package": "svelte-kit package",
+    "serve": "yarn build && yarn preview",
+    "check": "svelte-check"
+  },
+  "devDependencies": {
+    "@sveltejs/adapter-static": "^1.0.0-next.32",
+    "@sveltejs/kit": "^1.0.0-next.345",
+    "@typescript-eslint/eslint-plugin": "^5.26.0",
+    "@typescript-eslint/parser": "^5.26.0",
+    "eslint": "^8.16.0",
+    "eslint-plugin-svelte3": "^4.0.0",
+    "hastscript": "^7.0.2",
+    "prettier": "^2.6.2",
+    "prettier-plugin-svelte": "^2.7.0",
+    "rehype-autolink-headings": "^6.1.1",
+    "rehype-slug": "^5.0.1",
+    "svelte": "^3.48.0",
+    "svelte-check": "^2.7.1",
+    "svelte-github-corner": "^0.1.0",
+    "svelte-preprocess": "^4.10.6",
+    "svelte2tsx": "^0.5.10",
+    "typescript": "^4.7.2",
+    "vite": "^2.9.9"
+  },
+  "keywords": [
+    "svelte",
+    "periodic table",
+    "chemistry",
+    "data viz",
+    "plotting",
+    "component"
+  ],
+  "publishConfig": {
+    "access": "public"
+  }
+}

readme.md

@@ -0,0 +1,36 @@
+<p align="center">
+  <img src="static/favicon.svg" alt="Svelte Periodic Table" height=150>
+</p>
+
+# Svelte Periodic Table
+
+[![Netlify Status](https://api.netlify.com/api/v1/badges/0238699e-17a8-4423-85de-a5ca30baff0d/deploy-status)](https://app.netlify.com/sites/periodic-table/deploys)
+
+## Usage
+
+Copy the `src/lib/` folder into your Svelte project and import the `PeriodicTable` component:
+
+```svelte
+<script>
+  import PeriodicTable from 'src/components/PeriodicTable.svelte'
+</script>
+
+<PeriodicTable />
+```
+
+## Props
+
+Full list of props/bindable variables for this component:
+
+- `showNames` (`boolean`, default: `true`): Whether to show element names in small text below the symbol.
+
+## Want to contribute?
+
+Clone the repo, install dependencies and start the dev server to try out your changes.
+
+```sh
+git clone https://github.com/janosh/periodic-table
+cd periodic-table
+yarn
+yarn dev
+```

src/app.css

@@ -0,0 +1,70 @@
+:root {
+  --page-bg: #090019;
+  --diatomic-nonmetal-bg-color: #ff8c00;
+  --noble-gas-bg-color: darkorchid;
+  --alkali-metal-bg-color: darkgreen;
+  --alkaline-earth-metal-bg-color: darkslateblue;
+  --metalloid-bg-color: darkgoldenrod;
+  --polyatomic-nonmetal-bg-color: brown;
+  --transition-metal-bg-color: teal;
+  --post-transition-metal-bg-color: #938d4a;
+  --lanthanide-bg-color: #58748e;
+  --actinide-bg-color: cornflowerblue;
+  --experimental-bg-color: gray;
+}
+body {
+  background: var(--page-bg);
+  padding: 4em;
+  font-family: -apple-system, BlinkMacSystemFont, Roboto, sans-serif;
+  margin: auto;
+  color: #eee;
+  line-height: 3ex;
+}
+/* outer div = hydration target */
+body > div {
+  display: flex;
+  margin: auto;
+}
+ul li {
+  margin: 1ex 0;
+}
+a {
+  color: cornflowerblue;
+  text-decoration: none;
+}
+a:hover {
+  color: orange;
+}
+code {
+  overflow-wrap: break-word;
+  padding: 1pt 3pt;
+  border-radius: 3pt;
+  font-size: 1.3em;
+  background-color: rgba(255, 255, 255, 0.15);
+}
+pre code {
+  background-color: transparent;
+}
+pre {
+  border-radius: 1ex;
+  font-size: 0.7em;
+}
+blockquote {
+  border-left: 3pt solid cornflowerblue;
+  padding: 1px 8pt;
+  background: rgba(255, 255, 255, 0.2);
+  margin: 1em 0;
+}
+
+:where(h1, h2, h3, h4, h5, h6) {
+  scroll-margin-top: 100px;
+}
+/* style heading anchors added by rehype-autolink-headings, see svelte.config.js */
+:where(h2, h3, h4, h5, h6) a[aria-hidden='true'] {
+  transition: 0.3s;
+  margin-left: 4pt;
+  opacity: 0;
+}
+:where(h2, h3, h4, h5, h6):hover a[aria-hidden='true'] {
+  opacity: 1;
+}

src/app.d.ts

@@ -0,0 +1 @@
+/// <reference types="@sveltejs/kit" />

src/app.html

@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <title>Svelte Periodic Table</title>
+    <meta name="author" content="Janosh Riebesell" />
+    <meta
+      name="description"
+      content="Interactive periodic table of elements written in Svelte"
+    />
+
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width,initial-scale=1" />
+
+    <link rel="icon" href="/favicon.svg" />
+    <link rel="stylesheet" href="/prism-vsc-dark-plus.css" />
+
+    %sveltekit.head%
+  </head>
+
+  <body>
+    <svg style="display: none">
+      <!-- https://primer.style/octicons/link-16 -->
+      <symbol id="octicon-link" fill="currentColor">
+        <path
+          d="M7.775 3.275a.75.75 0 0 0 1.06 1.06l1.25-1.25a2 2 0 1 1 2.83 2.83l-2.5 2.5a2 2 0 0 1-2.83 0 .75.75 0 0 0-1.06 1.06 3.5 3.5 0 0 0 4.95 0l2.5-2.5a3.5 3.5 0 0 0-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 0 1 0-2.83l2.5-2.5a2 2 0 0 1 2.83 0 .75.75 0 0 0 1.06-1.06 3.5 3.5 0 0 0-4.95 0l-2.5 2.5a3.5 3.5 0 0 0 4.95 4.95l1.25-1.25a.75.75 0 0 0-1.06-1.06l-1.25 1.25a2 2 0 0 1-2.83 0z"
+        />
+      </symbol>
+    </svg>
+
+    <div>%sveltekit.body%</div>
+  </body>
+</html>