feat: add icons into skills page

This commit is contained in:
xHyroM 2023-05-14 11:18:43 +02:00
parent 018ad211c3
commit e93ead1436
No known key found for this signature in database
GPG key ID: BE0423F386C436AA
20 changed files with 4334 additions and 1638 deletions

View file

@ -1 +1,2 @@
dist/* dist/*
node_modules/*

View file

@ -9,7 +9,10 @@ export default (): AstroIntegration => {
hooks: { hooks: {
"astro:build:done": async (opts) => { "astro:build:done": async (opts) => {
for (const route of opts.routes) { for (const route of opts.routes) {
const content = await readFile(fileURLToPath(route.distURL!), "utf-8"); const content = await readFile(
fileURLToPath(route.distURL!),
"utf-8"
);
const minified = await minify(content, { const minified = await minify(content, {
removeAttributeQuotes: true, removeAttributeQuotes: true,
collapseWhitespace: true, collapseWhitespace: true,
@ -21,9 +24,9 @@ export default (): AstroIntegration => {
}); });
await writeFile(fileURLToPath(route.distURL!), minified, "utf-8"); await writeFile(fileURLToPath(route.distURL!), minified, "utf-8");
console.log(`Minified ${route.distURL!.pathname}`) console.log(`Minified ${route.distURL!.pathname}`);
}
}
}
}
} }
},
},
};
};

View file

@ -18,7 +18,9 @@
"@tailwindcss/typography": "^0.5.9", "@tailwindcss/typography": "^0.5.9",
"astro": "^2.4.5", "astro": "^2.4.5",
"astro-compress": "^1.1.42", "astro-compress": "^1.1.42",
"astro-icon": "^0.8.0",
"astro-robots-txt": "^0.5.0", "astro-robots-txt": "^0.5.0",
"astro-tooltips": "^0.6.2",
"fireworks-js": "^2.10.4", "fireworks-js": "^2.10.4",
"html-minifier": "^4.0.0", "html-minifier": "^4.0.0",
"tailwind": "^4.0.0", "tailwind": "^4.0.0",
@ -29,5 +31,10 @@
"prettier": "2.8.8", "prettier": "2.8.8",
"prettier-plugin-astro": "^0.8.1", "prettier-plugin-astro": "^0.8.1",
"prettier-plugin-tailwindcss": "^0.2.8" "prettier-plugin-tailwindcss": "^0.2.8"
},
"pnpm": {
"patchedDependencies": {
"astro-icon@0.8.0": "patches/astro-icon@0.8.0.patch"
}
} }
} }

View file

@ -0,0 +1,17 @@
diff --git a/lib/resolver.ts b/lib/resolver.ts
index 3845a6542c924397a7c2e2daf0a78cdb243ec603..0a02155ecf9b7f208432eb7e7c0a1108de502786 100644
--- a/lib/resolver.ts
+++ b/lib/resolver.ts
@@ -1,10 +1,10 @@
-const baseURL = "https://api.astroicon.dev/v1/";
+const baseURL = "https://api.iconify.design/";
const requests = new Map();
const fetchCache = new Map();
// Default resolver fetches icons from `api.astroicon.dev`
export default async function get(pack: string, name: string) {
- const url = new URL(`./${pack}/${name}`, baseURL).toString();
+ const url = new URL(`./${pack}/${name}.svg`, baseURL).toString();
// Handle in-flight requests
if (requests.has(url)) {
return await requests.get(url);

File diff suppressed because it is too large Load diff

View file

@ -0,0 +1,18 @@
---
import { Tooltips } from "astro-tooltips";
import { Icon } from "astro-icon";
type Props = {
name: string;
icon: string;
};
const { name, icon } = Astro.props as Props;
---
<li class="p-2">
<Tooltips interactive={false} delay={[15, 150]} placement="top" />
<span title={name}>
<Icon name={icon} class="h-10 w-10" />
</span>
</li>

View file

@ -1,25 +1,86 @@
--- ---
import Container from "../components/atoms/Container.astro"; import Container from "../components/atoms/Container.astro";
import Navbar from "../components/widgets/Navbar.astro"; import Navbar from "../components/widgets/Navbar.astro";
import TechIcon from "../components/widgets/TechIcon.astro";
import Layout from "../layouts/Layout.astro"; import Layout from "../layouts/Layout.astro";
const skills = [ const skills = [
[ {
"TypeScript, JavaScript", name: "TypeScript",
"Bun, Node.js, little Deno", icon: "logos:typescript-icon",
"React, Astro, Next.js", },
], {
["HTML", "TailwindCSS", "CSS"], name: "JavaScript",
["Java", "Kotlin", "Rust (learning now)"], icon: "logos:javascript",
["SQLite", "MySQL", "MongoDB", "Redis"], },
[ {
"Git", name: "Bun",
"GitHub Actions", icon: "logos:bun",
"GitHub Pages", },
"Cloudflare Workers", {
"Cloudflare Pages", name: "NodeJS",
"Netlify", icon: "logos:nodejs-icon-alt",
], },
{
name: "Deno",
icon: "logos:deno",
},
{
name: "React",
icon: "logos:react",
},
{
name: "NextJS",
icon: "file-icons:nextjs",
},
{
name: "Astro",
icon: "vscode-icons:file-type-astro",
},
{
name: "TailwindCSS",
icon: "logos:tailwindcss-icon",
},
{
name: "Java",
icon: "logos:java",
},
{
name: "Kotlin",
icon: "logos:kotlin-icon",
},
{
name: "Rust",
icon: "vscode-icons:file-type-rust",
},
{
name: "Go",
icon: "vscode-icons:file-type-go-aqua",
},
{
name: "MySQL",
icon: "logos:mysql-icon",
},
{
name: "MongoDB",
icon: "devicon:mongodb",
},
{
name: "Redis",
icon: "devicon:redis",
},
{
name: "Git",
icon: "mdi:git",
},
{
name: "GitHub",
icon: "mdi:github",
},
{
name: "CloudFlare",
icon: "logos:cloudflare",
},
]; ];
--- ---
@ -89,15 +150,12 @@ const skills = [
My skill set spans various programming languages, databases, and My skill set spans various programming languages, databases, and
frameworks. frameworks.
<ul class="list-inside list-disc"> <ul
class="mx-auto mb-4 flex w-fit flex-wrap items-center justify-center rounded-md border border-neutral-800"
>
{ {
skills.map((skill) => ( skills.map((skill) => (
<> <TechIcon icon={skill.icon} name={skill.name} />
{skill.map((item) => (
<li>{item}</li>
))}
<hr class="my-4" />
</>
)) ))
} }
</ul> </ul>

View file

@ -1,3 +1,4 @@
{ {
"extends": "astro/tsconfigs/strict" "extends": "astro/tsconfigs/strict",
"exclude": ["node_modules", ".astro"]
} }