Commit 266ef468 authored by Isabella Skořepová's avatar Isabella Skořepová
Browse files

Convert most of tag page to react

parent 151f2897
import React from 'react'
import { SymbolSearch, SymbolMenu, SymbolFacebook } from './svgs'
import { Search } from './search'
export function Base({
head = null,
metadata = {},
canonicalURL,
config,
children,
footerlink = null,
}) {
return (
<html lang="en">
<head>
<meta httpEquiv="Content-Type" content="text/html; charset=UTF-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, maximum-scale=1.0"
/>
<title>{metadata.title || 'Radioklub OK1KVK'}</title>
<link rel="canonical" href={canonicalURL} />
<meta
property="og:title"
content={metadata.title || 'Radioklub OK1KVK'}
/>
<meta property="og:locale" content="cs_CZ" />
<meta property="og:url" content={canonicalURL} />
<meta property="og:site_name" content="ok1kvk.cz" />
<meta property="fb:app_id" content="1419886504744454" />
<link
href="https://fonts.googleapis.com/css?family=Roboto&subset=latin,latin-ext"
rel="stylesheet"
type="text/css"
/>
<link
href={`${config.baseurl}/theme/style.css?v=2`}
type="text/css"
rel="stylesheet"
media="screen,projection"
/>
<link
href={`${config.baseurl}/theme/highlight.css`}
type="text/css"
rel="stylesheet"
media="screen,projection"
/>
<link
href={`${config.baseurl}/theme/lightbox2/dist/css/lightbox.min.css`}
type="text/css"
rel="stylesheet"
media="screen,projection"
/>
<script
src={`${config.baseurl}/theme/js/jquery-1.12.0.min.js`}
></script>
<link
rel="apple-touch-icon"
sizes="57x57"
href={`${config.baseurl}/theme/favicons/apple-touch-icon-57x57.png?v=3`}
/>
<link
rel="apple-touch-icon"
sizes="60x60"
href={`${config.baseurl}/theme/favicons/apple-touch-icon-60x60.png?v=3`}
/>
<link
rel="apple-touch-icon"
sizes="72x72"
href={`${config.baseurl}/theme/favicons/apple-touch-icon-72x72.png?v=3`}
/>
<link
rel="apple-touch-icon"
sizes="76x76"
href={`${config.baseurl}/theme/favicons/apple-touch-icon-76x76.png?v=3`}
/>
<link
rel="apple-touch-icon"
sizes="114x114"
href={`${config.baseurl}/theme/favicons/apple-touch-icon-114x114.png?v=3`}
/>
<link
rel="apple-touch-icon"
sizes="120x120"
href={`${config.baseurl}/theme/favicons/apple-touch-icon-120x120.png?v=3`}
/>
<link
rel="apple-touch-icon"
sizes="144x144"
href={`${config.baseurl}/theme/favicons/apple-touch-icon-144x144.png?v=3`}
/>
<link
rel="apple-touch-icon"
sizes="152x152"
href={`${config.baseurl}/theme/favicons/apple-touch-icon-152x152.png?v=3`}
/>
<link
rel="apple-touch-icon"
sizes="180x180"
href={`${config.baseurl}/theme/favicons/apple-touch-icon-180x180.png?v=3`}
/>
<link
rel="icon"
type="image/png"
href={`${config.baseurl}/theme/favicons/favicon-32x32.png?v=3`}
sizes="32x32"
/>
<link
rel="icon"
type="image/png"
href={`${config.baseurl}/theme/favicons/android-chrome-192x192.png?v=3`}
sizes="192x192"
/>
<link
rel="icon"
type="image/png"
href={`${config.baseurl}/theme/favicons/favicon-96x96.png?v=3`}
sizes="96x96"
/>
<link
rel="icon"
type="image/png"
href={`${config.baseurl}/theme/favicons/favicon-16x16.png?v=3`}
sizes="16x16"
/>
<link
rel="manifest"
href={`${config.baseurl}/theme/favicons/manifest.json?v=3`}
/>
<link
rel="mask-icon"
href={`${config.baseurl}/theme/favicons/safari-pinned-tab.svg?v=3`}
color="#0288d1"
/>
<link
rel="shortcut icon"
href={`${config.baseurl}/theme/favicons/favicon.ico?v=3`}
/>
<meta name="msapplication-TileColor" content="#2d89ef" />
<meta
name="msapplication-TileImage"
content={`${config.baseurl}/theme/favicons/mstile-144x144.png?v=3`}
/>
<meta
name="msapplication-config"
content={`${config.baseurl}/theme/favicons/browserconfig.xml?v=3`}
/>
<meta name="theme-color" content="#0288d1" />
{config.devel ? (
<script
src={`${config.baseurl}/theme/js/socket.io-1.4.5.js`}
></script>
) : null}
{head}
</head>
<body>
{/* % block bodyattr %}{% endblock % */}
<div id="all">
{/* Top nav */}
<nav
className="supernav"
role="navigation"
style={{ zIndex: 5, position: 'absolute' }}
>
<div className="nav-wrapper container">
<a
data-activates="nav-mobile"
className="menu-icon hide-on-med-and-up"
style={{ float: 'left' }}
>
<SymbolMenu color="#fff" size={false} />
</a>
<div style={{ zIndex: 2 }} className="brand-logo">
<a id="logo-container" href={`${config.baseurl}/tag/vse/1/`}>
<img
className="hide-on-small-and-up"
src={`${config.baseurl}/theme/icon56.png`}
/>
<img
className="hide-on-med-and-up hide-on-ultra-small"
src={`${config.baseurl}/theme/logo56.png`}
/>
<img
className="hide-on-small-only"
src={`${config.baseurl}/theme/logo64.png`}
/>
</a>
</div>
<div className="toplinks">
<a className="hide-on-small-only left" id="aktuality">
Aktuality
</a>
<a className="hide-on-small-only left" id="clanky">
Články
</a>
<a className="hide-on-small-only left" id="o-nas">
O nás
</a>
<a className="search-icon left">
<SymbolSearch color="#fff" size={false} />
</a>
</div>
</div>
</nav>
<script
dangerouslySetInnerHTML={{
__html: `
$(document).ready(function() {
$(".menu-icon").sideNav();
$("#o-nas").click(function() {
var body = $("body");
body.removeClass("show-subnav2");
body.removeClass("show-subnav3");
if(body.hasClass("show-subnav1"))
body.removeClass("show-subnav1");
else
body.addClass("show-subnav1");
});
$("#aktuality").click(function() {
var body = $("body");
body.removeClass("show-subnav1");
body.removeClass("show-subnav3");
if(body.hasClass("show-subnav2"))
body.removeClass("show-subnav2");
else
body.addClass("show-subnav2");
});
$("#clanky").click(function() {
var body = $("body");
body.removeClass("show-subnav1");
body.removeClass("show-subnav2");
if(body.hasClass("show-subnav3"))
body.removeClass("show-subnav3");
else
body.addClass("show-subnav3");
})
$("body").click(function(e) {
if(!($(e.target).parents("a").length || $(e.target).is("a"))) {
$("body").removeClass("show-subnav2").removeClass("show-subnav1");
}
});
});
`,
}}
/>
{/* Side nav */}
<ul id="nav-mobile" className="side-nav collapsible">
<li className="no-padding">
<a className="collapsible-header waves-effect waves-teal">
Aktuality
</a>
<div className="collapsible-body">
<ul>
<li>
<a href={`${config.baseurl}/tag/aktuality`}>
Všechny aktuality
</a>
</li>
<li>
<a href={`${config.baseurl}/tag/pozvanky`}>Pozvánky</a>
</li>
<li>
<a href={`${config.baseurl}/tag/stalo-se`}>Stalo se</a>
</li>
<li>
<a href={`${config.baseurl}/tag/zavody`}>Závody</a>
</li>
</ul>
</div>
</li>
<li className="no-padding">
<a className="collapsible-header waves-effect waves-teal">
Články
</a>
<div className="collapsible-body">
<ul>
<li>
<a href={`${config.baseurl}/tag/clanky`}>Všechny články</a>
</li>
<li>
<a href={`${config.baseurl}/tag/programovani`}>
Programování
</a>
</li>
<li>
<a href={`${config.baseurl}/tag/mikroprocesory`}>
Mikroprocesory
</a>
</li>
<li>
<a href={`${config.baseurl}/tag/konstrukce`}>Konstrukce</a>
</li>
<li>
<a href={`${config.baseurl}/tag/technicke-clanky`}>
Technické články
</a>
</li>
<li>
<a href={`${config.baseurl}/tag/zajimavosti`}>
Zajímavosti
</a>
</li>
</ul>
</div>
</li>
<li className="no-padding">
<a className="collapsible-header waves-effect waves-teal">
O nás
</a>
<div className="collapsible-body">
<ul>
<li>
<a href={`${config.baseurl}/clanek/o-radioklubu`}>
O Radioklubu
</a>
</li>
<li>
<a href={`${config.baseurl}/clanek/kontakt`}>Kontakt</a>
</li>
<li>
<a href={`${config.baseurl}/clanek/krouzek-mladeze`}>
Kroužek mládeže
</a>
</li>
<li>
<a href={`${config.baseurl}/clanek/pro-cleny-rk`}>
Pro členy RK
</a>
</li>
</ul>
</div>
</li>
</ul>
{/* Lower nav */}
<nav
className="subnav subnav1 hide-on-small-and-down"
role="navigation"
>
<div className="nav-wrapper container">
<ul className="right">
<li>
<a href={`${config.baseurl}/clanek/o-radioklubu`}>
O Radioklubu
</a>
</li>
<li>
<a href={`${config.baseurl}/clanek/kontakt`}>Kontakt</a>
</li>
<li>
<a href={`${config.baseurl}/clanek/krouzek-mladeze`}>
Kroužek mládeže
</a>
</li>
<li>
<a href={`${config.baseurl}/clanek/pro-cleny-rk`}>
Pro členy RK
</a>
</li>
</ul>
</div>
</nav>
{/* Lower nav 2 - Aktuality */}
<nav
className="subnav subnav2 hide-on-small-and-down"
role="navigation"
>
<div className="nav-wrapper container">
<ul className="right">
<li>
<a href={`${config.baseurl}/tag/aktuality`}>
Všechny aktuality
</a>
</li>
<li>
<a href={`${config.baseurl}/tag/pozvanky`}>Pozvánky</a>
</li>
<li>
<a href={`${config.baseurl}/tag/stalo-se`}>Stalo se</a>
</li>
<li>
<a href={`${config.baseurl}/tag/zavody`}>Závody</a>
</li>
</ul>
</div>
</nav>
{/* Lower nav 3 - Články */}
<nav
className="subnav subnav3 hide-on-small-and-down"
role="navigation"
>
<div className="nav-wrapper container">
<ul className="right">
<li>
<a href={`${config.baseurl}/tag/clanky`}>Všechny články</a>
</li>
<li>
<a href={`${config.baseurl}/tag/programovani`}>
Programování
</a>
</li>
<li>
<a href={`${config.baseurl}/tag/mikroprocesory`}>
Mikroprocesory
</a>
</li>
<li>
<a href={`${config.baseurl}/tag/konstrukce`}>Konstrukce</a>
</li>
<li>
<a href={`${config.baseurl}/tag/technicke-clanky`}>
Technické články
</a>
</li>
<li>
<a href={`${config.baseurl}/tag/zajimavosti`}>Zajímavosti</a>
</li>
</ul>
</div>
</nav>
<Search />
{children}
<footer className="page-footer blue">
<div className="container s6">
<a
className="orange-text text-lighten-3"
target="_blank"
href="https://git.ok1kvk.cz/"
>
Gitlab
</a>{' '}
|
<a
className="orange-text text-lighten-3"
target="_blank"
href="http://forum.ok1kvk.cz/"
>
Fórum
</a>{' '}
|
<a
className="orange-text text-lighten-3"
href="/clanek/webkamera/"
>
Webkamera
</a>{' '}
|
<a
className="orange-text text-lighten-3"
href="/clanek/jak-nahlasit-chybu/"
>
Jak nahlásit chybu
</a>
{footerlink}
<div style={{ display: 'inline-block', height: '1em' }}>
<a
style={{
display: 'block',
float: 'left',
marginTop: '-.5em',
}}
target="_blank"
href="https://www.facebook.com/ok1kvk"
>
<SymbolFacebook color="white" size="2em" />
</a>
</div>
</div>
<div className="container s6">
Stránky pro OK1KVK vytvořila{' '}
<a
className="orange-text text-lighten-3"
target="_blank"
href="https://codewitchbella.com"
>
Isabella Skořepová
</a>{' '}
2015-2020
</div>
</footer>
<script src={`${config.baseurl}/theme/js/materialize.js`}></script>
<script src={`${config.baseurl}/theme/js/init.js`}></script>
<script
dangerouslySetInnerHTML={{
__html: `
(function($) {
var onresize = function(){
$("footer").height("auto");
$("#content").css("margin-bottom",$("footer").height());
};
$(window).resize(onresize);
$(document).load(onresize);
$(document).ready(onresize);
})(jQuery);`,
}}
/>
{config.debug ? null : (
<script
dangerouslySetInnerHTML={{
__html: `
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-74646565-1', 'auto');
ga('send', 'pageview');
`,
}}
/>
)}
<script
src={`${config.baseurl}/theme/lightbox2/dist/js/lightbox.min.js`}
></script>
</div>
</body>
</html>
)
}
import React from 'react'
import moment from 'moment'
import { Paginator } from './paginator'
import { SymbolBackward, SymbolForward } from './svgs'
function normalize(value, defaultValue) {
if (value === null || value === undefined || value === false) {
return defaultValue
}
return value
}
function truncate(input_, length_, killwords, end) {
let input = normalize(input_, '')
const length = length_ || 255
if (input.length <= length) {
return input
}
if (killwords) {
input = input.substring(0, length)
} else {
let idx = input.lastIndexOf(' ', length)
if (idx === -1) {
idx = length
}
input = input.substring(0, idx)
}
input += end !== undefined && end !== null ? end : '...'
return input
}
function trim(str) {
return str.replace(/^\s*|\s*$/g, '')
}
function striptags(input_, preserveLinebreaks) {
const input = normalize(input_, '')
const tags = /<\/?([a-z][a-z0-9]*)\b[^>]*>|<!--[\s\S]*?-->/gi
const trimmedInput = trim(input.replace(tags, ''))
let res = ''
if (preserveLinebreaks) {
res = trimmedInput
.replace(/^ +| +$/gm, '') // remove leading and trailing spaces
.replace(/ +/g, ' ') // squash adjacent spaces
.replace(/(\r\n)/g, '\n') // normalize linebreaks (CRLF -> LF)
.replace(/\n\n\n+/g, '\n\n') // squash abnormal adjacent linebreaks
} else {
res = trimmedInput.replace(/\s+/gi, ' ')
}
return res
}
function dateFilter(date, format) {
let result
const errs = []