Skip to content

Commit

Permalink
fix: twitter card not rendering due to extra slash in the url
Browse files Browse the repository at this point in the history
  • Loading branch information
@yld-weng
yld-weng committed Aug 18, 2021
1 parent aecd8e3 commit e65ae9f
Show file tree
Hide file tree
Showing 4 changed files with 120 additions and 88 deletions.
27 changes: 13 additions & 14 deletions ...t/visualisation/2021-07-22-Millions-of-UK-residents-struggle-to-access-food/radarPlot.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -177,6 +177,18 @@ const radarPlot = () => {
]}
/>
</div>
<img
src={Dish}
alt="Food dish"
style={{
opacity: "0.15",
maxWidth: "180px",
position: "absolute",
top: "13%",
right: 0,
margin: "1.5rem"
}}
/>
<h3
style={{
right: "5%",
Expand All @@ -186,8 +198,7 @@ const radarPlot = () => {
fontSize: ".75rem",
color: "rgba(255,255,255,.75)",
width: "220px",
lineHeight: "1.6",
zIndex: "10"
lineHeight: "1.6"
}}
>
% adults experiencing hunger, <br />
Expand All @@ -198,18 +209,6 @@ const radarPlot = () => {
<br />
five UK cities.
</h3>
<img
src={Dish}
alt="Food dish"
style={{
opacity: "0.15",
maxWidth: "180px",
position: "absolute",
top: "13%",
right: 0,
margin: "1.5rem"
}}
/>
<h3 style={{ bottom: "10%", ...percentageInfo }}>21%</h3>
<h3 style={{ bottom: "20%", ...percentageInfo }}>14%</h3>
<h3 style={{ bottom: "30%", ...percentageInfo }}>&nbsp;7%</h3>
Expand Down
77 changes: 51 additions & 26 deletions src/components/blog/menuTag.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,44 +1,64 @@
import React, {useState} from 'react'
import React, { useState } from "react"
import PropTypes from "prop-types"
import { Link } from "gatsby"
import kebabCase from "lodash.kebabcase"
import { FaTags, FaAngleDown } from "react-icons/fa"
import {FiSearch} from "react-icons/fi"
import { FaTags, FaAngleDown } from "react-icons/fa"
import { FiSearch } from "react-icons/fi"
import { useLocation } from "@gatsbyjs/reach-router"


const menuTag = ({ pageContext, handleTagMenu, tagMenu }) => {
const [filterTag, setfilterTag] = useState(pageContext.allTags);
const [filterTag, setfilterTag] = useState(pageContext.allTags)

var { href } = useLocation();
if(!href) href = "";
var { href } = useLocation()
if (!href) href = ""

function searchTag(e) {
// on input, show tag menu
if(tagMenu === false) handleTagMenu();
if (tagMenu === false) handleTagMenu()

let searchWord = e.target.value.toLowerCase();
let searchTagList = pageContext.allTags.filter(function(tag) {
return tag.toLowerCase().indexOf(searchWord) != -1; // returns true or false
});
setfilterTag(searchTagList);
let searchWord = e.target.value.toLowerCase()
let searchTagList = pageContext.allTags.filter(function (tag) {
return tag.toLowerCase().indexOf(searchWord) != -1 // returns true or false
})
setfilterTag(searchTagList)
}


return (
<div id="tagMenu" className="w-full px-5 py-1 xl:py-2 text-gray-100 shadow-lg text-sm xl:hidden relative z-10 bg-white">
<div
id="tagMenu"
className="w-full px-5 py-1 xl:py-2 text-gray-100 shadow-lg text-sm xl:hidden relative z-10 bg-white"
>
<div className="overflow-hidden pt-1 pb-2">
<div>
<h1 className="inline-block text-2xl font-semibold mr-4 text-gray-900"><FaTags style={{display: "inline-block"}} /> {href.includes("/blog/tag/") ? <Link to="/blog/#read">ALL</Link> : "Tags"}</h1>
<h1 className="inline-block text-2xl font-semibold mr-4 text-gray-900">
<FaTags style={{ display: "inline-block" }} />{" "}
{href.includes("/blog/tag/") ? (
<Link to="/blog/#read">ALL</Link>
) : (
"Tags"
)}
</h1>
<div className="inline-block focus:outline-none text-gray-600 bg-white shadow px-2 rounded-lg ml-2">
<FiSearch className="inline-block text-center text-xl -mt-2" />
<input id="tagSearch" onChange={searchTag} className="py-1 pl-2 text-base focus:outline-none pr-3 text-gray-600" style={{maxWidth: "40vw"}} type="text" name="search" placeholder="Search for tags" />
<input
id="tagSearch"
onChange={searchTag}
className="py-1 pl-2 text-base focus:outline-none pr-3 text-gray-600"
style={{ maxWidth: "40vw" }}
type="text"
name="search"
placeholder="Search for tags"
/>
</div>
</div>
{/* tag menu */}
<div className={`${tagMenu ? `` : `hidden`} pt-4`}>
{filterTag.map((tag) => (
<Link key={tag} activeStyle={{ color: "white", backgroundColor: "#00aeef" }} partiallyActive={true} to={`/blog/tag/${kebabCase(tag)}`}
<Link
key={tag}
activeStyle={{ color: "white", backgroundColor: "#00aeef" }}
partiallyActive={true}
to={`/blog/tag/${kebabCase(tag)}`}
className="inline-block hover:bg-brand-blue hover:text-white py-1 px-2 m-1 bg-gray-50 text-gray-700 rounded-full 2xl:text-sm font-sans font-semibold"
>
{tag} ({pageContext.countTags[`${tag}`]})
Expand All @@ -47,18 +67,23 @@ const menuTag = ({ pageContext, handleTagMenu, tagMenu }) => {
</div>
</div>
{/* arrow button */}
<div onClick={() => handleTagMenu()} className='text-gray-900 flex justify-center text-2xl absolute top-0 right-0 mr-4 mt-4'>
<FaAngleDown className={` `} style={{transform: tagMenu ? "rotate(180deg)" : "", transition: 'all .5s ease'}} />
<div
onClick={() => handleTagMenu()}
className="text-gray-900 flex justify-center text-2xl absolute top-0 right-0 mr-4 mt-4"
>
<FaAngleDown
style={{
transform: tagMenu ? "rotate(180deg)" : "",
transition: "all .5s ease"
}}
/>
</div>
</div>

)

)
}

export default menuTag

menuTag.propTypes = {
pageContext: PropTypes.any,

}
pageContext: PropTypes.any
}
4 changes: 2 additions & 2 deletions src/utils/__tests__/shared.spec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -188,7 +188,7 @@ describe("Calculate user's local time", () => {
describe("Get share links for a MDX document", () => {
const mdxObj = {
fields: {
slug: "visualisation/22/07/2021/Millions-of-UK-residents-struggle-to-access-food",
slug: "/visualisation/22/07/2021/Millions-of-UK-residents-struggle-to-access-food",
slugOrigin:
"/2021-07-22-Millions-of-UK-residents-struggle-to-access-food/"
},
Expand All @@ -201,7 +201,7 @@ describe("Get share links for a MDX document", () => {

const mdxObjBlog = {
fields: {
slug: "blog/22/07/2021/Millions-of-UK-residents-struggle-to-access-food",
slug: "/blog/22/07/2021/Millions-of-UK-residents-struggle-to-access-food",
slugOrigin:
"/2021-07-22-Millions-of-UK-residents-struggle-to-access-food/"
},
Expand Down
100 changes: 54 additions & 46 deletions src/utils/shared.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,32 +7,35 @@ import moment from "moment-timezone/builds/moment-timezone-with-data"
* @param {String} sheffieldTime date/time to be parsed
* @returns {Object} return timezone and time for the user
*/
export function calculateUserLocalTime(sheffieldTime, timezone = "") {
moment.suppressDeprecationWarnings = true;
export function calculateUserLocalTime(sheffieldTime, timezone = "") {
moment.suppressDeprecationWarnings = true

// convert string to date
// convert string to date
if (typeof sheffieldTime == "string") {
sheffieldTime = moment.tz(sheffieldTime, "Europe/London");
sheffieldTime = moment.tz(sheffieldTime, "Europe/London")
}

// handle daylight saving time
if (sheffieldTime.isDST()) {
sheffieldTime.subtract(1, 'hours')
sheffieldTime.subtract(1, "hours")
}

// get user's timezone and convert
let userTimeZone = timezone || Intl.DateTimeFormat().resolvedOptions().timeZone;
let userTime;
let userTimeZone =
timezone || Intl.DateTimeFormat().resolvedOptions().timeZone
let userTime

if (userTimeZone == "Europe/London") {
userTime = moment(sheffieldTime).format("ddd DD MMMM YYYY, hh:mm A");
userTime = moment(sheffieldTime).format("ddd DD MMMM YYYY, hh:mm A")
} else {
userTime = moment.tz(sheffieldTime, userTimeZone).format("ddd DD MMMM YYYY, hh:mm A");
userTime = moment
.tz(sheffieldTime, userTimeZone)
.format("ddd DD MMMM YYYY, hh:mm A")
}

return {
time: userTime,
timezone: userTimeZone,
timezone: userTimeZone
}
}

Expand All @@ -43,9 +46,13 @@ import moment from "moment-timezone/builds/moment-timezone-with-data"
* @returns {object / string} an object contains image urls or an absolute path to the image
*/
export function getImageSource(node, source = false) {
let imagesrc;
if (node.frontmatter && node.frontmatter.thumbnail && node.frontmatter.thumbnail.childImageSharp) {
imagesrc = node.frontmatter.thumbnail.childImageSharp.gatsbyImageData;
let imagesrc
if (
node.frontmatter &&
node.frontmatter.thumbnail &&
node.frontmatter.thumbnail.childImageSharp
) {
imagesrc = node.frontmatter.thumbnail.childImageSharp.gatsbyImageData
} else {
const imageData = useStaticQuery(graphql`
query getImageFiles {
Expand All @@ -70,87 +77,88 @@ export function getImageSource(node, source = false) {
let imageArray = Object.values(imageData)
// choose a random image from the result
let imageToUse = imageArray[randomInteger(imageArray.length)]
imagesrc = imageToUse.childImageSharp.gatsbyImageData;
imagesrc = imageToUse.childImageSharp.gatsbyImageData
}

if(source === true) {
return getSrc(imagesrc);
if (source === true) {
return getSrc(imagesrc)
}
return imagesrc
}


export function randomInteger(max) {
const MAX = max ?? 100;
const MAX = max ?? 100

return Math.floor(Math.random() * MAX)
}

/**
* For a given number, if it is smaller than the minimum, return minimum
* If it is greater than the maximum, return maximum
* @param {number} num
* @param {number} min
* @param {number} max
* @returns
* @param {number} num
* @param {number} min
* @param {number} max
* @returns
*/
export function getNumberWithinRange(num, min, max) {
const MIN = min || 1;
const MAX = max || 5;
const NUM = parseFloat(num).toFixed(1);
return Math.min(Math.max(NUM, MIN), MAX);
const MIN = min || 1
const MAX = max || 5
const NUM = parseFloat(num).toFixed(1)
return Math.min(Math.max(NUM, MIN), MAX)
}

/**
* Generate share link, share message, and github link for MDX nodes
* @param {*} mdx
* @param {*} mdx
* @returns {object}
*
*
*/
export function getShareLinks(mdx) {
const folderName = mdx.fields.slugOrigin;
const type = mdx.frontmatter.type || "blog";
const folderName = mdx.fields.slugOrigin
const type = mdx.frontmatter.type || "blog"

const folderLink = `https://github.com/researchdata-sheffield/dataviz-hub2/tree/development/content/${type}${folderName}`
const githubLink = `${folderLink}index.mdx`;
const shareLink = `https://dataviz.shef.ac.uk/${mdx.fields.slug}`;
const shareMessage = `${mdx.frontmatter.title} - ${mdx.frontmatter.description}`;
const githubLink = `${folderLink}index.mdx`
const shareLink = `https://dataviz.shef.ac.uk${mdx.fields.slug}`
const shareMessage = `${mdx.frontmatter.title} - ${mdx.frontmatter.description}`

return {
folderLink: folderLink,
masterFolderLink: folderLink.replace("dataviz-hub2/tree/development", "dataviz-hub2/tree/master"),
masterFolderLink: folderLink.replace(
"dataviz-hub2/tree/development",
"dataviz-hub2/tree/master"
),
githubLink: githubLink,
shareLink: shareLink,
shareMessage: shareMessage
}
}


/**
* Return shorten text with specified number of words
* @param {String} text
* @param {Integer} numOfWords number of words to be retained
* @param {String} text
* @param {Integer} numOfWords number of words to be retained
* @returns {String} new shorten text
*/
export function shortenText(text, numOfWords) {
export function shortenText(text, numOfWords) {
let newText = text ? text.split(" ").splice(0, numOfWords) : ""

if (newText.length < numOfWords) {
return newText.join(" ")
}

return newText.join(" ").concat(" ...")
}

/**
* Check if current string is a URL
* @param {string} myString
* @param {string} myString
* @returns {boolean}
*/
export function checkURL(myString) {
export function checkURL(myString) {
if (myString.length == 0) {
return false;
return false
}

return (myString.includes("https://") || myString.includes("http://"));
}
return myString.includes("https://") || myString.includes("http://")
}

0 comments on commit e65ae9f

Please sign in to comment.