17 |
21 | );
22 | });
23 |
24 | export default NewLabel;
25 |
--------------------------------------------------------------------------------
/src/components/list-top-ten-cities.astro:
--------------------------------------------------------------------------------
1 | ---
2 | const { data } = Astro.props;
3 |
4 | const listData = data.sort((a, b) => b.total - a.total).slice(0, 10);
5 | ---
6 |
7 |
18 | NEW
19 |
20 | -
8 | {
9 | listData.map((item) => {
10 | const { flag, city, total } = item;
11 |
12 | return (
13 |
-
14 | 15 | {flag} 16 | {city} 17 |18 | {`x${total}`} 19 |
20 | );
21 | })
22 | }
23 |
8 |
31 | ) : null
32 | }
33 |
--------------------------------------------------------------------------------
/src/components/list-popular.astro:
--------------------------------------------------------------------------------
1 | ---
2 | const { data } = Astro.props;
3 | ---
4 |
5 | on this page
9 |-
10 | {headings.map((heading) => {
11 | const { depth, slug, text } = heading;
12 |
13 | const getPaddingDepth = {
14 | [2]: '4',
15 | [3]: '6',
16 | [4]: '8',
17 | [5]: '10',
18 | [6]: '12',
19 | };
20 |
21 | return (
22 |
- 23 | 24 | {text} 25 | 26 | 27 | ); 28 | })} 29 |
-
6 | {
7 | data.map((item, index) => {
8 | const { slug, title, total } = item;
9 |
10 | return (
11 |
-
12 |
13 | {index + 1}
14 |
15 |
16 | 17 | 18 | {title} 19 | 20 |21 | {`x${total}`} 22 |
23 | );
24 | })
25 | }
26 |
Users Profiles
21 |22 | View some users profiles here, and feel free to explore further by reading their profile post. 23 |
24 |-
8 | {
9 | listData.map((item, index) => {
10 | const { referrer, total } = item;
11 |
12 | return (
13 |
-
14 |
15 | {index + 1}
16 |
17 |
18 | 19 | 20 | {referrer} 21 | 22 |23 | 24 | {`x${total}`} 25 |
26 | );
27 | })
28 | }
29 |
-
8 | {
9 | tags.map((tag) => {
10 | const isHighlighted = formatSlug(tag) === highlighted ? true : false;
11 | return (
12 |
- 15 | {link ? ( 16 | 20 | {tag} 21 | 22 | ) : ( 23 | {tag} 24 | )} 25 | 26 | ); 27 | }) 28 | } 29 |
32 |
33 |
34 | );
35 | }
36 | );
37 |
38 | export default StackBlitz;
39 |
--------------------------------------------------------------------------------
/src/components/featured-image-card.astro:
--------------------------------------------------------------------------------
1 | ---
2 | import AstroImage from '../components/astro-image.astro';
3 |
4 | const { alt, thumbnail, text } = Astro.props;
5 | ---
6 |
7 |
8 |
27 |
--------------------------------------------------------------------------------
/src/components/search-input.tsx:
--------------------------------------------------------------------------------
1 | import { component$ } from '@builder.io/qwik';
2 |
3 | interface Props {
4 | handleModal?: () => void;
5 | handleInput: (event: any) => void;
6 | showEsc?: boolean;
7 | }
8 |
9 | const SearchInput = component$
9 |
11 |
17 |
24 | Share on X
25 |
26 |
12 |
15 |
22 | {showEsc ? (
23 |
31 | ) : null}
32 |
33 | );
34 | });
35 |
36 | export default SearchInput;
37 |
--------------------------------------------------------------------------------
/.github/workflows/greetings.yml:
--------------------------------------------------------------------------------
1 |
2 | name: Greetings
3 |
4 | on:
5 | pull_request:
6 | types: [opened]
7 | issues:
8 | types: [opened]
9 |
10 | permissions:
11 | issues: write
12 | pull-requests: write
13 |
14 | jobs:
15 | greet:
16 | runs-on: ubuntu-latest
17 | steps:
18 | - name: Greet on PRs and Issues
19 | uses: actions/github-script@v7
20 | with:
21 | script: |
22 | try {
23 | const isPR = context.payload.pull_request !== undefined;
24 | const number = isPR ? context.payload.pull_request.number : context.payload.issue.number;
25 | const commentBody = isPR
26 | ? `Welcome, @${{ github.actor }}! Thanks for raising the issue!`
27 | : `Great job, @${{ github.actor }}! Thanks for creating the pull request`;
28 |
29 | await github.rest.issues.createComment({
30 | owner: context.repo.owner,
31 | repo: context.repo.repo,
32 | issue_number: number,
33 | body: commentBody
34 | });
35 |
36 | console.log('Comment successfully created.');
37 | } catch (error) {
38 | console.error('Error creating comment:', error);
39 | // Do not mark the step as failed; continue with the workflow.
40 | }
41 |
--------------------------------------------------------------------------------
/.github/ISSUE_TEMPLATE/documentation.yml:
--------------------------------------------------------------------------------
1 |
2 | name: 🔖 Documentation update
3 | description: Improve Documentation
4 | title: '[Docs]: '
5 | labels: ['documentation']
6 | body:
7 | - type: markdown
8 | attributes:
9 | value: |
10 | Thanks for taking the time to fill out this documentation update template!
11 | - type: textarea
12 | id: improve-docs
13 | attributes:
14 | label: What's wrong with the current Documentation?
15 | description: What Issue are you facing?
16 | placeholder: Add descriptions
17 | value: 'Briefly Describe the Issue you are facing'
18 | validations:
19 | required: true
20 | - type: textarea
21 | id: screenshots
22 | attributes:
23 | label: Add screenshots
24 | description: Add Screenshots if Possible
25 | placeholder: Add screenshots
26 | value: 'Add Screenshots here'
27 | - type: checkboxes
28 | id: self-grab
29 | attributes:
30 | label: Self - Grab
31 | description: By checking this box, you acknowledge that you can fix this Documentation Error
32 | options:
33 | - label: I would like to work on this issue
34 | id: terms
35 | attributes:
36 | label: Code of Conduct
37 | description: By submitting this issue, you agree to follow our Code of Conduct
38 | options:
39 | - label: I agree to follow this project's Code of Conduct
40 |
--------------------------------------------------------------------------------
/src/components/nav-link.tsx:
--------------------------------------------------------------------------------
1 | import { component$ } from '@builder.io/qwik';
2 |
3 | interface Props {
4 | title: string;
5 | icon: string;
6 | stroke: boolean;
7 | slug: string;
8 | isActive: boolean;
9 | newCount: number;
10 | }
11 |
12 | const NavLink = component$ZemProfiles
17 |18 | ZemProfiles stands as an open-source platform, providing users with the opportunity to connect seamlessly with fellow developers. 19 | This connectivity is fostered through the simple act of adding one's Profile to the platform, 20 | thus creating a digital hub where like-minded individuals can engage, collaborate, and 21 | share insights within the expansive realm of software development. With its user-friendly interface and inclusive community ethos, 22 | ZemProfiles serves as a dynamic space where connections are forged, ideas are exchanged, and innovation thrives. 23 |
24 | 25 | 26 |Latest Profiles
27 |Latest profiles published on ZemProfiles 👇
28 |
10 |
26 | Loading...
27 |
28 | );
29 | });
30 |
31 | export default Loading;
32 |
--------------------------------------------------------------------------------
/src/components/click-to-copy-email.jsx:
--------------------------------------------------------------------------------
1 | import { component$, useSignal, $ } from '@builder.io/qwik';
2 |
3 | const ClickToCopyEmail = component$(() => {
4 | const defaultMessage = 'Click to Copy';
5 |
6 | const message = useSignal(defaultMessage);
7 |
8 | const handleClick = $(async (event) => {
9 | const text = event.target.innerHTML;
10 |
11 | try {
12 | await navigator.clipboard.writeText(text);
13 | message.value = 'Copied!';
14 | } catch (error) {
15 | console.error('Failed to copy: ', error);
16 | }
17 | });
18 |
19 | const handleMouseOut = $(() => {
20 | setTimeout(() => {
21 | message.value = defaultMessage;
22 | }, 200);
23 | });
24 |
25 | return (
26 |
27 |
40 |
43 |
44 | {message.value}
45 |
46 |
47 | );
48 | });
49 |
50 | export default ClickToCopyEmail;
51 |
--------------------------------------------------------------------------------
/src/components/audio-feed-embed.astro:
--------------------------------------------------------------------------------
1 | ---
2 | const { audioFeedId } = Astro.props;
3 | import Loading from './loading';
4 | ---
5 |
6 |
10 |
12 |
13 |
58 |
--------------------------------------------------------------------------------
/src/components/search-tags.tsx:
--------------------------------------------------------------------------------
1 | import { component$, useSignal, $, useVisibleTask$ } from '@builder.io/qwik';
2 | import SearchInput from './search-input';
3 |
4 | interface tagProps {
5 | name: string;
6 | slug: string;
7 | }
8 |
9 | interface Props {
10 | tags: tagProps[];
11 | }
12 |
13 | const SearchTags = component$
49 |
66 | );
67 | });
68 |
69 | export default SearchTags;
70 |
--------------------------------------------------------------------------------
/src/pages/tags/[...tag].astro:
--------------------------------------------------------------------------------
1 | ---
2 | export const prerender = true;
3 |
4 | import Main from '../../layouts/main.astro';
5 | import Aside from '../../components/aside.astro';
6 | import ProfileCard from '../../components/profile-card.astro';
7 | import CollectionsList from '../../components/collections-list.astro';
8 |
9 | import { collections } from '../../utils/all-collections';
10 | import { createTagsCollection } from '../../utils/create-tags-collection';
11 |
12 | interface Props {
13 | name: string;
14 | collection: { data: { tags: string[] } }[];
15 | }
16 |
17 | export async function getStaticPaths() {
18 | const tags = createTagsCollection(collections);
19 |
20 | return tags.map((tag: { name: string; slug: string }) => {
21 | const { name, slug } = tag;
22 |
23 | return {
24 | params: {
25 | tag: slug,
26 | },
27 | props: {
28 | name: name,
29 | collection: collections.filter((item) => item.data.tags.includes(name)),
30 | },
31 | };
32 | });
33 | }
34 |
35 | const { tag } = Astro.params;
36 | const site = Astro.site.href;
37 |
38 | const { name, collection } = Astro.props;
39 |
40 | const ogImage = `${site}/tags/${tag}/og.png`;
41 | ---
42 |
43 | -
51 | {filtered.value.map((item) => {
52 | const { name, slug } = item;
53 | return (
54 |
- 55 | 59 | {name} 60 | 61 | 62 | ); 63 | })} 64 |
{`${name} Developers`}
49 |50 | Here you'll find {collection.length} 51 | {collection.length > 1 ? 'developers' : 'developer'} who {collection.length > 1 ? 'are' : 'is'} familiar with 52 | {name}. 53 |
54 |45 | Status: Unpublished 46 |
47 | ) : null 48 | } 49 |
50 |
51 | {`By ${author}`}
52 |
53 | {title}
54 |
38 |
78 |
79 |
--------------------------------------------------------------------------------
/src/content/profiles/zemerik.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | base: posts
3 | title: Hemang Yadav
4 | tags: [Typescript, Javascript, Astro, Python, HTML, CSS, NodeJS, ReactJS, NextJS, MongoDB, Open-Source, Content Creator]
5 | date: 2024-05-06
6 | author: Hemang Yadav
7 | featuredImage: https://avatars.githubusercontent.com/u/133865660?v=4
8 | ---
9 |
10 |
11 | 💻Passionate Developer + 💪Expertise in Web-Development + 🎓Open-Source Enthusiast + 🏆Content Creator
12 |
13 |
14 | ## About Me:
15 |
16 | As a 15-year-old high school student, I am driven by an unwavering passion for pursuing a career as a front-end software developer.
17 | With a knack for transforming concepts into tangible realities, I possess a strong command of Frontend / Backend development, along with different API's
18 | enabling me to bring ideas to life through coding expertise.
19 |
20 | - Learn more about me through my [Terminal](https://zemeriksterminal.vercel.app)
21 |
22 |
23 |
24 | 
25 |
26 |
37 |
75 |
--------------------------------------------------------------------------------
/src/pages/tags/[tag]/og.png.ts:
--------------------------------------------------------------------------------
1 | export const prerender = true;
2 |
3 | import { ImageResponse, html } from 'og-img';
4 | import fs from 'fs';
5 | import path from 'path';
6 |
7 | import { collections } from '../../../utils/all-collections';
8 | import { createTagsCollection } from '../../../utils/create-tags-collection';
9 |
10 | export async function GET({ props }) {
11 | const { name, collection } = props;
12 |
13 | return new ImageResponse(
14 | html`
38 |
56 |
57 | -
58 | {
59 | chartData.map((item, index) => {
60 | const { tag, total } = item;
61 |
62 | return (
63 |
- 64 | 65 | 66 | {tag} 67 | 68 | {`x${total}`} 69 | 70 | ); 71 | }) 72 | } 73 |
15 |
`,
37 | {
38 | width: 1200,
39 | height: 600,
40 | fonts: [
41 | {
42 | name: 'Roboto Regular',
43 | data: fs.readFileSync(path.resolve('./public/fonts/Roboto-Regular.ttf')),
44 | weight: 400,
45 | style: 'normal',
46 | },
47 | {
48 | name: 'Inconsolata Bold',
49 | data: fs.readFileSync(path.resolve('./public/fonts/Inconsolata-Bold.ttf')),
50 | weight: 600,
51 | style: 'normal',
52 | },
53 | {
54 | name: 'Inconsolata Black',
55 | data: fs.readFileSync(path.resolve('./public/fonts/Inconsolata-Black.ttf')),
56 | weight: 900,
57 | style: 'normal',
58 | },
59 | ],
60 | }
61 | );
62 | }
63 |
64 | export async function getStaticPaths() {
65 | const tags = createTagsCollection(collections);
66 |
67 | return tags.map((tag: { name: string; slug: string }) => {
68 | const { name, slug } = tag;
69 |
70 | return {
71 | params: {
72 | tag: slug,
73 | },
74 | props: {
75 | name: name,
76 | collection: collections.filter((item) => item.data.tags.includes(name)),
77 | },
78 | };
79 | });
80 | }
81 |
--------------------------------------------------------------------------------
/src/components/profile-card.astro:
--------------------------------------------------------------------------------
1 | ---
2 | import { Image } from 'astro:assets';
3 | import ClickToCopyEmail from './click-to-copy-email';
4 |
5 | const locations = [
6 | // {
7 | // name: 'United Kingdom',
8 | // flag: '🇬🇧',
9 | // current: true,
10 | // },
11 | // {
12 | // name: 'Panama City, Panama',
13 | // flag: '🇵🇦',
14 | // current: true,
15 | // },
16 | // {
17 | // name: 'Medellín, Colombia',
18 | // flag: '🇨🇴',
19 | // current: false,
20 | // },
21 | // {
22 | // name: 'Los Angeles, USA',
23 | // flag: '🇺🇲',
24 | // current: false,
25 | // },
26 | // {
27 | // name: 'New Orleans, USA',
28 | // flag: '🇺🇲',
29 | // current: false,
30 | // },
31 | // {
32 | // name: 'Montreal, Canada',
33 | // flag: '🇨🇦',
34 | // current: false,
35 | // },
36 | // {
37 | // name: 'Toronto, Canada',
38 | // flag: '🇨🇦',
39 | // current: false,
40 | // },
41 | ];
42 | ---
43 |
44 |
16 |
17 |
18 |
36 |
19 |
21 | ${name}
20 |
22 | Tagged with ${name}
23 |
24 |
25 | Here you'll find ${collection.length} all developers
26 | about ${name}.
27 |
28 |
29 |
35 | ZemProfiles
30 | |
31 |
32 | ${`zemprofiles.vercel.app/tags/${name}`}
33 |
34 |
45 |
83 | 89 | 96 | Zemerik_X 97 | 98 | 99 |
100 |
--------------------------------------------------------------------------------
/src/components/collections-list.astro:
--------------------------------------------------------------------------------
1 | ---
2 | import { Image } from 'astro:assets';
3 | import AstroImage from './astro-image.astro';
4 |
5 | import NewLabel from './new-label';
6 | import TagsList from './tags-list.astro';
7 |
8 | import { formatDate } from '../utils/format-date';
9 | import { createExcerpt } from '../utils/create-excerpt';
10 |
11 | const { collections, slice, highlighted } = Astro.props;
12 | ---
13 |
14 |
53 |
82 | 54 | 55 | HEMANG YADAV 56 | 57 |
58 |FOUNDER + MAINTAINER
59 |60 |
💻Passionate Developer + 💪Expertise in Web-Development + 🎓Open-Source Enthusiast + 🏆Content Creator
61 | 62 | 80 |83 | 89 | 96 | Zemerik_X 97 | 98 | 99 |
-
15 | {
16 | collections
17 | .sort((a, b) => new Date(b.data.date).getTime() - new Date(a.data.date).getTime())
18 | .slice(0, slice || collections.length)
19 | .filter((item) => item.data.draft !== true)
20 | .map((collection) => {
21 | const {
22 | slug,
23 | data: { base, featuredImage, logo, publication, title, date, tags },
24 | } = collection;
25 |
26 | const excerpt = collection.body ? createExcerpt(collection.body) : '';
27 | const isGhost = base === 'ghosts';
28 |
29 | return (
30 |
- 33 | 76 | 77 | ); 78 | }) 79 | } 80 |
34 |
91 | );
92 | });
93 |
94 | export default HappyAllCities;
95 |
--------------------------------------------------------------------------------
/CONTRIBUTING.md:
--------------------------------------------------------------------------------
1 |
35 |
90 |
36 | {data.value ? (
37 | <>
38 | {data.value.length ? (
39 |
89 |
40 |
41 |
42 |
76 |
77 | ) : (
78 | | City | 44 |Country | 45 |Total | 46 |
|---|---|---|
| 54 | 63 | {city} 64 | | 65 | 66 |67 | {flag} 68 | {country} 69 | | 70 |{`x${formatNumber(total)}`} | 71 |
79 | No happy cities to display
80 |
81 | )}
82 |
83 | ) : (
84 |
85 |
87 | )}
88 |
2 |
3 | 
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
14 | ZemProfiles 15 |
16 | 17 |18 | Discover & Connect with Developers 19 |
20 | 21 |
22 | 
23 |
123 | Thanks for Visiting🙏 124 |
125 | 126 |
127 | Don't forget to leave a ⭐
128 |
129 | Made with 💖 by Hemang Yadav (Zemerik)
130 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
15 | ZemProfiles 16 |
17 | 18 |19 | Discover & Connect with Developers 20 |
21 | 22 |
23 |
24 |
37 |
38 | [](https://www.youtube.com/watch?v=5XyGaH9f0wA)
39 |
40 |
41 |
42 |
43 | ## ⭐ Features:
44 |
45 | - User Friendly UI/UX
46 | - Customizable Profile Post
47 | - Use markdown or html for styling
48 | - Search for Developers using Tags
49 | - List of all Developers
50 | - Profile Card for Maintainers
51 |
52 | Want to see any other features? Open an [issue](https://github.com/Zemerik/ZemProfiles/issues) and let us know!
53 |
54 | ## 💬 Fonts:
55 |
56 | - [x] Inconsolata-Black
57 | - [x] Inconsolata-Black
58 | - [x] Roboto-Regular
59 |
60 | ## 🏃♂️ Locally Running:
61 |
62 | - This project can be locally executed on your machine in 4 simple steps!
63 |
64 | > [!Tip]
65 | > [NodeJS](https://nodejs.org/) needs to be installed on your machine.
66 |
67 |
68 | 1. Make a `Copy` of this Repository on your machine by using the following `git command` in your terminal:
69 |
70 | ```
71 | git clone https://github.com/Zemerik/ZemProfiles
72 | ```
73 |
74 | 2. `Navigate` into the Project's `directory` by entering the following `command` in your terminal:
75 |
76 | ```
77 | cd ZemProfiles
78 | ```
79 |
80 | 3. `Install` the required `Dependencies` by using `NPM`:
81 |
82 | ```nodejs
83 | npm i
84 | ```
85 |
86 | 4. Start the `Development Server` through the following `command`:
87 |
88 | ```nodejs
89 | npm run dev
90 | ```
91 |
92 | ## 🚀 Project Structure
93 |
94 | ```text
95 | ├── public/
96 | │ ├── fonts/
97 | │ └── images/
98 | ├── src/
99 | │ ├── components/
100 | │ ├── content/
101 | │ ├── layouts/
102 | │ └── pages/
103 | │ └── services/
104 | │ └── util/
105 | ├── .gitignore
106 | ├── astro.config.mjs
107 | ├── CODE_OF_CONDUCT.md
108 | ├── CONTRIBUTING.md
109 | ├── LICENCE
110 | ├── package-lock.json
111 | ├── package.json
112 | ├── README.md
113 | ├── SECURITY.md
114 | ├── tailwind.config.cjs
115 | ├── yarn.lock
116 | └── tsconfig.json
117 | ```
118 |
119 | ## 🤝 Contributing:
120 |
121 | Contributions are always welcome and appreciated! **Kindly visit the [CONTRIBUTING.md](https://github.com/Zemerik/ZemProfiles/blob/main/CONTRIBUTING.md) file for more information**
122 |
123 |
124 | ## 💁 Support:
125 |
126 | For any kind of support or inforrmation, you are free to join our **Discord Server**,
127 |
128 |
129 | 139 | Thanks for Visiting🙏 140 |
141 | 142 |
143 | Don't forget to leave a ⭐
144 |
145 | Made with 💖 by Hemang Yadav (Zemerik)
146 |
Built-in Analytics
22 |23 | The data visualizations on this page have been created using data from local MDX files and a custom web analytics 24 | solution powered by Vercel Edge Functions and a Neon Serverless Postgres database. The recent GitHub activity list 25 | has been created by using the GitHub REST API. 26 |
27 |
28 | {
29 | analyticsData && reactionsData ? (
30 | <>
31 |
32 |
35 |
36 |
37 |
40 |
41 |
56 |
59 |
60 |
61 |
64 |
65 |
66 |
69 |
70 |
88 |
92 |
93 |
94 |
99 |
100 |
101 |
106 |
107 | ) : null
108 | }
109 |
110 |
111 |
114 |
115 |
118 |
119 | Totals by Year and Month
33 |All content
34 |Totals by Year and Day
38 |All content
39 |
42 |
43 |
46 |
47 |
52 |
54 |
55 | Totals by reaction
44 |Recent reactions
45 |Totals by Tag
48 |Recent tags
49 |Totals by publisher
57 |All publishers
58 |Totals by site visits
62 |Recent site visits
63 |Totals by referrer
67 |Top Ten referrers
68 |
71 |
72 |
77 |
78 |
85 |
86 |
87 |
73 |
76 | Totals by city
74 |Recent city visits
75 |Location visualization
79 |Recent geolocation visits
80 |
81 |
84 |
82 |
83 | Happiest Cities
89 |Top ten happiest cities
90 |Popular Posts
95 |Top Ten Post views
96 |Popular Articles
102 |Top Ten Article views
103 |GtiHub Activity
112 |Recent GitHub events
113 |
109 |
185 |
186 | -
187 | {
188 | years.map((year: string, index: number) => {
189 | return (
190 |
- 191 | 197 | 198 | ); 199 | }) 200 | } 201 |
126 |
202 |
203 | -
204 | {
205 | years.map((year: string, index: number) => {
206 | return (
207 |
- 208 | 214 | 215 | ); 216 | }) 217 | } 218 |
67 |
99 |
68 |
98 |
69 |
70 | ZemProfiles
71 |
72 |
97 |
73 |
95 |
96 |
102 |
112 |
113 |
185 |
186 | );
187 | });
188 |
189 | export default Layout;
190 |
--------------------------------------------------------------------------------
/tailwind.config.cjs:
--------------------------------------------------------------------------------
1 | /** @type {import('tailwindcss').Config} */
2 | const defaultTheme = require('tailwindcss/defaultTheme');
3 |
4 | module.exports = {
5 | content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],
6 | safelist: [
7 | // These are for the modal
8 | 'backdrop-blur',
9 | // These are for the TOC
10 | 'pl-4',
11 | 'pl-5',
12 | 'pl-6',
13 | 'pl-7',
14 | 'pl-8',
15 | // These are for the charts
16 | 'stroke-brand-teal',
17 | 'stroke-brand-mauve',
18 | 'stroke-brand-salmon',
19 | 'stroke-brand-yellow',
20 | 'stroke-brand-lime',
21 | 'stroke-brand-blood',
22 | 'stroke-brand-starfleet',
23 | 'stroke-brand-electric',
24 | 'stroke-brand-pink',
25 | 'stroke-brand-fuchsia',
26 | 'stroke-brand-secondary',
27 |
28 | 'fill-brand-teal',
29 | 'fill-brand-mauve',
30 | 'fill-brand-salmon',
31 | 'fill-brand-yellow',
32 | 'fill-brand-lime',
33 | 'fill-brand-blood',
34 | 'fill-brand-starfleet',
35 | 'fill-brand-electric',
36 | 'fill-brand-pink',
37 | 'fill-brand-fuchsia',
38 | 'fill-brand-secondary',
39 |
40 | 'bg-brand-teal',
41 | 'bg-brand-mauve',
42 | 'bg-brand-salmon',
43 | 'bg-brand-yellow',
44 | 'bg-brand-lime',
45 | 'bg-brand-blood',
46 | 'bg-brand-starfleet',
47 | 'bg-brand-electric',
48 | 'bg-brand-pink',
49 | 'bg-brand-fuchsia',
50 | 'bg-brand-secondary',
51 |
52 | 'text-brand-teal',
53 | 'text-brand-mauve',
54 | 'text-brand-salmon',
55 | 'text-brand-yellow',
56 | 'text-brand-lime',
57 | 'text-brand-blood',
58 | 'text-brand-starfleet',
59 | 'text-brand-electric',
60 | 'text-brand-pink',
61 | 'text-brand-fuchsia',
62 | 'text-brand-secondary',
63 |
64 | // This is for the GitHub Activity
65 | 'bg-brand-starfleet',
66 | 'bg-brand-electric',
67 | 'bg-red-500',
68 |
69 | // These are for the Ghosts collections cards
70 | 'cursor-not-allowed',
71 | ],
72 | theme: {
73 | extend: {
74 | colors: {
75 | brand: {
76 | text: '#d9dbdf',
77 | primary: '#f056c7',
78 | secondary: '#a4a0fb',
79 | tertiary: '#58e6d9',
80 | muted: '#605c9d',
81 | salmon: '#ff6090',
82 | mauve: '#4871e3',
83 | teal: '#00bcd4',
84 | lime: '#8bc34a',
85 | yellow: '#ffc107',
86 | fuchsia: '#7B1FA2',
87 | blood: '#fc5656',
88 | starfleet: '#0091f7',
89 | electric: '#b900f7',
90 | pink: '#0096FF',
91 | background: '#131127',
92 | outline: '#232140',
93 | surface: '#16142c',
94 | guide: '#2d2a58',
95 | radar: '#57538c',
96 | },
97 | },
98 | fontFamily: {
99 | sans: ['Inconsolata', ...defaultTheme.fontFamily.sans],
100 | },
101 | maxWidth: {
102 | '8xl': '90rem',
103 | },
104 | backgroundImage: {
105 | 'x-icon': "url('https://cdn.icon-icons.com/icons2/4029/PNG/512/twitter_x_new_logo_x_rounded_icon_256078.png')",
106 | },
107 | typography: (theme) => ({
108 | DEFAULT: {
109 | css: {
110 | '*:not(h1, h2, h3, h4, h5, h6, a, code)': {
111 | color: theme('colors.brand.text'),
112 | },
113 |
114 | h1: {
115 | color: theme('colors.brand.text'),
116 | margin: '2rem 0',
117 | fontWeight: 900,
118 | },
119 | 'h2, h3, h4, h5, h6': {
120 | color: theme('colors.brand.salmon'),
121 | fontWeight: 900,
122 | a: {
123 | fontWeight: 900,
124 | textDecoration: 'none',
125 | color: theme('colors.brand.salmon'),
126 | },
127 | },
128 | p: {
129 | fontFamily: 'system-ui',
130 | strong: {
131 | fontWeight: 700,
132 | },
133 | },
134 | button: {
135 | fontFamily: 'system-ui',
136 | fontWeight: 700,
137 | },
138 | a: {
139 | color: theme('colors.brand.secondary'),
140 | cursor: 'pointer',
141 | wordBreak: 'break-word',
142 | '&:hover': {
143 | color: theme('colors.brand.text'),
144 | },
145 | p: {
146 | margin: 0,
147 | color: 'inherit',
148 | },
149 | },
150 | ol: {
151 | li: {
152 | '&::marker': {
153 | color: theme('colors.brand.salmon'),
154 | },
155 | },
156 | },
157 | ul: {
158 | li: {
159 | '&::marker': {
160 | color: theme('colors.brand.salmon'),
161 | },
162 | },
163 | },
164 | 'a, small, time': {
165 | fontWeight: 300,
166 | },
167 | 'pre[class*="language-"]': {
168 | margin: '2.5rem 0px!important',
169 | },
170 | code: {
171 | color: theme('colors.brand.tertiary'),
172 | wordBreak: 'break-word',
173 | '&::before': {
174 | content: '"" !important',
175 | },
176 | '&::after': {
177 | content: '"" !important',
178 | },
179 | },
180 |
181 | blockquote: {
182 | background: theme('colors.brand.surface'),
183 | padding: '1.2em',
184 | borderLeftColor: theme('colors.brand.yellow'),
185 | borderRadius: '.2em',
186 | p: {
187 | margin: 0,
188 | },
189 | },
190 | dl: {
191 | marginTop: '1.25em',
192 | marginBottom: '1.25em',
193 | paddingLeft: '1.625em',
194 | dt: {
195 | fontSize: '1.25rem',
196 | color: theme('colors.brand.text'),
197 | paddingLeft: '0.375em',
198 | },
199 | dd: {
200 | display: 'list-item',
201 | listStyleType: 'disc',
202 | marginTop: '0.5em',
203 | marginBottom: '0.5em',
204 | paddingLeft: '0.375em',
205 | '&::marker': {
206 | color: theme('colors.brand.salmon'),
207 | },
208 | },
209 | },
210 | '.twitter-tweet': {
211 | '&::before': {
212 | content: "''",
213 | display: 'block',
214 | background: theme('backgroundImage.x-icon'),
215 | width: 24,
216 | height: 24,
217 | marginBottom: 16,
218 | },
219 | borderColor: '#232140!important',
220 | padding: '32px!important',
221 | background: theme('colors.brand.surface'),
222 | borderRadius: '4px',
223 | color: theme('colors.brand.text'),
224 | },
225 | '.event-color-PushEvent': {
226 | backgroundColor: theme('colors.brand.starfleet'),
227 | },
228 | '.event-color-CreateEvent': {
229 | backgroundColor: theme('colors.brand.lime'),
230 | },
231 | '.event-color-ForkEvent': {
232 | backgroundColor: theme('colors.brand.mauve'),
233 | },
234 | '.event-color-WatchEvent': {
235 | backgroundColor: theme('colors.brand.electric'),
236 | },
237 | '.event-color-DeleteEvent': {
238 | backgroundColor: theme('colors.red.500'),
239 | },
240 |
241 | '.event-color-IssueCommentEvent': {
242 | backgroundColor: theme('colors.brand.yellow'),
243 | },
244 | '.event-color-PullRequestReviewCommentEvent': {
245 | backgroundColor: theme('colors.brand.yellow'),
246 | },
247 |
248 | '.event-color-PullRequestEvent': {
249 | backgroundColor: theme('colors.brand.teal'),
250 | },
251 | '.event-color-PullRequestReviewEvent': {
252 | backgroundColor: theme('colors.brand.teal'),
253 | },
254 | },
255 | },
256 | }),
257 | },
258 | },
259 | plugins: [
260 | require('@tailwindcss/typography'),
261 | function ({ addBase, theme }) {
262 | function extractColorVars(colorObj, colorGroup = '') {
263 | return Object.keys(colorObj).reduce((vars, colorKey) => {
264 | const value = colorObj[colorKey];
265 |
266 | const newVars =
267 | typeof value === 'string'
268 | ? { [`--color${colorGroup}-${colorKey}`]: value }
269 | : extractColorVars(value, `-${colorKey}`);
270 |
271 | return { ...vars, ...newVars };
272 | }, {});
273 | }
274 |
275 | addBase({
276 | ':root': extractColorVars(theme('colors')),
277 | });
278 | },
279 | ],
280 | };
281 |
--------------------------------------------------------------------------------
114 |
170 |
171 |
174 |
175 |
177 |
181 |
182 |
183 |
184 |