How to use olymp - 10 common examples
To help you get started, we’ve selected a few olymp examples, based on popular ways it is used in public projects.
Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
olymp / olymp / src / gzk / _old / views / news.js View on Github 
import React, { Component } from 'react';
import { Link, graphql, gql, withItem, withAuth, Helmet } from 'olymp';
import { Spin } from 'antd';
import { Image, SlateMate } from 'olymp-cms';
import { Gateway } from 'react-gateway';
import moment from 'moment';
const fieldNames = 'id, art, date, name, extrakt, slug, text, bild { height, width, url, crop }';
@withAuth
@graphql(gql`
query termin($slug: String) {
termin(query: { slug: { eq: $slug } }) {
${fieldNames}
}
}
`, {
options: ({ location }) => ({ variables: { slug: location.pathname.split('/news')[1] } }),
})
@withItem({ typeName: 'termin', fieldNames })
export default class News extends Component {
render() {
const { item, auth, location, save, patch } = this.props;
const readOnly = !auth.user || auth.user.einrichtung;
if (!item) return ;
// style="border-bottom-right-radius:130px;200px;"
return (import React, { Component, PropTypes } from 'react';
import { Icon, Button as AntButton, Tooltip } from 'antd';
import { styled } from 'olymp';
import Image from './image';
const ThumbContainer = styled(({ theme }) => ({
margin: '1rem',
display: 'flex',
flexFlow: 'row wrap',
justifyContent: 'space-around',
alignContent: 'space-around',
alignItems: 'baseline',
}), 'div', p => p);
const Thumb = styled(({ theme, isActive }) => ({
margin: '.25rem 0',
outline: isActive ? `2px solid ${theme.color}` : 'none',
// transform: isActive ? 'scale(1.1)' : 'none',
zIndex: isActive ? 2 : 1,
cursor: 'pointer',
position: 'relative',
/* boxShadow: '0px 0px 12px 0px rgba(0,0,0,0.75)',
':hover': {
transform: 'scale(1.2)',
transition: 'all .15s ease-in-out',
zIndex: 3,
}*/
}), 'div', ({ isActive, ...p }) => p);
const Button = styled(({ theme }) => ({
margin: '.25rem 0',import { auth, withRouter } from '../decorators';
import { useLightboxes } from '../edits/image/with-lightbox';
import PageModal from './pages/modals/page';
import MediaDetail from './media/detail';
import UploadModal from './media/upload';
import CollectionDetail from './collections/detail';
import './container.less';
const SubMenu = Menu.SubMenu;
// const MenuItemGroup = Menu.ItemGroup;
@auth
@useLightboxes
@withRouter
@graphql(gql`
query schema {
schema: __schema {
types {
name
description
interfaces {
name
}
fields {
name
type {
kind
name
}
}
}const Thumb = styled(({ theme, isActive }) => ({
margin: '.25rem 0',
outline: isActive ? `2px solid ${theme.color}` : 'none',
// transform: isActive ? 'scale(1.1)' : 'none',
zIndex: isActive ? 2 : 1,
cursor: 'pointer',
position: 'relative',
/* boxShadow: '0px 0px 12px 0px rgba(0,0,0,0.75)',
':hover': {
transform: 'scale(1.2)',
transition: 'all .15s ease-in-out',
zIndex: 3,
}*/
}), 'div', ({ isActive, ...p }) => p);
const Button = styled(({ theme }) => ({
margin: '.25rem 0',
zIndex: 1,
/*boxShadow: '0px 0px 12px 0px rgba(0,0,0,0.75)',
':hover': {
transform: 'scale(1.2)',
transition: 'all .15s ease-in-out',
zIndex: 3,
}*/
}), AntButton, p => p);
const Label = styled(({ theme }) => ({
// opacity: .75,
position: "absolute",
top: '50%',
left: '50%',
transform: "translate(-50%, -50%)",import React from 'react';
import { styled, Link } from 'olymp';
import { Icon } from 'antd';
import Image from '../../cms/cloudinary/image';
const Content = styled(({ active, disabled, theme }) => ({
display: 'flex',
alignItems: 'center',
padding: '5px 6px',
width: '100%',
minHeight: 51,
color: disabled ? theme.dark3 : theme.dark1,
// background: active ? 'linear-gradient(0deg, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.083))' : 'linear-gradient(0deg, rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.033))',
background: active && 'rgba(0, 0, 0, 0.03)',
lineHeight: '20px',
borderBottom: '1px solid rgb(233, 233, 233)',
cursor: disabled ? 'not-allowed' : 'pointer',
'> img': {
marginRight: 8,
width: 37,
height: 37,
borderRadius: 500,editable,
router,
brand,
fill,
pages,
location,
dark,
light,
} = this.props;
const { query, pathname } = location;
const navigation = !!query && query.navigation !== undefined; // null/page.id => true, undefined => false
return (
<div>
<nav>
{brand
? {brand}
: null}
<button>
router.push({
pathname,
query: { navigation: navigation ? undefined : null },
})}
className="navbar-toggler hidden-md-up"</button></nav></div>render() {
const { editable, router, brand, fill, pages, location, dark, light } = this.props;
const { query, pathname } = location;
const navigation = !!query && query.navigation !== undefined; // null/page.id => true, undefined => false
return (
<div>
<nav>
{brand ? {brand} : null}
<button> router.push({ pathname, query: { navigation: navigation ? undefined : null } })}
className="navbar-toggler hidden-md-up"
>
<span></span>
</button>
<div>
</div></nav></div>import Mark from 'slate/lib/models/mark';
import Raw from './serializer/raw';
import { Popover, Tag } from 'antd';
import { parseComponent } from '../processors';
import { styled } from 'olymp';
const deserialize = (value) => {
console.log('DESERIALIZE', value);
return Raw.deserialize(value, { terse: true });
};
const serialize = (state) => {
console.log('SERIALIZE', state);
return Raw.serialize(state, { terse: true });
};
const Highlighted = styled(() => ({
fontWeight: 'bold',
}), 'span', p => p);
const addMarks = (startChar, closeChar, markType, characters, string) => {
const mark = Mark.create({ type: markType });
let start = -startChar.length;
while (true) {
start = string.indexOf(startChar, start + startChar.length);
if (start === -1) break;
const end = string.indexOf(closeChar, start + startChar.length) + startChar.length;
const size = end === 0 ? characters.size : end;
for (let i = start; i < size; i + 1) {
let char = characters.get(i);
let { marks } = char;
marks = marks.add(mark);
char = char.set('marks', marks);import Mark from 'slate/lib/models/mark';
import Raw from './serializer/raw';
import { Popover, Tag } from 'antd';
import { parseComponent } from '../processors';
import { styled } from 'olymp';
const deserialize = (value) => {
console.log('DESERIALIZE', value);
return Raw.deserialize(value, { terse: true });
};
const serialize = (state) => {
console.log('SERIALIZE', state);
return Raw.serialize(state, { terse: true });
};
const Highlighted = styled(
() => ({
fontWeight: 'bold',
}),
'span',
p => p
);
const addMarks = (startChar, closeChar, markType, characters, string) => {
const mark = Mark.create({ type: markType });
let start = -startChar.length;
while (true) {
start = string.indexOf(startChar, start + startChar.length);
if (start === -1) { break; }
const end =
string.indexOf(closeChar, start + startChar.length) + startChar.length;
const size = end === 0 ? characters.size : end;const blockTypes = Object.keys(types).reduce((result, key) => {
if (!types[key].label) {
result[key] = types[key];
} else {
let { component, styles, editable, ...rest } = types[key];
if (styles && typeof styles === 'object') component = styled(() => styles, component, p => p);
if (styles && typeof styles === 'function') component = styled(styles, component, p => p);
result[key] = useBlockBase({ isVoid: !editable, isAtomic: true })(component);
result[key].slate = { ...result[key].slate, key, ...rest };
}
return result;
}, { });
return WrappedComponent => class UseBlockTypes extends Component {
