Initial work on adding passkeys
Mostly starting to get some javascript set up
This commit is contained in:
parent
c7f5190885
commit
cadd58187a
SSH key fingerprint:
SHA256:CTuSlns5U7qlD9jqHvtnVmfYV3Zwl2Z7WnJ4/dqOaL8
18 changed files with 256 additions and 212 deletions
|
|
@ -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
|
||||
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -1,7 +1,3 @@
|
|||
{
|
||||
"extends": ["stylelint-config-standard"],
|
||||
"rules": {
|
||||
"indentation": 4,
|
||||
"import-notation": "string"
|
||||
}
|
||||
"extends": ["stylelint-config-standard"]
|
||||
}
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
Binary file not shown.
|
|
@ -1,6 +1,6 @@
|
|||
@import "variables.css";
|
||||
@import "fonts.css";
|
||||
@import "layout.css";
|
||||
@import "colours.css";
|
||||
@import "code.css";
|
||||
@import "content.css";
|
||||
@import url('variables.css');
|
||||
@import url('fonts.css');
|
||||
@import url('layout.css');
|
||||
@import url('colours.css');
|
||||
@import url('code.css');
|
||||
@import url('content.css');
|
||||
|
|
|
|||
|
|
@ -1,3 +1,3 @@
|
|||
.hljs {
|
||||
border-radius: .5rem;
|
||||
border-radius: .5rem;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,18 +1,18 @@
|
|||
body {
|
||||
background-color: var(--color-secondary);
|
||||
color: var(--color-primary);
|
||||
background-color: var(--color-secondary);
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--color-link);
|
||||
color: var(--color-link);
|
||||
|
||||
&:visited {
|
||||
color: var(--color-link-visited);
|
||||
}
|
||||
&:visited {
|
||||
color: var(--color-link-visited);
|
||||
}
|
||||
}
|
||||
|
||||
#site-header {
|
||||
& a:visited {
|
||||
color: var(--color-link);
|
||||
}
|
||||
& a:visited {
|
||||
color: var(--color-link);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,36 +1,35 @@
|
|||
@import "posse.css";
|
||||
@import "h-card.css";
|
||||
@import url('h-card.css');
|
||||
|
||||
.h-entry {
|
||||
border-inline-start: 1px solid var(--color-primary);
|
||||
padding-inline-start: .5rem;
|
||||
border-inline-start: 1px solid var(--color-primary);
|
||||
padding-inline-start: .5rem;
|
||||
|
||||
& .reply-to {
|
||||
font-style: italic;
|
||||
& .reply-to {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
& .post-info {
|
||||
& a {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
& .post-info {
|
||||
& a {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
& .note-metadata {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 1rem;
|
||||
|
||||
& .syndication-links {
|
||||
flex-flow: row wrap;
|
||||
|
||||
& a {
|
||||
text-decoration: none;
|
||||
|
||||
& svg {
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
}
|
||||
}
|
||||
& .note-metadata {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 1rem;
|
||||
|
||||
& .syndication-links {
|
||||
flex-flow: row wrap;
|
||||
|
||||
& a {
|
||||
text-decoration: none;
|
||||
|
||||
& svg {
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,10 +1,10 @@
|
|||
body {
|
||||
font-family: var(--font-family-body);
|
||||
font-size: var(--font-size-md);
|
||||
font-family: var(--font-family-body);
|
||||
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);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
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: flex;
|
||||
opacity: 1;
|
||||
}
|
||||
display: flex;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,25 +1,25 @@
|
|||
.grid {
|
||||
display: grid;
|
||||
grid-template-columns: 5vw 1fr 5vw;
|
||||
grid-template-rows: min-content 1fr min-content;
|
||||
row-gap: 1rem;
|
||||
display: grid;
|
||||
grid-template-columns: 5vw 1fr 5vw;
|
||||
grid-template-rows: min-content 1fr min-content;
|
||||
row-gap: 1rem;
|
||||
}
|
||||
|
||||
#site-header {
|
||||
grid-column: 2 / 3;
|
||||
grid-row: 1 / 2;
|
||||
grid-column: 2 / 3;
|
||||
grid-row: 1 / 2;
|
||||
}
|
||||
|
||||
main {
|
||||
grid-column: 2 / 3;
|
||||
grid-row: 2 / 3;
|
||||
grid-column: 2 / 3;
|
||||
grid-row: 2 / 3;
|
||||
}
|
||||
|
||||
footer {
|
||||
grid-column: 2 / 3;
|
||||
grid-row: 3 / 4;
|
||||
grid-column: 2 / 3;
|
||||
grid-row: 3 / 4;
|
||||
|
||||
& .iwc-logo {
|
||||
max-width: 85vw;
|
||||
}
|
||||
& .iwc-logo {
|
||||
max-width: 85vw;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,3 +0,0 @@
|
|||
.p-bridgy-twitter-content {
|
||||
display: none;
|
||||
}
|
||||
|
|
@ -1,22 +1,22 @@
|
|||
:root {
|
||||
/* Font Family */
|
||||
--font-family-headings: "Archer SSm A", "Archer SSm B", serif;
|
||||
--font-family-body: "Verlag A", "Verlag B", sans-serif;
|
||||
--font-family-monospace: "Operator Mono SSm A", "Operator Mono SSm B", monospace;
|
||||
/* Font Family */
|
||||
--font-family-headings: "Archer SSm A", "Archer SSm B", serif;
|
||||
--font-family-body: "Verlag A", "Verlag B", sans-serif;
|
||||
--font-family-monospace: "Operator Mono SSm A", "Operator Mono SSm B", monospace;
|
||||
|
||||
/* Font Size */
|
||||
--font-size-sm: 0.75rem; /* 12px */
|
||||
--font-size-base: 1rem; /* 16px, base */
|
||||
--font-size-md: 1.25rem; /* 20px */
|
||||
--font-size-lg: 1.5rem; /* 24px */
|
||||
--font-size-xl: 1.75rem; /* 28px */
|
||||
--font-size-xxl: 2rem; /* 32px */
|
||||
--font-size-xxxl: 2.25rem; /* 36px */
|
||||
/* Font Size */
|
||||
--font-size-sm: 0.75rem; /* 12px */
|
||||
--font-size-base: 1rem; /* 16px, base */
|
||||
--font-size-md: 1.25rem; /* 20px */
|
||||
--font-size-lg: 1.5rem; /* 24px */
|
||||
--font-size-xl: 1.75rem; /* 28px */
|
||||
--font-size-xxl: 2rem; /* 32px */
|
||||
--font-size-xxxl: 2.25rem; /* 36px */
|
||||
|
||||
/* Colours */
|
||||
--color-primary: oklch(36.8% 0.1 125.505);
|
||||
--color-secondary: oklch(96.3% 0.1 125.505);
|
||||
--color-link: oklch(48.09% 0.146 241.41);
|
||||
--color-link-visited: oklch(70.44% 0.21 304.41);
|
||||
--color-primary-shadow: oklch(19.56% 0.054 125.505 / 40%);
|
||||
/* Colours */
|
||||
--color-primary: oklch(36.8% 0.1 125.505deg);
|
||||
--color-secondary: oklch(96.3% 0.1 125.505deg);
|
||||
--color-link: oklch(48.09% 0.146 241.41deg);
|
||||
--color-link-visited: oklch(70.44% 0.21 304.41deg);
|
||||
--color-primary-shadow: oklch(19.56% 0.054 125.505deg / 40%);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
// });
|
||||
|
|
|
|||
36
resources/js/auth.js
Normal file
36
resources/js/auth.js
Normal file
|
|
@ -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 };
|
||||
|
|
@ -51,4 +51,9 @@
|
|||
<p>
|
||||
Edit your <a href="/admin/bio">bio</a>.
|
||||
</p>
|
||||
|
||||
<h2>Passkeys</h2>
|
||||
<p>
|
||||
List passkeys here?
|
||||
</p>
|
||||
@stop
|
||||
|
|
|
|||
|
|
@ -6,103 +6,103 @@ const EslintPlugin = require('eslint-webpack-plugin');
|
|||
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
|
||||
|
||||
const config = {
|
||||
entry: ['./resources/js/app.js'],
|
||||
output: {
|
||||
path: path.resolve('./public/assets'),
|
||||
filename: 'app.js',
|
||||
},
|
||||
module: {
|
||||
rules: [{
|
||||
test: /\.js$/,
|
||||
exclude: /node_modules/,
|
||||
use: {
|
||||
loader: 'babel-loader',
|
||||
options: {
|
||||
presets: [
|
||||
['@babel/preset-env', { targets: "defaults" }]
|
||||
]
|
||||
}
|
||||
}
|
||||
}]
|
||||
},
|
||||
plugins: [
|
||||
new StyleLintPlugin({
|
||||
configFile: path.resolve(__dirname + '/.stylelintrc'),
|
||||
context: path.resolve(__dirname + '/resources/css'),
|
||||
files: '**/*.css',
|
||||
}),
|
||||
new EslintPlugin({
|
||||
context: path.resolve(__dirname + '/resources/js'),
|
||||
files: '**/*.js',
|
||||
}),
|
||||
new CompressionPlugin({
|
||||
filename: "[path][base].br",
|
||||
algorithm: "brotliCompress",
|
||||
test: /\.js$|\.css$/,
|
||||
exclude: /.map$/,
|
||||
compressionOptions: {
|
||||
params: {
|
||||
[zlib.constants.BROTLI_PARAM_QUALITY]: 11,
|
||||
},
|
||||
},
|
||||
}),
|
||||
]
|
||||
entry: ['./resources/js/app.js'],
|
||||
output: {
|
||||
path: path.resolve('./public/assets'),
|
||||
filename: 'app.js',
|
||||
},
|
||||
module: {
|
||||
rules: [{
|
||||
test: /\.js$/,
|
||||
exclude: /node_modules/,
|
||||
use: {
|
||||
loader: 'babel-loader',
|
||||
options: {
|
||||
presets: [
|
||||
['@babel/preset-env', { targets: "defaults" }]
|
||||
]
|
||||
}
|
||||
}
|
||||
}]
|
||||
},
|
||||
plugins: [
|
||||
new StyleLintPlugin({
|
||||
configFile: path.resolve(__dirname + '/.stylelintrc'),
|
||||
context: path.resolve(__dirname + '/resources/css'),
|
||||
files: '**/*.css',
|
||||
}),
|
||||
new EslintPlugin({
|
||||
context: path.resolve(__dirname + '/resources/js'),
|
||||
files: '**/*.js',
|
||||
}),
|
||||
new CompressionPlugin({
|
||||
filename: "[path][base].br",
|
||||
algorithm: "brotliCompress",
|
||||
test: /\.js$|\.css$/,
|
||||
exclude: /.map$/,
|
||||
compressionOptions: {
|
||||
params: {
|
||||
[zlib.constants.BROTLI_PARAM_QUALITY]: 11,
|
||||
},
|
||||
},
|
||||
}),
|
||||
]
|
||||
};
|
||||
|
||||
module.exports = (env, argv) => {
|
||||
if (argv.mode === 'development') {
|
||||
config.devtool = 'eval-source-map';
|
||||
if (argv.mode === 'development') {
|
||||
config.devtool = 'eval-source-map';
|
||||
|
||||
config.module.rules.push({
|
||||
test: /\.css$/,
|
||||
exclude: /node_modules/,
|
||||
use: [
|
||||
{
|
||||
loader: 'style-loader'
|
||||
},
|
||||
{
|
||||
loader: 'css-loader',
|
||||
options: {
|
||||
sourceMap: true
|
||||
}
|
||||
},
|
||||
{
|
||||
loader: 'postcss-loader',
|
||||
options: {
|
||||
postcssOptions: {
|
||||
config: path.resolve(__dirname, 'postcss.config.js'),
|
||||
},
|
||||
sourceMap: true
|
||||
}
|
||||
}
|
||||
]
|
||||
});
|
||||
}
|
||||
config.module.rules.push({
|
||||
test: /\.css$/,
|
||||
exclude: /node_modules/,
|
||||
use: [
|
||||
{
|
||||
loader: 'style-loader'
|
||||
},
|
||||
{
|
||||
loader: 'css-loader',
|
||||
options: {
|
||||
sourceMap: true
|
||||
}
|
||||
},
|
||||
{
|
||||
loader: 'postcss-loader',
|
||||
options: {
|
||||
postcssOptions: {
|
||||
config: path.resolve(__dirname, 'postcss.config.js'),
|
||||
},
|
||||
sourceMap: true
|
||||
}
|
||||
}
|
||||
]
|
||||
});
|
||||
}
|
||||
|
||||
if (argv.mode === 'production') {
|
||||
config.module.rules.push({
|
||||
test: /\.css$/,
|
||||
exclude: /node_modules/,
|
||||
use: [
|
||||
{
|
||||
loader: MiniCssExtractPlugin.loader,
|
||||
},
|
||||
{
|
||||
loader: 'css-loader',
|
||||
},
|
||||
{
|
||||
loader: 'postcss-loader',
|
||||
options: {
|
||||
postcssOptions: {
|
||||
config: path.resolve(__dirname, 'postcss.config.js'),
|
||||
},
|
||||
}
|
||||
}
|
||||
]
|
||||
});
|
||||
if (argv.mode === 'production') {
|
||||
config.module.rules.push({
|
||||
test: /\.css$/,
|
||||
exclude: /node_modules/,
|
||||
use: [
|
||||
{
|
||||
loader: MiniCssExtractPlugin.loader,
|
||||
},
|
||||
{
|
||||
loader: 'css-loader',
|
||||
},
|
||||
{
|
||||
loader: 'postcss-loader',
|
||||
options: {
|
||||
postcssOptions: {
|
||||
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;
|
||||
};
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue