-
Notifications
You must be signed in to change notification settings - Fork 15
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
feat: The prompt to edit the current page on GitHub now triggers a contextual modal component #88
Closed
PatrickLarocque
wants to merge
3
commits into
systemphil:main
from
PatrickLarocque:feat/edit-on-github-modal
Closed
Changes from all commits
Commits
Show all changes
3 commits
Select commit
Hold shift + click to select a range
File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,20 @@ | ||
| { | ||
| "$schema": "https://ui.shadcn.com/schema.json", | ||
| "style": "default", | ||
| "rsc": false, | ||
| "tsx": true, | ||
| "tailwind": { | ||
| "config": "tailwind.config.ts", | ||
| "css": "src/styles/globals.css", | ||
| "baseColor": "slate", | ||
| "cssVariables": true, | ||
| "prefix": "" | ||
| }, | ||
| "aliases": { | ||
| "components": "@/components", | ||
| "utils": "@/lib/utils", | ||
| "ui": "@/components/ui", | ||
| "lib": "@/lib", | ||
| "hooks": "@/hooks" | ||
| } | ||
| } |
Large diffs are not rendered by default.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,102 @@ | ||
| "use client"; | ||
|
|
||
| import { useState } from "react"; | ||
| import Link from "next/link"; | ||
| import { | ||
| Dialog, | ||
| DialogContent, | ||
| DialogDescription, | ||
| DialogFooter, | ||
| DialogHeader, | ||
| DialogTitle, | ||
| DialogTrigger, | ||
| } from "@/components/ui/dialog"; | ||
| import { icons } from "lucide-react"; | ||
|
|
||
| interface ContributeModalProps { | ||
| docsRepositoryBase: string; | ||
| filePath?: string; | ||
| } | ||
|
|
||
| export function ContributeModal({ | ||
| docsRepositoryBase, | ||
| filePath, | ||
| }: ContributeModalProps) { | ||
| const [isOpen, setIsOpen] = useState(false); | ||
| const handleClose = () => setIsOpen(false); | ||
|
|
||
| const githubEditUrl = `${docsRepositoryBase}/${filePath || ""}`; | ||
|
|
||
| return ( | ||
| <Dialog open={isOpen} onOpenChange={setIsOpen}> | ||
| <DialogTrigger asChild> | ||
| <a | ||
| onClick={() => setIsOpen(true)} | ||
| className="nx-text-xs nx-font-medium nx-text-gray-500 hover:nx-text-gray-900 dark:nx-text-gray-400 dark:hover:nx-text-gray-100 contrast-more:nx-text-gray-800 contrast-more:dark:nx-text-gray-50" | ||
| > | ||
| Edit this page on GitHub ✏️ | ||
| </a> | ||
| </DialogTrigger>{" "} | ||
| <DialogContent | ||
| className={`sm:max-w-[450px] sm:min-h-[300px] justify-center dark:border-slate-900 bg-gradient-to-b from-white to-gray-50/80 dark:from-neutral-950/90 dark:to-neutral-900/90`} | ||
| > | ||
| <DialogHeader> | ||
| <DialogTitle>Contribute to this page</DialogTitle> | ||
| <DialogDescription> | ||
| Here are a few resources to help you contribute | ||
| </DialogDescription> | ||
| </DialogHeader> | ||
| <div className="py-4"> | ||
| <h4 className="text-sm font-medium mb-2"> | ||
| You might want to | ||
| </h4> | ||
| <ul className="list-disc pl-5 space-y-1 text-sm"> | ||
| <li> | ||
| <a | ||
| href="https://docs.github.com/en/get-started/quickstart/hello-world" | ||
| className="hover:underline" | ||
| target="_blank" | ||
| rel="noopener noreferrer" | ||
| onClick={handleClose} | ||
| > | ||
| Familiarize yourself with the basics of GitHub | ||
| </a> | ||
| </li> | ||
| <li> | ||
| <a | ||
| href="https://www.markdownguide.org/basic-syntax/" | ||
| className="hover:underline" | ||
| target="_blank" | ||
| rel="noopener noreferrer" | ||
| onClick={handleClose} | ||
| > | ||
| Learn Markdown syntax | ||
| </a> | ||
| </li> | ||
| <li> | ||
| <Link | ||
| href="/contributing" | ||
| className="hover:underline" | ||
| onClick={handleClose} | ||
| > | ||
| Read our contribution guidelines | ||
| </Link> | ||
| </li> | ||
| </ul> | ||
| </div> | ||
| <DialogFooter className="sm:justify-start"> | ||
| <a | ||
| href={githubEditUrl} | ||
| target="_blank" | ||
| rel="noopener noreferrer" | ||
| className="inline-flex items-center px-4 py-2 rounded nx-font-semibold nx-text-primary-800" | ||
| onClick={handleClose} | ||
| > | ||
| <icons.Github className="w-4 h-4 mr-2" /> | ||
| Continue to GitHub | ||
| </a> | ||
| </DialogFooter> | ||
| </DialogContent> | ||
| </Dialog> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,120 @@ | ||
| import * as React from "react"; | ||
| import * as DialogPrimitive from "@radix-ui/react-dialog"; | ||
| import { X } from "lucide-react"; | ||
|
|
||
| import { cn } from "@/lib/utils"; | ||
|
|
||
| const Dialog = DialogPrimitive.Root; | ||
|
|
||
| const DialogTrigger = DialogPrimitive.Trigger; | ||
|
|
||
| const DialogPortal = DialogPrimitive.Portal; | ||
|
|
||
| const DialogClose = DialogPrimitive.Close; | ||
|
|
||
| const DialogOverlay = React.forwardRef< | ||
| React.ElementRef<typeof DialogPrimitive.Overlay>, | ||
| React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay> | ||
| >(({ className, ...props }, ref) => ( | ||
| <DialogPrimitive.Overlay | ||
| ref={ref} | ||
| className={cn( | ||
| "fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0", | ||
| className | ||
| )} | ||
| {...props} | ||
| /> | ||
| )); | ||
| DialogOverlay.displayName = DialogPrimitive.Overlay.displayName; | ||
|
|
||
| const DialogContent = React.forwardRef< | ||
| React.ElementRef<typeof DialogPrimitive.Content>, | ||
| React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> | ||
| >(({ className, children, ...props }, ref) => ( | ||
| <DialogPortal> | ||
| <DialogOverlay /> | ||
| <DialogPrimitive.Content | ||
| ref={ref} | ||
| className={cn( | ||
| "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg", | ||
| className | ||
| )} | ||
| {...props} | ||
| > | ||
| {children} | ||
| <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground"> | ||
| <X className="h-4 w-4" /> | ||
| <span className="sr-only">Close</span> | ||
| </DialogPrimitive.Close> | ||
| </DialogPrimitive.Content> | ||
| </DialogPortal> | ||
| )); | ||
| DialogContent.displayName = DialogPrimitive.Content.displayName; | ||
|
|
||
| const DialogHeader = ({ | ||
| className, | ||
| ...props | ||
| }: React.HTMLAttributes<HTMLDivElement>) => ( | ||
| <div | ||
| className={cn( | ||
| "flex flex-col space-y-1.5 text-center sm:text-left", | ||
| className | ||
| )} | ||
| {...props} | ||
| /> | ||
| ); | ||
| DialogHeader.displayName = "DialogHeader"; | ||
|
|
||
| const DialogFooter = ({ | ||
| className, | ||
| ...props | ||
| }: React.HTMLAttributes<HTMLDivElement>) => ( | ||
| <div | ||
| className={cn( | ||
| "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", | ||
| className | ||
| )} | ||
| {...props} | ||
| /> | ||
| ); | ||
| DialogFooter.displayName = "DialogFooter"; | ||
|
|
||
| const DialogTitle = React.forwardRef< | ||
| React.ElementRef<typeof DialogPrimitive.Title>, | ||
| React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title> | ||
| >(({ className, ...props }, ref) => ( | ||
| <DialogPrimitive.Title | ||
| ref={ref} | ||
| className={cn( | ||
| "text-lg font-semibold leading-none tracking-tight", | ||
| className | ||
| )} | ||
| {...props} | ||
| /> | ||
| )); | ||
| DialogTitle.displayName = DialogPrimitive.Title.displayName; | ||
|
|
||
| const DialogDescription = React.forwardRef< | ||
| React.ElementRef<typeof DialogPrimitive.Description>, | ||
| React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description> | ||
| >(({ className, ...props }, ref) => ( | ||
| <DialogPrimitive.Description | ||
| ref={ref} | ||
| className={cn("text-sm text-muted-foreground", className)} | ||
| {...props} | ||
| /> | ||
| )); | ||
| DialogDescription.displayName = DialogPrimitive.Description.displayName; | ||
|
|
||
| export { | ||
| Dialog, | ||
| DialogPortal, | ||
| DialogOverlay, | ||
| DialogClose, | ||
| DialogTrigger, | ||
| DialogContent, | ||
| DialogHeader, | ||
| DialogFooter, | ||
| DialogTitle, | ||
| DialogDescription, | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,6 @@ | ||
| import { clsx, type ClassValue } from "clsx"; | ||
| import { twMerge } from "tailwind-merge"; | ||
|
|
||
| export function cn(...inputs: ClassValue[]) { | ||
| return twMerge(clsx(inputs)); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
What's the rationale for gitignoring .vscode?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Some IDEs will autogenerate a .${ide} file with workspace specific preferences, like code style configuration, debug configuration, vcs settings, plugin configuration, and other cached behavior to apply to the workspace. These are specific to the developer's IDE, workspace and preferences and can vary based on the dev's setup.
I see that this repo has a .vscode file however, normally I find it best practice to exclude these, and rely on things like a conventional prettier.config to manage the behavior of linters or plugins, but I can remove the .vscode from the .gitinore file you would like to enforce the configuration outlined in yours. Although if someone changes them, or has some quirky vscode settings that get pushed, you will have to that at that point.
Up to you! Happy to remove this if you prefer!
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Yeah, I can see that, but I figured the dev would have put their preferred configs on a global level rather than workspace.
You can gitignore .ide and other things, but perhaps leave .vscode out of it. I think it's handy to have the extensions.json and settings.json as they serve as extension recommendations (which the dev can decline should they like) and some pretty essential markdown, mdx, plaintext configs (because otherwise the mdx files become impossible to work with given our literary purposes with them). I think for vscode the dev can overrride workspace settings with their own user settings? If it turns out to be an issue down the line, we can gitignore it.