diff --git a/.github/workflows/e2e-tests.yml b/.github/workflows/e2e-tests.yml index c97d5a06..79da9231 100644 --- a/.github/workflows/e2e-tests.yml +++ b/.github/workflows/e2e-tests.yml @@ -27,7 +27,7 @@ jobs: - name: Setup Node.js uses: actions/setup-node@v4 with: - node-version-file: '.nvmrc' + node-version-file: ".nvmrc" cache: "npm" - name: Install dependencies @@ -55,7 +55,7 @@ jobs: - name: Setup Node.js uses: actions/setup-node@v4 with: - node-version-file: '.nvmrc' + node-version-file: ".nvmrc" cache: "npm" - name: Cache Playwright browsers diff --git a/.github/workflows/greetings.yml b/.github/workflows/greetings.yml index 3fc66e92..f9c10ab7 100644 --- a/.github/workflows/greetings.yml +++ b/.github/workflows/greetings.yml @@ -1,4 +1,4 @@ -name: 'Welcome New Contributors' +name: "Welcome New Contributors" on: issues: @@ -17,9 +17,9 @@ jobs: issues: write pull-requests: write steps: - - name: 'Greet the contributor' + - name: "Greet the contributor" uses: garg3133/welcome-new-contributors@v1.2 with: token: ${{ secrets.GITHUB_TOKEN }} - issue-message: 'Hello @contributor_name, thanks for opening your first issue! Your contribution is valuable to us. The maintainers will review this issue and provide feedback as soon as possible.' - pr-message: 'Hello @contributor_name, thanks for opening your first Pull Request. The maintainers will review this Pull Request and provide feedback as soon as possible. Keep up the great work!' + issue-message: "Hello @contributor_name, thanks for opening your first issue! Your contribution is valuable to us. The maintainers will review this issue and provide feedback as soon as possible." + pr-message: "Hello @contributor_name, thanks for opening your first Pull Request. The maintainers will review this Pull Request and provide feedback as soon as possible. Keep up the great work!" diff --git a/.github/workflows/pull-request.yml b/.github/workflows/pull-request.yml index 41990f6d..2da5fc1e 100644 --- a/.github/workflows/pull-request.yml +++ b/.github/workflows/pull-request.yml @@ -19,8 +19,8 @@ jobs: - name: Use Node.js uses: actions/setup-node@v4 with: - node-version-file: '.nvmrc' - cache: 'npm' + node-version-file: ".nvmrc" + cache: "npm" - name: Install dependencies run: npm ci diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 6ea072a8..addefd7d 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -120,7 +120,7 @@ For e2e tests we are using playwright After making changes make sure that tests passes -To create a e2e test make a file in `/e2e` directory +To create a e2e test make a file in `/e2e` directory **1.** Start the codu application by typing this command: @@ -136,7 +136,6 @@ yarn test:e2e Read Playwright [documentation](https://playwright.dev/) - --- ## Style Guide for Git Commit Messages :memo: diff --git a/EDITOR_SHORTCUTS.MD b/EDITOR_SHORTCUTS.MD index 9b761ead..81435ec9 100644 --- a/EDITOR_SHORTCUTS.MD +++ b/EDITOR_SHORTCUTS.MD @@ -4,20 +4,20 @@ This guide provides an overview of the available hotkeys and shortcuts for the c ## Hotkeys -| Hotkey | Description | -|-----------------|------------------------------| -| `Tab` | Trigger shortcuts (see below)| -| `Backspace` | Select Previous word | -| `Meta+(1-6)` | Heading 1 - 6 | -| `Meta+b` | Bold | -| `Meta+i` | Italic | -| `Meta+shift+b` | Bold & Italic | -| `Meta+s` | Code Snippet | -| `Meta+shift+c` | Code Block | -| `Meta+Shift+.` | Block Quote | -| `Meta+u` | URL | -| `Meta+l` | Link | -| `Meta+Shift+i` | Image | +| Hotkey | Description | +| -------------- | ----------------------------- | +| `Tab` | Trigger shortcuts (see below) | +| `Backspace` | Select Previous word | +| `Meta+(1-6)` | Heading 1 - 6 | +| `Meta+b` | Bold | +| `Meta+i` | Italic | +| `Meta+shift+b` | Bold & Italic | +| `Meta+s` | Code Snippet | +| `Meta+shift+c` | Code Block | +| `Meta+Shift+.` | Block Quote | +| `Meta+u` | URL | +| `Meta+l` | Link | +| `Meta+Shift+i` | Image | ## How to Use Hotkeys @@ -25,22 +25,21 @@ This guide provides an overview of the available hotkeys and shortcuts for the c 2. You can also highlight the word and then use the hotkey combination and for this you can double click the word or phrase or press meta+backspace a few times to highlight the required selection of text. 3. For Links and images, select the text and then use the hotkey combination. You will be prompted for the url. - ## Markdown Shortcuts -| Shortcut | Description | Example | -|----------|----------------------------------------|-------------------------------| -| `/link` | Create a link with text and URL | `[text](url)` | -| `/image` | Insert an image with alt text and URL | `![text](url)` | +| Shortcut | Description | Example | +| -------- | ------------------------------------- | -------------- | +| `/link` | Create a link with text and URL | `[text](url)` | +| `/image` | Insert an image with alt text and URL | `![text](url)` | ## Custom Tag Shortcuts -| Shortcut | Description | Example | -|---------------|------------------------------------|-------------------------------| -| `/media` | Embed a media file with src | `{% media src="url" /%}` | -| `/youtube` | Embed a YouTube video with src | `{% youtube src="url" /%}` | -| `/codepen` | Embed a CodePen project with src | `{% codepen src="url" /%}` | -| `/codesandbox`| Embed a CodeSandbox project with src | `{% codesandbox src="url" /%}`| +| Shortcut | Description | Example | +| -------------- | ------------------------------------ | ------------------------------ | +| `/media` | Embed a media file with src | `{% media src="url" /%}` | +| `/youtube` | Embed a YouTube video with src | `{% youtube src="url" /%}` | +| `/codepen` | Embed a CodePen project with src | `{% codepen src="url" /%}` | +| `/codesandbox` | Embed a CodeSandbox project with src | `{% codesandbox src="url" /%}` | ## How to Use Shortcuts @@ -48,6 +47,6 @@ This guide provides an overview of the available hotkeys and shortcuts for the c 2. Type the shortcut (e.g., `/link`). 3. Press the `Tab` key. 4. For Markdown shortcuts `/link` and `/image`, you'll be prompted to enter the text and URL. -5. For custom tag shortcuts, you'll be prompted to enter the URL for the `src` attribute. +5. For custom tag shortcuts, you'll be prompted to enter the URL for the `src` attribute. The editor will automatically replace the shortcut with the corresponding content. diff --git a/LICENSE.md b/LICENSE.md index 827e8119..1d67f706 100644 --- a/LICENSE.md +++ b/LICENSE.md @@ -2,180 +2,180 @@ Version 2.0, January 2004 http://www.apache.org/licenses/ - TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION - - 1. Definitions. - - "License" shall mean the terms and conditions for use, reproduction, - and distribution as defined by Sections 1 through 9 of this document. - - "Licensor" shall mean the copyright owner or entity authorized by - the copyright owner that is granting the License. - - "Legal Entity" shall mean the union of the acting entity and all - other entities that control, are controlled by, or are under common - control with that entity. For the purposes of this definition, - "control" means (i) the power, direct or indirect, to cause the - direction or management of such entity, whether by contract or - otherwise, or (ii) ownership of fifty percent (50%) or more of the - outstanding shares, or (iii) beneficial ownership of such entity. - - "You" (or "Your") shall mean an individual or Legal Entity - exercising permissions granted by this License. - - "Source" form shall mean the preferred form for making modifications, - including but not limited to software source code, documentation - source, and configuration files. - - "Object" form shall mean any form resulting from mechanical - transformation or translation of a Source form, including but - not limited to compiled object code, generated documentation, - and conversions to other media types. - - "Work" shall mean the work of authorship, whether in Source or - Object form, made available under the License, as indicated by a - copyright notice that is included in or attached to the work - (an example is provided in the Appendix below). - - "Derivative Works" shall mean any work, whether in Source or Object - form, that is based on (or derived from) the Work and for which the - editorial revisions, annotations, elaborations, or other modifications - represent, as a whole, an original work of authorship. For the purposes - of this License, Derivative Works shall not include works that remain - separable from, or merely link (or bind by name) to the interfaces of, - the Work and Derivative Works thereof. - - "Contribution" shall mean any work of authorship, including - the original version of the Work and any modifications or additions - to that Work or Derivative Works thereof, that is intentionally - submitted to Licensor for inclusion in the Work by the copyright owner - or by an individual or Legal Entity authorized to submit on behalf of - the copyright owner. For the purposes of this definition, "submitted" - means any form of electronic, verbal, or written communication sent - to the Licensor or its representatives, including but not limited to - communication on electronic mailing lists, source code control systems, - and issue tracking systems that are managed by, or on behalf of, the - Licensor for the purpose of discussing and improving the Work, but - excluding communication that is conspicuously marked or otherwise - designated in writing by the copyright owner as "Not a Contribution." - - "Contributor" shall mean Licensor and any individual or Legal Entity - on behalf of whom a Contribution has been received by Licensor and - subsequently incorporated within the Work. - - 2. Grant of Copyright License. Subject to the terms and conditions of - this License, each Contributor hereby grants to You a perpetual, - worldwide, non-exclusive, no-charge, royalty-free, irrevocable - copyright license to reproduce, prepare Derivative Works of, - publicly display, publicly perform, sublicense, and distribute the - Work and such Derivative Works in Source or Object form. - - 3. Grant of Patent License. Subject to the terms and conditions of - this License, each Contributor hereby grants to You a perpetual, - worldwide, non-exclusive, no-charge, royalty-free, irrevocable - (except as stated in this section) patent license to make, have made, - use, offer to sell, sell, import, and otherwise transfer the Work, - where such license applies only to those patent claims licensable - by such Contributor that are necessarily infringed by their - Contribution(s) alone or by combination of their Contribution(s) - with the Work to which such Contribution(s) was submitted. If You - institute patent litigation against any entity (including a - cross-claim or counterclaim in a lawsuit) alleging that the Work - or a Contribution incorporated within the Work constitutes direct - or contributory patent infringement, then any patent licenses - granted to You under this License for that Work shall terminate - as of the date such litigation is filed. - - 4. Redistribution. You may reproduce and distribute copies of the - Work or Derivative Works thereof in any medium, with or without - modifications, and in Source or Object form, provided that You - meet the following conditions: - - (a) You must give any other recipients of the Work or - Derivative Works a copy of this License; and - - (b) You must cause any modified files to carry prominent notices - stating that You changed the files; and - - (c) You must retain, in the Source form of any Derivative Works - that You distribute, all copyright, patent, trademark, and - attribution notices from the Source form of the Work, - excluding those notices that do not pertain to any part of - the Derivative Works; and - - (d) If the Work includes a "NOTICE" text file as part of its - distribution, then any Derivative Works that You distribute must - include a readable copy of the attribution notices contained - within such NOTICE file, excluding those notices that do not - pertain to any part of the Derivative Works, in at least one - of the following places: within a NOTICE text file distributed - as part of the Derivative Works; within the Source form or - documentation, if provided along with the Derivative Works; or, - within a display generated by the Derivative Works, if and - wherever such third-party notices normally appear. The contents - of the NOTICE file are for informational purposes only and - do not modify the License. You may add Your own attribution - notices within Derivative Works that You distribute, alongside - or as an addendum to the NOTICE text from the Work, provided - that such additional attribution notices cannot be construed - as modifying the License. - - You may add Your own copyright statement to Your modifications and - may provide additional or different license terms and conditions - for use, reproduction, or distribution of Your modifications, or - for any such Derivative Works as a whole, provided Your use, - reproduction, and distribution of the Work otherwise complies with - the conditions stated in this License. - - 5. Submission of Contributions. Unless You explicitly state otherwise, - any Contribution intentionally submitted for inclusion in the Work - by You to the Licensor shall be under the terms and conditions of - this License, without any additional terms or conditions. - Notwithstanding the above, nothing herein shall supersede or modify - the terms of any separate license agreement you may have executed - with Licensor regarding such Contributions. - - 6. Trademarks. This License does not grant permission to use the trade - names, trademarks, service marks, or product names of the Licensor, - except as required for reasonable and customary use in describing the - origin of the Work and reproducing the content of the NOTICE file. - - 7. Disclaimer of Warranty. Unless required by applicable law or - agreed to in writing, Licensor provides the Work (and each - Contributor provides its Contributions) on an "AS IS" BASIS, - WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or - implied, including, without limitation, any warranties or conditions - of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A - PARTICULAR PURPOSE. You are solely responsible for determining the - appropriateness of using or redistributing the Work and assume any - risks associated with Your exercise of permissions under this License. - - 8. Limitation of Liability. In no event and under no legal theory, - whether in tort (including negligence), contract, or otherwise, - unless required by applicable law (such as deliberate and grossly - negligent acts) or agreed to in writing, shall any Contributor be - liable to You for damages, including any direct, indirect, special, - incidental, or consequential damages of any character arising as a - result of this License or out of the use or inability to use the - Work (including but not limited to damages for loss of goodwill, - work stoppage, computer failure or malfunction, or any and all - other commercial damages or losses), even if such Contributor - has been advised of the possibility of such damages. - - 9. Accepting Warranty or Additional Liability. While redistributing - the Work or Derivative Works thereof, You may choose to offer, - and charge a fee for, acceptance of support, warranty, indemnity, - or other liability obligations and/or rights consistent with this - License. However, in accepting such obligations, You may act only - on Your own behalf and on Your sole responsibility, not on behalf - of any other Contributor, and only if You agree to indemnify, - defend, and hold each Contributor harmless for any liability - incurred by, or claims asserted against, such Contributor by reason - of your accepting any such warranty or additional liability. - - END OF TERMS AND CONDITIONS - - APPENDIX: How to apply the Apache License to your work. +TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION + +1. Definitions. + + "License" shall mean the terms and conditions for use, reproduction, + and distribution as defined by Sections 1 through 9 of this document. + + "Licensor" shall mean the copyright owner or entity authorized by + the copyright owner that is granting the License. + + "Legal Entity" shall mean the union of the acting entity and all + other entities that control, are controlled by, or are under common + control with that entity. For the purposes of this definition, + "control" means (i) the power, direct or indirect, to cause the + direction or management of such entity, whether by contract or + otherwise, or (ii) ownership of fifty percent (50%) or more of the + outstanding shares, or (iii) beneficial ownership of such entity. + + "You" (or "Your") shall mean an individual or Legal Entity + exercising permissions granted by this License. + + "Source" form shall mean the preferred form for making modifications, + including but not limited to software source code, documentation + source, and configuration files. + + "Object" form shall mean any form resulting from mechanical + transformation or translation of a Source form, including but + not limited to compiled object code, generated documentation, + and conversions to other media types. + + "Work" shall mean the work of authorship, whether in Source or + Object form, made available under the License, as indicated by a + copyright notice that is included in or attached to the work + (an example is provided in the Appendix below). + + "Derivative Works" shall mean any work, whether in Source or Object + form, that is based on (or derived from) the Work and for which the + editorial revisions, annotations, elaborations, or other modifications + represent, as a whole, an original work of authorship. For the purposes + of this License, Derivative Works shall not include works that remain + separable from, or merely link (or bind by name) to the interfaces of, + the Work and Derivative Works thereof. + + "Contribution" shall mean any work of authorship, including + the original version of the Work and any modifications or additions + to that Work or Derivative Works thereof, that is intentionally + submitted to Licensor for inclusion in the Work by the copyright owner + or by an individual or Legal Entity authorized to submit on behalf of + the copyright owner. For the purposes of this definition, "submitted" + means any form of electronic, verbal, or written communication sent + to the Licensor or its representatives, including but not limited to + communication on electronic mailing lists, source code control systems, + and issue tracking systems that are managed by, or on behalf of, the + Licensor for the purpose of discussing and improving the Work, but + excluding communication that is conspicuously marked or otherwise + designated in writing by the copyright owner as "Not a Contribution." + + "Contributor" shall mean Licensor and any individual or Legal Entity + on behalf of whom a Contribution has been received by Licensor and + subsequently incorporated within the Work. + +2. Grant of Copyright License. Subject to the terms and conditions of + this License, each Contributor hereby grants to You a perpetual, + worldwide, non-exclusive, no-charge, royalty-free, irrevocable + copyright license to reproduce, prepare Derivative Works of, + publicly display, publicly perform, sublicense, and distribute the + Work and such Derivative Works in Source or Object form. + +3. Grant of Patent License. Subject to the terms and conditions of + this License, each Contributor hereby grants to You a perpetual, + worldwide, non-exclusive, no-charge, royalty-free, irrevocable + (except as stated in this section) patent license to make, have made, + use, offer to sell, sell, import, and otherwise transfer the Work, + where such license applies only to those patent claims licensable + by such Contributor that are necessarily infringed by their + Contribution(s) alone or by combination of their Contribution(s) + with the Work to which such Contribution(s) was submitted. If You + institute patent litigation against any entity (including a + cross-claim or counterclaim in a lawsuit) alleging that the Work + or a Contribution incorporated within the Work constitutes direct + or contributory patent infringement, then any patent licenses + granted to You under this License for that Work shall terminate + as of the date such litigation is filed. + +4. Redistribution. You may reproduce and distribute copies of the + Work or Derivative Works thereof in any medium, with or without + modifications, and in Source or Object form, provided that You + meet the following conditions: + + (a) You must give any other recipients of the Work or + Derivative Works a copy of this License; and + + (b) You must cause any modified files to carry prominent notices + stating that You changed the files; and + + (c) You must retain, in the Source form of any Derivative Works + that You distribute, all copyright, patent, trademark, and + attribution notices from the Source form of the Work, + excluding those notices that do not pertain to any part of + the Derivative Works; and + + (d) If the Work includes a "NOTICE" text file as part of its + distribution, then any Derivative Works that You distribute must + include a readable copy of the attribution notices contained + within such NOTICE file, excluding those notices that do not + pertain to any part of the Derivative Works, in at least one + of the following places: within a NOTICE text file distributed + as part of the Derivative Works; within the Source form or + documentation, if provided along with the Derivative Works; or, + within a display generated by the Derivative Works, if and + wherever such third-party notices normally appear. The contents + of the NOTICE file are for informational purposes only and + do not modify the License. You may add Your own attribution + notices within Derivative Works that You distribute, alongside + or as an addendum to the NOTICE text from the Work, provided + that such additional attribution notices cannot be construed + as modifying the License. + + You may add Your own copyright statement to Your modifications and + may provide additional or different license terms and conditions + for use, reproduction, or distribution of Your modifications, or + for any such Derivative Works as a whole, provided Your use, + reproduction, and distribution of the Work otherwise complies with + the conditions stated in this License. + +5. Submission of Contributions. Unless You explicitly state otherwise, + any Contribution intentionally submitted for inclusion in the Work + by You to the Licensor shall be under the terms and conditions of + this License, without any additional terms or conditions. + Notwithstanding the above, nothing herein shall supersede or modify + the terms of any separate license agreement you may have executed + with Licensor regarding such Contributions. + +6. Trademarks. This License does not grant permission to use the trade + names, trademarks, service marks, or product names of the Licensor, + except as required for reasonable and customary use in describing the + origin of the Work and reproducing the content of the NOTICE file. + +7. Disclaimer of Warranty. Unless required by applicable law or + agreed to in writing, Licensor provides the Work (and each + Contributor provides its Contributions) on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or + implied, including, without limitation, any warranties or conditions + of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A + PARTICULAR PURPOSE. You are solely responsible for determining the + appropriateness of using or redistributing the Work and assume any + risks associated with Your exercise of permissions under this License. + +8. Limitation of Liability. In no event and under no legal theory, + whether in tort (including negligence), contract, or otherwise, + unless required by applicable law (such as deliberate and grossly + negligent acts) or agreed to in writing, shall any Contributor be + liable to You for damages, including any direct, indirect, special, + incidental, or consequential damages of any character arising as a + result of this License or out of the use or inability to use the + Work (including but not limited to damages for loss of goodwill, + work stoppage, computer failure or malfunction, or any and all + other commercial damages or losses), even if such Contributor + has been advised of the possibility of such damages. + +9. Accepting Warranty or Additional Liability. While redistributing + the Work or Derivative Works thereof, You may choose to offer, + and charge a fee for, acceptance of support, warranty, indemnity, + or other liability obligations and/or rights consistent with this + License. However, in accepting such obligations, You may act only + on Your own behalf and on Your sole responsibility, not on behalf + of any other Contributor, and only if You agree to indemnify, + defend, and hold each Contributor harmless for any liability + incurred by, or claims asserted against, such Contributor by reason + of your accepting any such warranty or additional liability. + +END OF TERMS AND CONDITIONS + +APPENDIX: How to apply the Apache License to your work. To apply the Apache License to your work, attach the following boilerplate notice, with the fields enclosed by brackets "[]" @@ -186,16 +186,16 @@ same "printed page" as the copyright notice for easier identification within third-party archives. - Copyright 2023 Codú (Codú Software Solutions Limited). +Copyright 2023 Codú (Codú Software Solutions Limited). - Licensed under the Apache License, Version 2.0 (the "License"); - you may not use this file except in compliance with the License. - You may obtain a copy of the License at +Licensed under the Apache License, Version 2.0 (the "License"); +you may not use this file except in compliance with the License. +You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 - Unless required by applicable law or agreed to in writing, software - distributed under the License is distributed on an "AS IS" BASIS, - WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - See the License for the specific language governing permissions and - limitations under the License. +Unless required by applicable law or agreed to in writing, software +distributed under the License is distributed on an "AS IS" BASIS, +WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +See the License for the specific language governing permissions and +limitations under the License. diff --git a/app/(app)/[username]/[slug]/_userLinkDetail.tsx b/app/(app)/[username]/[slug]/_userLinkDetail.tsx new file mode 100644 index 00000000..49e748a5 --- /dev/null +++ b/app/(app)/[username]/[slug]/_userLinkDetail.tsx @@ -0,0 +1,389 @@ +"use client"; + +import { useState, useMemo } from "react"; +import Link from "next/link"; +import { + ArrowTopRightOnSquareIcon, + ChatBubbleLeftIcon, + ChevronUpIcon, + ChevronDownIcon, + ShareIcon, +} from "@heroicons/react/20/solid"; +import { api } from "@/server/trpc/react"; +import { toast } from "sonner"; +import { Temporal } from "@js-temporal/polyfill"; +import DiscussionArea from "@/components/Discussion/DiscussionArea"; +import { useSession, signIn } from "next-auth/react"; +import { InlineAuthorBio } from "@/components/ContentDetail"; + +type Props = { + username: string; + contentSlug: string; +}; + +// Get favicon URL from a website +const getFaviconUrl = ( + websiteUrl: string | null | undefined, +): string | null => { + if (!websiteUrl) return null; + try { + const url = new URL(websiteUrl); + return `https://www.google.com/s2/favicons?domain=${url.hostname}&sz=32`; + } catch { + return null; + } +}; + +// Get hostname from URL +const getHostname = (urlString: string): string => { + try { + const url = new URL(urlString); + return url.hostname; + } catch { + return urlString; + } +}; + +// Ensure image URL uses https +const ensureHttps = (url: string | null | undefined): string | null => { + if (!url) return null; + if (url.startsWith("http://")) { + return url.replace("http://", "https://"); + } + return url; +}; + +const UserLinkDetail = ({ username, contentSlug }: Props) => { + const { data: session } = useSession(); + const { data: linkContent, status } = api.content.getUserLinkBySlug.useQuery({ + username, + slug: contentSlug, + }); + + const { data: discussionCount } = + api.discussion.getContentDiscussionCount.useQuery( + { contentId: linkContent?.id ?? "" }, + { enabled: !!linkContent?.id }, + ); + + // Vote state management - derive initial values from query data + const initialVoteState = useMemo( + () => ({ + userVote: linkContent?.userVote ?? null, + upvotes: linkContent?.upvotes ?? 0, + downvotes: linkContent?.downvotes ?? 0, + }), + [linkContent?.userVote, linkContent?.upvotes, linkContent?.downvotes], + ); + + const [userVote, setUserVote] = useState<"up" | "down" | null>( + initialVoteState.userVote, + ); + const [votes, setVotes] = useState({ + upvotes: initialVoteState.upvotes, + downvotes: initialVoteState.downvotes, + }); + + // Sync state when server data changes + const currentUserVote = linkContent?.userVote ?? null; + const currentUpvotes = linkContent?.upvotes ?? 0; + const currentDownvotes = linkContent?.downvotes ?? 0; + + const serverVoteKey = `${currentUserVote}-${currentUpvotes}-${currentDownvotes}`; + const [lastSyncedKey, setLastSyncedKey] = useState(serverVoteKey); + + if (serverVoteKey !== lastSyncedKey && linkContent) { + setUserVote(currentUserVote); + setVotes({ upvotes: currentUpvotes, downvotes: currentDownvotes }); + setLastSyncedKey(serverVoteKey); + } + + const { mutate: vote, status: voteStatus } = api.content.vote.useMutation({ + onMutate: async ({ voteType }) => { + const oldVote = userVote; + setUserVote(voteType); + setVotes((prev) => { + let newUpvotes = prev.upvotes; + let newDownvotes = prev.downvotes; + if (oldVote === "up") newUpvotes--; + if (oldVote === "down") newDownvotes--; + if (voteType === "up") newUpvotes++; + if (voteType === "down") newDownvotes++; + return { upvotes: newUpvotes, downvotes: newDownvotes }; + }); + }, + onError: () => { + setUserVote(linkContent?.userVote ?? null); + setVotes({ + upvotes: linkContent?.upvotes ?? 0, + downvotes: linkContent?.downvotes ?? 0, + }); + toast.error("Failed to update vote"); + }, + }); + + const handleVote = (voteType: "up" | "down" | null) => { + if (!session) { + signIn(); + return; + } + if (!linkContent) return; + vote({ contentId: linkContent.id, voteType }); + }; + + const handleShare = async () => { + const shareUrl = `${window.location.origin}/${username}/${contentSlug}`; + try { + await navigator.clipboard.writeText(shareUrl); + toast.success("Link copied to clipboard"); + } catch { + toast.error("Failed to copy link"); + } + }; + + if (status === "pending") { + return ( +
+
+
+
+
+
+
+
+
+
+ ); + } + + if (status === "error" || !linkContent) { + return ( +
+ + Back to Feed + +
+

+ Content Not Found +

+

+ This link may have been removed or the URL is invalid. +

+
+
+ ); + } + + const externalUrl = linkContent.externalUrl || ""; + const dateTime = linkContent.publishedAt + ? Temporal.Instant.from(new Date(linkContent.publishedAt).toISOString()) + : null; + const readableDate = dateTime + ? dateTime.toLocaleString(["en-IE"], { + year: "numeric", + month: "long", + day: "numeric", + }) + : null; + + const faviconUrl = getFaviconUrl(externalUrl); + const hostname = externalUrl ? getHostname(externalUrl) : null; + const score = votes.upvotes - votes.downvotes; + + return ( +
+ {/* Breadcrumb */} + + + {/* Content card */} +
+ {/* Author info */} +
+ + {linkContent.author?.image ? ( + + ) : ( +
+ {linkContent.author?.name?.charAt(0).toUpperCase() || "?"} +
+ )} + + {linkContent.author?.name || "Unknown"} + + + {readableDate && ( + <> + + + + )} + {hostname && ( + <> + + {hostname} + + )} +
+ + {/* Title */} +

+ {linkContent.title} +

+ + {/* Excerpt */} + {linkContent.excerpt && ( +

+ {linkContent.excerpt} +

+ )} + + {/* Thumbnail image */} + {ensureHttps(linkContent.coverImage) && externalUrl && ( + + + {hostname && ( +
+ + {hostname} +
+ )} + + )} + + {/* Visit link CTA */} + {externalUrl && hostname && ( + + + Visit Link at {hostname} + + )} + + {/* Inline author bio */} + {linkContent.author && ( +
+ +
+ )} + + {/* Action bar - just above discussion */} +
+ {/* Vote buttons */} +
+ + 0 + ? "text-green-500" + : score < 0 + ? "text-red-500" + : "text-neutral-400 dark:text-neutral-500" + }`} + > + {score} + + +
+ + {/* Comments count */} + + + {discussionCount ?? 0} comments + + + {/* Share button */} + +
+ + {/* Discussion section */} +
+ {linkContent.showComments ? ( + + ) : ( +
+

+ Comments are disabled for this link +

+
+ )} +
+
+
+ ); +}; + +export default UserLinkDetail; diff --git a/app/(app)/[username]/[slug]/page.tsx b/app/(app)/[username]/[slug]/page.tsx index 5ac3dcb9..94664b55 100644 --- a/app/(app)/[username]/[slug]/page.tsx +++ b/app/(app)/[username]/[slug]/page.tsx @@ -23,6 +23,7 @@ import { posts, user, feed_sources, post_tags, tag } from "@/server/db/schema"; import { eq, and, lte } from "drizzle-orm"; import FeedArticleContent from "./_feedArticleContent"; import LinkContentDetail from "./_linkContentDetail"; +import UserLinkDetail from "./_userLinkDetail"; type Props = { params: Promise<{ username: string; slug: string }> }; @@ -101,6 +102,82 @@ async function getUserPost(username: string, postSlug: string) { }; } +// Helper to fetch user-created link post by username and slug (user shared a link) +async function getUserLinkPost(username: string, postSlug: string) { + const userRecord = await db.query.user.findFirst({ + columns: { id: true }, + where: eq(user.username, username), + }); + + if (!userRecord) return null; + + // Find published link post by slug that belongs to this user (no sourceId) + const linkPostResults = await db + .select({ + id: posts.id, + title: posts.title, + body: posts.body, + excerpt: posts.excerpt, + slug: posts.slug, + externalUrl: posts.externalUrl, + coverImage: posts.coverImage, + status: posts.status, + publishedAt: posts.publishedAt, + updatedAt: posts.updatedAt, + readingTime: posts.readingTime, + showComments: posts.showComments, + upvotesCount: posts.upvotesCount, + downvotesCount: posts.downvotesCount, + type: posts.type, + // Author info via JOIN + authorId: user.id, + authorName: user.name, + authorImage: user.image, + authorUsername: user.username, + authorBio: user.bio, + }) + .from(posts) + .leftJoin(user, eq(posts.authorId, user.id)) + .where( + and( + eq(posts.slug, postSlug), + eq(posts.authorId, userRecord.id), + eq(posts.status, "published"), + eq(posts.type, "link"), + lte(posts.publishedAt, new Date().toISOString()), + ), + ) + .limit(1); + + if (linkPostResults.length === 0) return null; + + const linkPost = linkPostResults[0]; + + // Fetch tags separately using explicit JOIN + const tagsResult = await db + .select({ title: tag.title }) + .from(post_tags) + .innerJoin(tag, eq(post_tags.tagId, tag.id)) + .where(eq(post_tags.postId, linkPost.id)); + + // Map to expected shape + return { + ...linkPost, + published: linkPost.publishedAt, + readTimeMins: linkPost.readingTime, + upvotes: linkPost.upvotesCount, + downvotes: linkPost.downvotesCount, + tags: tagsResult.map((t) => ({ tag: { title: t.title } })), + user: { + id: linkPost.authorId, + name: linkPost.authorName, + image: linkPost.authorImage, + username: linkPost.authorUsername, + bio: linkPost.authorBio, + }, + }; +} + // Helper to fetch link post by source slug and article slug (uses new posts table) async function getFeedArticle( sourceSlug: string, @@ -257,6 +334,28 @@ export async function generateMetadata(props: Props): Promise { }; } + // Try user-created link post (user shared a link) + const userLinkPost = await getUserLinkPost(username, slug); + if (userLinkPost && userLinkPost.user) { + const host = (await headers()).get("host") || ""; + const linkAuthorName = userLinkPost.user.name || "Unknown"; + + return { + title: `${userLinkPost.title} | shared by ${linkAuthorName} | Codú`, + authors: { + name: linkAuthorName, + url: `https://www.${host}/${userLinkPost.user.username}`, + }, + description: userLinkPost.excerpt || `Link shared by ${linkAuthorName}`, + openGraph: { + title: userLinkPost.title, + description: userLinkPost.excerpt || `Link shared by ${linkAuthorName}`, + images: userLinkPost.coverImage ? [userLinkPost.coverImage] : undefined, + siteName: "Codú", + }, + }; + } + // Then try feed article (legacy aggregated_article table) const feedArticle = await getFeedArticle(username, slug); if (feedArticle) { @@ -662,6 +761,14 @@ const UnifiedPostPage = async (props: Props) => { ); } + // Try user-created link post (user shared a link) + const userLinkPost = await getUserLinkPost(username, slug); + + if (userLinkPost && userLinkPost.user) { + // Render user link post + return ; + } + // Then try feed article (legacy aggregated_article table) const feedArticle = await getFeedArticle(username, slug); diff --git a/app/(app)/[username]/_sourceProfileClient.tsx b/app/(app)/[username]/_sourceProfileClient.tsx index 30af43d8..f695dddc 100644 --- a/app/(app)/[username]/_sourceProfileClient.tsx +++ b/app/(app)/[username]/_sourceProfileClient.tsx @@ -61,7 +61,7 @@ const SourceProfileContent = ({ sourceSlug }: Props) => { if (sourceStatus === "pending") { return (
-
+
@@ -69,7 +69,7 @@ const SourceProfileContent = ({ sourceSlug }: Props) => {
-
+
); } @@ -102,7 +102,7 @@ const SourceProfileContent = ({ sourceSlug }: Props) => { <>
{/* Profile header - matching user profile pattern exactly */} -
+
{source.logoUrl ? ( { )}
-
+
{/* Articles header - matching user profile */}
diff --git a/app/(app)/[username]/_usernameClient.tsx b/app/(app)/[username]/_usernameClient.tsx index 1b417c76..0ddaa0c6 100644 --- a/app/(app)/[username]/_usernameClient.tsx +++ b/app/(app)/[username]/_usernameClient.tsx @@ -77,7 +77,7 @@ const Profile = ({ profile, isOwner, session }: Props) => { return ( <>
-
+
{image && ( { )}
-
+
{accountLocked ? (
Account locked 🔒 diff --git a/app/(app)/advertise/_client.tsx b/app/(app)/advertise/_client.tsx index e9b83b28..4b69368c 100644 --- a/app/(app)/advertise/_client.tsx +++ b/app/(app)/advertise/_client.tsx @@ -10,12 +10,12 @@ import { export function AdvertiseClient() { return ( -
+ <> -
+ ); } diff --git a/app/(app)/articles/_client.tsx b/app/(app)/articles/_client.tsx index faddbad7..4fa3d6c1 100644 --- a/app/(app)/articles/_client.tsx +++ b/app/(app)/articles/_client.tsx @@ -26,7 +26,7 @@ import SideBarSavedPosts from "@/components/SideBar/SideBarSavedPosts"; import { useSession, signIn } from "next-auth/react"; import { getCamelCaseFromLower } from "@/utils/utils"; import PopularTagsLoading from "@/components/PopularTags/PopularTagsLoading"; -import CoduChallenge from "@/components/CoduChallenge/CoduChallenge"; +import NewsletterCTA from "@/components/NewsletterCTA/NewsletterCTA"; import { toast } from "sonner"; import * as Sentry from "@sentry/nextjs"; import { FeedFilters } from "@/components/Feed"; @@ -432,7 +432,7 @@ const ArticlesPage = () => { return ( <>
-
+

{typeof tag === "string" ? (
@@ -523,7 +523,7 @@ const ArticlesPage = () => {
- +

Popular topics

diff --git a/app/(app)/auth/page.tsx b/app/(app)/auth/page.tsx index f94271c7..c925dfa3 100644 --- a/app/(app)/auth/page.tsx +++ b/app/(app)/auth/page.tsx @@ -27,7 +27,7 @@ export const PostAuthPage = (content: { if (!mounted) return null; return ( -
+
Codú @@ -62,7 +62,7 @@ export const PostAuthPage = (content: {

- +
); }; diff --git a/app/(app)/code-of-conduct/page.tsx b/app/(app)/code-of-conduct/page.tsx index d8f9560e..f3ad0022 100644 --- a/app/(app)/code-of-conduct/page.tsx +++ b/app/(app)/code-of-conduct/page.tsx @@ -7,7 +7,7 @@ export const metadata = { const CodeOfConduct = () => { return (
-
+
@@ -155,7 +155,7 @@ const CodeOfConduct = () => {
-
+
); }; diff --git a/app/(app)/draft/[id]/page.tsx b/app/(app)/draft/[id]/page.tsx index ff6c0944..18fb3e79 100644 --- a/app/(app)/draft/[id]/page.tsx +++ b/app/(app)/draft/[id]/page.tsx @@ -1,12 +1,11 @@ import React from "react"; import Markdoc from "@markdoc/markdoc"; import Link from "next/link"; -import BioBar from "@/components/BioBar/BioBar"; import { markdocComponents } from "@/markdoc/components"; import { config } from "@/markdoc/config"; import { headers } from "next/headers"; import { notFound } from "next/navigation"; - +import { InlineAuthorBio } from "@/components/ContentDetail"; import { type Metadata } from "next"; import { getPostPreview } from "@/server/lib/posts"; import { getCamelCaseFromLower } from "@/utils/utils"; @@ -24,7 +23,7 @@ export async function generateMetadata(props: Props): Promise { return { title: `Draft: ${post.title} | by ${post.user.name} | Codú`, authors: { - name: post.user.name, + name: post.user.name ?? undefined, url: `https://www.${host}/${post.user.username}`, }, description: post.excerpt, @@ -45,24 +44,61 @@ const PreviewPage = async (props: Props) => { notFound(); } - const ast = Markdoc.parse(post.body); + const ast = Markdoc.parse(post.body || ""); const content = Markdoc.transform(ast, config); return ( - <> -
-
+
+ {/* Draft indicator */} + + + {/* Article card - matches published article layout */} +
+ {/* Author info */} +
+ + {post.user.image ? ( + + ) : ( +
+ {post.user.name?.charAt(0).toUpperCase() || "?"} +
+ )} + {post.user.name} + + {post.readTimeMins && ( + <> + + {post.readTimeMins} min read + + )} +
+ + {/* Article content */} +

{post.title}

{Markdoc.renderers.react(content, React, { components: markdocComponents, })} -
+
+ + {/* Tags */} {post.tags.length > 0 && ( -
+
{post.tags.map(({ tag }) => ( @@ -71,11 +107,18 @@ const PreviewPage = async (props: Props) => { ))}
)} -
-
- -
- + + {/* Compact inline author bio */} +
+ +
+ +
); }; diff --git a/app/(app)/error.tsx b/app/(app)/error.tsx index c12c1d9e..964de7e0 100644 --- a/app/(app)/error.tsx +++ b/app/(app)/error.tsx @@ -5,7 +5,7 @@ import Image from "next/image"; export default function NotFound() { return ( -
+
Codú @@ -51,6 +51,6 @@ export default function NotFound() {
- +
); } diff --git a/app/(app)/feed/[sourceSlug]/_client.tsx b/app/(app)/feed/[sourceSlug]/_client.tsx index 2006304d..21898ef6 100644 --- a/app/(app)/feed/[sourceSlug]/_client.tsx +++ b/app/(app)/feed/[sourceSlug]/_client.tsx @@ -61,7 +61,7 @@ const SourceProfilePage = ({ sourceSlug }: Props) => { if (sourceStatus === "pending") { return (
-
+
@@ -69,7 +69,7 @@ const SourceProfilePage = ({ sourceSlug }: Props) => {
-
+
); } @@ -102,7 +102,7 @@ const SourceProfilePage = ({ sourceSlug }: Props) => { <>
{/* Profile header - matching user profile pattern exactly */} -
+
{source.logoUrl ? ( { )}
-
+
{/* Articles header - matching user profile */}
diff --git a/app/(app)/feed/_client.tsx b/app/(app)/feed/_client.tsx index 5a427d5b..d4f1eede 100644 --- a/app/(app)/feed/_client.tsx +++ b/app/(app)/feed/_client.tsx @@ -9,6 +9,7 @@ import { useSession } from "next-auth/react"; import { FeedItemLoading, FeedFilters } from "@/components/Feed"; import { UnifiedContentCard } from "@/components/UnifiedContentCard"; import { SavedItemCard } from "@/components/SavedItemCard"; +import NewsletterCTA from "@/components/NewsletterCTA/NewsletterCTA"; type SortOption = "recent" | "trending" | "popular"; type ContentType = @@ -106,9 +107,9 @@ const FeedPage = () => { }; return ( -
+
{/* Header */} -
+

Feed

@@ -203,54 +204,61 @@ const FeedPage = () => { {/* Sidebar */}
- {/* About section - moved above topics */} -
-

- About the Feed -

-

- Curated developer content from across the web. Upvote articles you - find helpful, save them for later, and discover trending topics in - the developer community. -

-
+
+ {/* About section - aligned with first feed item */} +
+

+ About the Feed +

+

+ Curated developer content from across the web. Upvote articles + you find helpful, save them for later, and discover trending + topics in the developer community. +

+
- {/* Categories section */} -
-

- Topics -

-
- {categoriesData?.map((cat) => ( - - ))} + {/* Newsletter CTA */} +
+
-
- {/* Saved articles for logged in users */} - {session && ( + {/* Categories section */}
-

- Your Saved Articles +

+ Topics

- +
+ {categoriesData?.map((cat) => ( + + ))} +
- )} + + {/* Saved articles for logged in users */} + {session && ( +
+

+ Your Saved Articles +

+ +
+ )} +
-
+
); }; diff --git a/app/(app)/forbidden/page.tsx b/app/(app)/forbidden/page.tsx index 4e36025a..a6852a7b 100644 --- a/app/(app)/forbidden/page.tsx +++ b/app/(app)/forbidden/page.tsx @@ -4,7 +4,7 @@ import Image from "next/image"; const Forbidden: NextPage = () => { return ( -
+
Codú @@ -37,7 +37,7 @@ const Forbidden: NextPage = () => {
- +
); }; diff --git a/app/(app)/jobs/create/_client.tsx b/app/(app)/jobs/create/_client.tsx index 7b49f23f..8cb48003 100644 --- a/app/(app)/jobs/create/_client.tsx +++ b/app/(app)/jobs/create/_client.tsx @@ -22,7 +22,8 @@ import { } from "@/components/ui-components/radio"; import { Strong, Text } from "@/components/ui-components/text"; import { Textarea } from "@/components/ui-components/textarea"; -import { saveJobsInput, saveJobsSchema } from "@/schema/job"; +import type { saveJobsInput } from "@/schema/job"; +import { saveJobsSchema } from "@/schema/job"; import { FEATURE_FLAGS, isFlagEnabled } from "@/utils/flags"; import { uploadFile } from "@/utils/s3helpers"; import { getUploadUrl } from "@/app/actions/getUploadUrl"; @@ -30,7 +31,8 @@ import { zodResolver } from "@hookform/resolvers/zod"; import Image from "next/image"; import { notFound } from "next/navigation"; import React, { useRef, useState } from "react"; -import { Controller, SubmitHandler, useForm } from "react-hook-form"; +import type { SubmitHandler } from "react-hook-form"; +import { Controller, useForm } from "react-hook-form"; import * as Sentry from "@sentry/nextjs"; import { toast } from "sonner"; diff --git a/app/(app)/layout.tsx b/app/(app)/layout.tsx index cdb45497..19bd6261 100644 --- a/app/(app)/layout.tsx +++ b/app/(app)/layout.tsx @@ -1,8 +1,6 @@ import { headers } from "next/headers"; import ThemeProvider from "@/components/Theme/ThemeProvider"; import { TRPCReactProvider } from "@/server/trpc/react"; -import Footer from "@/components/Footer/Footer"; -import Nav from "@/components/Nav/Nav"; import { getServerAuthSession } from "@/server/auth"; import AuthProvider from "@/context/AuthProvider"; import ProgressBar from "@/components/ProgressBar/ProgressBar"; @@ -11,6 +9,7 @@ import { PromptProvider } from "@/components/PromptService"; import { db } from "@/server/db"; import { eq } from "drizzle-orm"; import { user } from "@/server/db/schema"; +import { SidebarAppLayout } from "@/components/Layout/SidebarAppLayout"; export const metadata = { title: "Codú - Join Our Web Developer Community", @@ -78,14 +77,12 @@ export default async function RootLayout({ : null; return ( - <> -
+ )}
-
+

Trending

@@ -51,24 +51,26 @@ const Home = async () => {
- -

- Popular topics -

-
- }> - - -
- {session && ( +
+ +

+ Popular topics +

- + }> + +
- )} + {session && ( +
+ +
+ )} +
- + ); }; diff --git a/app/(app)/settings/_client.tsx b/app/(app)/settings/_client.tsx index b39f45ca..cc2979b3 100644 --- a/app/(app)/settings/_client.tsx +++ b/app/(app)/settings/_client.tsx @@ -12,7 +12,7 @@ import { saveSettingsSchema } from "@/schema/profile"; import { uploadFile } from "@/utils/s3helpers"; import type { user } from "@/server/db/schema"; import { Button } from "@/components/ui-components/button"; -import { Loader2 } from "lucide-react"; +import { Loader2, Sun, Moon } from "lucide-react"; import { Subheading, Heading } from "@/components/ui-components/heading"; import { Avatar } from "@/components/ui-components/avatar"; import { Input } from "@/components/ui-components/input"; @@ -25,6 +25,7 @@ import { Textarea } from "@/components/ui-components/textarea"; import { Switch } from "@/components/ui-components/switch"; import { Divider } from "@/components/ui-components/divider"; import { Text } from "@/components/ui-components/text"; +import { useTheme } from "next-themes"; type User = Pick< typeof user.$inferSelect, @@ -59,6 +60,7 @@ const Settings = ({ profile }: { profile: User }) => { }, }); + const { setTheme, resolvedTheme } = useTheme(); const { emailNotifications: eNotifications, newsletter } = profile; const [emailNotifications, setEmailNotifications] = useState(eNotifications); @@ -433,6 +435,33 @@ const Settings = ({ profile }: { profile: User }) => { +
+
+ Appearance + Choose your preferred theme +
+ + + +
+ + setTheme(checked ? "dark" : "light")} + /> + +
+ +
+ + +
-
-
-
-
- -