mirror of https://github.com/aldy505/code.git
feat: moving to typescript and added some projects
This commit is contained in:
parent
097acb9c87
commit
1e2f7c73df
|
@ -0,0 +1,24 @@
|
|||
{
|
||||
"env": {
|
||||
"browser": true,
|
||||
"es2021": true
|
||||
},
|
||||
"extends": [
|
||||
"xo-space",
|
||||
"plugin:solid/recommended"
|
||||
],
|
||||
"parserOptions": {
|
||||
"ecmaVersion": 12,
|
||||
"sourceType": "module",
|
||||
"ecmaFeatures": {
|
||||
"jsx": true
|
||||
}
|
||||
},
|
||||
"plugins": [
|
||||
"solid"
|
||||
],
|
||||
"rules": {
|
||||
"capitalized-comments": ["off"],
|
||||
"object-curly-spacing": ["error", "always"]
|
||||
}
|
||||
}
|
22
.eslintrc.js
22
.eslintrc.js
|
@ -1,22 +0,0 @@
|
|||
module.exports = {
|
||||
env: {
|
||||
browser: true,
|
||||
es2021: true,
|
||||
},
|
||||
extends: [
|
||||
'xo-space',
|
||||
],
|
||||
parserOptions: {
|
||||
ecmaVersion: 12,
|
||||
sourceType: 'module',
|
||||
ecmaFeatures: {
|
||||
jsx: true,
|
||||
},
|
||||
},
|
||||
plugins: [
|
||||
],
|
||||
rules: {
|
||||
'capitalized-comments': ['off'],
|
||||
'object-curly-spacing': ['error', 'always'],
|
||||
},
|
||||
};
|
|
@ -1,4 +1,4 @@
|
|||
#!/bin/sh
|
||||
. "$(dirname "$0")/_/husky.sh"
|
||||
|
||||
yarn lint
|
||||
npm run lint
|
||||
|
|
|
@ -1,8 +1,8 @@
|
|||
import axios from 'axios';
|
||||
import type { GithubRepository } from "../types/github";
|
||||
|
||||
async function getRepositories() {
|
||||
async function getRepositories(): Promise<GithubRepository[]> {
|
||||
try {
|
||||
const response = (await axios.get('https://api.github.com/users/aldy505/repos')).data;
|
||||
const response = await (await fetch('https://api.github.com/users/aldy505/repos')).json() as GithubRepository[];
|
||||
const randNumber = Math.random() * (response.length - 5);
|
||||
return Promise.resolve(response.sort().slice(randNumber, randNumber + 5));
|
||||
} catch (error) {
|
|
@ -0,0 +1,64 @@
|
|||
import { For } from 'solid-js';
|
||||
import MadeWithLove from '../MadeWithLove';
|
||||
import LinkList from '../LinkList';
|
||||
|
||||
const image = {
|
||||
me: '/me.png',
|
||||
};
|
||||
|
||||
const link = [
|
||||
{
|
||||
link: '#projects',
|
||||
text: 'Projects',
|
||||
},
|
||||
{
|
||||
link: 'mailto:aldy505@tutanota.com',
|
||||
text: 'Email',
|
||||
},
|
||||
{
|
||||
link: 'https://t.me/aldy505',
|
||||
text: 'Telegram',
|
||||
},
|
||||
];
|
||||
|
||||
|
||||
function Home() {
|
||||
return (
|
||||
<div class="h-full lg:min-h-screen flex flex-col lg:flex-row items-center justify-around">
|
||||
<div class="flex-1 pt-12 pb-4 md:pt-0 md:pb-0">
|
||||
<div class="flex flex-row items-center">
|
||||
<div class="flex-initial">
|
||||
<h1 class="text-5xl md:text-8xl font-bold py-4">
|
||||
Reinaldy Rafli
|
||||
</h1>
|
||||
</div>
|
||||
<div class="flex-initial md:pl-4">
|
||||
<img
|
||||
src={image.me}
|
||||
alt="My Memoji"
|
||||
class="w-full md:w-2/3 h-auto md:py-4"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p class="text-base py-2 md:w-2/3">
|
||||
Not a CS student, don't work in IT industry, but most of the time I do web development. Always love to be working on a cool project 😉
|
||||
</p>
|
||||
|
||||
<div class="text-sm py-2 lg:pt-8 lg:pb-0 hidden md:block">
|
||||
<MadeWithLove />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex-1 pl-0 lg:pl-12 h-full w-full pb-4 lg:(w-auto pb-0)">
|
||||
<ul class="list-none">
|
||||
<For each={link}>{item =>
|
||||
<LinkList link={item.link} text={item.text}></LinkList>
|
||||
}</For>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default Home;
|
|
@ -0,0 +1,35 @@
|
|||
import { For } from 'solid-js';
|
||||
import projects from '../../config/projects';
|
||||
import ProjectCard from '../Project';
|
||||
|
||||
function Projects() {
|
||||
return (
|
||||
<>
|
||||
<section id="projects">
|
||||
<div><h2 class="text-3xl font-bold py-2">Library</h2></div>
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 grid-flow-row gap-4 py-8">
|
||||
<For each={projects.filter(o => o.type === 'library')}>
|
||||
{project => <ProjectCard {...project} />}
|
||||
</For>
|
||||
</div>
|
||||
</section>
|
||||
<section>
|
||||
<div><h2 class="text-3xl font-bold py-2">Application</h2></div>
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 grid-flow-row gap-4 py-8">
|
||||
<For each={projects.filter(o => o.type === 'application')}>
|
||||
{project => <ProjectCard {...project} />}
|
||||
</For>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="py-4">
|
||||
<p class="text-sm text-center text-gray-100 pb-8 lg:opacity-80 hover:opacity-100 transition duration-500 ease-in-out">
|
||||
These are just a few of my projects.
|
||||
<a class="hover:underline" href="https://www.github.com/aldy505">Explore more on my Github</a>
|
||||
</p>
|
||||
</section>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export default Projects;
|
|
@ -0,0 +1,7 @@
|
|||
function Writings() {
|
||||
return (
|
||||
<p>Hello</p>
|
||||
);
|
||||
}
|
||||
|
||||
export default Writings;
|
File diff suppressed because one or more lines are too long
|
@ -1,20 +0,0 @@
|
|||
import { createSignal } from 'solid-js';
|
||||
|
||||
function LinkList({ link, text, subtext }) {
|
||||
const [hoverState, setHoverState] = createSignal(false);
|
||||
return (
|
||||
<li
|
||||
class="opacity-75 hover:opacity-100 transition duration-500 ease-in-out"
|
||||
onMouseOver={() => setHoverState(true)}
|
||||
onMouseOut={() => setHoverState(false)}
|
||||
>
|
||||
<a
|
||||
href={link}
|
||||
class="hover:underline-light-300 hover:text-blue-100"
|
||||
>{text}</a>
|
||||
<p class={hoverState() ? 'inline px-3' : 'hidden'} class="transition duration-500 ease-in-out hover:opacity-90 opacity-50">— {subtext}</p>
|
||||
</li>
|
||||
);
|
||||
}
|
||||
|
||||
export default LinkList;
|
|
@ -0,0 +1,20 @@
|
|||
|
||||
interface Props {
|
||||
link: string;
|
||||
text: string;
|
||||
}
|
||||
|
||||
function LinkList(props: Props) {
|
||||
return (
|
||||
<li
|
||||
class="opacity-75 hover:opacity-100 transition duration-500 ease-in-out py-2 text-base lg:text-2xl"
|
||||
>
|
||||
<a
|
||||
href={props.link}
|
||||
class="hover:underline-light-300 hover:text-blue-100"
|
||||
>{props.text}</a>
|
||||
</li>
|
||||
);
|
||||
}
|
||||
|
||||
export default LinkList;
|
|
@ -9,7 +9,7 @@ function MadeWithLove() {
|
|||
viewBox="0 0 1792 1792"
|
||||
preserveAspectRatio="xMidYMid meet"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
style="height: 0.8rem;"
|
||||
style={{ height: '0.8rem' }}
|
||||
>
|
||||
<path
|
||||
d="M896 1664q-26 0-44-18l-624-602q-10-8-27.5-26T145 952.5 77 855 23.5 734 0 596q0-220 127-344t351-124q62 0 126.5 21.5t120 58T820 276t76 68q36-36 76-68t95.5-68.5 120-58T1314 128q224 0 351 124t127 344q0 221-229 450l-623 600q-18 18-44 18z"
|
|
@ -0,0 +1,27 @@
|
|||
import { NavLink } from 'solid-app-router';
|
||||
import { onMount } from 'solid-js';
|
||||
|
||||
function Navbar() {
|
||||
|
||||
onMount(async () => {
|
||||
|
||||
})
|
||||
|
||||
return (
|
||||
<section class="w-full flex flex-col md:flex-row justify-between py-6 items-center">
|
||||
<div class="flex-3">
|
||||
<NavLink href="/">
|
||||
<h1 class="text-3xl font-bold inline-block">Reinaldy Rafli </h1>
|
||||
<img
|
||||
src="/me.png"
|
||||
alt="My Memoji"
|
||||
class="w-14 h-auto md:py-4 inline pl-4"
|
||||
/>
|
||||
</NavLink>
|
||||
</div>
|
||||
<div class="flex-1 text-right py-2 text-2xl">Projects</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
export default Navbar;
|
|
@ -0,0 +1,59 @@
|
|||
import { For, Show } from 'solid-js';
|
||||
import Icons from './Icons';
|
||||
import type { Project } from "../types/project";
|
||||
import { NavLink } from 'solid-app-router';
|
||||
import { convertCase } from '../config/case';
|
||||
|
||||
function ProjectCard(project: Project) {
|
||||
return (
|
||||
<div class="rounded-lg bg-steel-100 hover:bg-wisteria-200 lg:(opacity-70 p-4) p-3 hover:opacity-100 dark:(bg-steel-900 hover:bg-wisteria-900) transition duration-500 ease-in-out">
|
||||
<div class="flex flex-col">
|
||||
<div class="flex-1 py-2">
|
||||
<NavLink href={'/project/' + convertCase(project.title)}>
|
||||
<h2 class="text-xl font-bold">{project.title}</h2>
|
||||
<p class="text-base">{project.description}</p>
|
||||
</NavLink>
|
||||
</div>
|
||||
<div class="flex-1 py-2">
|
||||
<div class="flex-col md:flex-row items-center">
|
||||
<p class="text-xs text-gray-300 inline pr-2">{project.type.toUpperCase()}</p>
|
||||
<p class="text-xs text-gray-300 inline pr-2">{project.role.toUpperCase()}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-1 py-2">
|
||||
<div class="flex flex-row flex-wrap items-center">
|
||||
<For each={project.stack}>
|
||||
{item => <div class="flex-initial pr-2"><Icons name={item}></Icons></div>}
|
||||
</For>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-1 py-2">
|
||||
<div class="flex flex-row flex-wrap items-center">
|
||||
<Show when={project.repository}>
|
||||
<div class="flex-initial pr-2">
|
||||
<a href={project.repository}>
|
||||
<Icons name="github"></Icons>
|
||||
</a>
|
||||
</div>
|
||||
<div class="flex-initial pr-4 text-xs">
|
||||
<a href={project.repository}>Repository</a>
|
||||
</div>
|
||||
</Show>
|
||||
<Show when={project.website}>
|
||||
<div class="flex-initial pr-2">
|
||||
<a href={project.website}>
|
||||
<Icons name="arrow-right"></Icons>
|
||||
</a>
|
||||
</div>
|
||||
<div class="flex-initial pr-2 text-xs">
|
||||
<a href={project.website}>Website</a>
|
||||
</div>
|
||||
</Show>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default ProjectCard;
|
|
@ -1,9 +1,11 @@
|
|||
import type { GithubLanguage, GithubRepository } from "../types/github";
|
||||
|
||||
const image = {
|
||||
folder: 'folder.svg',
|
||||
star: 'star.svg',
|
||||
};
|
||||
|
||||
function getLanguageColor(language) {
|
||||
function getLanguageColor(language: GithubLanguage) {
|
||||
if (!language) {
|
||||
return;
|
||||
}
|
||||
|
@ -35,27 +37,35 @@ function getLanguageColor(language) {
|
|||
}
|
||||
}
|
||||
|
||||
function Repository({ url, name, stars, language, description }) {
|
||||
interface Props {
|
||||
url: string;
|
||||
name: string;
|
||||
description: string;
|
||||
language: string;
|
||||
stars: number;
|
||||
}
|
||||
|
||||
function Repository(props: Partial<Props>) {
|
||||
return (
|
||||
<div class="flex flex-col py-4 px-2 lg:px-0 opacity-80 hover:opacity-100 transition duration-500 ease-in-out">
|
||||
<div class="flex-1 text-sm hover:text-blue-300 font-bold transition duration-500 ease-in-out">
|
||||
<a href={url}>
|
||||
<a href={props.url}>
|
||||
<div class="flex flex-row items-center">
|
||||
<div class="flex-initial">
|
||||
<img
|
||||
src={image.folder}
|
||||
class="text-white h-3 w-3 fill-current inline"
|
||||
class="text-black dark:text-white h-3 w-3 fill-current inline"
|
||||
alt="Repository"
|
||||
/>
|
||||
</div>
|
||||
<div class="flex-initial px-4">
|
||||
{ name }
|
||||
{ props.name }
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<div class="flex-2 text-xs opacity-80 lg:w-2/3">
|
||||
{ description }
|
||||
{ props.description }
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<div class="flex flex-row items-center">
|
||||
|
@ -71,12 +81,12 @@ function Repository({ url, name, stars, language, description }) {
|
|||
cx="50"
|
||||
cy="50"
|
||||
r="40"
|
||||
fill={getLanguageColor(language)}
|
||||
fill={getLanguageColor(props.language as GithubLanguage)}
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="flex-initial px-2">
|
||||
{ language }
|
||||
{ props.language }
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
@ -93,7 +103,7 @@ function Repository({ url, name, stars, language, description }) {
|
|||
/>
|
||||
</div>
|
||||
<div class="flex-initial px-2">
|
||||
{ stars }
|
||||
{ props.stars }
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
|
@ -0,0 +1,6 @@
|
|||
export function convertCase(str: string): string {
|
||||
return str
|
||||
.split(' ')
|
||||
.reduce((p: string[], c) => { p.push(c.toLowerCase()); return p; }, [])
|
||||
.join('-');
|
||||
}
|
|
@ -1,3 +1,5 @@
|
|||
import type { MetaItem } from "../types/meta";
|
||||
|
||||
const config = {
|
||||
title: 'Reinaldy Rafli - Code',
|
||||
description: 'Reinaldy Rafli is a full stack web developer based in Indonesia.',
|
||||
|
@ -7,7 +9,7 @@ const config = {
|
|||
};
|
||||
|
||||
function prepareMeta() {
|
||||
const meta = [];
|
||||
const meta: MetaItem[] = [];
|
||||
|
||||
meta.push(
|
||||
{
|
||||
|
@ -80,8 +82,6 @@ export default {
|
|||
lang: 'en',
|
||||
},
|
||||
link: [
|
||||
{ rel: 'preconnect', href: 'https://fonts.gstatic.com' },
|
||||
{ rel: 'stylesheet', href: 'https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap' },
|
||||
{ rel: 'icon', type: 'image/png', href: 'favicon.png' },
|
||||
{ rel: 'icon', type: 'image/svg', href: 'favicon.svg' },
|
||||
],
|
|
@ -1,86 +0,0 @@
|
|||
const projects = [
|
||||
{
|
||||
id: 1,
|
||||
type: 'library',
|
||||
stack: ['typescript'],
|
||||
title: 'Generate Passphrase',
|
||||
description: 'Secure random passphrase for Node.js',
|
||||
repository: 'https://github.com/aldy505/generate-passphrase',
|
||||
role: 'author',
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
type: 'library',
|
||||
stack: ['go'],
|
||||
title: 'Bob',
|
||||
description: 'SQL query builder as an extension of Squirrel',
|
||||
repository: 'https://github.com/aldy505/bob',
|
||||
role: 'author',
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
type: 'library',
|
||||
stack: ['go'],
|
||||
title: 'PHC Crypto',
|
||||
description: 'Password hashing with Argon2, Bcrypt, Scrypt, and PBKDF2 simplified',
|
||||
repository: 'https://github.com/aldy505/phc-crypto',
|
||||
role: 'author',
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
type: 'library',
|
||||
stack: ['typescript'],
|
||||
title: 'Malibu',
|
||||
description: 'Framework-agnostic CSRF middleware for modern Node.js applications',
|
||||
repository: 'https://github.com/tinyhttp/malibu',
|
||||
role: 'author',
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
type: 'application',
|
||||
stack: ['go', 'typescript', 'svelte', 'tailwindcss', 'postgresql', 'redis'],
|
||||
title: 'Jokes Bapak2',
|
||||
description: 'Image API for serving Indonesian dad jokes',
|
||||
repository: 'https://github.com/aldy505/jokes-bapak2',
|
||||
website: 'http://jokesbapak2.pages.dev/',
|
||||
role: 'author',
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
type: 'library',
|
||||
stack: ['typescript'],
|
||||
title: 'Tinyhttp',
|
||||
description: 'Typescript-based framework as a replacement for Express',
|
||||
repository: 'https://github.com/tinyhttp/tinyhttp',
|
||||
role: 'contributor',
|
||||
},
|
||||
{
|
||||
id: 7,
|
||||
type: 'application',
|
||||
stack: ['vuejs', 'tailwindcss'],
|
||||
title: 'ARCET Creative Visual Studio',
|
||||
description: 'Website for ARCET',
|
||||
website: 'https://www.arcet.id',
|
||||
role: 'author',
|
||||
},
|
||||
{
|
||||
id: 8,
|
||||
type: 'application',
|
||||
stack: ['vuejs', 'bootstrap'],
|
||||
title: 'Pesanyuk',
|
||||
description: 'Store-management application for Indonesian small to medium businesses',
|
||||
website: 'https://pesanyuk.id',
|
||||
role: 'contributor',
|
||||
},
|
||||
{
|
||||
id: 9,
|
||||
type: 'application',
|
||||
stack: ['javascript', 'redis', 'mongodb'],
|
||||
title: 'Teknologi Umum Bot',
|
||||
description: 'A simple telegram bot for managing daily poll & programming-related quizes',
|
||||
repository: 'https://github.com/teknologi-umum/bot',
|
||||
role: 'author',
|
||||
},
|
||||
];
|
||||
|
||||
export default projects;
|
|
@ -0,0 +1,163 @@
|
|||
import type { Project } from "../types/project";
|
||||
|
||||
const projects: Project[] = [
|
||||
{
|
||||
id: 1,
|
||||
type: 'library',
|
||||
stack: ['typescript'],
|
||||
title: 'Generate Passphrase',
|
||||
description: 'Secure random passphrase for Node.js',
|
||||
repository: 'https://github.com/aldy505/generate-passphrase',
|
||||
role: 'author',
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
type: 'library',
|
||||
stack: ['go'],
|
||||
title: 'Bob',
|
||||
description: 'SQL query builder as an extension of Squirrel',
|
||||
repository: 'https://github.com/aldy505/bob',
|
||||
role: 'author',
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
type: 'library',
|
||||
stack: ['go'],
|
||||
title: 'PHC Crypto',
|
||||
description: 'Password hashing with Argon2, Bcrypt, Scrypt, and PBKDF2 simplified',
|
||||
repository: 'https://github.com/aldy505/phc-crypto',
|
||||
role: 'author',
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
type: 'library',
|
||||
stack: ['typescript'],
|
||||
title: 'Malibu',
|
||||
description: 'Framework-agnostic CSRF middleware for modern Node.js applications',
|
||||
repository: 'https://github.com/tinyhttp/malibu',
|
||||
role: 'author',
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
type: 'application',
|
||||
stack: ['go', 'typescript', 'svelte', 'tailwindcss', 'postgresql', 'redis', 'sentry', 'docker'],
|
||||
title: 'Jokes Bapak2',
|
||||
description: 'Image API for serving Indonesian dad jokes',
|
||||
repository: 'https://github.com/aldy505/jokes-bapak2',
|
||||
website: 'http://jokesbapak2.pages.dev/',
|
||||
role: 'author',
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
type: 'library',
|
||||
stack: ['typescript'],
|
||||
title: 'Tinyhttp',
|
||||
description: 'Typescript-based framework as a replacement for Express',
|
||||
repository: 'https://github.com/tinyhttp/tinyhttp',
|
||||
role: 'maintainer',
|
||||
},
|
||||
{
|
||||
id: 7,
|
||||
type: 'application',
|
||||
stack: ['vuejs', 'nuxtjs', 'tailwindcss'],
|
||||
title: 'ARCET Creative Visual Studio',
|
||||
description: 'Website for ARCET',
|
||||
website: 'https://www.arcet.id',
|
||||
role: 'author',
|
||||
},
|
||||
{
|
||||
id: 8,
|
||||
type: 'application',
|
||||
stack: ['vuejs', 'nuxtjs', 'bootstrap'],
|
||||
title: 'Pesanyuk',
|
||||
description: 'Store-management application for Indonesian small to medium businesses',
|
||||
website: 'https://pesanyuk.id',
|
||||
role: 'contributor',
|
||||
},
|
||||
{
|
||||
id: 9,
|
||||
type: 'application',
|
||||
stack: ['javascript', 'redis', 'mongodb', 'sentry', 'docker'],
|
||||
title: 'Teknologi Umum Bot',
|
||||
description: 'A simple telegram bot for managing daily poll & programming-related quizes',
|
||||
repository: 'https://github.com/teknologi-umum/bot',
|
||||
role: 'author',
|
||||
},
|
||||
{
|
||||
id: 10,
|
||||
type: 'application',
|
||||
stack: ['typescript', 'nodejs', 'solidjs', 'sentry', 'docker'],
|
||||
title: 'Graphene',
|
||||
description: 'Code screenshot API as an alternative to Carbon.now.sh or Ray.so',
|
||||
repository: 'https://github.com/teknologi-umum/graphene',
|
||||
website: 'https://graphene.teknologiumum.com',
|
||||
role: 'contributor',
|
||||
},
|
||||
{
|
||||
id: 11,
|
||||
type: 'application',
|
||||
stack: ['go', 'mysql', 'redis', 'sentry', 'docker'],
|
||||
title: 'Polarite',
|
||||
description: 'Simple Pastebin clone with POST request support & secure compression',
|
||||
repository: 'https://github.com/teknologi-umum/polarite',
|
||||
website: 'https://polarite.teknologiumum.com',
|
||||
role: 'author'
|
||||
},
|
||||
{
|
||||
id: 12,
|
||||
type: 'library',
|
||||
stack: ['typescript'],
|
||||
title: 'Flourite',
|
||||
description: 'Programming language detector in Javascript',
|
||||
repository: 'https://github.com/teknologi-umum/flourite',
|
||||
role: 'author',
|
||||
},
|
||||
{
|
||||
id: 15,
|
||||
type: 'application',
|
||||
stack: ['vuejs', 'nuxtjs', 'tailwindcss'],
|
||||
title: 'Cbusters',
|
||||
description: 'Disinfecting service for workspace',
|
||||
website: 'https://www.cbusters.com',
|
||||
role: 'author',
|
||||
},
|
||||
{
|
||||
id: 16,
|
||||
type: 'application',
|
||||
stack: ['typescript', 'nextjs', 'tailwindcss'],
|
||||
title: 'Teknologi Umum Blog',
|
||||
description: 'Blog for about anything!',
|
||||
repository: 'https://github.com/teknologi-umum/blog',
|
||||
website: 'https://www.teknologiumum.com',
|
||||
role: 'maintainer',
|
||||
},
|
||||
{
|
||||
id: 17,
|
||||
type: 'library',
|
||||
stack: ['typescript'],
|
||||
title: 'SQL DSL',
|
||||
description: 'Mapped SQL query & argument from a template literal',
|
||||
repository: 'https://github.com/aldy505/sql-dsl',
|
||||
role: 'author'
|
||||
},
|
||||
{
|
||||
id: 18,
|
||||
type: 'library',
|
||||
stack: ['go'],
|
||||
title: 'Sentry Fiber',
|
||||
description: 'Unofficial Fiber handler for Sentry SDK',
|
||||
repository: 'https://github.com/aldy505/sentry-fiber',
|
||||
role: 'author'
|
||||
},
|
||||
{
|
||||
id: 19,
|
||||
type: 'library',
|
||||
stack: ['go', 'typescript'],
|
||||
title: 'Manusier',
|
||||
description: 'Humans-utils specifically for Indonesian locale',
|
||||
repository: 'https://github.com/teknologi-umum/manusier',
|
||||
role: 'author',
|
||||
}
|
||||
];
|
||||
|
||||
export default projects;
|
|
@ -8,6 +8,6 @@
|
|||
<noscript>You need to enable JavaScript to run this app.</noscript>
|
||||
<div id="root"></div>
|
||||
|
||||
<script src="./solid.config.jsx" type="module"></script>
|
||||
<script src="./solid.config.tsx" type="module"></script>
|
||||
</body>
|
||||
</html>
|
|
@ -1,27 +1,27 @@
|
|||
import { useRoutes } from 'solid-app-router';
|
||||
// eslint-disable-next-line no-unused-vars
|
||||
import { RouteDefinition, useRoutes } from 'solid-app-router';
|
||||
import { For, lazy } from 'solid-js';
|
||||
// eslint-disable-next-line no-unused-vars
|
||||
import { MetaProvider, Title, Link, Meta } from 'solid-meta';
|
||||
import head from '../config/head.js';
|
||||
import '@fontsource/poppins';
|
||||
import head from '../config/head';
|
||||
import '@fontsource/poppins/400.css';
|
||||
import '@fontsource/poppins/700.css';
|
||||
import '@fontsource/ibm-plex-mono/400.css';
|
||||
import '../styles/default.sass';
|
||||
|
||||
const route = [
|
||||
const route: RouteDefinition[] = [
|
||||
{
|
||||
path: '/',
|
||||
component: () => lazy(() => import('../pages/index.jsx')),
|
||||
component: lazy(() => import('../pages/index')),
|
||||
},
|
||||
{
|
||||
path: '/projects',
|
||||
component: () => lazy(() => import('../pages/projects.jsx')),
|
||||
path: '/project/:repo',
|
||||
component: lazy(() => import('../pages/project/[repo]')),
|
||||
},
|
||||
{
|
||||
path: '*all',
|
||||
component: () => lazy(() => import('../pages/index.jsx')),
|
||||
component: lazy(() => import('../pages/index')),
|
||||
},
|
||||
];
|
||||
|
||||
// eslint-disable-next-line no-unused-vars
|
||||
const Routes = useRoutes(route);
|
||||
|
||||
function Default() {
|
||||
|
@ -36,7 +36,7 @@ function Default() {
|
|||
<Meta name={meta?.name ?? ''} property={meta?.property ?? ''} content={meta.content} />
|
||||
}</For>
|
||||
</MetaProvider>
|
||||
<div class="bg-cool-gray-900 text-white min-h-screen min-w-full h-full w-full font-body">
|
||||
<div class="bg-cool-gray-100 text-black dark:(bg-cool-gray-900 text-white) min-h-screen min-w-full h-full w-full font-body">
|
||||
<div class="container mx-auto px-10 md:px-20 lg:px-32">
|
||||
<Routes />
|
||||
</div>
|
File diff suppressed because it is too large
Load Diff
31
package.json
31
package.json
|
@ -20,22 +20,29 @@
|
|||
},
|
||||
"homepage": "https://github.com/aldy505/code#readme",
|
||||
"dependencies": {
|
||||
"@fontsource/ibm-plex-mono": "^4.5.1",
|
||||
"@fontsource/poppins": "^4.5.0",
|
||||
"animejs": "^3.2.1",
|
||||
"axios": "^0.21.1",
|
||||
"solid-app-router": "^0.1.3",
|
||||
"solid-js": "^1.0.7",
|
||||
"solid-meta": "^0.27.1"
|
||||
"marked": "^3.0.7",
|
||||
"solid-app-router": "^0.1.9",
|
||||
"solid-js": "^1.1.6",
|
||||
"solid-meta": "^0.27.2",
|
||||
"solid-styled-jsx": "^0.27.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@commitlint/cli": "^13.1.0",
|
||||
"@commitlint/config-conventional": "^13.1.0",
|
||||
"@commitlint/cli": "^13.2.1",
|
||||
"@commitlint/config-conventional": "^13.2.0",
|
||||
"@types/marked": "^3.0.1",
|
||||
"@windicss/plugin-scrollbar": "^1.2.3",
|
||||
"eslint": "^7.32.0",
|
||||
"eslint-config-xo-space": "^0.28.0",
|
||||
"husky": "^7.0.1",
|
||||
"vite": "^2.4.4",
|
||||
"vite-plugin-solid": "^2.0.1",
|
||||
"vite-plugin-windicss": "^1.2.7",
|
||||
"windicss": "^3.1.6"
|
||||
"eslint-config-xo-space": "^0.30.0",
|
||||
"eslint-plugin-solid": "^0.1.2",
|
||||
"husky": "^7.0.2",
|
||||
"sass": "^1.43.2",
|
||||
"typescript": "^4.4.4",
|
||||
"vite": "^2.6.7",
|
||||
"vite-plugin-solid": "^2.1.1",
|
||||
"vite-plugin-windicss": "^1.4.11",
|
||||
"windicss": "^3.1.9"
|
||||
}
|
||||
}
|
||||
|
|
126
pages/index.jsx
126
pages/index.jsx
|
@ -1,126 +0,0 @@
|
|||
// eslint-disable-next-line no-unused-vars
|
||||
import { createSignal, For, onMount, Show } from 'solid-js';
|
||||
import anime from 'animejs';
|
||||
// eslint-disable-next-line no-unused-vars
|
||||
import MadeWithLove from '../components/MadeWithLove';
|
||||
// eslint-disable-next-line no-unused-vars
|
||||
import Repository from '../components/Repository';
|
||||
// eslint-disable-next-line no-unused-vars
|
||||
import LinkList from '../components/LinkList';
|
||||
import getRepositories from '../components/GetRepositories';
|
||||
|
||||
const image = {
|
||||
me: 'me.png',
|
||||
};
|
||||
|
||||
function Index() {
|
||||
const [repositories, setRepositories] = createSignal({});
|
||||
const [repoRequest, setRepoRequest] = createSignal(false);
|
||||
|
||||
const link = [
|
||||
{
|
||||
link: 'projects',
|
||||
text: 'Projects',
|
||||
subtext: 'See my projects & libraries!',
|
||||
},
|
||||
{
|
||||
link: 'mailto:aldy505@tutanota.com',
|
||||
text: 'Email',
|
||||
subtext: 'Get in touch!',
|
||||
},
|
||||
{
|
||||
link: 'https://t.me/aldy505',
|
||||
text: 'Telegram',
|
||||
subtext: 'Another way to get in touch!',
|
||||
},
|
||||
];
|
||||
|
||||
onMount(async () => {
|
||||
try {
|
||||
const repos = await getRepositories();
|
||||
setRepositories(repos);
|
||||
setRepoRequest(true);
|
||||
anime({
|
||||
targets: '.repository',
|
||||
opacity: [
|
||||
{ value: 0, duration: 500, delay: 500 },
|
||||
{ value: 100, duration: 4000 },
|
||||
],
|
||||
translateY: [
|
||||
{ value: 800, duration: 500, delay: 800 },
|
||||
{ value: 0, duration: 4000 },
|
||||
],
|
||||
});
|
||||
} catch {
|
||||
setRepoRequest(false);
|
||||
}
|
||||
});
|
||||
|
||||
return (
|
||||
<div class="h-full lg:min-h-screen flex flex-col lg:flex-row items-center justify-content">
|
||||
<div class="flex-1 pt-12 pb-4 md:pt-0 md:pb-0">
|
||||
<div class="flex flex-row items-center">
|
||||
<div class="flex-initial">
|
||||
<h1 class="text-5xl md:text-8xl font-bold py-4">
|
||||
Reinaldy Rafli
|
||||
</h1>
|
||||
</div>
|
||||
<div class="flex-initial md:pl-4">
|
||||
<img
|
||||
src={image.me}
|
||||
alt="My Memoji"
|
||||
class="w-full md:w-2/3 h-auto md:py-4"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p class="text-base py-2 md:w-2/3">
|
||||
Not a CS student, don't work in IT industry, but most of the time I do web development. Always love to be working on a cool project 😉
|
||||
</p>
|
||||
|
||||
<ul class="list-none text-base py-2">
|
||||
<For each={link}>{item =>
|
||||
<LinkList link={item.link} text={item.text} subtext={item.subtext}></LinkList>
|
||||
}</For>
|
||||
</ul>
|
||||
|
||||
<div class="text-sm py-2 lg:pt-8 lg:pb-0 hidden md:block">
|
||||
<MadeWithLove />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex-1 pl-0 lg:pl-12">
|
||||
<Show when={repoRequest()} fallback={<div></div>}>
|
||||
<div class="repository">
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-1 place-content-center">
|
||||
<For each={repositories()}>{repo =>
|
||||
<div class="line">
|
||||
<Repository
|
||||
url={repo.html_url}
|
||||
name={repo.name}
|
||||
stars={repo.stargazers_count}
|
||||
language={repo.language}
|
||||
description={repo.description}
|
||||
/>
|
||||
</div>
|
||||
}</For>
|
||||
<div class="line">
|
||||
<p class="text-sm opacity-75 hover:opacity-100 hover:text-blue-100 hover:underline md:pb-0 pb-4 transition duration-500 ease-in-out">
|
||||
<a href="https://www.github.com/aldy505">
|
||||
Explore more on Github —>
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Show>
|
||||
</div>
|
||||
|
||||
<div class="flex-initial md:hidden py-4">
|
||||
<MadeWithLove />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default Index;
|
|
@ -0,0 +1,17 @@
|
|||
import Main from '../components/Home/Main';
|
||||
import MadeWithLove from '../components/MadeWithLove';
|
||||
import Projects from '../components/Home/Projects';
|
||||
|
||||
function Index() {
|
||||
return (
|
||||
<div>
|
||||
<Main />
|
||||
<Projects />
|
||||
<div class="flex-initial md:hidden py-4">
|
||||
<MadeWithLove />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default Index;
|
|
@ -0,0 +1,62 @@
|
|||
import { useParams } from "solid-app-router";
|
||||
import { createSignal, For, onMount, Show } from "solid-js";
|
||||
import marked from 'marked';
|
||||
import Navbar from "../../components/Navbar";
|
||||
import { convertCase } from "../../config/case";
|
||||
import projects from "../../config/projects";
|
||||
import { GithubRepository } from "../../types/github";
|
||||
import type { Project } from "../../types/project";
|
||||
import 'solid-styled-jsx';
|
||||
import css from '../../styles/repo.sass';
|
||||
import Icons from "../../components/Icons";
|
||||
|
||||
async function fetchData(repo: string): Promise<Project> {
|
||||
const findData = projects.find(i => convertCase(i.title) === repo);
|
||||
|
||||
if (!findData.repository) return {...findData, details: 'Oops, sorry. Nothing to see here yet.'};
|
||||
const repoPath = findData.repository.replace('https://github.com/', '');
|
||||
const github = await (await fetch(`https://api.github.com/repos/${repoPath}`)).json() as GithubRepository;
|
||||
const details = await (await fetch(`https://raw.githubusercontent.com/${repoPath}/${github.default_branch}/README.md`)).text();
|
||||
return {
|
||||
...findData,
|
||||
github,
|
||||
details,
|
||||
}
|
||||
}
|
||||
|
||||
function ProjectRepo() {
|
||||
const params = useParams<{repo: string}>();
|
||||
const [data, setData ] = createSignal<Project>();
|
||||
const [requestOk, setRequestOk] = createSignal<boolean>(false);
|
||||
|
||||
onMount(async () => {
|
||||
const p = await fetchData(params.repo);
|
||||
setData(p);
|
||||
setRequestOk(true);
|
||||
})
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Navbar />
|
||||
<style jsx dynamic={false} global={false}>
|
||||
{`${css}`}
|
||||
</style>
|
||||
|
||||
<Show when={requestOk()} fallback={<div>Please wait...</div>}>
|
||||
<h1 class="text-3xl font-bold text-left py-2">
|
||||
{data().title}
|
||||
</h1>
|
||||
<p class="text-left py-2">{data().description}</p>
|
||||
<div class="flex flex-row flex-wrap items-center">
|
||||
<For each={data().stack}>
|
||||
{item => <div class="flex-initial pr-2"><Icons name={item}></Icons></div>}
|
||||
</For>
|
||||
</div>
|
||||
<div innerHTML={marked(data().details)} class="repoContent pb-6 pt-4"></div>
|
||||
</Show>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default ProjectRepo;
|
||||
|
|
@ -1,88 +0,0 @@
|
|||
// eslint-disable-next-line no-unused-vars
|
||||
import { NavLink } from 'solid-app-router';
|
||||
// eslint-disable-next-line no-unused-vars
|
||||
import { For, Show } from 'solid-js';
|
||||
// eslint-disable-next-line no-unused-vars
|
||||
import Icons from '../components/Icons';
|
||||
import projects from '../config/projects';
|
||||
|
||||
function Projects() {
|
||||
return (
|
||||
<>
|
||||
<section className="w-full flex flex-col md:flex-row justify-between py-6 items-center">
|
||||
<div className="flex-3">
|
||||
<NavLink href="/">
|
||||
<h1 className="text-3xl font-bold inline-block">Reinaldy Rafli </h1>
|
||||
<img
|
||||
src="/me.png"
|
||||
alt="My Memoji"
|
||||
class="w-14 h-auto md:py-4 inline pl-4"
|
||||
/>
|
||||
</NavLink>
|
||||
</div>
|
||||
<div className="flex-1 text-right py-2 text-2xl">Projects</div>
|
||||
</section>
|
||||
|
||||
<section className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 grid-flow-row gap-4 py-8">
|
||||
<For each={projects}>
|
||||
{project =>
|
||||
<div className="p-4 rounded-lg bg-steel-900 hover:bg-wisteria-800 transition duration-500 ease-in-out">
|
||||
<div className="flex flex-col">
|
||||
<div className="flex-1 py-2">
|
||||
<h2 className="text-xl font-bold">{project.title}</h2>
|
||||
<p className="text-base">{project.description}</p>
|
||||
</div>
|
||||
<div className="flex-1 py-2">
|
||||
<div className="flex-col md:flex-row items-center">
|
||||
<p className="text-xs text-gray-300 inline pr-2">{project.type.toUpperCase()}</p>
|
||||
<p className="text-xs text-gray-300 inline pr-2">{project.role.toUpperCase()}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex-1 py-2">
|
||||
<div className="flex flex-row flex-wrap items-center">
|
||||
<For each={project.stack}>
|
||||
{item => <div className="flex-initial pr-2"><Icons name={item}></Icons></div>}
|
||||
</For>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex-1 py-2">
|
||||
<div className="flex flex-row flex-wrap items-center">
|
||||
<Show when={project.repository}>
|
||||
<div className="flex-initial pr-2">
|
||||
<a href={project.repository}>
|
||||
<Icons name="github"></Icons>
|
||||
</a>
|
||||
</div>
|
||||
<div className="flex-initial pr-4 text-xs">
|
||||
<a href={project.repository}>Repository</a>
|
||||
</div>
|
||||
</Show>
|
||||
<Show when={project.website}>
|
||||
<div className="flex-initial pr-2">
|
||||
<a href={project.website}>
|
||||
<Icons name="arrow-right"></Icons>
|
||||
</a>
|
||||
</div>
|
||||
<div className="flex-initial pr-2 text-xs">
|
||||
<a href={project.website}>Website</a>
|
||||
</div>
|
||||
</Show>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
</For>
|
||||
</section>
|
||||
|
||||
<section className="py-4">
|
||||
<p className="text-sm text-center text-gray-100 pb-8 lg:opacity-80 hover:opacity-100 transition duration-500 ease-in-out">
|
||||
These are just a few of my projects.
|
||||
Explore more on my <a className="hover:underline" href="https://www.github.com/aldy505">Github</a>
|
||||
</p>
|
||||
</section>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export default Projects;
|
|
@ -1,13 +0,0 @@
|
|||
import { render } from 'solid-js/web';
|
||||
import 'virtual:windi.css';
|
||||
// eslint-disable-next-line no-unused-vars
|
||||
import { Router, useRoutes } from 'solid-app-router';
|
||||
// eslint-disable-next-line no-unused-vars
|
||||
import Default from './layouts/default.jsx';
|
||||
|
||||
render(() => (
|
||||
<Router>
|
||||
<Default />
|
||||
</Router>
|
||||
), document.getElementById('root'));
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
import { render } from 'solid-js/web';
|
||||
import 'virtual:windi.css';
|
||||
import { Router } from 'solid-app-router';
|
||||
import Default from './layouts/default';
|
||||
|
||||
render(() => (
|
||||
<Router>
|
||||
<Default />
|
||||
</Router>
|
||||
), document.getElementById('root'));
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
html
|
||||
scroll-behavior: smooth
|
|
@ -0,0 +1,40 @@
|
|||
@mixin headers($size: 1rem)
|
||||
@apply font-bold py-2
|
||||
font-size: $size
|
||||
line-height: $size * 1.5
|
||||
|
||||
.repoContent
|
||||
h1
|
||||
@include headers($size: 1.75rem)
|
||||
|
||||
h2
|
||||
@include headers($size: 1.5rem)
|
||||
|
||||
h3
|
||||
@include headers($size: 1.25rem)
|
||||
|
||||
h4
|
||||
@include headers($size: 1.125rem)
|
||||
|
||||
a
|
||||
@apply text-royalblue-500 underline underline-opacity-20 underline-royalblue-600 hover:(text-royalblue-700 underline-opacity-100)
|
||||
@apply dark:(text-royalblue-300 underline-royalblue-400 hover:text-royalblue-500)
|
||||
@apply transition duration-300 ease-in-out cursor-pointer
|
||||
|
||||
p
|
||||
@apply text-base py-1 break-words whitespace-normal
|
||||
|
||||
pre
|
||||
@apply font-code bg-denim-900 w-full h-full p-4 text-white container overflow-auto rounded
|
||||
|
||||
code
|
||||
@apply font-code bg-denim-900 text-white w-full py-0\.5 px-1 rounded text-sm
|
||||
|
||||
table
|
||||
@apply table overflow-x-auto overscroll-auto w-full flow-root py-2
|
||||
|
||||
ul
|
||||
@apply list-disc list-outside
|
||||
|
||||
ol
|
||||
@apply list-decimal list-outside
|
|
@ -0,0 +1,12 @@
|
|||
{
|
||||
"compilerOptions": {
|
||||
"target": "ESNext",
|
||||
"module": "ESNext",
|
||||
"moduleResolution": "node",
|
||||
"allowSyntheticDefaultImports": true,
|
||||
"esModuleInterop": true,
|
||||
"jsx": "preserve",
|
||||
"jsxImportSource": "solid-js",
|
||||
"types": ["vite/client"]
|
||||
}
|
||||
}
|
|
@ -0,0 +1,29 @@
|
|||
export interface GithubRepository {
|
||||
id: number;
|
||||
name: string;
|
||||
html_url: string;
|
||||
description: string;
|
||||
fork: boolean;
|
||||
language: string;
|
||||
stargazers_count: number;
|
||||
forks_count: number;
|
||||
open_issues_count: number;
|
||||
license: License;
|
||||
topics: Record<number, string>;
|
||||
default_branch: string;
|
||||
}
|
||||
|
||||
interface License {
|
||||
// "gpl-3.0"
|
||||
key: string;
|
||||
// "GNU General Public License v3.0"
|
||||
name: string;
|
||||
// "GPL-3.0"
|
||||
spdx_id: string;
|
||||
// "https://api.github.com/licenses/gpl-3.0"
|
||||
url: string;
|
||||
// "MDc6TGljZW5zZTk="
|
||||
node_id: string;
|
||||
}
|
||||
|
||||
export type GithubLanguage = 'go' | 'julia' | 'javascript' | 'typescript' | 'lua' | 'shell' |'vue' | 'svelte' | 'html' | 'c#' | 'dart' | 'tex';
|
|
@ -0,0 +1,6 @@
|
|||
export interface MetaItem {
|
||||
hid?: string;
|
||||
name?: string;
|
||||
property?: string;
|
||||
content: string;
|
||||
}
|
|
@ -0,0 +1,37 @@
|
|||
import type { GithubRepository } from "./github";
|
||||
|
||||
export type Stack =
|
||||
'bootstrap' |
|
||||
'bulma' |
|
||||
'docker' |
|
||||
'go' |
|
||||
'javascript' |
|
||||
'julia' |
|
||||
'lua' |
|
||||
'mongodb' |
|
||||
'mysql' |
|
||||
'nextjs' |
|
||||
'nodejs' |
|
||||
'nuxtjs' |
|
||||
'postgresql' |
|
||||
'redis' |
|
||||
'sass' |
|
||||
'sentry' |
|
||||
'solidjs' |
|
||||
'tailwindcss' |
|
||||
'typescript' |
|
||||
'vuejs' |
|
||||
'svelte'
|
||||
|
||||
export interface Project {
|
||||
id: number;
|
||||
type: 'library' | 'application' | 'plugin';
|
||||
stack: Stack[];
|
||||
title: string;
|
||||
description: string;
|
||||
repository?: string;
|
||||
website?: string;
|
||||
role: 'author' | 'contributor' | 'maintainer';
|
||||
details?: string;
|
||||
github?: GithubRepository;
|
||||
}
|
|
@ -15,5 +15,7 @@ export default defineConfig({
|
|||
build: {
|
||||
target: 'esnext',
|
||||
polyfillDynamicImport: false,
|
||||
emptyOutDir: true,
|
||||
outDir: 'dist'
|
||||
},
|
||||
});
|
|
@ -1,14 +1,14 @@
|
|||
const aspectRatio = require('windicss/plugin/aspect-ratio');
|
||||
import { defineConfig } from 'windicss/helpers';
|
||||
import aspectRatio from 'windicss/plugin/aspect-ratio';
|
||||
import scrollbar from '@windicss/plugin-scrollbar';
|
||||
|
||||
/**
|
||||
* @type {import('windicss/helpers').defineConfig}
|
||||
*/
|
||||
module.exports = {
|
||||
export default defineConfig({
|
||||
darkMode: 'media',
|
||||
theme: {
|
||||
fontFamily: {
|
||||
display: ['Poppins', 'sans-serif'],
|
||||
body: ['Poppins', 'sans-serif'],
|
||||
display: ['Poppins', 'Inter', 'Roboto', 'sans-serif'],
|
||||
body: ['Poppins', 'Inter', 'Roboto', 'sans-serif'],
|
||||
code: ['IBM Plex Mono', 'JetBrains Mono', 'SF Mono', 'Consolas', 'monospace']
|
||||
},
|
||||
extend: {
|
||||
colors: {
|
||||
|
@ -143,5 +143,6 @@ module.exports = {
|
|||
},
|
||||
plugins: [
|
||||
aspectRatio,
|
||||
scrollbar,
|
||||
],
|
||||
};
|
||||
});
|
Loading…
Reference in New Issue