feat: moving to typescript and added some projects

.eslintrc

@@ -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"]
+  }
+}

.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'],
-  },
-};

.husky/pre-commit

@@ -1,4 +1,4 @@
 #!/bin/sh
 . "$(dirname "$0")/_/husky.sh"
 
-yarn lint
+npm run lint

.nvmrc

@@ -1 +1 @@
-v14.17.0
+v16.11.1

components/GetRepositories.ts

@@ -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) {

components/Home/Main.tsx

@@ -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;

components/Home/Projects.tsx

@@ -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.&nbsp;
+          <a class="hover:underline" href="https://www.github.com/aldy505">Explore more on my Github</a>
+        </p>
+      </section>
+    </>
+  );
+}
+
+export default Projects;

components/Home/Writings.tsx

@@ -0,0 +1,7 @@
+function Writings() {
+  return (
+    <p>Hello</p>
+  );
+}
+
+export default Writings;

components/LinkList.jsx

@@ -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;

components/LinkList.tsx

@@ -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;

components/MadeWithLove.tsx

@@ -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"

components/Navbar.tsx

@@ -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;

components/Project.tsx

@@ -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;

components/Repository.tsx

@@ -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>

config/case.ts

@@ -0,0 +1,6 @@
+export function convertCase(str: string): string {
+  return str
+    .split(' ')
+    .reduce((p: string[], c) => { p.push(c.toLowerCase()); return p; }, [])
+    .join('-');
+}

config/head.ts

@@ -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' },
   ],

config/projects.js

@@ -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;

config/projects.ts

@@ -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;

index.html

@@ -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>

layouts/default.tsx

@@ -1,27 +1,27 @@
-import { useRoutes } from 'solid-app-router';
+import { RouteDefinition, useRoutes } from 'solid-app-router';
-// eslint-disable-next-line no-unused-vars
 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 head from '../config/head';
-import '@fontsource/poppins';
+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',
+    path: '/project/:repo',
-    component: () => lazy(() => import('../pages/projects.jsx')),
+    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>

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",
+    "marked": "^3.0.7",
-    "solid-app-router": "^0.1.3",
+    "solid-app-router": "^0.1.9",
-    "solid-js": "^1.0.7",
+    "solid-js": "^1.1.6",
-    "solid-meta": "^0.27.1"
+    "solid-meta": "^0.27.2",
+    "solid-styled-jsx": "^0.27.1"
   },
   "devDependencies": {
-    "@commitlint/cli": "^13.1.0",
+    "@commitlint/cli": "^13.2.1",
-    "@commitlint/config-conventional": "^13.1.0",
+    "@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",
+    "eslint-config-xo-space": "^0.30.0",
-    "husky": "^7.0.1",
+    "eslint-plugin-solid": "^0.1.2",
-    "vite": "^2.4.4",
+    "husky": "^7.0.2",
-    "vite-plugin-solid": "^2.0.1",
+    "sass": "^1.43.2",
-    "vite-plugin-windicss": "^1.2.7",
+    "typescript": "^4.4.4",
-    "windicss": "^3.1.6"
+    "vite": "^2.6.7",
+    "vite-plugin-solid": "^2.1.1",
+    "vite-plugin-windicss": "^1.4.11",
+    "windicss": "^3.1.9"
   }
 }

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 &mdash;&gt;
-                  </a>
-                </p>
-              </div>
-            </div>
-          </div>
-        </Show>
-      </div>
-
-      <div class="flex-initial md:hidden py-4">
-        <MadeWithLove />
-      </div>
-    </div>
-  );
-}
-
-export default Index;

pages/index.tsx

@@ -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;

pages/project/[repo].tsx

@@ -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;
+

pages/projects.jsx

@@ -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;

solid.config.jsx

@@ -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'));
-

solid.config.tsx

@@ -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'));
+

styles/default.sass

@@ -0,0 +1,2 @@
+html
+  scroll-behavior: smooth

styles/repo.sass

@@ -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

tsconfig.json

@@ -0,0 +1,12 @@
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    "module": "ESNext",
+    "moduleResolution": "node",
+    "allowSyntheticDefaultImports": true,
+    "esModuleInterop": true,
+    "jsx": "preserve",
+    "jsxImportSource": "solid-js",
+    "types": ["vite/client"]
+  }
+}

types/github.ts

@@ -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';

types/meta.ts

@@ -0,0 +1,6 @@
+export interface MetaItem {
+  hid?: string;
+  name?: string;
+  property?: string;
+  content: string;
+}

types/project.ts

@@ -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;
+}

vite.config.ts

@@ -15,5 +15,7 @@ export default defineConfig({
   build: {
     target: 'esnext',
     polyfillDynamicImport: false,
+    emptyOutDir: true,
+    outDir: 'dist'
   },
 });

windi.config.ts

@@ -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';
 
-/**
+export default defineConfig({
- * @type {import('windicss/helpers').defineConfig}
- */
-module.exports = {
   darkMode: 'media',
   theme: {
     fontFamily: {
-      display: ['Poppins', 'sans-serif'],
+      display: ['Poppins', 'Inter', 'Roboto', 'sans-serif'],
-      body: ['Poppins', '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,
   ],
-};
+});