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

@ -44,14 +44,14 @@ Exclamation mark is optional too, but it's used to mark breaking changes.
Must be one of the following:
- **build**: Changes that affect the build system or external dependencies (example scopes: gulp, broccoli, npm)
- **ci**: Changes to our CI configuration files and scripts (examples: CircleCi, SauceLabs)
- **docs**: Documentation only changes
- **feat**: A new feature
- **fix**: A bug fix
- **perf**: A code change that improves performance
- **refactor**: A code change that neither fixes a bug nor adds a feature
- **test**: Adding missing tests or correcting existing tests
- **build**: Changes that affect the build system or external dependencies (example scopes: gulp, broccoli, npm)
- **ci**: Changes to our CI configuration files and scripts (examples: CircleCi, SauceLabs)
- **docs**: Documentation only changes
- **feat**: A new feature
- **fix**: A bug fix
- **perf**: A code change that improves performance
- **refactor**: A code change that neither fixes a bug nor adds a feature
- **test**: Adding missing tests or correcting existing tests
##### Scope
@ -59,27 +59,27 @@ The scope should be the name of the npm package affected (as perceived by the pe
The following is the list of supported scopes:
- `layouts`
- `components`
- `components-widgets`
- `components-atoms`
- `pages`
- `pages-blog`
- `pages-docs`
- `scripts`
- `assets`
- `layouts`
- `components`
- `components-widgets`
- `components-atoms`
- `pages`
- `pages-blog`
- `pages-docs`
- `scripts`
- `assets`
There are currently a few exceptions to the "use package name" rule:
- none/empty string: useful for `test` and `refactor` changes that are done across all packages (e.g. `test: add missing unit tests`) and for docs changes that are not related to a specific package (e.g. `docs: fix typo in tutorial`).
- none/empty string: useful for `test` and `refactor` changes that are done across all packages (e.g. `test: add missing unit tests`) and for docs changes that are not related to a specific package (e.g. `docs: fix typo in tutorial`).
##### Summary
Use the summary field to provide a succinct description of the change:
- use the imperative, present tense: "change" not "changed" nor "changes"
- don't capitalize the first letter
- no dot (.) at the end
- use the imperative, present tense: "change" not "changed" nor "changes"
- don't capitalize the first letter
- no dot (.) at the end
#### <a name="commit-body"></a>Commit Message Body
@ -92,8 +92,8 @@ You can include a comparison of the previous behavior with the new behavior in o
The footer is optional and is used for two purposes:
- To reference issues that this commit closes
- To include information that doesn't fit in the header or body, such as a link to a file or a suggestion to review a pull request
- To reference issues that this commit closes
- To include information that doesn't fit in the header or body, such as a link to a file or a suggestion to review a pull request
The format for the footer is as follows:
@ -113,5 +113,5 @@ If the commit reverts a previous commit, it should begin with `revert: `, follow
The content of the commit message body should contain:
- information about the SHA of the commit being reverted in the following format: `This reverts commit <SHA>`,
- a clear description of the reason for reverting the commit message.
- information about the SHA of the commit being reverted in the following format: `This reverts commit <SHA>`,
- a clear description of the reason for reverting the commit message.

View file

@ -20,9 +20,9 @@
## Usage
- To run the development server: `npm run dev`
- To build the project for production: `npm run build`
- To preview the production build: `npm run preview`
- To run the development server: `npm run dev`
- To build the project for production: `npm run build`
- To preview the production build: `npm run preview`
## Contributing

View file

@ -4,26 +4,29 @@ import { writeFile, readFile } from "node:fs/promises";
import { fileURLToPath } from "node:url";
export default (): AstroIntegration => {
return {
name: "hyro-minify",
hooks: {
"astro:build:done": async (opts) => {
for (const route of opts.routes) {
const content = await readFile(fileURLToPath(route.distURL!), "utf-8");
const minified = await minify(content, {
removeAttributeQuotes: true,
collapseWhitespace: true,
minifyCSS: true,
html5: true,
removeComments: true,
minifyJS: true,
minifyURLs: true,
});
return {
name: "hyro-minify",
hooks: {
"astro:build:done": async (opts) => {
for (const route of opts.routes) {
const content = await readFile(
fileURLToPath(route.distURL!),
"utf-8"
);
const minified = await minify(content, {
removeAttributeQuotes: true,
collapseWhitespace: true,
minifyCSS: true,
html5: true,
removeComments: true,
minifyJS: true,
minifyURLs: true,
});
await writeFile(fileURLToPath(route.distURL!), minified, "utf-8");
console.log(`Minified ${route.distURL!.pathname}`)
}
}
await writeFile(fileURLToPath(route.distURL!), minified, "utf-8");
console.log(`Minified ${route.distURL!.pathname}`);
}
}
}
},
},
};
};

View file

@ -19,25 +19,25 @@ import minify from "./astro-integrations/minify";
// https://astro.build/config
export default defineConfig({
site: "https://xhyrom.dev/",
//prepisat uwu
integrations: [
tailwind(),
image(),
sitemap(),
compress({
svg: false,
html: false,
}),
prefetch(),
robotsTxt({
policy: [
{
userAgent: "*",
},
],
sitemap: true,
}),
minify(),
],
site: "https://xhyrom.dev/",
//prepisat uwu
integrations: [
tailwind(),
image(),
sitemap(),
compress({
svg: false,
html: false,
}),
prefetch(),
robotsTxt({
policy: [
{
userAgent: "*",
},
],
sitemap: true,
}),
minify(),
],
});

View file

@ -1,33 +1,40 @@
{
"name": "@example/basics",
"type": "module",
"version": "0.0.1",
"private": true,
"scripts": {
"dev": "astro dev",
"start": "astro dev",
"build": "astro build",
"preview": "astro preview",
"astro": "astro"
},
"dependencies": {
"@astrojs/image": "^0.16.8",
"@astrojs/prefetch": "^0.2.1",
"@astrojs/sitemap": "^1.3.1",
"@astrojs/tailwind": "^3.1.2",
"@tailwindcss/typography": "^0.5.9",
"astro": "^2.4.5",
"astro-compress": "^1.1.42",
"astro-robots-txt": "^0.5.0",
"fireworks-js": "^2.10.4",
"html-minifier": "^4.0.0",
"tailwind": "^4.0.0",
"tailwindcss": "^3.3.2"
},
"devDependencies": {
"@types/html-minifier": "^4.0.2",
"prettier": "2.8.8",
"prettier-plugin-astro": "^0.8.1",
"prettier-plugin-tailwindcss": "^0.2.8"
"name": "@example/basics",
"type": "module",
"version": "0.0.1",
"private": true,
"scripts": {
"dev": "astro dev",
"start": "astro dev",
"build": "astro build",
"preview": "astro preview",
"astro": "astro"
},
"dependencies": {
"@astrojs/image": "^0.16.8",
"@astrojs/prefetch": "^0.2.1",
"@astrojs/sitemap": "^1.3.1",
"@astrojs/tailwind": "^3.1.2",
"@tailwindcss/typography": "^0.5.9",
"astro": "^2.4.5",
"astro-compress": "^1.1.42",
"astro-icon": "^0.8.0",
"astro-robots-txt": "^0.5.0",
"astro-tooltips": "^0.6.2",
"fireworks-js": "^2.10.4",
"html-minifier": "^4.0.0",
"tailwind": "^4.0.0",
"tailwindcss": "^3.3.2"
},
"devDependencies": {
"@types/html-minifier": "^4.0.2",
"prettier": "2.8.8",
"prettier-plugin-astro": "^0.8.1",
"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>

8
src/env.d.ts vendored
View file

@ -1,9 +1,9 @@
/// <reference types="astro/client" />
interface ImportMetaEnv {
readonly GITHUB_ACCESS_TOKEN: string;
readonly GITHUB_ACCESS_TOKEN: string;
}
interface ImportMeta {
readonly env: ImportMetaEnv;
}
readonly env: ImportMetaEnv;
}

View file

@ -1,25 +1,86 @@
---
import Container from "../components/atoms/Container.astro";
import Navbar from "../components/widgets/Navbar.astro";
import TechIcon from "../components/widgets/TechIcon.astro";
import Layout from "../layouts/Layout.astro";
const skills = [
[
"TypeScript, JavaScript",
"Bun, Node.js, little Deno",
"React, Astro, Next.js",
],
["HTML", "TailwindCSS", "CSS"],
["Java", "Kotlin", "Rust (learning now)"],
["SQLite", "MySQL", "MongoDB", "Redis"],
[
"Git",
"GitHub Actions",
"GitHub Pages",
"Cloudflare Workers",
"Cloudflare Pages",
"Netlify",
],
{
name: "TypeScript",
icon: "logos:typescript-icon",
},
{
name: "JavaScript",
icon: "logos:javascript",
},
{
name: "Bun",
icon: "logos:bun",
},
{
name: "NodeJS",
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
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) => (
<>
{skill.map((item) => (
<li>{item}</li>
))}
<hr class="my-4" />
</>
<TechIcon icon={skill.icon} name={skill.name} />
))
}
</ul>

View file

@ -11,4 +11,4 @@ Aliquam sollicitudin dolor et faucibus lobortis. Nullam et nisi mi. Nunc congue
Proin placerat nisi ac nibh aliquet pellentesque. Fusce efficitur, arcu aliquet faucibus fringilla, arcu nisi vestibulum nunc, at porttitor massa erat vel nisi. Duis in ornare risus, blandit lobortis magna. Donec convallis sem a metus luctus porttitor. Quisque interdum faucibus nunc nec tincidunt. Nunc ut ullamcorper libero, in ornare risus. Fusce at vestibulum mauris. Proin euismod lectus et facilisis eleifend. Interdum et malesuada fames ac ante ipsum primis in faucibus. In lobortis gravida augue at tincidunt. Fusce volutpat nisi id tempor luctus. Aenean ac hendrerit nisl. Donec ut venenatis ligula. Donec purus nibh, maximus id diam sit amet, viverra congue mi.
Quisque consectetur porttitor diam nec porta. Donec ut tortor in dui ultrices vestibulum ut quis tellus. Morbi dignissim quis enim volutpat sagittis. Pellentesque iaculis mattis varius. Nam non laoreet ex. Etiam vestibulum leo augue, ut auctor lacus feugiat vitae. Maecenas vitae ante non nisl vestibulum luctus eu et tortor. Proin velit nisl, dapibus pellentesque interdum non, efficitur in orci.
Quisque consectetur porttitor diam nec porta. Donec ut tortor in dui ultrices vestibulum ut quis tellus. Morbi dignissim quis enim volutpat sagittis. Pellentesque iaculis mattis varius. Nam non laoreet ex. Etiam vestibulum leo augue, ut auctor lacus feugiat vitae. Maecenas vitae ante non nisl vestibulum luctus eu et tortor. Proin velit nisl, dapibus pellentesque interdum non, efficitur in orci.

View file

@ -1,4 +1,4 @@
---
title: Test
layout: ../../../../layouts/docs/ItemLayout.astro
---
---

View file

@ -1,3 +1,3 @@
---
title: Introduction
---
---

View file

@ -1,3 +1,3 @@
---
title: Test
---
---

View file

@ -1,9 +1,9 @@
document.querySelector(".hamburger").addEventListener("click", () => {
document.querySelector(".nav-links").classList.remove("hidden");
document.querySelector(".hamburger-close").classList.remove("hidden");
document.querySelector(".nav-links").classList.remove("hidden");
document.querySelector(".hamburger-close").classList.remove("hidden");
});
document.querySelector(".hamburger-close").addEventListener("click", () => {
document.querySelector(".nav-links").classList.toggle("hidden");
document.querySelector(".hamburger-close").classList.toggle("hidden");
document.querySelector(".nav-links").classList.toggle("hidden");
document.querySelector(".hamburger-close").classList.toggle("hidden");
});

View file

@ -1,6 +1,6 @@
document.getElementById("sidebar-show").addEventListener("click", () => {
document.getElementById("sidebar-show").classList.remove("hidden");
document.getElementById("sidebar").classList.toggle("-translate-x-full");
document.getElementById("sidebar").classList.remove("invisible");
document.getElementById("open-arrow").classList.toggle("rotate-180");
document.getElementById("sidebar-show").classList.remove("hidden");
document.getElementById("sidebar").classList.toggle("-translate-x-full");
document.getElementById("sidebar").classList.remove("invisible");
document.getElementById("open-arrow").classList.toggle("rotate-180");
});

View file

@ -1,18 +1,18 @@
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ["./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}"],
theme: {
extend: {
colors: {
dark: "#0D0D0D",
gray: "#131313",
hyroGold: "#fbc119",
},
dropShadow: {
yellow: ["0 35px 35px rgba(250, 193, 25, 0.5)"],
yellowalt: ["0 4px 12px rgba(250, 193, 25, 0.8)"],
},
},
content: ["./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}"],
theme: {
extend: {
colors: {
dark: "#0D0D0D",
gray: "#131313",
hyroGold: "#fbc119",
},
dropShadow: {
yellow: ["0 35px 35px rgba(250, 193, 25, 0.5)"],
yellowalt: ["0 4px 12px rgba(250, 193, 25, 0.8)"],
},
},
plugins: [require("@tailwindcss/typography")],
},
plugins: [require("@tailwindcss/typography")],
};

View file

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

View file

@ -1,23 +1,23 @@
{
"headers": [
"headers": [
{
"source": "/(.*)",
"headers": [
{
"source": "/(.*)",
"headers": [
{
"key": "Content-Security-Policy",
"value": "img-src 'self'; font-src *; style-src 'self' 'unsafe-inline' fonts.googleapis.com; script-src 'self' 'unsafe-inline'; object-src 'none'"
}
]
"key": "Content-Security-Policy",
"value": "img-src 'self'; font-src *; style-src 'self' 'unsafe-inline' fonts.googleapis.com; script-src 'self' 'unsafe-inline'; object-src 'none'"
}
],
"redirects": [
{
"source": "/docs",
"destination": "/docs/items/nadpis/introduction"
},
{
"source": "/docs/",
"destination": "/docs/items/nadpis/introduction"
}
]
]
}
],
"redirects": [
{
"source": "/docs",
"destination": "/docs/items/nadpis/introduction"
},
{
"source": "/docs/",
"destination": "/docs/items/nadpis/introduction"
}
]
}