Skip to content

Commit d08ae69

Browse files
philipbrembeckphilipbrembeck
committedOct 7, 2023
feat: Rename to FEN Docs
1 parent 47b2731 commit d08ae69

13 files changed

+258
-119
lines changed
 

‎.gitignore

+2-1
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
11
.next
22
node_modules
3-
.DS_Store
3+
.DS_Store
4+
*.icloud

‎README.md

+3-59
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,5 @@
1-
> **Note** <br />
2-
> Due to the lack of contribution, this repo is not updated anymore and will remain on technologies like PHP. <br>
3-
> You're welcome to contribute, change pages and update information. If you're willing to maintain this repo in the future, just contact us.<br>
4-
5-
> **Warning** <br />
6-
> The core team of FAQ is not participating in this project anymore.<br>
7-
> Only security related updates will be integrated.<br>
8-
> PRs with new information on MetaTags will also be approved and merged.
9-
101
<p align="center">
11-
<h1 align="center">FrontEndNetWork FAQ</h1>
2+
<h1 align="center">FEN MetaTag Documentation</h1>
123
<p align="center">Documenting MetaExtensions for the WHATWG Community</p>
134
</p>
145
<p align="center">
@@ -32,22 +23,14 @@ In our documentation anyone can find public **docs for the W3 WHATWG community**
3223

3324
## Contribute
3425

35-
If you want to contribute, fork the Git-Repro ([frontendnetwork/faq](https://github.com/frontendnetwork/faq)) and create a new document under `source/` named `<title of your page>.md`.
26+
If you want to contribute, fork the Git-Repro ([frontendnetwork/faq](https://github.com/frontendnetwork/faq)) and create a new document under `pages/metatags` named `<title of your page>.md`.
3627

37-
You can also change existing doc-pages. Just click on "Edit on GitHub" on the corresponding page.
28+
You can also change existing doc-pages. Just click on "Edit" on the corresponding page.
3829
Then just open a pull request and we'll review your page and add it.
3930

4031
### How to contribute
4132

4233
Please write your changes in [Markdown](https://www.markdownguide.org).
43-
You can use the following components of [Bootstrap v5.0](https://getbootstrap.com):
44-
45-
- [`Alerts`](https://getbootstrap.com/docs/5.0/components/alerts/)
46-
- [`Badges`](https://getbootstrap.com/docs/5.1/components/badge/)
47-
- [`Buttons`](https://getbootstrap.com/docs/5.0/components/buttons/)
48-
- [`Cards`](https://getbootstrap.com/docs/5.0/components/card/)
49-
50-
You can also use all free icons from [FontAwesome v5.0](https://fontawesome.com).
5134

5235
**Anyone can:**
5336

@@ -57,7 +40,6 @@ You can also use all free icons from [FontAwesome v5.0](https://fontawesome.com)
5740

5841
> Please don't open issues but instead directly make a Pull Request with your edits/new creations.
5942
60-
6143
### Add extensions to the WHATWG Wiki
6244

6345
<img width="100px" src="img/logo_alt.svg" align="center" alt="FrontendNetwork FAQ Logo">
@@ -69,47 +51,9 @@ You can link to https://faq.jokenetwork.de/[your-metaextension] (**Please note t
6951

7052
Just send an e-mail to [www-validator@w3.org](mailto:www-validator@w3.org), informing the W3 about the meta-tag you added to the WHATWG Wiki, their purpose, and state that you added them to the WHATWG Wiki.
7153

72-
### Installing and file Structure
73-
#### Filestructure
74-
75-
index.php
76-
Parsedown.php/
77-
README.md
78-
├── source/
79-
│ └── [sourcfiles].md
80-
└── css
81-
#### Installing
82-
Since this repo mainly exists to change and add definitions to the WHATWG MetaExtensions documentation we don't reccomend installing it on your own server.
83-
If you want to do so anyways or create a mirror of the documentation (which is up and running since 2015 without any major issues), you can use the following guide to install it. Please be aware, that you need to figure out some things yourself and this documentation is not complete.
84-
85-
Minimum requirements:
86-
* Apache or Nginx webserver
87-
* PHP >=7.2 installed
88-
* Composer installed
89-
* npm installed
90-
* Github API Personal access token (Key & Secret)
91-
92-
Download the latest [release from here](https://github.com/frontendnetwork/faq/releases).
93-
94-
Run in the repos directory:
95-
````bash
96-
composer install
97-
npm install
98-
````
99-
10054
## Security
10155
All security issues and vulnerabilites regarding this repo which are fixed or in the process of being fixed are listed on the [philip.media Responsible vulnerability disclosure acknowledgements](https://philip-media.github.io/security-policy/Acknowledgments.html).
10256

103-
## Credits
104-
105-
This repo uses:
106-
107-
- [Bootstrap v3.0.3](https://getbootstrap.com) (C) by [Twitter, Inc](https://twitter.com). & [The Bootstrap Authors](https://github.com/twbs/bootstrap/graphs/contributors) (Published under MIT license)
108-
- [Parsedown](https://github.com/erusev/parsedown) (C) by [Emanuil Rusev](https://erusev.com) (Published under MIT license)
109-
- [alpine.js](https://alpinejs.dev) (C) by [Caleb Porzio](https://github.com/calebporzio) (Published unter MIT license)
110-
- [Prism.js](https://prismjs.com) (C) by Lea Verou (Published under MIT license)
111-
- [Font Awesome v5.15.3](https://github.com/FortAwesome/Font-Awesome) (C) by the [FontAwesome-Team](https://github.com/FortAwesome) (Published under MIT license, CC BY 4.0 License and SIL OFL 1.1 License)
112-
11357
## License
11458

11559
All text and code in this repository is licensed under [CC-BY 4.0](https://creativecommons.org/licenses/by/4.0/) besides the aboved named licenses for dependencies.

‎components/Search.tsx

+27
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
import classes from "./searchResult.module.scss";
2+
3+
interface Props {
4+
title: string;
5+
url: string;
6+
chevron: boolean;
7+
description: string;
8+
}
9+
10+
export default function Search({ title, url, chevron, description }: Props) {
11+
return (
12+
<div className={classes.searchBox}>
13+
<div className={classes.searchBox_top}>
14+
<span className={classes.searchBox_top_title}>
15+
{title}
16+
</span>
17+
<div className={classes.link}>
18+
<span className={classes.url}>{url}</span>
19+
{chevron && <span className={classes.chevron}></span>}
20+
</div>
21+
<span className={classes.description}>
22+
{description}
23+
</span>
24+
</div>
25+
</div>
26+
);
27+
}

‎components/searchResult.module.scss

+165
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,165 @@
1+
.searchBox {
2+
/* Positioning */
3+
/* (none) */
4+
5+
/* Box Model */
6+
width: 100%;
7+
margin-top: 0.25rem;
8+
padding: 1rem;
9+
border: 0.0625rem solid #e5e7eb;
10+
border-radius: 0.75rem;
11+
12+
/* Typographic */
13+
font-family: Arial, sans-serif;
14+
15+
/* Visual */
16+
background: #fff;
17+
display: block;
18+
19+
/* Misc */
20+
-webkit-font-smoothing: subpixel-antialiased;
21+
22+
&:is(html[class~="dark"] .searchBox) {
23+
background: #202124;
24+
border: none;
25+
}
26+
27+
&_top {
28+
/* Positioning */
29+
/* (none) */
30+
31+
/* Box Model */
32+
width: 37.5rem;
33+
margin: 0;
34+
padding: 0;
35+
36+
/* Typographic */
37+
/* (none) */
38+
39+
/* Visual */
40+
box-shadow: none;
41+
42+
/* Misc */
43+
/* (none) */
44+
45+
&_title {
46+
/* Positioning */
47+
/* (none) */
48+
49+
/* Box Model */
50+
/* (none) */
51+
52+
/* Typographic */
53+
font-size: 1.125rem;
54+
line-height: 1.2;
55+
letter-spacing: normal;
56+
white-space: nowrap;
57+
58+
/* Visual */
59+
color: #1a0dab;
60+
display: block;
61+
overflow: hidden;
62+
text-overflow: ellipsis;
63+
64+
/* Misc */
65+
cursor: pointer;
66+
67+
&:is(html[class~="dark"] .searchBox_top_title) {
68+
color: #8ab4f8;
69+
}
70+
71+
&:hover {
72+
text-decoration: underline;
73+
}
74+
}
75+
}
76+
}
77+
78+
.link {
79+
/* Positioning */
80+
/* (none) */
81+
82+
/* Box Model */
83+
/* (none) */
84+
85+
/* Typographic */
86+
/* (none) */
87+
88+
/* Visual */
89+
display: block;
90+
91+
/* Misc */
92+
white-space: nowrap;
93+
}
94+
95+
.url {
96+
/* Positioning */
97+
position: relative;
98+
top: -0.125rem;
99+
100+
/* Box Model */
101+
/* (none) */
102+
103+
/* Typographic */
104+
font-size: 0.875rem;
105+
line-height: 1rem;
106+
letter-spacing: normal;
107+
108+
/* Visual */
109+
color: #006621;
110+
111+
/* Misc */
112+
/* (none) */
113+
114+
&:is(html[class~="dark"] .url) {
115+
color: #bdc1c6;
116+
}
117+
}
118+
119+
.chevron {
120+
/* Positioning */
121+
position: relative;
122+
top: 0.5625rem;
123+
124+
/* Box Model */
125+
margin-left: 0.1875rem;
126+
border-width: 0.3125rem 0.25rem 0;
127+
border-style: solid;
128+
129+
/* Typographic */
130+
/* (none) */
131+
132+
/* Visual */
133+
vertical-align: middle;
134+
border-color: #006621 transparent;
135+
136+
/* Misc */
137+
cursor: pointer;
138+
139+
&:is(html[class~="dark"] .chevron) {
140+
border-color: #bdc1c6 transparent;
141+
}
142+
}
143+
144+
.description {
145+
/* Positioning */
146+
/* (none) */
147+
148+
/* Box Model */
149+
/* (none) */
150+
151+
/* Typographic */
152+
font-size: 0.8125rem;
153+
line-height: 1;
154+
word-wrap: break-word;
155+
156+
/* Visual */
157+
color: #545454;
158+
159+
/* Misc */
160+
/* (none) */
161+
162+
&:is(html[class~="dark"] .description) {
163+
color: #bdc1c6;
164+
}
165+
}

‎package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@
2323
"nextra-theme-docs": "latest",
2424
"react": "^18.2.0",
2525
"react-dom": "^18.2.0",
26-
"sass": "^1.68.0"
26+
"sass": "^1.69.0"
2727
},
2828
"devDependencies": {
2929
"@types/node": "18.11.10",

‎pages/MetaExtensions.md

+2-2
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ The `<meta>` tag defines metadata about a HTML document. Metadata is data (infor
44

55
`<meta>`-tags are always placed in the `<head>`-section of a HTML document and are used to specify metadata about a page, such as the charset (most likely UTF-8), a page description or the pages author.
66

7-
Metadata can also be used to verify page-ownership (prominently used by Google as [`google-site-verification`](metatags/google-site-verification)), or to en- or disable certain functions of a browser.
7+
Metadata can also be used to verify page-ownership (prominently used by Google as [`google-site-verification`](metatags/Google/google-site-verification)), or to en- or disable certain functions of a browser.
88

99
Metadata is not displayed on the page itself, and is therefore not intended for the end-user, but is **machine parsable**.
1010

@@ -28,7 +28,7 @@ That means that
2828
<meta name="robots" content="noindex,nofollow">
2929
<meta name="revisit" content="10 days">
3030
<meta http-equiv="refresh" content="10">
31-
<meta http-equiv="refresh" content="5;url=https://faq.jokenetwork.de">
31+
<meta http-equiv="refresh" content="5;url=https://faq.frontendnet.work">
3232

3333
````
3434

‎pages/README.md

+12-32
Original file line numberDiff line numberDiff line change
@@ -1,69 +1,49 @@
11
<p align="center">
22
<img width="100px" src="img/logo.svg" align="center" alt="JokeNetwork FAQ Logo">
3-
<h1 align="center">FrontendNetwork FAQ</h1>
4-
<p align="center">Documenting MetaExtensions for the WHATWG Community</p>
3+
<h1 align="center">FEN MetaTag Documentation</h1>
54
</p>
65

7-
Welcome to FrontendNetworks Documentation page 🥳
6+
Welcome to FrontEndNetWorks Documentation page 🥳
87

9-
Here you can find and contribute to the source-code of our documentation-page, which is publicly available at <https://faq.frontendnet.work>.
8+
Here you can find and contribute to the source-code of our documentation-page, which is publicly available at <https://faq.jokenetwork.de>.
109

1110
## What is this about?
1211

13-
In our documentation anyone can find public ~~docs for our (deprecated) services (which aren't important for that matter) and also~~ **docs for the W3 WHATWG community** ([the MetaExtensions part of WhatWG](https://wiki.whatwg.org/wiki/MetaExtensions)).
14-
15-
The "faq" page with questions answered, that weren't asked frequently, was created in January 2014, when [@philipbrembeck](https://github.com/philipbrembeck) was in need of creating a new HTML MetaExtension, which would not be marked as an error in the W3 Validator.
12+
In our documentation anyone can find public **docs for the W3 WHATWG community** ([the MetaExtensions part of WhatWG](https://wiki.whatwg.org/wiki/MetaExtensions)).
1613

1714
## Contribute
1815

19-
If you want to contribute, fork the Git-Repro ([frontendnetwork/faq](https://github.com/frontendnetwork/faq)) and create a new document under `pages/metatags/` named `<title of your page>.md`.
16+
If you want to contribute, fork the Git-Repro ([frontendnetwork/faq](https://github.com/frontendnetwork/faq)) and create a new document under `pages/metatags` named `<title of your page>.md`.
2017

21-
You can also change existing doc-pages. Just click on "Edit on GitHub" on the corresponding page.
18+
You can also change existing doc-pages. Just click on "Edit" on the corresponding page.
2219
Then just open a pull request and we'll review your page and add it.
2320

2421
### How to contribute
2522

26-
Please write your changes in [Markdown](https://www.markdownguide.org).
23+
Please write your changes in [Markdown](https://www.markdownguide.org).
2724

2825
**Anyone can:**
2926

30-
- Create a new page (pages/metatags/ → new file → .md file)
27+
- Create a new page (source/ → new file → .md file)
3128
- Edit files
3229

33-
3430
> Please don't open issues but instead directly make a Pull Request with your edits/new creations.
3531
36-
3732
### Add extensions to the WHATWG Wiki
3833

3934
<img width="100px" src="img/logo_alt.svg" align="center" alt="FrontendNetwork FAQ Logo">
4035

4136
If you want to add your meta-extensions to the WhatWG-Wiki, please register on [WHATWG Wiki](https://wiki.whatwg.org/). To request an account, ask an autoconfirmed user on [Chat](https://whatwg.org/chat). Then go to [Registry `<meta name>`](https://wiki.whatwg.org/wiki/MetaExtensions), edit the page and add your meta tag (in alphabetical order!).
4237
You can link to https://faq.jokenetwork.de/[your-metaextension] (**Please note that file-names are case-sensitive!**) for the documentation of your meta-tag (Only if you created them before).
4338

44-
### Add extension to W3 Validator
39+
### Add extension to W3 Validator
4540

4641
Just send an e-mail to [www-validator@w3.org](mailto:www-validator@w3.org), informing the W3 about the meta-tag you added to the WHATWG Wiki, their purpose, and state that you added them to the WHATWG Wiki.
4742

48-
### File Structure
49-
50-
index.php
51-
Parsedown.php/
52-
README.md
53-
├── source/
54-
│ └── [sourcefiles].md
55-
└── css
56-
57-
## Credits
58-
59-
This repo uses:
43+
## Security
6044

61-
- [Bootstrap v3.0.3](https://getbootstrap.com)
62-
- [Parsedown](https://github.com/erusev/parsedown) by [Emanuil Rusev](https://erusev.com)
63-
- [alpine.js](https://alpinejs.dev)
64-
- [Prism.js](https://prismjs.com)
65-
- [Font Awesome v5.15.3](https://github.com/FortAwesome/Font-Awesome)
45+
All security issues and vulnerabilites regarding this repo which are fixed or in the process of being fixed are listed on the [philip.media Responsible vulnerability disclosure acknowledgements](https://philip-media.github.io/security-policy/Acknowledgments.html).
6646

6747
## License
6848

69-
All text and code in this repository is licensed under [CC-BY 4.0](https://creativecommons.org/licenses/by/4.0/).
49+
All text and code in this repository is licensed under [CC-BY 4.0](https://creativecommons.org/licenses/by/4.0/) besides the aboved named licenses for dependencies.

‎pages/index.md

+15-3
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,20 @@
1-
# Welcome 🎉
1+
# FEN MetaTag Documentation
22

3-
In our documentation anyone can find public docs **docs for the WHATWG community** ([the MetaExtensions part of WHATWG](https://wiki.whatwg.org/wiki/MetaExtensions)).
3+
Welcome to the FEN (FrontendNetwork) MetaTag Documentation 🎉 — a continually evolving repository of all Meta-Tags and Meta-Extensions in the realm of the World Wide Web and HTML. This invaluable resource aims to serve as a cornerstone for web developers, SEO professionals, and digital enthusiasts who strive to understand or implement meta-tags in their projects.
44

5-
Those include all widely used Meta-Tags and Meta Extentions on the Web.
5+
## What are Meta-Tags and why are they important?
6+
7+
Meta-tags are snippets of text that describe a webpage's content but are not displayed on the page itself. Instead, they are embedded within the page's HTML code. While not directly visible to users, they play a significant role in how search engines index your webpages and how your content appears in search engine results, among other things. Meta-tags can include information such as the [author](metatags/Miscellaneous/author) of the webpage, [how frequently the webpage should be updated](metatags/SEO/revisit-after), what the [webpage is about](metatags/SEO/description), and which [keywords](metatags/Miscellaneous/keywords) represent the webpage's content.
8+
9+
## From Jokenetwork FAQ to FEN MetaTag Documentation
10+
11+
Formerly known as the Jokenetwork FAQ, this compilation has come a long way. We initially aimed to contribute to the [WHATWG (Web Hypertext Application Technology Working Group)](WHATWG) Wiki, a community specializing in developing web standards. Our contributions have been used in the W3 HTML Validator, a tool that checks web documents in formats like HTML and XHTML for conformance to W3C recommendations and other standards. The evolution to FEN MetaTag Documentation signifies a broadening of scope and commitment to providing a comprehensive guide to meta-tags.
12+
13+
## Your Involved Role
14+
15+
The world of the internet is ever-changing, and so is the importance and functionality of meta-tags. As this is an ever-growing collection, we invite you to be a part of this exciting journey. If you have insights, updates, or would like to share knowledge about new meta-tags and extensions, feel free to contribute via GitHub.
16+
17+
In summary, the FEN MetaTag Documentation is not just a guide but a dynamic resource meant to adapt and evolve with the rapidly changing digital landscape. We hope you find it beneficial for your projects and professional endeavors.
618

719
## General information
820

‎pages/metatags/Google/googlebot.md ‎pages/metatags/Google/googlebot.mdx

+6-2
Original file line numberDiff line numberDiff line change
@@ -28,11 +28,15 @@ Google announced in 2017 that this tag is no longer supported, which is why it's
2828
````
2929

3030
## Results
31+
import Search from '../../../components/Search';
32+
3133
* `nosnippet`:
32-
![DuckDuckGo search result](/img/nosnippet.svg)
34+
35+
<Search title="FEN MetaTag Documentation" url="https://faq.frontendnet.work" chevron description="No description available" />
3336

3437
* `noarchive`:
35-
![DuckDuckGo search result](/img/noarchive.svg)
38+
39+
<Search title="FEN MetaTag Documentation" url="https://faq.frontendnet.work" description="FEN MetaTag Documentation for HTML and popular Meta Tags" />
3640

3741
Read more at [Google Search Central](https://developers.google.com/search/docs/advanced/crawling/special-tags).
3842

‎pages/metatags/SEO/description.md

-15
This file was deleted.

‎pages/metatags/SEO/description.mdx

+17
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
## MetaExtension description
2+
3+
Is used to to summarize the content of a webpage. This summarization is usually shown below the pages `<title>`-tag in search engines.
4+
5+
## Usage
6+
7+
````html
8+
<meta name="description" content="FEN Docs for WHATWG MetaExtensions">
9+
````
10+
11+
`content` should be &le;165 characters, since search engines (e.g. Google) are typically showing only this amount of characters.
12+
13+
## Result
14+
15+
import Search from '../../../components/Search';
16+
17+
<Search title="FEN MetaTag Documentation" url="https://faq.frontendnet.work" chevron description="FEN Docs for WHATWG MetaExtensions" />

‎pages/metatags/SEO/robots.md ‎pages/metatags/SEO/robots.mdx

+6-2
Original file line numberDiff line numberDiff line change
@@ -36,11 +36,15 @@ We recommend using a [robots.txt-file](https://developers.google.com/search/docs
3636
````
3737

3838
## Results
39+
import Search from '../../../components/Search';
40+
3941
* `nosnippet`:
40-
![DuckDuckGo search result](/img/nosnippet.svg)
42+
43+
<Search title="FEN MetaTag Documentation" url="https://faq.frontendnet.work" chevron description="No description available" />
4144

4245
* `noarchive` & `notranslate`:
43-
![DuckDuckGo search result](/img/noarchive.svg)
46+
47+
<Search title="FEN MetaTag Documentation" url="https://faq.frontendnet.work" description="FEN MetaTag Documentation for HTML and popular Meta Tags" />
4448

4549
Read more about the MetaExtension `robots` at [Google Search Central](https://developers.google.com/search/docs/advanced/robots/robots_meta_tag#directives).
4650
Read more about `robots.txt` at [Google Developers Docs](https://developers.google.com/search/docs/advanced/robots/intro).

‎theme.config.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { DocsThemeConfig } from 'nextra-theme-docs'
33
import { useRouter } from 'next/router'
44

55
const config: DocsThemeConfig = {
6-
logo: <span>FrontendNetwork FAQ</span>,
6+
logo: <span>FEN MetaTag Documentation</span>,
77
project: {
88
link: 'https://github.com/frontendnetwork/faq',
99
},
@@ -15,7 +15,7 @@ const config: DocsThemeConfig = {
1515
const { asPath } = useRouter();
1616
if (asPath !== '/') {
1717
return {
18-
titleTemplate: '%s – FAQ'
18+
titleTemplate: '%s – FEN MetaTag Documentation'
1919
};
2020
} else {
2121
return {

0 commit comments

Comments
 (0)
Please sign in to comment.