typescript more like gayscript
This commit is contained in:
parent
9cdcae11d2
commit
a8bf4b8a5a
19 changed files with 246 additions and 114 deletions
|
|
@ -2,11 +2,12 @@
|
|||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" type="image/svg+xml" href="https://dp.nea.moe/avatar/712639419785412668.png" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>ECHO</title>
|
||||
<title>Vite + Solid + TS</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
<script type="module" src="/src/index.jsx"></script>
|
||||
<script type="module" src="/src/index.tsx"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -5,13 +5,14 @@
|
|||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"build": "vite build",
|
||||
"build": "tsc -b && vite build",
|
||||
"preview": "vite preview"
|
||||
},
|
||||
"dependencies": {
|
||||
"solid-js": "^1.8.17"
|
||||
},
|
||||
"devDependencies": {
|
||||
"typescript": "^5.2.2",
|
||||
"vite": "^5.3.1",
|
||||
"vite-plugin-solid": "^2.10.2"
|
||||
}
|
||||
|
|
|
|||
|
|
@ -12,6 +12,9 @@ importers:
|
|||
specifier: ^1.8.17
|
||||
version: 1.8.17
|
||||
devDependencies:
|
||||
typescript:
|
||||
specifier: ^5.2.2
|
||||
version: 5.5.2
|
||||
vite:
|
||||
specifier: ^5.3.1
|
||||
version: 5.3.1
|
||||
|
|
@ -541,6 +544,11 @@ packages:
|
|||
resolution: {integrity: sha512-/OaKK0xYrs3DmxRYqL/yDc+FxFUVYhDlXMhRmv3z915w2HF1tnN1omB354j8VUGO/hbRzyD6Y3sA7v7GS/ceog==}
|
||||
engines: {node: '>=4'}
|
||||
|
||||
typescript@5.5.2:
|
||||
resolution: {integrity: sha512-NcRtPEOsPFFWjobJEtfihkLCZCXZt/os3zf8nTxjVH3RvTSxjrCamJpbExGvYOF+tFHc3pA65qpdwPbzjohhew==}
|
||||
engines: {node: '>=14.17'}
|
||||
hasBin: true
|
||||
|
||||
update-browserslist-db@1.0.16:
|
||||
resolution: {integrity: sha512-KVbTxlBYlckhF5wgfyZXTWnMn7MMZjMu9XG8bPlliUOP9ThaF4QnhP8qrjrH7DRzHfSk0oQv1wToW+iA5GajEQ==}
|
||||
hasBin: true
|
||||
|
|
@ -1080,6 +1088,8 @@ snapshots:
|
|||
|
||||
to-fast-properties@2.0.0: {}
|
||||
|
||||
typescript@5.5.2: {}
|
||||
|
||||
update-browserslist-db@1.0.16(browserslist@4.23.1):
|
||||
dependencies:
|
||||
browserslist: 4.23.1
|
||||
|
|
|
|||
BIN
public/gaybackground.png
Normal file
BIN
public/gaybackground.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.3 KiB |
|
|
@ -1 +0,0 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
|
||||
|
Before Width: | Height: | Size: 1.5 KiB |
58
src/App.css
58
src/App.css
|
|
@ -1,6 +1,6 @@
|
|||
:root {
|
||||
background-color: #121212;
|
||||
font-family: 'Courier New', Courier, monospace;
|
||||
font-family: monospace;
|
||||
overflow-x: hidden;
|
||||
color: pink;
|
||||
}
|
||||
|
|
@ -12,13 +12,22 @@
|
|||
justify-content: center;
|
||||
}
|
||||
|
||||
.header img:hover{
|
||||
animation: bigsmall .5s infinite;
|
||||
}
|
||||
|
||||
.cardchild h1 {
|
||||
font-size: 3em;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.cardchild span {
|
||||
font-size: 1.5em;
|
||||
}
|
||||
|
||||
.cardchild img {
|
||||
max-width: 4em;
|
||||
margin: 1em;
|
||||
max-width: 5em;
|
||||
margin: 0.5em;
|
||||
}
|
||||
|
||||
.cardchild {
|
||||
|
|
@ -32,31 +41,41 @@
|
|||
cursor: default;
|
||||
background-color: #272525;
|
||||
border-radius: 5%;
|
||||
margin: 1em 1em .5em .5em;
|
||||
width: 20em;
|
||||
padding: 0.5em 2em 2em 2em;
|
||||
padding: 0.5em 5em 2em 5em;
|
||||
transform: translateY(-0em);
|
||||
transition: background-color 1s, transform .5s, box-shadow .5s, -webkit-box-shadow .5s, -moz-box-shadow 0.5s;
|
||||
}
|
||||
|
||||
.cardchild:hover {
|
||||
box-shadow: 0 0 234px -3px rgba(250, 236, 236, 0.75);
|
||||
-webkit-box-shadow: 0 0 234px -3px rgba(250, 236, 236, 0.75);
|
||||
-moz-box-shadow: 0 0 234px -3px rgba(250, 236, 236, 0.75);
|
||||
box-shadow: 0 0 534px -3px rgba(250, 236, 236, 0.4);
|
||||
-webkit-box-shadow: 0 0 534px -3px rgba(250, 236, 236, 0.4);
|
||||
-moz-box-shadow: 0 0 534px -3px rgba(250, 236, 236, 0.4);
|
||||
background-color: #5e5a5a;
|
||||
animation: big 500ms infinite;
|
||||
transform: translateY(-0.3em);
|
||||
transition: background-color 1s, transform .5s, box-shadow .5s, -webkit-box-shadow .5s, -moz-box-shadow 0.5s;
|
||||
}
|
||||
.linktree {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
.linktree img {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.parent {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
|
||||
.header h1 {
|
||||
font-size: 2.5em;
|
||||
font-size: 3.6em;
|
||||
color: blanchedalmond;
|
||||
display: inline-table;
|
||||
}
|
||||
|
|
@ -82,6 +101,16 @@
|
|||
animation: slide-left 1.5s;
|
||||
}
|
||||
|
||||
.gaybackground {
|
||||
background-image: url("/gaybackground.png");
|
||||
}
|
||||
|
||||
.animate {
|
||||
z-index: 10000000;
|
||||
transform: scale(10000);
|
||||
transition: 20s;
|
||||
}
|
||||
|
||||
@keyframes slide-left {
|
||||
from {
|
||||
transform: translateX(-10000em);
|
||||
|
|
@ -102,6 +131,19 @@
|
|||
}
|
||||
}
|
||||
|
||||
@keyframes bigsmall {
|
||||
0% {
|
||||
max-width: 10em;
|
||||
}
|
||||
50% {
|
||||
width: 10.5em;
|
||||
max-width: 10.5em;
|
||||
}
|
||||
100% {
|
||||
max-width: 10em;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes shake {
|
||||
0% {
|
||||
transform: translate(0, 0) rotate(0deg);
|
||||
|
|
|
|||
46
src/App.jsx
46
src/App.jsx
|
|
@ -1,46 +0,0 @@
|
|||
import { createSignal } from 'solid-js'
|
||||
import './App.css'
|
||||
import HoverComponent from './components/name'
|
||||
import AdvancedBr from './components/comps'
|
||||
import Review from './components/api'
|
||||
function App() {
|
||||
|
||||
return (
|
||||
<>
|
||||
<div class='header'>
|
||||
<img src="https://dp.nea.moe/avatar/712639419785412668" class="logo-pfp" alt="Vite logo" />
|
||||
<HoverComponent />
|
||||
</div>
|
||||
|
||||
|
||||
<p style={{ display: "none" }}>AdvancedBr my beloved</p>
|
||||
<AdvancedBr count={10}/>
|
||||
|
||||
|
||||
<div className='parent'>
|
||||
<div className='cardchild'>
|
||||
<h1>link tree</h1>
|
||||
<img src="https://openpgpjs.org/images/logo_proton_mail.png" alt="LMAO IMAGINE BEING BLIND" />
|
||||
<img src="https://git.gay/assets/img/logo.png" alt="" />
|
||||
<img src="https://woem.men/files/356134d8-df3b-41dc-ac73-c4420442bf3a" alt="" />
|
||||
</div>
|
||||
|
||||
<div className='cardchild'>
|
||||
<h1>hi :3</h1>
|
||||
<span style={{
|
||||
fontSize: "15em",
|
||||
fontFamily: "monospace"
|
||||
}}>silly goober who does silly stuff <br/> self proclaimed programmer and progamer <br /> shitposts for fun</span>
|
||||
</div>
|
||||
|
||||
<div className='cardchild'>
|
||||
<h1>reviews</h1>
|
||||
<Review/>
|
||||
</div>
|
||||
</div>
|
||||
<AdvancedBr count={10}/>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default App
|
||||
79
src/App.tsx
Normal file
79
src/App.tsx
Normal file
|
|
@ -0,0 +1,79 @@
|
|||
import './App.css'
|
||||
import HoverComponent from './components/name.tsx'
|
||||
import AdvancedBr from './components/comps.tsx'
|
||||
import { createSignal } from 'solid-js';
|
||||
function App() {
|
||||
function remov() {
|
||||
for (let i = 0; i < document.styleSheets.length; i++) {
|
||||
let styleSheet = document.styleSheets[i];
|
||||
let rules = styleSheet.cssRules || styleSheet.rules;
|
||||
for (let j = 0; j < rules.length; j++) {
|
||||
let rule = rules[j];
|
||||
if (rule.type === CSSRule.KEYFRAMES_RULE && ((rule as CSSKeyframesRule).name === "slide-left")) {
|
||||
styleSheet.deleteRule(j);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const [isAnimating, setIsAnimating] = createSignal(false);
|
||||
const [animatedwoem, setanimatedwoem] = createSignal(false);
|
||||
let gitgay = <img onClick={() => {
|
||||
setIsAnimating(true)
|
||||
setTimeout(() => {
|
||||
window.location.href = "https://git.gay/exhq"
|
||||
}, 200);
|
||||
gitgay.src = "/gaybackground.png"
|
||||
}} classList={{ 'gitgayimg': true, 'animate': isAnimating(), 'gaybackground': isAnimating() }} src="https://git.gay/assets/img/logo.png" alt="LMAO IMAGINE BEING BLIND" /> as HTMLImageElement
|
||||
return (
|
||||
|
||||
<>
|
||||
<div class='header'>
|
||||
<img onmouseenter={remov} src="https://dp.nea.moe/avatar/712639419785412668.png" class="logo-pfp" alt="LMAO IMAGINE BEING BLIND" />
|
||||
<HoverComponent />
|
||||
</div>
|
||||
|
||||
|
||||
<p style={{ display: "none" }}>AdvancedBr my beloved</p>
|
||||
<AdvancedBr count={6} />
|
||||
|
||||
|
||||
<div class='parent'>
|
||||
<div class='cardchild'>
|
||||
<h1>link tree</h1>
|
||||
<div class='linktree'>
|
||||
{gitgay}
|
||||
<img onClick={() => {
|
||||
setanimatedwoem(true)
|
||||
setTimeout(() => {
|
||||
window.location.href = "https://woem.men/@exhq"
|
||||
}, 200);
|
||||
}} classList={{ 'woemimg': true, 'animate': animatedwoem() }} src="https://woem.men/files/356134d8-df3b-41dc-ac73-c4420442bf3a" alt="LMAO IMAGINE BEING BLIND" />
|
||||
</div>
|
||||
<br />
|
||||
<div class='linktree'>
|
||||
<span class='gitgaytext' >Git</span>
|
||||
<span class='woemtext' >Fedi</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style={{
|
||||
opacity: isAnimating() || animatedwoem() ? "0%" : "100%"
|
||||
}} class='cardchild'>
|
||||
<h1>hi :3</h1>
|
||||
<span>silly goober who does silly stuff <br /> self proclaimed programmer and progamer <br /> shitposts for fun</span>
|
||||
</div>
|
||||
|
||||
<div style={{
|
||||
opacity: isAnimating() || animatedwoem() ? "0%" : "100%"
|
||||
}} class='cardchild'>
|
||||
<h1>reviews</h1>
|
||||
{/* <Review/> */}
|
||||
</div>
|
||||
</div>
|
||||
<AdvancedBr count={10} />
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default App
|
||||
|
|
@ -1,38 +0,0 @@
|
|||
import { createSignal, createEffect } from 'solid-js';
|
||||
|
||||
const Review = () => {
|
||||
// State to store the fetched data
|
||||
const [data, setData] = createSignal([]);
|
||||
const [name, setName] = createSignal([]);
|
||||
let colontree = {}
|
||||
|
||||
|
||||
createEffect(() => {
|
||||
|
||||
fetch('https://api.review.exhq.dev/getreviews/')
|
||||
.then(res => res.json())
|
||||
.then(jsonData => {
|
||||
setData(jsonData);
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('Error fetching data:', error);
|
||||
});
|
||||
|
||||
|
||||
for (let i = 0; i < data().length; i++) {
|
||||
|
||||
fetch(`https://discordlookup.mesalytic.moe/v1/user/${data()[i].discordID}`)
|
||||
.then(res => res.json()).then(console.log)
|
||||
}
|
||||
});
|
||||
|
||||
return (
|
||||
<div>
|
||||
{data().reverse().map(i => (
|
||||
<li>{i.discordID}</li>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Review;
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
// warning: this IS horrible code. its a joke. DO NOT try this at home because
|
||||
// your local senior programmer CAN and WILL hunt you down
|
||||
// you have been warned.
|
||||
export default function AdvancedBr({ count }) {
|
||||
export default function AdvancedBr({count}: any) {
|
||||
return new Array(count).fill(null).map(_=>(<br/>))
|
||||
}
|
||||
|
|
@ -4,12 +4,11 @@ import { removethething } from "./utils";
|
|||
function HoverComponent() {
|
||||
let timerId;
|
||||
|
||||
const [isHovered, setIsHovered] = createSignal(false);
|
||||
const [name, setname] = createSignal(true)
|
||||
|
||||
const startTimer = () => {
|
||||
timerId = setTimeout(() => {
|
||||
executeFunction();
|
||||
setname(!name())
|
||||
}, 3000);
|
||||
};
|
||||
|
||||
|
|
@ -19,22 +18,12 @@ function HoverComponent() {
|
|||
timerId = null;
|
||||
}
|
||||
};
|
||||
|
||||
const executeFunction = () => {
|
||||
setname(!name())
|
||||
};
|
||||
|
||||
|
||||
const handleMouseEnter = () => {
|
||||
removethething()
|
||||
setIsHovered(true);
|
||||
startTimer();
|
||||
};
|
||||
|
||||
const handleMouseLeave = () => {
|
||||
setIsHovered(false);
|
||||
clearTimer();
|
||||
};
|
||||
|
||||
onCleanup(() => {
|
||||
clearTimer();
|
||||
});
|
||||
|
|
@ -43,7 +32,7 @@ function HoverComponent() {
|
|||
<h1
|
||||
className="removethisinstantly"
|
||||
onMouseEnter={handleMouseEnter}
|
||||
onMouseLeave={handleMouseLeave}
|
||||
onMouseLeave={clearTimer}
|
||||
>
|
||||
{name() ? "ECHO" : "exhq"}
|
||||
</h1>
|
||||
|
|
|
|||
42
src/components/name.tsx
Normal file
42
src/components/name.tsx
Normal file
|
|
@ -0,0 +1,42 @@
|
|||
import { createSignal, onCleanup } from "solid-js";
|
||||
import { removethething } from "./utils.ts";
|
||||
|
||||
function HoverComponent() {
|
||||
let timerId: number|null;
|
||||
|
||||
const [name, setname] = createSignal(true)
|
||||
|
||||
const startTimer = () => {
|
||||
timerId = setTimeout(() => {
|
||||
setname(!name())
|
||||
}, 3000);
|
||||
};
|
||||
|
||||
const clearTimer = () => {
|
||||
if (timerId) {
|
||||
clearTimeout(timerId);
|
||||
timerId = null;
|
||||
}
|
||||
};
|
||||
|
||||
const handleMouseEnter = () => {
|
||||
removethething()
|
||||
startTimer();
|
||||
};
|
||||
|
||||
onCleanup(() => {
|
||||
clearTimer();
|
||||
});
|
||||
|
||||
return (
|
||||
<h1
|
||||
class="removethisinstantly"
|
||||
onMouseEnter={handleMouseEnter}
|
||||
onMouseLeave={clearTimer}
|
||||
>
|
||||
{name() ? "ECHO" : "exhq"}
|
||||
</h1>
|
||||
);
|
||||
}
|
||||
|
||||
export default HoverComponent;
|
||||
|
|
@ -4,14 +4,14 @@ export function removethething() {
|
|||
let rules = styleSheet.cssRules || styleSheet.rules;
|
||||
for (let j = 0; j < rules.length; j++) {
|
||||
let rule = rules[j];
|
||||
if (rule.type === CSSRule.KEYFRAMES_RULE && rule.name === "slide-right") {
|
||||
if (rule.type === CSSRule.KEYFRAMES_RULE && ((rule as CSSKeyframesRule).name === "slide-right" )) {
|
||||
styleSheet.deleteRule(j);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export async function getLatestItems(apiUrl) {
|
||||
export async function getLatestItems(apiUrl: string) {
|
||||
try {
|
||||
const response = await fetch(apiUrl);
|
||||
if (!response.ok) {
|
||||
|
|
@ -5,4 +5,4 @@ import App from './App'
|
|||
|
||||
const root = document.getElementById('root')
|
||||
|
||||
render(() => <App />, root)
|
||||
render(() => <App />, root!)
|
||||
1
src/vite-env.d.ts
vendored
Normal file
1
src/vite-env.d.ts
vendored
Normal file
|
|
@ -0,0 +1 @@
|
|||
/// <reference types="vite/client" />
|
||||
28
tsconfig.app.json
Normal file
28
tsconfig.app.json
Normal file
|
|
@ -0,0 +1,28 @@
|
|||
{
|
||||
"compilerOptions": {
|
||||
"composite": true,
|
||||
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
|
||||
"target": "ES2020",
|
||||
"useDefineForClassFields": true,
|
||||
"module": "ESNext",
|
||||
"lib": ["ES2020", "DOM", "DOM.Iterable"],
|
||||
"skipLibCheck": true,
|
||||
|
||||
/* Bundler mode */
|
||||
"moduleResolution": "bundler",
|
||||
"allowImportingTsExtensions": true,
|
||||
"resolveJsonModule": true,
|
||||
"isolatedModules": true,
|
||||
"moduleDetection": "force",
|
||||
"noEmit": true,
|
||||
"jsx": "preserve",
|
||||
"jsxImportSource": "solid-js",
|
||||
|
||||
/* Linting */
|
||||
"strict": true,
|
||||
"noUnusedLocals": true,
|
||||
"noUnusedParameters": true,
|
||||
"noFallthroughCasesInSwitch": true
|
||||
},
|
||||
"include": ["src"]
|
||||
}
|
||||
11
tsconfig.json
Normal file
11
tsconfig.json
Normal file
|
|
@ -0,0 +1,11 @@
|
|||
{
|
||||
"files": [],
|
||||
"references": [
|
||||
{
|
||||
"path": "./tsconfig.app.json"
|
||||
},
|
||||
{
|
||||
"path": "./tsconfig.node.json"
|
||||
}
|
||||
]
|
||||
}
|
||||
13
tsconfig.node.json
Normal file
13
tsconfig.node.json
Normal file
|
|
@ -0,0 +1,13 @@
|
|||
{
|
||||
"compilerOptions": {
|
||||
"composite": true,
|
||||
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
|
||||
"skipLibCheck": true,
|
||||
"module": "ESNext",
|
||||
"moduleResolution": "bundler",
|
||||
"allowSyntheticDefaultImports": true,
|
||||
"strict": true,
|
||||
"noEmit": true
|
||||
},
|
||||
"include": ["vite.config.ts"]
|
||||
}
|
||||
Loading…
Reference in a new issue