initial commit

.eslintrc.json

@@ -0,0 +1,22 @@
+{
+  "env": {
+    "browser": true,
+    "es2021": true
+  },
+  "extends": ["plugin:react/recommended", "standard", "prettier"],
+  "parser": "@typescript-eslint/parser",
+  "parserOptions": {
+    "ecmaFeatures": {
+      "jsx": true
+    },
+    "ecmaVersion": 12,
+    "sourceType": "module"
+  },
+  "globals": {
+    "JSX": true
+  },
+  "plugins": ["react", "@typescript-eslint"],
+  "rules": {
+    "react/react-in-jsx-scope": 0
+  }
+}

.gitignore

@@ -0,0 +1,14 @@
+node_modules
+
+.cache
+.vercel
+.output
+
+public/build
+api/_build
+app/tailwind.css
+
+.DS_Store
+
+test-results/
+playwright-report/

.prettierrc.json

@@ -0,0 +1,8 @@
+{
+  "singleQuote": true,
+  "endOfLine": "lf",
+  "tabWidth": 2,
+  "useTabs": false,
+  "trailingComma": "all",
+  "semi": false
+}

.vscode/settings.json

@@ -0,0 +1,4 @@
+{
+  "spellright.language": ["en"],
+  "spellright.documentTypes": ["markdown"]
+}

.vscode/spellright.dict

@@ -0,0 +1,7 @@
+string-utf8
+Vite
+Preact
+Zustand
+clar
+js
+tx

LICENSE-code-snippets.txt

@@ -0,0 +1,26 @@
+Code snippets included in posts on the site are licensed under more permissive terms than general post content.
+Please see LICENSE-posts for the terms regarding general post content.
+
+Code snippets may be used under the terms of the MIT License:
+
+MIT License
+
+Copyright (c) 2022 Hugo Caillard
+
+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.

LICENSE-posts.txt

@@ -0,0 +1,4 @@
+Copyright (c) Hugo Caillard.
+All rights reserved.
+
+(Please see LICENSE-code-snippets for the terms regarding use of code snippets found in posts.)

LICENSE-website.txt

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2022 Hugo Caillard.
+
+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.

README.md

@@ -0,0 +1,32 @@
+# Clearness
+
+Source code and articles for [clearness.dev/](https://www.clearness.dev/)
+
+## Roadmap
+
+- [x] build the blog with remix
+- [x] first series of articles "voting system"
+- [x] og meta and images
+- [ ] open source the "voting" [repo](https://github.com/hugocaillard/clarity-voting-tuto)
+  - [ ] set license
+- [x] analytics with plausible
+- [x] open source blog repo
+- [x] update licenses (inspired by [overreacted](https://github.com/gaearon/overreacted.io))
+- [ ] improve existing "annexes" articles
+- [ ] "build the web3 app" to interact with the voting system
+- [ ] part 2 of "voting system": NFT reward, deployment, tests
+
+## Development
+
+- [Remix Docs](https://remix.run/docs)
+
+To run your Remix app locally, make sure your project's local dependencies are installed:
+
+```sh
+npm install
+```
+Afterwards, start the Remix development server like so:
+
+```sh
+npm run dev
+```

api/index.js

@@ -0,0 +1,5 @@
+const { createRequestHandler } = require("@remix-run/vercel");
+
+module.exports = createRequestHandler({
+  build: require("./_build")
+});

app/app.css

@@ -0,0 +1,70 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+#switch-theme + label:before {
+  content: '🌘';
+}
+#switch-theme:checked + label:before {
+  content: '🌞';
+}
+
+/* a hover animation */
+@media (hover: hover) {
+  a:not([aria-hidden='true']) {
+    --transition-duration: 0.15s;
+    position: relative;
+    transition: color var(--transition-duration) ease-in-out;
+    text-decoration: none;
+  }
+  a:not([aria-hidden='true']):before {
+    content: '';
+    z-index: -1;
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    width: 0%;
+    height: 100%;
+    transition: width var(--transition-duration) ease-in-out;
+  }
+  a:not([aria-hidden='true']):hover::before {
+    width: 100%;
+  }
+}
+
+/* anchor links in markdown aricles */
+article div.prose a[aria-hidden='true'] {
+  position: relative;
+  line-height: inherit;
+  width: 30px;
+  height: 30px;
+}
+
+article div.prose a[aria-hidden='true']:before {
+  content: '🔗';
+  display: none;
+  height: 40px;
+  width: 44px;
+  padding-left: 10px;
+  left: -36px;
+  font-size: 1.2rem;
+  line-height: inherit;
+  position: absolute;
+  background: none;
+}
+article div.prose h1:hover > a[aria-hidden='true']:before,
+article div.prose h2:hover > a[aria-hidden='true']:before,
+article div.prose h3:hover > a[aria-hidden='true']:before,
+article div.prose h4:hover > a[aria-hidden='true']:before,
+article div.prose h5:hover > a[aria-hidden='true']:before,
+article div.prose h6:hover > a[aria-hidden='true']:before {
+  display: block;
+}
+
+/* article images */
+article div.prose img {
+  margin: auto;
+  max-height: 500px;
+  max-width: 100%;
+}

app/components/chapter-toc.tsx

@@ -0,0 +1,31 @@
+import { marked } from 'marked'
+
+import { ChapterInfo } from '~/data/posts'
+import { H2 } from './headings'
+import Link from './link'
+
+export default function ChapterTOC({
+  slug,
+  title,
+  description,
+  posts,
+}: ChapterInfo) {
+  return (
+    <div className="mb-5">
+      <H2 small>{title}</H2>
+      <div
+        className="my-5"
+        dangerouslySetInnerHTML={{ __html: marked(description) }}
+      />
+      <ol className="list-decimal ml-12">
+        {posts
+          .filter(({ wip }) => !wip)
+          .map((post) => (
+            <li key={post.slug} className="text-lg font-medium">
+              <Link to={`/${slug}/${post.slug}`}>{post.title}</Link>
+            </li>
+          ))}
+      </ol>
+    </div>
+  )
+}

app/components/date-string.tsx

@@ -0,0 +1,11 @@
+interface Props {
+  date: string | Date
+  formatter: Intl.DateTimeFormat
+}
+
+export default function DateString(props: Props) {
+  const date =
+    typeof props.date === 'string' ? new Date(props.date) : props.date
+
+  return <span>{props.formatter.format(date)}</span>
+}

app/components/footer.tsx

@@ -0,0 +1,25 @@
+function FooterLink({ href, text }: { href: string; text: string }) {
+  return (
+    <a
+      className="text-blue-700 hover:text-blue-900 dark:text-blue-500 hover:dark:text-blue-300"
+      href={href}
+      target="_blank"
+      rel="noreferrer"
+    >
+      {text}
+    </a>
+  )
+}
+
+export function Footer() {
+  return (
+    <footer className="px-6 border-t border-dashed border-gray-600 py-6 mt-6 text-center">
+      <FooterLink href="https://twitter.com/cohars" text="@Cohars" /> -{' '}
+      <FooterLink
+        href="https://github.com/hugocaillard/clearness"
+        text="GitHub"
+      />{' '}
+      - Copyright - 2022
+    </footer>
+  )
+}

app/components/header.tsx

@@ -0,0 +1,45 @@
+import { H1 } from './headings'
+import Link from './link'
+
+interface HeaderProps {
+  width: string
+}
+
+// lil' bit of scripting to handle theme switching
+const themeScript = `\
+let theme = localStorage.theme === 'dark' || !('theme' in localStorage) && \
+window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';\
+const checkbox = document.getElementById('switch-theme');\
+checkbox.checked = theme === 'dark';\
+checkbox.addEventListener('click', () => {\
+const prev = theme;\
+theme = prev === 'light' ? 'dark' : 'light';\
+localStorage.setItem('theme', theme);\
+document.documentElement.classList.replace(prev, theme);\
+})`
+
+export function Header({ width }: HeaderProps) {
+  return (
+    <header className="sticky mb-6 py-4 border-b border-solid border-gray-400 dark:border-gray-600">
+      <div className={`${width} flex justify-between items-center`}>
+        <H1>
+          <Link to="/">Ӿ Clearness</Link>
+        </H1>
+
+        <div>
+          <input
+            id="switch-theme"
+            name="switch-theme"
+            className="hidden"
+            type="checkbox"
+          />
+          <label
+            className="switch-theme cursor-pointer p-2"
+            htmlFor="switch-theme"
+          />
+        </div>
+      </div>
+      <script dangerouslySetInnerHTML={{ __html: themeScript }} />
+    </header>
+  )
+}

app/components/headings.tsx

@@ -0,0 +1,28 @@
+interface HeadingProps {
+  children: (JSX.Element | string)[] | JSX.Element | string
+  small?: boolean
+}
+
+export function H1({ children }: HeadingProps) {
+  return <h1 className="text-4xl !font-bold mb-2">{children}</h1>
+}
+
+export function H2({ children, small }: HeadingProps) {
+  const className = !small
+    ? 'text-3xl !font-bold leading-10 mb-1'
+    : 'text-xl !font-semibold'
+
+  return <h2 className={className}>{children}</h2>
+}
+
+export function H3({ children }: HeadingProps) {
+  return <h3 className="text-xl !font-semibold">{children}</h3>
+}
+
+export function H4({ children }: HeadingProps) {
+  return (
+    <h4 className="uppercase text-sm text-slate-600 dark:text-slate-400 bold leading-4">
+      {children}
+    </h4>
+  )
+}

app/components/link.tsx

@@ -0,0 +1,21 @@
+import { NavLink as RemixLink, NavLinkProps } from 'remix'
+
+import { cleanClass } from './utils'
+
+export default function Link({ to, children }: NavLinkProps) {
+  return (
+    <RemixLink
+      to={to}
+      prefetch="intent"
+      className={({ isActive }) =>
+        isActive
+          ? `cursor-default`
+          : cleanClass(`text-blue-700 dark:text-blue-500 \
+              hover:text-blue-100 hover:dark:text-blue-800\
+              before:bg-blue-900 dark:before:bg-white`)
+      }
+    >
+      {children}
+    </RemixLink>
+  )
+}