diff --git a/README.md b/README.md index b258385..3866231 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,24 @@ -# Nuxt Content Starter +# Pumpkin Blog + +## Blog Post Format & YouTube Embeds + +- Posts are regular Markdown files in the `content/` folder and require frontmatter. Example frontmatter: + +```yaml +--- +date: yyyy-mm-dd +author: + name: Me + url: https://github.com/Me +title: Update - Day Month Year +--- +``` + +- To embed YouTube videos use the `Youtube` content component (with 11-character video ID): + +```md + +``` Look at the [Nuxt Content documentation](https://content.nuxt.com) to learn more. diff --git a/app/assets/css/main.css b/app/assets/css/main.css index c33eff3..a5d33bc 100644 --- a/app/assets/css/main.css +++ b/app/assets/css/main.css @@ -66,4 +66,22 @@ body { .prose code { @apply bg-surface text-primary px-1.5 py-0.5 rounded font-mono text-sm; } +} + +/* responsive container for youtube/video embeds generated by markdown */ +.embed-responsive { + position: relative; + width: 100%; + padding-bottom: 56.25%; + height: 0; + overflow: hidden; +} + +.embed-responsive iframe { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + border: 0; } \ No newline at end of file diff --git a/app/components/content/Youtube.vue b/app/components/content/Youtube.vue new file mode 100644 index 0000000..49c2eba --- /dev/null +++ b/app/components/content/Youtube.vue @@ -0,0 +1,15 @@ + + +