Skip to content

Commit 6c3b10a

Browse files
justinezahirijustinezahiri
authored
added title meta tag (#266)
* added title meta tag * changed title * requested changes on titles * review, removed quotes for content in meta tag * added link to edit page in list
1 parent ad67fcd commit 6c3b10a

File tree

3 files changed

+87
-64
lines changed

3 files changed

+87
-64
lines changed

‎templates/next/components/foo/Form.tsx

Lines changed: 69 additions & 62 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import { FunctionComponent, useState } from "react";
22
import Link from "next/link";
33
import { useRouter } from "next/router";
4+
import Head from "next/head";
45
import { Formik } from "formik";
56
import { fetch } from "../../utils/dataAccess";
67
import { {{{ucf}}} } from '../../types/{{{ucf}}}';
@@ -27,15 +28,21 @@ export const Form: FunctionComponent<Props> = ({ {{{lc}}} }) => {
2728

2829
return (
2930
<div>
30-
{ {{{lc}}} ? <h1>Edit {{{ucf}}} { {{{lc}}}['@id'] }</h1> : <h1>Create {{{ucf}}}</h1>}
31-
<Formik
32-
initialValues={ {{~lc}} ? {...{{lc~}} } : new {{{ucf}}}()}
33-
validate={(values) => {
34-
const errors = {};
35-
// add your validation logic here
31+
<div>
32+
<Head>
33+
<title>{ {{{lc}}} ? `Edit {{{ucf}}} ${ {{{~lc}}}['@id']}` : `Create {{{ucf}}}` }</title>
34+
<meta property="og:title" content="{{{lc}}} ? `Edit {{{ucf}}} ${ {{{~lc}}}['@id']}` : `Create {{{ucf}}}`" />
35+
</Head>
36+
</div>
37+
<h1>{{{lc}}} ? `Edit {{{ucf}}} ${ {{{~lc}}}['@id']}` : `Create {{{ucf}}}`</h1>
38+
<Formik
39+
initialValues={ {{~lc}} ? {...{{lc~}} } : new {{{ucf}}}()}
40+
validate={(values) => {
41+
const errors = {};
42+
// add your validation logic here
3643
return errors;
37-
}}
38-
onSubmit={async (values, { setSubmitting, setStatus }) => {
44+
}}
45+
onSubmit={async (values, { setSubmitting, setStatus }) => {
3946
const isCreation = !values["@id"];
4047
try {
4148
await fetch(isCreation ? "/{{{name}}}" : values["@id"], {
@@ -53,24 +60,24 @@ export const Form: FunctionComponent<Props> = ({ {{{lc}}} }) => {
5360
msg: `Error when ${isCreation ? 'creating': 'updating'} the resource.`,
5461
});
5562
}
56-
setSubmitting(false);
57-
}}
58-
>
59-
{({
60-
values,
63+
setSubmitting(false);
64+
}}
65+
>
66+
{({
67+
values,
6168
status,
6269
errors,
6370
touched,
64-
handleChange,
65-
handleBlur,
66-
handleSubmit,
67-
isSubmitting,
68-
}) => (
69-
<form onSubmit={handleSubmit}>
71+
handleChange,
72+
handleBlur,
73+
handleSubmit,
74+
isSubmitting,
75+
}) => (
76+
<form onSubmit={handleSubmit}>
7077
{{#each formFields}}
71-
<div className="form-group">
72-
<label className="form-control-label" htmlFor="{{lc}}_{{name}}">{{name}}</label>
73-
<input
78+
<div className="form-group">
79+
<label className="form-control-label" htmlFor="{{lc}}_{{name}}">{{name}}</label>
80+
<input
7481
name="{{name}}"
7582
id="{{lc}}_{{name}}"
7683
value={ values.{{name}} ?? "" }
@@ -80,48 +87,48 @@ export const Form: FunctionComponent<Props> = ({ {{{lc}}} }) => {
8087
{{#if required}}required={true}{{/if}}
8188
className={`form-control${errors.{{name}} && touched.{{name}} ? ' is-invalid' : ''}`}
8289
aria-invalid={errors.{{name}} && touched.{{name~}} }
83-
onChange={handleChange}
84-
onBlur={handleBlur}
85-
/>
86-
</div>
87-
{ errors.{{name}} && touched.{{name}} && <div className="invalid-feedback">{ errors.{{name}} }</div> }
90+
onChange={handleChange}
91+
onBlur={handleBlur}
92+
/>
93+
</div>
94+
{ errors.{{name}} && touched.{{name}} && <div className="invalid-feedback">{ errors.{{name}} }</div> }
8895
{{/each}}
8996

90-
{status && status.msg && (
91-
<div
92-
className={`alert ${
93-
status.isValid ? "alert-success" : "alert-danger"
94-
}`}
95-
role="alert"
96-
>
97-
{status.msg}
98-
</div>
99-
)}
97+
{status && status.msg && (
98+
<div
99+
className={`alert ${
100+
status.isValid ? "alert-success" : "alert-danger"
101+
}`}
102+
role="alert"
103+
>
104+
{status.msg}
105+
</div>
106+
)}
100107

101-
{error && (
102-
<div className="alert alert-danger" role="alert">
103-
{error}
104-
</div>
105-
)}
108+
{error && (
109+
<div className="alert alert-danger" role="alert">
110+
{error}
111+
</div>
112+
)}
106113

107-
<button
108-
type="submit"
109-
className="btn btn-success"
110-
disabled={isSubmitting}
111-
>
112-
Submit
113-
</button>
114-
</form>
115-
)}
116-
</Formik>
117-
<Link href="/{{{name}}}">
118-
<a className="btn btn-primary">Back to list</a>
119-
</Link>
120-
{ {{{lc}}} && (
121-
<button className="btn btn-danger" onClick={handleDelete}>
122-
<a>Delete</a>
123-
</button>
124-
)}
125-
</div>
126-
);
114+
<button
115+
type="submit"
116+
className="btn btn-success"
117+
disabled={isSubmitting}
118+
>
119+
Submit
120+
</button>
121+
</form>
122+
)}
123+
</Formik>
124+
<Link href="/{{{name}}}">
125+
<a className="btn btn-primary">Back to list</a>
126+
</Link>
127+
{ {{{lc}}} && (
128+
<button className="btn btn-danger" onClick={handleDelete}>
129+
<a>Delete</a>
130+
</button>
131+
)}
132+
</div>
133+
);
127134
};

‎templates/next/components/foo/List.tsx

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import { FunctionComponent } from "react";
22
import Link from "next/link";
3+
import Head from "next/head";
34
import ReferenceLinks from "../../components/common/ReferenceLinks";
45
import { {{{ucf}}} } from '../../types/{{{ucf}}}';
56

@@ -9,6 +10,12 @@ interface Props {
910

1011
export const List: FunctionComponent<Props> = ({ {{{name}}} }) => (
1112
<div>
13+
<div>
14+
<Head>
15+
<title>{{{ucf}}} List</title>
16+
<meta property="og:title" content="{{{ucf}}} List" key="title" />
17+
</Head>
18+
</div>
1219
<h1>{{{ucf}}} List</h1>
1320
<Link href="/{{{name}}}/create">
1421
<a className="btn btn-primary">Create</a>
@@ -31,6 +38,8 @@ export const List: FunctionComponent<Props> = ({ {{{name}}} }) => (
3138
<td>{{#if reference}}<ReferenceLinks items={ {{{../lc}}}['{{{name}}}'] } type="{{{reference.title}}}" />{{else}}{ {{{../lc}}}['{{{name}}}'] }{{/if}}</td>
3239
{{/each}}
3340
<td><ReferenceLinks items={ {{{lc}}}['@id'] } type="{{{lc}}}" useIcon={true} /></td>
41+
<br></br>
42+
<Link href={`${ {{~lc}}["@id"]}/edit`}>Edit</Link>
3443
</tr>
3544
))}
3645
</tbody>

‎templates/next/components/foo/Show.tsx

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import { FunctionComponent, useState } from 'react';
22
import Link from 'next/link';
3+
import Head from "next/head";
34
import { useRouter } from "next/router";
45
import { fetch } from "../../utils/dataAccess";
56
import { ReferenceLinks } from '../common/ReferenceLinks';
@@ -26,8 +27,14 @@ export const Show: FunctionComponent<Props> = ({ {{{lc}}} }) => {
2627
};
2728

2829
return (
29-
<div>
30-
<h1>Show { {{{lc}}}['@id'] }</h1>
30+
<h1>
31+
<div>
32+
<Head>
33+
<title>{`Show {{{ucf}}} ${ {{{~lc}}}['@id']}`}</title>
34+
<meta property="og:title" content=`Show {{{ucf}}} ${ {{{~lc}}}['@id']}` key="title" />
35+
</Head>
36+
</div>
37+
<h1>{`Show {{{ucf}}} ${ {{{~lc}}}['@id']}`}</h1>
3138
<table className="table table-responsive table-striped table-hover">
3239
<thead>
3340
<tr>

0 commit comments

Comments
 (0)