Frameworks frontend implementation #198

ACR1209 · 2025-01-06T06:41:30Z

Description

Implemented the FrontEnd proposed on #136 to display different frameworks/libraries of a language. Also added initial snippets for React and FastAPI frameworks.

Type of Change

Checklist

I have tested my code and verified it works as expected.
My code follows the style and contribution guidelines of this project.
Comments are added where necessary for clarity.
Documentation has been updated (if applicable).
There are no new warnings or errors from my changes.

Related Issues

Closes #136

Additional Context

I added basic keyboard navigation where sub languages are opened with right arrow. Also might need changes for accessibility.

Screenshots (Optional)

Click to view screenshots

Mathys-Gasnier

Amazing works, it looks good !
(Could you please merge main into your branch ? We removed the /public/consolidated and /public/icons folder from the repo, they are now built with vite)

Fix cuz description was messed up Consolidate for the Prime Number Description Updated combinations.md Removing end of line prettier config as it's not needed anymore snippets: hex to rgb color snippets: rgb to hsl color snippets: hsl to rgb color refactor: optimized rgb to hsl color fix: hex to rgb color Added Sorting and Search Algorithms to C (technoph1le#199) Update consolidated snippets Updating to use vite HMR to consolidate snippets Changing status check in plugin Snippets c++ (technoph1le#103) * [C++] added snippet * [C++] added 3 snippets for string. * Added missing chrono header * fixed tags * fixed exemple needing std=c++20 * Fixed Usage to accommodate to new guidelines * Fixed all tags + type * Revert "Fixed all tags + type" This reverts commit aebefde. * Fixed type and all tags * fixed gh check failing * Update consolidated snippets * Update consolidated snippets * Update consolidated snippets * Revert "Merge remote-tracking branch 'origin/main' into snippets-c++" This reverts commit 4708bd9, reversing changes made to a959e95. * Update consolidated snippets --------- Co-authored-by: GitHub Action <[email protected]> java date-time formatting snippets added duration formatting removed language from tags enforced formatting requirements Renamed and improved python truncate snippet Renamed from `truncate-string.py` to `truncate.py` Replaced "..." with ellipses("…") to only use one character Implemented toggle for the `suffix` "…" on string with default of `True` Update reverse-string.md Added type hints Renamed `remove-specific-characters.md` to `remove-characters.md` Improved accuracy of Description for `convert-string-to-ascii` for better functional representation Renamed `convert-string-to-ascii.md` to `convert-string-to-unicode.md` Replaced ASCII with Unicode Kept `ascii` tag as it is a subset of unicode and to minimize search errors Fixed issue technoph1le#192 Update CONTRIBUTING.md Added a `not` on line 68 in "Does that snippet have a real, and practical use case ?" to prevent useless snippets from being acceptable and useful snippets from being denied. Rectified loss of attribution recovered old attribution in the python snippet`truncate` to axorax and added the contributors tag. truncate.md reconformed to PEP 8 removed Tab Update truncate.md Replaced "…" with "..." Updated Description to match Update reverse-string.md followed change request Miner miner mods refactor 1 (technoph1le#2) 2nd integration feat: update snippet button and modal increased the size of the snippet modal, added a bit more responsitivity too removed the gray filter on the snippet button feat: add minimum width to modal Added bash as a new language, also added a category and a snippet (technoph1le#204) * Added a bash as a new language, also added a category and a snippet * Fixed the snippet to make it more like a snippet * Deleted public/consolidated/ and put code into a function * Deleted public/consolidated/ Update calculate-compound-interest.md Create Calculate-factorial.md Rename Calculate-factorial.md to calculate-factorial.md Update calculate-factorial.md Delete snippets/python/math-and-numbers/calculate-factorial.md refacto(css/pulse-animation): add 'alternate' and edit keyframes Added Rust category and a snippet [Snippet] [Fix] Added a bash snippet (technoph1le#219) * removed bash icon * fix comments of a script * added kill_prev snippet * followed guidelines Remove language tag in guidelines math - remap function math - remap function to most languages remap to linearMapping, args renamed fix all mistakes,typos added array manipulation snippets removed unnecessary snippets

Mathys-Gasnier · 2025-01-11T23:07:36Z

I think you did something wrong with your merge, it's displaying lots of changes

ACR1209 · 2025-01-11T23:54:36Z

I think you did something wrong with your merge, it's displaying lots of changes

Yeah, I had a weird config on my local git for some reason. Already fixed @Mathys-Gasnier!

psychlone77

Changes look good. Although there is a small bug with the dropdown, if I first open it with the "ArrowRight" key, then the dropdown can't be toggled with the mouse. Also toggling with the "ArrowRight" key doesn't flip the selector arrow icon.

… keyboard navigation

ACR1209 · 2025-01-15T04:22:11Z

Changes look good. Although there is a small bug with the dropdown, if I first open it with the "ArrowRight" key, then the dropdown can't be toggled with the mouse. Also toggling with the "ArrowRight" key doesn't flip the selector arrow icon.

Good eye! It's already fixed, removed the unneeded state which was causing the problem.

src/styles/main.css

psychlone77

Looks good 👍.
Thank you for your contribution @ACR1209 🫡

technoph1le

Thank you for your contribution. I noticed that syntax highlighting doesn't seem to appear in React and fastapi.

psychlone77 · 2025-01-16T05:21:23Z

Thank you for your contribution. I noticed that syntax highlighting doesn't seem to appear in React and fastapi.

Seems like the CodePreview component is getting the language name which could be the sub language too, which isn't supported by the syntax highlighter.
@ACR1209 in the SnippetList component try this change.

...
        {isModalOpen && snippet && (
          <SnippetModal
            snippet={snippet}
            handleCloseModal={handleCloseModal}
            language={language.mainLanguage? language.mainLanguage.name : language.name} //change this line
          />
        )}
...

psychlone77

Syntax highlighting bug

ACR1209 · 2025-01-16T05:24:36Z

Thank you for your contribution. I noticed that syntax highlighting doesn't seem to appear in React and fastapi.

Seems like the CodePreview component is getting the language name which could be the sub language too, which isn't supported by the syntax highlighter.
@ACR1209 in the SnippetList component try this change.
...
        {isModalOpen && snippet && (
          <SnippetModal
            snippet={snippet}
            handleCloseModal={handleCloseModal}
            language={language.mainLanguage? language.mainLanguage.name : language.name} //change this line
          />
        )}
...

Yes that's the first thing I tried, but the syntax highlight is not correct for react as is tsx, I think we should get the language extension when parsing the snippets, or some kind of metadata.

ACR1209 · 2025-01-16T05:30:26Z

@psychlone77 I did this fix but of course it means changes to this code base everytime a new framework is added, I'm not too familiar with how the new code of consolidating snippets works as to make the metadata from the first snippet markdown code extension. Is still consolidateSnippets.js used on build time? If so, I understand the changes to be made if this fix is not sufficient.

const extensions: { [key: string]: string } = {
  "REACT": "tsx",
  "FASTAPI": "py",
}; 

const SnippetList = () => {

      ...

      <AnimatePresence mode="wait">
        {isModalOpen && snippet && (
          <SnippetModal
            snippet={snippet}
            handleCloseModal={handleCloseModal}
            language={ extensions[language.name] || language.name}
          />
        )}
      </AnimatePresence>
    </>
  );
};

export default SnippetList;

psychlone77 · 2025-01-16T05:45:04Z

I believe we must add a new field to each language for the file extension or name which is supported by prismjs https://prismjs.com/#supported-languages, since some languages and most frameworks don't use the display name as the file extension. @Mathys-Gasnier @dostonnabotov.
For now lets keep the same syntax highlighting as the main language and maybe create a new Issue/PR for adding a extension field.

ACR1209 · 2025-01-16T05:55:37Z

I believe we must add a new field to each language for the file extension or name which is supported by prismjs https://prismjs.com/#supported-languages, since some languages and most frameworks don't use the display name as the file extension. @Mathys-Gasnier @dostonnabotov. For now lets keep the same syntax highlighting as the main language and maybe create a new Issue/PR for adding a extension field.

@psychlone77 fixed it, added an extension field to the snippet itself, we could also do it language wide but of course would require more changes.

ACR1209 · 2025-01-16T06:23:23Z

Had the weird merge problem again!
I think is my merge.ff config as I use a different git config for other projects, sorry 😅

Mathys-Gasnier · 2025-01-16T06:44:38Z

I reviewed without seeing every changes, but please do not add a field to the snippets for the moment, as your changes will break the parser, we will make those changes in another pull request, just use the parent language to the sub language and set the syntax highlighting as that.

ACR1209 · 2025-01-16T06:48:06Z

I reviewed without seeing every changes, but please do not add a field to the snippets for the moment, as your changes will break the parser, we will make those changes in another pull request, just use the parent language to the sub language and set the syntax highlighting as that.

May I ask what you are referring to as the parser? The consolidated snippets seem to work fine and I just use the content that's discarded either way. I can revert it but I'm just curious

utils/snippetParser.ts

technoph1le

Everything looks good to me. Awesome work.

I noticed a small contrast issue with sublanguage arrow. When sublanguage dropdown is highlighted, the arrow is hard to see. So, changed the color to black. Here's a code you can try:

.selector__item.selected .sublanguage__arrow {
  border-top-color: var(--clr-text-tertiary);
}

psychlone77

Looks good 👍

actions-user and others added 9 commits January 4, 2025 19:01

Update consolidated snippets

7b487ce

Merge branch 'dostonnabotov:main' into main

e0a0993

Add frontend view to show frameworks

be204bb

Changes to code style

f934e32

Allow to open sublanguages with keyboard

4d6028f

Changes to code styles

75f586a

Add FastAPI framework with basics section

3e7bb65

Update consolidated snippets

9805157

Bugfix where the initial opened state is not considered

b5a2e94

ACR1209 requested review from psychlone77, saminjay and Mathys-Gasnier as code owners January 6, 2025 06:41

Mathys-Gasnier requested changes Jan 10, 2025

View reviewed changes

ACR1209 requested a review from majvax as a code owner January 10, 2025 19:25

ACR1209 force-pushed the frameworks-frontend branch from 91da80a to 4aa4a46 Compare January 10, 2025 19:30

ACR1209 requested a review from Mathys-Gasnier January 10, 2025 19:30

ACR1209 and others added 3 commits January 11, 2025 18:44

Merge branch 'dostonnabotov:main' into frameworks-frontend

34ee41a

Remove pushed consolidated changes and remove unrelated changes

03aa0a4

Remove unused json

20acee1

Mathys-Gasnier approved these changes Jan 12, 2025

View reviewed changes

psychlone77 requested changes Jan 15, 2025

View reviewed changes

ACR1209 added 2 commits January 14, 2025 23:16

Bugfix the keyboard navigation conflict and the arrow not flipping on…

bfbc347

… keyboard navigation

Remove handleToggleSublanguage from dep array

274f1e7

ACR1209 requested a review from psychlone77 January 15, 2025 04:22

psychlone77 requested changes Jan 15, 2025

View reviewed changes

src/styles/main.css Show resolved Hide resolved

Point arrow to the right on sublanguage dropdown

a1628b2

psychlone77 approved these changes Jan 16, 2025

View reviewed changes

technoph1le reviewed Jan 16, 2025

View reviewed changes

psychlone77 requested changes Jan 16, 2025

View reviewed changes

Patch syntax highlighting for frameworks

10e8791

Add extension to the snippet to help rendering with highlights

29f8cc6

ACR1209 and others added 3 commits January 16, 2025 01:15

Merge of main

ab2c478

Merge branch 'main' into frameworks-frontend

4a0c670

Fix linting

91eec87

ACR1209 requested review from psychlone77 and technoph1le January 16, 2025 06:25

Mathys-Gasnier approved these changes Jan 16, 2025

View reviewed changes

Mathys-Gasnier reviewed Jan 16, 2025

View reviewed changes

utils/snippetParser.ts Outdated Show resolved Hide resolved

technoph1le reviewed Jan 17, 2025

View reviewed changes

Add contrast to sublanguage selector arrow when item selected

da71b16

ACR1209 requested a review from technoph1le January 17, 2025 02:00

technoph1le approved these changes Jan 17, 2025

View reviewed changes

psychlone77 approved these changes Jan 17, 2025

View reviewed changes

majvax approved these changes Jan 17, 2025

View reviewed changes

majvax added enhancement New feature or request mergeable Reviewed and ready to be merged labels Jan 17, 2025

technoph1le merged commit 6e7b4dd into technoph1le:main Jan 18, 2025
2 checks passed

Mcbencrafter mentioned this pull request Jan 20, 2025

[Bug] - npm run dev doesnt work #238

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Frameworks frontend implementation #198

Frameworks frontend implementation #198

ACR1209 commented Jan 6, 2025

Mathys-Gasnier left a comment

Mathys-Gasnier commented Jan 11, 2025

ACR1209 commented Jan 11, 2025

psychlone77 left a comment

ACR1209 commented Jan 15, 2025

psychlone77 left a comment

technoph1le left a comment •

edited

Loading

psychlone77 commented Jan 16, 2025

psychlone77 left a comment

ACR1209 commented Jan 16, 2025

ACR1209 commented Jan 16, 2025

psychlone77 commented Jan 16, 2025

ACR1209 commented Jan 16, 2025

ACR1209 commented Jan 16, 2025

Mathys-Gasnier commented Jan 16, 2025

ACR1209 commented Jan 16, 2025

technoph1le left a comment

psychlone77 left a comment

Frameworks frontend implementation #198

Frameworks frontend implementation #198

Conversation

ACR1209 commented Jan 6, 2025

Description

Type of Change

Checklist

Related Issues

Additional Context

Screenshots (Optional)

Mathys-Gasnier left a comment

Choose a reason for hiding this comment

Mathys-Gasnier commented Jan 11, 2025

ACR1209 commented Jan 11, 2025

psychlone77 left a comment

Choose a reason for hiding this comment

ACR1209 commented Jan 15, 2025

psychlone77 left a comment

Choose a reason for hiding this comment

technoph1le left a comment • edited Loading

Choose a reason for hiding this comment

psychlone77 commented Jan 16, 2025

psychlone77 left a comment

Choose a reason for hiding this comment

ACR1209 commented Jan 16, 2025

ACR1209 commented Jan 16, 2025

psychlone77 commented Jan 16, 2025

ACR1209 commented Jan 16, 2025

ACR1209 commented Jan 16, 2025

Mathys-Gasnier commented Jan 16, 2025

ACR1209 commented Jan 16, 2025

technoph1le left a comment

Choose a reason for hiding this comment

psychlone77 left a comment

Choose a reason for hiding this comment

technoph1le left a comment •

edited

Loading