From bae078590aad1e9cac5863a05b52779197f0420c Mon Sep 17 00:00:00 2001 From: Dan Mindru Date: Mon, 3 Sep 2018 21:56:50 +0200 Subject: [PATCH] Update docs --- README.md | 24 +++++++----------------- i18n/ko-KR.md | 50 +++++++++++++++++++------------------------------- 2 files changed, 26 insertions(+), 48 deletions(-) diff --git a/README.md b/README.md index 9cb8fc1..bed0aa7 100644 --- a/README.md +++ b/README.md @@ -1,7 +1,7 @@ # Responsive HTML email signature(s) [![npm](https://img.shields.io/npm/v/responsive-html-email-signature.svg)](https://www.npmjs.com/package/responsive-html-email-signature) -[![license](https://img.shields.io/github/license/fadeit/responsive-html-email-signature.svg)](/LICENSE) -[![Issue Stats](https://img.shields.io/issuestats/p/github/fadeit/responsive-html-email-signature.svg)](https://github.com/fadeit/responsive-html-email-signature/pulls) +[![license](https://img.shields.io/github/license/danmindru/responsive-html-email-signature.svg)](/LICENSE) +[![Issue Stats](https://img.shields.io/issuestats/p/github/danmindru/responsive-html-email-signature.svg)](https://github.com/danmindru/responsive-html-email-signature/pulls) ### Let's punch email clients in the stomach πŸ‘Š When you need some basic responsive email signatures that work on mobile.
@@ -17,8 +17,8 @@ Here are some examples: ![responsive emails-02](https://cloud.githubusercontent.com/assets/1515742/10591901/139c4954-76b9-11e5-80f7-5b0ccaf5af81.png) ## Getting started -- Clone repo `git clone https://github.com/fadeit/responsive-html-email-signature.git` -- Run `yarn` or `npm install` +- Clone repo `git clone https://github.com/danmindru/responsive-html-email-signature.git` +- Run `npm install` - Run `gulp` to generate templates from configuration (one time) ### Customizing templates @@ -31,8 +31,6 @@ Here are some examples: ## Motivation Writing HTML emails & email signatures sucks. Let's make it easier. We can't fix all email clients, but we can surely make our lives easier with some automation.
-> See a fairly comprehensive rant on the subject (and not only) [in this article](https://fadeit.dk/blog/post/html-emails-and-email-signatures-how-hard-can-it-be). - ## What does this pile of code do - [x] generates email templates from your config @@ -52,11 +50,11 @@ Writing HTML emails & email signatures sucks. Let's make it easier. We can't fix ## Docs ### Installing ```bash -$ yarn # or npm install +$ npm install $ gulp # By default, HTML & CSS files in './src' will be watched for changes ``` -> Note: it's built using node v7.x, so please make sure your node version is up to date. Version 6+ should be fine. +> Note: it's built using node v8.x, so please make sure your node.js version is up to date. Version 6+ should be fine. ### Configuring To make a basic email from existing templates, you only have to edit the `conf.json` file in each template. @@ -154,7 +152,7 @@ You are of course encouraged to change the default structure for your use case. ## Overview of the build process The diagram below shows what happens to your email templates. Each folder in 'src' is considered a `template group`. A template file will be generated for each of the configuration objects you add have in the template group -> `conf.js`. -![Responsive HTML email template/signatures diagram](https://fadeit.dk/posts/html-emails-and-email-signatures-how-hard-can-it-be/html-responsive-email-template-build-diagram.png) +![Responsive HTML email template/signatures diagram](https://user-images.githubusercontent.com/1515742/45000195-35268300-afc3-11e8-82b4-7507430c48a0.png) ## CSS Support @@ -233,11 +231,3 @@ Unfortnately, Outlook 2010 client dosen't support HTML file import features for > **NB**: base 64 will not be shown on Outlook 2010 client. So, I recommend to use external url if you want to use images. ------------------------------- - -
-The fadeit logo

- -#### About fadeit -We build awesome software, web and mobile applications. -See more at [fadeit.dk](https://fadeit.dk) diff --git a/i18n/ko-KR.md b/i18n/ko-KR.md index 897fc5c..866f8e0 100644 --- a/i18n/ko-KR.md +++ b/i18n/ko-KR.md @@ -14,10 +14,7 @@ ![responsive emails-02](https://cloud.githubusercontent.com/assets/1515742/10591901/139c4954-76b9-11e5-80f7-5b0ccaf5af81.png) ## λ§Œλ“€κ²Œλœ 동기 (Motivation) -μ΄λ©”μΌμš© html은 일반적인 HTMLκ³Ό 달리 λͺ¨λ“  μ½”λ“œλ₯Ό in-line CSS둜 λ§Œλ“€μ–΄μ•Ό ν•©λ‹ˆλ‹€. κ·Έλž˜μ„œ 이메일 ν…œν”Œλ¦Ώμ΄λž‘ μ„œλͺ…을 λ§Œλ“€κΈ°κ°€ ꡉμž₯히 μ–΄λ ΅μŠ΅λ‹ˆλ‹€. "이런 HTML ν…œν”Œλ¦Ώκ³Ό μ„œλͺ…을 νŽΈν•˜κ²Œ λ§Œλ“€μ–΄λ³΄μž!" λΌλŠ” μƒκ°μ—μ„œ 이 ν…œν”Œλ¦Ώμ„ λ§Œλ“€μ—ˆμŠ΅λ‹ˆλ‹€. λ¬Όλ‘  λͺ¨λ“  이메일 ν΄λΌμ΄μ–ΈνŠΈμ˜ 이슈λ₯Ό μ „λΆ€ λ‹€ κ³ μΉ  μˆ˜λŠ” μ—†μ§€λ§Œ, 이 ν…œν”Œλ¦Ώμ„ ν™œμš©ν•΄μ„œ 쑰금 더 쉽고 κΉ”λ”ν•œ λ°˜μ‘ν˜• 이메일을 λ§Œλ“€μ–΄μ„œ λ°›λŠ” μ‚¬λžŒ λ³΄λ‚΄λŠ” μ‚¬λžŒ λͺ¨λ‘κ°€ λ§Œμ‘±ν•˜κ²Œ λ§Œλ“€ 수 μžˆμŠ΅λ‹ˆλ‹€! - -이 [λΈ”λ‘œκ·Έ ν¬μŠ€νŒ…](http://fadeit.dk/blog/post/html-emails-and-email-signatures-how-hard-can-it-be)μ—μ„œ fadeit 의 더 λ§Žμ€ 이애기λ₯Ό λ“€μ–΄λ³΄μ„Έμš”. - +μ΄λ©”μΌμš© html은 일반적인 HTMLκ³Ό 달리 λͺ¨λ“  μ½”λ“œλ₯Ό in-line CSS둜 λ§Œλ“€μ–΄μ•Ό ν•©λ‹ˆλ‹€. κ·Έλž˜μ„œ 이메일 ν…œν”Œλ¦Ώμ΄λž‘ μ„œλͺ…을 λ§Œλ“€κΈ°κ°€ ꡉμž₯히 μ–΄λ ΅μŠ΅λ‹ˆλ‹€. "이런 HTML ν…œν”Œλ¦Ώκ³Ό μ„œλͺ…을 νŽΈν•˜κ²Œ λ§Œλ“€μ–΄λ³΄μž!" λΌλŠ” μƒκ°μ—μ„œ 이 ν…œν”Œλ¦Ώμ„ λ§Œλ“€μ—ˆμŠ΅λ‹ˆλ‹€. λ¬Όλ‘  λͺ¨λ“  이메일 ν΄λΌμ΄μ–ΈνŠΈμ˜ 이슈λ₯Ό μ „λΆ€ λ‹€ κ³ μΉ  μˆ˜λŠ” μ—†μ§€λ§Œ, 이 ν…œν”Œλ¦Ώμ„ ν™œμš©ν•΄μ„œ 쑰금 더 쉽고 κΉ”λ”ν•œ λ°˜μ‘ν˜• 이메일을 λ§Œλ“€μ–΄μ„œ λ°›λŠ” μ‚¬λžŒ λ³΄λ‚΄λŠ” μ‚¬λžŒ λͺ¨λ‘κ°€ λ§Œμ‘±ν•˜κ²Œ λ§Œλ“€ 수 μžˆμŠ΅λ‹ˆλ‹€! ## 이 ν…œν”Œλ¦Ώμ—μ„œ 무엇을 ν•  수 μžˆλ‚˜? (What does it do?) - [x] config-based template generation @@ -38,7 +35,7 @@ $ npm install $ gulp ``` -`src/fadeit/` λ₯Ό ν™•μΈν•΄λ³΄μ‹œλ©΄ 멋진 2개의 이메일 ν…œν”Œλ¦Ώ μƒ˜ν”Œμ΄ μžˆμŠ΅λ‹ˆλ‹€. 폴더λ₯Ό ν†΅μ§Έλ‘œ λ‹€λ₯Έ μ΄λ¦„μœΌλ‘œ 볡사/λΆ™μ—¬λ„£κΈ° ν•˜μ‹œκ³  κ·Έ μ•ˆμ— μžˆλŠ” `src/fadeit/conf.js` νŒŒμΌμ„ μž…λ§›λŒ€λ‘œ λ°”κΏ”λ³΄μ„Έμš”. λ‹€μŒμœΌλ‘œλŠ” `gulp`λ₯Ό μ‹€ν–‰ν•΄μ„œ μ—¬λŸ¬λΆ„ 만의 이메일 ν…œν”Œλ¦Ώμ„ λΉŒλ“œν•˜μ„Έμš”. gulp 의 taskκ°€ λ™μž‘ν•˜λ©΄μ„œ κΈ°λ³Έ html CSS νŒŒμΌμ„ ν™•μΈν•˜κ³  μƒˆλ‘œμš΄ html νŒŒμΌμ„ `/dist`에 μ €μž₯ν•©λ‹ˆλ‹€. +`src/dark/` λ₯Ό ν™•μΈν•΄λ³΄μ‹œλ©΄ 멋진 2개의 이메일 ν…œν”Œλ¦Ώ μƒ˜ν”Œμ΄ μžˆμŠ΅λ‹ˆλ‹€. 폴더λ₯Ό ν†΅μ§Έλ‘œ λ‹€λ₯Έ μ΄λ¦„μœΌλ‘œ 볡사/λΆ™μ—¬λ„£κΈ° ν•˜μ‹œκ³  κ·Έ μ•ˆμ— μžˆλŠ” `src/dark/conf.js` νŒŒμΌμ„ μž…λ§›λŒ€λ‘œ λ°”κΏ”λ³΄μ„Έμš”. λ‹€μŒμœΌλ‘œλŠ” `gulp`λ₯Ό μ‹€ν–‰ν•΄μ„œ μ—¬λŸ¬λΆ„ 만의 이메일 ν…œν”Œλ¦Ώμ„ λΉŒλ“œν•˜μ„Έμš”. gulp 의 taskκ°€ λ™μž‘ν•˜λ©΄μ„œ κΈ°λ³Έ html CSS νŒŒμΌμ„ ν™•μΈν•˜κ³  μƒˆλ‘œμš΄ html νŒŒμΌμ„ `/dist`에 μ €μž₯ν•©λ‹ˆλ‹€. ## μ‚΄νŽ΄λ³΄κΈ° (Overview) μ•„λž˜ μˆœμ„œλ„λŠ” μ—¬λŸ¬λΆ„μ΄ λ§Œλ“  ν…œν”Œλ¦Ώμ΄ μ–΄λ–»κ²Œ λΉŒλ“œκ°€ λ˜λŠ”μ§€λ₯Ό λ³΄μ—¬μ€λ‹ˆλ‹€. @@ -61,15 +58,15 @@ $ gulp ## λ‹€λ₯Έ 이메일 ν΄λΌμ΄μ–ΈνŠΈμ—μ„œ μ‚¬μš©ν•˜λŠ” 법 (Usage with different e-mail clients) ### Thunderbird -μ¬λ”λ²„λ“œ 이메일 ν΄λΌμ΄μ–ΈνŠΈμ— html μ„œλͺ…을 μžλ™μœΌλ‘œ λ„£μ–΄μ£ΌλŠ” λͺ‡λͺ‡ ν”ŒλŸ¬κ·ΈμΈμ΄ μžˆμŠ€λΉˆλ‹€. 일단 μš°λ¦¬λŠ” [SmartTemplate4](https://addons.mozilla.org/en-us/thunderbird/addon/smarttemplate4) λ₯Ό μΆ”μ²œν•©λ‹ˆλ‹€. 이 ν”ŒλŸ¬κ·ΈμΈμ„ μ“°λ©΄ μƒˆ 이메일, λ‹΅μž₯, 전달 등을 ν•  λ•Œλ§ˆλ‹€ 각각 λ‹€λ₯Έ 이메일 ν…œν”Œλ¦Ώμ„ μ“Έ 수 μžˆμŠ΅λ‹ˆλ‹€. +μ¬λ”λ²„λ“œ 이메일 ν΄λΌμ΄μ–ΈνŠΈμ— html μ„œλͺ…을 μžλ™μœΌλ‘œ λ„£μ–΄μ£ΌλŠ” λͺ‡λͺ‡ ν”ŒλŸ¬κ·ΈμΈμ΄ μžˆμŠ€λΉˆλ‹€. 일단 μš°λ¦¬λŠ” [SmartTemplate4](https://addons.mozilla.org/en-us/thunderbird/addon/smarttemplate4) λ₯Ό μΆ”μ²œν•©λ‹ˆλ‹€. 이 ν”ŒλŸ¬κ·ΈμΈμ„ μ“°λ©΄ μƒˆ 이메일, λ‹΅μž₯, 전달 등을 ν•  λ•Œλ§ˆλ‹€ 각각 λ‹€λ₯Έ 이메일 ν…œν”Œλ¦Ώμ„ μ“Έ 수 μžˆμŠ΅λ‹ˆλ‹€. ### Apple Mail / OS X (κΌ­.. 써야 ν•œλ‹€λ©΄?) #### 방법 1 -- 이메일 앱을 μ—΄κ³  `Mail` -> `Preferences` -> `Signatures` 둜 μ΄λ™ν•˜μ„Έμš”. +- 이메일 앱을 μ—΄κ³  `Mail` -> `Preferences` -> `Signatures` 둜 μ΄λ™ν•˜μ„Έμš”. - μ•„λ¬΄κ±°λ‚˜ μƒˆ 이메일 μ„œλͺ…을 λ§Œλ“€μ„Έμš”. (λ‚˜μ€‘μ— μ°ΎκΈ° νŽΈν•˜κ²Œ placeholder λ₯Ό μ¨λ‘λŠ” 것이 μ’‹μŠ΅λ‹ˆλ‹€.) -- 이메일을 λ‹«μœΌμ„Έμš”. +- 이메일을 λ‹«μœΌμ„Έμš”. - 터미널을 μ—΄κ³  TextEdit으둜 μ„œλͺ… νŒŒμΌμ„ μ—΄μ–΄λ³΄μ„Έμš”. (iCloud driveλ₯Ό μ‚¬μš©ν•˜λŠ” κ²½μš°λŠ” 잘 μž‘λ™ν•˜μ§€ μ•ŠλŠ” κ²½μš°κ°€ μžˆμŠ΅λ‹ˆλ‹€. μ•„λž˜ troubleshooting을 μ°Έκ³ ν•˜μ„Έμš”. ) ``` @@ -79,16 +76,16 @@ $ open -a TextEdit ~/Library/Mobile\ Documents/com~apple~mail/Data/V3/MailData/S - `...` 의 λͺ¨λ“  html μ½”λ“œλ₯Ό μ—¬λŸ¬λΆ„μ΄ λΉŒλ“œν•œ `/dist/`의 html 파일둜 ꡐ체 ν•©λ‹ˆλ‹€. (``외에 λ‹€λ₯Έ 메타 μ •λ³΄λŠ” μˆ˜μ •ν•˜μ§€ λ§ˆμ„Έμš”!) - 메일앱을 λ‹€μ‹œ μ‹€ν–‰ν•˜κ³  μƒˆλ‘œ 바뀐 μ„œλͺ…을 ν™•μΈν•΄λ³΄μ„Έμš” :) -> **주의**: 이미지 νŒŒμΌμ€ μ›λž˜ `preference`의 미리보기 ν™”λ©΄μ—μ„œλŠ” λ‚˜μ˜€μ§€ μ•ŠμŠ΅λ‹ˆλ‹€. ν•˜μ§€λ§Œ 이메일을 λ§Œλ“€κ³  λ°œμ†‘ν•˜λŠ” κ³³μ—μ„œλŠ” 잘 λ³΄μ—¬μ§€λ‹ˆκΉ κ±±μ •λ§ˆμ„Έμš”! +> **주의**: 이미지 νŒŒμΌμ€ μ›λž˜ `preference`의 미리보기 ν™”λ©΄μ—μ„œλŠ” λ‚˜μ˜€μ§€ μ•ŠμŠ΅λ‹ˆλ‹€. ν•˜μ§€λ§Œ 이메일을 λ§Œλ“€κ³  λ°œμ†‘ν•˜λŠ” κ³³μ—μ„œλŠ” 잘 λ³΄μ—¬μ§€λ‹ˆκΉ κ±±μ •λ§ˆμ„Έμš”! #### 방법 2 -λ‹€λ₯Έ λ°©λ²•μœΌλ‘œλŠ” `/dist` 에 λΉŒλ“œν•œ html νŒŒμΌμ„ CMD + A, CMD + C ν•΄μ„œ 섀정에 이메일 μ„œλͺ… λ°•μŠ€μ— λΆ™μ—¬λ„£κΈ° ν•΄μ„œ μ“Έ μˆ˜λ„ μžˆμŠ΅λ‹ˆλ‹€. ν•˜μ§€λ§Œ μ΄λ ‡κ²Œ 볡뢙을 ν•˜λŠ” 경우 파일의 `` μ΄λ‚˜ λ°˜μ‘ν˜• 웹을 μœ„ν•œ 미디어쿼리가 λ“€μ–΄μžˆλŠ” `