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
|
insert_final_newline = true
|
||||||
trim_trailing_whitespace = true
|
trim_trailing_whitespace = true
|
||||||
|
|
||||||
|
[*.{js,css}]
|
||||||
|
indent_size = 2
|
||||||
|
|
||||||
[*.md]
|
[*.md]
|
||||||
trim_trailing_whitespace = false
|
trim_trailing_whitespace = false
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,6 @@
|
||||||
parserOptions:
|
parserOptions:
|
||||||
sourceType: 'module'
|
sourceType: 'module'
|
||||||
|
ecmaVersion: 8
|
||||||
extends: 'eslint:recommended'
|
extends: 'eslint:recommended'
|
||||||
env:
|
env:
|
||||||
browser: true
|
browser: true
|
||||||
|
|
@ -9,7 +10,7 @@ ignorePatterns:
|
||||||
rules:
|
rules:
|
||||||
indent:
|
indent:
|
||||||
- error
|
- error
|
||||||
- 4
|
- 2
|
||||||
linebreak-style:
|
linebreak-style:
|
||||||
- error
|
- error
|
||||||
- unix
|
- unix
|
||||||
|
|
|
||||||
|
|
@ -1,7 +1,3 @@
|
||||||
{
|
{
|
||||||
"extends": ["stylelint-config-standard"],
|
"extends": ["stylelint-config-standard"]
|
||||||
"rules": {
|
|
||||||
"indentation": 4,
|
|
||||||
"import-notation": "string"
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
|
||||||
File diff suppressed because one or more lines are too long
Binary file not shown.
|
|
@ -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');
|
||||||
|
|
|
||||||
|
|
@ -1,3 +1,3 @@
|
||||||
.hljs {
|
.hljs {
|
||||||
border-radius: .5rem;
|
border-radius: .5rem;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,18 +1,18 @@
|
||||||
body {
|
body {
|
||||||
background-color: var(--color-secondary);
|
background-color: var(--color-secondary);
|
||||||
color: var(--color-primary);
|
color: var(--color-primary);
|
||||||
}
|
}
|
||||||
|
|
||||||
a {
|
a {
|
||||||
color: var(--color-link);
|
color: var(--color-link);
|
||||||
|
|
||||||
&:visited {
|
&:visited {
|
||||||
color: var(--color-link-visited);
|
color: var(--color-link-visited);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
#site-header {
|
#site-header {
|
||||||
& a:visited {
|
& a:visited {
|
||||||
color: var(--color-link);
|
color: var(--color-link);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,36 +1,35 @@
|
||||||
@import "posse.css";
|
@import url('h-card.css');
|
||||||
@import "h-card.css";
|
|
||||||
|
|
||||||
.h-entry {
|
.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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,10 +1,10 @@
|
||||||
body {
|
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 {
|
code {
|
||||||
font-family: var(--font-family-monospace);
|
font-family: var(--font-family-monospace);
|
||||||
}
|
}
|
||||||
|
|
||||||
h1,
|
h1,
|
||||||
|
|
@ -13,5 +13,5 @@ h3,
|
||||||
h4,
|
h4,
|
||||||
h5,
|
h5,
|
||||||
h6 {
|
h6 {
|
||||||
font-family: var(--font-family-headings);
|
font-family: var(--font-family-headings);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,32 +1,32 @@
|
||||||
.h-card {
|
.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 {
|
& .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;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,25 +1,25 @@
|
||||||
.grid {
|
.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 {
|
#site-header {
|
||||||
grid-column: 2 / 3;
|
grid-column: 2 / 3;
|
||||||
grid-row: 1 / 2;
|
grid-row: 1 / 2;
|
||||||
}
|
}
|
||||||
|
|
||||||
main {
|
main {
|
||||||
grid-column: 2 / 3;
|
grid-column: 2 / 3;
|
||||||
grid-row: 2 / 3;
|
grid-row: 2 / 3;
|
||||||
}
|
}
|
||||||
|
|
||||||
footer {
|
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;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,3 +0,0 @@
|
||||||
.p-bridgy-twitter-content {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
@ -1,22 +1,22 @@
|
||||||
:root {
|
: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%);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1 +1,10 @@
|
||||||
import '../css/app.css';
|
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>
|
<p>
|
||||||
Edit your <a href="/admin/bio">bio</a>.
|
Edit your <a href="/admin/bio">bio</a>.
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
|
<h2>Passkeys</h2>
|
||||||
|
<p>
|
||||||
|
List passkeys here?
|
||||||
|
</p>
|
||||||
@stop
|
@stop
|
||||||
|
|
|
||||||
|
|
@ -6,103 +6,103 @@ const EslintPlugin = require('eslint-webpack-plugin');
|
||||||
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
|
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
|
||||||
|
|
||||||
const config = {
|
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) => {
|
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;
|
||||||
};
|
};
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue