Make website responsive (#18)

Draco-lang · Nov 14, 2023 · 4766bc0 · 4766bc0
1 parent 52cf340
commit 4766bc0
Show file tree

Hide file tree

Showing 34 changed files with 613 additions and 410 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -1,71 +1,54 @@
 module.exports = {
-  "env": {
-    "browser": true,
-    "es2021": true,
+  env: {
+    browser: true,
+    es2021: true,
   },
-  "extends": [
+  extends: [
     "eslint:recommended",
     "plugin:@typescript-eslint/recommended",
     "plugin:react/recommended",
-    "next/core-web-vitals"
+    "next/core-web-vitals",
   ],
-  "overrides": [
+  overrides: [
     {
-      "env": {
-        "node": true
+      env: {
+        node: true,
+      },
+      files: [".eslintrc.{js,cjs}"],
+      parserOptions: {
+        sourceType: "script",
       },
-      "files": [
-        ".eslintrc.{js,cjs}"
-      ],
-      "parserOptions": {
-        "sourceType": "script"
-      }
     },
     {
-      "env": {
-        "node": true,
-        "es2021": false,
-        "amd": true
+      env: {
+        node: true,
+        es2021: false,
+        amd: true,
       },
-      "files": [
-        "generateAssets.js"
-      ],
-      "rules": {
+      files: ["generateAssets.js"],
+      rules: {
         "no-require-imports": "off",
-        "@typescript-eslint/no-var-requires": "off"
-      }
-    }
+        "@typescript-eslint/no-var-requires": "off",
+      },
+    },
   ],
-  "parser": "@typescript-eslint/parser",
-  "parserOptions": {
-    "ecmaVersion": "latest",
-    "sourceType": "module"
+  parser: "@typescript-eslint/parser",
+  parserOptions: {
+    ecmaVersion: "latest",
+    sourceType: "module",
   },
-  "plugins": [
-    "@typescript-eslint",
-    "react",
-    "import"
-  ],
-  "rules": {
-    "quotes": [
-      "error",
-      "double"
-    ],
-    "semi": [
-      "error",
-      "always"
-    ],
+  plugins: ["@typescript-eslint", "react", "import"],
+  rules: {
+    quotes: ["error", "double"],
+    semi: ["error", "always"],
     "no-multiple-empty-lines": [
       "error",
       {
-        max: 1
-      }
+        max: 1,
+      },
     ],
     "react/react-in-jsx-scope": "off",
     "import/newline-after-import": "error",
-    "padding-line-between-statements": [
-      "error",
-      { "blankLine": "always", "prev": "if", "next": "*" }
-    ]
-  }
+    "padding-line-between-statements": ["error", { blankLine: "always", prev: "if", next: "*" }],
+  },
 };
diff --git a/.prettierrc b/.prettierrc
@@ -1,3 +1,3 @@
 {
-  "printWidth": 100
+  "printWidth": 120
 }
diff --git a/generateAssets.js b/generateAssets.js
@@ -4,112 +4,115 @@ const { createTokenAuth } = require("@octokit/auth-token");
 const sharp = require("sharp");
 
 const fullLogo = {
-    light: "https://raw.githubusercontent.com/Draco-lang/Language-suggestions/main/Resources/Logo-Long.svg",
-    dark: "https://raw.githubusercontent.com/Draco-lang/Language-suggestions/main/Resources/Logo-Long-Inverted.svg"
+  light: "https://raw.githubusercontent.com/Draco-lang/Language-suggestions/main/Resources/Logo-Long.svg",
+  dark: "https://raw.githubusercontent.com/Draco-lang/Language-suggestions/main/Resources/Logo-Long-Inverted.svg",
 };
 const shortLogo = {
-    light: "https://raw.githubusercontent.com/Draco-lang/Language-suggestions/main/Resources/Logo-Short.svg",
-    dark: "https://raw.githubusercontent.com/Draco-lang/Language-suggestions/main/Resources/Logo-Short-Inverted.svg"
+  light: "https://raw.githubusercontent.com/Draco-lang/Language-suggestions/main/Resources/Logo-Short.svg",
+  dark: "https://raw.githubusercontent.com/Draco-lang/Language-suggestions/main/Resources/Logo-Short-Inverted.svg",
 };
 const githubLogo = {
-    light: "prebuild_assets/github-mark.svg",
-    dark: "prebuild_assets/github-mark-white.svg"
+  light: "prebuild_assets/github-mark.svg",
+  dark: "prebuild_assets/github-mark-white.svg",
 };
 const emojis = [];
 
 async function main() {
-    if (!fs.existsSync("public/generated")) {
-        fs.mkdirSync("public/generated", { recursive: true });
-    }
+  if (!fs.existsSync("public/generated")) {
+    fs.mkdirSync("public/generated", { recursive: true });
+  }
 
-    await downloadThemedImage(fullLogo, "public/generated/Logo-Long.svg", true);
-    await downloadThemedImage(shortLogo, "public/generated/Logo-Short.svg", true);
-    await downloadThemedImage(githubLogo, "public/generated/github-logo.svg", false);
-    await downloadAndConvertSvgToPng("https://raw.githubusercontent.com/Draco-lang/Language-suggestions/main/Resources/Logo-Short-Inverted-Outline.svg", "public/generated/Logo-Short-Inverted-Outline.png");
-    await download("https://raw.githubusercontent.com/Draco-lang/Language-suggestions/main/Resources/Derpy-Outlined.svg", "public/generated/derpy.svg");
-    emojis.push("derpy");
-    let octokit;
-    if (process.env.GITHUB_TOKEN !== undefined && process.env.GITHUB_TOKEN.length > 0) {
-        const auth = createTokenAuth(process.env.GITHUB_TOKEN);
-        const authentication = await auth();
-        octokit = new Octokit({
-            auth: authentication.token
-        });
-    } else {
-        octokit = new Octokit();
-    }
-
-    const response = await octokit.repos.getContent({
-        owner: "Draco-lang",
-        repo: "Language-suggestions",
-        path: "Resources/Emojis"
+  await downloadThemedImage(fullLogo, "public/generated/Logo-Long.svg", true);
+  await downloadThemedImage(shortLogo, "public/generated/Logo-Short.svg", true);
+  await downloadThemedImage(githubLogo, "public/generated/github-logo.svg", false);
+  await downloadAndConvertSvgToPng(
+    "https://raw.githubusercontent.com/Draco-lang/Language-suggestions/main/Resources/Logo-Short-Inverted-Outline.svg",
+    "public/generated/Logo-Short-Inverted-Outline.png"
+  );
+  await download(
+    "https://raw.githubusercontent.com/Draco-lang/Language-suggestions/main/Resources/Derpy-Outlined.svg",
+    "public/generated/derpy.svg"
+  );
+  emojis.push("derpy");
+  let octokit;
+  if (process.env.GITHUB_TOKEN !== undefined && process.env.GITHUB_TOKEN.length > 0) {
+    const auth = createTokenAuth(process.env.GITHUB_TOKEN);
+    const authentication = await auth();
+    octokit = new Octokit({
+      auth: authentication.token,
     });
+  } else {
+    octokit = new Octokit();
+  }
 
-    const promises = response.data.map(async element => {
-        console.log(`Downloading ${element.name}...`);
-        const resp = await fetch(element.download_url);
-        const emoji = await resp.text();
-        await fs.promises.writeFile(`public/generated/${element.name}`, emoji);
-    });
-    await Promise.all(promises);
+  const response = await octokit.repos.getContent({
+    owner: "Draco-lang",
+    repo: "Language-suggestions",
+    path: "Resources/Emojis",
+  });
 
-    response.data
-        .map(s => s.name.replace(/\.[^/.]+$/, ""))
-        .forEach(s => emojis.push(s));
-    await fs.promises.writeFile(
-        "src/generated/emojiTypes.ts",
-        `export type EmojiName = ${emojis.map(s => `"${s}"`).join(" | ")};`
-    );
+  const promises = response.data.map(async (element) => {
+    console.log(`Downloading ${element.name}...`);
+    const resp = await fetch(element.download_url);
+    const emoji = await resp.text();
+    await fs.promises.writeFile(`public/generated/${element.name}`, emoji);
+  });
+  await Promise.all(promises);
+
+  response.data.map((s) => s.name.replace(/\.[^/.]+$/, "")).forEach((s) => emojis.push(s));
+  await fs.promises.writeFile(
+    "src/generated/emojiTypes.ts",
+    `export type EmojiName = ${emojis.map((s) => `"${s}"`).join(" | ")};`
+  );
 }
 main();
 
 async function download(url, path) {
-    const resp = await fetch(url);
-    const text = await resp.text();
-    await fs.promises.writeFile(path, text);
+  const resp = await fetch(url);
+  const text = await resp.text();
+  await fs.promises.writeFile(path, text);
 }
 
 async function downloadThemedImage(urls, outputPath, isUrl) {
-    const svg = await createThemeBasedLogo(urls.light, urls.dark, isUrl);
-    await fs.promises.writeFile(outputPath, svg);
-    console.log(`Image downloaded and saved as ${outputPath}`);
+  const svg = await createThemeBasedLogo(urls.light, urls.dark, isUrl);
+  await fs.promises.writeFile(outputPath, svg);
+  console.log(`Image downloaded and saved as ${outputPath}`);
 }
 
 function stripXMLHeader(xml) {
-    const regex = /<\??xml[^>]*>/;
-    return xml.replace(regex, "");
+  const regex = /<\??xml[^>]*>/;
+  return xml.replace(regex, "");
 }
 
 function stripViewBox(xml) {
-    const regex = /viewBox="[^"]*"/;
-    return xml.replace(regex, "");
+  const regex = /viewBox="[^"]*"/;
+  return xml.replace(regex, "");
 }
 
 function extractOpeningSvgTag(svgContent) {
-    const openingSvgTagRegex = /<svg\b[^>]*>/;
-    const openingSvgTagMatch = svgContent.match(openingSvgTagRegex);
-    return openingSvgTagMatch ? openingSvgTagMatch[0] : "<svg xmlns=\"http://www.w3.org/2000/svg\">";
+  const openingSvgTagRegex = /<svg\b[^>]*>/;
+  const openingSvgTagMatch = svgContent.match(openingSvgTagRegex);
+  return openingSvgTagMatch ? openingSvgTagMatch[0] : '<svg xmlns="http://www.w3.org/2000/svg">';
 }
 
 async function createThemeBasedLogo(lightUrl, darkUrl, isUrl) {
-    let bodyLight, bodyDark;
-    if (isUrl) {
-        const responseLight = await fetch(lightUrl);
-        const responseDark = await fetch(darkUrl);
-        bodyLight = await responseLight.text();
-        bodyDark = await responseDark.text();
-    } else {
-        bodyLight = await fs.promises.readFile(lightUrl, "utf-8");
-        bodyDark = await fs.promises.readFile(darkUrl, "utf-8");
-    }
+  let bodyLight, bodyDark;
+  if (isUrl) {
+    const responseLight = await fetch(lightUrl);
+    const responseDark = await fetch(darkUrl);
+    bodyLight = await responseLight.text();
+    bodyDark = await responseDark.text();
+  } else {
+    bodyLight = await fs.promises.readFile(lightUrl, "utf-8");
+    bodyDark = await fs.promises.readFile(darkUrl, "utf-8");
+  }
 
-    let logoLight = stripXMLHeader(bodyLight);
-    logoLight = stripViewBox(logoLight);
-    let logoDark = stripXMLHeader(bodyDark);
-    logoDark = stripViewBox(logoDark);
-    const openingSvgTag = extractOpeningSvgTag(bodyLight);
-    const logoSvg =
-        `<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+  let logoLight = stripXMLHeader(bodyLight);
+  logoLight = stripViewBox(logoLight);
+  let logoDark = stripXMLHeader(bodyDark);
+  logoDark = stripViewBox(logoDark);
+  const openingSvgTag = extractOpeningSvgTag(bodyLight);
+  const logoSvg = `<?xml version="1.0" encoding="UTF-8" standalone="no"?>
             ${openingSvgTag}
             <style>
             @media (prefers-color-scheme: dark) {
@@ -132,12 +135,12 @@ ${logoLight}
             </g>
         </svg>
 `;
-    return logoSvg;
+  return logoSvg;
 }
 
 async function downloadAndConvertSvgToPng(url, outputPath) {
-    const resp = await fetch(url);
-    const svgContent = await resp.text();
-    await sharp(Buffer.from(svgContent)).png().toFile(outputPath);
-    console.log(`SVG converted and saved as ${outputPath}`);
-}
+  const resp = await fetch(url);
+  const svgContent = await resp.text();
+  await sharp(Buffer.from(svgContent)).png().toFile(outputPath);
+  console.log(`SVG converted and saved as ${outputPath}`);
+}
diff --git a/next.config.js b/next.config.js
@@ -2,10 +2,10 @@
 
 /** @type {import('next').NextConfig} */
 const nextConfig = {
-    output: "export",
-    images: {
-        unoptimized: true,
-    }
+  output: "export",
+  images: {
+    unoptimized: true,
+  },
 };
 
 module.exports = nextConfig;