Skip to content

Commit 069769c

Browse files
openscriptopenscript
committed
chore: extract technologies
1 parent 4b1a52c commit 069769c

File tree

3 files changed

+122
-94
lines changed

3 files changed

+122
-94
lines changed

‎src/content.config.ts‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -98,6 +98,18 @@ const questionsCollection = defineCollection({
9898
),
9999
});
100100

101+
const technologiesCollection = defineCollection({
102+
loader: i18nFileLoader("./src/content/technologies/index.yaml"),
103+
schema: extendI18nLoaderSchema(
104+
z.object({
105+
id: z.string(),
106+
label: localized(z.string()),
107+
logo: z.string(),
108+
url: z.string().url(),
109+
}),
110+
),
111+
});
112+
101113
const teamCollection = defineCollection({
102114
loader: i18nFileLoader("./src/content/team/index.yaml"),
103115
schema: ({ image }) =>
@@ -133,6 +145,7 @@ export const collections = {
133145
referenceCompanies: referenceCompaniesCollection,
134146
referenceProjects: referenceProjectsCollection,
135147
questions: questionsCollection,
148+
technologies: technologiesCollection,
136149
team: teamCollection,
137150
galleries: galleriesCollection,
138151
};

‎src/content/technologies/index.yaml‎

Lines changed: 96 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,96 @@
1+
- id: astro
2+
label:
3+
en: Astro - The web framework for content-driven sites
4+
de: Astro - Das Web-Framework für inhaltsorientierte Seiten
5+
logo: logo-astro
6+
url: https://astro.build
7+
- id: css
8+
label:
9+
en: CSS - Cascading Style Sheets for styling the web
10+
de: CSS - Cascading Style Sheets für das Webdesign
11+
logo: logo-css
12+
url: https://www.w3.org/Style/CSS/Overview.en.html
13+
- id: docker
14+
label:
15+
en: Docker - Develop, ship, and run applications in containers
16+
de: Docker - Anwendungen in Containern entwickeln, ausliefern und betreiben
17+
logo: logo-docker
18+
url: https://www.docker.com
19+
- id: forgejo
20+
label:
21+
en: Forgejo - Beyond coding. We forge.
22+
de: Forgejo - Mehr als Programmieren. Wir schmieden.
23+
logo: logo-forgejo
24+
url: https://forgejo.org
25+
- id: graphql
26+
label:
27+
en: GraphQL - A query language for your API
28+
de: GraphQL - Eine Abfragesprache für Ihre API
29+
logo: logo-graphql
30+
url: https://graphql.org
31+
- id: html5
32+
label:
33+
en: HTML5 - The standard markup language for the web
34+
de: HTML5 - Die Standard-Auszeichnungssprache fürs Web
35+
logo: logo-html5
36+
url: https://developer.mozilla.org/en-US/docs/Web/HTML
37+
- id: kubernetes
38+
label:
39+
en: Kubernetes - Production-grade container orchestration
40+
de: Kubernetes - Container-Orchestrierung für den produktiven Einsatz
41+
logo: logo-kubernetes
42+
url: https://kubernetes.io
43+
- id: mantine
44+
label:
45+
en: Mantine - React components and hooks library
46+
de: Mantine - Komponenten- und Hook-Bibliothek für React
47+
logo: logo-mantine
48+
url: https://mantine.dev
49+
- id: nestjs
50+
label:
51+
en: NestJS - A progressive Node.js framework
52+
de: NestJS - Ein fortschrittliches Node.js-Framework
53+
logo: logo-nestjs
54+
url: https://nestjs.com
55+
- id: php
56+
label:
57+
en: PHP - Popular general-purpose scripting language
58+
de: PHP - Beliebte universelle Skriptsprache
59+
logo: logo-php
60+
url: https://www.php.net
61+
- id: postgresql
62+
label:
63+
en: PostgreSQL - The world's most advanced open-source database
64+
de: PostgreSQL - Die fortschrittlichste Open-Source-Datenbank
65+
logo: logo-postgresql
66+
url: https://www.postgresql.org
67+
- id: react
68+
label:
69+
en: React - A JavaScript library for building user interfaces
70+
de: React - JavaScript-Bibliothek für Benutzeroberflächen
71+
logo: logo-react
72+
url: https://react.dev
73+
- id: ruby
74+
label:
75+
en: Ruby - A dynamic, open-source programming language
76+
de: Ruby - Dynamische, quelloffene Programmiersprache
77+
logo: logo-ruby
78+
url: https://www.ruby-lang.org
79+
- id: rubyonrails
80+
label:
81+
en: Ruby on Rails - A web application framework for Ruby
82+
de: Ruby on Rails - Webframework für Ruby
83+
logo: logo-rubyonrails
84+
url: https://rubyonrails.org
85+
- id: supabase
86+
label:
87+
en: Supabase - Open-source Firebase alternative
88+
de: Supabase - Open-Source-Alternative zu Firebase
89+
logo: logo-supabase
90+
url: https://supabase.com
91+
- id: typescript
92+
label:
93+
en: TypeScript - JavaScript with syntax for types
94+
de: TypeScript - JavaScript mit Syntax für Typen
95+
logo: logo-typescript
96+
url: https://www.typescriptlang.org

‎src/layouts/sections/ToolsSection.astro‎

Lines changed: 13 additions & 94 deletions
Original file line numberDiff line numberDiff line change
@@ -1,103 +1,18 @@
11
---
2+
import { currentLocale } from "astro-nanostores-i18n:runtime";
3+
import { getCollection } from "astro:content";
24
import Sprite from "../../components/Sprite.astro";
35
import SpriteData from "../../../res/sprite/sprite.json";
46
5-
type LogoItem = {
6-
logo: keyof typeof SpriteData;
7-
url: string;
8-
label: string;
9-
};
10-
11-
const logos: LogoItem[] = [
12-
{
13-
logo: "logo-astro",
14-
url: "https://astro.build",
15-
label: "Astro - The web framework for content-driven sites",
16-
},
17-
{
18-
logo: "logo-css",
19-
url: "https://www.w3.org/Style/CSS/Overview.en.html",
20-
label: "CSS - Cascading Style Sheets for styling the web",
21-
},
22-
{
23-
logo: "logo-docker",
24-
url: "https://www.docker.com",
25-
label: "Docker - Develop, ship, and run applications in containers",
26-
},
27-
{
28-
logo: "logo-forgejo",
29-
url: "https://forgejo.org",
30-
label: "Forgejo - Beyond coding. We forge.",
31-
},
32-
{
33-
logo: "logo-graphql",
34-
url: "https://graphql.org",
35-
label: "GraphQL - A query language for your API",
36-
},
37-
{
38-
logo: "logo-html5",
39-
url: "https://developer.mozilla.org/en-US/docs/Web/HTML",
40-
label: "HTML5 - The standard markup language for the web",
41-
},
42-
{
43-
logo: "logo-kubernetes",
44-
url: "https://kubernetes.io",
45-
label: "Kubernetes - Production-grade container orchestration",
46-
},
47-
{
48-
logo: "logo-mantine",
49-
url: "https://mantine.dev",
50-
label: "Mantine - React components and hooks library",
51-
},
52-
{
53-
logo: "logo-nestjs",
54-
url: "https://nestjs.com",
55-
label: "NestJS - A progressive Node.js framework",
56-
},
57-
{
58-
logo: "logo-php",
59-
url: "https://www.php.net",
60-
label: "PHP - Popular general-purpose scripting language",
61-
},
62-
{
63-
logo: "logo-postgresql",
64-
url: "https://www.postgresql.org",
65-
label: "PostgreSQL - The world's most advanced open-source database",
66-
},
67-
{
68-
logo: "logo-react",
69-
url: "https://react.dev",
70-
label: "React - A JavaScript library for building user interfaces",
71-
},
72-
{
73-
logo: "logo-ruby",
74-
url: "https://www.ruby-lang.org",
75-
label: "Ruby - A dynamic, open-source programming language",
76-
},
77-
{
78-
logo: "logo-rubyonrails",
79-
url: "https://rubyonrails.org",
80-
label: "Ruby on Rails - A web application framework for Ruby",
81-
},
82-
{
83-
logo: "logo-supabase",
84-
url: "https://supabase.com",
85-
label: "Supabase - Open-source Firebase alternative",
86-
},
87-
{
88-
logo: "logo-typescript",
89-
url: "https://www.typescriptlang.org",
90-
label: "TypeScript - JavaScript with syntax for types",
91-
},
92-
];
93-
94-
const randomNumber = (min: number, max: number) => Math.floor(Math.random() * (max - min + 1)) + min;
95-
967
type Props = {
978
class?: string;
989
};
9910
10011
const { class: className } = Astro.props;
12+
const locale = currentLocale.get();
13+
const technologies = await getCollection("technologies", (entry) => entry.data.locale === locale);
14+
15+
const randomNumber = (min: number, max: number) => Math.floor(Math.random() * (max - min + 1)) + min;
10116
---
10217

10318
<section class:list={[className]}>
@@ -106,9 +21,13 @@ const { class: className } = Astro.props;
10621
</header>
10722
<div class="tools-grid">
10823
{
109-
logos.map((item) => (
110-
<a href={item.url} aria-label={item.label} style={`rotate: ${randomNumber(-45, 45)}deg`}>
111-
<Sprite name={item.logo} />
24+
technologies.map(({ data: item }) => (
25+
<a
26+
href={item.url}
27+
aria-label={typeof item.label === "string" ? item.label : ""}
28+
style={`rotate: ${randomNumber(-45, 45)}deg`}
29+
>
30+
<Sprite name={item.logo as keyof typeof SpriteData} />
11231
</a>
11332
))
11433
}

0 commit comments

Comments
 (0)