aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--package.json6
-rw-r--r--src/app.css6
-rw-r--r--src/routes/api.svelte2
-rw-r--r--src/routes/index.svelte11
-rw-r--r--src/routes/language.svelte82
-rw-r--r--src/routes/languages.svelte3
-rw-r--r--yarn.lock41
7 files changed, 112 insertions, 39 deletions
diff --git a/package.json b/package.json
index 92d7aae..6445e61 100644
--- a/package.json
+++ b/package.json
@@ -43,13 +43,13 @@
"@types/cookie": "0.4.1",
"@typescript-eslint/eslint-plugin": "5.14.0",
"@typescript-eslint/parser": "5.14.0",
- "eslint": "8.10.0",
+ "eslint": "8.11.0",
"eslint-config-prettier": "8.5.0",
"eslint-plugin-svelte3": "3.4.1",
- "prettier": "2.5.1",
+ "prettier": "2.6.0",
"prettier-plugin-svelte": "2.6.0",
"svelte": "3.46.4",
- "svelte-check": "2.4.5",
+ "svelte-check": "2.4.6",
"svelte-preprocess": "4.10.4",
"tslib": "2.3.1",
"typescript": "4.6.2"
diff --git a/src/app.css b/src/app.css
index 995e9cd..62d6d2e 100644
--- a/src/app.css
+++ b/src/app.css
@@ -34,15 +34,15 @@ img {
border-radius: 5px;
}
-#random-image img {
+.highlight-image img {
height: 20em;
transition: 0.25s;
}
-#random-image img:hover {
+.highlight-image img:hover {
height: 22.5em;
opacity: 0.75;
}
-#random-image a:hover {
+.highlight-image a:hover {
border-bottom: none;
}
diff --git a/src/routes/api.svelte b/src/routes/api.svelte
index a6476da..e377783 100644
--- a/src/routes/api.svelte
+++ b/src/routes/api.svelte
@@ -49,6 +49,6 @@ SPDX-License-Identifier: GPL-3.0-only -->
<p>Fetching API README...</p>
{:else}
{@html rst2html(rst)}
- <p>RST to HTML time: {rstTime}ms</p>
+ <p>Double rst_to_html_time = {rstTime}; /* ms */</p>
{/if}
</section>
diff --git a/src/routes/index.svelte b/src/routes/index.svelte
index a1a3a1c..9497358 100644
--- a/src/routes/index.svelte
+++ b/src/routes/index.svelte
@@ -24,7 +24,7 @@ SPDX-License-Identifier: GPL-3.0-only -->
onMount(async () => {
fetchTime = performance.now();
- image = (await fetchRandomImage()).image;
+ image = await fetchRandomImage();
fetchTime = performance.now() - fetchTime;
complete = true;
});
@@ -40,15 +40,16 @@ SPDX-License-Identifier: GPL-3.0-only -->
{#if !complete}
<p>Fetching a random image...</p>
{:else}
- <div id="random-image">
- <a href={image}>
+ <div class="highlight-image">
+ <a href={`/language?language=${image.language}&image=${image.image}`}>
<img
- src={image}
+ src={image.image}
alt="Image of an anime girl holding a programming book"
/>
</a>
</div>
- <p>Fetch time: {fetchTime}ms</p>
+
+ <p>Double fetch_time = {fetchTime}; /* ms */</p>
{/if}
<h2>Contributing</h2>
diff --git a/src/routes/language.svelte b/src/routes/language.svelte
index bbad67b..55340a0 100644
--- a/src/routes/language.svelte
+++ b/src/routes/language.svelte
@@ -20,15 +20,54 @@ SPDX-License-Identifier: GPL-3.0-only -->
import { fetchImages } from "$lib/api";
import { page } from "$app/stores";
+ const errorImages = [
+ "https://www.pngarts.com/files/8/Confused-Anime-Transparent-Image.png",
+ "https://cdn130.picsart.com/246838980018212.png?r1024x1024",
+ "https://toppng.com/public/uploads/thumbnail/confused-anime-png-anime-question-png-gif-11563638774nccphyut3x.png",
+ "https://linuxreviews.org/images/8/8d/Blond-anime-girl-with-red-questionmark.png",
+ "https://external-preview.redd.it/VNfYgsb6Pqn4xlEBpYl11534fIpOfN1XeMe7NrzgmQs.png?width=282&auto=webp&s=3247341e1cb8a6d6f63b7b3d63809e52ca0558fd",
+ "https://i.ya-webdesign.com/images/confused-anime-png-5.png",
+ "https://www.pngarts.com/files/8/Confused-Anime-PNG-Picture.png",
+ "https://64.media.tumblr.com/20fb900f57db568393387211c9c4760c/tumblr_olanyyuuQZ1tbejoso2_400.png",
+ "https://stickershop.line-scdn.net/stickershop/v1/product/7982958/LINEStorePC/main.png;compress=true",
+ "https://emoji.gg/assets/emoji/8573_Shikiconfused.png",
+ "https://i.imgur.com/TOgxESH.jpg",
+ ];
+
let language = $page.url.searchParams.get("language");
- let images, fetchTime;
+ let images, fetchTime, image, imageSize;
let complete = false;
+ let imageQuery = $page.url.searchParams.get("image");
onMount(async () => {
fetchTime = performance.now();
images = await fetchImages(language);
fetchTime = performance.now() - fetchTime;
complete = true;
+
+ if (imageQuery) {
+ image = images.filter((i) => i.includes(imageQuery));
+
+ if (!image[0]) {
+ image =
+ "https://www.pngarts.com/files/8/Confused-Anime-Transparent-Image.png";
+ image = errorImages[Math.floor(Math.random() * errorImages.length)];
+ } else {
+ let xhr = new XMLHttpRequest();
+
+ xhr.open("HEAD", image, true);
+ xhr.onreadystatechange = () => {
+ if (xhr.readyState === 4) {
+ if (xhr.status === 200) {
+ imageSize = `${xhr.getResponseHeader("Content-Length") / 1024}`;
+ } else {
+ imageSize = "Error";
+ }
+ }
+ };
+ xhr.send(null);
+ }
+ }
});
</script>
@@ -43,11 +82,47 @@ SPDX-License-Identifier: GPL-3.0-only -->
<p>Fetching images...</p>
{:else if images.length === 0}
<p>Sorry, no images were found for this language.</p>
+ {:else if image}
+ {#if errorImages.includes(image)}
+ <div class="highlight-image">
+ <p>
+ <i>Could not locate that specific image!</i>
+ Wanna go <a href={`/language?language=${language}`}>back</a> to language
+ homepage?
+ </p>
+
+ <a href={image}>
+ <img src={image} alt="Image of a confused anime girl" />
+ </a>
+ </div>
+ {:else if image}
+ <div class="highlight-image">
+ <p>
+ Wanna go <a href={`/language?language=${language}`}>back</a> to language
+ homepage?
+ </p>
+
+ <a href={image}>
+ <img
+ src={image}
+ alt="Image of an anime girl holding a programming book"
+ />
+ </a>
+
+ <p>
+ Attributes attributes = &lbrace;<br />
+ &ensp;direct_link: "<a href={image}>url</a>",<br />
+ &ensp;size: {imageSize}, /* kb */<br />
+ &ensp;fetch_time: {fetchTime}, /* ms */<br />
+ &rbrace;;
+ </p>
+ </div>
+ {/if}
{:else}
<ul class="image-rack">
{#each images as image}
<li id="image-rack-item">
- <a href={image}>
+ <a href={`/language?language=${language}&image=${image}`}>
<img
src={image}
alt="Image of an anime girl holding a programming book"
@@ -56,6 +131,7 @@ SPDX-License-Identifier: GPL-3.0-only -->
</li>
{/each}
</ul>
- <p>Fetch time: {fetchTime}ms</p>
+
+ <p>Double fetch_time = {fetchTime}; /* ms */</p>
{/if}
</div>
diff --git a/src/routes/languages.svelte b/src/routes/languages.svelte
index cb1ef69..cf8a05c 100644
--- a/src/routes/languages.svelte
+++ b/src/routes/languages.svelte
@@ -55,6 +55,7 @@ SPDX-License-Identifier: GPL-3.0-only -->
</li>
{/each}
</ul>
- <p>Fetch time: {fetchTime}ms</p>
+
+ <p>Double fetch_time = {fetchTime}; /* ms */</p>
{/if}
</div>
diff --git a/yarn.lock b/yarn.lock
index 400d00e..98bf0eb 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -447,16 +447,16 @@
"@babel/helper-validator-identifier" "^7.16.7"
to-fast-properties "^2.0.0"
-"@eslint/eslintrc@^1.2.0":
- version "1.2.0"
- resolved "https://registry.yarnpkg.com/@eslint/eslintrc/-/eslintrc-1.2.0.tgz#7ce1547a5c46dfe56e1e45c3c9ed18038c721c6a"
- integrity sha512-igm9SjJHNEJRiUnecP/1R5T3wKLEJ7pL6e2P+GUSfCd0dGjPYYZve08uzw8L2J8foVHFz+NGu12JxRcU2gGo6w==
+"@eslint/eslintrc@^1.2.1":
+ version "1.2.1"
+ resolved "https://registry.yarnpkg.com/@eslint/eslintrc/-/eslintrc-1.2.1.tgz#8b5e1c49f4077235516bc9ec7d41378c0f69b8c6"
+ integrity sha512-bxvbYnBPN1Gibwyp6NrpnFzA3YtRL3BBAyEAFVIpNTm2Rn4Vy87GA5M4aSn3InRrlsbX5N0GW7XIx+U4SAEKdQ==
dependencies:
ajv "^6.12.4"
debug "^4.3.2"
espree "^9.3.1"
globals "^13.9.0"
- ignore "^4.0.6"
+ ignore "^5.2.0"
import-fresh "^3.2.1"
js-yaml "^4.1.0"
minimatch "^3.0.4"
@@ -1324,12 +1324,12 @@ eslint-visitor-keys@^3.0.0, eslint-visitor-keys@^3.3.0:
resolved "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-3.3.0.tgz"
integrity sha512-mQ+suqKJVyeuwGYHAdjMFqjCyfl8+Ldnxuyp3ldiMBFKkvytrXUZWaiPCEav8qDHKty44bD+qV1IP4T+w+xXRA==
[email protected]:
- version "8.10.0"
- resolved "https://registry.yarnpkg.com/eslint/-/eslint-8.10.0.tgz#931be395eb60f900c01658b278e05b6dae47199d"
- integrity sha512-tcI1D9lfVec+R4LE1mNDnzoJ/f71Kl/9Cv4nG47jOueCMBrCCKYXr4AUVS7go6mWYGFD4+EoN6+eXSrEbRzXVw==
[email protected]:
+ version "8.11.0"
+ resolved "https://registry.yarnpkg.com/eslint/-/eslint-8.11.0.tgz#88b91cfba1356fc10bb9eb592958457dfe09fb37"
+ integrity sha512-/KRpd9mIRg2raGxHRGwW9ZywYNAClZrHjdueHcrVDuO3a6bj83eoTirCCk0M0yPwOjWYKHwRVRid+xK4F/GHgA==
dependencies:
- "@eslint/eslintrc" "^1.2.0"
+ "@eslint/eslintrc" "^1.2.1"
"@humanwhocodes/config-array" "^0.9.2"
ajv "^6.10.0"
chalk "^4.0.0"
@@ -1656,11 +1656,6 @@ [email protected]:
agent-base "6"
debug "4"
-ignore@^4.0.6:
- version "4.0.6"
- resolved "https://registry.npmjs.org/ignore/-/ignore-4.0.6.tgz"
- integrity sha512-cyFDKrqc/YdcWFniJhzI42+AzS+gNwmUzOSFcRCQYwySuBBBy/KjuxWLZ/FHEH6Moq1NizMOBWyTcv8O4OZIMg==
-
ignore@^5.1.8, ignore@^5.2.0:
version "5.2.0"
resolved "https://registry.npmjs.org/ignore/-/ignore-5.2.0.tgz"
@@ -2266,10 +2261,10 @@ [email protected]:
resolved "https://registry.yarnpkg.com/prettier-plugin-svelte/-/prettier-plugin-svelte-2.6.0.tgz#0e845b560b55cd1d951d6c50431b4949f8591746"
integrity sha512-NPSRf6Y5rufRlBleok/pqg4+1FyGsL0zYhkYP6hnueeL1J/uCm3OfOZPsLX4zqD9VAdcXfyEL2PYqGv8ZoOSfA==
[email protected]:
- version "2.5.1"
- resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.5.1.tgz#fff75fa9d519c54cf0fce328c1017d94546bc56a"
- integrity sha512-vBZcPRUR5MZJwoyi3ZoyQlc1rXeEck8KgeC9AwwOn+exuxLxq5toTRDTSaVrXHxelDMHy9zlicw8u66yxoSUFg==
[email protected]:
+ version "2.6.0"
+ resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.6.0.tgz#12f8f504c4d8ddb76475f441337542fa799207d4"
+ integrity sha512-m2FgJibYrBGGgQXNzfd0PuDGShJgRavjUoRCw1mZERIWVSXF0iLzLm+aOqTAbLnC3n6JzUhAA8uZnFVghHJ86A==
pretty-format@^27.2.5, pretty-format@^27.5.1:
version "27.5.1"
@@ -2582,10 +2577,10 @@ supports-preserve-symlinks-flag@^1.0.0:
resolved "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz"
integrity sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==
[email protected]:
- version "2.4.5"
- resolved "https://registry.yarnpkg.com/svelte-check/-/svelte-check-2.4.5.tgz#a2001993034d495118980bd95577fb3e7980661a"
- integrity sha512-nRft8BbG2wcxyCdHDZ7X43xLcvDzua3xLwq6wzHGcAF3ka3Jyhv2rvgq0+SF9NwHLMefp9C2XkM6etzsxK/cMQ==
[email protected]:
+ version "2.4.6"
+ resolved "https://registry.yarnpkg.com/svelte-check/-/svelte-check-2.4.6.tgz#dfdb6b4a68d9b2cececdedd4e17d895eb82314b3"
+ integrity sha512-luzdly7RJhyXucQe8ID/7CqDgXdMrPYXmyZBjCbp+cixzTopZotuWevrB5hWDOnOU19m2cyetigIIa7WDHnCmQ==
dependencies:
chokidar "^3.4.1"
fast-glob "^3.2.7"
generated by cgit v1.2.3 (git 2.25.1) at 2026-03-11 01:27:13 +0000