Merge pull request #199 from thematters/develop

Release: v1.3.0

.env.example

@@ -1,4 +1,4 @@
-SITE_DOMIAN=http://localhost:3000
+SITE_DOMAIN=http://localhost:3000
 API_URL=http://matters-server-develop.ap-southeast-1.elasticbeanstalk.com/
 WS_URL=ws://matters-server-develop.ap-southeast-1.elasticbeanstalk.com/graphql
 SEGMENT_KEY=3gE20MjzN9qncFqlKV0pDvNO7Cp2gWU3

CHANGELOG.md

@@ -5,6 +5,27 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [1.3.0] - 2019-04-09
+
+### Added
+
+- Editor: Caption #178
+- Editor: Auto upload external images #190
+- Editor: Embed LikeButton #194
+
+# Changed
+
+- Removes extra line breaks #188
+- Set cover to be first image #190
+- Fix issues with analytics and add new events #190
+- Summarize content of notice comment #192
+- Use `notice.reply.content` as `CommentNewReplyNotice`'s content #192
+- Fix polling requests read data from the cache #193
+- Auto open comments drawer #194
+- Fix upload same file again not working issue #195
+- Restrict editor formats for pasted content #197
+- Update upload file size limit to 5MB #198
+
 ## [1.2.0] - 2019-04-02
 
 ### Added

README.md

@@ -17,7 +17,7 @@
 - Environment variables: `cp .env.example .env`
 - Set command alias: `source bin/dc-alias`
 - Build docker image: `dc build`
-- Run: 
+- Run:
   - `dc up` or `dc run --service-ports web npm run dev`
   - then go to `http://localhost:3000/`
 
@@ -34,10 +34,10 @@
 - Build docker image: `dc build`
 - aws configure, then input your access key and secret
 - Login AWS ECR with `$(aws ecr get-login --no-include-email --region ap-southeast-1)`
-- Push: 
+- Push:
   - `docker push 903380195283.dkr.ecr.ap-southeast-1.amazonaws.com/matters-web:latest`
   - `docker tag matters-web:latest 903380195283.dkr.ecr.ap-southeast-1.amazonaws.com/matters-web:latest`
-- Pull: 
+- Pull:
   - `docker pull 903380195283.dkr.ecr.ap-southeast-1.amazonaws.com/matters-web:latest`
   - `docker tag 903380195283.dkr.ecr.ap-southeast-1.amazonaws.com/matters-web:latest matters-web:latest`
 
@@ -119,6 +119,12 @@ code --install-extension oderwat.indent-rainbow
 code --install-extension naumovs.color-highlight
 ```
 
+## Release a new version
+
+1. Update `CHANGELOG.md`
+2. Update `version` field of `package.json`
+3. Create a new release and tag in [GitHub Releases](https://github.com/thematters/matters-web/releases)
+
 ## Troubleshooting
 
 1. If `styled-jsx` is installed in both `next` and our own `package.json`, the built-in `styled-jsx` SSR of Next.js will fail. See [#533](https://github.com/zeit/styled-jsx/issues/533).

common/enums/analytics.ts

@@ -17,7 +17,9 @@ export const ANALYTICS_EVENTS = {
   LEAVE_ARTICLE: 'leave-article',
   FINISH_ARTICLE: 'finish-article',
   OPEN_COMMENTS: 'open-comments',
-  LOG_OUT: 'log-out'
+  LOG_OUT: 'log-out',
+  LOG_IN: 'log-in',
+  LOG_IN_FAILED: 'log-in-failed'
 }
 
 export const FEED_TYPE = {

common/enums/fileSizes.ts

@@ -1 +1 @@
-export const UPLOAD_FILE_SIZE_LIMIT: number = 1 * 1024 * 1024
+export const UPLOAD_FILE_SIZE_LIMIT: number = 5 * 1024 * 1024

common/enums/route.ts

@@ -217,6 +217,10 @@ export const ROUTES: Array<{
   }
 ]
 
+export const UrlFragments = {
+  COMMENTS: 'comments'
+}
+
 export const PATHS = {} as { [key in ROUTE_KEY]: { href: string; as: string } }
 ROUTES.forEach(({ key, as, href }) => {
   PATHS[key] = { href, as }

common/styles/bases/defaults.css

@@ -1,10 +1,11 @@
 /* @styled-jsx=global */
 
 html {
+  @mixin font-sans;
+
   height: 100%;
 
   font-size: var(--sizing-root);
-  font-family: var(--font-sans-tc);
   font-weight: var(--font-weight-base);
   line-height: var(--line-height-base);
   -webkit-text-size-adjust: 100%;
@@ -17,10 +18,6 @@ html {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   text-rendering: optimizeSpeed;
-
-  &[lang='zh-hans'] {
-    font-family: var(--font-sans-sc);
-  }
 }
 
 body {

common/styles/mixins/mixins.css

@@ -39,11 +39,19 @@
 @define-mixin font-serif {
   font-family: var(--font-serif-tc);
 
-  &[lang='zh-hans'] {
+  &[lang='zh-Hans'] {
     font-family: var(--font-serif-sc);
   }
 }
 
+@define-mixin font-sans {
+  font-family: var(--font-sans-tc);
+
+  &[lang='zh-Hans'] {
+    font-family: var(--font-sans-sc);
+  }
+}
+
 @define-mixin border-bottom-grey {
   border-bottom: 1px solid var(--color-line-grey); /* fallback */
   border-bottom: 0.5px solid var(--color-line-grey);

common/styles/utils/content.article.css

@@ -13,12 +13,14 @@
   & :global(> *:last-child) {
     margin-bottom: var(--spacing-default);
   }
+
   /* Media
    ========================================================================== */
   & :global(img, video, audio) {
     display: block;
     margin: 0 auto;
     max-height: 100vh;
+    background: var(--color-grey-lighter);
   }
 
   /* Figure
@@ -39,6 +41,7 @@
       font-size: var(--font-size-sm); /* fallback */
       font-size: calc(var(--font-size-sm) - 1px);
       color: var(--color-grey);
+      white-space: pre-wrap;
 
       @media (--sm-up) {
         padding: 0;
@@ -50,19 +53,32 @@
    ========================================================================== */
   & :global(figure[class*='embed']) {
     position: relative;
-    width: 100%;
-    height: 0;
-    padding-top: 56.25%;
-    background: var(--color-grey-lighter);
 
-    & iframe {
-      position: absolute;
-      top: 0;
-      left: 0;
-      right: 0;
-      bottom: 0;
+    & > .iframe-container {
+      position: relative;
+      width: 100%;
+      height: 0;
+      padding-top: 56.25%;
+      background: var(--color-grey-lighter);
+
+      & iframe {
+        @mixin cover;
+        width: 100%;
+        height: 100%;
+      }
+    }
+
+    /* fit legacy iframe */
+    & > iframe {
       width: 100%;
-      height: 100%;
+      height: 24rem;
+    }
+  }
+  & :global(figure.embed-code.likebutton) {
+    & > .iframe-container {
+      height: 200px;
+      background: transparent;
+      padding-top: 0;
     }
   }
 
@@ -168,4 +184,16 @@
   & input.embed-clipboard {
     line-height: 1.875;
   }
+
+  & figure figcaption {
+    font-size: 0;
+
+    & textarea {
+      font-size: var(--font-size-sm); /* fallback */
+      font-size: calc(var(--font-size-sm) - 1px);
+      text-align: center;
+      resize: none;
+      overflow: hidden;
+    }
+  }
 }

common/utils/dom.ts

@@ -52,12 +52,18 @@ const getAttributes = (name: string, str: string): string[] | [] => {
   return matches.filter(m => !!m)
 }
 
+export const getLangFromRoot = (): HTMLLanguage => {
+  return (document.documentElement.getAttribute('lang') ||
+    'zh-Hant') as HTMLLanguage
+}
+
 export const dom = {
   $,
   $$,
   getWindowHeight,
   getWindowWidth,
   offset,
   copyToClipboard,
-  getAttributes
+  getAttributes,
+  getLangFromRoot
 }

common/utils/index.ts

@@ -8,4 +8,5 @@ export * from './pad'
 export * from './dom'
 export * from './comment'
 export * from './number'
-export * from './stripHtml'
+export * from './language'
+export * from './text'

common/utils/language.ts

@@ -0,0 +1,31 @@
+export const langConvert = {
+  og2html: (lang: OGLanguage): HTMLLanguage => {
+    return ({
+      zh_HK: 'zh-Hant',
+      zh_TW: 'zh-Hant',
+      zh_CN: 'zh-Hans',
+      en: 'en'
+    }[lang] || 'zh-Hant') as HTMLLanguage
+  },
+  sys2html: (lang: Language): HTMLLanguage => {
+    return ({
+      zh_hans: 'zh-Hans',
+      zh_hant: 'zh-Hant',
+      en: 'en'
+    }[lang] || 'zh-Hant') as HTMLLanguage
+  },
+  html2sys: (lang: HTMLLanguage): Language => {
+    return ({
+      'zh-Hans': 'zh_hans',
+      'zh-Hant': 'zh_hant',
+      en: 'en'
+    }[lang] || 'zh_hant') as Language
+  },
+  sys2Og: (lang: Language): OGLanguage => {
+    return ({
+      zh_hant: 'zh-HK',
+      zh_hans: 'zh-CN',
+      en: 'en'
+    }[lang] || 'zh_HK') as OGLanguage
+  }
+}

common/utils/route.ts

@@ -9,6 +9,7 @@ type ToPathArgs =
       userName: string
       slug: string
       mediaHash: string
+      fragment?: string
     }
   | { page: 'draftDetail'; id: string; slug: string }
   | {
@@ -52,11 +53,12 @@ type ToPathArgs =
 export const toPath = (args: ToPathArgs): { href: string; as: string } => {
   switch (args.page) {
     case 'articleDetail':
+      const asUrl = `/@${args.userName}/${args.slug}-${args.mediaHash}`
       return {
         href: `${PATHS.ARTICLE_DETAIL.href}?userName=${args.userName}&slug=${
           args.slug
         }&mediaHash=${args.mediaHash}`,
-        as: `/@${args.userName}/${args.slug}-${args.mediaHash}`
+        as: args.fragment ? `${asUrl}#${args.fragment}` : asUrl
       }
     case 'draftDetail':
       return {

common/utils/text.ts

@@ -0,0 +1,41 @@
+/**
+ * Remove html tag and merge multiple spaces into one.
+ */
+export const stripHtml = (html: string | null, replacement = ' ') =>
+  (html || '')
+    .replace(/(<\/p><p>|&nbsp;)/g, ' ') // replace line break and space first
+    .replace(/(<([^>]+)>)/gi, replacement)
+
+export const makeSummary = (html: string, length = 140) => {
+  // buffer for search
+  const buffer = 20
+
+  // split on sentence breaks
+  const sections = stripHtml(html, '')
+    .replace(/([?!。？！]|(\.\s))\s*/g, '$1|')
+    .split('|')
+
+  // grow summary within buffer
+  let summary = ''
+  while (summary.length < length - buffer && sections.length > 0) {
+    const el = sections.shift() || ''
+
+    const addition =
+      el.length + summary.length > length + buffer
+        ? `${el.substring(0, length - summary.length)}...`
+        : el
+
+    summary = summary.concat(addition)
+  }
+
+  return summary
+}
+
+/**
+ * Removes leading and trailing line breaks from (Quill's) HTML string.
+ */
+export const trimLineBreaks = (html: string) => {
+  const LINE_BREAK = '<p><br></p>'
+  const re = new RegExp(`(^(${LINE_BREAK})*)|((${LINE_BREAK})*$)`, 'g')
+  return html.replace(re, '')
+}