Initial work on adding passkeys

Mostly starting to get some javascript set up

.editorconfig

@@ -8,6 +8,9 @@ indent_style = space
 insert_final_newline = true
 trim_trailing_whitespace = true
 
+[*.{js,css}]
+indent_size = 2
+
 [*.md]
 trim_trailing_whitespace = false
 

.eslintrc.yml

@@ -1,5 +1,6 @@
 parserOptions:
   sourceType: 'module'
+  ecmaVersion: 8
 extends: 'eslint:recommended'
 env:
   browser: true
@@ -9,7 +10,7 @@ ignorePatterns:
 rules:
   indent:
     - error
-    - 4
+    - 2
   linebreak-style:
     - error
     - unix

.stylelintrc

@@ -1,7 +1,3 @@
 {
-    "extends": ["stylelint-config-standard"],
+    "extends": ["stylelint-config-standard"]
-    "rules": {
-        "indentation": 4,
-        "import-notation": "string"
-    }
 }

resources/css/app.css

@@ -1,6 +1,6 @@
-@import "variables.css";
+@import url('variables.css');
-@import "fonts.css";
+@import url('fonts.css');
-@import "layout.css";
+@import url('layout.css');
-@import "colours.css";
+@import url('colours.css');
-@import "code.css";
+@import url('code.css');
-@import "content.css";
+@import url('content.css');

resources/css/code.css

@@ -1,3 +1,3 @@
 .hljs {
-    border-radius: .5rem;
+  border-radius: .5rem;
 }

resources/css/colours.css

@@ -1,18 +1,18 @@
 body {
-    background-color: var(--color-secondary);
+  background-color: var(--color-secondary);
-    color: var(--color-primary);
+  color: var(--color-primary);
 }
 
 a {
-    color: var(--color-link);
+  color: var(--color-link);
 
-    &:visited {
+  &:visited {
-        color: var(--color-link-visited);
+    color: var(--color-link-visited);
-    }
+  }
 }
 
 #site-header {
-    & a:visited {
+  & a:visited {
-        color: var(--color-link);
+    color: var(--color-link);
-    }
+  }
 }

resources/css/content.css

@@ -1,36 +1,35 @@
-@import "posse.css";
+@import url('h-card.css');
-@import "h-card.css";
 
 .h-entry {
-    border-inline-start: 1px solid var(--color-primary);
+  border-inline-start: 1px solid var(--color-primary);
-    padding-inline-start: .5rem;
+  padding-inline-start: .5rem;
 
-    & .reply-to {
+  & .reply-to {
-        font-style: italic;
+    font-style: italic;
+  }
+
+  & .post-info {
+    & a {
+      text-decoration: none;
     }
+  }
 
-    & .post-info {
+  & .note-metadata {
-        & a {
+    display: flex;
-            text-decoration: none;
+    flex-direction: row;
-        }
+    gap: 1rem;
-    }
+
-
+    & .syndication-links {
-    & .note-metadata {
+      flex-flow: row wrap;
-        display: flex;
+
-        flex-direction: row;
+      & a {
-        gap: 1rem;
+        text-decoration: none;
-
+
-        & .syndication-links {
+        & svg {
-            flex-flow: row wrap;
+          width: 1rem;
-
+          height: 1rem;
-            & a {
-                text-decoration: none;
-
-                & svg {
-                    width: 1rem;
-                    height: 1rem;
-                }
-            }
         }
+      }
     }
+  }
 }

resources/css/fonts.css

@@ -1,10 +1,10 @@
 body {
-    font-family: var(--font-family-body);
+  font-family: var(--font-family-body);
-    font-size: var(--font-size-md);
+  font-size: var(--font-size-md);
 }
 
 code {
-    font-family: var(--font-family-monospace);
+  font-family: var(--font-family-monospace);
 }
 
 h1,
@@ -13,5 +13,5 @@ h3,
 h4,
 h5,
 h6 {
-    font-family: var(--font-family-headings);
+  font-family: var(--font-family-headings);
 }

resources/css/h-card.css

@@ -1,32 +1,32 @@
 .h-card {
+  & .hovercard {
+    display: none;
+    position: absolute;
+    z-index: 100;
+    padding: 1rem;
+    border-radius: 1rem;
+    box-shadow: 0 .5rem .5rem .5rem var(--color-primary-shadow);
+    background-color: var(--color-secondary);
+    width: fit-content;
+    transition: opacity 0.5s ease-in-out;
+    opacity: 0;
+    flex-direction: column;
+    gap: .5rem;
+
+    & .u-photo {
+      max-width: 6rem;
+    }
+
+    & .social-icon {
+      width: 1rem;
+      height: 1rem;
+    }
+  }
+
+  &:hover {
     & .hovercard {
-        display: none;
+      display: flex;
-        position: absolute;
+      opacity: 1;
-        z-index: 100;
-        padding: 1rem;
-        border-radius: 1rem;
-        box-shadow: 0 .5rem .5rem .5rem var(--color-primary-shadow);
-        background-color: var(--color-secondary);
-        width: fit-content;
-        transition: opacity 0.5s ease-in-out;
-        opacity: 0;
-        flex-direction: column;
-        gap: .5rem;
-
-        & .u-photo {
-            max-width: 6rem;
-        }
-
-        & .social-icon {
-            width: 1rem;
-            height: 1rem;
-        }
-    }
-
-    &:hover {
-        & .hovercard {
-            display: flex;
-            opacity: 1;
-        }
     }
+  }
 }

resources/css/layout.css

@@ -1,25 +1,25 @@
 .grid {
-    display: grid;
+  display: grid;
-    grid-template-columns: 5vw 1fr 5vw;
+  grid-template-columns: 5vw 1fr 5vw;
-    grid-template-rows: min-content 1fr min-content;
+  grid-template-rows: min-content 1fr min-content;
-    row-gap: 1rem;
+  row-gap: 1rem;
 }
 
 #site-header {
-    grid-column: 2 / 3;
+  grid-column: 2 / 3;
-    grid-row: 1 / 2;
+  grid-row: 1 / 2;
 }
 
 main {
-    grid-column: 2 / 3;
+  grid-column: 2 / 3;
-    grid-row: 2 / 3;
+  grid-row: 2 / 3;
 }
 
 footer {
-    grid-column: 2 / 3;
+  grid-column: 2 / 3;
-    grid-row: 3 / 4;
+  grid-row: 3 / 4;
 
-    & .iwc-logo {
+  & .iwc-logo {
-        max-width: 85vw;
+    max-width: 85vw;
-    }
+  }
 }

resources/css/posse.css

@@ -1,3 +0,0 @@
-.p-bridgy-twitter-content {
-    display: none;
-}

resources/css/variables.css

@@ -1,22 +1,22 @@
 :root {
-    /* Font Family */
+  /* Font Family */
-    --font-family-headings: "Archer SSm A", "Archer SSm B", serif;
+  --font-family-headings: "Archer SSm A", "Archer SSm B", serif;
-    --font-family-body: "Verlag A", "Verlag B", sans-serif;
+  --font-family-body: "Verlag A", "Verlag B", sans-serif;
-    --font-family-monospace: "Operator Mono SSm A", "Operator Mono SSm B", monospace;
+  --font-family-monospace: "Operator Mono SSm A", "Operator Mono SSm B", monospace;
 
-    /* Font Size */
+  /* Font Size */
-    --font-size-sm: 0.75rem;   /* 12px */
+  --font-size-sm: 0.75rem;   /* 12px */
-    --font-size-base: 1rem;    /* 16px, base */
+  --font-size-base: 1rem;    /* 16px, base */
-    --font-size-md: 1.25rem;   /* 20px */
+  --font-size-md: 1.25rem;   /* 20px */
-    --font-size-lg: 1.5rem;    /* 24px */
+  --font-size-lg: 1.5rem;    /* 24px */
-    --font-size-xl: 1.75rem;   /* 28px */
+  --font-size-xl: 1.75rem;   /* 28px */
-    --font-size-xxl: 2rem;     /* 32px */
+  --font-size-xxl: 2rem;     /* 32px */
-    --font-size-xxxl: 2.25rem; /* 36px */
+  --font-size-xxxl: 2.25rem; /* 36px */
 
-    /* Colours */
+  /* Colours */
-    --color-primary: oklch(36.8% 0.1 125.505);
+  --color-primary: oklch(36.8% 0.1 125.505deg);
-    --color-secondary: oklch(96.3% 0.1 125.505);
+  --color-secondary: oklch(96.3% 0.1 125.505deg);
-    --color-link: oklch(48.09% 0.146 241.41);
+  --color-link: oklch(48.09% 0.146 241.41deg);
-    --color-link-visited: oklch(70.44% 0.21 304.41);
+  --color-link-visited: oklch(70.44% 0.21 304.41deg);
-    --color-primary-shadow: oklch(19.56% 0.054 125.505 / 40%);
+  --color-primary-shadow: oklch(19.56% 0.054 125.505deg / 40%);
 }

resources/js/app.js

@@ -1 +1,10 @@
 import '../css/app.css';
+
+// import { Auth } from './auth.js';
+//
+// let auth = new Auth();
+
+// auth.createCredentials().then((credentials) => {
+//   // eslint-disable-next-line no-console
+//   console.log(credentials);
+// });

resources/js/auth.js

@@ -0,0 +1,36 @@
+class Auth {
+  constructor() {}
+
+  async createCredentials() {
+    const publicKeyCredentialCreationOptions = {
+      challenge: Uint8Array.from(
+        'randomStringFromServer',
+        c => c.charCodeAt(0)
+      ),
+      rp: {
+        id: 'jonnybarnes.localhost',
+        name: 'JB',
+      },
+      user: {
+        id: Uint8Array.from(
+          'UZSL85T9AFC',
+          c => c.charCodeAt(0)
+        ),
+        name: 'jonny@jonnybarnes.uk',
+        displayName: 'Jonny',
+      },
+      pubKeyCredParams: [{alg: -7, type: 'public-key'}],
+      // authenticatorSelection: {
+      //   authenticatorAttachment: 'cross-platform',
+      // },
+      timeout: 60000,
+      attestation: 'direct'
+    };
+
+    return await navigator.credentials.create({
+      publicKey: publicKeyCredentialCreationOptions
+    });
+  }
+}
+
+export { Auth };

resources/views/admin/welcome.blade.php

@@ -51,4 +51,9 @@
     <p>
         Edit your <a href="/admin/bio">bio</a>.
     </p>
+
+    <h2>Passkeys</h2>
+    <p>
+        List passkeys here?
+    </p>
 @stop

webpack.config.js

@@ -6,103 +6,103 @@ const EslintPlugin = require('eslint-webpack-plugin');
 const MiniCssExtractPlugin = require("mini-css-extract-plugin");
 
 const config = {
-    entry: ['./resources/js/app.js'],
+  entry: ['./resources/js/app.js'],
-    output: {
+  output: {
-        path: path.resolve('./public/assets'),
+    path: path.resolve('./public/assets'),
-        filename: 'app.js',
+    filename: 'app.js',
-    },
+  },
-    module: {
+  module: {
-        rules: [{
+    rules: [{
-            test: /\.js$/,
+      test: /\.js$/,
-            exclude: /node_modules/,
+      exclude: /node_modules/,
-            use: {
+      use: {
-                loader: 'babel-loader',
+        loader: 'babel-loader',
-                options: {
+        options: {
-                    presets: [
+          presets: [
-                        ['@babel/preset-env', { targets: "defaults" }]
+            ['@babel/preset-env', { targets: "defaults" }]
-                    ]
+          ]
-                }
+        }
-            }
+      }
-        }]
+    }]
-    },
+  },
-    plugins: [
+  plugins: [
-        new StyleLintPlugin({
+    new StyleLintPlugin({
-            configFile: path.resolve(__dirname + '/.stylelintrc'),
+      configFile: path.resolve(__dirname + '/.stylelintrc'),
-            context: path.resolve(__dirname + '/resources/css'),
+      context: path.resolve(__dirname + '/resources/css'),
-            files: '**/*.css',
+      files: '**/*.css',
-        }),
+    }),
-        new EslintPlugin({
+    new EslintPlugin({
-            context: path.resolve(__dirname + '/resources/js'),
+      context: path.resolve(__dirname + '/resources/js'),
-            files: '**/*.js',
+      files: '**/*.js',
-        }),
+    }),
-        new CompressionPlugin({
+    new CompressionPlugin({
-            filename: "[path][base].br",
+      filename: "[path][base].br",
-            algorithm: "brotliCompress",
+      algorithm: "brotliCompress",
-            test: /\.js$|\.css$/,
+      test: /\.js$|\.css$/,
-            exclude: /.map$/,
+      exclude: /.map$/,
-            compressionOptions: {
+      compressionOptions: {
-                params: {
+        params: {
-                    [zlib.constants.BROTLI_PARAM_QUALITY]: 11,
+          [zlib.constants.BROTLI_PARAM_QUALITY]: 11,
-                },
+        },
-            },
+      },
-        }),
+    }),
-    ]
+  ]
 };
 
 module.exports = (env, argv) => {
-    if (argv.mode === 'development') {
+  if (argv.mode === 'development') {
-        config.devtool = 'eval-source-map';
+    config.devtool = 'eval-source-map';
 
-        config.module.rules.push({
+    config.module.rules.push({
-            test: /\.css$/,
+      test: /\.css$/,
-            exclude: /node_modules/,
+      exclude: /node_modules/,
-            use: [
+      use: [
-                {
+        {
-                    loader: 'style-loader'
+          loader: 'style-loader'
-                },
+        },
-                {
+        {
-                    loader: 'css-loader',
+          loader: 'css-loader',
-                    options: {
+          options: {
-                        sourceMap: true
+            sourceMap: true
-                    }
+        }
-                },
+        },
-                {
+        {
-                    loader: 'postcss-loader',
+          loader: 'postcss-loader',
-                    options: {
+          options: {
-                        postcssOptions: {
+            postcssOptions: {
-                            config: path.resolve(__dirname, 'postcss.config.js'),
+              config: path.resolve(__dirname, 'postcss.config.js'),
-                        },
+            },
-                        sourceMap: true
+            sourceMap: true
-                    }
+          }
-                }
+        }
-            ]
+      ]
-        });
+    });
-    }
+  }
 
-    if (argv.mode === 'production') {
+  if (argv.mode === 'production') {
-        config.module.rules.push({
+    config.module.rules.push({
-            test: /\.css$/,
+      test: /\.css$/,
-            exclude: /node_modules/,
+      exclude: /node_modules/,
-            use: [
+      use: [
-                {
+        {
-                    loader: MiniCssExtractPlugin.loader,
+          loader: MiniCssExtractPlugin.loader,
-                },
+        },
-                {
+        {
-                    loader: 'css-loader',
+          loader: 'css-loader',
-                },
+        },
-                {
+        {
-                    loader: 'postcss-loader',
+          loader: 'postcss-loader',
-                    options: {
+          options: {
-                        postcssOptions: {
+            postcssOptions: {
-                            config: path.resolve(__dirname, 'postcss.config.js'),
+              config: path.resolve(__dirname, 'postcss.config.js'),
-                        },
+            },
-                    }
+          }
-                }
+        }
-            ]
+      ]
-        });
+    });
 
-        config.plugins.push(new MiniCssExtractPlugin({filename: 'app.css'}));
+    config.plugins.push(new MiniCssExtractPlugin({filename: 'app.css'}));
-    }
+  }
 
-    return config;
+  return config;
 };