diff --git a/src/components/ResourceHeader/index.tsx b/src/components/ResourceHeader/index.tsx
index 1cfd7ee..965f00f 100644
--- a/src/components/ResourceHeader/index.tsx
+++ b/src/components/ResourceHeader/index.tsx
@@ -1,4 +1,4 @@
-import React from "react"
+import React, { Fragment } from "react"
import { StackedAvatars } from "../StackedAvatars"
import ChevronUp from "../../icons/chevron-up.svg"
@@ -10,6 +10,35 @@ interface ResourceHeaderProps {
createdAt: any
timeToRead: any
recommendedReading: any
+ externalResources: any
+}
+
+function ExtraLink({
+ item,
+ external = false,
+}: {
+ item: string
+ external?: boolean
+}) {
+ const Inner = () => (
+
+ {item}
+
+ )
+
+ if (external) {
+ return (
+
+
+
+ )
+ }
+
+ return (
+
+
+
+ )
}
export function ResourceHeader({
@@ -18,6 +47,7 @@ export function ResourceHeader({
createdAt,
timeToRead,
recommendedReading,
+ externalResources,
}: ResourceHeaderProps) {
const date = new Date(createdAt)
const month = date.toLocaleString("default", { month: "long" })
@@ -44,14 +74,19 @@ export function ResourceHeader({
Recommended reading
{recommendedReading.map(item => {
- return (
-
- {item}
-
- )
+ return
})}
)}
+
+ {externalResources && (
+
+ External Resources
+ {externalResources.map(item => {
+ return
+ })}
+
+ )}
)
}
diff --git a/src/components/ResourceHeader/styles.tsx b/src/components/ResourceHeader/styles.tsx
index 2474f28..a73fbe1 100644
--- a/src/components/ResourceHeader/styles.tsx
+++ b/src/components/ResourceHeader/styles.tsx
@@ -1,4 +1,5 @@
-import styled from "styled-components"
+import styled, { css } from "styled-components"
+import { Link } from "gatsby"
import { fontFamily, modularScale } from "../../design/typography"
export const ResourceHeaderWrapper = styled.div`
@@ -26,11 +27,15 @@ export const Meta = styled.div`
}
`
-export const RecommendedReading = styled.div`
+const ExtraLinks = styled.div`
margin-top: 16px;
`
-export const ReadLink = styled.div`
+export const RecommendedReading = styled(ExtraLinks)``
+
+export const ExternalResources = styled(ExtraLinks)``
+
+const extraLink = css`
display: flex;
align-items: center;
color: #04b0a6;
@@ -53,6 +58,14 @@ export const ReadLink = styled.div`
}
`
-export const ReadLinkText = styled.div`
+export const ExtraLinkInternal = styled(Link)`
+ ${extraLink};
+`
+
+export const ExtraLinkExternal = styled.a`
+ ${extraLink};
+`
+
+export const ExtraLinkText = styled.div`
text-decoration: underline;
`
diff --git a/src/content/resources/php/design-patterns/singleton.md b/src/content/resources/php/design-patterns/singleton.md
index cb7f3fa..b2e12cb 100644
--- a/src/content/resources/php/design-patterns/singleton.md
+++ b/src/content/resources/php/design-patterns/singleton.md
@@ -3,6 +3,15 @@ authors:
- "supergrecko#3434"
created_at: "2019/07/27"
title: Singletons
+external_resources:
+ - https://en.wikipedia.org/wiki/Singleton_pattern
+ - https://phpenthusiast.com/blog/the-singleton-design-pattern-in-php
+ - https://phptherightway.com/pages/Design-Patterns.html#singleton
+ - https://www.php.net/manual/en/language.oop5.static.php
+ - https://www.php.net/manual/en/language.oop5.late-static-bindings.php
+ - https://en.wikipedia.org/wiki/Static_(keyword)
+ - https://en.wikipedia.org/wiki/Null_coalescing_operator
+ - https://www.php.net/manual/en/migration70.new-features.php#migration70.new-features.null-coalesce-op
---
A singleton is a class which is only instantiated once during runtime. This is done by keeping a static property containing its instance on the singleton class.
@@ -91,24 +100,3 @@ $first->setWord("Banana");
// the test will still pass, because it's a singleton.
var_dump($first->getWord() === $second->getWord()); // bool(true)
```
-
-## Further Research
-
-Here's a couple links which will help you understand Singletons better.
-
-## Singleton Resources:
-
-- https://en.wikipedia.org/wiki/Singleton_pattern
-- https://phpenthusiast.com/blog/the-singleton-design-pattern-in-php
-- https://phptherightway.com/pages/Design-Patterns.html#singleton
-
-## Static Keyword Resources:
-
-- https://www.php.net/manual/en/language.oop5.static.php
-- https://www.php.net/manual/en/language.oop5.late-static-bindings.php
-- https://en.wikipedia.org/wiki/Static_(keyword)
-
-## The Null-Coalescing Operator Resources:
-
-- https://en.wikipedia.org/wiki/Null_coalescing_operator
-- https://www.php.net/manual/en/migration70.new-features.php#migration70.new-features.null-coalesce-op
diff --git a/src/templates/languagePost.tsx b/src/templates/languagePost.tsx
index c808d59..c5f1f5d 100644
--- a/src/templates/languagePost.tsx
+++ b/src/templates/languagePost.tsx
@@ -17,6 +17,7 @@ function LanguagePost({ data }: any) {
createdAt={frontmatter.created_at}
timeToRead={timeToRead}
recommendedReading={frontmatter.recommended_reading}
+ externalResources={frontmatter.external_resources}
/>
@@ -41,6 +42,7 @@ export const query = graphql`
created_at
title
recommended_reading
+ external_resources
}
timeToRead
}