Skip to content
This repository has been archived by the owner on Aug 7, 2024. It is now read-only.

feat: QR for users profiles #2235

Merged
merged 6 commits into from
Nov 19, 2022
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 5 additions & 4 deletions .github/workflows/build.yml
Original file line number Diff line number Diff line change
@@ -2,15 +2,16 @@ name: Build
on:
push:
paths:
- public/**
- src/**
- pages/**
- test/**
pull_request:
paths:
- public/**
- src/**
- pages/**
- test/**

env:
NODE_ENV: dev

jobs:
build:
runs-on: ubuntu-latest
13,296 changes: 7,613 additions & 5,683 deletions package-lock.json

Large diffs are not rendered by default.

3 changes: 2 additions & 1 deletion package.json
Original file line number Diff line number Diff line change
@@ -10,6 +10,7 @@
"mongoose": "^6.6.5",
"next": "^13",
"prettier": "^2.7.1",
"qrcode.react": "^3.1.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-icons": "^4.6.0",
@@ -74,4 +75,4 @@
"bugs": {
"url": "https://github.com/EddieHubCommunity/LinkFree/issues"
}
}
}
48 changes: 36 additions & 12 deletions pages/[username].js
Original file line number Diff line number Diff line change
@@ -1,6 +1,9 @@
import { useState } from "react";
import Head from "next/head";
import ReactMarkdown from "react-markdown";
import { abbreviateNumber } from "js-abbreviation-number";
import { QRCodeSVG } from "qrcode.react";
import { IoQrCodeOutline } from "react-icons/io5";

import app from "../config/app.json";
import SingleLayout from "../components/layouts/SingleLayout";
@@ -38,6 +41,9 @@ export async function getServerSideProps(context) {
}

export default function User({ data }) {
const [qrShow, setQrShow] = useState(false);
const fallbackImageSize = 120;

return (
<>
<Head>
@@ -68,11 +74,17 @@ export default function User({ data }) {
<FallbackImage
src={data.avatar}
alt={`Profile picture of ${data.name}`}
width={120}
height={120}
width={fallbackImageSize}
height={fallbackImageSize}
fallback={data.name}
className="rounded-full"
/>
<div
className="absolute inline-block bottom-0 left-0 top-auto right-auto translate-y-2/4 -translate-x-1/2 rotate-0 skew-x-0 skew-y-0 scale-x-100 scale-y-100 px-2 py-2 text-xs leading-none text-center whitespace-nowrap align-baseline font-bold border-2 border-orange-600 rounded-xl z-10 animate-bounce text-orange-600"
onClick={() => (qrShow ? setQrShow(false) : setQrShow(true))}
>
<IoQrCodeOutline />
</div>
</div>

<div className="flex flex-col self-center gap-3">
@@ -88,17 +100,29 @@ export default function User({ data }) {
<div className="flex justify-center my-4">
<ReactMarkdown>{data.bio}</ReactMarkdown>
</div>
<div className="flex flex-wrap justify-center">
{data.tags &&
data.tags.map((tag, index) => (
<span
key={index}
className="flex flex-row p-1 m-2 rounded-lg text-sm font-mono border-2 border-dashed"
>
{tag}
</span>
))}
{!qrShow && (
<div className="flex flex-wrap justify-center">
{data.tags &&
data.tags.map((tag, index) => (
<span
key={index}
className="flex flex-row p-1 m-2 rounded-lg text-sm font-mono border-2 border-dashed"
>
{tag}
</span>
))}
</div>
)}

<div className="flex justify-center">
{qrShow && (
<QRCodeSVG
value={`${app.baseUrl}/${data.username}`}
size={fallbackImageSize * 2}
/>
)}
</div>

<div className="flex flex-col items-center w-full">
{data.links &&
data.links.map((link, index) => (