Skip to content
Snippets Groups Projects
Commit f5c51595 authored by Isabella Skořepová's avatar Isabella Skořepová
Browse files

Split Base and Html

parent 27b3744e
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
theme-source/partials/base.js
+ 251
− 418
View file @ f5c51595
......@@ -2,216 +2,61 @@ import React from 'react'
import { SymbolSearch, SymbolMenu, SymbolFacebook } from './svgs'
import { Search } from './search'
export function Base({
prehead = null,
head = null,
metadata = {},
canonicalURL,
config,
children,
footerlink = null,
bodyClassName,
}) {
export function Base(props) {
const { config, children, footerlink = null, ...htmlProps } = props
return (
<html lang="en">
<head>
<meta httpEquiv="Content-Type" content="text/html; charset=UTF-8" />
{prehead}
<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 className={bodyClassName}>
{/* % 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} />
<Html {...htmlProps} config={config}>
{/* % 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 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: `
<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() {
......@@ -248,132 +93,16 @@ export function Base({
});
});
`,
}}
/>
{/* 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">
}}
/>
{/* 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
......@@ -390,14 +119,11 @@ export function Base({
</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>
<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>
......@@ -424,76 +150,184 @@ export function Base({
</li>
</ul>
</div>
</nav>
<Search />
{children}
</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>
<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" />
{/* 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>
</div>
</div>
<div className="container s6">
Stránky pro OK1KVK vytvořila{' '}
</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
className="orange-text text-lighten-3"
style={{
display: 'block',
float: 'left',
marginTop: '-.5em',
}}
target="_blank"
href="https://codewitchbella.com"
href="https://www.facebook.com/ok1kvk"
>
Isabella Skořepová
</a>{' '}
2015-2020
<SymbolFacebook color="white" size="2em" />
</a>
</div>
</footer>
</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 src={`${config.baseurl}/theme/js/materialize.js`}></script>
<script src={`${config.baseurl}/theme/js/init.js`}></script>
<script
dangerouslySetInnerHTML={{
__html: `
<script
dangerouslySetInnerHTML={{
__html: `
(function($) {
var onresize = function(){
$("footer").height("auto");
......@@ -503,12 +337,12 @@ export function Base({
$(document).load(onresize);
$(document).ready(onresize);
})(jQuery);`,
}}
/>
{config.debug ? null : (
<script
dangerouslySetInnerHTML={{
__html: `
}}
/>
{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)
......@@ -517,14 +351,13 @@ export function Base({
ga('create', 'UA-74646565-1', 'auto');
ga('send', 'pageview');
`,
}}
/>
)}
<script
src={`${config.baseurl}/theme/lightbox2/dist/js/lightbox.min.js`}
></script>
</div>
</body>
</html>
}}
/>
)}
<script
src={`${config.baseurl}/theme/lightbox2/dist/js/lightbox.min.js`}
></script>
</div>
</Html>
)
}
theme-source/partials/html.js 0 → 100644
+ 165
− 0
View file @ f5c51595
import React from 'react'
import { SymbolSearch, SymbolMenu, SymbolFacebook } from './svgs'
import { Search } from './search'
export function Html({
prehead = null,
head = null,
metadata = {},
canonicalURL,
config,
children,
bodyClassName,
}) {
return (
<html lang="en">
<head>
<meta httpEquiv="Content-Type" content="text/html; charset=UTF-8" />
{prehead}
<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 className={bodyClassName}>{children}</body>
</html>
)
}
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment