388 lines
13 KiB
HTML
388 lines
13 KiB
HTML
<!DOCTYPE HTML>
|
||
<html>
|
||
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
|
||
<meta name="HandheldFriendly" content="True">
|
||
<link rel="icon" sizes="192x192" href="https://mgrove.uk/logo.png">
|
||
|
||
<!-- add to homescreen for Chrome on Android -->
|
||
<meta name="mobile-web-app-capable" content="yes">
|
||
<link rel="icon" sizes="192x192" href="https://mgrove.uk/logo.png">
|
||
|
||
<!-- add to homescreen for Safari on iOS -->
|
||
<meta name="apple-mobile-web-app-capable" content="yes">
|
||
<meta name="apple-mobile-web-app-status-bar-style" content="black">
|
||
<meta name="apple-mobile-web-app-title" content="BBC Young Reporter Article Generator">
|
||
<link rel="apple-touch-icon-precomposed" href="https://mgrove.uk/logo.png">
|
||
|
||
<!-- tile icon & colour for Windows 8 -->
|
||
<meta name="msapplication-TileImage" content="https://mgrove.uk/logo.png">
|
||
<meta name="msapplication-TileColor" content="#c72a32">
|
||
|
||
<!-- page info -->
|
||
<title>BBC Young Reporter Article Generator | Matthew Grove</title>
|
||
<meta name="description" content="A tool to create markdown files from news articles and their metadata for uploading to the Reading School BBC Young Reporter website.">
|
||
<meta name="keywords" content="" />
|
||
|
||
<!-- stylesheets -->
|
||
<link rel="stylesheet" href="/assets/css/main.css" />
|
||
|
||
<!-- Global site tag (gtag.js) - Google Analytics -->
|
||
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-124505000-1" type="text/javascript"></script>
|
||
<script type="text/javascript">
|
||
window.dataLayer = window.dataLayer || [];
|
||
function gtag() { dataLayer.push(arguments); }
|
||
gtag('js', new Date());
|
||
gtag('config', 'UA-124505000-2');
|
||
</script>
|
||
</head>
|
||
|
||
<script src="/assets/js/jquery.min.js"></script>
|
||
|
||
<body class="is-preload">
|
||
|
||
<!-- Header -->
|
||
<header id="header">
|
||
<img src="https://mgrove.uk/logo-clear-square.png" class="logo" />
|
||
<a class="logo" href="/">Matthew Grove</a>
|
||
<nav>
|
||
<a href="#menu">Menu</a>
|
||
</nav>
|
||
</header>
|
||
|
||
<!-- Nav -->
|
||
<nav id="menu">
|
||
<ul class="links">
|
||
<li><a href="/" >Home</a></li>
|
||
<li><a href="https://blog.mgrove.uk">Blog</a></li>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<li><a href="/young-reporter/" class="current-page-link"
|
||
>BBC Young Reporter Article Generator</a></li>
|
||
|
||
|
||
|
||
|
||
<li><a href="/comsci/" >Computer Science</a></li>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<li><a href="/luhn-algorithm/" >Luhn Algorithm</a></li>
|
||
|
||
|
||
|
||
|
||
<li><a href="/site-theme/" >Site Theme</a></li>
|
||
|
||
|
||
</ul>
|
||
</nav>
|
||
|
||
<div id="cookies">
|
||
<p>Just to let you know, I use cookies on my site.</p>
|
||
<p><a href="javascript:void(0);" id="close-cookies">OK</a></p>
|
||
</div>
|
||
|
||
<!-- Heading -->
|
||
<div id="heading">
|
||
<h1>BBC Young Reporter Article Generator</h1>
|
||
</div>
|
||
|
||
<!-- Main -->
|
||
<section id="main" class="wrapper">
|
||
<div class="inner">
|
||
<div class="content">
|
||
<h3 id="prerequisites">Prerequisites</h3>
|
||
|
||
<p>Before you begin, ensure you have, as a minimum:</p>
|
||
<ul>
|
||
<li>a headline,</li>
|
||
<li>the name(s) of the author(s),</li>
|
||
<li>a header image, which will be shown behind the headline (so the content of this image can’t be vital, like a graph),</li>
|
||
<li>a caption for your header image,</li>
|
||
<li>the copyright attribution for your header image,</li>
|
||
<li>a brief description (one or two short sentences) of your article, and</li>
|
||
<li>your article content.</li>
|
||
</ul>
|
||
|
||
<hr />
|
||
|
||
<h3 id="instructions">Instructions</h3>
|
||
|
||
<p>Fill in the fields below, and then click the <em>download</em> button to generate a file to be uploaded to Reading School’s BBC Young Reporter website.</p>
|
||
|
||
<p>Give the authors’ names in the format <code class="language-plaintext highlighter-rouge">First_Name Last_Initial</code>, and separate multiple authors with a comma - e.g. <code class="language-plaintext highlighter-rouge">John D, Emma S</code>.</p>
|
||
|
||
<ul>
|
||
<li>If there are any headings inside your article, please place <code class="language-plaintext highlighter-rouge"># </code> in front of them.</li>
|
||
<li>For subtitles, use <code class="language-plaintext highlighter-rouge">## </code>, as so on for smaller headings, up to and including <code class="language-plaintext highlighter-rouge">###### </code>.</li>
|
||
<li>For bullet points, use <code class="language-plaintext highlighter-rouge">* </code>, and for indented bullets, increase the indent using the tab button on your keyboard.</li>
|
||
<li>For numbered lists, use the numbers/letters: e.g. <code class="language-plaintext highlighter-rouge">1. </code>.</li>
|
||
</ul>
|
||
|
||
<p>Note the requirement for spaces after each of the above items - for example:</p>
|
||
|
||
<pre><code>### My Heading
|
||
|
||
* Numbered item</code></pre>
|
||
|
||
<p>will produce:</p>
|
||
|
||
<blockquote>
|
||
<h3>My Heading</h3>
|
||
|
||
<ol>
|
||
<li>Numbered item</li>
|
||
</ol>
|
||
|
||
</blockquote>
|
||
|
||
<p>Other formatting can be done with the following:</p>
|
||
|
||
<ul>
|
||
<li>For italics, use <code class="language-plaintext highlighter-rouge">*my italic text*</code>.</li>
|
||
<li>For bold, use <code class="language-plaintext highlighter-rouge">**my bold text**</code>.</li>
|
||
<li>For bold and italics, use <code class="language-plaintext highlighter-rouge">***my bold, italic text***</code>.</li>
|
||
<li>For links, use <code class="language-plaintext highlighter-rouge">[text to show in article](URL)</code>.</li>
|
||
<li>To include an extra image (besides the cover image), use:</li>
|
||
</ul>
|
||
<pre><code>{% include image.html id=ID_OF_IMAGE caption="IMAGE_CAPTION" copyright="IMAGE_COPYRIGHT" %}</code></pre>
|
||
<p>replacing <code class="language-plaintext highlighter-rouge">ID_OF_IMAGE</code> with a unique ID for the image in your article - start at 1 for the first image (excluding the cover image).</p>
|
||
|
||
<p>The cover image for your article must be a JPEG image, and have the <code class="language-plaintext highlighter-rouge">jpg</code> file extension. If your image is a PNG, you can <a href="https://png2jpg.com/">convert it using an online tool</a>. The file name must also be the same as your article’s file name. This will be provided to you when you download the file from this page. E.g. if the file you download from this page is <code class="language-plaintext highlighter-rouge">news-article.md</code> then your cover image must be <code class="language-plaintext highlighter-rouge">news-article.jpg</code> (capital letters <strong>DO</strong> matter).</p>
|
||
|
||
<p>Any extra images for your article must be in the format: <code class="language-plaintext highlighter-rouge">ARTICLE_FILE_NAME--extra-IMAGE_ID.jpg</code>, where you replace <code class="language-plaintext highlighter-rouge">ARTICLE_FILE_NAME</code> with the file name you used for the cover image, and <code class="language-plaintext highlighter-rouge">IMAGE_ID</code> with the ID you gave the image when you inserted it into your article’s body, as seen above. E.g.: <code class="language-plaintext highlighter-rouge">news-article--extra-1.jpg</code>.</p>
|
||
|
||
<hr />
|
||
|
||
<h3 id="example">Example</h3>
|
||
|
||
<pre><code># Headline
|
||
|
||
## Heading2
|
||
|
||
### Heading3
|
||
|
||
#### Heading4
|
||
|
||
##### Heading5
|
||
|
||
###### Heading6
|
||
|
||
Some text.
|
||
|
||
1. Numbered item 1
|
||
2. **Numbered item 2**
|
||
* *Bullet 1*
|
||
* Bullet 2
|
||
|
||
***Bold & italics***
|
||
|
||
A link to [Google](https://google.com).</code></pre>
|
||
|
||
<p>Will produce:</p>
|
||
|
||
<blockquote>
|
||
<h1>Headline</h1>
|
||
|
||
<h2>Heading2</h2>
|
||
|
||
<h3>Heading3</h3>
|
||
|
||
<h4>Heading4</h4>
|
||
|
||
<h5>Heading5</h5>
|
||
|
||
<h6>Heading6</h6>
|
||
|
||
<p>Some text.</p>
|
||
|
||
<ol>
|
||
<li>Numbered item 1</li>
|
||
<li><b>Numbered item 2</b></li>
|
||
</ol>
|
||
<ul>
|
||
<li><i>Bullet 1</i></li>
|
||
<li>Bullet 2</li>
|
||
</ul>
|
||
|
||
<p><b><i>Bold & italics</i></b></p>
|
||
|
||
A link to <a href="https://google.com">Google</a>.
|
||
</blockquote>
|
||
|
||
<hr />
|
||
|
||
<h3 id="generator">Generator</h3>
|
||
|
||
<form onreset="if (!($('form a.submit').hasClass('disabled'))) $('form a.submit').addClass('disabled');">
|
||
<div class="row gtr-uniform">
|
||
<div class="col-6 col-12-xsmall">
|
||
<input type="text" id="headline" placeholder="Headline" />
|
||
</div>
|
||
<div class="col-6 col-12-xsmall">
|
||
<input type="text" id="authors" placeholder="Authors" />
|
||
</div>
|
||
<div class="col-6 col-12-xsmall">
|
||
<input type="text" id="image-caption" placeholder="Image caption" />
|
||
</div>
|
||
<div class="col-6 col-12-xsmall">
|
||
<input type="text" id="image-copyright" placeholder="Image copyright" />
|
||
</div>
|
||
<!-- Break -->
|
||
<div class="col-12">
|
||
<textarea id="article-description" placeholder="Article description" rows="2"></textarea>
|
||
</div>
|
||
<div class="col-12">
|
||
<textarea id="article-content" placeholder="Article content" rows="20"></textarea>
|
||
</div>
|
||
<!-- Break -->
|
||
<div class="col-12">
|
||
<ul class="actions">
|
||
<li><a href="javascript:downloadFile();" class="submit button primary icon fa-download">Download</a></li>
|
||
<li><input type="reset" value="Reset" /></li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</form>
|
||
|
||
<script>
|
||
function checkFieldStatuses() {
|
||
var input_elements = $("form input[type='text']");
|
||
var textarea_elements = $("form textarea");
|
||
var elements = $.merge($("form input[type='text']"), $("form textarea"));
|
||
any_empty = false;
|
||
for (var i = 0, element; element = elements[i++];) {
|
||
if (element.value === "") {
|
||
any_empty = true;
|
||
break;
|
||
}
|
||
}
|
||
if (!any_empty && $("form a.submit").hasClass("disabled")) {
|
||
$("form a.submit").removeClass("disabled");
|
||
return "removed class";
|
||
} else if (any_empty && !($("form a.submit").hasClass("disabled"))) {
|
||
$("form a.submit").addClass("disabled");
|
||
return "added class";
|
||
}
|
||
}
|
||
|
||
checkFieldStatuses();
|
||
document.addEventListener("mouseup", function(event){
|
||
checkFieldStatuses();
|
||
}, true);
|
||
$("form").keyup(function(event){
|
||
checkFieldStatuses();
|
||
});
|
||
|
||
function downloadFile(){
|
||
var today = new Date();
|
||
var dd = String(today.getDate()).padStart(2, '0');
|
||
var mm = String(today.getMonth() + 1).padStart(2, '0');
|
||
var yyyy = today.getFullYear();
|
||
var hours = today.getHours();
|
||
var minutes = today.getMinutes();
|
||
var date = yyyy + "-" + mm + "-" + dd + " " + hours + ":" + minutes
|
||
|
||
var file_name = $("#headline")[0].value.replace(/[.,\/#!$%\^&\*;:{}=\-_`~()]/g,"").replace(/\s{2,}/g," ").replace(/\s+/g,"-").toLowerCase() + ".md";
|
||
var text = `---
|
||
title: '` + $("#headline")[0].value + `'
|
||
date: ` + date + `
|
||
authors: ` + $("#authors")[0].value + `
|
||
image-caption: ` + $("#image-caption")[0].value + `
|
||
copyright: ` + $("#image-copyright")[0].value + `
|
||
description: ` + $("#article-description")[0].value + `
|
||
---
|
||
|
||
` + $("#article-content")[0].value;
|
||
|
||
var element = document.createElement("a");
|
||
element.setAttribute("href", "data:text/plain;charset=utf-8," + encodeURIComponent(text));
|
||
element.setAttribute("download", file_name);
|
||
|
||
element.style.display = "none";
|
||
document.body.appendChild(element);
|
||
|
||
element.click();
|
||
|
||
document.body.removeChild(element);
|
||
}
|
||
|
||
$("form input[type='text']").keypress(function(event) {
|
||
if (event.defaultPrevented) {
|
||
return;
|
||
}
|
||
|
||
if (event.key === "Enter") {
|
||
event.preventDefault();
|
||
}
|
||
});
|
||
</script>
|
||
|
||
<style>
|
||
blockquote {
|
||
font-style: normal;
|
||
}
|
||
</style>
|
||
|
||
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Footer -->
|
||
<footer id="footer">
|
||
<div class="inner">
|
||
<div class="content">
|
||
<section>
|
||
<h3>Matthew Grove</h3>
|
||
<p>Software engineer & amateur photographer from Surrey, UK.</p>
|
||
<p><a href="https://github.com/mgrove36/demo-code/tree/master/young-reporter/">View this page on GitHub.</a></p>
|
||
</section>
|
||
<section>
|
||
<h4>Other Links</h4>
|
||
<ul class="plain">
|
||
<li><a href="https://instagram.com/mgrove36.photos" target="_blank"><i
|
||
class="icon fa-camera"> </i>Photography</a></li>
|
||
<li><a href="https://instagram.com/morganandmeganbichons" target="_blank"><i
|
||
class="icon fa-paw"> </i>Dogs</a></li>
|
||
<li><a href="mailto:me@mgrove.uk"><i class="icon fa-envelope"> </i>Email me</a></li>
|
||
</ul>
|
||
</section>
|
||
<section>
|
||
<h4>Social Media</h4>
|
||
<ul class="plain">
|
||
<li><a href="https://github.com/mgrove36" target="_blank"><i class="icon fa-github"> </i>Github</a></li>
|
||
<li><a href="https://twitter.com/mgrove36" target="_blank"><i class="icon fa-twitter"> </i>Twitter</a></li>
|
||
<li><a href="https://instagram.com/mgrove36" target="_blank"><i class="icon fa-instagram"> </i>Instagram</a></li>
|
||
<li><a href="https://facebook.com/mgrove36" target="_blank"><i class="icon fa-facebook"> </i>Facebook</a></li>
|
||
</ul>
|
||
</section>
|
||
</div>
|
||
<div class="copyright">
|
||
© Matthew Grove 2020.
|
||
</div>
|
||
</div>
|
||
</footer>
|
||
|
||
<!-- Scripts -->
|
||
<script src="/assets/js/cookies.js"></script>
|
||
<script src="/assets/js/util.js"></script>
|
||
<script src="/assets/js/main.js"></script>
|
||
|
||
</body>
|
||
|
||
</html> |