mirror of https://github.com/aldy505/code.git
GitHub
commit
5e849da9a2
|
|
@ -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'],
|
||||
},
|
||||
};
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
@ -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
|
||||
<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 transition duration-350 ease-in-out"
|
||||
href="https://www.github.com/aldy505/code"
|
||||
>Github.</a>
|
||||
</p>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export default MadeWithLove;
|
||||
|
|
@ -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>
|
||||
|
|
@ -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;
|
||||
|
|
@ -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>
|
||||
|
|
@ -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(),
|
||||
],
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -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;
|
||||
|
|
@ -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>
|
||||
|
|
@ -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,
|
||||
};
|
||||
25
package.json
25
package.json
|
|
@ -4,8 +4,8 @@
|
|||
"description": "Website for code.reinaldyrafli.com",
|
||||
"main": "index.js",
|
||||
"scripts": {
|
||||
"dev": "nuxt",
|
||||
"generate": "nuxt generate",
|
||||
"dev": "vite",
|
||||
"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.29.0",
|
||||
"eslint": "^7.30.0",
|
||||
"eslint-config-xo-space": "^0.28.0",
|
||||
"eslint-plugin-vue": "^7.11.1",
|
||||
"husky": "^6.0.0",
|
||||
"nuxt": "^2.15.7",
|
||||
"nuxt-animejs": "^1.2.1",
|
||||
"nuxt-vite": "^0.1.1",
|
||||
"nuxt-windicss": "^1.0.6"
|
||||
"husky": "^7.0.1",
|
||||
"vite": "^2.4.1",
|
||||
"vite-plugin-solid": "^2.0.0",
|
||||
"vite-plugin-windicss": "^1.2.4",
|
||||
"windicss": "^3.1.4"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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 —>
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Show>
|
||||
</div>
|
||||
|
||||
<div class="flex-initial md:hidden py-4">
|
||||
<MadeWithLove />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default Index;
|
||||
124
pages/index.vue
124
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 —>
|
||||
</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>
|
||||
|
|
@ -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'));
|
||||
|
||||
|
|
@ -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,
|
||||
},
|
||||
});
|
||||
|
|
@ -1,8 +1,9 @@
|
|||
// @ts-check - enable TS check for js file
|
||||
import {defineConfig} from 'windicss/helpers';
|
||||
import aspectRatio from 'windicss/plugin/aspect-ratio';
|
||||
const aspectRatio = require('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,
|
||||
],
|
||||
});
|
||||
};
|
||||
|
|
|
|||
Loading…
Reference in New Issue