diff --git a/.eslintrc.js b/.eslintrc.js index 1486ab4..7eb5c3f 100644 --- 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 index de753c5..963354f 100644 --- a/.prettierrc +++ b/.prettierrc @@ -1,3 +1,3 @@ { - "printWidth": 100 + "printWidth": 120 } diff --git a/generateAssets.js b/generateAssets.js index ab4d541..ab32426 100644 --- 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 = /]*>/; - const openingSvgTagMatch = svgContent.match(openingSvgTagRegex); - return openingSvgTagMatch ? openingSvgTagMatch[0] : ""; + const openingSvgTagRegex = /]*>/; + const openingSvgTagMatch = svgContent.match(openingSvgTagRegex); + return openingSvgTagMatch ? openingSvgTagMatch[0] : ''; } 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 = - ` + let logoLight = stripXMLHeader(bodyLight); + logoLight = stripViewBox(logoLight); + let logoDark = stripXMLHeader(bodyDark); + logoDark = stripViewBox(logoDark); + const openingSvgTag = extractOpeningSvgTag(bodyLight); + const logoSvg = ` ${openingSvgTag} `; - 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}`); -} \ No newline at end of file + 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 index ff7a6ce..a2e8112 100644 --- 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; diff --git a/package-lock.json b/package-lock.json index 7cc6bf0..53e923b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -11,16 +11,16 @@ "@octokit/auth-token": "^4.0.0", "@octokit/rest": "^20.0.1", "front-matter": "^4.0.2", - "highlight.js": "^11.8.0", - "marked": "^9.1.2", - "next": "^14.0.1", + "highlight.js": "^11.9.0", + "marked": "^10.0.0", + "next": "^14.0.2", "react": "^18.2.0", "react-dom": "^18.2.0", "sharp": "^0.32.6" }, "devDependencies": { - "@types/node": "^20.6.5", - "@types/react": "^18.2.22", + "@types/node": "^20.9.0", + "@types/react": "^18.2.37", "@types/react-dom": "^18.2.7", "@typescript-eslint/eslint-plugin": "^6.7.3", "eslint-config-next": "^13.5.3", @@ -301,9 +301,9 @@ "peer": true }, "node_modules/@next/env": { - "version": "14.0.1", - "resolved": "https://registry.npmjs.org/@next/env/-/env-14.0.1.tgz", - "integrity": "sha512-Ms8ZswqY65/YfcjrlcIwMPD7Rg/dVjdLapMcSHG26W6O67EJDF435ShW4H4LXi1xKO1oRc97tLXUpx8jpLe86A==" + "version": "14.0.2", + "resolved": "https://registry.npmjs.org/@next/env/-/env-14.0.2.tgz", + "integrity": "sha512-HAW1sljizEaduEOes/m84oUqeIDAUYBR1CDwu2tobNlNDFP3cSm9d6QsOsGeNlIppU1p/p1+bWbYCbvwjFiceA==" }, "node_modules/@next/eslint-plugin-next": { "version": "13.5.3", @@ -335,9 +335,9 @@ } }, "node_modules/@next/swc-darwin-arm64": { - "version": "14.0.1", - "resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-14.0.1.tgz", - "integrity": "sha512-JyxnGCS4qT67hdOKQ0CkgFTp+PXub5W1wsGvIq98TNbF3YEIN7iDekYhYsZzc8Ov0pWEsghQt+tANdidITCLaw==", + "version": "14.0.2", + "resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-14.0.2.tgz", + "integrity": "sha512-i+jQY0fOb8L5gvGvojWyZMfQoQtDVB2kYe7fufOEiST6sicvzI2W5/EXo4lX5bLUjapHKe+nFxuVv7BA+Pd7LQ==", "cpu": [ "arm64" ], @@ -350,9 +350,9 @@ } }, "node_modules/@next/swc-darwin-x64": { - "version": "14.0.1", - "resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-14.0.1.tgz", - "integrity": "sha512-625Z7bb5AyIzswF9hvfZWa+HTwFZw+Jn3lOBNZB87lUS0iuCYDHqk3ujuHCkiyPtSC0xFBtYDLcrZ11mF/ap3w==", + "version": "14.0.2", + "resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-14.0.2.tgz", + "integrity": "sha512-zRCAO0d2hW6gBEa4wJaLn+gY8qtIqD3gYd9NjruuN98OCI6YyelmhWVVLlREjS7RYrm9OUQIp/iVJFeB6kP1hg==", "cpu": [ "x64" ], @@ -365,9 +365,9 @@ } }, "node_modules/@next/swc-linux-arm64-gnu": { - "version": "14.0.1", - "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-14.0.1.tgz", - "integrity": "sha512-iVpn3KG3DprFXzVHM09kvb//4CNNXBQ9NB/pTm8LO+vnnnaObnzFdS5KM+w1okwa32xH0g8EvZIhoB3fI3mS1g==", + "version": "14.0.2", + "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-14.0.2.tgz", + "integrity": "sha512-tSJmiaon8YaKsVhi7GgRizZoV0N1Sx5+i+hFTrCKKQN7s3tuqW0Rov+RYdPhAv/pJl4qiG+XfSX4eJXqpNg3dA==", "cpu": [ "arm64" ], @@ -380,9 +380,9 @@ } }, "node_modules/@next/swc-linux-arm64-musl": { - "version": "14.0.1", - "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-14.0.1.tgz", - "integrity": "sha512-mVsGyMxTLWZXyD5sen6kGOTYVOO67lZjLApIj/JsTEEohDDt1im2nkspzfV5MvhfS7diDw6Rp/xvAQaWZTv1Ww==", + "version": "14.0.2", + "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-14.0.2.tgz", + "integrity": "sha512-dXJLMSEOwqJKcag1BeX1C+ekdPPJ9yXbWIt3nAadhbLx5CjACoB2NQj9Xcqu2tmdr5L6m34fR+fjGPs+ZVPLzA==", "cpu": [ "arm64" ], @@ -395,9 +395,9 @@ } }, "node_modules/@next/swc-linux-x64-gnu": { - "version": "14.0.1", - "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-14.0.1.tgz", - "integrity": "sha512-wMqf90uDWN001NqCM/auRl3+qVVeKfjJdT9XW+RMIOf+rhUzadmYJu++tp2y+hUbb6GTRhT+VjQzcgg/QTD9NQ==", + "version": "14.0.2", + "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-14.0.2.tgz", + "integrity": "sha512-WC9KAPSowj6as76P3vf1J3mf2QTm3Wv3FBzQi7UJ+dxWjK3MhHVWsWUo24AnmHx9qDcEtHM58okgZkXVqeLB+Q==", "cpu": [ "x64" ], @@ -410,9 +410,9 @@ } }, "node_modules/@next/swc-linux-x64-musl": { - "version": "14.0.1", - "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-14.0.1.tgz", - "integrity": "sha512-ol1X1e24w4j4QwdeNjfX0f+Nza25n+ymY0T2frTyalVczUmzkVD7QGgPTZMHfR1aLrO69hBs0G3QBYaj22J5GQ==", + "version": "14.0.2", + "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-14.0.2.tgz", + "integrity": "sha512-KSSAwvUcjtdZY4zJFa2f5VNJIwuEVnOSlqYqbQIawREJA+gUI6egeiRu290pXioQXnQHYYdXmnVNZ4M+VMB7KQ==", "cpu": [ "x64" ], @@ -425,9 +425,9 @@ } }, "node_modules/@next/swc-win32-arm64-msvc": { - "version": "14.0.1", - "resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-14.0.1.tgz", - "integrity": "sha512-WEmTEeWs6yRUEnUlahTgvZteh5RJc4sEjCQIodJlZZ5/VJwVP8p2L7l6VhzQhT4h7KvLx/Ed4UViBdne6zpIsw==", + "version": "14.0.2", + "resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-14.0.2.tgz", + "integrity": "sha512-2/O0F1SqJ0bD3zqNuYge0ok7OEWCQwk55RPheDYD0va5ij7kYwrFkq5ycCRN0TLjLfxSF6xI5NM6nC5ux7svEQ==", "cpu": [ "arm64" ], @@ -440,9 +440,9 @@ } }, "node_modules/@next/swc-win32-ia32-msvc": { - "version": "14.0.1", - "resolved": "https://registry.npmjs.org/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-14.0.1.tgz", - "integrity": "sha512-oFpHphN4ygAgZUKjzga7SoH2VGbEJXZa/KL8bHCAwCjDWle6R1SpiGOdUdA8EJ9YsG1TYWpzY6FTbUA+iAJeww==", + "version": "14.0.2", + "resolved": "https://registry.npmjs.org/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-14.0.2.tgz", + "integrity": "sha512-vJI/x70Id0oN4Bq/R6byBqV1/NS5Dl31zC+lowO8SDu1fHmUxoAdILZR5X/sKbiJpuvKcCrwbYgJU8FF/Gh50Q==", "cpu": [ "ia32" ], @@ -455,9 +455,9 @@ } }, "node_modules/@next/swc-win32-x64-msvc": { - "version": "14.0.1", - "resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-14.0.1.tgz", - "integrity": "sha512-FFp3nOJ/5qSpeWT0BZQ+YE1pSMk4IMpkME/1DwKBwhg4mJLB9L+6EXuJi4JEwaJdl5iN+UUlmUD3IsR1kx5fAg==", + "version": "14.0.2", + "resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-14.0.2.tgz", + "integrity": "sha512-Ut4LXIUvC5m8pHTe2j0vq/YDnTEyq6RSR9vHYPqnELrDapPhLNz9Od/L5Ow3J8RNDWpEnfCiQXuVdfjlNEJ7ug==", "cpu": [ "x64" ], @@ -683,10 +683,13 @@ "peer": true }, "node_modules/@types/node": { - "version": "20.6.5", - "resolved": "https://registry.npmjs.org/@types/node/-/node-20.6.5.tgz", - "integrity": "sha512-2qGq5LAOTh9izcc0+F+dToFigBWiK1phKPt7rNhOqJSr35y8rlIBjDwGtFSgAI6MGIhjwOVNSQZVdJsZJ2uR1w==", - "dev": true + "version": "20.9.0", + "resolved": "https://registry.npmjs.org/@types/node/-/node-20.9.0.tgz", + "integrity": "sha512-nekiGu2NDb1BcVofVcEKMIwzlx4NjHlcjhoxxKBNLtz15Y1z7MYf549DFvkHSId02Ax6kGwWntIBPC3l/JZcmw==", + "dev": true, + "dependencies": { + "undici-types": "~5.26.4" + } }, "node_modules/@types/normalize-package-data": { "version": "2.4.2", @@ -702,9 +705,9 @@ "dev": true }, "node_modules/@types/react": { - "version": "18.2.22", - "resolved": "https://registry.npmjs.org/@types/react/-/react-18.2.22.tgz", - "integrity": "sha512-60fLTOLqzarLED2O3UQImc/lsNRgG0jE/a1mPW9KjMemY0LMITWEsbS4VvZ4p6rorEHd5YKxxmMKSDK505GHpA==", + "version": "18.2.37", + "resolved": "https://registry.npmjs.org/@types/react/-/react-18.2.37.tgz", + "integrity": "sha512-RGAYMi2bhRgEXT3f4B92WTohopH6bIXw05FuGlmJEnv/omEn190+QYEIYxIAuIBdKgboYYdVved2p1AxZVQnaw==", "dev": true, "dependencies": { "@types/prop-types": "*", @@ -2910,9 +2913,9 @@ } }, "node_modules/highlight.js": { - "version": "11.8.0", - "resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-11.8.0.tgz", - "integrity": "sha512-MedQhoqVdr0U6SSnWPzfiadUcDHfN/Wzq25AkXiQv9oiOO/sG0S7XkvpFIqWBl9Yq1UYyYOOVORs5UW2XlPyzg==", + "version": "11.9.0", + "resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-11.9.0.tgz", + "integrity": "sha512-fJ7cW7fQGCYAkgv4CPfwFHrfd/cLS4Hau96JuJ+ZTOWhjnhoeN1ub1tFmALm/+lW5z4WCAuAV9bm05AP0mS6Gw==", "engines": { "node": ">=12.0.0" } @@ -3629,14 +3632,14 @@ } }, "node_modules/marked": { - "version": "9.1.2", - "resolved": "https://registry.npmjs.org/marked/-/marked-9.1.2.tgz", - "integrity": "sha512-qoKMJqK0w6vkLk8+KnKZAH6neUZSNaQqVZ/h2yZ9S7CbLuFHyS2viB0jnqcWF9UKjwsAbMrQtnQhdmdvOVOw9w==", + "version": "10.0.0", + "resolved": "https://registry.npmjs.org/marked/-/marked-10.0.0.tgz", + "integrity": "sha512-YiGcYcWj50YrwBgNzFoYhQ1hT6GmQbFG8SksnYJX1z4BXTHSOrz1GB5/Jm2yQvMg4nN1FHP4M6r03R10KrVUiA==", "bin": { "marked": "bin/marked.js" }, "engines": { - "node": ">= 16" + "node": ">= 18" } }, "node_modules/mathml-tag-names": { @@ -3818,11 +3821,11 @@ "dev": true }, "node_modules/next": { - "version": "14.0.1", - "resolved": "https://registry.npmjs.org/next/-/next-14.0.1.tgz", - "integrity": "sha512-s4YaLpE4b0gmb3ggtmpmV+wt+lPRuGtANzojMQ2+gmBpgX9w5fTbjsy6dXByBuENsdCX5pukZH/GxdFgO62+pA==", + "version": "14.0.2", + "resolved": "https://registry.npmjs.org/next/-/next-14.0.2.tgz", + "integrity": "sha512-jsAU2CkYS40GaQYOiLl9m93RTv2DA/tTJ0NRlmZIBIL87YwQ/xR8k796z7IqgM3jydI8G25dXvyYMC9VDIevIg==", "dependencies": { - "@next/env": "14.0.1", + "@next/env": "14.0.2", "@swc/helpers": "0.5.2", "busboy": "1.6.0", "caniuse-lite": "^1.0.30001406", @@ -3837,15 +3840,15 @@ "node": ">=18.17.0" }, "optionalDependencies": { - "@next/swc-darwin-arm64": "14.0.1", - "@next/swc-darwin-x64": "14.0.1", - "@next/swc-linux-arm64-gnu": "14.0.1", - "@next/swc-linux-arm64-musl": "14.0.1", - "@next/swc-linux-x64-gnu": "14.0.1", - "@next/swc-linux-x64-musl": "14.0.1", - "@next/swc-win32-arm64-msvc": "14.0.1", - "@next/swc-win32-ia32-msvc": "14.0.1", - "@next/swc-win32-x64-msvc": "14.0.1" + "@next/swc-darwin-arm64": "14.0.2", + "@next/swc-darwin-x64": "14.0.2", + "@next/swc-linux-arm64-gnu": "14.0.2", + "@next/swc-linux-arm64-musl": "14.0.2", + "@next/swc-linux-x64-gnu": "14.0.2", + "@next/swc-linux-x64-musl": "14.0.2", + "@next/swc-win32-arm64-msvc": "14.0.2", + "@next/swc-win32-ia32-msvc": "14.0.2", + "@next/swc-win32-x64-msvc": "14.0.2" }, "peerDependencies": { "@opentelemetry/api": "^1.1.0", @@ -5703,6 +5706,12 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/undici-types": { + "version": "5.26.5", + "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-5.26.5.tgz", + "integrity": "sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA==", + "dev": true + }, "node_modules/universal-user-agent": { "version": "6.0.0", "resolved": "https://registry.npmjs.org/universal-user-agent/-/universal-user-agent-6.0.0.tgz", @@ -6040,9 +6049,9 @@ "peer": true }, "@next/env": { - "version": "14.0.1", - "resolved": "https://registry.npmjs.org/@next/env/-/env-14.0.1.tgz", - "integrity": "sha512-Ms8ZswqY65/YfcjrlcIwMPD7Rg/dVjdLapMcSHG26W6O67EJDF435ShW4H4LXi1xKO1oRc97tLXUpx8jpLe86A==" + "version": "14.0.2", + "resolved": "https://registry.npmjs.org/@next/env/-/env-14.0.2.tgz", + "integrity": "sha512-HAW1sljizEaduEOes/m84oUqeIDAUYBR1CDwu2tobNlNDFP3cSm9d6QsOsGeNlIppU1p/p1+bWbYCbvwjFiceA==" }, "@next/eslint-plugin-next": { "version": "13.5.3", @@ -6070,57 +6079,57 @@ } }, "@next/swc-darwin-arm64": { - "version": "14.0.1", - "resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-14.0.1.tgz", - "integrity": "sha512-JyxnGCS4qT67hdOKQ0CkgFTp+PXub5W1wsGvIq98TNbF3YEIN7iDekYhYsZzc8Ov0pWEsghQt+tANdidITCLaw==", + "version": "14.0.2", + "resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-14.0.2.tgz", + "integrity": "sha512-i+jQY0fOb8L5gvGvojWyZMfQoQtDVB2kYe7fufOEiST6sicvzI2W5/EXo4lX5bLUjapHKe+nFxuVv7BA+Pd7LQ==", "optional": true }, "@next/swc-darwin-x64": { - "version": "14.0.1", - "resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-14.0.1.tgz", - "integrity": "sha512-625Z7bb5AyIzswF9hvfZWa+HTwFZw+Jn3lOBNZB87lUS0iuCYDHqk3ujuHCkiyPtSC0xFBtYDLcrZ11mF/ap3w==", + "version": "14.0.2", + "resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-14.0.2.tgz", + "integrity": "sha512-zRCAO0d2hW6gBEa4wJaLn+gY8qtIqD3gYd9NjruuN98OCI6YyelmhWVVLlREjS7RYrm9OUQIp/iVJFeB6kP1hg==", "optional": true }, "@next/swc-linux-arm64-gnu": { - "version": "14.0.1", - "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-14.0.1.tgz", - "integrity": "sha512-iVpn3KG3DprFXzVHM09kvb//4CNNXBQ9NB/pTm8LO+vnnnaObnzFdS5KM+w1okwa32xH0g8EvZIhoB3fI3mS1g==", + "version": "14.0.2", + "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-14.0.2.tgz", + "integrity": "sha512-tSJmiaon8YaKsVhi7GgRizZoV0N1Sx5+i+hFTrCKKQN7s3tuqW0Rov+RYdPhAv/pJl4qiG+XfSX4eJXqpNg3dA==", "optional": true }, "@next/swc-linux-arm64-musl": { - "version": "14.0.1", - "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-14.0.1.tgz", - "integrity": "sha512-mVsGyMxTLWZXyD5sen6kGOTYVOO67lZjLApIj/JsTEEohDDt1im2nkspzfV5MvhfS7diDw6Rp/xvAQaWZTv1Ww==", + "version": "14.0.2", + "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-14.0.2.tgz", + "integrity": "sha512-dXJLMSEOwqJKcag1BeX1C+ekdPPJ9yXbWIt3nAadhbLx5CjACoB2NQj9Xcqu2tmdr5L6m34fR+fjGPs+ZVPLzA==", "optional": true }, "@next/swc-linux-x64-gnu": { - "version": "14.0.1", - "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-14.0.1.tgz", - "integrity": "sha512-wMqf90uDWN001NqCM/auRl3+qVVeKfjJdT9XW+RMIOf+rhUzadmYJu++tp2y+hUbb6GTRhT+VjQzcgg/QTD9NQ==", + "version": "14.0.2", + "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-14.0.2.tgz", + "integrity": "sha512-WC9KAPSowj6as76P3vf1J3mf2QTm3Wv3FBzQi7UJ+dxWjK3MhHVWsWUo24AnmHx9qDcEtHM58okgZkXVqeLB+Q==", "optional": true }, "@next/swc-linux-x64-musl": { - "version": "14.0.1", - "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-14.0.1.tgz", - "integrity": "sha512-ol1X1e24w4j4QwdeNjfX0f+Nza25n+ymY0T2frTyalVczUmzkVD7QGgPTZMHfR1aLrO69hBs0G3QBYaj22J5GQ==", + "version": "14.0.2", + "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-14.0.2.tgz", + "integrity": "sha512-KSSAwvUcjtdZY4zJFa2f5VNJIwuEVnOSlqYqbQIawREJA+gUI6egeiRu290pXioQXnQHYYdXmnVNZ4M+VMB7KQ==", "optional": true }, "@next/swc-win32-arm64-msvc": { - "version": "14.0.1", - "resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-14.0.1.tgz", - "integrity": "sha512-WEmTEeWs6yRUEnUlahTgvZteh5RJc4sEjCQIodJlZZ5/VJwVP8p2L7l6VhzQhT4h7KvLx/Ed4UViBdne6zpIsw==", + "version": "14.0.2", + "resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-14.0.2.tgz", + "integrity": "sha512-2/O0F1SqJ0bD3zqNuYge0ok7OEWCQwk55RPheDYD0va5ij7kYwrFkq5ycCRN0TLjLfxSF6xI5NM6nC5ux7svEQ==", "optional": true }, "@next/swc-win32-ia32-msvc": { - "version": "14.0.1", - "resolved": "https://registry.npmjs.org/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-14.0.1.tgz", - "integrity": "sha512-oFpHphN4ygAgZUKjzga7SoH2VGbEJXZa/KL8bHCAwCjDWle6R1SpiGOdUdA8EJ9YsG1TYWpzY6FTbUA+iAJeww==", + "version": "14.0.2", + "resolved": "https://registry.npmjs.org/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-14.0.2.tgz", + "integrity": "sha512-vJI/x70Id0oN4Bq/R6byBqV1/NS5Dl31zC+lowO8SDu1fHmUxoAdILZR5X/sKbiJpuvKcCrwbYgJU8FF/Gh50Q==", "optional": true }, "@next/swc-win32-x64-msvc": { - "version": "14.0.1", - "resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-14.0.1.tgz", - "integrity": "sha512-FFp3nOJ/5qSpeWT0BZQ+YE1pSMk4IMpkME/1DwKBwhg4mJLB9L+6EXuJi4JEwaJdl5iN+UUlmUD3IsR1kx5fAg==", + "version": "14.0.2", + "resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-14.0.2.tgz", + "integrity": "sha512-Ut4LXIUvC5m8pHTe2j0vq/YDnTEyq6RSR9vHYPqnELrDapPhLNz9Od/L5Ow3J8RNDWpEnfCiQXuVdfjlNEJ7ug==", "optional": true }, "@nodelib/fs.scandir": { @@ -6290,10 +6299,13 @@ "peer": true }, "@types/node": { - "version": "20.6.5", - "resolved": "https://registry.npmjs.org/@types/node/-/node-20.6.5.tgz", - "integrity": "sha512-2qGq5LAOTh9izcc0+F+dToFigBWiK1phKPt7rNhOqJSr35y8rlIBjDwGtFSgAI6MGIhjwOVNSQZVdJsZJ2uR1w==", - "dev": true + "version": "20.9.0", + "resolved": "https://registry.npmjs.org/@types/node/-/node-20.9.0.tgz", + "integrity": "sha512-nekiGu2NDb1BcVofVcEKMIwzlx4NjHlcjhoxxKBNLtz15Y1z7MYf549DFvkHSId02Ax6kGwWntIBPC3l/JZcmw==", + "dev": true, + "requires": { + "undici-types": "~5.26.4" + } }, "@types/normalize-package-data": { "version": "2.4.2", @@ -6309,9 +6321,9 @@ "dev": true }, "@types/react": { - "version": "18.2.22", - "resolved": "https://registry.npmjs.org/@types/react/-/react-18.2.22.tgz", - "integrity": "sha512-60fLTOLqzarLED2O3UQImc/lsNRgG0jE/a1mPW9KjMemY0LMITWEsbS4VvZ4p6rorEHd5YKxxmMKSDK505GHpA==", + "version": "18.2.37", + "resolved": "https://registry.npmjs.org/@types/react/-/react-18.2.37.tgz", + "integrity": "sha512-RGAYMi2bhRgEXT3f4B92WTohopH6bIXw05FuGlmJEnv/omEn190+QYEIYxIAuIBdKgboYYdVved2p1AxZVQnaw==", "dev": true, "requires": { "@types/prop-types": "*", @@ -7941,9 +7953,9 @@ } }, "highlight.js": { - "version": "11.8.0", - "resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-11.8.0.tgz", - "integrity": "sha512-MedQhoqVdr0U6SSnWPzfiadUcDHfN/Wzq25AkXiQv9oiOO/sG0S7XkvpFIqWBl9Yq1UYyYOOVORs5UW2XlPyzg==" + "version": "11.9.0", + "resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-11.9.0.tgz", + "integrity": "sha512-fJ7cW7fQGCYAkgv4CPfwFHrfd/cLS4Hau96JuJ+ZTOWhjnhoeN1ub1tFmALm/+lW5z4WCAuAV9bm05AP0mS6Gw==" }, "hosted-git-info": { "version": "4.1.0", @@ -8467,9 +8479,9 @@ "peer": true }, "marked": { - "version": "9.1.2", - "resolved": "https://registry.npmjs.org/marked/-/marked-9.1.2.tgz", - "integrity": "sha512-qoKMJqK0w6vkLk8+KnKZAH6neUZSNaQqVZ/h2yZ9S7CbLuFHyS2viB0jnqcWF9UKjwsAbMrQtnQhdmdvOVOw9w==" + "version": "10.0.0", + "resolved": "https://registry.npmjs.org/marked/-/marked-10.0.0.tgz", + "integrity": "sha512-YiGcYcWj50YrwBgNzFoYhQ1hT6GmQbFG8SksnYJX1z4BXTHSOrz1GB5/Jm2yQvMg4nN1FHP4M6r03R10KrVUiA==" }, "mathml-tag-names": { "version": "2.1.3", @@ -8599,20 +8611,20 @@ "dev": true }, "next": { - "version": "14.0.1", - "resolved": "https://registry.npmjs.org/next/-/next-14.0.1.tgz", - "integrity": "sha512-s4YaLpE4b0gmb3ggtmpmV+wt+lPRuGtANzojMQ2+gmBpgX9w5fTbjsy6dXByBuENsdCX5pukZH/GxdFgO62+pA==", - "requires": { - "@next/env": "14.0.1", - "@next/swc-darwin-arm64": "14.0.1", - "@next/swc-darwin-x64": "14.0.1", - "@next/swc-linux-arm64-gnu": "14.0.1", - "@next/swc-linux-arm64-musl": "14.0.1", - "@next/swc-linux-x64-gnu": "14.0.1", - "@next/swc-linux-x64-musl": "14.0.1", - "@next/swc-win32-arm64-msvc": "14.0.1", - "@next/swc-win32-ia32-msvc": "14.0.1", - "@next/swc-win32-x64-msvc": "14.0.1", + "version": "14.0.2", + "resolved": "https://registry.npmjs.org/next/-/next-14.0.2.tgz", + "integrity": "sha512-jsAU2CkYS40GaQYOiLl9m93RTv2DA/tTJ0NRlmZIBIL87YwQ/xR8k796z7IqgM3jydI8G25dXvyYMC9VDIevIg==", + "requires": { + "@next/env": "14.0.2", + "@next/swc-darwin-arm64": "14.0.2", + "@next/swc-darwin-x64": "14.0.2", + "@next/swc-linux-arm64-gnu": "14.0.2", + "@next/swc-linux-arm64-musl": "14.0.2", + "@next/swc-linux-x64-gnu": "14.0.2", + "@next/swc-linux-x64-musl": "14.0.2", + "@next/swc-win32-arm64-msvc": "14.0.2", + "@next/swc-win32-ia32-msvc": "14.0.2", + "@next/swc-win32-x64-msvc": "14.0.2", "@swc/helpers": "0.5.2", "busboy": "1.6.0", "caniuse-lite": "^1.0.30001406", @@ -9948,6 +9960,12 @@ "which-boxed-primitive": "^1.0.2" } }, + "undici-types": { + "version": "5.26.5", + "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-5.26.5.tgz", + "integrity": "sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA==", + "dev": true + }, "universal-user-agent": { "version": "6.0.0", "resolved": "https://registry.npmjs.org/universal-user-agent/-/universal-user-agent-6.0.0.tgz", diff --git a/package.json b/package.json index 29da049..dbb0852 100644 --- a/package.json +++ b/package.json @@ -6,9 +6,9 @@ "@octokit/auth-token": "^4.0.0", "@octokit/rest": "^20.0.1", "front-matter": "^4.0.2", - "highlight.js": "^11.8.0", - "marked": "^9.1.2", - "next": "^14.0.1", + "highlight.js": "^11.9.0", + "marked": "^10.0.0", + "next": "^14.0.2", "react": "^18.2.0", "react-dom": "^18.2.0", "sharp": "^0.32.6" @@ -40,8 +40,8 @@ ] }, "devDependencies": { - "@types/node": "^20.6.5", - "@types/react": "^18.2.22", + "@types/node": "^20.9.0", + "@types/react": "^18.2.37", "@types/react-dom": "^18.2.7", "@typescript-eslint/eslint-plugin": "^6.7.3", "eslint-config-next": "^13.5.3", diff --git a/public/bars.svg b/public/bars.svg new file mode 100644 index 0000000..50fcf48 --- /dev/null +++ b/public/bars.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/xmark.svg b/public/xmark.svg new file mode 100644 index 0000000..13e82fb --- /dev/null +++ b/public/xmark.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/app/LandingSegment.css b/src/app/LandingSegment.css index 8b4e6ac..fc32d01 100644 --- a/src/app/LandingSegment.css +++ b/src/app/LandingSegment.css @@ -7,6 +7,15 @@ justify-content: center; gap: 20px; margin-top: 3rem; + flex-wrap: wrap; + max-width: 535px; + flex-grow: 1; + margin-left: 20px; + margin-right: 20px; +} + +.main-buttons a { + flex-grow: 1; } .getstarted { @@ -32,4 +41,11 @@ .landing-segment { padding-bottom: 8em; text-align: center; + display: flex; + flex-direction: column; + align-items: center; +} + +.landing-segment > h1 { + max-width: 95%; } diff --git a/src/app/LandingSegment.tsx b/src/app/LandingSegment.tsx index 47569d7..fffe830 100644 --- a/src/app/LandingSegment.tsx +++ b/src/app/LandingSegment.tsx @@ -1,18 +1,19 @@ import DracoButton from "../components/DracoButton"; -import Image from "next/image"; import "./LandingSegment.css"; export default function LandingSegment() { return (
- Big Logo of Draco -

A new .NET programming language in the making

+

A new .NET programming language in the making.

Getting Started diff --git a/src/app/SecondSegment.css b/src/app/SecondSegment.css index db9fc7f..43f939c 100644 --- a/src/app/SecondSegment.css +++ b/src/app/SecondSegment.css @@ -21,3 +21,10 @@ .super-derpy { font-size: 100px; } + +/* stylelint-disable-next-line media-feature-range-notation */ +@media (max-width: 650px) { + .splash-code-viewer { + width: 90%; + } +} diff --git a/src/app/SuperDerpy.tsx b/src/app/SuperDerpy.tsx index aa7d38c..9aeef91 100644 --- a/src/app/SuperDerpy.tsx +++ b/src/app/SuperDerpy.tsx @@ -19,7 +19,7 @@ export default function SuperDerpy() { case 1: setEmoji({ name: "sad", - title: "Derpy is sad. He dislke to be clicked.", + title: "Derpy is sad. He dislikes to be clicked.", }); break; case 2: diff --git a/src/app/blog/layout.tsx b/src/app/blog/layout.tsx index b11d6a1..d7e1ac7 100644 --- a/src/app/blog/layout.tsx +++ b/src/app/blog/layout.tsx @@ -5,7 +5,7 @@ export const metadata: Metadata = generateMetadata({ title: "The Draco Blog", description: "Development diary of the language and compiler.", imagePng: "https://draco-lang.org/generated/Logo-Short-Inverted-Outline.png", - goBig: true, + goBig: false, }); export default async function RootLayout({ children }: { children: React.ReactNode }) { diff --git a/src/app/blog/page.css b/src/app/blog/page.css index f920907..f18b963 100644 --- a/src/app/blog/page.css +++ b/src/app/blog/page.css @@ -16,6 +16,8 @@ height: 10.75rem; color: white; text-decoration: none; + margin-left: 1em; + margin-right: 1em; } .blog-entries > a:hover { @@ -23,7 +25,7 @@ } .blog-entries > a img { - width: 20rem; + max-width: 30%; } .blog-entries > a h1 { @@ -35,3 +37,23 @@ .article-preview-left-part { padding: 1.75rem 1.75rem 1.25rem; } + +/* stylelint-disable-next-line media-feature-range-notation */ +@media (max-width: 900px) { + .blog-entries > a { + height: 15.75rem; + } +} + +@media (max-width: 650px) { + .blog-entries > a { + flex-direction: column-reverse; + justify-content: center; + align-items: center; + height: 20rem; + } + .blog-entries > a img { + max-width: 100%; + min-height: 30%; + } +} diff --git a/src/app/community/page.css b/src/app/community/page.css index 601c7e6..e45b746 100644 --- a/src/app/community/page.css +++ b/src/app/community/page.css @@ -1,6 +1,6 @@ .community-content { display: flex; - flex-direction: row; + flex-flow: row wrap; justify-content: center; margin-left: 50px; margin-right: 50px; @@ -17,7 +17,9 @@ margin: 10px; padding: 0 30px 0 30px; width: 100%; + min-width: 300px; flex: 1 1 0px; + flex-shrink: 1; } .community-content p { @@ -50,3 +52,9 @@ .community-content .community-padding { margin-bottom: 1em; } + +@media (max-width: 650px) { + .community-content { + margin: 0 1em 2em 1em; + } +} diff --git a/src/app/community/page.tsx b/src/app/community/page.tsx index 129982d..39b2d16 100644 --- a/src/app/community/page.tsx +++ b/src/app/community/page.tsx @@ -11,18 +11,11 @@ export default function Page() {

Discord

- - Draco Development, and general chatters happens on Discord. - + Draco Development, and general chatters happens on Discord. Come talk to us! - {" "} - And yes, we have Derpy emojis  {" "} - + And yes, we have Derpy emojis   +

@@ -31,9 +24,8 @@ export default function Page() {

Twitch

- We sometimes stream Draco development on our{" "} - Twitch Channel. Come - watch us code, and ask us questions! + We sometimes stream Draco development on our Twitch Channel. + Come watch us code, and ask us questions!

Youtube

- Check out our{" "} - YouTube channel{" "} - for VODs of our Twitch streams. + Check out our YouTube channel for VODs of our Twitch + streams.
@@ -57,17 +48,13 @@ export default function Page() {

Draco is open source, and we welcome contributions! - Check out our GitHub organization to read the source code, or - contribute to the Draco Compiler, this website, or our specs. + Check out our GitHub organization to read the source code, or contribute to the Draco Compiler, this + website, or our specs.

- The Compiler. - - - The Specification - - - - This Website - + - The Specification + - This Website
diff --git a/src/app/docs/page.tsx b/src/app/docs/page.tsx index af1e948..457d811 100644 --- a/src/app/docs/page.tsx +++ b/src/app/docs/page.tsx @@ -4,8 +4,7 @@ import Emoji from "@/components/Emoji"; export default function Page() { return (
-

Coming Soon 

{" "} - +

Coming Soon 

); } diff --git a/src/app/layout.css b/src/app/layout.css index 8e00e06..dfe7f80 100644 --- a/src/app/layout.css +++ b/src/app/layout.css @@ -6,8 +6,8 @@ body { align-items: center; justify-content: center; margin: 0; - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, - Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", + "Droid Sans", "Helvetica Neue", sans-serif; } @media (prefers-color-scheme: dark) { @@ -30,45 +30,51 @@ a:visited { } code { - font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", - monospace; + font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", monospace; } .top-bar { - height: 64px; + padding: 4.5px 16px 4.5px 16px; display: flex; flex-direction: row; align-items: center; justify-content: space-between; position: fixed; - width: 100%; + width: 100vw; + box-sizing: border-box; background-color: rgba(40, 44, 52, 95%); backdrop-filter: blur(16px) saturate(2); - border-bottom: 0 solid rgb(229 231 235); + border-bottom: 0 solid #e5e7eb; + flex-grow: 1; + z-index: 100; } .top-bar-logo { - padding-left: 16px; height: 50px; } .top-bar-link { display: flex; align-items: center; + margin-top: 9px; + margin-bottom: 9px; } -.topbar-icon { +.topbar-github-icon { height: 28px; + margin-bottom: 11px; + margin-top: 11px; } .links { + margin-left: auto; display: flex; flex-direction: row; - gap: 40px; - width: 75%; - justify-content: flex-end; + justify-content: space-around; align-items: center; - padding-right: 25px; + padding-left: 15px; + max-width: 730px; + flex-grow: 1; } .links .draco-button:hover { @@ -86,6 +92,38 @@ code { box-sizing: border-box; } +.hamburger-checkbox { + display: none; +} + +.hamburger-icon { + display: none; + cursor: pointer; + border-radius: 100%; + padding: 12px; + left: 0; + justify-self: start; + position: relative; +} + +.hamburger-icon:hover { + background-color: #00c8bd50; +} + +.hamburger-icon div { + height: 22px; + width: 22px; + background-image: url("/bars.svg"); + filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(100%) contrast(100%); + background-repeat: no-repeat; + background-size: contain; + background-position: center; +} + +.hamburger-checkbox:checked + .hamburger-icon div { + background-image: url("/xmark.svg"); +} + body:has(.page-docs) .active-on-docs { outline: 1px solid #00c8bd; } @@ -126,3 +164,56 @@ h5, h6 { scroll-margin-top: 64px; } + +.hamburger-wrapper { + display: flex; + flex-direction: row; + align-items: center; + justify-content: flex-start; + flex-grow: 1; +} + +.specs-submenu { + display: none; + flex-direction: column; + margin-left: 20px; + margin-top: -20px; + margin-bottom: -20px; +} + +/* Maybe it's a good linting rule, maybe not, I don't know. */ +/* stylelint-disable-next-line media-feature-range-notation */ +@media (max-width: 650px) { + .hamburger-icon { + display: block; + } + + .top-bar { + justify-content: space-between; + display: flex; + padding-left: 4.5px; + } + + .top-bar-link img { + height: 40px; + } + + .links { + padding-top: 30px; + display: none; + flex-direction: column; + position: absolute; + left: 0; + top: 64px; + width: 100%; + background-color: rgba(40, 44, 52); + height: calc(100vh - 64px); + align-items: flex-start; + justify-content: flex-start; + gap: 30px; + } + + .hamburger-checkbox:checked ~ div { + display: flex; + } +} diff --git a/src/app/layout.tsx b/src/app/layout.tsx index e2ce137..7a26374 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -4,6 +4,7 @@ import Image from "next/image"; import "./layout.css"; import { Metadata } from "next"; import generateMetadata from "@/utils/metadata"; +import { getSpecsInfo } from "@/utils/github"; export const metadata: Metadata = generateMetadata({ title: "Draco Programming Language", @@ -16,45 +17,78 @@ export interface Params { children: React.ReactNode; } -export default function RootLayout({ children }: Params) { +export default async function RootLayout({ children }: Params) { + // This is an hack to close the hamburger menu when the user clicks on a link. + // Basically next.js prevent default behavior when clicking on a link + // So we can't close it with pure html/css + // So we add a lightweight script that close it when the user navigate to another page + const scriptHTML = ` + + `; + + const specs = await getSpecsInfo(); + const introduction = specs.find((s) => s.name === "Introduction")!; + specs.splice(specs.indexOf(introduction), 1); + specs.unshift(introduction); + return (
- +
+ + + + logo + +
+ + Documentation + + {/*redirect to getting started for now*/} + + Specification + +
+ {specs.map((spec) => ( + + {spec.name} + + ))} +
+ + Community + + + Blog + +
+
+
+ logo - -
- - Documentation - - {/*redirect to getting started for now*/} - - Specification - - - Community - - - Blog - - - GitHub Logo - -
+
{children}
diff --git a/src/app/specs/[articleName]/page.tsx b/src/app/specs/[articleName]/page.tsx index 65558d6..56283e0 100644 --- a/src/app/specs/[articleName]/page.tsx +++ b/src/app/specs/[articleName]/page.tsx @@ -18,6 +18,11 @@ export default async function Page({ params }: ArticleNameParams) {