initial commit, just echoes back the typed string for now
pantonshire
3 years ago
commit
2689d1512e
@ -0,0 +1,3 @@
|
||||
{
|
||||
"extends": "next/core-web-vitals"
|
||||
}
|
||||
@ -0,0 +1,35 @@
|
||||
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
|
||||
|
||||
# dependencies
|
||||
/node_modules
|
||||
/.pnp
|
||||
.pnp.js
|
||||
|
||||
# testing
|
||||
/coverage
|
||||
|
||||
# next.js
|
||||
/.next/
|
||||
/out/
|
||||
|
||||
# production
|
||||
/build
|
||||
|
||||
# misc
|
||||
.DS_Store
|
||||
*.pem
|
||||
|
||||
# debug
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
|
||||
# local env files
|
||||
.env*.local
|
||||
|
||||
# vercel
|
||||
.vercel
|
||||
|
||||
# typescript
|
||||
*.tsbuildinfo
|
||||
next-env.d.ts
|
||||
@ -0,0 +1,34 @@
|
||||
This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
|
||||
|
||||
## Getting Started
|
||||
|
||||
First, run the development server:
|
||||
|
||||
```bash
|
||||
npm run dev
|
||||
# or
|
||||
yarn dev
|
||||
# or
|
||||
pnpm dev
|
||||
```
|
||||
|
||||
Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
|
||||
|
||||
You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
|
||||
|
||||
This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
|
||||
|
||||
## Learn More
|
||||
|
||||
To learn more about Next.js, take a look at the following resources:
|
||||
|
||||
- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
|
||||
- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
|
||||
|
||||
You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
|
||||
|
||||
## Deploy on Vercel
|
||||
|
||||
The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
|
||||
|
||||
Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
|
||||
@ -0,0 +1,4 @@
|
||||
/** @type {import('next').NextConfig} */
|
||||
const nextConfig = {}
|
||||
|
||||
module.exports = nextConfig
|
||||
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,22 @@
|
||||
{
|
||||
"name": "utfinspector",
|
||||
"version": "0.1.0",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"dev": "next dev",
|
||||
"build": "next build",
|
||||
"start": "next start",
|
||||
"lint": "next lint"
|
||||
},
|
||||
"dependencies": {
|
||||
"@types/node": "20.3.0",
|
||||
"@types/react": "18.2.11",
|
||||
"@types/react-dom": "18.2.4",
|
||||
"eslint": "8.42.0",
|
||||
"eslint-config-next": "13.4.5",
|
||||
"next": "13.4.5",
|
||||
"react": "18.2.0",
|
||||
"react-dom": "18.2.0",
|
||||
"typescript": "5.1.3"
|
||||
}
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 25 KiB |
@ -0,0 +1,118 @@
|
||||
:root {
|
||||
--main_1: #735cd6;
|
||||
--main_2: #d13fbe;
|
||||
--light_1: #a598e0;
|
||||
--text_light: #727272;
|
||||
}
|
||||
|
||||
/* :root {
|
||||
--max-width: 1100px;
|
||||
--border-radius: 12px;
|
||||
--font-mono: ui-monospace, Menlo, Monaco, 'Cascadia Mono', 'Segoe UI Mono',
|
||||
'Roboto Mono', 'Oxygen Mono', 'Ubuntu Monospace', 'Source Code Pro',
|
||||
'Fira Mono', 'Droid Sans Mono', 'Courier New', monospace;
|
||||
|
||||
--foreground-rgb: 0, 0, 0;
|
||||
--background-start-rgb: 214, 219, 220;
|
||||
--background-end-rgb: 255, 255, 255;
|
||||
|
||||
--primary-glow: conic-gradient(
|
||||
from 180deg at 50% 50%,
|
||||
#16abff33 0deg,
|
||||
#0885ff33 55deg,
|
||||
#54d6ff33 120deg,
|
||||
#0071ff33 160deg,
|
||||
transparent 360deg
|
||||
);
|
||||
--secondary-glow: radial-gradient(
|
||||
rgba(255, 255, 255, 1),
|
||||
rgba(255, 255, 255, 0)
|
||||
);
|
||||
|
||||
--tile-start-rgb: 239, 245, 249;
|
||||
--tile-end-rgb: 228, 232, 233;
|
||||
--tile-border: conic-gradient(
|
||||
#00000080,
|
||||
#00000040,
|
||||
#00000030,
|
||||
#00000020,
|
||||
#00000010,
|
||||
#00000010,
|
||||
#00000080
|
||||
);
|
||||
|
||||
--callout-rgb: 238, 240, 241;
|
||||
--callout-border-rgb: 172, 175, 176;
|
||||
--card-rgb: 180, 185, 188;
|
||||
--card-border-rgb: 131, 134, 135;
|
||||
} */
|
||||
|
||||
/* @media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--foreground-rgb: 255, 255, 255;
|
||||
--background-start-rgb: 0, 0, 0;
|
||||
--background-end-rgb: 0, 0, 0;
|
||||
|
||||
--primary-glow: radial-gradient(rgba(1, 65, 255, 0.4), rgba(1, 65, 255, 0));
|
||||
--secondary-glow: linear-gradient(
|
||||
to bottom right,
|
||||
rgba(1, 65, 255, 0),
|
||||
rgba(1, 65, 255, 0),
|
||||
rgba(1, 65, 255, 0.3)
|
||||
);
|
||||
|
||||
--tile-start-rgb: 2, 13, 46;
|
||||
--tile-end-rgb: 2, 5, 19;
|
||||
--tile-border: conic-gradient(
|
||||
#ffffff80,
|
||||
#ffffff40,
|
||||
#ffffff30,
|
||||
#ffffff20,
|
||||
#ffffff10,
|
||||
#ffffff10,
|
||||
#ffffff80
|
||||
);
|
||||
|
||||
--callout-rgb: 20, 20, 20;
|
||||
--callout-border-rgb: 108, 108, 108;
|
||||
--card-rgb: 100, 100, 100;
|
||||
--card-border-rgb: 200, 200, 200;
|
||||
}
|
||||
} */
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
html,
|
||||
body {
|
||||
max-width: 100vw;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
/* body {
|
||||
color: rgb(var(--foreground-rgb));
|
||||
background: linear-gradient(
|
||||
to bottom,
|
||||
transparent,
|
||||
rgb(var(--background-end-rgb))
|
||||
)
|
||||
rgb(var(--background-start-rgb));
|
||||
} */
|
||||
|
||||
/* a {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
} */
|
||||
|
||||
a {
|
||||
color: var(--main_1);
|
||||
}
|
||||
|
||||
/* @media (prefers-color-scheme: dark) {
|
||||
html {
|
||||
color-scheme: dark;
|
||||
}
|
||||
} */
|
||||
@ -0,0 +1,36 @@
|
||||
'use client';
|
||||
|
||||
import { useState } from 'react';
|
||||
import styles from './page.module.css'
|
||||
import { TextField } from './textfield';
|
||||
|
||||
type InspectorProps = {
|
||||
sourceUrl: string,
|
||||
};
|
||||
|
||||
export function Inspector(props: InspectorProps) {
|
||||
const [currentString, setCurrentString] = useState('');
|
||||
|
||||
return (
|
||||
<section className={styles.inspector_section}>
|
||||
<section className={styles.input_section}>
|
||||
<TextField
|
||||
onChange={setCurrentString}
|
||||
placeholder='Enter Unicode text here'
|
||||
/>
|
||||
|
||||
<div className={styles.info_box}>
|
||||
<p>
|
||||
Source code is available
|
||||
<a href={props.sourceUrl}>here</a>.
|
||||
Text entered above is not sent over the network.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className={styles.output_section}>
|
||||
<p id='out_test'>{currentString}</p>
|
||||
</section>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
@ -0,0 +1,23 @@
|
||||
import './globals.css'
|
||||
import { Inter, Roboto_Slab } from 'next/font/google'
|
||||
|
||||
const inter = Inter({ subsets: ['latin'] });
|
||||
|
||||
const robotoSlab = Roboto_Slab({ subsets: ['latin'] });
|
||||
|
||||
export const metadata = {
|
||||
title: 'Create Next App',
|
||||
description: 'Generated by create next app',
|
||||
}
|
||||
|
||||
export default function RootLayout({
|
||||
children,
|
||||
}: {
|
||||
children: React.ReactNode
|
||||
}) {
|
||||
return (
|
||||
<html lang="en">
|
||||
<body className={robotoSlab.className}>{children}</body>
|
||||
</html>
|
||||
)
|
||||
}
|
||||
@ -0,0 +1,48 @@
|
||||
.main {
|
||||
padding: 1rem 2rem;
|
||||
}
|
||||
|
||||
.title_section {
|
||||
max-width: 1000px;
|
||||
margin: 0 auto 2rem auto;
|
||||
padding: 0 3rem;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 3em;
|
||||
font-variant: small-caps;
|
||||
font-weight: 900;
|
||||
color: transparent;
|
||||
background-image: linear-gradient(70deg, var(--main_1), var(--main_2));
|
||||
background-size: 100%;
|
||||
background-clip: text;
|
||||
}
|
||||
|
||||
.input_section {
|
||||
max-width: 1000px;
|
||||
margin: 0 auto 2rem auto;
|
||||
}
|
||||
|
||||
.text_field {
|
||||
width: 100%;
|
||||
resize: vertical;
|
||||
min-height: 4em;
|
||||
height: 4em;
|
||||
padding: 0.75em;
|
||||
border-radius: 5px;
|
||||
border: 3px solid var(--light_1);
|
||||
transition: border-color 0.1s linear;
|
||||
font-size: 1rem;
|
||||
font-family: inherit;
|
||||
|
||||
}
|
||||
|
||||
.text_field:hover {
|
||||
border-color: var(--main_1);
|
||||
}
|
||||
|
||||
.info_box {
|
||||
margin-top: 1rem;
|
||||
padding: 0 3rem;
|
||||
color: var(--text_light);
|
||||
}
|
||||
@ -0,0 +1,19 @@
|
||||
import Image from 'next/image'
|
||||
import styles from './page.module.css'
|
||||
import { Inspector } from './inspector';
|
||||
|
||||
const sourceUrl = 'https://example.com';
|
||||
|
||||
export default function Home() {
|
||||
return (
|
||||
<main className={styles.main}>
|
||||
<header className={styles.title_section}>
|
||||
<h1 className={styles.title}>
|
||||
Utf Inspector
|
||||
</h1>
|
||||
</header>
|
||||
|
||||
<Inspector sourceUrl={sourceUrl} />
|
||||
</main>
|
||||
)
|
||||
}
|
||||
@ -0,0 +1,22 @@
|
||||
'use client';
|
||||
|
||||
import styles from './page.module.css'
|
||||
|
||||
type TextFieldProps = {
|
||||
onChange: (value: string) => void,
|
||||
placeholder?: string,
|
||||
};
|
||||
|
||||
export function TextField(props: TextFieldProps) {
|
||||
function handleChange(event: React.FormEvent<HTMLTextAreaElement>) {
|
||||
props.onChange(event.currentTarget.value);
|
||||
}
|
||||
|
||||
return (
|
||||
<textarea
|
||||
className={styles.text_field}
|
||||
placeholder={props.placeholder}
|
||||
onChange={handleChange}
|
||||
/>
|
||||
)
|
||||
}
|
||||
@ -0,0 +1,28 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"target": "es5",
|
||||
"lib": ["dom", "dom.iterable", "esnext"],
|
||||
"allowJs": true,
|
||||
"skipLibCheck": true,
|
||||
"strict": true,
|
||||
"forceConsistentCasingInFileNames": true,
|
||||
"noEmit": true,
|
||||
"esModuleInterop": true,
|
||||
"module": "esnext",
|
||||
"moduleResolution": "node",
|
||||
"resolveJsonModule": true,
|
||||
"isolatedModules": true,
|
||||
"jsx": "preserve",
|
||||
"incremental": true,
|
||||
"plugins": [
|
||||
{
|
||||
"name": "next"
|
||||
}
|
||||
],
|
||||
"paths": {
|
||||
"@/*": ["./src/*"]
|
||||
}
|
||||
},
|
||||
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
|
||||
"exclude": ["node_modules"]
|
||||
}
|
||||
Loading…
Reference in New Issue