Merge pull request #1 from aldy505/solid

moving to solid

.eslintrc.js

@@ -4,16 +4,18 @@ module.exports = {
     es2021: true,
   },
   extends: [
-    'plugin:vue/strongly-recommended',
     'xo-space',
   ],
   parserOptions: {
     ecmaVersion: 12,
     sourceType: 'module',
+    ecmaFeatures: {
+      jsx: true,
+    },
   },
   plugins: [
-    'vue',
   ],
   rules: {
+    'capitalized-comments': ['off'],
   },
 };

README.md

@@ -11,6 +11,7 @@ See [CONTRIBUTING](https://github.com/aldy505/code/blob/master/CONTRIBUTING.md)
 ## License
 
 Code is a codebase for code.reinaldyrafli.com
+
 Copyright (C) 2021-present Reinaldy Rafli
 
 This program is free software: you can redistribute it and/or modify

components/GetRepositories.js

@@ -0,0 +1,13 @@
+import axios from 'axios';
+
+async function getRepositories() {
+  try {
+    const response = (await axios.get('https://api.github.com/users/aldy505/repos')).data;
+    const randNumber = Math.random() * (response.length - 5);
+    return Promise.resolve(response.sort().slice(randNumber, randNumber + 5));
+  } catch (error) {
+    return Promise.reject(error);
+  }
+}
+
+export default getRepositories;

components/MadeWithLove.jsx

@@ -0,0 +1,32 @@
+function MadeWithLove() {
+  return (
+    <>
+      <div class="text-xs opacity-75 hover:opacity-100 transition duration-500 ease-in-out">
+        <p>
+          Made with&nbsp;
+          <svg
+            class="inline"
+            viewBox="0 0 1792 1792"
+            preserveAspectRatio="xMidYMid meet"
+            xmlns="http://www.w3.org/2000/svg"
+            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"
+              fill="#e25555"
+            />
+          </svg>
+          &nbsp;in Indonesia.
+        </p>
+        <p>
+          Source code available on <a
+            class="hover:underline transition duration-350 ease-in-out"
+            href="https://www.github.com/aldy505/code"
+          >Github.</a>
+        </p>
+      </div>
+    </>
+  );
+}
+
+export default MadeWithLove;

components/MadeWithLove.vue

@@ -1,22 +0,0 @@
-<template>
-  <div class="text-xs opacity-75 hover:opacity-100">
-    <p>
-      Made with <svg
-        class="inline"
-        viewBox="0 0 1792 1792"
-        preserveAspectRatio="xMidYMid meet"
-        xmlns="http://www.w3.org/2000/svg"
-        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"
-        fill="#e25555"
-      /></svg> in Indonesia.
-    </p>
-    <p>
-      Source code available on <a
-        class="hover:underline"
-        href="https://www.github.com/aldy505/code"
-      >Github.</a>
-    </p>
-  </div>
-</template>

components/Repository.jsx

@@ -0,0 +1,106 @@
+const image = {
+  folder: 'folder.svg',
+  star: 'star.svg',
+};
+
+function getLanguageColor(language) {
+  if (!language) {
+    return;
+  }
+
+  switch (language.toLowerCase()) {
+    case 'go':
+      return '#a1d5ed';
+
+    case 'julia':
+      return '#d35bde';
+
+    case 'javascript':
+      return '#e4f060';
+
+    case 'typescript':
+      return '#4e85de';
+
+    case 'vue':
+      return '#4ede85';
+
+    case 'shell':
+      return '#9dde4e';
+
+    case 'html':
+      return '#de704e';
+
+    default:
+      return '#bab7b6';
+  }
+}
+
+function Repository({url, name, stars, language, description}) {
+  return (
+    <div class="flex flex-col py-4 px-2 lg:px-0 hover:opacity-100">
+      <div class="flex-1 text-sm hover:text-blue-300 font-bold transition duration-500 ease-in-out">
+        <a href={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"
+                alt="Repository"
+              />
+            </div>
+            <div class="flex-initial px-4">
+              { name }
+            </div>
+          </div>
+        </a>
+      </div>
+      <div class="flex-2 text-xs opacity-80 lg:w-2/3">
+        { description }
+      </div>
+      <div class="flex-1">
+        <div class="flex flex-row items-center">
+          <div class="flex-1 text-xs">
+            <div class="flex flex-row items-center content-center">
+              <div class="flex-initial">
+                <svg
+                  v-show="language"
+                  class="h-2 w-2 inline"
+                  viewBox="0 0 100 100"
+                >
+                  <circle
+                    cx="50"
+                    cy="50"
+                    r="40"
+                    fill={getLanguageColor(language)}
+                  />
+                </svg>
+              </div>
+              <div class="flex-initial px-2">
+                { language }
+              </div>
+            </div>
+          </div>
+          <div
+            v-show="stars > 0"
+            class="flex-2 text-xs"
+          >
+            <div class="flex flex-row items-center content-center">
+              <div class="flex-initial">
+                <img
+                  src={image.star}
+                  class="text-white font-bold h-3 w-3 fill-current -inset-y-1"
+                  alt="Stargazers"
+                />
+              </div>
+              <div class="flex-initial px-2">
+                { stars }
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default Repository;

components/Repository.vue

@@ -1,140 +0,0 @@
-<template>
-  <div class="flex flex-col py-4 px-2 lg:px-0 hover:opacity-100">
-    <div class="flex-1 text-sm hover:text-blue-300 font-bold">
-      <a :href="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"
-              alt="Repository"
-            >
-          </div>
-          <div class="flex-initial px-4">
-            {{ name }}
-          </div>
-        </div>
-      </a>
-    </div>
-    <div class="flex-2 text-xs opacity-80 lg:w-2/3">
-      {{ description }}
-    </div>
-    <div class="flex-1">
-      <div class="flex flex-row items-center">
-        <div class="flex-1 text-xs">
-          <div class="flex flex-row items-center content-center">
-            <div class="flex-initial">
-              <svg
-                v-show="language"
-                class="h-2 w-2 inline"
-                viewBox="0 0 100 100"
-              >
-                <circle
-                  cx="50"
-                  cy="50"
-                  r="40"
-                  :fill="getLanguageColor()"
-                />
-              </svg>
-            </div>
-            <div class="flex-initial px-2">
-              {{ language }}
-            </div>
-          </div>
-        </div>
-        <div
-          v-show="stars > 0"
-          class="flex-2 text-xs"
-        >
-          <div class="flex flex-row items-center content-center">
-            <div class="flex-initial">
-              <img
-                :src="image.star"
-                class="text-white font-bold h-3 w-3 fill-current -inset-y-1"
-                alt="Stargazers"
-              >
-            </div>
-            <div class="flex-initial px-2">
-              {{ stars }}
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'Repository',
-  props: {
-    url: {
-      type: String,
-      required: true,
-      default: '',
-    },
-    name: {
-      type: String,
-      required: true,
-      default: '',
-    },
-    stars: {
-      type: Number,
-      required: false,
-      default: null,
-    },
-    description: {
-      type: String,
-      required: false,
-      default: '',
-    },
-    language: {
-      type: String,
-      required: false,
-      default: '',
-    },
-  },
-  data() {
-    return {
-      image: {
-        folder: 'folder.svg',
-        star: 'star.svg',
-      },
-      languageColor: 'white',
-    };
-  },
-  methods: {
-    getLanguageColor() {
-      if (!this.language) {
-        return;
-      }
-
-      switch (this.language.toLowerCase()) {
-        case 'go':
-          return '#a1d5ed';
-
-        case 'julia':
-          return '#d35bde';
-
-        case 'javascript':
-          return '#e4f060';
-
-        case 'typescript':
-          return '#4e85de';
-
-        case 'vue':
-          return '#4ede85';
-
-        case 'shell':
-          return '#9dde4e';
-
-        case 'html':
-          return '#de704e';
-
-        default:
-          return '#bab7b6';
-      }
-    },
-  },
-};
-</script>

config/head.js

@@ -86,10 +86,9 @@ export default {
     {rel: 'icon', type: 'image/svg', href: 'favicon.svg'},
   ],
   script: [
-    {src: 'https://static.cloudflareinsights.com/beacon.min.js', 'data-cf-beacon': process.env.CLOUDFLARE_TOKEN, defer: true},
+    {src: 'https://static.cloudflareinsights.com/beacon.min.js', 'data-cf-beacon': '{"token": "2a03659d407a47e282375a70a91bdfc4"}', defer: true},
   ],
   meta: [
-    {charset: 'utf-8'},
     {name: 'viewport', content: 'width=device-width, initial-scale=1'},
     ...prepareMeta(),
   ],

index.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+
+    <script src="./solid.config.jsx" type="module"></script>
+  </body>
+</html>

layouts/default.jsx

@@ -0,0 +1,26 @@
+// eslint-disable-next-line no-unused-vars
+import {Route} from 'solid-app-router';
+// eslint-disable-next-line no-unused-vars
+import {For} from 'solid-js';
+// eslint-disable-next-line no-unused-vars
+import {MetaProvider, Title, Link, Meta} from 'solid-meta';
+import head from '../config/head.js';
+
+function Default() {
+  return (
+    <>
+      <MetaProvider>
+        <Route />
+        <Title>{head.title}</Title>
+        <For each={head.link}>{link =>
+          <Link rel={link.rel} href={link.href} type={link?.type ?? ''} />
+        }</For>
+        <For each={head.meta}>{meta =>
+          <Meta name={meta?.name ?? ''} property={meta?.property ?? ''} content={meta.content} />
+        }</For>
+      </MetaProvider>
+    </>
+  );
+}
+
+export default Default;

layouts/error.vue

@@ -1,23 +0,0 @@
-<template>
-  <div class="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">
-      <h1 class="text-3xl font-bold">
-        Oh no, something went wrong.
-      </h1>
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  created() {
-    this.$router.push('/');
-  },
-  props: {
-    error: {
-      type: Object,
-      default: null,
-    },
-  },
-};
-</script>

nuxt.config.js

@@ -1,16 +0,0 @@
-import headConfig from './config/head.js';
-
-export default {
-  target: 'static',
-  ssr: false,
-  buildModules: [
-    'nuxt-vite',
-    'nuxt-windicss',
-    'nuxt-animejs',
-  ],
-  modules: [
-    '@nuxtjs/axios',
-  ],
-  components: true,
-  head: headConfig,
-};

package.json

@@ -4,8 +4,8 @@
   "description": "Website for code.reinaldyrafli.com",
   "main": "index.js",
   "scripts": {
-    "dev": "nuxt",
+    "dev": "vite",
-    "generate": "nuxt generate",
+    "generate": "vite build",
     "lint": "eslint --fix --ext .vue,.js --ignore-path .gitignore .",
     "postinstall": "husky install"
   },
@@ -19,17 +19,22 @@
     "url": "https://github.com/aldy505/code/issues"
   },
   "homepage": "https://github.com/aldy505/code#readme",
+  "dependencies": {
+    "animejs": "^3.2.1",
+    "axios": "^0.21.1",
+    "solid-app-router": "^0.0.50",
+    "solid-js": "^1.0.1",
+    "solid-meta": "^0.27.0"
+  },
   "devDependencies": {
     "@commitlint/cli": "^12.1.4",
     "@commitlint/config-conventional": "^12.1.4",
-    "@nuxtjs/axios": "^5.13.6",
+    "eslint": "^7.30.0",
-    "eslint": "^7.29.0",
     "eslint-config-xo-space": "^0.28.0",
-    "eslint-plugin-vue": "^7.11.1",
+    "husky": "^7.0.1",
-    "husky": "^6.0.0",
+    "vite": "^2.4.1",
-    "nuxt": "^2.15.7",
+    "vite-plugin-solid": "^2.0.0",
-    "nuxt-animejs": "^1.2.1",
+    "vite-plugin-windicss": "^1.2.4",
-    "nuxt-vite": "^0.1.1",
+    "windicss": "^3.1.4"
-    "nuxt-windicss": "^1.0.6"
   }
 }

pages/index.jsx

@@ -0,0 +1,125 @@
+// 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';
+import getRepositories from '../components/GetRepositories';
+
+const image = {
+  me: 'me.png',
+};
+
+function Index() {
+  const [repositories, setRepositories] = createSignal({});
+  const [repoRequest, setRepoRequest] = createSignal(false);
+
+  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 className="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">
+        <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">
+              <li>
+                <a
+                  href="mailto:aldy505@tutanota.com"
+                  class="opacity-75 hover:opacity-100 hover:underline-light-300 hover:text-blue-100 transition duration-500 ease-in-out"
+                >Email</a>
+              </li>
+              <li>
+                <a
+                  href="https://www.github.com/aldy505"
+                  class="opacity-75 hover:opacity-100 hover:underline-light-300 hover:text-blue-100 transition duration-500 ease-in-out"
+                >Github</a>
+              </li>
+              <li>
+                <a
+                  href="https://t.me/aldy505"
+                  class="opacity-75 hover:opacity-100 hover:underline-light-300 hover:text-blue-100 transition duration-500 ease-in-out"
+                >Telegram</a>
+              </li>
+            </ul>
+
+            <div class="text-sm py-2 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>
+      </div>
+    </div>
+  );
+}
+
+export default Index;

pages/index.vue

@@ -1,124 +0,0 @@
-<template>
-  <div class="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">
-      <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">
-            <li>
-              <a
-                href="mailto:aldy505@tutanota.com"
-                class="opacity-75 hover:opacity-100 hover:underline-light-300 hover:text-blue-100"
-              >Email</a>
-            </li>
-            <li>
-              <a
-                href="https://www.github.com/aldy505"
-                class="opacity-75 hover:opacity-100 hover:underline-light-300 hover:text-blue-100"
-              >Github</a>
-            </li>
-            <li>
-              <a
-                href="https://t.me/aldy505"
-                class="opacity-75 hover:opacity-100 hover:underline-light-300 hover:text-blue-100"
-              >Telegram</a>
-            </li>
-          </ul>
-
-          <div class="text-sm py-2 hidden md:block">
-            <MadeWithLove />
-          </div>
-        </div>
-
-        <div class="flex-1 pl-0 lg:pl-12">
-          <div
-            class="repository"
-            v-show="repoRequest"
-          >
-            <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-1 place-content-center">
-              <div
-                class="line"
-                v-for="repo in repositories"
-                :key="repo.updated_at"
-              >
-                <Repository
-                  :url="repo.html_url"
-                  :name="repo.name"
-                  :stars="repo.stargazers_count"
-                  :language="repo.language"
-                  :description="repo.description"
-                />
-              </div>
-              <div class="line">
-                <p class="text-sm opacity-75 hover:opacity-100 hover:text-blue-100 hover:underline md:pb-0 pb-4">
-                  <a href="https://www.github.com/aldy505">
-                    Explore more on Github &mdash;&gt;
-                  </a>
-                </p>
-              </div>
-            </div>
-          </div>
-        </div>
-
-        <div class="flex-initial md:hidden py-4">
-          <MadeWithLove />
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  data() {
-    return {
-      repositories: [],
-      repoRequest: false,
-      image: {
-        me: 'me.png',
-      },
-    };
-  },
-  async mounted() {
-    try {
-      const response = await this.$axios.$get('https://api.github.com/users/aldy505/repos');
-      const randNumber = Math.random() * (response.length - 5);
-      this.repositories = response.sort().slice(randNumber, randNumber + 5);
-      this.repoRequest = true;
-
-      this.$anime({
-        targets: '.repository',
-        opacity: [
-          {value: 0, duration: 500, delay: 500},
-          {value: 100, duration: 2500},
-        ],
-        translateY: [
-          {value: 1000, duration: 500, delay: 800},
-          {value: 0, duration: 2500},
-        ],
-        delay: this.$anime.stagger(300, {start: 0, from: 'first', easing: 'spring'}),
-      });
-    } catch {
-      this.repoRequest = false;
-    }
-  },
-};
-</script>

solid.config.jsx

@@ -0,0 +1,25 @@
+import {lazy} from 'solid-js';
+import {render} from 'solid-js/web';
+import 'virtual:windi.css';
+// eslint-disable-next-line no-unused-vars
+import {Router} from 'solid-app-router';
+// eslint-disable-next-line no-unused-vars
+import Default from './layouts/default.jsx';
+
+const route = [
+  {
+    path: '/',
+    component: () => lazy(() => import('./pages/index.jsx')),
+  },
+  {
+    path: '*all',
+    component: () => lazy(() => import('./pages/index.jsx')),
+  },
+];
+
+render(() => (
+  <Router routes={route}>
+    <Default />
+  </Router>
+), document.getElementById('root'));
+

vite.config.js

@@ -0,0 +1,19 @@
+import {defineConfig} from 'vite';
+import solidPlugin from 'vite-plugin-solid';
+import windiCSS from 'vite-plugin-windicss';
+
+export default defineConfig({
+  publicDir: 'static',
+  plugins: [
+    solidPlugin(),
+    windiCSS({
+      scan: {
+        dirs: ['.'],
+      },
+    }),
+  ],
+  build: {
+    target: 'esnext',
+    polyfillDynamicImport: false,
+  },
+});

windi.config.js

@@ -1,8 +1,9 @@
-// @ts-check - enable TS check for js file
+const aspectRatio = require('windicss/plugin/aspect-ratio');
-import {defineConfig} from 'windicss/helpers';
-import aspectRatio from 'windicss/plugin/aspect-ratio';
 
-export default defineConfig({
+/**
+ * @type {import('windicss/helpers').defineConfig}
+ */
+module.exports = {
   darkMode: 'media',
   theme: {
     fontFamily: {
@@ -143,4 +144,4 @@ export default defineConfig({
   plugins: [
     aspectRatio,
   ],
-});
+};