thm/test-card
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

init

Browse source
This commit is contained in:
Tomáš Mládek 2024-01-31 20:17:33 +01:00
commit 5d56a7341e
23 changed files with 2505 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
.eslintignore Normal file
View file

@ -0,0 +1,13 @@
.DS_Store
node_modules
/build
/.svelte-kit
/package
.env
.env.*
!.env.example
# Ignore files for PNPM, NPM and YARN
pnpm-lock.yaml
package-lock.json
yarn.lock

31
.eslintrc.cjs Normal file
View file

@ -0,0 +1,31 @@
/** @type { import("eslint").Linter.Config } */
module.exports = {
root: true,
extends: [
'eslint:recommended',
'plugin:@typescript-eslint/recommended',
'plugin:svelte/recommended',
'prettier'
],
parser: '@typescript-eslint/parser',
plugins: ['@typescript-eslint'],
parserOptions: {
sourceType: 'module',
ecmaVersion: 2020,
extraFileExtensions: ['.svelte']
},
env: {
browser: true,
es2017: true,
node: true
},
overrides: [
{
files: ['*.svelte'],
parser: 'svelte-eslint-parser',
parserOptions: {
parser: '@typescript-eslint/parser'
}
}
]
};

10
.gitignore vendored Normal file
View file

@ -0,0 +1,10 @@
.DS_Store
node_modules
/build
/.svelte-kit
/package
.env
.env.*
!.env.example
vite.config.js.timestamp-*
vite.config.ts.timestamp-*

1
.npmrc Normal file
View file

@ -0,0 +1 @@
engine-strict=true

4
.prettierignore Normal file
View file

@ -0,0 +1,4 @@
# Ignore files for PNPM, NPM and YARN
pnpm-lock.yaml
package-lock.json
yarn.lock

8
.prettierrc Normal file
View file

@ -0,0 +1,8 @@
{
"useTabs": true,
"singleQuote": true,
"trailingComma": "none",
"printWidth": 100,
"plugins": ["prettier-plugin-svelte"],
"overrides": [{ "files": "*.svelte", "options": { "parser": "svelte" } }]
}

38
README.md Normal file
View file

@ -0,0 +1,38 @@
# create-svelte
Everything you need to build a Svelte project, powered by [`create-svelte`](https://github.com/sveltejs/kit/tree/main/packages/create-svelte).
## Creating a project
If you're seeing this, you've probably already done this step. Congrats!
```bash
# create a new project in the current directory
npm create svelte@latest
# create a new project in my-app
npm create svelte@latest my-app
```
## Developing
Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
```bash
npm run dev
# or start the server and open the app in a new browser tab
npm run dev -- --open
```
## Building
To create a production version of your app:
```bash
npm run build
```
You can preview the production build with `npm run preview`.
> To deploy your app, you may need to install an [adapter](https://kit.svelte.dev/docs/adapters) for your target environment.

12
index.html Normal file
View file

@ -0,0 +1,12 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Expanded Modern Test Card</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
</body>
</html>

36
package.json Normal file
View file

@ -0,0 +1,36 @@
{
"name": "testcard",
"version": "0.0.1",
"private": true,
"scripts": {
"dev": "vite dev",
"build": "vite build",
"preview": "vite preview",
"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
"lint": "prettier --check . && eslint .",
"format": "prettier --write ."
},
"devDependencies": {
"@sveltejs/adapter-auto": "^3.0.0",
"@sveltejs/kit": "^2.0.0",
"@sveltejs/vite-plugin-svelte": "^3.0.0",
"@types/eslint": "8.56.0",
"@typescript-eslint/eslint-plugin": "^6.0.0",
"@typescript-eslint/parser": "^6.0.0",
"eslint": "^8.56.0",
"eslint-config-prettier": "^9.1.0",
"eslint-plugin-svelte": "^2.35.1",
"prettier": "^3.1.1",
"prettier-plugin-svelte": "^3.1.2",
"svelte": "^4.2.7",
"svelte-check": "^3.6.0",
"tslib": "^2.4.1",
"typescript": "^5.0.0",
"vite": "^5.0.3"
},
"type": "module",
"dependencies": {
"@ibm/plex": "^6.4.0"
}
}

2088
pnpm-lock.yaml Normal file
View file

File diff suppressed because it is too large Load diff

13
src/app.d.ts vendored Normal file
View file

@ -0,0 +1,13 @@
// See https://kit.svelte.dev/docs/types#app
// for information about these interfaces
declare global {
namespace App {
// interface Error {}
// interface Locals {}
// interface PageData {}
// interface PageState {}
// interface Platform {}
}
}
export {};

12
src/app.html Normal file
View file

@ -0,0 +1,12 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%sveltekit.assets%/favicon.png" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
%sveltekit.head%
</head>
<body data-sveltekit-preload-data="hover">
<div style="display: contents">%sveltekit.body%</div>
</body>
</html>

12
src/index.css Normal file
View file

@ -0,0 +1,12 @@
body, html {
height: 100%;
margin: 0;
display: flex;
justify-content: center;
align-items: center;
color: #d9d9d9;
background-color: black;
font-family: 'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif;
}

39
src/lib/BackgroundGrid.svelte Normal file
View file

@ -0,0 +1,39 @@
<script lang="ts">
let count = 12;
$: realCount = count + 2;
</script>
<div class="grid" style="--count: {realCount}">
{#each Array.from({length: realCount}) as _}
<div class="row">
{#each Array.from({length: realCount}) as _}
<div class="block"></div>
{/each}
</div>
{/each}
</div>
<style>
.grid {
display: grid;
grid-template-columns: repeat(var(--count), 20px);
grid-template-rows: repeat(var(--count), 20px);
width: 100%;
height: 100%;
position: relative;
}
.row {
display: contents;
}
.block {
background-color: gray;
}
.row:nth-child(even) .block:nth-child(odd), .row:nth-child(odd) .block:nth-child(even) {
background-color: darkgray;
}
</style>

31
src/lib/ScreenInfo.svelte Normal file
View file

@ -0,0 +1,31 @@
<script lang="ts">
import {onMount} from "svelte";
let screenResolution = "";
let windowResolution = "";
function updateResolution() {
screenResolution = `${screen.width} x ${screen.height}`;
windowResolution = `${window.innerWidth} x ${window.innerHeight}`;
}
onMount(() => {
window.addEventListener('resize', () => {
updateResolution();
});
updateResolution();
})
</script>
<div class="info">
<div class="resolution">
<div class="title">Screen Resolution</div>
<div class="value">{screenResolution}</div>
{#if windowResolution !== screenResolution}
<div class="window">
<div class="title">Window Resolution</div>
<div class="value">{windowResolution}</div>
</div>
{/if}
</div>
</div>

107
src/lib/TestCard.svelte Normal file
View file

@ -0,0 +1,107 @@
<script lang="ts">
import BackgroundGrid from "$lib/BackgroundGrid.svelte";
import ScreenInfo from "$lib/ScreenInfo.svelte";
</script>
<div class="test-card">
<div class="background">
<BackgroundGrid />
</div>
<ScreenInfo />
<div class="inner">
<div class="color-bars">
<div class="color-bar red"></div>
<div class="color-bar green"></div>
<div class="color-bar blue"></div>
<div class="color-bar black"></div>
</div>
<div class="grayscale-gradient"></div>
<div class="color-gradient-background"></div>
</div>
</div>
<style>
.test-card {
width: 100vw;
height: 100vh;
}
.inner {
width: 80%;
height: 80%;
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: 2fr 1fr 1fr 1fr;
gap: 10px;
display: none;
}
.background {
position: absolute;
}
.color-bars {
display: flex;
grid-column: 1 / 5;
}
.color-bar {
flex-grow: 1;
height: 100%;
}
.red { background-color: #ff0000; }
.green { background-color: #00ff00; }
.blue { background-color: #0000ff; }
.black { background-color: #000; }
.grayscale-gradient {
grid-column: 1 / 5;
background: linear-gradient(to right, #000, #fff);
}
.sharpness-pattern {
grid-column: 1 / 3;
display: flex;
justify-content: center;
align-items: center;
background-color: #eee;
font-size: 2vw;
}
.geometry-pattern {
grid-column: 3 / 5;
display: flex;
justify-content: space-around;
align-items: center;
}
.circle, .square {
background-color: #888;
aspect-ratio: 1 / 1;
}
.circle {
width: 10vw;
border-radius: 50%;
}
.square {
width: 10vw;
}
@media (max-width: 600px) {
.sharpness-pattern span {
font-size: 5vw;
}
.circle, .square {
width: 20vw;
}
}
</style>

1
src/lib/index.ts Normal file
View file

@ -0,0 +1 @@
// place files you want to import through the `$lib` alias in this folder.

7
src/routes/+page.svelte Normal file
View file

@ -0,0 +1,7 @@
<script>
import "../index.css";
import "@ibm/plex/css/ibm-plex.css";
import TestCard from "$lib/TestCard.svelte";
</script>
<TestCard />

BIN
static/favicon.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 1.5 KiB

0
style.css Normal file
View file

18
svelte.config.js Normal file
View file

@ -0,0 +1,18 @@
import adapter from '@sveltejs/adapter-auto';
import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
/** @type {import('@sveltejs/kit').Config} */
const config = {
// Consult https://kit.svelte.dev/docs/integrations#preprocessors
// for more information about preprocessors
preprocess: vitePreprocess(),
kit: {
// adapter-auto only supports some environments, see https://kit.svelte.dev/docs/adapter-auto for a list.
// If your environment is not supported or you settled on a specific environment, switch out the adapter.
// See https://kit.svelte.dev/docs/adapters for more information about adapters.
adapter: adapter()
}
};
export default config;

18
tsconfig.json Normal file
View file

@ -0,0 +1,18 @@
{
"extends": "./.svelte-kit/tsconfig.json",
"compilerOptions": {
"allowJs": true,
"checkJs": true,
"esModuleInterop": true,
"forceConsistentCasingInFileNames": true,
"resolveJsonModule": true,
"skipLibCheck": true,
"sourceMap": true,
"strict": true,
"moduleResolution": "bundler"
}
// Path aliases are handled by https://kit.svelte.dev/docs/configuration#alias
//
// If you want to overwrite includes/excludes, make sure to copy over the relevant includes/excludes
// from the referenced tsconfig.json - TypeScript does not merge them in
}

6
vite.config.ts Normal file
View file

@ -0,0 +1,6 @@
import { sveltekit } from '@sveltejs/kit/vite';
import { defineConfig } from 'vite';
export default defineConfig({
plugins: [sveltekit()]
});