Implement <Notice />

posts/2013/get-started-with-ansible.md.disabled → posts/2013/get-started-with-ansible.md

@@ -4,6 +4,9 @@ title: Get started with Ansible in 2 minutes
 tags: [Development, Ansible]
 description: Provisioning servers is easy using Ansible. Here's a guide to set it up from scratch.
 ---
+<Notice archived>
+This post has been written in 2013.
+</Notice>
 
 [Ansible](http://ansible.com) is a fantastic tool for provisioning servers. I personally prefer it over Chef, Puppet and Salt. Here's how to get an Ansible project started.
 
@@ -16,8 +19,6 @@ brew install ansible            # OSX
 [sudo] pip install ansible      # elsewhere
 ```
 
-<!-- {.-terminal} -->
-
 ## Start your project
 
 Make the directory. Put this under version control, preferrably.
@@ -27,8 +28,6 @@ Make the directory. Put this under version control, preferrably.
 ~$ cd setup
 ```
 
-<!-- {.-terminal} -->
-
 ## Create an inventory file
 
 This is a list of hosts you want to manage, grouped into groups. (Hint: try
@@ -77,8 +76,6 @@ hosts
 playbook.yml
 ```
 
-<!-- {.-terminal} -->
-
 ```sh
 ~/setup$ ansible-playbook -i hosts playbook.yml
 PLAY [all] ********************************************************************
@@ -94,8 +91,6 @@ ok: [127.0.0.1]
 ...
 ```
 
-<!-- {.-wide} -->
-
 ## Further reading
 
 Ansible's source is available via GitHub: [ansible/ansible](https://github.com/ansible/ansible).

src/mdx-components/MyMDXProvider.tsx

@@ -3,13 +3,15 @@ import { MDXProvider } from '@mdx-js/react'
 import PreCode from './lib/PreCode'
 import H2Section from './lib/H2Section'
 import NextBlock from './lib/NextBlock'
+import Notice from './lib/Notice'
 import Figure from './lib/Figure'
 
 const components = {
   pre: PreCode,
   section: H2Section,
   figure: Figure,
   NextBlock,
+  Notice,
   Figure,
 }
 

src/mdx-components/lib/Notice.module.css

@@ -0,0 +1,3 @@
+.root {
+  @apply px-4 py-2 my-4 bg-yellow-100 text-yellow-900;
+}

src/mdx-components/lib/Notice.tsx

@@ -0,0 +1,13 @@
+import React from 'react'
+import CSS from './Notice.module.css'
+
+type Props = {
+  archived?: boolean
+  children: React.ReactNode
+}
+
+function Notice(props: Props) {
+  return <div className={CSS.root}>{props.children}</div>
+}
+
+export default Notice