2025-01-24T01:44:03
This commit is contained in:
59
doc/etc/Atom.md
Normal file
59
doc/etc/Atom.md
Normal file
@@ -0,0 +1,59 @@
|
||||
# Atom
|
||||
|
||||
```xml
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<feed xmlns="http://www.w3.org/2005/Atom">
|
||||
<title>Example Feed</title>
|
||||
<link href="http://example.org/"/>
|
||||
<updated>2003-12-13T18:30:02Z</updated>
|
||||
<author>
|
||||
<name>John Doe</name>
|
||||
</author>
|
||||
<id>urn:uuid:60a76c80-d399-11d9-b93C-0003939e0af6</id>
|
||||
<entry>
|
||||
<title>Atom-Powered Robots Run Amok</title>
|
||||
<link href="http://example.org/2003/12/13/atom03"/>
|
||||
<id>urn:uuid:1225c695-cfb8-4ebb-aaaa-80da344efa6a</id>
|
||||
<updated>2003-12-13T18:30:02Z</updated>
|
||||
<summary>Some text.</summary>
|
||||
</entry>
|
||||
</feed>
|
||||
```
|
||||
|
||||
- feed
|
||||
- id
|
||||
- title
|
||||
- updated
|
||||
- author
|
||||
- link
|
||||
- category
|
||||
- contributor
|
||||
- name
|
||||
- url
|
||||
- email
|
||||
- generator
|
||||
- icon
|
||||
- logo
|
||||
- rights
|
||||
- subtitle
|
||||
- entry
|
||||
- id
|
||||
- title
|
||||
- updated
|
||||
- author
|
||||
- name
|
||||
- url
|
||||
- email
|
||||
- content
|
||||
- link
|
||||
- summary
|
||||
- category
|
||||
- contributor
|
||||
- name
|
||||
- url
|
||||
- email
|
||||
- published
|
||||
- rights
|
||||
- source
|
||||
|
||||
https://validator.w3.org/feed/docs/atom.html
|
||||
335
doc/etc/Composing-Email.md
Normal file
335
doc/etc/Composing-Email.md
Normal file
@@ -0,0 +1,335 @@
|
||||
# HTML Email Development Cheatsheet
|
||||
|
||||
## Sources:
|
||||
|
||||
- https://frontendmasters.com/courses/html-email-v2/background-images/
|
||||
- https://github.com/rodriguezcommaj/frontendmasters
|
||||
- https://codepen.io/collection/21b7ddd5c58aafc450c35c46e7cba9b5?grid_type=list
|
||||
|
||||
## Table of Contents
|
||||
|
||||
- [Basics](#basics)
|
||||
- - [Basic HTML Email](#basic-html-email)
|
||||
- - [CSS Resets](#css-resets)
|
||||
- - [Email friendly HTML](#email-friendly-html)
|
||||
- - [Email friendly CSS](#email-friendly-css)
|
||||
- [Links & Buttons](#links-&-buttons)
|
||||
- [Images](#images)
|
||||
- - [Responsive Images](#responsive-images)
|
||||
- - [Background Images](#background-images)
|
||||
- [Accessibility](#accessibility)
|
||||
- [Layouts](#layouts)
|
||||
- [Mobile Emails](#mobile-emails)
|
||||
- [Interactivity](#interactivity)
|
||||
|
||||
## Basics
|
||||
|
||||
- Marketing emails should have unsubscribe links
|
||||
- Use email testing tools like [email on acid](https://www.emailonacid.com/) or [litmus](https://www.litmus.com/extension/)
|
||||
- Use [Putsmail](https://putsmail.com) to enter html and it will send it out as an email
|
||||
- Use [Can I Email](https://caniemail.com) or [Campaign Monitor](https://campaignmonitor.com) or [Fresh Inbox](https://freshinbox.com) to see what's supported in which email clients. just like `caniuse.com`.
|
||||
- You can use tools to help you build emails like `Litmus builder`, `mjml.io`, `Inky` (from foundation.zurb), `Maizzle` to help you.
|
||||
- Support channels: `email.geeks.chat`, `litmus.com/community`, `thebetter.email`
|
||||
|
||||
### Basic HTML Email
|
||||
|
||||
The basic HTML for Emails looks pretty much like the basic HTML for a website
|
||||
|
||||
```HTML
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<title>Document</title>
|
||||
<style type="text/css">
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body id="body" style="margin: 0 !important; padding: 0 !important;">
|
||||
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
- `lang` make sure to pass the proper lang for screen readers to know in which language tho read the text
|
||||
- `body style=` we want to reset the margins and paddings to make sure that the email client does not add something weird to our emails
|
||||
|
||||
### CSS Resets
|
||||
|
||||
- Email clients add CSS to parts of the email on their own. I.e. highlighting times, phones, dates etc (to add to the calendar or call)
|
||||
- We want to keep the behavior but improve it's styling
|
||||
|
||||
```
|
||||
/* CLIENT-SPECIFIC STYLES */
|
||||
body, table, td, a { -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
|
||||
table, td { mso-table-lspace: 0pt; mso-table-rspace: 0pt; }
|
||||
img { -ms-interpolation-mode: bicubic; }
|
||||
|
||||
/* RESET STYLES */
|
||||
img { border: 0; height: auto; line-height: 100%; outline: none; text-decoration: none; }
|
||||
table { border-collapse: collapse !important; }
|
||||
body { height: 100% !important; margin: 0 !important; padding: 0 !important; width: 100% !important; }
|
||||
|
||||
/* iOS BLUE LINKS */
|
||||
a[x-apple-data-detectors] {
|
||||
color: inherit !important;
|
||||
text-decoration: none !important;
|
||||
font-size: inherit !important;
|
||||
font-family: inherit !important;
|
||||
font-weight: inherit !important;
|
||||
line-height: inherit !important;
|
||||
}
|
||||
|
||||
/* GMAIL BLUE LINKS */
|
||||
u + #body a {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
font-size: inherit;
|
||||
font-family: inherit;
|
||||
font-weight: inherit;
|
||||
line-height: inherit;
|
||||
}
|
||||
|
||||
/* SAMSUNG MAIL BLUE LINKS */
|
||||
#MessageViewBody a {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
font-size: inherit;
|
||||
font-family: inherit;
|
||||
font-weight: inherit;
|
||||
line-height: inherit;
|
||||
}
|
||||
```
|
||||
|
||||
Taken from [Rodrigues Commajs example](https://github.com/rodriguezcommaj/frontendmasters/blob/master/Code%20Examples/Background-Image.html)
|
||||
|
||||
- Text size 100%: to make sure that they don't adjust the font-size settings (i.e. ios automatically bumps up small font-sizes to minimum 14px)
|
||||
- mso-table: makes sure that there is no spacing around tables
|
||||
- interpolation-mode: improves quality of imagery
|
||||
- style resets: make sure the doc. renders as intended
|
||||
- Link overrides: to make sure that the links that are automatically added by the email client don't get custom styling
|
||||
|
||||
### Email friendly HTML
|
||||
|
||||
- Use these for most things: `div`, `span`, `h1`-`h6`, `p`, `strong`, `em`, `img` (simple html tags)
|
||||
- Most structuring is done with `table`s
|
||||
- All URLs should be absolute URIs that also contain the protocol, not relative. So `https://google.com/image.jpg` instead of `/image.jpg` or `google.com/image.jpg`.
|
||||
- `<center></center>` is completely deprecated but can be used to centering parts in outlook.
|
||||
|
||||
### Email friendly CSS
|
||||
|
||||
- Don’t use Linked Stylesheets. A lot of email clients will remove those. Use embedded styles or even better inline styles.
|
||||
- For text: `color`, `font-family`, `font-size`, `font-style`, `font-weight`, `line-height`, `text-align`.
|
||||
- For block-level: `margin`, `padding`, `width`, `max-width` (might not always work), `border`.
|
||||
- Make sure to search online to see what CSS properties are supported in what email client.
|
||||
- Use pixel sizing `px` instead of relative units etc.
|
||||
- You can use shorthands. i,e, `margin: 40px 0;` or `margin: 0 auto` to center the content
|
||||
|
||||
## Links & Buttons
|
||||
|
||||
- Don't use images for buttons
|
||||
- Use descriptive links (not this "click here", use "read the article" for example)
|
||||
- Embrace link conventions (i.e. blue and underlined text for links)
|
||||
- Don't just rely on color. Don't underline things that are not links (might frustrate the user into thinking it's a link)
|
||||
|
||||
### Bulletproof buttons
|
||||
|
||||
- from https://buttons.cm/ (most reliable):
|
||||
|
||||
```html
|
||||
<div><!--[if mso]>
|
||||
<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="http://" style="height:40px;v-text-anchor:middle;width:200px;" arcsize="10%" strokecolor="#1e3650" fill="t">
|
||||
<v:fill type="tile" src="https://i.imgur.com/0xPEf.gif" color="#556270" />
|
||||
<w:anchorlock/>
|
||||
<center style="color:#ffffff;font-family:sans-serif;font-size:13px;font-weight:bold;">Show me the button!</center>
|
||||
</v:roundrect>
|
||||
<![endif]--><a href="http://"
|
||||
style="background-color:#556270;background-image:url(https://i.imgur.com/0xPEf.gif);border:1px solid #1e3650;border-radius:4px;color:#ffffff;display:inline-block;font-family:sans-serif;font-size:13px;font-weight:bold;line-height:40px;text-align:center;text-decoration:none;width:200px;-webkit-text-size-adjust:none;mso-hide:all;">Show me the button!</a></div>
|
||||
```
|
||||
|
||||
- Padding based:
|
||||
|
||||
```html
|
||||
<table width="100%" border="0" cellspacing="0" cellpadding="0">
|
||||
<tr>
|
||||
<td align="center" style="padding: 60px;">
|
||||
<table border="0" cellspacing="0" cellpadding="0">
|
||||
<tr>
|
||||
<td brcolor="#229efd" style="padding: 12px 18px 12px 18px; border-radius: 3px" align="center">
|
||||
<a href="…" target="_blank" style="font-size: 18px; text-decoration: none; display: inline-block;">Button</a>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
```
|
||||
|
||||
- Border based
|
||||
|
||||
```html
|
||||
<table width="100%" border="0" cellspacing="0" cellpadding="0">
|
||||
<tr>
|
||||
<td align="center" style="padding: 60px;">
|
||||
<table border="0" cellspacing="0" cellpadding="0">
|
||||
<tr>
|
||||
<td>
|
||||
<a href="…" target="_blank" style="font-size: 18px; text-decoration: none; display: inline-block; color: #ffffff; background-color: #229efd; border-top: 12px solid #229efd; border-bottom: 12px solid #229efd; border-right: 18px solid #229efd;border-left: 18px solid #229efd;">Button</a>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
```
|
||||
|
||||
|
||||
## Images
|
||||
|
||||
- Make them responsive by default
|
||||
- Use alt text describing the image
|
||||
- Stick to standards: jpg, png, gif
|
||||
|
||||
### Responsive Images
|
||||
|
||||
- Set a fixed width for outlook `<img … width="600" border="0" … >`
|
||||
- `display: block; max-width: 100%; min-width: 100px; width: 100%;` to make them adjust across screen sizes
|
||||
|
||||
i.e.
|
||||
|
||||
```html
|
||||
<img width="600" border="0" style="display: block; max-width: 100%; min-width: 100px; width: 100%" src="img/image.jpg" alt="puppy licking ice-cream">
|
||||
```
|
||||
|
||||
### Background Images
|
||||
|
||||
- Most reliable on table cells (td)
|
||||
- Use both: HTML attributes and inline CSS
|
||||
|
||||
i.e.
|
||||
|
||||
```html
|
||||
<td background="image/bg.jpg" bgcolor="#229efd" style="background: #229efd url('image/bg.jpg')">
|
||||
```
|
||||
|
||||
## Accessibility
|
||||
|
||||
- Left align longer text (center align only short text/headings etc.)
|
||||
- Keep color contrast high
|
||||
- Create a strong visual hierarchy
|
||||
- Focus on readability
|
||||
- Keep layouts simple and usable
|
||||
- Use real text instead of images
|
||||
- Keep tables quiet using `role="presentation"`
|
||||
- Include text alternatives for images
|
||||
- Include the language of an email `lang="de"`
|
||||
|
||||
### Testing
|
||||
|
||||
- Close your eyes and use a real screen reader: NVDA, VoiceOver, JAWS, Browser Extensions (NoCoffeee Vision Simulator, silktide, toadly, lighthouse), Litmus accessibility checker.
|
||||
|
||||
## Layouts
|
||||
|
||||
- Think in modules
|
||||
- Use `role="presentation"` on any table
|
||||
- Don't use table headers, body, footer
|
||||
- Each component lives in their own rows/tables
|
||||
- Override defaults using HTML attributes
|
||||
- Most styles should be included in table tags
|
||||
|
||||
Boilerplate:
|
||||
|
||||
```html
|
||||
<!-- Outer Fluid Container Table -->
|
||||
<table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%">
|
||||
<tr>
|
||||
<td>
|
||||
<!-- Inner Fixed Container Table -->
|
||||
<table border="0" cellpadding="0" cellspacing="0" role="presentation" width="600">
|
||||
<!-- Each TR is it's own email "module", i.e. logo, headline, hero image, etc. -->
|
||||
<tr>
|
||||
<td>
|
||||
<!-- logo -->
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<!-- headline -->
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
```
|
||||
|
||||
- Basic structure is: Fluid table => Fixed table => Fluid table => Fixed table
|
||||
|
||||
## Mobile Emails
|
||||
|
||||
- For emails it makes sense to design in desktop first because otherwise you'd get the mobile version on the desktop as the queries don't always work.
|
||||
- You can use media queries
|
||||
- Still work with tables but make those responsive
|
||||
|
||||
i.e.
|
||||
|
||||
```css
|
||||
@media screen and (max-width: 600px) {
|
||||
.mobile { width: 100% !important }
|
||||
.block { display: block !important; width: 100% !important; }
|
||||
}
|
||||
```
|
||||
|
||||
And add them to the tables i.e. to make them stack.
|
||||
|
||||
### Hybrid/Spongy Coding
|
||||
|
||||
- Fluid by default
|
||||
|
||||
- max-width
|
||||
|
||||
- MSO ghost tables:
|
||||
|
||||
```
|
||||
<!--[if (gte mso 9)|(IE)]>
|
||||
<table cellspacing="0" cellpadding="0" border="0" width="600" align="center" role="presentation"><tr><td>
|
||||
<![endif]>
|
||||
```
|
||||
|
||||
|
||||
…content here…
|
||||
|
||||
<!--[if (gte mso 9)|(IE)]>
|
||||
</td></tr></table>
|
||||
<![endif]>
|
||||
```
|
||||
- This will wrap the whole content in tables for Outlook
|
||||
- `gte` = greater than or equal, `gt` = greater than, `lte` = less than equal to, `lt` = less than.
|
||||
- `9` = Outlook 2000, `10` = 2002, …, `15` = Outlook 2013
|
||||
## Interactivity
|
||||
- `:hover` pseudo selector works (only when included in the header)
|
||||
- gifs
|
||||
- movableink (using images that are generated when requested via GET requests. i.e. countdown timer etc.)
|
||||
- “The checkbox hack” to create state (by using input labels to toggle checkboxes that changes display with sibling selectors to create interactivity):
|
||||
```html
|
||||
<input type="radio" class="slide-input" name="slides" id="slide1" checked>
|
||||
<input type="radio" class="slide-input" name="slides" id="slide2">
|
||||
<input type="radio" class="slide-input" name="slides" id="slide3">
|
||||
<label for="slide1" class="slide-label">Slide 1</label>
|
||||
<label for="slide2" class="slide-label">Slide 2</label>
|
||||
<label for="slide3" class="slide-label">Slide 3</label>
|
||||
<div class="slide-content" id="content1">Content 1</div>
|
||||
<div class="slide-content" id="content2">Content 2</div>
|
||||
<div class="slide-content" id="content3">Content 3</div>
|
||||
```
|
||||
```css
|
||||
.slide-input { display: 'none' }
|
||||
.slide-label { cursor: 'pointer' }
|
||||
.slide-input ~ .slide-content { display: 'none' }
|
||||
#slide1:checked ~ #content1 { display: 'block' }
|
||||
#slide2:checked ~ #content2 { display: 'block' }
|
||||
#slide3:checked ~ #content3 { display: 'block' }
|
||||
```
|
||||
41
doc/etc/Json-Rpc.md
Normal file
41
doc/etc/Json-Rpc.md
Normal file
@@ -0,0 +1,41 @@
|
||||
# JSON-RPC
|
||||
|
||||
## 요청
|
||||
|
||||
```json
|
||||
{
|
||||
"jsonrpc": "2.0",
|
||||
"method": "doSomething",
|
||||
"params": {
|
||||
...
|
||||
},
|
||||
"id": ...
|
||||
}
|
||||
```
|
||||
|
||||
## 응답
|
||||
|
||||
```json
|
||||
{
|
||||
"jsonrpc": "2.0",
|
||||
"result" : {
|
||||
...
|
||||
},
|
||||
"id": xxx
|
||||
}
|
||||
```
|
||||
|
||||
### 오류 응답
|
||||
|
||||
```json
|
||||
{
|
||||
"jsonrpc": "2.0",
|
||||
"error" : {
|
||||
"code": xx,
|
||||
"message": "xxx"
|
||||
},
|
||||
"id": xxx
|
||||
}
|
||||
```
|
||||
|
||||
https://www.jsonrpc.org/
|
||||
3
doc/etc/Linkback.md
Normal file
3
doc/etc/Linkback.md
Normal file
@@ -0,0 +1,3 @@
|
||||
# Linkback
|
||||
|
||||
Start typing here...
|
||||
114
doc/etc/Pingback.md
Normal file
114
doc/etc/Pingback.md
Normal file
@@ -0,0 +1,114 @@
|
||||
# Pingback
|
||||
|
||||
만일 CMS에 다음과 같은 글이 작성되었다고 가정해 봅시다.
|
||||
|
||||
```html
|
||||
<article>
|
||||
<p>
|
||||
<a href="http://example.com/some-post">여기</a> 완전 좋아요.
|
||||
</p>
|
||||
</article>
|
||||
```
|
||||
|
||||
## 엔드포인트 찾기
|
||||
|
||||
CMS 소프트웨어에서는 작성된 글에서 외부 링크들을 추출해서 각각의 링크마다 HTTP HEAD/GET으로 조회를 합니다. 그러면 다음과 유사한 응답을 받을 겁니다.
|
||||
|
||||
```
|
||||
GET /some-post HTTP/1.1
|
||||
Host: example.com
|
||||
|
||||
------
|
||||
HTTP/1.1 200 OK
|
||||
X-Pingback: http://example.com/pingback
|
||||
|
||||
<html><head> ...
|
||||
<link href="http://example.com/pingback" rel="pingback" /> ...
|
||||
```
|
||||
|
||||
HTTP 헤더 혹은 `link` 태그에서 웹 멘션 주소를 찾을 수 있습니다.
|
||||
|
||||
## 서버 엔드포인트로 메시지 전송
|
||||
|
||||
CMS에서는 대상 서버의 엔드 포인트로 XML-RPC 형식으로 메시지를 전송합니다. 메시지에는 `sourceURI`와 `targetURI`가 포함되어야 합니다.
|
||||
|
||||
```
|
||||
POST /http://example.com/webmention HTTP/1.1
|
||||
Host: example.com
|
||||
Content-Type: text/xml
|
||||
|
||||
<?xml version="1.0">
|
||||
<methodCall>
|
||||
<methodName>doSomething</methodName>
|
||||
<params>
|
||||
<param>
|
||||
<value><string>소스URI</string></value>
|
||||
</param>
|
||||
<param>
|
||||
<value><string>타겟URI</string></value>
|
||||
</param>
|
||||
</params>
|
||||
</methodCall>
|
||||
|
||||
------
|
||||
HTTP/1.1 200 OK
|
||||
```
|
||||
|
||||
## XML-RPC 오류 코드
|
||||
|
||||
- 0
|
||||
|
||||
일반적인 오류
|
||||
|
||||
- 0x0010
|
||||
|
||||
소스 URI가 없음
|
||||
|
||||
- 0x0011
|
||||
|
||||
소스 URI가 타겟 URI를 포함하고 있지 않음
|
||||
|
||||
- 0x0020
|
||||
|
||||
타겟 URI가 없음
|
||||
|
||||
- 0x0021
|
||||
|
||||
타겟 URI에 핑백을 사용할 수 없음
|
||||
|
||||
- 0x0030
|
||||
|
||||
이미 핑백이 등록 되었음
|
||||
|
||||
- 0x0031
|
||||
|
||||
접근 거부
|
||||
|
||||
- 0x0032
|
||||
|
||||
서버와 통신할 수 없음
|
||||
|
||||
|
||||
## 한편, 메시지를 받은 서버에서는
|
||||
|
||||
전달 받은 데이터를 작업 큐에 등록하고, 작업 진행 내역을 보여주는 포에지 주소를 포함하는 `201` 또는 `202`를 응답합니다.
|
||||
|
||||
```
|
||||
HTTP/1.1 201 Created
|
||||
Location: http://aaronpk.example/webmention/DEhB9Jme
|
||||
```
|
||||
|
||||
```
|
||||
HTTP/1.1 202 Accepted
|
||||
```
|
||||
|
||||
검증에 실패한 경우에는 `400 Bad Request`를 응답합니다.
|
||||
|
||||
## 검증
|
||||
|
||||
- source와 target이 모두 유효한 Url인지 여부 확인
|
||||
- source와 target이 동일하면 거부
|
||||
|
||||
https://en.wikipedia.org/wiki/Linkback
|
||||
|
||||
http://www.hixie.ch/specs/pingback/pingback
|
||||
3
doc/etc/Refback.md
Normal file
3
doc/etc/Refback.md
Normal file
@@ -0,0 +1,3 @@
|
||||
# Refback
|
||||
|
||||
https://en.wikipedia.org/wiki/Refback
|
||||
5
doc/etc/Robots.md
Normal file
5
doc/etc/Robots.md
Normal file
@@ -0,0 +1,5 @@
|
||||
# Robots.txt
|
||||
|
||||
http://www.robotstxt.org/
|
||||
|
||||
http://humanstxt.org/
|
||||
56
doc/etc/Rss.md
Normal file
56
doc/etc/Rss.md
Normal file
@@ -0,0 +1,56 @@
|
||||
# RSS
|
||||
|
||||
```xml
|
||||
<rss version="2.0">
|
||||
<channel>
|
||||
<title></title>
|
||||
<link></link>
|
||||
<description></description>
|
||||
<item>
|
||||
<title></title>
|
||||
<link></link>
|
||||
<description></description>
|
||||
</item>
|
||||
</channel>
|
||||
</rss>
|
||||
```
|
||||
|
||||
- channel
|
||||
- title
|
||||
- link
|
||||
- description
|
||||
- language
|
||||
- copyright
|
||||
- managingEditor
|
||||
- webMaster
|
||||
- pubDate
|
||||
- lastBuildDate
|
||||
- category
|
||||
- generator
|
||||
- docs
|
||||
- cloud
|
||||
- ttl
|
||||
- image
|
||||
- url
|
||||
- title
|
||||
- link
|
||||
- textInput
|
||||
- title
|
||||
- description
|
||||
- name
|
||||
- link
|
||||
- skipHours
|
||||
- skipDays
|
||||
- item
|
||||
- title
|
||||
- link
|
||||
- description
|
||||
- author
|
||||
- catogory
|
||||
- comments
|
||||
- enclosure
|
||||
- guid
|
||||
- pubDate
|
||||
- source
|
||||
|
||||
https://validator.w3.org/feed/docs/rss2.html
|
||||
5
doc/etc/Seo.md
Normal file
5
doc/etc/Seo.md
Normal file
@@ -0,0 +1,5 @@
|
||||
# SEO
|
||||
|
||||
https://developers.google.com/search/docs/advanced/guidelines/get-started?hl=ko
|
||||
|
||||
https://searchadvisor.naver.com/guide
|
||||
37
doc/etc/Sitemap.md
Normal file
37
doc/etc/Sitemap.md
Normal file
@@ -0,0 +1,37 @@
|
||||
# sitemap.xml
|
||||
|
||||
```xml
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
|
||||
<url>
|
||||
<loc>http://www.example.com/</loc>
|
||||
<lastmod>2005-01-01</lastmod>
|
||||
<changefreq>monthly</changefreq>
|
||||
<priority>0.8</priority>
|
||||
</url>
|
||||
</urlset>
|
||||
```
|
||||
|
||||
- urlset
|
||||
|
||||
필수.
|
||||
|
||||
- url
|
||||
|
||||
필수.
|
||||
|
||||
- loc
|
||||
|
||||
필수.
|
||||
|
||||
- lastmod
|
||||
|
||||
ISO 8601
|
||||
|
||||
- changefreq
|
||||
|
||||
- priority
|
||||
|
||||
0. 0~ 1.0
|
||||
|
||||
https://www.sitemaps.org/ko/protocol.html
|
||||
3
doc/etc/Syndication.md
Normal file
3
doc/etc/Syndication.md
Normal file
@@ -0,0 +1,3 @@
|
||||
# Syndication
|
||||
|
||||
Start typing here...
|
||||
49
doc/etc/Trackback.md
Normal file
49
doc/etc/Trackback.md
Normal file
@@ -0,0 +1,49 @@
|
||||
# Trackback
|
||||
|
||||
## 주소 찾기
|
||||
|
||||
```html
|
||||
<rdf:RDF xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
|
||||
xmlns:dc="http://purl.org/dc/elements/1.1/"
|
||||
xmlns:trackback="http://madskills.com/public/xml/rss/module/trackback/">
|
||||
<rdf:Description
|
||||
rdf:about="http://www.foo.com/archive.html#foo"
|
||||
dc:identifier="http://www.foo.com/archive.html#foo"
|
||||
dc:title="Foo Bar"
|
||||
trackback:ping="http://www.foo.com/tb.cgi/5" />
|
||||
</rdf:RDF>
|
||||
```
|
||||
|
||||
## 전송
|
||||
|
||||
```
|
||||
POST /trackback HTTP/1.1
|
||||
Host: example.com
|
||||
Content-Type: application/x-www-form-urlencoded; charset-utf-8
|
||||
|
||||
title=Foo+Bar&url=http://www.bar.com/&excerpt=My+Excerpt&blog_name=Foo
|
||||
```
|
||||
|
||||
- title
|
||||
- excerpt
|
||||
- url
|
||||
- blog_name
|
||||
|
||||
## 응답
|
||||
|
||||
```xml
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<response>
|
||||
<error>0</error>
|
||||
</response>
|
||||
```
|
||||
|
||||
### 오류 응답
|
||||
|
||||
```xml
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<response>
|
||||
<error>1</error>
|
||||
<message>The error message</message>
|
||||
</response>
|
||||
```
|
||||
3
doc/etc/Url.md
Normal file
3
doc/etc/Url.md
Normal file
@@ -0,0 +1,3 @@
|
||||
# Url
|
||||
|
||||
Start typing here...
|
||||
20
doc/etc/WebComponents.md
Normal file
20
doc/etc/WebComponents.md
Normal file
@@ -0,0 +1,20 @@
|
||||
# 웹 컴포넌트
|
||||
|
||||
|
||||
## 프로젝트 셋업
|
||||
|
||||
|
||||
```bash
|
||||
mkdir my-project
|
||||
cd my-project
|
||||
yarn init
|
||||
mkdir src
|
||||
touch index.js
|
||||
```
|
||||
|
||||
```bash
|
||||
yarn add webpack webpack-cli webpack-dev-server --dev
|
||||
yarn add @babel/core @babel/preset-env babel-loader --dev
|
||||
또는
|
||||
npx webpack-cli init
|
||||
```
|
||||
70
doc/etc/Webmention.md
Normal file
70
doc/etc/Webmention.md
Normal file
@@ -0,0 +1,70 @@
|
||||
# Webmention
|
||||
|
||||
만일 CMS에 다음과 같은 글이 작성되었다고 가정해 봅시다.
|
||||
|
||||
```html
|
||||
<article>
|
||||
<p>
|
||||
<a href="http://example.com/some-post">여기</a> 완전 좋아요.
|
||||
</p>
|
||||
</article>
|
||||
```
|
||||
|
||||
## 엔드포인트 찾기
|
||||
|
||||
CMS 소프트웨어에서는 작성된 글에서 외부 링크들을 추출해서 각각의 링크마다 HTTP HEAD/GET으로 조회를 합니다. 그러면 다음과 유사한 응답을 받을 겁니다.
|
||||
|
||||
```
|
||||
GET /some-post HTTP/1.1
|
||||
Host: example.com
|
||||
|
||||
------
|
||||
HTTP/1.1 200 OK
|
||||
Link: <http://example.com/webmention>; rel="webmention"
|
||||
|
||||
<html><head> ...
|
||||
<link href="http://example.com/webmention" rel="webmention" /> ...
|
||||
```
|
||||
|
||||
HTTP 헤더 혹은 `link` 태그에서 웹 멘션 주소를 찾을 수 있습니다.
|
||||
|
||||
## 서버 엔드포인트로 메시지 전송
|
||||
|
||||
CMS에서는 대상 서버의 엔드 포인트로 `application/x-www-form-urlencoded` 형식의 POST 메시지를 전송합니다. 메시지에는 `source`와 `target`이 포함되어야 합니다.
|
||||
|
||||
```
|
||||
POST /http://example.com/webmention HTTP/1.1
|
||||
Host: example.com
|
||||
Content-Type: application/x-www-form-urlencoded
|
||||
|
||||
source=https://client.example.com/new-post&target=http://example.com/some-post
|
||||
|
||||
------
|
||||
HTTP/1.1 202 Accepted
|
||||
```
|
||||
|
||||
메시지를 받은 서버는 `201 Created` 혹은 `202 Accepted`를 응답합니다.
|
||||
|
||||
## 한편, 메시지를 받은 서버에서는
|
||||
|
||||
전달 받은 데이터를 작업 큐에 등록하고, 작업 진행 내역을 보여주는 포에지 주소를 포함하는 `201` 또는 `202`를 응답합니다.
|
||||
|
||||
```
|
||||
HTTP/1.1 201 Created
|
||||
Location: http://aaronpk.example/webmention/DEhB9Jme
|
||||
```
|
||||
|
||||
```
|
||||
HTTP/1.1 202 Accepted
|
||||
```
|
||||
|
||||
검증에 실패한 경우에는 `400 Bad Request`를 응답합니다.
|
||||
|
||||
## 검증
|
||||
|
||||
- source와 target이 모두 유효한 Url인지 여부 확인
|
||||
- source와 target이 동일하면 거부
|
||||
|
||||
https://en.wikipedia.org/wiki/Linkback
|
||||
|
||||
https://www.w3.org/TR/webmention/
|
||||
139
doc/etc/XML-Rpc.md
Normal file
139
doc/etc/XML-Rpc.md
Normal file
@@ -0,0 +1,139 @@
|
||||
# XML-RPC
|
||||
|
||||
**XML-RPC**는 HTTP POST를 통해서 XML 메시지를 주고 받습니다.
|
||||
|
||||
## 요청
|
||||
|
||||
```
|
||||
POST /xml-rpc HTTP/1.0
|
||||
Host: example.com
|
||||
Content-Type: text/xml
|
||||
|
||||
<?xml version="1.0">
|
||||
<methodCall>
|
||||
<methodName>doSomething</methodName>
|
||||
<params>
|
||||
<param>
|
||||
<value><integer>100</integer></value>
|
||||
</param>
|
||||
</params>
|
||||
</methodCall>
|
||||
```
|
||||
|
||||
## 응답
|
||||
|
||||
서버 오류 등이 아닌 경우에는 `200OK`를 응답해야 합니다.
|
||||
|
||||
```
|
||||
HTTP/1.1 200 OK
|
||||
Content-Type: text/xml
|
||||
|
||||
<?xml version="1.0">
|
||||
<methodResponse>
|
||||
<params>
|
||||
<param><string>Hello</string></param>
|
||||
</params>
|
||||
</methodResponse>
|
||||
```
|
||||
|
||||
### 오류 응답
|
||||
|
||||
```
|
||||
HTTP/1.1 200 OK
|
||||
Content-Type: text/xml
|
||||
|
||||
<?xml version="1.0">
|
||||
<methodResponse>
|
||||
<fault>
|
||||
<value>
|
||||
<struct>
|
||||
<member>
|
||||
<name>faultCode</name>
|
||||
<value><int>4</int></value>
|
||||
</member>
|
||||
<member>
|
||||
<name>faultString</name>
|
||||
<value><string>Too many parameters.</string></value>
|
||||
</member>
|
||||
</struct>
|
||||
</value>
|
||||
</fault>
|
||||
</methodResponse>
|
||||
```
|
||||
|
||||
## 자료형
|
||||
|
||||
자료형이 생략된 경우에는 `string`으로 간주합니다.
|
||||
|
||||
- array
|
||||
|
||||
```xml
|
||||
<array>
|
||||
<data>
|
||||
<value><int>100</int></value>
|
||||
<value><int>101</int></value>
|
||||
<value><int>102</int></value>
|
||||
</data>
|
||||
</array>
|
||||
```
|
||||
|
||||
- base64
|
||||
|
||||
```xml
|
||||
<base64>aW9...cyE=</base64>
|
||||
```
|
||||
|
||||
- boolean
|
||||
|
||||
```xml
|
||||
<boolean>1</boolean>
|
||||
```
|
||||
|
||||
- dateTime.iso8601
|
||||
|
||||
```xml
|
||||
<dateTime.iso8601>2021-01-01T00:12:00</dateTime.iso8601>
|
||||
```
|
||||
|
||||
- double
|
||||
|
||||
```xml
|
||||
<double>100.0</double>
|
||||
```
|
||||
|
||||
- integer
|
||||
|
||||
```xml
|
||||
<int>100</int>
|
||||
<i4>100</i4>
|
||||
```
|
||||
|
||||
- string
|
||||
|
||||
```xml
|
||||
<string>Hello</string>
|
||||
```
|
||||
|
||||
- struct
|
||||
|
||||
```xml
|
||||
<struct>
|
||||
<member>
|
||||
<name>foo</name>
|
||||
<value><int>100</int></value>
|
||||
</member>
|
||||
<member>
|
||||
<name>bar</name>
|
||||
<value><string>Hello</string></value>
|
||||
</member>
|
||||
</struct>
|
||||
```
|
||||
|
||||
- nil
|
||||
|
||||
```xml
|
||||
<nil />
|
||||
```
|
||||
|
||||
|
||||
http://xmlrpc.com/
|
||||
Reference in New Issue
Block a user