Skip to content

Commit

Permalink
Merge pull request #4 from ful1e5/dev
Browse files Browse the repository at this point in the history
More Improvements and Fixes
  • Loading branch information
ful1e5 authored Nov 15, 2023

Verified

This commit was signed with the committer’s verified signature.
stefanprodan Stefan Prodan
2 parents d3332dc + adc27b8 commit 5d89d1d
Showing 35 changed files with 252 additions and 159 deletions.
2 changes: 1 addition & 1 deletion .github/workflows/ci.yml
Original file line number Diff line number Diff line change
@@ -14,7 +14,7 @@ on:
- main

jobs:
lint:
ci:
runs-on: ubuntu-latest

steps:
35 changes: 35 additions & 0 deletions .github/workflows/deploy-db.yml
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
name: Deploy Database
on:
push:
branches:
- main

jobs:
deploy-db:
runs-on: ubuntu-latest

steps:
- name: Checkout repository
uses: actions/checkout@v2

- name: Setup Node.js and Yarn
uses: actions/setup-node@v3
with:
registry-url: https://registry.yarnpkg.com

- name: Cache Yarn dependencies
uses: actions/cache@v3
with:
path: |
node_modules
key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
restore-keys: |
${{ runner.os }}-yarn-
- name: Install Yarn dependencies
run: yarn install

- name: Apply all pending migrations to the database
run: npx prisma migrate deploy
env:
DATABASE_URL: ${{ secrets.DATABASE_URL }}
1 change: 1 addition & 0 deletions .gitignore
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
.pki
.env.local
.env

2 changes: 1 addition & 1 deletion src/app/(home)/studio/page.tsx
Original file line number Diff line number Diff line change
@@ -62,7 +62,7 @@ export default function StudioPage() {
}}
/>

<div className='mt-10'>
<div className='mt-5'>
<SizePicker
list={SIZES}
values={cursorSize}
4 changes: 3 additions & 1 deletion src/app/api/svg/[id]/route.ts
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import { NextRequest, NextResponse } from 'next/server';

import redis from '@services/redis';
import { ImageRedis } from '@services/redis';
import { FetchSVG } from '@utils/figma/fetch-svgs';

import { RESPONSES as res } from '@api/config';
@@ -20,6 +20,7 @@ export async function GET(request: NextRequest, { params }: Param) {

if (id) {
try {
const redis = new ImageRedis();
const raw = await redis.get(id);

if (!raw) return res.image_not_found;
@@ -35,6 +36,7 @@ export async function GET(request: NextRequest, { params }: Param) {
data.push(`data:image/png;base64,${img!.toString('base64')}`);
}

await redis.client.quit();
if (data) {
return NextResponse.json({ data });
} else {
56 changes: 26 additions & 30 deletions src/app/api/svg/fetch/route.ts
Original file line number Diff line number Diff line change
@@ -1,10 +1,11 @@
import { NextRequest, NextResponse } from 'next/server';

import redis from '@services/redis';
import { ImageRedis } from '@services/redis';

import { FetchSVG } from '@utils/figma/fetch-svgs';

import { TYPES } from '@root/configs';

import { ApiError } from 'figma-api/lib/utils';

export async function GET(request: NextRequest) {
@@ -24,21 +25,15 @@ export async function GET(request: NextRequest) {

const update = async () => {
const fetcher = new FetchSVG();

// Deleting old images
const keys = await redis.keys('i-*');
if (keys.length > 0) {
const n = await redis.del(...keys);
console.log(`Deleted ${n} URLs.`);
}

try {
const redis = new ImageRedis();
await redis.rmOldUrls();

for (const type of TYPES) {
const svgs = await fetcher.fetchSVGs({ type });
await redis.del(type);

const v = await redis.set(type, JSON.stringify(svgs));
console.info(`Updated Type '${type}': ${v} `);
redis.saveSVGs(type, svgs);

let all_node_ids: string[] = [];
for (let { node_ids } of svgs) {
@@ -50,8 +45,7 @@ const update = async () => {
for (let { id, name, node_ids } of svgs) {
const urls = node_ids.map((nid) => images[nid]);
if (urls) {
const v2 = await redis.set(id, JSON.stringify(urls));
console.info(`Updated '${name}': ${v2} `);
await redis.saveUrls(id, name, urls);
} else {
return {
error: `[Figma API] Unable to fetch '${name}' locations.`
@@ -63,25 +57,27 @@ const update = async () => {
}
}

await redis.client.quit();
return;
} catch (_e) {
// @ts-ignore
let e: ApiError = _e;
} catch (e) {
if (e instanceof Error) {
return { error: e.message, status: 504 };
}

if (e?.response?.data) {
const res = e.response.data;
return {
error: `[Figma API] ${res.err}`,
status: res.status || 400
};
} else {
// @ts-ignore
const error = await _e.toJSON();
return {
error: `[Figma API] ${error.message}`,
stack: error.stack,
status: 504
};
if (e instanceof ApiError) {
if (e.response.data) {
const res = e.response.data;
return {
error: `[Figma API] ${res.err}`,
status: res.status || 400
};
}
}

return {
error: 'Internal Server Error',
stack: JSON.stringify(e),
status: 504
};
}
};
9 changes: 7 additions & 2 deletions src/app/api/svg/route.ts
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import { NextRequest, NextResponse } from 'next/server';

import redis from '@services/redis';
import { ImageRedis } from '@services/redis';

import { TYPES } from '@root/configs';
import { RESPONSES as res } from '@api/config';
@@ -14,12 +14,17 @@ export async function GET(request: NextRequest) {
if (type) {
if (TYPES.includes(type)) {
try {
const redis = new ImageRedis();
const data: SVG[] = await redis
.get(type)
.then((s) => JSON.parse(s || '[]'));

const error = data.length === 0 ? 'Unable to fetch SVG nodes' : null;
const error =
data.length === 0
? "Oops! It looks like there's a little hiccup fetching the SVG nodes right now."
: null;

await redis.client.quit();
return NextResponse.json(
{ error, data },
{ status: error ? 404 : 200 }
11 changes: 4 additions & 7 deletions src/components/ColorPicker/index.tsx
Original file line number Diff line number Diff line change
@@ -23,7 +23,7 @@ export const ColorPickerButton: React.FC<Props> = (props) => {

return (
<button
className={`container p-7 sm:p-6 flex flex-row sm:flex-col gap-4 sm:gap-0 justify-center items-center rounded-3xl ring-1 ${
className={`container p-4 sm:p-6 flex flex-col gap-1 justify-center items-center rounded-2xl sm:rounded-3xl ring-1 ${
props.selected ? 'ring-white/[.3] bg-white/[.1]' : 'ring-white/[.2]'
}`}
title={
@@ -34,7 +34,7 @@ export const ColorPickerButton: React.FC<Props> = (props) => {
disabled={props.selected && props.disabled}
onClick={props.onClick}>
<div
className='w-4/5 sm:w-20 h-24 sm:h-20 rounded-full flex justify-center items-center'
className='w-10 sm:w-20 h-10 sm:h-20 rounded-full flex justify-center items-center'
style={
props.color
? {
@@ -47,12 +47,9 @@ export const ColorPickerButton: React.FC<Props> = (props) => {
background: `radial-gradient( circle closest-side, hsl(0, 0%, 100%), hsl(0, 0%, 0%) 90%), conic-gradient(${stops})`
}
}>
<p className='overflow-auto sm:hidden text-lg font-bold'>
{props.name}
</p>
{props.children}
</div>
<div className='mt-0 sm:mt-3 text-center hidden sm:block'>
<div className='mt-0 sm:mt-3 text-center text-xs sm:text-sm'>
{props.name}
</div>
</button>
@@ -73,7 +70,7 @@ export const ColorPicker: React.FC<ColorPickerProps> = (props) => {
return (
<>
<div className='flex items-center justify-center'>
<div className='w-full md:w-2/3 lg:w-1/2 sm:mx-32 grid grid-cols-2 md:grid-cols-4 gap-3 sm:gap-7'>
<div className='w-full md:w-2/3 lg:w-1/2 sm:mx-32 grid grid-cols-4 gap-3 sm:gap-7'>
{Object.entries(props.colors).map(([name, color], i) => (
<ColorPickerButton
key={i}
58 changes: 28 additions & 30 deletions src/components/Cursors/card.tsx
Original file line number Diff line number Diff line change
@@ -95,36 +95,34 @@ export const CursorCard: React.FC<Props> = (props) => {
}, [loading, frames]); // eslint-disable-line react-hooks/exhaustive-deps

return (
<div className='flex justify-center'>
<div className='w-4/6 sm:w-full mb-4 overflow-hidden rounded-3xl bg-white/[0.05] border-white/[.1] border'>
<div className='w-full h-40 bg-white/[.1] mb-4 '>
{!loading ? (
<div
className={`flex justify-center items-center h-full ${
!loading ? 'opacity-100' : 'opacity-0'
} transition-opacity duration-500`}>
{frames.length > 0 ? (
<img
className='h-36 sm:h-28'
hidden={loading}
alt={props.svg.name}
title={props.svg.name}
src={frames[index]}
/>
) : (
<span hidden={loading}>
<BrokenImage />
</span>
)}
</div>
) : (
<div className='w-full h-full animate-pulse bg-white/[.2]' />
)}
</div>

<div className='text-center'>
<p className='mb-2'>{props.svg.name}</p>
</div>
<div className='w-full mb-4 overflow-hidden rounded-2xl sm:rounded-3xl bg-white/[0.05] border-white/[.1] border'>
<div className='w-full h-20 sm:h-40 bg-white/[.1] mb-4 '>
{!loading ? (
<div
className={`flex justify-center items-center h-full ${
!loading ? 'opacity-100' : 'opacity-0'
} transition-opacity duration-500`}>
{frames.length > 0 ? (
<img
className='h-12 sm:h-28'
hidden={loading}
alt={props.svg.name}
title={props.svg.name}
src={frames[index]}
/>
) : (
<span hidden={loading}>
<BrokenImage />
</span>
)}
</div>
) : (
<div className='w-full h-full animate-pulse bg-white/[.2]' />
)}
</div>

<div className='text-center text-[6px] sm:text-sm'>
<p className='mb-2'>{props.svg.name}</p>
</div>
</div>
);
7 changes: 5 additions & 2 deletions src/components/Cursors/error.tsx
Original file line number Diff line number Diff line change
@@ -2,14 +2,17 @@

import React from 'react';

import { ErrorSVG } from '@components/svgs';

type Props = {
message: string;
};

export const CursorsError: React.FC<Props> = (props) => {
return (
<div className='container mx-auto px-4 h-72 flex items-center justify-center'>
<p className='text-2xl font-bold'>{props.message}</p>
<div className='container h-72 flex flex-col gap-2 fill-red-200 items-center justify-center'>
<ErrorSVG size={60} />
<div className='max-w-sm font-bold text-center'>{props.message}</div>
</div>
);
};
2 changes: 1 addition & 1 deletion src/components/Cursors/index.tsx
Original file line number Diff line number Diff line change
@@ -53,7 +53,7 @@ export const Cursors: React.FC<Props> = (props) => {

return (
<div className='container sm:px-4'>
<div className='grid grid-cols-1 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-6'>
<div className='grid grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-2 sm:gap-4'>
{svgs.map((e) => (
<Card
key={e.id}
15 changes: 9 additions & 6 deletions src/components/Cursors/loading.tsx
Original file line number Diff line number Diff line change
@@ -9,13 +9,16 @@ export const CursorsLoading: React.FC<Props> = (_props) => {
const cards = Array.from(new Array(12), (_, i) => i + 1);
return (
<div className='container sm:px-4'>
<div className='grid grid-cols-1 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-6'>
<div className='grid grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-2 sm:gap-4'>
{cards.map((key) => (
<div key={key} className='flex justify-center'>
<div className='w-4/6 sm:w-full overflow-hidden rounded-3xl bg-white/[0.05] border-white/[.1] border'>
<div className={'w-full h-40 animate-pulse bg-white/[.2]'}></div>
<div className='flex animate-pulse bg-white/[.1] h-12'></div>
</div>
<div
key={key}
className='w-full mb-4 overflow-hidden rounded-2xl sm:rounded-3xl bg-white/[0.05] border-white/[.1] border'>
<div
className={
'w-full h-20 sm:h-40 animate-pulse bg-white/[.2]'
}></div>
<div className='flex animate-pulse bg-white/[.1] h-8'></div>
</div>
))}
</div>
2 changes: 1 addition & 1 deletion src/components/DownloadButton/Counts.tsx
Original file line number Diff line number Diff line change
@@ -4,7 +4,7 @@ import React, { useEffect, useState } from 'react';
import useSWR from 'swr';

import Tooltip from '@components/Tooltip';
import { InfoSVG } from './svgs';
import { InfoSVG } from '@components/svgs';

import { DB_SEEDS } from '@root/configs';

6 changes: 3 additions & 3 deletions src/components/DownloadButton/Error.tsx
Original file line number Diff line number Diff line change
@@ -10,7 +10,7 @@ import Link from 'next/link';

import { bugReportTemplate } from '@utils/bug-report';

import { ErrorSVG } from './svgs';
import { ErrorSVG } from '@components/svgs';

import { BUG_REPORT_ENDPOINT } from '@root/configs';

@@ -25,8 +25,8 @@ export const DownloadError: React.FC<Props> = (props) => {
{props.logs.text && (
<>
<div className='flex mt-2 p-4 justify-center items-center fill-red-300 text-red-300'>
<div className='mr-1 mt-1 h-7 w-7'>
<ErrorSVG />
<div className='mr-2 h-6 w-6'>
<ErrorSVG size={19} />
</div>
<p className='font-bold'>{props.logs.text}</p>
</div>
2 changes: 1 addition & 1 deletion src/components/DownloadButton/SubButtons.tsx
Original file line number Diff line number Diff line change
@@ -4,7 +4,7 @@ import React from 'react';

import { LIB_VERSION } from '@root/version';

import { LinuxDownloadSVG, WindowsDownloadSVG } from './svgs';
import { LinuxDownloadSVG, WindowsDownloadSVG } from '@components/svgs';

type Props = {
disabled?: boolean;
Loading

0 comments on commit 5d89d1d

Please sign in to comment.