synonym search
1.0.0
Ein aussagekräftiger Thesaurus
Merken Sie sich alle Wörter, die Sie finden, wenn Sie einen Thesaurus verwenden.
Mit SynonymSearch können Sie überprüfen, was Sie gerade gelernt haben (und sonst vielleicht vergessen würden), indem es eine Liste aller Ihrer Suchanfragen nach ihren gemeinsamen Definitionen sortiert, während Sie sie finden.
Mit SynonymSearch können Sie die Ähnlichkeit synonymer Wörter testen, indem Sie sie in einen Satz einfügen, dessen Bedeutung von der gemeinsamen Definition abhängt. Die App hilft Ihnen dabei, eine Definition aktiv zu verstehen und sie dann anhand einer Sammlung von Synonymen zu überprüfen.
Dieses Projekt wurde als Teil des MS2 Interactive Front End-Moduls am Code Institute entwickelt. Es ist so geschrieben, dass es mit dem JSON-Antwortformat des Collegiate® Thesaurus von Merriam-Webster funktioniert, und wird mit React über Next.js entwickelt, mit create-next-app gebootet und mit Vercel bereitgestellt.
Bitte besuchen Sie das Projekt hier: synonyme.vercel.app
Hinweis als Referenz: Früheres Schema hieß „Synonym-Chaser“.
Anfang Januar 2021 wurde mit der Erstellung schematischer Modelle begonnen, um Beziehungen zwischen unterschiedlichen Komponenten herzustellen und entsprechende Verantwortlichkeiten zuzuweisen.
Dieser Ansatz trug dazu bei, den Projektumfang aufzuschlüsseln und, was am wichtigsten ist, einen Maßstab für Referenzen für die Entwicklung und Fehlerbehebung zu liefern.
siehe Thinking in React (Dokumente)
{Results} => {Root} => {Sense} => {Option} (siehe Ergebnisverzeichnis)
{Saves} => {Selection} (siehe Saves-Verzeichnis)
{Results} =>{Root} => {Sense} über {ReplaceSubStringNode} übergeben wird (siehe string.helper.js). Jetzt aufgeschlüsselt nach {Saves} => {Selection} (siehe Anzeige) 
{Sense} => {Option} im Ergebnisbaum abgewickelt wird (siehe Ergebnisverzeichnis). Auf alle Knoten mit dynamischem Inhalt wird ein einheitlicher oberer und unterer Rand angewendet. Diese diskreten Ränder sollen dem Benutzer die materielle Größe eines Notizblocks als vertrauten Berührungspunkt vermitteln. Diese wordBoxes variieren nur im Abstand und sind für die visuelle Darstellung der Hierarchie in einer Liste von Listen verantwortlich.
ThemeProvider von Material-UI umschließt die App, um Stile an den Komponentenbaum weiterzugeben. Siehe Material-UI-Design. Die Schriftfamilie ist auf eine Reihe von Systemschriftarten eingestellt, um sich an die Geräte-/Plattform-/Benutzerkonfiguration anzupassen und die Abhängigkeit von einer expliziten Schriftart zu vermeiden. Ein commonSettings Objekt in theme.context.js enthält eine Liste dieser Überschreibungen, die mit dem Theme-Anbieter von Material-UI zusammengeführt wird. Siehe Material-UI Global-css
export const commonSettings = {
typography : {
fontFamily : [
'-apple-system' ,
'BlinkMacSystemFont' ,
'"Segoe UI"' ,
'Roboto' ,
'"Helvetica Neue"' ,
'Arial' ,
'sans-serif' ,
'"Apple Color Emoji"' ,
'"Segoe UI Emoji"' ,
'"Segoe UI Symbol"' ,
] . join ( ',' ) ,
} ,
} Die App verfügt über zwei Sätze von Primär- und Sekundärfarben für ein helles und ein dunkles Thema, die über die Palettenkonfiguration der Material-Benutzeroberfläche konfiguriert werden. Verhalten und Zustände von Farben basieren auf Eigenschaften, die im Standarddesignobjekt von Material-UI definiert sind. Sekundärfarben werden auf einen neutralen Farbton eingestellt, während Primärfarben als einzelne „Merkmalsfarbe“ gerendert werden. Der minimale Ansatz für Farbsets besteht darin, einen Notizblock aufzuwerten
const lightTheme = createMuiTheme ( {
palette : {
type : 'light' ,
primary : {
main : '#ff3200' ,
} ,
secondary : {
main : grey [ 900 ] ,
} ,
} ,
... commonSettings ,
} ) ; const darkTheme = createMuiTheme ( {
palette : {
type : 'dark' ,
primary : {
main : lightblue [ 500 ] ,
} ,
secondary : {
main : '#fafafa' ,
} ,
background : {
default : '#151515' ,
} ,
} ,
... commonSettings ,
} ) ; Die Website ist als progressive Webanwendung modelliert, um die Funktionalität einer Single-Page-App ohne Neuladen ganzer Seiten bereitzustellen und für die Leistung einer nativen App optimiert zu sein. Sein Framework gewährleistet Flexibilität über alle Browser hinweg.
Die Website nutzt große schwebende Aktionsschaltflächen (FAB), um schnell zwischen den drei Remote-Ansichten „Suchen“, „Info“ und „Speichern“ zu navigieren. Visuelle Metaphern werden verwendet, um diese Ansichtsmodi diskret und effizient darzustellen.
Eine schwebende „Kurzwahl“-Schaltfläche bleibt in allen Ansichten erhalten, um schnell auf die Kernaktionen der App zuzugreifen: einen Begriff abfragen, den gespeicherten Verlauf löschen und den Hell- oder Dunkelmodus umschalten.
Die App verfügt beim ersten Laden der Seite über einen benutzerdefinierten Startbildschirm, der ihren Zweck prägnant beschreibt: „Eine interaktive Thesaurus-App“.
jsx , jss js . (Bootstrapped mit Nestjs)next muss entwickelt werden, next build für die Produktion vorbereitet und next start wird bereitgestellt.commit und an GitHub push .push -Vorgängen über Git zu speichern. Stile sind in der JSS-Syntax geschrieben und folgen der Spezifikation für Material-UI, um gut mit dem serverseitigen Rendering von Nextjs zusammenzuarbeiten. Dazu gehört die Logik des Anpassens von pages/_document , um serverseitig gerenderte Stile direkt vor der Verwendung in das Markup einzufügen. Beachten Sie, dass dies eine inoffizielle Empfehlung ist und überarbeitet werden sollte, wenn MUI ein offizielles Plugin für Nextjs veröffentlicht, das dem für MUI/Gatsby ähnelt.
Alle Stilobjekte werden mit dem makeStyles Hook von MUI erstellt und folgen den Richtlinien in den MUI-Stildokumenten für die Themengestaltung. Dazu gehören CSS-Überschreibungen und Medienabfragen. Stilobjekte für Hauptkomponenten werden im Stilverzeichnis nach Umfang getrennt und nach Bedarf in Module importiert. Bei einigen Komponenten, nämlich Launcher , sind jedoch alle Stil-Requisiten in der Komponentendatei selbst deklariert. Beachten Sie, dass aus Gründen der Konsistenz alle Stile letztendlich aus einem Verzeichnis exportiert werden sollten.
Der results rendert jsx Komponenten bei jedem API-Aufruf, ohne Konstanten zu initialisieren. Requisiten und bedingte Ausdrücke steuern die Iteration des Antwortschemas von der MW-Thesaurus-API. Beachten Sie, dass Werte und Prop-Type-Überprüfungen speziell geschrieben werden, um die richtigen Daten aus diesem Schema zu erhalten:
Jede gespeicherte Wortinstanz behält die Eigenschaften der Ergebnisfamilie bei, aus der sie „entnommen“ wurde – etwa die jeweilige Definition, Bezeichnung und das Stammwort des Wortes –, um die Werte von Duplikaten zu erhöhen und Wörter nach Sinndefinitionen zu gruppieren und gleichzeitig sicherzustellen, dass jede Instanz, unabhängig davon, identisch ist beim Namenswert ist eindeutig, wenn die Definition und der Sinn unterschiedlich sind
Die React-Hooks useReducer , useContext createContext werden in context/words.context (siehe HistoryProvider) zusammengestellt, um einen Kontext-Wrapper für Komponenten bereitzustellen, die dieselben Daten teilen und nutzen können. Beachten Sie, dass diese Logik direkt aus dem Beispielsatz in next.js/examples/with-context-api modelliert wird.
In Anlehnung an das, was durch die exportierten Kontext-Wrapper-Hooks useHistory und useDispatchHstory von HistoryProvider erreicht wird – die für Komponenten höherer Ordnung, gemeinsam genutzte Komponenten und Hilfsfunktionen in helpers/* verwendet werden, um das DOM radikal zu manipulieren – wird dieselbe Logik für die Fahrt mit mehreren umfunktioniert Hooks entlang eines benutzerdefinierten Wrappers mit MUIs ThemeProvider (siehe ThemeProvider). In diesem Fall ermöglicht das Festlegen des Ansichtswerts, dass jede Komponente die Seite von überall aus ändern kann, um nur einige zu nennen. Beachten Sie, dass es sich bei diesem Kontextlayoutanbieter um einen Allrounder handelt.
export const ThemeContextProvider = ( { children } ) => {
// Sets the theme for MUI ThemeProvider to use
const [ darkMode , setDarkMode ] = useState ( false ) ;
// Sets the current view
const [ value , setValue ] = useState ( 'launch' ) ;
// Hooks to set warning colors for searchText input
const [ meta , setMeta ] = useState ( true ) ;
const [ root , setRoot ] = useState ( '' ) ;
// Rides an MUI hook to set a memoized theme
const prefersDarkMode = useMediaQuery ( '(prefers-color-scheme: dark)' ) ;
useMemo (
( ) => ( prefersDarkMode
? setDarkMode ( true )
: setDarkMode ( false ) ) ,
[ prefersDarkMode ] ,
) ;
// Provides all values and the hooks that control them
return (
< ThemeDispatchContext . Provider
value = { {
darkMode ,
setDarkMode ,
value ,
setValue ,
meta ,
setMeta ,
root ,
setRoot ,
} }
>
< ThemeProvider
theme = {
darkMode
? darkTheme
: lightTheme
}
>
{ children }
< / ThemeProvider >
< / ThemeDispatchContext . Provider >
) ;
} ;
// All state/hooks are accessible by importing
// a catch-all export below
// Example:
// // anyFile.js
// import { useDispatchTheme } from './../theme.context'
//
// const dispatch = useDispatchTheme()
//
// Change any/all states from any component
// dispatch.setDarkMode(false)
// dispatch.setValue('search')
//
export const useDispatchTheme = ( ) => useContext ( ThemeDispatchContext ) ;
Die Nutzung von MW-Thesaurus ist für nichtkommerzielle und/oder Bildungszwecke kostenlos. Bei der Auswahl von Markenlogos auf der Registerkarte „Info“ müssen die Branding-Richtlinien eingehalten werden, die vom Entwicklungszentrum von Merriam-Webster gefordert werden, aber nicht darauf beschränkt sind.
Der mit diesem Projekt verknüpfte registrierte Thesaurus-API-Schlüssel ist derzeit öffentlich. Nach dieser Diskussion sind die Bemühungen, API-Aufrufe auf der Clientseite zu schützen, zwecklos, da der private Schlüssel immer offengelegt wird. Eine weitere Konfiguration, um einen internen Endpunkt in /pages/api zu haben, sollte über die Nextjs-API-Routen in Betracht gezogen werden. Beachten Sie, dass der Schlüssel aus den oben genannten Gründen und zu Bildungszwecken des Projekts von .env.local bereitgestellt wurde.
const axiosConfig = { baseURL : 'https://dictionaryapi.com/api/v3/references/' , } ;
function searchThesaurus ( searchText , selection ) {
const query = selection || searchText ;
// Key is processed from ignored env.local
// use this method if API endpoint is set up in /pages/api/*
const key = process . env . MW_THESAURUS_KEY ;
// @note Key is explicitly declared otherwise
// for Production/submission
return axiosGetCancellable (
`/thesaurus/json/ ${ query } ?key= ${ key } ` ,
axiosConfig ,
) ;
}Hinweis: Alle Beschreibungen atypischer Methoden finden Sie in Kommentarblöcken, die den jsDoc-Standards folgen.
Ein Benutzer erwartet, innerhalb weniger Sekunden nach dem Aufrufen der Website eine Beschreibung zu sehen
Launcher :useEffect ohne Abhängigkeiten ermöglicht, dass Launcher beim ersten Laden der Seite einmal ausgeführt wirduseContext kann Launcher den aktuellen value nach einer Zeitüberschreitung auf „ search “ setzen.Synonym Search An Interactive Thesaurus App “. import React , { useEffect , useState } from 'react' ;
import { useDispatchTheme } from '../../context/theme.context' ;
const Launcher = ( ) => {
const classes = useStyles ( ) ;
const viewDispatch = useDispatchTheme ( ) ;
const [ open , setOpen ] = useState ( true ) ;
const [ showOpen , setShowOpen ] = useState ( true ) ;
useEffect ( ( ) => {
setTimeout ( ( ) => {
setShowOpen ( false ) ;
setTimeout ( ( ) => {
setOpen ( false ) ;
viewDispatch . setValue ( 'search' ) ;
} , 350 ) ;
} , 2500 ) ;
} , [ ] ) ;
return (
< >
< Backdrop
className = { classes . backdrop }
open = { open }
/ >
< Grow
in = { showOpen }
unmountOnExit
>
< Box className = { classes . launch } >
{ ... excerpt . . . }
Synonym
/Search
An Interactive Thesaurus App
{ ... excerpt . . . }
< / Box >
< / Grow >
< / >
) ;
} ;
Ein Benutzer möchte sinnvoll zwischen Ansichten navigieren
Speed (Dial) :onClick .FixedBottom (abgespalten von „FixedBottom“) ermöglicht, dass sich die untere Speed Dial beim Scrollen auf Mobilgeräten reaktionsschnell über die unteren Balken bewegt.useScrollTrigger kann Speed Dial die Sichtbarkeit mit ScrollTop tauschen, einer schwebenden Aktionsschaltfläche, die beim Klicken das Fenster über einen Anker mit id="back-to-top" zurück zum Seitenanfang scrollt.Search werden an Speed Dial übergeben, um onSearchTextChange zu aktivieren, eine Funktion, die Abfragen an die Thesaurus-API sendet.useState ermöglicht es useEffect , SpeedDial immer zu schließen, wenn sich der value über useDispatch ändert, außer wenn Search active ist.ToggleTheme , Search , ClearSavesSpeedDialSpeedDial ist geöffnetToggleTheme -Aktionnot diesen <mode>SpeedDial ist geschlossenSavesSpeedDialSpeedDial ist geöffnetSearchSpeedDial ist noch geöffnetSearchSpeedDial verschwindetScrollTop Schaltfläche wird angezeigtScrollTopSpeedDial erscheintx und y Dimensionen navigieren (oben/unten in Ansichten, links/rechts zwischen Ansichten), indem er auf SpeedDial für die Ansichten klickt, die sie darstellen. Darüber hinaus ist die Schaltflächennavigation pro Ansicht im Seitenkopf verfügbar. Die anderen beiden Ansichten sind Saves und Info , die zur gleichen Familie schwebender Aktionsschaltflächen gehören wie die Aktionen in SpeedDial . Die Konsistenz und Einzigartigkeit von Thema, Farbe und Benutzeroberfläche spielt eine Rolle bei den Impulsen und der Vertrautheit eines Benutzers mit dem vermittelten dauerhaften Berührungspunkt. import React , { useEffect , useState } from 'react' ;
import { useDispatchTheme } from '../../context/theme.context' ;
const Speed = ( {
children ,
value ,
index ,
searchText ,
loading ,
onSearchTextChange ,
... other
} ) => {
const trigger = useScrollTrigger ( ) ;
const classes = useStyles ( ) ;
const [ open , setOpen ] = useState ( false ) ;
const [ direction , setDirection ] = useState ( 'up' ) ;
const matches = useMediaQuery ( '(min-width:600px)' ) ;
const viewDispatch = useDispatchTheme ( ) ;
const view = viewDispatch . value ? viewDispatch . value : null ;
const handleClick = ( event ) => setOpen ( ! open ) ;
open && trigger ? setOpen ( false ) : null ;
useEffect ( ( ) => {
setTimeout ( ( ) => {
if ( viewDispatch . value !== 'search' ) {
setOpen ( false ) ;
}
} , 10 ) ;
} , [ view ] ) ;
return (
< Slide appear direction = "up" in = { ! trigger } >
< FixedBottom offset = { matches ? 16 : 48 } >
< SpeedDial
ariaLabel = "actions"
className = { classes . speedDialGroup }
FabProps = { {
className : clsx ( classes . speedDial , classes . bottom ) ,
size : matches ? 'medium' : 'small' ,
style : { padding : matches ? '12px' : '8px' } ,
} }
onClick = { handleClick }
open = { open }
direction = { direction }
>
{ ... Search action }
{ ... Toggle theme action }
{ ... Clear cache action }
/ >
< / SpeedDial >
< / FixedBottom >
< / Slide >
) ;
} ;
export default Speed ;
Ein Benutzer möchte zuverlässige Quellen sehen
Brands beschreiben (Material-UI AvatarGroup ):useEffect ermöglicht es useState Ränder umzudrehen, wenn der Seitenwert auf die aktuelle view => Info gesetzt ist, wodurch die Avatare dazu animiert werden, sich zu erweitern, als ob sie einen Benutzer am Infoschalter willkommen heißen würden, während ein kurzer Absatz zur Beschreibung der „ SynonymStory “ dahinter enthalten ist „ SynonymSearch “Logo Instanzen, jeweils eine: React , NextJS , MaterialUI , CodeInstitute und Merriam-Webster .SearchInfoInfoBrands erscheintMerriam-WebsterMerriam-Webster Developer Center website geöffnetInfo import React , { useEffect , useState } from 'react' ;
import { useDispatchTheme } from '../../context/theme.context' ;
const Brands = ( { children } ) => {
const classes = useStyles ( ) ;
const viewDispatch = useDispatchTheme ( ) ;
const [ active , setActive ] = useState ( false ) ;
const { value } = viewDispatch ;
useEffect ( ( ) => {
if ( value === 'info' ) {
setTimeout ( ( ) => {
setActive ( true ) ;
} , 750 ) ;
}
} , [ ] ) ;
return (
< AvatarGroup
className = {
clsx (
classes . avatarGroup , active
? classes . active
: classes . inactive ,
)
}
>
< Logo
name = "React"
url = "https://react.org/"
path = "/images/reactLogo.png"
/ >
< Logo
name = "Next JS"
url = "https://nextjs.org/"
path = "/images/nextJSLogo.svg"
/ >
< Logo
name = "Material UI"
url = "https://material-ui.com/"
path = "/images/materialUILogoLight.png"
darkImage = "/images/materialUILogoDark.png"
/ >
< Logo
name = "Code Institute"
url = "https://codeinstitute.net/"
path = "/images/codeInstituteLogo.png"
/ >
< Logo
name = "Merriam-Webster"
url = "https://dictionaryapi.com/"
path = "/images/merriamWebsterLogoLight.png"
/ >
< / AvatarGroup >
) ;
} ;
Ein Benutzer möchte nach Synonymen suchen
Search beschreiben:loading : ob Ergebnisse geladen werden,meta : ob die Eingabe eines Benutzers ein gültiges Ergebnis liefert,root : ob das erste Element in einem Ergebnisarray mit der Eingabe des Benutzers übereinstimmt.useState können sich diese Bedingungen dynamisch ändern.useRef wird an die Eingabekomponente angehängt und ermöglicht es Tasten- und Mausereignissen, die Eingabeaufforderung basierend auf den oben genannten Bedingungen bedingt focus .Field , Input .SearchSearch “.immediately successful word eingeben> einimmediately successful wordSearch “.incomplete word eingeben> einreal word eingeben> einreal wordSearch “.a word with no matches eingeben> eingood word eingeben> einnew word const Field = ( {
label ,
onChange ,
placeHolder ,
helperText ,
loading ,
} ) => {
const theme = useTheme ( ) ;
const trigger = useScrollTrigger ( ) ;
const [ active , setActive ] = useState ( false ) ;
const textInput = useRef ( null ) ;
const metaDispatch = useDispatchTheme ( ) ;
const { meta , root } = metaDispatch ;
const handleSearchButton = ( ) => {
setActive ( true ) ;
setTimeout ( ( ) => {
textInput . current && textInput . current . focus ( ) ;
} , 100 ) ;
} ;
const handleClickAway = ( ) => setActive ( false ) ;
const handleBackDrop = ( ) => setActive ( false ) ;
const onKeyPress = ( ) => setActive ( false ) ;
const match
= textInput . current
? textInput . current . value === root
: false ;
active && trigger ? setActive ( false ) : null ;
useEffect ( ( ) => {
if ( active && match ) {
setTimeout ( ( ) => {
setActive ( false ) ;
} , 2000 ) ;
}
} , [ ] ) ;
return (
< ClickAwayListener
onClickAway = { handleClickAway }
>
< >
< Backdrop
open = { active }
onClick = { handleBackDrop }
/ >
< Fab
size = "small"
color = "primary"
aria-label = "search"
onClick = { handleSearchButton }
variant = { active ? 'extended' : 'round' }
style = { active ? {
backgroundColor :
loading
? theme . palette . warning . main
: ! meta
? theme . palette . error . main
: meta && match
? theme . palette . success . main
: theme . palette . primary . main ,
} : null }
>
< Input
label = { label }
placeHolder = { placeHolder }
helperText = { helperText }
active = { active }
match = { match }
meta = { meta }
loading = { loading }
textInput = { textInput }
onKeyPress = { onKeyPress }
onChange = { onChange }
/ >
< / Fab >
< / >
< / ClickAwayListener >
) ;
} ;
Ein Benutzer möchte den Suchverlauf sehen
useHistory ist ein Kontext-Hook für den Zugriff auf die in HistoryProvider gespeicherten Werte.useReducer kann HistoryProver abgefragte Wörter nach den gemeinsamen Definitionen gruppieren.SelectionEin Benutzer möchte sehen, wie ein Wort in einem Satz verwendet wird
Display beschreiben:Sense verwendet wird, um einen sampleString und optionWord Requisite zu übergeben, die einen Intersection Observer und Mausereignisse aktiviert, um die optionWord Requisite dynamisch zu ändern.{it} {/it} und {lquo} {rquo} eingeschlossen ist. Da es sich um offene und geschlossene Tags handelt, erweisen sich Regex-Ersetzungsfunktionen als zuverlässig bei der konsistenten Bereinigung der Beispielzeichenfolge, wenn eine Definition sie enthält. (Siehe Beispielantwort von Theaurus API)Ein Benutzer möchte ein Tag neben wiederholten Ergebnissen (d. h. bereits gespeicherte Wörter) sehen.
useReducer in HistoryProvider :HistoryProvider gespeicherte Wortobjekte werden mit Eigenschaften gespeichert, die eine Überprüfung durch den Vergleich dieser Eigenschaften mit neuen Wörtern ermöglichen:Counters :History zu reduzieren, zu sortieren und zu gruppierenSaves verwendet, sodass ein Benutzer die „Wiederholungen“, also die gespeicherten Wörter eines Benutzers, anhand der von ihnen gemeinsam genutzten Eigenschaftsdefinitionen anzeigen kann. const [ savedWords , dispatch ] = useReducer ( ( state , action ) => {
switch ( action . type ) {
case 'add' :
const wordIndex = state . findIndex ( ( word ) => word . uuid === action . uuid
|| word . name === action . name
&& word . sense === action . sense ) ;
if ( wordIndex !== - 1 ) {
return state . map ( ( word , i ) => ( {
... word ,
value : word . value + ( wordIndex === i ? 1 : 0 ) ,
} ) ) ;
}
return [
... state ,
{
id : state . length ,
name : action . name ,
value : 1 ,
root : action . root ,
label : action . label ,
uuid : action . uuid ,
sense : action . sense ,
} ,
] ;
case 'remove' :
return state . filter ( ( word ) => word . id !== action . id ) ;
case 'clear' :
return [ ] ;
default :
return state ;
}
} , [ ] ) ;
Ein Benutzer möchte den gespeicherten Suchverlauf löschen
Clear :DeleteForever -Symbol, bei der es sich um eine dispatch Funktion von useReducer von HistoryProvider handelt, die alles aus Context löscht.Delete löschen, das durch eine Material-UI- Chip Komponente dargestellt wird. // clear.button.js
// excerpt
const wordsDispatch = useDispatchHistory ( ) ;
const handleClick = ( event ) => {
wordsDispatch ( {
type : 'clear' ,
} ) ;
} ;
// words.context.js
// excerpt from reducer
// the above handler calls case 'remove'
case 'remove' :
return state . filter ( ( word ) => word . id !== action . id ) ;Neueste Ergebnisse anzeigen
Lighthouse über Vercel wird zum Testen der Leistung verwendet, was bei jedem git push einzigartige Ergebnisse liefert. Lighthouse-Badges wird verwendet, um neue Badges für jede Bereitstellung zu generieren, indem npm i -g lighthouse-badges installiert und die neue Hash-URL in das URL-Array verschoben wird:
lighthouse-badges
-o docs/badges -r
-u https://synonyms.vercel.app/ [... all other urls]
# Output to docs/badges
# Badges will contain the respective
average score(s) of all the urls
supplied, combined
Die Metriken von Lighthouse, nämlich Zugänglichkeit und Leistung, generieren bei jedem Audit spezifische Flags. Bei jedem Push werden Anpassungen vorgenommen, die gezielt auf etwaige Probleme eingehen.
role . Zurück nach oben
create-next-app gebootet und mit Vercel bereitgestellt, was ich mit den folgenden Schritten erreicht habe:commit den Code und push ihn von meiner lokalen IDE über Git und das iTerm-Terminal meines MacBook Pro auf Github.select oben links in der unmittelbaren Eingabeaufforderung auf „Git-Repository importieren“ zu.„Ihr Projekt wurde erfolgreich umgesetzt.“
Zurück nach oben
git clone https://github.com/israelias/synonym-chasercd zum Namen dieses Repos: cd synonym-chasernpm install npm run dev
# or
yarn dev Öffnen Sie Ihren Browser für localhost:3000
info stammen aus dem Collegiate Thesaurus von Merriam-Webster.Zurück nach oben
