From 200e412476d116dd78c9b794ceff103171154bb2 Mon Sep 17 00:00:00 2001 From: joekotvas Date: Sat, 24 Feb 2024 01:44:07 -0500 Subject: [PATCH 1/2] Tidy Codebase - rm unused files and mv FontVisualizer to FontViewer --- fetools-app/src/Home.jsx | 96 ------------------- .../CodeGenerator.jsx | 0 .../CodeGeneratorComponents/CodeTypeRadio.jsx | 0 .../CodeGeneratorComponents/CopyButton.jsx | 0 .../FontOptions.jsx | 0 .../BackgroundColorInput.jsx | 0 .../FontPreviewComponenets/FontColorInput.jsx | 0 .../FontPreviewComponenets/FontNameInput.jsx | 89 +++++++++++++++++ .../FontPreviewComponenets/FontSizeInput.jsx | 0 .../FontPreviewComponenets/FontStyleInput.jsx | 0 .../FontVariantInput.jsx | 0 .../FontWeightInput.jsx | 0 .../GoogleFontButton.jsx | 0 .../LetterSpacingInput.jsx | 0 .../LineHeightInput.jsx | 0 .../FontPreviewComponenets/TextAlignInput.jsx | 0 .../FontViewerBookmarks.jsx | 0 .../HtmlCodeGenerator.jsx | 0 .../Preview.jsx | 0 .../{FontVisualizer => FontViewer}/fontFN.js | 0 .../{FontVisualizer => FontViewer}/index.js | 0 .../FontPreviewComponenets/FontNameInput.jsx | 81 ---------------- fetools-app/src/components/HeartIcon.jsx | 9 -- .../components/InputComponents/TabsInput.jsx | 0 .../src/components/PageLayout/PageSection.jsx | 31 ------ .../ToolsLayout/Sections/ToolSection.jsx | 28 +++--- fetools-app/src/data.js | 1 - fetools-app/src/pages/FontViewer.jsx | 10 +- fetools-app/src/pages/Team.jsx | 11 --- 29 files changed, 108 insertions(+), 248 deletions(-) delete mode 100644 fetools-app/src/Home.jsx rename fetools-app/src/components/{FontVisualizer => FontViewer}/CodeGenerator.jsx (100%) rename fetools-app/src/components/{FontVisualizer => FontViewer}/CodeGeneratorComponents/CodeTypeRadio.jsx (100%) rename fetools-app/src/components/{FontVisualizer => FontViewer}/CodeGeneratorComponents/CopyButton.jsx (100%) rename fetools-app/src/components/{FontVisualizer => FontViewer}/FontOptions.jsx (100%) rename fetools-app/src/components/{FontVisualizer => FontViewer}/FontPreviewComponenets/BackgroundColorInput.jsx (100%) rename fetools-app/src/components/{FontVisualizer => FontViewer}/FontPreviewComponenets/FontColorInput.jsx (100%) create mode 100644 fetools-app/src/components/FontViewer/FontPreviewComponenets/FontNameInput.jsx rename fetools-app/src/components/{FontVisualizer => FontViewer}/FontPreviewComponenets/FontSizeInput.jsx (100%) rename fetools-app/src/components/{FontVisualizer => FontViewer}/FontPreviewComponenets/FontStyleInput.jsx (100%) rename fetools-app/src/components/{FontVisualizer => FontViewer}/FontPreviewComponenets/FontVariantInput.jsx (100%) rename fetools-app/src/components/{FontVisualizer => FontViewer}/FontPreviewComponenets/FontWeightInput.jsx (100%) rename fetools-app/src/components/{FontVisualizer => FontViewer}/FontPreviewComponenets/GoogleFontButton.jsx (100%) rename fetools-app/src/components/{FontVisualizer => FontViewer}/FontPreviewComponenets/LetterSpacingInput.jsx (100%) rename fetools-app/src/components/{FontVisualizer => FontViewer}/FontPreviewComponenets/LineHeightInput.jsx (100%) rename fetools-app/src/components/{FontVisualizer => FontViewer}/FontPreviewComponenets/TextAlignInput.jsx (100%) rename fetools-app/src/components/{FontVisualizer => FontViewer}/FontViewerBookmarks.jsx (100%) rename fetools-app/src/components/{FontVisualizer => FontViewer}/HtmlCodeGenerator.jsx (100%) rename fetools-app/src/components/{FontVisualizer => FontViewer}/Preview.jsx (100%) rename fetools-app/src/components/{FontVisualizer => FontViewer}/fontFN.js (100%) rename fetools-app/src/components/{FontVisualizer => FontViewer}/index.js (100%) delete mode 100644 fetools-app/src/components/FontVisualizer/FontPreviewComponenets/FontNameInput.jsx delete mode 100644 fetools-app/src/components/HeartIcon.jsx mode change 100644 => 100755 fetools-app/src/components/InputComponents/TabsInput.jsx delete mode 100644 fetools-app/src/components/PageLayout/PageSection.jsx delete mode 100644 fetools-app/src/data.js mode change 100644 => 100755 fetools-app/src/pages/FontViewer.jsx delete mode 100644 fetools-app/src/pages/Team.jsx diff --git a/fetools-app/src/Home.jsx b/fetools-app/src/Home.jsx deleted file mode 100644 index 40786185..00000000 --- a/fetools-app/src/Home.jsx +++ /dev/null @@ -1,96 +0,0 @@ -import ToolHeaderSection from '../components/ToolsLayout/ToolHeaderSection'; -import GoDeeper from '../components/ToolsLayout/GoDeeper'; -import ToolHeading from '../components/ToolsLayout/ToolHeading'; -import TabSwitcher from '../components/TabSwitcher'; -import Toast from '../components/ToastWithTitle'; -import Heart from '../components/Heart'; -import PageSection from '../components/PageLayout/PageSection'; - -function TestContent1() { - return

Test Content 1

; -} - -function TestContent2() { - return

Test Content 2

; -} - -function TestContent3() { - return

Test Content 3

; -} - -function Home() { - const linksData = [ - { - url: 'https://en.wikipedia.org/wiki/Gabe_Newell', - textValue: 'Dummy Link 1', - }, - { - url: 'https://en.wikipedia.org/wiki/SteamOS', - textValue: 'Dummy Link 2', - }, - { - url: 'https://en.wikipedia.org/wiki/Half-Life:_Alyx', - textValue: 'Dummy Link 3', - }, - ]; - - return ( -
- -

Here is the content.

- - - - - - - -
-
- -
-

Test Test Test

-
-
- -
- -
-

Test Test Test

-
-
-
- - - - - - - - - - -
- ); -} - -export default Home; diff --git a/fetools-app/src/components/FontVisualizer/CodeGenerator.jsx b/fetools-app/src/components/FontViewer/CodeGenerator.jsx similarity index 100% rename from fetools-app/src/components/FontVisualizer/CodeGenerator.jsx rename to fetools-app/src/components/FontViewer/CodeGenerator.jsx diff --git a/fetools-app/src/components/FontVisualizer/CodeGeneratorComponents/CodeTypeRadio.jsx b/fetools-app/src/components/FontViewer/CodeGeneratorComponents/CodeTypeRadio.jsx similarity index 100% rename from fetools-app/src/components/FontVisualizer/CodeGeneratorComponents/CodeTypeRadio.jsx rename to fetools-app/src/components/FontViewer/CodeGeneratorComponents/CodeTypeRadio.jsx diff --git a/fetools-app/src/components/FontVisualizer/CodeGeneratorComponents/CopyButton.jsx b/fetools-app/src/components/FontViewer/CodeGeneratorComponents/CopyButton.jsx similarity index 100% rename from fetools-app/src/components/FontVisualizer/CodeGeneratorComponents/CopyButton.jsx rename to fetools-app/src/components/FontViewer/CodeGeneratorComponents/CopyButton.jsx diff --git a/fetools-app/src/components/FontVisualizer/FontOptions.jsx b/fetools-app/src/components/FontViewer/FontOptions.jsx similarity index 100% rename from fetools-app/src/components/FontVisualizer/FontOptions.jsx rename to fetools-app/src/components/FontViewer/FontOptions.jsx diff --git a/fetools-app/src/components/FontVisualizer/FontPreviewComponenets/BackgroundColorInput.jsx b/fetools-app/src/components/FontViewer/FontPreviewComponenets/BackgroundColorInput.jsx similarity index 100% rename from fetools-app/src/components/FontVisualizer/FontPreviewComponenets/BackgroundColorInput.jsx rename to fetools-app/src/components/FontViewer/FontPreviewComponenets/BackgroundColorInput.jsx diff --git a/fetools-app/src/components/FontVisualizer/FontPreviewComponenets/FontColorInput.jsx b/fetools-app/src/components/FontViewer/FontPreviewComponenets/FontColorInput.jsx similarity index 100% rename from fetools-app/src/components/FontVisualizer/FontPreviewComponenets/FontColorInput.jsx rename to fetools-app/src/components/FontViewer/FontPreviewComponenets/FontColorInput.jsx diff --git a/fetools-app/src/components/FontViewer/FontPreviewComponenets/FontNameInput.jsx b/fetools-app/src/components/FontViewer/FontPreviewComponenets/FontNameInput.jsx new file mode 100644 index 00000000..ff6ae990 --- /dev/null +++ b/fetools-app/src/components/FontViewer/FontPreviewComponenets/FontNameInput.jsx @@ -0,0 +1,89 @@ +import { useState, useEffect } from "react"; +import Select, { components } from "react-select"; +import GoogleFontButton from "./GoogleFontButton"; + +const Option = (props) => ( + +); + +const FontNameInput = ({ font, handleFontChange }) => { + const [useGoogleFont, setUseGoogleFont] = useState(false); + const [googleFonts, setGoogleFonts] = useState([]); + + const loadFont = (name, url) => { + const font = new FontFace(name, `url(${url})`, { + style: "normal", + weight: "400", + }); + font.load().then((loadedFace) => { + document.fonts.add(loadedFace); + }); + }; + + const fontFamilies = [ + { value: "Arial", label: "Arial" }, + { value: "Sans-serif", label: "Sans-serif" }, + { value: "Courier New", label: "Courier New" }, + { value: "Times New Roman", label: "Times New Roman" }, + { value: "Verdana", label: "Verdana" }, + { value: "Georgia", label: "Georgia" }, + { value: "Impact", label: "Impact" }, + { value: "Brush Script MT", label: "Brush Script MT" }, + { value: "Tahoma", label: "Tahoma" }, + { value: "Trebuchet MS", label: "Trebuchet MS" }, + ]; + + const fetchGoogleFonts = async () => { + try { + const response = await fetch( + "https://www.googleapis.com/webfonts/v1/webfonts?key=AIzaSyBqgqqCwtuUfe308aXdbkr1gOA9hw9__RM" + ); + const data = await response.json(); + const fonts = data.items.map((item) => ({ + value: item.family, + label: item.family, + url: item.files.regular?.replace("http", "https"), + })); + console.log(fonts); + setGoogleFonts(fonts); + } catch (error) { + console.error("Error fetching Google Fonts:", error); + } + }; + + useEffect(() => { + if (useGoogleFont) { + fetchGoogleFonts(); + } else { + setGoogleFonts([]); + } + }, [useGoogleFont]); + + return ( +
+
+ { - handleFontChange('name', selectedOption.value); - useGoogleFont && loadFont(selectedOption.value, selectedOption.url); - }} - options={useGoogleFont ? googleFonts : fontFamilies} - styles={{ control: provided => ({ ...provided, width: '10rem' }) }} - components={{ Option }} - /> - setUseGoogleFont(!useGoogleFont)} /> -
-
- ); -}; - -export default FontNameInput; diff --git a/fetools-app/src/components/HeartIcon.jsx b/fetools-app/src/components/HeartIcon.jsx deleted file mode 100644 index b83c8530..00000000 --- a/fetools-app/src/components/HeartIcon.jsx +++ /dev/null @@ -1,9 +0,0 @@ -export default function HeartIcon({isHearted=false, addClass, onClick}){ - return( - - - - ) -} - - diff --git a/fetools-app/src/components/InputComponents/TabsInput.jsx b/fetools-app/src/components/InputComponents/TabsInput.jsx old mode 100644 new mode 100755 diff --git a/fetools-app/src/components/PageLayout/PageSection.jsx b/fetools-app/src/components/PageLayout/PageSection.jsx deleted file mode 100644 index db01a63c..00000000 --- a/fetools-app/src/components/PageLayout/PageSection.jsx +++ /dev/null @@ -1,31 +0,0 @@ -export default function PageSection({ - title = 'Section Title', - children =

Place your content here.

, - icon = 'pageless', - className = '', -}) { - const sectionClasses = `container p-8 ${className}`; - - return ( -
-
-
-

- - {icon} - - {title} -

-
- {children} -
- { - - tune - - } -
-
-
- ); -} diff --git a/fetools-app/src/components/ToolsLayout/Sections/ToolSection.jsx b/fetools-app/src/components/ToolsLayout/Sections/ToolSection.jsx index ab7e58f8..08745ee1 100644 --- a/fetools-app/src/components/ToolsLayout/Sections/ToolSection.jsx +++ b/fetools-app/src/components/ToolsLayout/Sections/ToolSection.jsx @@ -1,17 +1,17 @@ -import Pane from './ToolPane'; +import Pane from "./ToolPane"; -export default function PageSection({ - title, - children, - icon, - iconType, - className, +export default function ToolSection({ + title, + children, + icon, + iconType, + className, }) { - return ( -
- - {children} - -
- ); + return ( +
+ + {children} + +
+ ); } diff --git a/fetools-app/src/data.js b/fetools-app/src/data.js deleted file mode 100644 index 2422b679..00000000 --- a/fetools-app/src/data.js +++ /dev/null @@ -1 +0,0 @@ -export const appName = 'devex.tools'; diff --git a/fetools-app/src/pages/FontViewer.jsx b/fetools-app/src/pages/FontViewer.jsx old mode 100644 new mode 100755 index 2812d180..699579c8 --- a/fetools-app/src/pages/FontViewer.jsx +++ b/fetools-app/src/pages/FontViewer.jsx @@ -1,7 +1,7 @@ import { useState } from "react"; -import CodeGenerator from "../components/FontVisualizer/CodeGenerator"; -import FontOptions from "../components/FontVisualizer/FontOptions"; -import Preview from "../components/FontVisualizer/Preview"; +import CodeGenerator from "../components/FontViewer/CodeGenerator"; +import FontOptions from "../components/FontViewer/FontOptions"; +import Preview from "../components/FontViewer/Preview"; import ToolMain from "../components/ToolsLayout/ToolMain"; import ToolHeading from "../components/ToolsLayout/ToolHeading"; import { @@ -11,7 +11,7 @@ import { import GoDeeper from "../components/ToolsLayout/GoDeeper"; import useExpander from "../hooks/useExpander"; import useBookmarks from "../hooks/useBookmarks"; -import FontViewerBookmarks from "../components/FontVisualizer/FontViewerBookmarks"; +import FontViewerBookmarks from "../components/FontViewer/FontViewerBookmarks"; import useToastState from "../hooks/useToastState"; import Toast from "../components/Toast"; @@ -22,7 +22,7 @@ import { generateFontStyles, generateTailwindCode, handleCopyClick, -} from "../components/FontVisualizer/index"; +} from "../components/FontViewer/index"; const FontVisualizer = () => { const [font, setFont] = useState({ diff --git a/fetools-app/src/pages/Team.jsx b/fetools-app/src/pages/Team.jsx deleted file mode 100644 index 80d487f5..00000000 --- a/fetools-app/src/pages/Team.jsx +++ /dev/null @@ -1,11 +0,0 @@ -import '../index.css'; - -function Team() { - return ( -
-

Team Page

-
- ) -} - -export default Team \ No newline at end of file From b26504fd01220e51f9756fc9480cb1b45b0251f5 Mon Sep 17 00:00:00 2001 From: joekotvas Date: Sat, 24 Feb 2024 01:50:25 -0500 Subject: [PATCH 2/2] Update footer copy per #153 requirements --- .../src/components/PageLayout/Footer.jsx | 111 ++++++++++-------- 1 file changed, 63 insertions(+), 48 deletions(-) diff --git a/fetools-app/src/components/PageLayout/Footer.jsx b/fetools-app/src/components/PageLayout/Footer.jsx index 33b2033b..e543beb4 100644 --- a/fetools-app/src/components/PageLayout/Footer.jsx +++ b/fetools-app/src/components/PageLayout/Footer.jsx @@ -1,55 +1,70 @@ -import { Link } from 'react-router-dom'; -import Icon from '../Icon'; -import logo from '../../assets/devexToolsLogoWhite.svg'; +import { Link } from "react-router-dom"; +import Icon from "../Icon"; +import logo from "../../assets/devexToolsLogoWhite.svg"; export default function Footer() { - return ( - + ); } function goTopPage() { - window.scrollTo({ - top: 0, - behavior: 'smooth', - }); + window.scrollTo({ + top: 0, + behavior: "smooth", + }); }