Skip to content

Commit

Permalink
🐛 fix pixelRatio number
Browse files Browse the repository at this point in the history
  • Loading branch information
@nelsliu9121
nelsliu9121 committed May 9, 2023
1 parent b089ec0 commit 82638ac
Show file tree
Hide file tree
Showing 21 changed files with 329 additions and 278 deletions.
44 changes: 22 additions & 22 deletions .eslintrc.cjs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,36 +6,36 @@ module.exports = {
node: true,
},
extends: [
'eslint:recommended',
'plugin:@typescript-eslint/recommended',
'plugin:qwik/recommended',
"eslint:recommended",
"plugin:@typescript-eslint/recommended",
"plugin:qwik/recommended",
],
parser: '@typescript-eslint/parser',
parser: "@typescript-eslint/parser",
parserOptions: {
tsconfigRootDir: __dirname,
project: ['./tsconfig.json'],
project: ["./tsconfig.json"],
ecmaVersion: 2021,
sourceType: 'module',
sourceType: "module",
ecmaFeatures: {
jsx: true,
},
},
plugins: ['@typescript-eslint'],
plugins: ["@typescript-eslint"],
rules: {
'@typescript-eslint/no-explicit-any': 'off',
'@typescript-eslint/explicit-module-boundary-types': 'off',
'@typescript-eslint/no-inferrable-types': 'off',
'@typescript-eslint/no-non-null-assertion': 'off',
'@typescript-eslint/no-empty-interface': 'off',
'@typescript-eslint/no-namespace': 'off',
'@typescript-eslint/no-empty-function': 'off',
'@typescript-eslint/no-this-alias': 'off',
'@typescript-eslint/ban-types': 'off',
'@typescript-eslint/ban-ts-comment': 'off',
'prefer-spread': 'off',
'no-case-declarations': 'off',
'no-console': 'off',
'@typescript-eslint/no-unused-vars': ['error'],
'@typescript-eslint/consistent-type-imports': 'warn',
"@typescript-eslint/no-explicit-any": "off",
"@typescript-eslint/explicit-module-boundary-types": "off",
"@typescript-eslint/no-inferrable-types": "off",
"@typescript-eslint/no-non-null-assertion": "off",
"@typescript-eslint/no-empty-interface": "off",
"@typescript-eslint/no-namespace": "off",
"@typescript-eslint/no-empty-function": "off",
"@typescript-eslint/no-this-alias": "off",
"@typescript-eslint/ban-types": "off",
"@typescript-eslint/ban-ts-comment": "off",
"prefer-spread": "off",
"no-case-declarations": "off",
"no-console": "off",
"@typescript-eslint/no-unused-vars": ["error"],
"@typescript-eslint/consistent-type-imports": "warn",
},
};
2 changes: 1 addition & 1 deletion README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,4 +2,4 @@

> get the running browser information
Made with 🫰 by [Nelson Liu](https://nelsonliu.dev/) in Taipei, Taiwan
Made with 🫰 by [Nelson Liu](https://nelsonliu.dev/) in Taipei, Taiwan
2 changes: 1 addition & 1 deletion postcss.config.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,4 +3,4 @@ module.exports = {
tailwindcss: {},
autoprefixer: {},
},
}
};
20 changes: 19 additions & 1 deletion public/site.webmanifest
View file
Original file line number Diff line number Diff line change
@@ -1 +1,19 @@
{"name":"","short_name":"","icons":[{"src":"/android-chrome-192x192.png","sizes":"192x192","type":"image/png"},{"src":"/android-chrome-512x512.png","sizes":"512x512","type":"image/png"}],"theme_color":"#ffffff","background_color":"#ffffff","display":"standalone"}
{
"name": "",
"short_name": "",
"icons": [
{
"src": "/android-chrome-192x192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "/android-chrome-512x512.png",
"sizes": "512x512",
"type": "image/png"
}
],
"theme_color": "#ffffff",
"background_color": "#ffffff",
"display": "standalone"
}
45 changes: 25 additions & 20 deletions src/components/blocks/browser-block.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,30 +1,35 @@
import {$, component$, useOnDocument, useStore} from "@builder.io/qwik";
import { $, component$, useOnDocument, useStore } from "@builder.io/qwik";

const useBrowserInformation = () => {
const store = useStore({
userAgent: '',
})
const store = useStore({
userAgent: "",
});

useOnDocument('load', $(() => {
store.userAgent = navigator.userAgent;
}));
useOnDocument(
"load",
$(() => {
store.userAgent = navigator.userAgent;
})
);

return store;
}
return store;
};

export default component$(() => {
const browser = useBrowserInformation();
const browser = useBrowserInformation();

return (<section class="bg-[#FF6D28] hover:bg-opacity-60 transition-colors bg-opacity-5 rounded-2xl p-6 xl:p-18 flex flex-col justify-center items-stretch">
<h3 class="text-2xl mb-4">Browser</h3>
return (
<section class="bg-[#FF6D28] hover:bg-opacity-60 transition-colors bg-opacity-5 rounded-2xl p-6 xl:p-18 flex flex-col justify-center items-stretch">
<h3 class="text-2xl mb-4">Browser</h3>

<div class="grid grid-cols-1 lg:grid-cols-3 auto-rows-fr gap-4 flex-1">
<div class="p-4 xl:p-8 flex flex-col justify-center items-center border-1 rounded-2xl col-span-3">
<h5 class="text-lg">user agent</h5>
<div class="font-mono flex-1 flex items-center">
{browser.userAgent}
</div>
</div>
<div class="grid grid-cols-1 lg:grid-cols-3 auto-rows-fr gap-4 flex-1">
<div class="p-4 xl:p-8 flex flex-col justify-center items-center border-1 rounded-2xl col-span-3">
<h5 class="text-lg">user agent</h5>
<div class="font-mono flex-1 flex items-center">
{browser.userAgent}
</div>
</div>
</section>);
</div>
</section>
);
});
75 changes: 38 additions & 37 deletions src/components/blocks/host-block.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,47 +1,48 @@
import {$, component$, useOnDocument, useStore} from "@builder.io/qwik";
import { $, component$, useOnDocument, useStore } from "@builder.io/qwik";

const useHostInformation = () => {
const store = useStore({
platform: '',
memory: '',
online: false,
})
const store = useStore({
platform: "",
memory: "",
online: false,
});

useOnDocument('load', $(() => {
store.platform = navigator.platform;
// @ts-ignore
store.memory = navigator.deviceMemory ?? '-';
store.online = navigator.onLine;
}));
useOnDocument(
"load",
$(() => {
store.platform = navigator.platform;
// @ts-ignore
store.memory = navigator.deviceMemory ?? "-";
store.online = navigator.onLine;
})
);

return store;
}
return store;
};

export default component$(() => {
const host = useHostInformation();
const host = useHostInformation();

return (<section class="bg-[#FF6D28] hover:bg-opacity-60 transition-colors bg-opacity-5 rounded-2xl p-6 xl:p-18 flex flex-col justify-center items-stretch">
<h3 class="text-2xl mb-4">Host</h3>
return (
<section class="bg-[#FF6D28] hover:bg-opacity-60 transition-colors bg-opacity-5 rounded-2xl p-6 xl:p-18 flex flex-col justify-center items-stretch">
<h3 class="text-2xl mb-4">Host</h3>

<div class="grid grid-cols-1 lg:grid-cols-3 auto-rows-fr gap-4 flex-1">
<div class="p-4 xl:p-8 flex flex-col justify-center items-center border-1 rounded-2xl">
<h5 class="text-lg">platform</h5>
<div class="font-mono flex-1 flex items-center">
{host.platform}
</div>
</div>
<div class="p-4 xl:p-8 flex flex-col justify-center items-center border-1 rounded-2xl">
<h5 class="text-lg">memory</h5>
<div class="font-mono flex-1 flex items-center">
{host.memory}
</div>
</div>
<div class="p-4 xl:p-8 flex flex-col justify-center items-center border-1 rounded-2xl">
<h5 class="text-lg">online</h5>
<div class="font-mono flex-1 flex items-center">
{host.online ? '✅' : '❎'}
</div>
</div>
<div class="grid grid-cols-1 lg:grid-cols-3 auto-rows-fr gap-4 flex-1">
<div class="p-4 xl:p-8 flex flex-col justify-center items-center border-1 rounded-2xl">
<h5 class="text-lg">platform</h5>
<div class="font-mono flex-1 flex items-center">{host.platform}</div>
</div>
<div class="p-4 xl:p-8 flex flex-col justify-center items-center border-1 rounded-2xl">
<h5 class="text-lg">memory</h5>
<div class="font-mono flex-1 flex items-center">{host.memory}</div>
</div>
<div class="p-4 xl:p-8 flex flex-col justify-center items-center border-1 rounded-2xl">
<h5 class="text-lg">online</h5>
<div class="font-mono flex-1 flex items-center">
{host.online ? "✅" : "❎"}
</div>
</div>
</section>);
</div>
</section>
);
});
76 changes: 43 additions & 33 deletions src/components/blocks/share-block.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,43 +1,53 @@
import {$, component$, useSignal} from "@builder.io/qwik";
import {checkIfBrowserSupported, takeScreenshot} from "@xata.io/screenshot";
import { $, component$, useSignal } from "@builder.io/qwik";
import { checkIfBrowserSupported, takeScreenshot } from "@xata.io/screenshot";

export default component$(() => {
const image = useSignal<string>();
const image = useSignal<string>();

const saveAsImage = $(async () => {
if (checkIfBrowserSupported()) {
image.value = await takeScreenshot();
}
});
const saveAsImage = $(async () => {
if (checkIfBrowserSupported()) {
image.value = await takeScreenshot();
}
});

const share = $(() => {
const data = {
url: 'https://runningon.dev/',
title: 'runningon.dev'
};
const share = $(() => {
const data = {
url: "https://runningon.dev/",
title: "runningon.dev",
};

if (navigator.canShare(data)) {
navigator.share(data);
}
});
if (navigator.canShare(data)) {
navigator.share(data);
}
});

return <section class="bg-[#F2DEBA] transition-colors bg-opacity-5 rounded-2xl p-6 xl:p-18 grid grid-cols-3 grid-rows-1 gap-4">
<div class="p-4 xl:p-8 flex flex-col justify-center items-center border-1 rounded-2xl bg-navy bg-opacity-10 hover:bg-opacity-60 transition-colors" onClick$={share}>
<div class="font-mono flex-1 flex items-center">
share
</div>
</div>
return (
<section class="bg-[#F2DEBA] transition-colors bg-opacity-5 rounded-2xl p-6 xl:p-18 grid grid-cols-3 grid-rows-1 gap-4">
<div
class="p-4 xl:p-8 flex flex-col justify-center items-center border-1 rounded-2xl bg-navy bg-opacity-10 hover:bg-opacity-60 transition-colors"
onClick$={share}
>
<div class="font-mono flex-1 flex items-center">share</div>
</div>

<div class="p-4 xl:p-8 flex flex-col justify-center items-center border-1 rounded-2xl bg-navy bg-opacity-10 hover:bg-opacity-60 transition-colors cursor-pointer" onClick$={saveAsImage}>
<div class="font-mono flex-1 flex items-center">
save as image
</div>
<div
class="p-4 xl:p-8 flex flex-col justify-center items-center border-1 rounded-2xl bg-navy bg-opacity-10 hover:bg-opacity-60 transition-colors cursor-pointer"
onClick$={saveAsImage}
>
<div class="font-mono flex-1 flex items-center">save as image</div>

{image.value ? <a href={image.value} download target="_blank">
<div class="w-48 h-48 sm:h-36 sm:w-36 rounded-full border-4 border-light shadow-lg hover:shadow-2xl transition-shadow">
<img class="rounded-full object-cover w-full h-full" src={image.value} alt="screenshot" />
</div>
</a> : null}
</div>
{image.value ? (
<a href={image.value} download target="_blank">
<div class="w-48 h-48 sm:h-36 sm:w-36 rounded-full border-4 border-light shadow-lg hover:shadow-2xl transition-shadow">
<img
class="rounded-full object-cover w-full h-full"
src={image.value}
alt="screenshot"
/>
</div>
</a>
) : null}
</div>
</section>
);
});
Loading

0 comments on commit 82638ac

Please sign in to comment.