Skip to content

Commit

Permalink
Merge pull request steemit#460 from steemit/develop
Browse files Browse the repository at this point in the history
release 0.0.20161011
  • Loading branch information
roadscape authored Oct 11, 2016
2 parents 90eb059 + 80bc8eb commit dea1a02
Showing 60 changed files with 5,210 additions and 815 deletions.
3 changes: 2 additions & 1 deletion README.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
# Steemit.com
Steemit.com is the react.js web interface to the world's first and best blockchain-based social media platform. It uses [STEEM](https://github.com/steemit/steem), a blockchain powered by Graphene 2.0 technology to store JSON-based content for a plethora of web applications.

========
Steemit.com is the react.js web interface to the world's first and best blockchain-based social media platform. It uses [STEEM](https://github.com/steemit/steem), a blockchain powered by Graphene 2.0 technology to store JSON-based content for a plethora of web applications.

## Why would I want to use Steemit.com?
* Learning how to build blockchain-based web applications using STEEM as a content storage mechanism in react.js
136 changes: 136 additions & 0 deletions app/Translator.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,136 @@
import React from 'react';
import isString from 'lodash/isString';
import isObject from 'lodash/isObject';
import isUndefined from 'lodash/isUndefined';
import { IntlProvider, addLocaleData, injectIntl } from 'react-intl';

// most of this code creates a wrapper for i18n API.
// this is needed to make i18n future proof

/*
module exports two functions: translate and translateHtml
usage example:
translate('reply_to_user', {username: 'undeadlol1') == 'Reply to undeadlol1'
translateHtml works the same, expcept it renders string with html tags in it
*/

// locale data is needed for various messages, ie 'N minutes ago'
import enLocaleData from 'react-intl/locale-data/en';
import ruLocaleData from 'react-intl/locale-data/ru';
import frLocaleData from 'react-intl/locale-data/fr';
import esLocaleData from 'react-intl/locale-data/es';
import itLocaleData from 'react-intl/locale-data/it';
addLocaleData([...enLocaleData, ...ruLocaleData, ...frLocaleData, ...esLocaleData, ...itLocaleData]);

// Our translated strings
import { en } from './locales/en';
import { ru } from './locales/ru';
import { fr } from './locales/fr';
import { es } from './locales/es';
import { it } from './locales/it';
const translations = {
en: en,
ru: ru,
fr: fr,
es: es,
it: it
}

// exported function placeholders
// this is needed for proper export before react-intl functions with locale data,
// will be properly created (they depend on react props and context,
// which is not available until component is being created)
let translate = () => {};
let translateHtml = () => {};
let translatePlural = () => {};

// react-intl's formatMessage and formatHTMLMessage functions depend on context(this is where strings are stored)
// thats why we:
// 1) create instance of <IntlProvider /> which wraps our application and creates react context (see "Translator" component below)
// 2) create <DummyComponentToExportProps /> inside <IntlProvider /> (the "Translator" component)
// 3) now we have proper context which we use to export translate() and translateHtml() to be used anywhere
// all of this shenanigans are needed because many times translations are needed outside of components(in reducers and redux "connect" functions)
// but since react-intl functions depends on components context it would be not possible

class DummyComponentToExportProps extends React.Component {

render() { // render hidden placeholder
return <span hidden>{' '}</span>
}

// IMPORTANT
// use 'componentWillMount' instead of 'componentDidMount',
// or there will be all sorts of partially renddered components
componentWillMount() {
// assign functions after component is created (context is picked up)
translate = (...params) => this.translateHandler('string', ...params)
translateHtml = (...params) => this.translateHandler('html', ...params)
translatePlural = (...params) => this.translateHandler('plural', ...params)
}

translateHandler(translateType, id, values, options) {
const { formatMessage, formatHTMLMessage, formatPlural } = this.props.intl
// choose which method of rendering to choose: normal string or string with html
// handler = translateType === 'string' ? formatMessage : formatHTMLMessage
let handler
switch (translateType) {
case 'string':
handler = formatMessage; break
case 'html':
handler = formatHTMLMessage; break
case 'plural':
handler = formatPlural; break
default:
throw new Error('unknown translate handler type')
}
// check if right parameters were used before running function
if (isString(id)) {
if (!isUndefined(values) && !isObject(values)) throw new Error('translating function second parameter must be an object!');
// map parameters for react-intl,
// which uses formatMessage({id: 'stringId', values: {some: 'values'}, options: {}}) structure
else return handler({id}, values, options)
}
else throw new Error('translating function first parameter must be a string!');
}
}

// inject translation functions through 'intl' prop (not using decorator)
DummyComponentToExportProps = injectIntl(DummyComponentToExportProps)

// actual wrapper for application
class Translator extends React.Component {
render() {
/* LANGUAGE PICKER */

// Define user's language. Different browsers have the user locale defined
// on different fields on the `navigator` object, so we make sure to account
// for these different by checking all of them
let language = 'en';
// while Server Side Rendering is in process, 'navigator' is undefined
if (process.env.BROWSER) {
language = navigator ? (navigator.languages && navigator.languages[0])
|| navigator.language
|| navigator.userLanguage
: 'en';
}

//Split locales with a region code (ie. 'en-EN' to 'en')
const languageWithoutRegionCode = language.toLowerCase().split(/[_-]+/)[0];

// TODO: don't forget to add Safari polyfill

// to ensure dynamic language change, "key" property with same "locale" info must be added
// see: https://github.com/yahoo/react-intl/wiki/Components#multiple-intl-contexts
let messages = translations[languageWithoutRegionCode]
return <IntlProvider locale={languageWithoutRegionCode} key={languageWithoutRegionCode} messages={messages}>
<div>
<DummyComponentToExportProps />
{this.props.children}
</div>
</IntlProvider>
}
}

export { translate, translateHtml, translatePlural }

export default Translator
7 changes: 6 additions & 1 deletion app/assets/stylesheets/app.scss
Original file line number Diff line number Diff line change
@@ -37,6 +37,10 @@ a, path, circle {
clear: right;
}

.clear-left {
clear: left;
}

.clear-both {
clear: both;
}
@@ -104,6 +108,7 @@ label {

@media print {
.noPrint {
display:none;
display: none;
}
}

62 changes: 50 additions & 12 deletions app/assets/stylesheets/markdown.scss
Original file line number Diff line number Diff line change
@@ -1,4 +1,26 @@
.Markdown {
font-family: 'Source Serif Pro', serif;
font-size: 120%;

line-height: 150%;
}

// used for comments
.Markdown.MarkdownViewer--small {
font-family: inherit;
font-size: 110%;

img {
max-width: 400px;
max-height: 400px;
}
}

.Markdown, .ReplyEditor__body.rte {
overflow-wrap: break-word;
word-wrap: break-word;
word-break: break-word;
hyphens: auto;

h1, h2, h3, h4, h5, h6 {
font-family: 'Source Serif Pro', serif;
@@ -27,11 +49,12 @@
}

code {
padding: 0.25rem 0.5rem;
font-size: 84%;
border-radius: 2px;
border-color: $light-gray;
background-color: #efefef;
padding: 0.2rem;
font-size: 85%;
border-radius: 3px;
border: none;
background-color: #F4F4F4;
font-weight: inherit;
}

pre > code {
@@ -45,14 +68,29 @@
strong {
font-weight: 600;
}

img {
max-width: 400px;
max-height: 400px;

ol, ul {
margin-left: 2rem;
}
.Card {
border-radius: 2px;
border-color: $light-gray;

table td {
word-break: normal; // issue #146
}

p {
font-size: 100%;
line-height: 150%;
}

img {
width: auto;
max-width: 100%;
height: auto;
max-height: none;
}

iframe {
max-width: 100%;
max-height: 75vw;
}
}
Loading

0 comments on commit dea1a02

Please sign in to comment.